/* ============================================================================= infiniteStyles.css — the CORE stylesheet ----------------------------------------------------------------------------- Owns ONLY what the core needs: theme variables, the page reset, the two fixed layers (#infinite-scroller, #infinite-overlays), the .infinite-panel spacer rule, and the base .infinite-overlay rule. COUPLED WITH infiniteScroll.js: - The CORE writes two things on every overlay each frame: `opacity` and the custom property `--shift` (px). The .infinite-overlay rule below CONSUMES --shift in its transform. Don't set transform from JS — CSS owns the centering math; JS owns the scroll-linked offset. - The CORE toggles `.is-active` on the centered overlay. The base is fully click/wheel-through so the page wheel always reaches #infinite- scroller; .is-active is a hook a panel type can use to gate pointer-events on its own interactive bits. Panel-type stylesheets (e.g. dotsStyles.css) extend this with their own .-overlay rule and any inner classes — they NEVER need to override the base opacity/centering contract, just add to it. ========================================================================== */ :root { /* ---------- surfaces ---------- Three-step text-weight ramp: --ink-strong (high emphasis, Tier 1 headings), --ink (default body text), --ink-dim (low emphasis, captions). */ --bg: #ffffff; /* page background */ --ink-strong: #494949; /* high-emphasis text — titles, weighty elements */ --ink: #1c1813; /* primary text */ --ink-dim: #626c70; /* secondary text */ --ink-dimmer: #b5bbbd; /* tertiary text */ --line: rgba(28, 24, 19, 0.16); /* hairline borders */ --sheet-bg: rgba(240, 240, 240, 0.6); /* frosted glass fill */ /* ---------- brand primaries ---------- Canonical values; tune per use against the surrounding surface. See visualLanguage.md for role assignments. */ --brand-red: #ff4d00; /* slightly orange — warn, kickers, active */ --brand-yellow: #ffbb00; /* slightly orange — caution, tags */ --brand-green: #00d150; /* slightly blue — go, "next" */ --brand-blue: #00b8e6; /* slightly cold — info, "back/home" */ /* Aliases --brand-red so the kicker color can shift without rewriting every consumer that already reads var(--accent). */ --accent: var(--brand-red); /* ---------- motion ---------- */ --ease: cubic-bezier(0.22, 1, 0.36, 1); /* shared easing for transitions */ } * { margin: 0; padding: 0; box-sizing: border-box; } /* The page itself never scrolls — #infinite-scroller does. overflow:hidden on body makes the body a fixed full-screen stage for the layered design. */ html, body { height: 100%; background: var(--bg); color: var(--ink); font-family: "Glitched Book", sans-serif; /* COUPLED: declared in fonts.css */ overflow: hidden; -webkit-font-smoothing: antialiased; } /* Form-element font inheritance. Browsers reset font-family on