/* ============================================================ FBM · LIGHT FUTURE-STYLE OVERRIDE (shared, site-wide) Load AFTER site.css on every page. Flips the dark engine theme to Future.co's light editorial system: · warm-grey / white surfaces · Fraunces serif headings + Inter body · charcoal ink (gold accents → charcoal) · pill buttons, white cards, light nav/footer Requires the Fraunces + Inter font in . ============================================================ */ :root{ --ink:#F4F3F0; --ink-1:#FFFFFF; --ink-2:#FBFAF8; --ink-3:#F0EEEA; --line:rgba(20,24,28,.08); --line-2:rgba(20,24,28,.12); --line-3:rgba(20,24,28,.18); --gold:#14181C; --gold-2:#14181C; --gold-3:#0B0F14; --ivory:#14181C; --dim-1:rgba(20,24,28,.88); --dim-2:rgba(20,24,28,.64); --dim-3:rgba(20,24,28,.60); --dim-deco:rgba(20,24,28,.34); --card:#FFFFFF; --border:rgba(20,24,28,.12); /* ── Blueprint token layer (2026-07-11) · semantic names for all new components ── Values match the light system above 1:1 — this is an additive alias layer, not a re-theme. New blueprint-sourced markup (live page, sample-week, reviews, nutrition showcase, nav drawer) references these names directly. */ --bg-ivory:#FBF9F4; --bg-bone:#F3EEE4; --ink-primary:#0F0F0F; --ink-muted:rgba(15,15,15,.65); --ink-dim:rgba(15,15,15,.45); --accent-gold:#B08339; --gold-warm:#D4A148; --gold-light:#E8BC6A; --border-subtle:rgba(15,15,15,.08); --font-serif:'Fraunces',Georgia,serif; --font-sans:'Inter',system-ui,sans-serif; --font-mono:'Space Mono',monospace; --radius-premium:24px; --transition-smooth:all .25s cubic-bezier(.2,.8,.2,1); } /* Base resets to prevent browser style leakage on iOS/Mobile-web (Section 1.2) */ input,select,button{ font-family:var(--font-sans); -webkit-appearance:none; appearance:none; } input,select{ border-radius:8px; border:1px solid var(--border-subtle); background-color:#fff; color:var(--ink-primary); } .btn,.opt,.audience-card,select,input{ min-height:48px; } html,body{ background:#F4F3F0 !important; color:#14181C !important; font-family:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif !important; } /* kill the dark radial-glow body background + gold hairline + section-bg pseudos */ body{background-image:none !important} body::before,body::after, body[class*="bg-"]::before,body[class*="bg-"]::after, html::before,html::after{display:none !important;content:none !important;background:none !important} /* kill every cinematic FX layer (dark video / particle canvases / scrim / gold rays) */ #fx-canvas,#fx-canvas-3d,#fx-scrim,#bg-canvas,#fx-reveal-canvas, .page-bg-video,video.page-bg-video,[class*="page-bg"], [id*="fx-canvas"],[id*="fx-reveal"],canvas[id*="fx"]{ display:none !important;opacity:0 !important;visibility:hidden !important; } /* ── headings → Fraunces serif, charcoal ── */ h1,h2,h3,h4,h1.display,h2.section-h,.serif{ font-family:'Fraunces',Georgia,serif !important; color:#14181C !important;letter-spacing:-.01em !important; } h1.display .accent,h2.section-h .accent,.accent{ color:#14181C !important;-webkit-text-fill-color:#14181C !important;background:none !important; } .lede,.section-sub{color:rgba(20,24,28,.62) !important} .eyebrow,.eyebrow .num{font-family:'Inter',sans-serif !important;color:rgba(20,24,28,.50) !important} p,li,span,small{color:inherit} .muted{color:rgba(20,24,28,.58) !important} /* ── NAV → light, charcoal links, dark pill CTA ── */ .nav{background:rgba(244,243,240,.86) !important;border-bottom:1px solid var(--line) !important;backdrop-filter:saturate(1.2) blur(10px) !important} .nav.scrolled{background:rgba(244,243,240,.96) !important;border-bottom-color:var(--line-2) !important} .nav-brand,.nav-brand .em{color:#14181C !important} .nav-link{color:rgba(20,24,28,.66) !important} .nav-link:hover,.nav-link.active{color:#14181C !important} .nav-cta{background:#14181C !important;color:#fff !important;border-radius:100px !important;border:none !important} .nav-cta:hover{background:#0B0F14 !important} .nav-burger{border-color:var(--line-2) !important} .nav-burger .nb-bars::before,.nav-burger .nb-bars::after,.nav-burger .nb-bars span{background:#14181C !important} .nav-overlay{background:rgba(244,243,240,.98) !important} .nav-overlay a,.nav-overlay-link{color:#14181C !important} .nav-overlay a.nav-overlay-cta,.nav-overlay a.nav-overlay-cta:hover{background:#14181C !important;color:#fff !important;border-radius:100px !important} /* ── buttons → pills ── */ .btn,.cta,.cta-primary,.nav-cta,.btn-light,button.primary{border-radius:100px !important} .btn-primary,.cta-primary,.btn-light,.btn-dark{background:#14181C !important;color:#fff !important;border:none !important;border-radius:100px !important} .btn-primary:hover,.cta-primary:hover{background:#0B0F14 !important} .btn-outline,.btn-ghost,.cta-ghost{background:transparent !important;color:#14181C !important;border:1px solid rgba(20,24,28,.30) !important;border-radius:100px !important} .btn-outline:hover,.cta-ghost:hover{border-color:#14181C !important;color:#14181C !important} /* ── surfaces: cards, panels ── */ .card,.panel,.tile,.box,.feature-card,.stat-card,.post-card,.quote,.q,.faq-item,.tier{ background:#FFFFFF !important;border:1px solid var(--line-2) !important;color:#14181C !important; border-radius:18px !important;box-shadow:0 1px 3px rgba(20,24,28,.04) !important; } .card h3,.card h4,.card p,.tier *,.faq-item h4{color:#14181C !important} .card p,.faq-item p{color:rgba(20,24,28,.64) !important} .card .num{color:rgba(20,24,28,.40) !important} .badge,.tag,.chip,.pill{background:#14181C !important;color:#fff !important} .divider,hr{border-color:var(--line) !important;background:var(--line) !important} /* ── alternate section shading ── */ section.grey,.grey,.section-alt,.bg-alt,.pricing-mini{background:#EEEDE9 !important;background-image:none !important} .pricing-mini,.pricing-mini *{color:#14181C} .pm-eyebrow,.pm-sub,.pm-meta{color:rgba(20,24,28,.6) !important} .pm-h{font-family:'Fraunces',Georgia,serif !important;color:#14181C !important} .pm-accent{color:#14181C !important} /* ── forms ── */ input,textarea,select{background:#FFFFFF !important;border:1px solid var(--line-2) !important;color:#14181C !important;border-radius:12px !important} input::placeholder,textarea::placeholder{color:rgba(20,24,28,.42) !important} label{color:rgba(20,24,28,.66) !important} /* ── blockquotes / testimonials ── */ blockquote{color:#14181C !important;font-family:'Fraunces',Georgia,serif !important} .who,.byline,.attrib{color:rgba(20,24,28,.55) !important} /* ── image frames ── */ .hero-photo-frame,.img-frame,figure{border-color:var(--line-2) !important} .hero-photo-frame::after{display:none !important} /* ── footer → light ── */ footer,.footer{background:transparent !important;border-top:1px solid var(--line) !important;color:rgba(20,24,28,.60) !important} footer a,.footer a{color:rgba(20,24,28,.72) !important} footer a:hover,.footer a:hover{color:#14181C !important} footer .sep,.footer .sep{color:rgba(20,24,28,.30) !important} /* ── misc dark inline surfaces → light ── */ [style*="#0A0B0E"],[style*="#0a0b0e"],[style*="#101115"],[style*="#15171C"]{background:#FFFFFF !important} /* ============================================================ AUDIT FIXES (2026-07-11) — hardcoded-gold CTAs, display-font leaks, and gold accent labels that bypass the token remap. ============================================================ */ /* hardcoded gold-gradient CTAs (blog, article posts, login, 404, mini-pricing) → charcoal pill */ .blog-cta a,.art .cta a,.submit,button.submit,.pm-cta,.err-cta-primary,a.err-cta-primary{ background:#14181C !important;background-image:none !important;color:#fff !important; border:none !important;border-radius:100px !important;font-family:'Inter',sans-serif !important; } .blog-cta a:hover,.art .cta a:hover,.submit:hover,.err-cta-primary:hover{background:#0B0F14 !important} .err-cta-secondary{border:1px solid rgba(20,24,28,.30) !important;color:#14181C !important;border-radius:100px !important} .err-cta-secondary:hover{border-color:#14181C !important;color:#14181C !important} /* leftover display-font (Bebas/Cormorant) on non-heading labels → serif/charcoal */ h4{font-family:'Fraunces',Georgia,serif !important} .day-focus,.pm-h,.mt-v,.td-title,.mc-head,.rv,.err-h1,.err-code,.ll-name{font-family:'Fraunces',Georgia,serif !important;color:#14181C !important} .err-code{text-shadow:none !important} .err-tag,.err-lede,.ll-num,.ll-meta{color:rgba(20,24,28,.55) !important} .err-link-tile{background:#FFFFFF !important;border:1px solid rgba(20,24,28,.12) !important} /* page-scoped gold token accents → charcoal/muted */ .eyebrow,.unlock-h,.brand .dot,.pm-accent,.err-h1 .accent,.err-lede em{color:rgba(20,24,28,.55) !important} /* 404 sacred-geometry mandala → charcoal hairline, kill gold bloom */ .err-viz{background:none !important} .err-ring [stroke]{stroke:rgba(20,24,28,.22) !important} .err-ring [fill]:not([fill="none"]){fill:rgba(20,24,28,.40) !important} .err-ring .er-bindu{fill:rgba(20,24,28,.5) !important} /* dashboard internal-tool gold accents → charcoal */ .mt-v,.td-title,.mc-head,.rv{color:#14181C !important} /* ============================================================ FONT-FAMILY LEAKS (2026-07-12 audit) — site.css declares these in the old dark-engine typefaces (Bebas Neue / JetBrains Mono); the h1-h4 and .eyebrow catch-alls above don't reach them because they're not headings and aren't literally .eyebrow. ============================================================ */ .nav-brand,.nav-link,.nav-cta,.nav-overlay-link,.nav-overlay-cta,.nav-overlay-foot{font-family:'Inter',sans-serif !important} .site-footer{font-family:'Space Mono',monospace !important} .site-footer .footer-brand{font-family:'Fraunces',Georgia,serif !important} .single-cta .cta-primary,.single-cta .cta-meta{font-family:'Space Mono',monospace !important} .card .num{font-family:'Fraunces',Georgia,serif !important} .privacy-strip .ps-icon,.privacy-strip .ps-tag,.trans-text-card .ttc-tag,.trans-text-card .ttc-sig,.stat-tile .l{font-family:'Space Mono',monospace !important} .trans-text-card .ttc-arc,.stat-tile .v{font-family:'Fraunces',Georgia,serif !important}