/* Dark theme — near-black base, dark blue surfaces, light text (toggle via [data-theme="dark"] on ) */ [data-theme="dark"] { color-scheme: dark; --text-dark: #f1f5f9; --text-medium: #cbd5e1; --text-light: #94a3b8; --bg-white: #152032; --bg-light: #1a2332; --bg-metal: #243044; --border-color: #334155; --primary-color: #2d4a6f; --primary-dark: #060a0f; --primary-light: #64748b; --pipe-gray: #4a6fa5; --drill-dark: #1a3050; --machining-steel: #7c9eb8; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45); } [data-theme="dark"] body { background-color: #0a0e14; color: var(--text-dark); } [data-theme="dark"] .main-header { background-color: var(--bg-white); border-bottom: 1px solid var(--border-color); } [data-theme="dark"] .nav-menu > li > a { color: var(--text-dark); } [data-theme="dark"] .nav-menu > li > a:hover, [data-theme="dark"] .nav-menu > li > a.active { background-color: var(--primary-color); color: #ffffff; } [data-theme="dark"] .dropdown { background-color: var(--bg-light); border: 1px solid var(--border-color); } [data-theme="dark"] .dropdown li a { color: var(--text-medium); } [data-theme="dark"] .dropdown li a:hover { background-color: var(--bg-metal); color: var(--text-dark); } /* Hero / page banner: always light text on photo (not --bg-white, which is a dark surface token in this theme). html[data-theme="dark"] beats late-loaded sheets (e.g. products.css tagline color). */ html[data-theme="dark"] .page-header, html[data-theme="dark"] .hero-banner { background-color: #070a10; color: #ffffff; } html[data-theme="dark"] .page-header h1, html[data-theme="dark"] .hero-banner .hero-banner__title, html[data-theme="dark"] .hero-banner h1 { color: #ffffff; } html[data-theme="dark"] .page-header .tagline, html[data-theme="dark"] .page-header.products-banner .tagline, html[data-theme="dark"] .hero-banner .tagline { color: rgba(255, 255, 255, 0.95); } html[data-theme="dark"] .page-header .breadcrumb a { color: #ffffff; } html[data-theme="dark"] .page-header .breadcrumb span { color: rgba(255, 255, 255, 0.55); } html[data-theme="dark"] .page-header .breadcrumb .breadcrumb-text { color: rgba(255, 255, 255, 0.95); } /* Header logo: dark mode uses assets/logo-mwdpro-dark-mode.png via theme-init / main.js — same .logo-img size as light mode */ html[data-theme="dark"] .logo:hover .logo-img, html[data-theme="dark"] .logo:focus-visible .logo-img { opacity: 0.92; } [data-theme="dark"] .about-text .lead { background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-metal) 100%); } [data-theme="dark"] .about-text .closing-statement { background: linear-gradient(135deg, var(--bg-metal) 0%, var(--bg-light) 100%); } [data-theme="dark"] .home-intro-card, [data-theme="dark"] .home-cta-box, [data-theme="dark"] .home-page .home-highlights .highlight-card { background: var(--bg-metal); } [data-theme="dark"] .location-search h3 { color: var(--text-light); } [data-theme="dark"] .search-input { background-color: var(--bg-light); border-color: var(--border-color); color: var(--text-dark); } [data-theme="dark"] .search-input::placeholder { color: var(--text-light); } [data-theme="dark"] .search-btn { background-color: var(--primary-color); } [data-theme="dark"] .search-btn:hover { background-color: var(--accent-color); } [data-theme="dark"] .mobile-menu-toggle { color: var(--text-dark); } [data-theme="dark"] .section-title { color: var(--text-dark); } /* Theme toggle control */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-light); color: var(--text-dark); cursor: pointer; transition: var(--transition); } .theme-toggle:hover { border-color: var(--accent-color); color: var(--accent-color); background: var(--bg-metal); } .theme-toggle:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; } .theme-toggle i { font-size: 15px; } [data-theme="dark"] .theme-toggle { background: var(--bg-metal); border-color: var(--border-color); color: #fbbf24; } [data-theme="dark"] .theme-toggle:hover { color: var(--accent-color); border-color: var(--accent-color); } @media (max-width: 768px) { .nav-theme-toggle { width: 100%; } .nav-theme-toggle .theme-toggle { width: 100%; justify-content: flex-start; padding: 12px 16px; height: auto; min-height: 44px; gap: 10px; } } /* Client portal login (login.css loads after this file — use html[data-theme] for specificity) */ html[data-theme="dark"] .login-section { background: linear-gradient(135deg, #0a0e14 0%, var(--bg-light) 100%); } html[data-theme="dark"] .login-box { background-color: var(--bg-light); border-color: var(--border-color); } html[data-theme="dark"] .login-form { background: transparent; } /* Header strip: must not use --bg-white (dark token in this theme) */ html[data-theme="dark"] .login-header { color: #ffffff; } html[data-theme="dark"] .login-header h2, html[data-theme="dark"] .login-header p { color: #ffffff; } html[data-theme="dark"] .login-header p { opacity: 0.92; } /* Form body */ html[data-theme="dark"] .form-group label { color: #e2e8f0; } html[data-theme="dark"] .form-group input { background-color: var(--bg-metal); border-color: var(--border-color); color: #f1f5f9; } html[data-theme="dark"] .form-group input::placeholder { color: #94a3b8; opacity: 1; } html[data-theme="dark"] .form-group input:focus { background-color: var(--bg-light); color: #f8fafc; } html[data-theme="dark"] .toggle-password { color: #cbd5e1; } html[data-theme="dark"] .remember-me { color: #cbd5e1; } /* Primary button: force light label (base rule used var(--bg-white)) */ html[data-theme="dark"] .login-btn, html[data-theme="dark"] .login-btn i { color: #ffffff; } html[data-theme="dark"] .login-btn.loading::after { border-top-color: #ffffff; } html[data-theme="dark"] .login-footer { background-color: var(--bg-metal); border-top-color: var(--border-color); color: #cbd5e1; } html[data-theme="dark"] .login-footer a { color: var(--accent-color); } /* Benefits panel: force light copy (base used var(--bg-white)) */ html[data-theme="dark"] .login-info { color: #ffffff; border-left-color: var(--accent-color); } html[data-theme="dark"] .login-info h3 { color: #ffffff; } html[data-theme="dark"] .benefits-list li { color: rgba(255, 255, 255, 0.95); } html[data-theme="dark"] .security-notice p { color: rgba(255, 255, 255, 0.92); opacity: 1; } html[data-theme="dark"] .login-error { color: #fca5a5; background-color: rgba(127, 29, 29, 0.35); } html[data-theme="dark"] .login-success { color: #86efac; background-color: rgba(20, 83, 45, 0.35); } /* Product cards */ [data-theme="dark"] .product-card { border: 1px solid var(--border-color); } /* Product pages: Add to Quote & Request Quote use color: var(--bg-white) in products.css — fix for dark theme */ html[data-theme="dark"] .add-to-quote-btn, html[data-theme="dark"] .add-to-quote-btn i { color: #ffffff; } html[data-theme="dark"] .add-to-quote-btn:hover, html[data-theme="dark"] .add-to-quote-btn:hover i { color: #ffffff; } html[data-theme="dark"] .add-to-quote-btn.added, html[data-theme="dark"] .add-to-quote-btn.added i { color: #ffffff; } html[data-theme="dark"] .quote-basket-section .btn-primary, html[data-theme="dark"] .products-section .btn-primary { color: #ffffff; } [data-theme="dark"] .contact-page { background: radial-gradient(ellipse 120% 80% at 50% -20%, rgba(237, 137, 54, 0.06) 0%, transparent 55%), linear-gradient(180deg, var(--bg-light) 0%, #0a0e14 35%, var(--bg-light) 100%); } [data-theme="dark"] .nav-search-toggle:hover, [data-theme="dark"] .nav-search-toggle:focus-visible { background: rgba(237, 137, 54, 0.18); } [data-theme="dark"] .main-footer { color: #f1f5f9; }