/* ========================================================================== Aurora hero backdrop (reusable) -------------------------------------------------------------------------- A soft, slowly-drifting pastel mesh-gradient glow anchored to the top of a page's main content. Mirrors the homepage hero aurora (see homepage.css / nebula-background-technique.md) but scoped to #bx-content so it works on any interior page regardless of its hero markup. Usage: 1. Load this file in the page . 2. As the first child of
, insert: ========================================================================== */ /* Host: establish a positioning + stacking context so the backdrop sits behind the page content and is clipped to this page's main column. */ main#bx-content { position: relative; isolation: isolate; } /* Lift real content above the backdrop. Everything except the aurora layer gets its own stacking level so text/cards always paint on top. */ main#bx-content > :not(.hero-aurora-bg-section) { position: relative; z-index: 1; } /* The backdrop layer — a top-of-page band that fades out as it descends. */ .hero-aurora-bg-section { position: absolute; top: 0; left: 0; width: 100%; height: 105vh; z-index: 0; pointer-events: none; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%); mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%); } /* The animated mesh — four soft pastel blobs that breathe and drift. */ .hero-aurora-bg-section__mesh { position: absolute; inset: -15%; background: radial-gradient(ellipse 600px 500px at 25% 30%, hsla(280, 50%, 88%, 0.6) 0%, transparent 100%), radial-gradient(ellipse 500px 450px at 75% 20%, hsla(25, 70%, 91%, 0.55) 0%, transparent 100%), radial-gradient(ellipse 550px 400px at 55% 75%, hsla(205, 45%, 89%, 0.5) 0%, transparent 100%), radial-gradient(ellipse 400px 350px at 15% 70%, hsla(320, 40%, 90%, 0.4) 0%, transparent 100%); animation: hero-aurora 25s ease-in-out infinite alternate; will-change: transform; } @keyframes hero-aurora { 0% { transform: translate(0%, 0%) scale(1) rotate(0deg); } 25% { transform: translate(4%, -3%) scale(1.04) rotate(1deg); } 50% { transform: translate(-3%, 4%) scale(1.02) rotate(-0.5deg); } 75% { transform: translate(2%, 2%) scale(1.06) rotate(0.5deg); } 100% { transform: translate(-2%, -3%) scale(1.03) rotate(-1deg); } } /* Dark mode — swap the pastel blobs for deep, saturated tones to match the homepage dark hero treatment. */ html[data-theme="dark"] .hero-aurora-bg-section__mesh { background: radial-gradient(ellipse 600px 500px at 25% 30%, hsla(270, 60%, 28%, 0.55) 0%, transparent 100%), radial-gradient(ellipse 500px 450px at 75% 20%, hsla(220, 55%, 22%, 0.50) 0%, transparent 100%), radial-gradient(ellipse 550px 400px at 55% 75%, hsla(195, 60%, 20%, 0.45) 0%, transparent 100%), radial-gradient(ellipse 400px 350px at 15% 70%, hsla(300, 45%, 25%, 0.35) 0%, transparent 100%); } /* Respect reduced-motion: keep the glow, drop the drift. */ @media (prefers-reduced-motion: reduce) { .hero-aurora-bg-section__mesh { animation: none; } } /* Hide on small screens (matches homepage behaviour). */ @media (max-width: 767px) { .hero-aurora-bg-section { display: none; } }