/* ============================================================ 78s Works — Digital Universe Background ============================================================ Dark theme : Space — star field, nebula, solar system corner Light theme : Clean tech — faint dot grid + corner solar system (space on cream = broken; tech grid on cream = on-brand) Performance: • No filter:blur anywhere • CSS animations: transform only → compositor thread • Canvas: drawn once, no per-frame loop • Light/dark via [data-bs-theme] on ============================================================ */ /* ── Variables ─────────────────────────────────────────────── */ :root { --sol-accent-rgb: var(--bs-primary-rgb); --sol-accent-soft-rgb: var(--bs-secondary-rgb); --sol-cool-rgb: var(--bs-body-bg-rgb); --sol-sun-hot: var(--bs-secondary); --sol-sun-core: var(--bs-primary); --sol-planet-2-a: rgba(var(--bs-body-bg-rgb), 0.95); --sol-planet-2-b: rgba(var(--bs-secondary-rgb), 0.55); --sol-planet-3-a: rgba(var(--bs-secondary-rgb), 0.95); --sol-planet-3-b: rgba(var(--bs-primary-rgb), 0.55); --sol-grid-dot: rgba(var(--bs-primary-rgb), 0.11); --sol-grid-opacity: 0.5; --sol-speed-1: 20s; /* inner planet */ --sol-speed-2: 40s; /* gas giant */ --sol-speed-3: 74s; /* outer planet */ --sol-ping-dur: 5s; } [data-bs-theme="dark"] { --sol-accent-rgb: var(--bs-primary-rgb); --sol-accent-soft-rgb: var(--bs-secondary-rgb); --sol-cool-rgb: var(--bs-body-bg-rgb); --sol-sun-hot: var(--bs-secondary); --sol-sun-core: var(--bs-primary); --sol-planet-2-a: rgba(var(--bs-body-bg-rgb), 0.94); --sol-planet-2-b: rgba(var(--bs-secondary-rgb), 0.52); --sol-planet-3-a: rgba(var(--bs-secondary-rgb), 0.86); --sol-planet-3-b: rgba(var(--bs-primary-rgb), 0.52); --sol-grid-dot: rgba(var(--bs-primary-rgb), 0.09); --sol-grid-opacity: 0.42; } [data-bs-theme="light"] { --sol-accent-rgb: var(--bs-primary-rgb); --sol-accent-soft-rgb: var(--bs-secondary-rgb); --sol-cool-rgb: var(--bs-secondary-color-rgb); --sol-sun-hot: var(--bs-secondary); --sol-sun-core: var(--bs-primary); --sol-planet-2-a: rgba(var(--bs-secondary-rgb), 0.78); --sol-planet-2-b: rgba(var(--bs-primary-rgb), 0.66); --sol-planet-3-a: rgba(var(--bs-secondary-rgb), 0.9); --sol-planet-3-b: rgba(var(--bs-primary-rgb), 0.58); --sol-grid-dot: rgba(var(--bs-primary-rgb), 0.2); --sol-grid-opacity: 0.84; } /* ── Root wrapper ──────────────────────────────────────────── */ #ambient-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; /* contain:style only — layout containment can misfire on mobile browsers when combined with position:fixed + overflow:hidden */ contain: style; } /* ══════════════════════════════════════════════════════════════ DARK THEME ELEMENTS ══════════════════════════════════════════════════════════════ */ /* ── Nebula depth layers ────────────────────────────────────── */ .abg-nebula { position: absolute; border-radius: 50%; } /* Warm orange haze — lives in the lower-right, around solar system */ .abg-nebula-1 { width: 900px; height: 900px; bottom: -15%; right: -10%; background: radial-gradient(circle, rgba(var(--sol-accent-rgb), 0.13) 0%, rgba(var(--sol-accent-rgb), 0.06) 40%, transparent 68%); } /* Cool far-edge depth — upper-left */ .abg-nebula-2 { width: 600px; height: 550px; top: -12%; left: -8%; background: radial-gradient(circle, rgba(var(--sol-cool-rgb), 0.05) 0%, rgba(var(--sol-accent-soft-rgb), 0.03) 55%, transparent 72%); } /* ── Star field canvas ──────────────────────────────────────── */ #ambient-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 1; } [data-bs-theme="dark"] #ambient-canvas { opacity: 1; } [data-bs-theme="light"] #ambient-canvas { opacity: 0.88; } /* ══════════════════════════════════════════════════════════════ SOLAR SYSTEM — same for both themes, positioned lower-right corner so it NEVER overlaps hero content ══════════════════════════════════════════════════════════════ */ /* ── Anchor: sun lives in the lower-right corner ───────────── */ .abg-solar { position: absolute; right: 7%; bottom: 10%; } /* ── Signal pings — digital broadcast rings ────────────────── */ .abg-ping { position: absolute; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid rgba(var(--sol-accent-rgb), 0.65); transform: translate(-50%, -50%) scale(0); animation: abgPing var(--sol-ping-dur) ease-out infinite; } .abg-ping-2 { animation-delay: calc(var(--sol-ping-dur) / 2); } /* ── Sun / core ─────────────────────────────────────────────── */ .abg-sun { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--sol-sun-hot), var(--sol-sun-core)); transform: translate(-50%, -50%); box-shadow: 0 0 0 4px rgba(var(--sol-accent-rgb), 0.2), 0 0 16px 7px rgba(var(--sol-accent-rgb), 0.55), 0 0 40px 20px rgba(var(--sol-accent-rgb), 0.22), 0 0 90px 45px rgba(var(--sol-accent-rgb), 0.09), 0 0 160px 80px rgba(var(--sol-accent-rgb), 0.04); animation: abgSunBreath 5s ease-in-out infinite; } /* ── Orbit rings ─────────────────────────────────────────────── */ .abg-orbit { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); } .abg-orbit-1 { width: 220px; height: 220px; border: 1px solid rgba(var(--sol-cool-rgb), 0.2); } .abg-orbit-2 { width: 420px; height: 420px; border: 1px solid rgba(var(--sol-cool-rgb), 0.14); } .abg-orbit-3 { width: 640px; height: 640px; border: 1px solid rgba(var(--sol-cool-rgb), 0.08); } /* ── Asteroid belt ──────────────────────────────────────────── */ .abg-belt { position: absolute; width: 530px; height: 530px; border-radius: 50%; border: 1px dashed rgba(var(--sol-cool-rgb), 0.06); transform: translate(-50%, -50%); } /* ── Planet arms — rotate around sun origin ─────────────────── */ .abg-planet-arm { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; animation: abgOrbit linear infinite; } .abg-arm-1 { animation-duration: var(--sol-speed-1); } .abg-arm-2 { animation-duration: var(--sol-speed-2); animation-direction: reverse; } .abg-arm-3 { animation-duration: var(--sol-speed-3); } /* ── Planet base ─────────────────────────────────────────────── */ .abg-planet { position: absolute; top: 0; border-radius: 50%; transform: translateY(-50%); } /* Planet 1 — inner hot world */ .abg-planet-1 { width: 9px; height: 9px; left: 110px; background: radial-gradient(circle at 35% 30%, var(--sol-sun-hot), var(--sol-sun-core)); box-shadow: 0 0 8px 3px rgba(var(--sol-accent-rgb), 0.65), 0 0 18px 6px rgba(var(--sol-accent-rgb), 0.25); } /* Planet 2 — gas giant with Saturn ring */ .abg-planet-2 { width: 17px; height: 17px; left: 210px; background: radial-gradient(circle at 35% 30%, var(--sol-planet-2-a), var(--sol-planet-2-b)); box-shadow: 0 0 10px 4px rgba(var(--sol-cool-rgb), 0.28), 0 0 22px 9px rgba(var(--sol-cool-rgb), 0.1); } .abg-planet-ring { position: absolute; width: 36px; height: 11px; border-radius: 50%; border: 1.5px solid rgba(var(--sol-cool-rgb), 0.28); top: 50%; left: 50%; transform: translate(-50%, -50%) rotateX(72deg); } /* Planet 3 — outer rust world */ .abg-planet-3 { width: 7px; height: 7px; left: 320px; background: radial-gradient(circle at 35% 30%, var(--sol-planet-3-a), var(--sol-planet-3-b)); box-shadow: 0 0 6px 2px rgba(var(--sol-accent-soft-rgb), 0.4), 0 0 14px 5px rgba(var(--sol-accent-rgb), 0.12); } /* ══════════════════════════════════════════════════════════════ LIGHT THEME OVERRIDES Space doesn't work on cream. We swap to: - Faint orange dot-grid (tech / digital graph-paper feel) - Solar system stays (corner only, orange tones readable on white) - No stars, no cool nebula ══════════════════════════════════════════════════════════════ */ /* Dot grid — appears only on light bg */ [data-bs-theme="light"] #ambient-bg::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, var(--sol-grid-dot) 1.15px, transparent 1.15px), linear-gradient(125deg, rgba(var(--sol-accent-rgb), 0.09) 0%, rgba(var(--sol-accent-soft-rgb), 0.07) 38%, transparent 72%); background-size: 30px 30px, 100% 100%; opacity: var(--sol-grid-opacity); } /* Keep stars visible in light mode and preserve atmospheric nebula */ [data-bs-theme="light"] .abg-nebula-1 { display: block; width: 860px; height: 860px; bottom: -14%; right: -12%; background: radial-gradient(circle, rgba(var(--sol-accent-rgb), 0.14) 0%, rgba(var(--sol-accent-rgb), 0.06) 42%, transparent 70%); } [data-bs-theme="light"] .abg-nebula-2 { display: block; width: 620px; height: 560px; top: -10%; left: -8%; background: radial-gradient(circle, rgba(var(--sol-accent-soft-rgb), 0.1) 0%, rgba(var(--sol-accent-soft-rgb), 0.04) 48%, transparent 72%); } /* Very subtle warm glow behind the solar system in light mode */ [data-bs-theme="light"] #ambient-bg::after { content: ''; position: absolute; width: 700px; height: 700px; bottom: -15%; right: -8%; border-radius: 50%; background: radial-gradient(circle, rgba(var(--sol-accent-rgb), 0.13) 0%, rgba(var(--sol-accent-rgb), 0.06) 46%, transparent 72%); } /* Orbit rings → orange so they read on white background */ [data-bs-theme="light"] .abg-orbit-1 { border-color: rgba(var(--sol-accent-rgb), 0.22); } [data-bs-theme="light"] .abg-orbit-2 { border-color: rgba(var(--sol-accent-rgb), 0.14); } [data-bs-theme="light"] .abg-orbit-3 { border-color: rgba(var(--sol-accent-rgb), 0.08); } [data-bs-theme="light"] .abg-belt { border-color: rgba(var(--sol-accent-rgb), 0.06); } /* Sun: brighter contrast glow on light bg */ [data-bs-theme="light"] .abg-sun { box-shadow: 0 0 0 4px rgba(var(--sol-accent-rgb), 0.18), 0 0 16px 7px rgba(var(--sol-accent-rgb), 0.60), 0 0 40px 20px rgba(var(--sol-accent-rgb), 0.28), 0 0 90px 45px rgba(var(--sol-accent-rgb), 0.10); } /* Gas giant: blue/grey reads better on light bg than white-on-white */ [data-bs-theme="light"] .abg-planet-2 { background: radial-gradient(circle at 35% 30%, var(--sol-planet-2-a), var(--sol-planet-2-b)); box-shadow: 0 0 10px 4px rgba(var(--sol-accent-soft-rgb), 0.3), 0 0 22px 9px rgba(var(--sol-accent-soft-rgb), 0.12); } [data-bs-theme="light"] .abg-planet-ring { border-color: rgba(var(--sol-accent-soft-rgb), 0.35); } /* ── Keyframes ─────────────────────────────────────────────── */ @keyframes abgOrbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes abgSunBreath { 0%, 100% { opacity: 1; } 50% { opacity: 0.78; } } @keyframes abgPing { 0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0.75; } 100% { transform: translate(-50%, -50%) scale(26); opacity: 0; } } /* ── Reduced motion ──────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .abg-planet-arm, .abg-sun, .abg-ping { animation: none !important; } #ambient-canvas { display: none; } } /* ── Mobile — scale down nebula, hide solar system only ──── */ @media (max-width: 768px) { /* Solar system is too large for small screens */ .abg-solar { display: none; } /* Canvas (star field) stays visible — it's drawn once, costs nothing ongoing, and provides visual richness on mobile too */ /* Scale nebula down so the gradient actually reads on mobile. 900px elements at right:-10% mean the gradient starts 90px+ off the right edge on a 375px screen — gradient looks flat. Smaller element brings the colour centre into the viewport. */ .abg-nebula-1 { width: 360px; height: 360px; bottom: -10%; right: -5%; } .abg-nebula-2 { width: 260px; height: 240px; top: -8%; left: -5%; } /* Light mode: dot-grid stays, warm glow also scaled */ [data-bs-theme="light"] .abg-nebula-1 { width: 340px; height: 340px; } [data-bs-theme="light"] #ambient-bg::after { width: 300px; height: 300px; bottom: -10%; right: -5%; } } /* ── Content above background ───────────────────────────────── */ #wrapper>*:not(#ambient-bg) { position: relative; z-index: 1; }