/* ============================================================ CDL ECOSYSTEM — SHARED DARK MODE OVERRIDES Applies to ALL three brands for components defined in shared.css. Brand-specific dark palettes (brand-xxx-dark.css / brand-xxx-gold.css) override the accent colors further. Applied via: [data-theme="dark"] and [data-theme="gold"] on ============================================================ */ /* ────────────────────────────────────────────── BASE DOCUMENT & TYPOGRAPHY ────────────────────────────────────────────── */ [data-theme="dark"] .text-muted, [data-theme="gold"] .text-muted { color: var(--text-muted, #9CA3AF); } [data-theme="dark"] .lead, [data-theme="gold"] .lead { color: var(--text-body, #C7D4DC); } [data-theme="dark"] .pull-quote, [data-theme="gold"] .pull-quote { background: var(--brand-bg, #1A2535); border-left-color: var(--brand-primary, #C9A227); color: var(--text-body); } /* ────────────────────────────────────────────── NAVIGATION ────────────────────────────────────────────── */ [data-theme="dark"] .hamburger span, [data-theme="gold"] .hamburger span { background: #D1D5DB; } /* ────────────────────────────────────────────── SECTION BACKGROUNDS (shared.css rhythm) ────────────────────────────────────────────── */ /* Light sections → dark equivalents */ [data-theme="dark"] .bg-white, [data-theme="dark"] .section-light, [data-theme="dark"] .section-off, [data-theme="dark"] .section-tinted { background: var(--brand-bg, #1C2F3D) !important; } [data-theme="gold"] .bg-white, [data-theme="gold"] .section-light, [data-theme="gold"] .section-off, [data-theme="gold"] .section-tinted { background: var(--brand-bg, #1C262D) !important; } /* All non-hero, non-CTA sections */ [data-theme="dark"] section:not(.hero):not(.page-hero):not(.cta-banner):not(.trust-bar):not(.footer) { background: var(--brand-bg, #1C2F3D); } [data-theme="gold"] section:not(.hero):not(.page-hero):not(.cta-banner):not(.trust-bar):not(.footer) { background: var(--brand-bg, #141C20); } [data-theme="dark"] .bg-light { background: var(--brand-bg, #1C2F3D) !important; } [data-theme="gold"] .bg-light { background: var(--brand-bg, #1C262D) !important; } /* ────────────────────────────────────────────── CARDS (shared.css .card) ────────────────────────────────────────────── */ [data-theme="dark"] .card { background: var(--brand-bg, #1C2F3D); border-color: rgba(255,255,255,0.08); color: var(--text-body); } [data-theme="dark"] .card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.5); } [data-theme="gold"] .card { background: var(--brand-bg, #1C262D); border-color: rgba(255,255,255,0.07); color: var(--text-body); } [data-theme="gold"] .card:hover { border-color: var(--brand-primary, #B89A4A); box-shadow: 0 8px 30px rgba(184,154,74,0.12); } /* Service card (inline .service-card class) */ [data-theme="dark"] .service-card { background: var(--brand-bg, #1C2F3D) !important; border-left-color: var(--brand-primary, #3FA34D) !important; color: var(--text-body); } [data-theme="gold"] .service-card { background: var(--brand-bg, #1C262D) !important; border-left-color: var(--brand-primary, #B89A4A) !important; color: var(--text-body); } /* Authority card dark */ [data-theme="dark"] .authority-card { background: var(--brand-bg, #1C2F3D); border-color: rgba(255,255,255,0.08); color: var(--text-body); } [data-theme="gold"] .authority-card { background: var(--brand-bg, #1C262D); border-color: rgba(255,255,255,0.07); color: var(--text-body); } /* ────────────────────────────────────────────── STATS GRID ────────────────────────────────────────────── */ [data-theme="dark"] .stat-number { color: var(--brand-primary, #3FA34D); } [data-theme="dark"] .stat-label { color: var(--text-muted); } [data-theme="gold"] .stat-number { color: var(--brand-primary, #B89A4A); } [data-theme="gold"] .stat-label { color: var(--text-muted); } /* Authority number */ [data-theme="dark"] .authority-number { color: var(--brand-primary, #3FA34D); } [data-theme="gold"] .authority-number { color: var(--brand-primary, #B89A4A); } /* ────────────────────────────────────────────── TRUST BAR ────────────────────────────────────────────── */ [data-theme="dark"] .trust-bar { background: var(--brand-bg, #1C2F3D); border-color: rgba(255,255,255,0.07); } [data-theme="dark"] .trust-item { color: var(--text-muted); } [data-theme="dark"] .trust-item i { color: var(--brand-primary); } [data-theme="dark"] .trust-strip { border-color: rgba(255,255,255,0.08); } [data-theme="dark"] .trust-strip-item { color: var(--text-muted); } [data-theme="dark"] .trust-strip-item i { color: var(--brand-primary); } [data-theme="gold"] .trust-bar { background: var(--brand-bg, #141C20); border-color: rgba(255,255,255,0.06); } [data-theme="gold"] .trust-item { color: var(--text-muted); } [data-theme="gold"] .trust-item i { color: var(--brand-primary); } [data-theme="gold"] .trust-strip { border-color: rgba(255,255,255,0.06); } [data-theme="gold"] .trust-strip-item { color: var(--text-muted); } [data-theme="gold"] .trust-strip-item i { color: var(--brand-primary); } /* ────────────────────────────────────────────── PROCESS STEPS ────────────────────────────────────────────── */ [data-theme="dark"] .process-steps::before { background: rgba(255,255,255,0.08); } [data-theme="dark"] .step-title { color: var(--text-primary); } [data-theme="dark"] .step-desc { color: var(--text-muted); } [data-theme="gold"] .process-steps::before { background: rgba(255,255,255,0.07); } [data-theme="gold"] .step-title { color: var(--text-primary); } [data-theme="gold"] .step-desc { color: var(--text-muted); } /* Authority step */ [data-theme="dark"] .authority-step { border-bottom-color: rgba(255,255,255,0.08); } [data-theme="dark"] .authority-step-content h4 { color: var(--text-primary); } [data-theme="dark"] .authority-step-content p { color: var(--text-muted); } [data-theme="gold"] .authority-step { border-bottom-color: rgba(255,255,255,0.07); } [data-theme="gold"] .authority-step-content h4 { color: var(--text-primary); } [data-theme="gold"] .authority-step-content p { color: var(--text-muted); } /* ────────────────────────────────────────────── TESTIMONIALS ────────────────────────────────────────────── */ [data-theme="dark"] .testimonial-card { background: var(--brand-bg, #1C2F3D); border-color: rgba(255,255,255,0.08); } [data-theme="dark"] .testimonial-quote { color: var(--text-body); } [data-theme="dark"] .author-name { color: var(--text-primary); } [data-theme="dark"] .author-title { color: var(--text-muted); } [data-theme="gold"] .testimonial-card { background: var(--brand-bg, #1C262D); border-color: rgba(255,255,255,0.07); } [data-theme="gold"] .testimonial-quote { color: var(--text-body); } [data-theme="gold"] .author-name { color: var(--text-primary); } [data-theme="gold"] .author-title { color: var(--text-muted); } /* Quote card */ [data-theme="dark"] .quote-card { background: var(--brand-bg, #1C2F3D); border-color: rgba(255,255,255,0.08); } [data-theme="gold"] .quote-card { background: var(--brand-bg, #1C262D); border-color: rgba(255,255,255,0.07); } /* ────────────────────────────────────────────── BLOG CARDS ────────────────────────────────────────────── */ [data-theme="dark"] .blog-card { background: var(--brand-bg, #1C2F3D); border-color: rgba(255,255,255,0.08); } [data-theme="dark"] .blog-card-title { color: var(--text-primary); } [data-theme="dark"] .blog-card-excerpt { color: var(--text-muted); } [data-theme="dark"] .blog-card-date { color: var(--text-muted); } [data-theme="gold"] .blog-card { background: var(--brand-bg, #1C262D); border-color: rgba(255,255,255,0.07); } [data-theme="gold"] .blog-card-title { color: var(--text-primary); } [data-theme="gold"] .blog-card-excerpt { color: var(--text-muted); } [data-theme="gold"] .blog-card-date { color: var(--text-muted); } /* ────────────────────────────────────────────── FAQ ACCORDION ────────────────────────────────────────────── */ [data-theme="dark"] .faq-item { background: var(--brand-bg); border-color: rgba(255,255,255,0.08); } [data-theme="dark"] .faq-question { background: var(--brand-bg); } [data-theme="dark"] .faq-question span { color: var(--text-primary); } [data-theme="dark"] .faq-answer { color: var(--text-body); } [data-theme="dark"] .faq-answer p, [data-theme="dark"] .faq-answer li { color: var(--text-body) !important; } [data-theme="gold"] .faq-item { background: var(--brand-bg); border-color: rgba(255,255,255,0.07); } [data-theme="gold"] .faq-question { background: var(--brand-bg); } [data-theme="gold"] .faq-question span { color: var(--text-primary); } [data-theme="gold"] .faq-answer { color: var(--text-body); } [data-theme="gold"] .faq-answer p, [data-theme="gold"] .faq-answer li { color: var(--text-body) !important; } /* ────────────────────────────────────────────── SECTION LABELS & TEXT ────────────────────────────────────────────── */ [data-theme="dark"] .section-sub { color: var(--text-muted); } [data-theme="dark"] .section-title { color: var(--text-primary); } [data-theme="gold"] .section-sub { color: var(--text-muted); } [data-theme="gold"] .section-title { color: var(--text-primary); } /* Gold title underline in dark modes */ [data-theme="dark"] .section-title-gold::after, [data-theme="gold"] .section-title-gold::after { background: var(--brand-primary); } /* ────────────────────────────────────────────── BUTTONS — Dark mode overrides ────────────────────────────────────────────── */ /* Ghost button on dark hero */ [data-theme="dark"] .btn-ghost, [data-theme="gold"] .btn-ghost { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.30); color: #FFFFFF; } [data-theme="dark"] .btn-ghost:hover, [data-theme="gold"] .btn-ghost:hover { background: rgba(255,255,255,0.20); border-color: rgba(255,255,255,0.50); } /* btn-gold already works; ensure CTA color stays amber */ [data-theme="dark"] .btn-gold { background: var(--brand-cta); color: #0D0D0D; } [data-theme="gold"] .btn-gold { background: var(--brand-cta); color: #0D0D0D; } /* ────────────────────────────────────────────── FORMS — Always stay light for conversion ────────────────────────────────────────────── */ [data-theme="dark"] .authority-form, [data-theme="gold"] .authority-form { background: #FFFFFF; border-color: #D1D5DB; } [data-theme="dark"] .form-field label, [data-theme="gold"] .form-field label { color: #1A1A1A; } [data-theme="dark"] .form-field input, [data-theme="dark"] .form-field select, [data-theme="dark"] .form-field textarea, [data-theme="gold"] .form-field input, [data-theme="gold"] .form-field select, [data-theme="gold"] .form-field textarea { background: #FFFFFF; color: #1A1A1A; border-color: #D1D5DB; } [data-theme="dark"] .form-disclaimer, [data-theme="gold"] .form-disclaimer { color: #6B7280; } /* Lead form override (from inline forms in pages) */ [data-theme="dark"] .lead-form, [data-theme="dark"] form.lead-form, [data-theme="dark"] .inline-lead-form, [data-theme="gold"] .lead-form, [data-theme="gold"] form.lead-form, [data-theme="gold"] .inline-lead-form { background: #FFFFFF !important; color: #1A1A1A !important; } [data-theme="dark"] .form-group label, [data-theme="gold"] .form-group label { color: #374151; } [data-theme="dark"] .form-group input, [data-theme="dark"] .form-group select, [data-theme="dark"] .form-group textarea, [data-theme="gold"] .form-group input, [data-theme="gold"] .form-group select, [data-theme="gold"] .form-group textarea { background: #FFFFFF; color: #1A1A1A; border-color: #D1D5DB; } /* ────────────────────────────────────────────── TABLES ────────────────────────────────────────────── */ [data-theme="dark"] .authority-table thead th, [data-theme="gold"] .authority-table thead th { background: #0D0D0D; } [data-theme="dark"] .authority-table tbody td { border-bottom-color: rgba(255,255,255,0.07); color: var(--text-body); } [data-theme="dark"] .authority-table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.03); } [data-theme="dark"] .authority-table tbody tr:hover td { background: rgba(255,255,255,0.05); } [data-theme="gold"] .authority-table tbody td { border-bottom-color: rgba(255,255,255,0.06); color: var(--text-body); } [data-theme="gold"] .authority-table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.03); } /* Violation / result tables in service pages */ [data-theme="dark"] table { color: var(--text-body); } [data-theme="dark"] table th { background: #0D0D0D !important; color: #FFFFFF !important; } [data-theme="dark"] table td { border-bottom-color: rgba(255,255,255,0.07) !important; } [data-theme="dark"] table tr:nth-child(even) td { background: rgba(255,255,255,0.03) !important; } [data-theme="gold"] table { color: var(--text-body); } [data-theme="gold"] table th { background: #0D0D0D !important; color: #FFFFFF !important; } [data-theme="gold"] table td { border-bottom-color: rgba(255,255,255,0.06) !important; } /* ────────────────────────────────────────────── PILLS / BADGES ────────────────────────────────────────────── */ /* Trust indicators stay status-colored in dark */ [data-theme="dark"] .pill-success, [data-theme="gold"] .pill-success { background: rgba(46,125,50,0.15); color: #66BB6A; border-color: rgba(46,125,50,0.30); } [data-theme="dark"] .pill-warning, [data-theme="gold"] .pill-warning { background: rgba(230,81,0,0.15); color: #FFA726; border-color: rgba(230,81,0,0.30); } [data-theme="dark"] .pill-risk, [data-theme="gold"] .pill-risk { background: rgba(183,28,28,0.15); color: #EF5350; border-color: rgba(183,28,28,0.30); } [data-theme="dark"] .pill-iron, [data-theme="gold"] .pill-iron { background: rgba(255,255,255,0.07); color: var(--text-muted); border-color: rgba(255,255,255,0.10); } /* badge-success / badge-warning (shared.css) */ [data-theme="dark"] .badge-success { background: rgba(46,125,50,0.15); color: #66BB6A; } [data-theme="dark"] .badge-warning { background: rgba(230,81,0,0.15); color: #FFA726; } [data-theme="gold"] .badge-success { background: rgba(46,125,50,0.15); color: #66BB6A; } [data-theme="gold"] .badge-warning { background: rgba(230,81,0,0.15); color: #FFA726; } /* Urgency badge in dark keeps red */ [data-theme="dark"] .urgency-badge, [data-theme="gold"] .urgency-badge { background: rgba(183,28,28,0.15); color: #EF5350; border-color: rgba(183,28,28,0.25); } /* Cert badge */ [data-theme="dark"] .cert-badge { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.10); color: var(--text-body); } [data-theme="gold"] .cert-badge { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); color: var(--text-body); } /* Metric badge */ [data-theme="dark"] .metric-badge { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.10); color: var(--text-muted); } [data-theme="gold"] .metric-badge { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); color: var(--text-muted); } /* ────────────────────────────────────────────── CONTENT HUB / ARTICLE ────────────────────────────────────────────── */ [data-theme="dark"] .article-body h2 { border-bottom-color: rgba(255,255,255,0.08); } [data-theme="dark"] .article-body p, [data-theme="dark"] .article-body li { color: var(--text-body); } [data-theme="gold"] .article-body h2 { border-bottom-color: rgba(255,255,255,0.07); } [data-theme="gold"] .article-body p, [data-theme="gold"] .article-body li { color: var(--text-body); } /* Ecosystem callout box */ [data-theme="dark"] .ecosystem-callout { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); border-left-color: var(--brand-primary); } [data-theme="gold"] .ecosystem-callout { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.07); border-left-color: var(--brand-primary); } /* ────────────────────────────────────────────── RESULT / OUTCOME CARDS ────────────────────────────────────────────── */ [data-theme="dark"] .result-card, [data-theme="gold"] .result-card { background: rgba(255,255,255,0.04); } [data-theme="dark"] .result-card.result-win, [data-theme="gold"] .result-card.result-win { background: rgba(46,125,50,0.10); border-left-color: #66BB6A; } [data-theme="dark"] .result-card.result-warning, [data-theme="gold"] .result-card.result-warning { background: rgba(230,81,0,0.10); } [data-theme="dark"] .result-card.result-risk, [data-theme="gold"] .result-card.result-risk { background: rgba(183,28,28,0.10); } /* ────────────────────────────────────────────── SECTION ACCENT / BACKGROUND DIVIDERS ────────────────────────────────────────────── */ [data-theme="dark"] .section-accent { background: rgba(255,255,255,0.02) !important; } [data-theme="gold"] .section-accent { background: rgba(255,255,255,0.02) !important; } [data-theme="dark"] .iron-rule { background: rgba(255,255,255,0.08); } [data-theme="gold"] .iron-rule { background: rgba(255,255,255,0.07); } /* ────────────────────────────────────────────── PULL QUOTES ────────────────────────────────────────────── */ [data-theme="dark"] .pull-quote { background: rgba(255,255,255,0.04); color: var(--text-body); } [data-theme="gold"] .pull-quote { background: rgba(255,255,255,0.03); color: var(--text-body); } /* ────────────────────────────────────────────── STICKY MOBILE CTA ────────────────────────────────────────────── */ [data-theme="dark"] .sticky-mobile-cta { background: #0D0D0D; border-top-color: rgba(255,255,255,0.10); } [data-theme="dark"] .sticky-mobile-cta .btn-call { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); color: #FFFFFF; } [data-theme="gold"] .sticky-mobile-cta { background: #090909; border-top-color: rgba(255,255,255,0.08); } [data-theme="gold"] .sticky-mobile-cta .btn-call { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: #FFFFFF; } /* ────────────────────────────────────────────── INLINE STYLE OVERRIDES Handles hardcoded inline styles in page HTML ────────────────────────────────────────────── */ /* White backgrounds embedded inline */ [data-theme="dark"] [style*="background:#fff"], [data-theme="dark"] [style*="background: #fff"], [data-theme="dark"] [style*="background:#FFFFFF"], [data-theme="dark"] [style*="background: #FFFFFF"], [data-theme="dark"] [style*="background: white"], [data-theme="dark"] [style*="background:white"] { background: var(--brand-bg, #1C2F3D) !important; } [data-theme="gold"] [style*="background:#fff"], [data-theme="gold"] [style*="background: #fff"], [data-theme="gold"] [style*="background:#FFFFFF"], [data-theme="gold"] [style*="background: #FFFFFF"], [data-theme="gold"] [style*="background: white"], [data-theme="gold"] [style*="background:white"] { background: var(--brand-bg, #1C262D) !important; } /* Very light grays embedded inline */ [data-theme="dark"] [style*="background:#F4F6F8"], [data-theme="dark"] [style*="background:#F5F7FA"], [data-theme="dark"] [style*="background:#F9FAFB"], [data-theme="dark"] [style*="background:#F3F4F6"] { background: var(--brand-bg, #1C2F3D) !important; } [data-theme="gold"] [style*="background:#F4F6F8"], [data-theme="gold"] [style*="background:#F5F7FA"], [data-theme="gold"] [style*="background:#F9FAFB"], [data-theme="gold"] [style*="background:#F3F4F6"] { background: var(--brand-bg, #1C262D) !important; } /* Dark text colors */ [data-theme="dark"] [style*="color:#1C1C1C"], [data-theme="dark"] [style*="color: #1C1C1C"], [data-theme="dark"] [style*="color:#1A1A1A"], [data-theme="dark"] [style*="color:#374151"], [data-theme="dark"] [style*="color:#333333"], [data-theme="dark"] [style*="color: #374151"] { color: var(--text-body, #C7D4DC) !important; } [data-theme="gold"] [style*="color:#1C1C1C"], [data-theme="gold"] [style*="color: #1C1C1C"], [data-theme="gold"] [style*="color:#1A1A1A"], [data-theme="gold"] [style*="color:#374151"], [data-theme="gold"] [style*="color:#333333"], [data-theme="gold"] [style*="color: #374151"] { color: var(--text-body, #C2CDD5) !important; } /* Muted text inline */ [data-theme="dark"] [style*="color:#6B7280"], [data-theme="dark"] [style*="color: #6B7280"] { color: var(--text-muted, #9FB3C1) !important; } [data-theme="gold"] [style*="color:#6B7280"], [data-theme="gold"] [style*="color: #6B7280"] { color: var(--text-muted, #9AA7B1) !important; } /* ────────────────────────────────────────────── SCROLL-TOP BUTTON ────────────────────────────────────────────── */ [data-theme="dark"] .scroll-top { background: var(--brand-primary); color: #0D0D0D; box-shadow: 0 4px 20px rgba(0,0,0,0.5); } [data-theme="gold"] .scroll-top { background: var(--brand-primary); color: #0D0D0D; box-shadow: 0 4px 20px rgba(0,0,0,0.5); } /* ────────────────────────────────────────────── FILTER TABS ────────────────────────────────────────────── */ [data-theme="dark"] .filter-tab { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: var(--text-muted); } [data-theme="dark"] .filter-tab:hover { background: rgba(255,255,255,0.10); color: var(--text-body); } [data-theme="dark"] .filter-tab.active { background: var(--brand-primary); border-color: var(--brand-primary); color: #0D0D0D; } [data-theme="gold"] .filter-tab { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10); color: var(--text-muted); } [data-theme="gold"] .filter-tab.active { background: var(--brand-primary); border-color: var(--brand-primary); color: #0D0D0D; } /* ────────────────────────────────────────────── PLAN CARDS (CDL Manager pricing) ────────────────────────────────────────────── */ [data-theme="dark"] .plan-card { background: var(--brand-bg); border: 1px solid rgba(255,255,255,0.08); } [data-theme="dark"] .plan-card.featured { background: var(--brand-primary); border-color: var(--brand-primary); } [data-theme="dark"] .plan-card.featured h3, [data-theme="dark"] .plan-card.featured h4 { color: #0D0D0D; } [data-theme="gold"] .plan-card { background: var(--brand-bg); border: 1px solid rgba(255,255,255,0.07); } [data-theme="gold"] .plan-card.featured { background: var(--brand-primary); border-color: var(--brand-primary); } [data-theme="gold"] .plan-card.featured h3, [data-theme="gold"] .plan-card.featured h4 { color: #0D0D0D; } /* ────────────────────────────────────────────── HERO BADGE (CDL360 dashboard preview) ────────────────────────────────────────────── */ [data-theme="dark"] .hero-badge, [data-theme="gold"] .hero-badge { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.15); } /* ────────────────────────────────────────────── COMPLIANCE METER (CDL360) ────────────────────────────────────────────── */ [data-theme="dark"] .compliance-meter { background: rgba(255,255,255,0.10); } [data-theme="gold"] .compliance-meter { background: rgba(255,255,255,0.08); } /* ────────────────────────────────────────────── BREADCRUMBS ────────────────────────────────────────────── */ [data-theme="dark"] .breadcrumb { color: var(--text-muted); } [data-theme="dark"] .breadcrumb a { color: var(--brand-primary); } [data-theme="gold"] .breadcrumb { color: var(--text-muted); } [data-theme="gold"] .breadcrumb a { color: var(--brand-primary); }