/* ========================================================================== LAPORAN HARIAN DATIN & HSI — sistem visual "espresso" ========================================================================== ARAH RANCANGAN Yang dibaca orang di halaman ini adalah TABEL ANGKA. Jadi seluruh sistem ini bekerja untuk satu hal: membuat angka jadi benda paling tenang dan paling jelas di layar, lalu membuat semua yang lain mundur tanpa hilang. Versi paling lama gagal justru karena berusaha terlalu keras — semuanya berkotak, berbayang, dan biru saturated dipakai untuk tujuh peran sekaligus. Akibatnya tidak ada yang menonjol karena semuanya menonjol. ENAM TEMA, SATU SISTEM. Espresso adalah bawaan, dan dia yang dipakai kalau tidak ada yang memilih apa pun. Lima tema lain (Bata, Senja, Hutan, Nokturn, Kertas) datang dari palet yang ditentukan mentor, dan semuanya hidup sebagai SATU blok token di bagian 1b — bukan sebagai salinan berkas. Yang membuat itu mungkin: TIDAK ADA SATU PUN ATURAN DI BAWAH BAGIAN 1 YANG MENYEBUT WARNA LANGSUNG. Semuanya lewat token. Aturan ini bukan kerapian — dia yang menentukan apakah tema ketujuh nanti butuh sepuluh baris atau seribu. Kalau ada warna mentah menyelip ke aturan biasa, gejalanya khas: satu benda tetap berwarna sama di enam tema. Lima dari enam tema gelap, satu terang (Kertas). Itu sebabnya token seperti `--cahaya`, `--noda`, dan `--gelap` ada: mereka menamai PERAN cahayanya (sorot spekular, bidang tipis, bayangan) alih-alih nilainya, jadi aturan yang sama tetap benar waktu arah cahayanya berbalik. ENAM ATURAN YANG DIPEGANG KONSISTEN 1. GROUND-NYA KAYU BAKAR, BUKAN NAVY. Dasarnya espresso hangat (#17130f), bukan abu-biru gelap. Semua netral punya rona cokelat yang sama, jadi layar terasa seperti ruangan yang lampunya hangat — bukan panel LED. Abu-biru gelap (#0c0e12, versi paling lama) itu yang membuat halaman ini dulu terbaca "cyberpunk"; yang mengubahnya bukan tingkat gelapnya, tapi ronanya. 2. TIDAK ADA WARNA UNTUK "PENTING". YANG ADA CUMA TERANG. `--sorot` bukan biru: dia krem (#f3ece1). Tombol utama, penanda tab terpilih, dan titik carousel aktif semuanya krem di atas espresso. Ini menghapus penyebab terbesar kesan "template admin": satu warna saturated yang diulang di mana-mana sampai tidak ada artinya lagi. SATU pengecualian, dan sengaja: baris jumlah tabel TIDAK memakai `--sorot`. Alasannya ada di bagian 9. 3. SATU WARNA SINYAL, DIPAKAI HEMAT: TANAH LIAT (`--aksen`, #d99a63). Cuma untuk dua hal — garis pemantik di atas judul dan cincin fokus. Tidak pernah jadi latar blok besar. Sejak peta panas sel dilepas, ada satu warna sinyal KEDUA di tabel: `--usia-tua` untuk angka di kolom usia 61 hari ke atas. Dia berdiri sendiri dan tidak boleh dipakai untuk apa pun selain itu — begitu merah ini muncul di tempat lain, "merah = sudah terlalu lama" berhenti berlaku dan tabelnya kehilangan satu-satunya tanda cepatnya. 4. MERAH TELKOM CUMA IDENTITAS, SEKALI PER LAYAR. Tanda merek di kiri atas. Titik. Tidak ada garis merah kedua. 5. KACA ITU BAHAN, BUKAN HIASAN. Buram (`backdrop-filter`) cuma dipakai di benda yang MELAYANG di atas benda lain — bilah atas, strip KPI, panel tabel, dok carousel, kartu pendamping, lembar, obrolan, dan kepala tabel yang menempel. Benda yang duduk rata di ground tidak diberi kaca, karena tidak ada apa pun di bawahnya yang layak terlihat menembus. Tiga hal yang membuat kaca terbaca sebagai kaca, dan ketiganya harus ada bersamaan — ini yang paling sering setengah dikerjakan: a. ADA CAHAYA DI BELAKANGNYA. Empat noda hangat di `.latar-nyala`, salah satunya ditaruh persis di belakang tempat panggung berdiri. Tanpa itu, buramnya tidak mengaburkan apa pun. b. ADA TEPI SPEKULAR. Satu noda krem encer yang keluar dari pojok kiri ATAS tiap benda — dan arahnya SAMA untuk semua benda, karena cahaya yang datang dari arah berbeda-beda per benda langsung membongkar ilusinya. (Satu pengecualian: dok, yang cahayanya dari bawah karena dia sisi bawah satu benda bersama panggung.) c. ISIANNYA COKELAT YANG DIANGKAT, BUKAN PUTIH YANG DIENCERKAN. Di ground gelap, putih encer langsung jadi kabut abu — dan itu kesalahan yang paling sering membuat "glassmorphism" terlihat murah. 6. HIERARKI DARI TIPOGRAFI, BUKAN DARI UKURAN KOTAK. Angka besar ditulis TIPIS (berat 320-340), label kecil ditulis TEBAL dengan tracking lebar. Ini kebalikan dari refleks biasa, dan justru inilah yang membuat angka besar terbaca mahal alih-alih berteriak. Di latar gelap berat tipis makin penting: huruf terang di atas gelap selalu terlihat lebih tebal daripada ukuran aslinya (iradiasi), jadi berat yang "pas" di kertas jadi gemuk di sini. TENTANG GERAK Hanya `transform` dan `opacity` yang dianimasikan pada benda yang bergerak, karena keduanya dikerjakan compositor tanpa menghitung ulang tata letak. Tidak ada animasi `width`/`height`/`top` di berkas ini. ========================================================================== */ @font-face { font-family: 'Plus Jakarta Sans'; src: url('fonts/PlusJakartaSans-latin.woff2') format('woff2'); font-weight: 200 800; font-display: swap; } /* ========================================================================== 1. TOKEN ========================================================================== */ :root { /* --- netral espresso: SEMUANYA punya rona cokelat yang sama --- Ini bukan mode gelap hasil inversi, dan bukan setengah dari sepasang tema. Ini SATU-SATUNYA versi. Kanvasnya kayu bakar (#17130f), bukan navy dan bukan abu — dan itu yang membuatnya tetap masuk permintaan "warm, calm, premium" alih-alih jatuh ke cyberpunk. Abu-biru gelap (#0c0e12, versi paling lama) terasa seperti panel LED; cokelat gelap terasa seperti ruangan yang lampunya hangat. Satu versi itu keputusan, bukan pekerjaan yang belum selesai: setiap nilai di berkas ini jadi bisa disetel untuk SATU latar saja, dan tidak ada satu pun kompromi yang harus benar di dua tempat sekaligus. */ --kanvas: #17130f; --kanvas-dalam: #100d0a; --permukaan: #211b16; /* Kaca: isian setengah tembus untuk benda yang MELAYANG. Di atas ground gelap, kaca bekerja TERBALIK dari kaca di atas kertas — isiannya harus lebih terang daripada latarnya (cokelat yang diangkat), bukan lebih putih. Putih encer di atas espresso langsung terbaca sebagai kabut abu, dan itu kesalahan yang paling sering membuat "glassmorphism" terlihat murah. Tepi terangnya BUKAN token warna sendiri — dia `--kilau` di bawah, yang bentuknya `inset box-shadow` dan bukan border. Sempat ada `--kaca-tepi` di sini; dibuang setelah audit menunjukkan tidak ada satu pun `var()` yang menunjuknya. */ --kaca: rgba(52, 43, 35, .55); /* Kaca "padat" untuk benda yang harus DIBACA sambil melayang di atas tabel penuh angka — lembar dan panel obrolan. 92%, bukan 55%. */ --kaca-padat: rgba(43, 35, 28, .92); /* --- TIGA WARNA CAHAYA, DAN INI YANG MEMBUAT ENAM TEMA MUNGKIN --- Ketiganya menamai PERAN, bukan nilai: --cahaya sorot spekular. Cahaya yang MENIMPA benda dari kiri atas: tepi kaca, gradasi di puncak bilah atas, kilau. Di tema gelap dia krem hangat; di Kertas dia putih. --noda bidang tipis yang MENGANGKAT permukaan sedikit saja: zebra tabel, jalur batang, garis, keping tombol hantu. Di tema gelap arahnya ke terang (krem encer); di Kertas berbalik jadi tinta encer. --gelap bayangan. Nyaris hitam, tapi ikut rona temanya masing-masing — bayangan netral di atas ground berona terbaca sebagai kotor, bukan sebagai bayangan. Karena ketiganya token, aturan seperti "tepi atas panel = kilau" tetap satu aturan walau arah cahayanya berbalik total di tema Kertas. */ --cahaya: #fff0dc; --noda: #f0dec4; --gelap: #080503; /* Cahaya ambien di sekeliling benda kaca — madu, bukan hitam. Ini yang bekerja sebagai "bayangan" di ground gelap: benda kaca dipisahkan dari latarnya oleh cahaya yang bocor di sekitarnya, bukan oleh gelap. */ --ambien: #c8803a; /* Empat noda cahaya di latar. Ditaruh di token karena tiap tema memakai warna paletnya sendiri di sini — dan justru noda inilah yang membuat kacanya punya sesuatu untuk dikaburkan (lihat bagian 3). */ --nyala-1: rgba(198, 120, 58, .30); --nyala-2: rgba(170, 72, 50, .22); --nyala-3: rgba(152, 104, 56, .18); --nyala-4: rgba(118, 94, 60, .24); /* Butiran latar. Di ground gelap butiran harus MENAMBAH cahaya (overlay); di kertas dia harus mengurangi (multiply). Dua-duanya di token supaya aturannya di bagian 3 tidak perlu tahu tema apa yang sedang jalan. */ --butir-alpha: .22; --butir-blend: overlay; /* Garis: alpha `--noda`, bukan hex abu. Dengan alpha, garis selalu terbaca sebagai cahaya tipis di tepi bahan — jadi ikut hangat sendiri di atas kanvas maupun di atas kaca, dan ikut berbalik arah sendiri di Kertas. */ --garis: color-mix(in srgb, var(--noda) 11%, transparent); --garis-tegas: color-mix(in srgb, var(--noda) 22%, transparent); /* Lima tingkat bidang tipis, dipakai di seluruh berkas alih-alih menulis alpha satu-satu di tiap aturan. Dulu tiap tempat menulis sendiri (.022, .035, .05, .07, .09, .1, .11) — tujuh nilai untuk lima peran, dan tidak ada satu pun yang bisa disetel ulang per tema. */ --noda-1: color-mix(in srgb, var(--noda) 2.5%, transparent); --noda-2: color-mix(in srgb, var(--noda) 4%, transparent); --noda-3: color-mix(in srgb, var(--noda) 5.5%, transparent); --noda-4: color-mix(in srgb, var(--noda) 8%, transparent); --noda-5: color-mix(in srgb, var(--noda) 12%, transparent); /* Keping beku: isian tombol hantu & tab. Sengaja BUKAN --noda-3: di Kertas keping harus lebih TERANG dari groundnya sementara zebra harus lebih gelap, jadi keduanya tidak bisa satu token walau di lima tema gelap arahnya kebetulan sama. */ --keping: color-mix(in srgb, var(--cahaya) 5%, transparent); --keping-kuat: color-mix(in srgb, var(--cahaya) 12%, transparent); /* Tirai di belakang lembar, dan cekung di dalam bilah pindah halaman. */ --tirai: color-mix(in srgb, var(--gelap) 58%, transparent); --cekung: inset 0 2px 5px color-mix(in srgb, var(--gelap) 30%, transparent); --tinta: #f3ece1; --tinta-2: #b8ab99; --tinta-3: #8b7f6f; /* Merah Telkom — identitas, sekali per layar. Dinaikkan terangnya dari #c8102e: merah pekat di atas espresso jadi lumpur, bukan merah. */ --merek: #f4626f; --merek-lembut: #2c1512; /* Ujung gelap gradasi tanda merek, dan tinta di ATAS keping merah (kabar galat). Keduanya dulu ditulis langsung di dalam aturannya. */ --merek-dalam: #4a0010; --di-merek: #2a0d10; /* "Sorot" = KREM. Bukan warna, cuma terang. Tombol utama, penanda tab terpilih, dan titik carousel aktif semuanya krem di atas espresso — dan itu justru lebih tenang daripada warna saturated apa pun, sekaligus tetap jadi benda paling jelas di layar. Ini yang menghapus penyebab terbesar kesan "template admin": satu warna saturated yang diulang di mana-mana sampai tidak ada artinya lagi. */ --sorot: #f3ece1; --sorot-tekan: #ffffff; --sorot-teks: #1b1611; --sorot-lembut: #2e2620; --sorot-tepi: color-mix(in srgb, var(--noda) 20%, transparent); /* Satu-satunya warna sinyal: tanah liat, dinaikkan terangnya supaya tetap terbaca sebagai WARNA (bukan sekadar cokelat lain) di atas kanvas cokelat. Cuma untuk dua hal — garis pemantik di atas judul dan cincin fokus. Tidak pernah jadi latar blok besar. */ --aksen: #d99a63; --aksen-lembut: #2b2017; /* Ujung terang gradasi batang. Satu warna, satu tugas — dulu ini `#e6c79a` yang ditulis langsung di dalam aturan `.batang-isi`, dan itu satu-satunya alasan batang perbandingan akan tetap cokelat di kelima tema lain. */ --aksen-2: #e6c79a; /* Semantik. "Naik" pada tumpukan order itu kabar buruk, jadi warnanya bukan hijau — hijau (lumut) dipakai untuk yang berkurang. */ --naik: #e08a5f; --naik-lembut: #2a1a11; --turun: #93b884; --turun-lembut: #16210f; /* Tinta di ATAS keping hijau (kabar berhasil, ikon hasil unggah). Di tema gelap dia arang; di Kertas putih. */ --di-turun: #14210f; --awas: #dfb45c; --awas-lembut: #251d0c; /* Angka di kolom usia 61 hari ke atas. Menggantikan peta panas sel, yang dulu mewarnai SELURUH permukaan sel menurut besar angkanya. Sengaja bukan `--merek` walau merah Telkom juga merah dan sudah disetel untuk kedua ground: warna merek dipakai untuk menyebut Telkom, dan begitu dia juga berarti "order ini sudah terlalu lama", tidak ada lagi cara membedakan keduanya di halaman yang sama. Satu nilai untuk kelima tema gelap, satu lagi di Kertas — sama seperti `--naik`/`--turun`. Merah tidak perlu ikut berganti rona per tema; kalau ikut, dia berhenti terbaca sebagai satu sinyal yang selalu sama. Angkanya diverifikasi `npm run test:tema` terhadap keenam tema. */ --usia-tua: #f07a6e; /* Tiga bidang PADAT di tabel — padat, bukan alpha, karena ketiganya menempel (`position: sticky`) dan harus benar-benar menutupi angka yang lewat di bawahnya. */ --kepala-tabel: #241d18; --kaki-tabel: #322a22; --kaki-pojok: #3c3229; /* --- ruang, jenjang 4px --- */ --r1: 4px; --r2: 8px; --r3: 12px; --r4: 16px; --r5: 24px; --r6: 32px; --r7: 48px; --r8: 72px; --lengkung: 18px; --lengkung-s: 12px; --lengkung-l: 26px; /* --- bayang: pekat, berlapis, tidak pernah dianimasikan --- Di atas ground gelap, bayangan bekerja jauh lebih lemah daripada di atas kertas: yang memisahkan benda dari latarnya bukan bayangnya lagi, tapi tepi terangnya (`--kilau`) dan cahaya ambien hangat di sekelilingnya. Itu sebabnya setiap benda kaca di sini punya satu bayang tambahan yang warnanya madu, bukan hitam — itu cahaya, bukan bayangan. */ --bayang-1: 0 1px 2px color-mix(in srgb, var(--gelap) 45%, transparent); --bayang-2: 0 1px 2px color-mix(in srgb, var(--gelap) 40%, transparent), 0 14px 34px -14px color-mix(in srgb, var(--gelap) 62%, transparent); --bayang-3: 0 4px 14px color-mix(in srgb, var(--gelap) 50%, transparent), 0 34px 74px -20px color-mix(in srgb, var(--gelap) 72%, transparent); --bayang-sorot: 0 6px 20px -8px color-mix(in srgb, var(--sorot) 26%, transparent); /* Sorot 1px di sisi atas benda kaca. Inset shadow, bukan border — border ikut menggeser tata letak, inset tidak. */ --kilau: inset 0 1px 0 color-mix(in srgb, var(--cahaya) 13%, transparent); /* --- gerak: sengaja sedikit lebih lambat dari versi paling lama --- Yang diminta "calm". Transisi 120ms terbaca sebagai klik; 260ms terbaca sebagai gerakan. Bedanya tipis tapi terasa sepanjang hari. */ --cepat: 140ms; --sedang: 260ms; --lambat: 460ms; --pegas: cubic-bezier(.34, 1.28, .64, 1); --halus: cubic-bezier(.22, .61, .36, 1); --lebar-isi: 1340px; --tinggi-atas: 70px; color-scheme: dark; } /* ========================================================================== 1b. LIMA TEMA LAIN ========================================================================== Espresso di atas adalah bawaan, dan dia hidup di `:root` tanpa atribut. Lima blok di bawah menimpanya lewat `html[data-tema="…"]`, yang dipasang sebelum lukisan pertama oleh potongan skrip di `index.html`. ATURAN YANG MEMBUAT INI BISA DIKERJAKAN SEPENDEK INI Tidak ada satu pun aturan di bawah bagian 1 yang menyebut warna langsung. Semua lewat token. Jadi satu tema = satu blok token, bukan satu salinan berkas — dan menambah tema ketujuh nanti tidak menyentuh apa pun selain bagian ini. Kalau suatu saat ada warna mentah muncul di aturan biasa, dia akan tetap sama di enam tema dan itulah gejalanya. YANG SENGAJA TIDAK IKUT BERGANTI `--merek` (merah Telkom), `--naik`/`--turun`/`--awas` (semantik), dan `--sorot-tekan` tetap sama di lima tema gelap. Warna yang ARTINYA tetap tidak boleh ikut ganti rupa tiap tema — "naik" yang jadi hijau di satu tema dan jingga di tema lain berhenti berarti apa pun. Yang ikut berganti cuma bidang di BELAKANGnya (`--naik-lembut`), supaya keping semantiknya tetap duduk di ruangan yang sama. Tema terang (Kertas) adalah pengecualian di hampir semua hal, dan blok terakhir menjelaskan kenapa satu per satu. ========================================================================== */ /* -------------------------------------------------------------------------- BATA Palet mentor #1: #60241E #95271D #B34A44 #E77B49 — semuanya satu keluarga merah-terakota, tidak ada warna dingin sama sekali. Jadi tema ini yang paling dekat ke espresso: bedanya ground-nya bata (rona 8°), bukan kayu bakar (rona 30°), dan sinyalnya jingga terang alih-alih tanah liat. Yang perlu diperhatikan: `--merek` (#f4626f) tetap merah Telkom di sini, dan di ground bata dia satu keluarga dengan seluruh palet. Tandanya masih kebaca sebagai tanda karena bentuknya keping bergradasi + bayang, bukan karena warnanya beda — dan itu memang cara kerjanya di lima tema lain. -------------------------------------------------------------------------- */ :root[data-tema='bata'] { --kanvas: #1f110f; --kanvas-dalam: #170c0b; --permukaan: #291816; --kaca: rgba(59, 39, 35, .55); --kaca-padat: rgba(50, 31, 28, .92); --cahaya: #ffe7db; --noda: #edd1c4; --gelap: #090504; --ambien: #bf663d; --nyala-1: rgba(179, 74, 68, .28); --nyala-2: rgba(149, 39, 29, .22); --nyala-3: rgba(231, 123, 73, .15); --nyala-4: rgba(149, 39, 29, .22); --tinta: #fae5db; --tinta-2: #b8a59e; --tinta-3: #82706b; --sorot: #fae5db; --sorot-teks: #221411; --sorot-lembut: #36221f; --aksen: #e77b49; --aksen-2: #eea07c; --aksen-lembut: #391f17; --merek-lembut: #391b1b; --naik-lembut: #362019; --turun-lembut: #2d251d; --awas-lembut: #362518; --kepala-tabel: #2c1a18; --kaki-tabel: #3a2522; --kaki-pojok: #422d2a; } /* -------------------------------------------------------------------------- SENJA Palet mentor #2: #0F3040 #464858 #A56F63 #D99B7F — dan ini palet paling menarik dari kelimanya, karena dia sepasang: dua dingin (petrol, slate) lawan dua hangat (tanah, persik). Jadi tema ini satu-satunya yang TINTANYA HANGAT DI ATAS GROUND DINGIN (#f7ebe5 di atas petrol) — persis pertukaran yang dimaksud paletnya, dan yang membuatnya terasa seperti ruangan sore alih-alih dashboard biru. -------------------------------------------------------------------------- */ :root[data-tema='senja'] { --kanvas: #0e1920; --kanvas-dalam: #0a1318; --permukaan: #14222b; --kaca: rgba(33, 51, 61, .55); --kaca-padat: rgba(26, 43, 52, .92); --cahaya: #ffe6db; --noda: #edd1c4; --gelap: #040709; --ambien: #b3806a; --nyala-1: rgba(165, 111, 99, .28); --nyala-2: rgba(70, 72, 88, .22); --nyala-3: rgba(217, 155, 127, .15); --nyala-4: rgba(70, 72, 88, .22); --tinta: #f7ebe5; --tinta-2: #b1acaa; --tinta-3: #777779; --sorot: #f7ebe5; --sorot-teks: #101c24; --sorot-lembut: #1d2e38; --aksen: #d99b7f; --aksen-2: #e4b7a3; --aksen-lembut: #282a2c; --merek-lembut: #2a2229; --naik-lembut: #272728; --turun-lembut: #1e2c2c; --awas-lembut: #272c27; --kepala-tabel: #16252e; --kaki-tabel: #20323c; --kaki-pojok: #283a45; } /* -------------------------------------------------------------------------- HUTAN Palet mentor #3: #092328 #12544F #2A835F #8BBB92 — pinus ke sage. Rona dasarnya SENGAJA digeser ke 164° (hijau), bukan ke 190° milik #092328. Alasannya praktis: rona 190° hampir sama dengan rona ground Senja (202°), jadi kalau diikuti apa adanya, dua tema berbeda akan terlihat sama di layar. Dengan 164°, groundnya jelas hijau pinus dan Senja jelas petrol — dua tema, dua ruangan. -------------------------------------------------------------------------- */ :root[data-tema='hutan'] { --kanvas: #0e201b; --kanvas-dalam: #0a1814; --permukaan: #142b25; --kaca: rgba(33, 61, 54, .55); --kaca-padat: rgba(26, 52, 45, .92); --cahaya: #dbffe1; --noda: #c4edca; --gelap: #040908; --ambien: #739b79; --nyala-1: rgba(42, 131, 95, .28); --nyala-2: rgba(18, 84, 79, .22); --nyala-3: rgba(139, 187, 146, .15); --nyala-4: rgba(18, 84, 79, .22); --tinta: #e8f1e9; --tinta-2: #a7b2ab; --tinta-3: #707e78; --sorot: #e8f1e9; --sorot-teks: #10241e; --sorot-lembut: #1d3831; --aksen: #8bbb92; --aksen-2: #abceb1; --aksen-lembut: #1e342a; --merek-lembut: #2a2825; --naik-lembut: #272d23; --turun-lembut: #1e3228; --awas-lembut: #273223; --kepala-tabel: #162e27; --kaki-tabel: #203c34; --kaki-pojok: #28453d; } /* -------------------------------------------------------------------------- NOKTURN Palet mentor #4: #091540 #1B2CC1 #7692FF #ABD2FA — biru malam ke es. Ini tema yang paling berisiko jatuh ke "cyberpunk", justru yang dihindari waktu sistem ini dibangun. Yang menahannya dua hal: #1B2CC1 (biru listrik) TIDAK PERNAH jadi bidang besar — dia cuma noda cahaya di latar dengan alpha .22; dan tangga terangnya sama dengan tema lain, jadi kontras teksnya tenang, bukan menyala. Sinyalnya #7692FF, dan biru es #ABD2FA cuma jadi ujung gradasi batang. -------------------------------------------------------------------------- */ :root[data-tema='nokturn'] { --kanvas: #0d1121; --kanvas-dalam: #090c19; --permukaan: #13182c; --kaca: rgba(32, 38, 62, .55); --kaca-padat: rgba(25, 31, 53, .92); --cahaya: #dbedff; --noda: #c4d8ed; --gelap: #040509; --ambien: #6179d3; --nyala-1: rgba(118, 146, 255, .28); --nyala-2: rgba(27, 44, 193, .22); --nyala-3: rgba(171, 210, 250, .15); --nyala-4: rgba(27, 44, 193, .22); --tinta: #eef6fe; --tinta-2: #abb1bc; --tinta-3: #727884; --sorot: #eef6fe; --sorot-teks: #0f1325; --sorot-lembut: #1c223a; --aksen: #7692ff; --aksen-2: #abd2fa; --aksen-lembut: #1b223e; --merek-lembut: #291b2a; --naik-lembut: #262028; --turun-lembut: #1d252d; --awas-lembut: #262528; --kepala-tabel: #151a2f; --kaki-tabel: #1f253d; --kaki-pojok: #272d46; } /* -------------------------------------------------------------------------- KERTAS — dan ini satu-satunya tema TERANG Palet mentor #5: #3368A0 #66A3BF #C8DFDB #F2EFE7. Palet ini beda jenis dari empat sebelumnya: warna paling gelapnya (#3368A0) masih terang sekali, dan warna paling terangnya (#F2EFE7) itu persis "warm off-white" yang jadi permintaan pertama sistem ini. Memaksanya jadi tema gelap berarti membuang tiga dari empat warnanya. KENAPA BLOKNYA PANJANG SEKALI Kaca di atas kertas bekerja TERBALIK dari kaca di atas ground gelap, dan hampir semua nilai yang di lima tema lain bisa diturunkan otomatis harus ditulis ulang di sini: - Isian kaca jadi PUTIH yang diencerkan, bukan cokelat yang diangkat. - `--noda` (bidang tipis: zebra, jalur batang, keping) jadi TINTA yang sangat encer, bukan krem — arahnya berbalik dari terang ke gelap. - Bayangan kembali jadi bayangan sungguhan: alphanya turun dari .45-.72 ke .05-.30, karena di kertas yang memisahkan benda dari latarnya memang bayangnya, bukan tepi terangnya. - `--kilau` naik dari 13% ke 90%: sorot putih di tepi atas benda putih cuma terbaca kalau hampir pekat. - Peta panas turun jauh (.03-.33 dari .05-.38): tinta gelap di atas kertas tampak jauh lebih kuat daripada krem di atas espresso pada alpha yang sama. - Butiran latar berbalik dari `overlay` ke `multiply`. Di kertas, butiran harus MENGURANGI cahaya; overlay di sini tidak terlihat. - Merah Telkom balik ke #c8102e aslinya (di ground gelap dia jadi lumpur, jadi di sana dinaikkan ke #f4626f), dan tinta di atas keping merah/hijau jadi putih, bukan arang. -------------------------------------------------------------------------- */ :root[data-tema='kertas'] { --kanvas: #f2efe7; --kanvas-dalam: #e2e9e4; --permukaan: #fdfcf8; --kaca: rgba(253, 252, 248, .62); --kaca-padat: rgba(253, 252, 248, .93); --cahaya: #ffffff; --noda: #17293a; --gelap: #24404f; --ambien: #66a3bf; /* Noda cahaya di latar: di kertas dia berperan sebagai WASH, bukan sebagai sumber cahaya — jadi alphanya jauh lebih tinggi (.16-.50 lawan .15-.28) tapi warnanya yang paling pucat dari paletnya. */ --nyala-1: rgba(102, 163, 191, .42); --nyala-2: rgba(51, 104, 160, .20); --nyala-3: rgba(200, 223, 219, .62); --nyala-4: rgba(102, 163, 191, .34); --garis: rgba(23, 41, 58, .14); --garis-tegas: rgba(23, 41, 58, .26); --tinta: #17293a; --tinta-2: #4e6577; --tinta-3: #6d8493; /* Di kertas, "yang paling jelas" bukan yang paling terang — dia yang paling GELAP. Jadi `--sorot` di sini biru-arang, bukan krem, dan seluruh aturan yang memakainya (tombol utama, penanda tab, titik carousel aktif) tetap benar tanpa satu pun perubahan. */ --sorot: #1e3a52; --sorot-tekan: #12283a; --sorot-teks: #f7faf9; --sorot-lembut: #e7ede9; --sorot-tepi: rgba(23, 41, 58, .2); --aksen: #3368a0; --aksen-2: #66a3bf; --aksen-lembut: #e7eff5; --merek: #c8102e; --merek-lembut: #fbebe9; --di-merek: #ffffff; --naik: #a2452a; --naik-lembut: #f7eae4; --turun: #4d6b45; --turun-lembut: #ebf1e9; --di-turun: #ffffff; --awas: #7f611b; --awas-lembut: #f7f1de; --usia-tua: #b3261e; --kepala-tabel: #f8f6ef; --kaki-tabel: #e4eae5; --kaki-pojok: #d7e1dc; /* Keping beku (tombol hantu, tab): di kertas isiannya PUTIH yang diencerkan — lebih terang dari groundnya, bukan lebih gelap. Ini satu-satunya tempat arah `--noda` tidak cukup, jadi kedua nilainya ditulis sendiri. */ --keping: rgba(253, 252, 248, .55); --keping-kuat: rgba(253, 252, 248, .92); --bayang-1: 0 1px 2px rgba(36, 64, 79, .06); --bayang-2: 0 1px 2px rgba(36, 64, 79, .05), 0 12px 30px -14px rgba(36, 64, 79, .2); --bayang-3: 0 4px 12px rgba(26, 50, 64, .1), 0 30px 68px -18px rgba(26, 50, 64, .3); --bayang-sorot: 0 6px 18px -6px rgba(30, 58, 82, .38); --cekung: inset 0 2px 5px rgba(36, 64, 79, .1); --kilau: inset 0 1px 0 rgba(255, 255, 255, .9); --tirai: rgba(30, 50, 64, .28); --butir-alpha: .15; --butir-blend: multiply; color-scheme: light; } /* ========================================================================== 2. DASAR ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } /* ATURAN INI MEMPERBAIKI BUG, BUKAN GAYA — jangan dihapus. ------------------------------------------------------------------------ `[hidden]` bekerja lewat gaya bawaan browser `[hidden] { display: none }`, dan gaya bawaan itu punya prioritas PALING RENDAH. Begitu ada satu aturan penulis yang menyetel `display` pada elemen yang sama, `hidden` berhenti berfungsi sama sekali — elemennya tetap ada di tata letak, cuma tidak terlihat. Di berkas ini ada tiga elemen seperti itu: `.obrol` (display: flex), `.lembar` (display: flex), dan turunannya. Ketiganya `position: fixed` dengan `opacity: 0`, jadi tidak terlihat — tapi mereka MENANGKAP KLIK dan MENELAN GULIRAN di seluruh kotaknya. Gejalanya persis yang dilaporkan: panah carousel di kanan bawah "tidak responsif" (tertutup panel obrolan 408x620px yang tak terlihat di pojok yang sama), dan halaman "susah digulir pakai touchpad" (`.obrol-alur` di dalamnya punya `overflow-y: auto` + `overscroll-behavior: contain`, jadi gulir di daerah itu masuk ke kotak obrolan yang kosong dan tidak diteruskan ke halaman). Dibuktikan lewat `document.elementFromPoint` di titik tengah kedua panah: yang terambil `obrol-alur`, bukan tombolnya. `!important` di sini disengaja: justru aturan penulis lain (`display: flex` itu) yang harus dikalahkan, dan menambah `:not([hidden])` di setiap selektor berarti menaruh jebakan yang sama untuk elemen berikutnya. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 14.5px; line-height: 1.55; font-weight: 450; color: var(--tinta); background: var(--kanvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Judul: berat 600, bukan 700 — dan di latar gelap itu lebih penting lagi. Huruf terang di atas espresso selalu terlihat lebih tebal daripada ukuran aslinya, jadi 700 terbaca sebagai tebal yang memaksa. */ h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.022em; line-height: 1.22; } p { margin: 0; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; border: none; background: none; } svg { width: 1em; height: 1em; display: block; flex: none; } /* Angka: SELALU tabular, di mana pun. Tanpa ini kolom angka bergoyang kiri-kanan antar baris dan mata kehilangan jejaknya. */ .angka, .tabel td, .tabel th, .kpi-nilai, .stat-nilai, .pil-angka { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } .lewati { position: fixed; top: var(--r2); left: var(--r2); z-index: 200; padding: var(--r2) var(--r4); border-radius: var(--lengkung-s); background: var(--sorot); color: var(--sorot-teks); font-weight: 600; text-decoration: none; transform: translateY(-200%); transition: transform var(--sedang) var(--halus); } .lewati:focus-visible { transform: translateY(0); } /* Cincin fokus pakai tanah liat, bukan arang: di atas benda arang (tombol utama), cincin arang tidak akan terlihat sama sekali. */ :focus-visible { outline: 2px solid var(--aksen); outline-offset: 2px; border-radius: var(--r1); } /* Tiga detail yang TIDAK terlihat di potret tapi terasa dipakai sepanjang hari — dan justru yang begini yang membedakan halaman yang dirancang dari halaman yang cuma diwarnai: 1. Bilah gulir. Bawaan Chrome abu-biru, dan di tabel yang digulir tiap hari dia jadi satu-satunya benda dingin di layar hangat. 2. Warna seleksi teks. Bawaannya biru terang — merusak paletnya persis di saat orang menyalin angka untuk ditempel ke tempat lain. 3. Kursor teks di kotak isian. Hitam bawaan, sementara semua penanda interaktif lain di sini tanah liat. */ * { scrollbar-width: thin; scrollbar-color: var(--garis-tegas) transparent; } ::selection { background: color-mix(in srgb, var(--aksen) 24%, transparent); color: var(--tinta); } input, textarea { caret-color: var(--aksen); } /* ========================================================================== 3. LATAR ========================================================================== Dua lapisan `position: fixed` di belakang segalanya, jadi menganimasikannya tidak pernah menyentuh tata letak halaman. Lapisan pertama: tiga noda cahaya hangat (pasir, terakota, madu) yang bergerak sangat lambat. Lapisan kedua: BUTIRAN. Versi lama memakai kisi garis 56px — dan kisi garis itu penanda paling khas "dashboard hasil generate". Butiran mengerjakan tugas yang sama (memberi tekstur supaya kanvasnya tidak terlihat seperti bidang kosong) tanpa membawa asosiasi itu, dan dia yang membuat ground-nya terbaca sebagai bahan, bukan sebagai kegelapan. */ .latar { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } /* EMPAT noda, bukan tiga — dan yang keempat ada karena kaca. ------------------------------------------------------------------------ Kaca cuma terlihat sebagai kaca kalau ada SESUATU di belakangnya yang berubah waktu ditembus. Di putaran-putaran awal, seluruh cahaya menumpuk di pojok kiri atas; akibatnya panel kaca yang duduk di tengah halaman melayang di atas kanvas rata, dan buramnya tidak mengaburkan apa pun — jadi dia terbaca sebagai bidang pucat, bukan sebagai kaca. Noda keempat (madu, kiri-tengah) ditaruh persis di belakang tempat panggung berdiri. Itu yang membuat tepi atas panel menangkap cahaya, dan yang membuat sisi bawahnya sedikit lebih redup daripada sisi atasnya. */ .latar-nyala { position: absolute; inset: -25%; background: radial-gradient(46% 38% at 12% 0%, var(--nyala-1), transparent 64%), radial-gradient(40% 34% at 92% -4%, var(--nyala-2), transparent 62%), radial-gradient(44% 40% at 26% 46%, var(--nyala-3), transparent 68%), radial-gradient(60% 52% at 76% 98%, var(--nyala-4), transparent 70%); transition: opacity var(--lambat) var(--halus); will-change: transform; animation: apung 34s ease-in-out infinite alternate; } @keyframes apung { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(1.6%, -1.2%, 0) scale(1.05); } } .latar-kisi { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); background-size: 180px 180px; /* Di ground gelap butirannya harus MENAMBAH cahaya, bukan mengurangi — jadi blend-nya `overlay`. Dengan `multiply`, butiran di atas espresso cuma membuatnya makin pekat dan teksturnya hilang sama sekali. Di tema Kertas yang berlaku justru kebalikannya, jadi dua-duanya token. */ opacity: var(--butir-alpha); mix-blend-mode: var(--butir-blend); } /* ========================================================================== 4. BILAH ATAS ========================================================================== Satu-satunya benda yang menempel dan melayang di atas seluruh isi halaman, jadi satu-satunya yang wajib berkaca. Buramnya kuat (24px) dengan saturasi dinaikkan: tanpa saturasi, warna yang lewat di belakang kaca jadi pucat dan kacanya terbaca sebagai kabut abu. */ .atas { position: sticky; top: 0; z-index: 60; /* Isiannya diturunkan ke 60% dan buramnya dinaikkan ke 30px. Pertukaran yang disengaja: makin tembus isiannya, makin terlihat apa yang lewat di belakang — dan makin kuat buramnya, makin tetap terbaca teks di atasnya. Yang salah adalah mengubah cuma salah satu dari keduanya. */ background: linear-gradient(to bottom, color-mix(in srgb, var(--cahaya) 7%, transparent), transparent 62%), color-mix(in srgb, var(--kanvas) 62%, transparent); backdrop-filter: blur(30px) saturate(165%); -webkit-backdrop-filter: blur(30px) saturate(165%); } .atas-dalam { max-width: var(--lebar-isi); margin: 0 auto; min-height: var(--tinggi-atas); padding: var(--r2) var(--r6); display: flex; align-items: center; gap: var(--r5); } /* Garis bawah yang muncul saat digulir. Yang berubah cuma `transform: scaleX` dan `opacity` — bukan `height` atau `border-width`. */ .atas-garis { height: 1px; background: var(--garis); transform: scaleX(0); transform-origin: left; transition: transform var(--lambat) var(--halus); } .atas.tergulir .atas-garis { transform: scaleX(1); } .merek { display: flex; align-items: center; gap: var(--r3); min-width: 0; } .merek-tanda { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; /* Satu-satunya merah di layar. */ background: linear-gradient(150deg, var(--merek), color-mix(in srgb, var(--merek) 72%, var(--merek-dalam))); /* Putih di sini SENGAJA bukan token: apa pun temanya, tanda ini selalu keping merah bergradasi, jadi tintanya selalu putih. */ color: #fff; font-size: 16px; box-shadow: 0 2px 12px -2px color-mix(in srgb, var(--merek) 55%, transparent), var(--kilau); } .merek-teks { display: flex; flex-direction: column; min-width: 0; } .merek-judul { font-weight: 600; font-size: 14px; letter-spacing: -.02em; } .merek-sub { font-size: 11px; color: var(--tinta-3); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* --- pindah halaman DATIN / HSI --- */ .pindah { position: relative; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--kanvas-dalam) 62%, transparent); box-shadow: var(--cekung), 0 0 0 1px var(--garis); margin-inline: auto; } /* Penanda yang meluncur: satu elemen digeser dengan `translate3d`, jadi perpindahannya mulus tanpa memaksa dua tombol menghitung ulang ukurannya. */ .pindah-geser { position: absolute; top: 3px; left: 3px; z-index: 0; height: calc(100% - 6px); border-radius: 999px; background: var(--sorot); box-shadow: var(--bayang-sorot); transition: transform var(--sedang) var(--pegas), width var(--sedang) var(--halus); will-change: transform; } .pindah-tombol { position: relative; z-index: 1; padding: 7px 22px; border-radius: 999px; font-weight: 600; font-size: 12.5px; letter-spacing: .04em; color: var(--tinta-2); transition: color var(--sedang) var(--halus); } .pindah-tombol:hover { color: var(--tinta); } .pindah-tombol.aktif { color: var(--sorot-teks); } .atas-alat { display: flex; align-items: center; gap: 6px; } /* ========================================================================== 5. TOMBOL ========================================================================== Tombol hantu SENGAJA tidak punya latar sendiri saat diam — cuma garis tipis. Di bilah atas yang berkaca, tombol berlatar putih penuh terlihat seperti tambalan yang menutupi kacanya. */ .tombol { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; border-radius: 10px; font-weight: 600; font-size: 12.5px; white-space: nowrap; border: 1px solid transparent; transition: background var(--cepat) var(--halus), color var(--cepat) var(--halus), border-color var(--cepat) var(--halus), transform var(--cepat) var(--halus); } .tombol svg { font-size: 15px; } .tombol:active { transform: scale(.975); } .tombol[disabled] { opacity: .45; pointer-events: none; } .tombol-utama { background: var(--sorot); color: var(--sorot-teks); box-shadow: var(--bayang-sorot), inset 0 -1px 0 rgba(0, 0, 0, .1); } .tombol-utama:hover { background: var(--sorot-tekan); } /* Tombol hantu jadi keping BEKU, bukan garis kosong: isian sangat tipis (28%) plus buram 10px. Bedanya kecil di potret dan besar waktu digulir — kepingnya punya bahan, jadi dia ikut keluarga yang sama dengan panel dan lembar alih-alih terlihat seperti garis yang menempel di kaca bilah atas. */ .tombol-hantu { color: var(--tinta-2); border-color: var(--garis); background: var(--keping); backdrop-filter: blur(10px) saturate(130%); -webkit-backdrop-filter: blur(10px) saturate(130%); } .tombol-hantu:hover { color: var(--tinta); border-color: var(--garis-tegas); background: var(--keping-kuat); } .tombol-sunyi { color: var(--tinta-2); } .tombol-sunyi:hover { color: var(--tinta); background: var(--sorot-lembut); } .tombol-bulat { width: 33px; height: 33px; padding: 0; border-radius: 50%; } .tombol-lebar { width: 100%; padding: 11px; font-size: 14px; } .tombol-kecil { padding: 5px 11px; font-size: 11.5px; border-radius: var(--r2); } .tutup::before { content: ''; width: 13px; height: 13px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat; } /* ========================================================================== 5b. PEMILIH TEMA ========================================================================== Enam tema, dan pemilihnya harus mengambil ruang sekecil mungkin di bilah atas — dia perkakas yang dipakai sekali lalu dilupakan, bukan navigasi. Jadi tombolnya SATU KEPING 2x2 tanpa teks, dan kepingnya bukan gambar: keempat kotaknya memakai token tema yang sedang jalan (`--kanvas`, `--kaki-pojok`, `--aksen`, `--tinta`), jadi tombolnya selalu memperlihatkan tema yang sedang aktif tanpa satu pun label. Ikon palet bergambar akan menuntut orang menebak; keping ini tidak. Di dalam menunya kebalikannya: yang ditampilkan palet mentor APA ADANYA, bukan token turunannya. Alasannya di `tema.js` — singkatnya, kelima ground turunan nyaris hitam semua, jadi barisnya akan terlihat seragam justru di tempat orang harus membedakannya. */ .tema-bungkus { position: relative; display: flex; } /* (0,3,0) supaya tetap menang di atas `.atas-alat .tombol { padding: 8px 10px }` milik layar sempit — kepingnya persegi, dan padding asimetris membuatnya berhenti persegi. */ .atas-alat .tombol.tombol-tema { width: 33px; height: 33px; padding: 0; } .tema-keping { display: grid; grid-template: repeat(2, 1fr) / repeat(2, 1fr); width: 17px; height: 17px; border-radius: 5px; overflow: hidden; box-shadow: 0 0 0 1px var(--garis-tegas), var(--kilau); } /* Aturan layar sempit menyembunyikan `span` di dalam tombol bilah atas (`.atas-alat .tombol span`) untuk membuang labelnya. Keping ini juga span, jadi tanpa pengecualian ini tombolnya jadi kotak kosong di ponsel. */ .atas-alat .tombol-tema .tema-keping { display: grid; } .tema-keping i { display: block; } .tombol-tema[aria-expanded='true'] { color: var(--tinta); border-color: var(--garis-tegas); background: var(--keping-kuat); } /* --- menunya --- */ .tema-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 5; width: 268px; max-width: calc(100vw - 24px); padding: var(--r2); border-radius: var(--lengkung); /* ISIANNYA PADAT, DAN INI SATU-SATUNYA PANEL DI BERKAS INI YANG BEGITU. ------------------------------------------------------------------------ Putaran pertama menu ini memakai `--kaca-padat` + `backdrop-filter: blur(26px)` seperti lembar dan panel obrolan. Hasilnya: teks di belakang menu tetap TERBACA — bukan samar, tapi terbaca — dan buramnya tidak mengerjakan apa pun. Sebabnya bukan alphanya. Menu ini anak dari `.atas`, dan `.atas` punya `backdrop-filter` sendiri. Elemen yang punya backdrop-filter membentuk BACKDROP ROOT: turunannya cuma bisa mengaburkan apa yang dilukis di dalam akar itu, dan di dalam bilah atas tidak ada apa-apa di bawah menu ini. Jadi buramnya mengaburkan bidang kosong, sementara isian .92-nya tetap melewatkan 8% halaman di belakangnya tanpa dikaburkan sedikit pun. Gejalanya khas dan mudah salah dibaca sebagai "alphanya kurang": makin dinaikkan alphanya makin bersih, dan buramnya tetap tidak pernah bekerja. Lembar dan panel obrolan tidak kena karena keduanya anak ``. Jadi menu ini padat, dan kacanya datang dari yang lain: sorot spekular di pojok kiri atas, tepi rambut, kilau 1px, bayang berlapis, dan pendar ambien. Kelimanya tidak butuh backdrop sama sekali. */ background: radial-gradient(120% 90% at 8% -10%, color-mix(in srgb, var(--cahaya) 11%, transparent), transparent 52%), var(--permukaan); box-shadow: var(--bayang-3), var(--kilau), 0 0 90px -30px color-mix(in srgb, var(--ambien) 26%, transparent); border: 1px solid var(--garis); animation: temaMenuMasuk var(--sedang) var(--halus) both; } @keyframes temaMenuMasuk { from { opacity: 0; transform: translate3d(0, -6px, 0) scale(.985); } to { opacity: 1; transform: none; } } .tema-menu-kepala { padding: 6px 10px 8px; font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); } .tema-baris { display: grid; grid-template-columns: 46px 1fr 14px; align-items: center; gap: var(--r3); width: 100%; padding: 7px 10px; border-radius: var(--lengkung-s); text-align: left; transition: background var(--cepat) var(--halus); } .tema-baris:hover { background: var(--sorot-lembut); } .tema-baris[aria-checked='true'] { background: var(--sorot-lembut); } /* Palet: empat pita, TANPA celah dan tanpa sudut membulat di dalamnya — satu bidang utuh yang terbagi empat. Dengan celah, keempatnya terbaca sebagai empat benda; tanpa celah, terbaca sebagai satu palet. */ .tema-palet { display: grid; grid-template-columns: repeat(4, 1fr); height: 18px; border-radius: 5px; overflow: hidden; box-shadow: 0 0 0 1px var(--garis), var(--kilau); } .tema-palet i { display: block; } .tema-teks { display: flex; flex-direction: column; min-width: 0; } .tema-nama { font-size: 12.5px; font-weight: 600; color: var(--tinta-2); letter-spacing: -.01em; } .tema-catatan { font-size: 10.5px; font-weight: 500; color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tema-baris:hover .tema-nama, .tema-baris[aria-checked='true'] .tema-nama { color: var(--tinta); } /* Centang cuma muncul di yang terpilih. Dia tanah liat, bukan krem: di baris yang latarnya sudah terangkat, krem di atas krem berhenti terbaca. */ .tema-tanda { width: 14px; height: 14px; } .tema-baris[aria-checked='true'] .tema-tanda { background: var(--aksen); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; } .tema-menu-kaki { margin-top: 6px; padding: 8px 10px 4px; border-top: 1px solid var(--garis); font-size: 10.5px; color: var(--tinta-3); } /* --- pergantian temanya sendiri --- Enam puluhan warna berganti dalam satu frame terbaca sebagai KEDIPAN, jadi pergantiannya dilewatkan View Transitions: peramban memotret halaman lama dan baru, lalu menyilangkan keduanya di compositor. Yang perlu ditimpa di sini: perpindahan DATIN <-> HSI (bagian 6b) memakai pseudo-elemen yang sama, tapi dia MENGGESER halaman dan membekukan bilah atas. Untuk ganti tema keduanya salah — tidak ada yang berpindah tempat, dan bilah atas justru salah satu yang paling berubah warnanya. Jadi kelas `tema-pindah` (dipasang tepat sebelum transisi, dibuang setelahnya) mengembalikan keduanya jadi silang-pudar di tempat. Tidak dibungkus `prefers-reduced-motion` karena `tema.js` sudah memeriksa sendiri: yang tidak mau gerak tidak pernah memulai transisinya, jadi pseudo-elemen ini tidak pernah ada untuk mereka. */ html.tema-pindah .atas { view-transition-name: none; } html.tema-pindah::view-transition-old(root) { animation: temaPudarKeluar 340ms var(--halus) both; } html.tema-pindah::view-transition-new(root) { animation: temaPudarMasuk 420ms var(--halus) both; } @keyframes temaPudarKeluar { to { opacity: 0; } } @keyframes temaPudarMasuk { from { opacity: 0; } to { opacity: 1; } } /* ========================================================================== 6. HALAMAN ========================================================================== */ main { position: relative; z-index: 1; } .halaman { max-width: var(--lebar-isi); margin: 0 auto; padding: var(--r7) var(--r6) var(--r8); } /* Masuknya isi halaman waktu berganti dataset. Sengaja pendek dan cuma naik 10px: perpindahan tab itu tindakan yang sering diulang, dan animasi panjang di situ berubah dari "mulus" jadi "lambat". */ @keyframes masuk { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } } .halaman > * { animation: masuk 300ms var(--halus) backwards; } /* ========================================================================== 6b. PERPINDAHAN DATIN <-> HSI ========================================================================== ARAHNYA MENGIKUTI LETAK TOMBOLNYA. Pindah ke tab kanan menggeser isi ke kiri, dan sebaliknya — `--arah` disetel `1` atau `-1` oleh app.js sebelum perpindahan dimulai. Arah yang searah dengan tempat yang diklik membuat perpindahannya terbaca sebagai "berpindah halaman"; arah yang selalu sama terbaca sebagai "layar berkedip". Dipakai lewat View Transitions API: browser mengambil potret halaman lama dan halaman baru, lalu menyilangkan keduanya di compositor. Karena yang dianimasikan potret (bukan elemen sungguhan), tidak ada satu pun perhitungan tata letak yang terjadi selama perpindahan. */ @media (prefers-reduced-motion: no-preference) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } ::view-transition-old(root) { animation: halamanKeluar 320ms var(--halus) both; } ::view-transition-new(root) { animation: halamanMasuk 420ms var(--halus) both; } /* Yang lama pergi lebih cepat daripada yang baru datang, dan jaraknya lebih pendek (3% vs 4%). Timpang begini disengaja: yang baru jadi terasa "mendorong masuk" alih-alih dua lapisan yang bertukar tempat. */ @keyframes halamanKeluar { to { opacity: 0; transform: translate3d(calc(var(--arah, 1) * -3%), 0, 0); } } @keyframes halamanMasuk { from { opacity: 0; transform: translate3d(calc(var(--arah, 1) * 4%), 0, 0); } to { opacity: 1; transform: none; } } /* Bilah atas tidak ikut bergeser — dia jangkar yang membuat isinya terasa berganti di dalam kerangka yang sama. */ .atas { view-transition-name: bilah-atas; } ::view-transition-group(bilah-atas) { animation-duration: 0ms; } ::view-transition-old(bilah-atas), ::view-transition-new(bilah-atas) { animation: none; opacity: 1; } } /* --- judul halaman --- Versi lama memasang batang merah 3px di sisi kiri judul. Itu dibuang: garis berwarna di kiri judul adalah salah satu tanda template admin yang paling mudah dikenali, dan merahnya jadi merah KEDUA di layar. Penggantinya kerlingan mata (eyebrow) di ATAS judul — label mikro tanah liat dengan tracking lebar. Ini pola editorial: pembaca dapat konteks sebelum judulnya, bukan hiasan di sebelahnya. */ .judul-halaman { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--r6); flex-wrap: wrap; margin-bottom: var(--r6); } .judul-kiri { min-width: 0; } .judul-halaman h1 { font-size: clamp(2rem, 4.2vw, 3.05rem); font-weight: 380; letter-spacing: -.035em; line-height: 1.04; } /* Garis pemantik di ATAS judul, bukan di sebelahnya. Pendek (40px), tipis (2px), tanah liat. Tugasnya sama dengan batang merah lama — menandai awal halaman — tapi karena posisinya di atas dan bukan di samping, dia terbaca sebagai pembuka rubrik, bukan sebagai bingkai. Dibuat lewat ::before supaya tidak perlu menyentuh JS sama sekali. */ .judul-halaman h1::before { content: ''; display: block; width: 34px; height: 2px; margin-bottom: var(--r4); border-radius: 2px; background: var(--aksen); } .judul-sub { margin-top: var(--r3); color: var(--tinta-2); font-size: 14px; max-width: 58ch; font-weight: 450; } /* --- catatan "terakhir diunggah" --- */ .cap-waktu { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; font-size: 12px; } .cap-baris { display: flex; align-items: center; gap: 7px; color: var(--tinta-3); } /* Yang dicari mata di blok ini cuma dua: kapan datanya, dan masih segar atau tidak. Jadi cuma dua bagian itu yang diberi tinta penuh; sisanya keterangan dan boleh tetap redup. */ .cap-baris b { color: var(--tinta); font-weight: 600; } .cap-titik { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--turun); box-shadow: 0 0 0 3px color-mix(in srgb, var(--turun) 18%, transparent); } .cap-titik.basi { background: var(--awas); box-shadow: 0 0 0 3px color-mix(in srgb, var(--awas) 18%, transparent); } .cap-titik.lama { background: var(--tinta-3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tinta-3) 16%, transparent); } .cap-sesi { display: flex; gap: 5px; } /* Pil sesi. Sebagian dirender sebagai