/* Self-hosted fonts (latin subset) — replaces render-blocking Google Fonts (perf H4/H6) */ /* Body font = Manrope (geometric, Tesla-adjacent). Headings stay Montserrat. Jouli identity font (--jf, Hanken Grotesk) is intentionally untouched. */ /* ── Metric-matched fallbacks (2026-10-05, CLS) ── 7 faces load with font-display:optional and only 2 are preloaded, so manrope-500/600/700 and montserrat-600/800 swap in late. Without matched metrics every swap reflows the text under it — invisible on a warm cache and on a fast lab run, which is why lab CLS reads 0 while desktop CrUX p75 sits at 0.19. These overrides make the Arial fallback occupy the same box as the webfont, so the swap is a repaint, not a reflow. Values computed with fontTools from the shipped woff2 files against Arial (upm 2048, asc 1854, desc 434, avg lowercase advance .5214). Recompute if the font files are ever replaced. */ /* 2026-10-10 (audit 1.2): font-display is `optional`, not `swap`. The fallbacks below are metric-matched to within 1%, both hero fonts are preloaded, and `swap` was re-rendering every multi-line paragraph after first paint: a line-break flip in the hero moved everything below it by 25 px (lab CLS 0.089; CrUX desktop CLS 0.19). With `optional` Chrome uses the web font when it is ready at first paint (preloaded, or cached from any earlier page) and otherwise keeps the matched fallback for that view - text never re-flows after it is seen. */ @font-face{font-family:'Manrope Fallback';src:local('Arial');size-adjust:100.24%;ascent-override:106.34%;descent-override:29.93%;line-gap-override:0%;} @font-face{font-family:'Montserrat Fallback';src:local('Arial');size-adjust:106.59%;ascent-override:90.81%;descent-override:23.55%;line-gap-override:0%;} @font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:optional;src:url('../fonts/manrope-400.woff2') format('woff2');} @font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:optional;src:url('../fonts/manrope-500.woff2') format('woff2');} @font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:optional;src:url('../fonts/manrope-600.woff2') format('woff2');} @font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:optional;src:url('../fonts/manrope-700.woff2') format('woff2');} @font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:optional;src:url('../fonts/montserrat-600.woff2') format('woff2');} @font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:optional;src:url('../fonts/montserrat-700.woff2') format('woff2');} @font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:optional;src:url('../fonts/montserrat-800.woff2') format('woff2');} /* Jouli sub-brand keeps Inter for body copy (its identity font is Hanken Grotesk, --jf). These @font-faces only fetch on pages tagged html[data-brand="jouli"]. */ @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:optional;src:url('../fonts/inter-400.woff2') format('woff2');} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:optional;src:url('../fonts/inter-500.woff2') format('woff2');} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:optional;src:url('../fonts/inter-600.woff2') format('woff2');} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:optional;src:url('../fonts/inter-700.woff2') format('woff2');} html[data-brand="jouli"]{ --fb: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ================================================ STYLES.CSS — Mission Green Shared Styles ================================================ */ /* ── Z-Index Scale (consistent stacking system) ── 10 Parallax shapes, decorative elements 50 Sticky compare tabs 100 Navigation 200 Mobile menu overlay 300 Sticky CTA bar 400 Cookie consent banner 500 Toast notifications 600 Exit popup overlay 700 Skip-to-content focus 800 Jouli widget (orb, panel) 900 Jouli concierge hub (first-visit) ── */ /* ── CSS Variables ── */ :root { color-scheme: dark; --g: #80D959; --gd: #5aaa32; --ink-on-g: #0C100A; /* text on green fills — static, never retinted */ --bk-hover: #1a1a1a; /* raised-dark hover/tooltip surface */ /* B4 2026-07-12: type scale — encodes the shipped sizes verbatim (10-20px cluster = 84% of declarations). Edit here, cascade everywhere. */ --fs-10: 10px; --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px; --fs-17: 17px; --fs-18: 18px; --fs-19: 19px; --fs-20: 20px; --g10: rgba(128, 217, 89, .1); --g20: rgba(128, 217, 89, .2); --g30: rgba(128, 217, 89, .3); --bk: #060606; --d1: #0d0d0d; --d2: #141414; --d3: #1c1c1c; --d4: #242424; --fh: 'Montserrat', 'Montserrat Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --fb: 'Manrope', 'Manrope Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --ease: cubic-bezier(.22, .68, 0, 1.2); --ease2: cubic-bezier(.4, 0, .2, 1); --ease3: cubic-bezier(.22, 1, .36, 1); --r4: 4px; --r8: 8px; --r12: 12px; --r16: 16px; --r20: 20px; --r-pill: 999px; /* canonical pill — use instead of 999px/100px literals */ /* ── spacing scale (4px grid) — prefer these over magic numbers ── section rhythm = --sp-18 (72px); card padding ≈ --sp-4/5; chip gaps = --sp-2 */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-18: 72px; --sp-24: 96px; /* ── canonical breakpoints (document; migrate the 560/680/900/1100 outliers over time) ── mobile ≤600px · tablet ≤768px · desktop-narrow ≤1024px */ --gh: #95e46e; --glass: rgba(255, 255, 255, .07); --glass-border: rgba(255, 255, 255, .14); --glass-hover: rgba(255, 255, 255, .11); --glass-blur: blur(20px); --glass-strong: rgba(255, 255, 255, .10); --glass-strong-border: rgba(128, 217, 89, .20); --glass-shadow: 0 8px 32px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .08); /* ── Semantic foreground tokens (flipped per theme; default = dark) ── Use these instead of hardcoding #fff / rgba(255,255,255,.x) so light theme is correct automatically and contrast stays AA. */ --text: #fff; --text-muted: rgba(255, 255, 255, .6); /* AA on dark (~7.3:1) */ --text-faint: rgba(255, 255, 255, .5); /* placeholders / fine print */ --border: rgba(255, 255, 255, .08); --g-text: var(--g); /* green used AS TEXT (bright on dark) */ --focus: var(--g); /* focus ring */ } /* ── Reset ── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; overflow-anchor: none; } /* overflow-x on BOTH, deliberately. body{overflow-x:clip} alone held on every page tested — a 2,600px element injected into index and about could not scroll either — but it did NOT hold on /shop, where an absolutely-positioned decorative glow at right:-160px dragged 72px of real horizontal scroll onto the page. clip on body is only propagated to the viewport in some situations; on html it is authoritative. clip and never hidden: hidden makes this a scroll container and silently kills every position:sticky descendant — the shop's state bar, its frozen first table column, and the sticky headers elsewhere on the site. Wide tables are unaffected: they scroll in their own overflow-x:auto wrappers. */ html { overflow-x: clip; } body { font-family: var(--fb); background: var(--bk); color: var(--text); overflow-x: clip; -webkit-font-smoothing: antialiased; } a { text-decoration: none; color: inherit; } button { font-family: var(--fb); cursor: pointer; border: none; background: none; } img { display: block; max-width: 100%; height: auto; } /* height:auto keeps aspect ratio when width-constrained (CLS-safe) */ :target { scroll-margin-top: 88px; } /* anchored sections clear the fixed nav on ALL pages (was .v2-only) */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: var(--bk); } ::-webkit-scrollbar-thumb { background: var(--g); border-radius: 2px; } /* ── Smooth scroll & reduced motion ── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal, .section-h2, .section-sub { opacity: 1 !important; transform: none !important; } } /* ── Accessibility ── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .sr-only-focusable:focus { position: fixed; top: 8px; left: 8px; z-index: 700; width: auto; height: auto; padding: 12px 20px; margin: 0; overflow: visible; clip: auto; white-space: normal; background: var(--g); color: var(--bk); font-weight: 700; font-size: var(--fs-14); border-radius: var(--r4); } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; } /* Top Bar removed — dead chrome (rendered on no page). */ /* ── Navigation ── */ /* Scoped to #nav, not every