/* Quilt night sky — reusable starfield background. * * Add the class `quilt-sky` to (or any positioned container) and drop a * inside it, then include quilt-starfield.js. * Content sits in normal flow above the field (the canvas + vignette use * negative z-index, so nothing else needs changing). Requires Quilt tokens * (quilt.css) for the colors. */ .quilt-sky { background: var(--color-sky-void, #07080b); } canvas[data-quilt-starfield] { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; display: block; } /* faint vignette so the edges fall into deeper night */ .quilt-sky::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(120% 120% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.55) 100%); } /* Focus dim — opt-in modifier for surfaces with a hero composition centered in the * viewport. Adds a soft radial dim that absorbs background-field stars near the * hero, leaving a bright "ring" of starfield between center and edges. Layers * BELOW the vignette (::before paints before ::after at the same z-index), so the * dark zones don't conflict — center dim from ::before, edge dim from ::after. * Promoted from moongate gate page (2026-06-14). */ .quilt-sky.focus::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient( circle var(--quilt-sky-focus-radius, 300px) at var(--quilt-sky-focus-x, 50%) var(--quilt-sky-focus-y, 50%), rgba(7, 8, 11, 0.85) 0%, rgba(7, 8, 11, 0.55) 45%, rgba(7, 8, 11, 0.18) 75%, transparent 100%); }