/* ============================================================ SCAFOLYA — DESIGN TOKENS E-LKPD interaktif berbasis scaffolding (Polya, fading) ------------------------------------------------------------ UI KIT ALPHA — revisi 2 (adopsi sistem desain referensi) Struktur token, skala, kaca, dan gerak diambil dari sistem desain referensi milik pemilik produk (referensi_ui_kit_projectlain, Design System v2.27). Palet dipetakan ke warna logo SCAFOLYA. ------------------------------------------------------------ SATU-SATUNYA sumber kebenaran untuk seluruh keputusan visual. Semua file CSS lain WAJIB memakai variabel dari file ini. DILARANG menulis nilai hex / px / shadow mentah di file lain. ============================================================ */ :root { /* ========================================================== 1. PRIMITIVE COLOR — PALET MENTAH Jangan dipakai langsung di komponen; pakai lapisan SEMANTIC. ========================================================== */ /* --- Brand Primary: "Biru Tangga" ------------------------- */ /* Dari wordmark navy #012A6A (DEC-013/DEC-049) dan biru simbol tangga pada logo (terukur ~#0068D8–#0080F0). 900 = navy logo. */ --biru-50: #EEF4FD; --biru-100: #D9E7FA; --biru-200: #B5CEF4; --biru-300: #86ADEB; --biru-400: #5189DF; --biru-500: #2A6BD0; --biru-600: #1556B8; /* warna interaktif utama (6,9:1 di atas putih) */ --biru-700: #0F4597; --biru-800: #0A377A; --biru-900: #012A6A; /* navy logo — latar brand, teks brand */ --biru-950: #011D49; /* --- Brand Secondary: "Amber Bohlam" ---------------------- */ /* Dari bohlam pada simbol logo (terukur ~#F8A000). Untuk aksen, petunjuk, perayaan, dan kehangatan visual. Tingkat 300–500 TIDAK untuk teks di atas putih. */ --amber-50: #FFF8E7; --amber-100: #FFEEC4; --amber-200: #FFDD8A; --amber-300: #FFC94F; --amber-400: #F8AE1A; /* paling dekat warna logo */ --amber-500: #E2930C; --amber-600: #C27408; --amber-700: #9C5A0A; --amber-800: #7D470D; --amber-900: #653A0F; /* --- Warna tahap Polya (UK-03) --------------------------- */ /* Hanya untuk stepper dan label tahap; bukan warna state. */ --tahap-1: var(--biru-600); --tahap-1-soft: var(--biru-50); --tahap-1-text: var(--biru-700); --tahap-2: #7C3FB5; --tahap-2-soft: #F1EAF9; --tahap-2-text: #6A32A0; --tahap-3: #0B7369; --tahap-3-soft: #E4F3F1; --tahap-3-text: #0B6259; --tahap-4: #B03278; --tahap-4-soft: #FAE8F2; --tahap-4-text: #9A2A68; /* --- Neutral: "Abu Kapur" (netral hangat) ----------------- */ --neutral-0: #FFFFFF; --neutral-25: #FCFCFA; --neutral-50: #F8F8F5; --neutral-100: #F1F1EC; --neutral-200: #E4E4DD; --neutral-300: #CFCFC6; --neutral-400: #A8A89E; --neutral-450: #8A8A81; /* garis kontrol formulir: 3,4:1 di atas putih (WCAG 1.4.11) */ --neutral-500: #727269; --neutral-600: #5C5C55; --neutral-700: #454540; --neutral-800: #2F2F2B; --neutral-900: #1D1D1A; /* --- Semantic Raw: warna state ---------------------------- */ --success-50: #ECFDF3; --success-100: #D3F8E0; --success-200: #A8EFC4; --success-500: #17A34A; --success-600: #128040; --success-700: #0F6634; --warning-50: #FFFAEB; --warning-100: #FEF0C7; --warning-200: #FDE29A; --warning-500: #DC8908; --warning-600: #B36806; --warning-700: #8E5208; --danger-50: #FEF3F2; --danger-100: #FEE4E2; --danger-200: #FECDCA; --danger-500: #E5433A; --danger-600: #C92A22; --danger-700: #A6211C; /* ========================================================== 2. SEMANTIC COLOR — TOKEN YANG DIPAKAI KOMPONEN ========================================================== */ /* Brand */ --color-primary: var(--biru-600); --color-primary-hover: var(--biru-700); --color-primary-active: var(--biru-800); --color-primary-soft: var(--biru-100); --color-primary-softer: var(--biru-50); --color-primary-border: var(--biru-200); --color-primary-text: var(--biru-700); --color-on-primary: var(--neutral-0); --color-secondary: var(--amber-500); --color-secondary-hover: var(--amber-600); --color-secondary-active: var(--amber-700); --color-secondary-soft: var(--amber-100); --color-secondary-softer: var(--amber-50); --color-secondary-border: var(--amber-200); --color-secondary-text: var(--amber-700); --color-on-secondary: var(--neutral-900); /* Permukaan dan latar */ --color-bg: var(--neutral-25); --color-bg-subtle: var(--neutral-50); --color-bg-muted: var(--neutral-100); --color-bg-brand: var(--biru-900); --color-bg-brand-deep: var(--biru-950); --color-surface: var(--neutral-0); --color-surface-alt: var(--neutral-50); --color-surface-sunken: var(--neutral-100); --color-overlay: rgba(1, 29, 73, 0.55); /* Batang gulir kaca (DEC-165): jempol tembus pandang mengikuti tinta tema. */ --gulir-jempol: rgba(1, 29, 73, 0.22); --gulir-jempol-hover: rgba(1, 29, 73, 0.40); /* Garis */ --color-border: var(--neutral-200); --color-border-subtle: var(--neutral-100); --color-border-strong: var(--neutral-300); --color-border-control: var(--neutral-450); --color-border-focus: var(--biru-500); /* Teks */ --color-text: var(--neutral-900); --color-text-secondary: var(--neutral-700); --color-text-muted: var(--neutral-500); --color-text-subtle: var(--neutral-400); --color-text-inverse: var(--neutral-0); --color-text-inverse-muted: var(--biru-200); --color-link: var(--biru-700); --color-link-hover: var(--biru-800); /* State / feedback umum */ --color-success: var(--success-600); --color-success-soft: var(--success-50); --color-success-border: var(--success-200); --color-success-text: var(--success-700); --color-warning: var(--warning-600); --color-warning-soft: var(--warning-50); --color-warning-border: var(--warning-200); --color-warning-text: var(--warning-700); --color-danger: var(--danger-600); --color-danger-soft: var(--danger-50); --color-danger-border: var(--danger-200); --color-danger-text: var(--danger-700); --color-info: var(--biru-600); --color-info-soft: var(--biru-50); --color-info-border: var(--biru-200); --color-info-text: var(--biru-700); /* Lingkaran ikon kabar, toast, dan kartu: sedikit lebih pekat dari latar lembut jenisnya, dengan ikon berwarna teks jenis itu. Tema gelap menimpanya dengan warna transparan supaya ikon terang tetap terbaca (KP-157). */ --color-success-ikon: var(--success-100); --color-warning-ikon: var(--warning-100); --color-danger-ikon: var(--danger-100); --color-info-ikon: var(--biru-100); /* State khas SCAFOLYA (DEC-041: Belum diperiksa / Tepat / Belum tepat). Belum tepat memakai warna hangat, bukan merah (UK-01). */ --color-tepat: var(--color-success); --color-tepat-soft: var(--color-success-soft); --color-tepat-border: var(--color-success-border); --color-tepat-text: var(--color-success-text); --color-belum-tepat: var(--color-warning); --color-belum-tepat-soft: var(--color-warning-soft); --color-belum-tepat-border: var(--color-warning-border); --color-belum-tepat-text: var(--color-warning-text); --color-belum-diperiksa: var(--neutral-500); --color-belum-diperiksa-soft: var(--neutral-100); --color-belum-diperiksa-border: var(--neutral-300); --color-belum-diperiksa-text: var(--neutral-600); --color-petunjuk: var(--amber-500); --color-petunjuk-soft: var(--amber-50); --color-petunjuk-border: var(--amber-200); --color-petunjuk-text: var(--amber-700); --color-petunjuk-ikon: var(--amber-100); /* Disabled */ --color-disabled-bg: var(--neutral-100); --color-disabled-text: var(--neutral-500); --color-disabled-border: var(--neutral-200); /* Lapisan putih transparan — di atas latar gelap */ --surface-on-dark: rgba(255, 255, 255, 0.10); --overlay-white-hover: rgba(255, 255, 255, 0.12); --overlay-white-soft: rgba(255, 255, 255, 0.16); --border-on-dark: rgba(255, 255, 255, 0.14); --border-on-dark-strong: rgba(255, 255, 255, 0.28); --border-on-dark-button: rgba(255, 255, 255, 0.55); /* Warna cetak */ --color-print-bg: #FFFFFF; --color-print-ink: #000000; /* Gradien brand */ --gradient-biru: linear-gradient(135deg, var(--biru-800) 0%, var(--biru-500) 100%); --gradient-amber: linear-gradient(135deg, var(--amber-500) 0%, var(--amber-300) 100%); --gradient-fajar: linear-gradient(135deg, var(--biru-900) 0%, var(--biru-600) 58%, var(--amber-400) 100%); --gradient-soft: linear-gradient(180deg, var(--biru-50) 0%, var(--neutral-25) 100%); /* ========================================================== 3. TYPOGRAPHY 'Plus Jakarta Sans' = display (judul, tombol, label) 'Nunito Sans' = bacaan (x-height tinggi, nyaman untuk siswa SD) Keduanya di-host sendiri (OFL) — lihat fonts.css. ========================================================== */ --font-display: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-body: 'Nunito Sans', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, 'Cascadia Code', 'Consolas', monospace; --fs-2xs: 0.75rem; /* 12px */ --fs-xs: 0.8125rem; /* 13px */ --fs-sm: 0.9375rem; /* 15px */ --fs-base: 1.0625rem; /* 17px — TEKS BACAAN DEFAULT (UK-04) */ --fs-lg: 1.1875rem; /* 19px */ --fs-xl: clamp(1.25rem, 1.16rem + 0.45vw, 1.5rem); /* h4 */ --fs-2xl: clamp(1.5rem, 1.34rem + 0.80vw, 1.9375rem); /* h3 */ --fs-3xl: clamp(1.75rem, 1.47rem + 1.40vw, 2.5rem); /* h2 */ --fs-4xl: clamp(2.125rem, 1.66rem + 2.30vw, 3.25rem); /* h1 */ --fs-5xl: clamp(2.5rem, 1.80rem + 3.50vw, 4rem); /* display */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --lh-none: 1; --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.55; --lh-relaxed: 1.75; --ls-tighter: -0.03em; --ls-tight: -0.015em; --ls-normal: 0; --ls-wide: 0.02em; --ls-wider: 0.08em; --measure-narrow: 42ch; --measure: 68ch; --measure-wide: 80ch; /* ========================================================== 4. SPACING — kelipatan 4px ========================================================== */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 1.75rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-14: 3.5rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; --space-section: clamp(3rem, 2.1rem + 4.5vw, 6rem); --space-section-sm: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); --gap-grid: clamp(1rem, 0.7rem + 1.2vw, 1.75rem); --gap-card: var(--space-5); /* ========================================================== 5. BORDER RADIUS — "continuous corner" ========================================================== */ --radius-xs: 0.5rem; --radius-sm: 0.75rem; /* input, kotak isian */ --radius-md: 1rem; /* kartu kecil, feedback */ --radius-lg: 1.5rem; /* KARTU UTAMA */ --radius-xl: 2rem; /* panel besar, dialog */ --radius-2xl: 2.5rem; --radius-pill: 999px; /* tombol dan badge */ --radius-circle: 50%; --border-thin: 1px; --border-base: 1.5px; --border-thick: 2px; --border-heavy: 3px; /* ========================================================== 6. SHADOW — lembut, berbasis navy ========================================================== */ --shadow-none: none; --shadow-xs: 0 1px 2px rgba(1, 29, 73, 0.06); --shadow-sm: 0 2px 6px rgba(1, 29, 73, 0.06), 0 1px 2px rgba(1, 29, 73, 0.04); --shadow-md: 0 6px 16px -4px rgba(1, 29, 73, 0.10), 0 2px 6px -2px rgba(1, 29, 73, 0.06); --shadow-lg: 0 16px 32px -8px rgba(1, 29, 73, 0.13), 0 4px 10px -4px rgba(1, 29, 73, 0.06); --shadow-xl: 0 28px 56px -16px rgba(1, 29, 73, 0.18), 0 8px 16px -8px rgba(1, 29, 73, 0.06); --shadow-inset: inset 0 1px 2px rgba(1, 29, 73, 0.06); /* AUD-40 (KP-134): cincin fokus ganda yang pekat. Celah 2 piksel berwarna permukaan memisahkan cincin dari isi tombol, lalu cincin 2 piksel berwarna penuh yang berkontras paling sedikit 3:1 terhadap latar terang maupun gelap (WCAG 2.2 SC 1.4.11). Luasnya tetap 4 piksel seperti bayangan tipis sebelumnya, jadi tidak ada yang bergeser. */ --shadow-focus: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-border-focus); --shadow-focus-danger: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-danger); --shadow-focus-success: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-success); --focus-ring-width: 3px; --focus-ring-offset: 2px; /* ========================================================== 7. LAYOUT DAN CONTAINER ========================================================== */ --container-xs: 30rem; --container-sm: 40rem; --container-md: 52rem; --container-lg: 64rem; --container-xl: 75rem; /* 1200px — DEFAULT */ --container-2xl: 82.5rem; --container-gutter: clamp(1rem, 0.55rem + 2.2vw, 2.5rem); --navbar-height: 5rem; /* 80px */ --navbar-height-sm: 4rem; /* 64px */ --content-max-width: var(--measure); /* Logo di header: simbol tangga dan wordmark bertagline SAMA TINGGI. --brand-h = tinggi BIDANG GAMBAR yang terlihat (bukan kanvas PNG). Kanvas tiap berkas dihitung di components.css dari rasio bidang gambar: simbol 1142/1448 = 0,789; wordmark bertagline 437/724 = 0,604. */ --brand-h: 2.75rem; /* 44px terlihat, layar lebar */ --brand-h-sm: 2.125rem; /* 34px terlihat, layar sempit */ --brand-gap: var(--space-4); /* jarak terlihat simbol → wordmark, 16px */ --brand-symbol-fill: 0.789; --brand-wordmark-fill: 0.604; /* Ruang kosong kanvas tiap sisi dan pergeseran pusat isi, dalam satuan tinggi kanvas. Sisi yang menghadap pasangan ditarik penuh: kanan simbol 0,03 x 0,75 = 0,0225, kiri wordmark 0,014 x 3 = 0,042. Lockup ringkas ponsel: wordmark tanpa tagline 312/724 = 0,431, kiri 0,0635. Berkas yang diganti dari dashboard membawa nilainya sendiri (app/Logo.php, DEC-145); versi *-0 adalah nilai berkas bawaan yang tidak ditimpa, dipakai components.css supaya kotak tata letak berkas pengganti (tinggi, sisi luar) sama dengan berkas bawaan apa pun ruang kosong kanvasnya. */ --brand-symbol-kanan: 0.0225; --brand-symbol-kiri: 0.0249; --brand-symbol-geser: 0; --brand-wordmark-kiri: 0.042; --brand-wordmark-kanan: 0.0525; --brand-wordmark-geser: 0; --brand-ringkas-fill: 0.431; --brand-ringkas-kiri: 0.0635; --brand-ringkas-kanan: 0.0497; --brand-ringkas-geser: 0; --brand-symbol-fill-0: 0.789; --brand-symbol-kiri-0: 0.0249; --brand-symbol-kanan-0: 0.0225; --brand-wordmark-fill-0: 0.604; --brand-wordmark-kanan-0: 0.0525; --brand-ringkas-fill-0: 0.431; --brand-ringkas-kanan-0: 0.0497; --sticky-offset: calc(var(--navbar-height) + var(--space-6)); --sticky-viewport: calc(100vh - var(--navbar-height)); /* ========================================================== 8. BREAKPOINTS (kontrak nilai; tidak bisa dipakai di @media) ========================================================== */ --bp-xs: 25rem; /* 400px */ --bp-sm: 36rem; /* 576px */ --bp-md: 48rem; /* 768px */ --bp-lg: 62rem; /* 992px */ --bp-xl: 75rem; /* 1200px */ --bp-2xl: 90rem; /* 1440px */ /* ========================================================== 9. MOTION ========================================================== */ --dur-instant: 80ms; --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 340ms; --dur-slower: 520ms; --dur-reveal: 620ms; --stagger-step: 70ms; --dur-celebrate: 1150ms; --dur-ambien: 34s; --dur-ambien-hero: 26s; --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.46, 0.64, 1); --ease-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1); --ease-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); /* Pegas bergaya iOS (DEC-088): kurva linear() hasil simulasi pegas teredam, dipakai CSS dan JS. pegas : respons 0,50 s, redaman 0,86 — transformasi wadah (modal dari tombol, halaman dari kartu); pegas-halus : respons 0,42 s, redaman 1,00 — geser halaman maju/mundur, tanpa pantulan; pegas-mantul : respons 0,45 s, redaman 0,72 — menu, pop kecil, tombol yang dilepas. Peramban tanpa linear() memakai kurva bawaan animasi (ease). */ --ease-pegas: linear(0, 0.0193, 0.0685, 0.1368, 0.216, 0.2999, 0.3839, 0.4651, 0.5413, 0.6112, 0.6743, 0.7301, 0.779, 0.8212, 0.8572, 0.8875, 0.9128, 0.9336, 0.9506, 0.9643, 0.9751, 0.9836, 0.9901, 0.995, 0.9986, 1.0012, 1.003, 1.0041, 1.0047, 1.005, 1.005, 1.0048, 1.0045, 1.0041, 1.0037, 1.0033, 1.0029, 1.0025, 1.0021, 1.0018, 1); --ease-pegas-halus: linear(0, 0.0209, 0.0725, 0.1419, 0.2201, 0.3008, 0.3801, 0.4553, 0.5249, 0.5883, 0.6452, 0.6957, 0.74, 0.7788, 0.8123, 0.8412, 0.8661, 0.8873, 0.9053, 0.9206, 0.9336, 0.9445, 0.9537, 0.9615, 0.968, 0.9734, 0.9779, 0.9817, 0.9848, 0.9875, 0.9896, 0.9914, 0.9929, 0.9942, 0.9952, 0.996, 0.9967, 0.9973, 0.9978, 0.9982, 1); --ease-pegas-mantul: linear(0, 0.0164, 0.0599, 0.1225, 0.1978, 0.2802, 0.3656, 0.4505, 0.5324, 0.6094, 0.6803, 0.7442, 0.8009, 0.8503, 0.8926, 0.9282, 0.9575, 0.9811, 0.9997, 1.0138, 1.0241, 1.0312, 1.0356, 1.0379, 1.0384, 1.0376, 1.0358, 1.0333, 1.0303, 1.0271, 1.0238, 1.0206, 1.0175, 1.0146, 1.0119, 1.0095, 1.0073, 1.0055, 1.0039, 1.0026, 1); --dur-pegas: 660ms; --dur-pegas-halus: 560ms; --dur-pegas-mantul: 540ms; --bayang-geser-halaman: -24px 0 56px rgba(1, 29, 73, 0.18); --reveal-shift: 1.25rem; --transition-colors: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); --transition-lift: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); --lift-sm: -2px; --lift-md: -4px; --press-scale: 0.96; --press-scale-lg: 0.985; /* ========================================================== 10. Z-INDEX ========================================================== */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-navbar: 200; --z-dropdown: 300; --z-overlay: 400; --z-modal: 500; --z-toast: 600; /* ========================================================== 11. ORNAMEN BRAND — "anak tangga" Motif garis bertingkat yang menggemakan simbol tangga logo; murni CSS gradient, dipakai maksimal 1–2 kali per halaman. ========================================================== */ --ornament-tangga: repeating-linear-gradient( 90deg, currentColor 0 10px, transparent 10px 16px ); --ornament-height: 0.375rem; /* ========================================================== 12. GLASS — lapisan kaca (empat unsur selalu bersama: latar semi-transparan, blur + saturasi, kilau tepi atas, bayangan besar lembut) ========================================================== */ --blur-xs: 6px; --blur-sm: 12px; --blur-md: 20px; --blur-lg: 32px; --blur-xl: 48px; --glass-saturate: 180%; /* KELOMPOK A: kaca konten (aman untuk teks) */ --glass-card: rgba(255, 255, 255, 0.82); --glass-card-hover: rgba(255, 255, 255, 0.92); --glass-panel: rgba(255, 255, 255, 0.75); /* KELOMPOK B: kaca chrome (label pendek saja) */ --glass-chrome: rgba(255, 255, 255, 0.68); --glass-chrome-strong: rgba(255, 255, 255, 0.78); --glass-chrome-soft: rgba(255, 255, 255, 0.45); /* Kaca di atas latar gelap */ --glass-dark: rgba(1, 29, 73, 0.55); --glass-on-dark: rgba(255, 255, 255, 0.14); --glass-on-dark-hover: rgba(255, 255, 255, 0.22); --glass-border: rgba(255, 255, 255, 0.70); --glass-border-dark: rgba(255, 255, 255, 0.22); --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.90); --glass-highlight-dark: inset 0 1px 0 rgba(255, 255, 255, 0.30); --glass-edge: inset 0 0 0 1px rgba(255, 255, 255, 0.35); --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent); --glass-sheen-soft: linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent); --shadow-glass: 0 8px 32px -8px rgba(1, 29, 73, 0.14), 0 2px 8px -4px rgba(1, 29, 73, 0.08); --shadow-glass-md: 0 16px 48px -12px rgba(1, 29, 73, 0.18), 0 4px 12px -6px rgba(1, 29, 73, 0.10); --shadow-glass-lg: 0 28px 72px -16px rgba(1, 29, 73, 0.24), 0 8px 24px -12px rgba(1, 29, 73, 0.12); --shadow-glass-xl: 0 40px 96px -24px rgba(1, 29, 73, 0.30); /* ========================================================== 13. AMBIENT — gumpalan warna lembut di balik kaca ========================================================== */ --ambient-biru: rgba(181, 206, 244, 0.42); /* biru-200 */ --ambient-amber: rgba(255, 221, 138, 0.34); /* amber-200 */ --ambient-toska: rgba(196, 232, 228, 0.28); /* tahap-3 muda */ --partikel-titik: rgba(1, 42, 106, 0.22); --partikel-garis: rgba(21, 86, 184, 0.07); --ambient-orb-light: rgba(255, 255, 255, 0.16); --ambient-orb-gold: rgba(255, 201, 79, 0.22); /* ========================================================== 14. UKURAN KONTROL ========================================================== */ --control-height-sm: 2.25rem; /* 36px */ --control-height-md: 2.75rem; /* 44px — target sentuh minimum */ --control-height-lg: 3.25rem; /* 52px */ --icon-size-sm: 1rem; --icon-size-md: 1.25rem; --icon-size-lg: 1.5rem; --icon-tile-sm: 2.25rem; --icon-tile-md: 3rem; --icon-tile-lg: 3.75rem; --burger-width: 1.125rem; --burger-bar: 0.125rem; --burger-gap: 0.3125rem; /* Kotak centang & radio */ --choice-size: 1.375rem; --choice-size-lg: 1.625rem; --choice-mark: 0.75rem; /* Sakelar */ --switch-width: 3.25rem; --switch-height: 1.9375rem; --switch-thumb: 1.6875rem; --switch-gap: 0.125rem; --switch-width-sm: 2.625rem; --switch-height-sm: 1.5rem; --switch-thumb-sm: 1.25rem; --float-height-max: 20rem; /* ========================================================== 15. KOTAK ISIAN DAN TOOLBAR (khas SCAFOLYA) ========================================================== */ --kotak-lebar: 6.5ch; /* kotak isian pendek (angka, pecahan) */ --kotak-lebar-besar: 9ch; /* kotak isian nominal rupiah */ --toolbar-tombol: 2.75rem; /* 44px */ /* ========================================================== 16. BERANDA SISWA (DEC-086) Panel sapaan navy, tangga kemajuan, kartu aktivitas bersampul. ========================================================== */ --sapa-latar: linear-gradient(128deg, var(--biru-950) 0%, var(--biru-800) 46%, var(--biru-600) 100%); --sapa-teks-redup: var(--biru-200); --sapa-kaca: rgba(255, 255, 255, 0.09); --sapa-kaca-kuat: rgba(255, 255, 255, 0.16); --sapa-kaca-garis: rgba(255, 255, 255, 0.18); --sapa-simpan-ikon-bg: rgba(47, 181, 116, 0.24); --sapa-simpan-ikon: #9BEBC4; --sapa-partikel-titik: rgba(255, 255, 255, 0.46); --sapa-partikel-garis: rgba(190, 214, 255, 0.16); --sapa-bayangan: 0 30px 70px -28px rgba(1, 29, 73, 0.55), 0 10px 24px -14px rgba(1, 29, 73, 0.30); --tangga-tinggi-maks: 6.5rem; --tangga-tinggi-min: 2.75rem; --tangga-selesai-bayangan: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 12px 26px -14px rgba(248, 174, 26, 0.75); --tangga-giliran-garis: rgba(255, 255, 255, 0.92); --tangga-giliran-cahaya: 0 0 0 5px rgba(255, 255, 255, 0.08), 0 14px 30px -14px rgba(0, 0, 0, 0.45); --kartu-nomor: 3.25rem; --kartu-sampul-rasio: 16 / 9; --sampul-selubung: linear-gradient(180deg, rgba(1, 29, 73, 0.34) 0%, rgba(1, 29, 73, 0) 30%, rgba(1, 29, 73, 0) 64%, rgba(1, 29, 73, 0.38) 100%); --sampul-terkunci: rgba(1, 29, 73, 0.34); --status-kaca-latar: rgba(255, 255, 255, 0.88); --gembok-latar: rgba(255, 255, 255, 0.20); --gembok-garis: rgba(255, 255, 255, 0.55); --giliran-garis: var(--amber-400); --giliran-cahaya: rgba(248, 174, 26, 0.36); --gradient-selesai: linear-gradient(135deg, var(--success-700) 0%, var(--success-500) 100%); /* ---------- Grafik Analitik situs (KP-138) ---------- Satu warna per makna: pengunjung, kunjungan, dan halaman untuk tren; pelaku dan golongan halaman untuk pemilahan. Deret kategori dipakai berurutan untuk diagram donat dan batang. */ --grafik-pengunjung: var(--biru-600); --grafik-kunjungan: #0B7369; --grafik-halaman: var(--amber-500); --grafik-umum: var(--biru-600); --grafik-siswa: #0B7369; --grafik-demo: #7C3FB5; --grafik-staf: var(--neutral-400); --grafik-pratinjau: #B03278; --grafik-robot: var(--neutral-600); --grafik-tanpa: var(--neutral-300); --grafik-k1: var(--biru-600); --grafik-k2: var(--amber-500); --grafik-k3: #0B7369; --grafik-k4: #7C3FB5; --grafik-k5: #B03278; --grafik-k6: var(--biru-300); --grafik-k7: var(--neutral-400); --grafik-kisi: var(--neutral-200); --grafik-sumbu: var(--neutral-500); --grafik-panas-0: var(--neutral-100); --grafik-panas: 21, 86, 184; --grafik-tip-latar: rgba(1, 29, 73, 0.94); --grafik-tip-teks: #FFFFFF; }