/* ═══════════════════════════════════════════════════════════════ Locke Prime — Theme Token System (Platinum Counsel) public/css/theme.css v2.0 ─────────────────────────────────────────────────────────────── Usage: 1. Link this file in BEFORE all other stylesheets. 2. Add anti-flash script in (see locke.html for example). 3. Toggle dark/light by setting data-theme="dark"|"light" on . 4. Theme toggle button saves to localStorage key "lp-theme". ═══════════════════════════════════════════════════════════════ */ /* ── Shared (both modes) ──────────────────────────────────────── */ :root { /* Gold accent */ --gold: #B88A2E; --gold2: #C99A3E; --gold3: #8A6520; --gold-dim: rgba(184,138,46,0.12); --legal-gold-soft: #F3EBD8; --border-gold: #D8C28A; /* Teal / success */ --teal: #2F8F5B; --teal2: #237047; --teal-dim: rgba(47,143,91,0.10); /* AI blue */ --ai: #2F7DBD; --ai2: #235D8F; --ai-blue: #2F7DBD; --ai-blue-soft: #EAF3FD; --border-blue: #8AB8F0; /* Semantic status */ --ok: #2F8F5B; --warn: #B7791F; --bad: #C94343; --ok-soft: #EAF6EF; --warn-soft: #FFF4DC; --bad-soft: #FFF1F1; --border-red: #F0C9C9; /* Deadline / calendar */ --event-hearing: #4a8fe0; --event-conference:#2F8F5B; --event-deadline: #C94343; --event-other: #7A8493; /* Typography */ --font-sans: 'Times New Roman', Times, serif; --font-mono: 'JetBrains Mono','Cascadia Code','Fira Code','Menlo','Consolas',monospace; --font-serif: 'Times New Roman', Times, Georgia, serif; /* Sidebar width */ --titlebar-h: 68px; /* brand bar and topbar share this — borders must form one line */ /* Readability scale: fixed tokens, not viewport-scaled type */ --text-base: 18px; --text-ui: 15px; --text-small: 14px; --text-label: 12px; --text-title: 44px; --icon-ui: 18px; --icon-export: 24px; /* Spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; } /* ── Light mode (default — Warm Paper) ────────────────────────── */ :root, [data-theme="light"] { /* Surfaces — warm ivory canvas, white cards float above it */ --bg: #FAF9F6; --surface: #FFFFFF; --surface2: #F6F4F0; --surface3: #F0EDE7; /* Text — warm ink, not blue-black (glare/eye-strain reduction) */ --text: #1C1A17; --text-muted: #6E6A63; --text-faint: #98928A; /* Borders — warm hairlines */ --border: #E8E4DD; --border2: #D9D3C9; --border-muted: #EFEBE4; /* Sidebar */ /* Brand */ --brand-logo: #1C1A17; --brand-prime: #B88A2E; /* Navy primary actions */ --navy: #17243A; --navy2: #0D1726; --navy3: #21324F; --navy-hover: #21324F; /* Backward-compat aliases */ --muted: #6E6A63; --muted2: #98928A; /* Shadows — soft two-layer warm ink (depth without harshness) */ --shadow-sm: 0 1px 2px rgba(28,26,23,0.05), 0 2px 8px rgba(28,26,23,0.04); --shadow: 0 2px 4px rgba(28,26,23,0.06), 0 8px 24px rgba(28,26,23,0.08); --shadow-lg: 0 4px 8px rgba(28,26,23,0.08), 0 16px 48px rgba(28,26,23,0.12); --shadow-button: 0 6px 16px rgba(23,36,58,0.16); /* Panel hover/selected */ --panel-hover: #F6F4F0; --panel-selected: #F3EBD8; } /* ── Dark mode ────────────────────────────────────────────────── */ [data-theme="dark"] { /* Surfaces */ --bg: #080b10; --surface: #121722; --surface2:#161d2a; --surface3:#1a2030; /* Text */ --text: #f4f6fa; --text-muted: #a9b2c3; --text-faint: #657083; /* Borders */ --border: #232b3a; --border2: #1a202c; --border-muted: #1e2536; /* Sidebar */ /* Brand */ --brand-logo: #ffffff; --brand-prime: #c9a84c; /* Navy → warm in dark mode */ --navy: #c9a84c; --navy2: #0d0f14; --navy3: #1a2030; --navy-hover:#d4b560; /* Backward-compat aliases */ --muted: #a9b2c3; --muted2: #657083; /* Gold overrides for dark */ --gold: #c9a84c; --gold2: #d4b560; --gold3: #a8882a; --gold-dim: rgba(201,168,76,0.12); --border-gold:#8a7040; /* Shadows */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.40); --shadow: 0 4px 20px rgba(0,0,0,0.50); --shadow-lg: 0 8px 40px rgba(0,0,0,0.60); --shadow-button: 0 6px 16px rgba(0,0,0,0.40); --panel-hover: rgba(255,255,255,0.04); --panel-selected: rgba(201,168,76,0.10); } /* ── Global reset ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.5; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; } /* ── Scrollbars ───────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-faint); } /* ── Top bar ──────────────────────────────────────────────────── */ .topbar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 24px; display: flex; align-items: center; gap: 12px; height: var(--titlebar-h); min-height: var(--titlebar-h); flex-shrink: 0; flex-wrap: nowrap; } .title { font-family: "Times New Roman", Times, serif; font-size: var(--text-title); font-weight: 700; line-height: 1; letter-spacing: 0; color: var(--text); flex: 1; } .title small { font-size: 12px; font-weight: 400; color: var(--text-muted); margin-left: 8px; } .topbar, .minimal-board-topbar { height: 68px !important; min-height: 68px !important; padding: 0 24px !important; align-items: center !important; flex-wrap: nowrap !important; } .topbar .title, .topbar-title, .topbar .page-title, .page-title, .op-title, .minimal-board-title { font-family: "Times New Roman", Times, serif !important; font-size: var(--text-title) !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: 0 !important; color: var(--text) !important; } /* ── Buttons ──────────────────────────────────────────────────── */ .btn { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-small); border-radius: 8px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); padding: 7px 13px; cursor: pointer; transition: border-color 0.12s, background 0.12s; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; white-space: nowrap; } .btn:hover { border-color: var(--border2); background: var(--surface2); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Primary — navy in light, gold-toned in dark */ .btn.primary { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 700; box-shadow: var(--shadow-button); } .btn.primary:hover { background: var(--navy-hover); border-color: var(--navy-hover); } /* Legal/authority button */ .btn.legal { background: var(--surface); border: 1.5px solid var(--border-gold); color: var(--gold); } .btn.legal:hover { background: var(--legal-gold-soft); } .btn.danger { border-color: var(--border-red); color: var(--bad); background: var(--bad-soft); } .btn.danger:hover { border-color: rgba(201,67,67,0.45); background: rgba(201,67,67,0.08); } .topbar .btn { min-height: 36px !important; height: 36px !important; padding: 0 12px !important; border-radius: 6px !important; font-size: var(--text-small) !important; font-weight: 700 !important; } .topbar .btn svg { width: var(--icon-ui) !important; height: var(--icon-ui) !important; } /* ── Cards ────────────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); overflow: hidden; position: relative; } .kpi-card::before, .accent-card::before { content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 14px; border: 3px solid var(--accent-color, var(--ai)); border-right: 0; border-radius: 12px 0 0 12px; pointer-events: none; } .card > .ch, .card > .cb, .card > :not(style):not(script):not(.ch):not(.cb) { position: relative; } .accent-good, .kpi-good, .kpi-teal { --accent-color: var(--ok); } .accent-attention, .kpi-attention, .kpi-orange { --accent-color: var(--warn); } .accent-alert, .kpi-alert, .kpi-red { --accent-color: var(--bad); } .accent-complete, .kpi-complete, .kpi-gold { --accent-color: var(--gold); } .accent-generic, .kpi-generic, .kpi-blue, .kpi-navy { --accent-color: var(--ai); } .accent-none::before { display: none; } .card:not(.kpi-card):not(.accent-none) { border-left: 4px solid var(--accent-color, var(--ai)); } .kpi-card.accent-good::before, .kpi-card.accent-attention::before, .kpi-card.accent-alert::before, .kpi-card.accent-complete::before, .kpi-card.accent-generic::before, .kpi-card:not(.accent-none)::before { border-color: var(--accent-color, var(--ai)); } .ch { padding: 13px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; } .h { font-size: var(--text-ui); font-weight: 700; color: var(--text); flex: 1; } /* ── Tables ───────────────────────────────────────────────────── */ table { width: 100%; border-collapse: collapse; } thead { background: var(--surface2); } th { padding: 9px 16px; font-size: var(--text-label); letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); text-align: left; border-bottom: 1px solid var(--border); font-weight: 600; } tbody tr { border-bottom: 1px solid var(--border-muted); } tbody tr:last-child { border-bottom: none; } tbody tr:hover { background: var(--surface2); } td { padding: 10px 16px; font-size: var(--text-small); vertical-align: middle; } /* ── Tags / pills ─────────────────────────────────────────────── */ .tag { display: inline-block; padding: 3px 9px; border-radius: 6px; font-size: var(--text-label); font-weight: 700; letter-spacing: 0.4px; } .tag.ok { background: var(--ok-soft); color: var(--ok); border: 1px solid #CBE8D6; } .tag.warn { background: var(--warn-soft); color: var(--warn); border: 1px solid #F0D8A8; } .tag.bad { background: var(--bad-soft); color: var(--bad); border: 1px solid var(--border-red); } /* AI badge */ .tag.ai { background: var(--ai-blue-soft); color: var(--ai-blue); border: 1px solid #C9DFF5; } /* Neutral badge */ .tag.neutral { background: var(--surface2); color: var(--text-muted); border: 1px solid var(--border); } .pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 999px; padding: 5px 10px; background: var(--surface2); font-size: var(--text-small); color: var(--text-muted); } .pill .b { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); } /* ── KPI cards ────────────────────────────────────────────────── */ .kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; } .kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; display: flex; gap: 14px; align-items: flex-start; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); } .kpi-card::before { content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 14px; border: 3px solid transparent; border-right: 0; border-radius: 12px 0 0 12px; } .kpi-teal::before, .kpi-gold::before, .kpi-orange::before, .kpi-red::before, .kpi-blue::before, .kpi-navy::before { border-color: var(--accent-color, var(--ai)); border-right: 0; } .kpi-icon { font-size: 22px; line-height: 1; margin-top: 2px; } .kpi-lbl { font-size: var(--text-label); letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin-bottom: 5px; } .kpi-n { font-size: 28px; font-weight: 800; color: var(--text); line-height: 1; } .kpi-s { font-size: 11px; color: var(--text-muted); margin-top: 4px; } .kpi-n { font-size: 32px; } /* ── Matter context chip (injected by locke-api.js, sits below the title bar) ── */ #lp-matter-chip { display: flex; align-items: center; gap: 10px; padding: 7px 22px; background: var(--surface2); border-bottom: 1px solid var(--border); font-family: var(--font-sans); font-size: var(--text-small); } #lp-matter-chip .lp-chip-label { color: var(--text-faint); letter-spacing: 1.5px; text-transform: uppercase; font-size: var(--text-label); font-weight: 700; } #lp-matter-chip .lp-chip-sep { color: var(--border2); } #lp-matter-chip .lp-chip-name { color: var(--gold); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; } #lp-matter-chip .lp-chip-type { color: var(--text-muted); font-size: var(--text-label); } #lp-matter-chip .lp-chip-link { margin-left: auto; color: var(--text-muted); font-size: var(--text-label); text-decoration: none; padding: 2px 10px; border: 1px solid var(--border); border-radius: 4px; white-space: nowrap; } #lp-matter-chip .lp-chip-link:hover { color: var(--gold); border-color: var(--gold); } /* ── Misc utilities ───────────────────────────────────────────── */ .muted { color: var(--text-muted); font-size: var(--text-small); } .mono { font-family: var(--font-mono); font-size: var(--text-small); } .err { color: var(--bad); font-weight: 700; } .note { font-size: var(--text-small); color: var(--text-muted); padding: 12px 18px; border-top: 1px solid var(--border); line-height: 1.5; } .badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; background: var(--bad); border-radius: 999px; font-size: 10px; font-weight: 800; color: #fff; display: flex; align-items: center; justify-content: center; padding: 0 4px; } .bell { position: relative; } /* ── Canonical export PDF/DOCX button — one look on every screen (matches Case Advisor) ── */ .lp-export-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--border2); border-radius: 5px; background: var(--surface); color: var(--text); font-family: var(--font-sans); font-size: var(--text-small); font-weight: 700; line-height: 1; cursor: pointer; white-space: nowrap; transition: border-color .12s, color .12s, background .12s; } .lp-export-btn svg, .lp-export-btn i { width: var(--icon-export); height: var(--icon-export); flex-shrink: 0; } .lp-export-btn:disabled { opacity: .55; cursor: not-allowed; } .lp-export-btn:not(:disabled):hover { border-color: var(--navy); } /* Empty state */ .empty-state { color: var(--text-muted); text-align: center; } .empty-state-icon { color: #5F6B7A; background: var(--surface2); border: 1px solid var(--border); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } /* ── Buttons inherit the app font (UA default is Arial otherwise) ──── */ button, .btn, .lp-btn, .qa-btn { font-family: var(--font-sans); } /* ── Input fields ─────────────────────────────────────────────── */ input, select, textarea { font-family: var(--font-sans); font-size: var(--text-ui); background: var(--surface); color: var(--text); border: 1.5px solid var(--border); border-radius: 8px; padding: 8px 12px; outline: none; transition: border-color 0.12s, box-shadow 0.12s; } input:focus, select:focus, textarea:focus { border-color: var(--border-blue); box-shadow: 0 0 0 3px rgba(47,125,189,0.10); } input::placeholder, textarea::placeholder { color: var(--text-faint); } /* ── Elevation helpers ────────────────────────────────────────── */ .elevation-1 { box-shadow: 0 1px 2px rgba(20,32,51,0.04); } .elevation-2 { box-shadow: var(--shadow); } .elevation-3 { box-shadow: var(--shadow-lg); } /* ── Responsive ───────────────────────────────────────────────── */ @media (max-width: 980px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { html, body { overflow: auto; } .topbar { padding: 0 24px; flex-wrap: nowrap; min-height: 68px; height: 68px; gap: 8px; } .title { font-size: var(--text-title); } .kpi-row { grid-template-columns: repeat(2, 1fr); } }