/* * Myriad — starfield background. * * Loaded after main.css and additive to it: it styles ONE element, the canvas * that webassets/js/starfield.js creates. Nothing in the served HTML matches * these selectors, so with JavaScript off this file costs its bytes and changes * not a single pixel. * * THE BRIGHTNESS CEILING IS THE ONE THING TO KEEP WHEN EDITING, and it lives * here rather than in the JavaScript on purpose: --starfield-strength is the * canvas element's opacity, so it caps the alpha of EVERY pixel of the field at * once. Stars are drawn opaque inside the canvas and no number of them piling * up on the same pixel can push past this value. * * 0.22 is measured, not eyeballed. The worst case on this site is a white star * core sitting directly behind the muted body text (#c9aeff) at the lightest * point of the page gradient (#2e0073, top centre, which is where the hero sits): * * strength #c9aeff on the composited background * 0.00 8.05:1 * 0.22 4.71:1 <- AA floor for normal text is 4.5:1 * 0.30 3.68:1 fails * * Raising it is a contrast regression, not a taste change. Lowering it is free. */ :root { /* Channels, not hex — same reason as main.css: the JavaScript reads these * three and mixes its own alphas from them, so a hex here would have to be * parsed twice and would drift from its translucent uses. * * The palette is the community logo's: lavender-white and violet for the * four-point stars inside the mark, teal for the ring around it. */ --starfield-tint-a: 243, 236, 255; --starfield-tint-b: 185, 140, 255; --starfield-tint-c: 94, 242, 208; --starfield-strength: 0.22; } /* * z-index: -1 puts the canvas above the page background and below every piece * of content, which is what keeps the nav, the join buttons, the showcase * controls and the footer links clickable and focusable. pointer-events: none * is belt and braces for the same thing. * * It depends on one property of main.css: must have no background of its * own. body's background then propagates to the root canvas and paints beneath * negative-z-index children. Give a background and it would paint over * the stars instead. * * No `inset: 0` shorthand — iOS Safari below 14.5 does not know it, and a * position: fixed canvas with no offsets there would sit wherever it landed. */ .starfield { position: fixed; top: 0; left: 0; z-index: -1; display: block; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1200ms ease; } /* Set by the script once the first frame is on the canvas, so the field fades * up instead of appearing mid-scroll. */ .starfield.is-lit { opacity: var(--starfield-strength, 0.22); } /* * main.css already flattens every transition to 0.01ms under this query, and * this repeats it for the one element that would otherwise fade in over more * than a second — the fade is the only motion CSS owns here. The field itself * stops in JavaScript: drift, twinkle and pointer parallax are all off and a * single static frame is drawn, because CSS cannot stop a requestAnimationFrame * loop any more than it could stop the showcase's setInterval. */ @media (prefers-reduced-motion: reduce) { .starfield { transition-duration: 0.01ms !important; } }