/* ========================================================================== base.css — design tokens, reset, typography, global utilities ========================================================================== */ :root { /* Surfaces */ --bg: #0b0b0c; --bg-alt: #101013; --bg-raise: rgba(255, 255, 255, 0.035); /* Ink */ --ink: #f2efe9; --ink-dim: rgba(242, 239, 233, 0.72); --ink-faint: rgba(242, 239, 233, 0.34); --line: rgba(242, 239, 233, 0.12); --line-soft: rgba(242, 239, 233, 0.06); /* Accent */ --accent: #c9f24e; --accent-warm: #ff6b4a; /* Type */ /* One type voice: Space Grotesk carries display and body, mono carries labels. Its geometric, slightly technical letterforms match the node-mesh backdrop. */ --font-sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-display: "Space Grotesk", "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; /* Rhythm */ --pad-x: clamp(1.25rem, 5vw, 6.5rem); --section-y: clamp(6rem, 14vh, 12rem); --measure: 62ch; /* Motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur: 0.7s; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* The root paints the ground colour; is transparent so the negative-z-index backdrop canvas can sit between them. */ background: var(--bg); } body { margin: 0; background: transparent; color: var(--ink); font-family: var(--font-sans); font-weight: 300; font-size: clamp(1rem, 0.55vw + 0.88rem, 1.125rem); line-height: 1.7; letter-spacing: 0.01em; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.is-locked { overflow: hidden; } h1, h2, h3 { margin: 0; font-weight: 300; line-height: 1.02; letter-spacing: -0.035em; } p { margin: 0 0 1.35em; max-width: var(--measure); } p:last-child { margin-bottom: 0; } strong { font-weight: 500; color: var(--ink); } em { font-style: normal; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } img, video { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ::selection { background: var(--accent); color: #0b0b0c; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; } /* --- Skip link ----------------------------------------------------------- */ .skip-link { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 200; padding: 0.5rem 0.9rem; background: var(--accent); color: #0b0b0c; font-size: 0.8rem; font-weight: 500; transform: translateY(-160%); transition: transform 0.25s var(--ease); } .skip-link:focus-visible { transform: translateY(0); } /* --- Scroll progress ----------------------------------------------------- */ .scroll-progress { position: fixed; inset: 0 0 auto 0; z-index: 120; height: 2px; background: var(--line-soft); } .scroll-progress span { display: block; height: 100%; width: 0; background: var(--accent); transform-origin: left center; } /* --- Film grain overlay -------------------------------------------------- */ .grain { position: fixed; inset: -50%; z-index: 110; pointer-events: none; opacity: 0.045; background-image: url("data:image/svg+xml;utf8,"); animation: grain-drift 6s steps(6) infinite; } @keyframes grain-drift { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -2%); } 80% { transform: translate(3%, 1%); } } /* --- Reveal-on-scroll ---------------------------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } [data-reveal].is-visible { opacity: 1; transform: none; } /* --- Shared type helpers ------------------------------------------------- */ .lead { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.55rem, 3.3vw, 2.8rem); line-height: 1.14; letter-spacing: -0.035em; color: var(--ink); margin-bottom: 1.6em; max-width: 32ch; } /* --- Reduced motion ------------------------------------------------------ */ @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; } [data-reveal] { opacity: 1; transform: none; } .grain { animation: none; } }