/* ============================================================== * award.css — Ziqsy CMS "Hybrid" design language * -------------------------------------------------------------- * Daylight (light, editorial) is the DEFAULT surface. * Eclipse (dark, pro) is a true dark mode driven by the same * token system via . * * Strategy: one token set; the dark block re-points the shell + * dashboard tokens that the legacy partials hard-coded against * light values. Additive only — no markup/behaviour change beyond * the new theme-toggle button (styled here, wired in the layout). * Loaded after the component layers, before responsive.css. * ============================================================== */ /* ------------------------------------------------------------------ * * 0. SHARED SHELL TOKENS (single source of truth for both themes) * ------------------------------------------------------------------ */ :root { /* Daylight shell */ --zq-app-bg: #f6f7f9; --zq-app-bg-grad: radial-gradient(1200px 600px at 100% -10%, #eef6fb 0%, transparent 55%), radial-gradient(1000px 500px at -10% 0%, #f0f1fb 0%, transparent 50%), #f6f7f9; --zq-topbar: linear-gradient(100deg, #06283d 0%, #0d6e93 58%, #00aeef 128%); --zq-topbar-shadow: 0 2px 12px rgba(6, 40, 61, .18); --zq-elevate: 0 1px 2px rgba(15,23,42,.04), 0 6px 20px rgba(15,23,42,.06); --zq-elevate-lg: 0 10px 30px rgba(15,23,42,.10), 0 2px 8px rgba(15,23,42,.05); } /* App canvas gets a soft, premium wash (Daylight). */ body { background: var(--zq-app-bg-grad) fixed; } /* ------------------------------------------------------------------ * * 1. DAYLIGHT POLISH — refine the existing light surfaces * ------------------------------------------------------------------ */ /* Cards/panels sit on a slightly warmer elevation than flat borders. */ .dash2-panel, .dash2-kpi { box-shadow: var(--zq-elevate); } .dash2-panel { border-color: #eef1f5; } /* Sidebar gets a whisper of elevation so it reads as a distinct plane. */ .app-sidebar { box-shadow: 1px 0 0 var(--zq-sidebar-border), 6px 0 24px rgba(15,23,42,.03); } /* Top bar: enforce the brand gradient in BOTH themes. Overrides a legacy `body .top-header` rule in auth-entry.css that resolved --primary-dark to theme.css's indigo (#4f46e5) instead of its slate fallback, which painted the brand band purple on light surfaces. --zq-topbar swaps per theme. */ body .top-header { background: var(--zq-topbar); box-shadow: var(--zq-topbar-shadow); border-bottom: 1px solid rgba(255, 255, 255, .06); } /* ------------------------------------------------------------------ * * 2. THEME TOGGLE BUTTON (lives in the top bar, on the dark gradient) * ------------------------------------------------------------------ */ .zq-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: rgba(255,255,255,.08); color: #fff; font-size: 18px; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .12s ease; } .zq-theme-toggle:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.42); transform: translateY(-1px); } .zq-theme-toggle:active { transform: translateY(0); } /* Show the correct glyph per theme: moon in light, sun in dark. */ .zq-theme-toggle .zq-ic-sun { display: none; } .zq-theme-toggle .zq-ic-moon { display: inline-flex; } [data-bs-theme="dark"] .zq-theme-toggle .zq-ic-sun { display: inline-flex; } [data-bs-theme="dark"] .zq-theme-toggle .zq-ic-moon { display: none; } /* ================================================================== * * ECLIPSE — DARK MODE * Re-point every shell/dashboard token the legacy CSS hard-coded. * ================================================================== */ [data-bs-theme="dark"] { /* Core surfaces (deeper, near-black navy — the Eclipse canvas) */ --zq-bg: #0a0d14; --zq-surface: #121724; --zq-surface-2: #161c2b; --zq-border: #1f2738; --zq-border-strong: #2a3447; --zq-text: #e7ecf3; --zq-text-muted: #93a0b5; --zq-app-bg: #0a0d14; --zq-app-bg-grad: radial-gradient(1200px 600px at 100% -10%, rgba(0,174,239,.08) 0%, transparent 55%), radial-gradient(1000px 520px at -10% 0%, rgba(124,77,255,.07) 0%, transparent 50%), #0a0d14; --zq-topbar: linear-gradient(100deg, #0a0f18 0%, #0e2433 55%, #0b3d57 120%); --zq-topbar-shadow: 0 2px 16px rgba(0,0,0,.55); --zq-elevate: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45); --zq-elevate-lg: 0 16px 40px rgba(0,0,0,.55); /* Sidebar tokens (consumed by components/sidebar.css) */ --zq-sidebar-bg: #0e1422; --zq-sidebar-fg: #9aa7bd; --zq-sidebar-muted: #8a97ad; /* WCAG AA 6.2:1 on #0e1422 (was #5d6c83 = 3.44:1) */ --zq-sidebar-active: #21bcee; /* decorative accent bar + badge bg only */ --zq-sidebar-active-ink: #54cdf2; /* azure TEXT on the dark active pill (7.7:1 on #112c3f) */ --zq-sidebar-active-soft: rgba(33,188,238,.14); --zq-sidebar-border: #1b2435; --zq-sidebar-ink: #eaf0f7; /* Bootstrap bridge */ --bs-body-bg: #0a0d14; --bs-body-color: #e7ecf3; color-scheme: dark; } /* ---- App canvas + top bar ---- */ html[data-bs-theme="dark"] body { background: var(--zq-app-bg-grad) fixed; color: var(--zq-text); } [data-bs-theme="dark"] .top-header { background: var(--zq-topbar); box-shadow: var(--zq-topbar-shadow); border-bottom: 1px solid #16202e; } /* ---- Sidebar (override the literal light colours in sidebar.css) ---- */ [data-bs-theme="dark"] .app-sidebar { background: var(--zq-sidebar-bg); border-right: 1px solid var(--zq-sidebar-border); box-shadow: 1px 0 0 var(--zq-sidebar-border), 6px 0 28px rgba(0,0,0,.4); } [data-bs-theme="dark"] .app-nav-link:hover { background: #18212f; color: var(--zq-sidebar-ink); } [data-bs-theme="dark"] .app-nav-link:hover i { color: var(--zq-sidebar-ink); } [data-bs-theme="dark"] .app-sidebar__footer { background: #0b1019; border-top-color: var(--zq-sidebar-border); } [data-bs-theme="dark"] .app-usercard:hover { background: #18212f; } [data-bs-theme="dark"] .app-usercard__avatar { border-color: #243043; } [data-bs-theme="dark"] .app-sidebar__logout { background: #131b28; border-color: var(--zq-sidebar-border); color: #9aa7bd; } [data-bs-theme="dark"] .app-sidebar__logout:hover { background: #2a1620; color: #fb7185; border-color: #5c2733; } [data-bs-theme="dark"] .app-sidebar__scroll { scrollbar-color: #2a3447 transparent; } [data-bs-theme="dark"] .app-sidebar__scroll::-webkit-scrollbar-thumb { background: #2a3447; border-color: var(--zq-sidebar-bg); } [data-bs-theme="dark"] .zq-nav-toggle { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; } [data-bs-theme="dark"] .zq-nav-toggle:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); color: #fff; } /* ---- Dashboard (dash2-*) dark surfaces ---- */ [data-bs-theme="dark"] .dash2-panel, [data-bs-theme="dark"] .dash2-kpi { background: var(--zq-surface); border-color: var(--zq-border); box-shadow: var(--zq-elevate); } [data-bs-theme="dark"] .dash2-kpi:hover { box-shadow: 0 16px 34px rgba(0,0,0,.5); } [data-bs-theme="dark"] .dash2-kpi__val { color: #f3f6fa; } [data-bs-theme="dark"] .dash2-kpi__label { color: #93a0b5; } [data-bs-theme="dark"] .dash2-panel__head h2 { color: #f3f6fa; } [data-bs-theme="dark"] .dash2-panel__link { color: #54cdf2; } /* 9.8:1 on #121724 (light #00719e fails on dark) */ [data-bs-theme="dark"] .dash2-panel__link:hover { color: #8ad9f5; } [data-bs-theme="dark"] .dash2-person:hover { background: #18212f; } [data-bs-theme="dark"] .dash2-person + .dash2-person { border-top-color: #1c2433; } [data-bs-theme="dark"] .dash2-person__avatar { border-color: #243043; } [data-bs-theme="dark"] .dash2-person__name { color: #eaf0f7; } [data-bs-theme="dark"] .dash2-person__sub, [data-bs-theme="dark"] .dash2-person__when { color: var(--zq-text-muted); } [data-bs-theme="dark"] .dash2-empty { color: var(--zq-text-muted); } [data-bs-theme="dark"] .dash2-ql { background: #131b28; border-color: var(--zq-border); color: #c7d2e1; } [data-bs-theme="dark"] .dash2-ql:hover { background: #16263a; border-color: #1d5a7a; color: #cdeefb; } [data-bs-theme="dark"] .dash2-ql__grip { color: #3c4862; } [data-bs-theme="dark"] .dash2-fav .dash2-ql:hover .dash2-ql__grip { color: #21bcee; } [data-bs-theme="dark"] .dash2-fav__hint { color: var(--zq-text-muted); } [data-bs-theme="dark"] .dash2-fav__hint i { color: #3c4862; } [data-bs-theme="dark"] .dash2-ql.dash2-ql--ghost { background: #16263a; border-color: #1d5a7a; } /* The hero gradient already reads well on dark; just deepen its shadow. */ [data-bs-theme="dark"] .dash2-hero { box-shadow: 0 18px 44px rgba(0,0,0,.55); } /* ---- Generic Bootstrap surfaces on dark (lists, tables, headings) ---- */ [data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3, [data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6, [data-bs-theme="dark"] .h1, [data-bs-theme="dark"] .h2, [data-bs-theme="dark"] .h3 { color: #f1f5fb; } [data-bs-theme="dark"] .card { background: var(--zq-surface); border-color: var(--zq-border); color: var(--zq-text); } [data-bs-theme="dark"] .card-header { background: var(--zq-surface-2); border-bottom-color: var(--zq-border); } [data-bs-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--zq-text); --bs-table-border-color: var(--zq-border); } [data-bs-theme="dark"] .table > thead { --bs-table-bg: var(--zq-surface-2); } [data-bs-theme="dark"] .table > thead th { color: #93a0b5; border-bottom-color: var(--zq-border-strong); /* legacy theme.css paints background-color:var(--secondary-color) directly on thead th (beats Bootstrap's --bs-table-bg), leaking a light fill into dark. Force the dark surface so muted header text keeps AA contrast. */ background-color: var(--zq-surface-2) !important; } [data-bs-theme="dark"] .table-hover > tbody > tr:hover { --bs-table-hover-bg: #18212f; } [data-bs-theme="dark"] .list-group-item { background: var(--zq-surface); border-color: var(--zq-border); color: var(--zq-text); } [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background: #0f1622; border-color: var(--zq-border-strong); color: var(--zq-text); } [data-bs-theme="dark"] .form-control::placeholder { color: #5d6c83; } [data-bs-theme="dark"] .input-group-text { background: var(--zq-surface-2); border-color: var(--zq-border-strong); color: var(--zq-text-muted); } [data-bs-theme="dark"] .dropdown-menu { background: var(--zq-surface); border-color: var(--zq-border); } [data-bs-theme="dark"] .dropdown-item { color: var(--zq-text); } [data-bs-theme="dark"] .dropdown-item:hover { background: rgba(33,188,238,.14); color: #21bcee; } [data-bs-theme="dark"] .dropdown-divider { border-color: var(--zq-border); } /* Soft tinted badges keep their meaning but stop glowing on dark. */ [data-bs-theme="dark"] .bg-primary-subtle { background-color: rgba(0,174,239,.16) !important; } [data-bs-theme="dark"] .bg-success-subtle { background-color: rgba(16,185,129,.16) !important; } [data-bs-theme="dark"] .bg-warning-subtle { background-color: rgba(245,158,11,.16) !important; } [data-bs-theme="dark"] .bg-danger-subtle { background-color: rgba(239,68,68,.16) !important; } [data-bs-theme="dark"] .bg-info-subtle { background-color: rgba(14,165,233,.16) !important; } /* Search results panel in the top bar reads dark too. */ [data-bs-theme="dark"] .search-results { background: var(--zq-surface); box-shadow: 0 18px 44px rgba(0,0,0,.6); } [data-bs-theme="dark"] .search-result-item { color: #d6deea; border-bottom-color: var(--zq-border); } [data-bs-theme="dark"] .search-result-item:hover { background: #18212f; } [data-bs-theme="dark"] .search-result-name { color: #eaf0f7; } [data-bs-theme="dark"] .search-result-meta { color: #8a97ac; } /* Smooth the theme flip (but respect reduced-motion via the design-system guard). */ .app-sidebar, .top-header, .dash2-panel, .dash2-kpi, .card, .dash2-ql { transition: background-color .25s var(--zq-ease, ease), border-color .25s var(--zq-ease, ease), color .25s var(--zq-ease, ease); }