@charset "UTF-8"; /*! * gaya.css — Situs SMP Negeri 6 Bantan * * Satu berkas, tanpa framework, tanpa sumber luar selain Google Fonts. * * Tema: biru dongker #13234B + kuning #F0B21E + putih. * Mode gelap mengikuti prefers-color-scheme, dan bisa ditimpa pengunjung lewat * atribut data-tema pada (dipasang public/aset/js/situs.js). * * Isi berkas: * 1. Token warna & ukuran 7. Kartu & petak * 2. Dasar & aksesibilitas 8. Statistik * 3. Tata letak publik 9. Tombol, lencana, pesan * 4. Navbar 10. Form & tabel * 5. Kepala halaman & hero 11. Prosa (isi artikel) * 6. Breadcrumb & paginasi 12. Footer * 13. Panel admin * 14. Cetak & gerak minimal */ /* ================================================================== * 1. TOKEN * ================================================================== */ :root { color-scheme: light dark; /* Palet mentah */ --biru-900: #0A142E; --biru-800: #0C1733; --biru-700: #13234B; /* warna utama sekolah */ --biru-600: #1B2F63; --biru-500: #26418A; --kuning-600: #A8760A; --kuning-500: #F0B21E; /* aksen sekolah */ --kuning-400: #F7C948; --kuning-100: #FDF3D8; /* Peran warna — mode terang */ --latar: #F4F6FB; --latar-kartu: #FFFFFF; --latar-lembut: #EDF1F9; --teks: #16203A; --teks-lembut: #55607A; --teks-terbalik: #FFFFFF; --garis: #DFE5F0; --garis-kuat: #C4CEE2; --utama: var(--biru-700); --utama-lembut: var(--biru-600); --utama-teks: #FFFFFF; --aksen: var(--kuning-500); --aksen-teks: var(--biru-900); --tautan: var(--biru-600); --tautan-hover: var(--biru-500); --kepala-latar: var(--biru-700); --kepala-teks: #FFFFFF; --kepala-bilah: var(--biru-800); --sukses: #0F6B3A; --sukses-latar: #E3F5EA; --bahaya: #A31B1B; --bahaya-latar: #FBE9E9; --peringatan: #7F5205; --peringatan-latar: var(--kuning-100); --info: var(--biru-600); --info-latar: #E8EEFB; /* Ukuran */ --lebar-isi: 1180px; --radius: 14px; --radius-kecil: 9px; --bayang-1: 0 1px 2px rgba(10, 20, 46, .06), 0 2px 6px rgba(10, 20, 46, .07); --bayang-2: 0 12px 32px rgba(10, 20, 46, .14); --sela: 20px; --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --transisi: 160ms ease; } /* * Blok gelap ditulis dua kali dengan sengaja: sekali untuk pengunjung yang * memakai setelan sistem, sekali untuk pilihan manual lewat data-tema. CSS tidak * bisa berbagi satu blok deklarasi antara dua konteks selektor. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="terang"]) { --latar: #080D1A; --latar-kartu: #101932; --latar-lembut: #16223F; --teks: #E9EDF7; --teks-lembut: #A4AFC6; --garis: #1E2B4A; --garis-kuat: #2C3C63; --utama: #2C4A94; --utama-lembut: #38589F; --utama-teks: #FFFFFF; --aksen: var(--kuning-400); --aksen-teks: #10182C; --tautan: #9FB6EE; --tautan-hover: #C3D2F7; --kepala-latar: #0A1530; --kepala-teks: #F2F5FD; --kepala-bilah: #060B18; --sukses: #6FD79B; --sukses-latar: #0F2A1D; --bahaya: #F19C9C; --bahaya-latar: #2C1214; --peringatan: #F3C767; --peringatan-latar: #2B2007; --info: #A8BEF2; --info-latar: #111E3C; --bayang-1: 0 1px 2px rgba(0, 0, 0, .4); --bayang-2: 0 14px 34px rgba(0, 0, 0, .5); } } :root[data-tema="gelap"] { --latar: #080D1A; --latar-kartu: #101932; --latar-lembut: #16223F; --teks: #E9EDF7; --teks-lembut: #A4AFC6; --garis: #1E2B4A; --garis-kuat: #2C3C63; --utama: #2C4A94; --utama-lembut: #38589F; --utama-teks: #FFFFFF; --aksen: var(--kuning-400); --aksen-teks: #10182C; --tautan: #9FB6EE; --tautan-hover: #C3D2F7; --kepala-latar: #0A1530; --kepala-teks: #F2F5FD; --kepala-bilah: #060B18; --sukses: #6FD79B; --sukses-latar: #0F2A1D; --bahaya: #F19C9C; --bahaya-latar: #2C1214; --peringatan: #F3C767; --peringatan-latar: #2B2007; --info: #A8BEF2; --info-latar: #111E3C; --bayang-1: 0 1px 2px rgba(0, 0, 0, .4); --bayang-2: 0 14px 34px rgba(0, 0, 0, .5); } /* ================================================================== * 2. DASAR & AKSESIBILITAS * ================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--latar); color: var(--teks); font-family: var(--font); font-size: 16px; line-height: 1.65; min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; height: auto; } a { color: var(--tautan); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--tautan-hover); } h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.25; margin: 0 0 .5em; color: var(--teks); text-wrap: balance; } h1 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.3rem); } h2 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.8rem); } h3 { font-size: 1.15rem; } p, ul, ol { margin: 0 0 1em; } /* Fokus keyboard harus selalu terlihat jelas, termasuk di atas biru dongker. */ :focus-visible { outline: 3px solid var(--aksen); outline-offset: 2px; border-radius: 4px; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .lewati { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--aksen); color: var(--aksen-teks); padding: 12px 18px; font-weight: 700; border-radius: 0 0 var(--radius-kecil) 0; } .lewati:focus { left: 0; } /* ================================================================== * 3. TATA LETAK PUBLIK * ================================================================== */ .wadah { width: 100%; max-width: var(--lebar-isi); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); } .utama { flex: 1 0 auto; padding-block: 8px 40px; } /* Pita isi. View membungkus kontennya sendiri:
...
*/ .bagian { padding-block: clamp(24px, 4vw, 44px); } .bagian--lembut { background: var(--latar-lembut); } .bagian__kepala { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: var(--sela); } .judul-bagian { margin: 0; position: relative; padding-bottom: 10px; } .judul-bagian::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 4px; border-radius: 2px; background: var(--aksen); } .petak { display: grid; gap: var(--sela); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); } .petak--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); } .petak--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); } .petak--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); } .susun-2 { display: grid; gap: clamp(20px, 3vw, 36px); grid-template-columns: 1fr; } @media (min-width: 900px) { .susun-2 { grid-template-columns: 2fr 1fr; align-items: start; } } /* ================================================================== * 4. NAVBAR * ================================================================== */ .kepala { background: var(--kepala-latar); color: var(--kepala-teks); position: sticky; top: 0; z-index: 100; box-shadow: var(--bayang-1); } .kepala__bilah { background: var(--kepala-bilah); font-size: .82rem; } .kepala__bilah-isi { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: flex-end; padding-block: 6px; color: rgba(255, 255, 255, .8); } .kepala__bilah-isi a { color: inherit; text-decoration: none; } .kepala__bilah-isi a:hover { color: var(--kuning-400); text-decoration: underline; } .kepala__utama { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-block: 12px; } .merek { display: inline-flex; align-items: center; gap: 12px; color: var(--kepala-teks); text-decoration: none; min-width: 0; } .merek__logo { width: 48px; height: 48px; object-fit: contain; background: #fff; border-radius: 10px; padding: 3px; flex: none; } .merek__inisial { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--aksen); color: var(--biru-900); font-weight: 800; font-size: 1.4rem; } .merek__teks { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .merek__teks strong { font-size: 1.02rem; font-weight: 800; } .merek__teks small { font-size: .76rem; color: rgba(255, 255, 255, .75); } .tombol-menu { appearance: none; background: transparent; border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--radius-kecil); width: 46px; height: 42px; display: grid; place-items: center; cursor: pointer; flex: none; } .tombol-menu__garis, .tombol-menu__garis::before, .tombol-menu__garis::after { display: block; width: 22px; height: 2px; background: var(--kepala-teks); border-radius: 2px; transition: transform var(--transisi), opacity var(--transisi); } .tombol-menu__garis::before, .tombol-menu__garis::after { content: ""; position: relative; } .tombol-menu__garis::before { top: -7px; } .tombol-menu__garis::after { top: 5px; } .tombol-menu--aktif .tombol-menu__garis { background: transparent; } .tombol-menu--aktif .tombol-menu__garis::before { transform: translateY(7px) rotate(45deg); } .tombol-menu--aktif .tombol-menu__garis::after { transform: translateY(-5px) rotate(-45deg); } .menu { list-style: none; margin: 0; padding: 0; } .menu__tautan { display: block; padding: 10px 12px; color: var(--kepala-teks); text-decoration: none; border-radius: var(--radius-kecil); font-weight: 600; font-size: .95rem; } .menu__tautan:hover { background: rgba(255, 255, 255, .12); color: var(--kepala-teks); } .menu__tautan.aktif { color: var(--kuning-400); box-shadow: inset 0 -3px 0 var(--aksen); } .menu__pemicu { appearance: none; background: transparent; border: 0; color: inherit; cursor: pointer; padding: 6px 10px; font-size: .9rem; border-radius: var(--radius-kecil); } .submenu { list-style: none; margin: 0; padding: 4px; background: var(--latar-kartu); border-radius: var(--radius-kecil); box-shadow: var(--bayang-2); border: 1px solid var(--garis); } .submenu a { display: block; padding: 9px 12px; color: var(--teks); text-decoration: none; border-radius: 6px; font-size: .92rem; } .submenu a:hover { background: var(--latar-lembut); } .cari-kecil { display: flex; gap: 6px; } .cari-kecil input { flex: 1 1 auto; min-width: 0; padding: 9px 12px; border-radius: var(--radius-kecil); border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .12); color: var(--kepala-teks); font: inherit; font-size: .9rem; } .cari-kecil input::placeholder { color: rgba(255, 255, 255, .65); } .cari-kecil button, .tombol-tema { appearance: none; cursor: pointer; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .12); color: var(--kepala-teks); border-radius: var(--radius-kecil); padding: 9px 12px; font: inherit; line-height: 1; } .cari-kecil button:hover, .tombol-tema:hover { background: rgba(255, 255, 255, .22); } /* Layar kecil: menu tersembunyi sampai tombol ditekan. */ @media (max-width: 959.98px) { .navigasi { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--kepala-latar); border-top: 1px solid rgba(255, 255, 255, .15); padding: 12px clamp(16px, 4vw, 32px) 18px; box-shadow: var(--bayang-2); max-height: 80vh; overflow-y: auto; } .navigasi.buka { display: block; } .kepala__utama { position: relative; } .menu__butir--anak { display: grid; grid-template-columns: 1fr auto; align-items: center; } .submenu { display: none; grid-column: 1 / -1; margin: 4px 0 8px 12px; } .menu__butir.terbuka > .submenu { display: block; } .cari-kecil { margin-top: 12px; } .tombol-tema { margin-top: 10px; width: 100%; } } /* Layar lebar: menu mendatar, submenu melayang. */ @media (min-width: 960px) { .tombol-menu { display: none; } .navigasi { display: flex; align-items: center; gap: 10px; } .menu { display: flex; align-items: center; gap: 2px; } .menu__butir { position: relative; display: flex; align-items: center; } .menu__butir--anak > .menu__tautan { padding-right: 4px; } .submenu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 250px; display: none; z-index: 120; } .menu__butir--anak:hover > .submenu, .menu__butir--anak:focus-within > .submenu, .menu__butir.terbuka > .submenu { display: block; } .cari-kecil input { width: 170px; } } /* ================================================================== * 5. KEPALA HALAMAN & HERO * ================================================================== */ .kepala-halaman { background: linear-gradient(160deg, var(--biru-700), var(--biru-600) 70%, var(--biru-500)); color: #fff; padding-block: clamp(22px, 4vw, 40px); } .kepala-halaman__judul { color: #fff; margin: 6px 0 0; } .kepala-halaman__sub { margin: 8px 0 0; color: rgba(255, 255, 255, .85); max-width: 65ch; } /* Hero beranda (dipakai section 'hero' pada view beranda). */ .hero { background: radial-gradient(1100px 380px at 85% -10%, rgba(240, 178, 30, .28), transparent 60%), linear-gradient(160deg, var(--biru-800), var(--biru-700) 55%, var(--biru-600)); color: #fff; padding-block: clamp(38px, 7vw, 86px); } .hero__judul { color: #fff; font-size: clamp(1.9rem, 1.3rem + 3vw, 3.1rem); margin-bottom: .4em; } .hero__sub { font-size: clamp(1rem, .95rem + .4vw, 1.2rem); color: rgba(255, 255, 255, .88); max-width: 62ch; } .hero__aksi { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; } /* Tombol garis di atas latar gelap perlu warna terang. */ .kepala-halaman .tombol--garis, .hero .tombol--garis { border-color: rgba(255, 255, 255, .6); color: #fff; } .kepala-halaman .tombol--garis:hover, .hero .tombol--garis:hover { background: rgba(255, 255, 255, .15); color: #fff; } /* ================================================================== * 6. BREADCRUMB & PAGINASI * ================================================================== */ .jejak__daftar { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; font-size: .85rem; } .jejak__butir + .jejak__butir::before { content: "/"; margin-right: 6px; opacity: .6; } .kepala-halaman .jejak { color: rgba(255, 255, 255, .85); } .kepala-halaman .jejak a { color: rgba(255, 255, 255, .9); } .jejak--admin { color: var(--teks-lembut); } .paginasi { margin-top: 28px; } .paginasi__daftar { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; justify-content: center; } .paginasi__tautan { display: grid; place-items: center; min-width: 42px; height: 42px; padding-inline: 10px; border: 1px solid var(--garis); border-radius: var(--radius-kecil); background: var(--latar-kartu); color: var(--teks); text-decoration: none; font-weight: 600; font-size: .92rem; } .paginasi__tautan:hover { border-color: var(--garis-kuat); background: var(--latar-lembut); color: var(--teks); } .paginasi__tautan--aktif { background: var(--utama); border-color: var(--utama); color: var(--utama-teks); } /* ================================================================== * 7. KARTU & PETAK * ================================================================== */ .kartu { background: var(--latar-kartu); border: 1px solid var(--garis); border-radius: var(--radius); box-shadow: var(--bayang-1); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--transisi), box-shadow var(--transisi); } .kartu:hover { transform: translateY(-2px); box-shadow: var(--bayang-2); } .kartu__gambar { display: block; aspect-ratio: 16 / 10; background: var(--latar-lembut); overflow: hidden; } .kartu__gambar img { width: 100%; height: 100%; object-fit: cover; display: block; } .kartu__isi { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; margin: 0; } .kartu__meta { margin: 0; font-size: .82rem; color: var(--teks-lembut); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .kartu__kategori { background: var(--latar-lembut); color: var(--tautan); border-radius: 999px; padding: 2px 10px; text-decoration: none; font-weight: 600; } .kartu__judul { margin: 0; font-size: 1.06rem; line-height: 1.35; } .kartu__judul--kecil { font-size: .98rem; } .kartu__judul a { color: var(--teks); text-decoration: none; } .kartu__judul a:hover { color: var(--tautan); text-decoration: underline; } .kartu__ringkas { margin: 0; color: var(--teks-lembut); font-size: .92rem; } /* Kartu agenda: blok tanggal di kiri. */ .kartu--agenda { flex-direction: row; align-items: stretch; } .tanggal-blok { flex: none; width: 84px; background: var(--utama); color: var(--utama-teks); display: grid; align-content: center; justify-items: center; padding: 12px 6px; line-height: 1.1; } .tanggal-blok__tanggal { font-size: 1.7rem; font-weight: 800; } .tanggal-blok__bulan { font-weight: 700; text-transform: uppercase; font-size: .8rem; color: var(--kuning-400); } .tanggal-blok__tahun { font-size: .75rem; opacity: .85; } /* Kartu orang (guru & tenaga kependidikan). */ .kartu--orang { text-align: center; } .kartu__foto { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--latar-lembut); display: block; } .kartu--orang .kartu__isi { align-items: center; gap: 4px; } /* Kartu foto galeri. */ .kartu--foto .kartu__isi { padding: 12px 14px 14px; } /* ================================================================== * 8. STATISTIK * ================================================================== */ .statistik__daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); } .statistik__butir { background: var(--latar-kartu); border: 1px solid var(--garis); border-left: 4px solid var(--aksen); border-radius: var(--radius-kecil); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; } .statistik__angka { font-size: 1.6rem; font-weight: 800; color: var(--utama); line-height: 1.15; } :root[data-tema="gelap"] .statistik__angka { color: var(--kuning-400); } @media (prefers-color-scheme: dark) { :root:not([data-tema="terang"]) .statistik__angka { color: var(--kuning-400); } } .statistik__label { font-size: .85rem; color: var(--teks-lembut); } .statistik__sumber { margin: 14px 0 0; font-size: .82rem; color: var(--teks-lembut); font-style: italic; } /* ================================================================== * 9. TOMBOL, LENCANA, PESAN, KEADAAN KOSONG * ================================================================== */ .tombol { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: var(--radius-kecil); border: 1px solid transparent; font: inherit; font-weight: 700; font-size: .94rem; text-decoration: none; cursor: pointer; transition: background var(--transisi), color var(--transisi), border-color var(--transisi); } .tombol--utama { background: var(--utama); color: var(--utama-teks); } .tombol--utama:hover { background: var(--utama-lembut); color: var(--utama-teks); } .tombol--kuning { background: var(--aksen); color: var(--aksen-teks); } .tombol--kuning:hover { background: var(--kuning-400); color: var(--aksen-teks); } .tombol--garis { background: transparent; border-color: var(--garis-kuat); color: var(--teks); } .tombol--garis:hover { background: var(--latar-lembut); color: var(--teks); } .tombol--bahaya { background: transparent; border-color: var(--bahaya); color: var(--bahaya); } .tombol--bahaya:hover { background: var(--bahaya-latar); color: var(--bahaya); } .tombol--kecil { padding: 7px 13px; font-size: .85rem; } .tombol[disabled] { opacity: .55; cursor: not-allowed; } .lencana { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .01em; background: var(--latar-lembut); color: var(--teks-lembut); text-transform: none; } /* Penanda data contoh harus mencolok: pengunjung tidak boleh mengiranya fakta. */ .lencana--contoh { background: var(--peringatan-latar); color: var(--peringatan); border: 1px dashed var(--peringatan); align-self: flex-start; } .lencana--angka { background: var(--aksen); color: var(--aksen-teks); min-width: 22px; justify-content: center; } .lencana--peran { background: var(--info-latar); color: var(--info); } .lencana--draf { background: var(--peringatan-latar); color: var(--peringatan); } .lencana--terbit { background: var(--sukses-latar); color: var(--sukses); } .beritahu { display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--garis); border-left-width: 5px; border-radius: var(--radius-kecil); padding: 13px 16px; margin-block: 16px; background: var(--latar-kartu); } .beritahu__isi { flex: 1 1 auto; } .beritahu__isi ul { margin: 6px 0 0; padding-left: 20px; } .beritahu__tutup { appearance: none; background: transparent; border: 0; cursor: pointer; font-size: 1.3rem; line-height: 1; color: inherit; opacity: .65; padding: 0 4px; } .beritahu__tutup:hover { opacity: 1; } .beritahu--sukses { background: var(--sukses-latar); border-color: var(--sukses); color: var(--sukses); } .beritahu--bahaya { background: var(--bahaya-latar); border-color: var(--bahaya); color: var(--bahaya); } .beritahu--peringatan { background: var(--peringatan-latar); border-color: var(--peringatan); color: var(--peringatan); } .beritahu--info { background: var(--info-latar); border-color: var(--info); color: var(--info); } .kotak-galat { background: var(--bahaya-latar); border: 1px solid var(--bahaya); border-left-width: 5px; border-radius: var(--radius-kecil); color: var(--bahaya); padding: 14px 18px; margin-block: 16px; } .kotak-galat__judul { font-weight: 700; margin: 0 0 6px; } .kotak-galat ul { margin: 0; padding-left: 20px; } /* Keadaan "belum ada data" — dipakai di seluruh situs. */ .kosong { text-align: center; padding: clamp(28px, 5vw, 52px) 20px; border: 1px dashed var(--garis-kuat); border-radius: var(--radius); background: var(--latar-kartu); color: var(--teks-lembut); } .kosong--besar { padding-block: clamp(40px, 8vw, 80px); } .kosong__ikon { display: block; font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); font-weight: 800; color: var(--garis-kuat); line-height: 1; margin-bottom: 12px; } .kosong__pesan { margin: 0 0 6px; font-weight: 600; color: var(--teks); font-size: 1.05rem; } .kosong__petunjuk { margin: 0 auto; max-width: 56ch; font-size: .92rem; } .kosong__aksi { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 20px 0 0; } .ke-atas { position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; background: var(--utama); color: var(--utama-teks); box-shadow: var(--bayang-2); font-size: 1.2rem; } .ke-atas:hover { background: var(--utama-lembut); } /* ================================================================== * 10. FORM & TABEL * ================================================================== */ .medan { margin-bottom: 16px; } .medan__label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; } .medan__label .wajib { color: var(--bahaya); } .kendali { width: 100%; padding: 11px 13px; border: 1px solid var(--garis-kuat); border-radius: var(--radius-kecil); background: var(--latar-kartu); color: var(--teks); font: inherit; font-size: .95rem; } .kendali:focus { border-color: var(--utama); } textarea.kendali { min-height: 160px; resize: vertical; } select.kendali { cursor: pointer; } .kendali[aria-invalid="true"], .kendali.galat { border-color: var(--bahaya); } .bantuan { display: block; margin-top: 5px; font-size: .82rem; color: var(--teks-lembut); } .galat-medan { display: block; margin-top: 5px; font-size: .84rem; color: var(--bahaya); font-weight: 600; } .medan-petak { display: grid; gap: 0 18px; grid-template-columns: 1fr; } @media (min-width: 720px) { .medan-petak--2 { grid-template-columns: 1fr 1fr; } } .form-sebaris { display: inline; } .form-aksi { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--garis); } /* Honeypot form kontak: harus tak terlihat, tapi tetap ada di DOM. */ .jebakan { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .cari-besar { max-width: 520px; margin: 24px auto 0; } .cari-besar label { display: block; font-weight: 600; margin-bottom: 8px; text-align: center; } .cari-besar__baris { display: flex; gap: 8px; } .cari-besar__baris input { flex: 1 1 auto; min-width: 0; padding: 11px 14px; border: 1px solid var(--garis-kuat); border-radius: var(--radius-kecil); background: var(--latar-kartu); color: var(--teks); font: inherit; } /* Tabel selalu bisa digulir mendatar di dalam wadahnya sendiri, supaya badan halaman tidak pernah ikut bergeser. */ .tabel-gulir { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--garis); border-radius: var(--radius); background: var(--latar-kartu); } .tabel { width: 100%; border-collapse: collapse; font-size: .92rem; } .tabel th, .tabel td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--garis); vertical-align: middle; } .tabel th { background: var(--latar-lembut); font-weight: 700; font-size: .84rem; text-transform: uppercase; letter-spacing: .03em; color: var(--teks-lembut); white-space: nowrap; } .tabel tbody tr:last-child td { border-bottom: 0; } .tabel tbody tr:hover { background: var(--latar-lembut); } .tabel__aksi { display: flex; gap: 6px; flex-wrap: wrap; white-space: nowrap; } .tabel__gambar { width: 64px; height: 44px; object-fit: cover; border-radius: 6px; background: var(--latar-lembut); } /* ================================================================== * 11. PROSA (isi halaman & berita, hasil PembersihHtml) * ================================================================== */ .prosa { font-size: 1.02rem; line-height: 1.75; max-width: 72ch; } .prosa > *:first-child { margin-top: 0; } .prosa h2 { margin-top: 1.6em; } .prosa h3 { margin-top: 1.4em; } .prosa ul, .prosa ol { padding-left: 22px; } .prosa li + li { margin-top: .3em; } .prosa img { border-radius: var(--radius-kecil); margin-block: 1em; } .prosa figure { margin: 1.4em 0; } .prosa figcaption { font-size: .85rem; color: var(--teks-lembut); text-align: center; margin-top: 6px; } .prosa blockquote { margin: 1.4em 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--aksen); color: var(--teks-lembut); font-style: italic; } .prosa table { width: 100%; border-collapse: collapse; margin-block: 1.2em; font-size: .94rem; } .prosa th, .prosa td { border: 1px solid var(--garis); padding: 9px 12px; } .prosa th { background: var(--latar-lembut); } .prosa pre { overflow-x: auto; padding: 14px; background: var(--latar-lembut); border-radius: var(--radius-kecil); } .prosa code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; } /* Daftar keterangan dua kolom (identitas sekolah, detail prestasi, dll). */ .rincian { margin: 0; display: grid; grid-template-columns: 1fr; gap: 0; } .rincian dt { font-weight: 700; font-size: .85rem; color: var(--teks-lembut); padding-top: 10px; } .rincian dd { margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--garis); } @media (min-width: 640px) { .rincian { grid-template-columns: 220px 1fr; column-gap: 18px; } .rincian dt { border-bottom: 1px solid var(--garis); padding-bottom: 10px; margin-bottom: 0; } .rincian dd { margin-bottom: 0; } } /* Panel putih serbaguna (dipakai publik maupun admin). */ .panel { background: var(--latar-kartu); border: 1px solid var(--garis); border-radius: var(--radius); box-shadow: var(--bayang-1); padding: clamp(16px, 3vw, 26px); } .panel + .panel { margin-top: var(--sela); } .panel__kepala { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--garis); } .panel__kepala h2, .panel__kepala h3 { margin: 0; } /* ================================================================== * 12. FOOTER * ================================================================== */ .footer { background: var(--biru-800); color: rgba(255, 255, 255, .82); margin-top: auto; font-size: .93rem; } .footer__petak { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); padding-block: clamp(28px, 5vw, 48px); } .footer__judul { color: #fff; font-size: 1rem; margin: 0 0 12px; } .footer__judul::after { content: ""; display: block; width: 40px; height: 3px; background: var(--aksen); border-radius: 2px; margin-top: 8px; } .footer a { color: rgba(255, 255, 255, .9); text-decoration: none; } .footer a:hover { color: var(--kuning-400); text-decoration: underline; } .footer__alamat { font-style: normal; margin: 0 0 12px; } .footer__daftar, .footer__fakta, .footer__sosial { list-style: none; margin: 0; padding: 0; } .footer__daftar li, .footer__fakta li { padding-block: 4px; } .footer__sosial { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .footer__sosial a { display: inline-block; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; padding: 5px 14px; font-size: .85rem; } .footer__catatan { font-size: .86rem; color: rgba(255, 255, 255, .7); } .footer__bawah { background: rgba(0, 0, 0, .28); font-size: .85rem; } .footer__bawah-isi { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; padding-block: 12px; } .footer__bawah-isi p { margin: 0; } /* ================================================================== * 13. PANEL ADMIN * ================================================================== */ .badan-admin { background: var(--latar); } .admin { display: grid; grid-template-columns: 1fr; min-height: 100vh; width: 100%; } .admin__isi { display: flex; flex-direction: column; min-width: 0; } .admin__utama { flex: 1 0 auto; padding: clamp(16px, 3vw, 28px); } .admin__pita { padding: 0 clamp(16px, 3vw, 28px); } .admin__kaki { padding: 14px clamp(16px, 3vw, 28px) 22px; font-size: .85rem; color: var(--teks-lembut); border-top: 1px solid var(--garis); } .admin__kaki p { margin: 0; } .admin__tirai { position: fixed; inset: 0; background: rgba(8, 13, 26, .55); z-index: 55; border: 0; } .sisi { background: var(--biru-800); color: rgba(255, 255, 255, .82); width: 268px; display: flex; flex-direction: column; gap: 10px; padding: 18px 14px; position: fixed; inset: 0 auto 0 0; z-index: 60; overflow-y: auto; transform: translateX(-100%); transition: transform var(--transisi); } .sisi.buka { transform: none; } .sisi__merek { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .14); } .sisi__inisial { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--aksen); color: var(--biru-900); font-weight: 800; } .sisi__merek-teks { display: flex; flex-direction: column; line-height: 1.25; color: #fff; } .sisi__merek-teks small { color: rgba(255, 255, 255, .7); font-size: .78rem; } .sisi__nav { flex: 1 1 auto; } .sisi__judul { margin: 16px 0 6px; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .5); } .sisi__daftar { list-style: none; margin: 0; padding: 0; } .sisi__tautan { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-radius: var(--radius-kecil); color: rgba(255, 255, 255, .85); text-decoration: none; font-size: .92rem; font-weight: 600; } .sisi__tautan:hover { background: rgba(255, 255, 255, .1); color: #fff; } .sisi__tautan.aktif { background: var(--aksen); color: var(--biru-900); } .sisi__kaki { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 12px; } .bilah { display: flex; align-items: center; gap: 12px; padding: 12px clamp(16px, 3vw, 28px); background: var(--latar-kartu); border-bottom: 1px solid var(--garis); position: sticky; top: 0; z-index: 40; } .bilah__tombol-sisi { appearance: none; background: transparent; border: 1px solid var(--garis-kuat); border-radius: var(--radius-kecil); width: 42px; height: 40px; display: grid; place-items: center; cursor: pointer; flex: none; } .bilah__tombol-sisi .tombol-menu__garis, .bilah__tombol-sisi .tombol-menu__garis::before, .bilah__tombol-sisi .tombol-menu__garis::after { background: var(--teks); } .bilah__judul { flex: 1 1 auto; min-width: 0; } .bilah__judul h1 { margin: 0; font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bilah__akun { display: flex; align-items: center; gap: 8px; flex: none; } .bilah__pengguna { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--teks); font-size: .9rem; font-weight: 600; } .bilah__nama { display: none; } .bilah__keluar { margin: 0; } /* Tombol tema di panel admin memakai warna terang, bukan warna navbar biru. */ .bilah .tombol-tema { border-color: var(--garis-kuat); background: transparent; color: var(--teks); } .bilah .tombol-tema:hover { background: var(--latar-lembut); } /* Kartu ringkasan di dasbor. */ .ringkas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); margin-bottom: var(--sela); } .ringkas__butir { background: var(--latar-kartu); border: 1px solid var(--garis); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--bayang-1); } .ringkas__angka { display: block; font-size: 1.7rem; font-weight: 800; color: var(--utama); line-height: 1.2; } .ringkas__label { font-size: .85rem; color: var(--teks-lembut); } /* Bilah pencarian/penyaring di atas daftar admin. */ .bilah-daftar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 16px; } .bilah-daftar form { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; } .bilah-daftar input, .bilah-daftar select { padding: 9px 12px; border: 1px solid var(--garis-kuat); border-radius: var(--radius-kecil); background: var(--latar-kartu); color: var(--teks); font: inherit; font-size: .9rem; } @media (min-width: 640px) { .bilah__nama { display: inline; } } @media (min-width: 1024px) { .admin { grid-template-columns: 268px 1fr; } .sisi { position: sticky; top: 0; height: 100vh; transform: none; inset: auto; } .bilah__tombol-sisi, .admin__tirai { display: none; } } /* Halaman masuk berdiri sendiri, tanpa bilah samping. */ .masuk { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(800px 320px at 80% 0%, rgba(240, 178, 30, .22), transparent 60%), linear-gradient(160deg, var(--biru-800), var(--biru-700)); } .masuk__kotak { width: 100%; max-width: 420px; background: var(--latar-kartu); border-radius: var(--radius); box-shadow: var(--bayang-2); padding: clamp(22px, 4vw, 34px); } .masuk__judul { margin-top: 0; text-align: center; } .masuk__catatan { margin-top: 18px; font-size: .85rem; color: var(--teks-lembut); text-align: center; } /* ================================================================== * 14. CETAK & GERAK MINIMAL * ================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } .kartu:hover { transform: none; } } @media print { .kepala, .footer, .ke-atas, .sisi, .bilah, .paginasi, .cari-kecil, .tombol-tema, .lewati { display: none !important; } body { background: #fff; color: #000; font-size: 12pt; } .kartu, .panel, .tabel-gulir { border-color: #999; box-shadow: none; break-inside: avoid; } a { color: #000; text-decoration: underline; } .kepala-halaman, .hero { background: none !important; color: #000; padding-block: 0; } .kepala-halaman__judul, .hero__judul { color: #000; } }