/* GAIN — shared theme All colors flow from CSS custom-property tokens. Structure (the rest of this file) references tokens only; no hard-coded brand colors below the palette blocks. Switch palette/mode by setting `data-palette` + `data-mode` on . Default (no attributes) = Classic Light. */ /* ============================================================ TOKENS — Classic Light (default) ============================================================ */ :root { /* typography + layout (palette-independent) */ --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --radius: 8px; --radius-sm: 4px; --max-w: 1200px; /* surfaces + ink */ --bg: #F7F8FA; --surface: #FFFFFF; --surface-alt: #F2F4F8; --ink: #1A2434; --ink-soft: #4A5468; --muted: #7A8599; --border: #D8DEE8; --border-soft: #EAEEF4; /* brand/action */ --h-color: #1F3864; --primary: #2E75B6; --primary-hover: #2663A0; --on-primary: #FFFFFF; --accent: #4FB3D9; --accent-soft: #D5E8F0; --link: #2E75B6; /* header */ --header-bg: #1F3864; --header-ink: #FFFFFF; --header-ink-soft: #CBD5E8; --header-ink-active-bg: rgba(255, 255, 255, 0.15); --header-ink-hover-bg: rgba(255, 255, 255, 0.08); --header-accent: #2E75B6; --header-border: rgba(255, 255, 255, 0.16); /* gradients */ --auth-grad-from: #1F3864; --auth-grad-to: #2E75B6; --hero-grad-from: #FFFFFF; --hero-grad-to: #D5E8F0; /* effects */ --shadow: 0 1px 3px rgba(20, 35, 71, 0.08), 0 4px 12px rgba(20, 35, 71, 0.04); --shadow-lg: 0 4px 12px rgba(20, 35, 71, 0.12), 0 12px 32px rgba(20, 35, 71, 0.08); --focus-ring: 0 0 0 3px rgba(46, 117, 182, 0.15); --modal-backdrop: rgba(20, 35, 71, 0.55); /* risk semantics (palette-sensitive — brighter in dark) */ --risk-prohibited: #7A1F1F; --risk-high: #C43131; --risk-high-hover: #A02020; --risk-medium: #D9921F; --risk-low: #2E8B57; /* status pills (semantic, kept fixed across palettes) */ --status-triage-bg: #F4D58D; --status-triage-ink: #6B4A00; /* NIST AI RMF function colors (semantic, fixed across palettes) */ --nist-govern: #FFD166; --nist-map: #06D6A0; --nist-measure: #FF6B6B; --nist-manage: #74B9FF; --nist-ink: #0d1b4b; --nist-foundation-from: #1F3864; --nist-foundation-to: #2E75B6; } /* ============================================================ PALETTE OVERRIDES Each block declares only tokens that differ from Classic Light. ============================================================ */ /* ---------- Classic Dark ---------- */ [data-palette="classic"][data-mode="dark"] { --bg:#0E1525; --surface:#17203A; --surface-alt:#1E2944; --ink:#E7ECF5; --ink-soft:#B4BED0; --muted:#7D8799; --border:#2A3551; --border-soft:#212B45; --h-color:#E7ECF5; --primary:#4FB3D9; --primary-hover:#6FC2DF; --on-primary:#0E1525; --accent:#7FCDE8; --accent-soft:#24375C; --link:#7FCDE8; --header-bg:#0A1020; --header-ink:#FFFFFF; --header-ink-soft:#9FB0CC; --header-ink-active-bg:rgba(127,205,232,.18); --header-ink-hover-bg:rgba(255,255,255,.08); --header-accent:#4FB3D9; --header-border:rgba(255,255,255,0.10); --auth-grad-from:#0A1020; --auth-grad-to:#1F3864; --hero-grad-from:#17203A; --hero-grad-to:#24375C; --shadow:0 1px 3px rgba(0,0,0,.40), 0 4px 12px rgba(0,0,0,.30); --shadow-lg:0 4px 12px rgba(0,0,0,.45), 0 12px 32px rgba(0,0,0,.40); --focus-ring:0 0 0 3px rgba(127,205,232,.28); --modal-backdrop:rgba(0,0,0,.70); --risk-prohibited:#B93535; --risk-high:#E55454; --risk-high-hover:#CC4444; --risk-medium:#E8A94A; --risk-low:#4FC17B; --nist-foundation-from:#0A1020; --nist-foundation-to:#1F3864; } /* ---------- Slate Light ---------- */ [data-palette="slate"][data-mode="light"] { --bg:#F4F6F9; --surface:#FFFFFF; --surface-alt:#EEF1F5; --ink:#1E2632; --ink-soft:#4B5565; --muted:#7E8794; --border:#D4DAE2; --border-soft:#E8ECF1; --h-color:#2C3E50; --primary:#4E6B8A; --primary-hover:#3E5773; --on-primary:#FFFFFF; --accent:#6B8AA9; --accent-soft:#DEE6EF; --link:#4E6B8A; --header-bg:#2C3E50; --header-ink:#FFFFFF; --header-ink-soft:#BFC9D4; --header-ink-active-bg:rgba(255,255,255,.12); --header-ink-hover-bg:rgba(255,255,255,.08); --header-accent:#6B8AA9; --header-border:rgba(255,255,255,0.14); --auth-grad-from:#2C3E50; --auth-grad-to:#4E6B8A; --hero-grad-from:#FFFFFF; --hero-grad-to:#DEE6EF; --focus-ring:0 0 0 3px rgba(78,107,138,.18); --modal-backdrop:rgba(30,38,50,.55); --risk-prohibited:#742A2A; --risk-high:#B13A3A; --risk-high-hover:#8E2D2D; --risk-medium:#C48A2B; --risk-low:#3F8769; --nist-foundation-from:#2C3E50; --nist-foundation-to:#4E6B8A; } /* ---------- Slate Dark ---------- */ [data-palette="slate"][data-mode="dark"] { --bg:#161A20; --surface:#1F252D; --surface-alt:#262D37; --ink:#E3E7EC; --ink-soft:#AFB6C0; --muted:#7B8390; --border:#2E3642; --border-soft:#252C36; --h-color:#E3E7EC; --primary:#8CA4BE; --primary-hover:#A2B7CD; --on-primary:#161A20; --accent:#A3BAD2; --accent-soft:#2B3542; --link:#A3BAD2; --header-bg:#11151A; --header-ink:#FFFFFF; --header-ink-soft:#9BA4B0; --header-ink-active-bg:rgba(255,255,255,.10); --header-ink-hover-bg:rgba(255,255,255,.06); --header-accent:#8CA4BE; --header-border:rgba(255,255,255,0.08); --auth-grad-from:#11151A; --auth-grad-to:#2C3E50; --hero-grad-from:#1F252D; --hero-grad-to:#2B3542; --shadow:0 1px 3px rgba(0,0,0,.40), 0 4px 12px rgba(0,0,0,.30); --shadow-lg:0 4px 12px rgba(0,0,0,.45), 0 12px 32px rgba(0,0,0,.40); --focus-ring:0 0 0 3px rgba(163,186,210,.22); --modal-backdrop:rgba(0,0,0,.70); --risk-prohibited:#A24040; --risk-high:#D16060; --risk-high-hover:#B54D4D; --risk-medium:#D49F4B; --risk-low:#5DA88B; --nist-foundation-from:#11151A; --nist-foundation-to:#2C3E50; } /* ---------- Ocean Light ---------- */ [data-palette="ocean"][data-mode="light"] { --bg:#F3F9FB; --surface:#FFFFFF; --surface-alt:#E8F2F6; --ink:#0F2937; --ink-soft:#3F5B6C; --muted:#6F8594; --border:#C7DCE3; --border-soft:#DCE9EE; --h-color:#0C3D5A; --primary:#0E7490; --primary-hover:#0B5C72; --on-primary:#FFFFFF; --accent:#14B8A6; --accent-soft:#CFF2EC; --link:#0E7490; --header-bg:#0C3D5A; --header-ink:#FFFFFF; --header-ink-soft:#B3CCD8; --header-ink-active-bg:rgba(255,255,255,.14); --header-ink-hover-bg:rgba(255,255,255,.08); --header-accent:#14B8A6; --header-border:rgba(255,255,255,0.14); --auth-grad-from:#0C3D5A; --auth-grad-to:#14B8A6; --hero-grad-from:#FFFFFF; --hero-grad-to:#CFF2EC; --focus-ring:0 0 0 3px rgba(20,184,166,.18); --modal-backdrop:rgba(12,61,90,.55); --risk-prohibited:#7A1F1F; --risk-high:#C43131; --risk-high-hover:#A02020; --risk-medium:#D9921F; --risk-low:#14B8A6; --nist-foundation-from:#0C3D5A; --nist-foundation-to:#14B8A6; } /* ---------- Ocean Dark ---------- */ [data-palette="ocean"][data-mode="dark"] { --bg:#081821; --surface:#0F2530; --surface-alt:#153141; --ink:#DCEAEE; --ink-soft:#A7BEC6; --muted:#7795A1; --border:#1E3B4B; --border-soft:#18323F; --h-color:#E4F2F5; --primary:#14B8A6; --primary-hover:#2DD4BF; --on-primary:#081821; --accent:#2DD4BF; --accent-soft:#123B3D; --link:#2DD4BF; --header-bg:#04121B; --header-ink:#FFFFFF; --header-ink-soft:#94B3BE; --header-ink-active-bg:rgba(45,212,191,.18); --header-ink-hover-bg:rgba(255,255,255,.08); --header-accent:#2DD4BF; --header-border:rgba(255,255,255,0.10); --auth-grad-from:#04121B; --auth-grad-to:#0C3D5A; --hero-grad-from:#0F2530; --hero-grad-to:#123B3D; --shadow:0 1px 3px rgba(0,0,0,.40), 0 4px 12px rgba(0,0,0,.30); --shadow-lg:0 4px 12px rgba(0,0,0,.45), 0 12px 32px rgba(0,0,0,.40); --focus-ring:0 0 0 3px rgba(45,212,191,.25); --modal-backdrop:rgba(0,0,0,.70); --risk-prohibited:#B93535; --risk-high:#E55454; --risk-high-hover:#CC4444; --risk-medium:#E8A94A; --risk-low:#2DD4BF; --nist-foundation-from:#04121B; --nist-foundation-to:#0C3D5A; } /* ---------- Forest Light ---------- */ [data-palette="forest"][data-mode="light"] { --bg:#F6F8F5; --surface:#FFFFFF; --surface-alt:#EDF2EA; --ink:#1B2A20; --ink-soft:#475A4D; --muted:#7A8A7F; --border:#D0DCCE; --border-soft:#E4ECE2; --h-color:#1F4A36; --primary:#2F6B4F; --primary-hover:#245740; --on-primary:#FFFFFF; --accent:#6FB78A; --accent-soft:#D7ECE0; --link:#2F6B4F; --header-bg:#1F4A36; --header-ink:#FFFFFF; --header-ink-soft:#BED3C7; --header-ink-active-bg:rgba(255,255,255,.14); --header-ink-hover-bg:rgba(255,255,255,.08); --header-accent:#6FB78A; --header-border:rgba(255,255,255,0.14); --auth-grad-from:#1F4A36; --auth-grad-to:#6FB78A; --hero-grad-from:#FFFFFF; --hero-grad-to:#D7ECE0; --focus-ring:0 0 0 3px rgba(47,107,79,.18); --modal-backdrop:rgba(31,74,54,.55); --risk-prohibited:#7A1F1F; --risk-high:#C43131; --risk-high-hover:#A02020; --risk-medium:#D9921F; --risk-low:#2F6B4F; --nist-foundation-from:#1F4A36; --nist-foundation-to:#6FB78A; } /* ---------- Forest Dark ---------- */ [data-palette="forest"][data-mode="dark"] { --bg:#0D1612; --surface:#16221C; --surface-alt:#1D2C25; --ink:#E1ECE4; --ink-soft:#AAB9AF; --muted:#7A8A80; --border:#24342B; --border-soft:#1D2B23; --h-color:#E1ECE4; --primary:#6FB78A; --primary-hover:#8DD3A7; --on-primary:#0D1612; --accent:#8DD3A7; --accent-soft:#1F3A2B; --link:#8DD3A7; --header-bg:#091110; --header-ink:#FFFFFF; --header-ink-soft:#9AB0A2; --header-ink-active-bg:rgba(141,211,167,.18); --header-ink-hover-bg:rgba(255,255,255,.08); --header-accent:#8DD3A7; --header-border:rgba(255,255,255,0.10); --auth-grad-from:#091110; --auth-grad-to:#1F4A36; --hero-grad-from:#16221C; --hero-grad-to:#1F3A2B; --shadow:0 1px 3px rgba(0,0,0,.40), 0 4px 12px rgba(0,0,0,.30); --shadow-lg:0 4px 12px rgba(0,0,0,.45), 0 12px 32px rgba(0,0,0,.40); --focus-ring:0 0 0 3px rgba(141,211,167,.22); --modal-backdrop:rgba(0,0,0,.70); --risk-prohibited:#B93535; --risk-high:#E55454; --risk-high-hover:#CC4444; --risk-medium:#E8A94A; --risk-low:#6FB78A; --nist-foundation-from:#091110; --nist-foundation-to:#1F4A36; } /* ---------- Royal Light ---------- */ [data-palette="royal"][data-mode="light"] { --bg:#F7F6FC; --surface:#FFFFFF; --surface-alt:#EEECF7; --ink:#1B1B30; --ink-soft:#49476A; --muted:#7A7890; --border:#D7D4E6; --border-soft:#E7E5F0; --h-color:#322C6B; --primary:#4F46E5; --primary-hover:#3F38C2; --on-primary:#FFFFFF; --accent:#8B5CF6; --accent-soft:#E4DCFA; --link:#4F46E5; --header-bg:#322C6B; --header-ink:#FFFFFF; --header-ink-soft:#C7C2E0; --header-ink-active-bg:rgba(255,255,255,.14); --header-ink-hover-bg:rgba(255,255,255,.08); --header-accent:#8B5CF6; --header-border:rgba(255,255,255,0.14); --auth-grad-from:#322C6B; --auth-grad-to:#8B5CF6; --hero-grad-from:#FFFFFF; --hero-grad-to:#E4DCFA; --focus-ring:0 0 0 3px rgba(79,70,229,.18); --modal-backdrop:rgba(50,44,107,.55); --risk-prohibited:#7A1F1F; --risk-high:#C43131; --risk-high-hover:#A02020; --risk-medium:#D9921F; --risk-low:#2E8B57; --nist-foundation-from:#322C6B; --nist-foundation-to:#8B5CF6; } /* ---------- Royal Dark ---------- */ [data-palette="royal"][data-mode="dark"] { --bg:#0E0C1B; --surface:#181629; --surface-alt:#201D36; --ink:#EAE7F7; --ink-soft:#B2AED0; --muted:#7B7795; --border:#2A2740; --border-soft:#221F34; --h-color:#EAE7F7; --primary:#A78BFA; --primary-hover:#C4B5FD; --on-primary:#0E0C1B; --accent:#C4B5FD; --accent-soft:#2A2350; --link:#C4B5FD; --header-bg:#0A0816; --header-ink:#FFFFFF; --header-ink-soft:#A09BC1; --header-ink-active-bg:rgba(196,181,253,.18); --header-ink-hover-bg:rgba(255,255,255,.08); --header-accent:#C4B5FD; --header-border:rgba(255,255,255,0.10); --auth-grad-from:#0A0816; --auth-grad-to:#322C6B; --hero-grad-from:#181629; --hero-grad-to:#2A2350; --shadow:0 1px 3px rgba(0,0,0,.40), 0 4px 12px rgba(0,0,0,.30); --shadow-lg:0 4px 12px rgba(0,0,0,.45), 0 12px 32px rgba(0,0,0,.40); --focus-ring:0 0 0 3px rgba(196,181,253,.25); --modal-backdrop:rgba(0,0,0,.70); --risk-prohibited:#B93535; --risk-high:#E55454; --risk-high-hover:#CC4444; --risk-medium:#E8A94A; --risk-low:#4FC17B; --nist-foundation-from:#0A0816; --nist-foundation-to:#322C6B; } /* ---------- Graphite Light ---------- */ [data-palette="graphite"][data-mode="light"] { --bg:#FAFAFA; --surface:#FFFFFF; --surface-alt:#F0F0F0; --ink:#0F0F0F; --ink-soft:#404040; --muted:#7A7A7A; --border:#D9D9D9; --border-soft:#E8E8E8; --h-color:#0F0F0F; --primary:#2E75B6; --primary-hover:#2663A0; --on-primary:#FFFFFF; --accent:#2E75B6; --accent-soft:#E0ECF5; --link:#2E75B6; --header-bg:#0F0F0F; --header-ink:#FFFFFF; --header-ink-soft:#BFBFBF; --header-ink-active-bg:rgba(255,255,255,.12); --header-ink-hover-bg:rgba(255,255,255,.06); --header-accent:#2E75B6; --header-border:rgba(255,255,255,0.10); --auth-grad-from:#0F0F0F; --auth-grad-to:#2E75B6; --hero-grad-from:#FFFFFF; --hero-grad-to:#E0ECF5; --focus-ring:0 0 0 3px rgba(46,117,182,.18); --modal-backdrop:rgba(0,0,0,.55); --risk-prohibited:#7A1F1F; --risk-high:#C43131; --risk-high-hover:#A02020; --risk-medium:#D9921F; --risk-low:#2E8B57; --nist-foundation-from:#0F0F0F; --nist-foundation-to:#2E75B6; } /* ---------- Graphite Dark ---------- */ [data-palette="graphite"][data-mode="dark"] { --bg:#0B0B0B; --surface:#161616; --surface-alt:#1E1E1E; --ink:#ECECEC; --ink-soft:#B4B4B4; --muted:#7A7A7A; --border:#2A2A2A; --border-soft:#222222; --h-color:#ECECEC; --primary:#4FB3D9; --primary-hover:#7FCDE8; --on-primary:#0B0B0B; --accent:#4FB3D9; --accent-soft:#1B2A33; --link:#7FCDE8; --header-bg:#000000; --header-ink:#FFFFFF; --header-ink-soft:#A8A8A8; --header-ink-active-bg:rgba(255,255,255,.10); --header-ink-hover-bg:rgba(255,255,255,.06); --header-accent:#4FB3D9; --header-border:rgba(255,255,255,0.10); --auth-grad-from:#000000; --auth-grad-to:#4FB3D9; --hero-grad-from:#161616; --hero-grad-to:#1B2A33; --shadow:0 1px 3px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.35); --shadow-lg:0 4px 12px rgba(0,0,0,.50), 0 12px 32px rgba(0,0,0,.45); --focus-ring:0 0 0 3px rgba(79,179,217,.25); --modal-backdrop:rgba(0,0,0,.75); --risk-prohibited:#B93535; --risk-high:#E55454; --risk-high-hover:#CC4444; --risk-medium:#E8A94A; --risk-low:#4FC17B; --nist-foundation-from:#000000; --nist-foundation-to:#1B2A33; } /* ---------- High Contrast Light ---------- */ [data-palette="hc"][data-mode="light"] { --bg:#FFFFFF; --surface:#FFFFFF; --surface-alt:#F3F3F3; --ink:#000000; --ink-soft:#1A1A1A; --muted:#595959; --border:#000000; --border-soft:#BFBFBF; --h-color:#000000; --primary:#0033A0; --primary-hover:#001F66; --on-primary:#FFFFFF; --accent:#0033A0; --accent-soft:#CCDAF0; --link:#0033A0; --header-bg:#000000; --header-ink:#FFFFFF; --header-ink-soft:#E6E6E6; --header-ink-active-bg:#0033A0; --header-ink-hover-bg:rgba(255,255,255,.12); --header-accent:#0033A0; --header-border:#FFFFFF; --auth-grad-from:#000000; --auth-grad-to:#0033A0; --hero-grad-from:#FFFFFF; --hero-grad-to:#CCDAF0; --focus-ring:0 0 0 3px #FFD166; --modal-backdrop:rgba(0,0,0,.75); --risk-prohibited:#5A0000; --risk-high:#B00000; --risk-high-hover:#7A0000; --risk-medium:#8A5A00; --risk-low:#006B3C; --nist-foundation-from:#000000; --nist-foundation-to:#0033A0; } /* ---------- High Contrast Dark ---------- */ [data-palette="hc"][data-mode="dark"] { --bg:#000000; --surface:#0A0A0A; --surface-alt:#141414; --ink:#FFFFFF; --ink-soft:#E6E6E6; --muted:#A6A6A6; --border:#FFFFFF; --border-soft:#3A3A3A; --h-color:#FFFFFF; --primary:#3DA5FF; --primary-hover:#66B9FF; --on-primary:#000000; --accent:#3DA5FF; --accent-soft:#0A2740; --link:#3DA5FF; --header-bg:#000000; --header-ink:#FFFFFF; --header-ink-soft:#E6E6E6; --header-ink-active-bg:#3DA5FF; --header-ink-hover-bg:rgba(255,255,255,.12); --header-accent:#3DA5FF; --header-border:#FFFFFF; --auth-grad-from:#000000; --auth-grad-to:#0A2740; --hero-grad-from:#0A0A0A; --hero-grad-to:#0A2740; --shadow:0 1px 3px rgba(255,255,255,.10), 0 4px 12px rgba(0,0,0,.50); --shadow-lg:0 4px 12px rgba(255,255,255,.12), 0 12px 32px rgba(0,0,0,.60); --focus-ring:0 0 0 3px #FFD166; --modal-backdrop:rgba(0,0,0,.85); --risk-prohibited:#FF6B6B; --risk-high:#FF4D4D; --risk-high-hover:#E63D3D; --risk-medium:#FFC14D; --risk-low:#4FC17B; --nist-foundation-from:#000000; --nist-foundation-to:#0A2740; } /* ============================================================ STRUCTURE — references tokens only. No hard-coded brand colors. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.55; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--h-color); margin: 0 0 .5em 0; line-height: 1.25; } h1 { font-size: 1.9rem; font-weight: 700; } h2 { font-size: 1.4rem; font-weight: 700; } h3 { font-size: 1.15rem; font-weight: 600; color: var(--primary); } h4 { font-size: 1rem; font-weight: 600; } p { margin: 0 0 .8em 0; } small, .small { font-size: .85rem; color: var(--ink-soft); } /* ---------- layout ---------- */ .app-shell { min-height: 100vh; display: flex; flex-direction: column; } .site-header { background: var(--header-bg); color: var(--header-ink); border-bottom: 3px solid var(--header-accent); } .site-header-inner { max-width: var(--max-w); margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 24px; } .site-header .brand { font-weight: 700; font-size: 1.15rem; letter-spacing: 0.02em; color: var(--header-ink); } .site-header .brand .brand-dot { color: var(--accent); } .site-header nav { display: flex; gap: 4px; flex-wrap: wrap; } .site-header nav a { color: var(--header-ink-soft); padding: 8px 12px; border-radius: var(--radius-sm); font-size: .9rem; font-weight: 500; } .site-header nav a:hover { background: var(--header-ink-hover-bg); color: var(--header-ink); text-decoration: none; } .site-header nav a.active { background: var(--header-ink-active-bg); color: var(--header-ink); } .header-spacer { flex: 1; } .company-switcher { background: var(--header-ink-hover-bg); color: var(--header-ink); border: 1px solid var(--header-border); padding: 6px 10px; border-radius: var(--radius-sm); font-size: .85rem; cursor: pointer; font-family: inherit; } .company-switcher:hover { background: var(--header-ink-active-bg); } .user-menu { display: flex; align-items: center; gap: 8px; } .user-menu .user-email { font-size: .85rem; color: var(--header-ink-soft); } .user-menu button { background: transparent; color: var(--header-ink-soft); border: 1px solid var(--header-border); } .user-menu button:hover { background: var(--header-ink-hover-bg); color: var(--header-ink); } /* ---------- theme toggle (sun/moon) ---------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; background: var(--header-ink-hover-bg); color: var(--header-ink); border: 1px solid var(--header-border); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; font-family: inherit; transition: background 0.15s; } .theme-toggle:hover { background: var(--header-ink-active-bg); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: inline; } [data-mode="dark"] .theme-toggle .icon-sun { display: inline; } [data-mode="dark"] .theme-toggle .icon-moon { display: none; } main { flex: 1; max-width: var(--max-w); margin: 0 auto; padding: 32px 24px 64px; width: 100%; } .site-footer { border-top: 1px solid var(--border); padding: 20px 24px; text-align: center; color: var(--muted); font-size: .85rem; background: var(--surface); } /* ---------- auth shell (login / signup page) ---------- */ .auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; background: linear-gradient(135deg, var(--auth-grad-from) 0%, var(--auth-grad-to) 100%); } .auth-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 40px; max-width: 440px; width: 100%; } .auth-card .brand-row { text-align: center; margin-bottom: 24px; } .auth-card .brand-row .brand { color: var(--h-color); font-size: 1.8rem; font-weight: 700; letter-spacing: 0.02em; } .auth-card .brand-row .brand-dot { color: var(--primary); } .auth-card .tagline { color: var(--ink-soft); text-align: center; margin-bottom: 24px; } .auth-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 20px; } .auth-tabs button { flex: 1; background: transparent; border: 0; padding: 10px 0; font-weight: 600; color: var(--ink-soft); cursor: pointer; border-bottom: 2px solid transparent; font-family: inherit; font-size: .95rem; } .auth-tabs button.active { color: var(--h-color); border-bottom-color: var(--primary); } /* ---------- forms ---------- */ .field { display: flex; flex-direction: column; margin-bottom: 14px; } .field label { font-size: .85rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 4px; } .field .help { font-size: .8rem; color: var(--muted); margin-top: 4px; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], select, textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-family: inherit; font-size: .95rem; transition: border-color 0.15s, box-shadow 0.15s; } input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--primary); box-shadow: var(--focus-ring); } textarea { min-height: 90px; resize: vertical; } .checkbox-row, .radio-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; } .checkbox-row input, .radio-row input { width: auto; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 18px; border: 1px solid transparent; border-radius: var(--radius-sm); font-family: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; background: var(--primary); color: var(--on-primary); transition: background 0.15s, transform 0.05s; text-decoration: none; } .btn:hover { background: var(--primary-hover); text-decoration: none; color: var(--on-primary); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.55; cursor: not-allowed; } .btn-secondary { background: var(--surface); color: var(--h-color); border-color: var(--border); } .btn-secondary:hover { background: var(--surface-alt); color: var(--h-color); } .btn-ghost { background: transparent; color: var(--link); border-color: transparent; } .btn-ghost:hover { background: var(--surface-alt); color: var(--h-color); } .btn-danger { background: var(--risk-high); color: #fff; } .btn-danger:hover { background: var(--risk-high-hover); color: #fff; } .btn-block { width: 100%; } /* Google Sign-In button — white background, subtle border, dark text. */ .btn-google { background: #fff; color: #1f1f1f; border: 1px solid #dadce0; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; } .btn-google:hover { background: #f8f9fa; border-color: #c8c9cc; color: #1f1f1f; } [data-mode="dark"] .btn-google { background: #1f1f1f; color: #e8eaed; border-color: #3c4043; } [data-mode="dark"] .btn-google:hover { background: #2a2a2a; border-color: #5f6368; color: #e8eaed; } /* Divider with centered "or" for auth pages. */ .auth-divider { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } .btn-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 12px 0; } /* ---------- cards + sections ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; box-shadow: var(--shadow); } .card h2:first-child, .card h3:first-child { margin-top: 0; } .page-title { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 2px solid var(--accent-soft); } .page-title h1 { margin: 0; } .page-title .subtitle { color: var(--ink-soft); font-size: .95rem; } /* ---------- tables ---------- */ table.data { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } table.data th { background: var(--header-bg); color: var(--header-ink); text-align: left; padding: 10px 12px; font-size: .85rem; font-weight: 600; letter-spacing: 0.02em; } table.data td { padding: 10px 12px; border-top: 1px solid var(--border-soft); font-size: .9rem; vertical-align: top; } table.data tr:hover td { background: var(--surface-alt); } table.data .actions { text-align: right; white-space: nowrap; } /* ---------- risk badges ---------- */ .badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; background: var(--surface-alt); color: var(--ink-soft); border: 1px solid var(--border); } .badge-prohibited { background: var(--risk-prohibited); color: #fff; border-color: transparent; } .badge-high { background: var(--risk-high); color: #fff; border-color: transparent; } .badge-medium { background: var(--risk-medium); color: #fff; border-color: transparent; } .badge-low { background: var(--risk-low); color: #fff; border-color: transparent; } .badge-role { background: var(--accent-soft); color: var(--h-color); border-color: transparent; } /* ---------- toasts ---------- */ .toast-stack { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .toast { background: var(--ink); color: var(--surface); padding: 12px 18px; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); max-width: 360px; pointer-events: auto; font-size: .9rem; } .toast-error { background: var(--risk-high); color: #fff; } .toast-success { background: var(--risk-low); color: #fff; } .toast-info { background: var(--header-bg); color: var(--header-ink); } /* ---------- modal ---------- */ .modal-backdrop { position: fixed; inset: 0; background: var(--modal-backdrop); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; } .modal { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg); max-width: 560px; width: 100%; max-height: 90vh; overflow: auto; } .modal-header { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .modal-header h3 { margin: 0; color: var(--h-color); } .modal-close { background: transparent; border: 0; color: var(--muted); font-size: 1.5rem; cursor: pointer; line-height: 1; } .modal-body { padding: 22px; } .modal-footer { padding: 14px 22px; border-top: 1px solid var(--border); background: var(--surface-alt); display: flex; justify-content: flex-end; gap: 10px; } /* ---------- progress checklist ---------- */ .progress-list { list-style: none; padding: 0; margin: 0; } .progress-list li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); } .progress-list li:last-child { border-bottom: 0; } .progress-list .step-indicator { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-alt); color: var(--muted); font-size: .8rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 26px; border: 2px solid var(--border); } .progress-list .step.done .step-indicator { background: var(--risk-low); color: #fff; border-color: var(--risk-low); } .progress-list .step.active .step-indicator { background: var(--primary); color: var(--on-primary); border-color: var(--primary); } .progress-list .step-body { flex: 1; } .progress-list .step-title { font-weight: 600; margin-bottom: 2px; } .progress-list .step-desc { font-size: .85rem; color: var(--ink-soft); } .progress-list .step-action { margin-left: auto; } /* ---------- utilities ---------- */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 820px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } } .flex-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .flex-start { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .text-muted { color: var(--muted); } .text-right { text-align: right; } .nowrap { white-space: nowrap; } .mt-0 { margin-top: 0; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mb-0 { margin-bottom: 0; } .hidden { display: none !important; } .empty-state { padding: 40px 20px; text-align: center; color: var(--ink-soft); } .empty-state h3 { color: var(--ink-soft); } /* ---- sample data (empty-state fixtures) ---- */ /* Sample banner + SAMPLE pill + muted rows so fixture data is visually distinct from real data. Samples disappear as soon as a user adds a real entry. */ .sample-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin: 0 0 12px; background: var(--accent-soft); border: 1px dashed var(--accent); border-radius: var(--radius); font-size: .88rem; } .sample-banner-text { color: var(--ink-soft); line-height: 1.5; } .sample-pill { flex-shrink: 0; padding: 3px 10px; background: var(--accent); color: #fff; border-radius: 999px; font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } tr[data-sample="1"], li[data-sample="1"], div[data-sample-card="1"] { background-image: linear-gradient( 135deg, transparent 0, transparent 8px, rgba(127, 127, 127, .04) 8px, rgba(127, 127, 127, .04) 16px ); } tr[data-sample="1"] td { opacity: .78; } tr[data-sample="1"] td:first-child::before, div[data-sample-card="1"]::before { content: "SAMPLE"; display: inline-block; margin-right: 8px; padding: 1px 6px; background: var(--accent); color: #fff; font-size: .58rem; font-weight: 700; letter-spacing: .08em; border-radius: 3px; vertical-align: 2px; } /* Sample rows can still be read but action buttons get neutralized so they can't fail trying to save to a sample ID. */ [data-sample="1"] .btn, [data-sample="1"] .row-action { pointer-events: none; opacity: .4; } /* ---- walkthrough tour ---- */ /* Floating panel + dim backdrop. Panel pins to the bottom-right on desktop and fills the bottom edge on mobile. */ .tour-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .28); z-index: 9998; animation: tour-fade-in .2s ease-out; } .tour-panel { position: fixed; right: 24px; bottom: 24px; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; padding: 22px 24px 18px; background: var(--bg-card, #fff); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 18px 60px rgba(0, 0, 0, .28); z-index: 9999; animation: tour-slide-up .25s ease-out; font-size: .94rem; line-height: 1.55; } [data-mode="dark"] .tour-panel { background: var(--bg-card, #1c1c1f); } .tour-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .tour-step-counter { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .tour-skip { background: none; border: none; color: var(--muted); font-size: .8rem; cursor: pointer; padding: 2px 4px; text-decoration: underline; } .tour-skip:hover { color: var(--ink); } .tour-panel-title { margin: 0 0 12px; font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; } .tour-panel-body p { margin: 0 0 10px; color: var(--ink); } .tour-panel-body p:last-child { margin-bottom: 0; } .tour-panel-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); } .tour-dots { display: inline-flex; gap: 5px; align-items: center; } .tour-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); display: inline-block; } .tour-dot-active { background: var(--accent); width: 14px; border-radius: 3px; } @keyframes tour-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes tour-slide-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 720px) { .tour-panel { right: 12px; left: 12px; bottom: 12px; width: auto; padding: 18px 18px 14px; } .tour-panel-title { font-size: 1.05rem; } } .loading-row { padding: 20px; text-align: center; color: var(--muted); } .error-text { color: var(--risk-high); font-size: .85rem; margin-top: 4px; } .success-text { color: var(--risk-low); font-size: .85rem; margin-top: 4px; } /* section separator in long forms */ .section-sep { margin: 28px 0 16px; padding-top: 24px; border-top: 1px solid var(--border-soft); } .section-sep h2 { margin-bottom: 4px; } .section-sep .section-sub { color: var(--ink-soft); margin-bottom: 16px; font-size: .92rem; } /* ============================================================ SUPPLEMENT — additional classes used by page templates ============================================================ */ /* ---------- header (new layout) ---------- */ .site-header { display: flex; align-items: center; gap: 24px; padding: 12px 28px; flex-wrap: wrap; } .site-header .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--header-ink); text-decoration: none; } .site-header .brand:hover { text-decoration: none; } .brand-mark { font-weight: 800; letter-spacing: 0.06em; color: var(--on-primary); background: var(--primary); padding: 4px 10px; border-radius: var(--radius-sm); font-size: .95rem; } .brand-mark-lg { font-size: 1.4rem; padding: 6px 14px; } .brand-wordmark { color: var(--header-ink-soft); font-size: .9rem; font-weight: 500; } .brand-tagline { color: var(--ink-soft); font-size: .95rem; display: block; margin-top: 8px; } .brand-logo { height: 40px; width: auto; display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; } .brand-logo-lg { height: 72px; } /* ---------- posture effects (framework.html) ---------- Inline hint under each framework-posture input showing the downstream workflow effect. Revealed (transitioned) only when that option is active. */ .posture-effect { display: block; margin-top: 0; padding-left: 24px; font-size: .8rem; color: var(--primary); line-height: 1.4; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .2s ease-out, opacity .2s ease-out, margin-top .2s; } .posture-effect.is-active { max-height: 64px; opacity: 1; margin-top: 4px; } .posture-effect::before { content: "↳ "; color: var(--accent); font-weight: 700; margin-right: 4px; } .field > .posture-effect { padding-left: 0; } .primary-nav { display: flex; gap: 2px; flex-wrap: wrap; } .nav-link { color: var(--header-ink-soft); padding: 8px 12px; border-radius: var(--radius-sm); font-size: .9rem; font-weight: 500; text-decoration: none; } .nav-link:hover { background: var(--header-ink-hover-bg); color: var(--header-ink); text-decoration: none; } .nav-link.active { background: var(--header-ink-active-bg); color: var(--header-ink); } /* ---------- wide modal (policy editor) ---------- */ .modal-xl { max-width: 860px; } .modal-xl .modal-header { position: sticky; top: 0; z-index: 2; background: var(--surface); } .modal-xl .modal-footer { position: sticky; bottom: 0; z-index: 2; } .policy-body-textarea { font-family: 'Menlo', 'Consolas', monospace; font-size: .85rem; line-height: 1.6; resize: vertical; } .policy-editor-form .grid-2 { gap: 14px; } /* ---------- suggested policies ---------- */ .suggested-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .suggested-card { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; } .suggested-card-name { font-weight: 600; font-size: .9rem; color: var(--h-color); margin-bottom: 4px; } .suggested-card-desc { font-size: .82rem; color: var(--ink-soft); line-height: 1.4; flex: 1; } .suggested-card-meta { font-size: .75rem; color: var(--accent); margin-top: 6px; font-weight: 500; } .header-right { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .company-label { color: var(--header-ink-soft); font-size: .9rem; padding: 6px 10px; background: var(--header-ink-hover-bg); border-radius: var(--radius-sm); } .user-name { color: var(--header-ink); font-size: .9rem; font-weight: 500; } .btn-sm { padding: 5px 10px; font-size: .8rem; } /* ---------- buttons additional ---------- */ .btn-primary { /* alias for default blue btn */ } /* ---------- auth page additions ---------- */ .auth-brand { text-align: center; margin-bottom: 24px; } .auth-brand .brand-mark { background: var(--header-bg); color: var(--header-ink); } .auth-form { display: none; } .auth-form.active { display: block; } .auth-tab { flex: 1; background: transparent; border: 0; padding: 10px 0; font-weight: 600; color: var(--ink-soft); cursor: pointer; border-bottom: 2px solid transparent; font-family: inherit; font-size: .95rem; } .auth-tab.active { color: var(--h-color); border-bottom-color: var(--primary); } .auth-msg { margin-top: 10px; font-size: .88rem; min-height: 1.1em; } .auth-msg.ok { color: var(--risk-low); } .auth-msg.err { color: var(--risk-high); } .auth-footnote { font-size: .8rem; color: var(--muted); margin-top: 24px; text-align: center; } .auth-guest-cta { margin-top: 20px; text-align: center; } .auth-guest-link { font-size: 2.5rem; font-weight: 600; color: var(--primary); text-decoration: none; line-height: 1.2; display: block; } .auth-guest-link:hover { text-decoration: underline; } .field-hint { font-size: .78rem; color: var(--muted); margin-top: 4px; } /* two-column auth layout */ .auth-layout { display: flex; gap: 56px; align-items: center; max-width: 920px; width: 100%; } .auth-pitch { flex: 1 1 0; min-width: 0; color: #fff; } [data-mode="dark"] .auth-pitch { color: var(--ink); } .auth-pitch-eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .7; margin-bottom: 10px; } .auth-pitch-headline { font-size: 2.1rem; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 12px; } .auth-pitch-sub { font-size: 1.05rem; opacity: .85; margin: 0 0 28px; line-height: 1.5; } .auth-pitch-list { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 10px; } .auth-pitch-list li { display: flex; gap: 10px; font-size: .9rem; opacity: .9; line-height: 1.4; } .auth-pitch-list li::before { content: '✓'; font-weight: 800; flex-shrink: 0; color: rgba(255,255,255,.6); margin-top: 1px; } .auth-pitch-frameworks { font-size: .75rem; opacity: .55; line-height: 1.7; } @media (max-width: 780px) { .auth-layout { flex-direction: column; gap: 0; } .auth-pitch { display: none; } } /* ---------- card extras ---------- */ .card-title { margin: 0 0 8px 0; color: var(--h-color); } .card-hero { background: linear-gradient(135deg, var(--hero-grad-from) 0%, var(--hero-grad-to) 100%); } .stat { text-align: left; } .stat-label { font-size: .8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 6px; } .stat-value { font-size: 2.2rem; font-weight: 700; color: var(--h-color); line-height: 1; margin-bottom: 8px; } .stat-link { font-size: .85rem; color: var(--link); } .subsection { margin-top: 24px; color: var(--h-color); font-size: 1rem; font-weight: 600; } .page-lead { color: var(--ink-soft); max-width: 850px; margin-bottom: 18px; } /* NIST AI RMF foundation banner — framework.html */ .nist-foundation-banner { background: linear-gradient(135deg, var(--nist-foundation-from) 0%, var(--nist-foundation-to) 100%); color: #fff; border-radius: 8px; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; } .nist-foundation-inner { font-size: .92rem; line-height: 1.5; } .nist-foundation-inner strong { color: #fff; } .nist-functions { display: flex; gap: 8px; flex-wrap: wrap; } .nist-fn { border: none; border-radius: 4px; padding: 5px 0; width: 90px; text-align: center; font-size: .8rem; font-weight: 800; letter-spacing: .06em; color: var(--nist-ink); } .nist-fn-govern { background: var(--nist-govern); } .nist-fn-map { background: var(--nist-map); } .nist-fn-measure { background: var(--nist-measure); color: #fff; } .nist-fn-manage { background: var(--nist-manage); } /* ---------- forms (stacked + extras) ---------- */ .stacked-form .field { margin-bottom: 14px; } .checkbox-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; } @media (max-width: 640px) { .checkbox-grid { grid-template-columns: 1fr; } } .checkbox-grid label { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink); font-size: .9rem; cursor: pointer; } .checkbox-grid input { width: auto; } .check-line { display: flex; align-items: center; gap: 10px; margin: 8px 0; } .check-line input { width: auto; } .filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .filter-row label { font-size: .85rem; color: var(--ink-soft); font-weight: 600; } .filter-gap { margin-left: 12px; } .aia-section { color: var(--h-color); margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--border-soft); font-size: 1rem; } /* ---------- settings table of contents ---------- */ .settings-toc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; margin: 0 0 20px; box-shadow: var(--shadow); } .settings-toc-title { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 8px; } .settings-toc ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; } .settings-toc li a { display: inline-block; padding: 5px 12px; font-size: .88rem; font-weight: 500; color: var(--ink-soft); background: var(--surface-alt); border-radius: 999px; text-decoration: none; transition: background .15s, color .15s; } .settings-toc li a:hover, .settings-toc li a:focus { background: var(--accent-soft); color: var(--h-color); text-decoration: none; } /* Scroll-target offset + brief highlight when jumping to a section */ .settings-card { scroll-margin-top: 80px; transition: box-shadow .6s ease-out; } .settings-card:target { box-shadow: 0 0 0 3px var(--primary), var(--shadow); animation: settings-target-fade 1.8s ease-out 1; } @keyframes settings-target-fade { 0% { box-shadow: 0 0 0 3px var(--primary), var(--shadow); } 100% { box-shadow: 0 0 0 0 transparent, var(--shadow); } } /* Anchor-link styling on section headers — shows # on hover */ .section-anchor { color: inherit; text-decoration: none; position: relative; padding-right: 18px; } .section-anchor::after { content: "#"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); opacity: 0; color: var(--primary); font-weight: 600; transition: opacity .15s; } .section-anchor:hover, .section-anchor:focus { color: var(--primary); text-decoration: none; } .section-anchor:hover::after, .section-anchor:focus::after { opacity: 1; } /* ---------- pricing page (Aurora Glass) ---------- */ .pricing-aurora { position: relative; background: radial-gradient(ellipse 60% 80% at 15% 10%, rgba(79, 179, 217, 0.38) 0%, transparent 55%), radial-gradient(ellipse 55% 75% at 88% 85%, rgba(255, 209, 102, 0.28) 0%, transparent 55%), radial-gradient(ellipse 70% 60% at 55% 55%, rgba(255, 107, 107, 0.22) 0%, transparent 55%), radial-gradient(ellipse 45% 40% at 40% 90%, rgba(6, 214, 160, 0.18) 0%, transparent 55%), linear-gradient(135deg, #0A1020 0%, #0d1b4b 50%, #1a2b6e 100%); border-radius: 20px; color: #fff; padding: 56px 40px 48px; margin: 24px 0 32px; overflow: hidden; } .pricing-aurora::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 0%, rgba(10, 16, 32, 0.25) 100%); pointer-events: none; } .pricing-aurora-head { text-align: center; position: relative; z-index: 2; } .pricing-aurora-title { color: #fff; font-size: 2.6rem; font-weight: 800; margin: 0 0 14px; letter-spacing: -0.02em; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); } .pricing-aurora-subtitle { color: rgba(255, 255, 255, 0.82); font-size: 1.05rem; max-width: 640px; margin: 0 auto 26px; line-height: 1.55; } .billing-toggle-aurora { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .billing-toggle-aurora .billing-toggle-btn { color: rgba(255, 255, 255, 0.7); } .billing-toggle-aurora .billing-toggle-btn.active { background: rgba(255, 255, 255, 0.95); color: #0d1b4b; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } .pricing-cards-aurora { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; position: relative; z-index: 2; } @media (max-width: 1100px) { .pricing-cards-aurora { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .pricing-cards-aurora { grid-template-columns: 1fr; } } .pricing-card-aurora { position: relative; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 14px; padding: 28px 24px; color: #fff; display: flex; flex-direction: column; gap: 16px; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .pricing-card-aurora:hover { border-color: rgba(255, 255, 255, 0.35); transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); } .pricing-card-aurora-featured { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.42); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.12) inset; transform: translateY(-4px); } .pricing-card-aurora-featured:hover { transform: translateY(-7px); } .pricing-card-aurora-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #06D6A0 0%, #4FB3D9 100%); color: #0d1b4b; padding: 5px 14px; border-radius: 999px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 4px 12px rgba(6, 214, 160, 0.3); } .pricing-card-aurora-head h2 { color: #fff; font-size: 1.3rem; font-weight: 700; margin: 0 0 4px; } .pricing-card-aurora-tagline { color: rgba(255, 255, 255, 0.65); font-size: 0.8rem; margin: 0; min-height: 2.4em; } .pricing-card-aurora-price { margin: 4px 0 6px; display: flex; flex-direction: column; gap: 2px; } .pricing-aurora-num { font-size: 2.6rem; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -0.02em; } .pricing-aurora-interval { color: rgba(255, 255, 255, 0.6); font-size: 0.85rem; } .pricing-aurora-cta { display: block; text-align: center; padding: 11px 16px; border-radius: 8px; font-weight: 600; font-size: 0.92rem; text-decoration: none; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.08s; } .pricing-aurora-cta:active { transform: translateY(1px); } .pricing-aurora-cta-primary { background: linear-gradient(135deg, #06D6A0 0%, #0EB88B 100%); color: #0d1b4b; box-shadow: 0 4px 14px rgba(6, 214, 160, 0.28); } .pricing-aurora-cta-primary:hover { background: linear-gradient(135deg, #0EE5AC 0%, #06D6A0 100%); color: #0d1b4b; } .pricing-aurora-cta-secondary { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); } .pricing-aurora-cta-secondary:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.55); color: #fff; } .pricing-aurora-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; } .pricing-aurora-features li { font-size: 0.88rem; position: relative; padding-left: 22px; line-height: 1.45; color: rgba(255, 255, 255, 0.88); } .pricing-aurora-features li::before { content: "✓"; position: absolute; left: 0; color: #06D6A0; font-weight: 800; } .pricing-aurora-features li.muted { color: rgba(255, 255, 255, 0.55); font-style: italic; } .pricing-aurora-features li.muted::before { content: "·"; color: rgba(255, 255, 255, 0.4); } /* Dark-mode tweak: aurora already dark; keep it consistent */ [data-mode="dark"] .pricing-aurora { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); } /* Legacy classes kept for backward-compat with any other pages that might use them */ .pricing-header { text-align: center; padding: 40px 0 24px; } .billing-toggle { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-alt); border: 1px solid var(--border); margin-top: 8px; } .billing-toggle-btn { padding: 8px 20px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); font-family: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; } .billing-toggle-btn.active { background: var(--surface); color: var(--h-color); box-shadow: var(--shadow); } .billing-toggle-save { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #06D6A0; color: #0d1b4b; letter-spacing: .02em; } .pricing-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 24px 0; } .pricing-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 22px; display: flex; flex-direction: column; transition: border-color .15s, box-shadow .15s, transform .08s; } .pricing-card:hover { border-color: var(--primary); box-shadow: var(--shadow); } .pricing-card-featured { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-6px); } .pricing-card-featured:hover { transform: translateY(-6px); } .pricing-card-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--primary); color: var(--on-primary, #fff); padding: 4px 14px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .pricing-card-head { margin-bottom: 14px; } .pricing-card-head h2 { margin: 0 0 4px; font-size: 1.3rem; } .pricing-card-tagline { color: var(--muted); font-size: .82rem; margin: 0; min-height: 2.4em; } .pricing-card-price { margin-bottom: 18px; line-height: 1; } .pricing-price-number { font-size: 2.6rem; font-weight: 800; color: var(--h-color, var(--ink)); line-height: 1; margin-bottom: 4px; } .pricing-dollar { font-size: 1.2rem; font-weight: 700; vertical-align: super; margin-right: 2px; color: var(--muted); } .pricing-price-interval { color: var(--muted); font-size: .82rem; } .pricing-card .btn-block { margin-bottom: 18px; } .pricing-card-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .pricing-card-features li { font-size: .88rem; position: relative; padding-left: 20px; line-height: 1.45; } .pricing-card-features li::before { content: "✓"; position: absolute; left: 0; color: #06D6A0; font-weight: 700; } .pricing-card-features li.muted { color: var(--muted); } .pricing-card-features li.muted::before { color: var(--muted); } /* Pricing matrix table */ .pricing-matrix td, .pricing-matrix th { vertical-align: middle; } .pricing-matrix th.center, .pricing-matrix td.center { text-align: center; } .pricing-matrix-group td { background: var(--accent-soft); border-left: 3px solid var(--accent); font-weight: 700; color: var(--primary); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; padding: 12px 14px; } /* FAQ */ .pricing-faq { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; } .pricing-faq details { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; background: var(--surface); } .pricing-faq summary { cursor: pointer; font-weight: 600; color: var(--h-color, var(--ink)); list-style: none; position: relative; padding-right: 24px; } .pricing-faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.2rem; color: var(--muted); } .pricing-faq details[open] summary::after { content: "−"; } .pricing-faq summary::-webkit-details-marker { display: none; } .pricing-faq details[open] p { margin: 10px 0 0; color: var(--ink-soft); font-size: .92rem; } /* ---------- checklists ---------- */ .checklist-index .card + .card { margin-top: 16px; } .checklist-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 6px; } .checklist-card-link { text-decoration: none; color: inherit; display: flex; cursor: pointer; } .checklist-card-link:hover { text-decoration: none; } .checklist-card { flex: 1; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; background: var(--surface); transition: border-color .18s, box-shadow .18s, transform .18s; } .checklist-card-link:hover .checklist-card { border-color: var(--accent); box-shadow: 0 6px 20px rgba(0,0,0,.18); transform: translateY(-3px); } .checklist-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: .78rem; } .checklist-card-tag { text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 3px; font-weight: 700; } .checklist-card-tag-primary { background: var(--primary); color: var(--on-primary); } .checklist-card-tag-sector { background: var(--accent-soft); color: var(--h-color); } .checklist-card-progress { font-weight: 700; color: var(--h-color); font-size: .85rem; } .checklist-card-name { font-weight: 700; color: var(--h-color); margin: 2px 0 8px; } .checklist-progress-bar { height: 6px; background: var(--border-soft); border-radius: 3px; overflow: hidden; } .checklist-progress-bar > div { height: 100%; background: linear-gradient(90deg, #06D6A0, #2E75B6); transition: width .2s ease; } .checklist-dormant-list { list-style: none; padding: 0; margin: 0; } .checklist-dormant-list li { padding: 6px 0; border-bottom: 1px solid var(--border-soft); font-size: .9rem; } .checklist-dormant-list li:last-child { border-bottom: none; } .checklist-section { margin-top: 20px; scroll-margin-top: 80px; } .checklist-items { list-style: none; padding: 0; margin: 8px 0 0; } .checklist-item-row { padding: 8px 0; border-bottom: 1px solid var(--border-soft); display: flex; flex-direction: column; } .checklist-item-row:last-child { border-bottom: none; } .checklist-item-row.done { opacity: .55; } .checklist-item-row.done .checklist-item-label > span { text-decoration: line-through; } .checklist-item-label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: .92rem; line-height: 1.5; } .checklist-item-label input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--primary); flex-shrink: 0; } .checklist-meta { font-size: .75rem; margin: 2px 0 0 28px; } /* ---------- checklist stage workflow ---------- */ .checklist-item-text { font-size: .92rem; line-height: 1.5; } .checklist-stage-cols { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .stage-col { flex: 1 1 160px; min-width: 140px; display: flex; flex-direction: column; gap: 4px; background: var(--surface-alt); border: 1px solid var(--border-soft); border-radius: 6px; padding: 6px 10px; font-size: .78rem; } .stage-col-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); margin-bottom: 2px; } .stage-badge { display: flex; align-items: flex-start; gap: 4px; color: var(--ink); font-size: .78rem; line-height: 1.4; } .stage-badge-observed { color: var(--primary); } .stage-badge-approved { color: var(--risk-low); } .stage-badge-rejected { color: var(--risk-high); } .stage-badge-attested { color: var(--risk-low); font-weight: 600; } .stage-badge-pending { color: var(--ink-soft); font-style: italic; } .stage-rejection-notes { font-size: .78rem; background: var(--surface-alt); border-left: 3px solid var(--risk-high); padding: 4px 8px; margin: 4px 0 0; border-radius: 0 4px 4px 0; color: var(--ink-soft); } .stage-btn { font-size: .76rem; padding: 3px 10px; margin-top: 2px; align-self: flex-start; } .checklist-item-row.stage-attested { opacity: .6; } .checklist-item-row.stage-attested .checklist-item-text { text-decoration: line-through; } /* ---------- status pills ---------- */ .status-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; background: var(--surface-alt); color: var(--ink-soft); border: 1px solid var(--border); } .status-submitted { background: var(--accent-soft); color: var(--h-color); border-color: transparent; } .status-triage { background: var(--status-triage-bg); color: var(--status-triage-ink); border-color: transparent; } .status-review { background: var(--status-triage-bg); color: var(--status-triage-ink); border-color: transparent; } .status-approved { background: var(--risk-low); color: #fff; border-color: transparent; } .status-rejected { background: var(--risk-high); color: #fff; border-color: transparent; } .status-withdrawn { background: var(--surface-alt); color: var(--muted); } .status-draft { background: var(--surface-alt); color: var(--ink-soft); } .status-renewal-due { background: var(--risk-medium); color: #fff; border-color: transparent; } .status-open { background: var(--accent-soft); color: var(--h-color); border-color: transparent; } .status-treating { background: var(--risk-medium); color: #fff; border-color: transparent; } .status-accepted { background: var(--risk-low); color: #fff; border-color: transparent; } .status-closed { background: var(--surface-alt); color: var(--muted); } /* ---------- role labels ---------- */ .role-owner, .role-admin, .role-editor, .role-viewer { font-weight: 600; text-transform: capitalize; } .role-owner { color: var(--h-color); } .role-admin { color: var(--primary); } .role-editor { color: var(--ink); } .role-viewer { color: var(--muted); } /* ---------- progress checklist ---------- */ .progress-checklist { list-style: none; counter-reset: step; padding: 0; margin: 0; } .checklist-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border-soft); } .checklist-item:last-child { border-bottom: 0; } .checklist-check { width: 22px; height: 22px; border: 2px solid var(--border); border-radius: 50%; flex: 0 0 22px; margin-top: 2px; } .checklist-item.done .checklist-check { background: var(--risk-low); border-color: var(--risk-low); position: relative; } .checklist-item.done .checklist-check::after { content: ''; position: absolute; left: 5px; top: 2px; width: 6px; height: 11px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); } .checklist-body { flex: 1; } .checklist-label { font-weight: 600; color: var(--h-color); font-size: .98rem; display: block; text-decoration: none; } .checklist-label:hover { text-decoration: underline; } .checklist-hint { font-size: .85rem; color: var(--ink-soft); margin: 2px 0 0; } .checklist-item.done .checklist-label { color: var(--ink-soft); } /* ---------- toast (supplement — preferred .toast-host selector) ---------- */ .toast-host { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .toast-host .toast { opacity: 0; transform: translateY(-6px); transition: opacity 0.2s, transform 0.2s; } .toast-host .toast.show { opacity: 1; transform: translateY(0); } /* ---------- body modifier ---------- */ body.modal-open { overflow: hidden; } /* ============================================================ PALETTE PICKER (used on settings.html) ============================================================ */ .palette-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .palette-card { border: 2px solid var(--border); border-radius: var(--radius); padding: 14px; cursor: pointer; background: var(--surface); transition: border-color 0.15s, transform 0.05s; display: flex; flex-direction: column; gap: 10px; text-align: left; font-family: inherit; } .palette-card:hover { border-color: var(--primary); } .palette-card.is-active { border-color: var(--primary); box-shadow: var(--focus-ring); } .palette-card .palette-name { font-weight: 700; color: var(--h-color); font-size: .95rem; } .palette-card .palette-desc { font-size: .8rem; color: var(--ink-soft); line-height: 1.35; } .palette-swatches { display: flex; gap: 4px; height: 28px; border-radius: 4px; overflow: hidden; border: 1px solid var(--border-soft); } .palette-swatch { flex: 1; height: 100%; } .palette-card .palette-active-badge { display: none; align-self: flex-start; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--primary); color: var(--on-primary); } .palette-card.is-active .palette-active-badge { display: inline-block; } .mode-toggle-row { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .mode-toggle-row .mode-btn { padding: 6px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--ink); font-family: inherit; font-size: .9rem; cursor: pointer; } .mode-toggle-row .mode-btn.is-active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); } /* ============================================================ MOBILE RESPONSIVE PASS Consolidated small-screen tuning layered on top of the per-component @media blocks above. Fires at ≤720px (phones + small tablets). ============================================================ */ /* Horizontal scroll wrapper for wide data tables. Wrap any `` in
on pages that need it, or rely on the automatic overflow at ≤720px below. */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -8px; padding: 0 8px; } @media (max-width: 720px) { /* ---------- layout ---------- */ main { padding: 16px 14px 48px; } .page-title { font-size: 1.45rem; } h1 { font-size: 1.6rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1.05rem; } .card { padding: 14px 16px; border-radius: 10px; } .card-hero { padding: 20px 18px; } .page-lead { font-size: .92rem; } .section-sep { margin: 18px 0 10px; padding-top: 14px; } /* ---------- header / nav ---------- */ .site-header { padding: 10px 14px; gap: 10px; align-items: flex-start; } .brand-logo { height: 32px; } .primary-nav { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 2px; scrollbar-width: none; } .primary-nav::-webkit-scrollbar { display: none; } .nav-link { padding: 7px 11px; font-size: .85rem; white-space: nowrap; flex-shrink: 0; } .header-right { margin-left: auto; gap: 6px; } .header-right .user-name, .user-menu .user-name { display: none; } .company-label { font-size: .82rem; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- tables ---------- */ /* Make ANY .data table scroll horizontally on phones. Wrap the table in a relatively-positioned div with overflow so it doesn't escape its parent card. */ .card > table.data, .card .table-scroll { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } table.data { font-size: .85rem; } table.data th, table.data td { padding: 8px 10px; } /* ---------- forms ---------- */ .grid-2, .grid-3 { grid-template-columns: 1fr; gap: 10px; } .stacked-form .field { margin-bottom: 12px; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], select, textarea { font-size: 16px; /* Safari prevents zoom on focus when ≥16px */ } .filter-row { flex-wrap: wrap; gap: 6px 10px; } .filter-gap { margin-left: 0; } /* ---------- buttons ---------- */ .btn { padding: 9px 14px; font-size: .92rem; min-height: 40px; } .btn-sm { padding: 6px 10px; font-size: .82rem; min-height: 32px; } .btn-row { flex-wrap: wrap; gap: 8px; } .flex-between { gap: 8px; flex-wrap: wrap; } /* ---------- modal ---------- */ .modal { width: calc(100% - 16px); max-width: none; max-height: calc(100vh - 40px); margin: 20px 8px; border-radius: 10px; } .modal-xl { max-width: none; } .modal-header { padding: 12px 14px; } .modal-body { padding: 14px; max-height: calc(100vh - 200px); overflow-y: auto; } .modal-footer { padding: 10px 14px; flex-wrap: wrap; gap: 8px; } .modal-footer .btn { flex: 1 1 auto; } /* ---------- stats + checklist cards ---------- */ .grid-3 > .card.stat { text-align: left; } .stat-value { font-size: 1.75rem; } .checklist-item-label { font-size: .88rem; } /* ---------- settings TOC + pricing/auth/other extras ---------- */ .settings-toc-title { font-size: .7rem; } .settings-toc li a { padding: 4px 10px; font-size: .82rem; } .pricing-aurora { padding: 32px 18px 36px; border-radius: 14px; margin: 12px 0 20px; } .pricing-aurora-title { font-size: 1.75rem; } .pricing-aurora-subtitle { font-size: .95rem; } .pricing-card-aurora { padding: 20px 18px; } /* Auth pages: stack pitch below the form (actually hidden per existing rule) */ /* Join request rows */ .join-request-row { flex-direction: column; align-items: flex-start; gap: 6px; } .join-request-actions { width: 100%; } .join-request-actions .btn { flex: 1; } /* NIST banner */ .nist-foundation-banner { padding: 12px 14px; } .nist-foundation-inner { font-size: .87rem; } .nist-fn { width: auto; padding: 5px 10px; } } /* Extra-narrow (tiny phones): drop nav padding further. */ @media (max-width: 380px) { main { padding: 12px 10px 40px; } .card { padding: 12px 14px; } .nav-link { padding: 6px 9px; font-size: .82rem; } .page-title { font-size: 1.3rem; } } /* ============================================================ A11Y quick pass (v40.5) Skip link · consistent focus rings · reduced-motion respect ============================================================ */ /* Skip-to-content link — visible only on keyboard focus */ .skip-link { position: absolute; left: 8px; top: -999px; z-index: 9999; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--primary); color: var(--on-primary); text-decoration: none; font-weight: 600; font-size: .9rem; box-shadow: var(--shadow-lg); } .skip-link:focus, .skip-link:focus-visible { top: 8px; outline: none; text-decoration: none; color: var(--on-primary); } /* Visible keyboard focus on interactive elements (leaves mouse clicks untouched so we don't get sticky outlines on click). */ .btn:focus-visible, .nav-link:focus-visible, a:focus-visible, button:focus-visible, [role="button"]:focus-visible, .billing-toggle-btn:focus-visible, .palette-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); } .site-header .nav-link:focus-visible { outline-color: var(--header-ink); } /* Respect prefers-reduced-motion — cut all non-essential animations. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ============================================================ TWO-TIER HEADER (v46) Upper utility strip (Settings / Pricing / Help + Admin + user) over the main workflow nav (icon + label chips). ============================================================ */ /* ---------- Upper utility strip ---------- */ .site-header-util { background: color-mix(in srgb, var(--header-bg) 70%, #000); color: var(--header-ink-soft); display: flex; align-items: center; gap: 18px; padding: 6px 24px; font-size: .78rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .util-nav { display: flex; gap: 4px; flex-wrap: wrap; } .util-link { color: var(--header-ink-soft); padding: 4px 10px; border-radius: 3px; font-weight: 600; letter-spacing: .04em; text-decoration: none; white-space: nowrap; } .util-link:hover { background: rgba(255, 255, 255, .08); color: var(--header-ink); text-decoration: none; } .util-link.active { background: rgba(255, 255, 255, .12); color: var(--header-ink); } .util-right { margin-left: auto; display: flex; align-items: center; gap: 10px; } .util-right .company-switcher, .util-right .company-label { font-size: .82rem; } .util-right .user-menu { display: flex; align-items: center; gap: 6px; } .util-right .user-name { font-size: .78rem; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- Main workflow nav (icon + label chips) ---------- */ .site-header .primary-nav { position: relative; display: grid; grid-template-columns: repeat(var(--nav-cols, 6), minmax(70px, max-content)); justify-content: end; align-items: start; column-gap: 2px; row-gap: 18px; width: max-content; margin-left: auto; padding: 2px 0 10px; } .site-header .primary-nav::before { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 10px); border-top: 3px solid var(--header-accent); z-index: 0; } .site-header .nav-link { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 12px; min-width: 64px; border-radius: var(--radius-sm); color: var(--header-ink-soft); font-size: .72rem; font-weight: 500; line-height: 1.15; text-decoration: none; text-align: center; white-space: nowrap; position: relative; z-index: 1; } .site-header .nav-link-top { align-self: end; padding-bottom: 12px; } .site-header .nav-link-bottom { align-self: start; padding-top: 12px; } .site-header .nav-spacer { min-width: 0; min-height: 1px; } .site-header .nav-link:hover { background: var(--header-ink-hover-bg); color: var(--header-ink); text-decoration: none; } .site-header .nav-link.active { background: var(--header-ink-active-bg); color: var(--header-ink); } .site-header .nav-link .nav-ico { font-size: 1.1rem; line-height: 1; } .site-header .nav-link .nav-label { font-size: .72rem; font-weight: 600; letter-spacing: .01em; } /* The main workflow bar is now dedicated to the nav — no right-side controls here, since they moved to the utility strip. */ .site-header { align-items: flex-start; padding: 8px 24px 16px; border-bottom: none; } /* ---------- Mobile: keep the two tiers usable on narrow screens ---------- */ @media (max-width: 720px) { .site-header-util { padding: 6px 14px; gap: 10px; font-size: .72rem; } .site-header-util .user-name, .util-right .user-name { display: none; } .site-header-util .company-label, .util-right .company-label { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .util-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .util-nav::-webkit-scrollbar { display: none; } .util-link { flex-shrink: 0; padding: 3px 8px; } .site-header { padding: 6px 14px; } .site-header .primary-nav { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; margin-left: 0; padding: 0; } .site-header .primary-nav::before { display: none; } .site-header .primary-nav::-webkit-scrollbar { display: none; } .site-header .nav-link { flex-shrink: 0; min-width: 56px; padding: 4px 8px; } .site-header .nav-link-top, .site-header .nav-link-bottom { align-self: auto; padding-top: 4px; padding-bottom: 4px; } .site-header .nav-spacer { display: none; } .site-header .nav-link .nav-label { font-size: .66rem; } } /* ============================================================ DEADLINES widget (dashboard "Upcoming deadlines" card) Also used by per-page overdue banners on contracts / risks / policies. ============================================================ */ .deadline-row { display: grid; grid-template-columns: 100px 1fr 130px 90px; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); font-size: .9rem; } .deadline-row:last-child { border-bottom: none; } .deadline-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--surface-alt); color: var(--ink-soft); text-align: center; width: max-content; } .deadline-label a { color: var(--ink); font-weight: 500; } .deadline-label a:hover { color: var(--primary); } .deadline-date { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; } .deadline-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; text-align: center; letter-spacing: .03em; white-space: nowrap; } /* Severity tints */ .deadline-row.deadline-overdue .deadline-badge { background: rgba(196, 49, 49, .12); color: var(--risk-high); } .deadline-row.deadline-overdue .deadline-pill { background: var(--risk-high); color: #fff; } .deadline-row.deadline-overdue .deadline-label a { color: var(--risk-high); font-weight: 600; } .deadline-row.deadline-urgent .deadline-badge { background: rgba(217, 146, 31, .14); color: var(--risk-medium); } .deadline-row.deadline-urgent .deadline-pill { background: var(--risk-medium); color: #fff; } .deadline-row.deadline-urgent .deadline-label a { color: var(--risk-medium); font-weight: 600; } .deadline-row.deadline-soon .deadline-badge { background: var(--accent-soft); color: var(--primary); } .deadline-row.deadline-soon .deadline-pill { background: var(--accent-soft); color: var(--primary); } /* Responsive: stack columns on phones */ @media (max-width: 720px) { .deadline-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; } .deadline-date, .deadline-pill, .deadline-badge { font-size: .75rem; } .deadline-label { order: 1; } .deadline-badge { order: 2; justify-self: start; } .deadline-date { order: 3; } .deadline-pill { order: 4; justify-self: start; } } /* Per-page overdue alert card — same shape as the one on policies.html. Used inside contracts.html, risks.html, etc. */ .review-alert-card { border-left: 4px solid var(--risk-high); background: var(--surface-alt); padding: 14px 18px; border-radius: var(--radius); margin-bottom: 16px; } .review-alert-title { font-weight: 600; color: var(--h-color); margin-bottom: 4px; } .review-alert-body { color: var(--ink-soft); font-size: .9rem; } /* ============================================================ READINESS REVIEW PAGE ============================================================ */ .readiness-section { margin-bottom: 24px; } .readiness-items-list { list-style: none; padding: 0; margin: 0 0 20px; } .readiness-item-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; } .readiness-item-row:last-child { border-bottom: none; } .readiness-item-info { display: flex; gap: 10px; align-items: baseline; flex: 1; min-width: 0; } .readiness-item-id { font-size: .78rem; white-space: nowrap; flex-shrink: 0; } .readiness-item-text { font-size: .9rem; color: var(--ink); } .adhoc-req-list { list-style: none; padding: 0; margin: 0; } .adhoc-req-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border-soft); font-size: .9rem; } .adhoc-req-item:last-child { border-bottom: none; } /* Readiness review link on the checklists index card */ .readiness-review-link { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; color: var(--primary); text-decoration: none; border: 1px solid var(--border); border-radius: 14px; padding: 2px 10px; transition: background .15s, border-color .15s; white-space: nowrap; } .readiness-review-link:hover { background: var(--accent-soft); border-color: var(--primary); }