/* ========================================================================== Go 3D — design tokens, reset and typography ========================================================================== */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif-latin.woff2') format('woff2'); } @font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif-italic-latin.woff2') format('woff2'); } :root { /* --- surfaces ------------------------------------------------------- */ --bg: #08090c; --bg-deep: #050609; --surface-1: #0e1015; --surface-2: #14171e; --surface-3: #1b1f28; --surface-glass: rgba(20, 23, 30, 0.72); --line: rgba(255, 255, 255, 0.075); --line-strong: rgba(255, 255, 255, 0.14); /* --- ink ------------------------------------------------------------ */ --text: #eef1f6; --text-dim: #a3adbd; --text-faint: #6d7686; /* --- accents -------------------------------------------------------- */ --jade: #3ddc97; --jade-deep: #12a06b; --jade-soft: rgba(61, 220, 151, 0.14); --sand: #e9c383; --sand-soft: rgba(233, 195, 131, 0.14); --sky: #7cc4ff; --sky-soft: rgba(124, 196, 255, 0.14); --clay: #ff7a5c; --clay-soft: rgba(255, 122, 92, 0.14); --violet: #a78bfa; /* --- stones --------------------------------------------------------- */ --stone-black: #14161b; --stone-black-hi: #454b57; --stone-white: #f4f5f7; --stone-white-lo: #b8bdc7; /* --- shape ---------------------------------------------------------- */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px; /* --- elevation ------------------------------------------------------ */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.65); --shadow-lg: 0 24px 64px -16px rgba(0, 0, 0, 0.75); --shadow-glow: 0 0 0 1px rgba(61, 220, 151, 0.25), 0 8px 40px -12px rgba(61, 220, 151, 0.35); /* --- motion --------------------------------------------------------- */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 140ms; --dur: 240ms; --dur-slow: 520ms; /* --- layout --------------------------------------------------------- */ --nav-h: 62px; --max-w: 1240px; --gutter: clamp(18px, 4vw, 48px); --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif; --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace; color-scheme: dark; } /* Light theme is opt-in via [data-theme="light"] on . */ :root[data-theme='light'] { --bg: #f6f6f4; --bg-deep: #eceae5; --surface-1: #ffffff; --surface-2: #f4f3f0; --surface-3: #e9e7e2; --surface-glass: rgba(255, 255, 255, 0.78); --line: rgba(10, 12, 16, 0.09); --line-strong: rgba(10, 12, 16, 0.18); --text: #14171d; --text-dim: #545c6a; --text-faint: #838d9c; --jade: #0f9a67; --jade-deep: #0b7b52; --jade-soft: rgba(15, 154, 103, 0.12); --sand: #a97a2b; --sand-soft: rgba(169, 122, 43, 0.12); --sky: #1f6fb8; --sky-soft: rgba(31, 111, 184, 0.12); --clay: #d1442a; --clay-soft: rgba(209, 68, 42, 0.12); --shadow-md: 0 8px 24px -10px rgba(20, 23, 29, 0.28); --shadow-lg: 0 24px 64px -20px rgba(20, 23, 29, 0.3); color-scheme: light; } /* ========================================================================== Reset ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { min-height: 100dvh; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 15px; line-height: 1.55; font-feature-settings: 'cv05' 1, 'ss03' 1, 'tnum' 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, canvas, video { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } :focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; border-radius: var(--r-xs); } ::selection { background: var(--jade); color: #04150d; } /* Scrollbars — thin and unobtrusive, but still visible. */ * { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } *::-webkit-scrollbar { width: 9px; height: 9px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-full); border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.25); background-clip: padding-box; } /* ========================================================================== Typography ========================================================================== */ h1, h2, h3, h4 { font-weight: 620; line-height: 1.12; letter-spacing: -0.022em; text-wrap: balance; } h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); } h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); } h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); } .display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.012em; line-height: 1.02; } .display em { font-style: italic; color: var(--jade); } p { text-wrap: pretty; } .lede { font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: var(--text-dim); line-height: 1.6; max-width: 58ch; } .eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-faint); } .mono { font-family: var(--font-mono); font-size: 0.86em; letter-spacing: -0.01em; } .num { font-variant-numeric: tabular-nums; } /* ========================================================================== Layout helpers ========================================================================== */ .wrap { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); } .stack { display: flex; flex-direction: column; } .row { display: flex; align-items: center; } .gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-5 { gap: 24px; } .gap-6 { gap: 32px; } .grow { flex: 1 1 auto; min-width: 0; } .center { justify-content: center; } .between { justify-content: space-between; } .wrap-row { flex-wrap: wrap; } .hidden { display: none !important; } /* Component classes set display, which would otherwise beat the UA rule for [hidden] and leave "hidden" elements on screen. */ [hidden] { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 50%; translate: -50% -150%; top: 8px; z-index: 200; padding: 10px 16px; border-radius: var(--r-sm); background: var(--jade); color: #04150d; font-weight: 600; transition: translate var(--dur) var(--ease); } .skip-link:focus-visible { translate: -50% 0; } /* Ambient page texture: a very soft radial wash plus fine grain. Both are purely decorative and sit behind everything. */ .ambient { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(60vw 50vh at 12% -10%, rgba(61, 220, 151, 0.1), transparent 60%), radial-gradient(50vw 40vh at 92% 0%, rgba(124, 196, 255, 0.075), transparent 62%), radial-gradient(70vw 60vh at 50% 110%, rgba(233, 195, 131, 0.06), transparent 60%); } .grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.032; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } :root[data-theme='light'] .grain { mix-blend-mode: multiply; opacity: 0.05; } /* ========================================================================== Motion preferences ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }