/* ========================================================================== TUTOORIA — 01. DESIGN TOKENS Satu-satunya sumber kebenaran untuk warna, tipografi, ruang, dan motion. Aturan main: tidak ada hex / px mentah di file lain. Semua lewat token. ========================================================================== */ :root { color-scheme: light; /* =============================================================== 1. WARNA IDENTITAS — tiga warna utama Tutooria =============================================================== */ /* Hitam kecoklatan, bukan hitam murni — oklch(0.20 0.018 55). Lebih hangat dan lembut, tetap terbaca sebagai hitam. */ --clr-black: #1d140e; --clr-white: #ffffff; --clr-purple: #d992ff; /* --------------------------------------------------------------- ATURAN PAKAI UNGU (rasio kontras terukur) ungu di atas hitam .... 8.20:1 → lolos WCAG AAA ungu di atas putih .... 2.21:1 → GAGAL, bahkan untuk teks besar Karena itu, di atas permukaan TERANG ungu hanya dipakai sebagai BIDANG BERUKURAN NYATA — sorotan teks, chip, pil, blok CTA, avatar — selalu dengan huruf HITAM di atasnya. Ungu TIDAK dipakai untuk: · warna teks di atas putih, · garis tipis, garis bawah, titik kecil (ikut hilang di 2.21:1). Elemen garis di atas putih memakai hitam; ungu kembali bebas dipakai untuk garis dan teks di atas permukaan HITAM (8.2:1). --------------------------------------------------------------- */ /* Turunan fungsional. Netral murni turunan hitam; ungu muda hanya sebagai latar lembut, bukan untuk teks. */ --clr-gray-25: #fbfbfb; /* kanvas area aplikasi */ --clr-gray-50: #f2f2f4; /* abu muda lembut — latar seksi cekung */ --clr-gray-75: #f0f0f0; /* kanvas versi agak gelap — butir menu aktif, ubin */ --clr-gray-100: #ededed; --clr-gray-200: #e2e2e2; --clr-gray-300: #cfcfcf; --clr-gray-400: #9a9a9a; --clr-gray-600: #5f5f5f; /* teks sekunder — 6.4:1 di atas putih */ --clr-gray-900: #2d241f; /* tinta teks area aplikasi, hangat — 15:1 */ --clr-purple-50: #faf1ff; --clr-purple-100: #f1ddff; /* --------------------------------------------------------------- 2. PERAN SEMANTIK --------------------------------------------------------------- */ --bg: var(--clr-white); --bg-sunken: var(--clr-gray-50); --bg-raised: var(--clr-white); --bg-invert: var(--clr-black); /* Hover bidang hitam: hitam yang sama, diangkat satu jenjang ke arah putih — bukan warna lain. Umpan baliknya terasa tanpa tombol berubah identitas, dan huruf putih di atasnya masih 12:1. */ --bg-invert-hover: color-mix(in oklab, var(--clr-black) 88%, var(--clr-white)); --bg-accent: var(--clr-purple); /* Kanvas aplikasi: abu nyaris putih, supaya kartu putih (--bg-raised) terangkat tanpa bayangan. Versi -strong = satu jenjang lebih gelap, untuk bidang di atas kanvas (menu aktif, ubin pintasan). */ --bg-canvas: var(--clr-gray-25); --bg-canvas-strong: var(--clr-gray-75); --fg: var(--clr-black); --fg-muted: var(--clr-gray-600); --fg-subtle: var(--clr-gray-400); --fg-invert: var(--clr-white); --accent: var(--clr-purple); /* selalu sebagai bidang */ --accent-fg: var(--clr-black); /* teks di atas bidang ungu */ --accent-hover: color-mix(in oklab, var(--clr-purple) 82%, var(--clr-black)); --accent-soft: var(--clr-purple-50); --accent-mid: var(--clr-purple-100); --line: var(--clr-gray-200); /* satu-satunya warna border netral — semua komponen */ --line-strong: var(--clr-black); --shadow-color: 29 20 14; /* RGB --clr-black */ --selection-bg: var(--clr-purple); --selection-fg: var(--clr-black); /* Cincin fokus: hitam di atas permukaan terang (18:1), ungu di atas permukaan hitam (8.2:1). Ungu di atas putih tidak cukup kontras. */ --focus-color: var(--clr-black); /* --------------------------------------------------------------- 3. TIPOGRAFI Farro (judul) × Inter (teks & UI). Farro tidak punya italic — penekanan dilakukan lewat sorotan ungu, bukan miring. "Inter Variable" adalah nama keluarga versi swa-inang (@fontsource); "Inter" adalah nama yang dipakai Google Fonts, yang kita muat di . Keduanya disebut supaya kedua sumber sama-sama kena. --------------------------------------------------------------- */ --font-display: "Farro", "Futura", "Avenir Next", Helvetica, Arial, sans-serif; --font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; --weight-body: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Inter tebal — judul kartu */ --weight-display: 700; /* bobot terberat Farro */ /* SATU skala untuk seluruh produk — situs pemasaran dan area aplikasi (21 Sep 2026). Dulu ada dua: skala fluid besar untuk situs (teks isi 16–19px, judul halaman 33–46px) dan skala padat untuk aplikasi. Yang dipakai sekarang adalah yang padat, supaya ukuran huruf di halaman mana pun sama persis. Sembilan jenjang pertama TETAP (tidak fluid): layar lebar sudah dibesarkan lewat --root-size di bawah, jadi ukurannya tidak perlu ikut lebar layar dua kali. Tiga jenjang teratas masih fluid — judul sebesar itu perlu mengecil di ponsel supaya tidak patah di tengah kata. */ --step--2: 0.75rem; /* 12 — ukuran terkecil yang dipakai; di bawah ini teks tidak lagi nyaman dibaca, jadi label yang membawa informasi tidak pernah lebih kecil */ --step--1: 0.8125rem; /* 13 */ --step-0: 0.9375rem; /* 15 — teks isi di seluruh produk */ --step-1: 1.0625rem; /* 17 */ --step-2: 1.25rem; /* 20 */ --step-3: 1.5rem; /* 24 */ --step-4: 1.75rem; /* 28 */ --step-5: clamp(1.75rem, 1.55rem + 0.9vw, 2rem); /* 28–32 */ --step-6: clamp(1.875rem, 1.55rem + 1.4vw, 2.25rem); /* 30–36 */ --step-7: clamp(2rem, 1.6rem + 1.8vw, 2.5rem); /* 32–40 */ --step-8: clamp(2.25rem, 1.75rem + 2.2vw, 2.75rem); /* 36–44 */ /* Skala JUDUL — satu-satunya tempat ukuran judul ditentukan. Komponen tidak memilih --step-* sendiri untuk judulnya; ia memakai peran ini (atau kelas .display/.h1–.h4 di base.css). Ukurannya kini sama di situs dan di aplikasi: display hero beranda saja 30–36px h1 judul halaman (satu per halaman) 28px h2 judul seksi 24px h3 judul blok besar, langkah, fitur 20px h4 FAQ, nama tim, linimasa 17px */ --text-display: var(--step-6); --text-h1: var(--step-4); --text-h2: var(--step-3); --text-h3: var(--step-2); --text-h4: var(--step-1); --text-lead: var(--step-1); /* paragraf pembuka di bawah judul */ /* Judul KARTU sengaja keluar dari skala Farro di atas: Hanken Grotesk tebal, satu jenjang di atas teks isi (17px lawan 15px). Kartu tampil berderet; judul display besar di tiap kartu membuat deretannya riuh. */ --text-card-title: var(--step-1); /* Judul sekarang berukuran 24–36px, bukan 40–69px seperti dulu, jadi leading 1.0 membuat baris kedua judul menempel ke baris pertama dan descender (g, j, y) bersentuhan — padahal text-wrap: balance memang dibuat agar judul jatuh dua baris. (21 Sep 2026) tight judul: display, h1, h2 snug label & judul pendek satu-dua baris normal teks pendek, keterangan relaxed teks isi yang berpotensi lebih dari dua baris prose paragraf panjang */ --leading-tight: 1.1; --leading-snug: 1.2; --leading-normal: 1.35; --leading-relaxed: 1.5; --leading-prose: 1.6; --tracking-tight: -0.015em; /* judul kini kecil di semua halaman; -0.03em membuat Farro berdempet */ --tracking-snug: -0.012em; /* Batas panjang baris. Unit ch = lebar angka "0", yang lebih lebar dari rerata huruf, jadi 60ch ≈ 68 karakter — masih di dalam rentang baca 45–75 karakter. */ --measure: 60ch; /* --------------------------------------------------------------- 4. RUANG — basis 8pt, jenjang besar ikut fluid --------------------------------------------------------------- */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-s: 1rem; --space-m: 1.5rem; --space-l: 2rem; --space-xl: 3rem; --space-2xl: clamp(3.5rem, 2.8rem + 3.5vw, 6rem); --space-3xl: clamp(5rem, 3.6rem + 7vw, 9rem); --space-4xl: clamp(7rem, 4.6rem + 12vw, 14rem); /* --------------------------------------------------------------- 5. LAYOUT & GRID BREAKPOINT — satu-satunya jenjang yang boleh dipakai di @media. CSS belum bisa memakai var() di dalam @media, jadi nilainya ditulis langsung. Tulis `min-width: ` untuk naik, dan `max-width: ` untuk turun, supaya dua aturan tidak berlaku bersamaan tepat di ambangnya. sm 30rem 480px ponsel besar / ponsel lanskap md 48rem 768px tablet potret lg 64rem 1024px tablet lanskap & laptop kecil (navigasi desktop mulai di sini) xl 80rem 1280px desktop 2xl 90rem 1440px desktop besar (skala root mulai naik) Empat kelas perangkat: Smartphone < 48rem Tablet 48rem – 63.99rem Desktop kecil 64rem – 89.99rem Desktop besar ≥ 90rem Media query berbasis rem selalu dihitung dari 16px bawaan browser, bukan dari font-size , jadi ambang ini tidak ikut bergeser oleh skala root di bawah. Semua seksi memakai tepi yang sama: lebar penuh dikurangi --gutter (keputusan "fluid" yang dimulai dari header dan katalog). Karena itu --container tidak lagi membatasi; yang menjaga keterbacaan adalah batas ukuran tiap komponen (--measure, ch, jumlah kolom). --------------------------------------------------------------- */ /* Lebar isi halaman. SATU nilai untuk semua halaman situs (21 Sep 2026): header, tiap seksi, dan footer berbagi tepi yang sama, jadi logo di bilah atas sejajar dengan judul dan kartu di bawahnya. Sebelumnya situs fluid (--container: none) dan hanya beranda yang dipusatkan, sehingga lebar bilah atas berbeda-beda antar halaman. Area aplikasi punya wadahnya sendiri (--app-container) karena ada sidebar. */ /* 24 Sep 2026: 72rem → 83.75rem atas permintaan user. Nilainya dalam rem, jadi di atas 1440px ia ikut membesar bersama --root-size (lihat "Responsif" di README) — 1340px di layar biasa, ±1590px di 2560px. Dua tempat sengaja TIDAK memakainya, keduanya diminta user: bilah atas (.container--fluid, lihat "CARI GLOBAL" di components.css) dan katalog Kelas (.katalog-wide di pages.css). Selain keduanya, --container tetap berlaku di seluruh halaman. */ --container: 83.75rem; /* 1340px */ --container-wide: 80rem; --container-text: 44rem; /* Batas atas 4.5rem baru tercapai di atas ±2400px; sampai 1440px nilainya sama persis dengan sebelumnya. */ --gutter: clamp(1.25rem, 0.8rem + 2.2vw, 4.5rem); /* Sistem .row / .col-* (base.css). 12 kolom. --grid-col-gap = jarak antar-KOLOM. SATU nilai untuk seluruh produk, situs maupun aplikasi (21 Sep 2026): komponen tidak boleh menimpanya, supaya kartu yang berderet di halaman mana pun berjarak sama. Dulu nilainya fluid 16–32px di situs dan 16px di aplikasi, plus beberapa komponen memakai 32–48px sendiri — hasilnya tidak pernah seragam. --grid-gap = jarak antar-BARIS. Ini boleh ditimpa per komponen lewat --row-gap, karena irama vertikal tiap halaman memang berbeda. */ --grid-columns: 12; --grid-gap: var(--space-s); --grid-col-gap: var(--space-s); /* Lebar minimum kolom untuk .row--auto (isi mengalir, jumlah kolom mengikuti ruang — untuk katalog yang jumlah kartunya berubah). */ --col-min-s: 14rem; --col-min-m: 17rem; --col-min-l: 21rem; /* --------------------------------------------------------------- 6. BENTUK — sudut tegas, sesuai karakter merek --------------------------------------------------------------- */ --radius-xs: 4px; --radius-s: 6px; --radius-m: 8px; /* tombol, input, chip */ --radius-l: 12px; /* kartu */ --radius-xl: 16px; /* blok besar */ --radius-pill: 999px; --border-hair: 1px; --border-bold: 2px; /* garis tebal non-tombol: tautan panah, spinner, penanda */ /* --------------------------------------------------------------- GEOMETRI KONTROL — satu-satunya sumber ukuran untuk SEMUA kontrol sebaris: .button, .icon-button, .input, .select, .textarea, .chip, combobox, pemilih tanggal. Dulu tiap komponen memilih sendiri padding dan ukuran hurufnya (tombol 1.5em + 13px, input 1em + 16px, chip 24px + 13px), jadi tombol dan kolom isian yang berdampingan hanya kebetulan sama tinggi — teksnya tidak sejajar dan sudutnya tidak sebangun. Sejak 21 Sep 2026 keempat besaran itu ditetapkan BERSAMA per jenjang: jenjang tinggi padding-inline huruf radius small 32px 12px 13px (−1) 8px bawaan 40px 16px 15px ( 0) 8px large 48px 24px 17px (+1) 8px Komponen tidak boleh menulis tinggi/padding/ukuran huruf sendiri; varian ukuran cukup menimpa --control-h / --control-pad / --control-font pada dirinya sendiri, dan seluruh isinya ikut. Tinggi dipatok eksplisit, bukan hasil padding-block, supaya tombol dan kolom isian tetap sama tinggi walau isinya berbeda (teks, ikon, awalan "+62"). Skala 32/40/48 mengikuti ukuran yang lazim dipakai sistem desain arus utama (shadcn, Material, Polaris, Ant). --------------------------------------------------------------- */ --control-h-small: 2rem; /* 32px — aksi sekunder di dalam kartu/daftar */ --control-h: 2.5rem; /* 40px — bawaan: tombol, input, select, chip */ --control-h-large: 3rem; /* 48px — CTA halaman */ /* Padding mendatar. Nilai tetap (rem), bukan em: dengan em, tombol berhuruf 13px dan kolom isian berhuruf 15px mendapat inset teks yang berbeda walau angkanya sama. */ --control-pad-small: 0.75rem; /* 12px */ --control-pad: 1rem; /* 16px */ --control-pad-large: 1.5rem; /* 24px — CTA perlu ruang napas lebih */ /* Padding tegak — hanya untuk kontrol yang tingginya ikut isi (.textarea). Disetel supaya baris pertamanya sejajar dengan teks di dalam .input setinggi --control-h. */ --control-pad-block: 0.625rem; /* 10px */ /* Ukuran huruf. Satu jenjang, dipakai tombol maupun kolom isian — label tombol tidak lagi lebih kecil daripada teks yang diketik di sebelahnya. Di layar sentuh kontrol isian dinaikkan ke minimal 16px (lihat components.css): di bawah itu iOS memperbesar halaman begitu kolom difokuskan, lalu meninggalkannya dalam keadaan ter-zoom. */ --control-font-small: var(--step--1); /* 13px */ --control-font: var(--step-0); /* 15px */ --control-font-large: var(--step-1); /* 17px */ /* Radius SAMA di ketiga jenjang. Kontrol kecil tidak mendapat sudut lebih kecil: yang membedakan ukuran adalah tinggi dan ruang, bukan bentuk sudut — deretan tombol 32px dan 40px yang bersebelahan harus terbaca sebagai satu keluarga. */ --control-radius: var(--radius-m); /* Garis dan jarak ikon ↔ teks, sama untuk semua kontrol. */ --control-border: var(--border-hair); --control-gap: var(--space-2xs); /* Catatan: di peranti sentuh ketiga tinggi ini dinaikkan ke 40/44/52px lewat @media (pointer: coarse) di akhir berkas — yang dikecilkan oleh skala 32/40/48 adalah tampilan di tetikus, bukan keterjangkauannya di jari. Padding, huruf, dan radius tidak ikut berubah. */ /* Bar progres — trek abu paling muda, isian hitam (atau ungu di alur daftar & di atas hitam). Dua ketebalan: bar biasa dan meter skor. */ /* Pil (badge, pesan galat): satu geometri, seperti --control-h untuk tombol & isian. Dulu tiap komponen menulis nilai em-nya sendiri, jadi dua badge berdampingan bisa berbeda tinggi. */ --pill-pad-block: 0.35em; --pill-pad-inline: 0.7em; --progress-h: 0.375rem; /* 6px */ --progress-h-lg: 0.625rem; /* 10px */ --progress-track: var(--clr-gray-100); --shadow-s: 0 1px 2px rgb(var(--shadow-color) / 0.05); --shadow-m: 0 2px 4px rgb(var(--shadow-color) / 0.04), 0 8px 20px -6px rgb(var(--shadow-color) / 0.10); --shadow-l: 0 4px 8px rgb(var(--shadow-color) / 0.04), 0 24px 48px -12px rgb(var(--shadow-color) / 0.16); /* --------------------------------------------------------------- 7. MOTION --------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 140ms; --dur-base: 260ms; --dur-slow: 520ms; /* --------------------------------------------------------------- 8. LAIN-LAIN --------------------------------------------------------------- */ --header-h: 4.5rem; --logo-h: 2rem; --logo-ratio: 872 / 193; /* dari viewBox berkas SVG */ --z-base: 1; --z-sticky: 50; --z-header: 100; --z-overlay: 200; --focus-ring: 3px solid var(--focus-color); /* Cincin ungu di sekeliling kontrol isian saat fokus — dulu ditulis enam kali sebagai box-shadow lepas. */ --ring-field: 0 0 0 3px var(--accent); --focus-offset: 3px; /* --------------------------------------------------------------- 9. SKALA ROOT — dipakai sebagai font-size Sampai 1440px tetap 100% (16px) — desain desktop yang sudah disetujui tidak berubah. Di atasnya seluruh sistem (huruf, ruang, kontrol, radius berbasis rem) membesar proporsional sampai 19px di 2560px, supaya monitor besar terasa seperti versi lebih besar dari desktop kecil, bukan layar yang sama dengan ruang kosong berlebih. 16px + (100vw − 1440px) × 3/1120 → 0.7589rem + 0.2679vw Batas bawah memakai %, jadi preferensi ukuran huruf pengguna tetap dihormati. --------------------------------------------------------------- */ --root-size: 100%; /* --------------------------------------------------------------- 10. AREA APLIKASI (setelah masuk) — lihat app.css Seluruh bingkai aplikasi (sidebar, bilah atas & bawah ponsel) dan latarnya memakai --bg-canvas dengan garis tipis — clean & minimal. Skala huruf dan warna teksnya dipadatkan di blok `.app` di akhir berkas. --------------------------------------------------------------- */ --sidebar-w: 16.5rem; --subnav-w: 15rem; /* kolom menu tingkat dua (pengaturan) */ --rail-w: 21rem; /* kolom kanan halaman belajar: daftar materi & jadwal */ --appbar-h: 4rem; --tabbar-h: 4.25rem; --app-gutter: clamp(1rem, 0.55rem + 1.8vw, 2.75rem); /* Lebar isi halaman yang dipusatkan (beranda). */ --app-container: 68rem; /* --------------------------------------------------------------- 11. GRAFIK Satu seri = hitam. Ungu hanya sebagai BIDANG sorotan (batang hari ini, sapuan area) — tidak pernah sebagai garis data di atas putih. Skala berurutan (heatmap) satu rona: abu → ungu muda → ungu → hitam. --------------------------------------------------------------- */ --chart-h: 15rem; --chart-ink: var(--clr-black); --chart-grid: var(--clr-gray-200); --chart-wash: var(--clr-purple-100); --chart-focus: var(--clr-purple); --heat-0: var(--clr-gray-100); --heat-1: var(--clr-purple-100); --heat-2: var(--clr-purple); --heat-3: color-mix(in oklab, var(--clr-purple) 45%, var(--clr-black)); --heat-4: var(--clr-black); } @media (min-width: 90rem) { :root { --root-size: clamp(100%, 0.7589rem + 0.2679vw, 118.75%); } } /* --------------------------------------------------------------- JARAK TEPI DI PONSEL Kurva --gutter/--app-gutter disetel untuk layar lebar; di ponsel nilainya (21px situs, 16px aplikasi) menyisakan pita kosong yang mahal pada layar 390px — apalagi kartu di dalamnya masih menambah paddingnya sendiri. Di bawah 48rem keduanya memakai kurva yang lebih rapat. Tetap fluid, bukan nilai mati: di 767px hasilnya hanya ±4px di bawah kurva utama, jadi tidak ada lompatan tepi saat ponsel besar diputar ke lanskap atau saat tablet kecil melewati ambangnya. --gutter 21px → 16px (di 390px) --app-gutter 16px → 14px (di 390px) --------------------------------------------------------------- */ @media (max-width: 47.99rem) { :root { --gutter: clamp(1rem, 0.35rem + 2.6vw, 1.75rem); --app-gutter: clamp(0.875rem, 0.3rem + 2.2vw, 1.5rem); /* Jarak antar-kartu ikut turun ke 8px. Aturan "--grid-col-gap tidak boleh ditimpa" di atas berlaku untuk KOMPONEN — satu komponen tidak boleh punya jarak kolom sendiri. Di sini nilainya diganti di :root untuk satu jenjang layar, jadi seluruh produk tetap memakai satu nilai yang sama di lebar itu, dan jarak baris tetap sama dengan jarak kolom (kisi 2 kolom di ponsel akan terbaca miring kalau keduanya berbeda). */ --grid-gap: var(--space-2xs); --grid-col-gap: var(--space-2xs); } } /* --------------------------------------------------------------- KONTROL DI PERANTI SENTUH Sasaran ketuk 32px terlalu kecil untuk jari; pedoman WCAG 2.5.5 dan pedoman peranti (iOS 44pt, Android 48dp) meminta ±44px. Karena itu ketiga jenjang naik serentak di sini — bukan hanya jenjang --small, supaya urutannya (small < bawaan < large) tetap terbaca dan tombol --small tidak mendadak setinggi tombol bawaan. Dinaikkan di :root, jadi SELURUH kontrol ikut sekaligus: komponen tidak perlu tahu apa-apa soal peranti sentuh. --------------------------------------------------------------- */ @media (pointer: coarse) { :root { --control-h-small: 2.5rem; /* 40px */ --control-h: 2.75rem; /* 44px */ --control-h-large: 3.25rem; /* 52px */ } } /* --------------------------------------------------------------- AREA APLIKASI — tinta lembut Skala huruf dan jarak kolomnya TIDAK lagi berbeda: sejak 21 Sep 2026 seluruh produk memakai satu skala dan satu jarak kolom di :root. Yang tersisa di sini hanya tinta teksnya: #2d241f (15:1), satu jenjang di atas hitam — mengurangi kilau hitam pekat saat layar dipakai berjam-jam. Hitam tetap dipakai untuk BIDANG (tombol utama, pesan pengguna, video), bukan huruf. --------------------------------------------------------------- */ .app { --fg: var(--clr-gray-900); --fg-muted: var(--clr-gray-600); } /* Permukaan hitam (.surface-invert, footer, sidebar aplikasi, seksi invert) membalik token semantik di base.css — termasuk cincin fokus, yang di sana memakai ungu (8.2:1 terhadap hitam). */