/* === Reset + Base typography === */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; color: var(--text-primary); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); overscroll-behavior-y: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Black sits on only — body must NOT create a stacking context or * paint a solid background, otherwise #gradient-stage at z-index: -1 is * clipped behind the body's own background. */ html { background: var(--c-black); } body { background: transparent; min-height: 100dvh; overflow-x: hidden; } /* Defensive: enforce the [hidden] attribute against any id/class selector * that might re-set display. Important because #welcome { display: flex } * (specificity 0,1,0,0) would otherwise outweigh the browser's default * [hidden] { display: none } (specificity 0,0,1,0). */ [hidden] { display: none !important; } img, svg, video, canvas { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } button:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 2px; } input, textarea, select { font: inherit; color: inherit; } ul, ol { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, h5, h6, p { margin: 0; } h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--letterspace-display); text-transform: uppercase; } h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--letterspace-display); text-transform: uppercase; } .label { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-label); letter-spacing: var(--letterspace-label); text-transform: uppercase; color: var(--text-secondary); } .display { font-family: var(--font-display); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--letterspace-display); text-transform: uppercase; } /* Utility */ .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; } /* Pill button — used by cards/welcome */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--btn-min); padding: 0 var(--sp-5); border-radius: var(--r-pill); font-family: var(--font-body); font-weight: 700; font-size: var(--fs-body); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-on-bright); background: linear-gradient(135deg, var(--grad-active-1), var(--grad-active-2), var(--grad-active-3)); background-size: 200% 200%; background-position: 0% 50%; transition: transform var(--dur-fast) var(--ease-smooth), background-position var(--dur-base) var(--ease-smooth); will-change: transform; } .btn:hover { background-position: 100% 50%; } .btn:active { transform: scale(0.97); } .btn--ghost { background: transparent; color: var(--text-primary); border: 1.5px solid var(--border-card-hi); } .btn--ghost:hover { background: rgba(255,255,255,0.06); } /* Prevent iOS tap zoom on form inputs (informational) */ input, textarea, select { font-size: 16px; }