/* ═══════════════════════════════════════════════════ GLOBAL DARK OVERRIDE — site-wide warm brown/gold Applied LAST in so it wins over any page CSS. Targets common card patterns across all pages. ═══════════════════════════════════════════════════ */ /* ────────── 1. SHARED TOKENS ────────── */ :root[data-theme="dark"]{ --yq-dark-bg: #1f1509; --yq-dark-bg-2: #281a0e; --yq-dark-bg-3: #3a2818; --yq-dark-card: linear-gradient(155deg, rgba(58,40,24,0.92), rgba(40,26,14,0.85)); --yq-dark-card-soft: linear-gradient(155deg, rgba(74,52,30,0.85), rgba(50,34,18,0.78)); --yq-dark-border: rgba(196,142,68,0.25); --yq-dark-border-2: rgba(232,196,124,0.35); --yq-gold: #e8c47c; --yq-gold-soft: #d4b88a; --yq-ivory: #fce6b4; --yq-ink: #f4e4c1; --yq-ink-mute: #c4a878; } /* ────────── 2. PAGE BACKGROUND ────────── */ [data-theme="dark"] body, [data-theme="dark"] main, [data-theme="dark"] .page-wrap, [data-theme="dark"] .home-v10, [data-theme="dark"] [class*="page-"]{ background: radial-gradient(ellipse at 50% -10%, rgba(196,142,68,0.10), transparent 60%), linear-gradient(180deg, #2a1d10 0%, #1f1509 100%) !important; color:var(--yq-ink) !important; } /* ────────── 3. UNIVERSAL WHITE-CARD KILLER ────────── Catches every cream / white card on every page. Selectors target common patterns site-wide. */ [data-theme="dark"] .v10-action-tile, [data-theme="dark"] .v10-need-tile, [data-theme="dark"] .v10-reco-card, [data-theme="dark"] .v10-listen-card, [data-theme="dark"] .v10-listen-feature, [data-theme="dark"] .v10-guide-card, [data-theme="dark"] .v10-prog-block, [data-theme="dark"] .v10-program, [data-theme="dark"] .v10-recos, [data-theme="dark"] .v10-needs, [data-theme="dark"] .v10-quick, [data-theme="dark"] .v10-xp, [data-theme="dark"] .v10-xp-stat, [data-theme="dark"] .v10-journey, [data-theme="dark"] .v10-event, [data-theme="dark"] .v10-events, [data-theme="dark"] .v10-bismillah-card, [data-theme="dark"] .v10-bismillah, [data-theme="dark"] .v10-amal-card, [data-theme="dark"] .v10-guidance, [data-theme="dark"] .v10-listen, [data-theme="dark"] [class*="card"], [data-theme="dark"] [class*="-tile"], [data-theme="dark"] [class*="-block"]:not(body):not(html), [data-theme="dark"] [class*="-panel"], [data-theme="dark"] [class*="-box"]{ background:var(--yq-dark-card) !important; border:1px solid var(--yq-dark-border) !important; box-shadow: 0 6px 18px rgba(0,0,0,0.35), inset 0 1px 0 rgba(232,196,124,0.06) !important; color:var(--yq-ink) !important; } /* Icon containers in cards — dark mode fix */ [data-theme="dark"] .v10-reco-icon, [data-theme="dark"] [class*="-icon"]:not(.material-icons-round):not(.yqf-noor-icon):not(.yqf-topics-spark), [data-theme="dark"] [class*="-icon-wrap"] { background: rgba(196,154,78,0.12) !important; color: #e8c97e !important; } /* Action chips (small pills) */ [data-theme="dark"] .v10-action-cta, [data-theme="dark"] .v10-chip, [data-theme="dark"] .v10-quick a, [data-theme="dark"] .v10-quick button, [data-theme="dark"] [class*="-chip"]{ background:rgba(58,40,24,0.85) !important; border:1px solid var(--yq-dark-border) !important; color:var(--yq-ivory) !important; } /* Primary buttons keep their gold */ [data-theme="dark"] .v10-btn-primary, [data-theme="dark"] [class*="cta"]:not(input){ background:linear-gradient(180deg, #d4a574, #a87838) !important; border:1px solid rgba(232,196,124,0.55) !important; color:#2a1d10 !important; } [data-theme="dark"] .v10-btn-ghost{ background:rgba(58,40,24,0.55) !important; border:1px solid var(--yq-dark-border) !important; color:var(--yq-ivory) !important; } /* ────────── 4. TEXT COLORS ────────── */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] .v10-section-head h2, [data-theme="dark"] .v10-section-head-row, [data-theme="dark"] [class*="-title"]{ color:var(--yq-ivory) !important; } [data-theme="dark"] p, [data-theme="dark"] li, [data-theme="dark"] span, [data-theme="dark"] .v10-section-sub, [data-theme="dark"] [class*="-sub"], [data-theme="dark"] [class*="-meta"], [data-theme="dark"] [class*="-hint"], [data-theme="dark"] [class*="-lead"]{ color:var(--yq-ink) !important; } [data-theme="dark"] .v10-action-time, [data-theme="dark"] .v10-need-emo, [data-theme="dark"] .v10-action-s, [data-theme="dark"] [class*="-tag"], [data-theme="dark"] [class*="-badge"]:not(.v10-badge-icon){ color:var(--yq-gold) !important; } /* Time badges (e.g. "2 min", "3 min") */ [data-theme="dark"] .v10-action-top, [data-theme="dark"] [class*="time"]{ color:var(--yq-gold-soft) !important; } /* Links */ [data-theme="dark"] a:not(.v10-btn-primary):not([class*="cta"]){ color:var(--yq-gold) !important; } /* ────────── 5. EVENT TYPE TINTS (keep semantic) ────────── */ [data-theme="dark"] .v10-event-celebration{ background:linear-gradient(155deg, rgba(140,90,30,0.55), rgba(90,55,15,0.45)) !important; border-color:rgba(232,196,124,0.40) !important; } [data-theme="dark"] .v10-event-mourning{ background:linear-gradient(155deg, rgba(120,40,40,0.55), rgba(80,25,25,0.45)) !important; border-color:rgba(220,140,140,0.32) !important; } [data-theme="dark"] .v10-event-historical{ background:linear-gradient(155deg, rgba(40,80,90,0.55), rgba(25,55,65,0.45)) !important; border-color:rgba(140,200,220,0.32) !important; } [data-theme="dark"] .v10-event-spiritual{ background:linear-gradient(155deg, rgba(80,60,120,0.55), rgba(55,40,85,0.45)) !important; border-color:rgba(180,160,220,0.32) !important; } /* ────────── 6. CROSS-PAGE CARDS (kutub, audio, library, account, etc.) ────────── */ [data-theme="dark"] .kx-card, [data-theme="dark"] .au-card, [data-theme="dark"] .lib-card, [data-theme="dark"] .acc-card, [data-theme="dark"] .qr-card, [data-theme="dark"] .rd-card, [data-theme="dark"] .bk-card, [data-theme="dark"] .article-card, [data-theme="dark"] .module-card, [data-theme="dark"] .dashboard-card, [data-theme="dark"] .form-panel, [data-theme="dark"] .auth-card, [data-theme="dark"] .tx-card, [data-theme="dark"] .tx-panel, [data-theme="dark"] .tx-section{ background:var(--yq-dark-card) !important; border:1px solid var(--yq-dark-border) !important; color:var(--yq-ink) !important; } /* Inputs */ [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="number"], [data-theme="dark"] textarea, [data-theme="dark"] select{ background:rgba(20,14,6,0.7) !important; border:1px solid var(--yq-dark-border) !important; color:var(--yq-ivory) !important; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder{ color:var(--yq-ink-mute) !important; } /* ────────── 7. PRESERVE ARABIC PILLS ────────── Keep the salam pill / dhikr badge readable */ [data-theme="dark"] .v10-salam-pill .v10-salam-ar, [data-theme="dark"] .dhikr-ar{ color:var(--yq-ivory) !important; } [data-theme="dark"] .v10-salam-pill .v10-salam-fr, [data-theme="dark"] .dhikr-fr, [data-theme="dark"] .dhikr-en{ color:var(--yq-gold-soft) !important; } /* ════════════════════════════════════════════════════ HEADER & FOOTER — warm brown/gold harmony Overrides the previous dark-blue palette. ════════════════════════════════════════════════════ */ /* ─── HEADER ─── */ [data-theme="dark"] .site-header, body[data-theme="dark"] .site-header{ background:linear-gradient(180deg, #2c1f10 0%, #1f1509 100%) !important; border-bottom:1px solid rgba(196,142,68,0.22) !important; box-shadow:0 4px 18px rgba(0,0,0,0.35) !important; } [data-theme="dark"] .site-header::before, [data-theme="dark"] .header-glow{ background:radial-gradient(ellipse at 50% 0%, rgba(232,196,124,0.18), transparent 65%) !important; opacity:.7 !important; } /* Nav pill (the central capsule with menu items) */ [data-theme="dark"] .nav-pill{ background:rgba(58,40,24,0.72) !important; border:1px solid rgba(196,142,68,0.28) !important; box-shadow:inset 0 1px 0 rgba(232,196,124,0.06) !important; } [data-theme="dark"] .nav-pill-indicator{ background:linear-gradient(180deg, #d4a574, #a87838) !important; box-shadow:0 4px 12px rgba(168,120,56,0.4) !important; } [data-theme="dark"] .nav-link{ color:#d4b88a !important; } [data-theme="dark"] .nav-link.active, [data-theme="dark"] .nav-link:hover{ color:#fce6b4 !important; } [data-theme="dark"] .nav-link.active .nav-link-text{ color:#2a1d10 !important; } /* Icon buttons (search, theme, lang) */ [data-theme="dark"] .nav-icon-btn{ background:rgba(58,40,24,0.55) !important; border:1px solid rgba(196,142,68,0.25) !important; color:#e8c47c !important; } [data-theme="dark"] .nav-icon-btn:hover{ background:rgba(74,52,30,0.85) !important; border-color:rgba(232,196,124,0.45) !important; color:#fce6b4 !important; } /* Lang pill / theme switcher */ [data-theme="dark"] .lang-switcher, [data-theme="dark"] .lang-button, [data-theme="dark"] .theme-switcher{ background:rgba(58,40,24,0.55) !important; border:1px solid rgba(196,142,68,0.25) !important; color:#e8c47c !important; } [data-theme="dark"] .theme-option{ color:#d4b88a !important; } [data-theme="dark"] .theme-option.theme-option-active, [data-theme="dark"] .theme-option.is-active{ background:linear-gradient(180deg, #d4a574, #a87838) !important; color:#2a1d10 !important; } [data-theme="dark"] .theme-switcher-thumb{ background:linear-gradient(180deg, #d4a574, #a87838) !important; box-shadow:0 2px 8px rgba(168,120,56,0.4) !important; } /* Auth buttons (Se connecter / Créer un compte) */ [data-theme="dark"] .nav-auth-login, [data-theme="dark"] .header-auth-login{ background:rgba(58,40,24,0.6) !important; border:1px solid rgba(196,142,68,0.32) !important; color:#fce6b4 !important; } [data-theme="dark"] .nav-auth-register, [data-theme="dark"] .header-auth-register{ background:linear-gradient(180deg, #e8c47c, #a87838) !important; border:1px solid rgba(232,196,124,0.6) !important; color:#2a1d10 !important; font-weight:600; } /* Logo wordmark + Arabic */ [data-theme="dark"] .nav-logo-wordmark, [data-theme="dark"] .nav-logo-text{ color:#fce6b4 !important; } [data-theme="dark"] .nav-logo-sub{ color:#c49a5a !important; } [data-theme="dark"] .nav-logo-mark{ background:linear-gradient(135deg, #3a2818, #281a0e) !important; border:1px solid rgba(232,196,124,0.35) !important; color:#e8c47c !important; } /* Mobile nav drawer */ [data-theme="dark"] .nav-mobile{ background:linear-gradient(180deg, #2c1f10, #1f1509) !important; border-top:1px solid rgba(196,142,68,0.22) !important; } [data-theme="dark"] .nav-mobile-link{ color:#e8d4a8 !important; } [data-theme="dark"] .nav-mobile-link.active{ color:#fce6b4 !important; background:rgba(196,142,68,0.18) !important; } [data-theme="dark"] .nav-mobile-label{ color:#c49a5a !important; } [data-theme="dark"] .nav-menu-bar{ background:#e8c47c !important; } /* ─── FOOTER ─── */ [data-theme="dark"] .yaq-footer, body[data-theme="dark"] .yaq-footer{ background:linear-gradient(180deg, #1f1509 0%, #16100704 100%) !important; background:linear-gradient(180deg, #1f1509 0%, #160f06 100%) !important; border-top:1px solid rgba(196,142,68,0.22) !important; box-shadow:0 -6px 22px rgba(0,0,0,0.35) !important; color:#d4b88a !important; } [data-theme="dark"] .yaq-footer-grid{ border-bottom:1px solid rgba(196,142,68,0.18) !important; } [data-theme="dark"] .yaq-footer-logo, [data-theme="dark"] .yaq-footer-logo-text, [data-theme="dark"] .yaq-footer-logo-icon{ color:#e8c47c !important; } [data-theme="dark"] .yaq-footer-desc, [data-theme="dark"] .yaq-footer-col p, [data-theme="dark"] .yaq-footer-col a{ color:#d4b88a !important; } [data-theme="dark"] .yaq-footer-col h4{ color:#fce6b4 !important; } [data-theme="dark"] .yaq-footer-col a:hover{ color:#fce6b4 !important; } [data-theme="dark"] .yaq-footer-light, [data-theme="dark"] .yaq-footer-made, [data-theme="dark"] .yaq-footer-copy{ color:#a8896a !important; } [data-theme="dark"] .yaq-footer-bottom{ border-top:1px solid rgba(196,142,68,0.15) !important; } /* Spirit player (mini player at bottom) */ [data-theme="dark"] .spirit-player, body[data-theme="dark"] .spirit-player{ background:linear-gradient(135deg, #2c1f10, #1f1509) !important; border-top:1px solid rgba(196,142,68,0.28) !important; box-shadow:0 -8px 28px rgba(0,0,0,0.4) !important; color:#fce6b4 !important; } [data-theme="dark"] .sp-player-close{ background:rgba(232,196,124,0.12) !important; color:#e8c47c !important; border:1px solid rgba(232,196,124,0.25) !important; } [data-theme="dark"] .sp-player-close:hover{ background:rgba(232,196,124,0.22) !important; color:#fce6b4 !important; border-color:rgba(232,196,124,0.45) !important; } /* Footer noor (the small star ornament) */ [data-theme="dark"] .footer-noor, [data-theme="dark"] .footer-noor-star{ color:#e8c47c !important; filter:drop-shadow(0 0 6px rgba(232,196,124,0.4)); }