/* ============================================================ BIOFITEA HEALTH — Design Foundations Colors + Typography tokens Source: Digital Lookbook / Brand Guide 2026 (REJ Diamond Laboratories) ============================================================ */ /* ----- Webfonts ----------------------------------------------------------- Display / Headlines : "Branding SF" → substituted with Montserrat (SEE README) Subheads / Body / UI : Arial / Helvetica Neue (per brand guide — system stack) Logo wordmark : bold transitional serif → substituted with Tinos (Times-compatible) -------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Tinos:ital,wght@0,400;0,700;1,400&display=swap'); :root { /* ---------- Brand palette (the "three tones" + foundations) ---------- */ --bf-teal: #1B4848; /* primary dark — backgrounds, dark sections */ --bf-teal-700: #143838; /* deeper teal — pressed / footer */ --bf-teal-300: #4D7370; /* muted teal — borders/dividers on dark */ --bf-ink: #042B43; /* navy ink — headings on light surfaces */ --bf-cream: #F6F4DF; /* signature cream — light bg / text on dark */ --bf-cream-2: #ECE8C9; /* deeper cream — cards/insets on cream */ --bf-black: #161616; /* near-black — logo & body text on white */ --bf-white: #FFFFFF; /* The three aura tones */ --bf-green: #22BC06; /* leaf green */ --bf-green-700: #1A9405; --bf-yellow: #FFD400; /* bright yellow */ --bf-yellow-700: #E8B800; --bf-orange: #F5870B; /* signature orange — primary accent */ --bf-orange-700: #D9720A; /* hover/pressed orange */ /* ---------- Aura gradients (assigned per product) ---------- */ --aura-electrolytes: linear-gradient(135deg, var(--elec-orange) 0%, var(--elec-yellow) 100%); /* orange + yellow (official) */ --aura-acv: linear-gradient(135deg, var(--bf-yellow) 0%, var(--bf-green) 100%); /* yellow + green */ --aura-collagen: linear-gradient(135deg, var(--bf-green) 0%, var(--bf-orange) 100%); /* green + orange */ --aura-biofitea: linear-gradient(110deg, var(--bf-green) 0%, var(--bf-yellow) 50%, var(--bf-orange) 100%); /* all three */ /* ---------- Electrolytes product palette (official Pantone spec) ---------- */ --elec-yellow: #FFFA3C; /* primary yellow */ --elec-yellow-2: #F5EA36; /* secondary yellow */ --elec-orange: #ED5E00; /* electrolytes orange */ --elec-green: #2BB152; /* electrolytes green */ --elec-darkgreen: #014133; /* label dark green */ --elec-blue: #316191; /* accent blue */ /* ---------- Semantic surfaces ---------- */ --bf-bg: var(--bf-cream); --bf-bg-dark: var(--bf-teal); --bf-surface: var(--bf-white); --bf-text: var(--bf-black); --bf-text-muted: #5A5A52; --bf-text-on-dark: var(--bf-cream); --bf-heading: var(--bf-ink); --bf-accent: var(--bf-orange); --bf-border: rgba(4, 43, 67, 0.14); --bf-border-dark: rgba(246, 244, 223, 0.18); /* ---------- Type families ---------- */ --bf-font-display: 'Montserrat', 'Branding SF', 'Helvetica Neue', Arial, sans-serif; --bf-font-body: 'Helvetica Neue', Arial, 'Liberation Sans', sans-serif; --bf-font-logo: 'Tinos', 'Times New Roman', Times, serif; /* ---------- Type scale (display = Montserrat, tight tracking) ---------- */ --bf-display-1: 800 clamp(56px, 9vw, 132px)/0.92 var(--bf-font-display); --bf-display-2: 800 clamp(40px, 6vw, 84px)/0.95 var(--bf-font-display); --bf-h1: 800 clamp(34px, 4vw, 56px)/1.02 var(--bf-font-display); --bf-h2: 700 clamp(26px, 3vw, 40px)/1.06 var(--bf-font-display); --bf-h3: 700 22px/1.2 var(--bf-font-display); --bf-eyebrow: 700 13px/1.4 var(--bf-font-display); --bf-body-lg: 400 19px/1.55 var(--bf-font-body); --bf-body: 400 16px/1.6 var(--bf-font-body); --bf-body-sm: 400 14px/1.55 var(--bf-font-body); --bf-caption: 700 12px/1.4 var(--bf-font-body); /* Tracking conventions */ --bf-track-display: -0.01em; /* tight on big display */ --bf-track-eyebrow: 0.16em; /* wide on eyebrows/labels */ --bf-track-logo: 0.02em; /* BIOFITEA tight */ --bf-track-logo-sub: 0.42em; /* HEALTH widely letterspaced */ /* ---------- Radii ---------- */ --bf-radius-sm: 6px; --bf-radius: 10px; --bf-radius-lg: 18px; --bf-radius-pill: 999px; /* ---------- Shadows / elevation ---------- */ --bf-shadow-sm: 0 1px 2px rgba(4,43,67,0.06), 0 2px 6px rgba(4,43,67,0.06); --bf-shadow: 0 6px 20px rgba(4,43,67,0.10); --bf-shadow-lg: 0 18px 50px rgba(4,43,67,0.16); /* ---------- Spacing (8px base) ---------- */ --bf-space-1: 4px; --bf-space-2: 8px; --bf-space-3: 12px; --bf-space-4: 16px; --bf-space-5: 24px; --bf-space-6: 32px; --bf-space-7: 48px; --bf-space-8: 64px; --bf-space-9: 96px; /* ---------- Motion ---------- */ --bf-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */ --bf-dur: 220ms; /* @kind other */ } /* ============================================================ Semantic element styles — import this file then use classes ============================================================ */ .bf-display-1 { font: var(--bf-display-1); letter-spacing: var(--bf-track-display); } .bf-display-2 { font: var(--bf-display-2); letter-spacing: var(--bf-track-display); } .bf-h1 { font: var(--bf-h1); letter-spacing: var(--bf-track-display); color: var(--bf-heading); } .bf-h2 { font: var(--bf-h2); color: var(--bf-heading); } .bf-h3 { font: var(--bf-h3); color: var(--bf-heading); } .bf-eyebrow { font: var(--bf-eyebrow); letter-spacing: var(--bf-track-eyebrow); text-transform: uppercase; color: var(--bf-accent); } .bf-body-lg { font: var(--bf-body-lg); } .bf-body { font: var(--bf-body); } .bf-body-sm { font: var(--bf-body-sm); color: var(--bf-text-muted); } /* Logo wordmark (type-set lockup) */ .bf-logo { font-family: var(--bf-font-logo); font-weight: 700; line-height: 0.9; color: currentColor; text-align: center; display: inline-flex; flex-direction: column; align-items: center; } .bf-logo .bf-logo-name { font-size: 1em; letter-spacing: var(--bf-track-logo); } .bf-logo .bf-logo-sub { font-size: 0.34em; letter-spacing: var(--bf-track-logo-sub); text-indent: var(--bf-track-logo-sub); /* optical centering for tracked caps */ font-weight: 400; margin-top: 0.18em; }