/* ============================================================ skorika.com — css/logo.css SUMBER TUNGGAL WARNA LOGO. 12 Agustus 2026. Sebelum berkas ini ada, warna logo ditulis di 43 berkas dan 112 aturan yang berbeda. Akibatnya satu permintaan ganti warna selalu jadi belasan suntingan, dan beberapa kali aturan yang satu diam-diam dikalahkan aturan yang lain (aturan ganda di admin/live.html, !important di css/admin.css). Seluruh aturan itu sudah dihapus; warna logo sekarang HANYA ditulis di sini. CARA PAKAI Halaman memilih variannya lewat satu kelas di : (tanpa kelas) pink — halaman berlatar gelap, ini bawaannya .logo-hitam — halaman berlatar terang (konsol admin, konsol owner, Drive, sertifikat, cetak) .logo-putih — halaman yang logonya duduk di batang gelap (lobby, live, podium, learn, student/dashboard) .logo-plum — admin/preview.html Berkas ini WAJIB dimuat paling akhir di , sesudah style.css, admin-shell.css, auth.css, dan owner.css. Kalau tidak, aturan di berkas-berkas itu yang menang dan warnanya kembali kacau. Badan gelembung memakai fill="currentColor", jadi cukup 'color'. Tiga titik di dalamnya memakai fill="var(--mark-dot,#F3EFDA)". Nilai favicon disamakan dengan varian pink di /img/favicon.svg — favicon berkas statis, tidak bisa membaca variabel ini, jadi kalau --logo-pink atau --logo-krem diubah, berkas itu ikut diperbarui. ============================================================ */ :root{ --logo-pink:#FF319F; /* merah muda merek */ --logo-krem:#F3EFDA; /* titik di atas gelembung pink/plum */ --logo-hitam:#0F172A; /* logo di halaman terang */ --logo-putih:#FFFFFF; /* logo di batang gelap; titik di gelembung hitam */ --logo-plum:#3B142A; /* plum kop halaman pratinjau */ } /* ---- pilihan varian ---- */ body{--logo-ink:var(--logo-pink); --logo-dot:var(--logo-krem)} body.logo-hitam{--logo-ink:var(--logo-hitam); --logo-dot:var(--logo-putih)} body.logo-putih{--logo-ink:var(--logo-putih); --logo-dot:var(--logo-hitam)} body.logo-plum {--logo-ink:var(--logo-plum); --logo-dot:var(--logo-krem)} /* ---- satu-satunya tempat warna logo dipasang ---- Daftar ini memuat SEMUA wadah logo yang ada di situs. Yang memuat tulisan merek sekalian diwarnai (nama merek sewarna tandanya); yang hanya membungkus tanda cukup mewarnai tandanya. :hover disertakan supaya warna tidak berubah saat disentuh. */ .brand, .brand:hover, .brand-sm, .brand-sm:hover, .sb-brand, .sb-brand:hover, .auth-logo, .auth-logo:hover, .ws-brand, .dw-brand, .dw-brand:hover, .brand-row a, .brand-row a:hover, .pdf-logo, .sb-logo, .pv-icon, .qz-icon, .wsbar .title, .login-card > svg.mark{ color:var(--logo-ink); --mark-dot:var(--logo-dot); } /* Tanda di dalam pembungkus yang juga memuat teks lain: yang diwarnai hanya SVG-nya, bukan wadahnya, supaya tulisan di sebelahnya tetap memakai warnanya sendiri. */ .foot-brand svg.mark, .af-brand svg.mark, .auth-brand svg.mark{ color:var(--logo-ink); --mark-dot:var(--logo-dot)} /* titik pemisah di dalam wordmark ikut warna logo. Catatan: .auth-brand, .foot-brand, dan .af-brand SENGAJA tidak ada di daftar warna logo di atas. Ketiganya pembungkus yang juga memuat teks lain (tagline panel masuk, baris hak cipta di kaki halaman); kalau ikut diwarnai, tulisan itu ikut berubah. Yang diwarnai hanya tandanya. */ .brand .dot-id, .brand-sm .dot-id, .sb-brand .dot-id, .auth-brand .brand .dot-id{ color:var(--logo-ink); } /* ---- pengecualian yang disengaja ---- Kop laporan cetak memakai warna homepage walau halamannya terang. */ body.logo-hitam .pdf-logo{color:var(--logo-pink); --mark-dot:var(--logo-krem)} /* Bilah atas halaman pratinjau — 17 Agu 2026. Halaman pratinjau memakai .logo-plum karena logo utamanya duduk di atas KARTU KREM, jadi tintanya plum. Tapi bilah atasnya berlatar var(--header) yang nilainya sama dengan --logo-plum: merek di sana akan plum di atas plum, alias tidak terlihat sama sekali. Di satu tempat itu warnanya dibalik — tinta krem, titik plum. Ditulis di sini, bukan di CSS halaman, supaya semua warna logo tetap terkumpul dalam satu berkas. */ body.logo-plum .topbar .brand{color:var(--logo-krem); --mark-dot:var(--logo-plum)} /* Bentuk lama logo (empat kotak dalam grid) sudah tidak dipakai sejak tanda gelembung diberlakukan; sisa gayanya dinetralkan di sini supaya tidak ada kotak, jarak, atau latar yang ikut tergambar. */ svg.mark{ display:inline-block; grid-template-columns:none; gap:0; background:none; padding:0; border:none; box-shadow:none; }