/** * DubaiSchools.ai - Dark Mode * Toggled via [data-theme="dark"] on */ /* ============================================ DARK MODE TOGGLE BUTTON ============================================ */ .theme-toggle { background: none; border: 1px solid var(--gray-200); border-radius: var(--radius-full); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--gray-500); transition: all 0.2s; flex-shrink: 0; } .theme-toggle:hover { background: var(--gray-100); color: var(--gray-700); } .theme-toggle .icon-sun, .theme-toggle .icon-moon { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } /* ============================================ DARK THEME VARIABLE OVERRIDES ============================================ */ [data-theme="dark"] { --gray-50: #0f1117; --gray-100: #1a1d27; --gray-200: #2a2e3a; --gray-300: #3d4251; --gray-400: #6b7280; --gray-500: #9ca3af; --gray-600: #c9cdd5; --gray-700: #e2e4e9; --gray-800: #f0f1f3; --gray-900: #f9fafb; --green-50: #052e16; --green-100: #064e2e; --blue-50: #0c1929; --blue-100: #1e3a5f; --red-50: #2d0a0a; --red-100: #4a1515; --amber-50: #271a04; --amber-100: #3d2b0a; --pro-50: #1a0a2e; --pro-100: #2d1452; --teal-50: #062029; --teal-100: #0a3444; --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.2); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.3), 0 8px 10px -6px rgb(0 0 0 / 0.3); } /* ============================================ BODY & GLOBAL ============================================ */ [data-theme="dark"] body { background: #0f1117; color: #e2e4e9; } /* ============================================ HEADER ============================================ */ [data-theme="dark"] header { background: rgba(15, 17, 23, 0.95); border-bottom-color: #2a2e3a; } [data-theme="dark"] .theme-toggle { border-color: #2a2e3a; color: #9ca3af; } [data-theme="dark"] .theme-toggle:hover { background: #1a1d27; color: #e2e4e9; } [data-theme="dark"] .logo span { background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 50%, #14b8a6 100%); -webkit-background-clip: text; background-clip: text; } [data-theme="dark"] nav a { color: #9ca3af; } [data-theme="dark"] nav a:hover { color: #e2e4e9; background: #1a1d27; } /* Mobile nav */ [data-theme="dark"] nav { background: #0f1117; border-top-color: #2a2e3a; } [data-theme="dark"] nav a { border-bottom-color: #1a1d27; } [data-theme="dark"] nav a:hover, [data-theme="dark"] nav a.active { background: #062029; } /* ============================================ HERO SECTION ============================================ */ [data-theme="dark"] .hero { background: linear-gradient(180deg, #0a1a1f 0%, #0f1117 100%); border-bottom-color: #2a2e3a; } [data-theme="dark"] .hero::before { background: radial-gradient(ellipse at center, rgba(6, 182, 212, 0.08) 0%, transparent 70%); } /* ============================================ SEARCH & FILTERS ============================================ */ [data-theme="dark"] .search-container { background: #1a1d27; border-color: #2a2e3a; box-shadow: 0 8px 30px -5px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .search-input-wrapper input, [data-theme="dark"] .filter-group select, [data-theme="dark"] .sort-select { background: #0f1117; border-color: #2a2e3a; color: #e2e4e9; } [data-theme="dark"] .search-input-wrapper input:focus { border-color: #06b6d4; box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15); } [data-theme="dark"] .search-input-wrapper input::placeholder { color: #6b7280; } [data-theme="dark"] .search-tab { background: #1a1d27; color: #9ca3af; } [data-theme="dark"] .search-tab:hover:not(.active) { background: #2a2e3a; } /* ============================================ STATS BAR ============================================ */ [data-theme="dark"] .stats-bar { background: #1a1d27; border-bottom-color: #2a2e3a; } /* ============================================ SCHOOL CARDS ============================================ */ [data-theme="dark"] .school-card { background: #1a1d27; border-color: #2a2e3a; } [data-theme="dark"] .school-card:hover { border-color: #0891b2; box-shadow: 0 4px 12px -2px rgba(6, 182, 212, 0.15); } [data-theme="dark"] .distance-bar { background: #0f1117; } [data-theme="dark"] .fees-row { border-top-color: #2a2e3a; } [data-theme="dark"] .btn-secondary { background: #1a1d27; border-color: #2a2e3a; color: #c9cdd5; } [data-theme="dark"] .btn-secondary:hover { border-color: #06b6d4; color: #06b6d4; } /* Fee range */ [data-theme="dark"] .fee-range-marker { border-color: #1a1d27; } /* ============================================ SKELETON LOADING ============================================ */ [data-theme="dark"] .skeleton-card { background: #1a1d27; border-color: #2a2e3a; } [data-theme="dark"] .skeleton-line { background: linear-gradient(90deg, #1a1d27 25%, #2a2e3a 50%, #1a1d27 75%); background-size: 200% 100%; } /* ============================================ MAP ============================================ */ [data-theme="dark"] .map-container { border-color: #2a2e3a; } /* ============================================ COMPARE BAR ============================================ */ [data-theme="dark"] .compare-bar { background: #1a1d27; border-top: 1px solid #2a2e3a; } /* ============================================ RANKINGS TABLE ============================================ */ [data-theme="dark"] .rankings-table { background: #1a1d27; border-color: #2a2e3a; } [data-theme="dark"] .rankings-table th { background: #0f1117; } [data-theme="dark"] .rankings-table th, [data-theme="dark"] .rankings-table td { border-bottom-color: #2a2e3a; } [data-theme="dark"] .rankings-table tr:hover td { background: #0f1117; } /* ============================================ RANKING TABS ============================================ */ [data-theme="dark"] .ranking-tab { background: #1a1d27; border-color: #2a2e3a; color: #9ca3af; } [data-theme="dark"] .ranking-tab:hover { border-color: #06b6d4; color: #06b6d4; } /* ============================================ COMPARE PAGE ============================================ */ [data-theme="dark"] .compare-column { background: #1a1d27; border-color: #2a2e3a; } [data-theme="dark"] .compare-row { border-bottom-color: #2a2e3a; } /* ============================================ COMPACT SEARCH BAR ============================================ */ [data-theme="dark"] .compact-search-bar { background: rgba(15, 17, 23, 0.97); border-bottom-color: #2a2e3a; } [data-theme="dark"] .compact-search-inner input { background: #1a1d27; border-color: #2a2e3a; color: #e2e4e9; } [data-theme="dark"] .compact-search-inner select { background: #1a1d27; border-color: #2a2e3a; color: #e2e4e9; } /* ============================================ FOOTER ============================================ */ [data-theme="dark"] footer { background: #080a0e; } /* ============================================ PAGE HEADER (rankings, compare, etc.) ============================================ */ [data-theme="dark"] .page-header { background: #1a1d27; border-bottom-color: #2a2e3a; } /* ============================================ SEO SECTIONS ============================================ */ [data-theme="dark"] .seo-stats-section, [data-theme="dark"] .seo-curriculum-section, [data-theme="dark"] .seo-ratings-section, [data-theme="dark"] .seo-results-section { background: #0f1117; } [data-theme="dark"] .seo-stats-section { background: #1a1d27; } [data-theme="dark"] .stat-highlight { background: #0f1117; } [data-theme="dark"] .curriculum-card { background: #1a1d27; border-color: #2a2e3a; } [data-theme="dark"] .result-box { background: #1a1d27; } /* ============================================ AREAS SECTION (homepage) ============================================ */ [data-theme="dark"] .areas-section { background: #1a1d27; border-top-color: #2a2e3a; } /* ============================================ SIMILAR SCHOOLS ============================================ */ [data-theme="dark"] .similar-schools-section { border-top-color: #2a2e3a; } [data-theme="dark"] .similar-school-card { background: #1a1d27; border-color: #2a2e3a; } [data-theme="dark"] .similar-school-card:hover { border-color: #0891b2; } /* ============================================ SUGGESTION CHIPS / EMPTY STATE ============================================ */ [data-theme="dark"] .suggestion-chip { background: #1a1d27; border-color: #2a2e3a; color: #9ca3af; } [data-theme="dark"] .suggestion-chip:hover { border-color: #06b6d4; color: #06b6d4; background: #062029; } /* ============================================ SOCIAL PROOF ============================================ */ [data-theme="dark"] .proof-avatar { border-color: #1a1d27; background: #0a3444; color: #22d3ee; } /* ============================================ AI SEARCH ============================================ */ [data-theme="dark"] .ai-search-wrapper { background: rgba(26, 29, 39, 0.95); } [data-theme="dark"] #ai-search-input { background: #0f1117; border-color: #2a2e3a; color: #e2e4e9; } [data-theme="dark"] #ai-search-input:focus { border-color: #06b6d4; } [data-theme="dark"] .ai-explanation { background: linear-gradient(135deg, #062029 0%, #1a1d27 100%); border-color: #0a3444; } [data-theme="dark"] .criteria-tag { background: #1a1d27; border-color: #0a3444; color: #22d3ee; } /* ============================================ TRAVEL CONTROLS ============================================ */ [data-theme="dark"] .travel-controls { background: #1a1d27; } [data-theme="dark"] .travel-mode-toggle { background: #0f1117; border-color: #2a2e3a; } [data-theme="dark"] .time-btn, [data-theme="dark"] .sort-btn, [data-theme="dark"] .drive-time-btn { background: #0f1117; border-color: #2a2e3a; color: #9ca3af; } /* ============================================ MAP BOTTOM SHEET (mobile) ============================================ */ [data-theme="dark"] .map-bottom-sheet { background: #1a1d27; } /* ============================================ DISTANCE BADGES ============================================ */ [data-theme="dark"] .distance-badge { background: #1a1d27; color: #9ca3af; } [data-theme="dark"] .distance-badge.within-radius { background: #064e2e; color: #34d399; } /* ============================================ BREADCRUMBS ============================================ */ [data-theme="dark"] .breadcrumbs .separator { color: #3d4251; } /* ============================================ KHDA REPORT LINK ============================================ */ [data-theme="dark"] .khda-report-link { background: #062029; border-color: #0a3444; color: #22d3ee; } [data-theme="dark"] .khda-report-link:hover { background: #0a3444; } /* ============================================ NOTE ============================================ */ [data-theme="dark"] .note { background: #1a1d27; } /* ============================================ FOCUS / DEMAND BADGES (keep readable in dark) ============================================ */ [data-theme="dark"] .focus-badge { background: #1a1d27; color: #9ca3af; } [data-theme="dark"] .focus-mini { background: #1a1d27; } /* ============================================ UNI BADGES ============================================ */ [data-theme="dark"] .uni-badge { background: #1e3a5f; color: #93c5fd; } /* ============================================ COMPARE GATE OVERLAY ============================================ */ [data-theme="dark"] .compare-gate-overlay { background: linear-gradient(to right, transparent 40%, #0f1117 55%); } /* ============================================ EXPAND RADIUS HINT ============================================ */ [data-theme="dark"] .expand-radius-hint { background: #271a04; border-color: #d97706; } [data-theme="dark"] .expand-radius-hint p { color: #fbbf24; } /* ============================================ LOCATION PROMPT ============================================ */ [data-theme="dark"] .location-prompt { color: #9ca3af; } /* ============================================ LEAFLET MAP DARK TILES ============================================ */ [data-theme="dark"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(1.1); } [data-theme="dark"] .area-label { background: #1a1d27; color: #c9cdd5; box-shadow: 0 1px 4px rgba(0,0,0,0.5); } [data-theme="dark"] .area-label.high-density { background: #0891b2; color: white; } [data-theme="dark"] .area-label.medium-density { background: #0e7490; color: white; } /* Leaflet popups */ [data-theme="dark"] .leaflet-popup-content-wrapper { background: #1a1d27; color: #e2e4e9; } [data-theme="dark"] .leaflet-popup-tip { background: #1a1d27; } /* ============================================ AUTH MODAL ============================================ */ [data-theme="dark"] .modal-content { background: #1a1d27; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .auth-tab.active { background: #0f1117; } [data-theme="dark"] .auth-form input { background: #0f1117; border-color: #2a2e3a; color: #e2e4e9; } [data-theme="dark"] .btn-google { background: #0f1117; border-color: #2a2e3a; color: #c9cdd5; } [data-theme="dark"] .btn-google:hover { background: #1a1d27; } [data-theme="dark"] .upgrade-features li { border-bottom-color: #2a2e3a; } [data-theme="dark"] .toast { background: #1a1d27; border-color: #2a2e3a; color: #e2e4e9; } /* Design system overrides */ [data-theme="dark"] .site-header { background: rgba(15, 17, 23, 0.95); border-bottom-color: #2a2e3a; } [data-theme="dark"] .header-user-dropdown { background: #1a1d27; border-color: #2a2e3a; box-shadow: 0 10px 40px -5px rgb(0 0 0 / 0.4); } [data-theme="dark"] .dropdown-header { border-bottom-color: #2a2e3a; } [data-theme="dark"] .dropdown-divider { background: #2a2e3a; } [data-theme="dark"] .dropdown-item:hover { background: #0f1117; } [data-theme="dark"] .upgrade-modal-content { background: #1a1d27; } [data-theme="dark"] .upgrade-features { background: #0f1117; } [data-theme="dark"] .upgrade-feature:not(:last-child) { border-bottom-color: #2a2e3a; } /* Auth buttons */ [data-theme="dark"] .btn-signin { color: #e2e4e9; } [data-theme="dark"] .user-dropdown { background: #1a1d27; border-color: #2a2e3a; } /* ============================================ AREAS PAGE (inline styles) ============================================ */ [data-theme="dark"] .areas-hero { background: linear-gradient(-45deg, #062029, #0a3444, #0e7490, #155e75, #083344, #0891b2) !important; background-size: 300% 300% !important; } [data-theme="dark"] .search-bar { background: #1a1d27; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3); } [data-theme="dark"] .search-bar input { background: #0f1117; border-color: #2a2e3a; color: #e2e4e9; } [data-theme="dark"] .search-bar select, [data-theme="dark"] .sort-dropdown select { background: #0f1117; border-color: #2a2e3a; color: #e2e4e9; } [data-theme="dark"] .best-community-card { background: #1a1d27; border-color: #2a2e3a; } [data-theme="dark"] .best-community-card:hover { border-color: rgba(212, 175, 55, 0.4); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3); } [data-theme="dark"] .area-card { background: #1a1d27; border-color: #2a2e3a; } [data-theme="dark"] .area-card:hover { border-color: rgba(20, 184, 166, 0.4); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3); } [data-theme="dark"] .area-card-header { border-bottom-color: #2a2e3a; } [data-theme="dark"] .school-count-badge { background: #062029; color: #22d3ee; } [data-theme="dark"] .area-card-body .avg-fee { border-top-color: #2a2e3a; } [data-theme="dark"] .curriculum-tag { background: #0f1117; color: #9ca3af; } [data-theme="dark"] #map-container { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3); } /* ============================================ PRICING PAGE (inline styles) ============================================ */ [data-theme="dark"] .pricing-hero { background: linear-gradient(135deg, #062029 0%, #0a3444 40%, #0e7490 100%) !important; } [data-theme="dark"] .pricing-content .social-proof-bar { color: #c9cdd5; } [data-theme="dark"] .pricing-card { background: #1a1d27; box-shadow: 0 10px 40px rgba(0,0,0,0.3); } [data-theme="dark"] .pricing-card.featured { border-color: #06b6d4; } [data-theme="dark"] .btn-free { background: #0f1117; color: #c9cdd5; } [data-theme="dark"] .btn-free:hover { background: #2a2e3a; } [data-theme="dark"] .currency-note select { background: #0f1117; border-color: #2a2e3a; color: #e2e4e9; } [data-theme="dark"] .already-pro { background: rgba(16,185,129,0.05); border-color: rgba(16,185,129,0.2); } [data-theme="dark"] .faq-item { background: #1a1d27; box-shadow: 0 1px 3px rgb(0 0 0 / 0.2); } [data-theme="dark"] .faq-question { color: #e2e4e9; } [data-theme="dark"] .faq-answer { color: #9ca3af; } /* Testimonial cards on pricing page (inline styles) */ [data-theme="dark"] .pricing-page section > div > div[style*="background:white"], [data-theme="dark"] .pricing-page section > div[style*="background:white"] { background: #1a1d27 !important; border-color: #2a2e3a !important; } /* ============================================ NURSERIES PAGE ============================================ */ [data-theme="dark"] .nursery-hero { background: linear-gradient(135deg, #062029 0%, #0a3444 40%, #0e7490 100%) !important; } [data-theme="dark"] .search-box { background: #1a1d27 !important; box-shadow: 0 10px 40px rgba(0,0,0,0.4) !important; } [data-theme="dark"] .search-box input { background: #0f1117; border-color: #2a2e3a; color: #e2e4e9; } [data-theme="dark"] .search-box input::placeholder { color: #6b7280; } [data-theme="dark"] .filter-group select { background: #0f1117 !important; border-color: #2a2e3a; color: #e2e4e9; } [data-theme="dark"] .nursery-card { background: #1a1d27 !important; border-color: #2a2e3a !important; } [data-theme="dark"] .nursery-card:hover { border-color: #0891b2 !important; box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important; } [data-theme="dark"] .nursery-card h3 { color: #f0f1f3; } [data-theme="dark"] .autocomplete-dropdown { background: #1a1d27 !important; border-color: #2a2e3a; box-shadow: 0 10px 40px rgba(0,0,0,0.4); } [data-theme="dark"] .autocomplete-item { border-bottom-color: #2a2e3a; } [data-theme="dark"] .autocomplete-item:hover { background: #0f1117; } [data-theme="dark"] .results-header { border-bottom-color: #2a2e3a; } [data-theme="dark"] .near-me-btn { background: #062029; border-color: #0a3444; color: #22d3ee; } [data-theme="dark"] .sort-select { background: #0f1117 !important; border-color: #2a2e3a; color: #e2e4e9; } [data-theme="dark"] .show-more-btn { background: #062029; border-color: #0a3444; color: #22d3ee; } [data-theme="dark"] .show-more-btn:hover { background: #0a3444; border-color: #0e7490; } [data-theme="dark"] .map-panel { border-left-color: #2a2e3a; } /* ============================================ COMPARE PAGE ============================================ */ [data-theme="dark"] .compare-hero { background: linear-gradient(135deg, #062029 0%, #0a3444 40%, #0e7490 100%) !important; } [data-theme="dark"] .school-selector { background: #1a1d27 !important; border-color: #2a2e3a; } [data-theme="dark"] .school-selector input { background: #0f1117; border-color: #2a2e3a; color: #e2e4e9; } /* ============================================ SCHOOL DETAIL PAGE ============================================ */ [data-theme="dark"] .school-hero { background: linear-gradient(135deg, #062029 0%, #0a3444 40%, #0e7490 100%) !important; } [data-theme="dark"] .info-card { background: #1a1d27 !important; border-color: #2a2e3a; } /* ============================================ ABOUT PAGE ============================================ */ [data-theme="dark"] .about-hero { background: linear-gradient(135deg, #062029 0%, #0a3444 40%, #0e7490 100%) !important; } [data-theme="dark"] .match-hero { background: linear-gradient(135deg, #062029 0%, #0a3444 40%, #0e7490 100%) !important; } [data-theme="dark"] .seo-hero { background: linear-gradient(135deg, #062029 0%, #0a3444 40%, #0e7490 100%) !important; } [data-theme="dark"] .contact-card { background: #1a1d27 !important; border-color: #2a2e3a; } /* ============================================ RANKINGS PAGE ============================================ */ [data-theme="dark"] .ranking-tab { background: #1a1d27 !important; border-color: #2a2e3a; } /* ============================================ INSIGHTS PAGE ============================================ */ [data-theme="dark"] .stat-card, [data-theme="dark"] .chart-card, [data-theme="dark"] .insight-card { background: #1a1d27 !important; border-color: #2a2e3a; } /* ============================================ SMOOTH TRANSITION ============================================ */ html { transition: background-color 0.3s ease; } body, header, footer, .school-card, .search-container, .stats-bar, .rankings-table, .compare-column, .page-header, .skeleton-card, .compact-search-bar, .area-card, .similar-school-card, .suggestion-chip, .distance-bar, .theme-toggle, nav, .map-bottom-sheet, .ai-search-wrapper, .travel-controls, .curriculum-card, .stat-highlight, .result-box { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; }