/* ============================================================ Starwise — sparse static star field ============================================================ Quiet ambient backdrop for pages that should NOT have the full constellation animation (order forms, privacy, terms). Implementation: a fixed-position SVG layer behind all content, pointer-events: none so it never intercepts clicks. The stars are static — zero CPU once painted. Generated client-side once on load via /assets/stars-bg.js so we don't ship 50 tags in every HTML file. To use on a page: 1. 2. 3. — place anywhere; CSS pins it to the viewport. ============================================================ */ .stars-bg { position: fixed; inset: 0; z-index: -1; /* sit BEHIND non-positioned page content. Using -1 (not 0) so default-positioned content layers above without needing explicit z-index on every wrapper. */ pointer-events: none; overflow: hidden; /* Subtle vignette so the corners read slightly darker — adds depth without being noisy. */ background: radial-gradient( ellipse at center, transparent 0%, transparent 60%, rgba(0, 0, 0, 0.25) 100% ); } .stars-bg svg { width: 100%; height: 100%; display: block; } .stars-bg circle { fill: #F4EDDE; /* ink-white — readable against any dark surface */ } /* Honor reduced-motion: nothing animates here anyway, but if the user is on a low-power device we render even fewer dots. The generator in stars-bg.js reads this media query. */ /* ============================================================ Body-bg escape: when stars-bg is present, the body's solid bg would paint at the canvas layer and hide anything at z-index -1. Move the bg to so stars can sit between them. ============================================================ */ html { background-color: var(--space-deep, #040618); } body { background: transparent !important; } /* Privacy + Terms wrap their content in
which has its own solid bg. That covers stars-bg. Force it transparent. */ main.legal { background: transparent !important; }