/* * Shared animated space background. To use on a page: * 1. include this stylesheet + base.css * 2. add the markup, as the first thing in : *

* 3. load GSAP, jQuery, then assets/js/stars.js * The container is fixed and full-viewport, so it is responsive by default. * (The home hero reuses only the .star / .streak atoms inside its own .canvas.) */ .space-bg { position: fixed; inset: 0; background: #000; z-index: -2; overflow: hidden; } .space-bg .canvas { position: relative; width: 100%; height: 100%; overflow: hidden; } .star { position: absolute; opacity: 1; width: 5px; height: 5px; border-radius: 50%; background: #469cf3; box-shadow: 0 0 5px rgba(70, 156, 243, 0.75); } .streak { width: 10px; height: 150px; border-radius: 100%; position: relative; top: 100px; left: 100px; box-shadow: 0 0 25px rgba(203, 62, 212, 0.75); transform: rotate(-135deg); background: linear-gradient(to bottom, #cb3ed4 0%, rgba(203, 62, 212, 0.75) 25%, rgba(203, 62, 212, 0) 100%); } /* Second shooting star: kept out of layout flow so it doesn't shift siblings */ .streak.alt { position: absolute; top: 0; left: 0; } /* * Bear mascot watermark. Shown on every theme-sol page (contact / auth / * admin) — i.e. all pages EXCEPT the home page, whose has no theme-sol * class and keeps its own bright hero bear. Centered and sized to match the * home hero (assets/css/style.css), at a low opacity so it reads as a * backdrop. Sits above the starfield (z-index -2) but behind page content. */ body.theme-sol::before { content: ""; position: fixed; inset: 0; z-index: -1; background: url('/assets/imgs/bear.png') no-repeat center center; background-size: min(70vh, 85vw); opacity: 0.12; pointer-events: none; }