/* ===================================================================== TunerSuite — EMERALD AURORA Signature Layer Site-wide premium identity: luminous emerald aurora background + one glowing signature accent (var --ts-primary). Loaded LAST, scoped under body.ts-signature. Light+dark parity, perf-tier + reduced-motion aware. Fully reversible (remove the `ts-signature` class on ). ===================================================================== */ body.ts-signature { --sig-rgb: var(--ts-primary-rgb, 16, 185, 129); --sig: rgb(var(--sig-rgb)); } /* ---- 1. AURORA BACKGROUND (dark) — radial emerald mesh on the body ---- */ body.ts-signature { background-color: var(--ts-bg-body, #07120d); background-image: radial-gradient(62vw 62vw at 10% -10%, rgba(var(--sig-rgb), 0.22), transparent 60%), radial-gradient(52vw 52vw at 94% 4%, rgba(13, 148, 136, 0.18), transparent 62%), radial-gradient(48vw 48vw at 82% 98%, rgba(var(--sig-rgb), 0.15), transparent 60%), radial-gradient(42vw 42vw at 2% 92%, rgba(163, 230, 53, 0.07), transparent 60%); background-attachment: fixed; background-repeat: no-repeat; } /* ---- AURORA (light) — whisper-soft emerald tints, text stays crisp ---- */ [data-bs-theme="light"] body.ts-signature { background-color: var(--ts-bg-body, #f2fbf6); background-image: radial-gradient(62vw 62vw at 10% -10%, rgba(var(--sig-rgb), 0.11), transparent 60%), radial-gradient(52vw 52vw at 94% 4%, rgba(13, 148, 136, 0.08), transparent 62%), radial-gradient(48vw 48vw at 82% 98%, rgba(var(--sig-rgb), 0.07), transparent 60%); } /* drifting aurora — reuse the theme's existing perf-gated bg element */ body.ts-signature .ambient-glow { background: radial-gradient(40vw 40vw at 22% 18%, rgba(var(--sig-rgb), 0.16), transparent 60%), radial-gradient(36vw 36vw at 80% 32%, rgba(13, 148, 136, 0.13), transparent 62%) !important; animation: sigAurora 28s ease-in-out infinite alternate; } @keyframes sigAurora { 0% { transform: translate3d(-3%, -2%, 0) scale(1.03); } 100% { transform: translate3d(3%, 2%, 0) scale(1.09); } } /* ---- 2. SIGNATURE GLOW on the accent ---- */ body.ts-signature .ts-btn-primary, body.ts-signature .btn-primary, body.ts-signature button[type="submit"].btn-primary { box-shadow: 0 2px 12px rgba(var(--sig-rgb), 0.34), inset 0 0 0 1px rgba(var(--sig-rgb), 0.22); transition: box-shadow .25s ease, transform .25s ease; } body.ts-signature .ts-btn-primary:hover, body.ts-signature .btn-primary:hover { box-shadow: 0 6px 22px rgba(var(--sig-rgb), 0.5), 0 0 26px rgba(var(--sig-rgb), 0.28); transform: translateY(-1px); } body.ts-signature :focus-visible { outline: 2px solid rgba(var(--sig-rgb), 0.55); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(var(--sig-rgb), 0.16); } /* active sidebar / nav — signature emerald rail + halo */ body.ts-signature .nav-link.active, body.ts-signature .ts-sidebar .active, body.ts-signature .ts-nav-item.active, body.ts-signature [aria-current="page"] { box-shadow: inset 3px 0 0 var(--sig), 0 0 18px rgba(var(--sig-rgb), 0.12); } body.ts-signature a:not(.btn):not(.nav-link):hover { text-shadow: 0 0 12px rgba(var(--sig-rgb), 0.38); } /* ---- 3. REFINED GLASS — emerald hairline + depth ---- */ body.ts-signature .glass-card, body.ts-signature .glass-section { border-top: 1px solid rgba(var(--sig-rgb), 0.15); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 22px 60px -34px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(var(--sig-rgb), 0.05); } [data-bs-theme="light"] body.ts-signature .glass-card, [data-bs-theme="light"] body.ts-signature .glass-section { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 22px 55px -34px rgba(15, 40, 30, 0.18), 0 0 0 1px rgba(var(--sig-rgb), 0.07); } /* ---- PERF + MOTION discipline ---- */ @media (prefers-reduced-motion: reduce) { body.ts-signature .ambient-glow { animation: none !important; } body.ts-signature .ts-btn-primary, body.ts-signature .btn-primary { transition: none !important; } } body.ts-perf-mode.ts-signature .ambient-glow, body[data-perf-tier="saver"].ts-signature .ambient-glow { animation: none !important; }