/* ============================================ DARK MODE - TOKENIZED OnlineTranslation.ae REPLACES: dark-mode.css (2000+ lines → ~800) All hardcoded colors replaced with var(--token) Zero !important declarations Works with @layer cascade system ============================================ */ @layer states { /* ============================================ BASE BODY & BACKGROUNDS ============================================ */ [data-theme="dark"], body.theme-dark { background: var(--surface-base); color: var(--text-body); } /* ============================================ TYPOGRAPHY ============================================ */ body.theme-dark h1, body.theme-dark h2, body.theme-dark h3, body.theme-dark h4, body.theme-dark h5 { color: var(--text-heading); } body.theme-dark p { color: var(--text-body); } body.theme-dark strong, body.theme-dark b { color: var(--text-heading); } body.theme-dark a { color: var(--link-color); } body.theme-dark a:hover { color: var(--link-hover); } /* ============================================ INLINE LINKS IN CONTENT - High Visibility ============================================ */ /* Section paragraph links - use coral for visibility */ body.theme-dark .section p a, body.theme-dark section p a, body.theme-dark .container p a, body.theme-dark main p a { color: var(--accent-coral); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } body.theme-dark .section p a:hover, body.theme-dark section p a:hover, body.theme-dark .container p a:hover, body.theme-dark main p a:hover { color: var(--accent-coral-hover, #ff5050); text-decoration-thickness: 2px; } /* List item links */ body.theme-dark .section li a, body.theme-dark section li a, body.theme-dark .container li a, body.theme-dark main li a { color: var(--accent-coral); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } body.theme-dark .section li a:hover, body.theme-dark section li a:hover, body.theme-dark .container li a:hover, body.theme-dark main li a:hover { color: var(--accent-coral-hover, #ff5050); } /* ============================================ HEADER & NAVIGATION ============================================ */ body.theme-dark .header-mobile { background: rgba(11, 17, 26, 0.95); border-bottom: 1px solid var(--border-medium); } body.theme-dark .header-mobile .header-title { color: var(--text-on-dark); } body.theme-dark .header-mobile .header-title span { color: var(--accent-coral); } body.theme-dark .header-mobile .header-icon { color: var(--text-on-dark); background: rgba(255, 255, 255, 0.08); } /* Top bar */ /* Announcement bar */ /* ============================================ SIDEBAR MENU ============================================ */ body.theme-dark .sidebar-menu { background: var(--surface-raised); border-right: 1px solid var(--border-medium); } body.theme-dark .sidebar-header { background: linear-gradient(135deg, var(--surface-navy-dark) 0%, var(--surface-navy) 100%); border-bottom: 1px solid var(--border-medium); } body.theme-dark .sidebar-logo, body.theme-dark .sidebar-brand-name { color: var(--text-on-dark); } body.theme-dark .sidebar-brand-name .brand-suffix { color: var(--accent-coral); } body.theme-dark .sidebar-tagline { color: var(--text-on-dark-muted); } body.theme-dark .sidebar-nav ul li a { color: var(--text-body); } body.theme-dark .sidebar-nav ul li a:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-heading); } body.theme-dark .sidebar-nav ul li a i { color: var(--text-muted); } body.theme-dark .sidebar-nav ul li a:hover i { color: var(--link-color); } body.theme-dark .sidebar-cta { background: var(--accent-coral); color: var(--text-on-dark); } body.theme-dark .quick-links { background: var(--surface-navy-dark); } body.theme-dark .quick-links a { background: rgba(255, 255, 255, 0.08); color: var(--text-body); } body.theme-dark .sidebar-overlay { background: rgba(0, 0, 0, 0.7); } /* ============================================ HERO SECTION ============================================ */ body.theme-dark .hero-section { background: transparent; } body.theme-dark .hero-background { opacity: 1; z-index: 0; } body.theme-dark .hero-background .hero-image { opacity: 1; filter: brightness(0.75) saturate(0.85); } body.theme-dark .hero-overlay { background: linear-gradient( 135deg, rgba(11, 17, 26, 0.65) 0%, rgba(11, 17, 26, 0.5) 40%, rgba(11, 17, 26, 0.4) 70%, rgba(11, 17, 26, 0.3) 100% ); } body.theme-dark .hero-overlay.exodus-overlay { background: linear-gradient( 135deg, rgba(13, 17, 23, 0.65) 0%, rgba(13, 17, 23, 0.5) 40%, rgba(13, 17, 23, 0.4) 70%, rgba(13, 17, 23, 0.3) 100% ); } body.theme-dark .hero-title { color: var(--text-on-dark); text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5); } body.theme-dark .hero-subtitle { color: var(--text-body); } body.theme-dark .hero-subtitle .highlight { color: var(--accent-coral); } body.theme-dark .hero-cta { background: var(--accent-coral); box-shadow: 0 4px 20px rgba(255, 107, 107, 0.4); } body.theme-dark .hero-cta:hover { background: var(--accent-coral-hover); box-shadow: 0 6px 30px rgba(255, 107, 107, 0.5); } body.theme-dark .hero-cta-secondary { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); } /* ============================================ SECTIONS & BACKGROUNDS ============================================ */ body.theme-dark section { background: var(--surface-base); } body.theme-dark .feature-cards-section, body.theme-dark .services-section, body.theme-dark .about-section { background: var(--surface-raised); } body.theme-dark .section-header h2 { color: var(--text-heading); } body.theme-dark .section-header p, body.theme-dark .section-subtitle { color: var(--text-muted); } /* ============================================ CARDS (UNIVERSAL) ============================================ */ body.theme-dark .card, body.theme-dark .feature-card, body.theme-dark .service-card, body.theme-dark .why-card, body.theme-dark .stat-card, body.theme-dark .pricing-card, body.theme-dark .process-step { background: var(--surface-muted); border: 1px solid var(--border-medium); box-shadow: var(--shadow-sm); } body.theme-dark .card:hover, body.theme-dark .feature-card:hover, body.theme-dark .service-card:hover, body.theme-dark .why-card:hover { background: var(--surface-navy); border-color: var(--border-dark); box-shadow: var(--shadow-md); } body.theme-dark .card h3, body.theme-dark .feature-card h3, body.theme-dark .service-card h3, body.theme-dark .why-card h3 { color: var(--text-heading); } body.theme-dark .card p, body.theme-dark .feature-card p, body.theme-dark .service-card p, body.theme-dark .why-card p { color: var(--text-secondary); } body.theme-dark .card-icon { background: rgba(127, 209, 255, 0.15); color: var(--link-color); } body.theme-dark .card-link { color: var(--link-color); } body.theme-dark .card-link:hover { color: var(--accent-coral); } body.theme-dark .card-divider { background: var(--border-medium); } /* Exodus red card variant */ /* ============================================ PROCESS STEPS ============================================ */ body.theme-dark .process-step { background: var(--surface-muted); border-color: var(--border-medium); } body.theme-dark .process-step:hover { background: var(--surface-navy); } body.theme-dark .process-step h4 { color: var(--text-heading); } body.theme-dark .process-step p { color: var(--text-secondary); } /* ============================================ TESTIMONIALS ============================================ */ body.theme-dark .testimonial-card { background: var(--surface-muted); border-color: var(--border-medium); } body.theme-dark .testimonial-card:hover { background: var(--surface-navy); } body.theme-dark .testimonial-author { color: var(--text-heading); } /* ============================================ BUTTONS ============================================ */ body.theme-dark .btn-coral, body.theme-dark .hero-cta { background: var(--accent-coral); color: var(--text-on-dark); } body.theme-dark .btn-coral:hover, body.theme-dark .hero-cta:hover { background: var(--accent-coral-hover); } body.theme-dark .btn-outline { border-color: var(--text-heading); color: var(--text-heading); } body.theme-dark .btn-outline:hover { background: var(--text-heading); color: var(--surface-base); } /* ============================================ FORMS ============================================ */ body.theme-dark input, body.theme-dark textarea, body.theme-dark select { background: var(--surface-muted); border-color: var(--border-medium); color: var(--text-body); } body.theme-dark input::placeholder, body.theme-dark textarea::placeholder { color: var(--text-muted); } body.theme-dark input:focus, body.theme-dark textarea:focus, body.theme-dark select:focus { border-color: var(--link-color); box-shadow: 0 0 0 3px rgba(127, 209, 255, 0.2); } body.theme-dark label { color: var(--text-heading); } body.theme-dark .form-error { color: var(--state-danger); } /* ============================================ FOOTER ============================================ */ body.theme-dark .footer { background: var(--surface-navy-dark); border-top: 1px solid var(--border-medium); } body.theme-dark .footer h4 { color: var(--text-heading); } body.theme-dark .footer p, body.theme-dark .footer li { color: var(--text-secondary); } body.theme-dark .footer a { color: var(--text-secondary); } body.theme-dark .footer a:hover { color: var(--link-color); } body.theme-dark .footer-bar { background: rgba(11, 17, 26, 0.98); border-top: 1px solid var(--border-medium); } body.theme-dark .footer-item { color: var(--text-muted); } body.theme-dark .footer-item.active-nav, body.theme-dark .footer-item:hover { color: var(--accent-coral); } /* ============================================ FAQ & ACCORDION ============================================ */ body.theme-dark .faq-item { background: var(--surface-muted); border-color: var(--border-medium); } body.theme-dark .faq-question { color: var(--text-heading); } body.theme-dark .faq-answer { color: var(--text-body); } body.theme-dark .accordion-content { background: var(--surface-raised); border-color: var(--border-medium); color: var(--text-body); } /* ============================================ TABLES ============================================ */ body.theme-dark table { background: var(--surface-muted); border-color: var(--border-medium); } body.theme-dark th { background: var(--surface-navy); color: var(--text-heading); border-color: var(--border-medium); } body.theme-dark td { color: var(--text-body); border-color: var(--border-light); } body.theme-dark tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); } /* ============================================ IMAGES & MEDIA ============================================ */ body.theme-dark .about-image img { filter: brightness(0.9); } body.theme-dark .service-card img, body.theme-dark .services-section img { filter: brightness(0.85); } /* ============================================ MEGAMENU ============================================ */ /* ============================================ TRUST BAR ============================================ */ body.theme-dark .trust-item { color: var(--text-secondary); } body.theme-dark .trust-item i { color: var(--accent-gold); } /* ============================================ DOCUMENT PAGES ============================================ */ /* ============================================ WHATSAPP FLOAT ============================================ */ /* ============================================ SELECTION ============================================ */ body.theme-dark ::selection { background: var(--surface-navy); color: var(--text-heading); } /* ============================================ HOMEPAGE SPECIFIC - Enhanced Dark Mode ============================================ */ /* Hero Section - Deeper, richer dark mode */ body.theme-dark.homepage .hero-section { background: var(--surface-base); } body.theme-dark.homepage .hero-overlay { background: linear-gradient( 135deg, rgba(11, 17, 26, 0.88) 0%, rgba(11, 17, 26, 0.75) 40%, rgba(11, 17, 26, 0.65) 70%, rgba(11, 17, 26, 0.55) 100% ); } body.theme-dark .hero-bullets li { color: var(--text-body); } body.theme-dark .hero-bullets i { color: var(--accent-coral); } /* Overlap Cards - Better contrast */ body.theme-dark .overlap-cards-wrapper { background: transparent; } body.theme-dark .overlap-card { background: var(--surface-muted); border: 1px solid var(--border-medium); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); } body.theme-dark .overlap-card:hover { background: var(--surface-navy); border-color: var(--border-dark); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); } body.theme-dark .overlap-card-icon { background: rgba(127, 209, 255, 0.15); color: var(--link-color); } body.theme-dark .overlap-card-title { color: var(--text-heading); } body.theme-dark .overlap-card-desc { color: var(--text-secondary); } body.theme-dark .overlap-card-badge { background: var(--accent-coral); color: var(--text-on-dark); } /* Trust Bar - Logo capsules (light background for logo visibility) */ body.theme-dark .trust-bar-section { background: var(--surface-raised); border-top: 1px solid var(--border-medium); border-bottom: 1px solid var(--border-medium); } body.theme-dark .trust-bar-title { color: var(--text-muted); } /* Keep capsules light in dark mode so logos remain visible */ body.theme-dark .trust-capsule { background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); } body.theme-dark .trust-capsule:hover { background: #ffffff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); } /* No filter needed - logos display in original colors on light capsule */ body.theme-dark .trust-capsule img { filter: none; } /* Services Section */ body.theme-dark .services-section, body.theme-dark .services-section.bg-white { background: var(--surface-base); } body.theme-dark .service-card-v2 { background: var(--surface-muted); border: 1px solid var(--border-medium); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); } body.theme-dark .service-card-v2:hover { background: var(--surface-navy); border-color: var(--border-dark); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); transform: translateY(-4px); } body.theme-dark .service-card-v2 .card-image img { filter: brightness(0.85) saturate(0.9); } body.theme-dark .service-card-v2 h3 { color: var(--text-heading); } body.theme-dark .service-card-v2 p { color: var(--text-secondary); } body.theme-dark .service-card-v2 .card-arrow { color: var(--link-color); } body.theme-dark .service-card-v2:hover .card-arrow { color: var(--accent-coral); } body.theme-dark .service-card-v2 .card-badge { background: var(--accent-coral); color: var(--text-on-dark); } /* Why Section */ body.theme-dark .why-section, body.theme-dark .why-section.bg-light { background: var(--surface-raised); } body.theme-dark .why-card { background: var(--surface-muted); border: 1px solid var(--border-medium); } body.theme-dark .why-card:hover { background: var(--surface-navy); border-color: var(--link-color); } body.theme-dark .why-card i { color: var(--link-color); } body.theme-dark .why-card:hover i { color: var(--accent-coral); } /* Process Section */ body.theme-dark .process-section, body.theme-dark .process-section.bg-white { background: var(--surface-base); } body.theme-dark .exodus-process-steps .process-step { background: var(--surface-muted); border: 1px solid var(--border-medium); } body.theme-dark .exodus-process-steps .process-step:hover { background: var(--surface-navy); border-color: var(--border-dark); } /* Metrics Section */ body.theme-dark .ot-metrics { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); border: 1px solid var(--border-medium); } body.theme-dark .ot-metric-value { color: var(--text-heading); } body.theme-dark .ot-metric-label { color: var(--text-body); } body.theme-dark .ot-metric-note { color: var(--text-muted); } /* Specialists Section */ body.theme-dark .specialists-section { background: var(--surface-raised); } body.theme-dark .specialist-card { background: var(--surface-muted); border: 1px solid var(--border-medium); } body.theme-dark .specialist-card:hover { background: var(--surface-navy); border-color: var(--link-color); } /* Feature Cards (iOS section) */ body.theme-dark .feature-cards-section { background: var(--surface-raised); } body.theme-dark .feature-card { background: var(--surface-muted); border: 1px solid var(--border-medium); } body.theme-dark .feature-card:hover { background: var(--surface-navy); } body.theme-dark .card-divider { background: var(--border-medium); } /* Section Headers */ body.theme-dark .section-label { color: var(--link-color); } body.theme-dark .section-title { color: var(--text-heading); } body.theme-dark .section-divider { background: linear-gradient(90deg, var(--accent-coral) 0%, var(--link-color) 100%); } /* Porto Header Integration */ body.theme-dark .site-header .header-body { background: linear-gradient(135deg, var(--surface-navy-dark) 0%, var(--surface-navy) 100%); border-bottom: 1px solid var(--border-medium); } /* CTA Buttons in Dark Mode */ body.theme-dark .hero-cta, body.theme-dark .exodus-cta { background: var(--accent-coral); color: var(--text-on-dark); box-shadow: 0 4px 20px rgba(255, 107, 107, 0.35); } body.theme-dark .hero-cta:hover, body.theme-dark .exodus-cta:hover { background: var(--accent-coral-hover); box-shadow: 0 6px 30px rgba(255, 107, 107, 0.45); } body.theme-dark .hero-cta-secondary { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.25); color: var(--text-on-dark); } body.theme-dark .hero-cta-secondary:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.4); } /* ============================================ SERVICE PAGES - Full Dark Mode Support ============================================ */ /* Section backgrounds - .bg-white and .bg-light */ body.theme-dark .section.bg-white, body.theme-dark section.bg-white { background: var(--surface-base); } body.theme-dark .section.bg-light, body.theme-dark section.bg-light { background: var(--surface-raised); } /* Content Prose - Main content area styling */ body.theme-dark .content-prose { color: var(--text-body); } body.theme-dark .content-prose h2, body.theme-dark .content-prose h3, body.theme-dark .content-prose h4 { color: var(--text-heading); } body.theme-dark .content-prose p { color: var(--text-body); } body.theme-dark .content-prose a { color: var(--link-color); } body.theme-dark .content-prose a:hover { color: var(--accent-coral); } body.theme-dark .content-prose ul li, body.theme-dark .content-prose ol li { color: var(--text-body); } /* Section Headers */ body.theme-dark .section h2, body.theme-dark section h2 { color: var(--text-heading); } body.theme-dark .section-intro { color: var(--text-muted); } /* Pricing Grid */ body.theme-dark .pricing-grid .pricing-card { background: var(--surface-muted); border: 1px solid var(--border-medium); } body.theme-dark .pricing-grid .pricing-card--featured { border-color: var(--accent-coral); box-shadow: 0 8px 30px rgba(255, 107, 107, 0.2); } body.theme-dark .pricing-card h3 { color: var(--text-heading); } body.theme-dark .pricing-price { color: var(--link-color); } body.theme-dark .pricing-time { color: var(--text-muted); } body.theme-dark .pricing-features li { color: var(--text-body); border-bottom-color: var(--border-light); } body.theme-dark .pricing-features li::before { color: var(--accent-coral); } /* Service Snapshot (Hero) */ body.theme-dark .service-snapshot { background: rgba(255, 255, 255, 0.05); border-color: var(--border-medium); } body.theme-dark .snapshot-item { color: var(--text-body); } body.theme-dark .snapshot-item i { color: var(--accent-coral); } body.theme-dark .snapshot-item strong { color: var(--text-heading); } /* Breadcrumbs */ body.theme-dark .breadcrumbs { background: var(--surface-navy-dark); border-bottom: 1px solid var(--border-medium); } body.theme-dark .breadcrumb-link { color: var(--text-muted); } body.theme-dark .breadcrumb-link:hover { color: var(--text-heading); } body.theme-dark .breadcrumb-sep { color: var(--text-muted); } body.theme-dark .breadcrumb-current { color: var(--text-heading); } /* Generic breadcrumb class */ body.theme-dark .breadcrumb { color: var(--text-muted); } body.theme-dark .breadcrumb a { color: var(--text-muted); } body.theme-dark .breadcrumb a:hover { color: var(--text-heading); } body.theme-dark .breadcrumb .current { color: var(--text-heading); } /* ============================================ ACCORDION SECTION COMPONENT - Dark Mode ============================================ */ body.theme-dark .ot-accordion-section { background: var(--surface-raised); } body.theme-dark .ot-accordion-section:nth-child(even) { background: var(--surface-base); } body.theme-dark .ot-accordion-title { color: var(--text-heading); } body.theme-dark .ot-accordion-item { background: var(--surface-muted); border: 1px solid var(--border-medium); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); } body.theme-dark .ot-accordion-section:nth-child(even) .ot-accordion-item { background: var(--surface-raised); } body.theme-dark .ot-accordion-header { color: var(--text-heading); } body.theme-dark .ot-accordion-header:hover { background: rgba(255, 255, 255, 0.04); } body.theme-dark .ot-accordion-icon { border-color: var(--accent-coral); color: var(--accent-coral); } body.theme-dark .ot-accordion-item.is-open .ot-accordion-icon { background: var(--accent-coral); color: var(--text-on-dark); } body.theme-dark .ot-accordion-content p, body.theme-dark .ot-accordion-content li { color: var(--text-body); } body.theme-dark .ot-accordion-content a { color: var(--link-color); } body.theme-dark .ot-accordion-content a:hover { color: var(--accent-coral); } /* ============================================ FAQ DETAILS ELEMENT - Dark Mode ============================================ */ body.theme-dark .faq-list { border-color: var(--border-medium); } body.theme-dark .faq-item { border-bottom-color: var(--border-medium); } body.theme-dark .faq-question { color: var(--text-heading); } body.theme-dark .faq-question::after { color: var(--accent-coral); } body.theme-dark .faq-answer p { color: var(--text-body); } body.theme-dark details.faq-item { background: var(--surface-muted); border-color: var(--border-medium); } body.theme-dark details.faq-item summary { color: var(--text-heading); } /* ============================================ LOCATION PAGES - Dark Mode ============================================ */ /* Service Grid Cards (Location Cards) */ body.theme-dark .service-grid .service-card { background: var(--surface-muted); border: 1px solid var(--border-medium); } body.theme-dark .service-grid .service-card:hover { background: var(--surface-navy); border-color: var(--accent-coral); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); } body.theme-dark .service-grid .service-card h3 { color: var(--text-heading); } body.theme-dark .service-grid .service-card p { color: var(--text-secondary); } body.theme-dark .service-icon { background: var(--surface-navy); color: var(--link-color); } body.theme-dark .service-grid .service-card:hover .service-icon { background: var(--accent-coral); color: var(--text-on-dark); } /* More Dubai Notice Box */ /* ============================================ CONTACT PAGE - Dark Mode ============================================ */ body.theme-dark .contact-grid { color: var(--text-body); } body.theme-dark .contact-methods h2, body.theme-dark .contact-form-wrapper h2 { color: var(--text-heading); } body.theme-dark .contact-card { background: var(--surface-muted); border: 1px solid var(--border-medium); } body.theme-dark .contact-card:hover { background: var(--surface-navy); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); } body.theme-dark .contact-card.primary-contact { background: linear-gradient(135deg, var(--surface-navy-dark) 0%, var(--surface-navy) 100%); border-color: var(--border-dark); } body.theme-dark .contact-card.primary-contact .contact-icon { background: rgba(37, 211, 102, 0.2); color: #25D366; } body.theme-dark .contact-card.primary-contact p { color: var(--text-muted); } body.theme-dark .contact-card.primary-contact .contact-link { color: var(--text-heading); } body.theme-dark .contact-icon { background: var(--surface-navy); color: var(--link-color); } body.theme-dark .contact-info h3 { color: var(--text-heading); } body.theme-dark .contact-info p { color: var(--text-muted); } body.theme-dark .contact-link { color: var(--link-color); } body.theme-dark .contact-link:hover { color: var(--accent-coral); } body.theme-dark .form-intro { color: var(--text-muted); } body.theme-dark .form-note { color: var(--text-muted); } /* ============================================ ABOUT PAGE - Dark Mode (Consolidated) ============================================ */ body.theme-dark .about-hero { background: linear-gradient(135deg, var(--surface-navy-dark) 0%, var(--surface-navy) 100%); } body.theme-dark .about-intro { background: var(--surface-base); } body.theme-dark .about-text h2 { color: var(--text-heading); } body.theme-dark .about-text p { color: var(--text-body); } body.theme-dark .about-features li { color: var(--text-body); border-bottom-color: var(--border-medium); } body.theme-dark .about-features li strong { color: var(--accent-coral); } body.theme-dark .licensing-section { background: var(--surface-raised); } body.theme-dark .licensing-card { background: var(--surface-muted); border: 1px solid var(--border-medium); } body.theme-dark .moj-badge-title { color: var(--text-heading); } body.theme-dark .moj-badge-subtitle { color: var(--text-muted); } body.theme-dark .compliance-note { background: var(--surface-navy); border-left-color: var(--link-color); } body.theme-dark .compliance-note p { color: var(--text-body); } body.theme-dark .values-section { background: var(--surface-base); } body.theme-dark .value-card { background: var(--surface-muted); border: 1px solid var(--border-medium); } body.theme-dark .value-card:hover { background: var(--surface-navy); border-color: var(--border-dark); } body.theme-dark .value-card h3 { color: var(--text-heading); } body.theme-dark .value-card p { color: var(--text-secondary); } body.theme-dark .authority-section { background: var(--surface-raised); } /* ============================================ PAGE HERO COMPONENT - Dark Mode ============================================ */ body.theme-dark .page-hero { background: linear-gradient(135deg, var(--surface-navy-dark) 0%, var(--surface-navy) 100%); } body.theme-dark .page-hero .hero-overlay { background: linear-gradient( 135deg, rgba(11, 17, 26, 0.88) 0%, rgba(11, 17, 26, 0.75) 40%, rgba(11, 17, 26, 0.6) 100% ); } body.theme-dark .page-title { color: var(--text-on-dark); } body.theme-dark .page-subtitle { color: var(--accent-coral); } body.theme-dark .page-lead { color: var(--text-body); } /* ============================================ TRUST STRIP COMPONENT - Dark Mode ============================================ */ body.theme-dark .trust-strip { background: var(--surface-navy); border-color: var(--border-medium); } /* ============================================ PROCESS STEPS COMPONENT - Dark Mode ============================================ */ body.theme-dark .process-section { background: var(--surface-raised); } /* ============================================ BENEFIT CARDS COMPONENT - Dark Mode ============================================ */ body.theme-dark .benefit-card { background: var(--surface-muted); border: 1px solid var(--border-medium); } body.theme-dark .benefit-card:hover { background: var(--surface-navy); border-color: var(--link-color); } body.theme-dark .benefit-card h3 { color: var(--text-heading); } body.theme-dark .benefit-card p { color: var(--text-secondary); } /* ============================================ CTA SECTION COMPONENT - Dark Mode ============================================ */ body.theme-dark .cta-section { background: var(--surface-raised); } body.theme-dark .cta-section.bg-white { background: var(--surface-base); } body.theme-dark .cta-section h2 { color: var(--text-heading); } body.theme-dark .cta-section p { color: var(--text-body); } body.theme-dark .cta-card { background: var(--surface-muted); border: 1px solid var(--border-medium); } /* ============================================ TESTIMONIALS CAROUSEL - Dark Mode ============================================ */ body.theme-dark .testimonials-section { background: var(--surface-raised); } body.theme-dark .carousel-dot { background: var(--border-medium); } body.theme-dark .carousel-dot.active { background: var(--accent-coral); } /* ============================================ RESOURCE/GUIDE PAGES - Dark Mode ============================================ */ body.theme-dark .resource-card { background: var(--surface-muted); border: 1px solid var(--border-medium); } body.theme-dark .resource-card:hover { background: var(--surface-navy); border-color: var(--accent-coral); } body.theme-dark .resource-card h3 { color: var(--text-heading); } body.theme-dark .resource-card p { color: var(--text-secondary); } body.theme-dark .checklist-item { background: var(--surface-muted); border: 1px solid var(--border-medium); } body.theme-dark .checklist-item:hover { background: var(--surface-navy); } /* ============================================ LEGAL/TERMS/PRIVACY PAGES - Dark Mode ============================================ */ /* ============================================ 404 / ERROR PAGES - Dark Mode ============================================ */ body.theme-dark .error-code { color: var(--accent-coral); } body.theme-dark .error-message { color: var(--text-body); } /* ============================================ SCROLLBAR - Dark Mode ============================================ */ body.theme-dark ::-webkit-scrollbar { width: 10px; height: 10px; } body.theme-dark ::-webkit-scrollbar-track { background: var(--surface-base); } body.theme-dark ::-webkit-scrollbar-thumb { background: var(--border-dark); border-radius: 5px; } body.theme-dark ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* ============================================ UTILITY CLASSES - Dark Mode ============================================ */ body.theme-dark .text-muted { color: var(--text-muted); } body.theme-dark .bg-white { background: var(--surface-base); } body.theme-dark .bg-light { background: var(--surface-raised); } body.theme-dark .border { border-color: var(--border-medium); } body.theme-dark hr { border-color: var(--border-medium); } body.theme-dark blockquote { background: var(--surface-muted); border-left-color: var(--accent-coral); color: var(--text-body); } body.theme-dark code { background: var(--surface-navy); color: var(--accent-coral); border: 1px solid var(--border-medium); } /* ============================================ CONTENT BLOCKS - Guide Pages, Resource Pages Generic white-background content blocks ============================================ */ /* Guide blocks, type cards, info boxes */ body.theme-dark .guide-block, body.theme-dark .type-card, body.theme-dark .quality-note, body.theme-dark .doubt-box, body.theme-dark .info-box { background: var(--surface-muted); border-color: var(--border-medium); } body.theme-dark .guide-block h3, body.theme-dark .type-card h3, body.theme-dark .type-header h3, body.theme-dark .quality-note strong, body.theme-dark .doubt-box h4, body.theme-dark .info-box h4 { color: var(--text-heading); } body.theme-dark .guide-block p, body.theme-dark .guide-block li, body.theme-dark .type-card p, body.theme-dark .quality-note p, body.theme-dark .doubt-box p, body.theme-dark .doubt-box li, body.theme-dark .info-box p { color: var(--text-body); } body.theme-dark .guide-block li strong, body.theme-dark .doubt-box li strong { color: var(--text-heading); } /* Acceptance cards, branch elements */ body.theme-dark .acceptance-card, body.theme-dark .branch { background: var(--surface-raised); } body.theme-dark .acceptance-card h3, body.theme-dark .branch-label { color: var(--text-heading); } body.theme-dark .acceptance-card li, body.theme-dark .branch-question, body.theme-dark .sub-branch { color: var(--text-body); } body.theme-dark .acceptance-card li strong { color: var(--text-heading); } body.theme-dark .acceptance-card li { border-bottom-color: var(--border-light); } /* Type card borders */ body.theme-dark .type-card.certified { border-color: var(--state-info); } body.theme-dark .type-card.moj { border-color: var(--accent-coral); } body.theme-dark .type-details { border-top-color: var(--border-medium); } /* Client story blockquote */ body.theme-dark .client-story blockquote { background: var(--surface-muted); border-left-color: var(--accent-coral); } body.theme-dark .client-story blockquote p { color: var(--text-body); } body.theme-dark .story-note { color: var(--text-muted); } /* Decision flowchart */ body.theme-dark .sub-branch .certified { color: var(--state-info); } body.theme-dark .sub-branch .answer.yes { background: rgba(255, 107, 107, 0.15); color: var(--accent-coral); } body.theme-dark .sub-branch .answer.no { background: rgba(127, 209, 255, 0.15); color: var(--state-info); } /* Comparison tables */ body.theme-dark .comparison-table { background: var(--surface-muted); } body.theme-dark .comparison-table th { background: var(--surface-navy); color: var(--text-heading); } body.theme-dark .comparison-table td { color: var(--text-body); border-bottom-color: var(--border-medium); } body.theme-dark .price-highlight.certified { color: var(--state-info); } body.theme-dark .price-highlight.moj { color: var(--accent-coral); } /* HR Guide section */ body.theme-dark .hr-guide .guide-block { background: var(--surface-muted); } /* CTA sections with navy background */ body.theme-dark .cta-section h2 { color: var(--text-heading); } body.theme-dark .cta-section p { color: var(--text-body); } }