/* Galaxy Hero - the fixed layer and the core glow. galaxy.js drives the custom properties on .galaxy-space. The layer sits at z-index 2 with pointer events off; put page content above it. */ .galaxy-space { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; --core-x: 50%; --core-y: 50%; --core-tint: 0; /* 0 = white galaxy core, 1 = the shape's tint */ --core-rgb: 90 220 255; --core-opacity: 1; } .galaxy-stars { display: block; width: 100%; height: 100%; } /* the bright heart: a white gradient cross-faded with the shape's tint */ .galaxy-core { position: absolute; left: var(--core-x); top: var(--core-y); width: min(26vh, 15vw, 15rem); aspect-ratio: 1; transform: translate(-50%, -50%); opacity: var(--core-opacity); mix-blend-mode: screen; } .galaxy-core::before, .galaxy-core::after { content: ''; position: absolute; inset: 0; } .galaxy-core::before { opacity: calc(1 - var(--core-tint)); background: radial-gradient(circle, #ffffff 0%, rgba(236, 228, 255, 0.85) 5%, rgba(205, 186, 255, 0.44) 13%, rgba(170, 146, 250, 0.13) 30%, rgba(140, 110, 230, 0.03) 50%, transparent 72%); } .galaxy-core::after { opacity: var(--core-tint); background: radial-gradient(circle, rgb(var(--core-rgb)) 0%, rgb(var(--core-rgb) / 0.85) 5%, rgb(var(--core-rgb) / 0.44) 13%, rgb(var(--core-rgb) / 0.13) 30%, rgb(var(--core-rgb) / 0.03) 50%, transparent 72%); } /* galaxy.js adds .no-galaxy to when WebGL is unavailable or lost */ .no-galaxy .galaxy-space { display: none; }