/* Tema tampilan situs HUT 17 LPEI --------------------------------------------------------------------------- Warna section kampanye dibaca dari token di bawah. ms-main.css memakai var(--hut-*, ) sehingga bila berkas ini gagal dimuat, situs tetap tampil persis seperti tema "malam" - tidak ada halaman rusak. Tema dipilih dari dashboard admin; render.js menulis atribut data-theme pada . Tanpa atribut = "malam" (tampilan asli). Catatan kontras: pada tema terang, aksen emas digelapkan agar teks di atasnya tetap terbaca (emas terang di atas latar terang gagal WCAG). Overlay di atas foto sengaja TIDAK ikut berubah - teks di atas gambar harus tetap terbaca pada tema apa pun. */ /* ── Malam (default) — biru malam, sesuai desain awal ───────────────────── */ :root, [data-theme="malam"] { --hut-surface: #0d1b2e; --hut-theme-surface: #0d1b2e; --hut-surface-deep: #0a1424; --hut-surface-deeper: #060d18; --hut-surface-card: #0a1524; --hut-grad-1: #102843; --hut-grad-2: #0a1626; --hut-grad-3: #070f1b; --hut-nav-bg: #101f35; --hut-nav-bg-2: #0d1b2e; --hut-nav-bar: rgba(13, 27, 46, .96); --hut-nav-grad-1: #142a47; --hut-nav-accent: #e8c766; --hut-on-surface: #fff; --hut-on-surface-dim: rgba(255, 255, 255, .72); --hut-on-surface-mute: rgba(255, 255, 255, .55); --hut-line: rgba(255, 255, 255, .1); --hut-line-soft: rgba(255, 255, 255, .08); --hut-line-strong: rgba(255, 255, 255, .22); --hut-texture: rgba(255, 255, 255, .022); --hut-nav-ink: rgba(255, 255, 255, .85); --hut-nav-ink-strong: #ffffff; --hut-accent-rgb: 232, 199, 102; --hut-accent: #e8c766; } /* ── Terang — putih bersih, teks biru malam, aksen emas tua ─────────────── */ [data-theme="terang"] { --hut-surface: #f5f8fc; --hut-theme-surface: #f5f8fc; --hut-surface-deep: #eef3f9; --hut-surface-deeper: #e8eff7; --hut-surface-card: #ffffff; --hut-grad-1: #ffffff; --hut-grad-2: #f2f6fb; --hut-grad-3: #e9f0f8; /* Bar navigasi sengaja tetap gelap - lihat catatan "Navigasi" di bawah. */ --hut-nav-bg: #101f35; --hut-nav-bg-2: #0d1b2e; --hut-nav-bar: rgba(13, 27, 46, .96); --hut-nav-grad-1: #142a47; --hut-nav-accent: #e8c766; --hut-on-surface: #0d1b2e; --hut-on-surface-dim: rgba(13, 27, 46, .74); --hut-on-surface-mute: rgba(13, 27, 46, .55); --hut-line: rgba(13, 27, 46, .14); --hut-line-soft: rgba(13, 27, 46, .09); --hut-line-strong: rgba(13, 27, 46, .22); --hut-texture: rgba(13, 27, 46, .03); --hut-nav-ink: rgba(255, 255, 255, .85); --hut-nav-ink-strong: #ffffff; --hut-accent-rgb: 122, 96, 14; --hut-accent: #7a600e; } /* ── Krem — hangat, lembut, cocok untuk dokumen & bacaan panjang ────────── */ [data-theme="krem"] { --hut-surface: #f7f3ea; --hut-theme-surface: #f7f3ea; --hut-surface-deep: #f1ebde; --hut-surface-deeper: #ebe3d2; --hut-surface-card: #fffdf8; --hut-grad-1: #fffdf8; --hut-grad-2: #f5f0e4; --hut-grad-3: #ece4d3; /* Bar navigasi sengaja tetap gelap - lihat catatan "Navigasi" di bawah. */ --hut-nav-bg: #101f35; --hut-nav-bg-2: #0d1b2e; --hut-nav-bar: rgba(13, 27, 46, .96); --hut-nav-grad-1: #142a47; --hut-nav-accent: #e8c766; --hut-on-surface: #2c2418; --hut-on-surface-dim: rgba(44, 36, 24, .74); --hut-on-surface-mute: rgba(44, 36, 24, .55); --hut-line: rgba(44, 36, 24, .14); --hut-line-soft: rgba(44, 36, 24, .09); --hut-line-strong: rgba(44, 36, 24, .22); --hut-texture: rgba(44, 36, 24, .03); --hut-nav-ink: rgba(255, 255, 255, .85); --hut-nav-ink-strong: #ffffff; --hut-accent-rgb: 120, 93, 15; --hut-accent: #785d0f; } /* ── Biru Korporat — biru LPEI cerah, formal, tetap terang ──────────────── */ [data-theme="biru"] { --hut-surface: #eaf1fa; --hut-theme-surface: #eaf1fa; --hut-surface-deep: #dfeaf6; --hut-surface-deeper: #d4e2f2; --hut-surface-card: #ffffff; --hut-grad-1: #ffffff; --hut-grad-2: #e7f0fa; --hut-grad-3: #d9e6f5; /* Bar navigasi sengaja tetap gelap - lihat catatan "Navigasi" di bawah. */ --hut-nav-bg: #101f35; --hut-nav-bg-2: #0d1b2e; --hut-nav-bar: rgba(13, 27, 46, .96); --hut-nav-grad-1: #142a47; --hut-nav-accent: #e8c766; --hut-on-surface: #0a3e77; --hut-on-surface-dim: rgba(10, 62, 119, .78); --hut-on-surface-mute: rgba(10, 62, 119, .58); --hut-line: rgba(10, 62, 119, .16); --hut-line-soft: rgba(10, 62, 119, .1); --hut-line-strong: rgba(10, 62, 119, .24); --hut-texture: rgba(10, 62, 119, .035); --hut-nav-ink: rgba(255, 255, 255, .85); --hut-nav-ink-strong: #ffffff; --hut-accent-rgb: 107, 80, 11; --hut-accent: #6b500b; } /* ── Navigasi: kenapa bar header tetap gelap di semua tema ────────────────── Logo situs (global.logo.image) adalah PNG PUTIH SOLID - seluruh pikselnya berluminansi 1.0. Di atas bar terang logo itu hilang sama sekali, dan mengubah warna logo brand bukan keputusan teknis. Karena itu token --hut-nav-* (bar, gradien panel mobile, tinta, aksen hover) sengaja dibiarkan gelap pada keempat tema; yang berubah hanya badan halaman. Bar gelap + isi terang adalah pola yang lazim dan tetap memenuhi kontras. Kalau nanti tersedia logo versi gelap: unggah lewat dashboard admin, lalu ubah --hut-nav-bar / --hut-nav-bg / --hut-nav-bg-2 / --hut-nav-grad-1 ke warna terang dan --hut-nav-ink / --hut-nav-ink-strong ke warna gelap pada tema terang/krem/biru. Tidak ada perubahan lain yang diperlukan. */ /* ── Penyesuaian yang tidak bisa dilakukan lewat token saja ─────────────── */ /* Bayangan tebal dirancang untuk latar gelap; pada tema terang ia terlihat seperti noda. Dilembutkan untuk semua tema selain malam. */ [data-theme="terang"] .hut-countdown__box, [data-theme="krem"] .hut-countdown__box, [data-theme="biru"] .hut-countdown__box { box-shadow: 0 12px 30px rgba(13, 27, 46, .1); border-color: rgba(13, 27, 46, .16); } /* Hero memakai lapisan overlay gelap agar teks putih terbaca. Pada tema terang teksnya sudah gelap, jadi overlay-nya dikurangi. */ [data-theme="terang"] .hero--overlay-layer::before, [data-theme="krem"] .hero--overlay-layer::before, [data-theme="biru"] .hero--overlay-layer::before { opacity: .06; } /* Garis pemisah & latar strip pada tema terang perlu sedikit kontras tambahan supaya section tidak menyatu jadi satu blok putih. */ [data-theme="terang"] .ed-strip, [data-theme="krem"] .ed-strip, [data-theme="biru"] .ed-strip { border-top-width: 1px; border-bottom-width: 1px; } /* ── Latar per-section beranda ────────────────────────────────────────────── Dipilih dari dashboard admin per section (lini masa / logo / e-book). Tiap blok hanya menimpa token --hut-* untuk section itu saja. Karena seluruh komponen di dalamnya sudah membaca warnanya dari token yang sama, membalik permukaan otomatis membalik teksnya juga - section terang langsung mendapat teks gelap tanpa aturan tambahan per komponen. Nilainya sengaja sama persis dengan tema bernama di atas, supaya "section terang" terlihat identik dengan tema Terang. */ .hut-sec--terang { --hut-surface: #f5f8fc; --hut-surface-deep: #eef3f9; --hut-surface-deeper: #e8eff7; --hut-surface-card: #ffffff; --hut-grad-1: #ffffff; --hut-grad-2: #f2f6fb; --hut-grad-3: #e9f0f8; --hut-on-surface: #0d1b2e; --hut-on-surface-dim: rgba(13, 27, 46, .74); --hut-on-surface-mute: rgba(13, 27, 46, .55); --hut-line: rgba(13, 27, 46, .14); --hut-line-soft: rgba(13, 27, 46, .09); --hut-line-strong: rgba(13, 27, 46, .22); --hut-texture: rgba(13, 27, 46, .03); --hut-accent-rgb: 122, 96, 14; --hut-accent: #7a600e; } .hut-sec--krem { --hut-surface: #f7f3ea; --hut-surface-deep: #f1ebde; --hut-surface-deeper: #ebe3d2; --hut-surface-card: #fffdf8; --hut-grad-1: #fffdf8; --hut-grad-2: #f5f0e4; --hut-grad-3: #ece4d3; --hut-on-surface: #2c2418; --hut-on-surface-dim: rgba(44, 36, 24, .74); --hut-on-surface-mute: rgba(44, 36, 24, .55); --hut-line: rgba(44, 36, 24, .14); --hut-line-soft: rgba(44, 36, 24, .09); --hut-line-strong: rgba(44, 36, 24, .22); --hut-texture: rgba(44, 36, 24, .03); --hut-accent-rgb: 120, 93, 15; --hut-accent: #785d0f; } .hut-sec--gelap { --hut-surface: #0d1b2e; --hut-surface-deep: #0a1424; --hut-surface-deeper: #060d18; --hut-surface-card: #0a1524; --hut-grad-1: #102843; --hut-grad-2: #0a1626; --hut-grad-3: #070f1b; --hut-on-surface: #fff; --hut-on-surface-dim: rgba(255, 255, 255, .72); --hut-on-surface-mute: rgba(255, 255, 255, .55); --hut-line: rgba(255, 255, 255, .1); --hut-line-soft: rgba(255, 255, 255, .08); --hut-line-strong: rgba(255, 255, 255, .22); --hut-texture: rgba(255, 255, 255, .022); --hut-accent-rgb: 232, 199, 102; --hut-accent: #e8c766; } /* Biru korporat pekat: teks putih, aksen emas cerah - satu-satunya latar terpilih yang tetap gelap, jadi tokennya mengikuti pola tema Malam. */ .hut-sec--biru { --hut-surface: #0a3e77; --hut-surface-deep: #08355f; --hut-surface-deeper: #062a4d; --hut-surface-card: #0d4785; --hut-grad-1: #0d4785; --hut-grad-2: #0a3e77; --hut-grad-3: #062a4d; --hut-on-surface: #fff; --hut-on-surface-dim: rgba(255, 255, 255, .78); --hut-on-surface-mute: rgba(255, 255, 255, .6); --hut-line: rgba(255, 255, 255, .16); --hut-line-soft: rgba(255, 255, 255, .1); --hut-line-strong: rgba(255, 255, 255, .26); --hut-texture: rgba(255, 255, 255, .03); --hut-accent-rgb: 232, 199, 102; --hut-accent: #e8c766; } /* ------------------------------------------------------------------ Lini masa di atas latar terang ------------------------------------------------------------------ Pita tahun selalu biru korporat, apa pun temanya. Ketika section-nya berlatar terang, judul, deskripsi dan ilustrasi ikut memakai biru itu juga sehingga satu baris terbaca sebagai satu kesatuan warna - seperti infografis acuannya. Di latar gelap semuanya kembali ke warna teks biasa: biru di atas navy tidak terbaca. Ilustrasinya PNG abu-abu: badan gedung putih pekat, goresan hitam, luar gedung transparan. Karena bentuknya ada di luminans (bukan di alpha), mask-image cuma menghasilkan siluet biru pekat tanpa detail - jadi yang dipakai pemetaan per-piksel feColorMatrix: hitam -> biru pita, putih tetap putih, alpha tidak disentuh. Filternya ditulis sebagai data-URI, bukan url(#id) yang menunjuk di dokumen: dari stylesheet EKSTERNAL, referensi fragmen begitu resolusinya berbeda-beda antar engine (sebagian relatif ke berkas CSS, bukan ke dokumen), dan gagalnya tanpa suara - gambar cuma tampil tak berwarna. Data-URI mandiri, jadi tidak bergantung pada itu. --hut-tl-band adalah SATU-SATUNYA tempat biru itu ditulis sebagai warna. Angka di dalam matriks diturunkan darinya; admin/test-timeline-tint.js menghitung ulang dan menolak kalau keduanya menyimpang. */ :root { --hut-tl-band: #1c5e99; /* Diturunkan dari --hut-tl-band. Jangan disunting tangan - jalankan `node admin/test-timeline-tint.js` setelah mengubah birunya. */ --hut-tl-duotone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='d' color-interpolation-filters='sRGB'%3E%3CfeColorMatrix type='matrix' values='0.189256 0.636668 0.064272 0 0.109804 0.134230 0.451558 0.045585 0 0.368627 0.085040 0.286080 0.028880 0 0.600000 0 0 0 1 0'/%3E%3C/filter%3E%3C/svg%3E#d"); /* Bawaan = perlakuan latar gelap. [data-theme="malam"] sengaja TIDAK ikut disebut: ia sudah memakai :root ini, dan tema-tema terang menimpanya lewat selektornya sendiri di bawah - kekhususannya sama (0,1,0) tapi urutannya belakangan, jadi yang terang yang menang. */ --hut-tl-ink: var(--hut-on-surface, #fff); --hut-tl-ink-dim: var(--hut-on-surface-dim, rgba(255, 255, 255, .72)); --hut-tl-art: none; } /* Section "auto" mewarisi dari tema; semua tema terang memicu duotone. AWAS: tema "biru" dan varian section "biru" bernama sama tapi berlawanan. Tema Biru Korporat berlatar TERANG (#eaf1fa, teks navy) sehingga masuk kelompok ini; yang gelap adalah .hut-sec--biru di bawah. Mengelompokkan berdasarkan namanya saja membuat tema biru luput dari duotone. */ [data-theme="terang"], [data-theme="krem"], [data-theme="biru"], /* Section yang latarnya dipilih terang di dashboard, tema apa pun. */ .hut-sec--terang, .hut-sec--krem { --hut-tl-ink: var(--hut-tl-band); --hut-tl-ink-dim: var(--hut-tl-band); --hut-tl-art: var(--hut-tl-duotone, none); } /* Section gelap di dalam tema terang harus kembali ke teks biasa - tanpa ini ia mewarisi biru dari :root di atas dan hilang di latar navy. */ .hut-sec--gelap, .hut-sec--biru { --hut-tl-ink: var(--hut-on-surface, #fff); --hut-tl-ink-dim: var(--hut-on-surface-dim, rgba(255, 255, 255, .72)); --hut-tl-art: none; }