/* ============================================================ THEME.CSS — Mode Gelap/Terang untuk Website Utama File ini digabung bersama style.css ATAU style-red.css (keduanya mendefinisikan nama variabel warna yang sama), jadi cukup satu file ini saja yang perlu dijaga untuk mendukung dark mode di semua tema. Diaktifkan lewat atribut [data-theme="dark"] di , ditoggle oleh js/theme.js. ============================================================ */ /* ---------- Variabel ulang untuk mode gelap ---------- */ [data-theme="dark"] { --bg-main: #0b1220; --bg-card: #111a2e; --bg-glass: rgba(15, 23, 42, 0.75); --text-dark: #f1f5f9; --text-body: #cbd5e1; --text-muted: #94a3b8; --border-color: #1f2b45; --border-glow: rgba(59, 130, 246, 0.4); --primary-soft: rgba(59, 130, 246, 0.18); --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.35); --shadow-md: 0 12px 28px -6px rgba(0, 0, 0, 0.45); --shadow-hover: 0 22px 35px -10px rgba(0, 0, 0, 0.55); /* Warna "primary" bawaan dirancang buat teks di atas latar terang (contoh: link nav aktif, nama prodi di kartu mahasiswa) — di mode gelap diganti memakai --primary-light milik tema yang aktif supaya tetap kebaca jelas, baik di tema biru maupun merah. */ --primary: var(--primary-light); /* Mesh hero jadi gelap (dipakai juga oleh site-loader & auth-shell) */ --hero-mesh: linear-gradient(120deg, #0b1220 0%, #101a30 32%, #0d1524 55%, #170f1c 78%, #1a0f12 100%); /* Teks kecil beraksen (label tanggal, link "kembali") & status "danger/privat" dibuat lebih terang memakai warna terang milik tema yang sedang aktif, supaya tetap kebaca di atas latar gelap. */ --navy-soft: var(--primary-light); --accent-3: var(--primary-light); color-scheme: dark; } /* ---------- Elemen "kaca" (glassmorphism) berwarna langsung ---------- Bagian-bagian ini tidak memakai variabel (ditulis rgba putih/hitam langsung di style.css & style-red.css), jadi perlu disesuaikan manual supaya tidak jadi kotak putih menyala di atas latar gelap. */ [data-theme="dark"] .navbar { border-bottom-color: rgba(255, 255, 255, 0.08); box-shadow: 0 4px 25px -4px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .hero-overlay-grid { background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px); } [data-theme="dark"] .hero-ring { border-color: rgba(255, 255, 255, 0.15); } [data-theme="dark"] .hero-decor span { background: rgba(30, 41, 59, 0.65); border-color: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .hero-badge { background: rgba(30, 41, 59, 0.65); color: var(--primary-light); } [data-theme="dark"] .hero-stats { border-top-color: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .hero-chip { background: rgba(30, 41, 59, 0.65); border-color: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .hero-chip:hover { background: rgba(30, 41, 59, 0.9); } [data-theme="dark"] .hero-stat-icon { background: rgba(30, 41, 59, 0.7); border-color: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .hero-stat-item { background: rgba(30, 41, 59, 0.55); border-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .student-avatar, [data-theme="dark"] .student-card .student-avatar { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); } [data-theme="dark"] .card-media.no-photo .no-photo-icon { filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5)); } [data-theme="dark"] .footer-badge, [data-theme="dark"] .lightbox-close { border-color: rgba(255, 255, 255, 0.2); } /* Kartu intro "Profil Kampus" & status agenda yang di style-red.css memakai var(--primary-dark) untuk teksnya — samakan supaya tetap terang di gelap. */ [data-theme="dark"] .card-hero-about { background: linear-gradient(180deg, #131f36 0%, #0f1729 100%); } [data-theme="dark"] .status-mendatang { color: var(--primary-light) !important; } /* Form input (daftar akun mahasiswa, edit profil, kirim kesan & pesan) — defaultnya berwarna terang keras (#f8fafc/#fff) tanpa warna teks mengikuti tema, jadi perlu latar gelap + teks terang manual. */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-control:focus, [data-theme="dark"] .readonly-field { background: var(--bg-main); color: var(--text-dark); } [data-theme="dark"] .form-control::placeholder { color: var(--text-muted); } [data-theme="dark"] .auth-msg.success { color: #4ade80; } [data-theme="dark"] .auth-msg.error { color: #fca5a5; } /* ---------- Tombol toggle mode gelap/terang ---------- */ .theme-toggle-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 100px; border: 1.5px solid var(--border-color); background: var(--bg-card); color: var(--text-dark); font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: all 0.25s ease; white-space: nowrap; } .theme-toggle-btn:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); } .theme-toggle-btn [data-theme-icon] { font-size: 14px; line-height: 1; } /* Di navbar (index & beranda-merah-biru-putih), biarkan menyatu rapi di antara nav-link. */ .nav-links .theme-toggle-btn { margin-left: 6px; padding: 7px 12px; font-size: 12px; border-radius: 10px; flex-shrink: 0; } .nav-links li { display: flex; align-items: center; } /* Di atas kartu login/daftar (auth-topbar), sejajarkan dengan link "Kembali ke Web Utama". */ .auth-topbar { justify-content: space-between !important; } @media (max-width: 480px) { .theme-toggle-btn [data-theme-label] { display: none; } .theme-toggle-btn { padding: 8px 10px; } } /* ---------- Komponen UI baru: hero CTA, highlight, empty state ---------- */ [data-theme="dark"] .hero-cta-primary { background: linear-gradient(135deg, #FFD400, #fbbf24); color: #0f172a; } [data-theme="dark"] .hero-cta-ghost { background: rgba(15, 23, 42, 0.45); border-color: rgba(148, 163, 184, 0.35); color: #e2e8f0; } [data-theme="dark"] .hero-cta-soft { background: rgba(30, 41, 59, 0.75); border-color: rgba(100, 116, 139, 0.45); color: #cbd5e1; } [data-theme="dark"] .portal-hl-card { background: rgba(17, 26, 46, 0.92); border-color: rgba(51, 65, 85, 0.9); box-shadow: 0 14px 28px -18px rgba(0, 0, 0, 0.55); } [data-theme="dark"] .portal-hl-card:hover { border-color: rgba(96, 165, 250, 0.45); box-shadow: 0 18px 34px -16px rgba(37, 99, 235, 0.35); } [data-theme="dark"] .portal-hl-icon { background: linear-gradient(145deg, #1e3a5f, #312e81); } [data-theme="dark"] .portal-hl-card b { color: #f1f5f9; } [data-theme="dark"] .portal-hl-card p { color: #94a3b8; } [data-theme="dark"] .empty-state { background: linear-gradient(180deg, #111a2e 0%, #0b1220 100%); border-color: #334155; color: #94a3b8; } [data-theme="dark"] .empty-state b { color: #f1f5f9; } [data-theme="dark"] .card, [data-theme="dark"] .student-card { background: var(--bg-card); border-color: var(--border-color); box-shadow: var(--shadow-md); } [data-theme="dark"] .card:hover, [data-theme="dark"] .student-card:hover { border-color: rgba(96, 165, 250, 0.45); } [data-theme="dark"] .public-prodi-stats { background: rgba(17, 26, 46, 0.88); border-color: var(--border-color); } [data-theme="dark"] .pps-row:hover { background: rgba(30, 58, 95, 0.45); } [data-theme="dark"] .card-title-sm { color: #f1f5f9; } [data-theme="dark"] .card-desc { color: #94a3b8; } /* Pastikan toggle tema tetap kontras di kedua mode */ [data-theme="dark"] .theme-toggle-btn { background: rgba(30, 41, 59, 0.85); border-color: rgba(148, 163, 184, 0.35); color: #e2e8f0; }