/* ========================================================================= Design tokens — the single source of truth for the visual system. Every value below is lifted from the design handoff. Nothing in the site should hardcode a colour, type spec or spacing step; reach for a token. ========================================================================= */ :root { /* ---- Colour -------------------------------------------------------- */ --ivory: #F7F3ED; /* page background (warm ivory); light text on dark */ --sand: #EDE7DE; /* secondary surface — banded sections, inset panels */ --ink: #171717; /* near-black — dark sections, primary text */ --ink-raised: #242424; /* raised surface on dark (cards, success panel) */ --ink-slot: #1D1D1D; /* image-slot fill on dark */ --terracotta: #C85A3F; /* primary accent — CTAs, hero accent line, focus ring */ --terracotta-dark: #9F3F2C; /* accent dark — links, kickers on light */ --terracotta-light: #E4A18E; /* accent light — kickers and links on dark */ --text: #202020; /* body text default */ --text-body: #3A3833; /* body text on light */ --text-muted: #6F6A63; /* muted text / labels */ --text-placeholder: #A39C93; /* placeholder text */ /* Hairlines and borders on light */ --rule-08: rgba(23, 23, 23, .08); --rule-10: rgba(23, 23, 23, .10); --rule-12: rgba(23, 23, 23, .12); --rule-14: rgba(23, 23, 23, .14); --rule-16: rgba(23, 23, 23, .16); --rule-18: rgba(23, 23, 23, .18); --rule-22: rgba(23, 23, 23, .22); --rule-28: rgba(23, 23, 23, .28); /* Hairlines, surfaces and text on dark */ --on-dark-06: rgba(247, 243, 237, .06); --on-dark-11: rgba(247, 243, 237, .11); --on-dark-12: rgba(247, 243, 237, .12); --on-dark-14: rgba(247, 243, 237, .14); --on-dark-16: rgba(247, 243, 237, .16); --on-dark-18: rgba(247, 243, 237, .18); --on-dark-25: rgba(247, 243, 237, .25); --on-dark-30: rgba(247, 243, 237, .30); --on-dark-40: rgba(247, 243, 237, .40); --on-dark-42: rgba(247, 243, 237, .42); --on-dark-45: rgba(247, 243, 237, .45); --on-dark-55: rgba(247, 243, 237, .55); --on-dark-60: rgba(247, 243, 237, .60); --on-dark-66: rgba(247, 243, 237, .66); --on-dark-68: rgba(247, 243, 237, .68); --on-dark-70: rgba(247, 243, 237, .70); --on-dark-72: rgba(247, 243, 237, .72); --on-dark-74: rgba(247, 243, 237, .74); --bar-bg: rgba(247, 243, 237, .96); --lightbox-veil: rgba(15, 14, 13, .9); /* ---- Type ---------------------------------------------------------- */ --font-sans: 'Manrope', system-ui, -apple-system, sans-serif; --font-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif; --font-mono: ui-monospace, Menlo, Consolas, monospace; /* Display — headlines only. */ /* The `min(..., 8.4svh)` arm is what lets the hero hold 100svh on a short screen: a 1366x650 laptop shrinks the headline instead of pushing the CTAs below the fold. On tall or narrow screens the cqi arm is already smaller, so the cap never engages and nothing changes. */ --t-h1: 400 min(clamp(36px, 10.4cqi, 72px), 8.4svh)/1.06 var(--font-serif); --t-h2: 400 clamp(30px, 7.2vw, 54px)/1.12 var(--font-serif); --t-h2-lg: 400 clamp(32px, 7.6vw, 56px)/1.10 var(--font-serif); --t-h2-sm: 400 clamp(26px, 6vw, 42px)/1.15 var(--font-serif); --t-h3: 400 clamp(24px, 5.6vw, 36px)/1.15 var(--font-serif); --t-h3-card: 400 clamp(22px, 5.4vw, 26px)/1.22 var(--font-serif); --t-h4: 400 21px/1.25 var(--font-serif); --t-figure: 400 clamp(30px, 7.4vw, 44px)/1 var(--font-serif); /* Text — everything else. */ --t-body-hero: 400 clamp(16px, 4.2vw, 19px)/1.62 var(--font-sans); --t-body-lg: 400 clamp(15.5px, 4vw, 17.5px)/1.7 var(--font-sans); --t-body-md: 400 15px/1.7 var(--font-sans); --t-body: 400 14px/1.65 var(--font-sans); --t-body-em: 500 14px/1.6 var(--font-sans); --t-body-sm: 400 13.5px/1.65 var(--font-sans); --t-kicker: 700 10.5px/1 var(--font-sans); --t-label: 700 10px/1.5 var(--font-sans); --t-nav: 600 12.5px/1 var(--font-sans); --t-wordmark: 700 12px/1.1 var(--font-sans); --t-button: 700 14px/1 var(--font-sans); --t-button-sm: 700 13px/1 var(--font-sans); --t-button-xs: 700 12px/1 var(--font-sans); --t-meta: 600 11.5px/1.5 var(--font-sans); --t-mono: 700 9px/1 var(--font-mono); --t-mono-lg: 600 12px/1.6 var(--font-mono); /* Letter-spacing. `font:` shorthand does not reset these, so they pair up. */ --ls-kicker: .22em; --ls-label: .16em; --ls-wordmark: .2em; --ls-spec: .12em; --ls-button: .05em; --ls-tight: -.01em; --ls-h1: -.015em; /* ---- Spacing ------------------------------------------------------- */ --gutter: clamp(20px, 5vw, 64px); --gutter-header: clamp(18px, 5vw, 64px); --section-y: clamp(56px, 9vw, 110px); --band-y: clamp(48px, 7vw, 84px); --col-gap: clamp(28px, 5vw, 56px); --col-gap-sm: clamp(28px, 4vw, 56px); --panel-pad: clamp(24px, 4vw, 44px); /* The counter cells' own inset. Named because the band subtracts it from the page gutter to make the first figure line up with the hero text above it — see .counters. */ --counter-pad: clamp(16px, 3vw, 26px); /* What the counter band is inset by to achieve that. The credentials ticker inside it negates this to run full-bleed again. */ --counters-inset: calc(var(--gutter) - var(--counter-pad)); /* Height-aware as well as width-aware: on a short screen the hero's own breathing room is the first thing that should give. */ --hero-y-top: min(clamp(20px, 6vw, 72px), 5svh); --hero-y-bottom: min(clamp(20px, 6vw, 72px), 5svh); /* The header's total outer height, border included, enforced on .site-header__inner rather than inferred from its padding. The hero subtracts it to fill exactly one viewport, so it has to be a number CSS can read, not an emergent one. */ --header-h: 74px; /* The fixed bottom CTA bar's height, border included. It is position:fixed and overlays whatever is beneath it, so the hero has to subtract it as well as the header to leave a genuinely unobstructed viewport. Collapses to zero at 1024px, where the bar is hidden. */ --bar-h: 55px; /* The credentials ticker's height. It leads the counter band directly below the hero, and the hero subtracts it too so the strip lands inside the first screen rather than just past it. 42px measured, plus the 1px border-top on .counters that sits between the hero and the strip — leave that pixel out and the ticker lands exactly one row short. */ --credentials-h: 43px; /* Bottom padding that clears the fixed CTA bar. The bar is mobile-only, so both of these collapse to ordinary spacing at 1024px — see the media query at the foot of this file. */ --bar-clearance: clamp(90px, 10vw, 110px); --footer-bottom: 110px; /* ---- Shape --------------------------------------------------------- */ /* Near-square by design — a deliberate editorial choice. Don't soften it. */ --radius: 2px; --page-max: 1440px; /* ---- Motion -------------------------------------------------------- */ --ease: cubic-bezier(.22, .7, .24, 1); /* Reveal timings, read by motion.css and assets/js/motion.js. */ --reveal-duration: 900ms; --reveal-duration-media: 1080ms; --reveal-distance: 26px; --reveal-scale: .985; --reveal-blur: 9px; --reveal-blur-media: 14px; /* ---- Placeholder frame fills -------------------------------------- Hatched fills that read as "asset pending" rather than as artwork. Delete these once real photography is in. */ --hatch-light: repeating-linear-gradient(135deg, rgba(23, 23, 23, .028) 0 10px, transparent 10px 22px); --hatch-dark: repeating-linear-gradient(135deg, rgba(247, 243, 237, .04) 0 10px, transparent 10px 22px); } /* The single hard breakpoint. Above it the fixed CTA bar is hidden — the header carries its own CTA there — so the space reserved for it collapses. Redefining the tokens here keeps the breakpoint out of the component stylesheets. */ @media (min-width: 1024px) { :root { --bar-clearance: var(--section-y); --footer-bottom: 44px; --header-h: 68px; --bar-h: 0px; } }