right after ; this file styles it. Pages keep their own content backgrounds — the orbs sit behind everything. ============================================================ */ :root { --color-orb-1: rgba(0, 113, 227, 0.35); --color-orb-2: rgba(88, 86, 214, 0.30); --color-orb-3: rgba(52, 199, 89, 0.25); } @media (prefers-color-scheme: dark) { :root { --color-orb-1: rgba(0, 113, 227, 0.25); --color-orb-2: rgba(88, 86, 214, 0.22); --color-orb-3: rgba(52, 199, 89, 0.18); } } /* Let the orbs + base show through the page surface. */ body { background: transparent !important; } /* Opaque base colour, fixed behind everything. */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: var(--color-bg); pointer-events: none; } /* Orb band at the top of the document (scrolls with the page, like the original hero). */ .site-orbs { position: absolute; top: 0; left: 0; right: 0; height: 800px; pointer-events: none; overflow: hidden; z-index: -1; } .site-orb { position: absolute; border-radius: 50%; filter: blur(80px); animation: orb-float linear infinite; } .site-orb-1 { width: 400px; height: 400px; background: var(--color-orb-1); top: -80px; left: -100px; animation-duration: 6s; } .site-orb-2 { width: 350px; height: 350px; background: var(--color-orb-2); top: 20px; right: -80px; animation-duration: 5s; animation-delay: -2s; } .site-orb-3 { width: 300px; height: 300px; background: var(--color-orb-3); bottom: -40px; left: 30%; animation-duration: 7s; animation-delay: -4s; } @keyframes orb-float { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(30px, -20px) scale(1.05); } 50% { transform: translate(-10px, 20px) scale(0.95); } 75% { transform: translate(-30px, -10px) scale(1.02); } } @media (prefers-reduced-motion: reduce) { .site-orb { animation: none; } }