/* Fuji adaptive presale — token system (R2) * Per CLAUDE-DESIGN-HANDOFF-02 cohort theme tokens + Round 2 mobile + glossy. * Tokens are mutated at runtime by ThemeProvider via [data-*] attributes on . * * Breakpoint matrix (mobile-first): * ≤375px iPhone SE / small mobile * 376-414 standard mobile * 415-768 large mobile / small tablet * ≥769 desktop */ :root { /* === Universal baseline === */ /* V3 (2026-05-24): bumped base from 16→17 per gap analysis B.1 (older-user readability). * AAA contrast for secondary text (#616675 → #4B5160). Touch target floor 44→48. */ --base-font-size: 17px; --line-height-base: 1.6; --letter-spacing-base: 0; --transition-ms: 240ms; --easing-out: cubic-bezier(0.16, 1, 0.3, 1); --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --touch-target-min: 48px; --radius-card: 16px; --radius-input: 12px; --radius-button: 14px; --radius-pill: 999px; /* V3 section rhythm — single scale (gap §B.3 fix) */ --section-padding-block: clamp(56px, 12vw, 112px); --section-padding-block-tight: clamp(40px, 8vw, 72px); /* === Cohort accent (HSL-derived) === */ --cohort-accent-hue: 248; --cohort-accent-saturation: 90%; --cohort-accent-lightness: 60%; --cohort-accent: hsl(var(--cohort-accent-hue) var(--cohort-accent-saturation) var(--cohort-accent-lightness)); --cohort-accent-soft: hsl(var(--cohort-accent-hue) var(--cohort-accent-saturation) 96%); --cohort-accent-line: hsl(var(--cohort-accent-hue) var(--cohort-accent-saturation) 88%); --cohort-accent-strong: hsl(var(--cohort-accent-hue) var(--cohort-accent-saturation) 45%); --cohort-accent-deep: hsl(var(--cohort-accent-hue) var(--cohort-accent-saturation) 38%); --cohort-accent-ink: hsl(var(--cohort-accent-hue) 30% 22%); /* === Brand (Fuji placeholder; Trust-Clinical archetype default) === */ --brand-primary: var(--cohort-accent); --brand-secondary: hsl(174 84% 39%); /* verified teal */ --brand-secondary-soft: hsl(174 60% 96%); --brand-bg: hsl(40 25% 97%); /* warm off-white #FAFAF7 */ --brand-bg-elev: hsl(40 33% 99%); --brand-bg-sunken: hsl(40 15% 94%); --brand-text: hsl(225 14% 11%); /* primary ink — 16.4:1 contrast (AAA) */ --brand-text-muted: hsl(222 17% 28%); /* V3: was hsl(225 9% 42%) — lifted to ~9.5:1 (AAA) */ --brand-text-soft: hsl(222 14% 33%); /* V3: was hsl(225 9% 58%) (#616675) — lifted to ~7.4:1 (AAA) */ --brand-border: hsl(35 14% 87%); --brand-border-strong: hsl(35 12% 78%); --brand-danger: hsl(348 65% 54%); --brand-warning: hsl(36 78% 50%); --brand-success: hsl(160 60% 38%); /* === Typography === */ /* Font stack 2026-05-23 NIGHT+ — operator anchor "HUGE makeover not medMD at all looks really bad" * Replaced Fraunces (quirky-decorative) with editorial-medical pairing: * - Source Serif 4 for hero h1/h2 (Adobe's editorial serif; reads as medical-textbook authority) * - Plus Jakarta Sans for body + nav (warmer + more contemporary than Inter; what most premium DTC health uses) * - JetBrains Mono kept for numerals (eyebrows, prices, batch IDs) * Final fallback: Inter (preloaded; matches existing system font stack) */ --font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-display: 'Plus Jakarta Sans', 'Inter Tight', 'Inter', sans-serif; --font-serif: 'Source Serif 4', 'Source Serif Pro', 'Newsreader', Georgia, serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Mono', Consolas, monospace; --hero-display-family: var(--font-serif); --cohort-body-size: var(--base-font-size); --cohort-display-tracking: -0.03em; --cohort-heading-weight: 620; --cohort-body-weight: 420; /* === Layout === */ --gap-1: 4px; --gap-2: 8px; --gap-3: 12px; --gap-4: 16px; --gap-5: 20px; --gap-6: 24px; --gap-8: 32px; --gap-10: 40px; --gap-12: 56px; --gap-16: 80px; --safe-padding: 24px; --container-max: 1240px; --sticky-bottom-offset: 0px; /* mobile sticky CTA bumps this up */ --shadow-sm: 0 1px 2px hsl(225 14% 11% / 0.04), 0 0 0 1px hsl(225 14% 11% / 0.04); --shadow-md: 0 2px 6px hsl(225 14% 11% / 0.05), 0 0 0 1px hsl(225 14% 11% / 0.05); --shadow-lg: 0 12px 32px hsl(225 20% 11% / 0.10), 0 0 0 1px hsl(225 14% 11% / 0.05); --shadow-glow: 0 4px 14px hsl(var(--cohort-accent-hue) var(--cohort-accent-saturation) 50% / 0.32), 0 1px 0 rgba(255,255,255,0.20) inset; --shadow-glow-hover: 0 8px 22px hsl(var(--cohort-accent-hue) var(--cohort-accent-saturation) 50% / 0.42), 0 1px 0 rgba(255,255,255,0.24) inset; } /* ============ Age-bracket overrides (per CLAUDE-DESIGN-HANDOFF-02 + V3 gap analysis B.1) ============ */ [data-age-bracket='18-29'] { --base-font-size: 16px; /* V3: bumped from 15 — still snappy but readable */ --cohort-accent-saturation: 100%; --transition-ms: 220ms; --touch-target-min: 46px; --cohort-heading-weight: 680; --cohort-display-tracking: -0.035em; } [data-age-bracket='30-44'] { --base-font-size: 17px; /* matches root */ --cohort-accent-saturation: 90%; --transition-ms: 240ms; --touch-target-min: 48px; } [data-age-bracket='45-59'] { --base-font-size: 19px; /* V3: 18 → 19 */ --cohort-accent-saturation: 75%; --transition-ms: 300ms; --touch-target-min: 52px; --cohort-heading-weight: 600; --cohort-display-tracking: -0.025em; } [data-age-bracket='60+'] { --base-font-size: 21px; /* V3: 20 → 21 — visible jump per A-NEW-PEP-1 */ --cohort-accent-saturation: 72%; --transition-ms: 350ms; --touch-target-min: 56px; /* V3: 50 → 56 — generous, never accidental */ --line-height-base: 1.65; --letter-spacing-base: 0.005em; --cohort-heading-weight: 600; --cohort-display-tracking: -0.02em; } /* ============ Gender overrides ============ */ [data-cohort-gender='f'] { --cohort-accent-hue: 340; --brand-secondary: hsl(340 60% 56%); } [data-cohort-gender='m'] { --cohort-accent-hue: 218; --brand-secondary: hsl(220 65% 52%); } [data-cohort-gender='unknown'] { --cohort-accent-hue: 248; } /* ============ Archetype overrides ============ */ [data-archetype='lifestyle-dtc'] { --brand-bg: hsl(34 50% 97%); --brand-bg-elev: hsl(34 60% 99%); --brand-bg-sunken: hsl(34 35% 93%); --brand-border: hsl(28 20% 88%); --brand-secondary: hsl(18 85% 62%); --cohort-accent-saturation: 95%; --radius-card: 22px; --radius-button: 16px; } [data-archetype='lifestyle-dtc'][data-cohort-gender='m'] { --brand-secondary: hsl(204 70% 50%); } /* Sage/clay alternative palette (operator-comparison; Tweak-driven) */ [data-archetype='clinical-sage'] { --cohort-accent-hue: 158; --cohort-accent-saturation: 32%; --cohort-accent-lightness: 38%; --brand-bg: hsl(36 18% 96%); --brand-bg-elev: hsl(36 22% 98%); --brand-bg-sunken: hsl(36 14% 92%); --brand-text: hsl(28 12% 16%); --brand-border: hsl(36 14% 86%); --brand-secondary: hsl(22 38% 48%); /* clay */ } /* ============ Dark mode ============ */ [data-theme='dark'] { --brand-bg: hsl(228 22% 7%); --brand-bg-elev: hsl(228 18% 11%); --brand-bg-sunken: hsl(228 24% 5%); --brand-text: hsl(220 14% 94%); --brand-text-muted: hsl(220 10% 68%); --brand-text-soft: hsl(220 8% 52%); --brand-border: hsl(228 18% 18%); --brand-border-strong: hsl(228 16% 26%); --brand-secondary-soft: hsl(174 35% 14%); --cohort-accent-lightness: 72%; --cohort-accent-soft: hsl(var(--cohort-accent-hue) 35% 14%); --cohort-accent-line: hsl(var(--cohort-accent-hue) 35% 22%); --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.5), 0 0 0 1px hsl(0 0% 100% / 0.04); --shadow-md: 0 2px 8px hsl(0 0% 0% / 0.5), 0 0 0 1px hsl(0 0% 100% / 0.05); --shadow-lg: 0 16px 40px hsl(0 0% 0% / 0.55), 0 0 0 1px hsl(0 0% 100% / 0.06); } @media (prefers-reduced-motion: reduce) { :root { --transition-ms: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } [data-motion='off'] { --transition-ms: 0ms; } /* ============ Base ============ */ html, body { margin: 0; padding: 0; background: var(--brand-bg); color: var(--brand-text); font-family: var(--font-sans); font-size: var(--base-font-size); line-height: var(--line-height-base); letter-spacing: var(--letter-spacing-base); font-weight: var(--cohort-body-weight); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background var(--transition-ms) var(--easing-out), color var(--transition-ms) var(--easing-out); } body { padding-bottom: var(--sticky-bottom-offset); } * { box-sizing: border-box; } *::selection { background: var(--cohort-accent-soft); color: var(--cohort-accent-strong); } /* ============ Hero display heading (premium serif by default) ============ */ .hero-display { font-family: var(--hero-display-family); font-weight: 500; letter-spacing: -0.02em; line-height: 1.02; text-wrap: balance; font-feature-settings: 'ss01', 'kern' 1, 'liga' 1; } [data-hero-type='sans'] .hero-display { font-family: var(--font-display); font-weight: 680; letter-spacing: -0.035em; line-height: 1.04; } /* ============ Quiz 5-stage progress indicator ============ */ .stage-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; width: 100%; max-width: 580px; margin: 0 auto; } .stage-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; } .stage-cell + .stage-cell::before { content: ''; position: absolute; height: 1.5px; top: 9.5px; left: -50%; right: 50%; background: var(--brand-border); z-index: 0; } .stage-cell.past + .stage-cell::before, .stage-cell.current + .stage-cell::before { background: linear-gradient(90deg, var(--cohort-accent), var(--brand-secondary)); } .stage-dot { width: 20px; height: 20px; border-radius: 999px; background: var(--brand-bg); border: 1.5px solid var(--brand-border); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; color: var(--brand-text-soft); position: relative; z-index: 1; transition: all var(--transition-ms) var(--easing-out); } .stage-cell.past .stage-dot { background: var(--cohort-accent); border-color: var(--cohort-accent); color: white; } .stage-cell.current .stage-dot { background: var(--brand-bg-elev); border-color: var(--cohort-accent); color: var(--cohort-accent-strong); box-shadow: 0 0 0 4px hsl(var(--cohort-accent-hue) var(--cohort-accent-saturation) 50% / 0.15); } .stage-lbl { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-text-soft); white-space: nowrap; text-align: center; } .stage-cell.current .stage-lbl, .stage-cell.past .stage-lbl { color: var(--brand-text); font-weight: 600; } @media (max-width: 540px) { .stage-lbl { display: none; } .stage-track { max-width: 280px; } } /* R4-01 + R4-08 CRIT/HIGH mobile overflow fix (operator-flagged R4 NIGHT+). * Mobile checkout had +213px overflow (588 vs 375); landing had +46px overflow. * Root cause: checkout 2-col grid not collapsing + organic-blob bleeding past container. * Fix: global overflow-x clip + force 1-col grids below 768px breakpoint. */ @media (max-width: 768px) { html, body { overflow-x: hidden; max-width: 100vw; } /* Checkout 2-col grid -> 1-col on mobile (was overflowing) */ .checkout-grid, .results-grid { grid-template-columns: 1fr !important; } /* Organic blob clamped within viewport */ .organic-blob { max-width: 80vw !important; } } /* ============ Organic blob background (hero composition) ============ */ .organic-blob { position: absolute; pointer-events: none; filter: blur(50px); opacity: 0.5; transition: opacity var(--transition-ms) var(--easing-out), background var(--transition-ms) var(--easing-out); } /* ============ Floating + iPhone mock cards (hero composition) ============ */ .float-card { background: var(--brand-bg-elev); border: 1px solid var(--brand-border); border-radius: 14px; padding: 12px 14px; box-shadow: 0 14px 36px hsl(225 20% 11% / 0.10), 0 2px 4px hsl(225 14% 11% / 0.06); } [data-theme='dark'] .float-card { background: color-mix(in srgb, var(--brand-bg-elev) 92%, transparent); backdrop-filter: blur(8px); } .iphone-mock { background: linear-gradient(180deg, hsl(228 22% 11%) 0%, hsl(228 22% 8%) 100%); border-radius: 32px; padding: 8px; box-shadow: 0 30px 60px hsl(228 22% 11% / 0.25), 0 10px 20px hsl(228 22% 11% / 0.15), inset 0 0 0 1px rgba(255,255,255,0.08); position: relative; } .iphone-mock-screen { background: var(--brand-bg); border-radius: 24px; overflow: hidden; aspect-ratio: 9/19; position: relative; } .iphone-notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 60px; height: 18px; background: hsl(228 22% 8%); border-radius: 999px; z-index: 5; } /* Citation row — horizontal scroll on mobile */ .citation-row { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: flex-start; } @media (max-width: 768px) { .citation-row { overflow-x: auto; flex-wrap: nowrap; padding: 0 var(--safe-padding); margin: 0 calc(-1 * var(--safe-padding)); } .citation-row::-webkit-scrollbar { display: none; } } .cohort-shift { transition: background var(--transition-ms) var(--easing-out), border-color var(--transition-ms) var(--easing-out), color var(--transition-ms) var(--easing-out), box-shadow var(--transition-ms) var(--easing-out); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--cohort-heading-weight); letter-spacing: var(--cohort-display-tracking); line-height: 1.08; margin: 0; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-text-muted); font-weight: 500; } button:focus-visible, a:focus-visible, input:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--cohort-accent); outline-offset: 2px; border-radius: 4px; } /* ============ Animations ============ */ @keyframes sweep { 0% { transform: translateX(-110%); } 100% { transform: translateX(110%); } } @keyframes pulse-soft { 0%, 100% { box-shadow: 0 0 0 0 hsl(var(--cohort-accent-hue) var(--cohort-accent-saturation) 60% / 0.35); } 50% { box-shadow: 0 0 0 10px hsl(var(--cohort-accent-hue) var(--cohort-accent-saturation) 60% / 0); } } @keyframes fade-in-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* Glossy CTA idle pulse — subtle, every 5s (TrimRX-style attention-pull) */ @keyframes cta-idle-pulse { 0%, 80%, 100% { box-shadow: var(--shadow-glow); } 88%, 92% { box-shadow: var(--shadow-glow-hover), 0 0 0 6px hsl(var(--cohort-accent-hue) var(--cohort-accent-saturation) 60% / 0.10); } } /* ============ Container ============ */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--safe-padding); } /* ============ MOBILE BREAKPOINTS ============ */ @media (max-width: 768px) { :root { --safe-padding: 16px; --gap-8: 24px; --gap-10: 32px; --gap-12: 40px; --gap-16: 56px; } /* Touch target floor — overrides age bracket if smaller */ :root[data-age-bracket='18-29'] { --touch-target-min: 44px; } :root[data-age-bracket='60+'] { --touch-target-min: 52px; } } @media (max-width: 414px) { :root { --base-font-size: 15px; } } @media (max-width: 375px) { :root { --safe-padding: 14px; --base-font-size: 14.5px; } } /* Utility: hide on mobile / hide on desktop */ .hide-mobile { display: initial; } .show-mobile { display: none; } .hide-tablet { display: initial; } @media (max-width: 768px) { .hide-mobile { display: none !important; } .show-mobile { display: initial; } } @media (max-width: 1024px) { .hide-tablet { display: none !important; } } /* Horizontal-scroll snap row (used for physicians + testimonials on mobile) */ .h-scroll { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; margin: 0 calc(var(--safe-padding) * -1); padding-left: var(--safe-padding); padding-right: var(--safe-padding); } .h-scroll::-webkit-scrollbar { display: none; } .h-scroll > * { flex: 0 0 86%; scroll-snap-align: start; } @media (min-width: 480px) { .h-scroll > * { flex: 0 0 70%; } } /* ============ Hamburger drawer ============ */ .drawer-bg { position: fixed; inset: 0; z-index: 50; background: rgba(11,15,26,0.45); backdrop-filter: blur(4px); animation: fade-in 200ms var(--easing-out) both; } .drawer-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 51; width: 84vw; max-width: 360px; background: var(--brand-bg); border-left: 1px solid var(--brand-border); box-shadow: var(--shadow-lg); animation: drawer-in 240ms var(--easing-out) both; display: flex; flex-direction: column; } @keyframes drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }