@import url('fonts.css'); /* ============================================================ PA LAHAT — Design System "Justice & Authority" Sumber token: DESIGN.md (Badilag). Mode terang saja. ============================================================ */ :root { /* --- Warna inti --- */ --primary: #004a23; --primary-container: #006432; --on-primary: #ffffff; --primary-fixed: #a0f5b4; --primary-fixed-dim: #85d99a; --legal-green-dark: #004d26; --secondary: #785900; --secondary-container: #fdc003; --on-secondary-container: #6c5000; --gold: #ffc107; --tertiary: #712331; --error: #ba1a1a; --error-container: #ffdad6; --on-error-container: #93000a; /* --- Permukaan --- */ --surface: #f7f9ff; --surface-white: #ffffff; --surface-subtle: #f8f9fa; --surface-container-low: #f1f4f9; --surface-container: #ebeef3; --surface-container-high: #e5e8ee; --surface-variant: #e0e3e8; --on-surface: #181c20; --on-surface-variant: #3f4940; --inverse-surface: #2d3135; --inverse-on-surface: #eef1f6; --outline: #6f7a6f; --outline-variant: #bfc9bd; --border-input: #dee2e6; /* --- Tipografi --- */ --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* --- Ruang (baseline 4px) --- */ --unit: 4px; --container-max: 1200px; --gutter: 24px; --margin-desktop: 48px; --margin-mobile: 16px; --stack-sm: 8px; --stack-md: 16px; --stack-lg: 32px; /* --- Bentuk --- */ --r-sm: 0.125rem; --r: 0.25rem; --r-md: 0.375rem; --r-lg: 0.5rem; --r-xl: 0.75rem; --r-full: 9999px; /* --- Bayangan: ambient, sangat lembut --- */ --shadow-sm: 0 1px 2px rgba(24, 28, 32, .04); --shadow: 0 2px 8px rgba(24, 28, 32, .06); --shadow-lg: 0 8px 24px rgba(24, 28, 32, .08); --header-h: 72px; } /* ============================================================ Reset & dasar ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 24px; color: var(--on-surface); background: var(--surface); display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; } img, svg, video { max-width: 100%; height: auto; } img { border-radius: var(--r); } a { color: var(--primary-container); text-decoration: none; } a:hover { color: var(--primary); text-decoration: underline; } :focus-visible { outline: 2px solid var(--primary-container); outline-offset: 2px; border-radius: var(--r-sm); } hr { border: 0; border-top: 1px solid var(--outline-variant); margin: var(--stack-lg) 0; } /* ============================================================ Tipografi ============================================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--on-surface); margin: 0 0 var(--stack-md); } h1 { font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -.01em; } h2 { font-size: 24px; line-height: 32px; font-weight: 700; } h3 { font-size: 20px; line-height: 28px; font-weight: 600; } h4 { font-size: 18px; line-height: 26px; font-weight: 600; } h5, h6 { font-size: 16px; line-height: 24px; font-weight: 600; } p { margin: 0 0 var(--stack-md); } .display-lg { font-family: var(--font-display); font-size: 48px; line-height: 56px; font-weight: 700; letter-spacing: -.02em; } .label-lg { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: .01em; } .label-sm { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; } .body-sm { font-size: 14px; line-height: 20px; } .muted { color: var(--on-surface-variant); } /* ============================================================ Tata letak ============================================================ */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--margin-mobile); } .site-main { flex: 1 0 auto; width: 100%; } .section { padding-block: var(--stack-lg); } .stack > * + * { margin-top: var(--stack-md); } .grid { display: grid; gap: var(--gutter); } .grid > * { min-width: 0; } /* wajib: tanpa ini konten lebar memaksa kolom melar */ .grid-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: 1fr; } .grid-sidebar { grid-template-columns: 1fr; } .grid-5 { grid-template-columns: 1fr; } .grid-news { grid-template-columns: 1fr; } /* Pita latar bergantian, seperti Badilag */ .band { width: 100%; } .band--subtle { background: var(--surface-subtle); } .content-column, .sidebar { min-width: 0; } /* Konten warisan (salin-tempel dari Facebook/Word) tidak boleh merusak tata letak */ .content-column :is(div, span, p, h1, h2, h3, table) { max-width: 100%; } .content-column * { overflow-wrap: break-word; } /* ============================================================ Topbar ============================================================ */ .topbar { background: var(--primary); color: var(--on-primary); font-size: 13px; line-height: 20px; } .topbar .container { display: flex; flex-wrap: wrap; gap: var(--stack-md); align-items: center; justify-content: space-between; padding-block: 6px; } .topbar a { color: var(--on-primary); opacity: .92; } .topbar a:hover { opacity: 1; color: var(--secondary-container); text-decoration: none; } /* Modul membungkus isinya dalam
, jadi flex harus diterapkan ke pembungkus itu juga */ .topbar__contact, .topbar__social { display: flex; flex-wrap: wrap; align-items: center; } /* Sasarannya kelas modul (.mod-custom), bukan `> div`. Lihat catatan di bagian navigasi: Joomla bisa menyisipkan pembungkus
di sekitar modul, dan `> div` akan mengenai pembungkus itu, bukan isi modulnya. */ .topbar__contact .mod-custom { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; } .topbar__social .mod-custom { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .topbar__kanan { display: flex; align-items: center; gap: 2px; } .topbar__item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .topbar__item svg { width: 14px; height: 14px; flex: none; opacity: .8; } /* Ikon media sosial — kotak sentuh 30px, tanpa teks */ .topbar .sosmed { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--r); color: var(--on-primary); opacity: .85; transition: background-color .15s, opacity .15s, color .15s; } .topbar .sosmed svg { width: 16px; height: 16px; } .topbar .sosmed:hover { background: rgba(255,255,255,.14); opacity: 1; color: var(--secondary-container); text-decoration: none; } /* ============================================================ Header & navigasi ============================================================ */ .site-header { background: var(--surface-white); border-bottom: 1px solid var(--outline-variant); position: sticky; top: 0; z-index: 100; } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--stack-md); min-height: var(--header-h); } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; } .brand:hover { text-decoration: none; } /* Logo TIDAK dibulatkan: lambang PA Lahat berbentuk oval dengan latar transparan, bukan foto. Memasang border-radius bulat memotong ujung atas dan bawah ovalnya. `border-radius: 0` juga membatalkan aturan global `img { border-radius: var(--r) }` di bagian dasar berkas ini. `object-fit: contain` menjaga proporsi. */ .brand img { width: auto; height: 52px; object-fit: contain; border-radius: 0; flex: none; } .brand__text { display: flex; flex-direction: column; justify-content: center; } /* * Kunci identitas dua baris: baris instansi induk berperan sebagai * "kop" — kecil tapi berjarak huruf lebar, sehingga panjangnya mendekati * baris nama satker di bawahnya dan blok terbaca sebagai satu kesatuan. * (Saat masih tiga baris, ukurannya 9.5px dan terlihat seperti sisa teks.) */ .brand__sub { font-size: 10.5px; line-height: 14px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--on-surface-variant); white-space: nowrap; } /* * Baris nama satker: paling tebal dan besar. * Ukurannya DIBATASI kebutuhan lebar header, bukan selera semata — * setiap 2px di sini menggeser ±30px lebar blok identitas, dan begitu * blok + menu + padding melewati ambang menu mendatar, halaman meluap * ke samping. Kalau diubah, ukur ulang dan sesuaikan ambang 1220px. */ .brand__name { font-family: var(--font-display); font-size: 14px; line-height: 19px; font-weight: 800; color: var(--primary); letter-spacing: -.005em; white-space: nowrap; margin-top: 1px; } @media (max-width: 767.98px) { .brand { gap: 10px; } .brand img { width: auto; height: 46px; } .brand__sub { font-size: 9px; line-height: 12px; letter-spacing: .1em; } .brand__name { font-size: 13px; line-height: 18px; } } @media (max-width: 400px) { .brand img { width: auto; height: 40px; } .brand__sub { font-size: 8px; letter-spacing: .07em; } .brand__name { font-size: 11.5px; line-height: 16px; } } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 1px solid var(--outline-variant); border-radius: var(--r); color: var(--primary); cursor: pointer; } .nav-toggle svg { width: 22px; height: 22px; } .site-nav { display: none; } .site-nav.is-open { display: block; } /* Navigasi disandarkan pada KELAS bawaan mod_menu (`mod-menu` untuk daftar utama, `mod-menu__sub` untuk submenu — keduanya di-hardcode di modules/mod_menu/tmpl/default.php), BUKAN pada posisi anak langsung. Alasannya: Joomla menyisipkan pembungkus
di sekitar modul pada beberapa keadaan — pratinjau posisi (?tp=1) yang paling kentara — sehingga pemilih semacam `.site-nav > ul` berhenti cocok dan menu ambruk jadi daftar vertikal dengan semua submenu terbuka. */ .site-nav ul { list-style: none; margin: 0; padding: 0; } .site-nav .mod-menu > li > a, .site-nav .mod-menu > li > span { display: block; padding: 10px 8px; font-size: 13.5px; line-height: 20px; font-weight: 600; color: var(--on-surface); cursor: pointer; border-radius: var(--r); white-space: nowrap; } .site-nav .mod-menu > li > a:hover, .site-nav .mod-menu > li > span:hover { color: var(--primary-container); background: var(--surface-container-low); text-decoration: none; } .site-nav .mod-menu > li.active > a { color: var(--primary-container); } .site-nav .mod-menu__sub { background: var(--surface-white); border: 1px solid var(--outline-variant); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: var(--stack-sm); min-width: 260px; } .site-nav .mod-menu__sub a, .site-nav .mod-menu__sub span { display: block; padding: 9px 12px; font-size: 14px; line-height: 20px; color: var(--on-surface-variant); border-radius: var(--r); } .site-nav .mod-menu__sub a:hover { background: var(--surface-container-low); color: var(--primary-container); text-decoration: none; } .site-nav .mod-menu__sub span { font-weight: 600; color: var(--on-surface); } /* Tombol pencarian di topbar */ .nav-search { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: var(--r); color: var(--on-primary); background: none; border: 0; cursor: pointer; opacity: .85; transition: background-color .15s, opacity .15s, color .15s; } .nav-search svg { width: 16px; height: 16px; } .nav-search:hover { background: rgba(255,255,255,.14); opacity: 1; color: var(--secondary-container); } .nav-search[aria-expanded="true"] { background: rgba(255,255,255,.2); opacity: 1; } /* ---- Panel pencarian: tersembunyi sampai ikon ditekan ---- z-index harus DI ATAS .site-header (100), kalau tidak daftar saran otomatis tertimbun header yang sticky. */ .header-search { position: relative; z-index: 130; border-top: 1px solid var(--outline-variant); background: var(--surface-container-low); padding-block: var(--stack-sm); } .header-search[hidden] { display: none; } .header-search form { display: flex; align-items: center; gap: 8px; margin: 0; } .header-search .mod-finder__search { display: flex; align-items: center; gap: 8px; width: 100%; } .header-search input[type=text], .header-search input[type=search], .header-search .js-finder-search-query { width: 100%; min-width: 0; padding: 7px 12px; font-size: 13px; line-height: 20px; border: 1px solid var(--border-input); border-radius: var(--r-full); background: var(--surface-container-low); } .header-search input:focus { background: var(--surface-white); } .header-search button, .header-search .btn { flex: none; padding: 7px 12px; font-size: 13px; line-height: 20px; border: 0; border-radius: var(--r-full); background: var(--primary-container); color: #fff; cursor: pointer; } .header-search button:hover { background: var(--primary); } .header-search label { display: none; } /* ---- Daftar saran otomatis (Awesomplete) ---- Bawaannya berlatar transparan dan z-index 1, sehingga teksnya tertimpa konten di belakangnya. Perlu latar padat + z-index tinggi. */ .header-search .awesomplete { width: 100%; min-width: 0; position: relative; } .header-search .awesomplete > ul { z-index: 140; background: var(--surface-white); border: 1px solid var(--outline-variant); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); font-size: 14px; line-height: 21px; padding: 6px; margin-top: 4px; max-height: 60vh; overflow-y: auto; list-style: none; } .header-search .awesomplete > ul::before { display: none; } .header-search .awesomplete > ul > li { padding: 8px 12px; border-radius: var(--r); color: var(--on-surface); background: transparent; cursor: pointer; } .header-search .awesomplete > ul > li:hover, .header-search .awesomplete > ul > li[aria-selected="true"] { background: var(--surface-container); color: var(--primary-container); } .header-search .awesomplete mark { background: transparent; color: var(--primary-container); font-weight: 700; padding: 0; } .header-search .awesomplete > ul > li:hover mark, .header-search .awesomplete > ul > li[aria-selected="true"] mark { color: inherit; } /* ============================================================ Tombol ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 20px; border-radius: var(--r); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background-color .15s, color .15s, border-color .15s; } .btn:hover { text-decoration: none; } .btn-primary { background: var(--primary-container); color: #fff; } .btn-primary:hover { background: var(--primary); color: #fff; } .btn-outline { background: transparent; color: var(--primary-container); border-color: var(--primary-container); } .btn-outline:hover { background: var(--primary-container); color: #fff; } .btn-gold { background: var(--gold); color: var(--on-secondary-container); } .btn-gold:hover { background: var(--secondary-container); color: var(--on-secondary-container); } .btn-sm { padding: 6px 14px; font-size: 13px; } /* ============================================================ Hero ============================================================ */ .hero { position: relative; min-height: 340px; background: var(--primary); color: #fff; display: flex; align-items: center; overflow: hidden; } .hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,74,35,.92) 0%, rgba(0,74,35,.72) 55%, rgba(0,74,35,.35) 100%); } .hero > .container { position: relative; z-index: 2; padding-block: var(--stack-lg); } .hero__badge { display: inline-block; background: var(--gold); color: var(--on-secondary-container); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 5px 14px; border-radius: var(--r-full); margin-bottom: var(--stack-md); } .hero h1, .hero h2 { color: #fff; font-size: 30px; line-height: 38px; max-width: 42ch; } .hero p { color: rgba(255,255,255,.9); max-width: 60ch; font-size: 17px; line-height: 27px; } .hero__media { position: absolute; inset: 0; z-index: 1; } .hero__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; } /* ------------------------------------------------------------ Hero berupa slide gambar (pengganti mod_sp_smart_slider lama). Modulnya cukup berisi daftar polos; template.js yang menyusunnya jadi slider. Jadi petugas bisa menambah/menghapus slide lewat editor biasa tanpa menyentuh markup slider. Teks pada banner PA Lahat sudah menyatu di gambar, jadi tidak ada lapisan teks di atasnya — gambar ditampilkan apa adanya. ------------------------------------------------------------ */ .hero-slider { position: relative; background: var(--surface); /* * 68px = 40px yang "dimakan" .quicklinks (margin-top: -40px) + 28px strip * untuk titik penanda. * * Kontrol TIDAK boleh ditaruh di atas gambar: banner PA Lahat memuat * informasi sampai ke tepi bawah (alamat situs, nomor telepon, akun * media sosial), dan titik penanda sempat menutupinya. */ padding-bottom: 68px; } /* Tanpa JS: tampilkan slide pertama saja, sisanya disembunyikan supaya halaman tidak jadi tumpukan lima banner. */ .hero-slider:not(.is-siap) > img:not(:first-of-type) { display: none; } .hero-slider:not(.is-siap) > img { width: 100%; height: auto; display: block; } .hero-slider__jendela { overflow: hidden; } .hero-slider__track { display: flex; transition: transform .5s cubic-bezier(.4, 0, .2, 1); will-change: transform; } .hero-slider__slide { flex: 0 0 100%; min-width: 0; } .hero-slider__slide img { display: block; width: 100%; /* Semua banner berasio ~3.55:1. Rasio dikunci supaya tinggi blok tidak melonjak saat gambar berganti atau saat masih dimuat. */ aspect-ratio: 1920 / 540; object-fit: cover; border-radius: 0; margin: 0; } /* --- tombol maju/mundur --- */ .hero-slider__nav { position: absolute; /* dipusatkan pada GAMBAR, bukan pada blok slider yang punya strip bawah */ top: calc((100% - 68px) / 2); transform: translateY(-50%); z-index: 3; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: var(--r-full); background: rgba(0, 0, 0, .38); color: #fff; cursor: pointer; transition: background .15s, opacity .15s; opacity: 0; } .hero-slider__nav svg { width: 22px; height: 22px; } .hero-slider__nav--prev { left: 14px; } .hero-slider__nav--next { right: 14px; } .hero-slider__nav:hover { background: rgba(0, 0, 0, .62); } .hero-slider:hover .hero-slider__nav, .hero-slider:focus-within .hero-slider__nav { opacity: 1; } .hero-slider__nav:focus-visible { opacity: 1; outline: 3px solid var(--gold); outline-offset: 2px; } /* --- titik penanda + tombol jeda --- */ /* Strip kontrol di BAWAH gambar, di dalam ruang 28px yang disediakan padding-bottom. Warnanya dibuat untuk latar terang, bukan untuk di atas foto. */ .hero-slider__bar { position: absolute; left: 0; right: 0; bottom: 42px; height: 26px; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 8px; } .hero-slider__titik { width: 9px; height: 9px; padding: 0; border: 0; border-radius: var(--r-full); background: var(--outline-variant); cursor: pointer; transition: background .15s, width .15s; } .hero-slider__titik:hover { background: var(--on-surface-variant); } .hero-slider__titik[aria-selected="true"] { background: var(--primary-container); width: 26px; } .hero-slider__titik:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; } .hero-slider__jeda { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 6px; padding: 0; border: 0; border-radius: var(--r-full); background: transparent; color: var(--on-surface-variant); cursor: pointer; transition: background .15s, color .15s; } .hero-slider__jeda svg { width: 12px; height: 12px; } .hero-slider__jeda:hover { background: var(--surface-container-low); color: var(--primary-container); } .hero-slider__jeda:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } @media (max-width: 767.98px) { .hero-slider__nav { opacity: 1; width: 36px; height: 36px; } .hero-slider__nav svg { width: 18px; height: 18px; } .hero-slider__nav--prev { left: 8px; } .hero-slider__nav--next { right: 8px; } } /* Hormati setelan "kurangi animasi" pada sistem pengunjung: perpindahan langsung, dan putar-otomatis dimatikan di template.js. */ @media (prefers-reduced-motion: reduce) { .hero-slider__track { transition: none; } } /* ============================================================ Kartu layanan cepat ============================================================ */ .quicklinks { margin-top: -40px; position: relative; z-index: 20; } .quicklinks .grid { gap: var(--stack-md); } /* Kartu mendatar: ikon di kiri, teks di kanan — pola Badilag */ .qcard { background: var(--surface-white); border: 1px solid var(--outline-variant); border-radius: var(--r-lg); padding: 16px; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s, border-color .15s; display: flex; align-items: flex-start; gap: 12px; color: inherit; } .qcard:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--primary-fixed-dim); text-decoration: none; } .qcard__icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; background: var(--primary-fixed); color: var(--primary); border-radius: var(--r-md); } .qcard__icon svg { width: 21px; height: 21px; } .qcard__text { min-width: 0; } .qcard h3 { font-size: 14px; line-height: 19px; margin: 0 0 5px; color: var(--primary-container); text-transform: uppercase; letter-spacing: .02em; padding-bottom: 5px; border-bottom: 1px solid var(--outline-variant); } .qcard p { font-size: 12px; line-height: 18px; color: var(--on-surface-variant); margin: 0; } /* ============================================================ Blok sorotan: 1 artikel besar + daftar samping ============================================================ */ .sorotan { display: grid; gap: var(--gutter); grid-template-columns: 1fr; align-items: start; } .sorotan > * { min-width: 0; } .sorotan__utama { background: var(--surface-white); border: 1px solid var(--outline-variant); border-radius: var(--r-lg); overflow: hidden; } .sorotan__media { display: block; } .sorotan__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: 0; margin: 0; } .sorotan__isi { padding: var(--stack-md); } .sorotan__isi .badge { margin-bottom: var(--stack-sm); } .sorotan__judul { font-size: 20px; line-height: 28px; margin: 0 0 6px; } .sorotan__judul a { color: var(--on-surface); } .sorotan__judul a:hover { color: var(--primary-container); text-decoration: none; } .sorotan__tanggal { font-size: 12px; font-weight: 600; color: var(--secondary); margin: 0 0 var(--stack-sm); display: block; } .sorotan__ringkas { font-size: 14px; line-height: 22px; color: var(--on-surface-variant); } .sorotan__ringkas p { margin: 0 0 var(--stack-sm); } .sorotan__ringkas :is(img, figure, table, iframe, h1, h2, h3, h4) { display: none; } .sorotan__daftar { list-style: none; margin: 0; padding: 0; } .sorotan__daftar li { padding: 12px 0; border-bottom: 1px solid var(--outline-variant); } .sorotan__daftar li:first-child { padding-top: 0; } .sorotan__daftar li:last-child { border-bottom: 0; } .sorotan__daftar a { font-size: 14px; line-height: 21px; font-weight: 600; color: var(--on-surface); display: block; } .sorotan__daftar a:hover { color: var(--primary-container); text-decoration: none; } /* ============================================================ Kartu menu — halaman muka bergaya Badilag. Dipakai di Akuntabilitas Kinerja, Layanan Hukum, Layanan Publik. Markup:
berisi ... ============================================================ */ .kartu-menu { display: grid; gap: var(--stack-md); grid-template-columns: 1fr; margin-block: var(--stack-lg); } .kartu-menu > * { min-width: 0; } .kartu { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 26px 18px; background: var(--surface-subtle); border: 1px solid transparent; border-radius: var(--r-lg); color: inherit; transition: background-color .15s, border-color .15s, transform .15s, box-shadow .15s; } .kartu:hover { background: var(--surface-white); border-color: var(--outline-variant); transform: translateY(-3px); box-shadow: var(--shadow); text-decoration: none; } .kartu__ikon { color: var(--primary-container); line-height: 0; } .kartu__ikon svg { width: 42px; height: 42px; } .kartu__judul { font-family: var(--font-display); font-size: 17px; line-height: 24px; font-weight: 700; color: var(--on-surface); margin: 0; } .kartu__ket { font-size: 13px; line-height: 19px; color: var(--on-surface-variant); margin: 0; max-width: 30ch; flex: 1 0 auto; /* dorong tombol ke bawah supaya sejajar antar kartu */ } .kartu__tombol { margin-top: 10px; display: inline-block; padding: 7px 16px; font-size: 13px; font-weight: 700; line-height: 18px; background: var(--secondary-container); color: var(--on-secondary-container); border-radius: var(--r); } /* Paragraf pembuka halaman muka */ .halaman-intro { font-size: 16px; line-height: 25px; color: var(--on-surface-variant); max-width: 70ch; margin-bottom: var(--stack-lg); } .kartu:hover .kartu__tombol { background: var(--gold); } @media (min-width: 576px) { .kartu-menu { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { .kartu-menu { grid-template-columns: repeat(4, 1fr); } } /* Varian 3 kolom untuk kartu berteks panjang */ @media (min-width: 992px) { .kartu-menu--3 { grid-template-columns: repeat(3, 1fr); } } /* ------------------------------------------------------------ Varian ringkas: enam kartu dalam satu baris. Keterangan dan tombol disembunyikan — pada lebar ~170px per kartu judulnya saja sudah cukup jelas, dan seluruh kartu tetap bisa diklik. ------------------------------------------------------------ */ .kartu-menu--ringkas { gap: 12px; margin-block: 0; } /* Latar putih + garis tepi supaya kartu tetap terbaca sebagai kartu di atas pita yang warnanya hampir sama. */ .kartu-menu--ringkas .kartu { padding: 16px 10px; gap: 8px; background: var(--surface-white); border-color: var(--outline-variant); box-shadow: var(--shadow-sm); } .kartu-menu--ringkas .kartu:hover { background: var(--surface-white); border-color: var(--primary-fixed-dim); } .kartu-menu--ringkas .kartu__ikon svg { width: 30px; height: 30px; } .kartu-menu--ringkas .kartu__judul { font-size: 13px; line-height: 18px; } .kartu-menu--ringkas .kartu__ket, .kartu-menu--ringkas .kartu__tombol { display: none; } @media (min-width: 576px) { .kartu-menu--ringkas { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 992px) { .kartu-menu--ringkas { grid-template-columns: repeat(6, 1fr); } } /* ============================================================ Galeri video — pemutar besar + daftar playlist di samping. Sampul disimpan lokal; iframe YouTube baru dimuat saat ditekan. ============================================================ */ .video-blok { display: grid; gap: var(--gutter); grid-template-columns: 1fr; align-items: start; } .video-blok > * { min-width: 0; } .video-panggung { position: relative; aspect-ratio: 16 / 9; background: var(--inverse-surface); border-radius: var(--r-lg); overflow: hidden; } .video-panggung iframe { width: 100%; height: 100%; border: 0; display: block; } .video-sampul { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; position: relative; } .video-sampul img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; margin: 0; } .video-sampul::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.45)); transition: background .15s; } .video-sampul:hover::after { background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.55)); } /* Tombol putar berbentuk segitiga dalam lingkaran, digambar dengan CSS */ .video-putar { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 66px; height: 66px; border-radius: var(--r-full); background: rgba(0, 74, 35, .88); border: 2px solid rgba(255,255,255,.85); z-index: 2; transition: transform .15s, background-color .15s; } .video-putar::before { content: ''; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #fff; } .video-sampul:hover .video-putar { transform: translate(-50%, -50%) scale(1.08); background: var(--primary-container); } .video-sampul:focus-visible .video-putar { outline: 3px solid var(--gold); outline-offset: 3px; } .video-aktif__judul { font-family: var(--font-display); font-size: 17px; line-height: 25px; font-weight: 700; margin: var(--stack-sm) 0 0; color: var(--on-surface); } /* Daftar playlist di samping */ .video-daftar { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; border: 1px solid var(--outline-variant); border-radius: var(--r-lg); background: var(--surface-white); } .video-daftar li + li { border-top: 1px solid var(--outline-variant); } .video-daftar li.is-aktif { background: var(--surface-container-low); } .video-daftar li.is-aktif button { color: var(--primary-container); } /* Daftar hanya berisi judul + tanggal, tanpa thumbnail — jadi lebih banyak judul terbaca tanpa menggulir. Sampul besar tetap ada di pemutar; berkasnya diambil dari atribut data-sampul oleh template.js. */ .video-daftar button { display: block; width: 100%; padding: 11px 12px; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; color: var(--on-surface); border-left: 3px solid transparent; } .video-daftar button:hover { background: var(--surface-container-low); color: var(--primary-container); } .video-daftar li.is-aktif button { border-left-color: var(--primary-container); } .video-daftar__judul { font-size: 13px; line-height: 18px; font-weight: 600; } .video-daftar__tgl { display: block; font-size: 11px; font-weight: 600; color: var(--secondary); margin-top: 3px; } @media (min-width: 900px) { .video-blok { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } /* Tinggi daftar dibatasi kira-kira setinggi pemutar (16:9) + judulnya, sisanya digulir — supaya kedua kolom seimbang, tidak menyisakan ruang kosong. */ .video-daftar { max-height: 460px; } } /* Bilah gulir daftar dibuat tipis dan senada */ .video-daftar { scrollbar-width: thin; scrollbar-color: var(--outline-variant) transparent; } .video-daftar::-webkit-scrollbar { width: 8px; } .video-daftar::-webkit-scrollbar-thumb { background: var(--outline-variant); border-radius: var(--r-full); } .video-daftar::-webkit-scrollbar-track { background: transparent; } /* Daftar tautan layanan (kolom kanan pita abu) */ .tautan-layanan { list-style: none; margin: 0; padding: 0; } .tautan-layanan li { border-bottom: 1px solid var(--outline-variant); } .tautan-layanan li:last-child { border-bottom: 0; } .tautan-layanan a { display: flex; align-items: center; gap: 10px; padding: 11px 0; font-size: 14px; line-height: 21px; font-weight: 600; color: var(--on-surface); } .tautan-layanan a::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--primary-fixed-dim); } .tautan-layanan a:hover { color: var(--primary-container); text-decoration: none; } .tautan-layanan a:hover::before { background: var(--gold); } /* Tautan "Lainnya →" di bawah seksi */ .mod-section__more { margin: var(--stack-md) 0 0; text-align: right; } .mod-section__more a { font-size: 13px; font-weight: 600; color: var(--primary-container); display: inline-flex; align-items: center; gap: 6px; } .mod-section__more a:hover { color: var(--primary); text-decoration: none; gap: 9px; } /* ============================================================ Kartu & daftar konten ============================================================ */ .card { background: var(--surface-white); border: 1px solid var(--outline-variant); border-radius: var(--r-lg); overflow: hidden; } .card__body { padding: var(--stack-md); } .card__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; display: block; } .section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--stack-md); border-bottom: 2px solid var(--primary-container); padding-bottom: var(--stack-sm); margin-bottom: var(--stack-md); } .section-head h2 { color: var(--primary-container); margin: 0; font-size: 22px; line-height: 30px; } .newslist { list-style: none; margin: 0; padding: 0; } .newslist li { padding: 12px 0; border-bottom: 1px solid var(--outline-variant); } .newslist li:last-child { border-bottom: 0; } .newslist a { font-weight: 600; color: var(--on-surface); font-size: 15px; line-height: 22px; display: block; } .newslist a:hover { color: var(--primary-container); text-decoration: none; } .newslist time { display: block; font-size: 12px; color: var(--secondary); font-weight: 600; margin-bottom: 4px; } .badge { display: inline-block; padding: 3px 10px; border-radius: var(--r-full); font-size: 12px; font-weight: 600; line-height: 16px; background: var(--primary-fixed); color: var(--primary); } .badge-gold { background: #fff3cd; color: var(--on-secondary-container); } /* ============================================================ Modul daftar artikel (mod_articles) ============================================================ */ .mod-section { margin-bottom: var(--stack-lg); } .mod-articles-items { list-style: none; margin: 0; padding: 0; } .mod-articles-items > li { padding: 0; margin: 0; border: 0; } .mod-articles-items > li + li { margin-top: var(--stack-sm); } .mod-articles-item { background: var(--surface-white); border: 1px solid var(--outline-variant); border-left: 3px solid var(--primary-fixed-dim); border-radius: var(--r); padding: 12px 14px; transition: border-left-color .15s, box-shadow .15s; } .mod-articles-item:hover { border-left-color: var(--gold); box-shadow: var(--shadow); } .mod-articles-title { font-size: 15px; line-height: 22px; font-weight: 600; margin: 0; } .mod-articles-title a { color: var(--on-surface); } .mod-articles-title a:hover { color: var(--primary-container); text-decoration: none; } /* Baris info (tanggal dsb). Joomla bisa memakai dl.list-inline ATAU dl.list-unstyled tergantung parameter info_layout — keduanya harus ditangani, kalau tidak
kena indentasi bawaan peramban ~40px sehingga tanggal terlihat menjorok tidak rata. */ .mod-articles-item dl, .mod-articles-item .article-info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 6px 0 0; padding: 0; font-size: 12px; line-height: 18px; color: var(--secondary); font-weight: 600; } .mod-articles-item dl dd { margin: 0; padding: 0; margin-inline-start: 0; /* buang indentasi bawaan
*/ display: inline-flex; align-items: center; gap: 5px; } .mod-articles-item dl dd::after { content: ''; } /*
hanya berisi label untuk pembaca layar. Kalau dibiarkan sebagai item flex ia tetap memakan satu jarak gap, sehingga tanggal terlihat menjorok. Dikeluarkan dari alur, tetap terbaca pembaca layar. */ .mod-articles-item dl dt { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } /* Kelas font-ikon Joomla yang tidak dimuat template ini — jangan sisakan kotak kosong */ .mod-articles-item .icon-calendar, .mod-articles-item .icon-user, .mod-articles-item .icon-folder-open, .mod-articles-item .icon-eye, .mod-articles-item .icon-fw { display: none; } .mod-articles-item p { font-size: 14px; line-height: 21px; color: var(--on-surface-variant); margin: 8px 0 0; } /* Kartu berita bergambar */ .mod-articles-item .mod-articles-image, .mod-articles-item figure { margin: 0 0 10px; } .mod-articles-item img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--r); display: block; } .mod-articles-item .readmore, .mod-articles-item .btn-secondary { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 5px 12px; font-size: 12px; font-weight: 600; border: 1px solid var(--primary-container); border-radius: var(--r); color: var(--primary-container); background: transparent; text-decoration: none; } .mod-articles-item .readmore:hover { background: var(--primary-container); color: #fff; } /* Sembunyikan label "Rincian" yang hanya untuk pembaca layar */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================ Pita indeks pelayanan publik ============================================================ */ .indexband { background: var(--primary); color: #fff; } .indexband h2 { color: #fff; text-align: center; margin-bottom: var(--stack-sm); } .indexband__intro { text-align: center; color: rgba(255,255,255,.78); max-width: 62ch; margin: 0 auto var(--stack-lg); font-size: 15px; line-height: 23px; } .indexband .grid { gap: var(--stack-md); } .indexband__item { text-align: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-lg); padding: 22px 18px; } .indexband__icon { width: 44px; height: 44px; margin: 0 auto var(--stack-sm); display: grid; place-items: center; color: var(--gold); } .indexband__icon svg { width: 30px; height: 30px; } .indexband__label { font-size: 14px; font-weight: 600; line-height: 20px; margin: 0 0 6px; } .indexband__value { font-family: var(--font-display); font-size: 40px; line-height: 48px; font-weight: 700; color: var(--gold); } .indexband__chip { display: inline-block; margin-top: 8px; padding: 4px 14px; border-radius: var(--r-full); background: rgba(160,245,180,.15); border: 1px solid var(--primary-fixed-dim); color: var(--primary-fixed); font-size: 12px; font-weight: 600; } /* ============================================================ Artikel ============================================================ */ /* Judul halaman / artikel */ .page-header { margin-bottom: var(--stack-md); } .page-header h1, .page-header h2 { font-size: 28px; line-height: 38px; margin: 0; } /* Blok info artikel — dl bawaan Joomla dijadikan satu baris ringkas */ dl.article-info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin: 0 0 var(--stack-md); padding: 0 0 var(--stack-md); border-bottom: 1px solid var(--outline-variant); font-size: 13px; line-height: 20px; color: var(--on-surface-variant); } dl.article-info dt.article-info-term { position: absolute; width: 1px; height: 1px; overflow: hidden; margin: 0; padding: 0; clip: rect(0, 0, 0, 0); white-space: nowrap; } dl.article-info dd { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0; } dl.article-info dd.published time { color: var(--secondary); font-weight: 600; } dl.article-info a { color: var(--primary-container); font-weight: 600; } /* Ikon Joomla memakai font-ikon yang tidak dimuat template ini -> sembunyikan, kalau tidak muncul sebagai kotak kosong di sebelah tiap keterangan. */ dl.article-info [class^="icon-"], dl.article-info [class*=" icon-"] { display: none; } .article-header { margin-bottom: var(--stack-md); } .article-title { font-size: 28px; line-height: 36px; margin-bottom: var(--stack-sm); } .article-body, .com-content-article__body { font-size: 16px; line-height: 27px; } .article-body img, .com-content-article__body img { border-radius: var(--r-lg); margin-block: var(--stack-md); } /* Ikon kecil sebaris (lebar/tinggi ditulis di atribut, ≤ 48px) jangan diberi margin blok — kalau tidak, ikon terdorong ke atas teks dan barisnya renggang. */ .article-body img[width]:not([width="0"]), .com-content-article__body img[width]:not([width="0"]) { vertical-align: middle; } .article-body img[height^="1"], .article-body img[height^="2"], .article-body img[height^="3"], .article-body img[height^="4"], .com-content-article__body img[height^="1"], .com-content-article__body img[height^="2"], .com-content-article__body img[height^="3"], .com-content-article__body img[height^="4"] { margin-block: 0; } .article-body img[height]:not([height=""]):not([height^="1"]):not([height^="2"]):not([height^="3"]):not([height^="4"]), .com-content-article__body img[height]:not([height=""]):not([height^="1"]):not([height^="2"]):not([height^="3"]):not([height^="4"]) { margin-block: var(--stack-md); } /* Gambar yang berdiri sendiri dalam satu paragraf dirata-tengahkan. Di situs lama perataan ini dibawa gaya inline (display:block; margin:auto) pada , yang ikut terbuang saat pembersihan HTML migrasi — akibatnya 783 paragraf gambar jadi rata kiri. Kelas .gambar-tunggal dipasang oleh template.js, BUKAN oleh pemilih CSS. Sebabnya: `p > img:only-child` tidak bisa dipakai — `:only-child` hanya menghitung ELEMEN, sehingga

teks…

ikut cocok dan ikon sebaris (35 paragraf, mis. artikel #140) ikut tergeser ke tengah. CSS tidak punya cara memeriksa simpul teks, jadi penyaringannya dilakukan di JS. */ .article-body p.gambar-tunggal > img, .article-body p.gambar-tunggal > a > img, .com-content-article__body p.gambar-tunggal > img, .com-content-article__body p.gambar-tunggal > a > img { display: block; margin-inline: auto; } /* ------------------------------------------------------------ Tab artikel — dipasang plugin konten palahattab, pengganti modul RokSprocket "tabs" dari situs Joomla 3 lama. ------------------------------------------------------------ */ .tab-artikel { margin-block: var(--stack-lg); } .tab-artikel__bar { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid var(--outline-variant); margin-bottom: var(--stack-lg); } .tab-artikel__tombol { appearance: none; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 600; font-size: 15px; line-height: 22px; color: var(--on-surface-variant); padding: 11px 18px; border-radius: var(--r) var(--r) 0 0; /* garis bawah aktif digambar di sini supaya menimpa garis .tab-artikel__bar */ border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color .15s, background .15s, border-color .15s; } .tab-artikel__tombol:hover { color: var(--primary-container); background: var(--surface-container-low); } .tab-artikel__tombol[aria-selected="true"] { color: var(--primary-container); border-bottom-color: var(--primary-container); } .tab-artikel__tombol:focus-visible { outline: 2px solid var(--primary-container); outline-offset: -2px; } /* Tanpa JS semua panel tampil berurutan — masing-masing diberi judulnya sendiri lewat ::before supaya tetap terbaca. Kelas .is-siap dipasang JS. */ .tab-artikel:not(.is-siap) .tab-artikel__bar { display: none; } .tab-artikel:not(.is-siap) .tab-artikel__panel[hidden] { display: block; } @media (max-width: 575.98px) { .tab-artikel__bar { flex-wrap: nowrap; overflow-x: auto; } .tab-artikel__tombol { white-space: nowrap; } } /* ------------------------------------------------------------ Daftar tautan dokumen — pengganti pola lama

…

. Ikon digambar dengan CSS, jadi tidak bergantung berkas PNG. ------------------------------------------------------------ */ .daftar-dokumen { list-style: none; margin: var(--stack-md) 0; padding: 0; } .daftar-dokumen li + li { margin-top: 6px; } .daftar-dokumen a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface-white); border: 1px solid var(--outline-variant); border-left: 3px solid var(--primary-fixed-dim); border-radius: var(--r); font-size: 15px; line-height: 22px; font-weight: 600; color: var(--on-surface); transition: border-left-color .15s, box-shadow .15s, background-color .15s; } .daftar-dokumen a:hover { border-left-color: var(--gold); background: var(--surface-container-low); color: var(--primary-container); box-shadow: var(--shadow-sm); text-decoration: none; } /* Ikon dokumen: persegi dengan sudut terlipat */ .daftar-dokumen a::before { content: ''; flex: none; width: 18px; height: 22px; background: var(--primary-container); clip-path: polygon(0 0, 68% 0, 100% 30%, 100% 100%, 0 100%); opacity: .8; } .daftar-dokumen a:hover::before { background: var(--gold); opacity: 1; } /* Tanda panah di ujung kanan */ .daftar-dokumen a::after { content: '\203A'; margin-left: auto; font-size: 20px; line-height: 1; color: var(--outline); transition: transform .15s, color .15s; } .daftar-dokumen a:hover::after { color: var(--primary-container); transform: translateX(3px); } .article-body h2, .com-content-article__body h2 { font-size: 22px; line-height: 30px; margin-top: var(--stack-lg); } .article-body h3, .com-content-article__body h3 { font-size: 19px; line-height: 27px; margin-top: var(--stack-md); } .article-body :is(ul, ol), .com-content-article__body :is(ul, ol) { padding-left: 22px; margin-bottom: var(--stack-md); } .article-body li, .com-content-article__body li { margin-bottom: 6px; } .article-body blockquote, .com-content-article__body blockquote { margin: var(--stack-md) 0; padding: 12px 18px; border-left: 4px solid var(--primary-fixed-dim); background: var(--surface-subtle); border-radius: 0 var(--r) var(--r) 0; } .article-body iframe, .com-content-article__body iframe { max-width: 100%; border: 0; border-radius: var(--r-lg); aspect-ratio: 16/9; height: auto; width: 100%; } /* Tabel — striped, header tebal warna primary, bisa digeser di layar sempit */ .article-body table, .com-content-article__body table, table.table { width: 100%; border-collapse: collapse; margin-bottom: var(--stack-md); font-size: 14px; line-height: 21px; } .article-body table th, .com-content-article__body table th, table.table th { background: var(--surface-subtle); color: var(--primary-container); font-weight: 700; text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--outline-variant); } .article-body table td, .com-content-article__body table td, table.table td { padding: 10px 12px; border-bottom: 1px solid var(--outline-variant); vertical-align: top; } .article-body table tr:nth-child(even) td, .com-content-article__body table tr:nth-child(even) td { background: var(--surface-subtle); } /* Pembungkus geser dibuat oleh template.js */ .table-scroll { overflow-x: auto; margin-bottom: var(--stack-md); } .table-scroll > table { margin-bottom: 0; } /* ============================================================ Halaman kontak / Kritik & Saran Lihat override di html/com_contact/contact/ ============================================================ */ .kontak__intro { font-size: 16px; line-height: 26px; color: var(--on-surface-variant); background: var(--surface-subtle); border-left: 3px solid var(--primary-container); border-radius: 0 var(--r) var(--r) 0; padding: var(--stack-md) var(--stack-lg); margin-bottom: var(--stack-lg); max-width: 78ch; } .kontak__intro p:last-child { margin-bottom: 0; } .kontak__grid { display: grid; gap: var(--stack-lg); } .kontak__grid > * { min-width: 0; } @media (min-width: 860px) { /* Formulir mendapat porsi lebih besar; kartu kontak jadi pendamping. Ini juga yang membuat lebar kolom isian turun dari ±1.070px ke ±600px. */ .kontak__grid--dua { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; } } /* ---- Kartu formulir ---- */ .kontak-form { background: var(--surface-white); border: 1px solid var(--outline-variant); border-radius: var(--r-lg); padding: var(--stack-lg); } .kontak-form__judul { font-size: 19px; line-height: 26px; margin: 0 0 6px; color: var(--primary); } /* Catatan "kolom bertanda bintang wajib diisi" berasal dari field bertipe spacer milik formulir com_contact — dibuat sebagai keterangan kecil, bukan label tebal seperti bawaannya. */ .kontak-form .field-spacer { margin-bottom: var(--stack-lg); } .kontak-form .field-spacer .control-label { margin: 0; } .kontak-form .field-spacer label { font-size: 13px; line-height: 20px; font-weight: 400; color: var(--on-surface-variant); margin: 0; } .kontak-form .field-spacer .controls { display: none; } /* fieldset dipakai demi struktur, bukan tampilan — bingkai & legend bawaan peramban dimatikan supaya tidak muncul garis abu-abu tipis */ .kontak-form__grup { border: 0; margin: 0; padding: 0; min-width: 0; } .kontak-form__grup > legend { display: none; } .kontak-form .control-group + .control-group { margin-top: var(--stack-md); } .kontak-form label { font-size: 14px; font-weight: 600; margin-bottom: 6px; } .kontak-form .star, .kontak-form .required { color: #b3261e; } .kontak-form textarea { min-height: 160px; resize: vertical; } /* Kolom jebakan penahan bot. Disembunyikan dengan CSS, BUKAN type="hidden" — bot yang membaca HTML mentah tetap melihatnya sebagai isian biasa lalu mengisinya, dan itulah yang menandainya. Jangan ganti ke display:none saja: sebagian bot memeriksa properti itu. */ .kontak-form__jebakan { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; } .kontak-form__aksi { margin-top: var(--stack-lg); } .kontak-form__aksi .btn { min-width: 170px; } /* ---- Kartu informasi kontak ---- */ .kontak__info { background: var(--surface-subtle); border: 1px solid var(--outline-variant); border-radius: var(--r-lg); padding: var(--stack-lg); } .kontak__info-judul { font-size: 17px; line-height: 24px; margin: 0 0 var(--stack-md); color: var(--primary); } .kontak-item { display: flex; gap: 12px; align-items: flex-start; } .kontak-item + .kontak-item { margin-top: var(--stack-md); padding-top: var(--stack-md); border-top: 1px solid var(--outline-variant); } .kontak-item__ikon { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--primary-container); } .kontak-item__label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--on-surface-variant); margin-bottom: 2px; } .kontak-item__isi { display: block; font-size: 15px; line-height: 23px; color: var(--on-surface); } .kontak-item__isi a { color: var(--primary-container); font-weight: 600; } /* ============================================================ Formulir ============================================================ */ input[type=text], input[type=email], input[type=password], input[type=search], input[type=tel], input[type=url], input[type=number], input[type=date], select, textarea { width: 100%; padding: 10px 12px; font-family: var(--font-body); font-size: 15px; line-height: 22px; color: var(--on-surface); background: var(--surface-white); border: 1px solid var(--border-input); border-radius: var(--r); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary-container); box-shadow: 0 0 0 2px rgba(0,100,50,.18); } label { display: inline-block; font-size: 14px; font-weight: 600; letter-spacing: .01em; margin-bottom: 6px; } /* ============================================================ Elemen Joomla ============================================================ */ /* ============================================================ Hasil pencarian (com_finder) ============================================================ */ .com-finder, .search-results, .result__item { min-width: 0; } .com-finder :is(p, li, dd, a, span, mark), .result__item :is(p, a, span, mark) { overflow-wrap: anywhere; word-break: break-word; } mark, .highlight { background: #fff3cd; color: var(--on-secondary-container); padding: 0 2px; border-radius: 2px; font-weight: 600; } /* Di dalam judul hasil, sorotan cukup ditebalkan — blok kuning membuat judul berantakan */ .result__title-text mark { background: transparent; color: inherit; padding: 0; } .search-pages-counter, .com-finder .counter { font-size: 14px; color: var(--on-surface-variant); } .com-finder .term { font-weight: 700; color: var(--primary-container); } .search-results { list-style: none; padding: 0; margin: 0; } .result__item { padding: var(--stack-md) 0; border-bottom: 1px solid var(--outline-variant); } .result__item:last-child { border-bottom: 0; } /* Judul harus tampil DULU dan paling menonjol; URL turun ke bawah, kecil dan redup. Bawaan Joomla menaruh di dalam sehingga URL naik ke atas judul. */ .result__title { margin: 0 0 6px; font-size: 18px; line-height: 26px; font-weight: 700; } .result__title-link { display: flex; flex-direction: column; gap: 3px; color: var(--on-surface); } .result__title-link:hover { text-decoration: none; } .result__title-text { order: 1; font-family: var(--font-display); color: var(--on-surface); } .result__title-link:hover .result__title-text { color: var(--primary-container); } .result__title-url { order: 2; font-size: 12px; font-style: normal; font-weight: 400; line-height: 17px; color: var(--primary-container); opacity: .75; } .result__description { margin: 0 0 6px; font-size: 14px; line-height: 22px; color: var(--on-surface-variant); } .result__date { font-weight: 600; color: var(--secondary); margin-right: 6px; } .result__taxonomy, .result__path { font-size: 12px; line-height: 18px; color: var(--on-surface-variant); display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; } .result__taxonomy li { margin: 0; } /* Panel pencarian lanjutan: rapikan, jangan mendominasi halaman */ .com-finder form fieldset { border: 0; padding: 0; margin: 0 0 var(--stack-md); } .com-finder .form-inline, .com-finder .js-finder-searchform { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .com-finder .search-query, .com-finder input[type=text] { max-width: 380px; } .com-finder .search-pages-counter { font-size: 14px; color: var(--on-surface-variant); margin-bottom: var(--stack-md); } /* Kotak keterangan cara pakai — kecilkan agar hasil tidak terdorong jauh ke bawah */ .com-finder .search-explained, .com-finder .searchintro { font-size: 13px; line-height: 20px; color: var(--on-surface-variant); background: var(--surface-subtle); border: 1px solid var(--outline-variant); border-radius: var(--r); padding: 12px 14px; margin-bottom: var(--stack-md); } .com-finder .search-explained p { margin: 0 0 4px; } .com-finder .search-explained p:last-child { margin-bottom: 0; } .breadcrumb { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 var(--stack-md); font-size: 13px; color: var(--on-surface-variant); } .breadcrumb li::after { content: '/'; margin-left: 8px; color: var(--outline-variant); } .breadcrumb li:last-child::after { content: ''; } .pagination { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: var(--stack-lg) 0 0; justify-content: center; } .pagination__wrapper { margin-top: var(--stack-lg); } .pagination .page-item { display: flex; } /* Hanya anak langsung
  • yang diberi kotak, supaya di dalam tombol tidak ikut berbingkai. */ .pagination .page-item > a, .pagination .page-item > span, .pagination > li > a, .pagination > li > span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 8px 13px; font-size: 14px; line-height: 20px; border: 1px solid var(--outline-variant); border-radius: var(--r); color: var(--on-surface-variant); background: var(--surface-white); } .pagination .page-link span { border: 0; background: none; padding: 0; min-width: 0; } .pagination a:hover, .pagination a.page-link:hover { border-color: var(--primary-container); color: var(--primary-container); background: var(--surface-container-low); text-decoration: none; } .pagination .active .page-link, .pagination .active span { background: var(--primary-container); border-color: var(--primary-container); color: #fff; } .pagination .disabled .page-link, .pagination .disabled span { opacity: .4; cursor: not-allowed; } /* * Joomla memakai kelas font-ikon (icon-angle-*) untuk tombol * Awal / Sebelumnya / Berikutnya / Akhir. Template ini tidak memuat font ikon, * jadi panahnya digambar dari karakter biasa — kalau tidak, tampil kotak kosong. */ .pagination [class^="icon-angle"], .pagination [class*=" icon-angle"] { font-style: normal; line-height: 1; } .pagination .icon-angle-double-left::before { content: '\00AB'; } /* « */ .pagination .icon-angle-left::before { content: '\2039'; } /* ‹ */ .pagination .icon-angle-right::before { content: '\203A'; } /* › */ .pagination .icon-angle-double-right::before { content: '\00BB'; } /* » */ .pagination [class^="icon-angle"]::before, .pagination [class*=" icon-angle"]::before { font-size: 17px; font-weight: 700; } /* ---- Navigasi antar-artikel (Sebelumnya / Berikutnya) ---- Strukturnya berbeda dari paginasi kategori: