/** * Modern site backgrounds — aurora mesh, floating orbs, subtle grid. * Set theme on */ :root { --site-bg-base: #050508; --site-bg-accent-1: #00ffe7; --site-bg-accent-2: #7c3aed; --site-bg-accent-3: #ff00c8; --site-bg-grid: rgba(255, 255, 255, 0.035); } [data-site-theme="studio"] { --site-bg-accent-1: #00ffe7; --site-bg-accent-2: #2563eb; --site-bg-accent-3: #00ffb3; } [data-site-theme="ember"] { --site-bg-accent-1: #ffd700; --site-bg-accent-2: #7c3aed; --site-bg-accent-3: #ff3ebf; } [data-site-theme="portal"] { --site-bg-accent-1: #6366f1; --site-bg-accent-2: #22d3ee; --site-bg-accent-3: #a855f7; } html { background: var(--site-bg-base); } #site-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--site-bg-base); } .site-bg__aurora { position: absolute; inset: -45%; background: radial-gradient(ellipse 75% 55% at 18% 22%, color-mix(in srgb, var(--site-bg-accent-1) 38%, transparent), transparent 58%), radial-gradient(ellipse 65% 50% at 82% 28%, color-mix(in srgb, var(--site-bg-accent-2) 32%, transparent), transparent 55%), radial-gradient(ellipse 55% 65% at 48% 92%, color-mix(in srgb, var(--site-bg-accent-3) 28%, transparent), transparent 58%); filter: blur(48px) saturate(1.15); animation: site-bg-aurora 22s ease-in-out infinite alternate; will-change: transform; } .site-bg__orbs { position: absolute; inset: 0; } .site-bg__orb { position: absolute; border-radius: 50%; filter: blur(72px); opacity: 0.45; will-change: transform; } .site-bg__orb--1 { width: min(42vw, 420px); height: min(42vw, 420px); top: 8%; left: -8%; background: var(--site-bg-accent-1); animation: site-bg-float-1 16s ease-in-out infinite; } .site-bg__orb--2 { width: min(36vw, 360px); height: min(36vw, 360px); top: 52%; right: -6%; background: var(--site-bg-accent-2); animation: site-bg-float-2 19s ease-in-out infinite; } .site-bg__orb--3 { width: min(28vw, 280px); height: min(28vw, 280px); bottom: 6%; left: 38%; background: var(--site-bg-accent-3); animation: site-bg-float-3 14s ease-in-out infinite; } .site-bg__grid { position: absolute; inset: 0; background-image: linear-gradient(var(--site-bg-grid) 1px, transparent 1px), linear-gradient(90deg, var(--site-bg-grid) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 20%, transparent 72%); opacity: 0.85; } .site-bg__vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.55) 100%); } .site-bg__noise { position: absolute; inset: 0; opacity: 0.045; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px 180px; } .site-bg__shine { position: absolute; inset: 0; background: linear-gradient( 125deg, transparent 40%, rgba(255, 255, 255, 0.03) 50%, transparent 60% ); animation: site-bg-shine 12s ease-in-out infinite; } @keyframes site-bg-aurora { 0% { transform: translate(0, 0) scale(1) rotate(0deg); } 100% { transform: translate(-2.5%, 1.5%) scale(1.06) rotate(2deg); } } @keyframes site-bg-float-1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(6%, 8%); } } @keyframes site-bg-float-2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-8%, -5%); } } @keyframes site-bg-float-3 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(4%, -7%); } } @keyframes site-bg-shine { 0%, 100% { opacity: 0.4; transform: translateX(-8%); } 50% { opacity: 1; transform: translateX(8%); } } @media (prefers-reduced-motion: reduce) { .site-bg__aurora, .site-bg__orb, .site-bg__shine { animation: none; } }