/* client/public/css/aurora.css * "Aurora Command" theme — a full visual overhaul activated site-wide only when * is present (dev Site Control toggle, injected * server-side). Everything is scoped to html[data-ui="aurora"] so the Classic * theme is completely untouched and the switch is fully reversible. * ────────────────────────────────────────────────────────────────────────── */ /* ── 1. Design tokens ─────────────────────────────────────────────── */ html[data-ui="aurora"] { --bg-base: #0e0c16; --bg-deep: #15121f; --bg-panel: rgba(33, 28, 48, 0.66); --bg-panel-hover: rgba(44, 36, 66, 0.9); --bg-input: rgba(18, 15, 28, 0.85); --border-dim: rgba(140, 110, 255, 0.14); --border-mid: rgba(160, 90, 255, 0.26); --border-bright: rgba(185, 120, 255, 0.45); --text-primary: #f4f1ff; --text-secondary: rgba(202, 191, 230, 0.78); --text-muted: rgba(154, 144, 180, 0.62); --text-tiny: rgba(120, 110, 155, 0.5); --blue: #9a7bff; --blue-dim: rgba(120, 92, 255, 0.18); --blue-glow: rgba(150, 92, 255, 0.30); --green: #8fe3b0; --green-dim: rgba(60, 200, 140, 0.14); --green-glow: rgba(80, 220, 160, 0.20); --amber: #f2c14e; --amber-dim: rgba(230, 180, 40, 0.14); --amber-glow: rgba(240, 195, 70, 0.20); --red: #ff8fae; --red-dim: rgba(255, 90, 140, 0.14); --red-glow: rgba(255, 120, 160, 0.20); --purple: #b9a8ff; --purple-dim: rgba(150, 120, 255, 0.16); --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --aurora: linear-gradient(135deg, #6d5cff 0%, #a24bff 55%, #ff5ca8 100%); } /* ── 2. Animated aurora background ────────────────────────────────── */ html[data-ui="aurora"] body { background: linear-gradient(160deg, #15121f 0%, #0e0c16 100%) !important; background-attachment: fixed; } html[data-ui="aurora"] body::before { content: ""; position: fixed; inset: -20%; z-index: 0; pointer-events: none; background: radial-gradient(38% 42% at 78% 8%, rgba(109, 92, 255, 0.22), transparent 60%), radial-gradient(34% 38% at 108% 44%, rgba(255, 92, 168, 0.16), transparent 60%), radial-gradient(40% 40% at 12% 92%, rgba(66, 214, 200, 0.10), transparent 60%); filter: blur(40px); animation: auroraDrift 26s ease-in-out infinite alternate; } @keyframes auroraDrift { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-3%, 2%, 0) scale(1.08); } 100% { transform: translate3d(2%, -2%, 0) scale(1.04); } } html[data-ui="aurora"] .app-layout { z-index: 1; } /* ── 3. Sidebar — always fully visible, aurora-styled ─────────────── */ /* (Keeps the Classic full-width sticky layout; no collapsing rail.) */ html[data-ui="aurora"] .sidebar { background: linear-gradient(180deg, #17131f 0%, #100d18 100%); border-right: 1px solid var(--border-dim); } html[data-ui="aurora"] .nav-item { border-radius: 10px; } html[data-ui="aurora"] .nav-item.active { background: var(--aurora); border-color: transparent; color: #fff; box-shadow: 0 6px 18px rgba(120, 70, 255, 0.30); } html[data-ui="aurora"] .nav-item.active .nav-icon { color: #fff; } html[data-ui="aurora"] .nav-item:hover { background: rgba(150, 110, 255, 0.14); } html[data-ui="aurora"] .brand-logo { border-radius: 12px; box-shadow: 0 0 0 2px rgba(162, 75, 255, 0.4), 0 6px 18px rgba(120, 70, 255, 0.35); } html[data-ui="aurora"] .sidebar-divider { background: var(--border-dim); } /* ── 4. Cards, panels, glass ──────────────────────────────────────── */ html[data-ui="aurora"] .glass, html[data-ui="aurora"] .panel { border-radius: var(--radius-xl); border: 1px solid var(--border-dim); background: var(--bg-panel); backdrop-filter: blur(16px); box-shadow: 0 12px 36px rgba(0,0,0,.42); } /* Lift the dashboard stat tiles on hover */ html[data-ui="aurora"] .stats-grid > * { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } html[data-ui="aurora"] .stats-grid > *:hover { transform: translateY(-3px); border-color: var(--border-mid); box-shadow: 0 16px 44px rgba(90,50,200,.28); } /* ── 5. Buttons ───────────────────────────────────────────────────── */ html[data-ui="aurora"] .btn { border-radius: 11px; transition: transform .15s ease, filter .15s ease, box-shadow .15s ease; } html[data-ui="aurora"] .btn-primary { background: var(--aurora); border: none; color: #fff; box-shadow: 0 8px 22px rgba(120,70,255,.30); } html[data-ui="aurora"] .btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(120,70,255,.42); } html[data-ui="aurora"] .btn:active { transform: scale(.97); } /* ── 6. Filter tabs → pills ───────────────────────────────────────── */ html[data-ui="aurora"] .filter-tab { border-radius: 999px; padding: .5rem 1rem; } html[data-ui="aurora"] .filter-tab.active { background: var(--aurora); color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(120,70,255,.30); } /* ── 7. Tables ────────────────────────────────────────────────────── */ html[data-ui="aurora"] .data-table thead th { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; color: var(--text-tiny); border-bottom: 1px solid var(--border-dim); } html[data-ui="aurora"] .data-table tbody tr { transition: background .15s ease; } html[data-ui="aurora"] .data-table tbody tr:hover { background: linear-gradient(90deg, rgba(150,110,255,.12), rgba(255,90,168,.06)); } /* ── 8. Badges → soft pills ───────────────────────────────────────── */ html[data-ui="aurora"] .badge { border-radius: 999px; } /* ── 9. Inputs ────────────────────────────────────────────────────── */ html[data-ui="aurora"] .form-control { border-radius: 10px; } html[data-ui="aurora"] .form-control:focus { border-color: var(--border-bright); box-shadow: 0 0 0 3px rgba(140,90,255,.18); } /* ── 10. Modals ───────────────────────────────────────────────────── */ html[data-ui="aurora"] .modal-overlay { backdrop-filter: blur(6px); background: rgba(10,8,16,.62); } html[data-ui="aurora"] .modal { border-radius: 20px; border: 1px solid var(--border-mid); box-shadow: 0 30px 80px rgba(0,0,0,.6); overflow: hidden; position: relative; animation: auroraModalIn .24s cubic-bezier(.2,.8,.2,1) both; } html[data-ui="aurora"] .modal::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--aurora); } @keyframes auroraModalIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } } /* ── 11. Page entrance + gradient titles ──────────────────────────── */ html[data-ui="aurora"] .page.active { animation: auroraRise .34s ease both; } @keyframes auroraRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } html[data-ui="aurora"] .page-title { background: linear-gradient(120deg, #f4f1ff 0%, #c9b6ff 60%, #ff9bc4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ── 12. Role badge + scrollbar polish ────────────────────────────── */ html[data-ui="aurora"] .user-role-badge.dev, html[data-ui="aurora"] .user-role-badge.hicomm { background: var(--aurora); color: #fff; border: none; } html[data-ui="aurora"] ::-webkit-scrollbar { width: 10px; height: 10px; } html[data-ui="aurora"] ::-webkit-scrollbar-thumb { background: rgba(140,100,255,.28); border-radius: 8px; } html[data-ui="aurora"] ::-webkit-scrollbar-thumb:hover { background: rgba(160,110,255,.45); } /* ── 13. Respect reduced-motion ───────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html[data-ui="aurora"] body::before { animation: none; } html[data-ui="aurora"] .page.active, html[data-ui="aurora"] .modal { animation: none; } }