/* === Reset === */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } /* === Design Tokens === */ /* Light is the default theme; [data-theme="dark"] overrides the colors. The anti-flash inline script in each page sets data-theme before paint. */ :root { color-scheme: light; --bg-primary: #ffffff; --bg-secondary: #f4f5f8; --bg-tertiary: #e9ebf1; --bg-glass: rgba(20, 21, 28, 0.035); --bg-glass-hover: rgba(20, 21, 28, 0.06); --text-primary: #14151c; --text-secondary: #4a4e60; --text-tertiary: #6b7080; --accent: #2f57e6; --accent-hover: #1f47d6; --accent-2: #0e9fc7; --accent-warm: #ff7a45; --accent-warm-hover: #ff8c5c; --border: rgba(20, 21, 28, 0.10); --border-hover: rgba(20, 21, 28, 0.24); --shadow-color: rgba(20, 21, 28, 0.12); --nav-bg: rgba(255, 255, 255, 0.78); --nav-mobile-bg: rgba(255, 255, 255, 0.97); --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Schibsted Grotesk', 'Geist', sans-serif; --font-mono: 'JetBrains Mono', monospace; --h1: clamp(2.6rem, 5.2vw, 4.85rem); --h2: clamp(1.9rem, 3.2vw, 3rem); --h3: clamp(1.15rem, 2vw, 1.5rem); --body: 1rem; --small: 0.9rem; --eyebrow: 0.75rem; --max-width: 1180px; --section-padding: 6.5rem 0; --card-gap: 1.5rem; --component-padding: 2rem; } [data-theme="dark"] { color-scheme: dark; --bg-primary: #0a0b12; --bg-secondary: #13141d; --bg-tertiary: #1c1e2b; --bg-glass: rgba(255, 255, 255, 0.04); --bg-glass-hover: rgba(255, 255, 255, 0.07); --text-primary: #f3f4f9; --text-secondary: #a6a9bd; --text-tertiary: #8a8ea3; --accent: #6188ff; --accent-hover: #7e9bff; --accent-2: #36c5f0; --border: rgba(255, 255, 255, 0.09); --border-hover: rgba(255, 255, 255, 0.22); --shadow-color: rgba(0, 0, 0, 0.5); --nav-bg: rgba(10, 11, 18, 0.72); --nav-mobile-bg: rgba(10, 11, 18, 0.97); } body { font-family: var(--font-sans); font-size: var(--body); line-height: 1.7; color: var(--text-secondary); background: var(--bg-primary); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Subtle film grain for depth (static, very low opacity, non-interactive) */ body::after { content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: 0; mix-blend-mode: soft-light; 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.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Grain adds premium depth on the dark theme; light surfaces stay clean */ [data-theme="dark"] body::after { opacity: 0.05; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-primary); font-weight: 700; letter-spacing: -0.03em; line-height: 1.13; } h1 { font-size: var(--h1); letter-spacing: -0.04em; } h2 { font-size: var(--h2); } h3 { font-size: var(--h3); } a { color: var(--accent); text-decoration: none; transition: color 0.25s ease; } a:hover { color: var(--accent-hover); } /* Inline prose links keep an underline so they're distinguishable without relying on color (WCAG) */ p a { text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 1px; } /* Visible keyboard focus on every interactive element */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; } img { max-width: 100%; height: auto; display: block; } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 2rem; } section { padding: var(--section-padding); } .eyebrow { font-size: var(--eyebrow); font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); margin-bottom: 1.1rem; } /* gradient text accent */ .grad-text { background: linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } @media (max-width: 768px) { :root { --section-padding: 4rem 0; } .container { padding: 0 1.5rem; } }