/** * ============================================================ * SATU SUMBER UNTUK WARNA DAN RADIUS * ============================================================ * * Dimuat PALING AWAL di setiap halaman, sebelum styles.css. Isinya cuma * deklarasi variabel, nol aturan gaya, jadi urutannya tidak pernah * bersaing dengan apa pun. * * ------------------------------------------------------------ * KENAPA BERKAS INI ADA * ------------------------------------------------------------ * Situs ini punya empat stylesheet (styles, kelas, daftar, admin) dan * semuanya memuat styles.css lebih dulu, jadi variabel di sana sebenarnya * SUDAH tersedia di mana-mana. Masalahnya bukan ketersediaan, melainkan * dua hal lain: * * 1. Setnya tidak lengkap. Warna status (hijau berhasil, merah gagal) * tidak pernah jadi variabel, jadi #1a7f37 diketik ulang di tujuh * tempat pada tiga berkas berbeda, dan #8a2226 di tiga tempat. * Mengubah satu warna status berarti cari-ganti lintas berkas * sambil berharap tidak ada yang terlewat. * 2. Tempatnya salah. Variabel merek tinggal di dalam styles.css yang * isinya 60 KB aturan khusus beranda. Berkas yang menentukan warna * seluruh situs seharusnya tidak perlu dibuka untuk alasan lain. * * ------------------------------------------------------------ * YANG SENGAJA BELUM ADA DI SINI * ------------------------------------------------------------ * Skala jarak dan skala ukuran huruf BELUM ditokenkan. Angkanya tersebar * di ratusan aturan dan sebagian sengaja dibuat ganjil untuk kasus * tertentu, jadi memaksanya masuk skala berisiko menggeser tata letak di * tempat yang tidak terpikirkan. Itu pekerjaan tersendiri, bukan bonus * dari pekerjaan ini. * * ------------------------------------------------------------ * MODE GELAP * ------------------------------------------------------------ * Belum ada, tapi berkas inilah tempatnya nanti: satu blok * @media (prefers-color-scheme: dark) yang menulis ulang token di bawah, * tanpa menyentuh satu pun aturan komponen. Itu sebabnya komponen harus * memakai var(), bukan nilai mentah -- warna yang diketik langsung tidak * akan pernah ikut berubah. */ :root { /* ---------- Palet merek ---------- */ --pink: #ffacdf; --pink-light: #ffd7ef; --white: #ffffff; --paper: #f7f5f2; --black: #000000; --ink-muted: #5c5b5b; --line: rgba(0, 0, 0, 0.14); /* ---------- Peran, bukan warna ---------- --white dan --black di atas dipakai untuk DUA peran yang berlawanan: sebagai latar kartu DAN sebagai teks di atas bilah gelap. Selama situs cuma punya satu mode, itu tidak jadi masalah. Begitu ada mode gelap, keduanya harus bergerak ke arah yang berbeda. Karena itu peran latar-kartu dan teks-utama diberi token sendiri. Nilainya sengaja sama persis dengan yang lama, jadi mode terang tidak berubah sedikit pun; yang berubah cuma blok mode gelap di bawah yang menimpanya. Yang TIDAK ikut: --black sebagai latar bilah gelap (.kelas-hero, .daftar-topbar) dan --white sebagai teks di atasnya. Keduanya sudah benar di kedua mode, jadi dibiarkan memakai warna literalnya. */ --surface: var(--white); /* latar kartu */ --surface-2: var(--paper); /* latar sekunder di dalam kartu */ --ink: var(--black); /* teks utama di atas kartu */ /* Teks DI ATAS aksen pink. Sengaja TIDAK ikut --ink: pink tetap warna terang di mode gelap maupun terang, jadi teks di atasnya harus gelap di dua-duanya. Sempat memakai --ink, dan akibatnya tombol kirim jadi teks terang di atas pink terang -- rasio 1,85:1, praktis tidak terbaca. Ketahuan waktu kontrasnya diukur, bukan waktu dilihat. */ --ink-di-pink: #1a1016; /* Teks redup di dalam kotak berlatar --pink-light (blok draf di /daftar). Beda dari --ink-di-pink: latar kotak itu IKUT membalik per mode, jadi warnanya juga harus ikut. */ --ink-di-pink-redup: #6b4159; /* Teks redup DI ATAS --pink (bukan --pink-light). Gampang tertukar dengan --ink-di-pink-redup di atas, padahal keduanya untuk latar yang berlawanan arah, jadi bedanya ditulis di sini sekali: --ink-di-pink-redup -> latar --pink-light, yang IKUT menggelap di mode gelap, jadi teksnya ikut menerang. --ink-di-pink-lembut -> latar --pink, yang TETAP terang di kedua mode, jadi teksnya harus tetap gelap. Dipakai untuk keterangan kecil di dalam kartu paket yang terpilih ("2 orang"). Sebelum ada token ini, keterangan itu memakai --ink-muted, dan --ink-muted menerang di mode gelap: abu terang di atas pink terang, 1,2:1, praktis hilang. Nilainya dipilih supaya lolos di KEDUA pink: 5,70:1 di atas #ffacdf dan 4,62:1 di atas #e79bc7. Kalau salah satu pink digeser nanti, angka ini harus diukur ulang, bukan dikira-kira. */ --ink-di-pink-lembut: #543d4a; /* Aksen sekunder, dipakai kartu testimoni supaya tiap kartu tidak tampil dengan warna yang sama persis. */ --lilac: #c9a7ff; --peach: #ffb9a7; /* ---------- Warna status ---------- Dipisah dari palet merek karena artinya bukan identitas, melainkan keadaan: berhasil, gagal, sedang menunggu. Pink tidak boleh dipakai untuk ini, dan sebaliknya. */ --sukses: #1a7f37; --sukses-pekat: #14602a; /* Dulu #e5484d, dan itu tidak pernah lolos ambang baca di mode terang: 3,91:1 di atas putih. Yang paling sering memakainya adalah tanda bintang "wajib diisi" di /daftar -- penanda kecil yang justru harus langsung kelihatan, dan satu-satunya pembeda isian wajib dari isian opsional. Menariknya, versi gelapnya SUDAH diperbaiki (lihat catatan di blok mode gelap di bawah, yang menyebut pengukuran 4,22:1), jadi yang tertinggal justru mode terang yang dipakai semua orang. #d0262c: 5,26:1 di atas putih dan 4,83:1 di atas --paper, tetap merah yang sama, cuma sedikit lebih dalam. Dua tempat yang memakainya sebagai LATAR (toast error di /admin, label paket habis di beranda) ikut membaik, bukan memburuk: teks putih di atasnya naik dari 3,91:1 ke 5,26:1. */ --bahaya: #d0262c; --bahaya-teks: #8a2226; --bahaya-latar: #ffd7d8; /* Latar gelap halaman berlatar foto (/daftar, /status) dan topbar admin. Bukan --black: ini sedikit hangat supaya foto di belakangnya tidak terlihat kebiruan. */ --gelap: #12100f; /* ---------- Radius ---------- Dinamai menurut PERAN, bukan ukuran, dan nilainya sama persis dengan yang sudah dipakai sekarang. Dua-duanya disengaja: nama berdasarkan peran membuat kode baru memilih dengan benar tanpa mengukur, dan nilai yang tidak diubah membuat migrasi ini tidak menggeser satu piksel pun. */ --r-kecil: 4px; /* lencana, tag kecil */ --r-sedang: 8px; /* pratinjau, kotak kecil */ --r-isian: 10px; /* kolom isian, kotak pesan */ --r-panel: 12px; /* panel, kartu rapat */ --r-besar: 14px; /* kartu sedang */ --r-kartu: 16px; /* kartu utama */ --r-pil: 999px; /* tombol, chip */ --r-bulat: 50%; /* avatar, titik */ /* ---------- Huruf ---------- */ --display: "Syne", "Arial Black", sans-serif; --body: "DM Sans", Arial, sans-serif; /* ============================================================ JANGAN PERNAH MEMAKAI FONT MONOSPACE DI SITUS INI ============================================================ Token ini dulu bernama --mono dan berisi "DM Mono". Dihapus atas permintaan pemilik pada 2026-08-25, dan permintaannya tegas: font monospace tidak boleh dipakai lagi di mana pun. Jadi kalau nanti butuh membedakan label, angka, atau data dari teks biasa, caranya BUKAN dengan mengganti keluarga fontnya. Pakai yang sudah dipakai aturan-aturan di bawah: huruf kapital, letter-spacing, ukuran lebih kecil, atau warna yang lebih redup. Untuk angka yang perlu sejajar rapi antarbaris, pakai font-variant-numeric: tabular-nums -- DM Sans mendukungnya, dan itu memberi lebar digit yang seragam tanpa perlu font monospace sama sekali. Namanya --label, bukan --mono, supaya tidak ada yang mengira ini masih font monospace lalu menambahinya lagi. */ --label: "DM Sans", Arial, sans-serif; /* ---------- Gerak ---------- Kurva khas situs ini. Tadinya diulang sebagai literal cubic-bezier di tujuh tempat, jadi hover kartu dan hover tombol terasa beda keluarga. */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); } /* Alias untuk --bahaya. Nama lamanya dipakai di banyak tempat pada styles.css; dibiarkan hidup supaya migrasi ini tidak menuntut seluruh berkas itu ikut disentuh dalam satu langkah. Kode baru pakai --bahaya. */ :root { --red: var(--bahaya); } /* ============================================================ MODE GELAP: /kelas dan /daftar (plus /status yang memakai daftar.css) ============================================================ TERBATAS PADA DUA HALAMAN ITU, dan itu disengaja. Keduanya yang paling lama dipelototi dan paling sering dibuka malam hari. Beranda dibiarkan terang karena identitasnya memang cerah, dan menggelapkannya berarti mengkalibrasi ulang shader, foto, section pink, dan kartu harga yang semuanya disetel untuk latar terang. YANG DIGELAPKAN CUMA KARTUNYA, bukan halamannya. Kedua halaman ini sudah berlatar gelap sejak awal (foto untuk /daftar, hero + zona fungsional untuk /kelas); yang menyilaukan malam hari justru kartu putihnya. Jadi blok di bawah tidak menyentuh latar halaman sama sekali. Ditulis di body, bukan :root, karena inilah yang membatasi cakupannya ke dua halaman itu. Custom property diwariskan ke bawah, jadi semua elemen di dalamnya ikut. */ @media (prefers-color-scheme: dark) { body.kelas-body, body.daftar-body { /* Bukan hitam pekat. Kartu hitam di atas latar yang juga gelap kehilangan batasnya sendiri; abu gelap kebiruan tipis membuatnya tetap terbaca sebagai kartu yang terangkat. */ --surface: #201e24; --surface-2: #17161a; --ink: #f2efec; --ink-muted: #a5a1aa; --line: rgba(242, 239, 236, 0.16); /* Pink merek terlalu menyala di atas permukaan gelap dan bikin teks di atasnya sulit dibaca. Diturunkan sedikit saturasinya, tanpa berpindah rona -- ini tetap warna yang sama, cuma tidak berteriak. */ --pink: #e79bc7; --pink-light: #3a2b36; /* --ink-di-pink SENGAJA TIDAK ikut berubah di sini. Dia untuk teks di atas --pink, dan --pink tetap warna terang di mode gelap, jadi teksnya harus tetap gelap. Sempat dibalik jadi terang dan hasilnya tombol kirim berkontras 1,73:1. Yang ikut berubah cuma yang di bawah: latar kotak draf memakai --pink-light, dan ITU yang menggelap. */ --ink-di-pink-redup: #cbb0c0; /* --red didefinisikan di :root sebagai var(--bahaya), dan definisi itu me-resolve --bahaya pada cakupan :root juga -- menimpa --bahaya di sini TIDAK ikut mengubahnya. Jadi --red harus ditimpa langsung. Ini jebakan cascade yang gampang terlewat: nilainya terlihat sudah diperbarui di token, tapi yang dipakai komponen tetap yang lama. */ --red: #ff8a84; /* Merah bawaan terlalu gelap di atas permukaan gelap. Tanda bintang "wajib diisi" cuma mencapai 4,22:1 di sana, di bawah ambang baca. */ --bahaya: #ff8a84; --bahaya-teks: #ff9d97; /* Hijau berhasil ikut alasan yang sama dengan merah di atas, dan sempat terlewat justru karena kabar baik lebih jarang dilihat waktu menguji: #1a7f37 cuma 3,25:1 di atas kartu gelap, jadi "Berhasil diunggah" di /daftar terbaca setengah hilang persis di saat orangnya ingin memastikan unggahannya masuk. Dicerahkan ke 6,50:1, sebanding dengan merahnya (7,25:1) supaya kedua kabar punya bobot yang mirip di mata. Sengaja tidak lebih terang dari itu: hijau menyala di sebelah pink merek terbaca seperti notifikasi sistem, bukan seperti halaman ini. --sukses-pekat ikut dibalikkan arahnya. Di mode terang "pekat" berarti LEBIH GELAP dari --sukses karena penekanan di atas latar terang datang dari warna yang lebih dalam; di mode gelap arah itu terbalik, jadi versi penekanannya justru lebih terang. */ --sukses: #3fb950; --sukses-pekat: #56d364; } }