/* ══════════════════════════════════════════════════════════════════ THEME NOIR — dark automotive command-deck theme for the whole app. Scoped to body.theme-noir. Overrides design tokens (re-themes every component that uses var(--*)) + the handful of hardcoded surfaces and Tailwind color utilities used inline. Petrol base · amber signature. ══════════════════════════════════════════════════════════════════ */ /* Dark, thin scrollbars everywhere (kills the jarring white default). Unscoped on purpose — this stylesheet only ever loads on the dark app, and the main viewport scrollbar belongs to , not a .theme-noir descendant. */ html { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) rgba(0,0,0,0.2); background: #090c11; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: rgba(0,0,0,0.22); } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.30); background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } /* The top nav scrolls horizontally on narrow widths — hide its bar entirely. */ .theme-noir .app-header nav { scrollbar-width: none; -ms-overflow-style: none; } .theme-noir .app-header nav::-webkit-scrollbar { display: none; width: 0; height: 0; } body.theme-noir { /* Token override — cascades to every component using var(--*) */ --bg: #0a0e13; --surface: #141b24; --surface-elevated: #1a222d; --border: rgba(255, 255, 255, 0.085); --border-strong: rgba(255, 255, 255, 0.18); --text: #EDF1F5; --text-secondary: #9CAABB; --muted: #7F8EA0; --accent: #FF8A2B; --accent-hover: #FF7A2B; --success: #34D399; --warning: #FBBF24; --danger: #FB7185; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow: 0 26px 60px -24px rgba(0, 0, 0, 0.75); color: var(--text); background: radial-gradient(120% 60% at 85% -5%, rgba(255, 138, 43, 0.10), transparent 55%), radial-gradient(90% 60% at 5% 105%, rgba(255, 90, 31, 0.07), transparent 55%), #090c11; background-attachment: fixed; } /* Faint HUD grid behind the whole app */ body.theme-noir::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(120, 150, 180, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 150, 180, 0.035) 1px, transparent 1px); background-size: 52px 52px; -webkit-mask-image: radial-gradient(130% 90% at 50% 0%, #000 40%, transparent 85%); mask-image: radial-gradient(130% 90% at 50% 0%, #000 40%, transparent 85%); } body.theme-noir > * { position: relative; z-index: 1; } /* ── App shell ── */ .theme-noir .app-header { background: rgba(10, 14, 19, 0.72); border-bottom: 1px solid var(--border); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .theme-noir .app-nav-tab.is-active { color: #fff; } .theme-noir .app-nav-tab.is-active::after { background: linear-gradient(90deg, #FFC24B, #FF5A1F); height: 2px; box-shadow: 0 0 10px rgba(255, 138, 43, 0.6); } /* Brand mark → amber (bg-neutral-900 is only the logo tile) */ .theme-noir .bg-neutral-900 { background: linear-gradient(135deg, #FFC24B, #FF5A1F) !important; color: #10141b !important; box-shadow: 0 6px 18px -6px rgba(255, 120, 30, 0.6); } /* ── Cards get depth + a hover lift (the "3D" feel) ── */ .theme-noir .metric-card, .theme-noir .section-card, .theme-noir .pricing-card { background: linear-gradient(168deg, rgba(26, 34, 45, 0.9), rgba(17, 23, 31, 0.92)); border: 1px solid var(--border); box-shadow: 0 20px 45px -28px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.05); transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .theme-noir .metric-card:hover, .theme-noir .pricing-card:hover { transform: translateY(-3px); border-color: rgba(255, 138, 43, 0.35); box-shadow: 0 30px 60px -26px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 138, 43, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06); } .theme-noir .metric-card__value { color: #F4F8FC; } .theme-noir .section-card__header { border-bottom-color: var(--border); } /* ── Buttons ── */ .theme-noir .btn-primary, .theme-noir .btn-accent { background: linear-gradient(100deg, #FFC24B, #FF7A2B 55%, #FF5A1F); color: #1a0f04; border: none; font-weight: 700; box-shadow: 0 12px 28px -12px rgba(255, 110, 30, 0.6); } .theme-noir .btn-primary:hover, .theme-noir .btn-accent:hover { filter: brightness(1.06); box-shadow: 0 16px 34px -12px rgba(255, 110, 30, 0.8); } .theme-noir .btn-secondary { background: rgba(255, 255, 255, 0.06); color: var(--text); border: 1px solid var(--border); } .theme-noir .btn-secondary:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--border-strong); } .theme-noir .btn-ghost { color: var(--text-secondary); } .theme-noir .btn-ghost:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); } /* ── Form controls ── */ .theme-noir .field-input { background: rgba(9, 13, 18, 0.7); border-color: var(--border); color: var(--text); } .theme-noir .field-input::placeholder { color: #5D6B7C; } .theme-noir .field-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 138, 43, 0.16); background: rgba(9, 13, 18, 0.9); } .theme-noir select.field-input option { background: #141b24; color: var(--text); } /* ── Tables ── */ .theme-noir .data-table th { background: rgba(255, 255, 255, 0.03); color: var(--muted); border-bottom-color: var(--border); } .theme-noir .data-table td { border-bottom-color: var(--border); } .theme-noir .data-table tbody tr:hover { background: rgba(255, 255, 255, 0.035); } /* ── Toggles / tabs / sandbox ── */ .theme-noir .sandbox-tabs, .theme-noir .auth-toggle { background: rgba(9, 13, 18, 0.6); border: 1px solid var(--border); } .theme-noir .sandbox-tab.is-active { background: rgba(255, 255, 255, 0.08); color: #fff; } .theme-noir .toggle-pill { background: rgba(255, 255, 255, 0.06); color: var(--text-secondary); border: 1px solid var(--border); } .theme-noir .toggle-pill.is-on { background: rgba(255, 138, 43, 0.16); color: #FFC26B; border-color: rgba(255, 138, 43, 0.3); } /* ── Status badges / pills (pastels → dark tints) ── */ .theme-noir .status-badge--active { background: rgba(52, 211, 153, 0.14); color: #4ADE9E; } .theme-noir .status-badge--depleted { background: rgba(251, 191, 36, 0.14); color: #FBCE5A; } .theme-noir .status-badge--inactive { background: rgba(251, 113, 133, 0.14); color: #FF8B9C; } .theme-noir .endpoint-pill--search { background: rgba(61, 133, 214, 0.16); color: #7FB8FF; } .theme-noir .endpoint-pill--lot { background: rgba(139, 92, 246, 0.16); color: #B79BFF; } .theme-noir .endpoint-pill--other { background: rgba(255, 255, 255, 0.06); color: var(--text-secondary); } .theme-noir .credit-spent--free { background: rgba(52, 211, 153, 0.14); color: #4ADE9E; border-color: rgba(52, 211, 153, 0.3); } .theme-noir .log-level--info { background: rgba(61, 133, 214, 0.12); color: #7FB8FF; } .theme-noir .chip--neutral { background: rgba(255, 255, 255, 0.06); color: var(--text-secondary); border-color: var(--border); } .theme-noir .chip--accent { background: rgba(255, 138, 43, 0.14); color: #FFC26B; border-color: rgba(255, 138, 43, 0.3); } .theme-noir .chip--success { background: rgba(52, 211, 153, 0.14); color: #4ADE9E; border-color: rgba(52, 211, 153, 0.3); } .theme-noir .chip--danger { background: rgba(251, 113, 133, 0.14); color: #FF8B9C; border-color: rgba(251, 113, 133, 0.3); } .theme-noir .automation-status-pill { background: rgba(255, 255, 255, 0.06); color: var(--muted); } .theme-noir .automation-status-pill.is-live { background: rgba(52, 211, 153, 0.14); color: #4ADE9E; border-color: rgba(52, 211, 153, 0.3); } .theme-noir .log-level-pill { background: rgba(255, 255, 255, 0.06); } .theme-noir .log-level--error { background: rgba(251, 113, 133, 0.14); color: #FF8B9C; } .theme-noir .log-level--warning { background: rgba(251, 191, 36, 0.14); color: #FBCE5A; } .theme-noir .mini-chip { background: rgba(255, 255, 255, 0.06); color: #B4C0CD; } .theme-noir .usage-bar { background: rgba(255, 255, 255, 0.08); } .theme-noir .usage-bar > span { background: linear-gradient(90deg, #FFC24B, #FF5A1F); } /* ── API key box / JSON console ── */ .theme-noir .api-key-box { background: rgba(9, 13, 18, 0.7); border-color: var(--border); color: var(--text); } .theme-noir .json-output { background: #070a0e; border: 1px solid var(--border); } /* ── Pricing featured + badge ── */ .theme-noir .pricing-card--featured { border-color: rgba(255, 138, 43, 0.5); box-shadow: 0 0 0 1px rgba(255, 138, 43, 0.25), var(--shadow); } .theme-noir .pricing-card__badge { background: linear-gradient(100deg, #FFC24B, #FF5A1F); color: #1a0f04; } /* ── Car preview cards ── */ .theme-noir .car-card { background: rgba(20, 27, 36, 0.9); border-color: var(--border); } .theme-noir .car-card:hover { border-color: rgba(255, 138, 43, 0.3); } .theme-noir .car-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255, 138, 43, 0.22); } .theme-noir .car-card__img { background-color: #0d141c; } .theme-noir .car-card__title { color: #E9EEF4; } .theme-noir .car-card__meta { color: var(--muted); } /* ── Modal / toast ── */ .theme-noir .modal-card { background: linear-gradient(165deg, rgba(26, 34, 45, 0.96), rgba(15, 20, 27, 0.98)); border-color: var(--border-strong); } .theme-noir .toast { background: #1a222d; color: #fff; border: 1px solid var(--border-strong); } /* ── Tailwind color utilities used inline (light → dark equivalents) ── */ .theme-noir .text-neutral-900, .theme-noir .text-neutral-800, .theme-noir .text-neutral-700 { color: var(--text) !important; } .theme-noir .text-neutral-600 { color: #B4C0CD !important; } .theme-noir .text-neutral-500 { color: var(--text-secondary) !important; } .theme-noir .text-neutral-400 { color: var(--muted) !important; } .theme-noir .text-neutral-300 { color: #6C7A8B !important; } .theme-noir .text-red-800, .theme-noir .text-red-700, .theme-noir .text-red-600 { color: #FF8B9C !important; } .theme-noir .bg-red-50 { background-color: rgba(251, 113, 133, 0.1) !important; } .theme-noir .border-red-200 { border-color: rgba(251, 113, 133, 0.28) !important; } .theme-noir .text-emerald-600, .theme-noir .text-emerald-500 { color: #4ADE9E !important; } .theme-noir .bg-emerald-50 { background-color: rgba(52, 211, 153, 0.14) !important; } .theme-noir .bg-blue-50 { background-color: rgba(61, 133, 214, 0.16) !important; } .theme-noir .text-blue-600 { color: #7FB8FF !important; } .theme-noir .bg-violet-50 { background-color: rgba(139, 92, 246, 0.16) !important; } .theme-noir .text-violet-600 { color: #B79BFF !important; } /* code/kbd tokens inside light-styled help text */ .theme-noir code { color: #FFC26B; } /* Carfax button on preview car cards */ .car-card__carfax { margin-top: 6px; width: 100%; font-size: 10px; font-weight: 600; padding: 4px 6px; border-radius: 7px; cursor: pointer; background: rgba(255,138,43,0.14); color: #FFC26B; border: 1px solid rgba(255,138,43,0.28); transition: background .15s; } .car-card__carfax:hover { background: rgba(255,138,43,0.24); }