/* dark mode — scoped under body.dark-mode */ /* Paint the root dark IMMEDIATELY when the inline head snippet adds .dark-mode to . Without this, renders with its default light background before dealer-theme.js runs at end-of-body and adds .dark-mode to , causing a white flash on every nav. */ html.dark-mode { background-color: #121212; color: #ededed; } /* Smooth transition only during an EXPLICIT user toggle (toggle() adds .theme-transitioning to for ~400ms). Initial load + navigation get instant theme — no slow fade. */ body.theme-transitioning, body.theme-transitioning * { transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), fill 0.35s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; } @media (prefers-reduced-motion: reduce) { body.theme-transitioning, body.theme-transitioning * { transition: none !important; } } /* variable overrides (schema a + schema b) — cushion.so-inspired neutral palette */ html.dark-mode, body.dark-mode { /* --- Schema A (dashboard, account, etc.) --- */ --primary-blue: #0265a1; --primary-dark: #004d80; --primary-darker: #003d66; --primary-light: #1f2937; --white: #1a1a1a; --light-gray: #292929; --gray: #ededed; --dark-gray: #ededed; --navy: #ededed; --black: #ededed; --accent-teal: #0265a1; /* --- Schema B (orders, cart, checkout, etc.) --- */ --primary: #0265a1; --primary-soft: #1f2937; --secondary: #ededed; --accent: #00D4AA; --success: #34D399; --success-soft: rgba(52,211,153,0.1); --warning: #FBBF24; --danger: #F87171; --gray-50: #121212; --gray-100: #212121; --gray-200: #303030; --gray-300: #474747; --gray-400: #7a7a7a; --gray-500: #b5b5b5; --gray-600: rgba(237,237,237,0.75); --gray-700: #ededed; --gray-800: #ededed; --gray-900: #ededed; /* --- Detail page tokens (dealer-detail-shared.css) --- */ --text-base: #ededed; --text-secondary: rgba(237,237,237,0.75); --text-muted: rgba(237,237,237,0.55); --ring: rgba(237,237,237,0.12); --ring-light: rgba(237,237,237,0.06); /* --- Auth pages / styles.css --- */ --gold: #FBBF24; /* --- Shadows — deeper drops + faint inset highlight for that subtle "raised" feel --- */ --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.04); --shadow: 0 1px 3px 0 rgba(0,0,0,0.5), 0 1px 2px -1px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.04); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.5), 0 2px 4px -2px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.05); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.55), 0 4px 6px -4px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.05); --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.6), 0 8px 10px -6px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.06); } /* body & root */ body.dark-mode { background-color: #121212; color: #ededed; } /* header */ body.dark-mode .header { background: #1a1a1a; border-bottom-color: #303030; } body.dark-mode .logo-title { color: #ededed; } body.dark-mode .logo-subtitle { color: #0265a1; } body.dark-mode .logo img { filter: brightness(0) invert(1); } body.dark-mode .search-wrapper input, body.dark-mode .header-search input { background: #292929; border-color: #474747; color: #ededed; } body.dark-mode .search-wrapper input:focus, body.dark-mode .header-search input:focus { border-color: #0265a1; background: #212121; box-shadow: 0 0 0 3px rgba(2,101,161,0.2); } body.dark-mode .search-wrapper input::placeholder, body.dark-mode .header-search input::placeholder { color: rgba(237,237,237,0.55); } body.dark-mode .user-dropdown { background: #292929; } body.dark-mode .user-dropdown:hover { background: #303030; } body.dark-mode .user-name { color: #ededed; } body.dark-mode .user-avatar { color: #ededed; } body.dark-mode .user-dropdown-menu { background: #212121; border-color: #303030; } body.dark-mode .user-dropdown-menu a { color: #ededed; } body.dark-mode .user-dropdown-menu a:hover { background: #292929; color: #0265a1; } body.dark-mode .user-dropdown-menu a svg { color: rgba(237,237,237,0.55); } body.dark-mode .user-dropdown-divider { background: #303030; } body.dark-mode .btn-ghost { color: rgba(237,237,237,0.85); } body.dark-mode .btn-ghost:hover { background: #292929; color: #ededed; } /* nav bar */ body.dark-mode .nav-wrapper { background: #1a1a1a; } body.dark-mode .nav-link { color: rgba(237,237,237,0.8); } body.dark-mode .nav-link:hover { background: rgba(255,255,255,0.1); color: #ededed; } body.dark-mode .nav-link.active { background: rgba(255,255,255,0.15); color: #ededed; } body.dark-mode .mobile-menu-btn span { background: #ffffff; } body.dark-mode .nav-overlay { background: rgba(0, 0, 0, 0.6); } /* cards, panels, tiles */ body.dark-mode .card { background: #1a1a1a; border-color: #303030; } body.dark-mode .card:hover { box-shadow: 0 10px 26px rgba(0,0,0,0.25); border-color: #474747; } body.dark-mode .card-header { border-bottom-color: #303030; background: #121212; } body.dark-mode .card.rail::before { background: #0265a1; } body.dark-mode .panel { background: #1a1a1a; border-left-color: #0265a1; } body.dark-mode .panelHeader { background: rgba(2,101,161,0.08); border-bottom-color: rgba(224,224,224,0.08); } body.dark-mode .topbar { background: #1a1a1a; } body.dark-mode .tile { background: #1a1a1a; } body.dark-mode .tile:hover { background: rgba(2,101,161,0.08); } body.dark-mode .tile .t-icon { background: rgba(2,101,161,0.15); } /* Schema A stat cards / metric cards */ body.dark-mode .stat-card, body.dark-mode .metric-card, body.dark-mode .info-card, body.dark-mode .quick-action-card { background: #1a1a1a; border-color: #303030; } body.dark-mode .stat-card:hover, body.dark-mode .metric-card:hover, body.dark-mode .quick-action-card:hover { border-color: #474747; } /* Order summary cards */ body.dark-mode .order-summary-card { background: #1a1a1a; border-color: #303030; } body.dark-mode .summary-divider { background: #303030; } body.dark-mode .summary-total-box { background: rgba(2,101,161,0.08); } /* Checkout step sections */ body.dark-mode .checkout-section { background: #1a1a1a; border-color: #303030; } body.dark-mode .checkout-section-header { border-bottom-color: #303030; } /* Payment method toggle */ body.dark-mode .payment-method-option { background: #212121; border-color: #474747; } body.dark-mode .payment-method-option:hover { border-color: #0265a1; } body.dark-mode .payment-method-option.selected { border-color: #0265a1; background: rgba(2,101,161,0.08); } body.dark-mode .payment-panel { background: #121212; border-color: #303030; } /* Info rows in detail views */ body.dark-mode .info-row { border-bottom-color: #303030; } body.dark-mode .info-label { color: rgba(237,237,237,0.7); } body.dark-mode .info-value { color: #ededed; } /* tables */ body.dark-mode table th { color: rgba(237,237,237,0.7); border-bottom-color: #303030; } body.dark-mode table td { border-bottom-color: #303030; } body.dark-mode table tbody tr:hover { background: #212121; } body.dark-mode .dash-table th, body.dark-mode .dash-table td { border-bottom-color: #303030; } body.dark-mode .dash-table th { color: rgba(237,237,237,0.7); } body.dark-mode .dash-table tbody tr:hover { background: #212121; } body.dark-mode .order-cell strong { color: #0265a1; } body.dark-mode .items th { background: rgba(2,101,161,0.12); } body.dark-mode .items tbody tr:hover td { background: rgba(2,101,161,0.06); } body.dark-mode .lineTotalRow { background: rgba(2,101,161,0.06); border-top-color: rgba(224,224,224,0.08); } body.dark-mode .sumTotal { background: rgba(2,101,161,0.12); box-shadow: 0 0 0 1px rgba(2,101,161,0.3); } body.dark-mode .sumTotal .lbl, body.dark-mode .sumTotal .val { color: #0265a1; } /* Orders list table */ body.dark-mode .orders-table th { background: #121212; color: rgba(237,237,237,0.7); border-bottom-color: #303030; } body.dark-mode .orders-table td { border-bottom-color: #303030; } body.dark-mode .orders-table tbody tr:hover { background: #212121; } /* forms (overrides dealer-forms.css hardcoded colors) */ body.dark-mode .form-group label, body.dark-mode .form-label, body.dark-mode .modal-form-group label { color: #ededed; } body.dark-mode .form-group input, body.dark-mode .form-group select, body.dark-mode .form-group textarea, body.dark-mode .form-input, body.dark-mode .form-select, body.dark-mode .form-textarea, body.dark-mode .modal-input, body.dark-mode .modal-select, body.dark-mode input[type="text"], body.dark-mode input[type="email"], body.dark-mode input[type="password"], body.dark-mode input[type="number"], body.dark-mode input[type="tel"], body.dark-mode input[type="date"], body.dark-mode input[type="search"], body.dark-mode select, body.dark-mode textarea { background: #292929; border-color: #474747; color: #ededed; box-shadow: 0 1px 4px rgba(0,0,0,0.2); } body.dark-mode .form-group input:focus, body.dark-mode .form-group select:focus, body.dark-mode .form-group textarea:focus, body.dark-mode .form-input:focus, body.dark-mode .form-select:focus, body.dark-mode .form-textarea:focus, body.dark-mode .modal-input:focus, body.dark-mode .modal-select:focus, body.dark-mode input:focus, body.dark-mode select:focus, body.dark-mode textarea:focus { border-color: #0265a1; outline-color: rgba(2,101,161,0.4); background: #212121; } body.dark-mode input::placeholder, body.dark-mode textarea::placeholder { color: rgba(237,237,237,0.55); } body.dark-mode input:disabled, body.dark-mode select:disabled, body.dark-mode textarea:disabled { background: #121212; border-color: #303030; color: rgba(224,224,224,0.4); } /* Field validation errors (dark mode) */ body.dark-mode .form-group.field-error input, body.dark-mode .form-group.field-error select, body.dark-mode .form-group.field-error textarea, body.dark-mode .modal-form-group.field-error input, body.dark-mode .modal-form-group.field-error select, body.dark-mode .modal-form-group.field-error textarea { border-color: #EF4444; background: rgba(239, 68, 68, 0.12); } body.dark-mode .form-group.field-error input:focus, body.dark-mode .form-group.field-error select:focus, body.dark-mode .form-group.field-error textarea:focus, body.dark-mode .modal-form-group.field-error input:focus, body.dark-mode .modal-form-group.field-error select:focus, body.dark-mode .modal-form-group.field-error textarea:focus { border-color: #EF4444; outline: 3px solid rgba(239, 68, 68, 0.25); } /* Filter inputs */ body.dark-mode .filter-input input, body.dark-mode .filter-input select { background: #292929; border-color: #474747; color: #ededed; } body.dark-mode .filter-input input:focus, body.dark-mode .filter-input select:focus { border-color: #0265a1; } body.dark-mode .filter-input input::placeholder { color: rgba(237,237,237,0.55); } /* Buttons */ body.dark-mode .btn-primary { background: #0265a1; color: #ededed; } body.dark-mode .btn-primary:hover { background: #0277bd; } body.dark-mode .btn-secondary, body.dark-mode .btn-outline { background: #292929; border-color: #474747; color: #ededed; } body.dark-mode .btn-secondary:hover, body.dark-mode .btn-outline:hover { background: #303030; border-color: #0265a1; } body.dark-mode .form-btn { background: #0265a1; color: #ededed; } body.dark-mode .form-btn:hover { background: #0277bd; } body.dark-mode .form-btn.secondary { background: #292929; color: #ededed; } body.dark-mode .form-btn.secondary:hover { background: #303030; } body.dark-mode .view-details-btn { background: #292929; border-color: #474747; color: #ededed; } body.dark-mode .view-details-btn:hover { background: #0265a1; border-color: #0265a1; color: #ededed; } body.dark-mode .btn-back-to-cart { background: #292929; border-color: #474747; color: #ededed; } body.dark-mode .btn-back-to-cart:hover { background: #303030; } /* status pills & badges */ body.dark-mode .status-pill.open { background: rgba(251,191,36,0.15); color: #FBBF24; } body.dark-mode .status-pill.shipped { background: rgba(52,211,153,0.15); color: #34D399; } body.dark-mode .status-pill.completed { background: rgba(96,165,250,0.15); color: #60A5FA; } body.dark-mode .status-pill.held { background: rgba(248,113,113,0.15); color: #F87171; } body.dark-mode .status-pill.pending { background: rgba(167,139,250,0.15); color: #A78BFA; } body.dark-mode .status-pill.failed { background: rgba(248,113,113,0.15); color: #F87171; } body.dark-mode .status-pill.pending_review { background: rgba(251,191,36,0.15); color: #FBBF24; } body.dark-mode .chip { background: rgba(2,101,161,0.12); box-shadow: 0 0 0 1px rgba(2,101,161,0.25); } body.dark-mode .tracking-status-badge.delivered { background: rgba(16,185,129,0.15); color: #34D399; } body.dark-mode .tracking-status-badge.in-transit { background: rgba(59,130,246,0.15); color: #60A5FA; } body.dark-mode .tracking-status-badge.picked-up { background: rgba(245,158,11,0.15); color: #FBBF24; } body.dark-mode .tracking-status-badge.exception { background: rgba(239,68,68,0.15); color: #F87171; } body.dark-mode .tracking-status-badge.unknown { background: rgba(156,163,175,0.15); color: #9CA3AF; } body.dark-mode .pill { background: rgba(2,101,161,0.12); color: #0265a1; } /* modals */ body.dark-mode .address-modal-overlay, body.dark-mode .modal-overlay, body.dark-mode [id*="modal-overlay"] { background: rgba(0,0,0,0.7); } body.dark-mode .address-modal, body.dark-mode .modal-content, body.dark-mode .modal, body.dark-mode .product-modal-content { background: #1a1a1a; border-color: #303030; } body.dark-mode .address-modal-header, body.dark-mode .modal-header { border-bottom-color: #303030; } /* parts page JS-generated product modal */ body.dark-mode .product-modal-content .modal-image { background: #292929; } body.dark-mode .product-modal-content .modal-close { background: #303030; color: rgba(237,237,237,0.7); } body.dark-mode .product-modal-content .modal-close:hover { background: #474747; color: #ededed; } /* Button uses color: var(--white) which is dark in dark mode — force real white. */ body.dark-mode .product-modal-content .modal-actions .add-to-cart-btn { color: #ffffff; } body.dark-mode .product-modal-content .modal-actions { border-top-color: #303030; } body.dark-mode .product-modal-content .modal-actions .qty-input, body.dark-mode .product-modal-content .product-variations select { background: #292929; border-color: #474747; color: #ededed; } body.dark-mode .product-modal-content .product-attributes td { border-bottom-color: #303030; } body.dark-mode .product-modal-content .cart-item { border-bottom-color: #303030; } /* EBizCharge payment modal — JS uses inline styles, so !important is required to win */ body.dark-mode #ebiz-iframe-modal > div { background: #1a1a1a !important; box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important; } body.dark-mode #ebiz-iframe-modal > div > div:first-child { border-bottom-color: #303030 !important; } body.dark-mode #ebiz-iframe-modal > div > div:first-child h3 { color: #ededed !important; } body.dark-mode #ebiz-iframe-modal #ebiz-iframe-close { color: rgba(237,237,237,0.7) !important; } body.dark-mode #ebiz-iframe-modal #ebiz-iframe-close:hover { color: #ededed !important; } /* EBizCharge iframe itself stays light — the card form inside is third-party content */ body.dark-mode #ebiz-payment-iframe { background: #ffffff; } /* Invoice "Pay Invoice" modal — also built with inline styles in dealer-invoice-detail.js */ body.dark-mode #invoice-pay-modal > div { background: #1a1a1a !important; box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important; } body.dark-mode #invoice-pay-modal > div > div:first-child { border-bottom-color: #303030 !important; } body.dark-mode #invoice-pay-modal > div > div:first-child h3 { color: #ededed !important; } body.dark-mode #invoice-pay-modal > div > div:first-child button { color: rgba(237,237,237,0.7) !important; } body.dark-mode #invoice-pay-modal > div > div:first-child button:hover { color: #ededed !important; } body.dark-mode #invoice-pay-modal #pay-modal-body { color: #ededed !important; } body.dark-mode #invoice-pay-modal #pay-modal-body > div { color: rgba(237,237,237,0.7) !important; } /* Invoice detail page header action buttons — inline styles + JS hover handlers. !important wins over the inline `style=""` (the JS hover only sets non-important inline). */ body.dark-mode #btn-download-invoice-pdf { background: #292929 !important; color: #ededed !important; border-color: #474747 !important; box-shadow: 0 1px 2px rgba(0,0,0,0.4) !important; } body.dark-mode #btn-download-invoice-pdf:hover { background: #3b3b3b !important; border-color: #5c5c5c !important; } body.dark-mode #copy-inv-btn { color: rgba(237,237,237,0.7) !important; } body.dark-mode #copy-inv-btn:hover { color: #ededed !important; background: #292929 !important; } /* Header nav dropdown menus (shared pattern across most dealer pages) */ body.dark-mode .nav-dropdown-menu { background: #1a1a1a; border-color: #303030; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.04); } body.dark-mode .nav-dropdown-menu a { color: rgba(237,237,237,0.85); } body.dark-mode .nav-dropdown-menu a:hover { background: #292929; color: #ededed; } /* Cart preview dropdown (dealer-brochures.html and similar) */ body.dark-mode .cart-preview { background: #1a1a1a; border-color: #303030; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.5), 0 8px 10px -6px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.04); } body.dark-mode .cart-preview-header { border-bottom-color: #303030; color: #ededed; } body.dark-mode .cart-preview-count, body.dark-mode .cart-preview-empty { color: rgba(237,237,237,0.6); } body.dark-mode .cart-preview-item { border-bottom-color: #303030; } body.dark-mode .cart-preview-item-name { color: #ededed; } /* Address/billing list items — shared on dealer-addresses, dealer-billing, dealer-account */ body.dark-mode .address-item, body.dark-mode .payment-method, body.dark-mode .delete-address-summary { background: #212121; border-color: #303030; } body.dark-mode .address-item:hover, body.dark-mode .payment-method:hover { border-color: #474747; } body.dark-mode .delete-address-summary .address-line { color: rgba(237,237,237,0.7); } /* dealer-marketing card-header has a light gradient — override with a flat dark surface */ body.dark-mode .card-header { background: #121212 !important; } /* JS-generated "Enter card" / "Try Again" dashed buttons inside the invoice pay modal */ body.dark-mode #invoice-pay-modal button[style*="dashed"] { background: #292929 !important; border-color: #474747 !important; color: #60a5fa !important; } body.dark-mode #invoice-pay-modal button[style*="dashed"]:hover { background: #303030 !important; border-color: #5c5c5c !important; } /* JS-generated warning icons in dealer-order-detail.js (and similar) Light amber tint → translucent amber so it reads on dark surfaces */ body.dark-mode .empty .icon[style*="#fff7ed"], body.dark-mode .empty .icon[style*="fff7ed"] { background: rgba(245,158,11,0.12) !important; border-color: rgba(245,158,11,0.3) !important; } /* dealer-company info box — light brand-blue tint → translucent brand on dark */ body.dark-mode .info-box { background: rgba(2,101,161,0.12); } body.dark-mode .info-box p { color: rgba(237,237,237,0.85); } /* dealer-parts.js cart modal — divider inline-styled `border-top:2px solid #eee` */ body.dark-mode .product-modal-content div[style*="solid #eee"] { border-top-color: #303030 !important; } /* dealer-checkout.html payment panel — inline-styled white buttons + radio labels */ body.dark-mode .checkout-layout .payment-panel label[style*="background:white"] { background: #292929 !important; border-color: #474747 !important; color: #ededed !important; } body.dark-mode .checkout-layout .payment-panel label[style*="background:#f0f9ff"] { background: rgba(2,101,161,0.15) !important; border-color: #0265a1 !important; color: #ededed !important; } body.dark-mode .checkout-layout .payment-panel button[style*="dashed"] { background: #292929 !important; border-color: #474747 !important; color: #60a5fa !important; } body.dark-mode .checkout-layout .payment-panel button[style*="dashed"]:hover { background: #303030 !important; border-color: #5c5c5c !important; } /* "Loading saved payment methods..." placeholder + error text inside payment panel */ body.dark-mode .checkout-layout .payment-panel div[style*="color:#6b7280"] { color: rgba(237,237,237,0.6) !important; } /* footer */ body.dark-mode .site-footer { background: #121212; border-top-color: #303030; } body.dark-mode .site-footer__logo-text { color: #ededed; } body.dark-mode .site-footer__nav-group h4 { color: rgba(237,237,237,0.7); } body.dark-mode .site-footer__nav-group a { color: rgba(237,237,237,0.85); } body.dark-mode .site-footer__nav-group a:hover { color: #0265a1; } body.dark-mode .site-footer__social a { opacity: 0.7; } body.dark-mode .site-footer__social a:hover { opacity: 1; } body.dark-mode .site-footer__payments-row img, body.dark-mode .site-footer__payments-ach { opacity: 0.85; } body.dark-mode .site-footer__bottom { border-top-color: #303030; } body.dark-mode .site-footer__copyright, body.dark-mode .site-footer__legal a { color: rgba(237,237,237,0.55); } body.dark-mode .site-footer__legal a:hover { color: rgba(237,237,237,0.85); } /* loading & misc */ body.dark-mode .page-loader, body.dark-mode .loading-overlay { background: rgba(15,15,35,0.85); } body.dark-mode .spinner, body.dark-mode .loader-ring { border-color: #303030; border-top-color: #0265a1; } body.dark-mode .empty { border-color: #474747; background: #121212; } body.dark-mode .notification { background: #292929; } body.dark-mode .notification-info { background: rgba(2,101,161,0.15); border-color: #0265a1; color: #0265a1; } body.dark-mode .notification-error { background: rgba(248,113,113,0.15); border-color: #F87171; color: #F87171; } body.dark-mode .notification-success { background: rgba(52,211,153,0.15); border-color: #34D399; color: #34D399; } body.dark-mode .trackDrawer { background: #121212; } body.dark-mode .trackMap { background: #212121; border-color: #303030; } body.dark-mode .tracking-error { background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.3); color: #F87171; } /* Pagination / load more */ body.dark-mode .load-more-btn { background: #292929; border-color: #474747; color: #ededed; } body.dark-mode .load-more-btn:hover { background: #303030; border-color: #0265a1; } /* Alerts and notices */ body.dark-mode .alert, body.dark-mode .notice { background: #212121; border-color: #303030; color: #ededed; } /* Tabs */ body.dark-mode .tab, body.dark-mode .tab-btn { color: rgba(237,237,237,0.7); border-bottom-color: transparent; } body.dark-mode .tab.active, body.dark-mode .tab-btn.active { color: #0265a1; border-bottom-color: #0265a1; } /* Step indicators (checkout) */ body.dark-mode .step .step-number { background: #292929; border-color: #474747; color: rgba(237,237,237,0.7); } body.dark-mode .step.active .step-number { background: #0265a1; border-color: #0265a1; color: #ededed; } body.dark-mode .step.completed .step-number { background: #34D399; border-color: #34D399; color: #ededed; } body.dark-mode .step .step-label { color: rgba(237,237,237,0.7); } body.dark-mode .step.active .step-label { color: #ededed; } /* Breadcrumbs */ body.dark-mode .breadcrumb a { color: #0265a1; } body.dark-mode .breadcrumb span { color: rgba(237,237,237,0.7); } /* Horizontal rules */ body.dark-mode hr { border-color: #303030; } /* Links — slightly brighter blue for readability on dark backgrounds */ body.dark-mode a { color: #4A9ED4; } body.dark-mode a:hover { color: #6BB5E0; } /* language dropdown */ body.dark-mode .lang-dropdown-btn { background: #292929; border-color: #474747; color: #ededed; } body.dark-mode .lang-dropdown-btn:hover { background: #212121; border-color: #0265a1; } body.dark-mode .lang-dropdown-menu { background: #212121; border-color: #303030; } body.dark-mode .lang-option { color: #ededed; } body.dark-mode .lang-option:hover { background: #292929; } body.dark-mode .lang-option.active { background: rgba(2,101,161,0.12); color: #0265a1; } /* auth pages (login, register, forgot) */ body.dark-mode .login-header, body.dark-mode .register-header, body.dark-mode .forgot-header { background: #1a1a1a; border-bottom-color: #303030; } body.dark-mode .login-hero, body.dark-mode .register-hero, body.dark-mode .forgot-hero { background: #1a1a1a; } body.dark-mode .login-form, body.dark-mode .register-form, body.dark-mode .forgot-form, body.dark-mode .login-card, body.dark-mode .register-card { background: #1a1a1a; border-color: #303030; } body.dark-mode .login-support, body.dark-mode .register-help { background: #121212; border-color: #303030; } body.dark-mode .header-contact a { color: #ededed; } body.dark-mode .header-contact a:hover { color: #0265a1; } /* scrollbar */ body.dark-mode ::-webkit-scrollbar { width: 8px; } body.dark-mode ::-webkit-scrollbar-track { background: #121212; } body.dark-mode ::-webkit-scrollbar-thumb { background: #474747; border-radius: 4px; } body.dark-mode ::-webkit-scrollbar-thumb:hover { background: #6b6b8a; } /* dark mode toggle button */ .theme-toggle-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: var(--gray-100, var(--light-gray, #F3F4F6)); border: 1px solid var(--gray-200, #E5E7EB); border-radius: 6px; cursor: pointer; transition: all 0.2s ease; color: var(--gray-600, var(--dark-gray, #4B5563)); flex-shrink: 0; } .theme-toggle-btn:hover { border-color: var(--primary, var(--primary-blue, #0265a1)); background: var(--white, #ffffff); } .theme-toggle-btn svg { width: 18px; height: 18px; transition: transform 0.3s ease; } body.dark-mode .theme-toggle-btn { background: #292929; border-color: #474747; color: #FBBF24; } body.dark-mode .theme-toggle-btn:hover { background: #212121; border-color: #FBBF24; } /* moon in light, sun in dark */ .theme-toggle-btn .icon-sun { display: none; } .theme-toggle-btn .icon-moon { display: block; } body.dark-mode .theme-toggle-btn .icon-sun { display: block; } body.dark-mode .theme-toggle-btn .icon-moon { display: none; } /* search dropdown */ body.dark-mode .us-dropdown { background: #212121; border-color: #474747; box-shadow: 0 10px 25px -5px rgba(0,0,0,.4); } body.dark-mode .us-section-title { color: rgba(237,237,237,0.65); border-color: #303030; } body.dark-mode .us-item { color: #ededed; } body.dark-mode .us-item:hover, body.dark-mode .us-item.us-active { background: rgba(2,101,161,0.15); color: #ededed; } body.dark-mode .us-item-icon.us-page { background: #303030; color: #818cf8; } body.dark-mode .us-item-icon.us-part { background: #1a3a2a; color: #34d399; } body.dark-mode .us-item-icon.us-resource { background: #3a2a1a; color: #fbbf24; } body.dark-mode .us-item-icon.us-thispage { background: #3a1a1a; color: #f87171; } body.dark-mode .us-item-label mark { background: #92400e; color: #fde68a; } body.dark-mode .us-item-meta, body.dark-mode .us-item-desc { color: rgba(237,237,237,0.55); } body.dark-mode .us-item-thumb { border-color: #474747; background: #292929; } body.dark-mode .us-view-all { color: #4A9ED4; border-color: #303030; } body.dark-mode .us-view-all:hover { background: #292929; } body.dark-mode .us-empty, body.dark-mode .us-loading { color: rgba(237,237,237,0.55); } body.dark-mode .us-flash-highlight { animation-name: us-flash-dark; } @keyframes us-flash-dark { 0% { background-color: rgba(251,191,36,.25); } 100% { background-color: transparent; } } /* part detail page */ body.dark-mode .breadcrumb { color: rgba(237,237,237,0.55); } body.dark-mode .breadcrumb a { color: #4A9ED4; } body.dark-mode .breadcrumb a:hover { color: #6BB5E0; } body.dark-mode .breadcrumb .current { color: #ededed; } body.dark-mode .breadcrumb .sep { color: #474747; } body.dark-mode .back-link { color: #4A9ED4; } body.dark-mode .back-link:hover { color: #6BB5E0; } body.dark-mode .part-images { background: #212121; border-color: #474747; } body.dark-mode .part-image-main { background: #121212; } body.dark-mode .part-gallery { border-color: #303030; } body.dark-mode .part-gallery-thumb { background: #292929; border-color: transparent; } body.dark-mode .part-gallery-thumb:hover, body.dark-mode .part-gallery-thumb.active { border-color: #0265a1; } body.dark-mode .part-info__category { color: #4A9ED4; } body.dark-mode .part-info__name { color: #ededed; } body.dark-mode .part-info__sku { color: rgba(237,237,237,0.65); background: #292929; } body.dark-mode .part-info__price { color: #34d399; } body.dark-mode .part-info__price .net-label { color: rgba(237,237,237,0.55); } body.dark-mode .part-info__description { color: rgba(237,237,237,0.8); } body.dark-mode .part-variations__label { color: #ededed; } body.dark-mode .part-variations__select { background: #292929; border-color: #474747; color: #ededed; } body.dark-mode .part-variations__select:focus { border-color: #0265a1; box-shadow: 0 0 0 3px rgba(2,101,161,0.2); } body.dark-mode .part-cart__qty { border-color: #474747; } body.dark-mode .part-cart__qty-btn { background: #292929; color: #ededed; } body.dark-mode .part-cart__qty-btn:hover { background: #303030; } body.dark-mode .part-cart__qty-input { background: #212121; border-color: #474747; color: #ededed; } body.dark-mode .part-cart__add-btn { background: #0265a1; } body.dark-mode .part-cart__add-btn:hover { background: #0277bd; } body.dark-mode .part-cart__add-btn.added { background: #059669; } body.dark-mode .part-attributes { background: #212121; border-color: #474747; } body.dark-mode .part-attributes__title { color: #ededed; border-color: #474747; } body.dark-mode .part-attributes__table tr:nth-child(even) { background: #292929; } body.dark-mode .part-attributes__table td { border-color: #303030; } body.dark-mode .part-attributes__table td:first-child { color: #ededed; } body.dark-mode .part-attributes__table td:last-child { color: rgba(237,237,237,0.7); } body.dark-mode .part-not-found svg { color: #474747; } body.dark-mode .part-not-found h3 { color: #ededed; } body.dark-mode .part-not-found p { color: rgba(237,237,237,0.55); } body.dark-mode .part-not-found .back-btn { color: #4A9ED4; } /* brand usage policy modal */ body.dark-mode .brand-policy-overlay { background: rgba(0,0,0,0.75); } body.dark-mode .brand-policy-box { background: #1a1a1a; } body.dark-mode .brand-policy-header { border-bottom-color: #303030; } body.dark-mode .brand-policy-header h3 { color: #ededed; } body.dark-mode .brand-policy-body h4 { color: #ededed; } body.dark-mode .brand-policy-body p, body.dark-mode .brand-policy-body li { color: #d1d5db; } body.dark-mode .brand-policy-body .effective-date { color: #9CA3AF; } body.dark-mode .brand-policy-footer { border-top-color: #303030; } body.dark-mode .brand-policy-checkbox label { color: #ededed; } /* recommendations carousel */ body.dark-mode .carousel-card { background: #1a1a1a; border-color: #303030; } body.dark-mode .carousel-card:hover { border-color: #3d3d5f; box-shadow: 0 2px 12px rgba(100, 100, 200, 0.1); } body.dark-mode .carousel-card__name { color: #ededed; } body.dark-mode .carousel-card__category { color: #9ca3af; } body.dark-mode .carousel-card__sku { color: #6b7280; } body.dark-mode .carousel-card__price { color: #ededed; } body.dark-mode .carousel-card__add { background: #2563eb; } body.dark-mode .carousel-card__add:hover { background: #1d4ed8; } body.dark-mode .carousel-card__image { background: #212121; } body.dark-mode .carousel-arrow { background: #1a1a1a; border-color: #303030; color: rgba(237,237,237,0.7); } body.dark-mode .carousel-arrow:hover { background: #292929; border-color: #474747; } body.dark-mode .carousel-skeleton-card { background: linear-gradient(90deg, #292929 25%, #1a1a1a 50%, #292929 75%); background-size: 200% 100%; } body.dark-mode .recommendations-section__title { color: #ededed; } /* ────────────────────────────────────────────────────────────────────────── Tailwind-driven pages: dealer-cart.html (#cart-root) and dealer-checkout.html (.checkout-layout). These two are the only pages loading the Tailwind CDN, and their utility classes (bg-white, border-slate-X, text-slate-X) win on specificity over our generic body.dark-mode rules. The selectors below are scoped to those two wrappers so they don't leak to any other page. ────────────────────────────────────────────────────────────────────────── */ /* Surfaces */ html.dark-mode #cart-root .bg-white, html.dark-mode .checkout-layout .bg-white { background-color: #1a1a1a !important; } html.dark-mode #cart-root .bg-slate-50, html.dark-mode .checkout-layout .bg-slate-50 { background-color: #121212 !important; } html.dark-mode #cart-root .bg-slate-100, html.dark-mode .checkout-layout .bg-slate-100 { background-color: #292929 !important; } html.dark-mode #cart-root .bg-gray-100 { background-color: #292929 !important; } /* Tinted notices — dim the saturated light backgrounds for dark mode */ html.dark-mode .checkout-layout .bg-amber-50 { background-color: rgba(251,191,36,0.08) !important; } html.dark-mode .checkout-layout .bg-rose-50 { background-color: rgba(248,113,113,0.08) !important; } html.dark-mode .checkout-layout .border-amber-100 { border-color: rgba(251,191,36,0.25) !important; } html.dark-mode .checkout-layout .text-amber-900 { color: #fcd34d !important; } html.dark-mode .checkout-layout .text-rose-500 { color: #fca5a5 !important; } html.dark-mode .checkout-layout .hover\:bg-rose-50:hover { background-color: rgba(248,113,113,0.12) !important; } html.dark-mode .checkout-layout .hover\:border-rose-300:hover { border-color: #fca5a5 !important; } html.dark-mode .checkout-layout .hover\:text-rose-600:hover { color: #fca5a5 !important; } /* Borders */ html.dark-mode #cart-root .border-slate-200, html.dark-mode #cart-root .border-t.border-slate-200, html.dark-mode .checkout-layout .border-slate-200 { border-color: #303030 !important; } html.dark-mode .checkout-layout .border-slate-300 { border-color: #474747 !important; } html.dark-mode .checkout-layout .border-slate-400 { border-color: #5c5c5c !important; } html.dark-mode .checkout-layout .border-slate-900 { border-color: #ededed !important; } html.dark-mode .checkout-layout .hover\:border-slate-500:hover { border-color: #5c5c5c !important; } html.dark-mode .checkout-layout .hover\:border-slate-600:hover { border-color: #7a7a7a !important; } /* Translucent ring (e.g. ring-slate-200/60) */ html.dark-mode .checkout-layout [class*="ring-slate-"] { --tw-ring-color: rgba(237,237,237,0.1) !important; } /* Text */ html.dark-mode #cart-root .text-slate-900, html.dark-mode .checkout-layout .text-slate-900, html.dark-mode .checkout-layout .text-slate-800 { color: #ededed !important; } html.dark-mode .checkout-layout .text-slate-700 { color: rgba(237,237,237,0.85) !important; } html.dark-mode #cart-root .text-slate-600, html.dark-mode #cart-root .text-gray-500, html.dark-mode .checkout-layout .text-slate-600, html.dark-mode .checkout-layout .text-slate-500 { color: rgba(237,237,237,0.75) !important; } html.dark-mode #cart-root .text-slate-400, html.dark-mode #cart-root .text-gray-300, html.dark-mode .checkout-layout .text-slate-400 { color: rgba(237,237,237,0.45) !important; } /* Hovers */ html.dark-mode #cart-root .hover\:text-slate-900:hover, html.dark-mode .checkout-layout .hover\:text-slate-900:hover { color: #ededed !important; } html.dark-mode .checkout-layout .hover\:text-slate-600:hover { color: rgba(237,237,237,0.75) !important; } html.dark-mode #cart-root .hover\:bg-slate-50:hover, html.dark-mode #cart-root .hover\:bg-slate-100:hover, html.dark-mode .checkout-layout .hover\:bg-slate-50:hover, html.dark-mode .checkout-layout .hover\:bg-slate-100:hover { background-color: #292929 !important; } /* Card shadows — subtle inset highlight + deeper drop so cards still "lift" off the dark bg */ html.dark-mode #cart-root .shadow-sm, html.dark-mode .checkout-layout .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.04) !important; } html.dark-mode .checkout-layout .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.55), 0 4px 6px -4px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.05) !important; } /* Body bg on cart page — overrides Tailwind's bg-slate-50 on */ html.dark-mode body.bg-slate-50 { background-color: #121212 !important; } /* ────────────────────────────────────────────────────────────────────────── Sweep: page-specific boxes with hardcoded light backgrounds that the generic var()-based dark palette doesn't reach. Grouped by component. ────────────────────────────────────────────────────────────────────────── */ /* Shared header — cart preview + nav dropdown bits */ body.dark-mode .cart-preview-footer { background: #212121; border-top-color: #303030; } body.dark-mode .cart-preview-qty-btn { background: #292929; color: #ededed; } body.dark-mode .cart-preview-qty-btn:hover { background: #303030; } body.dark-mode .nav-dropdown-item:hover { background: #292929; } /* Dashboard — quick action tiles, summary/chevron buttons */ body.dark-mode .action-item { background: #212121; border-color: #303030; } body.dark-mode .action-item:hover { background: #292929; } body.dark-mode .summary-btn, body.dark-mode .chev { background: #292929; border-color: #303030; color: #ededed; } body.dark-mode .summary-btn:hover, body.dark-mode .chev:hover { background: #303030; } /* Dashboard — feedback modal */ body.dark-mode .feedback-modal { background: #1a1a1a; border-color: #303030; } body.dark-mode .feedback-type-btn { background: #212121; border-color: #303030; color: #ededed; } body.dark-mode .feedback-type-btn:hover { background: #292929; } body.dark-mode .feedback-close:hover { background: #292929; } /* Account/billing — misc buttons */ body.dark-mode .btn-white { background: #292929; border-color: #474747; color: #ededed; } body.dark-mode .btn-white:hover, body.dark-mode .collapse-btn:hover { background: #303030; } /* Invoices — invoice card */ body.dark-mode .inv-card { background: #1a1a1a; border-color: #303030; } /* Team page — member rows + role cards */ body.dark-mode .team-member, body.dark-mode .role-card { background: #212121; border-color: #303030; } body.dark-mode .team-member:hover { border-color: #474747; } /* admin role dot is dark navy (#2c3e50) — lighten so it's visible on dark */ body.dark-mode .role-card h5 .role-dot.admin { background: #94a3b8; } /* Service page — warranty claim items + uploader sections */ body.dark-mode .claim-item, body.dark-mode .wc-section { background: #1a1a1a; border-color: #303030; } body.dark-mode .claim-empty, body.dark-mode .wc-uploader { background: #212121; border-color: #303030; } body.dark-mode .wc-uploader:hover, body.dark-mode .wc-uploader:focus-within { background: rgba(2,101,161,0.1); border-color: #0265a1; } body.dark-mode .claim-skel { background: #212121; } body.dark-mode .claim-skel::before { background: #303030; } /* Service status badges — translucent tints so they read on dark */ body.dark-mode .status-badge.pending { background: rgba(251,191,36,0.15); color: #fcd34d; } body.dark-mode .status-badge.denied { background: rgba(248,113,113,0.15); color: #fca5a5; } /* Warranty-claim detail modal (dealer-warranty.js injects these styles at runtime; body.dark-mode prefix wins on specificity over the injected .wc-* rules) */ body.dark-mode .wc-modal { background: #1a1a1a; box-shadow: 0 24px 64px rgba(0,0,0,0.6); } body.dark-mode .wc-modal-header { border-bottom-color: #303030; } body.dark-mode .wc-modal-sub, body.dark-mode .wc-modal-close, body.dark-mode .wc-modal-section h4, body.dark-mode .wc-kv dt, body.dark-mode .wc-tl-head .wc-tl-when, body.dark-mode .wc-loading { color: rgba(237,237,237,0.6); } body.dark-mode .wc-modal-close:hover { color: #ededed; background: #292929; } body.dark-mode .wc-kv dd, body.dark-mode .wc-tl-head, body.dark-mode .wc-tl-text { color: #ededed; } body.dark-mode .wc-desc { background: #212121; color: rgba(237,237,237,0.85); } body.dark-mode .wc-files a { background: #292929; color: #4A9ED4; } body.dark-mode .wc-files a:hover { background: #303030; } body.dark-mode .wc-timeline:before { background: #303030; } body.dark-mode .wc-tl-dot { background: #1a1a1a; border-color: #5c5c5c; } /* timeline tags — translucent tints */ body.dark-mode .wc-tl-head .wc-tl-tag { background: rgba(99,102,241,0.2); color: #a5b4fc; } body.dark-mode .wc-tl-head .wc-tl-tag.dealer { background: rgba(34,197,94,0.2); color: #86efac; } body.dark-mode .wc-tl-head .wc-tl-tag.team { background: rgba(245,158,11,0.2); color: #fcd34d; } /* ────────────────────────────────────────────────────────────────────────── Full-portal sweep — remaining boxes (light bg) + text (too dark for dark bg). Brand-blue (#0265a1/#006897) and green/amber accents are left as-is: they stay legible on dark surfaces. Only genuinely-dark text is lifted. ────────────────────────────────────────────────────────────────────────── */ /* Cart preview total — dark #1F2937 text, appears on ~12 pages */ body.dark-mode .cart-preview-total strong { color: #ededed; } /* Brochures — PDF viewer chrome */ body.dark-mode .viewer-header { background: #212121; border-color: #303030; } body.dark-mode .viewer-btn { color: #ededed; } body.dark-mode .viewer-btn:hover { background: #292929; } /* Certificates — upload zone + file preview */ body.dark-mode .zone-list label:hover { background: #292929; } body.dark-mode .file-preview { background: #212121; border-color: #303030; } /* Checkout — order-total text (dark navy #033c63) + estimate notice */ body.dark-mode .summary-row.total .label, body.dark-mode .summary-row.total .value, body.dark-mode .total-label, body.dark-mode .total-amount { color: #ededed; } body.dark-mode .shipping-estimate-notice { color: #ededed; } body.dark-mode .confirm-modal-icon { background: rgba(248,113,113,0.15); } body.dark-mode .addr-card-btn.delete-btn:hover { background: rgba(248,113,113,0.12); } /* Marketing — brand/social cards + headings (#1A1A2E) */ body.dark-mode .brand-item { background: #1a1a1a; border-color: #303030; } body.dark-mode .brand-preview { background: #212121; } body.dark-mode .marketing-info h4, body.dark-mode .brand-item h4, body.dark-mode .social-info h4 { color: #ededed; } /* Invoice detail — card title (#0f172a) was invisible on the now-dark inv-card */ body.dark-mode .inv-card-title { color: #ededed; } /* Parts — active filter chip */ body.dark-mode .active-filter-chip { background: rgba(2,101,161,0.18); color: #4A9ED4; } /* Quick-order page — table, autocomplete, buttons, summary */ body.dark-mode .qo-table th { background: #212121; } body.dark-mode .qo-table tr:hover { background: #292929; } body.dark-mode .qo-input.error { background: rgba(248,113,113,0.12); } body.dark-mode .qo-autocomplete { background: #1a1a1a; border-color: #303030; } body.dark-mode .qo-ac-thumb { background: #292929; } body.dark-mode .qo-remove-btn:hover { background: rgba(248,113,113,0.12); } body.dark-mode .qo-btn-secondary { background: #292929; border-color: #474747; color: #ededed; } body.dark-mode .qo-btn-secondary:hover { background: #303030; } body.dark-mode .qo-summary { background: #212121; border-color: #303030; } body.dark-mode .qo-ac-price, body.dark-mode .qo-product-name, body.dark-mode .qo-summary strong, body.dark-mode .qo-summary-total-label { color: #ededed; } /* Resources — list items */ body.dark-mode .resource-item { background: #1a1a1a; border-color: #303030; } body.dark-mode .resource-meta > span:first-child { background: #292929; } /* Register/reset/forgot/team-register — info notice + success messages */ body.dark-mode .register-notice { background: rgba(2,101,161,0.12); border-color: rgba(2,101,161,0.3); } body.dark-mode .register-notice p { color: #93c5fd; } body.dark-mode .success-message { background: rgba(52,211,153,0.12); border-color: rgba(52,211,153,0.3); color: #6ee7b7; } body.dark-mode .success-message h3, body.dark-mode .verification-result.success .result-label, body.dark-mode .verification-result .business-name { color: #6ee7b7; } /* reduced motion */ @media (prefers-reduced-motion: reduce) { body { transition: none; } }