/* ============================================================================ PALET ORANGE + ABU + COKLAT — Darus & Rekan Konsultasi kredit pensiun untuk BPR & Koperasi Simpan Pinjam Arah visual: "Praktisi Hangat" — orange berani sebagai latar hero, putih sebagai teks utama di hero, coklat tua sebagai blok penutup yang sophisticated, dan abu sebagai struktur netral. Cara pakai: 1. Tempel berkas ini di , SEBELUM berkas CSS lain: 2. Ganti nilai warna di CSS lama dengan var(...) sesuai tabel peran. 3. Ganti mode: atribut data-theme di tag (anjuran) PEMBAGIAN PORSI: Orange ~30% hero, tombol, eyebrow, angka, ikon, garis penanda Putih ~20% teks hero, kartu, tombol, ikon Abu ~35% teks badan, latar section, garis, struktur Coklat ~15% blok penutup (CTA & footer), aksen hangat ATURAN KONTRAS: - Teks putih di atas --o-500 (orange) : 3,23:1 — HANYA untuk heading besar dan lead, JANGAN untuk body kecil. - Teks putih di atas --o-600 (orange tua) : 4,60:1 — aman untuk body. - Teks putih di atas gradient hero (o-700→o-500): rata-rata ~5,5:1 — aman. - Tombol putih di atas orange hero : tegas, focal point jelas. - Tombol orange (--o-500) di atas latar cream : gunakan teks gelap (--g-900). - Coklat tua (--b-900) untuk teks kontras : di atas putih/coklat-muda. ============================================================================ */ :root{ /* ---------- PALET MENTAH: ORANGE ---------- */ --o-900:#7C2D0A; /* orange paling tua — teks orange kontras tinggi */ --o-700:#9A3E10; /* orange tua — eyebrow, label, angka */ --o-600:#C2540E; /* orange sedang — hero gradient awal, hover */ --o-500:#E2650F; /* ORANGE UTAMA — hero background, tombol */ --o-400:#F59A4B; /* orange muda — aksen di latar gelap, hover */ --o-200:#FBD3AE; /* orange muda pucat — garis lembut, lencana */ --o-50 :#FDF4EC; /* wash orange — blok yang ingin ditonjolkan */ /* ---------- PALET MENTAH: ABU ---------- */ --g-900:#16191D; /* abu tua pekat — teks tombol putih, dark mode bg */ --g-800:#1F2429; /* abu tua — teks badan, AAA 14,68 */ --g-700:#2C333A; /* abu tua sedang — kartu di mode gelap */ --g-500:#5C666F; /* abu sedang — teks sekunder, AA 5,50 */ --g-400:#8B949C; /* abu muda sedang — teks sekunder mode gelap */ --g-200:#DFE3E7; /* abu muda — garis pemisah */ --g-100:#EDF0F2; /* abu muda pucat — latar blok berselang */ --g-50 :#F6F8F9; /* abu paling muda — alternatif latar */ --white:#FFFFFF; /* ---------- PALET MENTAH: COKLAT (pelengkap hangat) ---------- */ --b-900:#2A1810; /* coklat sangat tua — invert/CTA penutup/footer */ --b-800:#3D2415; /* coklat tua — heading di atas cream, garis */ --b-700:#5C3A24; /* coklat sedang — sub-heading, harga */ --b-500:#8B6F5A; /* coklat muda — teks sekunder hangat */ --b-300:#C9B5A1; /* coklat pucat — garis hangat, divider */ --b-100:#EFE2D2; /* coklat sangat pucat — wash blok */ --b-50 :#FAF1E8; /* krem — latar utama halaman (hangat) */ } /* ============================================================================ MODE TERANG (anjuran untuk halaman utama) ============================================================================ */ [data-theme="orange-terang"]{ /* ---- Latar ---- */ --surface: var(--b-50); /* latar halaman — krem hangat */ --surface-2: var(--white); /* latar kartu */ --surface-3: var(--b-100); /* latar section berselang */ --surface-accent: var(--o-50); /* wash orange — blok yang ditonjolkan */ /* ---- Teks & garis ---- */ --ink: var(--g-800); /* teks utama */ --muted: var(--g-500); /* teks sekunder */ --line: var(--b-300); /* garis pemisah — hangat */ --line-accent: var(--o-200); /* garis penanda orange */ /* ---- Aksen orange ---- */ --accent: var(--o-500); /* isian tombol, ikon */ --accent-text: var(--o-700); /* teks/label orange */ --accent-text-hi: var(--o-900); /* teks orange kontras tinggi */ --accent-hover: var(--o-600); --on-accent: var(--white); /* teks di atas orange terang */ --on-accent-soft: var(--g-900); /* teks di atas orange terang, body */ /* ---- HERO (orange) ---- */ --hero-bg: linear-gradient(135deg, var(--o-600) 0%, var(--o-500) 55%, var(--o-400) 100%); --hero-bg-solid: var(--o-500); --hero-ink: var(--white); /* H1, judul di hero */ --hero-muted: rgba(255,255,255,.88); /* lead text */ --hero-line: rgba(255,255,255,.28); /* garis pemisah di hero */ --hero-line-soft: rgba(255,255,255,.18); --hero-card-bg: rgba(255,255,255,.10); --hero-card-line: rgba(255,255,255,.22); --hero-accent: var(--white); /* eyebrow underline, aksen */ --hero-mark-bg: var(--white); --hero-mark-fg: var(--o-700); /* ---- INVERT (coklat tua — blok penutup) ---- */ --invert-bg: var(--b-900); /* CTA penutup, footer, sticky */ --invert-ink: var(--b-50); --invert-muted: rgba(239,226,210,.78); --invert-line: rgba(239,226,210,.20); --invert-accent: var(--o-400); --invert-card-bg: rgba(239,226,210,.06); --shadow:0 1px 2px rgba(42,24,16,.06), 0 10px 30px -14px rgba(42,24,16,.18); --shadow-lg:0 6px 16px rgba(42,24,16,.10); } /* ============================================================================ MODE GELAP (untuk halaman demo dashboard / tool) ============================================================================ */ [data-theme="orange-gelap"]{ --surface: var(--b-900); --surface-2: #1F1610; --surface-3: #3A2A1E; --surface-accent: #4A2D14; --ink: var(--b-50); --muted: rgba(239,226,210,.70); --line: rgba(239,226,210,.16); --line-accent: #7A4A2A; --accent: var(--o-400); --accent-text: var(--o-400); --accent-text-hi: #FBB870; --accent-hover: var(--o-500); --on-accent: var(--g-900); --on-accent-soft: var(--g-900); /* ---- HERO tetap orange (lebih dalam di mode gelap) ---- */ --hero-bg: linear-gradient(135deg, #B5460C 0%, #D55A0E 55%, #E8782A 100%); --hero-bg-solid: var(--o-600); --hero-ink: var(--white); --hero-muted: rgba(255,255,255,.90); --hero-line: rgba(255,255,255,.28); --hero-line-soft: rgba(255,255,255,.18); --hero-card-bg: rgba(0,0,0,.14); --hero-card-line: rgba(255,255,255,.22); --hero-accent: var(--white); --hero-mark-bg: var(--white); --hero-mark-fg: var(--o-700); /* ---- INVERT (di mode gelap = coklat muda, jadi blok terang) ---- */ --invert-bg: var(--b-50); --invert-ink: var(--b-900); --invert-muted: var(--b-500); --invert-line: var(--b-300); --invert-accent: var(--o-700); --invert-card-bg: rgba(42,24,16,.04); --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7); --shadow-lg:0 6px 16px rgba(0,0,0,.55); } /* ============================================================================ TABEL PERAN — pemetaan dari bagian halaman ke variabel ---------------------------------------------------------------------------- Latar halaman ................. var(--surface) Latar kartu ................... var(--surface-2) Latar section berselang ....... var(--surface-3) HERO background ............... var(--hero-bg) <- ORANGE HERO H1 / judul ............... var(--hero-ink) <- PUTIH HERO lead / body .............. var(--hero-muted) <- PUTIH LEMBUT HERO eyebrow underline ........ var(--hero-accent) <- PUTIH HERO card overlay ............. var(--hero-card-bg) HERO divider line ............. var(--hero-line) Judul & teks badan ............ var(--ink) Teks sekunder / keterangan .... var(--muted) Garis pemisah ................. var(--line) Eyebrow / label kecil ......... var(--accent-text) Angka besar / KPI ............. var(--accent-text) Isian tombol utama ............ var(--accent) Teks tombol utama ............. var(--on-accent) Tombol di hero ................ putih bg, teks var(--g-900) Blok CTA penutup & footer ..... var(--invert-bg) + var(--invert-ink) Aksen di blok gelap ........... var(--invert-accent) ============================================================================ */