/* ============================================================ AES Dashboard v3 — Brand & Theme System Source of truth: "AES Defined - Brand Guide - Updated 11-11-25" Exact brand hex palette (5 families x 4 shades): Navy: #000000 #0E1527 #111D37 #46537A Blue: #1F3364 #154B99 #3865B0 #6490CB Slate: #545966 #7C8493 #A8B0C0 #CAD0DB Gray: #7C8087 #B6B7BB #E5E6E8 #F4F5F6 Orange: #984021 #CB5427 #F68941 #FBB266 This file defines the full light/dark theme system as CSS custom properties, switched by the `data-bs-theme="dark"|"light"` attribute Bootstrap 5.3's Color Modes use (set on — see server.py's index_string and the theme toggle in application.py). Both the custom --aesd-* tokens (used throughout this stylesheet and the rest of assets/*.css) and the underlying Bootstrap --bs-* variables are set here so built-in Bootstrap components re-skin automatically. Dark is the default/primary theme; light keeps the same vibrant, high-contrast accent colors rather than washing them out. ============================================================ */ /* ── Theme-independent brand constants ────────────────────── */ /* The icon-only sidebar rail is intentionally kept a fixed brand-navy dark in BOTH light and dark mode (a common, professional pattern for icon-only nav rails — e.g. VS Code's Activity Bar, Slack's workspace rail) rather than re-skinned per theme. Its icon colors are plain white for the same reason, so no color variable is needed for those. */ :root { --aesd-rail-bg: #111D37; --aesd-rail-border: #263149; } /* ── Dark theme (default) ─────────────────────────────────── */ [data-bs-theme="dark"] { /* Brand tokens */ --aesd-orange: #F68941; --aesd-orange-lt: #FBB266; --aesd-orange-dk: #CB5427; --aesd-orange-rgb: 246, 137, 65; --aesd-blue: #3865B0; --aesd-blue-lt: #6490CB; --aesd-blue-dk: #154B99; --aesd-blue-rgb: 56, 101, 176; --aesd-dark: #0E1527; --aesd-card: #111D37; --aesd-card-2: #16203A; --aesd-border: #263149; --aesd-text: #F4F5F6; --aesd-text-muted: #A8B0C0; --transition: 0.2s ease; --aesd-danger: #FF6B6B; --aesd-success: #3DDC84; --aesd-warning: #FBB266; --aesd-hero-gradient: linear-gradient(160deg, #0D1117 0%, #141E35 40%, #1A2848 100%); --aesd-placeholder: rgba(244,245,246,0.4); /* Bootstrap 5.3 Color Mode variable mapping so built-in components (navbar, cards, dropdowns, modals, forms, tables) pick up the brand palette automatically. */ color-scheme: dark; --bs-body-bg: var(--aesd-dark); --bs-body-color: var(--aesd-text); --bs-emphasis-color: #ffffff; --bs-secondary-color: var(--aesd-text-muted); --bs-secondary-bg: var(--aesd-card); --bs-tertiary-bg: var(--aesd-card-2); --bs-border-color: var(--aesd-border); --bs-border-color-translucent: var(--aesd-border); --bs-primary: var(--aesd-orange); --bs-primary-rgb: 246, 137, 65; --bs-link-color: var(--aesd-orange); --bs-link-hover-color: var(--aesd-orange-lt); --bs-link-color-rgb: 246, 137, 65; --bs-link-hover-color-rgb: 251, 178, 102; --bs-card-bg: var(--aesd-card); --bs-card-border-color: var(--aesd-border); --bs-dropdown-bg: var(--aesd-card); --bs-dropdown-link-color: var(--aesd-text); --bs-dropdown-link-hover-bg: var(--aesd-card-2); --bs-dropdown-link-hover-color: var(--aesd-text); --bs-dropdown-border-color: var(--aesd-border); --bs-modal-bg: var(--aesd-card); --bs-modal-border-color: var(--aesd-border); --bs-table-bg: transparent; --bs-table-border-color: var(--aesd-border); --bs-table-color: var(--aesd-text); } /* ── Light theme ───────────────────────────────────────────── */ [data-bs-theme="light"] { /* Brand tokens — same accent hues, adjusted per-theme for contrast, kept vibrant/saturated rather than pastel. */ --aesd-orange: #CB5427; --aesd-orange-lt: #F68941; --aesd-orange-dk: #984021; --aesd-orange-rgb: 203, 84, 39; --aesd-blue: #154B99; --aesd-blue-lt: #3865B0; --aesd-blue-dk: #111D37; --aesd-blue-rgb: 21, 75, 153; --aesd-dark: #F4F5F6; --aesd-card: #FFFFFF; --aesd-card-2: #E5E6E8; --aesd-border: #CAD0DB; --aesd-text: #111D37; --aesd-text-muted: #545966; --transition: 0.2s ease; --aesd-danger: #DC2626; --aesd-success: #16A34A; --aesd-warning: #D97706; --aesd-hero-gradient: linear-gradient(160deg, #154B99 0%, #1F3364 55%, #111D37 100%); --aesd-placeholder: rgba(17,29,55,0.4); color-scheme: light; --bs-body-bg: var(--aesd-dark); --bs-body-color: var(--aesd-text); --bs-emphasis-color: #000000; --bs-secondary-color: var(--aesd-text-muted); --bs-secondary-bg: var(--aesd-card-2); --bs-tertiary-bg: var(--aesd-card-2); --bs-border-color: var(--aesd-border); --bs-border-color-translucent: var(--aesd-border); --bs-primary: var(--aesd-orange); --bs-primary-rgb: 203, 84, 39; --bs-link-color: var(--aesd-orange); --bs-link-hover-color: var(--aesd-orange-dk); --bs-link-color-rgb: 203, 84, 39; --bs-link-hover-color-rgb: 152, 64, 33; --bs-card-bg: var(--aesd-card); --bs-card-border-color: var(--aesd-border); --bs-dropdown-bg: var(--aesd-card); --bs-dropdown-link-color: var(--aesd-text); --bs-dropdown-link-hover-bg: var(--aesd-card-2); --bs-dropdown-link-hover-color: var(--aesd-text); --bs-dropdown-border-color: var(--aesd-border); --bs-modal-bg: var(--aesd-card); --bs-modal-border-color: var(--aesd-border); --bs-table-bg: transparent; --bs-table-border-color: var(--aesd-border); --bs-table-color: var(--aesd-text); } /* ── Global typography & base ──────────────────────────────── */ html, body { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } body { background-color: var(--aesd-dark) !important; color: var(--aesd-text); transition: background-color var(--transition), color var(--transition); } h1, h2, h3, h4, h5, h6, .navbar-brand, .login-heading, .landing-title, .admin-page-title, .admin-card-title, .profile-username { font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: -0.2px; } /* Navbar */ .navbar { background-color: var(--aesd-card) !important; border-bottom: 1px solid var(--aesd-border); box-shadow: 0 2px 8px rgba(0,0,0,0.4); } .navbar-brand, .navbar .nav-text { color: var(--aesd-text) !important; font-weight: 700; letter-spacing: 1px; font-size: 1rem; } /* Footer — fixed brand-navy bar (theme-independent), same rationale as the icon rail: the only available logo asset is a white/light monochrome version, so the bar itself stays dark in both themes to keep it legible rather than needing a second logo asset per theme. */ .footer { background-color: var(--aesd-rail-bg); border-top: 1px solid var(--aesd-rail-border); padding: 24px 0; } .footer .logo { opacity: 0.9; } .footer p, .footer strong { color: #CAD0DB; } /* Burger-menu theme toggle row */ .theme-switch-row { cursor: default; padding-top: 0.5rem; padding-bottom: 0.5rem; } .theme-switch-row .form-check { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0; } .theme-switch-row .form-check-label { color: var(--aesd-text); font-weight: 600; font-size: 0.9rem; } .theme-switch-row .form-check-input { cursor: pointer; } .theme-switch-row .form-check-input:checked { background-color: var(--aesd-orange); border-color: var(--aesd-orange); } /* Only one of the two labels is shown at a time, keyed off the live data-bs-theme attribute (not the Dash-rendered switch state) so the text updates instantly on click rather than waiting for the next server round-trip / dropdown re-render. */ .theme-label-dark, .theme-label-light { display: inline-flex; align-items: center; } [data-bs-theme="dark"] .theme-label-light { display: none; } [data-bs-theme="light"] .theme-label-dark { display: none; } /* ── Landing Page — Full-screen split layout ──────────────── */ #landing-root { min-height: 100vh; display: flex; flex-direction: row; overflow: hidden; } /* Left panel */ .landing-left { flex: 1.3; position: relative; background: var(--aesd-hero-gradient); overflow: hidden; display: flex; align-items: center; justify-content: center; } .landing-left-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 50%, rgba(var(--aesd-orange-rgb),0.12) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(var(--aesd-blue-rgb),0.15) 0%, transparent 55%); pointer-events: none; } .landing-left-content { position: relative; z-index: 1; padding: 60px 48px; max-width: 520px; } .landing-logo { max-height: 60px; margin-bottom: 28px; filter: drop-shadow(0 0 20px rgba(var(--aesd-orange-rgb),0.3)); } .landing-title { font-size: 2.4rem; font-weight: 800; /* Fixed light color (not theme-reactive): the hero gradient behind this text is always medium-to-dark blue in both themes, so the text must always be light for contrast — see --aesd-hero-gradient above. */ color: #F4F5F6; letter-spacing: -0.5px; margin-bottom: 10px; line-height: 1.1; } .landing-subtitle { font-size: 1.05rem; color: rgba(244,245,246,0.75); margin-bottom: 36px; font-weight: 400; } /* Feature bullet points */ .landing-features { display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; } .landing-feature-item { display: flex; align-items: center; gap: 12px; } .landing-feature-icon { font-size: 1rem; color: var(--aesd-orange); width: 20px; flex-shrink: 0; } .landing-feature-text { font-size: 0.95rem; /* Fixed light color (not theme-reactive) — same reasoning as .landing-title above. */ color: rgba(244,245,246,0.75); } /* Decorative wave */ .landing-wave { position: absolute; bottom: -10px; right: -20px; width: 160px; opacity: 0.08; pointer-events: none; } /* Right panel */ .landing-right { flex: 1; display: flex; align-items: center; justify-content: center; background-color: var(--aesd-dark); padding: 40px 24px; } /* Login card */ .login-card { width: 100%; max-width: 400px; background-color: var(--aesd-card); border: 1px solid var(--aesd-border); border-radius: 16px; padding: 40px 36px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); } .login-card-logo { display: block; margin: 0 auto 20px; height: 56px; } .login-heading { font-size: 1.6rem; font-weight: 700; color: var(--aesd-text); text-align: center; margin-bottom: 6px; } .login-subheading { font-size: 0.9rem; color: var(--aesd-text-muted); text-align: center; margin-bottom: 28px; } /* Form fields */ .login-field { margin-bottom: 18px; } .login-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--aesd-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; } .login-input { background-color: var(--aesd-card-2) !important; border: 1px solid var(--aesd-border) !important; color: var(--aesd-text) !important; border-radius: 8px !important; padding: 10px 14px !important; font-size: 0.95rem !important; transition: border-color var(--transition), box-shadow var(--transition); } .login-input:focus { border-color: var(--aesd-orange) !important; box-shadow: 0 0 0 3px rgba(var(--aesd-orange-rgb),0.15) !important; outline: none !important; } .login-input::placeholder { color: var(--aesd-placeholder) !important; } /* Forgot password link */ .login-forgot-link { font-size: 0.8rem; color: var(--aesd-orange); text-decoration: none; transition: opacity var(--transition); } .login-forgot-link:hover { opacity: 0.75; color: var(--aesd-orange); } /* Error message */ .login-error { font-size: 0.85rem; color: var(--aesd-danger); margin-bottom: 14px; min-height: 1.2em; } /* Sign in button */ .login-btn { width: 100%; background: linear-gradient(135deg, var(--aesd-orange) 0%, var(--aesd-orange-dk) 100%) !important; border: none !important; border-radius: 8px !important; padding: 12px !important; font-size: 0.95rem !important; font-weight: 600 !important; color: #fff !important; letter-spacing: 0.3px; transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition); margin-bottom: 20px; } .login-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(var(--aesd-orange-rgb),0.35) !important; opacity: 0.95; } .login-btn:active { transform: translateY(0); } /* Footer text */ .login-footer-text { font-size: 0.75rem; color: var(--aesd-text-muted); text-align: center; margin: 0; } /* ── Auth pages (forgot password, reset password) ─────────── */ .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 24px; background-color: var(--aesd-dark); } .auth-card { width: 100%; max-width: 420px; background-color: var(--aesd-card); border: 1px solid var(--aesd-border); border-radius: 16px; padding: 40px 36px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); } .auth-back-link { display: block; text-align: center; margin-top: 16px; font-size: 0.85rem; color: var(--aesd-text-muted); text-decoration: none; transition: color var(--transition); } .auth-back-link:hover { color: var(--aesd-orange); } /* ── Profile page ─────────────────────────────────────────── */ .profile-page { padding: 40px 24px; min-height: 80vh; display: flex; align-items: flex-start; justify-content: center; } .profile-card { width: 100%; max-width: 480px; background-color: var(--aesd-card); border: 1px solid var(--aesd-border); border-radius: 16px; padding: 36px; margin-top: 20px; } .profile-header { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; } .profile-avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--aesd-orange), var(--aesd-blue)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .profile-avatar-letter { font-size: 1.5rem; font-weight: 700; color: #fff; } .profile-username { color: var(--aesd-text); font-size: 1.2rem; font-weight: 700; margin: 0 0 4px; } .profile-email { color: var(--aesd-text-muted); font-size: 0.85rem; margin: 0; } .profile-divider { border-color: var(--aesd-border); margin: 24px 0 20px; } .profile-section-title { color: var(--aesd-text); font-weight: 600; margin-bottom: 18px; font-size: 1rem; } /* ── Admin page ────────────────────────────────────────────── */ .admin-page { padding: 40px 32px 64px; min-height: 80vh; } .admin-page-header { display: flex; align-items: center; gap: 18px; max-width: 1100px; margin: 0 auto 28px; } .admin-page-icon { font-size: 2rem; color: var(--aesd-orange); flex-shrink: 0; } .admin-page-title { color: var(--aesd-text); font-weight: 700; margin: 0 0 4px; } .admin-page-subtitle { color: var(--aesd-text-muted); font-size: 0.9rem; margin: 0; } .admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 24px; max-width: 1100px; margin: 0 auto; } .admin-card { background-color: var(--aesd-card); border: 1px solid var(--aesd-border); border-radius: 16px; padding: 28px; box-shadow: 0 12px 30px rgba(0,0,0,0.25); } .admin-card-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; } .admin-card-icon { font-size: 1.4rem; color: var(--aesd-blue-lt); margin-top: 3px; flex-shrink: 0; } .admin-card-title { color: var(--aesd-text); font-weight: 700; font-size: 1.05rem; margin: 0 0 4px; } .admin-card-subtitle { color: var(--aesd-text-muted); font-size: 0.82rem; margin: 0; line-height: 1.5; } .admin-form-row { display: flex; gap: 16px; margin-bottom: 4px; } .admin-form-field { flex: 1; min-width: 0; } .admin-switch-field { display: flex; flex-direction: column; justify-content: center; padding-top: 4px; } .admin-switch .form-check-input { background-color: var(--aesd-card-2); border-color: var(--aesd-border); } .admin-switch .form-check-input:checked { background-color: var(--aesd-orange); border-color: var(--aesd-orange); } .admin-switch .form-check-label { color: var(--aesd-text); font-size: 0.85rem; } .admin-select.form-select { background-color: var(--aesd-card-2); color: var(--aesd-text); border-color: var(--aesd-border); } .admin-btn { width: auto !important; padding-left: 24px !important; padding-right: 24px !important; } @media (max-width: 640px) { .admin-form-row { flex-direction: column; } } /* Sync status */ .admin-stats { display: flex; flex-direction: column; gap: 10px; } .admin-stat-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--aesd-border); } .admin-stat-row:last-child { border-bottom: none; padding-bottom: 0; } .admin-stat-label { color: var(--aesd-text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; } .admin-stat-value { color: var(--aesd-text); font-size: 0.88rem; font-weight: 600; text-align: right; } .admin-muted-text { color: var(--aesd-text-muted); font-size: 0.85rem; } .admin-alert { font-size: 0.85rem; } /* Cache management */ .admin-cache-list { display: flex; flex-direction: column; gap: 16px; } .admin-cache-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px; background-color: var(--aesd-card-2); border: 1px solid var(--aesd-border); border-radius: 10px; } .admin-cache-info { min-width: 0; flex: 1; } .admin-cache-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .admin-cache-name { color: var(--aesd-text); font-weight: 700; font-size: 0.92rem; } .admin-cache-badge { font-weight: 500; font-size: 0.7rem; } .admin-cache-description { color: var(--aesd-text-muted); font-size: 0.8rem; line-height: 1.5; margin: 0; } .admin-clear-btn { flex-shrink: 0; white-space: nowrap; } /* ── Sidebar bottom slot (profile icon) ───────────────────── */ .sidebar-bottom { position: absolute; bottom: 20px; left: 0; width: 100%; display: flex; flex-direction: column; align-items: center; } /* ── Responsive: stack panels on narrow screens ───────────── */ @media (max-width: 768px) { #landing-root { flex-direction: column; } .landing-left { flex: none; padding: 40px 24px 20px; min-height: 200px; } .landing-left-content { padding: 0; text-align: center; } .landing-features { display: none; /* hide on mobile for brevity */ } .landing-right { flex: none; padding: 24px 16px 40px; } }