/* ============================================================================ theme-aura.css — site-wide cinematic dark theme Loaded last in so it re-skins the shared classes (.glass, .gradient-text, .gradient-btn) every page already uses. Frontend only. Palette: deep-black base + blue→cyan cinematic gradient. ============================================================================ */ :root { --aura-bg: #0c0c0c; --aura-bg-soft: #0e1014; --aura-line: rgba(255,255,255,0.10); --aura-grad-1: #0B2551; --aura-grad-2: #A4F4FD; --aura-grad-3: #00d2ff; --aura-brand: #3D81E3; /* Skeleton shimmer tokens — consumed by .skel and friends below */ --skel-base: rgba(255,255,255,0.06); --skel-shine: rgba(255,255,255,0.13); --skel-radius: 6px; } /* ---- base ---- Bridge to the theme.js variable namespace (--bg-primary / --text-* / --accent) so the navbar theme picker actually re-skins every page. theme.js sets these vars on :root; we consume them here with the cinematic aura values as fallback so the default (midnight) look is unchanged when no theme is chosen. ---- */ html, body { background: var(--bg-primary, var(--aura-bg)) !important; color: var(--text-secondary, #e2e8f0); font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: rgba(0,210,255,0.28); } /* tighter, more cinematic headings */ h1, h2, h3 { letter-spacing: -0.02em; } /* ---- cinematic gradient text — DARK THEMES ONLY ---- */ /* On dark themes (everything except light) we apply the deep-navy → cyan aura gradient. On light theme we fall back to a readable accent gradient so the text stays visible against the pale background. */ :root:not([data-theme="light"]) .gradient-text, :root:not([data-theme="light"]) .serif-italic.gradient-text { background: linear-gradient(120deg, var(--aura-grad-1) 0%, var(--aura-grad-2) 45%, var(--aura-grad-3) 70%, var(--aura-grad-1) 100%) !important; background-size: 200% auto !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } /* Light-mode gradient-text: accent → accent-secondary, fully readable */ [data-theme="light"] .gradient-text, [data-theme="light"] .serif-italic.gradient-text { background: linear-gradient(120deg, var(--accent, #2563eb) 0%, var(--accent-secondary, #7c3aed) 60%, var(--accent-tertiary, #0891b2) 100%) !important; background-size: 200% auto !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } /* ---- shiny animated headline — dark only ---- */ :root:not([data-theme="light"]) .aura-shiny { background: linear-gradient(to right, #60a5fa 0%, #3b82f6 12.5%, #A4F4FD 32.5%, #00d2ff 50%, #3b82f6 67.5%, #60a5fa 87.5%, #60a5fa 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: aura-shiny 6s linear infinite; } /* Light fallback — just use accent color, no gradient tricks */ [data-theme="light"] .aura-shiny { background: none; -webkit-background-clip: unset; background-clip: unset; -webkit-text-fill-color: var(--accent, #2563eb); color: var(--accent, #2563eb); animation: none; } @keyframes aura-shiny { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } @media (prefers-reduced-motion: reduce) { .aura-shiny { animation: none; } } /* ---- buttons: cooler cinematic gradient + crisp pill option ---- */ .gradient-btn { background: linear-gradient(135deg, var(--aura-brand), var(--aura-grad-3)) !important; box-shadow: 0 6px 24px rgba(0,210,255,0.18); } .gradient-btn:hover { filter: brightness(1.06); } .aura-pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 9999px; background: #fff; color: #000; font-weight: 600; font-size: 0.875rem; padding: 12px 22px; transition: all .25s ease; border: none; } .aura-pill:hover { background: rgba(255,255,255,0.9); } .aura-pill:active { transform: scale(0.98); } /* ---- liquid-glass treatment (re-skins existing .glass + opt-in .liquid-glass) ---- Background now consumes --bg-card so theme.js can control card opacity. The !important on the border/shadow keeps the cinematic inset highlight without fighting Tailwind border-* utilities (those use specificity, not !important). */ .glass, .liquid-glass { background: var(--bg-card, rgba(255,255,255,0.015)) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; border: 1px solid transparent !important; box-shadow: inset 0 1px 1px rgba(255,255,255,0.10) !important; position: relative; overflow: hidden; } /* Light-mode glass: visible surface with a clear border */ [data-theme="light"] .glass, [data-theme="light"] .liquid-glass { background: var(--bg-card, rgba(0,0,0,0.03)) !important; box-shadow: inset 0 1px 1px rgba(255,255,255,0.60), 0 1px 3px rgba(0,0,0,0.06) !important; } /* Dark-only glass shimmer pseudo — gated so it doesn't pollute light mode */ :root:not([data-theme="light"]) .glass::before, :root:not([data-theme="light"]) .liquid-glass::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; background: linear-gradient(180deg, rgba(255,255,255,0.40) 0%, rgba(255,255,255,0.12) 20%, rgba(255,255,255,0) 42%, rgba(255,255,255,0) 58%, rgba(255,255,255,0.12) 80%, rgba(255,255,255,0.40) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } /* ---- FIX: the global .glass { overflow:hidden } above clips scrollable regions (tables, feeds) inside glass cards. ---- */ .table-wrap.glass, .glass.scroll-y, .scroll-area.glass { overflow: auto !important; } .table-wrap, .scroll-y, .scroll-area { overflow: auto; } /* ---- FIX: native