@charset "UTF-8"; /* ============================================================================ DIPON CAT SYSTEM — VERSI 10.0 Berkas : assets/css/dipon.css Peran : Sistem desain bersama untuk seluruh halaman. ARAH DESAIN ----------- Terang, biru profesional, lapang. Nada visualnya mengambil bahasa yang sudah dikenal peserta SKD: biru untuk sistem, hijau untuk lolos ambang batas, kuning untuk ragu-ragu, merah untuk belum lolos. Warna di sini membawa arti, bukan sekadar hiasan. ELEMEN TANDA TANGAN ------------------- Bilah Ambang Batas (.ukur). Skor SKD tidak bermakna tanpa pembandingnya, maka setiap nilai selalu digambarkan bersama garis ambang yang harus dilewati. ZONA GERAK ---------- Animasi dibuat semarak di halaman non-ujian. Pada halaman ujian, kelas .tenang pada meredam seluruh gerak yang tidak perlu supaya peserta tetap fokus. Semua gerak otomatis mati bila sistem operasi pengguna meminta pengurangan animasi. URUTAN ISI ---------- 1. Token 9. Lencana 17. Bilah kemajuan 2. Dasar 10. Tabel 18. Kerangka muat 3. Tipografi 11. Pesan 19. Keadaan kosong 4. Tata letak 12. Notifikasi 20. Penomoran 5. Bilah atas 13. Dialog 21. Avatar 6. Tombol 14. Bilah ambang 22. Utilitas 7. Formulir 15. Kartu skor 23. Gerak 8. Kartu 16. Ruang ujian 24. Cetak ============================================================================ */ /* ========================================================================== 1. TOKEN ========================================================================== */ :root{ /* CATATAN TENTANG PENAMAAN TOKEN ------------------------------- Nama token di bawah masih memakai kata biru dan langit karena rancangan awal bertema biru. Nilainya kini ungu magenta, tetapi namanya sengaja tidak diubah: token ini dirujuk 132 kali di dua belas berkas, dan mengganti namanya berarti menyunting seluruh berkas itu hanya demi penamaan. Risikonya tidak sebanding. Untuk kode baru, tersedia nama yang lebih tepat di bagian bawah blok ini. Keduanya menunjuk nilai yang sama. */ /* PEMISAHAN PERAN --tinta DAN --judul ------------------------------------ Semula --tinta dipakai untuk dua hal sekaligus: sebagai warna tulisan pada judul dan angka besar, sekaligus sebagai warna latar pada penghitung waktu dan kop cetak. Pada tema terang keduanya kebetulan berjalan, sebab tulisan gelap memang pas di atas kertas putih. Pada tema gelap keduanya bertabrakan: tulisan gelap jatuh di atas latar yang juga gelap, sehingga nama aplikasi dan angka-angka besar lenyap sama sekali. Sekarang perannya dipisah. --tinta tetap menjadi latar paling gelap pada kedua tema, sedangkan --judul menjadi warna tulisan yang menyesuaikan diri: gelap di tema terang, terang di tema gelap. */ /* --- Warna inti --- */ --tinta:#2d0a2e; /* latar paling gelap: penghitung waktu, kop cetak */ --tinta-lembut:#3d1235; --judul:#2d0a2e; /* tulisan judul dan angka besar */ --biru:#7b2d8e; /* aksen utama, ungu magenta */ --biru-tua:#5c1f6b; /* keadaan tersentuh */ --biru-muda:#faf5ff; /* latar lembut */ --biru-garis:#e9d5ff; /* garis tepi lembut */ --langit:#b5379f; /* magenta pendamping untuk gradasi */ /* Nama yang lebih tepat, menunjuk nilai yang sama. Pakai ini untuk kode baru. */ --ungu:#7b2d8e; --ungu-tua:#5c1f6b; --ungu-muda:#faf5ff; --ungu-garis:#e9d5ff; --magenta:#b5379f; /* Ungu terang khusus untuk teks di atas latar gelap. Ungu utama terlalu redup bila diletakkan di atas kop, hanya 2,9 banding 1. */ --ungu-terang:#e9d5ff; /* Warna bermakna: diambil dari bahasa pengumuman hasil SKD */ /* Hijau dan kuning digelapkan dari nada semula. Warna sebelumnya memikul dua peran: sebagai tulisan di atas kertas putih, sekaligus sebagai isi tombol yang tulisannya putih. Pada kedua peran itu nilainya hanya sekitar tiga koma dua banding satu, di bawah ambang. Nada yang sekarang memenuhi keduanya sekaligus di angka lima banding satu, tanpa kehilangan kesan hijau dan kuningnya. */ --lulus:#15803d; --lulus-muda:#f0fdf4; --lulus-garis:#bbf7d0; --ragu:#b45309; --ragu-muda:#fffbeb; --ragu-garis:#fde68a; --gagal:#dc2626; --gagal-muda:#fef2f2; --gagal-garis:#fecaca; /* Warna tulisan di dalam lencana dan kotak pesan. Sebelumnya ditulis langsung sebagai nilai tetap, sehingga pada mode gelap tulisan hijau tua berada di atas latar hijau tua pula dan hampir tidak terbaca, hanya dua koma tujuh banding satu. Dijadikan token agar ikut menyesuaikan diri. */ --lulus-teks:#15803d; --ragu-teks:#b45309; --gagal-teks:#b91c1c; --biru-teks:#5c1f6b; /* Warna netral diberi sedikit rona ungu supaya menyatu dengan aksennya. Perubahannya sangat tipis dan tidak mengurangi keterbacaan, tetapi menghilangkan kesan dingin yang timbul bila abu kebiruan dipadukan dengan ungu. */ /* --- Permukaan --- */ --kertas:#faf8fb; --permukaan:#ffffff; --permukaan-2:#f4f1f6; /* --- Teks --- */ --teks:#2b2430; --redup:#6b6273; --samar:#7d7288; /* --- Garis --- */ --garis:#e8e2ec; --garis-tegas:#cec5d5; /* --- Huruf --- */ --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace; --t-xs:.72rem; --t-sm:.82rem; --t-md:.92rem; --t-lg:1.05rem; --t-xl:1.3rem; --t-2xl:1.7rem; --t-3xl:2.2rem; --t-4xl:3rem; /* --- Sudut --- */ --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:24px; --r-bulat:999px; /* --- Bayangan --- */ --bayang-1:0 1px 2px rgba(45,10,46,.07); --bayang-2:0 2px 6px rgba(45,10,46,.06), 0 10px 28px rgba(45,10,46,.07); --bayang-3:0 16px 44px rgba(45,10,46,.16); --bayang-biru:0 12px 30px rgba(123,45,142,.3); /* --- Gerak --- */ --cepat:.16s; --sedang:.28s; --lambat:.55s; --pegas:cubic-bezier(.34,1.42,.64,1); --halus:cubic-bezier(.22,1,.36,1); /* --- Jarak --- */ --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:24px; --sp6:32px; --sp7:48px; --sp8:64px; --lebar-isi:1080px; } /* ========================================================================== 2. DASAR ========================================================================== */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%; scroll-behavior:smooth} body{ margin:0; background:var(--kertas); color:var(--teks); font-family:var(--font); font-size:15px; line-height:1.65; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } img,svg{max-width:100%; height:auto; display:block} button,input,select,textarea{font:inherit; color:inherit} /* Cincin fokus yang selalu terlihat — syarat dasar aksesibilitas keyboard */ :focus-visible{ outline:3px solid rgba(123,45,142,.5); outline-offset:2px; border-radius:var(--r-sm); } ::selection{background:var(--biru-muda); color:var(--biru-tua)} /* Batang gulir yang serasi */ ::-webkit-scrollbar{width:11px; height:11px} ::-webkit-scrollbar-track{background:var(--permukaan-2)} ::-webkit-scrollbar-thumb{background:var(--garis-tegas); border-radius:var(--r-bulat); border:3px solid var(--permukaan-2)} ::-webkit-scrollbar-thumb:hover{background:var(--samar)} /* ========================================================================== 3. TIPOGRAFI ========================================================================== */ h1,h2,h3,h4,h5{margin:0 0 var(--sp3); font-weight:800; letter-spacing:-.02em; line-height:1.25} h1{font-size:var(--t-2xl)} h2{font-size:var(--t-xl)} h3{font-size:var(--t-lg)} h4{font-size:var(--t-md)} p{margin:0 0 var(--sp4)} p:last-child{margin-bottom:0} a{color:var(--biru); text-decoration:none; transition:color var(--cepat)} a:hover{color:var(--biru-tua)} code,kbd,.mono{font-family:var(--mono); font-size:.86em} code{background:var(--biru-muda); color:var(--biru-tua); padding:2px 7px; border-radius:var(--r-sm)} /* Angka yang lebarnya seragam — penting agar timer tidak bergoyang */ .angka,.timer,.skor,td.angka{font-family:var(--mono); font-variant-numeric:tabular-nums} /* Label bagian memakai --redup, bukan --samar. Pada rancangan sebelumnya label ini memakai warna paling pudar, dan kontrasnya hanya 2,6 banding 1 terhadap latar putih. Padahal ukurannya kecil dan hurufnya rapat, sehingga justru butuh kontras lebih tinggi. Kekurangan itu sudah ada sejak versi biru dan baru ketahuan saat palet diperiksa ulang. */ .mata{ font-size:var(--t-xs); font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:var(--redup); } .redup{color:var(--redup)} .samar{color:var(--samar)} mark.sorot{background:#fde68a; color:#3d1235; padding:1px 3px; border-radius:3px} /* ========================================================================== 4. TATA LETAK ========================================================================== */ .bungkus{width:100%; max-width:var(--lebar-isi); margin:0 auto; padding:0 var(--sp5)} .bungkus-sempit{max-width:720px} .bungkus-lebar{max-width:1240px} .halaman{padding:var(--sp6) 0 var(--sp8)} .kepala-halaman{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp4); flex-wrap:wrap; margin-bottom:var(--sp5); } .kepala-halaman h1{margin-bottom:2px} .kepala-halaman .sub{font-size:var(--t-sm); color:var(--redup)} .baris{display:flex; gap:var(--sp3); flex-wrap:wrap} .baris-rapat{gap:var(--sp2)} .baris-tengah{align-items:center} .baris-ujung{justify-content:space-between} .petak{display:grid; gap:var(--sp4)} .petak-2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .petak-3{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))} .petak-4{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))} /* ========================================================================== 5. BILAH ATAS ========================================================================== */ .bilah{ background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--garis); position:sticky; top:0; z-index:40; } .bilah-isi{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp4); min-height:66px; } .merek{display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:var(--t-lg); color:var(--judul); letter-spacing:-.02em} .merek:hover{color:var(--judul)} .merek-ikon{ width:34px; height:34px; border-radius:10px; flex:none; background:linear-gradient(135deg,var(--biru),var(--langit)); display:grid; place-items:center; color:#fff; font-size:1rem; box-shadow:0 6px 16px rgba(123,45,142,.34); } .menu{display:flex; gap:var(--sp1); align-items:center} .menu a{ padding:8px 14px; border-radius:var(--r-sm); font-size:var(--t-sm); font-weight:700; color:var(--redup); transition:all var(--cepat); } .menu a:hover{background:var(--permukaan-2); color:var(--teks)} .menu a.kini{background:var(--biru-muda); color:var(--biru-tua)} /* ========================================================================== 6. TOMBOL ========================================================================== */ .tbl{ position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 20px; border:1px solid transparent; border-radius:var(--r); font-size:var(--t-sm); font-weight:700; line-height:1.2; cursor:pointer; white-space:nowrap; text-decoration:none; transition:background var(--cepat), border-color var(--cepat), color var(--cepat), box-shadow var(--sedang), transform var(--sedang) var(--pegas); } .tbl:active{transform:scale(.96)} .tbl:disabled,.tbl.mati{opacity:.5; cursor:not-allowed; transform:none; box-shadow:none} .tbl-utama{background:var(--biru); color:#fff} .tbl-utama:hover{background:var(--biru-tua); color:#fff; transform:translateY(-2px); box-shadow:var(--bayang-biru)} .tbl-lulus{background:var(--lulus); color:#fff} .tbl-lulus:hover{background:#15803d; color:#fff; transform:translateY(-2px); box-shadow:0 12px 30px rgba(22,163,74,.26)} .tbl-gagal{background:var(--gagal); color:#fff} .tbl-gagal:hover{background:#b91c1c; color:#fff; transform:translateY(-2px); box-shadow:0 12px 30px rgba(220,38,38,.26)} .tbl-tinta{background:var(--tinta); color:#fff} .tbl-tinta:hover{background:var(--tinta-lembut); color:#fff; transform:translateY(-2px); box-shadow:var(--bayang-3)} .tbl-garis{background:var(--permukaan); color:var(--teks); border-color:var(--garis)} .tbl-garis:hover{border-color:var(--biru); color:var(--biru); transform:translateY(-2px); box-shadow:var(--bayang-2)} .tbl-hantu{background:transparent; color:var(--redup)} .tbl-hantu:hover{background:var(--permukaan-2); color:var(--teks)} .tbl-kecil{padding:7px 13px; font-size:var(--t-xs); border-radius:var(--r-sm)} .tbl-besar{padding:15px 30px; font-size:var(--t-md); border-radius:var(--r-lg)} .tbl-lebar{width:100%} .tbl-bulat{border-radius:var(--r-bulat)} /* Tombol lingkaran untuk deretan aksi di tabel */ .tbl-ikon{ width:34px; height:34px; padding:0; border-radius:10px; display:inline-grid; place-items:center; flex:none; } /* Riak sentuh — ditanam oleh dipon.js */ .riak{ position:absolute; border-radius:50%; transform:scale(0); background:rgba(255,255,255,.55); pointer-events:none; animation:riak .6s var(--halus); } .tbl-garis .riak,.tbl-hantu .riak{background:rgba(123,45,142,.24)} @keyframes riak{to{transform:scale(2.6); opacity:0}} /* Keadaan sibuk */ .tbl.sibuk{pointer-events:none; opacity:.75} .tbl.sibuk::after{ content:""; width:14px; height:14px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:putar .7s linear infinite; } @keyframes putar{to{transform:rotate(360deg)}} /* ========================================================================== 7. FORMULIR ========================================================================== */ .bidang{margin-bottom:var(--sp4)} .bidang:last-child{margin-bottom:0} .label{ display:block; margin-bottom:6px; font-size:var(--t-xs); font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--redup); } .label .wajib{color:var(--gagal); margin-left:2px} .isian{ display:block; width:100%; padding:12px 15px; background:var(--permukaan); border:1.5px solid var(--garis); border-radius:var(--r); font-size:var(--t-md); color:var(--teks); transition:border-color var(--cepat), box-shadow var(--cepat), background var(--cepat); } .isian::placeholder{color:var(--samar)} .isian:hover{border-color:var(--garis-tegas)} .isian:focus{ outline:none; border-color:var(--biru); box-shadow:0 0 0 4px rgba(123,45,142,.14); } .isian:disabled{background:var(--permukaan-2); color:var(--samar); cursor:not-allowed} textarea.isian{resize:vertical; min-height:110px; line-height:1.7} select.isian{ appearance:none; padding-right:40px; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b6273' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; } .isian.salah{border-color:var(--gagal)} .isian.salah:focus{box-shadow:0 0 0 4px rgba(220,38,38,.13)} .pesan-bidang{margin-top:6px; font-size:var(--t-xs); color:var(--redup)} .pesan-bidang.salah{color:var(--gagal); font-weight:600} /* Kelompok masukan, misalnya sandi dengan tombol lihat */ .gabung{display:flex} .gabung .isian{border-radius:var(--r) 0 0 var(--r); border-right:none} .gabung .tbl{border-radius:0 var(--r) var(--r) 0; border:1.5px solid var(--garis); border-left:none} .gabung .isian:focus + .tbl{border-color:var(--biru)} /* Pengukur kekuatan sandi */ .ukur-sandi{display:flex; gap:4px; margin-top:8px} .ukur-sandi i{ flex:1; height:4px; border-radius:var(--r-bulat); background:var(--garis); transition:background var(--sedang); } .ukur-sandi[data-skor="1"] i:nth-child(-n+1){background:var(--gagal)} .ukur-sandi[data-skor="2"] i:nth-child(-n+2){background:var(--ragu)} .ukur-sandi[data-skor="3"] i:nth-child(-n+3){background:var(--langit)} .ukur-sandi[data-skor="4"] i{background:var(--lulus)} /* Kotak centang dan tombol pilih */ .centang{display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-size:var(--t-sm)} .centang input{ width:18px; height:18px; accent-color:var(--biru); cursor:pointer; flex:none; } /* ========================================================================== 8. KARTU ========================================================================== */ .kartu{ background:var(--permukaan); border:1px solid var(--garis); border-radius:var(--r-lg); box-shadow:var(--bayang-2); overflow:hidden; } .kartu-pad{padding:var(--sp5)} .kartu + .kartu{margin-top:var(--sp4)} .kartu-kepala{ padding:var(--sp4) var(--sp5); border-bottom:1px solid var(--garis); display:flex; align-items:center; justify-content:space-between; gap:var(--sp3); } .kartu-kepala h2,.kartu-kepala h3{margin:0; font-size:var(--t-md)} .kartu-isi{padding:var(--sp5)} .kartu-kaki{ padding:var(--sp4) var(--sp5); border-top:1px solid var(--garis); background:var(--permukaan-2); } /* Kartu yang mengangkat saat disentuh — dipakai untuk tautan menu */ .kartu-tautan{ display:block; color:inherit; transition:transform var(--sedang) var(--halus), box-shadow var(--sedang), border-color var(--sedang); } .kartu-tautan:hover{ transform:translateY(-5px); box-shadow:var(--bayang-3); border-color:var(--biru-garis); color:inherit; } /* ========================================================================== 9. LENCANA ========================================================================== */ .tag{ display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:var(--r-bulat); font-size:var(--t-xs); font-weight:800; letter-spacing:.02em; white-space:nowrap; line-height:1.4; } .tag-biru{background:var(--biru-muda); color:var(--biru-tua)} .tag-lulus{background:var(--lulus-muda); color:var(--lulus-teks)} .tag-ragu{background:var(--ragu-muda); color:var(--ragu-teks)} .tag-gagal{background:var(--gagal-muda); color:var(--gagal-teks)} .tag-netral{background:var(--permukaan-2); color:var(--redup)} .tag-tinta{background:var(--tinta); color:#fff} /* Titik penanda keadaan */ .titik{width:7px; height:7px; border-radius:50%; flex:none; background:currentColor} .titik-hidup{background:var(--lulus); box-shadow:0 0 0 3px var(--lulus-muda); animation:denyut 2.2s ease-in-out infinite} @keyframes denyut{50%{box-shadow:0 0 0 6px rgba(22,163,74,.14)}} /* ========================================================================== 10. TABEL ========================================================================== */ .tabel-gulung{overflow-x:auto; -webkit-overflow-scrolling:touch} .tabel{width:100%; border-collapse:collapse; font-size:var(--t-sm)} .tabel th{ padding:12px 15px; text-align:left; background:var(--permukaan-2); font-size:var(--t-xs); font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--redup); white-space:nowrap; border-bottom:1px solid var(--garis); } .tabel td{padding:13px 15px; border-bottom:1px solid var(--permukaan-2); vertical-align:middle} .tabel tbody tr:last-child td{border-bottom:0} .tabel tbody tr{transition:background var(--cepat)} .tabel tbody tr:hover td{background:#fdfaff} .tabel .tengah{text-align:center} .tabel .kanan{text-align:right} /* Baris milik pengguna yang sedang melihat — dipakai di papan peringkat */ .tabel tr.saya td{background:var(--biru-muda)} .tabel tr.saya td:first-child{box-shadow:inset 3px 0 0 var(--biru)} /* ========================================================================== 11. PESAN ========================================================================== */ .pesan{ display:flex; gap:var(--sp3); align-items:flex-start; padding:15px 18px; border-radius:var(--r); font-size:var(--t-sm); line-height:1.65; margin-bottom:var(--sp4); border-left:4px solid; } .pesan b{display:block; margin-bottom:3px; font-size:var(--t-md)} .pesan .ikon{font-size:1.15rem; line-height:1.4; flex:none} .pesan-biru{background:var(--biru-muda); border-color:var(--biru); color:var(--biru-teks)} .pesan-lulus{background:var(--lulus-muda); border-color:var(--lulus); color:var(--lulus-teks)} .pesan-ragu{background:var(--ragu-muda); border-color:var(--ragu); color:var(--ragu-teks)} .pesan-gagal{background:var(--gagal-muda); border-color:var(--gagal); color:var(--gagal-teks)} /* ========================================================================== 12. NOTIFIKASI MELAYANG ========================================================================== */ #rak-toast{ position:fixed; top:20px; right:20px; z-index:9000; display:flex; flex-direction:column; gap:10px; max-width:calc(100vw - 40px); pointer-events:none; } .toast{ pointer-events:auto; display:flex; align-items:flex-start; gap:11px; min-width:280px; max-width:390px; padding:14px 17px; border-radius:var(--r); background:var(--permukaan); border-left:4px solid var(--biru); box-shadow:var(--bayang-3); font-size:var(--t-sm); font-weight:600; line-height:1.55; animation:toast-masuk .45s var(--pegas); } .toast .ikon{font-size:1.1rem; line-height:1.35; flex:none; color:var(--biru)} .toast .tutup{ margin-left:auto; background:none; border:0; cursor:pointer; color:var(--samar); font-size:1.1rem; line-height:1; padding:0 0 0 6px; } .toast .tutup:hover{color:var(--teks)} .toast.sukses{border-left-color:var(--lulus)} .toast.sukses .ikon{color:var(--lulus)} .toast.error{border-left-color:var(--gagal)} .toast.error .ikon{color:var(--gagal)} .toast.peringatan{border-left-color:var(--ragu)} .toast.peringatan .ikon{color:var(--ragu)} .toast.pergi{animation:toast-keluar .3s var(--halus) forwards} @keyframes toast-masuk{ from{opacity:0; transform:translateX(50px) scale(.94)} to{opacity:1; transform:none} } @keyframes toast-keluar{ to{opacity:0; transform:translateX(50px) scale(.94)} } /* ========================================================================== 13. DIALOG ========================================================================== */ .tirai{ position:fixed; inset:0; z-index:8000; background:rgba(45,10,46,.58); backdrop-filter:blur(4px); display:grid; place-items:center; padding:var(--sp4); animation:pudar-masuk var(--sedang) ease; } .tirai.pergi{animation:pudar-keluar var(--cepat) ease forwards} .dialog{ width:100%; max-width:430px; background:var(--permukaan); border-radius:var(--r-xl); box-shadow:var(--bayang-3); overflow:hidden; animation:dialog-masuk .4s var(--pegas); } .dialog-isi{padding:var(--sp6) var(--sp5) var(--sp5); text-align:center} .dialog-ikon{ width:60px; height:60px; border-radius:var(--r-lg); margin:0 auto var(--sp4); display:grid; place-items:center; font-size:1.7rem; } .dialog-ikon.tanya{background:var(--biru-muda); color:var(--biru)} .dialog-ikon.bahaya{background:var(--gagal-muda); color:var(--gagal)} .dialog-ikon.ingat{background:var(--ragu-muda); color:var(--ragu)} .dialog h3{margin:0 0 var(--sp2); font-size:var(--t-lg)} .dialog p{color:var(--redup); font-size:var(--t-sm); margin:0} .dialog-aksi{display:flex; gap:10px; padding:0 var(--sp5) var(--sp5)} .dialog-aksi .tbl{flex:1} @keyframes pudar-masuk{from{opacity:0} to{opacity:1}} @keyframes pudar-keluar{to{opacity:0}} @keyframes dialog-masuk{ from{opacity:0; transform:translateY(24px) scale(.94)} to{opacity:1; transform:none} } /* ========================================================================== 14. BILAH AMBANG BATAS — ELEMEN TANDA TANGAN -------------------------------------------------------------------------- Nilai SKD hanya bermakna bila dibandingkan ambang batasnya. Selisih dua poin bisa memisahkan lolos dan tidak. Karena itu setiap skor digambarkan sebagai bilah dengan garis ambang yang tegas, bukan sekadar angka. ========================================================================== */ .ukur{display:block} .ukur-atas{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp3); margin-bottom:7px; } .ukur-nama{font-size:var(--t-xs); font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--redup)} .ukur-nilai{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:var(--t-lg); font-weight:700; color:var(--teks); line-height:1; } .ukur-nilai small{font-size:var(--t-xs); color:var(--samar); font-weight:400} .ukur-rel{ position:relative; height:11px; border-radius:var(--r-bulat); background:var(--permukaan-2); overflow:visible; } .ukur-isi{ position:absolute; inset:0 auto 0 0; width:0; border-radius:var(--r-bulat); background:linear-gradient(90deg,var(--gagal),#f87171); transition:width 1.1s var(--halus), background var(--lambat); } .ukur.lolos .ukur-isi{background:linear-gradient(90deg,var(--lulus),#4ade80)} .ukur.kosong .ukur-isi{background:var(--garis-tegas)} /* Garis ambang — penanda vertikal yang harus dilewati */ .ukur-batas{ position:absolute; top:-5px; bottom:-5px; width:2px; background:var(--judul); border-radius:1px; z-index:2; } .ukur-batas::after{ content:attr(data-nilai); position:absolute; top:-19px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:9px; font-weight:700; color:var(--judul); background:var(--permukaan); padding:0 3px; border-radius:3px; white-space:nowrap; } /* Kilau saat ambang terlampaui */ .ukur.lolos .ukur-rel::after{ content:""; position:absolute; inset:0; border-radius:var(--r-bulat); box-shadow:0 0 0 3px var(--lulus-muda); animation:ukur-kilau .8s ease .9s; } @keyframes ukur-kilau{ 0%{box-shadow:0 0 0 0 rgba(22,163,74,.5)} 100%{box-shadow:0 0 0 9px rgba(22,163,74,0)} } .ukur-kaki{ display:flex; justify-content:space-between; margin-top:6px; font-size:var(--t-xs); color:var(--samar); } /* ========================================================================== 15. KARTU SKOR ========================================================================== */ .skor-kartu{ background:var(--permukaan); border:1px solid var(--garis); border-radius:var(--r-lg); padding:var(--sp5) var(--sp4); box-shadow:var(--bayang-2); position:relative; overflow:hidden; } /* Pita warna tipis penanda materi */ .skor-kartu::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--biru); } .skor-kartu.twk::before{background:linear-gradient(90deg,var(--biru),#c084fc)} .skor-kartu.tiu::before{background:linear-gradient(90deg,var(--lulus),#4ade80)} .skor-kartu.tkp::before{background:linear-gradient(90deg,var(--ragu),#fbbf24)} .skor-kartu.total::before{background:linear-gradient(90deg,var(--tinta),var(--langit))} .skor-nama{font-size:var(--t-xs); font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--redup); margin-bottom:var(--sp2)} .skor-angka{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:var(--t-3xl); font-weight:800; letter-spacing:-.04em; line-height:1; color:var(--judul); margin-bottom:var(--sp3); } .skor-kartu .ukur{margin-top:var(--sp5)} /* ========================================================================== 16. RUANG UJIAN -------------------------------------------------------------------------- Bagian ini sengaja lebih tenang. Peserta mengerjakan sampai 110 soal dalam 100 menit, jadi antarmuka harus menyingkir dan membiarkan soal jadi pusat perhatian. ========================================================================== */ /* --- Penanda waktu --- */ .jam{ display:inline-flex; align-items:center; gap:9px; padding:9px 17px; border-radius:var(--r); background:var(--tinta); color:#fff; font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:var(--t-xl); font-weight:700; letter-spacing:.02em; transition:background var(--sedang); } .jam .ikon{font-size:.85em; opacity:.7} .jam.menipis{background:var(--ragu)} .jam.kritis{background:var(--gagal); animation:jam-degup 1s ease-in-out infinite} @keyframes jam-degup{50%{opacity:.72}} /* --- Bilah kemajuan pengerjaan --- */ .jalur{height:5px; background:var(--permukaan-2); border-radius:var(--r-bulat); overflow:hidden} .jalur i{ display:block; height:100%; width:0; border-radius:var(--r-bulat); background:linear-gradient(90deg,var(--biru),var(--langit)); transition:width var(--lambat) var(--halus); } /* --- Tata letak ruang ujian --- Dijadikan kelas tersendiri, bukan gaya sisipan di tiap halaman, supaya perilaku responsifnya terjamin. Pada layar sempit navigasi soal berpindah ke bawah kartu soal, bukan berdesakan di sampingnya. */ .tata-ujian{ display:grid; gap:var(--sp4); grid-template-columns:1fr 290px; align-items:start; } .tata-ujian > .sisi{position:sticky; top:86px} /* --- Kartu soal --- */ .soal-kartu{ background:var(--permukaan); border:1px solid var(--garis); border-radius:var(--r-lg); box-shadow:var(--bayang-2); } .soal-kepala{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp3); flex-wrap:wrap; padding:var(--sp4) var(--sp5); border-bottom:1px solid var(--garis); } .soal-badan{padding:var(--sp5)} .soal-teks{font-size:var(--t-lg); line-height:1.75; color:var(--judul); margin-bottom:var(--sp5)} .soal-teks img{margin:var(--sp4) auto; border-radius:var(--r); box-shadow:var(--bayang-1)} /* --- Pilihan jawaban --- */ .opsi{display:grid; gap:10px} .opsi input{position:absolute; opacity:0; width:0; height:0} .opsi label{ display:flex; align-items:flex-start; gap:13px; padding:14px 17px; border:1.5px solid var(--garis); border-radius:var(--r); cursor:pointer; background:var(--permukaan); transition:border-color var(--cepat), background var(--cepat), transform var(--cepat); } .opsi label:hover{border-color:var(--biru-garis); background:#fdfaff} .opsi label:active{transform:scale(.995)} .opsi-huruf{ flex:none; width:28px; height:28px; border-radius:9px; display:grid; place-items:center; background:var(--permukaan-2); color:var(--redup); font-size:var(--t-sm); font-weight:800; transition:background var(--cepat), color var(--cepat); } .opsi-teks{flex:1; padding-top:2px; line-height:1.6} .opsi input:checked + label{border-color:var(--biru); background:var(--biru-muda)} .opsi input:checked + label .opsi-huruf{background:var(--biru); color:#fff} .opsi input:focus-visible + label{outline:3px solid rgba(123,45,142,.5); outline-offset:2px} /* Keadaan khusus halaman pembahasan */ .opsi label.benar{border-color:var(--lulus); background:var(--lulus-muda)} .opsi label.benar .opsi-huruf{background:var(--lulus); color:#fff} .opsi label.salah{border-color:var(--gagal); background:var(--gagal-muda)} .opsi label.salah .opsi-huruf{background:var(--gagal); color:#fff} .opsi-cap{ position:absolute; top:-9px; right:12px; padding:2px 9px; border-radius:var(--r-bulat); font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; } .opsi label{position:relative} .opsi-cap.kunci{background:var(--lulus); color:#fff} .opsi-cap.pilihan{background:var(--gagal); color:#fff} .opsi-cap.bobot{background:var(--ragu); color:#fff} /* --- Petak navigasi soal --- */ .peta{ display:grid; grid-template-columns:repeat(5,1fr); gap:7px; max-height:340px; overflow-y:auto; padding:2px; } .peta-butir{ aspect-ratio:1; display:grid; place-items:center; border:1.5px solid var(--garis); border-radius:9px; background:var(--permukaan); color:var(--redup); font-family:var(--mono); font-size:var(--t-xs); font-weight:700; cursor:pointer; transition:transform var(--cepat) var(--pegas), border-color var(--cepat), background var(--cepat), color var(--cepat); } .peta-butir:hover{border-color:var(--biru-garis); transform:scale(1.06)} .peta-butir.terisi{background:var(--lulus); border-color:var(--lulus); color:#fff} .peta-butir.ragu{background:var(--ragu); border-color:var(--ragu); color:#fff} .peta-butir.kini{ border-color:var(--judul); border-width:2.5px; transform:scale(1.1); box-shadow:var(--bayang-2); z-index:1; } .peta-butir.benar{background:var(--lulus); border-color:var(--lulus); color:#fff} .peta-butir.keliru{background:var(--gagal); border-color:var(--gagal); color:#fff} .peta-butir.lewat{background:var(--permukaan-2); color:var(--samar)} .peta-kunci{ display:flex; flex-wrap:wrap; gap:var(--sp3); margin-top:var(--sp4); padding-top:var(--sp3); border-top:1px solid var(--garis); font-size:var(--t-xs); color:var(--redup); } .peta-kunci span{display:inline-flex; align-items:center; gap:6px} .peta-kunci i{width:11px; height:11px; border-radius:4px; flex:none} .kunci-terisi{background:var(--lulus)} .kunci-ragu{background:var(--ragu)} .kunci-kosong{background:var(--permukaan-2); border:1.5px solid var(--garis)} /* --- Penanda simpan otomatis --- */ .simpan-tanda{ display:inline-flex; align-items:center; gap:6px; font-size:var(--t-xs); font-weight:700; color:var(--samar); transition:color var(--cepat); } .simpan-tanda.jalan{color:var(--biru)} .simpan-tanda.beres{color:var(--lulus)} .simpan-tanda.gagal{color:var(--gagal)} /* ========================================================================== 17. BILAH KEMAJUAN CINCIN ========================================================================== */ .cincin{position:relative; display:inline-grid; place-items:center} .cincin svg{transform:rotate(-90deg)} .cincin circle{fill:none; stroke-width:9; stroke-linecap:round} .cincin .alur{stroke:var(--permukaan-2)} .cincin .isi{ stroke:var(--biru); stroke-dasharray:var(--keliling); stroke-dashoffset:var(--keliling); transition:stroke-dashoffset 1.2s var(--halus); } .cincin.lolos .isi{stroke:var(--lulus)} .cincin.gagal .isi{stroke:var(--gagal)} .cincin-teks{ position:absolute; text-align:center; font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:800; font-size:var(--t-xl); color:var(--judul); line-height:1; } .cincin-teks small{display:block; font-family:var(--font); font-size:var(--t-xs); font-weight:700; color:var(--samar); margin-top:3px} /* ========================================================================== 18. KERANGKA MUAT ========================================================================== */ .kerangka{ background:linear-gradient(90deg,var(--permukaan-2) 25%,#ece5f0 37%,var(--permukaan-2) 63%); background-size:400% 100%; border-radius:var(--r-sm); animation:kilau 1.4s ease infinite; } .kerangka-baris{height:13px; margin-bottom:9px} .kerangka-baris:last-child{width:65%} @keyframes kilau{0%{background-position:100% 50%} 100%{background-position:0 50%}} /* ========================================================================== 19. KEADAAN KOSONG ========================================================================== */ .kosong{text-align:center; padding:var(--sp8) var(--sp5)} .kosong-ikon{ width:72px; height:72px; margin:0 auto var(--sp4); border-radius:var(--r-xl); background:var(--permukaan-2); display:grid; place-items:center; font-size:2rem; color:var(--samar); } .kosong h3{margin-bottom:var(--sp2)} .kosong p{color:var(--redup); font-size:var(--t-sm); max-width:400px; margin:0 auto var(--sp5)} /* ========================================================================== 20. PENOMORAN HALAMAN ========================================================================== */ .nomor{display:flex; gap:5px; justify-content:center; flex-wrap:wrap; margin-top:var(--sp5)} .nomor a,.nomor span{ min-width:38px; height:38px; padding:0 11px; display:inline-grid; place-items:center; border:1px solid var(--garis); border-radius:var(--r-sm); background:var(--permukaan); color:var(--redup); font-size:var(--t-sm); font-weight:700; transition:all var(--cepat); } .nomor a:hover{border-color:var(--biru); color:var(--biru); transform:translateY(-2px)} .nomor .kini{background:var(--biru); border-color:var(--biru); color:#fff} .nomor .putus{border:0; background:none; color:var(--samar)} /* ========================================================================== 21. AVATAR ========================================================================== */ .avatar{ width:40px; height:40px; border-radius:var(--r); flex:none; display:grid; place-items:center; background:linear-gradient(135deg,var(--biru),var(--langit)); color:#fff; font-size:var(--t-sm); font-weight:800; letter-spacing:.02em; } .avatar-kecil{width:30px; height:30px; font-size:var(--t-xs); border-radius:9px} .avatar-besar{width:58px; height:58px; font-size:var(--t-lg); border-radius:var(--r-lg)} .avatar-emas{background:linear-gradient(135deg,#f59e0b,#fbbf24)} .avatar-perak{background:linear-gradient(135deg,#64748b,#94a3b8)} .avatar-perunggu{background:linear-gradient(135deg,#b45309,#d97706)} /* ========================================================================== 22. UTILITAS ========================================================================== */ .tengah{text-align:center} .kanan{text-align:right} .tebal{font-weight:700} .tebal-x{font-weight:800} .kecil{font-size:var(--t-sm)} .mini{font-size:var(--t-xs)} .sembunyi{display:none !important} .penuh{width:100%} .tumbuh{flex:1} .tanpa-pilih{user-select:none} .mt1{margin-top:var(--sp1)} .mt2{margin-top:var(--sp2)} .mt3{margin-top:var(--sp3)} .mt4{margin-top:var(--sp4)} .mt5{margin-top:var(--sp5)} .mt6{margin-top:var(--sp6)} .mb0{margin-bottom:0} .mb2{margin-bottom:var(--sp2)} .mb3{margin-bottom:var(--sp3)} .mb4{margin-bottom:var(--sp4)} .mb5{margin-bottom:var(--sp5)} .pisah{height:1px; background:var(--garis); border:0; margin:var(--sp5) 0} .pisah-teks{ display:flex; align-items:center; gap:var(--sp3); margin:var(--sp5) 0; color:var(--samar); font-size:var(--t-xs); font-weight:700; text-transform:uppercase; letter-spacing:.08em; } .pisah-teks::before,.pisah-teks::after{content:""; flex:1; height:1px; background:var(--garis)} /* Hanya terbaca pembaca layar */ .baca-saja{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* ========================================================================== 23. GERAK -------------------------------------------------------------------------- Kelas .muncul disiapkan oleh dipon.js dan dinyalakan saat elemen masuk layar. Jeda bertingkat memberi kesan kartu-kartu berdatangan. ========================================================================== */ /* PENTING — MENGAPA ANIMASI INI DISALAKAN LEWAT JAVASCRIPT --------------------------------------------------------- Rancangan awal memberi .muncul nilai opacity nol, lalu JavaScript menambahkan .tampil untuk memunculkannya. Cara itu keliru: bila berkas dipon.js gagal dimuat, misalnya karena salah letak folder atau jaringan terputus, seluruh isi halaman ikut menghilang permanen. Pengunjung hanya melihat halaman kosong tanpa tahu apa yang salah. Sekarang keadaan bawaannya adalah TERLIHAT. Animasi hanya berjalan bila JavaScript sempat memasang penanda .siap-gerak pada elemen html. Tanpa JavaScript, isi halaman tetap tampil utuh, hanya saja tanpa gerakan. Isi selalu lebih penting daripada animasi. */ .muncul{opacity:1; transform:none} html.siap-gerak .muncul{opacity:0; transform:translateY(22px)} html.siap-gerak .muncul.tampil{ opacity:1; transform:none; transition:opacity var(--lambat) var(--halus), transform var(--lambat) var(--halus); } .tunda-1{transition-delay:.06s} .tunda-2{transition-delay:.12s} .tunda-3{transition-delay:.18s} .tunda-4{transition-delay:.24s} .tunda-5{transition-delay:.3s} .tunda-6{transition-delay:.36s} /* Pergantian soal — geser halus, tanpa kejutan */ .geser-masuk{animation:geser-masuk .34s var(--halus)} @keyframes geser-masuk{ from{opacity:0; transform:translateX(18px)} to{opacity:1; transform:none} } .geser-mundur{animation:geser-mundur .34s var(--halus)} @keyframes geser-mundur{ from{opacity:0; transform:translateX(-18px)} to{opacity:1; transform:none} } /* Kanvas perayaan */ #kanvas-rayakan{position:fixed; inset:0; pointer-events:none; z-index:9500} /* ZONA TENANG Dipasang pada halaman ujian. Gerak dekoratif dipadamkan, tetapi umpan balik yang berguna seperti pergantian soal tetap hidup. */ body.tenang .kartu-tautan:hover, body.tenang .tbl:hover{transform:none} body.tenang .muncul{opacity:1; transform:none} body.tenang .peta-butir:hover{transform:none} body.tenang .titik-hidup{animation:none} body.tenang .ukur.lolos .ukur-rel::after{animation:none} /* Jaring pengaman terakhir bagi pengunjung yang mematikan JavaScript. */ .tanpa-js .muncul{opacity:1 !important; transform:none !important} /* ========================================================================== 24. TANGGAP LAYAR ========================================================================== */ @media (max-width:860px){ :root{--t-3xl:1.9rem; --t-4xl:2.4rem} .bungkus{padding:0 var(--sp4)} .halaman{padding:var(--sp5) 0 var(--sp7)} .kepala-halaman{flex-direction:column; align-items:stretch} .tata-ujian{grid-template-columns:1fr} .tata-ujian > .sisi{position:static} .peta{grid-template-columns:repeat(8,1fr); max-height:190px} .kartu-pad,.kartu-isi{padding:var(--sp4)} .soal-badan{padding:var(--sp4)} .soal-teks{font-size:var(--t-md)} } @media (max-width:560px){ body{font-size:14.5px} .bilah-isi{min-height:58px} .menu a{padding:7px 10px; font-size:var(--t-xs)} .petak-4{grid-template-columns:repeat(2,1fr)} .peta{grid-template-columns:repeat(6,1fr)} .jam{font-size:var(--t-lg); padding:7px 13px} .dialog-aksi{flex-direction:column-reverse} #rak-toast{left:12px; right:12px; top:12px} .toast{min-width:0; max-width:none} .tbl{padding:11px 16px} } /* ========================================================================== 25. PENGURANGAN GERAK Menghormati pengaturan sistem pengguna. Semua animasi dipadamkan, tetapi tampilan akhir tetap benar karena kelas .tampil tetap dipasang. ========================================================================== */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .muncul{opacity:1; transform:none} } /* ========================================================================== 26. CETAK ========================================================================== */ @media print{ @page{size:A4; margin:14mm} body{background:#fff; font-size:11pt; color:#000} .bilah,.menu,.tbl,#rak-toast,.tirai,#kanvas-rayakan,.tanpa-cetak{display:none !important} .kartu{box-shadow:none; border:1px solid #cbd5e1; break-inside:avoid} .bungkus{max-width:none; padding:0} /* Warna latar wajib ikut tercetak agar status lulus tetap terbaca */ .tag,.ukur-isi,.pesan,.skor-kartu::before{ -webkit-print-color-adjust:exact; print-color-adjust:exact; } a[href^="http"]::after{content:" (" attr(href) ")"; font-size:9pt; color:#64748b} } /* ========================================================================== 27. HALAMAN AUTENTIKASI -------------------------------------------------------------------------- Kartu tunggal di tengah layar dengan latar bergradasi lembut. Dipakai oleh login, registrasi, lupa sandi, dan atur ulang sandi. ========================================================================== */ .auth{ min-height:100vh; display:grid; place-items:center; padding:var(--sp5) var(--sp4); position:relative; overflow:hidden; background: radial-gradient(1100px 620px at 12% -12%, #f3e8ff 0%, transparent 58%), radial-gradient(900px 560px at 105% 108%, #fae8ff 0%, transparent 55%), var(--kertas); } /* Dua bulatan warna yang bergerak sangat pelan di latar. Ditaruh di lapisan paling bawah supaya tidak mengganggu keterbacaan. */ .auth::before,.auth::after{ content:""; position:absolute; border-radius:50%; filter:blur(70px); opacity:.42; pointer-events:none; z-index:0; } .auth::before{ width:420px; height:420px; top:-130px; left:-110px; background:radial-gradient(circle,#d8b4fe,transparent 68%); animation:apung-a 17s ease-in-out infinite; } .auth::after{ width:360px; height:360px; bottom:-120px; right:-90px; background:radial-gradient(circle,#f0abfc,transparent 68%); animation:apung-b 21s ease-in-out infinite; } @keyframes apung-a{50%{transform:translate(46px,58px) scale(1.12)}} @keyframes apung-b{50%{transform:translate(-52px,-42px) scale(1.09)}} .auth-kotak{position:relative; z-index:1; width:100%; max-width:452px} .auth-kartu{ background:var(--permukaan); border:1px solid var(--garis); border-radius:var(--r-xl); box-shadow:0 24px 64px rgba(45,10,46,.12); padding:var(--sp6) var(--sp5) var(--sp5); animation:auth-masuk .55s var(--halus); } @keyframes auth-masuk{ from{opacity:0; transform:translateY(20px) scale(.98)} to{opacity:1; transform:none} } .auth-merek{text-align:center; margin-bottom:var(--sp6)} .auth-lambang{ width:62px; height:62px; margin:0 auto var(--sp4); border-radius:var(--r-lg); background:linear-gradient(135deg,var(--biru),var(--langit)); display:grid; place-items:center; color:#fff; font-size:1.7rem; box-shadow:0 12px 28px rgba(123,45,142,.36); } .auth-nama{ font-size:var(--t-xl); font-weight:800; letter-spacing:-.03em; color:var(--judul); margin-bottom:3px; } .auth-sub{font-size:var(--t-sm); color:var(--redup)} .auth-kaki{ text-align:center; margin-top:var(--sp5); padding-top:var(--sp4); border-top:1px solid var(--garis); font-size:var(--t-sm); color:var(--redup); } .auth-kaki a{font-weight:700} .auth-cap{ text-align:center; margin-top:var(--sp4); font-size:var(--t-xs); color:var(--samar); } /* Kotak rincian pembayaran pada dialog aktivasi */ .bayar{ text-align:left; background:var(--permukaan-2); border-left:4px solid var(--biru); border-radius:var(--r); padding:var(--sp4); font-size:var(--t-sm); } .bayar-baris{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:7px 0; border-bottom:1px dashed var(--garis); } .bayar-baris:last-child{border-bottom:0} .bayar-label{color:var(--redup); min-width:88px; font-size:var(--t-xs); font-weight:700} .bayar-nilai{font-family:var(--mono); font-weight:700; color:var(--judul); letter-spacing:.02em} .harga{ text-align:center; padding:var(--sp4); background:var(--biru-muda); border:1.5px dashed var(--biru-garis); border-radius:var(--r); margin:var(--sp4) 0; } .harga b{ display:block; font-family:var(--mono); font-size:var(--t-2xl); font-weight:800; color:var(--biru-tua); letter-spacing:-.02em; line-height:1.2; } .harga span{font-size:var(--t-xs); color:var(--redup); font-weight:700} body.tenang .auth::before,body.tenang .auth::after{animation:none} @media (prefers-reduced-motion:reduce){ .auth::before,.auth::after{animation:none} } @media (max-width:520px){ .auth-kartu{padding:var(--sp5) var(--sp4)} .auth::before,.auth::after{display:none} } /* ========================================================================== 28. MODE GELAP -------------------------------------------------------------------------- MENGAPA ADA MODE INI Satu sesi simulasi berlangsung seratus menit, dan pengelola dapat berjam-jam menyunting bank soal. Latar putih terang selama itu membuat mata cepat lelah, terutama di ruangan yang penerangannya redup. PRINSIP YANG DIPAKAI Latar sengaja tidak hitam pekat. Putih di atas hitam menghasilkan selisih dua puluh satu banding satu, dan pada layar terang selisih sebesar itu membuat huruf tampak berpendar sehingga tepinya kabur. Rentang dua belas sampai enam belas banding satu jauh lebih nyaman dibaca lama. Teks utama pun bukan putih murni, melainkan putih keunguan yang sedikit diredam. Warna bermakna dicerahkan karena hijau dan merah pekat nyaris tidak terbaca di atas latar gelap. Batas kartu ditegaskan lewat garis tepi, bukan lewat perbedaan terang latar. Menaikkan terang latar kartu terlalu jauh membuat halaman terasa berkabut. CARA MENYALAKAN Atribut data-tema pada elemen html. Nilainya disimpan dalam cookie oleh berkas dipon.js dan dibaca kembali oleh PHP, sehingga halaman tidak pernah berkedip putih sesaat sebelum tema gelap diterapkan. ========================================================================== */ html[data-tema="gelap"]{ color-scheme:dark; /* --- Permukaan, memakai warna yang diminta --- */ --kertas:#2d0a2e; --permukaan:#3d1235; --permukaan-2:#4a1a42; /* Tulisan diredam sedikit dari rancangan awal. Semula tulisan utama mencapai empat belas setengah banding satu terhadap latar. Angka itu memenuhi standar dengan mudah, tetapi pada layar terang selisih sebesar itu membuat tepi huruf tampak berpendar. Rentang sebelas sampai dua belas banding satu lebih nyaman untuk dibaca berjam-jam. */ /* --- Teks --- */ --teks:#e3d6e7; --redup:#b9a4c0; --samar:#a08fa8; /* --- Garis, penegas batas kartu --- */ --garis:#52254a; --garis-tegas:#6b3560; /* --- Kop dan penghitung waktu tetap gelap --- */ --tinta:#1e0620; --tinta-lembut:#2d0a2e; /* Tulisan judul dan angka besar dibalik menjadi terang. Warnanya sedikit lebih terang daripada tulisan biasa supaya judul tetap menonjol, tetapi tidak putih murni. Putih murni pada latar gelap membuat huruf tampak berpendar dan justru melelahkan mata. */ --judul:#f5ecf7; /* --- Aksen --- Isi tombol tetap memakai ungu asli karena tulisan putih di atasnya terbaca delapan banding satu. Yang perlu dicerahkan hanya ungu yang dipakai sebagai teks atau tautan, sebab ungu pekat di atas latar gelap hanya mencapai dua koma tiga banding satu. */ --biru:#cf8ad8; --biru-tua:#e0aae8; --biru-muda:#4a1a4d; --biru-garis:#6b3560; --langit:#e879f9; --ungu:#cf8ad8; --ungu-tua:#e0aae8; --ungu-muda:#4a1a4d; --ungu-garis:#6b3560; --magenta:#e879f9; --ungu-terang:#f0abfc; /* Warna asli tetap tersedia untuk isian tombol dan bidang berwarna penuh */ --ungu-isi:#7b2d8e; --ungu-isi-tua:#983c9e; /* --- Warna bermakna, dicerahkan agar terbaca di latar gelap --- */ /* Latar kotak berwarna diberi rona keunguan. Warna aslinya, misalnya cokelat kekuningan untuk peringatan, tampak terpisah sendiri di tengah halaman berona ungu. Dengan rona yang diselaraskan, kotak-kotak itu tetap mudah dikenali tanpa terasa seperti tempelan dari rancangan lain. */ --lulus:#4ade80; --lulus-muda:#1c3327; --lulus-garis:#2f6b45; --ragu:#fbbf24; --ragu-muda:#3a2c1a; --ragu-garis:#7a5c22; --gagal:#fb7185; --gagal-muda:#3d1c2c; --gagal-garis:#7f2f44; /* Tulisan di dalam lencana ikut dicerahkan */ --lulus-teks:#86efac; --ragu-teks:#fcd34d; --gagal-teks:#fda4af; --biru-teks:#e0aae8; /* --- Bayangan dipertegas, sebab bayangan halus tidak terlihat di latar gelap --- */ --bayang-1:0 1px 2px rgba(0,0,0,.4); --bayang-2:0 2px 8px rgba(0,0,0,.35), 0 12px 30px rgba(0,0,0,.3); --bayang-3:0 18px 48px rgba(0,0,0,.5); --bayang-biru:0 12px 30px rgba(207,138,216,.22); } /* --- Penyesuaian yang tidak cukup ditangani lewat token --- */ /* Bilah atas ikut gelap, sekaligus tetap tembus pandang */ html[data-tema="gelap"] .bilah{ background:rgba(30,6,32,.88); border-bottom-color:var(--garis); } /* Tombol utama memakai ungu asli dengan tulisan putih */ html[data-tema="gelap"] .tbl-utama{ background:var(--ungu-isi); color:#fff; } html[data-tema="gelap"] .tbl-utama:hover{ background:var(--ungu-isi-tua); color:#fff; } /* Tombol bertinta menjadi lebih terang agar tidak lenyap di latar gelap */ html[data-tema="gelap"] .tbl-tinta{ background:var(--permukaan-2); color:var(--teks); border-color:var(--garis-tegas); } html[data-tema="gelap"] .tbl-tinta:hover{ background:#5a2450; color:#fff; } /* Latar halaman masuk dan daftar */ html[data-tema="gelap"] .auth{ background: radial-gradient(1100px 620px at 12% -12%, #4a1a4d 0%, transparent 58%), radial-gradient(900px 560px at 105% 108%, #3d1235 0%, transparent 55%), var(--kertas); } html[data-tema="gelap"] .auth::before{ background:radial-gradient(circle,#6b3560,transparent 68%); opacity:.5; } html[data-tema="gelap"] .auth::after{ background:radial-gradient(circle,#7b2d8e,transparent 68%); opacity:.45; } /* Gambar soal sedikit diredam agar tidak menyilaukan di antara latar gelap */ html[data-tema="gelap"] .soal-teks img, html[data-tema="gelap"] .opsi-teks img{ filter:brightness(.92); } /* Baris tabel saat disentuh */ html[data-tema="gelap"] .tabel tbody tr:hover td{ background:#48193f; } html[data-tema="gelap"] .tabel tr.saya td{ background:#4a1a4d; } /* Pilihan jawaban saat disentuh */ html[data-tema="gelap"] .opsi label:hover{ background:#48193f; } /* Kilau kerangka muat */ html[data-tema="gelap"] .kerangka{ background:linear-gradient(90deg,var(--permukaan-2) 25%,#5a2450 37%,var(--permukaan-2) 63%); } /* Tirai dialog */ html[data-tema="gelap"] .tirai{ background:rgba(15,3,16,.72); } /* Sorot hasil pencarian */ html[data-tema="gelap"] mark.sorot{ background:#7c5a10; color:#fde68a; } /* Batang gulir */ html[data-tema="gelap"] ::-webkit-scrollbar-track{ background:var(--kertas); } html[data-tema="gelap"] ::-webkit-scrollbar-thumb{ background:var(--garis-tegas); border-color:var(--kertas); } /* Kotak kode dan pohon berkas sudah gelap sejak semula, cukup diselaraskan */ html[data-tema="gelap"] code{ background:#4a1a4d; color:#e0aae8; } /* TULISAN DI ATAS BIDANG BERWARNA PENUH Warna hijau, kuning, dan merah sengaja dicerahkan pada tema gelap supaya terbaca ketika dipakai sebagai tulisan di atas latar gelap. Namun warna yang sama juga menjadi isi tombol dan penanda nomor soal, yang tulisannya putih. Putih di atas hijau terang hanya mencapai satu koma tujuh banding satu, praktis tidak terbaca. Persoalannya sama seperti pada --tinta: satu warna memikul dua peran yang saling bertentangan. Di sini penyelesaiannya membalik warna tulisannya, bukan meredupkan warna isinya, sebab warna isi itulah yang membuat penanda mudah dikenali sekilas. Hasilnya sembilan sampai sepuluh banding satu, jauh di atas ambang. */ html[data-tema="gelap"] .tbl-lulus, html[data-tema="gelap"] .tbl-lulus:hover, html[data-tema="gelap"] .peta-butir.terisi, html[data-tema="gelap"] .peta-butir.benar, html[data-tema="gelap"] .opsi label.benar .opsi-huruf, html[data-tema="gelap"] .opsi-cap.kunci{ color:#0a2113; } html[data-tema="gelap"] .tbl-gagal, html[data-tema="gelap"] .tbl-gagal:hover, html[data-tema="gelap"] .peta-butir.keliru, html[data-tema="gelap"] .opsi label.salah .opsi-huruf, html[data-tema="gelap"] .opsi-cap.pilihan, html[data-tema="gelap"] .jam.kritis{ color:#2e0a12; } html[data-tema="gelap"] .peta-butir.ragu, html[data-tema="gelap"] .opsi-cap.bobot, html[data-tema="gelap"] .jam.menipis{ color:#2b1e05; } /* Huruf pilihan yang sedang terpilih memakai warna aksen sebagai latar. Pada tema gelap aksen itu berupa ungu muda, sehingga tulisannya pun dibalik menjadi gelap. */ html[data-tema="gelap"] .opsi input:checked + label .opsi-huruf, html[data-tema="gelap"] .avatar, html[data-tema="gelap"] .merek-ikon, html[data-tema="gelap"] .nomor .kini, html[data-tema="gelap"] .auth-lambang, html[data-tema="gelap"] .dialog-ikon.tanya{ color:#24072a; } /* Bulatan perayaan dan penanda hidup tidak memuat tulisan, jadi cukup diredam sedikit agar tidak terlalu menyala. */ html[data-tema="gelap"] .titik-hidup{ box-shadow:0 0 0 3px rgba(74,222,128,.16); } /* --- Tombol pengganti tema --- */ .tbl-tema{ width:34px; height:34px; padding:0; border-radius:10px; flex:none; display:inline-grid; place-items:center; cursor:pointer; background:var(--permukaan); color:var(--redup); border:1px solid var(--garis); transition:color var(--cepat), border-color var(--cepat), background var(--cepat); } .tbl-tema:hover{ color:var(--biru); border-color:var(--biru); } /* Lembar cetak selalu memakai tema terang. Mencetak halaman bertema gelap menghabiskan tinta dalam jumlah besar dan hasilnya sulit dibaca. Karena itu seluruh warna dikembalikan ke nilai terang khusus saat dicetak. */ @media print{ html[data-tema="gelap"]{ color-scheme:light; --kertas:#ffffff; --permukaan:#ffffff; --permukaan-2:#f4f1f6; --teks:#2b2430; --redup:#6b6273; --samar:#7d7288; --garis:#e8e2ec; --garis-tegas:#cec5d5; --tinta:#2d0a2e; --tinta-lembut:#3d1235; --biru:#7b2d8e; --biru-tua:#5c1f6b; --biru-muda:#faf5ff; --biru-garis:#e9d5ff; --lulus:#16a34a; --lulus-muda:#f0fdf4; --ragu:#d97706; --ragu-muda:#fffbeb; --gagal:#dc2626; --gagal-muda:#fef2f2; } html[data-tema="gelap"] .bilah{ background:#fff; } html[data-tema="gelap"] .soal-teks img, html[data-tema="gelap"] .opsi-teks img{ filter:none; } }