/* ============================================================================
css/v2-shell.css — Phase 69 Dashboard v2 light SHELL (topbar + sidebar)
----------------------------------------------------------------------------
Flips the shared chrome (header + sidebar) to the v2 light palette, gated on
. Works by overriding the dark design tokens
(css/variables.css) ONLY on the .header and .sidebar subtrees — the main
content area keeps --bg-body dark, so not-yet-migrated (dark) tabs still
render their dark content correctly inside the light frame. The migrated
Results tab (#tab-results.v2-theme) supplies its own light surface, so with a
light shell it now reads as one cohesive light dashboard.
Hand-written (NOT generated by scripts/build-v2-theme.js). Remove the
`v2-shell` body class to revert the shell to dark.
============================================================================ */
/* ── Token override: light shell surfaces + text + borders ── */
body.v2-shell .header,
body.v2-shell .sidebar {
--bg-header: #FFFFFF;
--bg-sidebar: #FFFFFF;
--bg-card: #FFFFFF;
--bg-card-hover: #F0F4F8;
--text-primary: #1A2940;
--text-secondary: #455570;
--text-muted: #5E6C82;
--border-color: #E6EBF2;
--border-color-hover: #D4DBE6;
/* active nav-item → mockup Google-blue accent + light-blue tint bg */
--tc-primary: #1A73E8;
--tc-primary-light: #1A73E8;
--tc-primary-glow: #E8F0FE;
}
/* ── Header border + subtle elevation on light ── */
body.v2-shell .header {
border-bottom: 1px solid var(--border-color);
box-shadow: 0 1px 2px rgba(60, 64, 67, 0.06);
}
body.v2-shell .sidebar {
border-right: 1px solid var(--border-color);
}
/* ── Logo: the header uses the all-white logo (invisible on white). Swap to the
full-color brand logo via the v2-shell-only + logout button: token-driven, but pin the select
surface so it doesn't inherit a dark input bg. ── */
body.v2-shell .client-switcher-select {
background: #FFFFFF;
color: var(--text-primary);
border: 1px solid var(--border-color);
}
body.v2-shell .header-logout {
color: var(--text-secondary);
}
body.v2-shell .header-logout:hover {
background: #F0F4F8;
color: var(--text-primary);
}
/* ── Score pills in the sidebar (audit/AI) use a white-alpha bg in dark mode;
give them a light chip on white. ── */
body.v2-shell .nav-item-score {
background: #EEF2F7;
color: var(--text-secondary);
}
/* Phase 69 v2 IA: section heads, NEW badges, scroll for the longer 15-tab nav */
body.v2-shell .nav-section-label { color: var(--text-muted); }
body.v2-shell .nav-badge {
margin-left: auto; font-size: 9px; font-weight: 700; letter-spacing: .04em;
background: var(--tc-primary-glow); color: var(--tc-primary);
padding: 1px 6px; border-radius: 999px; text-transform: none;
}
body.v2-shell .sidebar-nav { overflow-y: auto; }
/* ── Phase 69 v2: light login gate (matches dashboard + boot splash) ── */
body.v2-shell .login-gate {
--bg-body: #F5F7FA; --bg-card: #FFFFFF;
--text-primary: #1A2940; --text-secondary: #455570; --text-muted: #5E6C82;
--border-color: #E6EBF2; --tc-primary: #1A73E8;
background: var(--bg-body);
}
body.v2-shell .login-gate .login-container {
background: #FFFFFF; border: 1px solid var(--border-color); border-radius: 16px;
box-shadow: 0 1px 3px rgba(60,64,67,0.12), 0 10px 28px rgba(60,64,67,0.08);
padding: 40px 36px;
}
body.v2-shell .login-gate .login-field input {
background: #FFFFFF; border: 1px solid var(--border-color); color: var(--text-primary);
}
body.v2-shell .login-gate .login-field input:focus {
border-color: #1A73E8; box-shadow: 0 0 0 3px rgba(26,115,232,0.15);
}
body.v2-shell .login-gate .login-btn {
background: #1A73E8; border: none; color: #FFFFFF; font-weight: 600;
}
body.v2-shell .login-gate .login-btn:hover { background: #1561C2; }
/* ════════════════════════════════════════════════════════════════════════
Phase 69 Stream 1 — GLOBAL TOPBAR (product strip + honest compare line)
Shell chrome rendered once below .header, above tab content. Explicit light
values (not token-driven) so it's independent of per-tab theme state. Rows
bleed full-width; an inner wrapper centres content to --content-max-width so
it lines up with the 32px-padded, centred tab content.
════════════════════════════════════════════════════════════════════════ */
body.v2-shell .v2-topbar {
background: #FFFFFF;
border-bottom: 1px solid #E6EBF2;
box-shadow: 0 1px 2px rgba(60, 64, 67, 0.05);
}
body.v2-shell .v2-topbar-inner {
max-width: var(--content-max-width, 1200px);
margin: 0 auto;
padding: 0 32px;
}
/* ── Row 1: product / service strip ── */
body.v2-shell .v2-topbar-products { border-bottom: 1px solid #EEF2F7; }
body.v2-shell .v2-topbar-products .v2-topbar-inner {
display: flex; align-items: center; gap: 2px; overflow-x: auto;
}
body.v2-shell .v2-product {
appearance: none; background: transparent; border: none; font-family: inherit;
cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
padding: 12px 15px; white-space: nowrap;
font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
color: #455570; border-bottom: 3px solid transparent;
transition: color .12s, background .12s, border-color .12s;
}
body.v2-shell .v2-product:hover { color: #1A2940; background: #F6F9FD; }
body.v2-shell .v2-product.is-active { color: #1A73E8; border-bottom-color: #1A73E8; }
body.v2-shell .v2-product:focus-visible { outline: 2px solid #1A73E8; outline-offset: -2px; }
body.v2-shell .v2-product-status {
display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
font-size: 10px; font-weight: 700; line-height: 1;
}
body.v2-shell .v2-product-status.on { background: #1A73E8; color: #FFFFFF; }
body.v2-shell .v2-product-status.off { background: #EAEDF1; color: #8A97A8; }
body.v2-shell .v2-product.is-inactive {
color: #98A2B3; font-weight: 600; text-transform: none; letter-spacing: 0;
}
body.v2-shell .v2-product.is-inactive:hover { color: #1A73E8; background: #F0F6FF; }
body.v2-shell .v2-product.is-inactive:hover .v2-product-status.off { background: #D6E6FF; color: #1A73E8; }
body.v2-shell .v2-product-tag {
font-size: 9px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
color: #8A97A8; background: #F2F4F7; border-radius: 999px; padding: 2px 7px;
}
body.v2-shell .v2-product.is-inactive:hover .v2-product-tag { color: #1A73E8; background: #E2EEFF; }
body.v2-shell .v2-product-divider {
width: 1px; height: 20px; background: #E6EBF2; margin: 0 8px; flex: none;
}
/* ── Row 2: honest compare / window line ── */
body.v2-shell .v2-topbar-compare {
background: linear-gradient(90deg, #E8F0FE 0%, rgba(232, 240, 254, 0) 62%);
}
body.v2-shell .v2-topbar-compare .v2-topbar-inner {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
flex-wrap: wrap; padding-top: 9px; padding-bottom: 9px;
}
body.v2-shell .v2-compare-window {
display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: #1A2940;
}
body.v2-shell .v2-compare-ico { width: 14px; height: 14px; color: #5E6C82; flex: none; }
body.v2-shell .v2-compare-eyebrow {
font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5E6C82;
}
body.v2-shell .v2-compare-current { font-weight: 700; color: #1A2940; }
body.v2-shell .v2-compare-divider { width: 4px; height: 4px; border-radius: 50%; background: #C2CBD8; flex: none; }
body.v2-shell .v2-compare-vs { color: #455570; }
body.v2-shell .v2-compare-meta { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
body.v2-shell .v2-compare-legend { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; }
body.v2-shell .v2-leg.up { color: #1E8E3E; }
body.v2-shell .v2-leg.down { color: #D93025; }
body.v2-shell .v2-leg.flat { color: #5E6C82; }
body.v2-shell .v2-compare-toggle {
appearance: none; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
padding: 5px 11px; border-radius: 999px; background: #FFFFFF; border: 1px solid #D4DBE6; color: #455570;
font-size: 11px; font-weight: 600;
}
body.v2-shell .v2-compare-toggle svg { width: 13px; height: 13px; }
body.v2-shell .v2-compare-toggle:hover { border-color: #1A73E8; color: #1A73E8; }
body.v2-shell .v2-compare-toggle[aria-pressed="true"] { background: #1A73E8; border-color: #1A73E8; color: #FFFFFF; }
body.v2-shell .v2-compare-help {
appearance: none; cursor: pointer; display: grid; place-items: center; width: 22px; height: 22px;
border-radius: 50%; background: #FFFFFF; border: 1px solid #D4DBE6; color: #5E6C82;
}
body.v2-shell .v2-compare-help svg { width: 13px; height: 13px; }
body.v2-shell .v2-compare-help:hover, body.v2-shell .v2-compare-help[aria-expanded="true"] { border-color: #1A73E8; color: #1A73E8; }
body.v2-shell .v2-compare-explainer {
flex-basis: 100%; margin-top: 2px; padding: 10px 14px; background: #FFFFFF;
border: 1px solid #E6EBF2; border-radius: 8px; font-size: 12px; line-height: 1.55; color: #455570;
}
body.v2-shell .v2-compare-explainer[hidden] { display: none; }
body.v2-shell .v2-compare-explainer strong { color: #1A2940; display: block; margin-bottom: 3px; font-size: 12.5px; }
/* ── "Highlight changes" — pulse every delta pill on the active tab ── */
body.v2-shell.v2-highlight-deltas .tab-content.active .kpi-delta {
animation: v2DeltaPulse 1.2s ease-in-out 3; border-radius: 6px;
}
@keyframes v2DeltaPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(26, 115, 232, 0); }
50% { box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.30); }
}
@media (prefers-reduced-motion: reduce) {
body.v2-shell.v2-highlight-deltas .tab-content.active .kpi-delta {
animation: none; outline: 2px solid rgba(26, 115, 232, 0.55); outline-offset: 1px;
}
}
/* ── Service upsell modal (built in JS, appended to ) ── */
body.v2-shell .v2-upsell-backdrop {
position: fixed; inset: 0; z-index: 200; background: rgba(26, 41, 64, 0.45);
-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
display: grid; place-items: center; padding: 24px;
}
body.v2-shell .v2-upsell-backdrop[hidden] { display: none; }
body.v2-shell .v2-upsell {
width: min(440px, 100%); background: #FFFFFF; border-radius: 16px;
box-shadow: 0 10px 40px rgba(26, 41, 64, 0.25); padding: 28px; font-family: inherit; color: #1A2940;
}
body.v2-shell .v2-upsell-ico {
width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
background: #E8F0FE; color: #1A73E8; margin-bottom: 14px;
}
body.v2-shell .v2-upsell-ico svg { width: 22px; height: 22px; }
body.v2-shell .v2-upsell-tag {
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #1A73E8;
}
body.v2-shell .v2-upsell h3 { margin: 4px 0 0; font-size: 18px; font-weight: 700; }
body.v2-shell .v2-upsell p { margin: 10px 0 0; font-size: 13.5px; line-height: 1.6; color: #455570; }
body.v2-shell .v2-upsell-list { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
body.v2-shell .v2-upsell-list li { display: flex; gap: 8px; font-size: 13px; color: #1A2940; align-items: flex-start; }
body.v2-shell .v2-upsell-list svg { width: 16px; height: 16px; color: #1E8E3E; flex: none; margin-top: 1px; }
body.v2-shell .v2-upsell-actions { display: flex; gap: 10px; margin-top: 22px; }
body.v2-shell .v2-upsell-btn {
appearance: none; font-family: inherit; cursor: pointer; font-size: 13px; font-weight: 600;
padding: 10px 16px; border-radius: 9px; flex: 1; text-align: center; text-decoration: none; line-height: 1.2;
}
body.v2-shell .v2-upsell-btn.primary { background: #1A73E8; border: 1px solid #1A73E8; color: #FFFFFF; }
body.v2-shell .v2-upsell-btn.primary:hover { background: #1561C2; }
body.v2-shell .v2-upsell-btn.ghost { background: #FFFFFF; border: 1px solid #D4DBE6; color: #455570; }
body.v2-shell .v2-upsell-btn.ghost:hover { background: #F0F4F8; }
/* ── Responsive: tighten gutters to match tab content on small screens ── */
@media (max-width: 768px) {
body.v2-shell .v2-topbar-inner { padding: 0 16px; }
body.v2-shell .v2-product { padding: 11px 11px; font-size: 12px; }
}