/* ============================================ Tema Aplikasi — pilihan modern + tematik Aktif via atribut data-theme pada ============================================ */ /* 1. Emerald — Teal Segar (default) */ :root, [data-theme="emerald"] { --primary: #0d9488; --primary-dark: #0f766e; --primary-light: #ccfbf1; --primary-ring: rgba(13, 148, 136, 0.18); --accent: #d97706; --bg: #f1f5f9; --surface: #ffffff; --header-gradient: linear-gradient(135deg, #0f766e 0%, #0d9488 55%, #14b8a6 100%); --card-header-gradient: linear-gradient(135deg, #0f766e 0%, #0d9488 100%); --header-text: #ffffff; --header-text-muted: rgba(255, 255, 255, 0.78); --header-border: rgba(255, 255, 255, 0.14); --header-nav-hover: rgba(255, 255, 255, 0.16); --header-nav-active: rgba(255, 255, 255, 0.26); --login-gradient: linear-gradient(135deg, #f0fdfa 0%, #f1f5f9 50%, #ecfdf5 100%); --hadis-body-bg: linear-gradient(165deg, #ecfdf5 0%, #ffffff 42%, #f0fdfa 100%); --theme-color: #0d9488; } /* 2. Ocean — Biru Modern */ [data-theme="ocean"] { --primary: #2563eb; --primary-dark: #1d4ed8; --primary-light: #dbeafe; --primary-ring: rgba(37, 99, 235, 0.18); --accent: #0891b2; --bg: #eff6ff; --surface: #ffffff; --header-gradient: linear-gradient(135deg, #1e40af 0%, #2563eb 55%, #3b82f6 100%); --card-header-gradient: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%); --header-text: #ffffff; --header-text-muted: rgba(255, 255, 255, 0.78); --header-border: rgba(255, 255, 255, 0.14); --header-nav-hover: rgba(255, 255, 255, 0.16); --header-nav-active: rgba(255, 255, 255, 0.26); --login-gradient: linear-gradient(135deg, #eff6ff 0%, #f8fafc 50%, #e0f2fe 100%); --hadis-body-bg: linear-gradient(165deg, #dbeafe 0%, #ffffff 42%, #eff6ff 100%); --theme-color: #2563eb; } /* 3. Violet — Ungu Elegan */ [data-theme="violet"] { --primary: #7c3aed; --primary-dark: #6d28d9; --primary-light: #ede9fe; --primary-ring: rgba(124, 58, 237, 0.18); --accent: #db2777; --bg: #f5f3ff; --surface: #ffffff; --header-gradient: linear-gradient(135deg, #5b21b6 0%, #7c3aed 55%, #8b5cf6 100%); --card-header-gradient: linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%); --header-text: #ffffff; --header-text-muted: rgba(255, 255, 255, 0.78); --header-border: rgba(255, 255, 255, 0.14); --header-nav-hover: rgba(255, 255, 255, 0.16); --header-nav-active: rgba(255, 255, 255, 0.26); --login-gradient: linear-gradient(135deg, #f5f3ff 0%, #faf5ff 50%, #ede9fe 100%); --hadis-body-bg: linear-gradient(165deg, #ede9fe 0%, #ffffff 42%, #f5f3ff 100%); --theme-color: #7c3aed; } /* 4. Kemerdekaan — Merah Putih Nasional */ [data-theme="kemerdekaan"] { --primary: #ce1126; --primary-dark: #9b0d1c; --primary-light: #ffe4e6; --primary-ring: rgba(206, 17, 38, 0.2); --accent: #ffd700; --bg: #fff5f5; --surface: #ffffff; --header-gradient: linear-gradient(135deg, #9b0d1c 0%, #ce1126 45%, #e11d48 100%); --card-header-gradient: linear-gradient(135deg, #9b0d1c 0%, #ce1126 100%); --header-text: #ffffff; --header-text-muted: rgba(255, 255, 255, 0.82); --header-border: rgba(255, 255, 255, 0.18); --header-nav-hover: rgba(255, 255, 255, 0.18); --header-nav-active: rgba(255, 255, 255, 0.28); --login-gradient: linear-gradient(135deg, #fff5f5 0%, #ffffff 50%, #fef2f2 100%); --hadis-body-bg: linear-gradient(165deg, #ffe4e6 0%, #ffffff 42%, #fff5f5 100%); --theme-color: #ce1126; } /* 5. Ramadhan — Hijau Islami */ [data-theme="ramadhan"] { --primary: #0d6e4f; --primary-dark: #065f46; --primary-light: #d1fae5; --primary-ring: rgba(13, 110, 79, 0.2); --accent: #d4af37; --bg: #f0fdf4; --surface: #ffffff; --header-gradient: linear-gradient(135deg, #064e3b 0%, #0d6e4f 50%, #059669 100%); --card-header-gradient: linear-gradient(135deg, #065f46 0%, #0d6e4f 100%); --header-text: #ffffff; --header-text-muted: rgba(255, 255, 255, 0.8); --header-border: rgba(255, 255, 255, 0.16); --header-nav-hover: rgba(255, 255, 255, 0.16); --header-nav-active: rgba(255, 255, 255, 0.26); --login-gradient: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 50%, #fefce8 100%); --hadis-body-bg: linear-gradient(165deg, #d1fae5 0%, #ffffff 42%, #fefce8 100%); --theme-color: #0d6e4f; } /* Override utilitas Bootstrap agar mengikuti tema */ .text-primary { color: var(--primary) !important; } .btn-outline-primary { color: var(--primary); border-color: var(--primary); } .btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); } /* ============================================ Header & navigasi — ikut warna tema ============================================ */ /* Desktop navbar */ .app-navbar { position: relative; overflow: visible; background: var(--header-gradient) !important; border-bottom: 1px solid var(--header-border) !important; box-shadow: 0 4px 18px rgba(15, 23, 42, 0.12); } .header-ornament { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .header-ornament-content { position: relative; z-index: 3; } .app-navbar .app-brand, .app-navbar .app-brand:hover { color: var(--header-text); } .app-navbar .app-brand-title { color: var(--header-text); } .app-navbar .app-brand-sub { color: var(--header-text-muted); } .app-navbar .app-brand-icon { background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.28); color: var(--header-text); } .app-navbar .app-nav-link { color: var(--header-text-muted); } .app-navbar .app-nav-link:hover { color: var(--header-text); background: var(--header-nav-hover); } .app-navbar .app-nav-link.active { color: var(--header-text); background: var(--header-nav-active); font-weight: 600; } .app-navbar .search-wrap-icon { color: var(--header-text-muted); } .app-navbar .search-wrap .form-control { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.22); color: var(--header-text); } .app-navbar .search-wrap .form-control::placeholder { color: rgba(255, 255, 255, 0.62); } .app-navbar .search-wrap .form-control:focus { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.45); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12); color: var(--header-text); } .app-navbar .btn-outline-primary { color: var(--header-text); border-color: rgba(255, 255, 255, 0.55); background: transparent; } .app-navbar .btn-outline-primary:hover { background: rgba(255, 255, 255, 0.18); border-color: #fff; color: var(--header-text); } .app-navbar .btn-primary { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.35); color: var(--header-text); } .app-navbar .btn-primary:hover { background: rgba(255, 255, 255, 0.32); border-color: #fff; color: var(--header-text); } /* Mobile top bar */ .mobile-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1045; overflow: visible; background: var(--header-gradient) !important; border-bottom: 1px solid var(--header-border) !important; box-shadow: 0 2px 12px rgba(15, 23, 42, 0.1); } .mobile-header .mobile-brand, .mobile-header .mobile-brand:hover { color: var(--header-text); } .mobile-header .mobile-brand i { color: var(--header-text); } .mobile-header .btn-outline-danger { color: var(--header-text); border-color: rgba(255, 255, 255, 0.5); background: transparent; } .mobile-header .btn-outline-danger:hover { background: rgba(255, 255, 255, 0.15); color: var(--header-text); border-color: #fff; } .mobile-header .btn-outline-light { color: var(--header-text); border-color: rgba(255, 255, 255, 0.45); background: transparent; } .mobile-header .btn-outline-light:hover { background: rgba(255, 255, 255, 0.15); color: var(--header-text); border-color: #fff; } .mobile-header .btn-primary { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.35); color: var(--header-text); } /* Mobile search overlay */ .mobile-search-overlay-panel { background: var(--header-gradient) !important; border-bottom-color: var(--header-border) !important; } .mobile-search-overlay-head { color: var(--header-text); } .mobile-search-overlay-panel .search-wrap-icon { color: var(--header-text-muted); } .mobile-search-overlay-panel .form-control { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.22); color: var(--header-text); } .mobile-search-overlay-panel .form-control::placeholder { color: rgba(255, 255, 255, 0.62); } .mobile-search-overlay-panel .form-control:focus { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.4); color: var(--header-text); } .mobile-header .btn-outline-light { color: var(--header-text); border-color: rgba(255, 255, 255, 0.45); } .mobile-header .btn-outline-light:hover { background: rgba(255, 255, 255, 0.15); color: var(--header-text); border-color: #fff; } /* Dashboard toolbar — container transparan, kartu glass */ .dash-action-bar { background: transparent !important; border: none !important; box-shadow: none !important; } .dash-action-card { background: rgba(255, 255, 255, 0.75) !important; border-color: rgba(255, 255, 255, 0.45) !important; } [data-theme="ocean"] .dash-action-card { background: rgba(239, 246, 255, 0.75) !important; border-color: rgba(255, 255, 255, 0.5) !important; } [data-theme="violet"] .dash-action-card { background: rgba(245, 243, 255, 0.75) !important; border-color: rgba(255, 255, 255, 0.5) !important; } [data-theme="emerald"] .dash-action-card { background: rgba(240, 253, 250, 0.75) !important; border-color: rgba(255, 255, 255, 0.5) !important; } [data-theme="kemerdekaan"] .dash-action-card { background: rgba(255, 245, 245, 0.82) !important; border-color: rgba(255, 255, 255, 0.55) !important; } [data-theme="ramadhan"] .dash-action-card { background: rgba(240, 253, 244, 0.82) !important; border-color: rgba(255, 255, 255, 0.5) !important; } /* Mobile bottom navigation — floating dock */ .mobile-bottom-nav { background: transparent !important; border: none !important; box-shadow: none !important; } .mobile-bottom-nav-inner { background: var(--header-gradient) !important; border-color: var(--header-border) !important; box-shadow: 0 10px 36px rgba(15, 23, 42, 0.18), 0 1px 0 rgba(255, 255, 255, 0.22) inset !important; } .mobile-bottom-nav-inner::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent); } .mobile-bottom-nav .mobile-nav-item { color: var(--header-text-muted); } .mobile-bottom-nav .mobile-nav-item:hover { color: var(--header-text); } .mobile-bottom-nav .mobile-nav-item.active { color: var(--header-text); } .mobile-bottom-nav .mobile-nav-item.active .mobile-nav-icon { background: var(--header-nav-active); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12); } /* Gelombang halus di atas dock (tema Ocean) */ [data-theme="ocean"] .mobile-bottom-nav-inner::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cpath d='M0 12 Q150 0 300 12 T600 12 T900 12 T1200 12 V0 H0 Z' fill='rgba(255,255,255,0.1)'/%3E%3C/svg%3E") repeat-x top; background-size: 400px 10px; animation: ocean-wave 10s linear infinite; pointer-events: none; opacity: 0.7; } @media (prefers-reduced-motion: reduce) { [data-theme="ocean"] .mobile-bottom-nav-inner::after { animation: none; } } /* ============================================ Header kartu — card-header & panel ============================================ */ .card-header { position: relative; overflow: hidden; background: var(--card-header-gradient) !important; color: var(--header-text) !important; border-bottom: 1px solid var(--header-border) !important; font-weight: 600; } .card-header > :not(.header-ornament) { position: relative; z-index: 1; } .card-header i { opacity: 0.92; } /* Kartu halaman — strip header berwarna tema */ .themed-card.themed-bg-note { overflow: hidden; } .themed-card-head { position: relative; overflow: hidden; padding: 1rem 1.25rem; background: var(--card-header-gradient); color: var(--header-text); } .themed-card-head > :not(.header-ornament) { position: relative; z-index: 1; } .themed-card-head .themed-badge-dark { background: rgba(255, 255, 255, 0.2) !important; color: var(--header-text) !important; } .themed-card-head .themed-title-dark { color: var(--header-text) !important; } .themed-card-head .themed-divider-dark { background: rgba(255, 255, 255, 0.22) !important; margin-bottom: 0; } .themed-card-head .text-dark { color: var(--header-text-muted) !important; } .themed-card.themed-bg-note > .themed-card-body { padding: 1.25rem; } /* Dashboard: hadis, yasin, ultah card headers */ .hadis-card > .hadis-header, .hadis-card-inner .hadis-header, .yasiin-header, .ultah-header { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 0.75rem; margin: -1.25rem -1.5rem 0; padding: 1rem 1.5rem; background: var(--card-header-gradient); color: var(--header-text); } .hadis-card > .hadis-header { margin: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .hadis-header > :not(.header-ornament), .yasiin-header > :not(.header-ornament), .ultah-header > :not(.header-ornament) { position: relative; z-index: 1; } .hadis-header .hadis-badge, .yasiin-header .yasiin-badge, .ultah-header .ultah-title { color: var(--header-text) !important; } .hadis-header .hadis-badge, .yasiin-header .yasiin-badge { background: rgba(255, 255, 255, 0.2) !important; color: var(--header-text) !important; } .hadis-header .hadis-title, .yasiin-header .yasiin-title { color: var(--header-text) !important; } .hadis-header .hadis-bismillah, .yasiin-header .yasiin-bismillah { color: rgba(255, 255, 255, 0.92) !important; } .hadis-card .hadis-divider:first-of-type, .yasiin-card .yasiin-divider:first-of-type, .ultah-card .ultah-divider:first-of-type { margin-top: 1rem; } .ultah-header .ultah-subtitle { color: var(--header-text-muted) !important; } /* Quick menu cards — strip header atas */ .quick-card { overflow: hidden; } .quick-card-header { position: relative; overflow: hidden; margin: -1.15rem -1.15rem 0.75rem; padding: 0.85rem 1.15rem; background: var(--card-header-gradient); color: var(--header-text); display: flex; align-items: center; justify-content: space-between; } .quick-card-header > * { position: relative; z-index: 1; } .quick-card-header .quick-card-badge { background: rgba(255, 255, 255, 0.2) !important; color: var(--header-text) !important; } .quick-card-header .stat-icon i { color: var(--header-text) !important; } .quick-card-header + .quick-card-divider { display: none; } /* Stat cards — garis atas pakai gradient penuh */ .stat-card-islami::before { height: 5px; background: var(--card-header-gradient) !important; } .stat-bg-total::before { background: var(--card-header-gradient) !important; } /* Welcome banner dashboard */ .dash-welcome { position: relative; overflow: hidden; background: var(--header-gradient) !important; } .dash-welcome > :not(.header-ornament) { position: relative; z-index: 1; } /* Page title accent */ .page-title i.text-primary { color: var(--primary) !important; } /* ---- Pemilih tema (Pengaturan) ---- */ .theme-picker-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .theme-option { position: relative; cursor: pointer; margin: 0; } .theme-option input { position: absolute; opacity: 0; pointer-events: none; } .theme-option-card { border: 2px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); height: 100%; } .theme-option:hover .theme-option-card { transform: translateY(-2px); box-shadow: var(--shadow-md); } .theme-option input:checked ~ .theme-option-card { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); } .theme-option input:checked ~ .theme-option-check { display: flex; } .theme-preview { height: 88px; display: flex; align-items: flex-end; padding: 0.75rem; gap: 0.35rem; } .theme-preview-bar { height: 8px; border-radius: 999px; flex: 1; } .theme-preview-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.85); box-shadow: var(--shadow-sm); } .theme-option-body { padding: 0.85rem 1rem 1rem; border-top: 1px solid var(--border); } .theme-option-name { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.15rem; } .theme-option-desc { font-size: 0.8rem; color: var(--text-muted); margin: 0; } .theme-option-check { position: absolute; top: 0.65rem; right: 0.65rem; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff; display: none; align-items: center; justify-content: center; font-size: 0.85rem; box-shadow: var(--shadow-sm); } .theme-preview-emerald { background: linear-gradient(135deg, #0f766e, #14b8a6); } .theme-preview-emerald .theme-preview-bar { background: rgba(255,255,255,0.45); } .theme-preview-emerald .theme-preview-dot { background: #ccfbf1; } .theme-preview-ocean { background: linear-gradient(135deg, #1d4ed8, #3b82f6); } .theme-preview-ocean .theme-preview-bar { background: rgba(255,255,255,0.45); } .theme-preview-ocean .theme-preview-dot { background: #dbeafe; } .theme-preview-violet { background: linear-gradient(135deg, #6d28d9, #8b5cf6); } .theme-preview-violet .theme-preview-bar { background: rgba(255,255,255,0.45); } .theme-preview-violet .theme-preview-dot { background: #ede9fe; } .theme-preview-kemerdekaan { background: linear-gradient(135deg, #9b0d1c, #ce1126); } .theme-preview-kemerdekaan .theme-preview-bar { background: rgba(255,255,255,0.5); } .theme-preview-kemerdekaan .theme-preview-dot { background: #ffffff; } .theme-preview-ramadhan { background: linear-gradient(135deg, #065f46, #0d6e4f); } .theme-preview-ramadhan .theme-preview-bar { background: rgba(255,255,255,0.45); } .theme-preview-ramadhan .theme-preview-dot { background: #fef3c7; } /* ============================================ Ornamen animasi header — berbeda per tema ============================================ */ .header-ornament .ornament-particle { position: absolute; display: block; opacity: 0; } .header-ornament-compact .ornament-particle:nth-child(n+4) { display: none; } [data-theme="emerald"] .header-ornament-compact .ornament-particle:nth-child(1) { left: 12%; top: 35%; animation-delay: 0s; } [data-theme="emerald"] .header-ornament-compact .ornament-particle:nth-child(2) { left: 55%; top: 55%; animation-delay: -2s; } [data-theme="emerald"] .header-ornament-compact .ornament-particle:nth-child(3) { left: 82%; top: 28%; animation-delay: -4s; } [data-theme="ocean"] .header-ornament-compact .ornament-particle:nth-child(1) { left: 18%; bottom: -6px; animation-delay: 0s; } [data-theme="ocean"] .header-ornament-compact .ornament-particle:nth-child(2) { left: 50%; bottom: -6px; animation-delay: -1.5s; } [data-theme="ocean"] .header-ornament-compact .ornament-particle:nth-child(3) { left: 78%; bottom: -6px; animation-delay: -3s; } [data-theme="violet"] .header-ornament-compact .ornament-particle:nth-child(1) { left: 15%; top: 40%; animation-delay: 0s; } [data-theme="violet"] .header-ornament-compact .ornament-particle:nth-child(2) { left: 50%; top: 25%; animation-delay: -0.9s; } [data-theme="violet"] .header-ornament-compact .ornament-particle:nth-child(3) { left: 82%; top: 50%; animation-delay: -1.8s; } [data-theme="kemerdekaan"] .header-ornament-compact .ornament-particle:nth-child(1) { left: 14%; top: 38%; animation-delay: 0s; } [data-theme="kemerdekaan"] .header-ornament-compact .ornament-particle:nth-child(2) { left: 52%; top: 52%; animation-delay: -1.2s; } [data-theme="kemerdekaan"] .header-ornament-compact .ornament-particle:nth-child(3) { left: 84%; top: 30%; animation-delay: -2.4s; } [data-theme="ramadhan"] .header-ornament-compact .ornament-particle:nth-child(1) { left: 16%; top: 32%; animation-delay: 0s; } [data-theme="ramadhan"] .header-ornament-compact .ornament-particle:nth-child(2) { left: 50%; top: 48%; animation-delay: -1.1s; } [data-theme="ramadhan"] .header-ornament-compact .ornament-particle:nth-child(3) { left: 80%; top: 26%; animation-delay: -2.2s; } /* ---- Emerald: daun / embun melayang ---- */ [data-theme="emerald"] .app-navbar::after, [data-theme="emerald"] .mobile-header::after, [data-theme="emerald"] .themed-card-head::after, [data-theme="emerald"] .card-header:not(.bg-warning):not(.bg-opacity-25)::after, [data-theme="emerald"] .hadis-header::after, [data-theme="emerald"] .yasiin-header::after, [data-theme="emerald"] .ultah-header::after, [data-theme="emerald"] .ultah-slider-head::after, [data-theme="emerald"] .anggota-page-hero::after, [data-theme="emerald"] .anggota-info-toggle::after, [data-theme="emerald"] .tambah-page-hero::after, [data-theme="emerald"] .pohon-page-hero::after, [data-theme="emerald"] .quick-card-header::after, [data-theme="emerald"] .dash-welcome::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 120px 40px at 10% 120%, rgba(255,255,255,0.12), transparent 70%), radial-gradient(ellipse 90px 30px at 90% 130%, rgba(204,251,241,0.18), transparent 70%); animation: emerald-mist 10s ease-in-out infinite alternate; pointer-events: none; z-index: 0; } [data-theme="emerald"] .header-ornament .ornament-particle { width: 10px; height: 14px; background: rgba(255, 255, 255, 0.35); border-radius: 50% 0 50% 0; animation: emerald-leaf-float 14s ease-in-out infinite; } [data-theme="emerald"] .header-ornament-compact .ornament-particle { width: 7px; height: 10px; animation-name: emerald-leaf-float-compact; animation-duration: 11s; } [data-theme="emerald"] .header-ornament .ornament-particle:nth-child(1) { left: 8%; top: 20%; animation-delay: 0s; animation-duration: 12s; } [data-theme="emerald"] .header-ornament .ornament-particle:nth-child(2) { left: 22%; top: 55%; animation-delay: -2s; animation-duration: 15s; width: 8px; height: 11px; } [data-theme="emerald"] .header-ornament .ornament-particle:nth-child(3) { left: 45%; top: 15%; animation-delay: -4s; animation-duration: 13s; } [data-theme="emerald"] .header-ornament .ornament-particle:nth-child(4) { left: 68%; top: 45%; animation-delay: -1s; animation-duration: 16s; width: 7px; height: 10px; } [data-theme="emerald"] .header-ornament .ornament-particle:nth-child(5) { left: 82%; top: 25%; animation-delay: -6s; animation-duration: 11s; } [data-theme="emerald"] .header-ornament .ornament-particle:nth-child(6) { left: 93%; top: 60%; animation-delay: -3.5s; animation-duration: 14s; width: 6px; height: 9px; } @keyframes emerald-leaf-float { 0% { opacity: 0; transform: translate(0, 8px) rotate(0deg) scale(0.8); } 15% { opacity: 0.7; } 50% { transform: translate(18px, -6px) rotate(120deg) scale(1); } 85% { opacity: 0.5; } 100% { opacity: 0; transform: translate(36px, 4px) rotate(240deg) scale(0.75); } } @keyframes emerald-mist { 0% { opacity: 0.5; transform: translateX(0); } 100% { opacity: 0.85; transform: translateX(12px); } } @keyframes emerald-leaf-float-compact { 0% { opacity: 0; transform: translate(0, 4px) rotate(0deg) scale(0.75); } 20% { opacity: 0.65; } 55% { transform: translate(12px, -4px) rotate(90deg) scale(1); } 100% { opacity: 0; transform: translate(22px, 2px) rotate(180deg) scale(0.7); } } /* ---- Ocean: gelombang & gelembung naik ---- */ [data-theme="ocean"] .app-navbar::after, [data-theme="ocean"] .mobile-header::after, [data-theme="ocean"] .dash-action-bar::after, [data-theme="ocean"] .themed-card-head::after, [data-theme="ocean"] .card-header:not(.bg-warning):not(.bg-opacity-25)::after, [data-theme="ocean"] .hadis-header::after, [data-theme="ocean"] .yasiin-header::after, [data-theme="ocean"] .ultah-header::after, [data-theme="ocean"] .ultah-slider-head::after, [data-theme="ocean"] .anggota-page-hero::after, [data-theme="ocean"] .anggota-info-toggle::after, [data-theme="ocean"] .tambah-page-hero::after, [data-theme="ocean"] .pohon-page-hero::after, [data-theme="ocean"] .quick-card-header::after, [data-theme="ocean"] .dash-welcome::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q150 0 300 20 T600 20 T900 20 T1200 20 V40 H0 Z' fill='rgba(255,255,255,0.14)'/%3E%3C/svg%3E") repeat-x bottom; background-size: 600px 14px; animation: ocean-wave 8s linear infinite; pointer-events: none; z-index: 0; } [data-theme="ocean"] .header-ornament .ornament-particle { width: 8px; height: 8px; background: rgba(255, 255, 255, 0.45); border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); animation: ocean-bubble-rise 9s ease-in infinite; } [data-theme="ocean"] .header-ornament .ornament-particle:nth-child(1) { left: 12%; bottom: -10px; animation-delay: 0s; width: 6px; height: 6px; } [data-theme="ocean"] .header-ornament .ornament-particle:nth-child(2) { left: 28%; bottom: -10px; animation-delay: -1.5s; width: 10px; height: 10px; } [data-theme="ocean"] .header-ornament .ornament-particle:nth-child(3) { left: 50%; bottom: -10px; animation-delay: -3s; width: 7px; height: 7px; } [data-theme="ocean"] .header-ornament .ornament-particle:nth-child(4) { left: 72%; bottom: -10px; animation-delay: -4.5s; width: 9px; height: 9px; } [data-theme="ocean"] .header-ornament .ornament-particle:nth-child(5) { left: 88%; bottom: -10px; animation-delay: -2s; width: 5px; height: 5px; } [data-theme="ocean"] .header-ornament .ornament-particle:nth-child(6) { left: 38%; bottom: -10px; animation-delay: -6s; width: 8px; height: 8px; } [data-theme="ocean"] .header-ornament-compact .ornament-particle { width: 5px; height: 5px; animation-name: ocean-bubble-rise-compact; animation-duration: 7s; } [data-theme="ocean"] .themed-card-head::after, [data-theme="ocean"] .card-header:not(.bg-warning):not(.bg-opacity-25)::after, [data-theme="ocean"] .hadis-header::after, [data-theme="ocean"] .yasiin-header::after, [data-theme="ocean"] .ultah-header::after, [data-theme="ocean"] .ultah-slider-head::after, [data-theme="ocean"] .anggota-page-hero::after, [data-theme="ocean"] .anggota-info-toggle::after, [data-theme="ocean"] .tambah-page-hero::after, [data-theme="ocean"] .pohon-page-hero::after, [data-theme="ocean"] .quick-card-header::after, [data-theme="ocean"] .dash-welcome::after { height: 8px; background-size: 400px 8px; } @keyframes ocean-wave { 0% { background-position-x: 0; } 100% { background-position-x: 600px; } } @keyframes ocean-bubble-rise { 0% { opacity: 0; transform: translateY(0) scale(0.6); } 10% { opacity: 0.75; } 70% { opacity: 0.45; transform: translateY(-52px) scale(1); } 100% { opacity: 0; transform: translateY(-68px) scale(0.5); } } @keyframes ocean-bubble-rise-compact { 0% { opacity: 0; transform: translateY(0) scale(0.55); } 15% { opacity: 0.7; } 75% { opacity: 0.4; transform: translateY(-28px) scale(0.95); } 100% { opacity: 0; transform: translateY(-36px) scale(0.45); } } /* ---- Violet: bintang berkelip & aurora ---- */ [data-theme="violet"] .app-navbar::after, [data-theme="violet"] .mobile-header::after, [data-theme="violet"] .themed-card-head::after, [data-theme="violet"] .card-header:not(.bg-warning):not(.bg-opacity-25)::after, [data-theme="violet"] .hadis-header::after, [data-theme="violet"] .yasiin-header::after, [data-theme="violet"] .ultah-header::after, [data-theme="violet"] .ultah-slider-head::after, [data-theme="violet"] .anggota-page-hero::after, [data-theme="violet"] .anggota-info-toggle::after, [data-theme="violet"] .tambah-page-hero::after, [data-theme="violet"] .pohon-page-hero::after, [data-theme="violet"] .quick-card-header::after, [data-theme="violet"] .dash-welcome::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.07) 45%, transparent 60%), radial-gradient(circle at 20% 50%, rgba(237,233,254,0.15), transparent 45%), radial-gradient(circle at 80% 30%, rgba(219,39,119,0.12), transparent 40%); background-size: 200% 100%, 100% 100%, 100% 100%; animation: violet-aurora 12s ease-in-out infinite alternate; pointer-events: none; z-index: 0; } [data-theme="violet"] .header-ornament .ornament-particle { width: 4px; height: 4px; background: #fff; border-radius: 50%; box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.55); animation: violet-star-twinkle 3s ease-in-out infinite; } [data-theme="violet"] .header-ornament .ornament-particle:nth-child(1) { left: 10%; top: 30%; animation-delay: 0s; } [data-theme="violet"] .header-ornament .ornament-particle:nth-child(2) { left: 25%; top: 65%; animation-delay: -0.8s; width: 3px; height: 3px; } [data-theme="violet"] .header-ornament .ornament-particle:nth-child(3) { left: 42%; top: 22%; animation-delay: -1.6s; width: 5px; height: 5px; } [data-theme="violet"] .header-ornament .ornament-particle:nth-child(4) { left: 58%; top: 55%; animation-delay: -2.2s; } [data-theme="violet"] .header-ornament .ornament-particle:nth-child(5) { left: 75%; top: 28%; animation-delay: -1s; width: 3px; height: 3px; } [data-theme="violet"] .header-ornament .ornament-particle:nth-child(6) { left: 90%; top: 48%; animation-delay: -2.8s; width: 5px; height: 5px; } [data-theme="violet"] .header-ornament-compact .ornament-particle { width: 3px; height: 3px; animation-duration: 2.5s; } [data-theme="ocean"] .header-ornament-subtle .ornament-particle { width: 5px; height: 5px; animation-name: ocean-bubble-rise-compact; animation-duration: 7s; } [data-theme="violet"] .header-ornament .ornament-particle::after { content: ''; position: absolute; top: 50%; left: 50%; width: 200%; height: 1px; background: rgba(255,255,255,0.7); transform: translate(-50%, -50%); } [data-theme="violet"] .header-ornament .ornament-particle::before { content: ''; position: absolute; top: 50%; left: 50%; width: 1px; height: 200%; background: rgba(255,255,255,0.7); transform: translate(-50%, -50%); } @keyframes violet-aurora { 0% { background-position: 0% 0, 0 0, 0 0; opacity: 0.65; } 100% { background-position: 100% 0, 0 0, 0 0; opacity: 1; } } @keyframes violet-star-twinkle { 0%, 100% { opacity: 0.15; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.15); } } /* ---- Kemerdekaan: bendera merah putih berkibar ---- */ [data-theme="kemerdekaan"] .app-navbar::after, [data-theme="kemerdekaan"] .mobile-header::after, [data-theme="kemerdekaan"] .themed-card-head::after, [data-theme="kemerdekaan"] .card-header:not(.bg-warning):not(.bg-opacity-25)::after, [data-theme="kemerdekaan"] .hadis-header::after, [data-theme="kemerdekaan"] .yasiin-header::after, [data-theme="kemerdekaan"] .ultah-header::after, [data-theme="kemerdekaan"] .ultah-slider-head::after, [data-theme="kemerdekaan"] .anggota-page-hero::after, [data-theme="kemerdekaan"] .anggota-info-toggle::after, [data-theme="kemerdekaan"] .tambah-page-hero::after, [data-theme="kemerdekaan"] .pohon-page-hero::after, [data-theme="kemerdekaan"] .galeri-hero::after, [data-theme="kemerdekaan"] .buku-page-hero::after, [data-theme="kemerdekaan"] .quick-card-header::after, [data-theme="kemerdekaan"] .dash-welcome::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 100deg, rgba(255, 255, 255, 0.06) 0, rgba(255, 255, 255, 0.06) 18px, rgba(255, 255, 255, 0.14) 18px, rgba(255, 255, 255, 0.14) 36px ), radial-gradient(ellipse 140px 50px at 88% 110%, rgba(255, 215, 0, 0.12), transparent 70%); animation: kemerdekaan-stripe-drift 14s linear infinite; pointer-events: none; z-index: 0; } [data-theme="kemerdekaan"] .header-ornament .ornament-particle { width: 16px; height: 10px; border-radius: 1px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); transform-origin: left center; animation: kemerdekaan-flag-wave 9s ease-in-out infinite; } [data-theme="kemerdekaan"] .header-ornament .ornament-particle:nth-child(odd) { background: linear-gradient(180deg, #ce1126 0%, #ce1126 50%, #ffffff 50%, #ffffff 100%); } [data-theme="kemerdekaan"] .header-ornament .ornament-particle:nth-child(even) { background: #ffffff; border: 1px solid rgba(206, 17, 38, 0.35); } [data-theme="kemerdekaan"] .header-ornament .ornament-particle:nth-child(1) { left: 8%; top: 22%; animation-delay: 0s; } [data-theme="kemerdekaan"] .header-ornament .ornament-particle:nth-child(2) { left: 24%; top: 58%; animation-delay: -1.5s; width: 12px; height: 8px; } [data-theme="kemerdekaan"] .header-ornament .ornament-particle:nth-child(3) { left: 46%; top: 18%; animation-delay: -3s; } [data-theme="kemerdekaan"] .header-ornament .ornament-particle:nth-child(4) { left: 65%; top: 48%; animation-delay: -0.8s; width: 14px; height: 9px; } [data-theme="kemerdekaan"] .header-ornament .ornament-particle:nth-child(5) { left: 80%; top: 28%; animation-delay: -4.2s; } [data-theme="kemerdekaan"] .header-ornament .ornament-particle:nth-child(6) { left: 92%; top: 62%; animation-delay: -2.2s; width: 11px; height: 7px; } [data-theme="kemerdekaan"] .header-ornament-compact .ornament-particle { width: 12px; height: 8px; animation-name: kemerdekaan-flag-wave-compact; animation-duration: 7s; } @keyframes kemerdekaan-stripe-drift { 0% { background-position: 0 0, 0 0; opacity: 0.55; } 100% { background-position: 72px 0, 0 0; opacity: 0.9; } } @keyframes kemerdekaan-flag-wave { 0% { opacity: 0; transform: rotate(-8deg) translateX(-6px) scale(0.85); } 12% { opacity: 0.85; } 50% { transform: rotate(6deg) translateX(8px) scale(1); } 88% { opacity: 0.7; } 100% { opacity: 0; transform: rotate(-5deg) translateX(14px) scale(0.8); } } @keyframes kemerdekaan-flag-wave-compact { 0% { opacity: 0; transform: rotate(-6deg) translateX(-4px) scale(0.8); } 20% { opacity: 0.8; } 55% { transform: rotate(5deg) translateX(6px) scale(1); } 100% { opacity: 0; transform: rotate(-4deg) translateX(10px) scale(0.75); } } /* ---- Ramadhan: bulan sabit, bintang & siluet masjid ---- */ [data-theme="ramadhan"] .app-navbar::after, [data-theme="ramadhan"] .mobile-header::after, [data-theme="ramadhan"] .themed-card-head::after, [data-theme="ramadhan"] .card-header:not(.bg-warning):not(.bg-opacity-25)::after, [data-theme="ramadhan"] .hadis-header::after, [data-theme="ramadhan"] .yasiin-header::after, [data-theme="ramadhan"] .ultah-header::after, [data-theme="ramadhan"] .ultah-slider-head::after, [data-theme="ramadhan"] .anggota-page-hero::after, [data-theme="ramadhan"] .anggota-info-toggle::after, [data-theme="ramadhan"] .tambah-page-hero::after, [data-theme="ramadhan"] .pohon-page-hero::after, [data-theme="ramadhan"] .galeri-hero::after, [data-theme="ramadhan"] .buku-page-hero::after, [data-theme="ramadhan"] .quick-card-header::after, [data-theme="ramadhan"] .dash-welcome::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' preserveAspectRatio='none'%3E%3Cpath fill='rgba(255,255,255,0.12)' d='M0 24V14h8v10h6V10h8v14h6V8h8v16h6V12h8v12h6V6h8v18h6V14h8v10h6V10h8v14h6V8h8v16h6V12h8v12h6V16h8v8h6V12h8v12h6V18h8v6H0z'/%3E%3C/svg%3E") repeat-x bottom; background-size: 240px 22px; opacity: 0.85; pointer-events: none; z-index: 0; } [data-theme="ramadhan"] .header-ornament .ornament-particle { animation: ramadhan-float 11s ease-in-out infinite; } [data-theme="ramadhan"] .header-ornament .ornament-particle:nth-child(odd) { width: 11px; height: 11px; background: transparent; border-radius: 50%; box-shadow: 3px -2px 0 0 rgba(254, 243, 199, 0.92); filter: drop-shadow(0 0 4px rgba(254, 243, 199, 0.45)); } [data-theme="ramadhan"] .header-ornament .ornament-particle:nth-child(even) { width: 5px; height: 5px; background: #fef3c7; border-radius: 50%; box-shadow: 0 0 8px 1px rgba(254, 243, 199, 0.55); animation-name: ramadhan-star-twinkle; animation-duration: 3.5s; } [data-theme="ramadhan"] .header-ornament .ornament-particle:nth-child(3n) { width: 14px; height: 11px; background: rgba(254, 243, 199, 0.75); border-radius: 50% 50% 0 0 / 55% 55% 0 0; box-shadow: -5px 0 0 -1px rgba(254, 243, 199, 0.55), 5px 0 0 -1px rgba(254, 243, 199, 0.55), 0 0 8px rgba(254, 243, 199, 0.35); animation-name: ramadhan-mosque-float; animation-duration: 13s; } [data-theme="ramadhan"] .header-ornament .ornament-particle:nth-child(1) { left: 10%; top: 24%; animation-delay: 0s; } [data-theme="ramadhan"] .header-ornament .ornament-particle:nth-child(2) { left: 22%; top: 58%; animation-delay: -0.9s; } [data-theme="ramadhan"] .header-ornament .ornament-particle:nth-child(3) { left: 38%; top: 20%; animation-delay: -2s; } [data-theme="ramadhan"] .header-ornament .ornament-particle:nth-child(4) { left: 55%; top: 50%; animation-delay: -1.2s; } [data-theme="ramadhan"] .header-ornament .ornament-particle:nth-child(5) { left: 72%; top: 26%; animation-delay: -3s; } [data-theme="ramadhan"] .header-ornament .ornament-particle:nth-child(6) { left: 88%; top: 55%; animation-delay: -1.8s; } [data-theme="ramadhan"] .header-ornament-compact .ornament-particle:nth-child(odd) { width: 8px; height: 8px; } [data-theme="ramadhan"] .header-ornament-compact .ornament-particle:nth-child(3n) { width: 11px; height: 9px; animation-duration: 10s; } [data-theme="ramadhan"] .mobile-bottom-nav-inner::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8'%3E%3Cpath fill='rgba(254,243,199,0.2)' d='M0 8h8V4h4v4h4V2h4v6h4V0h4v8h4V3h4v5h4V1h4v7h4V5h4v3h4V8H0z'/%3E%3C/svg%3E") repeat-x; background-size: 120px 8px; opacity: 0.6; pointer-events: none; } @keyframes ramadhan-float { 0% { opacity: 0; transform: translateY(6px); } 15% { opacity: 0.85; } 50% { transform: translateY(-5px); } 100% { opacity: 0; transform: translateY(4px); } } @keyframes ramadhan-star-twinkle { 0%, 100% { opacity: 0.2; transform: scale(0.65); } 50% { opacity: 1; transform: scale(1.2); } } @keyframes ramadhan-mosque-float { 0% { opacity: 0; transform: translateY(8px) scale(0.85); } 18% { opacity: 0.8; } 55% { transform: translateY(-4px) scale(1); } 100% { opacity: 0; transform: translateY(6px) scale(0.8); } } /* Preview tema di pengaturan — mini animasi */ .theme-preview { position: relative; overflow: hidden; } .theme-preview-emerald::after { content: ''; position: absolute; width: 8px; height: 11px; background: rgba(255,255,255,0.5); border-radius: 50% 0 50% 0; top: 20%; left: 15%; animation: emerald-leaf-float 8s ease-in-out infinite; } .theme-preview-ocean::after { content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.55); bottom: 18%; left: 20%; animation: ocean-bubble-rise 5s ease-in infinite; } .theme-preview-violet::after { content: ''; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px #fff; top: 25%; right: 20%; animation: violet-star-twinkle 2.5s ease-in-out infinite; } .theme-preview-kemerdekaan::after { content: ''; position: absolute; width: 14px; height: 9px; top: 22%; left: 18%; border-radius: 1px; background: linear-gradient(180deg, #ce1126 50%, #fff 50%); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); animation: kemerdekaan-flag-wave-compact 6s ease-in-out infinite; } .theme-preview-ramadhan::after { content: ''; position: absolute; width: 10px; height: 8px; top: 20%; right: 18%; background: rgba(254, 243, 199, 0.85); border-radius: 50% 50% 0 0 / 55% 55% 0 0; box-shadow: -4px 0 0 -1px rgba(254, 243, 199, 0.5), 4px 0 0 -1px rgba(254, 243, 199, 0.5); animation: ramadhan-mosque-float 8s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .header-ornament .ornament-particle, .app-navbar::after, .mobile-header::after, .dash-action-bar::after, .themed-card-head::after, .card-header:not(.bg-warning):not(.bg-opacity-25)::after, .hadis-header::after, .yasiin-header::after, .ultah-header::after, .ultah-slider-head::after, .anggota-page-hero::after, .anggota-info-toggle::after, .tambah-page-hero::after, .pohon-page-hero::after, .quick-card-header::after, .dash-welcome::after, .theme-preview-emerald::after, .theme-preview-ocean::after, .theme-preview-violet::after, .theme-preview-kemerdekaan::after, .theme-preview-ramadhan::after, [data-theme="kemerdekaan"] .mobile-bottom-nav-inner::after, [data-theme="ramadhan"] .mobile-bottom-nav-inner::after { animation: none !important; opacity: 0.35; } } .login-page { background: var(--login-gradient) !important; }