/* The Apex AI - Through Time. Black/gold/silver only. No em dashes in copy. */ :root { color-scheme: dark; --black: #030507; --gold: #c8a84b; --gold-light: #e8c96a; --gold-dark: #a88430; --silver: #c4cdd8; --silver-light: #dde5ee; --off-white: #eef3f8; --hairline: rgba(200, 168, 75, 0.28); --font: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif; --ease: cubic-bezier(0.33, 0, 0.2, 1); --fast: 220ms; } * { box-sizing: border-box; margin: 0; padding: 0; } /* cutting-edge details: every touchpoint on-palette */ ::selection { background: rgba(200, 168, 75, 0.4); color: var(--off-white); } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #060608; } ::-webkit-scrollbar-thumb { background: linear-gradient(var(--gold-dark), #6d5620); border-radius: 5px; border: 2px solid #060608; } ::-webkit-scrollbar-thumb:hover { background: var(--gold); } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } html { scroll-behavior: smooth; } body { font-family: var(--font); background: var(--black); color: var(--silver-light); -webkit-font-smoothing: antialiased; overflow-x: hidden; line-height: 1.5; } /* ---- fixed background stack: poster (instant) then canvas (fades over) ---- */ #poster { position: fixed; inset: 0; z-index: 0; /* COLOUR ONLY on the element itself. main.js interpolates this per scroll tick between the two nearest era poster colours, and writes it as style.backgroundColor - NEVER the `background` shorthand, which would blow away the hero still layered on ::after below. The colour is not decoration: two clips crossfading leave #poster ~25% visible at the midpoint (top layer alpha 1-t over bottom layer alpha t), and this is what fills that window. */ background-color: #060608; /* no transition: scroll-driven colour writes already interpolate per-tick, and a transition on a fixed full-viewport layer kept the compositor busy */ } /* THE REAL HERO FRAME, painted straight from CSS with no JS at all. It used to be attached only as a