/** * ============================================================================== * OURMASJID DIGITAL BOARD & MOBILE - PURE CSS THEME TOKENS LAYER * ============================================================================== * STRICT ZERO-LAYOUT ARCHITECTURE: * This stylesheet contains ONLY custom property design tokens (colors, gradients, * alpha channels, borders, shadows, and glows). * It contains ZERO structural layout properties (no display, position, flex, * grid, z-index, overflow, margin, padding, or pointer-events). * ============================================================================== */ /* ============================================================================== 1. ROYAL EMERALD & IMPERIAL GOLD (emerald-gold) - DEFAULT FLAGSHIP ============================================================================== */ :root, [data-theme="emerald-gold"] { /* Surface & Canvas Tokens (Calibrated from prayer_time.html - rich deep bottle green canvas) */ --tenant-bg: #041c17; --tenant-bg-elevated-dark: #072a22; --tenant-surface: linear-gradient(145deg, rgba(10, 38, 33, 0.85), rgba(4, 20, 18, 0.88)); --tenant-surface-hover: rgba(14, 46, 40, 0.92); --tenant-surface-elevated: linear-gradient(145deg, rgba(14, 48, 42, 0.88), rgba(6, 26, 23, 0.90)); --tenant-surface-strong: rgba(37, 126, 99, 0.28); --tenant-border: rgba(224, 190, 86, 0.20); --tenant-border-focus: #f4dc82; --tenant-border-subtle: rgba(224, 190, 86, 0.20); --tenant-bg-input: #041c17; --tenant-input-text: #fffaf0; /* Typography Tokens */ --tenant-text-primary: #fffaf0; --tenant-desc-color: #a8beb9; --tenant-text-muted: #a8beb9; --text-inverse: #041c17; /* Brand Accents */ --tenant-primary: #257e63; --tenant-primary-light: #70c59c; --tenant-gold: #d8b64c; --tenant-gold-bright: #f4dc82; --tenant-gold-soft: #f4dc82; --tenant-selection-bg: rgba(216, 182, 76, 0.25); --tenant-selection-text: #ffffff; /* Aliases & Backward Compatibility */ --bg-primary: var(--tenant-bg); --bg-surface: var(--tenant-surface); --bg-elevated: var(--tenant-surface-elevated); --bg-surface-hover: var(--tenant-surface-hover); --border-color: var(--tenant-border); --border-focus: var(--tenant-border-focus); --text-primary: var(--tenant-text-primary); --text-muted: var(--tenant-desc-color); --primary-color: var(--tenant-primary); --accent-color: var(--tenant-gold); --sidebar-bg: linear-gradient(180deg, rgba(10, 38, 33, 0.85) 0%, rgba(4, 20, 18, 0.88) 100%); /* Semantic Status & Decor Aliases (Non-Breaking) */ --theme-meta-color: var(--tenant-surface); --status-success-bg: rgba(34, 197, 94, 0.16); --status-success-border: #22c55e; --status-success-text: #4ade80; --status-warning-bg: rgba(245, 158, 11, 0.16); --status-warning-border: #f59e0b; --status-warning-text: #fbbf24; --status-danger-bg: rgba(239, 68, 68, 0.16); --status-danger-border: #ef4444; --status-danger-text: #f87171; --status-info-bg: rgba(56, 189, 248, 0.16); --status-info-border: #38bdf8; --status-info-text: #7dd3fc; --skyline-silhouette-fill: var(--tenant-bg); /* Header & Top Bar (Deep emerald green gradients) */ --header-bg: linear-gradient(135deg, #031713 0%, #083228 50%, #031713 100%); --header-start: #031713; --header-mid: #083228; --header-end: #031713; --header-title-color: #f4dc82; --header-clock-color: #fffaf0; --header-date-color: #a8beb9; --header-hijri-color: #f4dc82; --header-location-color: #a8beb9; --calligraphy-color: #f4dc82; --header-calligraphy-color: #f4dc82; --header-calligraphy-shadow: rgba(216, 182, 76, 0.40); --footer-bg: linear-gradient(135deg, #031713 0%, #083228 50%, #031713 100%); --footer-start: #031713; --footer-mid: #083228; --footer-end: #031713; --footer-text-color: #fffaf0; --footer-muted-color: #a8beb9; --footer-gold-color: #f4dc82; /* Prayer Times & Highlights */ --prayer-card-bg: linear-gradient(145deg, rgba(14, 48, 42, 0.88), rgba(6, 26, 23, 0.90)); --prayer-panel-bg: linear-gradient(145deg, rgba(10, 38, 33, 0.85), rgba(4, 20, 18, 0.88)); --prayer-card-border: rgba(224, 190, 86, 0.20); --prayer-row-bg: linear-gradient(145deg, rgba(14, 48, 42, 0.88), rgba(6, 26, 23, 0.90)); --prayer-row-border: rgba(37, 126, 99, 0.28); --active-prayer-bg-start: rgba(216, 182, 76, 0.20); --active-prayer-bg-end: rgba(216, 182, 76, 0.06); --active-prayer-bg: linear-gradient(105deg, rgba(216, 182, 76, 0.20), rgba(216, 182, 76, 0.06)); --active-prayer-border: rgba(244, 220, 130, 0.42); --active-prayer-glow: 0 8px 25px rgba(0, 0, 0, 0.16); --active-prayer-text: #f4dc82; --active-prayer-muted: #a8beb9; --active-prayer-time: #fffaf0; --adhan-time-color: #fffaf0; --iqamah-time-color: #f4dc82; --adhan-color: #fffaf0; --iqamah-color: #f4dc82; --countdown-badge-bg: #f4dc82; --countdown-badge-text: #041c17; --highlight-iqamah-bg: rgba(216, 182, 76, 0.08); --active-iqamah-bg: rgba(216, 182, 76, 0.15); /* Hero Panel Showcase */ --masjid-card-bg: linear-gradient(145deg, rgba(14, 48, 42, 0.88), rgba(6, 26, 23, 0.92)); --masjid-card-border: rgba(216, 182, 76, 0.22); --masjid-name-color: #fffaf0; --masjid-emblem-color: #f4dc82; --masjid-loc-pill-bg: rgba(16, 185, 129, 0.16); --masjid-loc-pill-border: transparent; --masjid-loc-pill-text: #a7f3d0; --masjid-url-pill-bg: rgba(216, 182, 76, 0.12); --masjid-url-pill-text: #f4dc82; --hero-status-pill-bg: rgba(37, 126, 99, 0.18); --hero-status-pill-border: #257e63; --hero-status-pill-color: #70c59c; --hero-qr-badge-bg: rgba(37, 126, 99, 0.18); --hero-qr-badge-border: rgba(37, 126, 99, 0.35); --hero-qr-badge-color: #70c59c; --countdown-card-bg: linear-gradient(145deg, rgba(10, 38, 33, 0.85), rgba(4, 20, 18, 0.88)); --countdown-card-border: rgba(224, 190, 86, 0.20); --countdown-digits-color: #fffaf0; --countdown-prayer-name: #f4dc82; --countdown-label-color: #a8beb9; --countdown-bar-track: rgba(255, 255, 255, 0.08); --countdown-bar-fill: linear-gradient(90deg, #d8b64c, #f4dc82); --qr-card-bg: linear-gradient(145deg, rgba(10, 38, 33, 0.85), rgba(4, 20, 18, 0.88)); --qr-card-border: rgba(224, 190, 86, 0.20); --qr-title-color: #f4dc82; --qr-sub-color: #a8beb9; --qr-frame-bg: #ffffff; --qr-frame-border: rgba(224, 190, 86, 0.35); --qr-code-color: #041c17; --qr-url-color: #f4dc82; --aux-card-bg: linear-gradient(145deg, rgba(14, 48, 42, 0.88), rgba(6, 26, 23, 0.92)); --aux-card-border: rgba(224, 190, 86, 0.28); --aux-time-color: #f4dc82; --aux-label-color: #a8beb9; /* Wisdom & Carousel (Deeper, darker emerald velvet) */ --wisdom-card-bg: linear-gradient(145deg, rgba(8, 30, 26, 0.94), rgba(3, 15, 13, 0.92)); --wisdom-card-border: rgba(224, 190, 86, 0.22); --wisdom-quran-border: rgba(224, 190, 86, 0.38); --wisdom-hadith-border: rgba(16, 185, 129, 0.30); --wisdom-badge-bg: rgba(216, 182, 76, 0.18); --wisdom-badge-border: rgba(224, 190, 86, 0.45); --wisdom-hadith-badge-bg: rgba(16, 185, 129, 0.18); --wisdom-hadith-badge-border: rgba(16, 185, 129, 0.40); --wisdom-hadith-badge-color: #70c59c; --wisdom-hadith-ref-bg: rgba(16, 185, 129, 0.10); --wisdom-hadith-ref-border: rgba(16, 185, 129, 0.28); --wisdom-hadith-ref-color: #a8beb9; --wisdom-arabic-color: #f4dc82; --wisdom-trans-color: #fffaf0; --wisdom-tag-color: #d8b64c; --wisdom-narrator-color: #a8beb9; /* Notices */ --notice-card-bg: linear-gradient(145deg, rgba(10, 38, 33, 0.85), rgba(4, 20, 18, 0.88)); --notice-card-border: rgba(224, 190, 86, 0.20); --poster-card-border: rgba(224, 190, 86, 0.20); --special-card-border: rgba(224, 190, 86, 0.20); --notice-title-color: #f4dc82; --notice-body-color: #fffaf0; --notice-subcard-bg: rgba(8, 32, 28, 0.78); --notice-subcard-border: rgba(224, 190, 86, 0.15); --notice-janaza-bg: linear-gradient(150deg, rgba(168, 85, 247, 0.12) 0%, rgba(88, 28, 135, 0.25) 100%); --notice-janaza-border: rgba(168, 85, 247, 0.65); --notice-janaza-color: #d8b4fe; --notice-arabic-header-color: #f4dc82; --notice-urgent-bg: linear-gradient(150deg, rgba(239, 68, 68, 0.15) 0%, rgba(185, 28, 28, 0.3) 100%); --notice-urgent-border: #ef4444; --notice-urgent-color: #fca5a5; --notice-event-bg: linear-gradient(150deg, rgba(59, 130, 246, 0.12) 0%, rgba(29, 78, 216, 0.25) 100%); --notice-event-border: rgba(59, 130, 246, 0.65); --notice-event-color: #93c5fd; --notice-progress-start: #d8b64c; --notice-progress-end: #70c59c; /* Special Prayers & Jummah */ --special-card-bg: #091B1B; --special-header-title-color: #f4dc82; --special-title-color: #f4dc82; --special-event-title-color: #f4dc82; --special-dua-color: #f4dc82; --special-time-value-color: #fffaf0; --mens-box-bg: linear-gradient(145deg, rgba(14, 48, 42, 0.88), rgba(6, 26, 23, 0.90)); --mens-border: rgba(224, 190, 86, 0.20); --mens-title-color: #70c59c; --womens-box-bg: linear-gradient(145deg, rgba(14, 48, 42, 0.88), rgba(6, 26, 23, 0.90)); --womens-border: rgba(224, 190, 86, 0.20); --womens-title-color: #f4dc82; --special-guide-bg: #091B1B; --special-guide-border: rgba(224, 190, 86, 0.25); --special-guide-title-color: #f4dc82; --special-guide-text-color: #fffaf0; --special-dua-bg: #09221D; --special-date-badge-bg: rgba(216, 182, 76, 0.18); --special-date-badge-color: #f4dc82; --special-progress-start: #d8b64c; --special-progress-end: #70c59c; /* Qurban Hub Slide Tokens */ --qurban-card-bg: linear-gradient(145deg, rgba(14, 48, 42, 0.88), rgba(6, 26, 23, 0.90)); --qurban-card-border: rgba(224, 190, 86, 0.20); --qurban-title-color: #f4dc82; --qurban-text-color: #fffaf0; --qurban-muted-color: #a8beb9; --qurban-price-color: #70c59c; --qurban-highlight-bg: rgba(0, 0, 0, 0.20); --qurban-highlight-border: #d8b64c; --qurban-guide-bg: linear-gradient(145deg, rgba(14, 48, 42, 0.88), rgba(6, 26, 23, 0.90)); --qurban-guide-border: rgba(224, 190, 86, 0.20); /* Forms & Documents Hub Tokens */ --forms-card-bg: #09221D; --forms-card-border: rgba(224, 190, 86, 0.20); --forms-title-color: #f4dc82; --forms-desc-color: #a8beb9; --forms-badge-color: #f4dc82; --forms-badge-bg: rgba(216, 182, 76, 0.16); --forms-checklist-bg: #09221D; --forms-checklist-border: rgba(224, 190, 86, 0.15); --forms-qr-card-bg: #091B1B; --forms-deadline-color: #fca5a5; --forms-deadline-bg: rgba(239, 68, 68, 0.16); /* Social & Community Channels Tokens */ --social-card-bg: #09221D; --social-card-border: rgba(224, 190, 86, 0.20); --social-title-color: #f4dc82; --social-desc-color: #a8beb9; --social-tv-bg: #09221D; --social-tv-border: rgba(224, 190, 86, 0.20); --social-qr-card-bg: #091B1B; --social-chip-bg: rgba(216, 182, 76, 0.18); --social-chip-border: rgba(224, 190, 86, 0.20); --social-chip-color: #fffaf0; /* Standard Language Font Size Tokens */ --tv-role-h4-en-size: 28px; --tv-role-h4-t-size: 28px; --tv-role-h4-s-size: 28px; /* Posters & Gallery Tokens */ --poster-card-bg: linear-gradient(145deg, rgba(14, 48, 42, 0.88), rgba(6, 26, 23, 0.90)); --poster-caption-bg: rgba(0, 0, 0, 0.20); /* Ramadan & Fasting Hub Slides (Rich Dark Emerald Atmosphere) */ --ramadan-bg: radial-gradient(circle at 50% 0%, #0a382d 0%, #041c17 50%, #02120e 100%); --ramadan-slide-bg: radial-gradient(circle at 50% 0%, #0a382d 0%, #041c17 50%, #02120e 100%); --ramadan-hero-bg: linear-gradient(145deg, #09221D 0%, #041c17 100%); --ramadan-card-bg: #091B1B; --ramadan-panel-bg: linear-gradient(145deg, #09221D 0%, #041c17 100%); --ramadan-countdown-bg: #09221D; --ramadan-countdown-border: rgba(224, 190, 86, 0.35); --ramadan-dua-bg: linear-gradient(145deg, rgba(14, 48, 42, 0.88), rgba(6, 26, 23, 0.92)); --ramadan-dua-border: rgba(224, 190, 86, 0.20); --ramadan-unit-bg: linear-gradient(145deg, rgba(14, 48, 42, 0.88), rgba(6, 26, 23, 0.92)); --ramadan-unit-border: rgba(224, 190, 86, 0.18); --ramadan-unit-val: #FFFFFF; --ramadan-unit-lbl: #a8beb9; --ramadan-row-even-bg: #07110F; --ramadan-row-odd-bg: #0F1816; --ramadan-row-highlight: #07110F; --ramadan-row-27-bg: #07110F; --ramadan-matrix-row-even: #07110F; --ramadan-matrix-row-odd: #0F1816; --ramadan-matrix-row-hl: #07110F; /* Ramadan Porridge Slide & Badges */ --porridge-slide-bg: radial-gradient(circle at 50% 0%, #083228 0%, #041c17 50%, #02120e 100%); --porridge-card-bg: linear-gradient(145deg, rgba(10, 38, 33, 0.85), rgba(4, 20, 18, 0.88)); --porridge-card-border: rgba(224, 190, 86, 0.20); --porridge-day-num-color: #fffaf0; --porridge-day-date-color: #a8beb9; --porridge-price-color: #f4dc82; --porridge-title-color: #f4dc82; --porridge-header-stats-bg: linear-gradient(145deg, rgba(14, 48, 42, 0.88), rgba(6, 26, 23, 0.92)); --porridge-sponsor-box-bg: linear-gradient(145deg, rgba(14, 48, 42, 0.88), rgba(6, 26, 23, 0.92)); --porridge-open-pill-bg: #10b981; --porridge-open-border: #10b981; --porridge-open-pill-color: #022318; --porridge-booked-pill-bg: #ef4444; --porridge-booked-border: #ef4444; --porridge-booked-pill-color: #ffffff; --porridge-partial-pill-bg: #f59e0b; --porridge-partial-border: #f59e0b; --porridge-partial-pill-color: #ffffff; } /* ============================================================================== 2. MIDNIGHT NAVY & CELESTIAL SAPPHIRE (midnight-navy) ============================================================================== */ [data-theme="midnight-navy"] { /* Surface & Canvas Tokens */ --tenant-bg: #060D1A; --tenant-surface: #0B172B; --tenant-surface-hover: #111F36; --tenant-surface-elevated: #111F36; --tenant-surface-strong: #172A4A; --tenant-border: #1E3A5F; --tenant-border-focus: #38BDF8; --tenant-border-subtle: rgba(56, 189, 248, 0.25); --tenant-bg-input: #030712; --tenant-input-text: #FFFFFF; /* Typography Tokens */ --tenant-text-primary: #FFFFFF; --tenant-desc-color: #94A3B8; --tenant-text-muted: #64748B; --text-inverse: #060D1A; /* Brand Accents */ --tenant-primary: #0284C7; --tenant-primary-light: #38BDF8; --tenant-gold: #FBBF24; --tenant-gold-bright: #FDE68A; --tenant-gold-soft: #FEF3C7; --tenant-selection-bg: rgba(56, 189, 248, 0.3); --tenant-selection-text: #FFFFFF; /* Aliases */ --bg-primary: var(--tenant-bg); --bg-surface: var(--tenant-surface); --bg-elevated: var(--tenant-surface-elevated); --bg-surface-hover: var(--tenant-surface-hover); --border-color: var(--tenant-border); --border-focus: var(--tenant-border-focus); --text-primary: var(--tenant-text-primary); --text-muted: var(--tenant-desc-color); --primary-color: var(--tenant-primary); --accent-color: var(--tenant-gold); /* Header & Top Bar */ --header-bg: linear-gradient(135deg, #0B172B 0%, #0369A1 50%, #060D1A 100%); --header-start: #0B172B; --header-mid: #0369A1; --header-end: #060D1A; --header-title-color: #38BDF8; --header-clock-color: #FFFFFF; --header-date-color: #94A3B8; --header-hijri-color: #FBBF24; --header-location-color: #60D5FF; --calligraphy-color: #FBBF24; --header-calligraphy-color: #FBBF24; --footer-bg: linear-gradient(135deg, #0B172B 0%, #0369A1 50%, #060D1A 100%); /* Prayer Times & Highlights */ --prayer-card-bg: rgba(11, 23, 43, 0.7); --prayer-card-border: rgba(30, 58, 95, 0.6); --prayer-row-bg: rgba(11, 23, 43, 0.5); --prayer-row-border: rgba(30, 58, 95, 0.4); --active-prayer-bg-start: rgba(56, 189, 248, 0.28); --active-prayer-bg-end: rgba(56, 189, 248, 0.04); --active-prayer-bg: linear-gradient(90deg, rgba(56, 189, 248, 0.28) 0%, rgba(56, 189, 248, 0.04) 100%); --active-prayer-border: #38BDF8; --active-prayer-glow: 0 0 20px rgba(56, 189, 248, 0.85); --active-prayer-text: #60D5FF; --active-prayer-muted: #94A3B8; --active-prayer-time: #FFFFFF; --adhan-time-color: #FFFFFF; --iqamah-time-color: #FBBF24; --adhan-color: #FFFFFF; --iqamah-color: #FBBF24; --countdown-badge-bg: #38BDF8; --countdown-badge-text: #060D1A; --highlight-iqamah-bg: rgba(56, 189, 248, 0.08); --active-iqamah-bg: rgba(56, 189, 248, 0.15); /* Carousel & Cards */ --wisdom-card-bg: #0B172B; --wisdom-card-border: #1E3A5F; --wisdom-arabic-color: #FBBF24; --wisdom-trans-color: #FFFFFF; --wisdom-tag-color: #38BDF8; --notice-card-bg: #0B172B; --notice-card-border: #1E3A5F; --notice-title-color: #38BDF8; --notice-body-color: #FFFFFF; --notice-subcard-bg: rgba(6, 13, 26, 0.7); --notice-subcard-border: rgba(30, 58, 95, 0.6); --notice-janaza-bg: linear-gradient(150deg, rgba(99, 102, 241, 0.12) 0%, rgba(49, 46, 129, 0.25) 100%); --notice-janaza-border: rgba(99, 102, 241, 0.65); --notice-janaza-color: #C7D2FE; --notice-arabic-header-color: #FBBF24; --notice-urgent-bg: linear-gradient(150deg, rgba(239, 68, 68, 0.15) 0%, rgba(185, 28, 28, 0.3) 100%); --notice-urgent-border: #EF4444; --notice-urgent-color: #FCA5A5; --notice-event-bg: linear-gradient(150deg, rgba(56, 189, 248, 0.12) 0%, rgba(14, 116, 144, 0.25) 100%); --notice-event-border: rgba(56, 189, 248, 0.65); --notice-event-color: #7DD3FC; --notice-progress-start: #38BDF8; --notice-progress-end: #FBBF24; /* Ramadan Fasting, Countdown & Timetable Tokens */ --ramadan-card-bg: #0B172B; --ramadan-card-border: #1E3A5F; --ramadan-panel-bg: linear-gradient(165deg, rgba(11, 23, 43, 0.95) 0%, rgba(6, 13, 26, 0.98) 100%); --ramadan-panel-border: #1E3A5F; --ramadan-title-color: #38BDF8; --ramadan-sub-color: #94A3B8; --ramadan-accent-gold: #FBBF24; --ramadan-countdown-bg: linear-gradient(165deg, rgba(8, 18, 36, 0.85) 0%, rgba(4, 9, 20, 0.95) 100%); --ramadan-countdown-border: #38BDF8; --ramadan-countdown-label: #60D5FF; --ramadan-time-color: #FFFFFF; --ramadan-unit-bg: rgba(3, 7, 18, 0.8); --ramadan-unit-border: rgba(56, 189, 248, 0.35); --ramadan-unit-val: #FFFFFF; --ramadan-unit-lbl: #38BDF8; --ramadan-unit-sep: #38BDF8; --sahoor-box-bg: rgba(11, 23, 43, 0.75); --iftar-box-bg: linear-gradient(135deg, rgba(56, 189, 248, 0.28) 0%, rgba(2, 132, 199, 0.15) 100%); --ramadan-pill-bg: rgba(11, 23, 43, 0.75); --ramadan-pill-border: rgba(30, 58, 95, 0.6); --ramadan-pill-lbl: #94A3B8; --ramadan-pill-val: #FFFFFF; --ramadan-pill-hl-bg: linear-gradient(135deg, rgba(56, 189, 248, 0.28) 0%, rgba(2, 132, 199, 0.15) 100%); --ramadan-pill-hl-border: #38BDF8; --ramadan-pill-hl-lbl: #60D5FF; --ramadan-pill-hl-val: #FFFFFF; --ramadan-dua-bg: linear-gradient(165deg, rgba(11, 23, 43, 0.9) 0%, rgba(6, 13, 26, 0.95) 100%); --ramadan-dua-border: rgba(56, 189, 248, 0.35); --ramadan-dua-arabic-color: #FBBF24; --ramadan-dua-tag-color: #38BDF8; --ramadan-dua-text-color: #FFFFFF; --ramadan-table-bg: #0B172B; --ramadan-subpage-header-bg: linear-gradient(135deg, rgba(11, 23, 43, 0.95) 0%, rgba(6, 13, 26, 0.98) 100%); --ramadan-subpage-header-border: rgba(56, 189, 248, 0.35); --ramadan-subpage-header-title: #38BDF8; --ramadan-subpage-header-sub: #94A3B8; --ramadan-table-wrap-bg: rgba(6, 13, 26, 0.85); --ramadan-table-hdr-bg: linear-gradient(135deg, #111F36 0%, #0B172B 100%); --ramadan-table-hdr-border: rgba(56, 189, 248, 0.35); --ramadan-table-hdr-color: #38BDF8; --ramadan-row-border: rgba(30, 58, 95, 0.4); --ramadan-row-even-bg: rgba(255, 255, 255, 0.02); --ramadan-row-odd-bg: rgba(255, 255, 255, 0.05); --ramadan-row-highlight: rgba(56, 189, 248, 0.22); --ramadan-crescent-bg: radial-gradient(circle at 35% 35%, rgba(56, 189, 248, 0.25) 0%, rgba(2, 132, 199, 0.15) 100%); --ramadan-crescent-border: #38BDF8; --ramadan-crescent-color: #FBBF24; --special-card-bg: #0B172B; --special-card-border: #1E3A5F; --special-header-title-color: #38BDF8; --special-title-color: #38BDF8; --special-event-title-color: #60D5FF; --special-dua-color: #FBBF24; --mens-box-bg: rgba(11, 23, 43, 0.8); --mens-border: #1E3A5F; --mens-title-color: #38BDF8; --womens-box-bg: rgba(11, 23, 43, 0.8); --womens-border: #1E3A5F; --womens-title-color: #F472B6; --special-time-value-color: #FFFFFF; --special-guide-bg: rgba(11, 23, 43, 0.65); --special-guide-title-color: #38BDF8; --special-guide-text-color: #94A3B8; --special-date-badge-bg: rgba(56, 189, 248, 0.18); --special-date-badge-color: #38BDF8; --qurban-price-color: #38BDF8; /* Ramadan Porridge Slide Tokens */ --porridge-slide-bg: radial-gradient(circle at 50% 0%, #0B172B 0%, #060D1A 45%, #030712 100%); --porridge-card-bg: #0B172B; --porridge-card-border: #1E3A5F; --porridge-day-num-color: #FFFFFF; --porridge-day-date-color: #94A3B8; --porridge-price-color: #FBBF24; --porridge-sponsor-color: #FFFFFF; --porridge-niyyah-color: #FDE68A; --porridge-header-stats-bg: rgba(6, 13, 26, 0.75); --porridge-sponsor-box-bg: rgba(3, 7, 18, 0.75); --porridge-open-pill-bg: rgba(2, 132, 199, 0.22); --porridge-open-pill-color: #38BDF8; --porridge-open-border: rgba(56, 189, 248, 0.5); --porridge-booked-pill-bg: rgba(239, 68, 68, 0.22); --porridge-booked-pill-color: #F87171; --porridge-booked-border: rgba(248, 113, 113, 0.5); --porridge-partial-pill-bg: rgba(245, 158, 11, 0.22); --porridge-partial-pill-color: #FBBF24; --porridge-partial-border: rgba(251, 191, 36, 0.5); /* Indicators & Glows */ --dot-active-bg: #38BDF8; --dot-active-color: #38BDF8; --dot-active-glow: 0 0 14px rgba(56, 189, 248, 0.8); --dot-inactive-bg: rgba(2, 132, 199, 0.4); --dot-inactive-color: #0284C7; --dot-inactive-border: rgba(30, 58, 95, 0.6); --dot-size: 9px; --dot-active-width: 28px; --gold-glow: 0 0 20px rgba(56, 189, 248, 0.85); /* Slide Rotation Timing Bar & Counter */ --slide-progress-start: #38BDF8; --slide-progress-end: #FBBF24; --slide-progress-track-bg: rgba(30, 58, 95, 0.5); --slide-progress-height: 6px; --slide-progress-show: block; --slide-progress-glow: 0 0 10px rgba(56, 189, 248, 0.8); --slide-counter-bg: #0B172B; --slide-counter-color: #38BDF8; --slide-counter-border: #1E3A5F; --slide-counter-show: inline-flex; /* Semantics */ --color-success: #38BDF8; --color-success-soft: #BAE6FD; --color-warning: #FBBF24; --color-warning-soft: #FDE68A; --color-danger: #F87171; --color-danger-soft: #FCA5A5; --color-info: #60D5FF; --color-info-soft: #E0F2FE; --color-neutral: #94A3B8; /* Section 13: Forms & Documents Hub Tokens */ --forms-card-bg: #0B172B; --forms-card-border: #1E3A5F; --forms-title-color: #F8FAFC; --forms-desc-color: #94A3B8; --forms-badge-color: #60A5FA; --forms-badge-bg: #0E2240; --forms-deadline-color: #F87171; --forms-deadline-bg: #3F1515; --forms-checklist-bg: #060D1A; --forms-checklist-border: #1E3A5F; --forms-qr-bg: #FFFFFF; --forms-qr-border: #1E3A5F; --forms-btn-bg: #2563EB; --forms-btn-color: #FFFFFF; --forms-progress-start: #60A5FA; --forms-progress-end: #38BDF8; /* Section 15: Social Media & Community Channels Tokens */ --social-card-bg: #0B172B; --social-card-border: #1E3A5F; --social-title-color: #FFFFFF; --social-desc-color: #94A3B8; --social-btn-bg: #2563EB; --social-btn-color: #FFFFFF; --social-chip-bg: #0E2240; --social-chip-border: #60A5FA; --social-chip-color: #F8FAFC; --social-tv-bg: #0B172B; --social-tv-border: #60A5FA; /* Dynamic Section & Border Design Tokens */ --sidebar-bg: linear-gradient(180deg, rgba(11, 23, 43, 0.92) 0%, rgba(6, 13, 26, 0.95) 100%); --prayer-panel-bg: linear-gradient(145deg, rgba(11, 23, 43, 0.92), rgba(6, 13, 26, 0.95)); --masjid-card-bg: var(--prayer-card-bg, var(--tenant-surface)); --masjid-card-border: var(--prayer-card-border, var(--tenant-border)); --countdown-card-bg: var(--prayer-panel-bg, var(--tenant-surface)); --countdown-card-border: var(--prayer-card-border, var(--tenant-border)); --qr-card-bg: var(--prayer-panel-bg, var(--tenant-surface)); --qr-card-border: var(--prayer-card-border, var(--tenant-border)); --aux-card-bg: var(--prayer-card-bg, var(--tenant-surface)); --aux-card-border: var(--prayer-card-border, var(--tenant-border)); --wisdom-quran-border: rgba(56, 189, 248, 0.38); --wisdom-hadith-border: #1E3A5F; --wisdom-badge-bg: rgba(56, 189, 248, 0.18); --wisdom-badge-border: rgba(56, 189, 248, 0.45); --wisdom-hadith-badge-bg: rgba(2, 132, 199, 0.18); --wisdom-hadith-badge-border: rgba(56, 189, 248, 0.35); --wisdom-hadith-badge-color: #38BDF8; --wisdom-hadith-ref-bg: rgba(11, 23, 43, 0.7); --wisdom-hadith-ref-border: #1E3A5F; --wisdom-hadith-ref-color: #94A3B8; --masjid-loc-pill-bg: rgba(2, 132, 199, 0.18); --masjid-loc-pill-border: rgba(56, 189, 248, 0.35); --masjid-loc-pill-text: #94A3B8; --hero-status-pill-bg: rgba(2, 132, 199, 0.18); --hero-status-pill-border: rgba(56, 189, 248, 0.4); --hero-status-pill-color: #38BDF8; --hero-qr-badge-bg: rgba(2, 132, 199, 0.18); --hero-qr-badge-border: rgba(56, 189, 248, 0.35); --hero-qr-badge-color: #38BDF8; --qurban-card-bg: var(--tenant-surface); --qurban-card-border: var(--tenant-border); } /* ============================================================================== 3. VELVET OBSIDIAN & SUNSET BRONZE (velvet-obsidian) ============================================================================== */ [data-theme="velvet-obsidian"] { /* Surface & Canvas Tokens */ --tenant-bg: #0F0F11; --tenant-surface: #18181B; --tenant-surface-hover: #232326; --tenant-surface-elevated: #232326; --tenant-surface-strong: #2E2E32; --tenant-border: #3F3F46; --tenant-border-focus: #F59E0B; --tenant-border-subtle: rgba(245, 158, 11, 0.25); --tenant-bg-input: #0A0A0B; --tenant-input-text: #FAFAF9; /* Typography Tokens */ --tenant-text-primary: #FAFAF9; --tenant-desc-color: #D6D3D1; --tenant-text-muted: #A8A29E; --text-inverse: #0F0F11; /* Brand Accents */ --tenant-primary: #D97706; --tenant-primary-light: #F59E0B; --tenant-gold: #F59E0B; --tenant-gold-bright: #FDBA74; --tenant-gold-soft: #FED7AA; --tenant-selection-bg: rgba(245, 158, 11, 0.3); --tenant-selection-text: #FFFFFF; /* Aliases */ --bg-primary: var(--tenant-bg); --bg-surface: var(--tenant-surface); --bg-elevated: var(--tenant-surface-elevated); --bg-surface-hover: var(--tenant-surface-hover); --border-color: var(--tenant-border); --border-focus: var(--tenant-border-focus); --text-primary: var(--tenant-text-primary); --text-muted: var(--tenant-desc-color); --primary-color: var(--tenant-primary); --accent-color: var(--tenant-gold); /* Header & Top Bar */ --header-bg: linear-gradient(135deg, #18181B 0%, #B45309 50%, #0F0F11 100%); --header-start: #18181B; --header-mid: #B45309; --header-end: #0F0F11; --header-title-color: #F59E0B; --header-clock-color: #FAFAF9; --header-date-color: #D6D3D1; --header-hijri-color: #FDBA74; --header-location-color: #F59E0B; --calligraphy-color: #F59E0B; --header-calligraphy-color: #F59E0B; --footer-bg: linear-gradient(135deg, #18181B 0%, #B45309 50%, #0F0F11 100%); /* Prayer Times & Highlights */ --prayer-card-bg: rgba(24, 24, 27, 0.7); --prayer-card-border: rgba(63, 63, 70, 0.6); --prayer-row-bg: rgba(24, 24, 27, 0.5); --prayer-row-border: rgba(63, 63, 70, 0.4); --active-prayer-bg-start: rgba(245, 158, 11, 0.28); --active-prayer-bg-end: rgba(245, 158, 11, 0.04); --active-prayer-bg: linear-gradient(90deg, rgba(245, 158, 11, 0.28) 0%, rgba(245, 158, 11, 0.04) 100%); --active-prayer-border: #F59E0B; --active-prayer-glow: 0 0 20px rgba(245, 158, 11, 0.85); --active-prayer-text: #FDBA74; --active-prayer-muted: #D6D3D1; --active-prayer-time: #FAFAF9; --adhan-time-color: #FAFAF9; --iqamah-time-color: #F59E0B; --adhan-color: #FAFAF9; --iqamah-color: #F59E0B; --countdown-badge-bg: #F59E0B; --countdown-badge-text: #0F0F11; --highlight-iqamah-bg: rgba(245, 158, 11, 0.08); --active-iqamah-bg: rgba(245, 158, 11, 0.15); /* Carousel & Cards */ --wisdom-card-bg: #18181B; --wisdom-card-border: #3F3F46; --wisdom-arabic-color: #FDBA74; --wisdom-trans-color: #FAFAF9; --wisdom-tag-color: #F59E0B; --notice-card-bg: #18181B; --notice-card-border: #3F3F46; --notice-title-color: #F59E0B; --notice-body-color: #FAFAF9; --notice-subcard-bg: rgba(15, 15, 17, 0.7); --notice-subcard-border: rgba(63, 63, 70, 0.6); --notice-janaza-bg: linear-gradient(150deg, rgba(217, 119, 6, 0.12) 0%, rgba(120, 53, 15, 0.25) 100%); --notice-janaza-border: rgba(217, 119, 6, 0.65); --notice-janaza-color: #FDE68A; --notice-arabic-header-color: #F59E0B; --notice-urgent-bg: linear-gradient(150deg, rgba(239, 68, 68, 0.15) 0%, rgba(185, 28, 28, 0.3) 100%); --notice-urgent-border: #EF4444; --notice-urgent-color: #FCA5A5; --notice-event-bg: linear-gradient(150deg, rgba(217, 119, 6, 0.12) 0%, rgba(146, 64, 14, 0.25) 100%); --notice-event-border: rgba(217, 119, 6, 0.65); --notice-event-color: #FCD34D; --notice-progress-start: #D97706; --notice-progress-end: #F59E0B; /* Ramadan Fasting, Countdown & Timetable Tokens */ --ramadan-card-bg: #18181B; --ramadan-card-border: #3F3F46; --ramadan-panel-bg: linear-gradient(165deg, rgba(24, 24, 27, 0.95) 0%, rgba(15, 15, 17, 0.98) 100%); --ramadan-panel-border: #3F3F46; --ramadan-title-color: #F59E0B; --ramadan-sub-color: #D6D3D1; --ramadan-accent-gold: #F59E0B; --ramadan-countdown-bg: linear-gradient(165deg, rgba(20, 20, 23, 0.85) 0%, rgba(10, 10, 12, 0.95) 100%); --ramadan-countdown-border: #F59E0B; --ramadan-countdown-label: #FDBA74; --ramadan-time-color: #FAFAF9; --ramadan-unit-bg: rgba(10, 10, 11, 0.8); --ramadan-unit-border: rgba(245, 158, 11, 0.35); --ramadan-unit-val: #FAFAF9; --ramadan-unit-lbl: #F59E0B; --ramadan-unit-sep: #F59E0B; --sahoor-box-bg: rgba(24, 24, 27, 0.75); --iftar-box-bg: linear-gradient(135deg, rgba(245, 158, 11, 0.28) 0%, rgba(217, 119, 6, 0.15) 100%); --ramadan-pill-bg: rgba(24, 24, 27, 0.75); --ramadan-pill-border: rgba(63, 63, 70, 0.6); --ramadan-pill-lbl: #D6D3D1; --ramadan-pill-val: #FAFAF9; --ramadan-pill-hl-bg: linear-gradient(135deg, rgba(245, 158, 11, 0.28) 0%, rgba(217, 119, 6, 0.15) 100%); --ramadan-pill-hl-border: #F59E0B; --ramadan-pill-hl-lbl: #FDBA74; --ramadan-pill-hl-val: #FFFFFF; --ramadan-dua-bg: linear-gradient(165deg, rgba(24, 24, 27, 0.9) 0%, rgba(15, 15, 17, 0.95) 100%); --ramadan-dua-border: rgba(245, 158, 11, 0.35); --ramadan-dua-arabic-color: #FDBA74; --ramadan-dua-tag-color: #F59E0B; --ramadan-dua-text-color: #FAFAF9; --ramadan-table-bg: #18181B; --ramadan-subpage-header-bg: linear-gradient(135deg, rgba(24, 24, 27, 0.95) 0%, rgba(15, 15, 17, 0.98) 100%); --ramadan-subpage-header-border: rgba(245, 158, 11, 0.35); --ramadan-subpage-header-title: #F59E0B; --ramadan-subpage-header-sub: #D6D3D1; --ramadan-table-wrap-bg: rgba(15, 15, 17, 0.85); --ramadan-table-hdr-bg: linear-gradient(135deg, #232326 0%, #18181B 100%); --ramadan-table-hdr-border: rgba(245, 158, 11, 0.35); --ramadan-table-hdr-color: #F59E0B; --ramadan-row-border: rgba(63, 63, 70, 0.4); --ramadan-row-even-bg: rgba(255, 255, 255, 0.02); --ramadan-row-odd-bg: rgba(255, 255, 255, 0.05); --ramadan-row-highlight: rgba(245, 158, 11, 0.22); --ramadan-crescent-bg: radial-gradient(circle at 35% 35%, rgba(245, 158, 11, 0.25) 0%, rgba(217, 119, 6, 0.15) 100%); --ramadan-crescent-border: #F59E0B; --ramadan-crescent-color: #FDBA74; --special-card-bg: #18181B; --special-card-border: #3F3F46; --special-header-title-color: #F59E0B; --special-title-color: #F59E0B; --special-event-title-color: #FDBA74; --special-dua-color: #FDBA74; --mens-box-bg: rgba(24, 24, 27, 0.8); --mens-border: #3F3F46; --mens-title-color: #F59E0B; --womens-box-bg: rgba(24, 24, 27, 0.8); --womens-border: #3F3F46; --womens-title-color: #FB7185; --special-time-value-color: #FAFAF9; --special-guide-bg: rgba(24, 24, 27, 0.65); --special-guide-title-color: #F59E0B; --special-guide-text-color: #D6D3D1; --special-date-badge-bg: rgba(245, 158, 11, 0.18); --special-date-badge-color: #F59E0B; --qurban-price-color: #F59E0B; /* Ramadan Porridge Slide Tokens */ --porridge-slide-bg: radial-gradient(circle at 50% 0%, #18181B 0%, #0F0F11 45%, #0A0A0B 100%); --porridge-card-bg: #18181B; --porridge-card-border: #3F3F46; --porridge-day-num-color: #FAFAF9; --porridge-day-date-color: #D6D3D1; --porridge-price-color: #F59E0B; --porridge-sponsor-color: #FAFAF9; --porridge-niyyah-color: #FDBA74; --porridge-header-stats-bg: rgba(15, 15, 17, 0.75); --porridge-sponsor-box-bg: rgba(10, 10, 11, 0.75); --porridge-open-pill-bg: rgba(217, 119, 6, 0.22); --porridge-open-pill-color: #FBBF24; --porridge-open-border: rgba(251, 191, 36, 0.5); --porridge-booked-pill-bg: rgba(239, 68, 68, 0.22); --porridge-booked-pill-color: #F87171; --porridge-booked-border: rgba(248, 113, 113, 0.5); --porridge-partial-pill-bg: rgba(245, 158, 11, 0.22); --porridge-partial-pill-color: #FBBF24; --porridge-partial-border: rgba(251, 191, 36, 0.5); /* Indicators & Glows */ --dot-active-bg: #F59E0B; --dot-active-color: #F59E0B; --dot-active-glow: 0 0 14px rgba(245, 158, 11, 0.8); --dot-inactive-bg: rgba(217, 119, 6, 0.4); --dot-inactive-color: #D97706; --dot-inactive-border: rgba(63, 63, 70, 0.6); --dot-size: 9px; --dot-active-width: 28px; --gold-glow: 0 0 20px rgba(245, 158, 11, 0.85); /* Slide Rotation Timing Bar & Counter */ --slide-progress-start: #F59E0B; --slide-progress-end: #D97706; --slide-progress-track-bg: rgba(63, 63, 70, 0.5); --slide-progress-height: 6px; --slide-progress-show: block; --slide-progress-glow: 0 0 10px rgba(245, 158, 11, 0.8); --slide-counter-bg: #18181B; --slide-counter-color: #F59E0B; --slide-counter-border: #3F3F46; --slide-counter-show: inline-flex; /* Semantics */ --color-success: #10B981; --color-success-soft: #A7F3D0; --color-warning: #F59E0B; --color-warning-soft: #FDBA74; --color-danger: #EF4444; --color-danger-soft: #FCA5A5; --color-info: #38BDF8; --color-info-soft: #BAE6FD; --color-neutral: #A8A29E; /* Section 13: Forms & Documents Hub Tokens */ --forms-card-bg: #18181B; --forms-card-border: #3F3F46; --forms-title-color: #FAFAFA; --forms-desc-color: #A1A1AA; --forms-badge-color: #EAB308; --forms-badge-bg: #27272A; --forms-deadline-color: #F87171; --forms-deadline-bg: #3F1515; --forms-checklist-bg: #09090B; --forms-checklist-border: #3F3F46; --forms-qr-bg: #FFFFFF; --forms-qr-border: #3F3F46; --forms-btn-bg: #EAB308; --forms-btn-color: #09090B; --forms-progress-start: #EAB308; --forms-progress-end: #F59E0B; /* Section 15: Social Media & Community Channels Tokens */ --social-card-bg: #18181B; --social-card-border: #3F3F46; --social-title-color: #FAFAFA; --social-desc-color: #A1A1AA; --social-btn-bg: #27272A; --social-btn-color: #FAFAFA; --social-chip-bg: #27272A; --social-chip-border: #EAB308; --social-chip-color: #FAFAFA; --social-tv-bg: #18181B; --social-tv-border: #EAB308; /* Dynamic Section & Border Design Tokens */ --sidebar-bg: linear-gradient(180deg, rgba(24, 24, 27, 0.92) 0%, rgba(15, 15, 17, 0.95) 100%); --prayer-panel-bg: linear-gradient(145deg, rgba(24, 24, 27, 0.92), rgba(15, 15, 17, 0.95)); --masjid-card-bg: var(--prayer-card-bg, var(--tenant-surface)); --masjid-card-border: var(--prayer-card-border, var(--tenant-border)); --countdown-card-bg: var(--prayer-panel-bg, var(--tenant-surface)); --countdown-card-border: var(--prayer-card-border, var(--tenant-border)); --qr-card-bg: var(--prayer-panel-bg, var(--tenant-surface)); --qr-card-border: var(--prayer-card-border, var(--tenant-border)); --aux-card-bg: var(--prayer-card-bg, var(--tenant-surface)); --aux-card-border: var(--prayer-card-border, var(--tenant-border)); --wisdom-quran-border: rgba(245, 158, 11, 0.4); --wisdom-hadith-border: #3F3F46; --wisdom-badge-bg: rgba(245, 158, 11, 0.18); --wisdom-badge-border: rgba(245, 158, 11, 0.45); --wisdom-hadith-badge-bg: rgba(255, 255, 255, 0.08); --wisdom-hadith-badge-border: #3F3F46; --wisdom-hadith-badge-color: #F59E0B; --wisdom-hadith-ref-bg: rgba(24, 24, 27, 0.7); --wisdom-hadith-ref-border: #3F3F46; --wisdom-hadith-ref-color: #A8A29E; --masjid-loc-pill-bg: rgba(245, 158, 11, 0.12); --masjid-loc-pill-border: rgba(245, 158, 11, 0.35); --masjid-loc-pill-text: #D6D3D1; --hero-status-pill-bg: rgba(245, 158, 11, 0.15); --hero-status-pill-border: rgba(245, 158, 11, 0.45); --hero-status-pill-color: #F59E0B; --hero-qr-badge-bg: rgba(245, 158, 11, 0.15); --hero-qr-badge-border: rgba(245, 158, 11, 0.35); --hero-qr-badge-color: #F59E0B; --qurban-card-bg: var(--tenant-surface); --qurban-card-border: var(--tenant-border); } /* ============================================================================== 4. SAMARKAND TURQUOISE & MOROCCAN BRASS (samarkand-turquoise) ============================================================================== */ [data-theme="samarkand-turquoise"] { /* Surface & Canvas Tokens */ --tenant-bg: #083332; --tenant-surface: #0B4644; --tenant-surface-hover: #105956; --tenant-surface-elevated: #105956; --tenant-surface-strong: #16706B; --tenant-border: #16706B; --tenant-border-focus: #2DD4BF; --tenant-border-subtle: rgba(45, 212, 191, 0.25); --tenant-bg-input: #031C1B; --tenant-input-text: #F0FDFA; /* Typography Tokens */ --tenant-text-primary: #F0FDFA; --tenant-desc-color: #A7F3D0; --tenant-text-muted: #7CCFC5; --text-inverse: #083332; /* Brand Accents */ --tenant-primary: #0F766E; --tenant-primary-light: #2DD4BF; --tenant-gold: #FCD34D; --tenant-gold-bright: #FDE68A; --tenant-gold-soft: #FEF3C7; --tenant-selection-bg: rgba(45, 212, 191, 0.3); --tenant-selection-text: #FFFFFF; /* Aliases */ --bg-primary: var(--tenant-bg); --bg-surface: var(--tenant-surface); --bg-elevated: var(--tenant-surface-elevated); --bg-surface-hover: var(--tenant-surface-hover); --border-color: var(--tenant-border); --border-focus: var(--tenant-border-focus); --text-primary: var(--tenant-text-primary); --text-muted: var(--tenant-desc-color); --primary-color: var(--tenant-primary); --accent-color: var(--tenant-gold); /* Header & Top Bar */ --header-bg: linear-gradient(135deg, #0B4644 0%, #0F766E 50%, #083332 100%); --header-start: #0B4644; --header-mid: #0F766E; --header-end: #083332; --header-title-color: #2DD4BF; --header-clock-color: #F0FDFA; --header-date-color: #A7F3D0; --header-hijri-color: #FCD34D; --header-location-color: #5EEAD4; --calligraphy-color: #FCD34D; --header-calligraphy-color: #FCD34D; --footer-bg: linear-gradient(135deg, #0B4644 0%, #0F766E 50%, #083332 100%); /* Prayer Times & Highlights */ --prayer-card-bg: rgba(11, 70, 68, 0.7); --prayer-card-border: rgba(22, 112, 107, 0.6); --prayer-row-bg: rgba(11, 70, 68, 0.5); --prayer-row-border: rgba(22, 112, 107, 0.4); --active-prayer-bg-start: rgba(45, 212, 191, 0.28); --active-prayer-bg-end: rgba(45, 212, 191, 0.04); --active-prayer-bg: linear-gradient(90deg, rgba(45, 212, 191, 0.28) 0%, rgba(45, 212, 191, 0.04) 100%); --active-prayer-border: #2DD4BF; --active-prayer-glow: 0 0 20px rgba(45, 212, 191, 0.85); --active-prayer-text: #5EEAD4; --active-prayer-muted: #A7F3D0; --active-prayer-time: #F0FDFA; --adhan-time-color: #F0FDFA; --iqamah-time-color: #FCD34D; --adhan-color: #F0FDFA; --iqamah-color: #FCD34D; --countdown-badge-bg: #2DD4BF; --countdown-badge-text: #083332; --highlight-iqamah-bg: rgba(45, 212, 191, 0.08); --active-iqamah-bg: rgba(45, 212, 191, 0.15); /* Carousel & Cards */ --wisdom-card-bg: #0B4644; --wisdom-card-border: #16706B; --wisdom-arabic-color: #FCD34D; --wisdom-trans-color: #F0FDFA; --wisdom-tag-color: #2DD4BF; --notice-card-bg: #0B4644; --notice-card-border: #16706B; --notice-title-color: #2DD4BF; --notice-body-color: #F0FDFA; --notice-subcard-bg: rgba(3, 28, 27, 0.7); --notice-subcard-border: rgba(22, 112, 107, 0.6); --notice-janaza-bg: linear-gradient(150deg, rgba(20, 184, 166, 0.12) 0%, rgba(13, 148, 136, 0.25) 100%); --notice-janaza-border: rgba(20, 184, 166, 0.65); --notice-janaza-color: #99F6E4; --notice-arabic-header-color: #FCD34D; --notice-urgent-bg: linear-gradient(150deg, rgba(239, 68, 68, 0.15) 0%, rgba(185, 28, 28, 0.3) 100%); --notice-urgent-border: #EF4444; --notice-urgent-color: #FCA5A5; --notice-event-bg: linear-gradient(150deg, rgba(45, 212, 191, 0.12) 0%, rgba(15, 118, 110, 0.25) 100%); --notice-event-border: rgba(45, 212, 191, 0.65); --notice-event-color: #5EEAD4; --notice-progress-start: #2DD4BF; --notice-progress-end: #FCD34D; /* Ramadan Fasting, Countdown & Timetable Tokens */ --ramadan-card-bg: #0B4644; --ramadan-card-border: #16706B; --ramadan-panel-bg: linear-gradient(165deg, rgba(11, 70, 68, 0.95) 0%, rgba(8, 51, 50, 0.98) 100%); --ramadan-panel-border: #16706B; --ramadan-title-color: #2DD4BF; --ramadan-sub-color: #A7F3D0; --ramadan-accent-gold: #FCD34D; --ramadan-countdown-bg: linear-gradient(165deg, rgba(6, 45, 44, 0.85) 0%, rgba(3, 28, 27, 0.95) 100%); --ramadan-countdown-border: #2DD4BF; --ramadan-countdown-label: #5EEAD4; --ramadan-time-color: #F0FDFA; --ramadan-unit-bg: rgba(3, 28, 27, 0.8); --ramadan-unit-border: rgba(45, 212, 191, 0.35); --ramadan-unit-val: #F0FDFA; --ramadan-unit-lbl: #2DD4BF; --ramadan-unit-sep: #2DD4BF; --sahoor-box-bg: rgba(11, 70, 68, 0.75); --iftar-box-bg: linear-gradient(135deg, rgba(45, 212, 191, 0.28) 0%, rgba(15, 118, 110, 0.15) 100%); --ramadan-pill-bg: rgba(11, 70, 68, 0.75); --ramadan-pill-border: rgba(22, 112, 107, 0.6); --ramadan-pill-lbl: #A7F3D0; --ramadan-pill-val: #F0FDFA; --ramadan-pill-hl-bg: linear-gradient(135deg, rgba(45, 212, 191, 0.28) 0%, rgba(15, 118, 110, 0.15) 100%); --ramadan-pill-hl-border: #2DD4BF; --ramadan-pill-hl-lbl: #5EEAD4; --ramadan-pill-hl-val: #FFFFFF; --ramadan-dua-bg: linear-gradient(165deg, rgba(11, 70, 68, 0.9) 0%, rgba(8, 51, 50, 0.95) 100%); --ramadan-dua-border: rgba(45, 212, 191, 0.35); --ramadan-dua-arabic-color: #FCD34D; --ramadan-dua-tag-color: #2DD4BF; --ramadan-dua-text-color: #F0FDFA; --ramadan-table-bg: #0B4644; --ramadan-subpage-header-bg: linear-gradient(135deg, rgba(11, 70, 68, 0.95) 0%, rgba(8, 51, 50, 0.98) 100%); --ramadan-subpage-header-border: rgba(45, 212, 191, 0.35); --ramadan-subpage-header-title: #2DD4BF; --ramadan-subpage-header-sub: #A7F3D0; --ramadan-table-wrap-bg: rgba(8, 51, 50, 0.85); --ramadan-table-hdr-bg: linear-gradient(135deg, #105956 0%, #0B4644 100%); --ramadan-table-hdr-border: rgba(45, 212, 191, 0.35); --ramadan-table-hdr-color: #2DD4BF; --ramadan-row-border: rgba(22, 112, 107, 0.4); --ramadan-row-even-bg: rgba(255, 255, 255, 0.02); --ramadan-row-odd-bg: rgba(255, 255, 255, 0.05); --ramadan-row-highlight: rgba(45, 212, 191, 0.22); --ramadan-crescent-bg: radial-gradient(circle at 35% 35%, rgba(45, 212, 191, 0.25) 0%, rgba(15, 118, 110, 0.15) 100%); --ramadan-crescent-border: #2DD4BF; --ramadan-crescent-color: #FCD34D; --special-card-bg: #0B4644; --special-card-border: #16706B; --special-header-title-color: #2DD4BF; --special-title-color: #2DD4BF; --special-event-title-color: #5EEAD4; --special-dua-color: #FCD34D; --mens-box-bg: rgba(11, 70, 68, 0.8); --mens-border: #16706B; --mens-title-color: #2DD4BF; --womens-box-bg: rgba(11, 70, 68, 0.8); --womens-border: #16706B; --womens-title-color: #F472B6; --special-time-value-color: #F0FDFA; --special-guide-bg: rgba(11, 70, 68, 0.65); --special-guide-title-color: #2DD4BF; --special-guide-text-color: #A7F3D0; --special-date-badge-bg: rgba(45, 212, 191, 0.18); --special-date-badge-color: #2DD4BF; --qurban-price-color: #2DD4BF; /* Ramadan Porridge Slide Tokens */ --porridge-slide-bg: radial-gradient(circle at 50% 0%, #0B4644 0%, #083332 45%, #031C1B 100%); --porridge-card-bg: #0B4644; --porridge-card-border: #16706B; --porridge-day-num-color: #F0FDFA; --porridge-day-date-color: #A7F3D0; --porridge-price-color: #FCD34D; --porridge-sponsor-color: #F0FDFA; --porridge-niyyah-color: #FDE68A; --porridge-header-stats-bg: rgba(8, 51, 50, 0.75); --porridge-sponsor-box-bg: rgba(3, 28, 27, 0.75); --porridge-open-pill-bg: rgba(13, 148, 136, 0.22); --porridge-open-pill-color: #2DD4BF; --porridge-open-border: rgba(45, 212, 191, 0.5); --porridge-booked-pill-bg: rgba(239, 68, 68, 0.22); --porridge-booked-pill-color: #F87171; --porridge-booked-border: rgba(248, 113, 113, 0.5); --porridge-partial-pill-bg: rgba(245, 158, 11, 0.22); --porridge-partial-pill-color: #FBBF24; --porridge-partial-border: rgba(251, 191, 36, 0.5); /* Indicators & Glows */ --dot-active-bg: #2DD4BF; --dot-active-color: #2DD4BF; --dot-active-glow: 0 0 14px rgba(45, 212, 191, 0.8); --dot-inactive-bg: rgba(15, 118, 110, 0.4); --dot-inactive-color: #0F766E; --dot-inactive-border: rgba(22, 112, 107, 0.6); --dot-size: 9px; --dot-active-width: 28px; --gold-glow: 0 0 20px rgba(45, 212, 191, 0.85); /* Slide Rotation Timing Bar & Counter */ --slide-progress-start: #2DD4BF; --slide-progress-end: #FCD34D; --slide-progress-track-bg: rgba(22, 112, 107, 0.5); --slide-progress-height: 6px; --slide-progress-show: block; --slide-progress-glow: 0 0 10px rgba(45, 212, 191, 0.8); --slide-counter-bg: #0B4644; --slide-counter-color: #2DD4BF; --slide-counter-border: #16706B; --slide-counter-show: inline-flex; /* Semantics */ --color-success: #2DD4BF; --color-success-soft: #99F6E4; --color-warning: #FCD34D; --color-warning-soft: #FDE68A; --color-danger: #F87171; --color-danger-soft: #FCA5A5; --color-info: #38BDF8; --color-info-soft: #BAE6FD; --color-neutral: #7CCFC5; /* Section 13: Forms & Documents Hub Tokens */ --forms-card-bg: #0B4644; --forms-card-border: #16706B; --forms-title-color: #F0FDFA; --forms-desc-color: #99F6E4; --forms-badge-color: #2DD4BF; --forms-badge-bg: #083332; --forms-deadline-color: #F87171; --forms-deadline-bg: #3F1515; --forms-checklist-bg: #04201F; --forms-checklist-border: #16706B; --forms-qr-bg: #FFFFFF; --forms-qr-border: #16706B; --forms-btn-bg: #0D9488; --forms-btn-color: #FFFFFF; --forms-progress-start: #2DD4BF; --forms-progress-end: #5EEAD4; /* Section 15: Social Media & Community Channels Tokens */ --social-card-bg: #0B4644; --social-card-border: #16706B; --social-title-color: #F0FDFA; --social-desc-color: #99F6E4; --social-btn-bg: #0D9488; --social-btn-color: #FFFFFF; --social-chip-bg: #083332; --social-chip-border: #2DD4BF; --social-chip-color: #F0FDFA; --social-tv-bg: #0B4644; --social-tv-border: #2DD4BF; /* Dynamic Section & Border Design Tokens */ --sidebar-bg: linear-gradient(180deg, rgba(11, 70, 68, 0.92) 0%, rgba(8, 51, 50, 0.95) 100%); --prayer-panel-bg: linear-gradient(145deg, rgba(11, 70, 68, 0.92), rgba(8, 51, 50, 0.95)); --masjid-card-bg: var(--prayer-card-bg, var(--tenant-surface)); --masjid-card-border: var(--prayer-card-border, var(--tenant-border)); --countdown-card-bg: var(--prayer-panel-bg, var(--tenant-surface)); --countdown-card-border: var(--prayer-card-border, var(--tenant-border)); --qr-card-bg: var(--prayer-panel-bg, var(--tenant-surface)); --qr-card-border: var(--prayer-card-border, var(--tenant-border)); --aux-card-bg: var(--prayer-card-bg, var(--tenant-surface)); --aux-card-border: var(--prayer-card-border, var(--tenant-border)); --wisdom-quran-border: rgba(45, 212, 191, 0.4); --wisdom-hadith-border: #16706B; --wisdom-badge-bg: rgba(45, 212, 191, 0.18); --wisdom-badge-border: rgba(45, 212, 191, 0.45); --wisdom-hadith-badge-bg: rgba(15, 118, 110, 0.22); --wisdom-hadith-badge-border: #16706B; --wisdom-hadith-badge-color: #2DD4BF; --wisdom-hadith-ref-bg: rgba(11, 70, 68, 0.7); --wisdom-hadith-ref-border: #16706B; --wisdom-hadith-ref-color: #A7F3D0; --masjid-loc-pill-bg: rgba(45, 212, 191, 0.12); --masjid-loc-pill-border: rgba(45, 212, 191, 0.35); --masjid-loc-pill-text: #A7F3D0; --hero-status-pill-bg: rgba(45, 212, 191, 0.15); --hero-status-pill-border: rgba(45, 212, 191, 0.45); --hero-status-pill-color: #2DD4BF; --hero-qr-badge-bg: rgba(45, 212, 191, 0.15); --hero-qr-badge-border: rgba(45, 212, 191, 0.35); --hero-qr-badge-color: #2DD4BF; --qurban-card-bg: var(--tenant-surface); --qurban-card-border: var(--tenant-border); } /* ============================================================================== 5. PEARL IVORY & ISLAMIC GREEN (pearl-ivory) - PURE LIGHT MODE ============================================================================== */ [data-theme="pearl-ivory"] { /* Surface & Canvas Tokens */ --tenant-bg: #FAFBF9; --tenant-surface: #FFFFFF; --tenant-surface-hover: #F0F5F2; --tenant-surface-elevated: #FFFFFF; --tenant-surface-strong: #E8EDE9; --tenant-border: #E8EDE9; --tenant-border-focus: #047857; --tenant-border-subtle: rgba(4, 120, 87, 0.15); --tenant-bg-input: #FFFFFF; --tenant-input-text: #1A2E2A; /* Typography Tokens - High Contrast Guarded */ --tenant-text-primary: #1A2E2A; --tenant-desc-color: #6B8A7E; --tenant-text-muted: #6B8A7E; --text-inverse: #FFFFFF; /* Brand Accents */ --tenant-primary: #047857; --tenant-primary-light: #065F46; --tenant-gold: #D4AF37; --tenant-gold-bright: #E5C158; --tenant-gold-soft: #FDE68A; --tenant-selection-bg: rgba(4, 120, 87, 0.12); --tenant-selection-text: #1A2E2A; /* Aliases */ --bg-primary: var(--tenant-bg); --bg-surface: var(--tenant-surface); --bg-elevated: var(--tenant-surface-elevated); --bg-surface-hover: var(--tenant-surface-hover); --border-color: var(--tenant-border); --border-focus: var(--tenant-border-focus); --text-primary: var(--tenant-text-primary); --text-muted: var(--tenant-desc-color); --primary-color: var(--tenant-primary); --accent-color: var(--tenant-gold); /* Header & Top Bar */ --header-bg: linear-gradient(135deg, #FFFFFF 0%, #F4F8F6 50%, #ECFDF5 100%); --header-start: #FFFFFF; --header-mid: #F4F8F6; --header-end: #ECFDF5; --header-title-color: #065F46; --header-clock-color: #0A2E24; --header-date-color: #6B8A7E; --header-hijri-color: #D4AF37; --header-location-color: #047857; --calligraphy-color: #065F46; --header-calligraphy-color: #065F46; --header-calligraphy-shadow: none; --footer-bg: linear-gradient(135deg, #FFFFFF 0%, #F4F8F6 50%, #ECFDF5 100%); --footer-start: #FFFFFF; --footer-mid: #F4F8F6; --footer-end: #ECFDF5; --footer-text-color: #1A2E2A; --footer-muted-color: #6B8A7E; --footer-gold-color: #047857; /* Prayer Times & Highlights */ --prayer-card-bg: #FFFFFF; --prayer-card-border: #E8EDE9; --prayer-row-bg: #FFFFFF; --prayer-row-border: #E8EEEB; --prayer-name-color: #047857; --active-prayer-bg-start: rgba(4, 120, 87, 0.1); --active-prayer-bg-end: rgba(212, 175, 55, 0.08); --active-prayer-bg: linear-gradient(90deg, rgba(4, 120, 87, 0.1) 0%, rgba(212, 175, 55, 0.08) 100%); --active-prayer-border: #047857; --active-prayer-glow: none; --active-prayer-box-shadow: 0 2px 10px rgba(4, 120, 87, 0.12); --active-prayer-text: #065F46; --active-prayer-muted: #047857; --active-prayer-time: #0A2E24; --adhan-time-color: #1A2E2A; --iqamah-time-color: #065F46; --adhan-color: #1A2E2A; --iqamah-color: #065F46; --countdown-badge-bg: #047857; --countdown-badge-text: #FFFFFF; --highlight-iqamah-bg: #ECFDF5; --active-iqamah-bg: #047857; --active-iqamah-color: #FFFFFF; /* Carousel & Cards */ --wisdom-card-bg: #FFFFFF; --wisdom-card-border: #E2E8E5; --wisdom-arabic-color: #065F46; --wisdom-trans-color: #1A2E2A; --wisdom-tag-color: #D4AF37; --notice-card-bg: #FFFFFF; --notice-card-border: #E2E8E5; --notice-title-color: #065F46; --notice-body-color: #1A2E2A; --notice-subcard-bg: #F8FAF9; --notice-subcard-border: #E2E8E5; --notice-janaza-bg: linear-gradient(150deg, #FEF2F2 0%, #FEE2E2 100%); --notice-janaza-border: #FECACA; --notice-janaza-color: #DC2626; --notice-arabic-header-color: #065F46; --notice-urgent-bg: linear-gradient(150deg, #FFF1F2 0%, #FFE4E6 100%); --notice-urgent-border: #F43F5E; --notice-urgent-color: #BE123C; --notice-event-bg: linear-gradient(150deg, #EFF6FF 0%, #DBEAFE 100%); --notice-event-border: #93C5FD; --notice-event-color: #1D4ED8; --notice-progress-start: #047857; --notice-progress-end: #D4AF37; /* Ramadan Fasting, Countdown & Timetable Tokens (Pure Light Mode) */ --ramadan-card-bg: #FFFFFF; --ramadan-card-border: #E8EDE9; --ramadan-panel-bg: #F8FAF9; --ramadan-panel-border: #DCE6E0; --ramadan-title-color: #065F46; --ramadan-sub-color: #6B8A7E; --ramadan-accent-gold: #D4AF37; --ramadan-countdown-bg: #F4F8F6; --ramadan-countdown-border: #B7DCCB; --ramadan-countdown-label: #047857; --ramadan-time-color: #0A2E24; --ramadan-unit-bg: #FFFFFF; --ramadan-unit-border: #E2E8E5; --ramadan-unit-val: #1A2E2A; --ramadan-unit-lbl: #047857; --ramadan-unit-sep: #D4AF37; --sahoor-box-bg: #ECFDF5; --iftar-box-bg: #ECFDF5; --ramadan-pill-bg: #F0F5F2; --ramadan-pill-border: #DCE6E0; --ramadan-pill-lbl: #6B8A7E; --ramadan-pill-val: #1A2E2A; --ramadan-pill-hl-bg: #E6F5EE; --ramadan-pill-hl-border: #A7D8C1; --ramadan-pill-hl-lbl: #065F46; --ramadan-pill-hl-val: #0A2E24; --ramadan-dua-bg: #FFFFFF; --ramadan-dua-border: #E2E8E5; --ramadan-dua-arabic-color: #065F46; --ramadan-dua-tag-color: #D4AF37; --ramadan-dua-text-color: #1A2E2A; --ramadan-table-bg: #FFFFFF; --ramadan-subpage-header-bg: #F4F8F6; --ramadan-subpage-header-border: #DCE6E0; --ramadan-subpage-header-title: #065F46; --ramadan-subpage-header-sub: #6B8A7E; --ramadan-table-wrap-bg: #FFFFFF; --ramadan-table-hdr-bg: #ECFDF5; --ramadan-table-hdr-border: #D5E9DE; --ramadan-table-hdr-color: #065F46; --ramadan-row-border: #E8EEEB; --ramadan-row-even-bg: #FFFFFF; --ramadan-row-odd-bg: #F8FAF9; --ramadan-row-highlight: rgba(4, 120, 87, 0.07); --ramadan-crescent-bg: #ECFDF5; --ramadan-crescent-border: #A7D8C1; --ramadan-crescent-color: #065F46; --special-card-bg: #FFFFFF; --special-card-border: #E2E8E5; --special-header-title-color: #065F46; --special-title-color: #065F46; --special-event-title-color: #D4AF37; --special-dua-color: #D4AF37; --mens-box-bg: #F8FAF9; --mens-border: #E2E8E5; --mens-title-color: #047857; --womens-box-bg: #FFF1F2; --womens-border: #FECDD3; --womens-title-color: #BE185D; --special-time-value-color: #1A2E2A; --special-guide-bg: #F8FAF9; --special-guide-title-color: #065F46; --special-guide-text-color: #6B8A7E; --special-date-badge-bg: #ECFDF5; --special-date-badge-color: #047857; --qurban-price-color: #047857; /* Ramadan Porridge Slide Tokens */ --porridge-slide-bg: #F8FAF9; --porridge-card-bg: #FFFFFF; --porridge-card-border: #E2E8E5; --porridge-day-num-color: #1A2E2A; --porridge-day-date-color: #6B8A7E; --porridge-price-color: #047857; --porridge-sponsor-color: #1A2E2A; --porridge-niyyah-color: #D4AF37; --porridge-header-stats-bg: #F0F5F2; --porridge-sponsor-box-bg: #F8FAF9; --porridge-open-pill-bg: #ECFDF5; --porridge-open-pill-color: #047857; --porridge-open-border: #A7D8C1; --porridge-booked-pill-bg: #FEF2F2; --porridge-booked-pill-color: #DC2626; --porridge-booked-border: #FECACA; --porridge-partial-pill-bg: #FFFBEB; --porridge-partial-pill-color: #B45309; --porridge-partial-border: #FDE68A; --islamic-notice-bg: #FBF8F0; /* Indicators & Glows */ --dot-active-bg: #047857; --dot-active-color: #047857; --dot-active-glow: 0 0 12px rgba(4, 120, 87, 0.4); --dot-inactive-bg: #E2E8E5; --dot-inactive-color: #A7B6B0; --dot-inactive-border: #DCE6E0; --dot-size: 9px; --dot-active-width: 28px; --gold-glow: 0 0 16px rgba(212, 175, 55, 0.4); /* Slide Rotation Timing Bar & Counter */ --slide-progress-start: #047857; --slide-progress-end: #D4AF37; --slide-progress-track-bg: rgba(226, 232, 229, 0.6); --slide-progress-height: 6px; --slide-progress-show: block; --slide-progress-glow: 0 0 10px rgba(4, 120, 87, 0.4); --slide-counter-bg: #F0F5F2; --slide-counter-color: #047857; --slide-counter-border: #DCE6E0; --slide-counter-show: inline-flex; /* Semantics */ --color-success: #059669; --color-success-soft: #D1FAE5; --color-warning: #D97706; --color-warning-soft: #FEF3C7; --color-danger: #DC2626; --color-danger-soft: #FEE2E2; --color-info: #0284C7; --color-info-soft: #E0F2FE; --color-neutral: #6B8A7E; /* Section 13: Forms & Documents Hub Tokens */ --forms-card-bg: #FFFFFF; --forms-card-border: #E2E8E5; --forms-title-color: #0F241D; --forms-desc-color: #4A635A; --forms-badge-color: #047857; --forms-badge-bg: #ECFDF5; --forms-deadline-color: #DC2626; --forms-deadline-bg: #FEF2F2; --forms-checklist-bg: #F8FAFC; --forms-checklist-border: #E2E8E5; --forms-qr-bg: #FFFFFF; --forms-qr-border: #E2E8E5; --forms-btn-bg: #047857; --forms-btn-color: #FFFFFF; --forms-progress-start: #047857; --forms-progress-end: #059669; /* Section 15: Social Media & Community Channels Tokens */ --social-card-bg: #FFFFFF; --social-card-border: #E2E8E5; --social-title-color: #0F241D; --social-desc-color: #4A635A; --social-btn-bg: #047857; --social-btn-color: #FFFFFF; --social-chip-bg: #ECFDF5; --social-chip-border: #047857; --social-chip-color: #0F241D; --social-tv-bg: #F0FDF4; --social-tv-border: #047857; /* Dynamic Section & Border Design Tokens */ --sidebar-bg: linear-gradient(180deg, #FFFFFF 0%, #FAFBF9 100%); --prayer-panel-bg: #FFFFFF; --masjid-card-bg: var(--prayer-card-bg, var(--tenant-surface)); --masjid-card-border: var(--prayer-card-border, var(--tenant-border)); --countdown-card-bg: var(--prayer-panel-bg, var(--tenant-surface)); --countdown-card-border: var(--prayer-card-border, var(--tenant-border)); --qr-card-bg: var(--prayer-panel-bg, var(--tenant-surface)); --qr-card-border: var(--prayer-card-border, var(--tenant-border)); --aux-card-bg: var(--prayer-card-bg, var(--tenant-surface)); --aux-card-border: var(--prayer-card-border, var(--tenant-border)); --wisdom-quran-border: rgba(217, 119, 6, 0.35); --wisdom-hadith-border: #E8EDE9; --wisdom-badge-bg: rgba(217, 119, 6, 0.12); --wisdom-badge-border: rgba(217, 119, 6, 0.35); --wisdom-hadith-badge-bg: rgba(0, 0, 0, 0.05); --wisdom-hadith-badge-border: #E8EDE9; --wisdom-hadith-badge-color: #B45309; --wisdom-hadith-ref-bg: #FDFBF7; --wisdom-hadith-ref-border: #E8EDE9; --wisdom-hadith-ref-color: #78716C; --masjid-loc-pill-bg: rgba(217, 119, 6, 0.10); --masjid-loc-pill-border: rgba(217, 119, 6, 0.3); --masjid-loc-pill-text: #78716C; --hero-status-pill-bg: rgba(217, 119, 6, 0.12); --hero-status-pill-border: rgba(217, 119, 6, 0.35); --hero-status-pill-color: #B45309; --hero-qr-badge-bg: rgba(217, 119, 6, 0.12); --hero-qr-badge-border: rgba(217, 119, 6, 0.3); --hero-qr-badge-color: #B45309; --qurban-card-bg: var(--tenant-surface); --qurban-card-border: var(--tenant-border); } /* ============================================================================== 6. OTTOMAN PLUM & ANTIQUE GOLD (ottoman-plum) ============================================================================== */ [data-theme="ottoman-plum"] { /* Surface & Canvas Tokens */ --tenant-bg: #120D16; --tenant-surface: #1D1420; --tenant-surface-hover: #291B2B; --tenant-surface-elevated: #291B2B; --tenant-surface-strong: #36223A; --tenant-border: #3E2942; --tenant-border-focus: #E7C65A; --tenant-border-subtle: rgba(201, 162, 39, 0.25); --tenant-bg-input: #0B080E; --tenant-input-text: #FAF7F2; /* Typography Tokens */ --tenant-text-primary: #FAF7F2; --tenant-desc-color: #B9AEB8; --tenant-text-muted: #8E828D; --text-inverse: #120D16; /* Brand Accents */ --tenant-primary: #6B3A68; --tenant-primary-light: #A8558D; --tenant-gold: #C9A227; --tenant-gold-bright: #E7C65A; --tenant-gold-soft: #F4E29C; --tenant-selection-bg: rgba(201, 162, 39, 0.3); --tenant-selection-text: #FFFFFF; /* Aliases */ --bg-primary: var(--tenant-bg); --bg-surface: var(--tenant-surface); --bg-elevated: var(--tenant-surface-elevated); --bg-surface-hover: var(--tenant-surface-hover); --border-color: var(--tenant-border); --border-focus: var(--tenant-border-focus); --text-primary: var(--tenant-text-primary); --text-muted: var(--tenant-desc-color); --primary-color: var(--tenant-primary); --accent-color: var(--tenant-gold); /* Header & Top Bar */ --header-bg: linear-gradient(135deg, #1D1420 0%, #6B3A68 50%, #120D16 100%); --header-start: #1D1420; --header-mid: #6B3A68; --header-end: #120D16; --header-title-color: #C9A227; --header-clock-color: #FAF7F2; --header-date-color: #B9AEB8; --header-hijri-color: #E7C65A; --header-location-color: #A8558D; --calligraphy-color: #C9A227; --header-calligraphy-color: #C9A227; --footer-bg: linear-gradient(135deg, #1D1420 0%, #6B3A68 50%, #120D16 100%); /* Prayer Times & Highlights */ --prayer-card-bg: rgba(29, 20, 32, 0.7); --prayer-card-border: rgba(62, 41, 66, 0.6); --prayer-row-bg: rgba(29, 20, 32, 0.5); --prayer-row-border: rgba(62, 41, 66, 0.4); --active-prayer-bg-start: rgba(201, 162, 39, 0.28); --active-prayer-bg-end: rgba(201, 162, 39, 0.04); --active-prayer-bg: linear-gradient(90deg, rgba(201, 162, 39, 0.28) 0%, rgba(201, 162, 39, 0.04) 100%); --active-prayer-border: #C9A227; --active-prayer-glow: 0 0 20px rgba(201, 162, 39, 0.85); --active-prayer-text: #E7C65A; --active-prayer-muted: #B9AEB8; --active-prayer-time: #FAF7F2; --adhan-time-color: #FAF7F2; --iqamah-time-color: #E7C65A; --adhan-color: #FAF7F2; --iqamah-color: #C9A227; --countdown-badge-bg: #C9A227; --countdown-badge-text: #120D16; --highlight-iqamah-bg: rgba(201, 162, 39, 0.08); --active-iqamah-bg: rgba(201, 162, 39, 0.15); /* Carousel & Cards */ --wisdom-card-bg: #1D1420; --wisdom-card-border: #3E2942; --wisdom-arabic-color: #E7C65A; --wisdom-trans-color: #FAF7F2; --wisdom-tag-color: #C9A227; --notice-card-bg: #1D1420; --notice-card-border: #3E2942; --notice-title-color: #C9A227; --notice-body-color: #FAF7F2; --notice-subcard-bg: rgba(18, 13, 22, 0.7); --notice-subcard-border: rgba(62, 41, 66, 0.6); --notice-janaza-bg: linear-gradient(150deg, rgba(168, 85, 141, 0.12) 0%, rgba(107, 58, 104, 0.25) 100%); --notice-janaza-border: rgba(168, 85, 141, 0.65); --notice-janaza-color: #FBCFE8; --notice-arabic-header-color: #E7C65A; --notice-urgent-bg: linear-gradient(150deg, rgba(239, 68, 68, 0.15) 0%, rgba(185, 28, 28, 0.3) 100%); --notice-urgent-border: #EF4444; --notice-urgent-color: #FCA5A5; --notice-event-bg: linear-gradient(150deg, rgba(168, 85, 141, 0.12) 0%, rgba(90, 40, 75, 0.25) 100%); --notice-event-border: rgba(168, 85, 141, 0.65); --notice-event-color: #F472B6; --notice-progress-start: #C9A227; --notice-progress-end: #A8558D; /* Ramadan Fasting, Countdown & Timetable Tokens */ --ramadan-card-bg: #1D1420; --ramadan-card-border: #3E2942; --ramadan-panel-bg: linear-gradient(165deg, rgba(29, 20, 32, 0.95) 0%, rgba(18, 13, 22, 0.98) 100%); --ramadan-panel-border: #3E2942; --ramadan-title-color: #C9A227; --ramadan-sub-color: #B9AEB8; --ramadan-accent-gold: #C9A227; --ramadan-countdown-bg: linear-gradient(165deg, rgba(24, 15, 27, 0.85) 0%, rgba(14, 8, 17, 0.95) 100%); --ramadan-countdown-border: #C9A227; --ramadan-countdown-label: #E7C65A; --ramadan-time-color: #FAF7F2; --ramadan-unit-bg: rgba(11, 8, 14, 0.8); --ramadan-unit-border: rgba(201, 162, 39, 0.35); --ramadan-unit-val: #FAF7F2; --ramadan-unit-lbl: #C9A227; --ramadan-unit-sep: #C9A227; --sahoor-box-bg: rgba(29, 20, 32, 0.75); --iftar-box-bg: linear-gradient(135deg, rgba(201, 162, 39, 0.28) 0%, rgba(107, 58, 104, 0.15) 100%); --ramadan-pill-bg: rgba(29, 20, 32, 0.75); --ramadan-pill-border: rgba(62, 41, 66, 0.6); --ramadan-pill-lbl: #B9AEB8; --ramadan-pill-val: #FAF7F2; --ramadan-pill-hl-bg: linear-gradient(135deg, rgba(201, 162, 39, 0.28) 0%, rgba(107, 58, 104, 0.15) 100%); --ramadan-pill-hl-border: #C9A227; --ramadan-pill-hl-lbl: #E7C65A; --ramadan-pill-hl-val: #FFFFFF; --ramadan-dua-bg: linear-gradient(165deg, rgba(29, 20, 32, 0.9) 0%, rgba(18, 13, 22, 0.95) 100%); --ramadan-dua-border: rgba(201, 162, 39, 0.35); --ramadan-dua-arabic-color: #E7C65A; --ramadan-dua-tag-color: #C9A227; --ramadan-dua-text-color: #FAF7F2; --ramadan-table-bg: #1D1420; --ramadan-subpage-header-bg: linear-gradient(135deg, rgba(29, 20, 32, 0.95) 0%, rgba(18, 13, 22, 0.98) 100%); --ramadan-subpage-header-border: rgba(201, 162, 39, 0.35); --ramadan-subpage-header-title: #C9A227; --ramadan-subpage-header-sub: #B9AEB8; --ramadan-table-wrap-bg: rgba(18, 13, 22, 0.85); --ramadan-table-hdr-bg: linear-gradient(135deg, #291B2B 0%, #1D1420 100%); --ramadan-table-hdr-border: rgba(201, 162, 39, 0.35); --ramadan-table-hdr-color: #C9A227; --ramadan-row-border: rgba(62, 41, 66, 0.4); --ramadan-row-even-bg: rgba(255, 255, 255, 0.02); --ramadan-row-odd-bg: rgba(255, 255, 255, 0.05); --ramadan-row-highlight: rgba(201, 162, 39, 0.22); --ramadan-crescent-bg: radial-gradient(circle at 35% 35%, rgba(201, 162, 39, 0.25) 0%, rgba(107, 58, 104, 0.15) 100%); --ramadan-crescent-border: #C9A227; --ramadan-crescent-color: #E7C65A; --special-card-bg: #1D1420; --special-card-border: #3E2942; --special-header-title-color: #C9A227; --special-title-color: #C9A227; --special-event-title-color: #E7C65A; --special-dua-color: #E7C65A; --mens-box-bg: rgba(29, 20, 32, 0.8); --mens-border: #3E2942; --mens-title-color: #A8558D; --womens-box-bg: rgba(29, 20, 32, 0.8); --womens-border: #3E2942; --womens-title-color: #F472B6; --special-time-value-color: #FAF7F2; --special-guide-bg: rgba(29, 20, 32, 0.65); --special-guide-title-color: #C9A227; --special-guide-text-color: #B9AEB8; --special-date-badge-bg: rgba(201, 162, 39, 0.18); --special-date-badge-color: #C9A227; --qurban-price-color: #A8558D; /* Ramadan Porridge Slide Tokens */ --porridge-slide-bg: radial-gradient(circle at 50% 0%, #1D1420 0%, #291B2B 45%, #120D16 100%); --porridge-card-bg: #1D1420; --porridge-card-border: #4A2B4E; --porridge-day-num-color: #FAF7F2; --porridge-day-date-color: #B9AEB8; --porridge-price-color: #C9A227; --porridge-sponsor-color: #FAF7F2; --porridge-niyyah-color: #E7C65A; --porridge-header-stats-bg: rgba(18, 13, 22, 0.75); --porridge-sponsor-box-bg: rgba(11, 8, 14, 0.75); --porridge-open-pill-bg: rgba(201, 162, 39, 0.22); --porridge-open-pill-color: #E7C65A; --porridge-open-border: rgba(231, 198, 90, 0.5); --porridge-booked-pill-bg: rgba(239, 68, 68, 0.22); --porridge-booked-pill-color: #F87171; --porridge-booked-border: rgba(248, 113, 113, 0.5); --porridge-partial-pill-bg: rgba(107, 58, 104, 0.35); --porridge-partial-pill-color: #E8A0E5; --porridge-partial-border: rgba(232, 160, 229, 0.5); /* Indicators & Glows */ --dot-active-bg: #C9A227; --dot-active-color: #C9A227; --dot-active-glow: 0 0 14px rgba(201, 162, 39, 0.8); --dot-inactive-bg: rgba(107, 58, 104, 0.4); --dot-inactive-color: #6B3A68; --dot-inactive-border: rgba(62, 41, 66, 0.6); --dot-size: 9px; --dot-active-width: 28px; --gold-glow: 0 0 20px rgba(201, 162, 39, 0.85); /* Slide Rotation Timing Bar & Counter */ --slide-progress-start: #C9A227; --slide-progress-end: #A8558D; --slide-progress-track-bg: rgba(107, 58, 104, 0.4); --slide-progress-height: 6px; --slide-progress-show: block; --slide-progress-glow: 0 0 10px rgba(201, 162, 39, 0.8); --slide-counter-bg: #1D1420; --slide-counter-color: #C9A227; --slide-counter-border: #6B3A68; --slide-counter-show: inline-flex; /* Semantics */ --color-success: #10B981; --color-success-soft: #A7F3D0; --color-warning: #E7C65A; --color-warning-soft: #F4E29C; --color-danger: #F87171; --color-danger-soft: #FCA5A5; --color-info: #A8558D; --color-info-soft: #E9D5FF; --color-neutral: #B9AEB8; /* Section 13: Forms & Documents Hub Tokens */ --forms-card-bg: #1D1420; --forms-card-border: #3E2942; --forms-title-color: #FAF5FF; --forms-desc-color: #D8B4FE; --forms-badge-color: #E9D5FF; --forms-badge-bg: #2D1C33; --forms-deadline-color: #F87171; --forms-deadline-bg: #3F1515; --forms-checklist-bg: #120B15; --forms-checklist-border: #3E2942; --forms-qr-bg: #FFFFFF; --forms-qr-border: #3E2942; --forms-btn-bg: #9333EA; --forms-btn-color: #FFFFFF; --forms-progress-start: #C084FC; --forms-progress-end: #E9D5FF; /* Section 15: Social Media & Community Channels Tokens */ --social-card-bg: #1D1420; --social-card-border: #3E2942; --social-title-color: #FAF5FF; --social-desc-color: #D8B4FE; --social-btn-bg: #9333EA; --social-btn-color: #FFFFFF; --social-chip-bg: #2D1C33; --social-chip-border: #C084FC; --social-chip-color: #FAF5FF; --social-tv-bg: #1D1420; --social-tv-border: #C084FC; /* Dynamic Section & Border Design Tokens */ --sidebar-bg: linear-gradient(180deg, rgba(29, 20, 32, 0.92) 0%, rgba(18, 13, 22, 0.95) 100%); --prayer-panel-bg: linear-gradient(145deg, rgba(29, 20, 32, 0.92), rgba(18, 13, 22, 0.95)); --masjid-card-bg: var(--prayer-card-bg, var(--tenant-surface)); --masjid-card-border: var(--prayer-card-border, var(--tenant-border)); --countdown-card-bg: var(--prayer-panel-bg, var(--tenant-surface)); --countdown-card-border: var(--prayer-card-border, var(--tenant-border)); --qr-card-bg: var(--prayer-panel-bg, var(--tenant-surface)); --qr-card-border: var(--prayer-card-border, var(--tenant-border)); --aux-card-bg: var(--prayer-card-bg, var(--tenant-surface)); --aux-card-border: var(--prayer-card-border, var(--tenant-border)); --wisdom-quran-border: rgba(244, 114, 182, 0.4); --wisdom-hadith-border: #3E2942; --wisdom-badge-bg: rgba(244, 114, 182, 0.18); --wisdom-badge-border: rgba(244, 114, 182, 0.45); --wisdom-hadith-badge-bg: rgba(107, 58, 104, 0.25); --wisdom-hadith-badge-border: #3E2942; --wisdom-hadith-badge-color: #F472B6; --wisdom-hadith-ref-bg: rgba(29, 20, 32, 0.7); --wisdom-hadith-ref-border: #3E2942; --wisdom-hadith-ref-color: #C084FC; --masjid-loc-pill-bg: rgba(244, 114, 182, 0.12); --masjid-loc-pill-border: rgba(244, 114, 182, 0.35); --masjid-loc-pill-text: #C084FC; --hero-status-pill-bg: rgba(244, 114, 182, 0.15); --hero-status-pill-border: rgba(244, 114, 182, 0.45); --hero-status-pill-color: #F472B6; --hero-qr-badge-bg: rgba(244, 114, 182, 0.15); --hero-qr-badge-border: rgba(244, 114, 182, 0.35); --hero-qr-badge-color: #F472B6; --qurban-card-bg: var(--tenant-surface); --qurban-card-border: var(--tenant-border); } /* ============================================================================== 7. MIDNIGHT OCEAN (midnight-ocean) Night sky + illuminated mosque + turquoise architectural lighting + subtle bronze ============================================================================== */ [data-theme="midnight-ocean"] { /* ========================================================= MIDNIGHT OCEAN Premium Dark Masjid Digital Dashboard ========================================================= */ /* --------------------------------------------------------- Core Palette --------------------------------------------------------- */ --color-navy: #1D3267; --color-teal: #1D8B9D; --color-cyan: #02A3C0; --color-white: #F5FFFF; --color-sand: #B4916B; /* --------------------------------------------------------- Surface & Canvas --------------------------------------------------------- */ --tenant-bg: #071225; --tenant-surface: #0B1B35; --tenant-surface-hover: #102746; --tenant-surface-elevated: #122D4D; --tenant-surface-strong: #18395A; --tenant-border: #24466B; --tenant-border-focus: #02A3C0; --tenant-border-subtle: rgba(2, 163, 192, 0.20); --tenant-bg-input: #061021; --tenant-input-text: #F5FFFF; /* --------------------------------------------------------- Typography --------------------------------------------------------- */ --tenant-text-primary: #F5FFFF; --tenant-desc-color: #B7D0D6; --tenant-text-muted: #7FA3AF; --text-inverse: #071225; /* --------------------------------------------------------- Brand --------------------------------------------------------- */ --tenant-primary: #1D8B9D; --tenant-primary-light: #02A3C0; --tenant-gold: #B4916B; --tenant-gold-bright: #D0AE88; --tenant-gold-soft: #E3C9A8; --tenant-selection-bg: rgba(2, 163, 192, 0.28); --tenant-selection-text: #FFFFFF; /* --------------------------------------------------------- Backward Compatibility --------------------------------------------------------- */ --bg-primary: var(--tenant-bg); --bg-surface: var(--tenant-surface); --bg-elevated: var(--tenant-surface-elevated); --bg-surface-hover: var(--tenant-surface-hover); --border-color: var(--tenant-border); --border-focus: var(--tenant-border-focus); --text-primary: var(--tenant-text-primary); --text-muted: var(--tenant-desc-color); --primary-color: var(--tenant-primary); --accent-color: var(--tenant-gold); /* --------------------------------------------------------- Header & Top Bar --------------------------------------------------------- */ --header-bg: linear-gradient(135deg, #071225 0%, #122B55 38%, #1D3267 65%, #0B6575 100%); --header-start: #071225; --header-mid: #1D3267; --header-end: #1D8B9D; --header-title-color: #F5FFFF; --header-clock-color: #F5FFFF; --header-date-color: #B7D0D6; --header-hijri-color: #D0AE88; --header-location-color: #02A3C0; --calligraphy-color: #D0AE88; --header-calligraphy-color: #D0AE88; --footer-bg: linear-gradient(135deg, #071225 0%, #102746 45%, #1D3267 100%); /* --------------------------------------------------------- Prayer Times --------------------------------------------------------- */ --prayer-card-bg: linear-gradient(145deg, rgba(18, 45, 77, 0.92), rgba(11, 27, 53, 0.96)); --prayer-card-border: rgba(2, 163, 192, 0.28); --prayer-row-bg: rgba(29, 50, 103, 0.30); --prayer-row-border: rgba(127, 163, 175, 0.15); /* Active Prayer */ --active-prayer-bg-start: rgba(2, 163, 192, 0.24); --active-prayer-bg-end: rgba(29, 139, 157, 0.04); --active-prayer-bg: linear-gradient(90deg, rgba(2, 163, 192, 0.26) 0%, rgba(29, 139, 157, 0.08) 55%, transparent 100%); --active-prayer-border: #02A3C0; --active-prayer-glow: 0 0 20px rgba(2, 163, 192, 0.45), 0 0 45px rgba(29, 139, 157, 0.18); --active-prayer-text: #5CE5F4; --active-prayer-muted: #B7D0D6; --active-prayer-time: #F5FFFF; /* --------------------------------------------------------- Adhan / Iqamah --------------------------------------------------------- */ --adhan-time-color: #F5FFFF; --iqamah-time-color: #5CE5F4; --adhan-color: #D9EDF0; --iqamah-color: #02A3C0; --countdown-badge-bg: linear-gradient(135deg, #02A3C0, #1D8B9D); --countdown-badge-text: #F5FFFF; --highlight-iqamah-bg: rgba(2, 163, 192, 0.08); --active-iqamah-bg: rgba(2, 163, 192, 0.16); /* --------------------------------------------------------- Carousel & Cards --------------------------------------------------------- */ --wisdom-card-bg: linear-gradient(145deg, #102746, #0B1B35); --wisdom-card-border: rgba(180, 145, 107, 0.30); --wisdom-arabic-color: #D0AE88; --wisdom-trans-color: #F5FFFF; --wisdom-tag-color: #02A3C0; --notice-card-bg: linear-gradient(145deg, #102746, #0B1B35); --notice-body-color: #F5FFFF; --notice-janaza-bg: linear-gradient(150deg, rgba(91, 33, 182, 0.18), rgba(30, 20, 70, 0.40)); --notice-janaza-border: rgba(167, 139, 250, 0.50); /* --------------------------------------------------------- Ramadan --------------------------------------------------------- */ --ramadan-card-bg: #0B1B35; --ramadan-card-border: #24466B; --ramadan-panel-bg: linear-gradient(165deg, rgba(18, 45, 77, 0.96), rgba(7, 18, 37, 0.98)); --ramadan-panel-border: rgba(2, 163, 192, 0.30); --ramadan-title-color: #F5FFFF; --ramadan-sub-color: #B7D0D6; --ramadan-accent-gold: #B4916B; --ramadan-countdown-bg: linear-gradient(165deg, rgba(29, 139, 157, 0.20), rgba(7, 18, 37, 0.90)); --ramadan-countdown-border: #02A3C0; --ramadan-countdown-label: #5CE5F4; --ramadan-time-color: #F5FFFF; --ramadan-unit-bg: rgba(7, 18, 37, 0.80); --ramadan-unit-border: rgba(2, 163, 192, 0.25); --ramadan-unit-val: #F5FFFF; --ramadan-unit-lbl: #B4916B; --ramadan-unit-sep: #02A3C0; --sahoor-box-bg: rgba(29, 139, 157, 0.12); --iftar-box-bg: linear-gradient(135deg, rgba(180, 145, 107, 0.24), rgba(2, 163, 192, 0.10)); --ramadan-pill-bg: rgba(7, 18, 37, 0.72); --ramadan-pill-border: rgba(2, 163, 192, 0.20); --ramadan-pill-lbl: #9CBAC3; --ramadan-pill-val: #F5FFFF; --ramadan-pill-hl-bg: linear-gradient(135deg, rgba(2, 163, 192, 0.20), rgba(29, 139, 157, 0.10)); --ramadan-pill-hl-border: #02A3C0; --ramadan-pill-hl-lbl: #5CE5F4; --ramadan-pill-hl-val: #FFFFFF; --ramadan-dua-bg: linear-gradient(165deg, rgba(18, 45, 77, 0.90), rgba(7, 18, 37, 0.96)); --ramadan-dua-border: rgba(180, 145, 107, 0.30); --ramadan-dua-arabic-color: #D0AE88; --ramadan-dua-tag-color: #02A3C0; --ramadan-dua-text-color: #F5FFFF; --ramadan-table-bg: #0B1B35; --ramadan-subpage-header-bg: linear-gradient(135deg, rgba(18, 45, 77, 0.95), rgba(7, 18, 37, 0.98)); --ramadan-subpage-header-border: rgba(2, 163, 192, 0.25); --ramadan-subpage-header-title: #F5FFFF; --ramadan-subpage-header-sub: #9CBAC3; --ramadan-table-wrap-bg: rgba(7, 18, 37, 0.85); --ramadan-table-hdr-bg: linear-gradient(135deg, #18395A, #102746); --ramadan-table-hdr-border: rgba(2, 163, 192, 0.25); --ramadan-table-hdr-color: #5CE5F4; --ramadan-row-border: rgba(127, 163, 175, 0.14); --ramadan-row-even-bg: rgba(255, 255, 255, 0.015); --ramadan-row-odd-bg: rgba(255, 255, 255, 0.035); --ramadan-row-highlight: rgba(2, 163, 192, 0.15); --ramadan-crescent-bg: radial-gradient(circle at 35% 35%, rgba(180, 145, 107, 0.22), rgba(2, 163, 192, 0.10)); --ramadan-crescent-border: #B4916B; --ramadan-crescent-color: #D0AE88; /* --------------------------------------------------------- Special Events --------------------------------------------------------- */ --special-card-bg: #0B1B35; --special-card-border: #24466B; --special-header-title-color: #F5FFFF; --special-title-color: #F5FFFF; --special-event-title-color: #5CE5F4; --special-dua-color: #D0AE88; --mens-box-bg: rgba(29, 139, 157, 0.10); --mens-border: rgba(2, 163, 192, 0.25); --mens-title-color: #5CE5F4; --womens-box-bg: rgba(180, 145, 107, 0.08); --womens-border: rgba(180, 145, 107, 0.30); --womens-title-color: #D0AE88; --special-time-value-color: #F5FFFF; --special-guide-bg: rgba(7, 18, 37, 0.65); --special-guide-title-color: #D0AE88; --special-guide-text-color: #A8C1C9; --special-date-badge-bg: rgba(2, 163, 192, 0.15); --special-date-badge-color: #5CE5F4; --qurban-price-color: #5EE6B0; /* --------------------------------------------------------- Indicators & Glows --------------------------------------------------------- */ --dot-active-bg: #02A3C0; --dot-active-color: #02A3C0; --dot-active-glow: 0 0 12px rgba(2, 163, 192, 0.70), 0 0 28px rgba(2, 163, 192, 0.25); --dot-inactive-bg: rgba(29, 139, 157, 0.30); --dot-inactive-color: #1D8B9D; --dot-inactive-border: rgba(29, 139, 157, 0.35); --dot-size: 9px; --dot-active-width: 28px; --gold-glow: 0 0 18px rgba(180, 145, 107, 0.45); /* Slide Rotation Timing Bar & Counter */ --slide-progress-start: #02A3C0; --slide-progress-end: #1D8B9D; --slide-progress-track-bg: rgba(29, 139, 157, 0.25); --slide-progress-height: 6px; --slide-progress-show: block; --slide-progress-glow: 0 0 10px rgba(2, 163, 192, 0.7); --slide-counter-bg: #071225; --slide-counter-color: #5CE5F4; --slide-counter-border: #18395A; --slide-counter-show: inline-flex; /* --------------------------------------------------------- Semantic Colors --------------------------------------------------------- */ --color-success: #42D6A4; --color-success-soft: #8BE8C5; --color-warning: #E8B86A; --color-warning-soft: #F2D19A; --color-danger: #F07878; --color-danger-soft: #F6AAAA; --color-info: #5CC8E8; --color-info-soft: #9BE3F4; --color-neutral: #94A9B3; /* --------------------------------------------------------- WOW / Dynamic Effects --------------------------------------------------------- */ --ambient-glow: radial-gradient(circle at 20% 10%, rgba(2, 163, 192, 0.12), transparent 35%); --surface-glow: 0 8px 35px rgba(2, 163, 192, 0.08); --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); --card-hover-shadow: 0 16px 45px rgba(2, 163, 192, 0.14); --focus-ring: 0 0 0 3px rgba(2, 163, 192, 0.22); --premium-gradient: linear-gradient(135deg, #1D3267 0%, #1D8B9D 55%, #02A3C0 100%); --premium-gold-gradient: linear-gradient(135deg, #8F6D4E, #B4916B, #D0AE88); /* Section 13: Forms & Documents Hub Tokens */ --forms-card-bg: #0D223A; --forms-card-border: #1A4066; --forms-title-color: #F0F9FF; --forms-desc-color: #BAE6FD; --forms-badge-color: #38BDF8; --forms-badge-bg: #09192C; --forms-deadline-color: #F87171; --forms-deadline-bg: #3F1515; --forms-checklist-bg: #050E1A; --forms-checklist-border: #1A4066; --forms-qr-bg: #FFFFFF; --forms-qr-border: #1A4066; --forms-btn-bg: #0284C7; --forms-btn-color: #FFFFFF; --forms-progress-start: #38BDF8; --forms-progress-end: #7DD3FC; /* Section 15: Social Media & Community Channels Tokens */ --social-card-bg: #0D223A; --social-card-border: #1A4066; --social-title-color: #F0F9FF; --social-desc-color: #BAE6FD; --social-btn-bg: #0284C7; --social-btn-color: #FFFFFF; --social-chip-bg: #09192C; --social-chip-border: #38BDF8; --social-chip-color: #F0F9FF; --social-tv-bg: #0D223A; --social-tv-border: #38BDF8; /* Dynamic Section & Border Design Tokens */ --sidebar-bg: linear-gradient(180deg, rgba(16, 39, 70, 0.92) 0%, rgba(7, 18, 37, 0.95) 100%); --prayer-panel-bg: linear-gradient(145deg, rgba(16, 39, 70, 0.92), rgba(7, 18, 37, 0.95)); --masjid-card-bg: var(--prayer-card-bg, var(--tenant-surface)); --masjid-card-border: var(--prayer-card-border, var(--tenant-border)); --countdown-card-bg: var(--prayer-panel-bg, var(--tenant-surface)); --countdown-card-border: var(--prayer-card-border, var(--tenant-border)); --qr-card-bg: var(--prayer-panel-bg, var(--tenant-surface)); --qr-card-border: var(--prayer-card-border, var(--tenant-border)); --aux-card-bg: var(--prayer-card-bg, var(--tenant-surface)); --aux-card-border: var(--prayer-card-border, var(--tenant-border)); --wisdom-quran-border: rgba(34, 211, 238, 0.4); --wisdom-hadith-border: #24466B; --wisdom-badge-bg: rgba(34, 211, 238, 0.18); --wisdom-badge-border: rgba(34, 211, 238, 0.45); --wisdom-hadith-badge-bg: rgba(29, 139, 157, 0.22); --wisdom-hadith-badge-border: #24466B; --wisdom-hadith-badge-color: #22D3EE; --wisdom-hadith-ref-bg: rgba(11, 27, 53, 0.7); --wisdom-hadith-ref-border: #24466B; --wisdom-hadith-ref-color: #67E8F9; --masjid-loc-pill-bg: rgba(34, 211, 238, 0.12); --masjid-loc-pill-border: rgba(34, 211, 238, 0.35); --masjid-loc-pill-text: #67E8F9; --hero-status-pill-bg: rgba(34, 211, 238, 0.15); --hero-status-pill-border: rgba(34, 211, 238, 0.45); --hero-status-pill-color: #22D3EE; --hero-qr-badge-bg: rgba(34, 211, 238, 0.15); --hero-qr-badge-border: rgba(34, 211, 238, 0.35); --hero-qr-badge-color: #22D3EE; --qurban-card-bg: var(--tenant-surface); --qurban-card-border: var(--tenant-border); } /* ============================================================================== 8. PEARL & OCEAN (pearl-ocean) White marble + turquoise glass + navy Islamic architecture + warm sandstone ============================================================================== */ [data-theme="pearl-ocean"] { /* ========================================================= PEARL & OCEAN Premium Light Masjid Digital Dashboard ========================================================= */ /* --------------------------------------------------------- Core Palette --------------------------------------------------------- */ --color-navy: #1D3267; --color-teal: #1D8B9D; --color-cyan: #02A3C0; --color-white: #F5FFFF; --color-sand: #B4916B; /* --------------------------------------------------------- Surface & Canvas --------------------------------------------------------- */ --tenant-bg: #F5FFFF; --tenant-surface: #FFFFFF; --tenant-surface-hover: #EDF8FA; --tenant-surface-elevated: #FFFFFF; --tenant-surface-strong: #E3F2F5; --tenant-border: #C9E2E7; --tenant-border-focus: #02A3C0; --tenant-border-subtle: rgba(29, 139, 157, 0.18); --tenant-bg-input: #F0FAFC; --tenant-input-text: #1D3267; /* --------------------------------------------------------- Typography --------------------------------------------------------- */ --tenant-text-primary: #14264F; --tenant-desc-color: #4F6975; --tenant-text-muted: #718992; --text-inverse: #F5FFFF; /* --------------------------------------------------------- Brand --------------------------------------------------------- */ --tenant-primary: #1D8B9D; --tenant-primary-light: #02A3C0; --tenant-gold: #B4916B; --tenant-gold-bright: #9B754F; --tenant-gold-soft: #D5B995; --tenant-selection-bg: rgba(2, 163, 192, 0.18); --tenant-selection-text: #1D3267; /* --------------------------------------------------------- Backward Compatibility --------------------------------------------------------- */ --bg-primary: var(--tenant-bg); --bg-surface: var(--tenant-surface); --bg-elevated: var(--tenant-surface-elevated); --bg-surface-hover: var(--tenant-surface-hover); --border-color: var(--tenant-border); --border-focus: var(--tenant-border-focus); --text-primary: var(--tenant-text-primary); --text-muted: var(--tenant-desc-color); --primary-color: var(--tenant-primary); --accent-color: var(--tenant-gold); /* --------------------------------------------------------- Header --------------------------------------------------------- */ --header-bg: linear-gradient(135deg, #1D3267 0%, #1D8B9D 60%, #02A3C0 100%); --header-start: #1D3267; --header-mid: #1D8B9D; --header-end: #02A3C0; --header-title-color: #F5FFFF; --header-clock-color: #FFFFFF; --header-date-color: rgba(245, 255, 255, 0.78); --header-hijri-color: #F0D4B0; --header-location-color: #FFFFFF; --calligraphy-color: #F0D4B0; --header-calligraphy-color: #F0D4B0; --footer-bg: linear-gradient(135deg, #1D3267 0%, #1D8B9D 60%, #02A3C0 100%); /* --------------------------------------------------------- Prayer Times --------------------------------------------------------- */ --prayer-card-bg: linear-gradient(145deg, #FFFFFF, #F2FAFB); --prayer-card-border: rgba(29, 139, 157, 0.20); --prayer-row-bg: rgba(29, 139, 157, 0.045); --prayer-row-border: rgba(29, 139, 157, 0.12); /* Active Prayer */ --active-prayer-bg-start: rgba(2, 163, 192, 0.13); --active-prayer-bg-end: rgba(2, 163, 192, 0.025); --active-prayer-bg: linear-gradient(90deg, rgba(2, 163, 192, 0.15) 0%, rgba(29, 139, 157, 0.04) 60%, transparent 100%); --active-prayer-border: #02A3C0; --active-prayer-glow: 0 0 18px rgba(2, 163, 192, 0.22); --active-prayer-text: #08788A; --active-prayer-muted: #57727C; --active-prayer-time: #1D3267; /* --------------------------------------------------------- Adhan / Iqamah --------------------------------------------------------- */ --adhan-time-color: #1D3267; --iqamah-time-color: #08788A; --adhan-color: #3C5964; --iqamah-color: #02A3C0; --countdown-badge-bg: linear-gradient(135deg, #1D3267, #1D8B9D); --countdown-badge-text: #FFFFFF; --highlight-iqamah-bg: rgba(2, 163, 192, 0.07); --active-iqamah-bg: rgba(2, 163, 192, 0.11); /* --------------------------------------------------------- Carousel & Cards --------------------------------------------------------- */ --wisdom-card-bg: linear-gradient(145deg, #FFFFFF, #F1F9FA); --wisdom-card-border: rgba(180, 145, 107, 0.30); --wisdom-arabic-color: #9B754F; --wisdom-trans-color: #1D3267; --wisdom-tag-color: #08788A; --notice-card-bg: linear-gradient(145deg, #FFFFFF, #F4FAFB); --notice-body-color: #233D4A; --notice-janaza-bg: linear-gradient(150deg, rgba(124, 58, 237, 0.08), rgba(167, 139, 250, 0.04)); --notice-janaza-border: rgba(124, 58, 237, 0.25); /* --------------------------------------------------------- Ramadan --------------------------------------------------------- */ --ramadan-card-bg: #FFFFFF; --ramadan-card-border: #C9E2E7; --ramadan-panel-bg: linear-gradient(165deg, #FFFFFF 0%, #F0FAFC 100%); --ramadan-panel-border: rgba(29, 139, 157, 0.20); --ramadan-title-color: #1D3267; --ramadan-sub-color: #5C737C; --ramadan-accent-gold: #B4916B; --ramadan-countdown-bg: linear-gradient(165deg, #EDF9FB, #FFFFFF); --ramadan-countdown-border: #02A3C0; --ramadan-countdown-label: #08788A; --ramadan-time-color: #1D3267; --ramadan-unit-bg: #FFFFFF; --ramadan-unit-border: rgba(29, 139, 157, 0.18); --ramadan-unit-val: #1D3267; --ramadan-unit-lbl: #9B754F; --ramadan-unit-sep: #02A3C0; --sahoor-box-bg: rgba(29, 139, 157, 0.06); --iftar-box-bg: linear-gradient(135deg, rgba(180, 145, 107, 0.16), rgba(2, 163, 192, 0.07)); --ramadan-pill-bg: #F5FAFB; --ramadan-pill-border: rgba(29, 139, 157, 0.15); --ramadan-pill-lbl: #647D86; --ramadan-pill-val: #1D3267; --ramadan-pill-hl-bg: linear-gradient(135deg, rgba(2, 163, 192, 0.10), rgba(29, 139, 157, 0.05)); --ramadan-pill-hl-border: #02A3C0; --ramadan-pill-hl-lbl: #08788A; --ramadan-pill-hl-val: #1D3267; --ramadan-dua-bg: linear-gradient(165deg, #FFFFFF, #F2FAFB); --ramadan-dua-border: rgba(180, 145, 107, 0.25); --ramadan-dua-arabic-color: #9B754F; --ramadan-dua-tag-color: #08788A; --ramadan-dua-text-color: #233D4A; --ramadan-table-bg: #FFFFFF; --ramadan-subpage-header-bg: linear-gradient(135deg, #F0FAFC, #FFFFFF); --ramadan-subpage-header-border: rgba(29, 139, 157, 0.18); --ramadan-subpage-header-title: #1D3267; --ramadan-subpage-header-sub: #627B84; --ramadan-table-wrap-bg: #F8FCFD; --ramadan-table-hdr-bg: linear-gradient(135deg, #E7F5F7, #F4FBFC); --ramadan-table-hdr-border: rgba(29, 139, 157, 0.18); --ramadan-table-hdr-color: #1D3267; --ramadan-row-border: rgba(29, 139, 157, 0.10); --ramadan-row-even-bg: rgba(29, 139, 157, 0.018); --ramadan-row-odd-bg: rgba(29, 139, 157, 0.035); --ramadan-row-highlight: rgba(2, 163, 192, 0.10); --ramadan-crescent-bg: radial-gradient(circle at 35% 35%, rgba(180, 145, 107, 0.18), rgba(2, 163, 192, 0.07)); --ramadan-crescent-border: #B4916B; --ramadan-crescent-color: #9B754F; /* --------------------------------------------------------- Special Events --------------------------------------------------------- */ --special-card-bg: #FFFFFF; --special-card-border: #C9E2E7; --special-header-title-color: #1D3267; --special-title-color: #1D3267; --special-event-title-color: #08788A; --special-dua-color: #9B754F; --mens-box-bg: rgba(2, 163, 192, 0.055); --mens-border: rgba(2, 163, 192, 0.20); --mens-title-color: #08788A; --womens-box-bg: rgba(180, 145, 107, 0.06); --womens-border: rgba(180, 145, 107, 0.25); --womens-title-color: #9B754F; --special-time-value-color: #1D3267; --special-guide-bg: #F5FAFB; --special-guide-title-color: #9B754F; --special-guide-text-color: #5D737C; --special-date-badge-bg: rgba(2, 163, 192, 0.09); --special-date-badge-color: #08788A; --qurban-price-color: #138A63; /* --------------------------------------------------------- Indicators --------------------------------------------------------- */ --dot-active-bg: #02A3C0; --dot-active-color: #02A3C0; --dot-active-glow: 0 0 10px rgba(2, 163, 192, 0.40); --dot-inactive-bg: rgba(29, 139, 157, 0.18); --dot-inactive-color: #1D8B9D; --dot-inactive-border: rgba(29, 139, 157, 0.25); --dot-size: 9px; --dot-active-width: 28px; --gold-glow: 0 0 18px rgba(180, 145, 107, 0.25); /* Slide Rotation Timing Bar & Counter */ --slide-progress-start: #1D8B9D; --slide-progress-end: #02A3C0; --slide-progress-track-bg: rgba(29, 139, 157, 0.15); --slide-progress-height: 6px; --slide-progress-show: block; --slide-progress-glow: 0 0 10px rgba(2, 163, 192, 0.4); --slide-counter-bg: #E7F5F7; --slide-counter-color: #08788A; --slide-counter-border: rgba(29, 139, 157, 0.35); --slide-counter-show: inline-flex; /* --------------------------------------------------------- Semantic Colors --------------------------------------------------------- */ --color-success: #138A63; --color-success-soft: #54B995; --color-warning: #A66D22; --color-warning-soft: #C99750; --color-danger: #D64F4F; --color-danger-soft: #E88787; --color-info: #087E9A; --color-info-soft: #45B7CB; --color-neutral: #718992; /* --------------------------------------------------------- WOW / Dynamic Effects --------------------------------------------------------- */ --ambient-glow: radial-gradient(circle at 80% 5%, rgba(2, 163, 192, 0.10), transparent 32%); --surface-glow: 0 8px 28px rgba(29, 50, 103, 0.07); --card-shadow: 0 8px 25px rgba(29, 50, 103, 0.08); --card-hover-shadow: 0 15px 40px rgba(2, 163, 192, 0.13); --focus-ring: 0 0 0 3px rgba(2, 163, 192, 0.18); --premium-gradient: linear-gradient(135deg, #1D3267 0%, #1D8B9D 55%, #02A3C0 100%); --premium-gold-gradient: linear-gradient(135deg, #9B754F, #B4916B, #D5B995); /* Section 13: Forms & Documents Hub Tokens */ --forms-card-bg: #FFFFFF; --forms-card-border: #E0E7FF; --forms-title-color: #0F172A; --forms-desc-color: #475569; --forms-badge-color: #2563EB; --forms-badge-bg: #EFF6FF; --forms-deadline-color: #DC2626; --forms-deadline-bg: #FEF2F2; --forms-checklist-bg: #F8FAFC; --forms-checklist-border: #E0E7FF; --forms-qr-bg: #FFFFFF; --forms-qr-border: #E0E7FF; --forms-btn-bg: #2563EB; --forms-btn-color: #FFFFFF; --forms-progress-start: #2563EB; --forms-progress-end: #3B82F6; /* Section 15: Social Media & Community Channels Tokens */ --social-card-bg: #FFFFFF; --social-card-border: #E0E7FF; --social-title-color: #0F172A; --social-desc-color: #475569; --social-btn-bg: #2563EB; --social-btn-color: #FFFFFF; --social-chip-bg: #EFF6FF; --social-chip-border: #2563EB; --social-chip-color: #0F172A; --social-tv-bg: #F0F9FF; --social-tv-border: #2563EB; /* Dynamic Section & Border Design Tokens */ --sidebar-bg: linear-gradient(180deg, #FFFFFF 0%, #F5FFFF 100%); --prayer-panel-bg: #FFFFFF; --masjid-card-bg: var(--prayer-card-bg, var(--tenant-surface)); --masjid-card-border: var(--prayer-card-border, var(--tenant-border)); --countdown-card-bg: var(--prayer-panel-bg, var(--tenant-surface)); --countdown-card-border: var(--prayer-card-border, var(--tenant-border)); --qr-card-bg: var(--prayer-panel-bg, var(--tenant-surface)); --qr-card-border: var(--prayer-card-border, var(--tenant-border)); --aux-card-bg: var(--prayer-card-bg, var(--tenant-surface)); --aux-card-border: var(--prayer-card-border, var(--tenant-border)); --wisdom-quran-border: rgba(29, 139, 157, 0.35); --wisdom-hadith-border: #C9E2E7; --wisdom-badge-bg: rgba(29, 139, 157, 0.12); --wisdom-badge-border: rgba(29, 139, 157, 0.35); --wisdom-hadith-badge-bg: rgba(0, 0, 0, 0.05); --wisdom-hadith-badge-border: #C9E2E7; --wisdom-hadith-badge-color: #1D8B9D; --wisdom-hadith-ref-bg: #F5FFFF; --wisdom-hadith-ref-border: #C9E2E7; --wisdom-hadith-ref-color: #0284C7; --masjid-loc-pill-bg: rgba(29, 139, 157, 0.10); --masjid-loc-pill-border: rgba(29, 139, 157, 0.3); --masjid-loc-pill-text: #0284C7; --hero-status-pill-bg: rgba(29, 139, 157, 0.12); --hero-status-pill-border: rgba(29, 139, 157, 0.35); --hero-status-pill-color: #1D8B9D; --hero-qr-badge-bg: rgba(29, 139, 157, 0.12); --hero-qr-badge-border: rgba(29, 139, 157, 0.3); --hero-qr-badge-color: #1D8B9D; --qurban-card-bg: var(--tenant-surface); --qurban-card-border: var(--tenant-border); } /* ============================================================================== 9. MADINAH GREEN & MOONLIGHT (madinah-green) ============================================================================== */ [data-theme="madinah-green"] { /* ========================================================= MADINAH GREEN & MOONLIGHT Premium Dark Masjid Digital Dashboard ========================================================= */ /* --------------------------------------------------------- Core Palette --------------------------------------------------------- */ --color-navy: #07543F; --color-teal: #087F5B; --color-cyan: #10A875; --color-white: #F5F7F4; --color-sand: #C9A84E; /* --------------------------------------------------------- Surface & Canvas --------------------------------------------------------- */ --tenant-bg: #061A14; --tenant-surface: #0B2A20; --tenant-surface-hover: #10382A; --tenant-surface-elevated: #154333; --tenant-surface-strong: #1A503D; --tenant-border: #285B4A; --tenant-border-focus: #10A875; --tenant-border-subtle: rgba(2, 163, 192, 0.20); --tenant-bg-input: #04150F; --tenant-input-text: #F5F7F4; /* --------------------------------------------------------- Typography --------------------------------------------------------- */ --tenant-text-primary: #F5F7F4; --tenant-desc-color: #B4C9BE; --tenant-text-muted: #78978A; --text-inverse: #061A14; /* --------------------------------------------------------- Brand --------------------------------------------------------- */ --tenant-primary: #087F5B; --tenant-primary-light: #10A875; --tenant-gold: #C9A84E; --tenant-gold-bright: #E4C86A; --tenant-gold-soft: #F2DEA0; --tenant-selection-bg: rgba(2, 163, 192, 0.28); --tenant-selection-text: #FFFFFF; /* --------------------------------------------------------- Backward Compatibility --------------------------------------------------------- */ --bg-primary: var(--tenant-bg); --bg-surface: var(--tenant-surface); --bg-elevated: var(--tenant-surface-elevated); --bg-surface-hover: var(--tenant-surface-hover); --border-color: var(--tenant-border); --border-focus: var(--tenant-border-focus); --text-primary: var(--tenant-text-primary); --text-muted: var(--tenant-desc-color); --primary-color: var(--tenant-primary); --accent-color: var(--tenant-gold); /* --------------------------------------------------------- Header & Top Bar --------------------------------------------------------- */ --header-bg: linear-gradient(135deg, #061A14 0%, #07543F 50%, #087F5B 100%); --header-start: #061A14; --header-mid: #07543F; --header-end: #087F5B; --header-title-color: #F5F7F4; --header-clock-color: #F5F7F4; --header-date-color: #B4C9BE; --header-hijri-color: #E4C86A; --header-location-color: #10A875; --calligraphy-color: #E4C86A; --header-calligraphy-color: #E4C86A; --footer-bg: linear-gradient(135deg, #061A14 0%, #10382A 45%, #07543F 100%); /* --------------------------------------------------------- Prayer Times --------------------------------------------------------- */ --prayer-card-bg: linear-gradient(145deg, rgba(18, 45, 77, 0.92), rgba(11, 27, 53, 0.96)); --prayer-card-border: rgba(2, 163, 192, 0.28); --prayer-row-bg: rgba(29, 50, 103, 0.30); --prayer-row-border: rgba(127, 163, 175, 0.15); /* Active Prayer */ --active-prayer-bg-start: rgba(2, 163, 192, 0.24); --active-prayer-bg-end: rgba(29, 139, 157, 0.04); --active-prayer-bg: linear-gradient(90deg, rgba(2, 163, 192, 0.26) 0%, rgba(29, 139, 157, 0.08) 55%, transparent 100%); --active-prayer-border: #10A875; --active-prayer-glow: 0 0 20px rgba(2, 163, 192, 0.45), 0 0 45px rgba(29, 139, 157, 0.18); --active-prayer-text: #72E0C1; --active-prayer-muted: #B4C9BE; --active-prayer-time: #F5F7F4; /* --------------------------------------------------------- Adhan / Iqamah --------------------------------------------------------- */ --adhan-time-color: #F5F7F4; --iqamah-time-color: #72E0C1; --adhan-color: #D9EDF0; --iqamah-color: #10A875; --countdown-badge-bg: linear-gradient(135deg, #10A875, #087F5B); --countdown-badge-text: #F5F7F4; --highlight-iqamah-bg: rgba(2, 163, 192, 0.08); --active-iqamah-bg: rgba(2, 163, 192, 0.16); /* --------------------------------------------------------- Carousel & Cards --------------------------------------------------------- */ --wisdom-card-bg: linear-gradient(145deg, #10382A, #0B2A20); --wisdom-card-border: rgba(180, 145, 107, 0.30); --wisdom-arabic-color: #E4C86A; --wisdom-trans-color: #F5F7F4; --wisdom-tag-color: #10A875; --notice-card-bg: linear-gradient(145deg, #10382A, #0B2A20); --notice-body-color: #F5F7F4; --notice-janaza-bg: linear-gradient(150deg, rgba(91, 33, 182, 0.18), rgba(30, 20, 70, 0.40)); --notice-janaza-border: rgba(167, 139, 250, 0.50); /* --------------------------------------------------------- Ramadan --------------------------------------------------------- */ --ramadan-card-bg: #0B2A20; --ramadan-card-border: #285B4A; --ramadan-panel-bg: linear-gradient(165deg, rgba(18, 45, 77, 0.96), rgba(7, 18, 37, 0.98)); --ramadan-panel-border: rgba(2, 163, 192, 0.30); --ramadan-title-color: #F5F7F4; --ramadan-sub-color: #B4C9BE; --ramadan-accent-gold: #C9A84E; --ramadan-countdown-bg: linear-gradient(165deg, rgba(29, 139, 157, 0.20), rgba(7, 18, 37, 0.90)); --ramadan-countdown-border: #10A875; --ramadan-countdown-label: #72E0C1; --ramadan-time-color: #F5F7F4; --ramadan-unit-bg: rgba(7, 18, 37, 0.80); --ramadan-unit-border: rgba(2, 163, 192, 0.25); --ramadan-unit-val: #F5F7F4; --ramadan-unit-lbl: #C9A84E; --ramadan-unit-sep: #10A875; --sahoor-box-bg: rgba(29, 139, 157, 0.12); --iftar-box-bg: linear-gradient(135deg, rgba(180, 145, 107, 0.24), rgba(2, 163, 192, 0.10)); --ramadan-pill-bg: rgba(7, 18, 37, 0.72); --ramadan-pill-border: rgba(2, 163, 192, 0.20); --ramadan-pill-lbl: #91B5A8; --ramadan-pill-val: #F5F7F4; --ramadan-pill-hl-bg: linear-gradient(135deg, rgba(2, 163, 192, 0.20), rgba(29, 139, 157, 0.10)); --ramadan-pill-hl-border: #10A875; --ramadan-pill-hl-lbl: #72E0C1; --ramadan-pill-hl-val: #FFFFFF; --ramadan-dua-bg: linear-gradient(165deg, rgba(18, 45, 77, 0.90), rgba(7, 18, 37, 0.96)); --ramadan-dua-border: rgba(180, 145, 107, 0.30); --ramadan-dua-arabic-color: #E4C86A; --ramadan-dua-tag-color: #10A875; --ramadan-dua-text-color: #F5F7F4; --ramadan-table-bg: #0B2A20; --ramadan-subpage-header-bg: linear-gradient(135deg, rgba(18, 45, 77, 0.95), rgba(7, 18, 37, 0.98)); --ramadan-subpage-header-border: rgba(2, 163, 192, 0.25); --ramadan-subpage-header-title: #F5F7F4; --ramadan-subpage-header-sub: #91B5A8; --ramadan-table-wrap-bg: rgba(7, 18, 37, 0.85); --ramadan-table-hdr-bg: linear-gradient(135deg, #1A503D, #10382A); --ramadan-table-hdr-border: rgba(2, 163, 192, 0.25); --ramadan-table-hdr-color: #72E0C1; --ramadan-row-border: rgba(127, 163, 175, 0.14); --ramadan-row-even-bg: rgba(255, 255, 255, 0.015); --ramadan-row-odd-bg: rgba(255, 255, 255, 0.035); --ramadan-row-highlight: rgba(2, 163, 192, 0.15); --ramadan-crescent-bg: radial-gradient(circle at 35% 35%, rgba(180, 145, 107, 0.22), rgba(2, 163, 192, 0.10)); --ramadan-crescent-border: #C9A84E; --ramadan-crescent-color: #E4C86A; /* --------------------------------------------------------- Special Events --------------------------------------------------------- */ --special-card-bg: #0B2A20; --special-card-border: #285B4A; --special-header-title-color: #F5F7F4; --special-title-color: #F5F7F4; --special-event-title-color: #72E0C1; --special-dua-color: #E4C86A; --mens-box-bg: rgba(29, 139, 157, 0.10); --mens-border: rgba(2, 163, 192, 0.25); --mens-title-color: #72E0C1; --womens-box-bg: rgba(180, 145, 107, 0.08); --womens-border: rgba(180, 145, 107, 0.30); --womens-title-color: #E4C86A; --special-time-value-color: #F5F7F4; --special-guide-bg: rgba(7, 18, 37, 0.65); --special-guide-title-color: #E4C86A; --special-guide-text-color: #9AB8AD; --special-date-badge-bg: rgba(2, 163, 192, 0.15); --special-date-badge-color: #72E0C1; --qurban-price-color: #6EE7B4; /* --------------------------------------------------------- Indicators & Glows --------------------------------------------------------- */ --dot-active-bg: #10A875; --dot-active-color: #10A875; --dot-active-glow: 0 0 12px rgba(2, 163, 192, 0.70), 0 0 28px rgba(2, 163, 192, 0.25); --dot-inactive-bg: rgba(29, 139, 157, 0.30); --dot-inactive-color: #087F5B; --dot-inactive-border: rgba(29, 139, 157, 0.35); --dot-size: 9px; --dot-active-width: 28px; --gold-glow: 0 0 18px rgba(180, 145, 107, 0.45); /* Slide Rotation Timing Bar & Counter */ --slide-progress-start: #10A875; --slide-progress-end: #087F5B; --slide-progress-track-bg: rgba(29, 139, 157, 0.25); --slide-progress-height: 6px; --slide-progress-show: block; --slide-progress-glow: 0 0 10px rgba(2, 163, 192, 0.7); --slide-counter-bg: #061A14; --slide-counter-color: #72E0C1; --slide-counter-border: #1A503D; --slide-counter-show: inline-flex; /* --------------------------------------------------------- Semantic Colors --------------------------------------------------------- */ --color-success: #42D6A4; --color-success-soft: #8BE8C5; --color-warning: #E8B86A; --color-warning-soft: #F2D19A; --color-danger: #F07878; --color-danger-soft: #F6AAAA; --color-info: #5CC8E8; --color-info-soft: #9BE3F4; --color-neutral: #94A9B3; /* --------------------------------------------------------- WOW / Dynamic Effects --------------------------------------------------------- */ --ambient-glow: radial-gradient(circle at 20% 10%, rgba(2, 163, 192, 0.12), transparent 35%); --surface-glow: 0 8px 35px rgba(2, 163, 192, 0.08); --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); --card-hover-shadow: 0 16px 45px rgba(2, 163, 192, 0.14); --focus-ring: 0 0 0 3px rgba(2, 163, 192, 0.22); --premium-gradient: linear-gradient(135deg, #07543F 0%, #087F5B 55%, #10A875 100%); --premium-gold-gradient: linear-gradient(135deg, #8F6D4E, #C9A84E, #E4C86A); /* Section 13: Forms & Documents Hub Tokens */ --forms-card-bg: #0B3322; --forms-card-border: #1B5E40; --forms-title-color: #F0FDF4; --forms-desc-color: #BBF7D0; --forms-badge-color: #4ADE80; --forms-badge-bg: #072216; --forms-deadline-color: #F87171; --forms-deadline-bg: #3F1515; --forms-checklist-bg: #03140C; --forms-checklist-border: #1B5E40; --forms-qr-bg: #FFFFFF; --forms-qr-border: #1B5E40; --forms-btn-bg: #16A34A; --forms-btn-color: #FFFFFF; --forms-progress-start: #4ADE80; --forms-progress-end: #86EFAC; /* Section 15: Social Media & Community Channels Tokens */ --social-card-bg: #0B3322; --social-card-border: #1B5E40; --social-title-color: #F0FDF4; --social-desc-color: #BBF7D0; --social-btn-bg: #16A34A; --social-btn-color: #FFFFFF; --social-chip-bg: #072216; --social-chip-border: #4ADE80; --social-chip-color: #F0FDF4; --social-tv-bg: #0B3322; --social-tv-border: #4ADE80; /* Dynamic Section & Border Design Tokens */ --sidebar-bg: linear-gradient(180deg, rgba(16, 56, 42, 0.92) 0%, rgba(6, 26, 20, 0.95) 100%); --prayer-panel-bg: linear-gradient(145deg, rgba(16, 56, 42, 0.92), rgba(6, 26, 20, 0.95)); --masjid-card-bg: var(--prayer-card-bg, var(--tenant-surface)); --masjid-card-border: var(--prayer-card-border, var(--tenant-border)); --countdown-card-bg: var(--prayer-panel-bg, var(--tenant-surface)); --countdown-card-border: var(--prayer-card-border, var(--tenant-border)); --qr-card-bg: var(--prayer-panel-bg, var(--tenant-surface)); --qr-card-border: var(--prayer-card-border, var(--tenant-border)); --aux-card-bg: var(--prayer-card-bg, var(--tenant-surface)); --aux-card-border: var(--prayer-card-border, var(--tenant-border)); --wisdom-quran-border: rgba(201, 168, 78, 0.4); --wisdom-hadith-border: #285B4A; --wisdom-badge-bg: rgba(201, 168, 78, 0.18); --wisdom-badge-border: rgba(201, 168, 78, 0.45); --wisdom-hadith-badge-bg: rgba(8, 127, 91, 0.22); --wisdom-hadith-badge-border: #285B4A; --wisdom-hadith-badge-color: #34D399; --wisdom-hadith-ref-bg: rgba(11, 42, 32, 0.7); --wisdom-hadith-ref-border: #285B4A; --wisdom-hadith-ref-color: #86EFAC; --masjid-loc-pill-bg: rgba(52, 211, 153, 0.12); --masjid-loc-pill-border: rgba(52, 211, 153, 0.35); --masjid-loc-pill-text: #86EFAC; --hero-status-pill-bg: rgba(52, 211, 153, 0.15); --hero-status-pill-border: rgba(52, 211, 153, 0.45); --hero-status-pill-color: #34D399; --hero-qr-badge-bg: rgba(52, 211, 153, 0.15); --hero-qr-badge-border: rgba(52, 211, 153, 0.35); --hero-qr-badge-color: #34D399; --qurban-card-bg: var(--tenant-surface); --qurban-card-border: var(--tenant-border); } /* ============================================================================== 10. NOOR BLACK & CHAMPAGNE (noor-champagne) ============================================================================== */ [data-theme="noor-champagne"] { /* ========================================================= NOOR BLACK & CHAMPAGNE Premium Dark Masjid Digital Dashboard ========================================================= */ /* --------------------------------------------------------- Core Palette --------------------------------------------------------- */ --color-navy: #7A5B27; --color-teal: #A8833D; --color-cyan: #D6B56A; --color-white: #FAF8F2; --color-sand: #D6B56A; /* --------------------------------------------------------- Surface & Canvas --------------------------------------------------------- */ --tenant-bg: #090909; --tenant-surface: #141414; --tenant-surface-hover: #1D1D1D; --tenant-surface-elevated: #242424; --tenant-surface-strong: #303030; --tenant-border: #3A3A3A; --tenant-border-focus: #D6B56A; --tenant-border-subtle: rgba(214, 181, 106, 0.20); --tenant-bg-input: #060606; --tenant-input-text: #FAF8F2; /* --------------------------------------------------------- Typography --------------------------------------------------------- */ --tenant-text-primary: #FAF8F2; --tenant-desc-color: #C7C2B6; --tenant-text-muted: #918C82; --text-inverse: #090909; /* --------------------------------------------------------- Brand --------------------------------------------------------- */ --tenant-primary: #A8833D; --tenant-primary-light: #D6B56A; --tenant-gold: #D6B56A; --tenant-gold-bright: #F0D99B; --tenant-gold-soft: #F7EAC5; --tenant-selection-bg: rgba(214, 181, 106, 0.28); --tenant-selection-text: #FFFFFF; /* --------------------------------------------------------- Backward Compatibility --------------------------------------------------------- */ --bg-primary: var(--tenant-bg); --bg-surface: var(--tenant-surface); --bg-elevated: var(--tenant-surface-elevated); --bg-surface-hover: var(--tenant-surface-hover); --border-color: var(--tenant-border); --border-focus: var(--tenant-border-focus); --text-primary: var(--tenant-text-primary); --text-muted: var(--tenant-desc-color); --primary-color: var(--tenant-primary); --accent-color: var(--tenant-gold); /* --------------------------------------------------------- Header & Top Bar --------------------------------------------------------- */ --header-bg: linear-gradient(135deg, #090909 0%, #7A5B27 50%, #A8833D 100%); --header-start: #090909; --header-mid: #7A5B27; --header-end: #A8833D; --header-title-color: #FAF8F2; --header-clock-color: #FAF8F2; --header-date-color: #C7C2B6; --header-hijri-color: #F0D99B; --header-location-color: #D6B56A; --calligraphy-color: #F0D99B; --header-calligraphy-color: #F0D99B; --footer-bg: linear-gradient(135deg, #090909 0%, #1D1D1D 45%, #7A5B27 100%); /* --------------------------------------------------------- Prayer Times --------------------------------------------------------- */ --prayer-card-bg: linear-gradient(145deg, rgba(29, 29, 29, 0.92), rgba(20, 20, 20, 0.96)); --prayer-card-border: rgba(214, 181, 106, 0.28); --prayer-row-bg: rgba(122, 91, 39, 0.30); --prayer-row-border: rgba(199, 194, 182, 0.15); /* Active Prayer */ --active-prayer-bg-start: rgba(214, 181, 106, 0.24); --active-prayer-bg-end: rgba(168, 131, 61, 0.04); --active-prayer-bg: linear-gradient(90deg, rgba(214, 181, 106, 0.26) 0%, rgba(168, 131, 61, 0.08) 55%, transparent 100%); --active-prayer-border: #D6B56A; --active-prayer-glow: 0 0 20px rgba(214, 181, 106, 0.45), 0 0 45px rgba(168, 131, 61, 0.18); --active-prayer-text: #F2DFAF; --active-prayer-muted: #C7C2B6; --active-prayer-time: #FAF8F2; /* --------------------------------------------------------- Adhan / Iqamah --------------------------------------------------------- */ --adhan-time-color: #FAF8F2; --iqamah-time-color: #F2DFAF; --adhan-color: #D9EDF0; --iqamah-color: #D6B56A; --countdown-badge-bg: linear-gradient(135deg, #D6B56A, #A8833D); --countdown-badge-text: #FAF8F2; --highlight-iqamah-bg: rgba(214, 181, 106, 0.08); --active-iqamah-bg: rgba(214, 181, 106, 0.16); /* --------------------------------------------------------- Carousel & Cards --------------------------------------------------------- */ --wisdom-card-bg: linear-gradient(145deg, #1D1D1D, #141414); --wisdom-card-border: rgba(180, 145, 107, 0.30); --wisdom-arabic-color: #F0D99B; --wisdom-trans-color: #FAF8F2; --wisdom-tag-color: #D6B56A; --notice-card-bg: linear-gradient(145deg, #1D1D1D, #141414); --notice-body-color: #FAF8F2; --notice-janaza-bg: linear-gradient(150deg, rgba(91, 33, 182, 0.18), rgba(30, 20, 70, 0.40)); --notice-janaza-border: rgba(167, 139, 250, 0.50); /* --------------------------------------------------------- Ramadan --------------------------------------------------------- */ --ramadan-card-bg: #141414; --ramadan-card-border: #3A3A3A; --ramadan-panel-bg: linear-gradient(165deg, rgba(29, 29, 29, 0.96), rgba(15, 15, 15, 0.98)); --ramadan-panel-border: rgba(214, 181, 106, 0.30); --ramadan-title-color: #FAF8F2; --ramadan-sub-color: #C7C2B6; --ramadan-accent-gold: #D6B56A; --ramadan-countdown-bg: linear-gradient(165deg, rgba(168, 131, 61, 0.20), rgba(15, 15, 15, 0.90)); --ramadan-countdown-border: #D6B56A; --ramadan-countdown-label: #F2DFAF; --ramadan-time-color: #FAF8F2; --ramadan-unit-bg: rgba(15, 15, 15, 0.80); --ramadan-unit-border: rgba(214, 181, 106, 0.25); --ramadan-unit-val: #FAF8F2; --ramadan-unit-lbl: #D6B56A; --ramadan-unit-sep: #D6B56A; --sahoor-box-bg: rgba(168, 131, 61, 0.12); --iftar-box-bg: linear-gradient(135deg, rgba(180, 145, 107, 0.24), rgba(214, 181, 106, 0.10)); --ramadan-pill-bg: rgba(15, 15, 15, 0.72); --ramadan-pill-border: rgba(214, 181, 106, 0.20); --ramadan-pill-lbl: #B9B09F; --ramadan-pill-val: #FAF8F2; --ramadan-pill-hl-bg: linear-gradient(135deg, rgba(214, 181, 106, 0.20), rgba(29, 139, 157, 0.10)); --ramadan-pill-hl-border: #D6B56A; --ramadan-pill-hl-lbl: #F2DFAF; --ramadan-pill-hl-val: #FFFFFF; --ramadan-dua-bg: linear-gradient(165deg, rgba(29, 29, 29, 0.90), rgba(15, 15, 15, 0.96)); --ramadan-dua-border: rgba(180, 145, 107, 0.30); --ramadan-dua-arabic-color: #F0D99B; --ramadan-dua-tag-color: #D6B56A; --ramadan-dua-text-color: #FAF8F2; --ramadan-table-bg: #141414; --ramadan-subpage-header-bg: linear-gradient(135deg, rgba(29, 29, 29, 0.95), rgba(15, 15, 15, 0.98)); --ramadan-subpage-header-border: rgba(214, 181, 106, 0.25); --ramadan-subpage-header-title: #FAF8F2; --ramadan-subpage-header-sub: #B9B09F; --ramadan-table-wrap-bg: rgba(15, 15, 15, 0.85); --ramadan-table-hdr-bg: linear-gradient(135deg, #303030, #1D1D1D); --ramadan-table-hdr-border: rgba(214, 181, 106, 0.25); --ramadan-table-hdr-color: #F2DFAF; --ramadan-row-border: rgba(127, 163, 175, 0.14); --ramadan-row-even-bg: rgba(255, 255, 255, 0.015); --ramadan-row-odd-bg: rgba(255, 255, 255, 0.035); --ramadan-row-highlight: rgba(2, 163, 192, 0.15); --ramadan-crescent-bg: radial-gradient(circle at 35% 35%, rgba(180, 145, 107, 0.22), rgba(214, 181, 106, 0.10)); --ramadan-crescent-border: #D6B56A; --ramadan-crescent-color: #F0D99B; /* --------------------------------------------------------- Special Events --------------------------------------------------------- */ --special-card-bg: #141414; --special-card-border: #3A3A3A; --special-header-title-color: #FAF8F2; --special-title-color: #FAF8F2; --special-event-title-color: #F2DFAF; --special-dua-color: #F0D99B; --mens-box-bg: rgba(29, 139, 157, 0.10); --mens-border: rgba(214, 181, 106, 0.25); --mens-title-color: #F2DFAF; --womens-box-bg: rgba(180, 145, 107, 0.08); --womens-border: rgba(180, 145, 107, 0.30); --womens-title-color: #F0D99B; --special-time-value-color: #FAF8F2; --special-guide-bg: rgba(7, 18, 37, 0.65); --special-guide-title-color: #F0D99B; --special-guide-text-color: #B4AA99; --special-date-badge-bg: rgba(2, 163, 192, 0.15); --special-date-badge-color: #F2DFAF; --qurban-price-color: #73D6A8; /* --------------------------------------------------------- Indicators & Glows --------------------------------------------------------- */ --dot-active-bg: #D6B56A; --dot-active-color: #D6B56A; --dot-active-glow: 0 0 12px rgba(2, 163, 192, 0.70), 0 0 28px rgba(214, 181, 106, 0.25); --dot-inactive-bg: rgba(29, 139, 157, 0.30); --dot-inactive-color: #A8833D; --dot-inactive-border: rgba(29, 139, 157, 0.35); --dot-size: 9px; --dot-active-width: 28px; --gold-glow: 0 0 18px rgba(180, 145, 107, 0.45); /* Slide Rotation Timing Bar & Counter */ --slide-progress-start: #D6B56A; --slide-progress-end: #A8833D; --slide-progress-track-bg: rgba(29, 139, 157, 0.25); --slide-progress-height: 6px; --slide-progress-show: block; --slide-progress-glow: 0 0 10px rgba(2, 163, 192, 0.7); --slide-counter-bg: #090909; --slide-counter-color: #F2DFAF; --slide-counter-border: #303030; --slide-counter-show: inline-flex; /* --------------------------------------------------------- Semantic Colors --------------------------------------------------------- */ --color-success: #42D6A4; --color-success-soft: #8BE8C5; --color-warning: #E8B86A; --color-warning-soft: #F2D19A; --color-danger: #F07878; --color-danger-soft: #F6AAAA; --color-info: #5CC8E8; --color-info-soft: #9BE3F4; --color-neutral: #94A9B3; /* --------------------------------------------------------- WOW / Dynamic Effects --------------------------------------------------------- */ --ambient-glow: radial-gradient(circle at 20% 10%, rgba(2, 163, 192, 0.12), transparent 35%); --surface-glow: 0 8px 35px rgba(214, 181, 106, 0.08); --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); --card-hover-shadow: 0 16px 45px rgba(2, 163, 192, 0.14); --focus-ring: 0 0 0 3px rgba(2, 163, 192, 0.22); --premium-gradient: linear-gradient(135deg, #7A5B27 0%, #A8833D 55%, #D6B56A 100%); --premium-gold-gradient: linear-gradient(135deg, #8F6D4E, #D6B56A, #F0D99B); /* Section 13: Forms & Documents Hub Tokens */ --forms-card-bg: #FFFFFF; --forms-card-border: #E5E0D8; --forms-title-color: #262018; --forms-desc-color: #6B5E50; --forms-badge-color: #B45309; --forms-badge-bg: #FEF3C7; --forms-deadline-color: #DC2626; --forms-deadline-bg: #FEF2F2; --forms-checklist-bg: #FAF7F2; --forms-checklist-border: #E5E0D8; --forms-qr-bg: #FFFFFF; --forms-qr-border: #E5E0D8; --forms-btn-bg: #D97706; --forms-btn-color: #FFFFFF; --forms-progress-start: #D97706; --forms-progress-end: #F59E0B; /* Section 15: Social Media & Community Channels Tokens */ --social-card-bg: #FFFFFF; --social-card-border: #E5E0D8; --social-title-color: #262018; --social-desc-color: #6B5E50; --social-btn-bg: #D97706; --social-btn-color: #FFFFFF; --social-chip-bg: #FEF3C7; --social-chip-border: #B45309; --social-chip-color: #262018; --social-tv-bg: #FFFBEB; --social-tv-border: #D97706; /* Dynamic Section & Border Design Tokens */ --sidebar-bg: linear-gradient(180deg, rgba(29, 29, 29, 0.92) 0%, rgba(9, 9, 9, 0.95) 100%); --prayer-panel-bg: linear-gradient(145deg, rgba(29, 29, 29, 0.92), rgba(9, 9, 9, 0.95)); --masjid-card-bg: var(--prayer-card-bg, var(--tenant-surface)); --masjid-card-border: var(--prayer-card-border, var(--tenant-border)); --countdown-card-bg: var(--prayer-panel-bg, var(--tenant-surface)); --countdown-card-border: var(--prayer-card-border, var(--tenant-border)); --qr-card-bg: var(--prayer-panel-bg, var(--tenant-surface)); --qr-card-border: var(--prayer-card-border, var(--tenant-border)); --aux-card-bg: var(--prayer-card-bg, var(--tenant-surface)); --aux-card-border: var(--prayer-card-border, var(--tenant-border)); --wisdom-quran-border: rgba(214, 181, 106, 0.4); --wisdom-hadith-border: #3A3A3A; --wisdom-badge-bg: rgba(214, 181, 106, 0.18); --wisdom-badge-border: rgba(214, 181, 106, 0.45); --wisdom-hadith-badge-bg: rgba(168, 131, 61, 0.22); --wisdom-hadith-badge-border: #3A3A3A; --wisdom-hadith-badge-color: #D6B56A; --wisdom-hadith-ref-bg: rgba(20, 20, 20, 0.7); --wisdom-hadith-ref-border: #3A3A3A; --wisdom-hadith-ref-color: #D8B4FE; --masjid-loc-pill-bg: rgba(214, 181, 106, 0.12); --masjid-loc-pill-border: rgba(214, 181, 106, 0.35); --masjid-loc-pill-text: #E5D5AA; --hero-status-pill-bg: rgba(214, 181, 106, 0.15); --hero-status-pill-border: rgba(214, 181, 106, 0.45); --hero-status-pill-color: #D6B56A; --hero-qr-badge-bg: rgba(214, 181, 106, 0.15); --hero-qr-badge-border: rgba(214, 181, 106, 0.35); --hero-qr-badge-color: #D6B56A; --qurban-card-bg: var(--tenant-surface); --qurban-card-border: var(--tenant-border); } /* ============================================================================== 11. BURGUNDY & COPPER (burgundy-copper) ============================================================================== */ [data-theme="burgundy-copper"] { /* ========================================================= BURGUNDY & COPPER Premium Dark Masjid Digital Dashboard ========================================================= */ /* --------------------------------------------------------- Core Palette --------------------------------------------------------- */ --color-navy: #6D1726; --color-teal: #8F2435; --color-cyan: #D09A58; --color-white: #FFF8F0; --color-sand: #C98A4B; /* --------------------------------------------------------- Surface & Canvas --------------------------------------------------------- */ --tenant-bg: #170A0D; --tenant-surface: #281216; --tenant-surface-hover: #35191E; --tenant-surface-elevated: #421F25; --tenant-surface-strong: #52272D; --tenant-border: #63343A; --tenant-border-focus: #D09A58; --tenant-border-subtle: rgba(208, 154, 88, 0.20); --tenant-bg-input: #100608; --tenant-input-text: #FFF8F0; /* --------------------------------------------------------- Typography --------------------------------------------------------- */ --tenant-text-primary: #FFF8F0; --tenant-desc-color: #D5BFC0; --tenant-text-muted: #A88D90; --text-inverse: #170A0D; /* --------------------------------------------------------- Brand --------------------------------------------------------- */ --tenant-primary: #8F2435; --tenant-primary-light: #D09A58; --tenant-gold: #C98A4B; --tenant-gold-bright: #E2B273; --tenant-gold-soft: #F2D2A8; --tenant-selection-bg: rgba(208, 154, 88, 0.28); --tenant-selection-text: #FFFFFF; /* --------------------------------------------------------- Backward Compatibility --------------------------------------------------------- */ --bg-primary: var(--tenant-bg); --bg-surface: var(--tenant-surface); --bg-elevated: var(--tenant-surface-elevated); --bg-surface-hover: var(--tenant-surface-hover); --border-color: var(--tenant-border); --border-focus: var(--tenant-border-focus); --text-primary: var(--tenant-text-primary); --text-muted: var(--tenant-desc-color); --primary-color: var(--tenant-primary); --accent-color: var(--tenant-gold); /* --------------------------------------------------------- Header & Top Bar --------------------------------------------------------- */ --header-bg: linear-gradient(135deg, #170A0D 0%, #6D1726 50%, #8F2435 100%); --header-start: #170A0D; --header-mid: #6D1726; --header-end: #8F2435; --header-title-color: #FFF8F0; --header-clock-color: #FFF8F0; --header-date-color: #D5BFC0; --header-hijri-color: #E2B273; --header-location-color: #D09A58; --calligraphy-color: #E2B273; --header-calligraphy-color: #E2B273; --footer-bg: linear-gradient(135deg, #170A0D 0%, #35191E 45%, #6D1726 100%); /* --------------------------------------------------------- Prayer Times --------------------------------------------------------- */ --prayer-card-bg: linear-gradient(145deg, rgba(53, 25, 30, 0.92), rgba(40, 18, 22, 0.96)); --prayer-card-border: rgba(208, 154, 88, 0.28); --prayer-row-bg: rgba(109, 23, 38, 0.30); --prayer-row-border: rgba(213, 191, 192, 0.15); /* Active Prayer */ --active-prayer-bg-start: rgba(208, 154, 88, 0.24); --active-prayer-bg-end: rgba(143, 36, 53, 0.04); --active-prayer-bg: linear-gradient(90deg, rgba(208, 154, 88, 0.26) 0%, rgba(143, 36, 53, 0.08) 55%, transparent 100%); --active-prayer-border: #D09A58; --active-prayer-glow: 0 0 20px rgba(208, 154, 88, 0.45), 0 0 45px rgba(143, 36, 53, 0.18); --active-prayer-text: #F0B58A; --active-prayer-muted: #D5BFC0; --active-prayer-time: #FFF8F0; /* --------------------------------------------------------- Adhan / Iqamah --------------------------------------------------------- */ --adhan-time-color: #FFF8F0; --iqamah-time-color: #F0B58A; --adhan-color: #D9EDF0; --iqamah-color: #D09A58; --countdown-badge-bg: linear-gradient(135deg, #D09A58, #8F2435); --countdown-badge-text: #FFF8F0; --highlight-iqamah-bg: rgba(208, 154, 88, 0.08); --active-iqamah-bg: rgba(208, 154, 88, 0.16); /* --------------------------------------------------------- Carousel & Cards --------------------------------------------------------- */ --wisdom-card-bg: linear-gradient(145deg, #35191E, #281216); --wisdom-card-border: rgba(180, 145, 107, 0.30); --wisdom-arabic-color: #E2B273; --wisdom-trans-color: #FFF8F0; --wisdom-tag-color: #D09A58; --notice-card-bg: linear-gradient(145deg, #35191E, #281216); --notice-body-color: #FFF8F0; --notice-janaza-bg: linear-gradient(150deg, rgba(91, 33, 182, 0.18), rgba(30, 20, 70, 0.40)); --notice-janaza-border: rgba(167, 139, 250, 0.50); /* --------------------------------------------------------- Ramadan --------------------------------------------------------- */ --ramadan-card-bg: #281216; --ramadan-card-border: #63343A; --ramadan-panel-bg: linear-gradient(165deg, rgba(53, 25, 30, 0.96), rgba(23, 10, 13, 0.98)); --ramadan-panel-border: rgba(208, 154, 88, 0.30); --ramadan-title-color: #FFF8F0; --ramadan-sub-color: #D5BFC0; --ramadan-accent-gold: #C98A4B; --ramadan-countdown-bg: linear-gradient(165deg, rgba(143, 36, 53, 0.20), rgba(23, 10, 13, 0.90)); --ramadan-countdown-border: #D09A58; --ramadan-countdown-label: #F0B58A; --ramadan-time-color: #FFF8F0; --ramadan-unit-bg: rgba(23, 10, 13, 0.80); --ramadan-unit-border: rgba(208, 154, 88, 0.25); --ramadan-unit-val: #FFF8F0; --ramadan-unit-lbl: #C98A4B; --ramadan-unit-sep: #D09A58; --sahoor-box-bg: rgba(143, 36, 53, 0.12); --iftar-box-bg: linear-gradient(135deg, rgba(180, 145, 107, 0.24), rgba(208, 154, 88, 0.10)); --ramadan-pill-bg: rgba(23, 10, 13, 0.72); --ramadan-pill-border: rgba(208, 154, 88, 0.20); --ramadan-pill-lbl: #C7A7A8; --ramadan-pill-val: #FFF8F0; --ramadan-pill-hl-bg: linear-gradient(135deg, rgba(208, 154, 88, 0.20), rgba(29, 139, 157, 0.10)); --ramadan-pill-hl-border: #D09A58; --ramadan-pill-hl-lbl: #F0B58A; --ramadan-pill-hl-val: #FFFFFF; --ramadan-dua-bg: linear-gradient(165deg, rgba(53, 25, 30, 0.90), rgba(23, 10, 13, 0.96)); --ramadan-dua-border: rgba(180, 145, 107, 0.30); --ramadan-dua-arabic-color: #E2B273; --ramadan-dua-tag-color: #D09A58; --ramadan-dua-text-color: #FFF8F0; --ramadan-table-bg: #281216; --ramadan-subpage-header-bg: linear-gradient(135deg, rgba(53, 25, 30, 0.95), rgba(23, 10, 13, 0.98)); --ramadan-subpage-header-border: rgba(208, 154, 88, 0.25); --ramadan-subpage-header-title: #FFF8F0; --ramadan-subpage-header-sub: #C7A7A8; --ramadan-table-wrap-bg: rgba(23, 10, 13, 0.85); --ramadan-table-hdr-bg: linear-gradient(135deg, #52272D, #35191E); --ramadan-table-hdr-border: rgba(208, 154, 88, 0.25); --ramadan-table-hdr-color: #F0B58A; --ramadan-row-border: rgba(127, 163, 175, 0.14); --ramadan-row-even-bg: rgba(255, 255, 255, 0.015); --ramadan-row-odd-bg: rgba(255, 255, 255, 0.035); --ramadan-row-highlight: rgba(2, 163, 192, 0.15); --ramadan-crescent-bg: radial-gradient(circle at 35% 35%, rgba(180, 145, 107, 0.22), rgba(208, 154, 88, 0.10)); --ramadan-crescent-border: #C98A4B; --ramadan-crescent-color: #E2B273; /* --------------------------------------------------------- Special Events --------------------------------------------------------- */ --special-card-bg: #281216; --special-card-border: #63343A; --special-header-title-color: #FFF8F0; --special-title-color: #FFF8F0; --special-event-title-color: #F0B58A; --special-dua-color: #E2B273; --mens-box-bg: rgba(29, 139, 157, 0.10); --mens-border: rgba(208, 154, 88, 0.25); --mens-title-color: #F0B58A; --womens-box-bg: rgba(180, 145, 107, 0.08); --womens-border: rgba(180, 145, 107, 0.30); --womens-title-color: #E2B273; --special-time-value-color: #FFF8F0; --special-guide-bg: rgba(7, 18, 37, 0.65); --special-guide-title-color: #E2B273; --special-guide-text-color: #C3A5A7; --special-date-badge-bg: rgba(2, 163, 192, 0.15); --special-date-badge-color: #F0B58A; --qurban-price-color: #72D0A0; /* --------------------------------------------------------- Indicators & Glows --------------------------------------------------------- */ --dot-active-bg: #D09A58; --dot-active-color: #D09A58; --dot-active-glow: 0 0 12px rgba(2, 163, 192, 0.70), 0 0 28px rgba(208, 154, 88, 0.25); --dot-inactive-bg: rgba(29, 139, 157, 0.30); --dot-inactive-color: #8F2435; --dot-inactive-border: rgba(29, 139, 157, 0.35); --dot-size: 9px; --dot-active-width: 28px; --gold-glow: 0 0 18px rgba(180, 145, 107, 0.45); /* Slide Rotation Timing Bar & Counter */ --slide-progress-start: #D09A58; --slide-progress-end: #8F2435; --slide-progress-track-bg: rgba(29, 139, 157, 0.25); --slide-progress-height: 6px; --slide-progress-show: block; --slide-progress-glow: 0 0 10px rgba(2, 163, 192, 0.7); --slide-counter-bg: #170A0D; --slide-counter-color: #F0B58A; --slide-counter-border: #52272D; --slide-counter-show: inline-flex; /* --------------------------------------------------------- Semantic Colors --------------------------------------------------------- */ --color-success: #42D6A4; --color-success-soft: #8BE8C5; --color-warning: #E8B86A; --color-warning-soft: #F2D19A; --color-danger: #F07878; --color-danger-soft: #F6AAAA; --color-info: #5CC8E8; --color-info-soft: #9BE3F4; --color-neutral: #94A9B3; /* --------------------------------------------------------- WOW / Dynamic Effects --------------------------------------------------------- */ --ambient-glow: radial-gradient(circle at 20% 10%, rgba(2, 163, 192, 0.12), transparent 35%); --surface-glow: 0 8px 35px rgba(208, 154, 88, 0.08); --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); --card-hover-shadow: 0 16px 45px rgba(2, 163, 192, 0.14); --focus-ring: 0 0 0 3px rgba(2, 163, 192, 0.22); --premium-gradient: linear-gradient(135deg, #6D1726 0%, #8F2435 55%, #D09A58 100%); --premium-gold-gradient: linear-gradient(135deg, #8F6D4E, #C98A4B, #E2B273); /* Section 13: Forms & Documents Hub Tokens */ --forms-card-bg: #2D1217; --forms-card-border: #54222C; --forms-title-color: #FFF1F2; --forms-desc-color: #FECDD3; --forms-badge-color: #FB7185; --forms-badge-bg: #1C0B0E; --forms-deadline-color: #F87171; --forms-deadline-bg: #3F1515; --forms-checklist-bg: #100507; --forms-checklist-border: #54222C; --forms-qr-bg: #FFFFFF; --forms-qr-border: #54222C; --forms-btn-bg: #E11D48; --forms-btn-color: #FFFFFF; --forms-progress-start: #FB7185; --forms-progress-end: #FDA4AF; /* Section 15: Social Media & Community Channels Tokens */ --social-card-bg: #2D1217; --social-card-border: #54222C; --social-title-color: #FFF1F2; --social-desc-color: #FECDD3; --social-btn-bg: #E11D48; --social-btn-color: #FFFFFF; --social-chip-bg: #1C0B0E; --social-chip-border: #FB7185; --social-chip-color: #FFF1F2; --social-tv-bg: #2D1217; --social-tv-border: #FB7185; /* Dynamic Section & Border Design Tokens */ --sidebar-bg: linear-gradient(180deg, rgba(40, 18, 22, 0.92) 0%, rgba(23, 10, 13, 0.95) 100%); --prayer-panel-bg: linear-gradient(145deg, rgba(40, 18, 22, 0.92), rgba(23, 10, 13, 0.95)); --masjid-card-bg: var(--prayer-card-bg, var(--tenant-surface)); --masjid-card-border: var(--prayer-card-border, var(--tenant-border)); --countdown-card-bg: var(--prayer-panel-bg, var(--tenant-surface)); --countdown-card-border: var(--prayer-card-border, var(--tenant-border)); --qr-card-bg: var(--prayer-panel-bg, var(--tenant-surface)); --qr-card-border: var(--prayer-card-border, var(--tenant-border)); --aux-card-bg: var(--prayer-card-bg, var(--tenant-surface)); --aux-card-border: var(--prayer-card-border, var(--tenant-border)); --wisdom-quran-border: rgba(201, 138, 75, 0.4); --wisdom-hadith-border: #63343A; --wisdom-badge-bg: rgba(201, 138, 75, 0.18); --wisdom-badge-border: rgba(201, 138, 75, 0.45); --wisdom-hadith-badge-bg: rgba(143, 36, 53, 0.25); --wisdom-hadith-badge-border: #63343A; --wisdom-hadith-badge-color: #FB7185; --wisdom-hadith-ref-bg: rgba(40, 18, 22, 0.7); --wisdom-hadith-ref-border: #63343A; --wisdom-hadith-ref-color: #FDA4AF; --masjid-loc-pill-bg: rgba(251, 113, 133, 0.12); --masjid-loc-pill-border: rgba(251, 113, 133, 0.35); --masjid-loc-pill-text: #FDA4AF; --hero-status-pill-bg: rgba(251, 113, 133, 0.15); --hero-status-pill-border: rgba(251, 113, 133, 0.45); --hero-status-pill-color: #FB7185; --hero-qr-badge-bg: rgba(251, 113, 133, 0.15); --hero-qr-badge-border: rgba(251, 113, 133, 0.35); --hero-qr-badge-color: #FB7185; --qurban-card-bg: var(--tenant-surface); --qurban-card-border: var(--tenant-border); } /* ============================================================================== 12. PERSIAN TURQUOISE & MOONLIGHT (persian-turquoise) ============================================================================== */ [data-theme="persian-turquoise"] { /* ========================================================= PERSIAN TURQUOISE & MOONLIGHT Premium Dark Masjid Digital Dashboard ========================================================= */ /* --------------------------------------------------------- Core Palette --------------------------------------------------------- */ --color-navy: #075766; --color-teal: #087F8C; --color-cyan: #14B8A6; --color-white: #F4FFFE; --color-sand: #D7B65D; /* --------------------------------------------------------- Surface & Canvas --------------------------------------------------------- */ --tenant-bg: #06151A; --tenant-surface: #08262D; --tenant-surface-hover: #0D353D; --tenant-surface-elevated: #12434C; --tenant-surface-strong: #18535D; --tenant-border: #246873; --tenant-border-focus: #14B8A6; --tenant-border-subtle: rgba(2, 163, 192, 0.20); --tenant-bg-input: #031013; --tenant-input-text: #F4FFFE; /* --------------------------------------------------------- Typography --------------------------------------------------------- */ --tenant-text-primary: #F4FFFE; --tenant-desc-color: #B5D6D5; --tenant-text-muted: #789D9D; --text-inverse: #06151A; /* --------------------------------------------------------- Brand --------------------------------------------------------- */ --tenant-primary: #087F8C; --tenant-primary-light: #14B8A6; --tenant-gold: #D7B65D; --tenant-gold-bright: #F0D98B; --tenant-gold-soft: #F7E9BA; --tenant-selection-bg: rgba(2, 163, 192, 0.28); --tenant-selection-text: #FFFFFF; /* --------------------------------------------------------- Backward Compatibility --------------------------------------------------------- */ --bg-primary: var(--tenant-bg); --bg-surface: var(--tenant-surface); --bg-elevated: var(--tenant-surface-elevated); --bg-surface-hover: var(--tenant-surface-hover); --border-color: var(--tenant-border); --border-focus: var(--tenant-border-focus); --text-primary: var(--tenant-text-primary); --text-muted: var(--tenant-desc-color); --primary-color: var(--tenant-primary); --accent-color: var(--tenant-gold); /* --------------------------------------------------------- Header & Top Bar --------------------------------------------------------- */ --header-bg: linear-gradient(135deg, #06151A 0%, #075766 50%, #087F8C 100%); --header-start: #06151A; --header-mid: #075766; --header-end: #087F8C; --header-title-color: #F4FFFE; --header-clock-color: #F4FFFE; --header-date-color: #B5D6D5; --header-hijri-color: #F0D98B; --header-location-color: #14B8A6; --calligraphy-color: #F0D98B; --header-calligraphy-color: #F0D98B; --footer-bg: linear-gradient(135deg, #06151A 0%, #0D353D 45%, #075766 100%); /* --------------------------------------------------------- Prayer Times --------------------------------------------------------- */ --prayer-card-bg: linear-gradient(145deg, rgba(18, 45, 77, 0.92), rgba(11, 27, 53, 0.96)); --prayer-card-border: rgba(2, 163, 192, 0.28); --prayer-row-bg: rgba(29, 50, 103, 0.30); --prayer-row-border: rgba(127, 163, 175, 0.15); /* Active Prayer */ --active-prayer-bg-start: rgba(2, 163, 192, 0.24); --active-prayer-bg-end: rgba(29, 139, 157, 0.04); --active-prayer-bg: linear-gradient(90deg, rgba(2, 163, 192, 0.26) 0%, rgba(29, 139, 157, 0.08) 55%, transparent 100%); --active-prayer-border: #14B8A6; --active-prayer-glow: 0 0 20px rgba(2, 163, 192, 0.45), 0 0 45px rgba(29, 139, 157, 0.18); --active-prayer-text: #6EE7E0; --active-prayer-muted: #B5D6D5; --active-prayer-time: #F4FFFE; /* --------------------------------------------------------- Adhan / Iqamah --------------------------------------------------------- */ --adhan-time-color: #F4FFFE; --iqamah-time-color: #6EE7E0; --adhan-color: #D9EDF0; --iqamah-color: #14B8A6; --countdown-badge-bg: linear-gradient(135deg, #14B8A6, #087F8C); --countdown-badge-text: #F4FFFE; --highlight-iqamah-bg: rgba(2, 163, 192, 0.08); --active-iqamah-bg: rgba(2, 163, 192, 0.16); /* --------------------------------------------------------- Carousel & Cards --------------------------------------------------------- */ --wisdom-card-bg: linear-gradient(145deg, #0D353D, #08262D); --wisdom-card-border: rgba(180, 145, 107, 0.30); --wisdom-arabic-color: #F0D98B; --wisdom-trans-color: #F4FFFE; --wisdom-tag-color: #14B8A6; --notice-card-bg: linear-gradient(145deg, #0D353D, #08262D); --notice-body-color: #F4FFFE; --notice-janaza-bg: linear-gradient(150deg, rgba(91, 33, 182, 0.18), rgba(30, 20, 70, 0.40)); --notice-janaza-border: rgba(167, 139, 250, 0.50); /* --------------------------------------------------------- Ramadan --------------------------------------------------------- */ --ramadan-card-bg: #08262D; --ramadan-card-border: #246873; --ramadan-panel-bg: linear-gradient(165deg, rgba(18, 45, 77, 0.96), rgba(7, 18, 37, 0.98)); --ramadan-panel-border: rgba(2, 163, 192, 0.30); --ramadan-title-color: #F4FFFE; --ramadan-sub-color: #B5D6D5; --ramadan-accent-gold: #D7B65D; --ramadan-countdown-bg: linear-gradient(165deg, rgba(29, 139, 157, 0.20), rgba(7, 18, 37, 0.90)); --ramadan-countdown-border: #14B8A6; --ramadan-countdown-label: #6EE7E0; --ramadan-time-color: #F4FFFE; --ramadan-unit-bg: rgba(7, 18, 37, 0.80); --ramadan-unit-border: rgba(2, 163, 192, 0.25); --ramadan-unit-val: #F4FFFE; --ramadan-unit-lbl: #D7B65D; --ramadan-unit-sep: #14B8A6; --sahoor-box-bg: rgba(29, 139, 157, 0.12); --iftar-box-bg: linear-gradient(135deg, rgba(180, 145, 107, 0.24), rgba(2, 163, 192, 0.10)); --ramadan-pill-bg: rgba(7, 18, 37, 0.72); --ramadan-pill-border: rgba(2, 163, 192, 0.20); --ramadan-pill-lbl: #94B8B9; --ramadan-pill-val: #F4FFFE; --ramadan-pill-hl-bg: linear-gradient(135deg, rgba(2, 163, 192, 0.20), rgba(29, 139, 157, 0.10)); --ramadan-pill-hl-border: #14B8A6; --ramadan-pill-hl-lbl: #6EE7E0; --ramadan-pill-hl-val: #FFFFFF; --ramadan-dua-bg: linear-gradient(165deg, rgba(18, 45, 77, 0.90), rgba(7, 18, 37, 0.96)); --ramadan-dua-border: rgba(180, 145, 107, 0.30); --ramadan-dua-arabic-color: #F0D98B; --ramadan-dua-tag-color: #14B8A6; --ramadan-dua-text-color: #F4FFFE; --ramadan-table-bg: #08262D; --ramadan-subpage-header-bg: linear-gradient(135deg, rgba(18, 45, 77, 0.95), rgba(7, 18, 37, 0.98)); --ramadan-subpage-header-border: rgba(2, 163, 192, 0.25); --ramadan-subpage-header-title: #F4FFFE; --ramadan-subpage-header-sub: #94B8B9; --ramadan-table-wrap-bg: rgba(7, 18, 37, 0.85); --ramadan-table-hdr-bg: linear-gradient(135deg, #18535D, #0D353D); --ramadan-table-hdr-border: rgba(2, 163, 192, 0.25); --ramadan-table-hdr-color: #6EE7E0; --ramadan-row-border: rgba(127, 163, 175, 0.14); --ramadan-row-even-bg: rgba(255, 255, 255, 0.015); --ramadan-row-odd-bg: rgba(255, 255, 255, 0.035); --ramadan-row-highlight: rgba(2, 163, 192, 0.15); --ramadan-crescent-bg: radial-gradient(circle at 35% 35%, rgba(180, 145, 107, 0.22), rgba(2, 163, 192, 0.10)); --ramadan-crescent-border: #D7B65D; --ramadan-crescent-color: #F0D98B; /* --------------------------------------------------------- Special Events --------------------------------------------------------- */ --special-card-bg: #08262D; --special-card-border: #246873; --special-header-title-color: #F4FFFE; --special-title-color: #F4FFFE; --special-event-title-color: #6EE7E0; --special-dua-color: #F0D98B; --mens-box-bg: rgba(29, 139, 157, 0.10); --mens-border: rgba(2, 163, 192, 0.25); --mens-title-color: #6EE7E0; --womens-box-bg: rgba(180, 145, 107, 0.08); --womens-border: rgba(180, 145, 107, 0.30); --womens-title-color: #F0D98B; --special-time-value-color: #F4FFFE; --special-guide-bg: rgba(7, 18, 37, 0.65); --special-guide-title-color: #F0D98B; --special-guide-text-color: #9DB8BA; --special-date-badge-bg: rgba(2, 163, 192, 0.15); --special-date-badge-color: #6EE7E0; --qurban-price-color: #73D6A8; /* --------------------------------------------------------- Indicators & Glows --------------------------------------------------------- */ --dot-active-bg: #14B8A6; --dot-active-color: #14B8A6; --dot-active-glow: 0 0 12px rgba(2, 163, 192, 0.70), 0 0 28px rgba(2, 163, 192, 0.25); --dot-inactive-bg: rgba(29, 139, 157, 0.30); --dot-inactive-color: #087F8C; --dot-inactive-border: rgba(29, 139, 157, 0.35); --dot-size: 9px; --dot-active-width: 28px; --gold-glow: 0 0 18px rgba(180, 145, 107, 0.45); /* Slide Rotation Timing Bar & Counter */ --slide-progress-start: #14B8A6; --slide-progress-end: #087F8C; --slide-progress-track-bg: rgba(29, 139, 157, 0.25); --slide-progress-height: 6px; --slide-progress-show: block; --slide-progress-glow: 0 0 10px rgba(2, 163, 192, 0.7); --slide-counter-bg: #06151A; --slide-counter-color: #6EE7E0; --slide-counter-border: #18535D; --slide-counter-show: inline-flex; /* --------------------------------------------------------- Semantic Colors --------------------------------------------------------- */ --color-success: #42D6A4; --color-success-soft: #8BE8C5; --color-warning: #E8B86A; --color-warning-soft: #F2D19A; --color-danger: #F07878; --color-danger-soft: #F6AAAA; --color-info: #5CC8E8; --color-info-soft: #9BE3F4; --color-neutral: #94A9B3; /* --------------------------------------------------------- WOW / Dynamic Effects --------------------------------------------------------- */ --ambient-glow: radial-gradient(circle at 20% 10%, rgba(2, 163, 192, 0.12), transparent 35%); --surface-glow: 0 8px 35px rgba(2, 163, 192, 0.08); --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); --card-hover-shadow: 0 16px 45px rgba(2, 163, 192, 0.14); --focus-ring: 0 0 0 3px rgba(2, 163, 192, 0.22); --premium-gradient: linear-gradient(135deg, #075766 0%, #087F8C 55%, #14B8A6 100%); --premium-gold-gradient: linear-gradient(135deg, #8F6D4E, #D7B65D, #F0D98B); /* Section 13: Forms & Documents Hub Tokens */ --forms-card-bg: #083038; --forms-card-border: #125663; --forms-title-color: #ECFEFF; --forms-desc-color: #A5F3FC; --forms-badge-color: #22D3EE; --forms-badge-bg: #051E24; --forms-deadline-color: #F87171; --forms-deadline-bg: #3F1515; --forms-checklist-bg: #021014; --forms-checklist-border: #125663; --forms-qr-bg: #FFFFFF; --forms-qr-border: #125663; --forms-btn-bg: #0891B2; --forms-btn-color: #FFFFFF; --forms-progress-start: #22D3EE; --forms-progress-end: #67E8F9; /* Section 15: Social Media & Community Channels Tokens */ --social-card-bg: #083038; --social-card-border: #125663; --social-title-color: #ECFEFF; --social-desc-color: #A5F3FC; --social-btn-bg: #0891B2; --social-btn-color: #FFFFFF; --social-chip-bg: #051E24; --social-chip-border: #22D3EE; --social-chip-color: #ECFEFF; --social-tv-bg: #083038; --social-tv-border: #22D3EE; /* Dynamic Section & Border Design Tokens */ --sidebar-bg: linear-gradient(180deg, rgba(13, 53, 61, 0.92) 0%, rgba(6, 21, 26, 0.95) 100%); --prayer-panel-bg: linear-gradient(145deg, rgba(13, 53, 61, 0.92), rgba(6, 21, 26, 0.95)); --masjid-card-bg: var(--prayer-card-bg, var(--tenant-surface)); --masjid-card-border: var(--prayer-card-border, var(--tenant-border)); --countdown-card-bg: var(--prayer-panel-bg, var(--tenant-surface)); --countdown-card-border: var(--prayer-card-border, var(--tenant-border)); --qr-card-bg: var(--prayer-panel-bg, var(--tenant-surface)); --qr-card-border: var(--prayer-card-border, var(--tenant-border)); --aux-card-bg: var(--prayer-card-bg, var(--tenant-surface)); --aux-card-border: var(--prayer-card-border, var(--tenant-border)); --wisdom-quran-border: rgba(215, 182, 93, 0.4); --wisdom-hadith-border: #246873; --wisdom-badge-bg: rgba(215, 182, 93, 0.18); --wisdom-badge-border: rgba(215, 182, 93, 0.45); --wisdom-hadith-badge-bg: rgba(8, 127, 140, 0.22); --wisdom-hadith-badge-border: #246873; --wisdom-hadith-badge-color: #2DD4BF; --wisdom-hadith-ref-bg: rgba(8, 38, 45, 0.7); --wisdom-hadith-ref-border: #246873; --wisdom-hadith-ref-color: #5EEAD4; --masjid-loc-pill-bg: rgba(45, 212, 191, 0.12); --masjid-loc-pill-border: rgba(45, 212, 191, 0.35); --masjid-loc-pill-text: #5EEAD4; --hero-status-pill-bg: rgba(45, 212, 191, 0.15); --hero-status-pill-border: rgba(45, 212, 191, 0.45); --hero-status-pill-color: #2DD4BF; --hero-qr-badge-bg: rgba(45, 212, 191, 0.15); --hero-qr-badge-border: rgba(45, 212, 191, 0.35); --hero-qr-badge-color: #2DD4BF; --qurban-card-bg: var(--tenant-surface); --qurban-card-border: var(--tenant-border); } /* ============================================================================== 13. DESERT SAND & ROYAL TEAL (desert-teal) ============================================================================== */ [data-theme="desert-teal"] { /* ========================================================= DESERT SAND & ROYAL TEAL Premium Dark Masjid Digital Dashboard ========================================================= */ /* --------------------------------------------------------- Core Palette --------------------------------------------------------- */ --color-navy: #35615F; --color-teal: #087E8B; --color-cyan: #16A3AD; --color-white: #F7F1E5; --color-sand: #C68A45; /* --------------------------------------------------------- Surface & Canvas --------------------------------------------------------- */ --tenant-bg: #151713; --tenant-surface: #242820; --tenant-surface-hover: #30372B; --tenant-surface-elevated: #394335; --tenant-surface-strong: #485241; --tenant-border: #586354; --tenant-border-focus: #16A3AD; --tenant-border-subtle: rgba(2, 163, 192, 0.20); --tenant-bg-input: #0D0F0C; --tenant-input-text: #F7F1E5; /* --------------------------------------------------------- Typography --------------------------------------------------------- */ --tenant-text-primary: #F7F1E5; --tenant-desc-color: #C9C2B4; --tenant-text-muted: #938D80; --text-inverse: #151713; /* --------------------------------------------------------- Brand --------------------------------------------------------- */ --tenant-primary: #087E8B; --tenant-primary-light: #16A3AD; --tenant-gold: #C68A45; --tenant-gold-bright: #E2AD6C; --tenant-gold-soft: #F0D2A3; --tenant-selection-bg: rgba(2, 163, 192, 0.28); --tenant-selection-text: #FFFFFF; /* --------------------------------------------------------- Backward Compatibility --------------------------------------------------------- */ --bg-primary: var(--tenant-bg); --bg-surface: var(--tenant-surface); --bg-elevated: var(--tenant-surface-elevated); --bg-surface-hover: var(--tenant-surface-hover); --border-color: var(--tenant-border); --border-focus: var(--tenant-border-focus); --text-primary: var(--tenant-text-primary); --text-muted: var(--tenant-desc-color); --primary-color: var(--tenant-primary); --accent-color: var(--tenant-gold); /* --------------------------------------------------------- Header & Top Bar --------------------------------------------------------- */ --header-bg: linear-gradient(135deg, #151713 0%, #35615F 50%, #087E8B 100%); --header-start: #151713; --header-mid: #35615F; --header-end: #087E8B; --header-title-color: #F7F1E5; --header-clock-color: #F7F1E5; --header-date-color: #C9C2B4; --header-hijri-color: #E2AD6C; --header-location-color: #16A3AD; --calligraphy-color: #E2AD6C; --header-calligraphy-color: #E2AD6C; --footer-bg: linear-gradient(135deg, #151713 0%, #30372B 45%, #35615F 100%); /* --------------------------------------------------------- Prayer Times --------------------------------------------------------- */ --prayer-card-bg: linear-gradient(145deg, rgba(18, 45, 77, 0.92), rgba(11, 27, 53, 0.96)); --prayer-card-border: rgba(2, 163, 192, 0.28); --prayer-row-bg: rgba(29, 50, 103, 0.30); --prayer-row-border: rgba(127, 163, 175, 0.15); /* Active Prayer */ --active-prayer-bg-start: rgba(2, 163, 192, 0.24); --active-prayer-bg-end: rgba(29, 139, 157, 0.04); --active-prayer-bg: linear-gradient(90deg, rgba(2, 163, 192, 0.26) 0%, rgba(29, 139, 157, 0.08) 55%, transparent 100%); --active-prayer-border: #16A3AD; --active-prayer-glow: 0 0 20px rgba(2, 163, 192, 0.45), 0 0 45px rgba(29, 139, 157, 0.18); --active-prayer-text: #70D8D5; --active-prayer-muted: #C9C2B4; --active-prayer-time: #F7F1E5; /* --------------------------------------------------------- Adhan / Iqamah --------------------------------------------------------- */ --adhan-time-color: #F7F1E5; --iqamah-time-color: #70D8D5; --adhan-color: #D9EDF0; --iqamah-color: #16A3AD; --countdown-badge-bg: linear-gradient(135deg, #16A3AD, #087E8B); --countdown-badge-text: #F7F1E5; --highlight-iqamah-bg: rgba(2, 163, 192, 0.08); --active-iqamah-bg: rgba(2, 163, 192, 0.16); /* --------------------------------------------------------- Carousel & Cards --------------------------------------------------------- */ --wisdom-card-bg: linear-gradient(145deg, #30372B, #242820); --wisdom-card-border: rgba(180, 145, 107, 0.30); --wisdom-arabic-color: #E2AD6C; --wisdom-trans-color: #F7F1E5; --wisdom-tag-color: #16A3AD; --notice-card-bg: linear-gradient(145deg, #30372B, #242820); --notice-body-color: #F7F1E5; --notice-janaza-bg: linear-gradient(150deg, rgba(91, 33, 182, 0.18), rgba(30, 20, 70, 0.40)); --notice-janaza-border: rgba(167, 139, 250, 0.50); /* --------------------------------------------------------- Ramadan --------------------------------------------------------- */ --ramadan-card-bg: #242820; --ramadan-card-border: #586354; --ramadan-panel-bg: linear-gradient(165deg, rgba(18, 45, 77, 0.96), rgba(7, 18, 37, 0.98)); --ramadan-panel-border: rgba(2, 163, 192, 0.30); --ramadan-title-color: #F7F1E5; --ramadan-sub-color: #C9C2B4; --ramadan-accent-gold: #C68A45; --ramadan-countdown-bg: linear-gradient(165deg, rgba(29, 139, 157, 0.20), rgba(7, 18, 37, 0.90)); --ramadan-countdown-border: #16A3AD; --ramadan-countdown-label: #70D8D5; --ramadan-time-color: #F7F1E5; --ramadan-unit-bg: rgba(7, 18, 37, 0.80); --ramadan-unit-border: rgba(2, 163, 192, 0.25); --ramadan-unit-val: #F7F1E5; --ramadan-unit-lbl: #C68A45; --ramadan-unit-sep: #16A3AD; --sahoor-box-bg: rgba(29, 139, 157, 0.12); --iftar-box-bg: linear-gradient(135deg, rgba(180, 145, 107, 0.24), rgba(2, 163, 192, 0.10)); --ramadan-pill-bg: rgba(7, 18, 37, 0.72); --ramadan-pill-border: rgba(2, 163, 192, 0.20); --ramadan-pill-lbl: #A9B5A7; --ramadan-pill-val: #F7F1E5; --ramadan-pill-hl-bg: linear-gradient(135deg, rgba(2, 163, 192, 0.20), rgba(29, 139, 157, 0.10)); --ramadan-pill-hl-border: #16A3AD; --ramadan-pill-hl-lbl: #70D8D5; --ramadan-pill-hl-val: #FFFFFF; --ramadan-dua-bg: linear-gradient(165deg, rgba(18, 45, 77, 0.90), rgba(7, 18, 37, 0.96)); --ramadan-dua-border: rgba(180, 145, 107, 0.30); --ramadan-dua-arabic-color: #E2AD6C; --ramadan-dua-tag-color: #16A3AD; --ramadan-dua-text-color: #F7F1E5; --ramadan-table-bg: #242820; --ramadan-subpage-header-bg: linear-gradient(135deg, rgba(18, 45, 77, 0.95), rgba(7, 18, 37, 0.98)); --ramadan-subpage-header-border: rgba(2, 163, 192, 0.25); --ramadan-subpage-header-title: #F7F1E5; --ramadan-subpage-header-sub: #A9B5A7; --ramadan-table-wrap-bg: rgba(7, 18, 37, 0.85); --ramadan-table-hdr-bg: linear-gradient(135deg, #485241, #30372B); --ramadan-table-hdr-border: rgba(2, 163, 192, 0.25); --ramadan-table-hdr-color: #70D8D5; --ramadan-row-border: rgba(127, 163, 175, 0.14); --ramadan-row-even-bg: rgba(255, 255, 255, 0.015); --ramadan-row-odd-bg: rgba(255, 255, 255, 0.035); --ramadan-row-highlight: rgba(2, 163, 192, 0.15); --ramadan-crescent-bg: radial-gradient(circle at 35% 35%, rgba(180, 145, 107, 0.22), rgba(2, 163, 192, 0.10)); --ramadan-crescent-border: #C68A45; --ramadan-crescent-color: #E2AD6C; /* --------------------------------------------------------- Special Events --------------------------------------------------------- */ --special-card-bg: #242820; --special-card-border: #586354; --special-header-title-color: #F7F1E5; --special-title-color: #F7F1E5; --special-event-title-color: #70D8D5; --special-dua-color: #E2AD6C; --mens-box-bg: rgba(29, 139, 157, 0.10); --mens-border: rgba(2, 163, 192, 0.25); --mens-title-color: #70D8D5; --womens-box-bg: rgba(180, 145, 107, 0.08); --womens-border: rgba(180, 145, 107, 0.30); --womens-title-color: #E2AD6C; --special-time-value-color: #F7F1E5; --special-guide-bg: rgba(7, 18, 37, 0.65); --special-guide-title-color: #E2AD6C; --special-guide-text-color: #AAB3A5; --special-date-badge-bg: rgba(2, 163, 192, 0.15); --special-date-badge-color: #70D8D5; --qurban-price-color: #72D0A0; /* --------------------------------------------------------- Indicators & Glows --------------------------------------------------------- */ --dot-active-bg: #16A3AD; --dot-active-color: #16A3AD; --dot-active-glow: 0 0 12px rgba(2, 163, 192, 0.70), 0 0 28px rgba(2, 163, 192, 0.25); --dot-inactive-bg: rgba(29, 139, 157, 0.30); --dot-inactive-color: #087E8B; --dot-inactive-border: rgba(29, 139, 157, 0.35); --dot-size: 9px; --dot-active-width: 28px; --gold-glow: 0 0 18px rgba(180, 145, 107, 0.45); /* Slide Rotation Timing Bar & Counter */ --slide-progress-start: #16A3AD; --slide-progress-end: #087E8B; --slide-progress-track-bg: rgba(29, 139, 157, 0.25); --slide-progress-height: 6px; --slide-progress-show: block; --slide-progress-glow: 0 0 10px rgba(2, 163, 192, 0.7); --slide-counter-bg: #151713; --slide-counter-color: #70D8D5; --slide-counter-border: #485241; --slide-counter-show: inline-flex; /* --------------------------------------------------------- Semantic Colors --------------------------------------------------------- */ --color-success: #42D6A4; --color-success-soft: #8BE8C5; --color-warning: #E8B86A; --color-warning-soft: #F2D19A; --color-danger: #F07878; --color-danger-soft: #F6AAAA; --color-info: #5CC8E8; --color-info-soft: #9BE3F4; --color-neutral: #94A9B3; /* --------------------------------------------------------- WOW / Dynamic Effects --------------------------------------------------------- */ --ambient-glow: radial-gradient(circle at 20% 10%, rgba(2, 163, 192, 0.12), transparent 35%); --surface-glow: 0 8px 35px rgba(2, 163, 192, 0.08); --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); --card-hover-shadow: 0 16px 45px rgba(2, 163, 192, 0.14); --focus-ring: 0 0 0 3px rgba(2, 163, 192, 0.22); --premium-gradient: linear-gradient(135deg, #35615F 0%, #087E8B 55%, #16A3AD 100%); --premium-gold-gradient: linear-gradient(135deg, #8F6D4E, #C68A45, #E2AD6C); /* Section 13: Forms & Documents Hub Tokens */ --forms-card-bg: #1A2F2B; --forms-card-border: #2D534C; --forms-title-color: #F0FDFA; --forms-desc-color: #99F6E4; --forms-badge-color: #2DD4BF; --forms-badge-bg: #101E1B; --forms-deadline-color: #F87171; --forms-deadline-bg: #3F1515; --forms-checklist-bg: #091210; --forms-checklist-border: #2D534C; --forms-qr-bg: #FFFFFF; --forms-qr-border: #2D534C; --forms-btn-bg: #0D9488; --forms-btn-color: #FFFFFF; --forms-progress-start: #2DD4BF; --forms-progress-end: #5EEAD4; /* Section 15: Social Media & Community Channels Tokens */ --social-card-bg: #1A2F2B; --social-card-border: #2D534C; --social-title-color: #F0FDFA; --social-desc-color: #99F6E4; --social-btn-bg: #0D9488; --social-btn-color: #FFFFFF; --social-chip-bg: #101E1B; --social-chip-border: #2DD4BF; --social-chip-color: #F0FDFA; --social-tv-bg: #1A2F2B; --social-tv-border: #2DD4BF; /* Dynamic Section & Border Design Tokens */ --sidebar-bg: linear-gradient(180deg, rgba(36, 40, 32, 0.92) 0%, rgba(21, 23, 19, 0.95) 100%); --prayer-panel-bg: linear-gradient(145deg, rgba(36, 40, 32, 0.92), rgba(21, 23, 19, 0.95)); --masjid-card-bg: var(--prayer-card-bg, var(--tenant-surface)); --masjid-card-border: var(--prayer-card-border, var(--tenant-border)); --countdown-card-bg: var(--prayer-panel-bg, var(--tenant-surface)); --countdown-card-border: var(--prayer-card-border, var(--tenant-border)); --qr-card-bg: var(--prayer-panel-bg, var(--tenant-surface)); --qr-card-border: var(--prayer-card-border, var(--tenant-border)); --aux-card-bg: var(--prayer-card-bg, var(--tenant-surface)); --aux-card-border: var(--prayer-card-border, var(--tenant-border)); --wisdom-quran-border: rgba(198, 138, 69, 0.4); --wisdom-hadith-border: #586354; --wisdom-badge-bg: rgba(198, 138, 69, 0.18); --wisdom-badge-border: rgba(198, 138, 69, 0.45); --wisdom-hadith-badge-bg: rgba(8, 126, 139, 0.22); --wisdom-hadith-badge-border: #586354; --wisdom-hadith-badge-color: #14B8A6; --wisdom-hadith-ref-bg: rgba(36, 40, 32, 0.7); --wisdom-hadith-ref-border: #586354; --wisdom-hadith-ref-color: #99F6E4; --masjid-loc-pill-bg: rgba(20, 184, 166, 0.12); --masjid-loc-pill-border: rgba(20, 184, 166, 0.35); --masjid-loc-pill-text: #99F6E4; --hero-status-pill-bg: rgba(20, 184, 166, 0.15); --hero-status-pill-border: rgba(20, 184, 166, 0.45); --hero-status-pill-color: #14B8A6; --hero-qr-badge-bg: rgba(20, 184, 166, 0.15); --hero-qr-badge-border: rgba(20, 184, 166, 0.35); --hero-qr-badge-color: #14B8A6; --qurban-card-bg: var(--tenant-surface); --qurban-card-border: var(--tenant-border); } /* ========================================================= COASTAL SERENITY (DARK) ========================================================= */ [data-theme="coastal-serenity"] { --tenant-bg: #1A2A3A; --tenant-surface: #243B4F; --tenant-surface-hover: #2A4365; --tenant-border: #3A5A7A; --tenant-text-primary: #F5F0EB; --tenant-desc-color: #B8C4C0; --tenant-text-muted: #8A9CA8; --tenant-primary: #4393BF; --tenant-primary-light: #8BAF89; --tenant-gold: #D4CFC9; --bg-primary: #1A2A3A; --bg-surface: #243B4F; --header-bg: linear-gradient(135deg, #1A2A3A 0%, #2A4365 50%, #4393BF 100%); --header-start: #1A2A3A; --header-mid: #2A4365; --header-end: #4393BF; --header-title-color: #F5F0EB; --header-clock-color: #F5F0EB; --header-date-color: #B8C4C0; --header-hijri-color: #D4CFC9; --header-location-color: #8BAF89; --calligraphy-color: #D4CFC9; --header-calligraphy-color: #D4CFC9; --footer-bg: linear-gradient(135deg, #1A2A3A 0%, #2A4365 50%, #4393BF 100%); --footer-start: #1A2A3A; --footer-mid: #2A4365; --footer-end: #4393BF; --footer-text-color: #F5F0EB; --footer-muted-color: #B8C4C0; --footer-gold-color: #D4CFC9; --prayer-card-bg: #243B4F; --prayer-card-border: #3A5A7A; --active-prayer-bg: linear-gradient(90deg, rgba(67, 147, 191, 0.20) 0%, rgba(67, 147, 191, 0.05) 55%, transparent 100%); --active-prayer-border: #4393BF; --active-prayer-text: #D4CFC9; --iqamah-color: #D4CFC9; --adhan-color: #8BAF89; --active-prayer-bg-start: rgba(67, 147, 191, 0.25); --active-prayer-bg-end: rgba(67, 147, 191, 0.04); --prayer-name-color: #F5F0EB; --adhan-time-color: #8BAF89; --iqamah-time-color: #D4CFC9; --countdown-badge-bg: #4393BF; --countdown-badge-text: #1A2A3A; --wisdom-card-bg: #243B4F; --wisdom-card-border: #3A5A7A; --wisdom-arabic-color: #D4CFC9; --wisdom-trans-color: #F5F0EB; --wisdom-narrator-color: #8BAF89; --wisdom-tag-color: #4393BF; --notice-card-bg: #243B4F; --notice-card-border: #3A5A7A; --notice-title-color: #4393BF; --notice-body-color: #F5F0EB; --notice-subcard-bg: rgba(26, 42, 58, 0.75); --notice-subcard-border: #3A5A7A; --notice-janaza-bg: linear-gradient(150deg, rgba(99, 102, 241, 0.12) 0%, rgba(49, 46, 129, 0.25) 100%); --notice-janaza-border: rgba(99, 102, 241, 0.65); --notice-janaza-color: #C7D2FE; --notice-arabic-header-color: #D4CFC9; --notice-urgent-bg: linear-gradient(150deg, rgba(239, 68, 68, 0.15) 0%, rgba(185, 28, 28, 0.3) 100%); --notice-urgent-border: #EF4444; --notice-urgent-color: #FCA5A5; --notice-event-color: #8BAF89; --notice-progress-start: #4393BF; --notice-progress-end: #8BAF89; --poster-card-bg: #243B4F; --poster-card-border: #3A5A7A; --poster-caption-bg: rgba(26, 42, 58, 0.88); --poster-title-color: #F5F0EB; --poster-desc-color: #B8C4C0; --poster-badge-bg: #4393BF; --poster-badge-color: #F5F0EB; --poster-progress-start: #4393BF; --poster-progress-end: #8BAF89; --ramadan-card-bg: #243B4F; --ramadan-card-border: #3A5A7A; --ramadan-panel-bg: linear-gradient(165deg, rgba(36, 59, 79, 0.95) 0%, rgba(26, 42, 58, 0.98) 100%); --ramadan-panel-border: #3A5A7A; --ramadan-title-color: #4393BF; --ramadan-sub-color: #B8C4C0; --ramadan-accent-gold: #D4CFC9; --ramadan-countdown-bg: linear-gradient(165deg, rgba(36, 59, 79, 0.85) 0%, rgba(26, 42, 58, 0.95) 100%); --ramadan-countdown-border: #4393BF; --ramadan-countdown-label: '#8BAF89'; --ramadan-time-color: #F5F0EB; --ramadan-unit-bg: rgba(26, 42, 58, 0.85); --ramadan-unit-border: rgba(67, 147, 191, 0.35); --ramadan-unit-val: #F5F0EB; --ramadan-unit-lbl: #4393BF; --ramadan-unit-sep: #4393BF; --sahoor-box-bg: rgba(36, 59, 79, 0.75); --iftar-box-bg: linear-gradient(135deg, rgba(67, 147, 191, 0.28) 0%, rgba(42, 67, 101, 0.25) 100%); --ramadan-pill-bg: rgba(36, 59, 79, 0.75); --ramadan-pill-border: rgba(58, 90, 122, 0.6); --ramadan-pill-lbl: #B8C4C0; --ramadan-pill-val: #F5F0EB; --ramadan-pill-hl-bg: linear-gradient(135deg, rgba(67, 147, 191, 0.25) 0%, rgba(42, 67, 101, 0.15) 100%); --ramadan-pill-hl-border: #4393BF; --ramadan-pill-hl-lbl: #8BAF89; --ramadan-pill-hl-val: #FFFFFF; --ramadan-dua-bg: linear-gradient(165deg, rgba(36, 59, 79, 0.9) 0%, rgba(26, 42, 58, 0.95) 100%); --ramadan-dua-border: rgba(67, 147, 191, 0.35); --ramadan-dua-arabic-color: #D4CFC9; --ramadan-dua-tag-color: #4393BF; --ramadan-dua-text-color: #F5F0EB; --ramadan-table-bg: #243B4F; --ramadan-subpage-header-bg: linear-gradient(135deg, rgba(36, 59, 79, 0.95) 0%, rgba(26, 42, 58, 0.98) 100%); --ramadan-subpage-header-border: rgba(67, 147, 191, 0.35); --ramadan-subpage-header-title: #4393BF; --ramadan-subpage-header-sub: #B8C4C0; --ramadan-table-wrap-bg: rgba(26, 42, 58, 0.85); --ramadan-table-hdr-bg: linear-gradient(135deg, #2A4365 0%, #243B4F 100%); --ramadan-table-hdr-border: rgba(67, 147, 191, 0.35); --ramadan-table-hdr-color: #4393BF; --ramadan-row-border: rgba(58, 90, 122, 0.4); --ramadan-row-even-bg: rgba(255, 255, 255, 0.02); --ramadan-row-odd-bg: rgba(255, 255, 255, 0.05); --ramadan-row-highlight: rgba(67, 147, 191, 0.22); --ramadan-crescent-bg: radial-gradient(circle at 35% 35%, rgba(67, 147, 191, 0.25) 0%, rgba(42, 67, 101, 0.15) 100%); --ramadan-crescent-border: #4393BF; --ramadan-crescent-color: #D4CFC9; --special-card-bg: #243B4F; --special-card-border: #3A5A7A; --special-header-title-color: #4393BF; --special-title-color: #4393BF; --special-event-title-color: #8BAF89; --special-dua-color: #D4CFC9; --mens-box-bg: rgba(36, 59, 79, 0.8); --mens-border: #3A5A7A; --mens-title-color: #4393BF; --womens-box-bg: rgba(36, 59, 79, 0.8); --womens-border: #3A5A7A; --womens-title-color: #8BAF89; --special-time-value-color: #F5F0EB; --special-guide-bg: rgba(36, 59, 79, 0.65); --special-guide-title-color: #4393BF; --special-guide-text-color: #B8C4C0; --special-date-badge-bg: rgba(67, 147, 191, 0.18); --special-date-badge-color: #4393BF; --qurban-card-bg: #243B4F; --qurban-card-border: #3A5A7A; --qurban-title-color: #4393BF; --qurban-text-color: #F5F0EB; --qurban-muted-color: #8A9CA8; --qurban-price-color: #4393BF; --qurban-highlight-bg: rgba(67, 147, 191, 0.18); --qurban-highlight-border: #4393BF; --qurban-paid-bg: #16a34a; --qurban-paid-text: #4ade80; --qurban-pending-bg: #d97706; --qurban-pending-text: #fbbf24; --qurban-open-bg: #4393BF; --qurban-open-text: #F5F0EB; --qurban-closed-bg: #ef4444; --qurban-closed-text: #f87171; --qurban-phone-bg: #243B4F; --qurban-phone-text: #F5F0EB; --qurban-guide-bg: #1A2A3A; --qurban-guide-border: #3A5A7A; --qr-backdrop-bg: #ffffff; --qurban-progress-start: #4393BF; --qurban-progress-end: #8BAF89; --porridge-slide-bg: radial-gradient(circle at 50% 0%, #243B4F 0%, #1A2A3A 45%, #101B26 100%); --porridge-card-bg: #243B4F; --porridge-card-border: #3A5A7A; --porridge-day-num-color: #F5F0EB; --porridge-day-date-color: #8A9CA8; --porridge-price-color: #D4CFC9; --porridge-sponsor-color: #F5F0EB; --porridge-niyyah-color: #8BAF89; --porridge-header-stats-bg: rgba(26, 42, 58, 0.75); --porridge-sponsor-box-bg: rgba(16, 27, 38, 0.75); --porridge-open-pill-bg: rgba(67, 147, 191, 0.22); --porridge-open-pill-color: #4393BF; --porridge-open-border: rgba(67, 147, 191, 0.5); --porridge-booked-pill-bg: rgba(239, 68, 68, 0.22); --porridge-booked-pill-color: #F87171; --porridge-booked-border: rgba(248, 113, 113, 0.5); --porridge-partial-pill-bg: rgba(245, 158, 11, 0.22); --porridge-partial-pill-color: #FBBF24; --porridge-partial-border: rgba(251, 191, 36, 0.5); --dot-active-bg: #4393BF; --dot-active-color: #4393BF; --dot-active-glow: 0 0 14px rgba(67, 147, 191, 0.8); --dot-inactive-bg: rgba(67, 147, 191, 0.4); --dot-inactive-color: #2A4365; --dot-inactive-border: rgba(58, 90, 122, 0.6); --dot-size: 9px; --dot-active-width: 28px; --slide-progress-start: #4393BF; --slide-progress-end: #8BAF89; --slide-progress-track-bg: rgba(58, 90, 122, 0.5); --slide-progress-height: 6px; --slide-progress-show: block; --slide-progress-glow: 0 0 10px rgba(67, 147, 191, 0.8); --slide-counter-bg: #243B4F; --slide-counter-color: #4393BF; --slide-counter-border: #3A5A7A; --slide-counter-show: inline-flex; --color-success: #4393BF; --color-success-soft: #B8C4C0; --color-warning: #D4CFC9; --color-warning-soft: #F5F0EB; --color-danger: #F87171; --color-danger-soft: #FCA5A5; /* Section 13: Forms & Documents Hub Tokens */ --forms-card-bg: #243B4F; --forms-card-border: #3A5A7A; --forms-title-color: #F5F0EB; --forms-desc-color: #B8C4C0; --forms-badge-color: #4393BF; --forms-badge-bg: #1A2A3A; --forms-deadline-color: #FFFFFF; --forms-deadline-bg: #EF4444; --forms-checklist-bg: #142230; --forms-checklist-border: #3A5A7A; --forms-qr-bg: #FFFFFF; --forms-qr-border: #3A5A7A; --forms-btn-bg: #4393BF; --forms-btn-color: #FFFFFF; --forms-progress-start: #4393BF; --forms-progress-end: #8BAF89; /* Section 15: Social Media & Community Channels Tokens */ --social-card-bg: #243B4F; --social-card-border: #3A5A7A; --social-title-color: #F5F0EB; --social-desc-color: #B8C4C0; --social-btn-bg: #4393BF; --social-btn-color: #FFFFFF; --social-chip-bg: #1A2A3A; --social-chip-border: #4393BF; --social-chip-color: #F5F0EB; --social-tv-bg: #243B4F; --social-tv-border: #4393BF; /* Dynamic Section & Border Design Tokens */ --sidebar-bg: linear-gradient(180deg, rgba(36, 59, 79, 0.92) 0%, rgba(26, 42, 58, 0.95) 100%); --prayer-panel-bg: linear-gradient(145deg, rgba(36, 59, 79, 0.92), rgba(26, 42, 58, 0.95)); --masjid-card-bg: var(--prayer-card-bg, var(--tenant-surface)); --masjid-card-border: var(--prayer-card-border, var(--tenant-border)); --countdown-card-bg: var(--prayer-panel-bg, var(--tenant-surface)); --countdown-card-border: var(--prayer-card-border, var(--tenant-border)); --qr-card-bg: var(--prayer-panel-bg, var(--tenant-surface)); --qr-card-border: var(--prayer-card-border, var(--tenant-border)); --aux-card-bg: var(--prayer-card-bg, var(--tenant-surface)); --aux-card-border: var(--prayer-card-border, var(--tenant-border)); --wisdom-quran-border: rgba(212, 207, 201, 0.4); --wisdom-hadith-border: #3A5A7A; --wisdom-badge-bg: rgba(212, 207, 201, 0.18); --wisdom-badge-border: rgba(212, 207, 201, 0.45); --wisdom-hadith-badge-bg: rgba(67, 147, 191, 0.22); --wisdom-hadith-badge-border: #3A5A7A; --wisdom-hadith-badge-color: #5EEAD4; --wisdom-hadith-ref-bg: rgba(36, 59, 79, 0.7); --wisdom-hadith-ref-border: #3A5A7A; --wisdom-hadith-ref-color: #99F6E4; --masjid-loc-pill-bg: rgba(94, 234, 212, 0.12); --masjid-loc-pill-border: rgba(94, 234, 212, 0.35); --masjid-loc-pill-text: #99F6E4; --hero-status-pill-bg: rgba(94, 234, 212, 0.15); --hero-status-pill-border: rgba(94, 234, 212, 0.45); --hero-status-pill-color: #5EEAD4; --hero-qr-badge-bg: rgba(94, 234, 212, 0.15); --hero-qr-badge-border: rgba(94, 234, 212, 0.35); --hero-qr-badge-color: #5EEAD4; } /* ========================================================= COASTAL SERENITY LIGHT ========================================================= */ [data-theme="coastal-serenity-light"] { --tenant-font-heading: 'Outfit', sans-serif; --tenant-font-body: 'Outfit', sans-serif; --tenant-font-desc: 'Outfit', sans-serif; --tenant-font-arabic: 'Scheherazade New', 'Amiri', serif; --tenant-fs-heading: 1.5rem; --tenant-lh-heading: 1.2; --tenant-fw-heading: 700; --tenant-fs-body: 1rem; --tenant-lh-body: 1.5; --tenant-fw-body: 400; --tenant-fs-desc: 13px; --tenant-lh-desc: 1.45; --tenant-fw-desc: 500; --tenant-bg: #F5F0EB; --tenant-surface: #FFFFFF; --tenant-surface-hover: #EDF4F8; --tenant-surface-elevated: #FFFFFF; --tenant-surface-strong: #E5EDE7; --tenant-border: #D4CFC9; --tenant-border-focus: #3B6B4A; --tenant-border-subtle: rgba(59, 107, 74, 0.22); --tenant-bg-input: #FFFFFF; --tenant-input-text: #1A2A3A; --tenant-text-primary: #1A2A3A; --tenant-desc-color: #3D5465; --tenant-text-muted: #3D5465; --text-inverse: #FFFFFF; --tenant-primary: #1B648F; --tenant-primary-light: #2375A2; --tenant-gold: #3B6B4A; --tenant-gold-bright: #3B6B4A; --tenant-gold-soft: rgba(59, 107, 74, 0.7); --tenant-selection-bg: rgba(59, 107, 74, 0.25); --tenant-selection-text: #0F172A; --bg-primary: #F5F0EB; --bg-surface: #FFFFFF; --bg-elevated: #FFFFFF; --bg-surface-hover: #EDF4F8; --border-color: #D4CFC9; --border-focus: #3B6B4A; --text-primary: #1A2A3A; --text-muted: #3D5465; --primary-color: #1B648F; --accent-color: #3B6B4A; --primary: #1B648F; --primary-light: #2375A2; --gold: #3B6B4A; --gold-glow: 0 0 20px rgba(59, 107, 74, 0.85); --text-white: #1A2A3A; --header-bg: linear-gradient(135deg, #FFFFFF 0%, #EDF6FB 40%, #E3EFF7 75%, #EDF4EE 100%); --header-start: #FFFFFF; --header-mid: #EDF6FB; --header-end: #EDF4EE; --header-title-color: #142938; --header-location-color: #24495E; --header-clock-color: #142938; --header-date-color: #3D5465; --header-hijri-color: #1B648F; --header-calligraphy-color: #165377; --header-calligraphy-shadow: none; --calligraphy-color: #165377; --footer-bg: linear-gradient(135deg, #EDF4EE 0%, #EDF6FB 50%, #FFFFFF 100%); --footer-start: #EDF4EE; --footer-mid: #EDF6FB; --footer-end: #FFFFFF; --footer-text-color: #142938; --footer-muted-color: #3D5465; --footer-gold-color: #1B648F; --prayer-card-bg: #FFFFFF; --prayer-card-border: #D4CFC9; --prayer-row-bg: rgba(255, 255, 255, 0.94); --prayer-row-border: #E6E1DC; --active-prayer-bg: linear-gradient(90deg, rgba(35, 117, 162, 0.14) 0%, rgba(59, 107, 74, 0.05) 60%, transparent 100%); --active-prayer-bg-start: rgba(35, 117, 162, 0.16); --active-prayer-bg-end: rgba(35, 117, 162, 0.02); --active-prayer-border: #2375A2; --active-prayer-glow: 0 2px 12px rgba(35, 117, 162, 0.20); --active-prayer-text: #124766; --active-prayer-muted: #3D5465; --active-prayer-time: #124766; --active-prayer-start: #2375A2; --active-prayer-end: #FFFFFF; --prayer-name-color: #142938; --adhan-color: #3D5465; --adhan-time-color: #243847; --iqamah-color: #1B648F; --iqamah-time-color: #124766; --countdown-badge-bg: #3B6B4A; --countdown-badge-text: #FFFFFF; --highlight-iqamah-bg: rgba(59, 107, 74, 0.10); --active-iqamah-bg: rgba(59, 107, 74, 0.18); --wisdom-card-bg: #FFFFFF; --wisdom-card-border: #D4CFC9; --wisdom-arabic-color: #264D34; --wisdom-trans-color: #142938; --wisdom-narrator-color: #3D5465; --wisdom-tag-color: #1B648F; --notice-card-bg: #FFFFFF; --notice-card-border: #D4CFC9; --poster-card-border: #D4CFC9; --special-card-border: #D4CFC9; --notice-title-color: #264D34; --notice-body-color: #142938; --notice-subcard-bg: #F5F0EB; --notice-subcard-border: #D4CFC9; --notice-janaza-bg: #F5F3FF; --notice-janaza-border: #A855F7; --notice-janaza-color: #581C87; --notice-arabic-header-color: #264D34; --notice-urgent-bg: #FEF2F2; --notice-urgent-border: #EF4444; --notice-urgent-color: #991B1B; --notice-event-bg: #EFF6FF; --notice-event-border: #3B82F6; --notice-event-color: #1E40AF; --notice-progress-start: #3B6B4A; --notice-progress-end: #1B648F; --poster-card-bg: #FFFFFF; --poster-caption-bg: rgba(255, 255, 255, 0.94); --poster-title-color: #142938; --poster-desc-color: #3D5465; --poster-badge-bg: #1B648F; --poster-badge-color: #FFFFFF; --poster-progress-start: #3B6B4A; --poster-progress-end: #1B648F; --ramadan-bg: #F5F0EB; --ramadan-slide-bg: #F5F0EB; --ramadan-card-bg: #FFFFFF; --ramadan-card-border: #D4CFC9; --ramadan-panel-bg: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 240, 235, 0.95) 100%); --ramadan-panel-border: #D4CFC9; --ramadan-panel-glow: 0 4px 20px rgba(0, 0, 0, 0.06); --ramadan-title-color: #124766; --ramadan-sub-color: #3D5465; --ramadan-accent-gold: #3B6B4A; --ramadan-accent-glow: none; --ramadan-countdown-bg: #F2F7F4; --ramadan-countdown-border: #3B6B4A; --ramadan-countdown-label: #264D34; --ramadan-time-color: #142938; --ramadan-unit-bg: #EFE8D8; --ramadan-unit-border: rgba(59, 107, 74, 0.25); --ramadan-unit-val: #142938; --ramadan-unit-lbl: #264D34; --ramadan-unit-sep: #3B6B4A; --sahoor-box-bg: #F0F7F4; --ramadan-suhoor-bg: #F0F7F4; --ramadan-suhoor-color: #1B648F; --iftar-box-bg: #FFF9EB; --ramadan-iftar-bg: #FFF9EB; --ramadan-iftar-color: #264D34; --ramadan-taraweeh-bg: rgba(245, 240, 235, 0.7); --ramadan-taraweeh-color: #142938; --ramadan-pill-bg: #FAFBF9; --ramadan-pill-border: rgba(212, 207, 201, 0.7); --ramadan-pill-lbl: #3D5465; --ramadan-pill-val: #142938; --ramadan-pill-hl-bg: #FFF9EB; --ramadan-pill-hl-border: #3B6B4A; --ramadan-pill-hl-lbl: #264D34; --ramadan-pill-hl-val: #142938; --ramadan-dua-bg: #FFFFFF; --ramadan-dua-border: rgba(59, 107, 74, 0.35); --ramadan-dua-tag-bg: rgba(35, 117, 162, 0.12); --ramadan-dua-tag-border: rgba(59, 107, 74, 0.22); --ramadan-dua-tag-color: #1B648F; --ramadan-dua-arabic: #264D34; --ramadan-dua-arabic-color: #264D34; --ramadan-dua-trans: #142938; --ramadan-dua-text-color: #142938; --ramadan-table-bg: #FFFFFF; --ramadan-subpage-header-bg: linear-gradient(135deg, #FFFFFF 0%, #EDF6FB 50%, #EDF4EE 100%); --ramadan-subpage-header-border: rgba(59, 107, 74, 0.25); --ramadan-subpage-header-title: #124766; --ramadan-subpage-header-sub: #3D5465; --ramadan-table-wrap-bg: rgba(245, 240, 235, 0.95); --ramadan-table-hdr-bg: linear-gradient(135deg, #FFFFFF 0%, #EDF6FB 100%); --ramadan-table-hdr-border: rgba(59, 107, 74, 0.25); --ramadan-table-hdr-color: #264D34; --ramadan-matrix-hdr-bg: linear-gradient(135deg, #FFFFFF 0%, #EDF6FB 100%); --ramadan-matrix-hdr-txt: #264D34; --ramadan-matrix-row-even: #FFFFFF; --ramadan-matrix-row-odd: #F8FAFC; --ramadan-matrix-row-hl: rgba(59, 107, 74, 0.16); --ramadan-matrix-row-border: rgba(0, 0, 0, 0.08); --ramadan-row-border: rgba(0, 0, 0, 0.08); --ramadan-row-even-bg: #FFFFFF; --ramadan-row-odd-bg: #F8FAFC; --ramadan-row-highlight: rgba(59, 107, 74, 0.16); --ramadan-row-27-bg: rgba(59, 107, 74, 0.14); --ramadan-row-27-border: #3B6B4A; --ramadan-row-odd-night-border: #2375A2; --ramadan-odd-night-badge-bg: rgba(35, 117, 162, 0.16); --ramadan-odd-night-badge-color: #124766; --ramadan-crescent-bg: radial-gradient(circle at 35% 35%, rgba(59, 107, 74, 0.20) 0%, rgba(35, 117, 162, 0.10) 100%); --ramadan-crescent-border: #3B6B4A; --ramadan-crescent-color: #264D34; --ramadan-ticker-bg: linear-gradient(135deg, #FFFFFF 0%, #EDF6FB 50%, #EDF4EE 100%); --ramadan-ticker-border: rgba(59, 107, 74, 0.25); --ramadan-ticker-label: #264D34; --ramadan-ticker-text: #142938; --special-card-bg: #FFFFFF; --special-card-border: #D4CFC9; --special-header-title-color: #142938; --special-title-color: #142938; --special-event-title-color: #1B648F; --special-arabic-title-color: #264D34; --special-dua-color: #264D34; --special-dua-bg: #F5F0EB; --special-dua-border: #D4CFC9; --mens-box-bg: #F5F0EB; --mens-border: #D4CFC9; --mens-title-color: #142938; --womens-box-bg: #F5F0EB; --womens-border: #D4CFC9; --womens-title-color: #1B648F; --special-time-value-color: #142938; --special-time-val-color: #142938; --special-guide-bg: #F5F0EB; --special-guide-border: #D4CFC9; --special-guide-title-color: #142938; --special-guide-text-color: #3D5465; --special-date-badge-bg: rgba(35, 117, 162, 0.12); --special-date-badge-color: #124766; --special-date-badge-border: #D4CFC9; --special-venue-badge-bg: rgba(35, 117, 162, 0.12); --special-venue-badge-color: #124766; --special-venue-badge-border: #D4CFC9; --special-bayan-badge-bg: rgba(59, 107, 74, 0.12); --special-bayan-badge-color: #264D34; --special-bayan-badge-border: #D4CFC9; --special-qr-box-bg: #FFFFFF; --qurban-card-bg: #FFFFFF; --qurban-card-border: #D4CFC9; --qurban-title-color: #264D34; --qurban-text-color: #142938; --qurban-muted-color: #3D5465; --qurban-price-color: #124766; --qurban-highlight-bg: rgba(35, 117, 162, 0.08); --qurban-highlight-border: #2375A2; --qurban-paid-bg: #16A34A; --qurban-paid-text: #FFFFFF; --qurban-pending-bg: #D97706; --qurban-pending-text: #FFFFFF; --qurban-open-bg: #1B648F; --qurban-open-text: #FFFFFF; --qurban-closed-bg: #EF4444; --qurban-closed-text: #FFFFFF; --qurban-phone-bg: #FFFFFF; --qurban-phone-text: #142938; --qurban-guide-bg: #F5F0EB; --qurban-guide-border: #D4CFC9; --qr-backdrop-bg: #FFFFFF; --qurban-progress-start: #3B6B4A; --qurban-progress-end: #1B648F; --porridge-slide-bg: radial-gradient(circle at 50% 0%, #FFFFFF 0%, #F5F0EB 45%, #E2EEF5 100%); --porridge-card-bg: #FFFFFF; --porridge-card-border: #D4CFC9; --porridge-day-num-color: #142938; --porridge-day-date-color: #3D5465; --porridge-price-color: #124766; --porridge-sponsor-color: #142938; --porridge-niyyah-color: #264D34; --porridge-header-stats-bg: rgba(0, 0, 0, 0.04); --porridge-sponsor-box-bg: rgba(0, 0, 0, 0.02); --porridge-open-pill-bg: #0F9D58; --porridge-open-pill-color: #FFFFFF; --porridge-open-border: #0F9D58; --porridge-booked-pill-bg: #DC2626; --porridge-booked-pill-color: #FFFFFF; --porridge-booked-border: #DC2626; --porridge-partial-pill-bg: #D97706; --porridge-partial-pill-color: #FFFFFF; --porridge-partial-border: #D97706; --dot-active-bg: #1B648F; --dot-active-color: #1B648F; --dot-active-glow: 0 0 14px rgba(27, 100, 143, 0.65); --dot-inactive-bg: rgba(26, 42, 58, 0.20); --dot-inactive-color: #D4CFC9; --dot-inactive-border: #D4CFC9; --dot-size: 9px; --dot-active-width: 28px; --slide-progress-start: #3B6B4A; --slide-progress-end: #1B648F; --slide-progress-track-bg: rgba(0, 0, 0, 0.08); --slide-progress-height: 6px; --slide-progress-show: block; --slide-progress-glow: 0 0 8px rgba(27, 100, 143, 0.4); --slide-counter-bg: #FFFFFF; --slide-counter-color: #1B648F; --slide-counter-border: #D4CFC9; --slide-counter-show: inline-flex; --color-success: #0F9D58; --color-success-soft: #E6F4EA; --color-warning: #D97706; --color-warning-soft: #FEF3C7; --color-danger: #EF4444; --color-danger-soft: #FEE2E2; /* Section 13: Forms & Documents Hub Tokens */ --forms-card-bg: #FFFFFF; --forms-card-border: #D4CFC9; --forms-title-color: #142938; --forms-desc-color: #3D5465; --forms-badge-color: #264D34; --forms-badge-bg: rgba(59, 107, 74, 0.14); --forms-deadline-color: #DC2626; --forms-deadline-bg: #FEF2F2; --forms-checklist-bg: #F8FAFC; --forms-checklist-border: #D4CFC9; --forms-checklist-item-color: #142938; --forms-qr-bg: #FFFFFF; --forms-qr-border: #D4CFC9; --forms-qr-box-bg: #FFFFFF; --forms-footer-bg: #F5F0EB; --forms-btn-bg: #1B648F; --forms-btn-color: #FFFFFF; --forms-progress-start: #3B6B4A; --forms-progress-end: #1B648F; /* Section 15: Social Media & Community Channels Tokens */ --social-card-bg: #FFFFFF; --social-card-border: #D4CFC9; --social-title-color: #142938; --social-desc-color: #3D5465; --social-btn-bg: #1B648F; --social-btn-color: #FFFFFF; --social-chip-bg: rgba(35, 117, 162, 0.10); --social-chip-border: #B6D4E5; --social-chip-color: #142938; --social-tv-bg: #FFFFFF; --social-tv-border: #D4CFC9; --forms-checklist-bg: #F8FAFC; --forms-checklist-border: #D4CFC9; --forms-qr-box-bg: #EEF4F7; --forms-footer-bg: #EEF4F7; --qurban-progress-track: #E2EBF0; /* Dynamic Section & Border Design Tokens */ --sidebar-bg: linear-gradient(180deg, #FFFFFF 0%, #F5F0EB 100%); --prayer-panel-bg: #FFFFFF; --masjid-card-bg: var(--prayer-card-bg, var(--tenant-surface)); --masjid-card-border: var(--prayer-card-border, var(--tenant-border)); --countdown-card-bg: var(--prayer-panel-bg, var(--tenant-surface)); --countdown-card-border: var(--prayer-card-border, var(--tenant-border)); --qr-card-bg: var(--prayer-panel-bg, var(--tenant-surface)); --qr-card-border: var(--prayer-card-border, var(--tenant-border)); --aux-card-bg: var(--prayer-card-bg, var(--tenant-surface)); --aux-card-border: var(--prayer-card-border, var(--tenant-border)); --wisdom-quran-border: rgba(27, 100, 143, 0.35); --wisdom-hadith-border: #D4CFC9; --wisdom-badge-bg: rgba(27, 100, 143, 0.12); --wisdom-badge-border: rgba(27, 100, 143, 0.35); --wisdom-hadith-badge-bg: rgba(0, 0, 0, 0.05); --wisdom-hadith-badge-border: #D4CFC9; --wisdom-hadith-badge-color: #0D9488; --wisdom-hadith-ref-bg: #F5F0EB; --wisdom-hadith-ref-border: #D4CFC9; --wisdom-hadith-ref-color: #0F766E; --masjid-loc-pill-bg: rgba(13, 148, 136, 0.10); --masjid-loc-pill-border: rgba(13, 148, 136, 0.3); --masjid-loc-pill-text: #0F766E; --hero-status-pill-bg: rgba(13, 148, 136, 0.12); --hero-status-pill-border: rgba(13, 148, 136, 0.35); --hero-status-pill-color: #0D9488; --hero-qr-badge-bg: rgba(13, 148, 136, 0.12); --hero-qr-badge-border: rgba(13, 148, 136, 0.3); --hero-qr-badge-color: #0D9488; } /* ============================================================================== 16. OTTOMAN SAPPHIRE & BRASS (ottoman-sapphire-brass) Character: Majestic • Classical • Sophisticated Deep sapphire night canvas + illuminated turquoise + antique brass highlights ============================================================================== */ [data-theme="ottoman-sapphire-brass"] { /* Surface & Canvas Tokens */ --tenant-bg: #071521; --tenant-surface: #0D2638; --tenant-surface-hover: #113249; --tenant-surface-elevated: #133852; --tenant-surface-strong: rgba(18, 103, 130, 0.3); --tenant-border: #29485A; --tenant-border-focus: #E4C45A; --tenant-border-subtle: rgba(201, 162, 39, 0.22); --tenant-bg-input: #05101a; --tenant-input-text: #F4F7F9; /* Typography Tokens */ --tenant-text-primary: #F4F7F9; --tenant-desc-color: #9DB5C2; --tenant-text-muted: #9DB5C2; --text-inverse: #071521; /* Brand Accents */ --tenant-primary: #126782; --tenant-primary-light: #238BA8; --tenant-gold: #C9A227; --tenant-gold-bright: #E4C45A; --tenant-gold-soft: rgba(201, 162, 39, 0.7); --tenant-selection-bg: rgba(201, 162, 39, 0.3); --tenant-selection-text: #FFFFFF; /* Aliases & Backward Compatibility */ --bg-primary: #071521; --bg-surface: #0D2638; --bg-elevated: #133852; --bg-surface-hover: #113249; --border-color: #29485A; --border-focus: #E4C45A; --text-primary: #F4F7F9; --text-muted: #9DB5C2; --primary-color: #126782; --accent-color: #C9A227; --primary: #126782; --primary-light: #238BA8; --gold: #C9A227; --gold-glow: 0 0 20px rgba(228, 196, 90, 0.85); --text-white: #F4F7F9; /* Header & Top Bar */ --header-bg: linear-gradient(135deg, #0D2638 0%, #126782 50%, #071521 100%); --header-start: #0D2638; --header-mid: #126782; --header-end: #071521; --header-title-color: #E4C45A; --header-clock-color: #F4F7F9; --header-date-color: #9DB5C2; --header-hijri-color: #E4C45A; --header-location-color: #E4C45A; --calligraphy-color: #E4C45A; --header-calligraphy-color: #E4C45A; --footer-bg: linear-gradient(135deg, #0D2638 0%, #126782 50%, #071521 100%); --footer-start: #0D2638; --footer-mid: #126782; --footer-end: #071521; --footer-text-color: #F4F7F9; --footer-muted-color: #9DB5C2; --footer-gold-color: #C9A227; /* Prayer Times & Highlights */ --prayer-card-bg: rgba(13, 38, 56, 0.75); --prayer-card-border: #29485A; --prayer-row-bg: rgba(13, 38, 56, 0.55); --prayer-row-border: rgba(41, 72, 90, 0.45); --active-prayer-bg: linear-gradient(90deg, rgba(201, 162, 39, 0.28) 0%, rgba(35, 139, 168, 0.08) 55%, transparent 100%); --active-prayer-border: #E4C45A; --active-prayer-glow: 0 0 20px rgba(228, 196, 90, 0.85); --active-prayer-text: #E4C45A; --active-prayer-muted: #9DB5C2; --active-prayer-time: #F4F7F9; --active-prayer-bg-start: rgba(201, 162, 39, 0.28); --active-prayer-bg-end: rgba(35, 139, 168, 0.04); --prayer-name-color: #F4F7F9; --adhan-color: #F4F7F9; --adhan-time-color: #F4F7F9; --iqamah-color: #C9A227; --iqamah-time-color: #E4C45A; --countdown-badge-bg: #C9A227; --countdown-badge-text: #071521; --highlight-iqamah-bg: rgba(201, 162, 39, 0.12); --active-iqamah-bg: rgba(201, 162, 39, 0.22); /* Carousel & Cards */ --wisdom-card-bg: #0D2638; --wisdom-card-border: #29485A; --wisdom-arabic-color: #E4C45A; --wisdom-trans-color: #F4F7F9; --wisdom-narrator-color: #9DB5C2; --wisdom-tag-color: #E4C45A; --notice-card-bg: #0D2638; --notice-card-border: #29485A; --poster-card-border: #29485A; --special-card-border: #29485A; --notice-title-color: #E4C45A; --notice-body-color: #F4F7F9; --notice-subcard-bg: rgba(7, 21, 33, 0.75); --notice-subcard-border: #29485A; --notice-janaza-bg: linear-gradient(150deg, rgba(99, 102, 241, 0.12) 0%, rgba(49, 46, 129, 0.25) 100%); --notice-janaza-border: rgba(99, 102, 241, 0.65); --notice-janaza-color: #C7D2FE; --notice-arabic-header-color: #E4C45A; --notice-urgent-bg: linear-gradient(150deg, rgba(239, 68, 68, 0.15) 0%, rgba(185, 28, 28, 0.3) 100%); --notice-urgent-border: #EF4444; --notice-urgent-color: #FCA5A5; --notice-event-bg: linear-gradient(150deg, rgba(35, 139, 168, 0.15) 0%, rgba(18, 103, 130, 0.3) 100%); --notice-event-border: #238BA8; --notice-event-color: #7DD3FC; --notice-progress-start: #C9A227; --notice-progress-end: #238BA8; /* Ramadan Fasting, Countdown & Timetable Tokens */ --ramadan-bg: radial-gradient(circle at 50% 0%, #0D2638 0%, #081C2B 45%, #071521 100%); --ramadan-slide-bg: radial-gradient(circle at 50% 0%, #0D2638 0%, #081C2B 45%, #071521 100%); --ramadan-card-bg: #0D2638; --ramadan-card-border: #29485A; --ramadan-panel-bg: linear-gradient(165deg, rgba(13, 38, 56, 0.95) 0%, rgba(7, 21, 33, 0.98) 100%); --ramadan-panel-border: #29485A; --ramadan-panel-glow: 0 14px 36px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(228, 196, 90, 0.12); --ramadan-title-color: #E4C45A; --ramadan-sub-color: #9DB5C2; --ramadan-accent-gold: #E4C45A; --ramadan-accent-glow: 0 0 14px rgba(228, 196, 90, 0.35); --ramadan-countdown-bg: linear-gradient(165deg, rgba(13, 38, 56, 0.85) 0%, rgba(7, 21, 33, 0.95) 100%); --ramadan-countdown-border: #C9A227; --ramadan-countdown-label: #E4C45A; --ramadan-time-color: #F4F7F9; --ramadan-unit-bg: rgba(7, 21, 33, 0.85); --ramadan-unit-border: rgba(201, 162, 39, 0.35); --ramadan-unit-val: #F4F7F9; --ramadan-unit-lbl: #E4C45A; --ramadan-unit-sep: #E4C45A; --sahoor-box-bg: rgba(7, 21, 33, 0.75); --iftar-box-bg: linear-gradient(135deg, rgba(201, 162, 39, 0.28) 0%, rgba(18, 103, 130, 0.2) 100%); --ramadan-pill-bg: rgba(7, 21, 33, 0.75); --ramadan-pill-border: rgba(41, 72, 90, 0.6); --ramadan-pill-lbl: #9DB5C2; --ramadan-pill-val: #F4F7F9; --ramadan-pill-hl-bg: linear-gradient(135deg, rgba(201, 162, 39, 0.28) 0%, rgba(18, 103, 130, 0.25) 100%); --ramadan-pill-hl-border: #E4C45A; --ramadan-pill-hl-lbl: #E4C45A; --ramadan-pill-hl-val: #FFFFFF; --ramadan-dua-bg: linear-gradient(165deg, rgba(13, 38, 56, 0.9) 0%, rgba(7, 21, 33, 0.95) 100%); --ramadan-dua-border: rgba(201, 162, 39, 0.35); --ramadan-dua-tag-bg: rgba(201, 162, 39, 0.18); --ramadan-dua-tag-border: rgba(201, 162, 39, 0.35); --ramadan-dua-tag-color: #E4C45A; --ramadan-dua-arabic: #E4C45A; --ramadan-dua-arabic-color: #E4C45A; --ramadan-dua-trans: #F4F7F9; --ramadan-dua-text-color: #F4F7F9; --ramadan-table-bg: #0D2638; --ramadan-subpage-header-bg: linear-gradient(135deg, rgba(13, 38, 56, 0.95) 0%, rgba(7, 21, 33, 0.98) 100%); --ramadan-subpage-header-border: rgba(201, 162, 39, 0.35); --ramadan-subpage-header-title: #E4C45A; --ramadan-subpage-header-sub: #9DB5C2; --ramadan-table-wrap-bg: rgba(7, 21, 33, 0.85); --ramadan-table-hdr-bg: linear-gradient(135deg, #126782 0%, #0D2638 100%); --ramadan-table-hdr-border: rgba(201, 162, 39, 0.35); --ramadan-table-hdr-color: #E4C45A; --ramadan-row-border: rgba(41, 72, 90, 0.4); --ramadan-row-even-bg: rgba(255, 255, 255, 0.02); --ramadan-row-odd-bg: rgba(255, 255, 255, 0.05); --ramadan-row-highlight: rgba(201, 162, 39, 0.22); --ramadan-row-27-bg: rgba(201, 162, 39, 0.2); --ramadan-row-27-border: #E4C45A; --ramadan-crescent-bg: radial-gradient(circle at 35% 35%, rgba(201, 162, 39, 0.25) 0%, rgba(18, 103, 130, 0.15) 100%); --ramadan-crescent-border: #C9A227; --ramadan-crescent-color: #E4C45A; --ramadan-ticker-bg: linear-gradient(90deg, rgba(7, 21, 33, 0.95) 0%, rgba(13, 38, 56, 0.95) 50%, rgba(7, 21, 33, 0.95) 100%); --ramadan-ticker-border: #29485A; --ramadan-ticker-label: #E4C45A; --ramadan-ticker-lbl: #E4C45A; --ramadan-ticker-text: #F4F7F9; --ramadan-ticker-txt: #F4F7F9; --special-card-bg: #0D2638; --special-card-border: #29485A; --special-header-title-color: #E4C45A; --special-title-color: #E4C45A; --special-event-title-color: #E4C45A; --special-dua-color: #E4C45A; --mens-box-bg: rgba(7, 21, 33, 0.8); --mens-border: #29485A; --mens-title-color: #38BDF8; --womens-box-bg: rgba(7, 21, 33, 0.8); --womens-border: #29485A; --womens-title-color: #F472B6; --special-time-value-color: #F4F7F9; --special-guide-bg: rgba(7, 21, 33, 0.85); --special-guide-border: rgba(201, 162, 39, 0.35); --special-guide-title-color: #E4C45A; --special-guide-text-color: #F4F7F9; --special-date-badge-bg: rgba(201, 162, 39, 0.2); --special-date-badge-color: #E4C45A; --qurban-price-color: #E4C45A; /* Ramadan Porridge Slide Tokens */ --porridge-slide-bg: radial-gradient(circle at 50% 0%, #0D2638 0%, #0A1E2D 45%, #071521 100%); --porridge-card-bg: #0D2638; --porridge-card-border: #29485A; --porridge-day-num-color: #F4F7F9; --porridge-day-date-color: #9DB5C2; --porridge-price-color: #E4C45A; --porridge-sponsor-color: #F4F7F9; --porridge-niyyah-color: #E4C45A; --porridge-header-stats-bg: rgba(7, 21, 33, 0.75); --porridge-sponsor-box-bg: rgba(5, 16, 26, 0.75); --porridge-open-pill-bg: rgba(35, 139, 168, 0.22); --porridge-open-pill-color: #38BDF8; --porridge-open-border: rgba(56, 189, 248, 0.5); --porridge-booked-pill-bg: rgba(239, 68, 68, 0.22); --porridge-booked-pill-color: #F87171; --porridge-booked-border: rgba(248, 113, 113, 0.5); --porridge-partial-pill-bg: rgba(201, 162, 39, 0.22); --porridge-partial-pill-color: #E4C45A; --porridge-partial-border: rgba(201, 162, 39, 0.5); /* Indicators & Glows */ --dot-active-bg: #E4C45A; --dot-active-color: #E4C45A; --dot-active-glow: 0 0 14px rgba(228, 196, 90, 0.8); --dot-inactive-bg: rgba(18, 103, 130, 0.4); --dot-inactive-color: #126782; --dot-inactive-border: rgba(41, 72, 90, 0.6); --dot-size: 9px; --dot-active-width: 28px; --slide-progress-start: #E4C45A; --slide-progress-end: #238BA8; --slide-progress-track-bg: rgba(41, 72, 90, 0.5); --slide-progress-height: 6px; --slide-progress-show: block; --slide-progress-glow: 0 0 10px rgba(228, 196, 90, 0.8); --slide-counter-bg: #0D2638; --slide-counter-color: #E4C45A; --slide-counter-border: #29485A; --slide-counter-show: inline-flex; --color-success: #238BA8; --color-success-soft: #9DB5C2; --color-warning: #E4C45A; --color-warning-soft: #F4F7F9; --color-danger: #F87171; --color-danger-soft: #FCA5A5; /* Section 13: Forms & Documents Hub Tokens */ --forms-card-bg: #0D2638; --forms-card-border: #29485A; --forms-title-color: #F4F7F9; --forms-desc-color: #9DB5C2; --forms-badge-color: #E4C45A; --forms-badge-bg: #071521; --forms-deadline-color: #F87171; --forms-deadline-bg: #3F1515; --forms-checklist-bg: #05101a; --forms-checklist-border: #29485A; --forms-qr-bg: #FFFFFF; --forms-qr-border: #29485A; --forms-btn-bg: #126782; --forms-btn-color: #FFFFFF; --forms-progress-start: #C9A227; --forms-progress-end: #238BA8; /* Section 15: Social Media & Community Channels Tokens */ --social-card-bg: #0D2638; --social-card-border: #29485A; --social-title-color: #FFFFFF; --social-desc-color: #9DB5C2; --social-btn-bg: #126782; --social-btn-color: #FFFFFF; --social-chip-bg: #071521; --social-chip-border: #C9A227; --social-chip-color: #F4F7F9; --social-tv-bg: #0D2638; --social-tv-border: #C9A227; /* Dynamic Section & Border Design Tokens */ --sidebar-bg: linear-gradient(180deg, rgba(13, 38, 56, 0.92) 0%, rgba(7, 21, 33, 0.95) 100%); --prayer-panel-bg: linear-gradient(145deg, rgba(13, 38, 56, 0.92), rgba(7, 21, 33, 0.95)); --masjid-card-bg: var(--prayer-card-bg, var(--tenant-surface)); --masjid-card-border: var(--prayer-card-border, var(--tenant-border)); --countdown-card-bg: var(--prayer-panel-bg, var(--tenant-surface)); --countdown-card-border: var(--prayer-card-border, var(--tenant-border)); --qr-card-bg: var(--prayer-panel-bg, var(--tenant-surface)); --qr-card-border: var(--prayer-card-border, var(--tenant-border)); --aux-card-bg: var(--prayer-card-bg, var(--tenant-surface)); --aux-card-border: var(--prayer-card-border, var(--tenant-border)); --wisdom-quran-border: rgba(201, 162, 39, 0.4); --wisdom-hadith-border: #29485A; --wisdom-badge-bg: rgba(201, 162, 39, 0.18); --wisdom-badge-border: rgba(201, 162, 39, 0.45); --wisdom-hadith-badge-bg: rgba(18, 103, 130, 0.22); --wisdom-hadith-badge-border: #29485A; --wisdom-hadith-badge-color: #38BDF8; --wisdom-hadith-ref-bg: rgba(13, 38, 56, 0.7); --wisdom-hadith-ref-border: #29485A; --wisdom-hadith-ref-color: #93C5FD; --masjid-loc-pill-bg: rgba(56, 189, 248, 0.12); --masjid-loc-pill-border: rgba(56, 189, 248, 0.35); --masjid-loc-pill-text: #93C5FD; --hero-status-pill-bg: rgba(56, 189, 248, 0.15); --hero-status-pill-border: rgba(56, 189, 248, 0.45); --hero-status-pill-color: #38BDF8; --hero-qr-badge-bg: rgba(56, 189, 248, 0.15); --hero-qr-badge-border: rgba(56, 189, 248, 0.35); --hero-qr-badge-color: #38BDF8; --qurban-card-bg: var(--tenant-surface); --qurban-card-border: var(--tenant-border); }