/* ============================================================= AUTOMATIQUO — THEME DARK Applied when is present. All rules scoped to html.theme-dark to avoid specificity wars. ============================================================= */ html.theme-dark { color-scheme: dark; /* ── Dark mode custom properties ── */ --aq-bg-base: #0c1526; --aq-bg-alt: #0f1a30; --aq-surface: #152035; --aq-surface-elevated: #1c2d47; --aq-surface-subtle: #1c2d47; --aq-border-soft: rgba(255, 255, 255, 0.08); --aq-border-strong: rgba(201, 162, 58, 0.45); --aq-text-strong: #f1f5f9; --aq-text-body: #cbd5e1; --aq-text-muted: #94a3b8; --aq-text-faint: #64748b; --aq-accent: #c9a23a; --aq-accent-soft: #f4d46a; --aq-success-soft: #34d399; --aq-danger-soft: #f87171; } /* ── Base body ── */ html.theme-dark body { background-color: var(--aq-bg-base); color: var(--aq-text-body); } html.theme-dark body.home { background: var(--aq-bg-base) !important; } /* Override Tailwind's bg-white on body */ html.theme-dark body.bg-white { background-color: var(--aq-bg-base) !important; } /* ── Headings (Tailwind base sets color: #0a0a0a) ── */ html.theme-dark h1, html.theme-dark h2, html.theme-dark h3, html.theme-dark h4, html.theme-dark h5, html.theme-dark h6 { color: var(--aq-text-strong); } /* ── Light base cards ── */ html.theme-dark .aq-card { background: var(--aq-surface) !important; border-color: var(--aq-border-soft) !important; } html.theme-dark .aq-card.group:hover { border-color: var(--aq-border-strong) !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3) !important; } /* ── Pricing cards ── */ html.theme-dark .pricing-card { background: var(--aq-surface) !important; border-color: var(--aq-border-soft) !important; box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28) !important; } html.theme-dark .pricing-card.recommended { border-color: var(--aq-accent) !important; box-shadow: 0 20px 42px rgba(201, 162, 39, 0.18) !important; } /* Non-featured pricing button has inline style="background: #ffffff" */ html.theme-dark .pricing-card a:not(.aq-btn-primary) { background: var(--aq-surface-elevated) !important; border-color: var(--aq-border-soft) !important; color: var(--aq-text-strong) !important; box-shadow: none !important; } /* ── Form panel (quote form + contact form) ── */ html.theme-dark .aq-form-panel-dark { background: var(--aq-surface) !important; border-color: var(--aq-border-soft) !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32) !important; } html.theme-dark .aq-form-panel-dark h2 { color: var(--aq-text-strong) !important; } html.theme-dark .aq-form-panel-dark p, html.theme-dark .aq-form-panel-dark .text-slate-600 { color: var(--aq-text-muted) !important; } html.theme-dark .aq-form-panel-dark label, html.theme-dark .aq-form-panel-dark legend { color: var(--aq-text-body) !important; } /* Checkbox container */ html.theme-dark .aq-form-panel-dark fieldset > div { background: var(--aq-surface-subtle) !important; border-color: var(--aq-border-soft) !important; } html.theme-dark .aq-form-panel-dark fieldset label, html.theme-dark .aq-form-panel-dark fieldset span { color: var(--aq-text-body) !important; } /* ── All inputs ── */ html.theme-dark .aq-input { background: var(--aq-surface-subtle) !important; border-color: var(--aq-border-soft) !important; color: var(--aq-text-strong) !important; } html.theme-dark .aq-input::placeholder { color: var(--aq-text-faint) !important; } html.theme-dark .aq-input:focus { border-color: var(--aq-accent) !important; box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.15) !important; } html.theme-dark select.aq-input option { background: var(--aq-surface-elevated); color: var(--aq-text-body); } /* ── Mobile menu ── */ html.theme-dark .aq-mobile-menu { background: var(--aq-surface) !important; border-color: var(--aq-border-soft) !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32) !important; } html.theme-dark .aq-mobile-menu a { color: var(--aq-text-body) !important; } html.theme-dark .aq-mobile-menu a:hover { color: var(--aq-text-strong) !important; } /* ── Carousel buttons ── */ html.theme-dark .aq-carousel-btn { background: var(--aq-surface) !important; border-color: var(--aq-border-soft) !important; color: var(--aq-text-muted) !important; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2) !important; } html.theme-dark .aq-carousel-btn:hover { color: var(--aq-accent) !important; border-color: rgba(230, 168, 23, 0.32) !important; background: rgba(230, 168, 23, 0.08) !important; } /* ── Icon tiles ── */ html.theme-dark .aq-icon-tile { background: var(--aq-surface-subtle) !important; border-color: rgba(255, 255, 255, 0.06) !important; color: var(--aq-text-muted) !important; } /* ── Alert states (brighter colours on dark bg) ── */ html.theme-dark .aq-alert-dark-success { background: rgba(52, 211, 153, 0.1) !important; color: #34d399 !important; border-color: rgba(52, 211, 153, 0.22) !important; } html.theme-dark .aq-alert-dark-warning { background: rgba(245, 158, 11, 0.1) !important; color: #fbbf24 !important; border-color: rgba(245, 158, 11, 0.22) !important; } html.theme-dark .aq-alert-dark-error { background: rgba(239, 68, 68, 0.1) !important; color: #f87171 !important; border-color: rgba(239, 68, 68, 0.22) !important; } /* ── Theme toggle icon swap ── */ html.theme-dark .aq-theme-icon-sun { display: block; } html.theme-dark .aq-theme-icon-moon { display: none; } /* ── Smooth theme transition ── */ html.theme-dark body, html.theme-dark .pricing-card, html.theme-dark .aq-form-panel-dark, html.theme-dark .aq-input, html.theme-dark .aq-mobile-menu, html.theme-dark .aq-card, html.theme-dark .aq-card-dark, html.theme-dark .aq-carousel-btn { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; }