/* ============================================ CONTRAST FIXES - CONSOLIDATED OnlineTranslation.ae PHASE 2 CLEANUP: - Removed duplicate card link rules (now in base-architecture.css) - Replaced hardcoded colors with CSS tokens - Removed unnecessary !important declarations - All dark mode rules use body.theme-dark This file handles DARK MODE component overrides that aren't covered by base-architecture.css ============================================ */ /* ============================================ CRITICAL: GRAY TEXT ON NAVY PREVENTION - LIGHT MODE NEVER use muted/gray text colors on navy backgrounds. This rule enforces high-contrast text on all dark sections in LIGHT MODE specifically. Affected classes: .bg-dark, .hero-section, .surface-navy Uses !important to override global-fixes.css rules ============================================ */ /* Force bright text on navy/dark sections - LIGHT MODE ONLY */ /* These rules apply when NOT in dark theme mode */ body:not(.theme-dark) .bg-dark, body:not(.theme-dark) .hero-section, body:not(.theme-dark) section[class*="navy"], body:not(.theme-dark) div[class*="navy"], body:not(.theme-dark) .cta-section { color: #f4f7fc !important; } /* Hero section headings - LIGHT MODE */ body:not(.theme-dark) .hero-section h1, body:not(.theme-dark) .hero-section h2, body:not(.theme-dark) .hero-section h3, body:not(.theme-dark) .bg-dark h1, body:not(.theme-dark) .bg-dark h2, body:not(.theme-dark) .bg-dark h3 { color: #f4f7fc !important; } /* Hero intro text - CRITICAL FIX for gray-on-navy */ body:not(.theme-dark) .hero-section .hero-intro, body:not(.theme-dark) .hero-section p, body:not(.theme-dark) .bg-dark .hero-intro, body:not(.theme-dark) .bg-dark p:not(.card p) { color: #f4f7fc !important; opacity: 0.95; } /* Hero badge/label text */ body:not(.theme-dark) .hero-section .hero-badge, body:not(.theme-dark) .bg-dark .hero-badge { color: #7fd1ff !important; } /* Service snapshot items in hero */ body:not(.theme-dark) .hero-section .snapshot-item, body:not(.theme-dark) .hero-section .snapshot-item span, body:not(.theme-dark) .bg-dark .snapshot-item, body:not(.theme-dark) .bg-dark .snapshot-item span { color: #f4f7fc !important; } body:not(.theme-dark) .hero-section .snapshot-item strong, body:not(.theme-dark) .bg-dark .snapshot-item strong { color: #ffffff !important; } body:not(.theme-dark) .hero-section .snapshot-item i, body:not(.theme-dark) .bg-dark .snapshot-item i { color: #7fd1ff !important; } /* Breadcrumb on hero sections - LIGHT MODE */ body:not(.theme-dark) .hero-section .breadcrumb, body:not(.theme-dark) .hero-section .breadcrumb a, body:not(.theme-dark) .bg-dark .breadcrumb, body:not(.theme-dark) .bg-dark .breadcrumb a { color: rgba(244, 247, 252, 0.85) !important; } body:not(.theme-dark) .hero-section .breadcrumb a:hover, body:not(.theme-dark) .bg-dark .breadcrumb a:hover { color: #ffffff !important; } body:not(.theme-dark) .hero-section .breadcrumb .separator, body:not(.theme-dark) .bg-dark .breadcrumb .separator { color: rgba(244, 247, 252, 0.6) !important; } body:not(.theme-dark) .hero-section .breadcrumb .current, body:not(.theme-dark) .bg-dark .breadcrumb .current { color: #ffffff !important; } /* CTA section text on navy background - LIGHT MODE */ body:not(.theme-dark) .cta-section h2 { color: #f4f7fc !important; } body:not(.theme-dark) .cta-section p { color: rgba(244, 247, 252, 0.9) !important; } /* List items on dark backgrounds */ body:not(.theme-dark) .hero-section li, body:not(.theme-dark) .bg-dark li:not(.card li) { color: #f4f7fc !important; } /* Preserve link colors on dark backgrounds */ body:not(.theme-dark) .bg-dark a:not(.btn):not(.card a), body:not(.theme-dark) .hero-section a:not(.btn):not(.breadcrumb a) { color: #7fd1ff !important; } body:not(.theme-dark) .bg-dark a:not(.btn):not(.card a):hover, body:not(.theme-dark) .hero-section a:not(.btn):not(.breadcrumb a):hover { color: #ffe178 !important; } @layer states { /* ============================================ SIDEBAR CONTRAST FIXES ============================================ */ /* Sidebar tagline - improved visibility */ body.theme-dark .sidebar-tagline { color: var(--text-on-dark-muted); } /* Accordion chevrons */ body.theme-dark .sidebar-accordion-heading .accordion-chevron { color: var(--text-on-dark-muted); } /* Sidebar nav links */ body.theme-dark .sidebar-nav ul li a { color: var(--text-body); } body.theme-dark .sidebar-nav ul li a:hover { color: var(--text-heading); background: rgba(255, 255, 255, 0.08); } 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); } /* Quick links in sidebar */ body.theme-dark .quick-links a { color: var(--text-body); background: rgba(255, 255, 255, 0.08); } body.theme-dark .quick-links a:hover { color: var(--text-heading); background: rgba(255, 255, 255, 0.12); } /* ============================================ CAROUSEL & SLIDER CONTRAST ============================================ */ /* Carousel dots */ body.theme-dark .carousel-dot { border-color: var(--text-on-dark-muted); } body.theme-dark .carousel-dot.active { background: var(--accent-coral); border-color: var(--accent-coral); } /* Carousel navigation arrows */ body.theme-dark .carousel-arrow { color: var(--text-on-dark); background: rgba(255, 255, 255, 0.1); border-color: var(--border-on-dark); } body.theme-dark .carousel-arrow:hover { background: rgba(255, 255, 255, 0.2); } /* ============================================ FORM ELEMENT CONTRAST ============================================ */ /* Form labels */ body.theme-dark label { color: var(--text-heading); } /* Form inputs */ 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); outline: none; box-shadow: 0 0 0 3px rgba(127, 209, 255, 0.2); } /* Checkboxes & radios */ body.theme-dark input[type="checkbox"] { accent-color: var(--link-color); } /* ============================================ TABLE CONTRAST ============================================ */ 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.03); } body.theme-dark tr:hover { background: rgba(255, 255, 255, 0.06); } /* ============================================ BADGE & TAG CONTRAST ============================================ */ body.theme-dark .badge, body.theme-dark .tag { background: var(--surface-navy); color: var(--text-heading); border: 1px solid var(--border-medium); } /* ============================================ BLOCKQUOTE & CODE CONTRAST ============================================ */ body.theme-dark blockquote { background: var(--surface-muted); border-left-color: var(--accent-coral); color: var(--text-body); } body.theme-dark blockquote cite { color: var(--text-muted); } body.theme-dark code { background: var(--surface-navy); color: var(--text-heading); border-color: var(--border-medium); } /* ============================================ ALERT & NOTICE CONTRAST ============================================ */ body.theme-dark .alert, body.theme-dark .notice { background: var(--surface-muted); border-color: var(--border-medium); color: var(--text-body); } /* ============================================ BREADCRUMB CONTRAST ============================================ */ body.theme-dark .breadcrumb { color: var(--text-muted); } body.theme-dark .breadcrumb a { color: var(--link-color); } body.theme-dark .breadcrumb a:hover { color: var(--link-hover); } /* ============================================ PAGINATION CONTRAST ============================================ */ /* ============================================ TOOLTIP CONTRAST ============================================ */ /* ============================================ MODAL & OVERLAY CONTRAST ============================================ */ body.theme-dark .dialog { background: var(--surface-raised); border: 1px solid var(--border-medium); box-shadow: var(--shadow-lg); } } /* ============================================ NOTE: Card link text overrides moved to base-architecture.css (single source of truth) The !important declarations there are necessary because the global link color rule (body.theme-dark a) sets all links to white, and cards need dark text on their light backgrounds. ============================================ */