/* ===================================================================== ServiceAlert authed-app theme: align the signed-in dashboard with the public landing page (fonts + color discipline). Loaded LAST by includes/dashboard-head.php and scoped to html.modern-dashboard (the class that include adds to ), so it only affects the signed-in app (/dashboard, /settings, /monitor/*) and never the public marketing pages. - Fonts: Bricolage Grotesque (headings) / Geist (UI/body) / Geist Mono. - Color discipline (from the landing): near-black ink leads primary actions, links, and active states; saturated color is reserved for live status. The old blue --accent is remapped to ink and adapts to dark mode automatically via var(--ink) + color-mix. ===================================================================== */ /* ---------- Fonts (theme-independent) ---------- */ html.modern-dashboard { --sans: 'Geist', 'Geist Placeholder', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --serif: 'Bricolage Grotesque', 'Geist', sans-serif; --display: 'Bricolage Grotesque', 'Geist', sans-serif; } html.modern-dashboard h1, html.modern-dashboard h2, html.modern-dashboard h3, html.modern-dashboard h4 { font-family: var(--display); letter-spacing: -0.018em; } /* ---------- Accent -> ink-led (auto-adapts light + dark via var(--ink)) ---------- */ html.modern-dashboard { --accent: var(--ink); --accent-hover: color-mix(in srgb, var(--ink) 86%, var(--bg)); --accent-ink: var(--ink); --accent-light: var(--ink-2); --accent-color: var(--ink); --accent-subtle: color-mix(in srgb, var(--ink) 6%, transparent); --accent-soft: color-mix(in srgb, var(--ink) 8%, transparent); --accent-bg: color-mix(in srgb, var(--ink) 8%, transparent); } /* common.css .btn-primary used the blue accent + white text; unify it on ink/bg like the dashboard's other primary buttons (theme-adaptive). */ html.modern-dashboard .btn-primary { background: var(--ink); color: var(--bg); border-color: var(--ink); } html.modern-dashboard .btn-primary:hover { background: color-mix(in srgb, var(--ink) 86%, var(--bg)); border-color: color-mix(in srgb, var(--ink) 86%, var(--bg)); box-shadow: 0 4px 18px -6px rgba(25, 24, 20, 0.18); } /* Sidebar/user avatar used a purple->blue gradient; make it the brand ink chip. */ html.modern-dashboard .user-av { background: var(--ink); color: var(--bg); } /* A couple of hardcoded blue tints in settings -> neutral ink tints. */ html.modern-dashboard .plan-badge.business { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink-2); } html.modern-dashboard .faq-note { background: color-mix(in srgb, var(--ink) 6%, transparent); } /* ---------- Status palette + warm ink: match the landing's shades. LIGHT only (html...:not([data-theme="dark"])); dark-theme.css keeps its own brighter dark-mode status colors. Status color stays meaningful. ---------- */ html.modern-dashboard:not([data-theme="dark"]) { --ink: #191814; /* warm near-black, matches the landing ink */ --text-primary: #191814; --ok: #1F8A5B; --success: #1F8A5B; --success-light: #279C68; --warn: #B7821A; --danger: #C23A28; --error: #C23A28; --error-text: #C23A28; --status-operational: #1F8A5B; --status-degraded: #B7821A; --status-partial: #C2410C; --status-major: #C23A28; --status-maintenance: #5B6CC4; --status-unknown: #908D82; } /* ---------- Sidebar appearance (light/dark) toggle ---------- A labeled segmented control in the shared sidebar so switching themes is obvious and available on every authed page (not just /dashboard). */ html.modern-dashboard .sa-theme-switch { display: flex; gap: 3px; padding: 3px; margin: 6px 4px 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; } html.modern-dashboard .sa-theme-opt { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 8px; border: none; background: none; cursor: pointer; border-radius: 7px; font-family: var(--sans); font-size: 12.5px; font-weight: 500; color: var(--ink-3); transition: background .15s, color .15s; } html.modern-dashboard .sa-theme-opt svg { width: 15px; height: 15px; flex: none; } html.modern-dashboard .sa-theme-opt:hover { color: var(--ink); } html.modern-dashboard .sa-theme-opt.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); } /* Collapsed sidebar: stack the two icon-only options (labels auto-hide via the shared .settings-nav-item-text rule). */ html.modern-dashboard .settings-sidebar.collapsed .sa-theme-switch { flex-direction: column; gap: 4px; margin: 6px auto 2px; width: max-content; } html.modern-dashboard .settings-sidebar.collapsed .sa-theme-opt { padding: 8px; }