/* ========================================================================== Base — reset, element defaults, typography, utilities ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; overflow-x: clip; } /* `overflow-x: clip` on stops 's overflow from propagating to the viewport, so the scroll lock for the mobile drawer has to sit here. */ html.is-locked { overflow-y: hidden; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--space-md)); } body { min-height: 100svh; background: var(--c-void); color: var(--c-text); font-family: var(--font-body); font-size: var(--step-0); line-height: var(--leading-body); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* The starfield canvas and the nebula wash live behind everything. */ body::before { content: ''; position: fixed; inset: 0; z-index: -2; background: radial-gradient(ellipse 120% 80% at 50% -10%, rgba(88, 40, 160, 0.34), transparent 60%), radial-gradient(ellipse 90% 60% at 90% 20%, rgba(255, 78, 205, 0.12), transparent 65%), radial-gradient(ellipse 100% 70% at 5% 75%, rgba(94, 231, 255, 0.09), transparent 60%), linear-gradient(180deg, var(--c-abyss), var(--c-void) 55%, #06060f); pointer-events: none; } img, picture, video, canvas, svg { display: block; max-width: 100%; } img, video { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } p, li { overflow-wrap: break-word; } ul, ol { padding: 0; list-style: none; } /* --- Headings ------------------------------------------------------------ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); line-height: var(--leading-tight); font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; overflow-wrap: break-word; } h1 { font-size: var(--step-5); } h2 { font-size: var(--step-4); } h3 { font-size: var(--step-3); } h4 { font-size: var(--step-2); } /* --- Links --------------------------------------------------------------- */ a { color: var(--c-violet-bright); text-decoration-color: rgba(199, 125, 255, 0.4); text-underline-offset: 0.2em; transition: color var(--dur-fast) var(--ease); } a:hover { color: var(--c-magenta); } :focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 3px; border-radius: var(--radius-xs); } /* --- Selection ----------------------------------------------------------- */ ::selection { background: rgba(199, 125, 255, 0.35); color: #fff; } /* --- Scrollbar ----------------------------------------------------------- */ @supports selector(::-webkit-scrollbar) { ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--c-abyss); } ::-webkit-scrollbar-thumb { background: rgba(168, 85, 247, 0.45); border-radius: var(--radius-pill); border: 2px solid var(--c-abyss); } ::-webkit-scrollbar-thumb:hover { background: rgba(199, 125, 255, 0.7); } } /* ========================================================================== Utilities ========================================================================== */ .u-text-gradient { background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; } .u-eyebrow { font-family: var(--font-display); font-size: var(--step--1); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--c-violet-bright); } .u-lead { font-size: var(--step-1); color: var(--c-text-dim); line-height: var(--leading-snug); } /* --- Skip link ----------------------------------------------------------- */ .skip-link { position: absolute; top: var(--space-sm); left: var(--space-sm); z-index: var(--z-overlay); padding: var(--space-2xs) var(--space-sm); background: var(--c-violet); color: #fff; border-radius: var(--radius-pill); font-weight: 600; text-decoration: none; transform: translateY(-200%); transition: transform var(--dur-base) var(--ease); } .skip-link:focus-visible { transform: translateY(0); color: #fff; }