/* Copyright (c) 2026 LandmarkLouie. Platform-wide design override. * * High-specificity !important rules that win against inline styles * scattered through app.html / index.html / demo. Single source of * truth for the "warm luxury dark" look without rewriting 5,000 * lines of legacy inline markup. * * Load AFTER design-tokens.css. Load in every HTML . */ /* ── Body defaults ── */ body { font-family: var(--font-sans, -apple-system, 'Inter', sans-serif) !important; -webkit-font-smoothing: antialiased; } /* ── Kill the blank-section reveal bug permanently ── */ .reveal, .fade-in, [data-animate], [class*="reveal"] { opacity: 1 !important; transform: none !important; visibility: visible !important; } /* ── Kill orange DEMO banner ── */ #demo-banner, .demo-banner, [class*="demo-banner"], [class*="demo-notice"] { background: var(--color-dark-1) !important; color: var(--color-gold) !important; border-bottom: 1px solid var(--color-gold-border) !important; } #demo-banner span[style*="background"], .demo-banner span[style*="background"] { background: var(--color-gold) !important; color: var(--color-dark-2) !important; } /* ── Big centered LOUIE text (empty-state) — gold, not blue ── */ .empty-state .logo, .empty-state > .logo, div.empty-state div.logo { color: var(--color-gold) !important; font-family: var(--font-serif) !important; opacity: 0.5 !important; letter-spacing: 0.12em !important; font-weight: 400 !important; } /* ── Button normalization — 3 accepted styles ── */ /* Blue-primary buttons → gold */ button[style*="background:#1a56db"], button[style*="background: #1a56db"], button[style*="background:#1B6EC2"], button[style*="background: #1B6EC2"], button[style*="background:rgb(26, 86, 219)"], button[style*="background:rgb(26,86,219)"], button[style*="background: rgb(26, 86, 219)"] { background: var(--color-gold) !important; color: var(--color-dark-2) !important; border: none !important; border-radius: var(--radius-md) !important; font-weight: 600 !important; } /* Purple buttons → gold */ button[style*="#7c3aed"], button[style*="#8b5cf6"], button[style*="#6366f1"], button[style*="rgb(124, 58, 237)"], button[style*="rgb(124,58,237)"] { background: var(--color-gold) !important; color: var(--color-dark-2) !important; border: none !important; } /* Orange buttons (leftover warning-like) → gold */ button[style*="#f59e0b"], button[style*="#d97706"], button[style*="rgb(245, 158, 11)"], button[style*="rgb(217, 119, 6)"] { background: var(--color-gold) !important; color: var(--color-dark-2) !important; } /* Generic .btn-primary / .primary class names */ .btn-primary:not(.btn-ghost):not(.btn-secondary), button.primary:not(.ghost):not(.secondary) { background: var(--color-gold) !important; color: var(--color-dark-2) !important; border: none !important; border-radius: var(--radius-md) !important; font-weight: 600 !important; cursor: pointer; font-family: var(--font-sans) !important; transition: background 0.2s; } .btn-primary:hover:not(.btn-ghost):not(.btn-secondary), button.primary:hover:not(.ghost):not(.secondary) { background: var(--color-gold-dark) !important; } /* ── Modal header: dark navy + gold left border ── */ .modal-header, [class*="modal-header"], div[class*="modal"] > div:first-child[style*="padding"][style*="background"] { background: var(--color-dark-1) !important; color: var(--color-text-on-dark) !important; border-left: 4px solid var(--color-gold) !important; } /* ── Louie avatar: gold circle ── */ .louie-avatar, .avatar.louie, [class*="louie-avatar"] { background: var(--color-gold) !important; color: var(--color-dark-2) !important; } /* ── Form inputs: gold focus ring ── */ input:focus, textarea:focus, select:focus { outline: none !important; border-color: var(--color-gold) !important; box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.2) !important; } /* ── Code blocks: dark + serif? no — mono ── */ pre, code, [class*="code-block"] { font-family: var(--font-mono, 'Fira Code', 'SF Mono', 'Courier New', monospace) !important; } pre { background: #fdf8ee !important; color: #4a3728 !important; border: 1px solid rgba(201, 168, 76, 0.25) !important; border-radius: var(--radius-sm) !important; } pre code { color: #4a3728 !important; background: none !important; } /* ── Sidebar active item: gold left accent ── */ .nav-item.active, .sidebar-item.active, [class*="sidebar"] [class*="active"] { background: rgba(201, 168, 76, 0.12) !important; border-left: 3px solid var(--color-gold) !important; color: var(--color-gold) !important; } /* ── Status badges ── */ [class*="badge-funded"], .status-funded, [class*="-funded"] { background: var(--color-success-bg) !important; color: var(--color-success) !important; border-radius: 20px !important; } [class*="badge-pending"], .status-pending { background: var(--color-warning-bg) !important; color: var(--color-warning) !important; } [class*="badge-declined"], .status-declined { background: var(--color-danger-bg) !important; color: var(--color-danger) !important; } /* ── Final sweep: any inline-styled #f59e0b / #d97706 backgrounds (if the earlier sed missed any JS template literals) ── */ [style*="#f59e0b"], [style*="#d97706"] { /* Only override the color family, not selective usage */ } /* Sidebar badge dark variant */ .sidebar-badge.dark { background: var(--color-dark-2) !important; color: var(--color-gold) !important; }