/* ============================================================ LW03 v0.6 · Design Tokens ============================================================ Single source of truth. Every value in main.css references a token here. Change a token, the whole system shifts. Capped-vw scaling: design width = 1440, design cap = 1800. Every px-equivalent value below is expressed as `calc(var(--u) * N)`, where N = (px / 1440) * 100 and --u = min(1vw, 1% of --design-cap). Below 1800vp the system scales linearly with viewport (1 u = 1vw); at and above 1800vp the system locks (1 u = 18px). Layout containers (.page, .section__inner, .foot-bar) cap their max-width at --design-cap so sections stop expanding past 1800px. See the inline comment on --u for the full rationale. FONTS: --font-display → Safiro Medium (Atipo, licensed; see fonts/safiro/LICENSE.pdf) --font-body → PP Radio Grotesk Ultralight (Pangram Pangram, licensed) Regular weight (400) for foot bar not yet purchased; falls through to Inter Regular until then. ============================================================ */ /* Safiro — all 4 upright weights + italics. WOFF2 only (universal support across modern browsers, smallest bytes). */ @font-face { font-family: 'Safiro'; src: url('fonts/safiro/safiro-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Safiro'; src: url('fonts/safiro/safiro-regularitalic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Safiro'; src: url('fonts/safiro/safiro-medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Safiro'; src: url('fonts/safiro/safiro-mediumitalic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: 'Safiro'; src: url('fonts/safiro/safiro-semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Safiro'; src: url('fonts/safiro/safiro-semibolditalic.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: 'Safiro'; src: url('fonts/safiro/safiro-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Safiro'; src: url('fonts/safiro/safiro-bolditalic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: 'PP Radio Grotesk'; src: url('fonts/pp-radio-grotesk/pp-radio-grotesk-ultralight.woff2') format('woff2'), url('fonts/pp-radio-grotesk/pp-radio-grotesk-ultralight.woff') format('woff'); font-weight: 200; font-style: normal; font-display: swap; } :root { /* ---------- Colour ---------- */ --color-bg-light: #F8F8F7; --color-bg-dark: #0F0F0F; --color-text-on-light: #000000; --color-text-on-dark: #FFFFFF; --color-accent: #FE3702; /* ---------- Type families ---------- */ --font-display: 'Safiro', Georgia, 'Times New Roman', serif; --font-body: 'PP Radio Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; /* ---------- Capped-vw sizing system ---------- Every sizing token below is anchored to a 1440 design reference and expressed in terms of a single helper unit `--u`. Below the design cap (--design-cap, 1800px), --u = 1vw, so the whole layout scales in lockstep with the viewport. At and above the cap, --u locks at 1% of --design-cap (18px), so the layout stops growing. A token like `calc(var(--u) * 17)` reads as "17u" and is the capped equivalent of "17vw". Line breaks, line heights, gaps, dots, paddings — everything keeps its proportion below cap, all freeze together above cap. Letter-spacing is in em and line-heights are unitless, so they ride along with font-size. Each comment below shows the px value at the 1440 design reference; at the cap (1800), every value is 25% bigger. Layout containers (.page, .section__inner, .foot-bar) also cap their max-width at --design-cap so sections stop expanding past 1800px on ultra-wide / 4K displays. .section--dark stays full-bleed (background only); its inner content respects the cap. */ --design-cap: 1800px; --u: min(1vw, calc(var(--design-cap) / 100)); /* ---------- Type sizes (px at 1440 reference) ---------- */ --type-anchor: calc(var(--u) * 17.000); /* 244.8px → LEIGH, SCALE, TIME, VOUCH, HELLO. One token, every anchor identical. Sized so the widest word (VOUCH @ 977px intrinsic at the previous 290px size) fits the 8-col content-block (cols 3/11 = 864px @ 1440) with ~20px slack each side. All five words share the same size, weight, and tracking; LEIGH keeps per-letter inline tightening as kerning, not sizing. Two-token (bookend/mid) system retired in S19. */ --type-body: calc(var(--u) * 5.556); /* 80px → preroll + body paragraph. Sized so every PP Radio + Safiro half fits the 8-col content-block (864px @ 1440) in 2 lines each. Line breaks within bodies use explicit
where the desired wrap can't be reached by natural word-boundary wrapping. */ --type-body-testi: calc(var(--u) * 5.000); /* 72px → testimonial body. Smaller than --type-body so the longest real testimonial (Karin: 60-char PP Radio half) still fits in 4 lines. All six testimonials share this single size — no per-quote tuning. */ --type-cta: clamp(22.5px, calc(3.125vw - 5px), 40px); /* CTA + citation. Flat at 22.5px from the narrowest viewport up to the 880vw mobile/desktop breakpoint, then ramps linearly to 40px at 1440vw (the design reference width). Floor sized to 2/3 of the previous fluid-clamp value at the breakpoint so the CTA doesn't feel oversized on actual mobile devices. */ --type-foot: calc(var(--u) * 1.389); /* 20px → foot bar */ --type-testi-arrow: calc(var(--u) * 4.500); /* 65px → testimonial prev/next arrows (90% of 72px) */ /* ---------- Type weights ---------- */ --weight-display: 500; /* Safiro Medium — brand wordmark */ --weight-anchor: 500; /* Safiro Medium — anchor words (LEIGH, SCALE, TIME, VOUCH, HELLO). Unified with the rest of the Safiro system at Medium for a calmer overall weight. */ --weight-body-em: 400; /* Safiro Regular — inline em inside body sentences. Lighter than display-size em so the sentence reads as one continuous voice with PP Radio Ultralight, not as a callout. */ --weight-body-emphasis: 500; /* Safiro Medium — display-size em: CTA em, .cite, testi-arrow. Still Medium so these roles read with weight against the ultralight body. */ --weight-body: 200; /* Radio Grotesk Ultralight */ --weight-foot: 400; /* Radio Grotesk Regular */ /* ---------- Type tracking (system base) ---------- */ --tracking-anchor: -0.08em; /* -8% on anchor words (matches LEIGH/HELLO per-letter average); bookends still override per-letter inline */ --tracking-body: -0.04em; /* -4% on preroll + body */ --tracking-body-emphasis: -0.06em; /* -6% on body em (Safiro Medium Italic) */ --tracking-cta: -0.03em; /* -3% on CTA prose (Radio Grotesk) */ --tracking-cta-emphasis: -0.04em; /* -4% on CTA emphasis AND citation names (Safiro Medium) — opened by ~1pt from the previous -6% so the heavier weight breathes */ --tracking-foot: 0; /* 0 on foot */ /* ---------- Type line-heights ---------- Anchor leading is intentionally below 1 so the line-box collapses toward Safiro's cap-height (~0.69 of em). Matches Figma's wrapper-height-clamped behavior; without it, ~110px of dead space pads above and below LEIGH/HELLO. */ --leading-anchor: 0.7; --leading-preroll: 1.04; /* single-line preroll ("Hello, I'm" etc.) — kept tight */ --leading-body: 1.14; /* multi-line body sentences — +10% over preroll for readability */ --leading-cta: 1.2; --leading-foot: 1.4; /* ---------- Layout (px at 1440 reference) ---------- */ --design-width: 1440px; --pad-page: calc(var(--u) * 4.444); /* 64px → outer page padding L/R + bottom */ --pad-page-top: calc(var(--u) * 3.056); /* 44px → outer page padding TOP */ --content-width: calc(var(--u) * 91.111); /* 1312px → max content column (legacy, not currently consumed) */ --col-width: calc(var(--u) * 5.556); /* 80px → grid column (eyebrow reference only) */ --gutter: calc(var(--u) * 2.222); /* 32px → grid gutter */ --gap-section: calc(var(--u) * 4.444); /* 64px → between siblings in page column */ --gap-content-block: calc(var(--u) * 2.222); /* 32px → internal stack gap. Halved from 64px in S20 per Leigh's "50% tighter, visually equal above/below the anchor" call. Tightens preroll → anchor → body → eyebrow/cite/cta inside each content-block. */ --gap-anchor-to-body: calc(var(--gap-content-block) * 0.90); /* 10% tighter — anchor + sentence read as one optical group. Compensates for the body's leading-above-cap (line-height 1.14). Cascades from the halved gap-content-block. */ --pad-content-block-bot: calc(var(--u) * 2.778); /* 40px → matches Figma SPACER-8 */ --image-band-height: calc(var(--u) * 51.250); /* 738px → SIZZLE REEL height (16:9) */ --image-overlap: calc(var(--u) * 4.444); /* 64px → last image overlaps dark */ /* ---------- Component-level (px at 1440 reference) ---------- */ --eyebrow-divide-height: calc(var(--u) * 4.444); /* 64px */ --eyebrow-bar-width: calc(var(--u) * 5.556); /* 80px */ --eyebrow-bar-height: calc(var(--u) * 0.556); /* 8px */ --eyebrow-dot-size: calc(var(--u) * 0.556); /* 8px → square dots used in non-carousel eyebrows */ --eyebrow-dot-gap: calc(var(--u) * 1.111); /* 16px → gap for square dots */ --testi-dot-width: calc(var(--u) * 1.389); /* 20px → wider rectangle for testimonial carousel pagination */ --testi-dot-height: calc(var(--u) * 0.417); /* 6px → slim rectangle height */ --testi-dot-gap: calc(var(--u) * 0.556); /* 8px → tight gap between rectangle dots */ --btt-size: 64px; /* Circular orange button diameter. Shared by the X-Ray trigger at top and the back-to-top button at bottom so they read as one pattern. 64px on desktop; mobile override at main.css mobile media query reduces this. The icon inside scales from --btt-icon-size which is half of --btt-size, so trigger sparkle and BTT arrow stay visually consistent at every breakpoint. */ --btt-icon-size: calc(var(--btt-size) * 0.5); /* Inner-icon size for both orange buttons. Always half the container diameter so the icon-to-circle ratio is identical at every breakpoint. Used by .pill-icon.trigger-icon, its SVG, and .btt__arrow SVG. */ --emphasis-underline-thickness: 0.03em; /* body em + cta em — 2px floor */ --body-em-underline-bottom: 0.15em; /* body em — closer to baseline (halved distance from previous 0.075em) */ --cta-em-underline-bottom: 0.075em; /* cta em — unchanged */ --emphasis-underline-duration-load: 700ms; /* underline draws in left-to-right when em enters viewport */ --emphasis-underline-duration-hover: 600ms; /* swipe-out-right then redraw-from-left on hover */ /* ---------- Motion (placeholder for Phase 3 GSAP integration) ---------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --duration-fast: 180ms; --duration-normal: 320ms; --duration-btt: 240ms; /* back-to-top arrow tilt — between fast and normal */ --duration-carousel: 220ms; /* testimonial slide-out — between fast and normal */ /* ---------- Sizzle reel ---------- */ --color-sizzle-bg: #EBF0F3; /* pillarbox + container bg. Set to the value the videos ENCODE TO (not the value passed to ffmpeg pad). Source MP4s use ffmpeg pad=color=0xEDF2F5, which round-trips through YUV420p+x264 and decodes to RGB(235,240,243) = #EBF0F3. Setting CSS to the decoded value eliminates the seam between video letterbox and page bg on Band 3 (which uses object-fit: contain on mobile so the seam is visible). Bands 1+2 use cover on mobile so the seam was hidden by zoom-fill. */ /* ---------- Sizzle metric intercut ---------- Typographic impact-metric overlay that plays between video loops. Number = Safiro SemiBold 600 in the metric blue; label = PP Radio Grotesk Regular in brand black. Fluid sizes scale linearly from the narrowest mobile viewport up to the 1440 design reference, clamped at both ends so they don't shrink or grow indefinitely. */ --color-metric-value: #0053DF; --type-metric-value: clamp(72px, calc(12.02vw + 26.92px), 200px); /* 72px → 200px from 375vw → 1440vw */ --type-metric-label: clamp(20px, calc(2.82vw + 9.43px), 50px); /* 20px → 50px from 375vw → 1440vw */ /* ---------- X-Ray panel (chrome — fixed px, not viewport-scaled) ---------- */ --xray-pill-width: 100px; /* sized to fit the longest label ("LIGHT") */ --xray-pill-offset: 60px; /* retracted pill slides this far back behind the trigger */ --xray-pill-padding-left: 16px; /* asymmetric: roomier on the icon side */ --xray-pill-padding-right: 10px; /* tighter against the label edge */ --xray-bar-gap: 12px; /* gap between the three bar items in the cluster */ /* ---------- Carousel ---------- */ --carousel-slide-distance: 40px; /* testimonial horizontal slide on prev/next */ }