:root { /* ---- Brand tokens (from the definitive spec) ---- */ --bg-green: rgb(0, 36, 0); /* constant page background, never changes */ --cream: rgb(255, 245, 216); /* general text */ --red: rgb(181, 36, 0); /* important words + strokes */ /* Eye SVG colour hooks */ --eye-bg: var(--bg-green); --eye-cream: var(--cream); --eye-red: var(--red); /* ---- Typography ---- */ /* Futura PT via Adobe Fonts (kit nel ). Jost = fallback finché il kit non è verificato. Web Project: Medium + Bold (normali) e Medium Condensed. Pesi nel sito: 500 = Futura PT Medium, 700 = Futura PT Bold (famiglia "futura-pt") → mappano direttamente sui font-weight già presenti. */ --font-display: "futura-pt", "Jost", sans-serif; /* Condensed pronto all'uso (Medium Condensed, peso 500): basta assegnare var(--font-display-cond) agli elementi dove vorrai il condensed. */ --font-display-cond: "futura-pt-condensed", "Jost", sans-serif; --fs-nav: 26px; /* wordmark, MENU, menu items */ --fs-tagline: 26px; /* "WE BUILD WHAT YOU SEE." */ --tracking: -0.52px; /* ---- Layout constants (Figma 1440-wide reference) ---- */ --edge-x: 40px; /* left/right page inset (logo starts 30px, text 40px) */ --edge-top: 40px; /* top inset for header row */ --stroke-w: 3px; /* 3pt stroke on cream text */ --rule-w: 3px; /* horizontal + vertical rule weight (3pt) */ } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: auto; } body { background: var(--bg-green); color: var(--cream); font-family: var(--font-display); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* ============================================================ STROKED TEXT Figma applies a 3pt stroke OUTSIDE cream glyphs. Browsers put -webkit-text-stroke centred on the edge (eats the letter), so we use paint-order:stroke to push the stroke to the outside, keeping the cream fill full-weight. Fallback still looks right. ============================================================ */ .stroked { -webkit-text-stroke: var(--stroke-w) var(--red); paint-order: stroke fill; /* paint-order needs the fill declared via text color; ensured below */ } /* ---------- HERO wrapper ---------- */ /* The hero is pinned: this outer block reserves scroll distance so the wheel can drive the eye growth before the page releases. */ /* Hero "a sé stante": runway = crescita occhio (1 vh) + dissolvenza verso la vision (1 vh). La hero resta PINNATA per tutta la fase (E+F) e sfuma in opacità guidata dallo scroll (hero.js), mentre la vision è già pinnata dietro (margin-top negativo in vision.css) e compare per dissolvenza. */ .hero-scroll { /* Runway della sequenza hero: GROW(1) + HOLD(0.5) + HFADE(1) di pin + 1vh. La hero resta pinnata fino a fine dissolvenza; poi la vision (pinnata più in basso, vedi vision.css) entra nel campo libero. Vedi hero.js. */ height: 350vh; position: relative; } .hero { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; z-index: 50; /* sopra la vision durante l'handoff (sotto side-rule 90 / header 100) */ } /* ---------- Header row ---------- */ .header { position: absolute; top: var(--edge-top); left: 0; right: 0; height: 35px; z-index: 30; display: flex; align-items: center; } /* Logo mark top-left: Figma 48×23 at x30/y45 → within a 40px inset row */ .brand-logo { position: absolute; left: 30px; top: 5px; /* 45px from page top − 40px header top */ width: 48px; height: 23px; display: block; } .brand-logo svg { width: 100%; height: 100%; display: block; } /* Wordmark: 10px right of logo → ~x88 */ .wordmark { position: absolute; left: 88px; top: 0; font-weight: 500; font-size: var(--fs-nav); letter-spacing: var(--tracking); line-height: 35px; white-space: nowrap; color: var(--cream); /* 3pt red stroke outside the glyphs, cream fill full-weight */ -webkit-text-stroke: var(--stroke-w) var(--red); paint-order: stroke fill; } .wordmark .red { color: var(--red); } /* Horizontal rule: from 40px after wordmark to 40px before MENU, vertically centred on the wordmark (Figma Line 2, y56). */ .rule-h { position: absolute; top: 16px; /* centre of the 35px cap height */ height: var(--rule-w); background: var(--cream); /* left/right set responsively via JS to hug wordmark & menu */ } /* MENU button top-right */ .menu-btn { position: absolute; right: var(--edge-x); top: 0; background: none; border: none; cursor: pointer; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-nav); letter-spacing: var(--tracking); line-height: 35px; color: var(--cream); -webkit-text-stroke: var(--stroke-w) var(--red); paint-order: stroke fill; } /* ---------- Vertical side rule ---------- */ /* Figma Line 1: x1410 (=30px from right), full height. Designed to shrink proportionally with total-page scroll progress. */ .hero .rule-v { position: absolute; right: 30px; top: 110px; height: calc(100vh - 110px - 87px); /* Figma: y110 → y937 on 1024 canvas */ width: var(--rule-w); background: var(--cream); transform-origin: top center; z-index: 20; } /* ---------- Menu overlay ---------- */ /* Items appear right-aligned to MENU, 60px below it, cream, NO stroke */ .menu-overlay { position: absolute; top: 104px; /* box top so VISION glyph cap-top lands at y110 = top of the vertical side rule, below MENU */ right: calc(var(--edge-x) - 10px + 5px); /* 10px past MENU, then 5px back toward left */ z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; /* ≈20px visible spacing between cap-heights */ pointer-events: none; } .menu-overlay a { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-nav); letter-spacing: var(--tracking); text-transform: uppercase; color: var(--cream); /* cream, no stroke by spec */ text-decoration: none; opacity: 0; transform: translateY(-8px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; } .menu-overlay a:hover { -webkit-text-stroke: var(--stroke-w) var(--red); paint-order: stroke fill; color: var(--cream); } .menu-open .menu-overlay a { opacity: 1; transform: translateY(0); pointer-events: auto; } /* subtle stagger */ .menu-open .menu-overlay a:nth-child(1) { transition-delay: .00s; } .menu-open .menu-overlay a:nth-child(2) { transition-delay: .06s; } .menu-open .menu-overlay a:nth-child(3) { transition-delay: .12s; } .menu-open .menu-overlay a:nth-child(4) { transition-delay: .18s; } /* ---------- Centre eye ---------- */ .eye-wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(1); transform-origin: center center; width: 310px; /* Figma Livello_10 width ≈ 300–310 */ will-change: transform; z-index: 10; } .eye-wrap svg { width: 100%; height: auto; display: block; } /* 3D eyeball canvas — overlaid exactly where the flat iris sat. Iris in the SVG: centre cx=50%, cy=47.8% of the svg box height, diameter = 23.3% of the svg box WIDTH. The canvas is sized a bit larger so the rotating eyeball has room without clipping. */ .eye-3d { position: absolute; left: 50%; top: 47.8%; width: 30%; /* a touch larger than the 23.3% iris so rotation isn't clipped */ aspect-ratio: 1 / 1; transform: translate(-50%, -50%); pointer-events: none; /* mouse tracking is window-wide, not hover-gated */ z-index: 2; /* above the flat sclera/cutout, below the eyelid tips if needed */ } .eye-3d canvas { width: 100% !important; height: 100% !important; display: block; } /* Hide the flat iris + pupil paths — the 3D eyeball replaces them. (Kept in DOM as a fallback if WebGL is unavailable; toggled off via .has-webgl.) */ .has-webgl .eye-flat-iris { display: none; } /* ---------- Tagline ---------- */ /* "WE BUILD WHAT YOU SEE." — centred, 40px from bottom, Futura Bold, BUILD + SEE in red. Fades in DURING the eye growth. */ .tagline { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); font-weight: 700; font-size: var(--fs-tagline); letter-spacing: var(--tracking); white-space: nowrap; color: var(--cream); text-align: center; opacity: 0; /* driven by scroll */ z-index: 15; } .tagline .red { color: var(--red); } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .hero-scroll { height: 100vh; } .tagline { opacity: 1; } .eye-wrap { transform: translate(-50%,-50%) scale(1.12); } .menu-overlay a { transition: none; } } /* ---------- Small screens: keep it legible ---------- */ @media (max-width: 768px) { :root { --fs-nav: 18px; --fs-tagline: 18px; --stroke-w: 2px; --rule-w: 2px; } .hero .rule-v { right: 20px; } .eye-wrap { width: 62vw; } .tagline { font-size: 16px; } }