/* ========================================================================= SILAYAN -- TOKEN & KOMPONEN BERSAMA ------------------------------------------------------------------------- Dimuat PERTAMA oleh ketiga layout (public, auth, panel). Satu-satunya tempat palet didefinisikan: panel.css, auth.css, dan site.css hanya memakai var(--sl-*), tidak pernah menulis ulang nilai warnanya. Merah untuk aksen & elemen aktif/penting, bukan untuk mendominasi layar. Badge status memakai warna semantik (abu/kuning/hijau/merah), bukan merah untuk semuanya. ========================================================================= */ :root{ /* Token sumber (references/ui-style-guide.md) */ --slf-red-600:#dc2626; --slf-red-700:#b91c1c; --slf-red-50:#fef2f2; --slf-white:#ffffff; /* Latar halaman: putih yang merembes ke ungu gelap sangat tipis, mengikuti gaya gradasi diagonal 135 derajat (bukan 180 derajat) seperti latar iOS pada skill background-gradasi-ios. Ujung kanan-bawahnya sengaja dibuat hanya sedikit lebih gelap dari putih: ungu harus terasa sebagai nada, bukan sebagai warna halaman. Nada permukaan kartu dan garis tetap mengikuti aksen merah -- yang ditukar hanya latar di belakang semuanya. */ --slf-bg-gradient:linear-gradient(135deg,#ffffff 0%,#f3effc 55%,#e6dff1 100%); --slf-text-dark:#1f2937; --slf-text-muted:#6b7280; --slf-radius-lg:20px; --slf-radius-md:14px; /* Tiga saluran RGB di bawah adalah SATU-SATUNYA bagian palet yang tidak bisa lewat var() biasa: rgba() butuh telanjang, bukan token warna. Dipisah begini supaya pilihan tema cukup menukar satu baris, bukan menyalin ulang seluruh nilai bayangan. Nilai bawaannya tetap merah, jadi tampilan bawaan tidak berubah sedikit pun. */ --sl-bayang-rgb:220,38,38; --sl-neu-rgb:185,28,28; --sl-bayang-lg-rgb:127,29,29; --slf-shadow-soft:0 8px 24px rgba(var(--sl-bayang-rgb),.08), 0 2px 6px rgba(0,0,0,.04); /* Alias yang dipakai komponen */ --sl-primer:var(--slf-red-600); --sl-primer-gelap:var(--slf-red-700); --sl-primer-lembut:var(--slf-red-50); /* Dua nada cerah untuk teks/ikon di atas bidang aksen yang pekat, tempat --sl-primer sendiri tidak terbaca. */ --sl-primer-cerah:#fecaca; --sl-primer-cerah-2:#fca5a5; --sl-aksen:#f87171; --sl-grad-awal:#991b1b; --sl-grad-akhir:#f87171; --sl-gradasi:linear-gradient(135deg,var(--sl-grad-awal) 0%,var(--sl-primer) 55%,var(--sl-grad-akhir) 100%); --sl-teks:var(--slf-text-dark); --sl-teks-lembut:var(--slf-text-muted); --sl-garis:#f3e1e1; --sl-latar:#fff7f7; --sl-permukaan-2:#fff5f5; /* Ramp latar halaman). --sl-bg-gradient dipakai body, dua sisanya untuk panel/ubin yang perlu nada lebih pucat dari aksennya. */ --sl-latar-1:#fff1f1; --sl-latar-2:#fee2e2; --sl-bg-gradient:var(--slf-bg-gradient); --sl-font:'Nunito Sans','Nunito',system-ui,-apple-system,'Segoe UI',sans-serif; --sl-bayang-sm:0 2px 10px rgba(var(--sl-bayang-lg-rgb),.06); --sl-bayang:var(--slf-shadow-soft); --sl-bayang-lg:0 24px 60px -20px rgba(var(--sl-bayang-lg-rgb),.24); /* Neumorphism ringan: terang di kiri-atas, gelap tipis di kanan-bawah */ --sl-neu-timbul:-6px -6px 14px rgba(255,255,255,.9), 6px 6px 16px rgba(var(--sl-neu-rgb),.09); --sl-neu-cekung:inset 3px 3px 7px rgba(var(--sl-neu-rgb),.08), inset -3px -3px 7px rgba(255,255,255,.9); } /* ========================================================================= TEMA WARNA AKSEN (portal publik) ------------------------------------------------------------------------- Dipasang site.js sebagai atribut pada : data-aksen="jingga". Tanpa atribut (atau bernilai "merah") berlaku palet bawaan di atas, jadi pengunjung yang belum pernah memilih tema melihat tampilan yang sama seperti sebelumnya. Hanya memuat portal publik: tata letak panel tidak pernah memasang atribut ini, sehingga panel tetap merah apa pun pilihan pengunjung. Tiap tema menukar aksen DAN nada latarnya sekaligus. Menukar aksen saja meninggalkan halaman dalam dua warna yang saling bertabrakan. ========================================================================= */ /* Jingga */ :root[data-aksen="jingga"]{ --sl-primer:#ea580c; --sl-primer-gelap:#c2410c; --sl-primer-lembut:#fff7ed; --sl-primer-cerah:#fed7aa; --sl-primer-cerah-2:#fdba74; --sl-aksen:#fb923c; --sl-grad-awal:#9a3412; --sl-grad-akhir:#fb923c; --sl-garis:#f6e3d5; --sl-latar:#fffaf6; --sl-permukaan-2:#fff5ec; --sl-latar-1:#fff2e8; --sl-latar-2:#ffedd5; --sl-bayang-rgb:234,88,12; --sl-neu-rgb:194,65,12; --sl-bayang-lg-rgb:124,45,18; } /* Biru */ :root[data-aksen="biru"]{ --sl-primer:#2563eb; --sl-primer-gelap:#1d4ed8; --sl-primer-lembut:#eff6ff; --sl-primer-cerah:#bfdbfe; --sl-primer-cerah-2:#93c5fd; --sl-aksen:#60a5fa; --sl-grad-awal:#1e3a8a; --sl-grad-akhir:#60a5fa; --sl-garis:#dfe7f7; --sl-latar:#f8fbff; --sl-permukaan-2:#f2f7ff; --sl-latar-1:#f0f6ff; --sl-latar-2:#dbeafe; --sl-bayang-rgb:37,99,235; --sl-neu-rgb:29,78,216; --sl-bayang-lg-rgb:30,58,138; } /* Hijau */ :root[data-aksen="hijau"]{ --sl-primer:#16a34a; --sl-primer-gelap:#15803d; --sl-primer-lembut:#f0fdf4; --sl-primer-cerah:#bbf7d0; --sl-primer-cerah-2:#86efac; --sl-aksen:#4ade80; --sl-grad-awal:#14532d; --sl-grad-akhir:#4ade80; --sl-garis:#def0e3; --sl-latar:#f8fdf9; --sl-permukaan-2:#f2fbf5; --sl-latar-1:#f0fdf4; --sl-latar-2:#dcfce7; --sl-bayang-rgb:22,163,74; --sl-neu-rgb:21,128,61; --sl-bayang-lg-rgb:20,83,45; } /* Toska */ :root[data-aksen="toska"]{ --sl-primer:#0d9488; --sl-primer-gelap:#0f766e; --sl-primer-lembut:#f0fdfa; --sl-primer-cerah:#99f6e4; --sl-primer-cerah-2:#5eead4; --sl-aksen:#2dd4bf; --sl-grad-awal:#134e4a; --sl-grad-akhir:#2dd4bf; --sl-garis:#daf0ed; --sl-latar:#f6fdfc; --sl-permukaan-2:#f0fcfa; --sl-latar-1:#effcfa; --sl-latar-2:#ccfbf1; --sl-bayang-rgb:13,148,136; --sl-neu-rgb:15,118,110; --sl-bayang-lg-rgb:19,78,74; } /* Nila */ :root[data-aksen="nila"]{ --sl-primer:#4f46e5; --sl-primer-gelap:#4338ca; --sl-primer-lembut:#eef2ff; --sl-primer-cerah:#c7d2fe; --sl-primer-cerah-2:#a5b4fc; --sl-aksen:#818cf8; --sl-grad-awal:#312e81; --sl-grad-akhir:#818cf8; --sl-garis:#e2e3f6; --sl-latar:#f8f8fe; --sl-permukaan-2:#f3f4fe; --sl-latar-1:#f1f2ff; --sl-latar-2:#e0e7ff; --sl-bayang-rgb:79,70,229; --sl-neu-rgb:67,56,202; --sl-bayang-lg-rgb:49,46,129; } /* Latar halaman mengikuti nada tema. Ditulis sekali di sini, bukan diulang di tiap blok tema. Sudutnya 135 derajat seperti latar bawaan di atas: bertukar tema tidak boleh sekaligus mengubah arah gradasinya. */ :root[data-aksen]{ --sl-bg-gradient:linear-gradient(135deg,#ffffff 0%,var(--sl-latar-1) 60%,var(--sl-latar-2) 100%); } body{ background:var(--sl-bg-gradient); background-attachment:fixed; color:var(--sl-teks); font-family:var(--sl-font); } /* Input minimal 16px di layar sentuh: iOS Safari memperbesar halaman otomatis bila font kolom isian lebih kecil dari itu. */ @media (max-width:767.98px){ input.form-control, select.form-select, textarea.form-control, .select2-container .select2-selection, .select2-search__field{ font-size:16px !important; } } /* ========================================================================= TOMBOL PORTAL & AUTH (panel memakai .btn-panel di panel.css) ========================================================================= */ .btn-sl{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 22px; min-height:46px; border-radius:var(--slf-radius-md); border:1.5px solid transparent; font-weight:700; font-size:.94rem; font-family:inherit; cursor:pointer; text-decoration:none; transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease; } .btn-sl:active{ transform:scale(.98); } .btn-sl-utama{ background:var(--sl-primer); color:#fff; box-shadow:0 12px 24px -12px var(--sl-primer); } .btn-sl-utama:hover{ background:var(--sl-primer-gelap); color:#fff; } .btn-sl-garis{ background:#fff; color:var(--sl-primer); border-color:rgba(220,38,38,.35); } .btn-sl-garis:hover{ background:var(--sl-primer-lembut); color:var(--sl-primer-gelap); border-color:var(--sl-primer); } .btn-sl:disabled{ opacity:.6; cursor:not-allowed; } /* ========================================================================= LENCANA STATUS SEMANTIK Dipakai lintas modul: diajukan=abu, diproses=kuning, selesai=hijau, dirujuk/ditolak=merah. Kelas lama .lencana-* di panel.css tetap berlaku. ========================================================================= */ .status-diajukan{ background:#f1f5f9; color:#475569; } .status-draf { background:#f8fafc; color:#64748b; border:1px dashed #cbd5e1; } .status-diproses{ background:rgba(245,158,11,.14); color:#b45309; } .status-selesai { background:rgba(22,163,74,.12); color:#15803d; } .status-dirujuk, .status-ditolak { background:rgba(220,38,38,.12); color:#b91c1c; } /* Modul Konseling. Dijadwalkan = sedang berjalan (biru, beda dari kuning "diproses" supaya dua modul tidak tertukar sekilas); dibatalkan = abu, bukan merah: pembatalan oleh mahasiswa bukan kegagalan. */ .status-dijadwalkan{ background:rgba(37,99,235,.12); color:#1d4ed8; } .status-dibatalkan { background:#f1f5f9; color:#64748b; text-decoration:line-through; } /* Modul Karier & Alumni. Terbit = hijau (tampil bagi pembaca), ditutup = abu solid (selesai berjalan, bukan kegagalan -- beda dari draf bergaris putus). */ .status-terbit { background:rgba(22,163,74,.12); color:#15803d; } .status-ditutup{ background:#f1f5f9; color:#475569; border:1px solid #e2e8f0; } /* Kerja Sama: dua tahap persetujuan dibedakan nada, aktif = hijau, berakhir = abu bergaris (masih tercatat, tidak lagi berlaku). */ .status-diverifikasi{ background:rgba(124,58,237,.12); color:#6d28d9; } .status-disetujui { background:rgba(37,99,235,.12); color:#1d4ed8; } .status-aktif { background:rgba(22,163,74,.12); color:#15803d; } .status-berakhir { background:#f1f5f9; color:#64748b; border:1px dashed #cbd5e1; } .lencana-mendesak { background:#b91c1c; color:#fff; } /* ========================================================================= HERO CARD -- di atas dashboard tiap modul ========================================================================= */ .kartu-hero{ position:relative; overflow:hidden; border-radius:var(--slf-radius-lg); background:linear-gradient(135deg,#fee2e2 0%,#fff5f5 45%,#ffffff 100%); border:1px solid #fde2e2; box-shadow:var(--sl-neu-timbul); padding:24px 26px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; } .kartu-hero::after{ content:''; position:absolute; right:-70px; top:-70px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,rgba(220,38,38,.12),transparent 70%); pointer-events:none; } .kartu-hero > *{ position:relative; z-index:1; } .kartu-hero .hero-teks{ flex:1 1 260px; min-width:0; } .kartu-hero h2{ font-size:clamp(1.15rem,2.2vw,1.45rem); margin:0 0 4px; } .kartu-hero p{ margin:0; color:var(--sl-teks-lembut); font-size:.9rem; } .kartu-hero .hero-angka{ display:flex; gap:12px; flex-wrap:wrap; } .hero-angka .angka-ringkas{ background:#fff; border-radius:var(--slf-radius-md); padding:10px 16px; min-width:110px; box-shadow:var(--sl-neu-timbul); } .angka-ringkas b{ display:block; font-size:1.35rem; line-height:1.1; color:var(--sl-primer); } .angka-ringkas small{ font-size:.74rem; color:var(--sl-teks-lembut); } /* ========================================================================= KARTU PROFIL / TIM ========================================================================= */ .kartu-profil{ background:#fff; border-radius:var(--slf-radius-lg); box-shadow:var(--sl-bayang); padding:22px 18px; text-align:center; height:100%; } .kartu-profil .foto{ width:84px; height:84px; margin:0 auto 12px; border-radius:50%; object-fit:cover; box-shadow:var(--sl-neu-timbul); } .kartu-profil .inisial{ width:84px; height:84px; margin:0 auto 12px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--sl-gradasi); color:#fff; font-size:1.6rem; font-weight:800; } .kartu-profil h3{ font-size:1rem; margin:0 0 2px; } .kartu-profil .peran{ font-size:.82rem; color:var(--sl-teks-lembut); margin-bottom:10px; } .kartu-profil .kontak{ display:flex; justify-content:center; gap:8px; } .kartu-profil .kontak a{ width:38px; height:38px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; background:var(--sl-primer-lembut); color:var(--sl-primer); } /* ========================================================================= PENUNJUK AUTOSAVE -- diisi Panel.autosave() lewat data-keadaan ========================================================================= */ .status-autosave{ display:inline-flex; align-items:center; gap:6px; font-size:.8rem; color:var(--sl-teks-lembut); } .status-autosave::before{ content:''; width:8px; height:8px; border-radius:50%; background:#cbd5e1; } .status-autosave[data-keadaan="mengetik"]::before{ background:#f59e0b; } .status-autosave[data-keadaan="menyimpan"]::before{ background:#f59e0b; animation:sl-denyut 1s infinite; } .status-autosave[data-keadaan="tersimpan"]::before{ background:#16a34a; } .status-autosave[data-keadaan="gagal"]{ color:#b91c1c; } .status-autosave[data-keadaan="gagal"]::before{ background:#dc2626; } @keyframes sl-denyut{ 50%{ opacity:.3; } } /* ========================================================================= SELECT2 -- disamakan dengan .form-select (rounded, fokus merah muda) ========================================================================= */ .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple{ border:1.5px solid var(--sl-garis); border-radius:11px; min-height:44px; font-family:inherit; } .select2-container--default .select2-selection--single .select2-selection__rendered{ line-height:41px; padding-left:14px; color:var(--sl-teks); } .select2-container--default .select2-selection--single .select2-selection__arrow{ height:42px; right:8px; } .select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default.select2-container--open .select2-selection--single{ border-color:var(--sl-primer); box-shadow:0 0 0 4px rgba(220,38,38,.1); } .select2-container--default .select2-selection--multiple .select2-selection__choice{ background:var(--sl-primer-lembut); border:1px solid #fecaca; border-radius:999px; color:var(--sl-primer-gelap); } .select2-dropdown{ border:1px solid var(--sl-garis); border-radius:12px; overflow:hidden; box-shadow:var(--sl-bayang-lg); } .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{ background:var(--sl-primer); color:#fff; } .select2-container--default .select2-search--dropdown .select2-search__field{ border:1.5px solid var(--sl-garis); border-radius:9px; padding:6px 10px; } /* ========================================================================= TOOLTIP BOOTSTRAP 5 -- bertema merah Variabel --bs-tooltip-* juga mewarnai panahnya, jadi cukup disetel sekali di sini; tidak perlu menimpa .tooltip-arrow::before per arah. ========================================================================= */ .tooltip{ --bs-tooltip-bg:var(--sl-primer-gelap); --bs-tooltip-color:#fff; --bs-tooltip-border-radius:10px; --bs-tooltip-opacity:1; --bs-tooltip-padding-x:11px; --bs-tooltip-padding-y:7px; --bs-tooltip-font-size:.8rem; font-family:var(--sl-font); font-weight:600; } .tooltip .tooltip-inner{ box-shadow:0 8px 20px -8px rgba(127,29,29,.55); max-width:260px; } /* ========================================================================= LENCANA / LABEL BERWARNA UTAMA Dipakai untuk penanda netral: kategori, jumlah, penekanan. Lencana STATUS (.status-*) tetap semantik supaya diproses/selesai/ditolak dapat dibedakan sekilas tanpa membaca teksnya. ========================================================================= */ .badge, .lencana-utama{ background:var(--sl-primer) !important; color:#fff !important; border-radius:999px; font-weight:700; letter-spacing:.01em; } .badge.badge-lembut, .lencana-utama-lembut{ background:var(--sl-primer-lembut) !important; color:var(--sl-primer-gelap) !important; } @media (prefers-reduced-motion: reduce){ .status-autosave::before{ animation:none !important; } .btn-sl{ transition:none; } }