/* ========================================================================== base.css — Reset, global typography, layout primitives ========================================================================== */ /* ---- Reset ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: dark; } body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.5; letter-spacing: var(--tracking-snug); color: var(--color-text); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } /* Clip decorative / diagram overflow on the home page so nothing forces a horizontal scrollbar. Scoped to
(not ) so it doesn't become a scroll container and break the sticky header; excludes docs (sticky sidebar). */ main:not(.docs) { overflow-x: clip; } img, svg, video { display: block; max-width: 100%; } img { height: auto; image-rendering: -webkit-optimize-contrast; /* Chrome/Safari: crisper upscaling */ image-rendering: crisp-edges; /* Firefox */ } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } ul { list-style: none; } :focus-visible { outline: 2px solid var(--brand-purple); outline-offset: 2px; } ::selection { background: var(--brand-purple); color: #fff; } /* ---- Headings ---------------------------------------------------------- */ h1, h2, h3, h4 { font-weight: 400; line-height: 1; letter-spacing: var(--tracking-tight); } p { text-wrap: pretty; } /* ---- Brand gradient text ---------------------------------------------- */ .gradient-text { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---- Layout container -------------------------------------------------- */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } /* Vertical rhythm for full-width sections */ .section { position: relative; padding-block: 96px; } .section--tight { padding-block: 64px; } /* ---- Helpers ----------------------------------------------------------- */ .text-muted { color: var(--color-text-muted); } .text-dim { color: var(--color-text-dim); } .mono { font-family: var(--font-mono); } .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; } /* Subtle film-grain overlay used behind glow areas */ .noise-overlay { position: absolute; inset: 0; background-image: url("../assets/images/noise.webp"); background-size: 220px; opacity: 0.5; mix-blend-mode: overlay; pointer-events: none; z-index: 0; } /* Reveal-on-scroll (driven by js/main.js IntersectionObserver) */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: none; } /* ---- Smooth scrolling (Lenis) ----------------------------------------- */ /* Lenis adds these classes at runtime; styles taken from the library docs. */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-smooth iframe { pointer-events: none; } @media (prefers-reduced-motion: reduce) { html:not(.force-motion) { scroll-behavior: auto; } html:not(.force-motion) .reveal { opacity: 1; transform: none; transition: none; } }