/* ===== Base Typography ===== */ body { font-family: 'Plus Jakarta Sans', sans-serif; } /* ===== Theme System ===== Light theme is default. Dark theme activates via .dark on . All surface/text/border colors are mapped through CSS custom properties so the entire UI inverts without touching Tailwind classes in HTML/JS. */ :root { /* Surfaces */ --surface-body: #f8fafc; /* slate-50 */ --surface-sidebar: #ffffff; --surface-card: #ffffff; --surface-card-inner: #f1f5f9; /* slate-100 */ --surface-input: #f1f5f9; --surface-hover: #e2e8f0; /* slate-200 */ --surface-overlay: rgba(0, 0, 0, 0.3); /* Borders */ --border-default: #e2e8f0; /* slate-200 */ --border-subtle: #cbd5e1; /* slate-300 */ --border-divider: #e2e8f0; /* Text */ --text-primary: #0f172a; /* slate-900 */ --text-secondary: #1e293b; /* slate-800 */ --text-tertiary: #334155; /* slate-700 — body text, readable on white */ --text-muted: #475569; /* slate-600 — secondary info */ --text-faint: #94a3b8; /* slate-400 — labels, divider text */ --text-inverse: #ffffff; /* Accent (ukvi blue) */ --accent: #005a9c; --accent-hover: #00497f; --accent-bg: rgba(0, 90, 156, 0.08); --accent-border: rgba(0, 90, 156, 0.20); --accent-text: #005a9c; /* Status */ --emerald-text: #047857; --emerald-bg: rgba(16, 185, 129, 0.08); --emerald-border: rgba(16, 185, 129, 0.20); --amber-text: #b45309; --amber-bg: rgba(217, 119, 6, 0.08); --amber-border: rgba(217, 119, 6, 0.20); --rose-text: #be123c; --rose-bg: rgba(244, 63, 94, 0.08); --rose-border: rgba(244, 63, 94, 0.20); --red-text: #dc2626; /* Glass */ --glass-bg: rgba(255, 255, 255, 0.8); /* Toast */ --toast-bg: #ffffff; --toast-border: #e2e8f0; /* Scrollbar */ --scrollbar-track: #f1f5f9; --scrollbar-thumb: #cbd5e1; --scrollbar-hover: #94a3b8; /* Gradient */ --gradient-from: rgba(0, 90, 156, 0.06); --gradient-via: rgba(99, 102, 241, 0.04); } html.dark { --surface-body: #0f172a; --surface-sidebar: #020617; --surface-card: #020617; --surface-card-inner: #0f172a; --surface-input: #0f172a; --surface-hover: #1e293b; --surface-overlay: rgba(0, 0, 0, 0.5); --border-default: #1e293b; --border-subtle: #334155; --border-divider: #1e293b; --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-tertiary: #94a3b8; --text-muted: #64748b; --text-faint: #475569; --text-inverse: #0f172a; --accent: #005a9c; --accent-hover: #6d9bbb; --accent-bg: rgba(0, 90, 156, 0.10); --accent-border: rgba(0, 90, 156, 0.25); --accent-text: #6d9bbb; --emerald-text: #34d399; --emerald-bg: rgba(16, 185, 129, 0.06); --emerald-border: rgba(16, 185, 129, 0.20); --amber-text: #fbbf24; --amber-bg: rgba(217, 119, 6, 0.06); --amber-border: rgba(217, 119, 6, 0.20); --rose-text: #fb7185; --rose-bg: rgba(244, 63, 94, 0.06); --rose-border: rgba(244, 63, 94, 0.20); --red-text: #f87171; --glass-bg: rgba(15, 23, 42, 0.6); --toast-bg: #0f172a; --toast-border: #1e293b; --scrollbar-track: #0f172a; --scrollbar-thumb: #1e293b; --scrollbar-hover: #334155; --gradient-from: rgba(0, 90, 156, 0.15); --gradient-via: rgba(99, 102, 241, 0.08); } /* ===== Apply Theme Variables ===== Override Tailwind utility classes to use the CSS variables. This means ALL existing bg-slate-900, text-slate-400, etc. in the HTML automatically adapt to the active theme without any class changes. */ /* --- Body & Root Surfaces --- */ html { background: var(--surface-body) !important; } body { color: var(--text-primary) !important; } /* --- Sidebar --- */ #app-sidebar { background: var(--surface-sidebar) !important; border-color: var(--border-default) !important; } /* --- Main content area --- */ #main-workspace > main { background: var(--surface-body) !important; } /* --- Header bar --- */ .glass-panel { background: var(--glass-bg) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: var(--border-default) !important; } /* --- Cards (bg-slate-950, bg-slate-900) --- */ .bg-slate-950 { background: var(--surface-card) !important; } .bg-slate-900 { background: var(--surface-card-inner) !important; } .bg-slate-900\/60 { background: var(--surface-card-inner) !important; } .bg-slate-900\/40 { background: var(--surface-card-inner) !important; } .bg-slate-800 { background: var(--surface-hover) !important; } .bg-slate-950\/40 { background: var(--surface-card) !important; } .bg-slate-950\/60 { background: var(--surface-card) !important; } /* --- Borders --- */ .border-slate-800 { border-color: var(--border-default) !important; } .border-slate-800\/60 { border-color: var(--border-default) !important; } .border-slate-800\/40 { border-color: var(--border-default) !important; } .border-slate-700 { border-color: var(--border-subtle) !important; } .border-slate-900 { border-color: var(--border-default) !important; } /* --- Text --- */ .text-white { color: var(--text-primary) !important; } .text-slate-100 { color: var(--text-primary) !important; } .text-slate-200 { color: var(--text-secondary) !important; } .text-slate-300 { color: var(--text-secondary) !important; } .text-slate-400 { color: var(--text-tertiary) !important; } .text-slate-500 { color: var(--text-muted) !important; } .text-slate-600 { color: var(--text-faint) !important; } /* --- Accent --- */ .bg-ukvi-500\/10, .bg-ukvi-500\/5 { background: var(--accent-bg) !important; } .border-ukvi-500\/20, .border-ukvi-500\/30, .border-ukvi-500\/40 { border-color: var(--accent-border) !important; } .text-ukvi-400, .text-ukvi-300 { color: var(--accent-text) !important; } .border-ukvi-500\/50 { border-color: var(--accent) !important; } .border-ukvi-500 { border-color: var(--accent) !important; } /* Accent solid button stays the same in both themes */ .bg-ukvi-500 { background: var(--accent) !important; color: #fff !important; } .bg-ukvi-500:hover, .hover\:bg-ukvi-400:hover { background: var(--accent-hover) !important; } /* --- Status Colors --- */ .text-emerald-400, .text-emerald-300 { color: var(--emerald-text) !important; } .bg-emerald-500\/10, .bg-emerald-500\/5, .bg-emerald-500\/20 { background: var(--emerald-bg) !important; } .border-emerald-500\/20, .border-emerald-500\/30 { border-color: var(--emerald-border) !important; } .text-amber-400, .text-amber-300 { color: var(--amber-text) !important; } .bg-amber-500\/10, .bg-amber-500\/5 { background: var(--amber-bg) !important; } .border-amber-500\/20, .border-amber-500\/30 { border-color: var(--amber-border) !important; } .text-rose-400, .text-rose-300 { color: var(--rose-text) !important; } .bg-rose-500\/10, .bg-rose-500\/5 { background: var(--rose-bg) !important; } .border-rose-500\/20, .border-rose-500\/30 { border-color: var(--rose-border) !important; } .text-red-400, .text-red-500 { color: var(--red-text) !important; } .border-red-500\/30 { border-color: var(--rose-border) !important; } .bg-red-500\/10, .bg-red-500\/5 { background: var(--rose-bg) !important; } /* --- Inputs --- */ input, select, textarea { background: var(--surface-input) !important; border-color: var(--border-default) !important; color: var(--text-primary) !important; } input::placeholder, textarea::placeholder { color: var(--text-muted) !important; } /* --- Sidebar overlay --- */ #sidebar-overlay.active { background: var(--surface-overlay) !important; } /* --- Hover states --- */ .hover\:bg-slate-900:hover, .hover\:bg-slate-800:hover { background: var(--surface-hover) !important; } .hover\:text-slate-200:hover { color: var(--text-primary) !important; } .hover\:text-white:hover { color: var(--text-primary) !important; } /* --- Lock screen --- */ #lock-screen { background: var(--surface-body) !important; } #lock-card { background: var(--surface-card) !important; border-color: var(--border-default) !important; } /* --- Gradients --- */ .bg-gradient-to-r, .bg-gradient-to-br, .bg-gradient-to-b { background: linear-gradient(to right, var(--gradient-from), var(--gradient-via), transparent) !important; } /* --- Scrollbars --- */ ::-webkit-scrollbar-track { background: var(--scrollbar-track) !important; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb) !important; border-color: var(--scrollbar-track) !important; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover) !important; } /* --- Checkboxes --- */ input[type="checkbox"] { accent-color: var(--accent) !important; } /* ===== Readability Scaling ===== The UI uses Tailwind's text-[11px] and text-xs extensively. These are fine for badges/labels but too small for body content. Scale up all body text in the main content area for readability. */ /* Body text: 11px → 13px */ .content-scroll .text-\[11px\] { font-size: 13px !important; line-height: 1.65 !important; } /* Section headings: text-xs (12px) → 14px */ .content-scroll h3.text-xs, .content-scroll h4.text-xs { font-size: 14px !important; } /* Paragraph text-xs → 13px */ .content-scroll p.text-xs { font-size: 13px !important; line-height: 1.65 !important; } /* List items inside content */ .content-scroll li .text-\[11px\], .content-scroll ul .text-\[11px\] { font-size: 13px !important; line-height: 1.65 !important; } /* Callout box padding: more breathing room */ .content-scroll .rounded-lg.p-2\.5 { padding: 0.75rem !important; } /* Keep badges, tags, and UI chrome at original small size */ .content-scroll span.uppercase.tracking-wider { font-size: 11px !important; line-height: 1.4 !important; } .content-scroll .font-mono.text-\[11px\] { font-size: 11px !important; } /* ===== Inline Text Flow Fix ===== flex containers used for "Use prompt:" and "Open tool:" callout rows use items-start + a single wrapper so the icon stays pinned left and all text flows naturally - no further CSS override needed. */ /* ===== Prompt Filter Pill Row ===== Horizontally scrollable, single row, no visible scrollbar. */ .prompt-filter-row { -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; } .prompt-filter-row::-webkit-scrollbar { display: none; } /* ===== Lock Screen Gradient ===== */ .lock-gradient { background: radial-gradient(circle at top right, rgba(0, 90, 156, 0.06), var(--surface-body) 60%); } html.dark .lock-gradient { background: radial-gradient(circle at top right, rgba(0, 90, 156, 0.3), #020617 60%); } /* ===== Toast Animations ===== */ @keyframes toast-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } } @keyframes toast-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(24px); } } .toast-item { opacity: 0; } /* ===== Custom Scrollbars ===== */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 9999px; border: 2px solid var(--scrollbar-track); } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); } /* ===== Roadmap Step Cards ===== */ .roadmap-step-card { transition: border-color 0.2s ease; } .roadmap-step-card:has(.roadmap-step-body:not(.hidden)) { border-color: var(--accent-border); } .roadmap-step-header { transition: background 0.15s ease; } /* ===== Mobile Sidebar ===== */ #sidebar-overlay { display: none; } #sidebar-overlay.active { display: block; } /* ===== Mobile Responsive ===== */ @media (max-width: 1023px) { /* Sidebar as slide-out drawer on mobile */ #app-sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; width: 280px; transform: translateX(-100%); transition: transform 0.3s ease; } #app-sidebar.open { transform: translateX(0); } /* Overlay backdrop */ #sidebar-overlay { position: fixed; inset: 0; background: var(--surface-overlay); z-index: 40; } /* Header adjustments */ .header-bar { padding-left: 1rem; padding-right: 1rem; } /* Content area padding */ .content-scroll { padding: 1rem; } /* Metric cards: stack to 1 column */ .metrics-top-grid { grid-template-columns: 1fr; } /* Lock screen adjustments */ #lock-card { margin: 1rem; } } @media (min-width: 1024px) { #app-sidebar { position: relative; transform: none !important; } #sidebar-overlay { display: none !important; } .hamburger-btn { display: none !important; } } /* Portrait orientation: force financial tab to stack like mobile */ @media (orientation: portrait) and (min-width: 1024px) { #tab-content-finance .grid.lg\:grid-cols-12 { grid-template-columns: 1fr !important; } #tab-content-finance .grid.lg\:grid-cols-12 > .lg\:col-span-5, #tab-content-finance .grid.lg\:grid-cols-12 > .lg\:col-span-7 { grid-column: span 1 !important; } #tab-content-finance .grid.lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* Print Styles */ @media print { * { color: black !important; border-color: #ccc !important; box-shadow: none !important; } html, body { background: white !important; color: black !important; overflow: visible !important; height: auto !important; width: 100% !important; } /* Hide non-printable elements */ #app-sidebar, #lock-screen, .no-print, button, #toast-container, .fixed, #sidebar-overlay { display: none !important; } /* Show input fields with their values for print */ input[type="text"], input[type="number"], input[type="date"] { border: none !important; background: transparent !important; padding: 0 !important; padding-left: 0 !important; font-weight: bold !important; -webkit-appearance: none; } /* Show selects and textareas as static text in print */ select, textarea { border: none !important; background: transparent !important; padding: 0 !important; font-weight: bold !important; -webkit-appearance: none; pointer-events: none; } /* Hide currency symbol overlays - they overlap values in print */ .currency-field-symbol { display: none !important; } /* Remove ALL layout constraints that clip content - critical for mobile */ #main-workspace, #main-workspace > main, .content-scroll, .flex-grow, .overflow-y-auto, .overflow-hidden { overflow: visible !important; height: auto !important; max-height: none !important; position: static !important; display: block !important; margin: 0 !important; padding: 0 !important; } /* Override Tailwind h-full/h-screen that constrain to viewport */ .h-full, .h-screen, [class*="h-full"], [class*="h-screen"] { height: auto !important; } /* Neutralize flexbox - it constrains content to viewport on mobile */ #main-workspace { display: block !important; width: 100% !important; } /* Override mobile sidebar fixed positioning so print ignores it cleanly */ #app-sidebar { position: static !important; transform: none !important; display: none !important; } /* Show only the currently active tab */ [id^="tab-content-"] { display: none !important; } [id^="tab-content-"]:not(.hidden) { display: block !important; } /* Strip dark backgrounds */ .bg-slate-950, .bg-slate-900, .bg-slate-800, .bg-gradient-to-r, .bg-gradient-to-b, [class*="bg-"] { background: white !important; } /* Ensure text is visible */ .text-white, .text-slate-300, .text-slate-400, .text-slate-500, .text-ukvi-400, .text-emerald-400, .text-amber-400, .text-rose-400 { color: #222 !important; } h2, h3, strong { color: black !important; } /* Page breaks */ .rounded-2xl { page-break-inside: avoid; margin-bottom: 12px !important; border: 1px solid #ddd !important; padding: 12px !important; } /* Remove fixed widths */ .max-w-6xl, .max-w-3xl { max-width: 100% !important; } /* Grid to single column for print */ .grid { display: block !important; } .grid > * { margin-bottom: 8px !important; } /* Readiness progress bar - show with visible border for print */ #readiness-overall-bar { border: 1px solid #999 !important; } /* Fee calculator result table - preserve table layout for print */ .divide-y > * { border-bottom: 1px solid #ddd !important; padding: 8px 12px !important; } /* Hidden tab content - ensure only active tab prints */ .hidden { display: none !important; } }