/* 021 — Design tokens + shared system */ :root { --bg: #f2efe8; --bg-2: #e9e5db; --ink: #0a0a0a; --ink-2: #2a2a2a; --muted: #6e6a60; --line: rgba(10, 10, 10, 0.14); --line-2: rgba(10, 10, 10, 0.08); /* Accent system — three swappable palettes, controlled by [data-accent] on . Default is amber. Each theme defines: --accent: the saturated brand hue (used as backgrounds, dots, links) --accent-ink: text color that sits on top of --accent --accent-soft: a translucent/desaturated version for tints, blobs, glows The amber-bleed full-width section, cursor blob, dots, hover states, and CTA buttons all read from these tokens — swapping theme reflows the whole site instantly. */ --accent: oklch(68% 0.18 52); /* signal amber — default */ --accent-ink: #0a0a0a; --accent-soft: oklch(68% 0.18 52 / 0.18); --radius: 2px; --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --sans: 'Inter Tight', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif; --serif: 'Instrument Serif', 'Times New Roman', serif; } /* Theme: Iridescent Slate — derived from the 021 logo (cool silver-blue chrome glow on near-black). A restrained brand-true accent that reads as "021" without the warmth of amber. */ [data-accent='slate'] { --accent: oklch(38% 0.10 245); --accent-ink: #f2efe8; --accent-soft: oklch(38% 0.10 245 / 0.22); } /* Theme: Mono — pure black & white. Accent collapses into ink itself. The amber-bleed becomes ink-bleed (light bg/ink, dark bg/light) and dots, buttons, and CTAs all use the same near-black token. Highest contrast, editorial register. */ [data-accent='mono'] { --accent: #0a0a0a; --accent-ink: #f2efe8; --accent-soft: rgba(10, 10, 10, 0.10); } [data-theme='dark'] { --bg: #0a0a0a; --bg-2: #141414; --ink: #f2efe8; --ink-2: #d9d4c6; --muted: #8a8578; --line: rgba(242, 239, 232, 0.14); --line-2: rgba(242, 239, 232, 0.07); } /* Mono theme inverts on dark mode — accent becomes the cream so amber-bleed sections read as off-white slabs against the dark page. */ [data-theme='dark'][data-accent='mono'] { --accent: #f2efe8; --accent-ink: #0a0a0a; --accent-soft: rgba(242, 239, 232, 0.10); } /* Slate at dark — slightly brighter so the silver-blue still reads against the deep backdrop. */ [data-theme='dark'][data-accent='slate'] { --accent: oklch(58% 0.12 245); --accent-ink: #f2efe8; --accent-soft: oklch(58% 0.12 245 / 0.25); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-feature-settings: 'ss01', 'cv11'; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; letter-spacing: -0.01em; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; } .mono { font-family: var(--mono); font-weight: 400; letter-spacing: 0; } .serif { font-family: var(--serif); font-style: italic; letter-spacing: -0.02em; } /* Bracketed section/process labels like [ 01 / VAP ] should never wrap */ .num { white-space: nowrap; } /* Shared chrome */ .nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px); background: color-mix(in oklab, var(--bg) 82%, transparent); border-bottom: 1px solid var(--line); } .nav .nav-inner { display: grid; /* Three columns: equal-width flanks (1fr each) + auto-sized links cluster in the middle. This puts the link cluster at true page center, regardless of how much wider the right-side actions are than the left-side brand. */ grid-template-columns: 1fr auto 1fr; align-items: center; padding: 28px 40px; gap: 36px; } .nav .nav-inner > .brand { justify-self: start; } .nav .nav-inner > .nav-actions { justify-self: end; } .brand { font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: 0.02em; display: inline-flex; align-items: baseline; gap: 8px; } .brand .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; margin-right: 2px; transform: translateY(-1px); } .nav-links { display: flex; gap: 28px; justify-content: center; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); } .nav-links a { position: relative; padding: 4px 0; } .nav-links a:hover { color: var(--ink); } .nav-links a:hover::after, .nav-links a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--ink); } .nav-links a.active { color: var(--ink); } .nav-cta { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; padding: 10px 14px; border: 1px solid var(--ink); color: var(--ink); display: inline-flex; align-items: center; gap: 8px; } .nav-cta:hover { background: var(--ink); color: var(--bg); } .nav-cta .arr { transition: transform .2s ease; } .nav-cta:hover .arr { transform: translate(2px, -2px); } .nav-actions { display: flex; align-items: center; gap: 12px; } .theme-toggle { width: 34px; height: 34px; background: transparent; border: 1px solid var(--line); color: var(--ink); font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color .2s ease, background .2s ease; padding: 0; font-family: var(--sans); } .theme-toggle:hover { border-color: var(--ink); background: var(--bg-2); } /* ---------- ACCENT PICKER ---------- */ /* Three small circular swatches sitting next to the dark/light toggle in the nav. Each swatch shows the literal color it'll apply (amber, slate, mono). Picked state gets a 1px ring offset by 2px from the swatch — looks like focus, reads as selected. The amber/slate swatches show their hue; the mono swatch is a half-and-half ink/cream pill to telegraph "B&W mode" without ambiguity. */ .accent-picker { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; border-right: 1px solid var(--line); margin-right: 6px; height: 34px; } .accent-swatch { width: 22px; height: 22px; padding: 0; margin: 0; background: transparent; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; position: relative; transition: transform .18s ease; } .accent-swatch:hover { transform: scale(1.08); } .accent-swatch span { width: 14px; height: 14px; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 14%, transparent); transition: box-shadow .18s ease; } .accent-swatch.on::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--ink); } .accent-swatch-amber span { background: oklch(68% 0.18 52); } .accent-swatch-slate span { background: oklch(38% 0.10 245); } .accent-swatch-mono span { /* Half ink, half cream — reads as "monochrome mode" at a glance. */ background: linear-gradient(90deg, #0a0a0a 0%, #0a0a0a 50%, #f2efe8 50%, #f2efe8 100%); } [data-theme='dark'] .accent-swatch-mono span { background: linear-gradient(90deg, #f2efe8 0%, #f2efe8 50%, #0a0a0a 50%, #0a0a0a 100%); } @media (max-width: 900px) { /* Hide the picker on mobile — it's a tertiary control and the burger already crowds the right side. Power users can still set theme via localStorage; mobile gets a clean nav. */ .accent-picker { display: none; } } /* ---------- MOBILE NAVIGATION ---------- */ /* Burger button — hidden on desktop, shown at mobile breakpoint (900px, matched to where .nav-links gets hidden). Three stacked bars that collapse to an X when the menu is open. Sized to 44x44 minimum touch target per iOS/Android accessibility guidelines. */ .nav-burger { display: none; width: 44px; height: 44px; background: transparent; border: 1px solid var(--line); cursor: pointer; padding: 0; position: relative; } .nav-burger span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--ink); transition: transform .25s cubic-bezier(.2,.7,.2,1), opacity .2s ease, top .25s cubic-bezier(.2,.7,.2,1); } .nav-burger span:nth-child(1) { top: 16px; } .nav-burger span:nth-child(2) { top: 21px; } .nav-burger span:nth-child(3) { top: 26px; } .is-menu-open .nav-burger span:nth-child(1) { top: 21px; transform: rotate(45deg); } .is-menu-open .nav-burger span:nth-child(2) { opacity: 0; } .is-menu-open .nav-burger span:nth-child(3) { top: 21px; transform: rotate(-45deg); } /* Mobile menu panel — full-height below nav bar. Positioned directly under the parent .nav via top: 100%, so it tracks whatever the nav's actual rendered height is regardless of padding/content changes. Hidden off-screen by default, slides in on open. Not rendered on desktop (aria-hidden true + display none). */ .nav-menu { position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - 100%); max-height: calc(100vh - 64px); background: var(--bg); z-index: 98; display: none; opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .25s cubic-bezier(.2,.7,.2,1); overflow-y: auto; border-top: 1px solid var(--line); } .nav-menu[aria-hidden="false"] { display: block; } .is-menu-open .nav-menu { opacity: 1; transform: translateY(0); } .nav-menu-inner { display: flex; flex-direction: column; padding: 32px 28px 48px; gap: 4px; } .nav-menu-inner a { font-family: var(--serif); font-size: 32px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.2; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); display: flex; align-items: baseline; justify-content: space-between; } .nav-menu-inner a::after { content: '→'; font-family: var(--mono); font-size: 18px; color: var(--muted); transition: transform .2s ease, color .2s ease; } .nav-menu-inner a:hover { color: var(--accent); } .nav-menu-inner a:hover::after { color: var(--accent); transform: translateX(4px); } .nav-menu-inner a.active { color: var(--accent); } @media (max-width: 900px) { /* On mobile, the middle nav-links column is hidden, so collapse the grid to a 2-column layout: brand left, actions right. Without this override the grid stays 3-column and the right column ends up empty/unanchored. */ .nav .nav-inner { grid-template-columns: 1fr auto; gap: 12px; padding: 18px 20px; } .nav-burger { display: inline-flex; align-items: center; justify-content: center; } /* Bump theme toggle to match burger touch target on mobile (stays 34 on desktop). */ .theme-toggle { width: 44px; height: 44px; font-size: 18px; } /* The "Get in touch" CTA is big on mobile. Hide it — Contact is in the burger menu. */ .nav-cta { display: none; } } /* Layout helpers */ .wrap { max-width: 1400px; margin: 0 auto; padding: 0 28px; } .wrap-wide { max-width: 1600px; margin: 0 auto; padding: 0 28px; } .rule { height: 1px; background: var(--line); width: 100%; } .rule-2 { height: 1px; background: var(--line-2); width: 100%; } .eyebrow { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); } .pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; padding: 6px 10px; border: 1px solid var(--line); border-radius: 100px; color: var(--ink-2); } .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } /* Placeholder imagery — subtle striped panel */ .ph { position: relative; background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--ink) 8%, transparent) 0 1px, transparent 1px 10px), var(--bg-2); border: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; display: flex; align-items: center; justify-content: center; overflow: hidden; } .ph::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 70% at 30% 20%, color-mix(in oklab, var(--bg) 70%, transparent), transparent 70%); pointer-events: none; } .ph > span { position: relative; z-index: 1; } /* Section header */ .sec-head { display: grid; grid-template-columns: 140px 1fr; gap: 40px; padding: 80px 0 40px; border-top: 1px solid var(--line); } .sec-head .num { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: 0.1em; padding-top: 8px; white-space: nowrap; } .sec-head h2 { margin: 0; font-weight: 400; letter-spacing: -0.025em; font-size: clamp(32px, 4vw, 56px); line-height: 1.02; max-width: 900px; } .sec-head .sec-intro { margin: 24px 0 0; font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 720px; } /* Scroll marquee */ @keyframes scrollX { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .marquee-track { display: flex; gap: 80px; padding: 18px 0; animation: scrollX 40s linear infinite; white-space: nowrap; width: max-content; } .marquee-item { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-2); } .marquee-item .sep { color: var(--muted); margin-left: 80px; }