/* ========================================================================== BASE — fonts, reset, document defaults, shared primitives, a11y. ========================================================================== */ /* Museo Sans — self-hosted (WOFF2 with TTF fallback). */ @font-face { font-family: 'Museo Sans'; src: url('../assets/fonts/museosans_300-webfont.woff2') format('woff2'), url('../assets/fonts/museosans_300-webfont.ttf') format('truetype'); font-weight: 300; font-display: swap; } @font-face { font-family: 'Museo Sans'; src: url('../assets/fonts/museosans_500-webfont.woff2') format('woff2'), url('../assets/fonts/museosans_500-webfont.ttf') format('truetype'); font-weight: 400 500; font-display: swap; } @font-face { font-family: 'Museo Sans'; src: url('../assets/fonts/museosans_700-webfont.woff2') format('woff2'), url('../assets/fonts/museosans_700-webfont.ttf') format('truetype'); font-weight: 600 700; font-display: swap; } @font-face { font-family: 'Museo Sans'; src: url('../assets/fonts/museosans_900-webfont.woff2') format('woff2'), url('../assets/fonts/museosans_900-webfont.ttf') format('truetype'); font-weight: 800 900; font-display: swap; } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; } /* Native smooth scrolling is ONLY a no-JS fallback. When Lenis drives the scroll (it adds .lenis to ) positions must be written instantly — otherwise the browser keeps animating toward stale targets after the user stops scrolling, which reads as automatic snap points. */ html:not(.lenis) { scroll-behavior: smooth; } body { font-family: var(--font-sans); font-weight: 500; font-size: var(--text-body); line-height: var(--leading-body); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; } img, svg, video { display: block; max-width: 100%; height: auto; } button, input, select, textarea { font: inherit; color: inherit; } /* Figma display roles are Museo Sans 700 across the board */ h1, h2, h3, h4 { font-weight: var(--weight-display); line-height: var(--leading-snug); } a { color: inherit; } ul[class], ol[class] { list-style: none; padding: 0; } /* ---- Focus ---- */ :focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: var(--radius); } ::selection { background: var(--orange); color: var(--paper); } /* ---- A11y primitives ---- */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 200; padding: 0.75em 1.25em; background: var(--ink); color: var(--paper); font-weight: 700; text-decoration: none; border-radius: var(--radius); transform: translateY(-300%); transition: transform var(--dur-fast) var(--ease-out); } .skip-link:focus { transform: translateY(0); } /* Anchor targets clear the fixed header */ [id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); } /* ---- Shared section primitives ---- */ /* Figma "Section Title": Museo Sans 700, 20px, uppercase, orange */ .section-label { display: flex; align-items: baseline; gap: 0.75em; font-size: clamp(1rem, 1.39vw, 1.25rem); font-weight: 700; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; color: var(--orange); } .section-label__index { opacity: 0.55; } .section-label--light { color: var(--orange); } /* Figma "paragraph-lg" body voice: Raleway 400, 24/32 at full scale */ .hero__abstract, .who-statement__abstract, .ecosystem__sub, .ecosystem__role p, .showcase__sub, .showcase-card__excerpt, .service__panel-inner > p, .process-step p, .contact__sub { font-family: var(--font-secondary); font-weight: 400; } /* Word-reveal targets: JS wraps words in .w > .w-in spans */ [data-word-reveal] .w { display: inline-block; overflow: hidden; vertical-align: bottom; /* Tight display line-heights clip descenders inside overflow:hidden wrappers — give the mask a little breathing room. */ padding-bottom: 0.08em; margin-bottom: -0.08em; } [data-word-reveal] .w-in { display: inline-block; /* Offscreen position is set by JS (reveal.js), never CSS — so the text is fully visible with no JavaScript or under reduced motion. */ will-change: transform; } /* markup is flattened during the word split; the wrapper carries it */ [data-word-reveal] .w--em { position: relative; color: var(--orange); font-style: normal; } /* Site signature: em words are TYPED into their reserved gaps by the living caret (reveal.js typeEms) after the surrounding words rise */ [data-word-reveal] .w--em.is-typing { overflow: visible; } .w-type { position: absolute; left: 0; top: 0; white-space: nowrap; } .w-type__c { display: inline-block; will-change: transform, opacity; } .type-caret { position: absolute; top: 0.05em; left: 0; width: 0.075em; min-width: 3px; height: 0.92em; border-radius: 999px; background: var(--orange); animation: caret-breathe 1.15s ease-in-out infinite; } /* ---- Standardized scroll-in reveal (site-wide) ---- Opt in with [data-reveal] on any element (text, box, frame, image). Variants: data-reveal="up"(default) | "left" | "right" | "scale" | "fade". Stagger: wrap items in [data-reveal-group]; reveal.js sets --reveal-i so children cascade. Pure CSS transition — no GSAP dependency. Progressive enhancement: the hidden pre-state only applies when JS is present (html.js), so with no JS everything is visible. Reduced motion (html.no-motion) shows everything with no transition. */ html.js [data-reveal] { opacity: 0; transform: translateY(var(--reveal-distance)); transition: opacity var(--reveal-dur) var(--reveal-ease), transform var(--reveal-dur) var(--reveal-ease); transition-delay: calc(var(--reveal-i, 0) * var(--reveal-stagger)); will-change: opacity, transform; } html.js [data-reveal="left"] { transform: translateX(calc(-1 * var(--reveal-distance))); } html.js [data-reveal="right"] { transform: translateX(var(--reveal-distance)); } html.js [data-reveal="scale"] { transform: scale(0.94); } html.js [data-reveal="fade"] { transform: none; } html.js [data-reveal].is-inview { opacity: 1; transform: none; } html.no-motion [data-reveal] { opacity: 1; transform: none; transition: none; } /* ---- Reduced motion: kill everything non-essential ---- */ @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; } }