/* ============================================================ themes.css — Tema Warna Masjid-Kita Cara pakai: tambahkan class ke tag Default (hijau): Coklat emas: Ungu royal: Merah maroon: ============================================================ */ /* ── TEMA 1: COKLAT / EMAS KLASIK */ html.theme-coklat { --emerald: #6b4c1e; --emerald-mid: #8a6328; --emerald-lt: #c49a52; --emerald-xl: #f5edd8; --gold: #b8860b; --gold-lt: #f0c040; --gold-pale: #fdf8ec; --dark: #1a1208; --dark-2: #241a0c; --cream: #faf6ef; --text-main: #2e1f0a; --text-soft: #6b4c1e; --text-muted: #9a7c55; --border: rgba(107,76,30,0.15); --shadow-g: 0 20px 60px rgba(107,76,30,0.15); } /* ── TEMA 2: UNGU ROYAL */ html.theme-ungu { --emerald: #4a1d96; --emerald-mid: #6d28d9; --emerald-lt: #8b5cf6; --emerald-xl: #ede9fe; --gold: #b8972a; --gold-lt: #fcd34d; --gold-pale: #fefce8; --dark: #0f0a1e; --dark-2: #1a1030; --cream: #f5f3ff; --text-main: #1e1140; --text-soft: #4a3080; --text-muted: #7c6aaa; --border: rgba(74,29,150,0.15); --shadow-g: 0 20px 60px rgba(74,29,150,0.15); } /* ── TEMA 4: SAGE MIST─ */ html.theme-sage { --emerald: #3d6b50; --emerald-mid: #4e8463; --emerald-lt: #6ba583; --emerald-xl: #e8f5ee; --gold: #b8922a; --gold-lt: #d4a853; --gold-pale: #fdf8ec; --dark: #1a2d22; --dark-2: #243d2e; --cream: #f7f3ec; --text-main: #1e3228; --text-soft: #4a7060; --text-muted: #6b8b76; --border: rgba(61,107,80,0.15); --shadow-g: 0 20px 60px rgba(61,107,80,0.15); } /* ── TEMA 5: DUSTY BLUE */ html.theme-dusty { --emerald: #2c5f8a; --emerald-mid: #3a74a8; --emerald-lt: #5a8db5; --emerald-xl: #e6f0f8; --gold: #b8a030; --gold-lt: #e8c870; --gold-pale: #fefce8; --dark: #0f1e2d; --dark-2: #162840; --cream: #eef4f9; --text-main: #0f2233; --text-soft: #3a6080; --text-muted: #6a8fa8; --border: rgba(44,95,138,0.15); --shadow-g: 0 20px 60px rgba(44,95,138,0.15); } /* ── TEMA 6: WARM TAUPE */ html.theme-taupe { --emerald: #6b5c4e; --emerald-mid: #856e5e; --emerald-lt: #a08878; --emerald-xl: #f0ebe4; --gold: #b89060; --gold-lt: #d4b896; --gold-pale: #fdf8f2; --dark: #1c1510; --dark-2: #261c15; --cream: #f5f0ea; --text-main: #2a1e14; --text-soft: #6b5c4e; --text-muted: #9a8878; --border: rgba(107,92,78,0.15); --shadow-g: 0 20px 60px rgba(107,92,78,0.15); } /* ── TEMA 7: DEEP TEAL─ */ html.theme-teal { --emerald: #1a5c5c; --emerald-mid: #237070; --emerald-lt: #2d8b8b; --emerald-xl: #e0f4f4; --gold: #b89840; --gold-lt: #e0b86a; --gold-pale: #fef9ec; --dark: #0a1e1e; --dark-2: #102828; --cream: #eef7f7; --text-main: #0a2222; --text-soft: #2a6060; --text-muted: #4a8a8a; --border: rgba(26,92,92,0.15); --shadow-g: 0 20px 60px rgba(26,92,92,0.15); } /* ── TEMA 8: SLATE GOLD */ html.theme-slate { --emerald: #3d4f5c; --emerald-mid: #4e6475; --emerald-lt: #6a8496; --emerald-xl: #e8eef2; --gold: #a88c3a; --gold-lt: #c8a84b; --gold-pale: #fdf8ec; --dark: #141d24; --dark-2: #1c2830; --cream: #f0f3f5; --text-main: #141d24; --text-soft: #3d4f5c; --text-muted: #6a8496; --border: rgba(61,79,92,0.15); --shadow-g: 0 20px 60px rgba(61,79,92,0.15); } html.theme-merah { --emerald: #7f1d1d; --emerald-mid: #991b1b; --emerald-lt: #dc2626; --emerald-xl: #fee2e2; --gold: #b45309; --gold-lt: #fbbf24; --gold-pale: #fffbeb; --dark: #1a0808; --dark-2: #240f0f; --cream: #fff5f5; --text-main: #3b0808; --text-soft: #7f1d1d; --text-muted: #b05c5c; --border: rgba(127,29,29,0.15); --shadow-g: 0 20px 60px rgba(127,29,29,0.15); }