/* ========================================================================== EduAce Super Panel — Light Cream Design System -------------------------------------------------------------------------- A warm, restrained, Apple-grade command centre theme: - Base canvas: warm cream / off-white - Elevated surfaces: crisp white cards with soft warm shadows - Hairline warm-gray borders, 8pt spacing rhythm, tabular numerals Sections: 1. Design tokens 2. Base & typography 3. Layout shell (sidebar, topbar) 4. Primitives (buttons, pills, chips) 5. Overview: hero, KPIs, panels, charts 6. Platform pages 7. Data tables 8. Login 9. Responsive ========================================================================== */ /* 1. DESIGN TOKENS ======================================================== */ :root { /* Cream canvas + paper surfaces */ --cream-050: #FDFBF7; --cream-100: #FAF7F2; --cream-200: #F6F2EA; --cream-300: #F0EADE; --paper: #FFFFFF; /* Warm ink + text */ --ink: #2A2620; --ink-soft: #5F584C; --muted: #938A7B; --faint: #B7AE9E; /* Hairline warm borders */ --line: #ECE5D8; --line-strong: #E2DAC9; /* Brand — deep evergreen sits calmly on cream */ --brand: #146B62; --brand-600: #125F57; --brand-700: #0F5049; --brand-tint: #E6F0ED; --gold: #C08A3E; --gold-tint: #F6ECD9; /* Semantic */ --success: #2C7A5B; --success-tint: #E6F1EA; --warning: #B7791F; --warning-tint: #F7ECD6; --danger: #C0503F; --danger-tint: #F8E7E2; /* Warm elevation shadows */ --shadow-xs: 0 1px 2px rgba(74, 62, 40, 0.05); --shadow-sm: 0 1px 2px rgba(74, 62, 40, 0.04), 0 4px 12px rgba(96, 78, 44, 0.05); --shadow-md: 0 2px 6px rgba(74, 62, 40, 0.05), 0 14px 34px rgba(96, 78, 44, 0.08); --shadow-lg: 0 30px 70px rgba(74, 60, 34, 0.14); /* Radii */ --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-pill: 999px; /* Spacing rhythm (8pt-based) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; /* Type */ --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; /* Metrics */ --sidebar-full: 218px; --sidebar-rail: 68px; --sidebar-w: var(--sidebar-full); --topbar-h: 54px; --gutter: var(--sp-8); --ease: cubic-bezier(0.4, 0, 0.2, 1); } /* Icon-only rail. Set on before paint to avoid a collapse flash. */ html.sidebar-collapsed { --sidebar-w: var(--sidebar-rail); } /* 2. BASE & TYPOGRAPHY ==================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--cream-100); color: var(--ink); font-family: var(--font-body); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* clip (not hidden) keeps position:sticky working on the topbar */ overflow-x: clip; } /* Drawer open on phones: freeze the page behind the overlay. */ body.nav-open { overflow: hidden; } button, input, select { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } svg { width: 18px; height: 18px; stroke-width: 1.9; } /* Tabular numerals for every metric surface */ .num, .kpi-value, .stat-value, .metric-value, .data-table td, .matrix-table td, .rank-value { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'lnum' 1; } .eyebrow { margin: 0 0 var(--sp-2); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand); } h1, h2, h3 { font-family: var(--font-display); color: var(--ink); letter-spacing: -0.02em; margin: 0; } /* 3. LAYOUT SHELL ======================================================== */ .app-shell { min-height: 100vh; } .sidebar { position: fixed; z-index: 40; inset: 0 auto 0 0; width: var(--sidebar-w); background: var(--cream-050); border-right: 1px solid var(--line); padding: var(--sp-6) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; transition: width 0.24s var(--ease), transform 0.24s var(--ease); } .sidebar-head { display: flex; align-items: center; gap: var(--sp-2); min-height: 38px; flex-shrink: 0; } .brand { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-1); font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--ink); min-width: 0; flex: 1; } .brand-logo { display: block; height: 32px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; } /* Drawer dismiss — phones only */ .rail-close { display: none; width: 40px; height: 40px; flex-shrink: 0; border: 0; background: transparent; border-radius: var(--r-xs); color: var(--muted); cursor: pointer; place-items: center; } .rail-close:hover { background: var(--cream-200); color: var(--ink); } .brand b { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); } .brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-sm); background: linear-gradient(150deg, var(--brand), var(--brand-700)); color: #fff; font: 700 13px var(--font-display); letter-spacing: -0.02em; box-shadow: inset 0 1px rgba(255, 255, 255, 0.25), var(--shadow-xs); } .side-nav { margin-top: var(--sp-6); overflow-y: auto; overflow-x: hidden; flex: 1; /* Without min-height:0 a column flex item refuses to shrink below its content, so opening a group squeezes the rows instead of scrolling. */ min-height: 0; display: flex; flex-direction: column; gap: 2px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .side-nav::-webkit-scrollbar { width: 7px; } .side-nav::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-pill); } .side-nav::-webkit-scrollbar-track { background: transparent; } /* Nav rows keep their natural height; the nav scrolls instead of compressing. */ .side-nav > *, .nav-group > *, .nav-group-body > *, .nav-site > *, .nav-quicklinks > * { flex-shrink: 0; } .side-nav .nav-label { padding: var(--sp-4) var(--sp-3) var(--sp-2); margin: 0; font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); } /* Collapsible Platforms / Programs groups */ .nav-group { display: flex; flex-direction: column; gap: 2px; margin-top: var(--sp-2); } .nav-group-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; flex-shrink: 0; padding: var(--sp-3) var(--sp-3) var(--sp-2); margin: 0; border: 0; background: transparent; cursor: pointer; color: var(--faint); font: inherit; text-align: left; border-radius: var(--r-xs); transition: background 0.18s var(--ease), color 0.18s var(--ease); } .nav-group-toggle:hover { background: var(--cream-200); color: var(--ink-soft); } .nav-group-label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .nav-chevron { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.2s var(--ease); opacity: 0.7; } .nav-group.is-open .nav-chevron { transform: rotate(180deg); } .nav-group-body { display: flex; flex-direction: column; gap: 2px; } .nav-group-body[hidden] { display: none; } .side-nav a { position: relative; display: flex; align-items: center; gap: var(--sp-3); height: 42px; min-height: 42px; flex-shrink: 0; padding: 0 var(--sp-3); border-radius: var(--r-xs); color: var(--ink-soft); font-size: 13px; font-weight: 500; transition: background 0.18s var(--ease), color 0.18s var(--ease); } .side-nav a svg { width: 17px; flex-shrink: 0; color: var(--muted); } .nav-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .side-nav a:hover { background: var(--cream-200); color: var(--ink); } .side-nav a.active { background: var(--brand-tint); color: var(--brand-700); font-weight: 600; } .side-nav a.active svg { color: var(--brand); } /* Platform row + its nested dataset quick-links */ .nav-site { display: flex; flex-direction: column; gap: 1px; } .nav-site-head { display: flex; align-items: center; gap: 2px; } .nav-site-head > a { flex: 1; min-width: 0; } .nav-sub-toggle { width: 26px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border: 0; background: transparent; border-radius: var(--r-xs); color: var(--faint); cursor: pointer; transition: background 0.18s var(--ease), color 0.18s var(--ease); } .nav-sub-toggle:hover { background: var(--cream-200); color: var(--ink-soft); } .nav-sub-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .nav-sub-chevron { width: 13px; height: 13px; opacity: 0.7; transition: transform 0.2s var(--ease); } .nav-site.is-open .nav-sub-chevron { transform: rotate(180deg); } /* Dataset deep-links — indented children under the platform row. */ .nav-quicklinks { display: flex; flex-direction: column; gap: 1px; margin: 1px 0 var(--sp-2); padding-left: 30px; position: relative; } .nav-quicklinks::before { content: ""; position: absolute; left: 15px; top: 4px; bottom: 8px; width: 1px; background: var(--line); } .side-nav a.nav-quicklink { height: 34px; min-height: 34px; font-size: 12.5px; color: var(--muted); } .side-nav a.nav-quicklink svg { width: 15px; } .side-nav a.nav-quicklink:hover { color: var(--ink); } .side-nav a.nav-quicklink.active { background: var(--brand-tint); color: var(--brand-700); font-weight: 600; } .nav-quicklinks[hidden] { display: none; } /* Icon rail: quick-links move into a hover/focus flyout (see .nav-flyout) so the rail stays six rows tall. Mobile keeps them inline inside the drawer. */ @media (min-width: 961px) { html.sidebar-collapsed .nav-quicklinks, html.sidebar-collapsed .nav-sub-toggle { display: none; } } /* Rail flyout — cloned quick-links, positioned in fixed coords by JS so the scrollable nav can't clip them. */ .nav-flyout { position: fixed; z-index: 60; min-width: 214px; max-width: 290px; padding: 6px; display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); box-shadow: var(--shadow-md); opacity: 0; transform: translateX(-4px); pointer-events: none; transition: opacity 0.14s var(--ease), transform 0.14s var(--ease); } .nav-flyout.show { opacity: 1; transform: translateX(0); pointer-events: auto; } .nav-flyout-title { padding: 6px 10px 5px; font-family: var(--font-display); font-size: 9.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint); } .nav-flyout a { display: flex; align-items: center; gap: var(--sp-3); height: 34px; padding: 0 10px; border-radius: var(--r-xs); color: var(--ink-soft); font-size: 12.5px; font-weight: 500; } .nav-flyout a svg { width: 15px; flex-shrink: 0; color: var(--muted); } .nav-flyout a:hover { background: var(--cream-200); color: var(--ink); } .nav-flyout a.active { background: var(--brand-tint); color: var(--brand-700); font-weight: 600; } /* The rail hides .nav-text everywhere; inside the flyout the labels are the whole point, so opt them back in. */ @media (min-width: 961px) { html.sidebar-collapsed .nav-flyout .nav-text { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } @media (max-width: 960px) { .nav-flyout { display: none; } } .site-dot { --dot: var(--brand); width: 24px; height: 24px; border-radius: var(--r-xs); display: inline-grid; place-items: center; background: color-mix(in srgb, var(--dot) 16%, white); color: color-mix(in srgb, var(--dot) 72%, #3a3128); font: 700 10px var(--font-display); flex-shrink: 0; } .health-mini { width: 7px; height: 7px; border-radius: 50%; margin-left: auto; flex-shrink: 0; } .health-mini.up { background: var(--success); box-shadow: 0 0 0 3px var(--success-tint); } .health-mini.down { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-tint); } .sidebar-foot { margin-top: var(--sp-4); border-top: 1px solid var(--line); padding-top: var(--sp-4); display: grid; grid-template-columns: 36px 1fr 24px; gap: var(--sp-2); align-items: center; flex-shrink: 0; } .admin-avatar { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--gold-tint); color: var(--gold); display: grid; place-items: center; font: 700 11px var(--font-display); overflow: hidden; flex-shrink: 0; } .admin-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block; } .sidebar-foot b { display: block; font-size: 12px; color: var(--ink); } .sidebar-foot small { display: block; font-size: 10px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .foot-meta { min-width: 0; } .sidebar-foot a { color: var(--muted); display: grid; place-items: center; } .sidebar-foot a:hover { color: var(--danger); } .main { margin-left: var(--sidebar-w); min-height: 100vh; min-width: 0; transition: margin-left 0.24s var(--ease); } .topbar { position: sticky; top: 0; z-index: 30; min-height: var(--topbar-h); height: auto; padding: 8px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); background: color-mix(in srgb, var(--cream-100) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); } .top-lead { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; flex: 1; } .top-lead .menu-btn, .top-lead .collapse-btn { margin-top: 0; } .page-identity { min-width: 0; flex: 1; } .page-eyebrow { margin: 0; font-size: 9px; font-weight: 700; letter-spacing: 0.1em; line-height: 1.3; text-transform: uppercase; color: var(--brand); } .page-title { margin: 0; font-family: var(--font-display); font-size: clamp(15px, 1.15vw, 18px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); } .page-subtitle { margin: 1px 0 0; font-size: 11px; line-height: 1.35; color: var(--muted); max-width: 52rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .top-actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; } .topbar-asof { text-align: right; } .topbar-asof span { display: block; font-size: 11px; font-weight: 600; line-height: 1.3; color: var(--ink-soft); } .topbar-asof small { display: block; font-size: 9.5px; line-height: 1.3; color: var(--muted); margin-top: 1px; } /* Compact chrome so the bar stays close to --topbar-h. */ .topbar .icon-btn, .topbar .menu-btn { width: 30px; height: 30px; } .topbar .icon-btn svg { width: 15px; } .topbar .soft-btn { padding: 6px 10px; font-size: 11px; } .topbar .segmented { padding: 2px; } .topbar .segmented a { padding: 4px 9px; font-size: 11px; } .topbar .live-indicator { padding: 4px 9px; font-size: 10.5px; } .breadcrumb { margin: 0; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .breadcrumb b { color: var(--ink); font-weight: 600; } .breadcrumb span { padding: 0 var(--sp-2); color: var(--faint); } .live-indicator { display: flex; align-items: center; gap: var(--sp-2); padding: 6px 11px; border-radius: var(--r-pill); background: var(--success-tint); border: 1px solid color-mix(in srgb, var(--success) 20%, white); color: var(--success); font-size: 11px; font-weight: 600; } .live-indicator i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent); animation: pulse 2.4s var(--ease) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } /* 3b. COLLAPSED RAIL + MOBILE DRAWER ===================================== */ /* Scrim sits under the drawer on phones only. */ .nav-scrim { display: none; position: fixed; inset: 0; z-index: 35; background: rgba(42, 38, 32, 0.42); backdrop-filter: blur(2px); opacity: 0; /* Never intercept taps while transparent — only the shown state is live. */ pointer-events: none; transition: opacity 0.24s var(--ease); } .nav-scrim.show { opacity: 1; pointer-events: auto; } /* Floating label for rail items — positioned by JS in fixed coords so the scrollable nav never clips it. */ .rail-tip { position: fixed; z-index: 60; padding: 6px 10px; border-radius: var(--r-xs); background: var(--ink); color: var(--cream-050); font-size: 11.5px; font-weight: 600; white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-md); opacity: 0; transform: translateX(-4px); transition: opacity 0.14s var(--ease), transform 0.14s var(--ease); } .rail-tip.show { opacity: 1; transform: translateX(0); } /* Desktop-only collapse. Phones use the drawer instead, so these rules must not leak into the mobile breakpoint. */ @media (min-width: 961px) { html.sidebar-collapsed .sidebar { padding-left: 10px; padding-right: 10px; overflow: hidden; } html.sidebar-collapsed .brand { justify-content: center; padding: 0; } html.sidebar-collapsed .nav-text, html.sidebar-collapsed .nav-label span, html.sidebar-collapsed .nav-group-label, html.sidebar-collapsed .nav-chevron, html.sidebar-collapsed .foot-meta, html.sidebar-collapsed .health-mini { display: none; } /* Crop to the green "e" mark when the rail is icon-only. */ html.sidebar-collapsed .brand-logo { width: 38px; height: 38px; max-width: 38px; object-fit: cover; object-position: left center; border-radius: var(--r-sm); } html.sidebar-collapsed .side-nav a { justify-content: center; gap: 0; padding: 0; } /* Section headings become a hairline so the rhythm survives collapse. */ html.sidebar-collapsed .nav-label, html.sidebar-collapsed .nav-group-toggle { height: 1px; width: 24px; margin: var(--sp-3) auto; padding: 0; background: var(--line-strong); overflow: hidden; pointer-events: none; } /* Rail mode always shows group children (icons only). */ html.sidebar-collapsed .nav-group-body { display: flex !important; } html.sidebar-collapsed .nav-group-body[hidden] { display: flex !important; } html.sidebar-collapsed .sidebar-foot { grid-template-columns: 1fr; justify-items: center; gap: var(--sp-3); } html.sidebar-collapsed .collapse-btn i, html.sidebar-collapsed .collapse-btn svg { transform: scaleX(-1); } } @media (max-width: 960px) { .rail-tip { display: none; } } .icon-btn, .menu-btn { width: 36px; height: 36px; border: 1px solid var(--line-strong); background: var(--paper); border-radius: var(--r-xs); display: grid; place-items: center; color: var(--ink-soft); cursor: pointer; transition: background 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.18s var(--ease); } .icon-btn:hover, .menu-btn:hover { background: var(--cream-200); box-shadow: var(--shadow-xs); } .icon-btn svg { width: 16px; } .icon-btn:focus-visible, .menu-btn:focus-visible, .soft-btn:focus-visible, .side-nav a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .menu-btn { display: none; } .collapse-btn i, .collapse-btn svg { transition: transform 0.24s var(--ease); } .soft-btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 8px 12px; border: 1px solid var(--line-strong); background: var(--paper); border-radius: var(--r-xs); font-size: 11.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer; transition: background 0.18s var(--ease), box-shadow 0.18s var(--ease); } .soft-btn:hover { background: var(--cream-200); box-shadow: var(--shadow-xs); } .soft-btn svg { width: 14px; } .primary-btn { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); width: 100%; height: 46px; border: 0; border-radius: var(--r-sm); background: var(--brand); color: #fff; font-weight: 600; cursor: pointer; transition: background 0.18s var(--ease), transform 0.18s var(--ease), box-shadow 0.18s var(--ease); } .primary-btn:hover { background: var(--brand-600); transform: translateY(-1px); box-shadow: var(--shadow-md); } /* Segmented date-range control */ .segmented { display: inline-flex; padding: 3px; background: var(--cream-200); border: 1px solid var(--line); border-radius: var(--r-xs); gap: 2px; } .segmented a { padding: 6px 11px; border-radius: 7px; font-size: 11.5px; font-weight: 600; color: var(--muted); transition: background 0.16s var(--ease), color 0.16s var(--ease); } .segmented a:hover { color: var(--ink); } .segmented a.active { background: var(--paper); color: var(--brand-700); box-shadow: var(--shadow-xs); } .status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: var(--r-pill); font-size: 10px; font-weight: 600; white-space: nowrap; } .status-pill.healthy { background: var(--success-tint); color: var(--success); } .status-pill.offline { background: var(--danger-tint); color: var(--danger); } .status-pill.neutral { background: var(--cream-300); color: var(--ink-soft); } /* 5. OVERVIEW ============================================================ */ /* Full-bleed: the panel spans everything beside the sidebar. Breathing room comes from --gutter, which grows on ultrawide instead of a centred cap. */ .content { width: 100%; max-width: none; margin: 0; padding: var(--sp-10) var(--gutter) 72px; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-6); margin-bottom: var(--sp-8); } .page-head h1 { font-size: 30px; line-height: 1.2; letter-spacing: -0.03em; margin-bottom: 6px; } .page-head p { margin: 0; color: var(--muted); font-size: 14px; } .head-tools { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; } .as-of { text-align: right; line-height: 1.4; } .as-of span { display: block; font-weight: 600; color: var(--ink-soft); font-size: 12.5px; } .as-of small { display: block; color: var(--faint); font-size: 11px; margin-top: 2px; } /* KPI strip */ .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-6); } .kpi-card { position: relative; display: block; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4); box-shadow: var(--shadow-sm); color: inherit; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease); } .kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--brand) 28%, var(--line)); } .kpi-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* Affordance that the card opens its own page. */ .kpi-open { position: absolute; right: var(--sp-4); bottom: var(--sp-4); display: grid; place-items: center; width: 18px; height: 18px; color: var(--brand); opacity: 0; transform: translate(-3px, 3px); transition: opacity 0.18s var(--ease), transform 0.18s var(--ease); } .kpi-open svg { width: 14px; height: 14px; } .kpi-card:hover .kpi-open, .kpi-card:focus-visible .kpi-open { opacity: 1; transform: translate(0, 0); } /* Keep the footer clear of the hover arrow. */ .kpi-card .kpi-foot { padding-right: var(--sp-5); } .kpi-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; font-weight: 500; } .kpi-icon { width: 34px; height: 34px; border-radius: var(--r-xs); display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); } .kpi-icon.gold { background: var(--gold-tint); color: var(--gold); } .kpi-value { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); margin: var(--sp-3) 0 6px; } .kpi-foot { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); line-height: 1.35; } .kpi-foot .delta { flex-shrink: 0; } .kpi-foot .delta svg { width: 12px; height: 12px; } .delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; padding: 2px 6px; border-radius: var(--r-pill); } .delta.up { color: var(--success); background: var(--success-tint); } .delta.down { color: var(--danger); background: var(--danger-tint); } .delta.flat { color: var(--ink-soft); background: var(--cream-300); } /* Panels */ .panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-6); box-shadow: var(--shadow-sm); } .panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); } .panel-head h2 { font-size: 17px; font-weight: 700; } .panel-head .sub { font-size: 11px; color: var(--faint); font-weight: 500; } .grid-2 { display: grid; grid-template-columns: 1.62fr 1fr; gap: var(--sp-4); margin-bottom: var(--sp-6); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-6); } /* Grid items default to min-width:auto, which lets wide children (charts, tables, long strings) blow the track out and scroll the whole page. */ .grid-2 > *, .grid-3 > *, .bottom-grid > *, .insight-grid > *, .kpi-grid > *, .platform-grid > *, .stat-cards > *, .site-kpis > *, .compare-kpis > *, .b2b-kpis > *, .ops-grid > * { min-width: 0; } .chart-wrap { position: relative; height: 260px; } .chart-wrap.short { height: 210px; } /* Concentration / decision panel */ .decision { display: grid; grid-template-columns: 128px 1fr; gap: var(--sp-5); align-items: center; } .ring { --pct: 0; width: 124px; height: 124px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--brand) calc(var(--pct) * 1%), var(--cream-300) 0); position: relative; } .ring::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--paper); } .ring span { position: relative; text-align: center; } .ring b { display: block; font: 700 24px var(--font-display); color: var(--ink); } .ring small { font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; } .decision-copy p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); } .decision-copy b { color: var(--ink); } .decision-copy small { font-size: 11.5px; color: var(--muted); line-height: 1.5; } .mini-stats { margin-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); } .mini-stat { display: flex; justify-content: space-between; align-items: center; padding-top: var(--sp-3); border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); } .mini-stat b { font-family: var(--font-display); color: var(--ink); font-size: 14px; } /* Section header */ .section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--sp-4); } .section-head h2 { font-size: 18px; font-weight: 700; } .section-head a { font-size: 12px; font-weight: 600; color: var(--brand); display: inline-flex; align-items: center; gap: 5px; } /* Platform cards */ .platform-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-8); } .platform-card { --accent: var(--brand); position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-5); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .platform-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent); } .platform-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .platform-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); } .platform-monogram { width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 13%, white); color: color-mix(in srgb, var(--accent) 78%, #342c22); font: 700 12px var(--font-display); } .platform-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 2px; } .platform-card .aud { font-size: 11px; color: var(--muted); margin: 0; } .platform-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin: var(--sp-5) 0 var(--sp-4); } .platform-metrics div strong { display: block; font: 700 16px var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; } .platform-metrics div span { display: block; font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; } .spark { height: 34px; display: flex; align-items: flex-end; gap: 3px; } .spark i { flex: 1; min-width: 2px; border-radius: 3px 3px 1px 1px; background: color-mix(in srgb, var(--accent) 42%, white); transition: height 0.3s var(--ease); } .unavailable-msg { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-5); padding: var(--sp-3); border-radius: var(--r-xs); background: var(--danger-tint); color: var(--danger); font-size: 11.5px; } /* Bottom grid: ranking + alerts */ .bottom-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--sp-4); } .rank-row { display: grid; grid-template-columns: 26px 1fr 92px 76px; gap: var(--sp-3); align-items: center; padding: 11px 0; border-top: 1px solid var(--line); } .rank-row:first-of-type { border-top: 0; } .rank-num { font: 700 11px var(--font-display); color: var(--faint); } .rank-name { font-size: 12.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rank-bar { height: 6px; background: var(--cream-300); border-radius: var(--r-pill); overflow: hidden; } .rank-bar i { display: block; height: 100%; border-radius: var(--r-pill); } .rank-value { text-align: right; font: 600 12px var(--font-display); color: var(--ink-soft); } .alert-row { display: flex; gap: var(--sp-3); padding: 13px 0; border-top: 1px solid var(--line); } .alert-row:first-of-type { border-top: 0; } .alert-row svg { width: 17px; flex-shrink: 0; margin-top: 1px; } .alert-row.warning svg { color: var(--warning); } .alert-row.critical svg { color: var(--danger); } .alert-row b { display: block; font-size: 12.5px; color: var(--ink); } .alert-row span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; } .empty-good { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-4); border-radius: var(--r-sm); background: var(--success-tint); color: var(--success); } .empty-good b { display: block; font-size: 13px; } .empty-good span { display: block; font-size: 11px; color: color-mix(in srgb, var(--success) 70%, var(--ink-soft)); margin-top: 2px; } .count-badge { padding: 3px 9px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; background: var(--gold-tint); color: var(--gold); } /* 5b. KPI DRILL-DOWN PAGES =============================================== */ .metric-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-8); flex-wrap: wrap; padding: var(--sp-6); margin-bottom: var(--sp-6); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); } .metric-hero-main { display: flex; align-items: flex-start; gap: var(--sp-4); min-width: 0; flex: 1 1 340px; } .metric-hero-main .kpi-icon { width: 44px; height: 44px; flex-shrink: 0; } .metric-hero-main .kpi-icon svg { width: 21px; } .metric-hero-value { font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 44px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; color: var(--ink); margin: 4px 0 6px; } .metric-hero-blurb { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 46rem; } .metric-hero-facts { display: grid; grid-template-columns: repeat(2, minmax(140px, auto)); gap: var(--sp-4) var(--sp-6); margin: 0; flex-shrink: 0; } .metric-hero-facts dt { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); } .metric-hero-facts dd { margin: 3px 0 0; font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--ink); } .metric-hero-cta { grid-column: 1 / -1; align-self: end; } .metric-hero-cta .soft-btn { width: 100%; justify-content: center; } .metric-source { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-soft); } .metric-bar-cell { width: 22%; min-width: 110px; } .metric-records-link { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--brand); white-space: nowrap; } .metric-records-link svg { width: 13px; height: 13px; } .metric-records-link:hover { color: var(--brand-700); text-decoration: underline; } .funnel-new { margin-left: 6px; font-family: var(--font-body); font-size: 10.5px; font-weight: 500; color: var(--muted); } /* Quick hop between KPIs without returning to the board. */ .metric-jump { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--sp-3); } .metric-jump a { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 12.5px; color: var(--ink-soft); transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.18s var(--ease); } .metric-jump a:hover { border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); box-shadow: var(--shadow-xs); transform: translateY(-1px); } .metric-jump a svg { width: 15px; flex-shrink: 0; color: var(--muted); } .metric-jump a span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .metric-jump a b { font-family: var(--font-display); font-size: 12.5px; color: var(--ink); white-space: nowrap; } /* 6. PLATFORM PAGES ====================================================== */ .site-hero { --accent: var(--brand); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); padding-bottom: var(--sp-6); margin-bottom: var(--sp-6); border-bottom: 1px solid var(--line); } .site-title-row { display: flex; align-items: center; gap: var(--sp-4); } .big-monogram { width: 54px; height: 54px; border-radius: var(--r-md); display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 13%, white); color: color-mix(in srgb, var(--accent) 78%, #342c22); font: 700 15px var(--font-display); } .site-hero h1 { font-size: 27px; } .site-hero .aud { margin: 4px 0 0; color: var(--muted); font-size: 13px; } .site-hero-actions { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; } .site-hero-compact { padding-bottom: var(--sp-4); margin-bottom: var(--sp-5); } .site-hero-compact .big-monogram { width: 42px; height: 42px; font-size: 12px; } .site-hero-compact .aud { margin: 0; } /* Chat route: fill the viewport beside the sidebar */ .main.is-chat { display: flex; flex-direction: column; height: 100vh; overflow: hidden; } .main.is-chat .topbar { flex-shrink: 0; } .content-chat { flex: 1; min-height: 0; padding: 0 !important; display: flex; flex-direction: column; } .program-blurb { margin: calc(var(--sp-4) * -1) 0 var(--sp-6); max-width: 52rem; color: var(--ink-soft); font-size: 14px; line-height: 1.55; } .program-kpis { margin-bottom: var(--sp-8); } /* Early-stage notice for platforms whose modules are still being built out */ .early-banner { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); margin-bottom: var(--sp-6); background: var(--cream-100); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-xs); } .early-banner .eb-icon { width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--r-xs); display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); } .early-banner b { display: block; font-size: 13px; color: var(--ink); } .early-banner > div span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; } /* Shared KPI card row — one full-width line of equal cards, same language as the overview KPI strip. Views pass `--cards-lg` (their own card count, balanced to 4–5 per line) so a row never trails a lone orphan card. */ .stat-cards, .site-kpis, .compare-kpis, .b2b-kpis { display: grid; grid-template-columns: repeat(var(--cards-lg, 4), minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-6); } .stat-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--sp-4); box-shadow: var(--shadow-xs); } .stat-card .label { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .stat-value { font: 700 21px var(--font-display); color: var(--ink); margin: 7px 0 3px; } .stat-card .sub { font-size: 11px; color: var(--faint); } .positive { color: var(--success) !important; } .negative { color: var(--danger) !important; } /* Insight highlight chips */ .highlight-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-6); } .highlight-chip { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-xs); } .highlight-chip .hc-icon { width: 34px; height: 34px; border-radius: var(--r-xs); display: grid; place-items: center; background: var(--gold-tint); color: var(--gold); } .highlight-chip b { display: block; font: 700 18px var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; } .highlight-chip span { font-size: 11px; color: var(--muted); } .insight-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-6); } .insight-grid .full { grid-column: 1 / -1; } .ranking-list { display: flex; flex-direction: column; } .meter-row .meter-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-soft); } .meter { height: 8px; border-radius: var(--r-pill); background: var(--cream-300); margin: 9px 0 var(--sp-5); overflow: hidden; } .meter i { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--brand), var(--brand-600)); } .ops-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); } .ops-grid > div { border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--sp-4); } .ops-grid span { display: block; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; } .ops-grid strong { display: block; font: 700 18px var(--font-display); color: var(--ink); margin: 6px 0 3px; font-variant-numeric: tabular-nums; } .ops-grid small { font-size: 10.5px; color: var(--faint); } .system-error { display: flex; gap: var(--sp-5); align-items: center; padding: var(--sp-8); background: var(--paper); border: 1px solid var(--danger-tint); border-radius: var(--r-md); box-shadow: var(--shadow-sm); } .system-error > svg { width: 42px; height: 42px; color: var(--danger); flex-shrink: 0; } .system-error h2 { font-size: 19px; } .system-error p { margin: 6px 0 0; color: var(--muted); } /* Comparison scorecard */ .matrix-panel { padding: 0; overflow: hidden; } .matrix-panel .panel-head { padding: var(--sp-6) var(--sp-6) 0; } /* Shared scroll behaviour for every table container. Scrolling happens inside the card, never on the page. */ .table-scroll, .data-table-wrap, .b2b-table-wrap { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .table-scroll::-webkit-scrollbar, .data-table-wrap::-webkit-scrollbar, .b2b-table-wrap::-webkit-scrollbar, .entity-tabs::-webkit-scrollbar { height: 8px; } .table-scroll::-webkit-scrollbar-thumb, .data-table-wrap::-webkit-scrollbar-thumb, .b2b-table-wrap::-webkit-scrollbar-thumb, .entity-tabs::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-pill); } .table-scroll::-webkit-scrollbar-track, .data-table-wrap::-webkit-scrollbar-track, .b2b-table-wrap::-webkit-scrollbar-track, .entity-tabs::-webkit-scrollbar-track { background: transparent; } .matrix-table { width: 100%; min-width: 960px; border-collapse: collapse; } .matrix-table th { background: var(--cream-100); text-transform: uppercase; letter-spacing: 0.07em; font-size: 9px; font-weight: 700; color: var(--muted); text-align: right; padding: var(--sp-3); } .matrix-table th:first-child, .matrix-table td:first-child { text-align: left; } .matrix-table td { padding: 13px var(--sp-3); border-top: 1px solid var(--line); text-align: right; font-size: 12px; color: var(--ink-soft); } .matrix-table td:first-child a { display: flex; align-items: center; gap: var(--sp-2); color: var(--ink); font-weight: 600; } .matrix-table tbody tr:hover td { background: var(--cream-050); } /* Partnership / B2B */ .b2b-section { margin: var(--sp-8) 0; } .b2b-note { margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); font-size: 12px; line-height: 1.45; color: var(--ink-soft); background: var(--cream-100); border: 1px solid var(--line); border-radius: var(--r-xs); } .b2b-kpis { margin-bottom: var(--sp-4); } .b2b-table-panel { margin-top: var(--sp-2); } .b2b-table-wrap { overflow-x: auto; } .b2b-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .b2b-table th, .b2b-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; } .b2b-table th { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .b2b-table th.num, .b2b-table td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-display); } .b2b-school-name { font-weight: 600; color: var(--ink); } .b2b-flag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--r-pill); font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: var(--brand-tint); color: var(--brand-700); } .b2b-prefix { font-size: 11px; color: var(--ink-soft); background: var(--cream-200); padding: 2px 6px; border-radius: 4px; } /* 7. DATA TABLES ========================================================= */ .data-section { margin-top: var(--sp-8); } .entity-tabs { display: flex; gap: 4px; margin-bottom: var(--sp-4); overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; padding-bottom: 2px; } .entity-tab { padding: 8px 14px; border: 1px solid transparent; background: transparent; border-radius: var(--r-xs); color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background 0.16s var(--ease), color 0.16s var(--ease); } .entity-tab:hover { color: var(--ink); background: var(--cream-200); } .entity-tab.active { background: var(--paper); border-color: var(--line-strong); color: var(--brand-700); box-shadow: var(--shadow-xs); } .smart-table { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); } .table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); flex-wrap: wrap; } .search-box { position: relative; flex: 1; min-width: 220px; max-width: 420px; } .search-box svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; color: var(--faint); } .search-box input { width: 100%; height: 38px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); background: var(--cream-050); padding: 0 14px 0 36px; font-size: 12.5px; outline: none; transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease), background 0.16s var(--ease); } .search-box input:focus { border-color: var(--brand); background: var(--paper); box-shadow: 0 0 0 3px var(--brand-tint); } .toolbar-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } .toolbar-actions input[type="date"], .toolbar-actions select { height: 36px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); background: var(--paper); color: var(--ink-soft); padding: 0 10px; font-size: 11.5px; cursor: pointer; } .date-sep { color: var(--faint); font-size: 11px; } .loading-line { height: 2px; background: linear-gradient(90deg, transparent, var(--brand), transparent); background-size: 200% 100%; animation: slide 1.1s linear infinite; } @keyframes slide { to { background-position: -200% 0; } } .data-table { width: 100%; min-width: 720px; border-collapse: collapse; } .data-table th { position: sticky; top: 0; background: var(--cream-100); text-align: left; text-transform: uppercase; letter-spacing: 0.06em; font-size: 9px; font-weight: 700; color: var(--muted); padding: 11px 14px; border-bottom: 1px solid var(--line); cursor: pointer; white-space: nowrap; user-select: none; } .data-table th:hover { color: var(--brand); } .data-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--ink-soft); max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .data-table tbody tr:last-child td { border-bottom: 0; } .data-table tbody tr:hover td { background: var(--cream-050); } .data-table.dense td { padding-top: 7px; padding-bottom: 7px; } .cell-muted { color: var(--faint); } /* Below desktop the identity column pins so a horizontally scrolled row still says what it belongs to. Sticky cells need opaque backgrounds. */ @media (max-width: 1100px) { .data-table th:first-child, .data-table td:first-child, .matrix-table th:first-child, .matrix-table td:first-child, .b2b-table th:first-child, .b2b-table td:first-child { position: sticky; left: 0; z-index: 2; max-width: 168px; background: var(--paper); box-shadow: 1px 0 0 var(--line); } .data-table th:first-child, .matrix-table th:first-child, .b2b-table th:first-child { z-index: 3; background: var(--cream-100); } .data-table tbody tr:hover td:first-child, .matrix-table tbody tr:hover td:first-child { background: var(--cream-050); } } .table-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); color: var(--muted); font-size: 11.5px; flex-wrap: wrap; } .pagination { display: flex; align-items: center; gap: var(--sp-2); } .pagination button { width: 32px; height: 30px; border: 1px solid var(--line-strong); background: var(--paper); border-radius: var(--r-xs); display: grid; place-items: center; color: var(--ink-soft); cursor: pointer; transition: background 0.16s var(--ease); } .pagination button:hover:not(:disabled) { background: var(--cream-200); } .pagination button:disabled { opacity: 0.4; cursor: not-allowed; } .table-state { padding: 56px var(--sp-6); text-align: center; color: var(--muted); } .table-state svg { width: 28px; height: 28px; margin-bottom: var(--sp-2); color: var(--faint); } .table-state small { display: block; margin-top: 6px; font-size: 11px; color: var(--faint); } .explorer-controls { display: flex; gap: var(--sp-4); margin-bottom: var(--sp-4); flex-wrap: wrap; } .explorer-controls label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .explorer-controls select { display: block; margin-top: 6px; height: 40px; min-width: 230px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); background: var(--paper); color: var(--ink); padding: 0 14px; font-size: 12.5px; } /* 8. LOGIN =============================================================== */ .login-body { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-6); background: radial-gradient(1200px 600px at 100% 0, var(--gold-tint), transparent 55%), radial-gradient(900px 500px at 0 100%, var(--brand-tint), transparent 50%), var(--cream-100); } .login-shell { width: min(1040px, 100%); min-height: 640px; display: grid; grid-template-columns: 1.05fr 0.95fr; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); } .login-story { position: relative; padding: var(--sp-10); background: radial-gradient(circle at 0 100%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 45%), linear-gradient(155deg, var(--brand-700), var(--brand)); color: #fff; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; } .login-story::after { content: ""; position: absolute; width: 360px; height: 360px; right: -170px; top: 90px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 0 0 60px rgba(255, 255, 255, 0.04), 0 0 0 120px rgba(255, 255, 255, 0.03); } .brand-light .brand-mark { background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 1px rgba(255, 255, 255, 0.3); } /* Logo sits directly above the eyebrow, so the whole block reads as one unit while the secure/platforms strip stays pinned to the bottom of the panel. */ .login-story-lead { position: relative; z-index: 1; margin: auto 0; } .login-story-lead .brand { display: block; flex: none; padding: 0; margin-bottom: 5px; } /* 2.2x the previous mark: 32px of artwork became ~70px, padding scaled to match. */ .brand-logo-login { height: 106px; max-width: 462px; padding: 18px 26px; background: #fff; border-radius: var(--r-sm); box-shadow: var(--shadow-sm); } .brand-light, .brand-light b { color: #fff; } .login-story .eyebrow { color: color-mix(in srgb, var(--gold) 40%, #fff); } .login-story h1 { position: relative; z-index: 1; color: #fff; font-size: 44px; line-height: 1.1; letter-spacing: -0.035em; margin-bottom: var(--sp-4); } .login-copy { max-width: 360px; color: rgba(255, 255, 255, 0.82); font-size: 14px; line-height: 1.7; } .login-foot { display: flex; justify-content: space-between; align-items: center; color: rgba(255, 255, 255, 0.66); font-size: 11px; } .login-foot span:first-child { display: flex; align-items: center; gap: 7px; } .login-foot i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); } .login-form-wrap { display: grid; place-items: center; padding: var(--sp-10); } .login-form { width: 100%; max-width: 330px; } .login-form h2 { font-size: 25px; letter-spacing: -0.03em; margin-bottom: 8px; } .login-form .muted { color: var(--muted); font-size: 13px; margin: 0 0 var(--sp-6); } .login-form label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-bottom: var(--sp-4); } .login-form input { display: block; width: 100%; height: 46px; margin-top: 7px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--cream-050); outline: none; transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease), background 0.16s var(--ease); } .login-form input:focus { border-color: var(--brand); background: var(--paper); box-shadow: 0 0 0 3px var(--brand-tint); } .login-error { margin: var(--sp-4) 0; padding: 11px 13px; border-radius: var(--r-xs); background: var(--danger-tint); border: 1px solid color-mix(in srgb, var(--danger) 22%, white); color: var(--danger); font-size: 12px; } .security-note { text-align: center; color: var(--faint); font-size: 10.5px; margin-top: var(--sp-4); } .mobile-brand { display: none; align-items: center; gap: var(--sp-3); font: 700 17px var(--font-display); margin-bottom: var(--sp-8); } /* 9. RESPONSIVE ========================================================== */ /* Ultrawide: widen the gutter rather than capping content, so there are no dead side margins but the edges still breathe. */ @media (min-width: 1800px) { :root { --gutter: var(--sp-10); } } @media (min-width: 2400px) { :root { --gutter: 64px; } } @media (max-width: 1240px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } .platform-grid { grid-template-columns: repeat(2, 1fr); } /* Below the desktop band the fixed column count would squeeze the cards, so pack as many as fit instead. auto-fit collapses the unused tracks, which keeps short rows full-width rather than left-hugging. */ .stat-cards, .site-kpis, .compare-kpis, .b2b-kpis { grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); } } /* ---- Phones / small tablets: sidebar becomes an overlay drawer ---------- */ @media (max-width: 960px) { :root, html.sidebar-collapsed { --sidebar-w: 0px; } .sidebar { width: min(280px, 84vw); padding: var(--sp-5) var(--sp-4) var(--sp-4); transform: translateX(-100%); /* Solid, not translucent — content must never bleed through. */ background: var(--cream-050); box-shadow: none; } .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); } /* :not([hidden]) so the attribute still wins when the drawer is closed */ .nav-scrim:not([hidden]) { display: block; } .rail-close { display: grid; } .collapse-btn { display: none; } .menu-btn { display: grid; } .main { margin-left: 0; } .topbar { padding: 8px var(--sp-5); flex-wrap: wrap; align-items: center; gap: var(--sp-2); } .top-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; padding-left: 42px; } .page-title { font-size: 15px; } .page-subtitle { font-size: 11px; } .content { padding: var(--sp-6) var(--sp-5) 56px; } .main.is-chat .top-actions { padding-left: 52px; } /* Touch targets */ .menu-btn, .icon-btn { width: 40px; height: 40px; } .topbar .menu-btn, .topbar .icon-btn { width: 34px; height: 34px; } .side-nav a { height: 46px; min-height: 46px; } .side-nav a.nav-quicklink { height: 42px; min-height: 42px; } .nav-sub-toggle { width: 40px; height: 46px; flex-shrink: 0; } .nav-group-toggle { min-height: 40px; padding-top: var(--sp-3); padding-bottom: var(--sp-3); } .sidebar-foot { grid-template-columns: 36px 1fr 40px; } .sidebar-foot a { min-width: 40px; min-height: 40px; } .grid-2, .grid-3, .bottom-grid, .insight-grid { grid-template-columns: 1fr; } .login-shell { grid-template-columns: 1fr; min-height: auto; } .login-story { display: none; } .mobile-brand { display: flex; } .login-form-wrap { padding: var(--sp-10) var(--sp-6); } } @media (max-width: 620px) { .page-head { flex-direction: column; align-items: flex-start; gap: var(--sp-4); } .page-head h1 { font-size: 24px; } .head-tools { flex-wrap: wrap; } .as-of { text-align: left; } /* Stacked KPIs */ .kpi-grid, .platform-grid, .stat-cards, .site-kpis, .compare-kpis, .b2b-kpis { grid-template-columns: 1fr; } .metric-hero { padding: var(--sp-5); gap: var(--sp-5); } .metric-hero-facts { grid-template-columns: 1fr 1fr; width: 100%; } .decision { grid-template-columns: 100px 1fr; } .ring { width: 98px; height: 98px; } .ops-grid { grid-template-columns: 1fr; } .content { padding: var(--sp-5) var(--sp-4) 48px; } .topbar { padding: 8px var(--sp-4); } .top-actions { padding-left: 38px; } .top-lead { gap: var(--sp-2); } .live-indicator span { display: none; } .site-hero { flex-direction: column; align-items: flex-start; } .site-hero-actions { flex-wrap: wrap; } .highlight-row > * { flex: 1 1 100%; } .explorer-controls { gap: var(--sp-3); } .explorer-controls > div { flex: 1 1 100%; } .explorer-controls select { min-width: 0; width: 100%; height: 44px; } /* Table chrome: stack toolbar rows, keep controls thumb-sized */ .table-toolbar { flex-direction: column; align-items: stretch; } .search-box { max-width: none; min-width: 0; } .search-box input { height: 42px; } .toolbar-actions > * { flex: 1 1 auto; } .toolbar-actions input[type="date"], .toolbar-actions select { height: 40px; min-width: 0; } .toolbar-actions .soft-btn { min-height: 40px; justify-content: center; } .date-sep { flex: 0 0 auto; align-self: center; } .table-footer { justify-content: center; gap: var(--sp-2); } .pagination button { width: 38px; height: 34px; } .data-table td { max-width: 200px; } .login-body { padding: 0; } .login-shell { border-radius: 0; min-height: 100vh; border: 0; } } @media (prefers-reduced-motion: reduce) { .sidebar, .main, .nav-scrim, .rail-tip, .collapse-btn svg { transition: none; } } /* -------------------------------------------------------------------------- User detail drawer + FK label cells (Data Explorer enrichment) -------------------------------------------------------------------------- */ .cell-user-link { appearance: none; border: 0; background: none; padding: 0; margin: 0; color: var(--brand); font: inherit; font-weight: 600; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--brand) 35%, transparent); text-underline-offset: 2px; } .cell-user-link:hover { color: var(--ink); text-decoration-color: var(--ink); } .cell-label { display: inline-flex; flex-direction: column; gap: 1px; line-height: 1.25; } .cell-label .cell-id { color: var(--faint); font-size: 10px; font-weight: 500; } .user-drawer { position: fixed; inset: 0; z-index: 80; display: grid; } .user-drawer[hidden] { display: none !important; } .user-drawer-backdrop { position: absolute; inset: 0; background: rgba(42, 38, 32, 0.38); backdrop-filter: blur(2px); } .user-drawer-panel { position: absolute; top: 0; right: 0; width: min(420px, 100%); height: 100%; background: var(--paper); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; animation: drawerIn 0.22s var(--ease); } @keyframes drawerIn { from { transform: translateX(18px); opacity: 0.6; } to { transform: translateX(0); opacity: 1; } } .user-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-5) var(--sp-5) var(--sp-4); border-bottom: 1px solid var(--line); } .user-drawer-head h2 { margin: 4px 0 0; font-size: 1.25rem; line-height: 1.25; color: var(--ink); } .user-drawer-sub { margin: 6px 0 0; color: var(--muted); font-size: 12px; } .user-drawer-body { padding: var(--sp-5); overflow: auto; flex: 1; } .user-drawer-fields { display: grid; gap: 14px; margin: 0; } .user-drawer-fields > div { display: grid; gap: 3px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .user-drawer-fields dt { font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); font-weight: 600; } .user-drawer-fields dd { margin: 0; color: var(--ink-soft); font-size: 13.5px; word-break: break-word; } body.user-drawer-open { overflow: hidden; } /* 10. LEADS (platform pages) ============================================= */ /* Cards reuse `.entity-tab` behaviour, so every rule here has to out-specify the tab chrome it is layered on top of. */ .leads-section { margin-bottom: var(--sp-6); } .leads-section .section-head .sub { font-size: 12px; color: var(--muted); } .leads-section .section-head .sub b { font-family: var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; } .entity-tabs.leads-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-2); overflow: visible; padding-bottom: 0; } .entity-tab.lead-card { --accent: var(--brand); position: relative; display: flex; flex-direction: column; gap: 2px; padding: var(--sp-4); overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-xs); color: var(--ink); text-align: left; white-space: normal; text-decoration: none; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease); } .entity-tab.lead-card:hover { transform: translateY(-2px); background: var(--paper); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); } .entity-tab.lead-card.active { border-color: color-mix(in srgb, var(--accent) 52%, white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); } .entity-tab.lead-card.is-primary { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, white), var(--paper) 62%); } .entity-tab.lead-card.is-primary::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent); } .lead-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); } .lead-label { font-size: 11px; font-weight: 600; line-height: 1.35; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; } .lead-icon { width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--r-xs); display: grid; place-items: center; background: var(--cream-100); color: var(--muted); } .lead-card.is-primary .lead-icon { background: color-mix(in srgb, var(--accent) 13%, white); color: color-mix(in srgb, var(--accent) 78%, #342c22); } /* Bottom-aligned so a two-line label (e.g. "Conclave registrations") doesn't drop that card's number out of line with the rest of the row. */ .lead-value { font: 700 21px var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; margin-top: auto; padding-top: var(--sp-3); } .lead-card.is-primary .lead-value { font-size: 26px; } .lead-foot { font-size: 11px; font-weight: 500; color: var(--faint); } .lead-foot b { font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .leads-hint { font-size: 11px; color: var(--faint); } @media (max-width: 620px) { .entity-tabs.leads-grid { grid-template-columns: repeat(2, 1fr); } .lead-card.is-primary .lead-value { font-size: 22px; } }