/* =========================================================================== * CORE — reset, global body/html, universal cursor, screen-reader utility, * and the single global CSS variable (--page-pad) that tracks viewport * breakpoints. Other modules CONSUME --page-pad but don't redefine it. * * This file is loaded FIRST in index.html so later modules can rely on * the reset already having zeroed margins/padding and set box-sizing. * =========================================================================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 24px; --page-pad: 1.5rem; /* Native scroll enabled. Lenis intercepts wheel/touch for smoothing but the underlying scroll is real window scroll — which unlocks browser scroll anchoring (content-above-viewport growth is handled natively), compositor-thread scrolling, `animation-timeline`, content-visibility, keyboard scrolling, focus scroll, etc. */ /* Kill iOS rubber-band / bounce past the edge. Pairs with Lenis's `overscroll:false` — that clamps Lenis-driven scroll, this prevents the browser itself from permitting a bounce past the scroll limit. */ overscroll-behavior: none; /* Reserve the scrollbar's column even while html.is-loading has overflow:hidden, so the reveal doesn't shift the page when the scrollbar appears (classic-scrollbar platforms only — overlay scrollbars have no gutter). The reserved strip shows the page background. Pre-18.2 Safari ignores this and keeps the old shift — graceful degrade. */ scrollbar-gutter: stable; } body { font-family: "Redacted Script", cursive; /* font-family: "Helvetica Neue", Arial, sans-serif; */ background: #0a0a0a; color: #f0f0f0; /* No opacity:0 anti-flash here anymore — the #loading-overlay (css/loading.css) is opaque from first paint and covers the page while it loads and lays out. */ overscroll-behavior: none; } /* Body copy uses Redacted Script — a "blurred-out text" face that reads as placeholder while the site's lorem-ipsum is still in. Loaded via Google Fonts in index.html. Headings keep the body sans-serif (set on above) so structural text stays legible. Override in a more-specific rule if a particular paragraph needs real type. */ p { font-family: "Redacted Script", cursive; font-weight: 400; font-style: normal; } /* Force crosshair on every element. A custom cursor element (rendered in JS) handles the "interactive" affordance, so the system cursor stays uniform across the whole page. Universal + !important is intentional — it overrides every `cursor: pointer` / `grab` / etc. in the codebase without having to chase them down individually. */ *, *::before, *::after { cursor: crosshair !important; } /* Screen reader only */ .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; } /* Breakpoint-driven global var — consumed by modules that need to bump their inner padding in step with the viewport. The actual per-module responsive layout rules live inside each module's own file. */ @media (min-width: 768px) { html { --page-pad: 2.5rem; } } @media (min-width: 1024px) { html { --page-pad: 4rem; } }