/* ========================================================================== DESIGN TOKEN — Koperasi Kelurahan Merah Putih Latsari Lapisan 1 dari 3: token.css → style.css (tema existing) → dasar.css → komponen.css ATURAN PEMAKAIAN • Komponen baru WAJIB memakai token di berkas ini, bukan nilai warna/ukuran mentah. • Nilai token warna/bayang/radius di bawah adalah PEMETAAN dari tema existing (assets/style.css) — karakternya sengaja dipertahankan, bukan diganti. • Dari luar lingkup warna pokok, hanya ditambahkan satu warna baru: --color-info (dipakai terbatas untuk pesan informasi). Selebihnya memakai palet yang sudah ada. ========================================================================== */ :root{ /* ------------------------------------------------------------------ 1. WARNA POKOK (primary) ------------------------------------------------------------------ */ --color-primary: #B3261E; /* merah koperasi */ --color-primary-dark: #8A1B15; --color-primary-light: #D93A2B; --color-primary-soft: #FBEDEA; /* latar merah muda */ /* ------------------------------------------------------------------ 2. WARNA SEKUNDER & AKSEN ------------------------------------------------------------------ */ --color-secondary: #4F7A34; /* hijau: pertumbuhan, potensi, statistik positif */ --color-secondary-dark: #3F6529; --color-secondary-light: #7FA84E; --color-secondary-soft: #EDF3E3; --color-accent: #C08A2E; /* emas hangat: penanda kehormatan/arsip */ --color-accent-soft: #FAF0DA; /* ------------------------------------------------------------------ 3. WARNA STATUS ------------------------------------------------------------------ */ --color-success: var(--color-secondary); --color-success-soft: var(--color-secondary-soft); --color-warning: #9A6511; --color-warning-soft: #FCF1DC; --color-danger: var(--color-primary); --color-danger-soft: var(--color-primary-soft); --color-info: #2F6480; /* satu-satunya warna baru — hanya untuk pesan informasi */ --color-info-soft: #E8F1F6; /* ------------------------------------------------------------------ 4. PERMUKAAN & TEKS ------------------------------------------------------------------ */ --color-background: #FBF6EC; /* krem */ --color-background-alt:#F5EADA; /* krem lebih tua (seksi bergantian) */ --color-surface: #FFFFFF; --color-surface-soft: rgba(255,255,255,.86); /* kartu di atas latar bertekstur */ --color-surface-muted: #FDFBF6; --color-surface-dark: #2E2A22; /* kaki halaman */ --color-text: #2A241E; /* hitam lembut */ --color-text-muted: #6B6153; --color-text-invert: #FFFDF8; --color-border: #E8DCC6; --color-border-strong: #D8C7A9; /* ------------------------------------------------------------------ 5. TIPOGRAFI Fraunces → display, headline, hero, statement Plus Jakarta Sans → body, navigasi, tombol, label, tabel, formulir ------------------------------------------------------------------ */ --font-display: var(--font-judul); /* sudah didefinisikan di style.css */ --font-body: var(--font-teks); --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* Skala ukuran — HANYA enam tingkat + satu lantai minimum. Lantai minimum teks = 12px (--fs-100). Tidak boleh ada teks di bawah ini. */ --fs-100: 0.75rem; /* 12px small / caption */ --fs-200: 0.875rem; /* 14px small body / tabel */ --fs-300: 1rem; /* 16px body (h4) */ --fs-400: 1.25rem; /* 20px h3 */ --fs-500: 1.75rem; /* 28px h2 */ --fs-600: 2.5rem; /* 40px h1 / display */ /* Ukuran isi teks utama situs (16.5px dipakai style.css — dipertahankan) */ --fs-body: 1rem; --lh-display: 1.12; --lh-judul: 1.22; /* heading 1.1–1.25 */ --lh-teks: 1.68; /* body 1.5–1.7 */ --lh-kecil: 1.45; /* caption 1.4–1.5 */ --track-judul: -0.01em; --track-label: 0.08em; /* label huruf besar */ --track-tombol: 0.01em; /* Panjang baris nyaman (diukur dalam PIXEL, bukan ch — lihat catatan audit) */ --lebar-baca: 680px; --lebar-pengantar: 600px; --lebar-kartu: 620px; /* ------------------------------------------------------------------ 6. JARAK (spacing) — hanya nilai dalam tangga ini ------------------------------------------------------------------ */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 64px; --sp-11: 80px; /* Jarak antarkartu & antarseksi (konsisten di seluruh situs) */ --gap-kartu: 20px; --gap-kartu-besar:24px; --gap-seksi: 40px; --gap-seksi-besar:64px; /* Padding dalam kartu */ --pad-kartu: 26px; --pad-kartu-kecil:20px; /* ------------------------------------------------------------------ 7. TATA LETAK ------------------------------------------------------------------ */ --lebar-konten: 1140px; /* isi halaman — sudah sesuai (1140–1200) */ --lebar-kepala: 1300px; /* kepala halaman butuh lebih lebar */ --lebar-luas: 1280px; /* wadah lebar untuk galeri/kisi besar */ --lebar-baca-sempit: 600px; --pad-halaman: 22px; /* Grid 12/8/4 kolom */ --grid-12: repeat(12, minmax(0, 1fr)); --grid-8: repeat(8, minmax(0, 1fr)); --grid-4: repeat(4, minmax(0, 1fr)); /* ------------------------------------------------------------------ 7b. TITIK PATAH (breakpoint) Nilai di bawah TIDAK dapat dipakai di dalam @media (batasan CSS), jadi tuliskan angkanya langsung di media query. Daftar ini adalah acuan resmi — jangan memakai angka lain di luar tangga ini. Mobile kecil : <= 380px (320–380) — paling rawan luber Mobile : <= 560px (414–560) Mobile besar : <= 760px (600–760) Tablet : <= 900px Tablet lanskap : <= 1080px Menu seluler : <= 1180px (ambang tombol tiga garis) Desktop : >= 1181px Desktop besar : >= 1280px ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ 8. RADIUS — lima tingkat Nilai `--radius-besar` (26px) berasal dari tema lama (style.css) dan dipakai untuk KARTU BESAR/PANEL (panel berita beranda, panel Instagram, kotak survey, panel formulir, kartu situs resmi) — jadi ia memang bagian dari sistem, hanya belum dicatat di sini. Ditambahkan sebagai alias `--radius-xl` supaya satu nama mewakili satu tingkat. `--radius-xs` (3px) dipakai oleh unsur KECIL: kotak warna legenda, batang diagram, titik lencana, dan chip kode. ------------------------------------------------------------------ */ --radius-xs: 3px; /* kotak warna legenda, batang diagram, titik lencana */ --radius-sm: 8px; /* lencana kecil, tombol kotak di kepala halaman */ --radius-md: 12px; /* kartu kecil, medan isian, tombol kepala halaman */ --radius-mdl: 14px; /* kontrol & kartu sedang: tombol ikon 44px, item info, kotak centang setuju, tabel data, kanvas peta. Dipakai 18 komponen, jadi diangkat menjadi token — bukan diubah nilainya (mengubahnya berarti menyentuh 18 komponen demi selisih 2px). */ --radius-lg: 16px; /* kartu, panel, akordeon */ --radius-xl: var(--radius-besar); /* 26px — kartu besar/panel */ --radius-kartu-anggota: 20px; /* kartu tanda anggota digital (khas, punya gaya cetak sendiri) */ --radius-pill: 999px; /* ------------------------------------------------------------------ 9. BAYANGAN — ringan, tidak "mengambang berlebihan" ------------------------------------------------------------------ */ --shadow-sm: 0 2px 8px rgba(90,64,26,.06); --shadow-md: var(--bayang-kecil); /* 0 4px 14px */ --shadow-lg: var(--bayang); /* 0 12px 34px */ --shadow-fokus: 0 0 0 4px rgba(179,38,30,.20); --shadow-fokus-hijau: 0 0 0 4px rgba(127,168,78,.22); /* Bayangan KHUSUS KOMPONEN — dipakai satu tempat masing-masing, tetapi dicatat sebagai token supaya tidak terbaca sebagai "nilai asing" saat audit, dan supaya tidak ada bayangan baru yang ditulis mentah-mentah. */ /* Bayangan TOMBOL: satu tangga dua tingkat per warna (normal + hover). Sebelumnya tombol merah memakai TUJUH nilai berbeda (alpha .24–.34, blur 16–28px) dan tombol hijau tiga nilai — padahal komponennya sama jenisnya. Perbedaan alpha 0,02–0,04 tidak terlihat, tetapi membuat keseluruhan situs terasa tidak seragam. */ --shadow-tombol: 0 10px 22px rgba(179,38,30,.26); --shadow-tombol-hover: 0 14px 28px rgba(179,38,30,.32); --shadow-tombol-hijau: 0 10px 22px rgba(79,122,52,.24); --shadow-tombol-hijau-hover: 0 14px 28px rgba(79,122,52,.30); /* Bayangan untuk teks/kendali YANG BERADA DI ATAS GAMBAR (tirai hero, keterangan slide). Warnanya hitam netral, bukan warna merek, karena tugasnya memisahkan teks dari foto apa pun. */ --shadow-di-atas-gambar: 0 20px 44px rgba(0,0,0,.32); --shadow-di-atas-gambar-halus: 0 8px 20px rgba(0,0,0,.22); --shadow-cincin: 0 0 0 2px rgba(255,255,255,.8); /* penanda aktif di atas peta/gambar */ --shadow-landasan: 0 6px 18px rgba(0,0,0,.28); /* landasan bulat logo di kaki halaman */ --shadow-instagram: 0 6px 14px rgba(169,75,168,.25); /* lencana Instagram (warna merek IG) */ --shadow-anggota: 0 20px 40px rgba(124,26,20,.28); /* kartu anggota digital */ /* ------------------------------------------------------------------ 10. GERAK & LAPISAN ------------------------------------------------------------------ */ --transisi-cepat: .16s ease; --transisi-sedang: .24s ease; --z-isi: 1; --z-lengket: 40; /* kepala halaman */ --z-laci: 60; /* menu seluler */ --z-lapisan: 80; /* modal */ --z-lewati: 99; /* tautan "lewati ke isi" */ /* ------------------------------------------------------------------ 11. TARGET SENTUH Audit WCAG 2.2 (SC 2.5.8) menemukan banyak kontrol < 24px. ------------------------------------------------------------------ */ --sentuh-min: 44px; /* kontrol utama: tombol, item menu, ikon */ } /* ========================================================================== KOMPONEN: MODAL, LACI (drawer), TOAST, GRAFIK, KPI, PENCARIAN, KEMAJUAN, TAB, GAMBAR — token khusus komponen ini. Ditaruh di token.css supaya komponen baru tidak menulis nilai mentah. ========================================================================== */ :root{ /* Bayangan & latar tirai */ --tirai: rgba(42, 36, 30, .55); --modal-lebar: 560px; --laci-lebar: 360px; /* Tinggi & lebar baku komponen */ --kepala-tinggi: 77px; --kepala-tinggi-kecil: 67px; /* Grafik */ --grafik-tinggi: 260px; --grafik-batang: 12px; }