/* ===================================================================== TEMA UNIT — Sekolah Bintang Madani ===================================================================== Lima halaman unit memakai satu susunan, satu skala jarak, dan satu kumpulan komponen yang sama. Yang membedakan hanya nilai token di berkas ini. Halaman cukup menuliskan kelasnya di , misalnya , lalu seluruh warna, radius, dan huruf judulnya ikut menyesuaikan. Kenapa dipisah begini: sebelum ini tiap unit membawa lembar gayanya sendiri yang sebagian besar isinya sama persis. Satu perbaikan struktur berarti lima kali menyunting, dan yang keempat pasti terlewat. Sekarang struktur diperbaiki sekali, warna diatur di sini. --------------------------------------------------------------------- YANG BOLEH BERBEDA ANTAR UNIT --unit-accent warna aksi dan penanda unit --unit-accent-deep versi gelap, untuk teks di atas latar muda --unit-surface latar section bertema --unit-warm satu warna sekunder hangat, dipakai sangat hemat --unit-display huruf judul --unit-radius skala sudut --unit-leading tinggi baris teks isi YANG WAJIB SAMA DI SEMUA UNIT skala jarak, lebar container, ukuran teks isi, breakpoint, durasi transisi, dan gaya fokus. Semuanya di :root di bawah, dan sengaja TIDAK diletakkan di dalam kelas tema mana pun supaya tidak bisa dibuat berbeda tanpa sengaja. --------------------------------------------------------------------- */ :root { /* ---- Jarak. Satu skala untuk semua unit. ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-section: clamp(56px, 7vw, 96px); /* ---- Lebar isi ---- */ --shell: 1180px; --pad: clamp(18px, 4vw, 40px); /* ---- Ukuran teks isi. Judul boleh berbeda, teks isi tidak: orang tua membandingkan dua halaman unit berdampingan, dan teks yang berubah ukuran membuat salah satunya terasa lebih murah tanpa alasan. ---- */ --teks: 16px; --teks-kecil: .88rem; --teks-mini: .78rem; /* ---- Gerak. Dua durasi saja, supaya seluruh situs terasa satu tangan. ---- */ --tempo: .25s; --tempo-lambat: .45s; --lengkung: cubic-bezier(.2, .8, .2, 1); /* ---- Huruf ---- */ --huruf-isi: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* ---- Nilai bawaan, dipakai bila halaman lupa memasang kelas tema. Diambil dari warna sekolah, bukan warna unit mana pun. ---- */ --unit-accent: #006b32; --unit-accent-deep: #044a24; --unit-surface: #F4F8F5; --unit-warm: #F5B740; --unit-display: 'Plus Jakarta Sans', system-ui, sans-serif; --unit-radius: 14px; --unit-leading: 1.6; } /* ===================================================================== TK — hijau Radius paling besar dan tombol pil penuh: ini satu-satunya jenjang yang orang tuanya sedang menyerahkan anak empat tahun, dan sudut tajam membuat halaman terasa institusional. Hijau dipakai sebagai aksen di atas putih hangat, bukan menyelimuti halaman — latar hijau penuh membuat halaman TK terbaca seperti kantor dinas. ===================================================================== */ .theme-tk { --unit-accent: #0E7A3E; --unit-accent-deep: #0B4A28; --unit-surface: #FDFCF8; --unit-warm: #F5B740; --unit-display: 'Baloo 2', 'Plus Jakarta Sans', system-ui, sans-serif; --unit-radius: 20px; --unit-leading: 1.65; --unit-pil: 100px; } /* ===================================================================== SD — oranye Aksen hangatnya biru langit, bukan kuning atau merah: oranye yang didampingi warna panas lain terbaca seperti peringatan, bukan seperti sekolah. ===================================================================== */ .theme-sd { --unit-accent: #F58220; --unit-accent-deep: #9A4E06; --unit-surface: #FFF9F0; --unit-warm: #63B7D6; --unit-display: 'Plus Jakarta Sans', system-ui, sans-serif; --unit-radius: 14px; --unit-leading: 1.6; --unit-pil: 100px; } /* ===================================================================== SMP — biru Tipe sedikit lebih rapat. Pembacanya orang tua anak remaja yang sedang membandingkan program dengan serius, bukan menikmati suasana. ===================================================================== */ .theme-smp { --unit-accent: #2B7FC4; --unit-accent-deep: #17537F; --unit-surface: #F3F8FC; --unit-warm: #0B6E5F; --unit-display: 'Plus Jakarta Sans', system-ui, sans-serif; --unit-radius: 12px; --unit-leading: 1.55; --unit-pil: 12px; } /* ===================================================================== SMA BM Omni — navy Sub-merek tersendiri. Boleh terlihat berbeda dari empat unit lain, dan itu disengaja. Huruf judul serif, sudut paling kecil, satu-satunya unit yang boleh memakai latar gelap di satu section. ===================================================================== */ .theme-sma { --unit-accent: #17356A; --unit-accent-deep: #0C1F41; --unit-surface: #F5F7FA; --unit-warm: #C9A227; --unit-display: 'Fraunces', Georgia, 'Times New Roman', serif; --unit-radius: 8px; --unit-leading: 1.55; --unit-pil: 8px; --unit-gelap: #0C1F41; } /* ===================================================================== Unit Qur'an — hijau tua Lintas jenjang, jadi halamannya paling tenang: teks lebih besar, baris lebih longgar, ruang kosong lebih banyak, kontras lebih rendah. Ini satu-satunya halaman unit yang tidak berlomba menarik perhatian. ===================================================================== */ .theme-quran { --unit-accent: #0B6E5F; --unit-accent-deep: #064338; --unit-surface: #F6FAF8; --unit-warm: #C9A227; --unit-display: 'Plus Jakarta Sans', system-ui, sans-serif; --unit-radius: 16px; --unit-leading: 1.75; --unit-pil: 100px; } /* ===================================================================== JEMBATAN KE NAMA LAMA ===================================================================== Lembar gaya tiap halaman unit sudah menulis var(--u), var(--u-d), dan seterusnya di ratusan tempat. Nama-nama itu dipetakan ke token baru, bukan dicari-ganti satu per satu: mengganti nama di lima berkas sekaligus adalah cara paling mudah membuat satu halaman rusak diam-diam sementara empat lainnya terlihat benar. Jadi kedua penamaan hidup berdampingan. Yang baru dipakai untuk apa pun yang ditulis mulai sekarang; yang lama tetap bekerja. ===================================================================== */ .theme-tk, .theme-sd, .theme-smp, .theme-sma, .theme-quran { --u: var(--unit-accent); --u-d: var(--unit-accent-deep); --u-soft: var(--unit-surface); } /* Gaya fokus. Sengaja di luar kelas tema: terlihatnya penanda fokus bukan pilihan rasa, dan tidak boleh berbeda antar halaman. */ .theme-tk :focus-visible, .theme-sd :focus-visible, .theme-smp :focus-visible, .theme-sma :focus-visible, .theme-quran :focus-visible { outline: 3px solid var(--unit-accent); outline-offset: 3px; border-radius: 6px; } /* ===================================================================== PENERAPAN TOKEN ===================================================================== Sampai di sini token baru sekadar nilai yang tersimpan. Blok di bawah menyambungkannya ke elemen yang sudah ada, supaya bedanya benar-benar terlihat tanpa perlu menulis ulang markup tiap halaman. Selektor diawali body.theme-* dengan sengaja. Lembar gaya bawaan tiap halaman dimuat SESUDAH berkas ini dan menulis "body h1" (kekhususan 0,0,2). Menulis "body.theme-sma h1" (0,1,2) membuat token menang tanpa perlu !important, dan judul yang membawa kelasnya sendiri tetap bisa menimpanya bila memang dikehendaki. ===================================================================== */ body.theme-tk, body.theme-sd, body.theme-smp, body.theme-sma, body.theme-quran { line-height: var(--unit-leading); } body.theme-tk h1, body.theme-tk h2, body.theme-tk .h2, body.theme-sd h1, body.theme-sd h2, body.theme-sd .h2, body.theme-smp h1, body.theme-smp h2, body.theme-smp .h2, body.theme-sma h1, body.theme-sma h2, body.theme-sma .h2, body.theme-quran h1, body.theme-quran h2, body.theme-quran .h2 { font-family: var(--unit-display); } /* Kelas bantu yang membaca token, supaya markup baru tidak perlu menulis warna langsung. */ .u-accent { color: var(--unit-accent) } .u-accent-bg { background: var(--unit-accent); color: #fff } .u-surface { background: var(--unit-surface) } .u-radius { border-radius: var(--unit-radius) } .u-display { font-family: var(--unit-display) } @media (prefers-reduced-motion: reduce) { :root { --tempo: .001s; --tempo-lambat: .001s } }