:root { /* Colors — pulled from Figma (About Us, node 307:2) */ --color-cream: #fdfaf2; --color-ink: #241e16; --color-muted: #8b8171; --color-rule: rgba(36, 30, 22, 0.14); --color-scrim: linear-gradient(157.769deg, rgba(36, 30, 22, 0.7) 8.574%, rgba(138, 115, 84, 0) 75%); --radius-plate: 14px; /* consistent corner radius Figma applies to every "plate/*" image node */ /* Type */ --font-display: "Forum", serif; --font-body: "Raleway", sans-serif; --font-hand: "Parisienne", cursive; /* handwritten hero copy — see js/index.js's hand-reveal system (2026-09-03). Went Caveat -> Sacramento -> Pinyon Script -> Alex Brush -> this, chasing "reads luxury" + legible-at-size notes each round. Parisienne is a moderate-weight romantic script — more legible at paragraph length than Pinyon Script or Alex Brush, still reads as an elegant script rather than plain handwriting. */ /* Section heights — hero = 100vh baseline (860px in Figma). Every other section is scaled proportionally: vh = (section_px / 860) * 100. See Projects/Active/Love Always/_index.md for the full section map + source values. */ --h-hero: 100vh; --h-meta: 7.442vh; /* META-1 / META-2 — 64px */ --h-two-up: 65.116vh; /* TWO-UP — 560px */ --h-hwmm: 100vh; /* HWMM — 860px */ --h-midfig: 76.860vh; /* MIDFIG — 661px */ --h-hwmm-social: 30.465vh; /* HWMM-SOCIAL — 262px */ --h-regen: 83.721vh; /* REGEN — 720px */ --h-certs: 32.558vh; /* CERTS — 280px */ --h-chetna: 111.628vh; /* CHETNA — 960px, confirmed exception (exceeds hero on purpose) */ --h-gallery: 60.465vh; /* GALLERY — 520px */ --h-signoff: 46.512vh; /* SIGNOFF — 400px */ --h-footer: 48.837vh; /* FOOTER — 420px */ /* Homepage section heights — this page's OWN hero is 900px in Figma (node 90:20), a different basis than About Us's 860px. HERO itself is replaced by the WebGL scroll-video stage (not built from this basis), but every other section is scaled proportionally against it: vh = (section_px / 900) * 100. 5 sections exceed 100vh at their true proportion (MISSION-2, FIELD-COLLAGE, SHEET-INFOGRAPHIC, THOUGHT-LEADERS, JOURNAL) — confirmed exceptions, built verbatim per Arina, same precedent as CHETNA on About Us. */ --h-home-stat: 25.889vh; /* STAT-BAND — 233px */ --h-home-mission-1: 69.333vh; /* MISSION (90:68) — 624px */ /* --h-home-mission-2 removed 2026-08-28 — MISSION (90:76) no longer has its own section/spacer. Its content (.mission2-overlay, index.css) is now layered directly on top of VIDEO-TRANSITION's own pinned WebGL stage as that track's scene-0 overlay (see js/index.js's VT_SCENE_VH/VT_SCENES and js/tuft-3d.js) — merged so its background video gets a real shader cross-fade into the next clip, and to give it the same generous per-clip scroll budget as every other scroll-scrubbed section. */ --h-home-trust: 140vh; /* TRUST-BAND outer spacer — overridden 2026-08-27 per Arina for the scroll-drift animation (see js/scroll-drift.js). This is SCROLL ROOM only, not the card layout's basis — .trust-band__stage (pinned via position:sticky inside this taller box, same pattern as the hero's #track/.stage) stays fixed at the true Figma-proportional 86.444vh, which is what every card's %-based position/size actually resolves against. Earlier versions sized the cards as a % of THIS value directly (no separate stage) — first 120vh (20vh of scroll room) read as too fast, then 220vh (120vh of room) read as too long AND stretched every card vertically since their height also scaled with it. 140vh = 53.556vh of scroll room against a stage held constant at 86.444vh. */ --h-home-trust-stage: 86.444vh; /* TRUST-BAND's actual Figma-proportional height — unchanged from the original 778px calculation. Do not resize this for animation timing — resize --h-home-trust instead. */ --h-home-icons: 88.111vh; /* UNUSED as of 2026-08-27 — icon-detail (106:38) was replaced by .video-transition (JS-sized, see index.css), not left referencing this. Kept in case the photo+callouts section comes back. */ --h-home-certs: 31.111vh; /* CERTS — 280px */ --h-home-proof: 77vh; /* PROOF — 693px */ --h-home-sheet: max(118vh, 64vw); /* SHEET-INFOGRAPHIC — was a plain 106.778vh (961px), then a plain 118vh. Neither was enough: the callout rebuild made the photo+markers scale off viewport WIDTH (aspect-ratio-locked), but this section's own height was still purely viewport-HEIGHT-based, so on a wide/short window the width-driven content could still outgrow a fixed-vh section — no single vh number is correct for every aspect ratio. max() picks whichever dimension actually needs more room: 64vw covers the content's real width-driven height need on wide/short windows, 118vh keeps the original proportional sizing on normal/tall ones. */ --h-home-thought-leaders: 119.111vh; /* THOUGHT-LEADERS — 1072px, exceeds hero */ --h-home-journal: max(157.333vh, 100vw); /* JOURNAL — was a plain 157.333vh (1416px). Same issue as SHEET-INFOGRAPHIC: the 5 cards' images are aspect-ratio-locked (width-driven), so their real rendered height scales with viewport WIDTH, but the section itself was sized purely off viewport HEIGHT — on a wide/short window the width-driven cards needed more room than the height-driven section gave them, so CLOSING started too early and clipped the last card's text. max() picks whichever dimension actually needs more room, same fix as --h-home-sheet. */ --h-home-closing: 60vh; /* CLOSING — 540px */ --h-home-footer: 46.667vh; /* FOOTER — 420px */ }