@font-face { font-family: 'Mulish'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/mulish-v18-latin-regular.woff2') format('woff2'); } @font-face { font-family: 'Mulish'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/mulish-v18-latin-500.woff2') format('woff2'); } @font-face { font-family: 'Mulish'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/mulish-v18-latin-600.woff2') format('woff2'); } @font-face { font-family: 'Mulish'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/mulish-v18-latin-700.woff2') format('woff2'); } html, body { font-family: 'Nunito', 'Mulish', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0; } /* ============================================================ Redesign design tokens — mirror of design_handoff_dashboard/app/theme.css. Dark is the default; [data-theme="light"] is set on by the anti-flash script in App.razor and kept in sync by MainLayout's theme toggle. The key colours are also mirrored into MudTheme so MudBlazor components inherit them. ============================================================ */ :root, [data-theme="dark"] { --accent: #9d6bff; --accent-2: #7c4dff; --accent-soft: rgba(157, 107, 255, 0.14); --accent-ring: rgba(157, 107, 255, 0.45); --ok: #2fd08a; --danger: #ff7a7a; --warn: #f5b544; --info: #6aa8ff; --spotify: #25d366; --youtube: #ff5d5d; --discord: #6b78ff; --bg: #08060f; --bg-2: #0c0a17; --glow-a: rgba(124, 77, 255, 0.22); --glow-b: rgba(157, 107, 255, 0.10); --glow-c: rgba(40, 30, 80, 0.5); --surface: rgba(255, 255, 255, 0.045); --surface-hover: rgba(255, 255, 255, 0.075); --surface-solid: #14111f; --border: rgba(255, 255, 255, 0.085); --border-strong: rgba(255, 255, 255, 0.15); --panel: rgba(20, 16, 32, 0.55); --panel-blur: rgba(16, 13, 26, 0.78); --teal: #1fb6c4; --pink: #e25fae; --text: #ece9f6; --text-2: #b3aecb; --text-3: #7e7896; --shadow-sm: 0 8px 24px -16px rgba(0, 0, 0, 0.8); --shadow: 0 18px 50px -22px rgba(0, 0, 0, 0.85), 0 2px 8px -4px rgba(0, 0, 0, 0.6); --radius: 14px; --r-sm: calc(var(--radius) * 0.6); --r-pill: 999px; --font-display: "Quicksand", system-ui, sans-serif; --font-body: "Nunito", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; } [data-theme="light"] { --accent: #7c3aed; --accent-2: #6d28d9; --accent-soft: rgba(124, 58, 237, 0.10); --accent-ring: rgba(124, 58, 237, 0.35); --bg: #eceaf4; --bg-2: #f4f2fb; --glow-a: rgba(124, 77, 255, 0.16); --glow-b: rgba(157, 107, 255, 0.10); --glow-c: rgba(210, 200, 255, 0.55); --surface: rgba(255, 255, 255, 0.72); --surface-hover: rgba(255, 255, 255, 0.95); --surface-solid: #ffffff; --border: rgba(36, 24, 70, 0.09); --border-strong: rgba(36, 24, 70, 0.16); --panel: rgba(255, 255, 255, 0.7); --panel-blur: rgba(255, 255, 255, 0.82); --text: #1b1730; --text-2: #524c6b; --text-3: #8a849e; --shadow-sm: 0 8px 22px -16px rgba(60, 40, 120, 0.35); --shadow: 0 20px 48px -26px rgba(60, 40, 120, 0.45), 0 2px 6px -3px rgba(60, 40, 120, 0.18); } /* Background ambiance: layered radial glows behind the whole app, fixed so they don't scroll. Overrides MudBlazor's flat palette background (loaded after app.css, hence !important). */ body { background: radial-gradient(1100px 700px at 8% -8%, var(--glow-a), transparent 60%), radial-gradient(900px 600px at 100% 110%, var(--glow-b), transparent 55%), radial-gradient(700px 500px at 60% 40%, var(--glow-c), transparent 70%), var(--bg) !important; background-attachment: fixed !important; } /* Frosted chrome — MudBlazor doesn't set backdrop-filter, so these layer on top of the translucent appbar/drawer backgrounds from the palette. */ .mud-appbar { backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border-bottom: 1px solid var(--border) !important; } .mud-drawer { backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border-right: 1px solid var(--border) !important; } /* Primary filled buttons → 135° accent gradient with a soft glow. */ .mud-button-filled.mud-button-filled-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important; box-shadow: 0 12px 28px -12px var(--accent-ring), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important; } .mud-button-filled.mud-button-filled-primary:hover { filter: brightness(1.08); } /* Sidebar active nav item: accent-soft fill, ring border, left accent bar. */ .mud-nav-link.active, .mud-nav-link[aria-current="page"] { background: var(--accent-soft) !important; border: 1px solid var(--accent-ring) !important; border-radius: 11px !important; position: relative; } .mud-nav-link.active::before, .mud-nav-link[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 22px; border-radius: 0 4px 4px 0; background: linear-gradient(var(--accent), var(--accent-2)); } /* Flat sidebar section labels (uppercase, muted) — interleaved with the nav links in NavMenu instead of collapsible groups. */ .streamionbot-nav-label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); padding: 16px 16px 6px; white-space: nowrap; } /* Frosted dropdown panel for the topbar Help + User menus (applied via the MudMenu PopoverClass). Translucent + blurred, radius 14, soft shadow. */ .streamionbot-frosted-menu.mud-popover { background: var(--panel-blur) !important; backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); border: 1px solid var(--border-strong); border-radius: var(--radius) !important; box-shadow: var(--shadow) !important; } .streamionbot-frosted-menu .mud-list { background: transparent !important; } /* Help-menu sub-labels in teal (the design's secondary accent). */ .streamionbot-help-sub { color: var(--teal) !important; font-weight: 600; } /* Reusable redesign primitives shared across the content pages (Commands, Quotes, Events, Media, admin tables, …). Frosted card + mono trigger chip + frosted modal panel. Pages that already ship their own page-local copies (Dashboard, Stats) are unaffected — those