/* ===================================================================== KUBICSA — base.css Reset, token warna, tipografi, dan dasar tata letak. --------------------------------------------------------------------- Dua tema diaktifkan lewat . Nilainya diganti di satu tempat; tidak ada jalur kode terpisah. ===================================================================== */ /* --------------------------------------------------------------------- 1. Font — DI-VENDOR LOKAL, bukan dari Google Fonts --------------------------------------------------------------------- Jaringan sekolah di Indonesia sering memblokir fonts.googleapis.com. Kalau Silkscreen gagal dimuat, seluruh identitas visual runtuh dan judul jatuh ke font sistem. Hanya subset latin yang diambil (48 KB total) — Bahasa Indonesia tidak butuh sisanya. --------------------------------------------------------------------- */ @font-face { font-family: 'Silkscreen'; font-style: normal; font-weight: 400; font-display: swap; /* teks langsung terbaca walau font belum tiba */ src: url('../assets/fonts/silkscreen-400-latin.woff2') format('woff2'); } @font-face { font-family: 'Silkscreen'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/silkscreen-700-latin.woff2') format('woff2'); } @font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 400 800; /* font variabel: satu berkas untuk semua bobot */ font-display: swap; src: url('../assets/fonts/baloo2-latin-var.woff2') format('woff2'); } /* --------------------------------------------------------------------- 2. Reset --------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* * Atribut HTML `hidden` bekerja lewat UA stylesheet ([hidden]{display:none}) * — prioritas SELALU KALAH dari aturan penulis mana pun yang men-set * `display` pada elemen yang sama, termasuk kelas sesederhana `.pil{ * display:inline-flex}`. Ditemukan lewat pengujian visual nyata: #pil-timer * (kelas .pil.pil-timer) tetap tampil dengan display:flex walau * elPilTimer.hidden di-set true oleh test.js — timer Lab yang seharusnya * tidak ada (§3) malah bocor tampil. * Aturan global ini menjamin `hidden` SELALU menang di seluruh aplikasi, * supaya pola bug yang sama tidak diam-diam terulang di elemen lain. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; height: 100%; } body { /* Mencegah tarikan "pull to refresh" dan efek memantul saat siswa menggeser objek 3D di dekat tepi layar (§6). */ overscroll-behavior: none; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } img, svg { max-width: 100%; height: auto; display: block; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: none; padding: 0; cursor: pointer; } h1, h2, h3, h4, p, ul, ol, figure { margin: 0; } ul, ol { padding: 0; list-style: none; } a { color: inherit; } /* --------------------------------------------------------------------- 3. Token warna --------------------------------------------------------------------- CATATAN AKSESIBILITAS — dibaca sebelum mengubah nilai di bawah. Palet §10.2 diukur dengan rumus kontras WCAG dan beberapa pasangan gagal AA. Palet pastelnya dipertahankan sebagai identitas visual, tapi pasangan yang dipakai untuk TEKS disesuaikan: --teks-lembut digelapkan dari #A87B90 (3,23:1 — gagal) menjadi #8E6176 (4,62:1 — lulus). Nilai lama tetap ada sebagai --teks-samar, khusus hiasan non-teks seperti garis pemisah. --primer terlalu terang untuk teks putih (2,60:1 dan 2,09:1). Label tombol utama memakai --tinta, bukan putih. --tinta satu warna gelap untuk teks di atas permukaan berwarna (benar/salah/aksen/primer). Lulus 5,8–10,6:1 di semua. --primer dipakai sebagai garis tepi bersifat hiasan; yang menanggung kontras batas (≥3:1) adalah bayangan padat --primer-tua. --------------------------------------------------------------------- */ :root, :root[data-tema='manis'] { --bg: #FFF0F6; --bg-pola: url('../assets/pattern/pola-bintang-pink.webp'); --primer: #FF6FA5; --primer-tua: #D94A80; --aksen: #FFD84D; --panggung: #FFFDF7; --teks: #5C2C43; /* Diukur terhadap titik TERGELAP pola latar, bukan terhadap --bg murni: 4,70:1 di atas pola, 5,80:1 di atas panggung. */ --teks-lembut: #84576C; --teks-samar: #A87B90; /* nilai asli §10.2 — hiasan saja, bukan teks */ /* Cadangan color-mix() — lihat catatan di bawah blok tema. */ --cad-primer-55: rgba(255, 111, 165, 0.55); --cad-primer-45: rgba(255, 111, 165, 0.45); --cad-primer-30: rgba(255, 111, 165, 0.30); --cad-panggung-primer88: #FFECED; --cad-panggung-primer92: #FFF2F0; } :root[data-tema='sejuk'] { --bg: #EFFBF6; --bg-pola: url('../assets/pattern/pola-bintang-biru.webp'); --primer: #3FC8A8; /* Digelapkan sedikit dari #2A9E84 (§10.2). Nilai aslinya hanya mencapai 2,97:1 terhadap latar berpola — di bawah ambang 3:1 untuk batas komponen, sehingga tepi panggung samar bagi penglihatan rendah. Nilai ini 3,21:1 di atas latar dan 3,52:1 di atas panggung. */ --primer-tua: #24987E; --aksen: #FFD84D; --panggung: #FFFDF7; --teks: #1F4F45; /* 4,61:1 di atas pola, 5,06:1 di atas panggung. */ --teks-lembut: #48766C; --teks-samar: #6E9C92; --cad-primer-55: rgba(63, 200, 168, 0.55); --cad-primer-45: rgba(63, 200, 168, 0.45); --cad-primer-30: rgba(63, 200, 168, 0.30); --cad-panggung-primer88: #E8F7EE; --cad-panggung-primer92: #F0F9F1; } /* --------------------------------------------------------------------- Kenapa ada token --cad-* di atas --------------------------------------------------------------------- color-mix() baru didukung Chrome 111 / Safari 16.2 — Februari 2023. Itu lantai yang JAUH lebih tinggi daripada sintaks JavaScript proyek ini (awal 2020), jadi color-mix-lah yang menentukan browser tertua yang masih menampilkan aplikasi ini dengan benar. Deklarasi yang memakai fungsi tak dikenal dibuang browser saat parsing, dan yang tersisa adalah deklarasi SEBELUMNYA. Jadi polanya di seluruh CSS proyek ini selalu dua baris berurutan: background: ; cadangan, dimengerti semua background: color-mix(...); dipakai bila didukung Yang warnanya sama di kedua tema ditulis harfiah langsung di tempatnya. Yang bergantung --primer memakai token --cad-* di atas, karena satu nilai harfiah tidak mungkin benar untuk tema Manis dan Sejuk sekaligus. Nilainya bukan kira-kira: color-mix(in srgb, A p%, B) mencampur di ruang sRGB, jadi tiap kanal = A*p + B*(1-p), dan itu yang dihitung. --------------------------------------------------------------------- */ :root { /* Semantik — sama di kedua tema (§10.2) */ --benar: #4ECB71; --salah: #FF7A7A; --netral: #C9BFD4; /* Tinta gelap untuk teks di atas permukaan berwarna */ --tinta: #3A2030; /* Bentuk */ --radius-panggung: 28px; --radius-kartu: 22px; --radius-kecil: 14px; --radius-pil: 999px; --tebal-stiker: 3px; --angkat: 4px; /* tinggi bayangan padat gaya stiker */ /* Jarak */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; /* Target sentuh minimum (§10.8) */ --sentuh: 44px; /* Tipografi (§10.4) — tidak ada yang di bawah 12px */ --f-judul: 26px; --f-subjudul: 17px; --f-body: 15px; --f-label: 12px; --font-pixel: 'Silkscreen', 'Courier New', monospace; --font-teks: 'Baloo 2', 'Segoe UI', system-ui, -apple-system, sans-serif; --transisi: 250ms cubic-bezier(.34, 1.32, .64, 1); } /* --------------------------------------------------------------------- 4. Dasar halaman --------------------------------------------------------------------- */ body { background-color: var(--bg); color: var(--teks); font-family: var(--font-teks); font-size: var(--f-body); line-height: 1.5; /* Aman dari takik dan bilah gestur di ponsel modern */ padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } /* Pola latar sebagai TEKSTUR, bukan permukaan. --------------------------------------------------------------------- Berkas pola aslinya pink pekat. Dipasang langsung sebagai background body, ia mengambil alih seluruh layar: teks sekunder dan tautan jatuh jauh di bawah ambang WCAG, dan seluruh perhitungan kontras token (yang mengasumsikan permukaan terang --bg) menjadi tidak berlaku. Karena itu pola ditempatkan di lapisan terpisah dengan opasitas rendah, sehingga --bg tetap menjadi warna permukaan yang sesungguhnya. Identitas visualnya tetap terasa, keterbacaannya selamat. */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: var(--bg-pola); background-repeat: repeat; background-size: 190px auto; opacity: 0.13; } @media (prefers-contrast: more) { body::before { display: none; } } /* Perangkat tanpa dukungan WebP (lihat js/webp-fallback.js). Pola latar hanya ada dalam format .webp — tanpa aturan ini, browser memuat berkas yang tidak bisa didekodenya lalu menampilkan lapisan kosong. Warna --bg memang sudah dirancang sebagai permukaan yang sesungguhnya, jadi tanpa tekstur pun keterbacaan dan seluruh perhitungan kontras tetap berlaku. */ html[data-webp='tidak'] body::before { display: none; } /* --------------------------------------------------------------------- 5. Tipografi --------------------------------------------------------------------- */ .teks-pixel { font-family: var(--font-pixel); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.25; } /* Judul pixel dengan cahaya berlapis. Menggantikan gambar teks di assets/_arsip-teks/ — gambar itu pecah saat diperbesar dan tidak terbaca pembaca layar. */ /* * BOBOT 400, BUKAN 700 — ini bukan pilihan gaya. * * Pada berkas Silkscreen bobot 700 yang di-vendor di atas, dua glif tidak * terbaca: "M" kehilangan puncak tengahnya sehingga tercetak sebagai "H", * dan "4" luruh jadi potongan buntung. Karena .judul juga memaksa * text-transform:uppercase, akibatnya terbaca langsung oleh peserta di * hampir setiap layar: * * "Cara Bermain" -> CARA BERHAIN * "Kode Kamu" -> KODE KAHU * "Sebelum Mulai" -> SEBELUH HULAI * "Laboratorium" -> LABORATORIUH * * Bobot 400 memuat kedua glif itu dengan benar dan tetap tebal — Silkscreen * memang font piksel, perbedaan tebalnya tipis. Kalau kelak berkas 700 * diganti dengan subset yang glifnya utuh, baris ini boleh dikembalikan. */ .judul { font-family: var(--font-pixel); font-size: var(--f-judul); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teks); text-shadow: 0 2px 0 var(--panggung), 0 0 10px var(--cad-primer-55), 0 0 22px var(--cad-primer-30); text-shadow: 0 2px 0 var(--panggung), 0 0 10px color-mix(in srgb, var(--primer) 55%, transparent), 0 0 22px color-mix(in srgb, var(--primer) 30%, transparent); } .subjudul { font-size: var(--f-subjudul); font-weight: 600; } .body { font-size: var(--f-body); } .label { font-size: var(--f-label); letter-spacing: 0.07em; text-transform: uppercase; color: var(--teks-lembut); font-weight: 600; } .lembut { color: var(--teks-lembut); } /* Angka besar (skor, timer). Tabular agar digit tidak bergoyang saat menghitung mundur. */ .angka { font-family: var(--font-pixel); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; } /* --------------------------------------------------------------------- 6. Aksesibilitas --------------------------------------------------------------------- */ /* Terlihat hanya oleh pembaca layar. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Cincin fokus yang jelas. Jangan pernah dihapus tanpa pengganti — siswa yang memakai keyboard atau switch access kehilangan orientasi. */ :focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: var(--radius-kecil); } /* Hormati preferensi pengurangan gerak (§10.6). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Pola latar dimatikan di mode kontras tinggi — lihat aturan body::before di bagian 4. */