/* ========================================================================== 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 =============================================================== */ --clr-black: #000000; --clr-white: #ffffff; --clr-purple: #d992ff; /* --------------------------------------------------------------- ATURAN PAKAI UNGU (rasio kontras terukur) ungu di atas hitam .... 9.51: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 (9.51:1). --------------------------------------------------------------- */ /* Turunan fungsional. Netral murni turunan hitam; ungu muda hanya sebagai latar lembut, bukan untuk teks. */ --clr-gray-50: #f2f2f4; /* abu muda lembut — latar seksi cekung */ --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-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); --bg-accent: var(--clr-purple); --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: 0 0 0; --selection-bg: var(--clr-purple); --selection-fg: var(--clr-black); /* Cincin fokus: hitam di atas permukaan terang (21:1), ungu di atas permukaan hitam (9.5:1). Ungu di atas putih tidak cukup kontras. */ --focus-color: var(--clr-black); /* --------------------------------------------------------------- 3. TIPOGRAFI Farro (judul) × Hanken Grotesk (teks & UI). Farro tidak punya italic — penekanan dilakukan lewat sorotan ungu, bukan miring. --------------------------------------------------------------- */ --font-display: "Farro", "Futura", "Avenir Next", Helvetica, Arial, sans-serif; --font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; --weight-body: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Hanken Grotesk tebal — judul kartu */ --weight-display: 700; /* bobot terberat Farro */ --step--3: clamp(0.625rem, 0.61rem + 0.07vw, 0.6875rem); /* 10–11px — hanya label kapital kecil */ --step--2: clamp(0.69rem, 0.67rem + 0.11vw, 0.76rem); --step--1: clamp(0.83rem, 0.79rem + 0.21vw, 0.95rem); --step-0: clamp(1.00rem, 0.94rem + 0.31vw, 1.19rem); --step-1: clamp(1.20rem, 1.10rem + 0.49vw, 1.48rem); --step-2: clamp(1.44rem, 1.29rem + 0.75vw, 1.86rem); --step-3: clamp(1.73rem, 1.50rem + 1.12vw, 2.32rem); --step-4: clamp(2.07rem, 1.74rem + 1.66vw, 2.90rem); --step-5: clamp(2.49rem, 2.00rem + 2.43vw, 3.63rem); --step-6: clamp(2.90rem, 2.34rem + 2.80vw, 4.30rem); --step-7: clamp(3.30rem, 2.56rem + 3.70vw, 5.15rem); --step-8: clamp(3.60rem, 2.64rem + 4.80vw, 6.00rem); /* 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). Diturunkan dua jenjang dari versi awal: judul halaman dulu --step-7 (±82px) terasa seperti poster; kini ±46px di desktop, ±33px di ponsel. display hero beranda saja ±69px h1 judul halaman (satu per halaman) ±46px h2 judul seksi ±37px h3 judul blok besar, langkah, fitur ±30px h4 FAQ, nama tim, linimasa ±24px */ --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, seukuran teks isi yang sedikit dibesarkan (±19px desktop, 16px ponsel). Kartu tampil berderet; judul display besar di tiap kartu membuat deretannya riuh, dan judul dua baris jadi dominan. */ --text-card-title: var(--step-0); --leading-tight: 1.0; /* Farro punya tinggi-x besar; 0.94 terlalu rapat */ --leading-snug: 1.14; --leading-normal: 1.35; --leading-prose: 1.6; --tracking-tight: -0.03em; --tracking-snug: -0.012em; --tracking-wide: 0.06em; --tracking-caps: 0.14em; --measure: 62ch; /* --------------------------------------------------------------- 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). --------------------------------------------------------------- */ --container: none; --container-wide: none; --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; jarak bawaan antar-kolom dan antar-baris sama. Komponen boleh menimpa --row-gap / --col-gap pada .row-nya sendiri, bukan menulis grid baru. */ --grid-columns: 12; --grid-gap: clamp(1rem, 0.6rem + 1.8vw, 2rem); /* 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; /* tebal garis button-secondary */ /* Tinggi seragam untuk SEMUA kontrol: tombol, input, select, chip. Dipatok eksplisit, bukan hasil padding em, supaya tombol dan kolom isian tetap sama tinggi walau ukuran hurufnya berbeda. */ --control-h-small: 2.5rem; /* 40px — aksi sekunder di dalam kartu/daftar */ --control-h: 3rem; /* 48px — juga ambang sasaran sentuh yang nyaman */ --control-h-large: 3.5rem; /* 56px */ /* Bar progres — trek abu paling muda, isian hitam (atau ungu di alur daftar & di atas hitam). Dua ketebalan: bar biasa dan meter skor. */ --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; --dur-reveal: 900ms; /* --------------------------------------------------------------- 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); --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 Bingkai aplikasi (sidebar, bilah atas & bawah ponsel) berpermukaan hitam; konten putih. Di atas hitam ungu boleh jadi teks & garis. --------------------------------------------------------------- */ --sidebar-w: 16.5rem; --appbar-h: 4rem; --tabbar-h: 4.25rem; --app-gutter: clamp(1rem, 0.55rem + 1.8vw, 2.75rem); /* --------------------------------------------------------------- 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%); } } /* Permukaan hitam (.surface-invert, footer, sidebar aplikasi, seksi invert) membalik token semantik di base.css — termasuk cincin fokus, yang di sana memakai ungu (9.5:1 terhadap hitam). */