/* ════════════════════════════════════════════════════════════════ EZBUILD UNIFIED THEME OVERLAY ──────────────────────────────────────────────────────────────── Drop this AFTER all other stylesheets to align landing, auth, and the app on one token system. Supports light + dark via / . Goal: zero layout changes — only color / font / radii / focus styles are normalised through CSS variables. ════════════════════════════════════════════════════════════════ */ /* ════════════════════ 1. TOKEN ROOT (DARK DEFAULT) ════════════════════ */ :root, :root[data-theme="dark"], html.dark { /* Brand — invariant */ --brand: #1978E5; --brand-hover: #1568CC; --brand-press: #1259B0; --brand-on: #FFFFFF; --blueprint: #60B0FF; /* Status — invariant */ --pass: #10B981; --review: #F59E0B; --fail: #F43F5E; /* Surfaces — dark */ --bg: #0B111B; --bg-elevated: #11192A; --surface: #161C26; --surface-2: #1B2433; --surface-3: #232E3F; --sidebar-bg: #080D14; --border: #2A3441; --border-strong: #3A4757; --hairline: rgba(255,255,255,0.06); --text: #F1F5F9; --text-2: #94A3B8; --text-3: #7C8CA3; /* was #64748B (4.0:1 on --bg) — lifted to ~5.5:1 so muted text stays legible */ --text-inv: #0B111B; --brand-soft: rgba(25,120,229,0.14); --brand-on-soft: #60B0FF; --pass-soft: rgba(16,185,129,0.12); --pass-on-soft: #34D399; --review-soft: rgba(245,158,11,0.12); --review-on-soft: #FBBF24; --fail-soft: rgba(244,63,94,0.12); --fail-on-soft: #FB7185; --grid-line: rgba(96,176,255,0.05); --blueprint-line: rgba(96,176,255,0.40); --shadow-sm: 0 1px 2px rgba(0,0,0,0.30); --shadow: 0 2px 6px rgba(0,0,0,0.32), 0 1px 2px rgba(0,0,0,0.24); --shadow-lg: 0 20px 40px -12px rgba(0,0,0,0.55); --focus-ring: 0 0 0 3px rgba(25,120,229,0.30); /* Type */ --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; /* Radius */ --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 20px; /* Motion */ --ease: cubic-bezier(.2,.7,.2,1); --dur: 200ms; /* ─── LEGACY ALIASES — theme.css uses these names ─── */ --theme-primary: var(--brand); --theme-bg: var(--bg); --theme-panel: var(--surface); --theme-panel-muted: var(--surface-2); --theme-panel-subtle: var(--surface-3); --theme-border: var(--border); --theme-text: var(--text); --theme-text-secondary: var(--text-2); --theme-text-muted: var(--text-3); --theme-font: var(--font-sans); } /* ════════════════════ 2. LIGHT MODE ════════════════════ */ :root[data-theme="light"], html[data-theme="light"] { /* Surfaces — light */ --bg: #F7F9FB; --bg-elevated: #FFFFFF; --surface: #FFFFFF; --surface-2: #F1F4F9; --surface-3: #E8ECF2; --sidebar-bg: #F1F4F9; --border: #E2E8F0; --border-strong: #CBD5E1; --hairline: rgba(15,23,42,0.06); --text: #0F172A; --text-2: #475569; --text-3: #64748B; /* was #94A3B8 (2.5:1 on white) — darkened to ~4.8:1 for placeholders/labels */ --text-inv: #FFFFFF; --brand-soft: rgba(25,120,229,0.08); --brand-on-soft: #1259B0; --pass-soft: #ECFDF5; --pass-on-soft: #047857; --review-soft: #FFFBEB; --review-on-soft: #B45309; --fail-soft: #FEF2F2; --fail-on-soft: #BE123C; --grid-line: rgba(25,120,229,0.06); --blueprint-line: rgba(25,120,229,0.35); --shadow-sm: 0 1px 2px rgba(15,23,42,0.04); --shadow: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04); --shadow-lg: 0 12px 24px -8px rgba(15,23,42,0.10), 0 4px 8px -2px rgba(15,23,42,0.06); color-scheme: light; } html[data-theme="light"] { background: var(--bg); color: var(--text); } /* ════════════════════ 3. GLOBAL BASE ════════════════════ */ html { color-scheme: dark; } html[data-theme="light"] { color-scheme: light; } html, body { background-color: var(--bg); color: var(--text); font-family: var(--font-sans) !important; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.011em; } /* Material Symbols — refine weight across all pages */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24 !important; } .material-symbols-outlined[data-fill="1"], .sidebar-active .material-symbols-outlined, .tab-active .material-symbols-outlined { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important; } ::selection { background: var(--brand); color: white; } /* ════════════════════ 4. LANDING PAGE OVERRIDES (index.html) ════════════════════ */ /* Background colors */ .bg-\[\#09090b\] { background-color: var(--bg) !important; } .bg-\[\#18181b\] { background-color: var(--surface) !important; } /* Text colors */ .text-\[\#F9FAFB\] { color: var(--text) !important; } .text-\[\#A1A1AA\] { color: var(--text-2) !important; } .text-\[\#92adc9\] { color: var(--text-2) !important; } .text-\[\#8b949e\] { color: var(--text-3) !important; } .text-\[\#6b8cae\] { color: var(--text-3) !important; } /* Borders */ .border-\[\#30363d\] { border-color: var(--border) !important; } /* Hero gradient — desaturate in light mode */ html[data-theme="light"] .hero-gradient { background: radial-gradient(ellipse at 50% 0%, rgba(25,120,229,0.10) 0%, var(--bg) 65%) !important; } :root[data-theme="dark"] .hero-gradient, html.dark .hero-gradient { background: radial-gradient(ellipse at 50% 0%, rgba(25,120,229,0.18) 0%, var(--bg) 65%) !important; } /* glass-panel: re-tint per mode */ .glass-panel { background: color-mix(in srgb, var(--surface) 60%, transparent) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--hairline) !important; } /* Card hover */ .card-hover { border: 1px solid var(--hairline) !important; } .card-hover:hover { border-color: color-mix(in srgb, var(--brand) 35%, transparent) !important; box-shadow: 0 0 30px -8px rgba(25,120,229,0.20) !important; } /* Nav scrolled state */ .nav-scrolled { background: color-mix(in srgb, var(--bg) 95%, transparent) !important; border-bottom: 1px solid var(--hairline) !important; } /* Gradient text — darker stops in light mode so it stays readable on light bg. Use background-image (NOT background shorthand) so background-clip is preserved. */ .grad-text { background-color: transparent !important; background-image: linear-gradient(135deg, var(--brand) 0%, var(--blueprint) 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } html[data-theme="light"] .grad-text { background-image: linear-gradient(135deg, var(--brand-press) 0%, var(--brand) 100%) !important; } /* EZbuild "build" logo span (rendered by sidebar-render.js / new-audit.html with inline gradient style #1978e5→#60b0ff). In light mode the lighter half is invisible on light surfaces — re-tint to a darker gradient via attribute selector + !important. */ html[data-theme="light"] span[style*="linear-gradient(135deg,#1978e5"], html[data-theme="light"] span[style*="linear-gradient(135deg, #1978e5"] { background-image: linear-gradient(135deg, var(--brand-press) 0%, var(--brand) 100%) !important; } /* Counters / stats / dividers */ .divide-white\/\[0\.06\] > * + *, .divide-white\/\[0\.05\] > * + * { border-color: var(--hairline) !important; } .border-white\/\[0\.06\], .border-white\/\[0\.05\], .border-white\/10 { border-color: var(--hairline) !important; } .bg-white\/\[0\.03\], .bg-white\/\[0\.05\] { background-color: var(--surface-2) !important; } /* ════════════════════ 5. LOGIN / AUTH OVERRIDES ════════════════════ */ /* (login.html, signup.html, reset-password.html use a custom palette) */ /* Auth form panel — hardcoded #0b1018 must follow the theme bg in both modes */ .bg-\[\#0b1018\] { background-color: var(--bg) !important; } .focus\:ring-offset-\[\#0b1018\]:focus { --tw-ring-offset-color: var(--bg) !important; } /* Tailwind runtime classes from login.html config */ .bg-surface, .bg-surface-low, .bg-surface-dim { background-color: var(--surface) !important; } .bg-surface-high { background-color: var(--surface-2) !important; } .bg-surface-highest { background-color: var(--surface-3) !important; } .text-on-surface { color: var(--text) !important; } .text-secondary { color: var(--text-2) !important; } .text-outline { color: var(--text-3) !important; } .text-outline-variant { color: var(--text-3) !important; } .border-outline { border-color: var(--border) !important; } .border-outline-variant { border-color: var(--border) !important; } /* Login primary — the inconsistent #4090fe → unify to brand */ .bg-primary-btn { background-color: var(--brand) !important; color: var(--brand-on) !important; } .bg-primary-btn:hover { background-color: var(--brand-hover) !important; } .text-on-primary { color: var(--brand-on) !important; } /* Login uses .text-primary (#aac7ff). Replace with consistent brand-on-soft. */ .text-primary { color: var(--brand-on-soft) !important; } /* Action gradient (login) */ .action-gradient { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-hover) 100%) !important; } .blueprint-gradient { background: linear-gradient(135deg, var(--bg) 0%, var(--surface) 100%) !important; } /* Field-wrap (login's custom input wrapper) */ .field-wrap { background: var(--bg-elevated) !important; border-color: var(--border) !important; } .field-wrap:focus-within { border-color: var(--brand) !important; box-shadow: var(--focus-ring) !important; } /* Higher-specificity selectors so they beat the page's local `.field-input { background-color:#0a1018 !important }` regardless of load order. */ .field-wrap input.field-input, input.field-input { background-color: var(--bg-elevated) !important; color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; /* The page delays background-color by 5000s (anti-autofill hack); that also freezes the theme switch. Transition the theme color quickly instead. */ transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease) !important; } .field-wrap input.field-input:-webkit-autofill, .field-wrap input.field-input:-webkit-autofill:hover, .field-wrap input.field-input:-webkit-autofill:focus, .field-wrap input.field-input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px var(--bg-elevated) inset !important; -webkit-text-fill-color: var(--text) !important; caret-color: var(--text); } .field-wrap input.field-input::placeholder { color: var(--text-3) !important; -webkit-text-fill-color: var(--text-3) !important; } .field-icon { color: var(--text-3) !important; } .field-wrap:focus-within .field-icon { color: var(--brand) !important; } .field-label { color: var(--text-3) !important; } .field-wrap:focus-within .field-label { color: var(--brand) !important; } /* ════════════════════ 6. APP TAILWIND ARBITRARY CLASSES ════════════════════ */ /* Backgrounds */ .bg-\[\#0B111B\], .bg-\[\#0b111b\], .bg-\[\#0d1117\], .bg-\[\#0b0f19\] { background-color: var(--bg) !important; } .bg-\[\#161C26\], .bg-\[\#161c26\] { background-color: var(--surface) !important; } .bg-\[\#111a22\] { background-color: var(--surface) !important; } .bg-\[\#111827\] { background-color: var(--surface) !important; } /* project-detail modals */ .bg-\[\#1c2a38\], .bg-\[\#192633\] { background-color: var(--surface-2) !important; } .bg-\[\#152030\] { background-color: var(--surface-3) !important; } .bg-\[\#1f6feb\], .bg-\[\#137fec\]\/90 { background-color: var(--brand) !important; } /* Borders */ .border-\[\#2A3441\], .border-\[\#324d67\], .border-\[\#3a5470\] { border-color: var(--border) !important; } .border-\[\#137fec\]\/50 { border-color: color-mix(in srgb, var(--brand) 50%, transparent) !important; } /* Background dark/sidebar */ .dark\:bg-background-dark { background-color: var(--bg) !important; } .dark\:bg-card-dark, .dark\:bg-surface-dark, .dark\:bg-sidebar-dark { background-color: var(--surface) !important; } .dark\:border-border-dark { border-color: var(--border) !important; } .dark\:text-text-secondary-dark { color: var(--text-2) !important; } /* App sidebar — exact hex */ #app-sidebar { background-color: var(--sidebar-bg) !important; border-right: 1px solid var(--border) !important; } /* Sidebar active state */ .sidebar-active { color: var(--brand-on-soft) !important; border-right-color: var(--brand-on-soft) !important; background-color: var(--brand-soft) !important; } html[data-theme="light"] .sidebar-active { color: var(--brand) !important; border-right-color: var(--brand) !important; } /* New Audit button — in light mode the solid brand blue reads as a heavy dark slab against the pale sidebar. Lighten it with a subtle top-light gradient and trade the strong blue glow for a soft, integrated shadow. Dark mode keeps the original solid fill (it sits well on the near-black sidebar). */ html[data-theme="light"] #app-sidebar a.bg-primary { background-color: #2A8AEC !important; background-image: linear-gradient(180deg, #3A93EF 0%, #2480E8 100%) !important; box-shadow: 0 2px 8px rgba(25,120,229,0.22), 0 1px 2px rgba(15,23,42,0.05) !important; } html[data-theme="light"] #app-sidebar a.bg-primary:hover { background-image: linear-gradient(180deg, #3088EC 0%, #1E78E2 100%) !important; box-shadow: 0 3px 12px rgba(25,120,229,0.30), 0 1px 2px rgba(15,23,42,0.06) !important; } /* ════════════════════ 6b. CUSTOM TAILWIND COLORS WITH NO LIGHT VARIANT ════════════════════ */ /* project-detail.html / project-specs.html register an `app` color group in js/tailwind-config.js (app.bg, app.panel, app.border, app.textMuted) and tracking.html uses the bare `*-dark` custom colors (background-dark, card-dark, border-dark, text-secondary-dark). All are hardcoded DARK hex with no light pair, so `bg-app-bg` / `bg-card-dark` etc. stay dark in light mode — the page sidebar turns light while the main content stays dark. Map them to theme tokens so they follow both modes. Tailwind generates these utilities without !important, so these win regardless of stylesheet order. */ .bg-app-bg { background-color: var(--bg) !important; } .bg-app-panel { background-color: var(--surface) !important; } .bg-app-panel\/50 { background-color: color-mix(in srgb, var(--surface) 60%, transparent) !important; } .hover\:bg-app-bg\/50:hover { background-color: var(--surface-2) !important; } .bg-app-border { background-color: var(--border) !important; } .border-app-border { border-color: var(--border) !important; } .divide-app-border > * + * { border-color: var(--border) !important; } .text-app-textMuted { color: var(--text-2) !important; } .bg-background-dark { background-color: var(--bg) !important; } .bg-card-dark, .bg-surface-dark { background-color: var(--surface) !important; } .border-border-dark { border-color: var(--border) !important; } .text-text-secondary-dark { color: var(--text-2) !important; } /* ════════════════════ 6c. new-audit.html AUDIT-PROGRESS UI (dark-first) ════════════════════ */ /* The progress card (HTML container + the panels new-audit.js injects) was built dark-only with arbitrary-hex utilities. Map the surfaces/borders to tokens so the card follows light mode. Its text utilities (text-[#4b6080] / #2a3d52 / #94a3b8 and text-slate-*) are already handled by sections 7/8/8b. The blue progress gradient is brand-invariant and left as-is. */ .bg-\[\#141b2a\] { background-color: var(--surface) !important; } /* progress card */ .bg-\[\#0d1825\] { background-color: var(--bg) !important; } /* recessed inner panel */ .bg-\[\#1e2d3d\] { background-color: var(--surface-2) !important; } /* elevated row */ .border-\[\#1e2d3d\], .border-\[\#232F42\] { border-color: var(--border) !important; } /* ════════════════════ 6d. project-specs.html SPEC-EDITOR (inline-styled, dark-first) ════════════════════ */ /* The spec/stud/interior editor rows live in the page's own