/* ============================================ CDL360 — DARK THEME Charcoal Navy + Compliance Green + Industrial Orange Applied via [data-theme="dark"] on ============================================ */ [data-theme="dark"] { /* ── Color tokens ── */ --brand-primary: #3FA34D; --brand-primary-rgb: 63, 163, 77; --brand-primary-light: #4DB85C; --brand-primary-pale: #1A2E1C; --brand-secondary: #3FA34D; --brand-secondary-light: #4DB85C; --brand-accent: #2D6A73; --brand-accent-light: #3D8A94; --brand-cta: #F57C00; --brand-cta-hover: #E65100; --brand-bg: #1C2F3D; --brand-bg-green: #152318; --text-primary: #E8EEF2; --text-body: #C7D4DC; --text-muted: #9FB3C1; /* ── Base ── */ color-scheme: dark; } /* ── Document background & text ── */ [data-theme="dark"] body { background: #0F1C26; color: #C7D4DC; } /* ── Headings ── */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 { color: #E8EEF2; } /* ── Topbar ── */ [data-theme="dark"] .topbar { background: #081219; color: #C7D4DC; border-bottom: 1px solid #1E3345; } [data-theme="dark"] .topbar a { color: rgba(200,220,230,0.85); } /* ── Navbar ── */ [data-theme="dark"] .navbar { background: #0F1C26; border-bottom: 3px solid #3FA34D; box-shadow: 0 2px 16px rgba(0,0,0,0.45); } [data-theme="dark"] .nav-links a { color: #C7D4DC; } [data-theme="dark"] .nav-links a:hover { background: #1C2F3D; color: #3FA34D; } [data-theme="dark"] .nav-links a.active { color: #3FA34D; } [data-theme="dark"] .nav-phone { color: #3FA34D; } [data-theme="dark"] .hamburger span { background: #C7D4DC; } /* ── Mobile menu ── */ [data-theme="dark"] .mobile-menu { background: #0F1C26; border-top: 1px solid #1E3345; } [data-theme="dark"] .mobile-menu a { color: #C7D4DC; border-bottom-color: #1C2F3D; } [data-theme="dark"] .mobile-menu a:hover { background: #1C2F3D; } /* ── Hero — keep dark, update accent ── */ [data-theme="dark"] .hero, [data-theme="dark"] .page-hero { background: linear-gradient(135deg, rgba(8,18,25,0.94) 0%, rgba(15,28,38,0.90) 60%, rgba(28,47,61,0.88) 100%), url('../images/hero-cdl360.jpg') center center / cover no-repeat !important; } [data-theme="dark"] .hero h1, [data-theme="dark"] .hero h2, [data-theme="dark"] .hero h3, [data-theme="dark"] .page-hero h1, [data-theme="dark"] .page-hero h2, [data-theme="dark"] .page-hero h3 { color: #FFFFFF !important; } [data-theme="dark"] .hero p, [data-theme="dark"] .page-hero p { color: rgba(232,238,242,0.88); } [data-theme="dark"] .hero-eyebrow { background: rgba(63,163,77,0.18); color: #3FA34D; border-color: rgba(63,163,77,0.35); } [data-theme="dark"] .hero-stat strong { color: #FFFFFF; } [data-theme="dark"] .hero-stat span { color: rgba(200,220,230,0.75); } /* ── Trust bar ── */ [data-theme="dark"] .trust-bar { background: #1C2F3D; border-color: #2A3F4E; } [data-theme="dark"] .trust-item { color: #9FB3C1; } [data-theme="dark"] .trust-item i { color: #3FA34D; } /* ── Section backgrounds ── */ [data-theme="dark"] .bg-white, [data-theme="dark"] section:not(.hero):not(.page-hero):not(.cta-banner):not(.trust-bar) { background: #142030; } [data-theme="dark"] .bg-light { background: #1C2F3D; } [data-theme="dark"] .bg-primary { background: #0F1C26; } [data-theme="dark"] .section-accent { background: #152318; } /* ── Cards ── */ [data-theme="dark"] .card { background: #1C2F3D; border-color: #2A3F4E; color: #C7D4DC; } [data-theme="dark"] .card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.45); } /* ── Testimonial cards ── */ [data-theme="dark"] .testimonial-card { background: #1C2F3D; border-color: #2A3F4E; } [data-theme="dark"] .testimonial-quote { color: #C7D4DC; } [data-theme="dark"] .author-name { color: #E8EEF2; } /* ── Blog cards ── */ [data-theme="dark"] .blog-card { background: #1C2F3D; border-color: #2A3F4E; } [data-theme="dark"] .blog-card-title { color: #E8EEF2; } [data-theme="dark"] .blog-card-excerpt { color: #9FB3C1; } [data-theme="dark"] .blog-tag { background: #152318; color: #3FA34D; } /* ── Stat numbers ── */ [data-theme="dark"] .stat-number { color: #3FA34D; } [data-theme="dark"] .stat-label { color: #9FB3C1; } /* ── Icon boxes ── */ [data-theme="dark"] .icon-box { background: #1A2E1C; color: #3FA34D; } [data-theme="dark"] .service-card:hover .icon-box { background: #3FA34D; color: #0F1C26; } /* ── Section labels ── */ [data-theme="dark"] .section-label { background: #1A2E1C; color: #3FA34D; } [data-theme="dark"] .section-sub { color: #9FB3C1; } [data-theme="dark"] .text-muted { color: #9FB3C1; } /* ── Process steps ── */ [data-theme="dark"] .process-steps::before { background: #2A3F4E; } [data-theme="dark"] .step-number { background: #3FA34D; color: #0F1C26; box-shadow: 0 0 0 2px #2A3F4E; border-color: #0F1C26; } [data-theme="dark"] .step-title { color: #E8EEF2; } [data-theme="dark"] .step-desc { color: #9FB3C1; } /* ── FAQ ── */ [data-theme="dark"] .faq-item { background: #1C2F3D; border-color: #2A3F4E; } [data-theme="dark"] .faq-question { background: #1C2F3D; } [data-theme="dark"] .faq-question span { color: #E8EEF2; } [data-theme="dark"] .faq-icon { background: #1A2E1C; color: #3FA34D; } [data-theme="dark"] .faq-item.open { border-color: #3FA34D; } [data-theme="dark"] .faq-item.open .faq-icon { background: #3FA34D; color: #0F1C26; } [data-theme="dark"] .faq-answer { color: #C7D4DC; } [data-theme="dark"] .faq-answer p { color: #C7D4DC !important; } [data-theme="dark"] .faq-answer ul { color: #C7D4DC; } [data-theme="dark"] .faq-answer li { color: #C7D4DC; } [data-theme="dark"] .category-label, [data-theme="dark"] .faq-category-label { color: #3FA34D; border-bottom-color: #1A2E1C; } /* ── CTA banner ── */ [data-theme="dark"] .cta-banner { background: linear-gradient(135deg, #081219 0%, #0F1C26 100%); border-top: 1px solid #2A3F4E; border-bottom: 1px solid #2A3F4E; } [data-theme="dark"] .cta-banner h2 { color: #FFFFFF; } [data-theme="dark"] .cta-banner p { color: rgba(200,220,230,0.85); } /* ── CTA button ── */ [data-theme="dark"] .btn-cta { background: #F57C00; color: #FFFFFF; } [data-theme="dark"] .btn-cta:hover { background: #E65100; box-shadow: 0 6px 24px rgba(245,124,0,0.40); } /* ── Outline buttons ── */ [data-theme="dark"] .btn-outline { border-color: #3FA34D; color: #3FA34D; } [data-theme="dark"] .btn-outline:hover { background: #3FA34D; color: #0F1C26; } /* ── Forms — stay light for conversion ── */ [data-theme="dark"] .lead-form, [data-theme="dark"] form.lead-form, [data-theme="dark"] .inline-lead-form { background: #FFFFFF; border-radius: 12px; padding: 2rem; } [data-theme="dark"] .form-control { background: #FFFFFF; color: #1A1A1A; border-color: #D1D5DB; } [data-theme="dark"] .form-label { color: #1A1A1A; } /* ── Footer ── */ [data-theme="dark"] .footer, [data-theme="dark"] footer.footer { background: #060E14; border-top: 1px solid #1E3345; } [data-theme="dark"] .footer-heading { color: #9FB3C1; } [data-theme="dark"] .footer-col a { color: #9FB3C1; } [data-theme="dark"] .footer-col a:hover { color: #3FA34D; } [data-theme="dark"] .footer-bottom { color: #6B7280; border-top-color: #1E3345; } [data-theme="dark"] .footer-logo-sub { color: #3FA34D; } [data-theme="dark"] .divider-accent { background: linear-gradient(90deg, #3FA34D, #2D6A73); } /* ── Links ── */ [data-theme="dark"] a { color: #3FA34D; } [data-theme="dark"] a:hover { color: #4DB85C; } [data-theme="dark"] .nav-links a, [data-theme="dark"] .footer-col a, [data-theme="dark"] .mobile-menu a { color: inherit; } /* ── Compliance / safety indicators ── */ [data-theme="dark"] .compliance-positive, [data-theme="dark"] .compliance-positive i { color: #3FA34D; } [data-theme="dark"] .safety-badge { background: #152318; color: #3FA34D; border-color: #1D3520; } [data-theme="dark"] .badge-success { background: #152318; color: #3FA34D; } [data-theme="dark"] .badge-warning { background: #2A1A08; color: #F57C00; } [data-theme="dark"] .enterprise-tag { background: #1C2F3D; color: #9FB3C1; } /* ── Inline styles that need overrides ── */ [data-theme="dark"] [style*="background:#fff"], [data-theme="dark"] [style*="background: #fff"], [data-theme="dark"] [style*="background:#FFFFFF"], [data-theme="dark"] [style*="background: white"] { background: #1C2F3D !important; } [data-theme="dark"] [style*="color:#1C1C1C"], [data-theme="dark"] [style*="color: #1C1C1C"], [data-theme="dark"] [style*="color:#374151"], [data-theme="dark"] [style*="color:#333333"] { color: #C7D4DC !important; }