/* ========================================================================== Design tokens — BeyondBMI v3 Strategy: COMMITTED clinical blue. Deep navy carries body/ink, clinical blue carries CTAs and key accents. Lime drops to a small highlight role. Reference scene: a clinician's consulting room — calm, high-trust, white walls, navy stationery, one quiet ribbon of green. Premium-medical, not wellness-cute. ========================================================================== */ /* ========================================================================== Self-hosted Poppins (latin subset). Replaces the previous fonts.googleapis.com enqueue that was costing ~750ms of render-blocking time per Lighthouse. WOFF2 files live in /assets/fonts/poppins-NNN.woff2 (~8 KB each). Weights used across the theme: 400, 500, 600, 700, 800. ========================================================================== */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/poppins-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/poppins-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/poppins-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/poppins-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('../assets/fonts/poppins-800.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ---------- Brand: clinical blue (now primary accent) ---------- */ --bb-blue: #65A1BC; /* primary CTA, key accents */ --bb-blue-deep: #3F7E99; /* hover */ --bb-blue-text: #225A75; /* AA-compliant blue for text accents on white */ --bb-blue-soft: #E6EFF4; /* tint background for badges, highlights */ --bb-blue-wash: #F5F9FB; /* near-white blue tint for alt sections */ /* ---------- Brand: deep navy (ink + dark surfaces) ---------- */ --bb-ink: #053F5C; /* deep navy — body, headings, brand */ --bb-ink-deep: #032E45; /* deeper navy for dark surfaces */ --bb-ink-soft: #2B5165; /* secondary text */ --bb-muted: #5C6F77; /* AA-compliant muted gray */ /* ---------- Lime (now SECONDARY accent only) ---------- */ --bb-green: #A5DB73; /* small accents only — highlight pills, dots */ --bb-green-deep: #6FAF42; /* rare hover/UI — fails AA on white for text */ --bb-green-text: #266314; /* AA-compliant green when used as text accent */ --bb-green-soft: #DCEFCC; /* tint for highlight badges */ /* ---------- Surfaces ---------- */ --bb-paper: #FFFFFF; /* primary background */ --bb-paper-soft: #F5F9FB; /* alt section bg with subtle blue tint */ --bb-paper-warm: #F7F3ED; /* warm cream wash for editorial sections */ --bb-card: #FFFFFF; /* card surface */ --bb-divider: #E2E8E5; --bb-divider-soft: #F0F2F4; --bb-divider-dark: rgba(255, 255, 255, 0.16); /* ---------- Inverted (dark navy) sections ---------- */ --bb-dark: #053F5C; --bb-dark-deep: #032E45; --bb-dark-card: #0A4D70; --bb-dark-text: #F2F4F4; --bb-dark-muted: #94B1BF; /* ---------- Functional ---------- */ --bb-positive: #2F7A4D; --bb-warn: #B34433; --bb-google: #F4B400; --bb-google-yellow:#FFB400; --bb-shadow: rgba(5, 63, 92, 0.08); --bb-shadow-soft: rgba(5, 63, 92, 0.04); --bb-shadow-deep: rgba(5, 63, 92, 0.18); /* ---------- Typography (Poppins-led, brand-mandated) ---------- */ --font-display: 'Poppins', system-ui, -apple-system, sans-serif; --font-body: 'Poppins', system-ui, -apple-system, sans-serif; --font-numeric: 'Poppins', system-ui, sans-serif; /* Type scale */ --fs-h1: clamp(2.5rem, 5.2vw, 4.2rem); --fs-h1-mega: clamp(3rem, 6.4vw, 5.2rem); --fs-h2: clamp(2rem, 4.2vw, 3.1rem); --fs-h3: clamp(1.35rem, 2.4vw, 1.8rem); --fs-h4: 1.2rem; --fs-eyebrow: 0.72rem; --fs-body: 1.02rem; --fs-body-large: 1.15rem; --fs-small: 0.9rem; --fs-stat: clamp(2.6rem, 5vw, 3.8rem); /* Line heights */ --lh-tight: 1.02; --lh-snug: 1.18; --lh-normal: 1.5; --lh-relaxed: 1.7; /* Letter spacing — extra tight on display for premium-medical impact */ --ls-eyebrow: 0.18em; --ls-display: -0.03em; --ls-display-mega: -0.04em; /* ---------- Layout ---------- */ --container: 1360px; --container-narrow: 920px; --container-wide: 1480px; --gutter: clamp(1.25rem, 4vw, 2.75rem); --section-py: clamp(5rem, 9vw, 7.5rem); --section-py-tight: clamp(3rem, 5vw, 4.5rem); /* Radii — slightly larger for premium feel */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 36px; --r-pill: 999px; /* Motion — exponential ease, no bounce (impeccable rule) */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* expo */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 180ms; --dur: 320ms; --dur-slow: 720ms; /* Z-index */ --z-nav: 50; --z-modal: 100; --z-grain: 9999; }