/* * Subtle starry-night / starry-day background for furayoshi.com * Sits behind all site content. * * Theme-aware: the canvas paint colour is driven by the * --sky-bg CSS variable, which the main stylesheet sets to * #000 in dark mode (the original starry night) * #ffffff in light mode (a white "day" sky with black stars) * * IMPORTANT — edge coverage and stacking: * * - The canvas lives at z-index: -1, which puts it BEHIND the body's * own background paint. So we MUST keep body background transparent * or the body paint will cover the canvas. * - The element paints below the body in the stacking order, so * painting html in the page colour is a safe fallback colour. * - The canvas is oversized by OVERSCAN (16 px on each side) and offset * by -OVERSCAN/2, so even when the parallax translates it by ±3 px the * viewport is still fully covered by the canvas. * * The JS also sets canvas.width/height to the viewport size on * resize. To preserve the overscan, those styles are written to the * element by JS only when it actually needs to grow; we keep the * overscanned geometry in CSS as the source of truth and have the JS * leave the size alone. (See stars.js.) */ :root { --stars-overscan: 16px; } /* Page fallback colour — picks up the active theme automatically. */ html { background-color: var(--sky-bg) !important; } /* Body must be transparent so it doesn't paint over the z-index: -1 canvas. */ body { background: transparent !important; } /* Force the page-level background helpers to match the theme (Bulma’s .has-background-black is HSL(221deg, *, 4%) — a very dark *blue*, not pure black; the previous override kept it pinned to #000. We now map it to the active sky colour so any section using this class blends with the starry background. */ .has-background-black { background-color: var(--sky-bg) !important; } #furayoshi-starry-sky { position: fixed; /* Size: viewport + 2 × OVERSCAN. Centred on the viewport so the transform translate never reveals the page beneath. */ left: calc(-1 * var(--stars-overscan) / 2); top: calc(-1 * var(--stars-overscan) / 2); width: calc(100vw + var(--stars-overscan)); height: calc(100vh + var(--stars-overscan)); z-index: -1; display: block; pointer-events: none; /* Sky paint: same variable as the html fallback so they always agree. */ background: var(--sky-bg); /* Tiny parallax nudge driven by JS (--stars-x, --stars-y). NOTE: no CSS transition here — the JS does its own rAF lerp so the movement stays fluid. A CSS transition would fight the JS and feel laggy. */ --stars-x: 0px; --stars-y: 0px; transform: translate3d(var(--stars-x), var(--stars-y), 0); will-change: transform; transition: background-color 240ms ease; } /* Honor users who prefer reduced motion: skip the rAF-driven parallax entirely. */ @media (prefers-reduced-motion: reduce) { #furayoshi-starry-sky { transform: none; } }