dan header, dan di antara setiap section — paling kentara sebagai garis putih tipis di atas hero sebelum discroll (celahnya menyingkap latar ). */ main#konten, .entry-content.wp-block-post-content > * { margin-block-start: 0; } main#konten + footer { margin-block-start: 0; } .lhc-sec h1, .lhc-sec h2, .lhc-sec h3, .lhc-sec h4, .lhc-header h1, .lhc-footer h2, .lhc-footer h3 { font-family: var(--lhc-display); letter-spacing: -0.02em; } .lhc-wrap { width: 100%; max-width: var(--lhc-wrap); margin-inline: auto; padding-inline: var(--lhc-gut); } .lhc-sec { padding-block: 3.5rem; background: #fff; } .lhc-sec > .lhc-wrap > *:first-child, .lhc-sec > .lhc-wrap > .wp-block-columns:first-child { margin-top: 0; } .lhc-sec--tint { background: var(--lhc-navy-50); } .lhc-sec--dark { background: var(--lhc-navy-950); color: var(--lhc-navy-200); } .lhc-sec--dark h2, .lhc-sec--dark h3 { color: #fff; } /* Tint bersarang di dalam section gelap harus balik ke SELURUH warna teks section terang, bukan ikut warisan .lhc-sec--dark di atas — `--tint` cuma mengubah latar (var(--lhc-navy-50), hampir putih), tidak pernah warna teks. Fix review putaran akhir (31 Juli 2026): tanpa blok ini, heading "Mengapa Memilih ..." (inc/shortcode-keunggulan.php) tayang putih di atas latar hampir-putih (rasio ~1,08:1, jauh di bawah ambang WCAG 4,5:1 — lihat lhc_kontras() di inc/tokens.php dan tools/cek-kontras.mjs yang membuktikannya lewat computed style sungguhan, bukan cuma token palet). Akar penyebab nestingnya sendiri (div `.lhc-sec--dark` yang tidak tertutup di patterns/04-layanan.php) sudah diperbaiki terpisah — blok ini bertahan sebagai lapis pertahanan kedua: kombinasi --dark+--tint bersarang MASIH bisa terjadi lewat markup yang ditulis salah di masa depan, dan section itu wajib tetap terbaca kalau itu terjadi lagi. Selector di-scope ke SETIAP elemen yang punya aturan warna sendiri di dalam .lhc-sec--dark supaya "semuanya di dalamnya" (bukan cuma heading) ikut kembali terbaca. */ .lhc-sec--dark .lhc-sec--tint { color: var(--lhc-ink); } .lhc-sec--dark .lhc-sec--tint h2, .lhc-sec--dark .lhc-sec--tint h3 { color: var(--lhc-navy-950); } .lhc-sec--dark .lhc-sec--tint .lhc-eyebrow { color: var(--lhc-gold-600); } .lhc-sec--dark .lhc-sec--tint .lhc-lead { color: var(--lhc-muted); } .lhc-sec--dark .lhc-sec--tint .lhc-arrow a { color: var(--lhc-navy-700); } @media (min-width: 1024px) { .lhc-sec { padding-block: 8rem; } .lhc-wrap { padding-inline: 2rem; } } /* Eyebrow: label mono + tiga wajik emas */ .lhc-eyebrow { display: flex; align-items: center; gap: 0.75rem; margin: 0; font-family: var(--lhc-mono); font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--lhc-gold-600); } .lhc-eyebrow::before { content: ""; flex: 0 0 auto; width: 30px; height: 10px; background: currentColor; -webkit-mask: var(--lhc-ico-diamonds) no-repeat center / contain; mask: var(--lhc-ico-diamonds) no-repeat center / contain; } .lhc-sec--dark .lhc-eyebrow, .lhc-hero .lhc-eyebrow { color: var(--lhc-gold); } /* Judul & teks */ .lhc-h2 { margin: 1rem 0 0; font-size: clamp(1.875rem, 1.2rem + 2.4vw, 2.6rem); font-weight: 800; line-height: 1.15; color: var(--lhc-navy-950); } .lhc-lead { margin: 1.5rem 0 0; color: var(--lhc-muted); line-height: 1.75; } .lhc-sec--dark .lhc-lead, .lhc-hero .lhc-lead { color: var(--lhc-navy-200); } .lhc-mono { font-family: var(--lhc-mono); font-size: 0.75rem; color: var(--lhc-muted); } /* Kepala section: judul kiri, tautan kanan */ .lhc-sechead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; } .lhc-sechead > .wp-block-group { max-width: 42rem; flex: 1 1 22rem; } /* ========================================================================= 3. TOMBOL & TAUTAN ========================================================================= */ .lhc-cta-row { gap: 1rem; margin-top: 2.25rem; } .lhc-btn .wp-block-button__link { border-radius: 0; font-family: var(--lhc-display); font-weight: 700; font-size: 1rem; padding: 1rem 2rem; line-height: 1.2; transition: transform 0.15s ease, filter 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } /* Primer: sudut terpotong 45° (motif pelat baja) */ .lhc-btn--primary .wp-block-button__link { background: var(--lhc-accent); color: var(--lhc-navy-950); border: 0; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); filter: drop-shadow(0 2px 4px rgba(8, 20, 52, 0.18)); } .lhc-btn--primary .wp-block-button__link:hover, .lhc-btn--primary .wp-block-button__link:focus { background: var(--lhc-gold); color: var(--lhc-navy-950); transform: translateY(-1px); filter: drop-shadow(0 5px 12px rgba(8, 20, 52, 0.28)); } .lhc-btn--primary .wp-block-button__link:active { transform: translateY(1px); } /* Sekunder: garis tepi di atas latar gelap */ .lhc-btn--outline .wp-block-button__link { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; font-weight: 600; } .lhc-btn--outline .wp-block-button__link:hover, .lhc-btn--outline .wp-block-button__link:focus { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.6); color: #fff; } /* Sekunder di atas latar terang */ .lhc-btn--line .wp-block-button__link { background: transparent; border: 1px solid var(--lhc-navy-700); color: var(--lhc-navy-700); font-weight: 600; padding: 0.85rem 1.6rem; } .lhc-btn--line .wp-block-button__link:hover, .lhc-btn--line .wp-block-button__link:focus { background: var(--lhc-navy-700); color: #fff; } /* Tautan teks + panah */ .lhc-arrow a { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--lhc-display); font-weight: 600; color: var(--lhc-navy-700); text-decoration: none; } .lhc-arrow a::after { content: ""; width: 1.05rem; height: 1.05rem; background: currentColor; -webkit-mask: var(--lhc-ico-arrow) no-repeat center / contain; mask: var(--lhc-ico-arrow) no-repeat center / contain; transition: transform 0.15s ease; } .lhc-arrow a:hover { color: var(--lhc-navy-950); } .lhc-arrow a:hover::after { transform: translateX(3px); } .lhc-arrow--sm a { font-size: 0.875rem; font-family: var(--lhc-body); font-weight: 600; } .lhc-arrow--sm a::after { width: 0.95rem; height: 0.95rem; -webkit-mask-image: var(--lhc-ico-chevron); mask-image: var(--lhc-ico-chevron); } .lhc-sec--dark .lhc-arrow a, .lhc-arrow--gold a { color: var(--lhc-accent); } /* Kartu putih (.lhc-card) tetap kontras terang di dalam section gelap — tautan panah di dalamnya harus tetap navy seperti di section terang, bukan ikut menguning gara-gara section pembungkusnya .lhc-sec--dark. */ .lhc-sec--dark .lhc-card .lhc-arrow a { color: var(--lhc-navy-700); } .lhc-sec--dark .lhc-card .lhc-arrow a:hover { color: var(--lhc-navy-950); } /* Daftar bercentang */ .lhc-check { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 0.75rem; font-size: 0.9375rem; font-weight: 500; color: var(--lhc-navy-800); } /* `align-items: center` dulu menengahkan centang terhadap SELURUH baris (termasuk yang membungkus 2+ baris), jadi mengambang di antara baris, bukan sejajar baris pertama. `flex-start` + margin-top kecil menyamai pola yang sudah dipakai di ikon kontak footer. */ .lhc-check li { display: flex; align-items: flex-start; gap: 0.625rem; } .lhc-check li::before { content: ""; flex: 0 0 auto; width: 1.125rem; height: 1.125rem; margin-top: 0.2rem; background: var(--lhc-gold-600); -webkit-mask: var(--lhc-ico-check) no-repeat center / contain; mask: var(--lhc-ico-check) no-repeat center / contain; } @media (min-width: 640px) { .lhc-check { grid-template-columns: 1fr 1fr; } } /* ========================================================================= 4. GRID & KARTU ========================================================================= */ .lhc-grid { display: grid; gap: 1.25rem; margin-top: 3rem; } @media (min-width: 640px) { .lhc-grid--2, .lhc-grid--3, .lhc-grid--4, .lhc-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lhc-span-2 { grid-column: span 2; } } @media (min-width: 1024px) { .lhc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lhc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lhc-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .lhc-card { background: #fff; border: 1px solid var(--lhc-navy-100); border-radius: var(--lhc-radius); padding: 1.5rem; transition: box-shadow 0.2s ease, transform 0.2s ease; } .lhc-card:hover { box-shadow: 0 6px 18px rgba(8, 20, 52, 0.08); transform: translateY(-2px); } /* Bayangan navy tipis di atas nyaris tidak kelihatan kalau section-nya sendiri sudah navy — dipertegas jadi bayangan hitam supaya kartu putih tetap terasa "terangkat" saat di-hover di dalam section gelap. */ .lhc-sec--dark .lhc-card:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); } .lhc-card > h3 { margin: 1rem 0 0; font-size: 1.0625rem; font-weight: 700; color: var(--lhc-navy-950); line-height: 1.35; } .lhc-card > p { margin: 0.5rem 0 0; font-size: 0.9375rem; color: var(--lhc-muted); line-height: 1.7; } .lhc-card > .lhc-arrow--sm { margin-top: 1rem; } /* Ikon kartu: ganti dengan menukar kelas lhc-ico--* pada blok Group kartu */ .lhc-card::before { content: ""; display: block; width: 30px; height: 30px; background: var(--lhc-navy-700); -webkit-mask: var(--lhc-ico) no-repeat center / contain; mask: var(--lhc-ico) no-repeat center / contain; } .lhc-ico--build { --lhc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V8l7-4 7 4v13M9 21v-6h6v6'/%3E%3C/svg%3E"); } .lhc-ico--road { --lhc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19c2.5-6 5-9 8-9s5.5 3 8 9M4 19h16M9.5 10.5L8 5h8l-1.5 5.5'/%3E%3C/svg%3E"); } .lhc-ico--water { --lhc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8c2-2 4-2 6 0s4 2 6 0 4-2 6 0M3 13c2-2 4-2 6 0s4 2 6 0 4-2 6 0M3 18c2-2 4-2 6 0s4 2 6 0 4-2 6 0'/%3E%3C/svg%3E"); } .lhc-ico--flood { --lhc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4.5v9L12 21l-8-4.5v-9L12 3zM12 3v9m8-4.5L12 12 4 7.5'/%3E%3C/svg%3E"); } .lhc-ico--land { --lhc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20h18M6 20l3-9 4 4 3-8 2 13'/%3E%3C/svg%3E"); } .lhc-ico--plant { --lhc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V9l5 3V9l5 3V9l6 3v9M4 21h16M8 17h.01M12 17h.01M16 17h.01'/%3E%3C/svg%3E"); } .lhc-ico--procure { --lhc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8V6a2 2 0 012-2h6a2 2 0 012 2v2M4 8h16v12H4V8zm4 4h8'/%3E%3C/svg%3E"); } /* Kartu langkah bernomor (alur kerja Layanan) — angka mono besar di atas, sisanya sama seperti .lhc-card polos (tanpa ikon masker). */ .lhc-step { background: #fff; border: 1px solid var(--lhc-navy-100); border-radius: var(--lhc-radius); padding: 1.5rem; } .lhc-step__n { margin: 0; font-family: var(--lhc-mono); font-size: 1.75rem; font-weight: 700; color: var(--lhc-gold-600); } .lhc-step h3 { margin: 0.75rem 0 0; font-size: 1.0625rem; font-weight: 700; color: var(--lhc-navy-950); } .lhc-step p:last-child { margin: 0.5rem 0 0; font-size: 0.9375rem; color: var(--lhc-muted); line-height: 1.7; } /* ========================================================================= 5. FOTO & PLACEHOLDER ========================================================================= */ .lhc-shot { margin: 0; border-radius: var(--lhc-radius); overflow: hidden; background: linear-gradient(150deg, #102965 0%, #0c1d4d 55%, #081434 100%); } .lhc-shot img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Foto latar penuh di dalam hero / kartu unggulan */ .lhc-shot.lhc-cover { position: absolute; inset: 0; z-index: -2; margin: 0; border-radius: 0; } .lhc-cover img { width: 100%; height: 100%; object-fit: cover; } .lhc-shot--4x3 { aspect-ratio: 4 / 3; } .lhc-shot--3x4 { aspect-ratio: 4 / 5; } .lhc-shot--16x10 { aspect-ratio: 16 / 10; } @media (min-width: 1024px) { .lhc-shot--3x4 { aspect-ratio: 3 / 4; } .lhc-shot--wide { aspect-ratio: 8 / 3; } } /* Kotak "foto belum ada": navy + garis hazard emas */ .lhc-ph { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; overflow: hidden; } .lhc-ph::before { content: ""; position: absolute; inset: 0; opacity: 0.12; background: repeating-linear-gradient(-45deg, transparent 0 22px, #e8b546 22px 30px); } .lhc-ph__label { position: relative; margin: 0; padding: 1rem; text-align: center; color: var(--lhc-navy-200); font-family: var(--lhc-mono); font-size: 0.72rem; letter-spacing: 0.08em; } /* ========================================================================= 6. HEADER ========================================================================= */ .lhc-header { position: fixed; inset-inline: 0; top: 0; z-index: 50; transition: background-color 0.3s ease, box-shadow 0.3s ease; } /* Header frontend tidak boleh menimpa toolbar WordPress saat pengujian login. */ body.admin-bar .lhc-header { top: var(--wp-admin--admin-bar--height, 32px); } /* WP mendorong seluruh halaman turun lewat `margin-top` di saat toolbar admin tampil (bukan cuma elemen fixed). `.lhc-hero` ikut turun bersama alur dokumen, tapi tingginya tetap dikunci 100svh — akibatnya bagian bawah hero (CTA/pita statistik) terdorong sejauh tinggi toolbar ke luar layar yang kelihatan. Cuma relevan saat login (pengujian); pengunjung asli tidak pernah melihat toolbar ini. */ body.admin-bar .lhc-hero { height: calc(100svh - var(--wp-admin--admin-bar--height, 32px)); } @media (max-width: 600px) { body.admin-bar #wpadminbar { position: fixed; } } .lhc-header.is-solid { background: rgba(8, 20, 52, 0.95); backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(8, 20, 52, 0.35); } /* Halaman tanpa hero: header selalu solid supaya teks tetap terbaca */ body:not(.lhc-has-hero) .lhc-header { position: sticky; background: var(--lhc-navy-950); } .lhc-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4rem; } @media (min-width: 1024px) { .lhc-header__bar { min-height: 4.5rem; } } .lhc-brand { display: flex; align-items: center; gap: 0.75rem; flex: 0 0 auto; } .lhc-brand .wp-block-site-logo img { display: block; height: 2.125rem; width: auto; } /* Dua baris merek dirapatkan: line-height dipaksa di elemen , karena itulah kotak yang menentukan tinggi baris — bukan

pembungkusnya. */ .lhc-brand__txt { line-height: 1.1; } .lhc-brand .wp-block-site-title { margin: 0; line-height: 1.1; } .lhc-brand .wp-block-site-title a { display: block; font-family: var(--lhc-display); font-size: 1rem; font-weight: 800; line-height: 1.1; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; text-decoration: none; } .lhc-brand__since { margin: 2px 0 0; font-family: var(--lhc-mono); font-size: 10px; line-height: 1.1; letter-spacing: 0.14em; color: var(--lhc-navy-200); white-space: nowrap; } /* Warna diletakkan di container: core memaksa `color: inherit` pada tautan menu dengan selektor kelas ganda, jadi mewarnai tautannya langsung tidak mempan. */ .lhc-nav { font-size: 0.875rem; font-weight: 500; color: #fff; } .lhc-nav .wp-block-navigation-item__content { text-decoration: none; } .lhc-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover { color: var(--lhc-accent); text-decoration: none; } /* Halaman yang sedang dibuka ditandai warna aksen. */ .lhc-nav .current-menu-item .wp-block-navigation-item__content.wp-block-navigation-item__content { color: var(--lhc-accent); } .lhc-nav .wp-block-navigation__responsive-container-open, .lhc-nav .wp-block-navigation__responsive-container-close { color: #fff; } /* Butir "Company Profile" (CTA) hanya untuk tampilan seluler; di desktop sudah ada tombolnya sendiri di sebelah kanan bilah header. Disasar lewat class `.lhc-nav-cta` (lihat inc/cli.php build_navigation()), BUKAN `:last-child` seperti sebelumnya — review Task 12 temuan 3: aturan posisional itu diam-diam menyembunyikan "Artikel" di SMS, brand yang TIDAK punya butir Company Profile (PDF-nya ditahan sejak Task 11) — begitu butir CTA hilang, "Artikel" jatuh ke slot terakhir dan ikut tersembunyi walau bukan itu yang dimaksud. Class eksplisit tidak bergantung pada posisi maupun panjang menu. */ @media (min-width: 1024px) { .lhc-nav .wp-block-navigation__container > .wp-block-navigation-item.lhc-nav-cta { display: none; } } /* ---- Menu seluler: panel navy di bawah bilah header, rata kiri ---- */ @media (max-width: 1023px) { /* Core membuka menu desktop mulai 600px, terlalu cepat untuk brand + lima tautan. Pertahankan hamburger sampai breakpoint desktop BNL (1024px). */ .lhc-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; } .lhc-nav .wp-block-navigation__responsive-container-open { display: flex; } /* Tanpa backdrop-filter: panelnya sudah navy pekat, jadi blur tidak terlihat — dan filter apa pun membuat `position: fixed` anak-anaknya jadi relatif ke panel, sehingga tombol tutup tidak bisa ditaruh di bilah header. */ .lhc-nav .wp-block-navigation__responsive-container.is-menu-open { top: 4rem; bottom: auto; height: calc(100svh - 4rem); padding: 0; overflow-y: auto; border-top: 1px solid rgba(255, 255, 255, 0.1); /* Animasi fade bawaan core menyisakan `transform`, dan elemen ber-transform jadi containing block — akibatnya tombol tutup tidak bisa ditaruh di bilah header. Dimatikan; menu muncul langsung. */ animation: none; transform: none; } body.admin-bar .lhc-nav .wp-block-navigation__responsive-container.is-menu-open { height: calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 4rem); } /* Hamburger ditukar dengan ikon tutup di posisi yang sama, persis seperti mockup — logo dan nama perusahaan tetap terlihat saat menu terbuka. */ .lhc-header.lhc-menu-open .wp-block-navigation__responsive-container-open { visibility: hidden; } .lhc-header.lhc-menu-open .wp-block-navigation__responsive-container-close { position: fixed; top: 1.25rem; right: 1.15rem; z-index: 100001; } .lhc-nav .is-menu-open .wp-block-navigation__responsive-container-content, .lhc-nav .is-menu-open .wp-block-navigation__responsive-dialog { width: 100%; } /* Core menyisakan ruang untuk tombol tutup; tombolnya sudah kita pindah ke bilah header, jadi ruangnya tidak diperlukan lagi. Selektor sengaja dipanjangkan agar bobotnya menyamai aturan core yang memakai `:not()`. */ .lhc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 0; } /* `!important` dipakai karena core mewariskan block-gap ke daftar menu lewat `gap: inherit`, dan itu membuat jarak antar butir terlalu renggang. */ .lhc-nav .is-menu-open .wp-block-navigation__container { align-items: stretch; gap: 0.25rem !important; padding: 1.5rem 1.25rem 2.5rem !important; font-size: 1.0625rem; } .lhc-nav .is-menu-open .wp-block-navigation-item__content { display: block; width: 100%; padding: 1.125rem 0; } /* Garis tipis pemisah HANYA di antara dua butir menu biasa yang berurutan — dibuat lewat kombinator sibling + class `.lhc-nav-cta`, BUKAN `:not(:last-child)`/`:last-child` seperti sebelumnya. Review Task 12 temuan lanjutan: blok seluler ini mengulang asumsi posisional yang sama yang sudah diperbaiki di blok desktop — "butir terakhir menu SELALU CTA Company Profile". Asumsi itu salah untuk SMS, yang tidak punya butir Company Profile (PDF-nya ditahan sejak Task 11), sehingga "Artikel" jatuh ke slot terakhir dan dirender sebagai pil kuning selebar panel — bukan tautan biasa. Class eksplisit tidak bergantung pada posisi maupun panjang menu. */ .lhc-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.lhc-nav-cta) + .wp-block-navigation-item:not(.lhc-nav-cta) { border-top: 1px solid rgba(255, 255, 255, 0.1); } .lhc-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.lhc-nav-cta { margin-top: 1.25rem; } .lhc-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.lhc-nav-cta .wp-block-navigation-item__content.wp-block-navigation-item__content { background: var(--lhc-accent); color: var(--lhc-navy-950); font-family: var(--lhc-display); font-weight: 700; text-align: center; padding: 0.875rem 1.25rem; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); } /* Butir CTA kedua ("Download Brosur") tampil bergaris, bukan pil emas kembar di bawah Company Profile. Selektornya membawa DUA class CTA (.lhc-nav-cta.lhc-nav-cta--outline) sehingga bobotnya lebih tinggi satu class dari aturan pil emas di atas — menang tanpa !important dan tanpa bergantung pada urutan penulisan di berkas ini. Padding, font-family, dan text-align sengaja TIDAK diulang: elemennya tetap membawa .lhc-nav-cta, jadi semuanya masih berlaku. `clip-path: none` wajib — sudut terpotong 45° memotong garis tepi 1px secara diagonal dan menyisakan sudut terbuka. */ .lhc-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.lhc-nav-cta.lhc-nav-cta--outline .wp-block-navigation-item__content.wp-block-navigation-item__content { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; font-weight: 600; clip-path: none; } /* Dua butir CTA berurutan dirapatkan. Masing-masing sudah membawa margin-top 1.25rem dari aturan di atas, dan dua kali jarak itu membuat kaki menu seluler terlihat terputus. */ .lhc-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.lhc-nav-cta + .wp-block-navigation-item.lhc-nav-cta { margin-top: 0.5rem; } } /* Ukuran ringkas ini soal LETAKNYA (di bilah header setinggi 4–4.5rem), bukan soal variannya. Dulu dikunci ke `--primary` karena bilah header cuma pernah punya satu tombol; begitu ada tombol kedua bervarian lain (Download Brosur, .lhc-btn--outline) aturan itu melewatinya dan tombolnya tayang seukuran tombol section (1rem / 1rem 2rem) — lebih tinggi dari bilahnya sendiri. */ .lhc-header .lhc-btn .wp-block-button__link { padding: 0.65rem 1.5rem; font-size: 0.875rem; white-space: nowrap; } /* Dua tombol di bilah header: jaraknya dipatok eksplisit, tidak diserahkan ke block-gap theme.json yang bisa berubah tanpa menyentuh berkas ini. */ .lhc-header .lhc-header__cta { gap: 0.625rem; } /* 1024–1279px: bilah header memuat merek + lima butir menu + DUA tombol. Padding dipangkas di rentang ini saja supaya menunya tidak terdesak. */ @media (min-width: 1024px) and (max-width: 1279px) { .lhc-header .lhc-btn .wp-block-button__link { padding: 0.6rem 1rem; } } @media (max-width: 1023px) { .lhc-header .lhc-header__cta { display: none; } } /* Di layar kecil header dijaga tetap ramping. */ @media (max-width: 640px) { .lhc-brand .wp-block-site-logo img { height: 1.75rem; } .lhc-brand .wp-block-site-title a { font-size: 0.875rem; } .lhc-brand__since { font-size: 9px; } } /* ========================================================================= 7. HERO ========================================================================= */ .lhc-hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; /* `height`, bukan `min-height`: hero dikunci pas satu layar, tidak boleh lebih tinggi dari viewport walau isinya bertambah panjang. */ height: 100svh; overflow: hidden; background-color: var(--lhc-navy-950); color: #fff; isolation: isolate; } /* Video latar (atau foto, kalau video belum diunggah — lihat lhc_video_block()). Ambient zoom lambat: skala menyempit dari 112% ke 100% selama 20 detik, sekali saja saat halaman dimuat. */ .lhc-hero__video { position: absolute; inset: 0; z-index: -3; margin: 0; /* Wrapper INI yang di-transform JS parallax (lihat assets/bnl.js §6) — video/img di dalamnya punya will-change sendiri untuk animasi zoom satu kali, elemen berbeda. */ will-change: transform; } /* Review Task 13 (CRITICAL 2): sama seperti `.lhc-inner-hero` di bawah, `.lhc-ph` men-tengah-kan labelnya secara vertikal — tapi di hero Beranda isi (eyebrow/H1/CTA/trust bar) DITEMPEL KE BAWAH kotak lewat `.lhc-hero { justify-content: flex-end }`, bukan ke atas seperti hero pendek. Titik tengah 100svh jatuh persis di baris judul H1, tumpang tindih dengan `[VIDEO HERO: ...]` — dikonfirmasi lewat bounding-box di ITP & SMS, mobile & desktop (lihat laporan Task 13). Didorong ke tepi ATAS kotak (kebalikan dari hero pendek), dengan jarak yang jelas dari header fixed (4rem mobile / 4.5rem desktop, lihat `.lhc-header__bar`). Efeknya hilang otomatis begitu video sungguhan diunggah (class `.lhc-ph` lepas). */ .lhc-hero .lhc-hero__video.lhc-ph { align-items: flex-start; padding-top: 6.5rem; } .lhc-hero__video video, .lhc-hero__video img { display: block; width: 100%; height: 100%; object-fit: cover; animation: lhc-hero-zoom 20s ease-out forwards; will-change: transform; } @keyframes lhc-hero-zoom { from { transform: scale(1.12); } to { transform: scale(1); } } /* Lapisan keterbacaan: gradasi gelap dua arah, sama seperti overlay foto sebelumnya — hanya sekarang berupa div terpisah, bukan pseudo-element, supaya bisa ditumpuk dengan lapisan mood/grid/vignette di bawah ini. */ .lhc-hero__scrim { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient( 180deg, rgba(8, 20, 52, 0.78) 0%, rgba(8, 20, 52, 0.32) 32%, rgba(8, 20, 52, 0.5) 60%, rgba(8, 20, 52, 0.96) 100% ), linear-gradient(90deg, rgba(8, 20, 52, 0.85) 0%, rgba(8, 20, 52, 0.4) 46%, rgba(8, 20, 52, 0) 82%); } /* Tint tipis warna brand di atas video, supaya video terasa menyatu dengan palet navy situs, bukan sekadar foto stok yang ditempel. */ .lhc-hero__duotone { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: var(--lhc-navy-700); mix-blend-mode: color; opacity: 0.16; } .lhc-hero__vignette { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(125% 120% at 50% 38%, transparent 52%, rgba(0, 0, 0, 0.55) 100%); } .lhc-motion-line { display: block; overflow: hidden; padding-bottom: 0.08em; } .lhc-motion-line > span { display: block; } .lhc-motion-on .lhc-hero .lhc-reveal--eyebrow { --lhc-motion-y: 8px; --lhc-motion-duration: 0.42s; } .lhc-motion-on .lhc-hero .lhc-reveal--title { --lhc-motion-y: 0; --lhc-motion-duration: 0.68s; --lhc-motion-delay: 0.08s; } .lhc-motion-on .lhc-hero .lhc-reveal--title .lhc-motion-line > span { transform: translateY(105%); transition: transform 0.68s cubic-bezier(0.16, 1, 0.3, 1); } .lhc-motion-on .lhc-hero .lhc-reveal--title .lhc-motion-line:nth-child(2) > span { transition-delay: 0.08s; } .lhc-motion-on .lhc-hero .lhc-reveal--title.is-in .lhc-motion-line > span { transform: none; } .lhc-motion-on .lhc-hero__body .lhc-reveal--calm { --lhc-motion-y: 10px; --lhc-motion-duration: 0.52s; --lhc-motion-delay: 0.28s; } .lhc-motion-on .lhc-hero > .lhc-wrap > .lhc-trust.lhc-reveal--calm { --lhc-motion-delay: 0.5s; } .lhc-hero > .lhc-wrap { padding-top: 9rem; padding-bottom: 3.5rem; } @media (min-width: 1024px) { .lhc-hero > .lhc-wrap { padding-bottom: 5rem; } } /* Jarak 9rem di atas pas untuk header desktop (4.5rem), tapi kebanyakan HP modern tingginya di atas 760px (tidak kena tier layar-pendek di bawah), jadi tanpa ini teks hero selalu jatuh terlalu jauh dari header — bukan cuma di layar pendek. Diturunkan lagi ke 5rem oleh tier `max-height` kalau layarnya juga pendek (urutan sumber: aturan ini duluan). */ @media (max-width: 767px) { .lhc-hero > .lhc-wrap { padding-top: 6rem; } } .lhc-hero__body { max-width: 48rem; } .lhc-h1 { margin: 1.25rem 0 0; font-family: var(--lhc-display); font-size: clamp(2.25rem, 1.1rem + 4.6vw, 3.9rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; color: #fff; } .lhc-h1 mark, .lhc-hl { background: none; color: var(--lhc-accent); } /* Trust bar di bawah hero */ .lhc-trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 3.5rem; border-top: 1px solid rgba(255, 255, 255, 0.15); } .lhc-trust__item { display: flex; flex-direction: column; justify-content: space-between; padding-top: 1.25rem; padding-right: 1.5rem; } .lhc-trust__k { margin: 0; font-family: var(--lhc-mono); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lhc-navy-200); } .lhc-trust__v { margin: 0.25rem 0 0; font-family: var(--lhc-mono); font-size: 1.5rem; font-weight: 600; color: #fff; } .lhc-trust__v.is-pending { font-size: 1.125rem; color: var(--lhc-gold); } @media (min-width: 1024px) { .lhc-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lhc-trust__item { padding-inline: 1.5rem; border-right: 1px solid rgba(255, 255, 255, 0.15); } .lhc-trust__item:first-child { padding-left: 0; } .lhc-trust__item:last-child { border-right: 0; padding-right: 0; } .lhc-trust__v { font-size: 1.875rem; } .lhc-trust__v.is-pending { font-size: 1.25rem; } } /* Kalau field statistik lain kosong (lihat inc/stats.php) dan yang tersisa cuma SATU kartu, grid 2/4 kolom menyisakan ruang kosong yang terbaca sebagai halaman rusak, bukan pilihan desain. Turunkan ke satu baris terpusat — BUKAN mengisi kolom yang tersisa dengan angka karangan, itu justru kegagalan yang membuat angka-angka tadi dihapus (Task 12). `:has()` didukung semua browser modern (Chrome/Edge 105+, Safari 15.4+, Firefox 121+), aman untuk audiens review client di 2026. Tanpa media query supaya berlaku di semua lebar layar sekaligus mengalahkan aturan kolom desktop di atas lewat urutan sumber + spesifisitas :only-child. */ .lhc-trust:has(> .lhc-trust__item:only-child) { grid-template-columns: minmax(0, max-content); justify-content: center; } .lhc-trust__item:only-child { padding: 1.25rem 0 0; border-right: 0; align-items: center; text-align: center; } /* Task 19: begitu statistik provinsi terisi ('38 provinsi', bersama 'Proyek selesai'), strip ini punya PERSIS dua kartu — grid mobile (repeat(2, 1fr) di atas) sudah pas untuk itu, tapi grid desktop 4 kolom menyisakan dua kolom kosong di kanan: sepasang kartu dempet ke kiri, separuh strip kosong, terbaca sebagai halaman rusak, persis pola yang sudah diperbaiki untuk kasus satu kartu di atas. `:nth-child(2):last-child` cuma cocok kalau totalnya BENAR dua (item kedua sekaligus item terakhir) — grid tiga/empat kartu (mis. sesudah unit alat berat atau tahun berdiri terisi) tidak tersentuh aturan ini. */ @media (min-width: 1024px) { .lhc-trust:has(> .lhc-trust__item:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Jaring pengaman di layar pendek (laptop jendela kecil, HP mendatar): kurangi jarak atas supaya isi hero tidak terpotong `overflow: hidden` saat tingginya dikunci pas satu layar (lihat `.lhc-hero { height: 100svh }`). Sengaja ditaruh di UJUNG section ini, setelah semua aturan dasarnya — `@media` tidak menaikkan bobot selektor, jadi kalau ditaruh sebelum aturan dasar dengan selektor yang sama, aturan dasar itu yang menang meski media query-nya cocok (urutan sumber yang menentukan, bukan posisi @media). */ @media (max-height: 700px) { .lhc-hero > .lhc-wrap { padding-top: 5rem; padding-bottom: 1.5rem; } .lhc-trust { margin-top: 1.5rem; } } /* Ponsel pendek tidak punya ruang untuk judul, dua tombol, dan empat angka. Sembunyikan data sekundernya; pesan dan CTA tetap utuh di dalam 100svh. */ @media (max-width: 767px) and (max-height: 760px) { .lhc-hero > .lhc-wrap { padding-top: 5rem; padding-bottom: 2rem; } .lhc-h1 { font-size: clamp(1.75rem, 8.5vw, 2.35rem); } .lhc-hero__body .lhc-cta-row { margin-top: 1.5rem; } .lhc-trust { display: none; } } /* Tablet mendatar yang pendek: statistik dua baris adalah satu-satunya bagian yang membuat isi masuk ke bawah navbar. */ @media (min-width: 768px) and (max-width: 1023px) and (max-height: 620px) { .lhc-trust { display: none; } } /* Layar sangat pendek (HP mendatar, jendela laptop dikecilkan jauh): tier di atas saja tidak cukup — judul + pita statistik tetap lebih tinggi dari layar. Pita statistik disembunyikan supaya eyebrow, judul, dan tombol CTA — inti pesan hero — selalu utuh terlihat tanpa terpotong. */ @media (max-height: 480px) { .lhc-hero > .lhc-wrap { /* Header setinggi 4rem di lebar ini (lihat `.lhc-header__bar`) — beri sedikit lebih dari itu supaya eyebrow tidak mepet langsung di bawah bilah header. */ padding-top: 4.75rem; padding-bottom: 1.5rem; } .lhc-h1 { font-size: clamp(1.5rem, 1rem + 3vw, 2.25rem); } .lhc-trust { display: none; } } /* ========================================================================= 8. KOLOM DUA / MEDIA ========================================================================= */ .lhc-2col { gap: 3rem; align-items: center; margin-top: 0; } .lhc-2col--top { align-items: flex-start; margin-top: 3rem; } /* Mockup memecah dua kolom di 1024px, bukan 782px bawaan WordPress. `!important` diperlukan karena core mengunci `flex-wrap: nowrap !important` pada blok Columns di atas 782px. */ @media (max-width: 1023px) { .lhc-2col { flex-wrap: wrap !important; } .lhc-2col > .wp-block-column { flex-basis: 100% !important; } } @media (min-width: 1024px) { .lhc-2col { gap: 5rem; } } .lhc-media { position: relative; } /* Tanda sudut emas di pojok kiri-atas foto — motif garis sudut sederhana, diwarnai emas supaya terbaca di atas latar putih. Ditaruh di .lhc-media (bukan di .lhc-shot) karena foto punya `overflow: hidden` untuk sudut membulat — pseudo-element di dalamnya akan terpotong begitu digeser keluar kotak foto, persis alasan .lhc-badge juga dikode sebagai elemen saudara, bukan bersarang di dalam foto. Disembunyikan otomatis kalau foto belum diunggah (masih placeholder). */ .lhc-media::before { content: ""; position: absolute; top: -0.75rem; left: -0.75rem; width: 2.5rem; height: 2.5rem; border-top: 2px solid var(--lhc-gold); border-left: 2px solid var(--lhc-gold); pointer-events: none; } .lhc-media:has(> .lhc-ph)::before { display: none; } .lhc-badge { position: absolute; right: -0.75rem; bottom: -1.5rem; background: var(--lhc-navy-950); color: #fff; padding: 1.25rem 1.5rem; border-radius: var(--lhc-radius-sm); box-shadow: 0 10px 24px rgba(8, 20, 52, 0.25); } .lhc-badge__n { margin: 0; font-family: var(--lhc-mono); font-size: 1.875rem; font-weight: 600; color: var(--lhc-accent); } .lhc-badge__t { margin: 0.25rem 0 0; font-size: 0.75rem; letter-spacing: 0.02em; color: var(--lhc-navy-200); line-height: 1.4; } @media (min-width: 1024px) { .lhc-badge { right: -1.5rem; } } /* ========================================================================= 9. LAYANAN ========================================================================= */ .lhc-svc-feat { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: 16rem; padding: 1.75rem; border-radius: var(--lhc-radius); overflow: hidden; background-color: var(--lhc-navy-900); color: #fff; transition: transform 0.2s ease; } .lhc-svc-feat:hover { /* `!important`: .lhc-svc-feat selalu membawa class .lhc-reveal (lihat inc/shortcode-layanan.php) — tanpa ini, begitu kartu ter-scroll ke viewport, rule reset reveal (`.lhc-reveal.is-in { transform: none; }`) menimpa translateY ini total, dan kartu ini (beda dari .lhc-unit/ .lhc-proj) tidak punya box-shadow sebagai sinyal hover cadangan — jadi hover-nya bisa jadi tidak kelihatan sama sekali tanpa ini. */ transform: translateY(-2px) !important; } .lhc-svc-feat .lhc-cover img { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .lhc-svc-feat:hover .lhc-cover img { transform: scale(1.05); } .lhc-svc-feat::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient( to top, var(--lhc-navy-950) 0%, rgba(8, 20, 52, 0.6) 60%, rgba(12, 29, 77, 0.2) 100% ); } .lhc-tag { align-self: flex-start; margin: 0; background: var(--lhc-accent); color: var(--lhc-navy-950); border-radius: 999px; padding: 0.25rem 0.75rem; font-family: var(--lhc-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; } .lhc-svc-feat h3 { margin: 0.75rem 0 0; font-size: 1.5rem; font-weight: 700; color: #fff; } .lhc-svc-feat p { margin: 0.5rem 0 0; max-width: 28rem; font-size: 0.9375rem; line-height: 1.7; color: var(--lhc-navy-100); } .lhc-svc-feat .lhc-arrow { margin-top: 1rem; } /* ========================================================================= 10. ARMADA ALAT BERAT ========================================================================= */ .lhc-filter { gap: 0.625rem; margin-top: 2.5rem; overflow-x: auto; padding-bottom: 0.5rem; flex-wrap: nowrap; } .lhc-filter .wp-block-button__link { border-radius: 999px; border: 1px solid var(--lhc-navy-200); background: transparent; color: var(--lhc-navy-800); font-family: var(--lhc-body); font-weight: 500; font-size: 0.875rem; padding: 0.5rem 1.25rem; white-space: nowrap; } .lhc-filter .wp-block-button__link:hover { border-color: var(--lhc-navy-700); color: var(--lhc-navy-800); } .lhc-filter .wp-block-button__link[aria-pressed="true"] { background: var(--lhc-navy-700); border-color: var(--lhc-navy-700); color: #fff; } .lhc-unit { border: 1px solid var(--lhc-navy-100); border-radius: var(--lhc-radius); overflow: hidden; background: #fff; transition: box-shadow 0.2s ease, transform 0.2s ease; } .lhc-unit:hover { box-shadow: 0 6px 18px rgba(8, 20, 52, 0.08); /* `!important`: .lhc-unit juga membawa class .lhc-reveal (lihat inc/shortcode-alat-berat.php) — begitu kartu ter-scroll ke viewport, `.lhc-motion-on .lhc-reveal.is-in { transform: none; }` (spesifisitas lebih tinggi) menimpa translateY ini. Sama seperti pola `!important` yang sudah dipakai di file ini untuk melawan rule reset reveal lain (lihat `.lhc-stagger > .lhc-reveal` di bagian Motion & Aksesibilitas). */ transform: translateY(-2px) !important; } .lhc-unit .lhc-shot { border-radius: 0; } /* Galeri PhotoSwipe (unit dengan >=2 foto) — lihat assets/alat-berat-gallery.js */ .lhc-unit-gallery { position: relative; display: block; } .lhc-unit-gallery .lhc-pswp-item { display: block; cursor: zoom-in; } .lhc-gallery-badge { position: absolute; right: 0.6rem; bottom: 0.6rem; padding: 0.25rem 0.6rem; border-radius: var(--lhc-radius-sm); background: rgba(8, 20, 52, 0.75); color: #fff; font-family: var(--lhc-mono); font-size: 0.7rem; letter-spacing: 0.02em; } .lhc-unit__body { padding: 1.25rem; } .lhc-unit__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .lhc-unit__head h3 { margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--lhc-navy-950); } .lhc-unit__n { margin: 0; font-family: var(--lhc-mono); font-size: 0.75rem; font-weight: 600; color: var(--lhc-gold-600); white-space: nowrap; } .lhc-unit__body .lhc-arrow--sm { margin-top: 1rem; } .lhc-unit.is-hidden { display: none; } /* ========================================================================= 11. KEUNGGULAN ========================================================================= */ .lhc-feats { display: grid; gap: 1.75rem 2rem; margin-top: 2.25rem; } @media (min-width: 640px) { .lhc-feats { grid-template-columns: 1fr 1fr; } } .lhc-feat h3 { display: flex; align-items: center; gap: 0.75rem; margin: 0; font-size: 1rem; font-weight: 700; color: var(--lhc-navy-950); } .lhc-feat h3::before { content: ""; flex: 0 0 auto; width: 22px; height: 22px; background: var(--lhc-gold-600); -webkit-mask: var(--lhc-ico) no-repeat center / contain; mask: var(--lhc-ico) no-repeat center / contain; } .lhc-feat p { margin: 0.5rem 0 0; font-size: 0.9375rem; color: var(--lhc-muted); line-height: 1.7; } .lhc-ico--clock { --lhc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E"); } .lhc-ico--bolt { --lhc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3L4 14h6l-1 7 9-11h-6l1-7z'/%3E%3C/svg%3E"); } .lhc-ico--shield { --lhc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); } .lhc-ico--wrench { --lhc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4.5 4.5 0 00-6 6L4 17v3h3l4.7-4.7a4.5 4.5 0 006-6l-2.6 2.6-2.3-2.3 2.9-2.6z'/%3E%3C/svg%3E"); } .lhc-ico--pulse { --lhc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l2-6 4 12 2-6h6'/%3E%3C/svg%3E"); } .lhc-ico--globe { --lhc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3.5 9h17M3.5 15h17M12 3a15 15 0 010 18M12 3a15 15 0 000 18'/%3E%3C/svg%3E"); } .lhc-note { margin: 2rem 0 0; border: 1px solid rgba(232, 181, 70, 0.4); background: rgba(232, 181, 70, 0.1); border-radius: var(--lhc-radius-sm); padding: 1rem 1.25rem; font-size: 0.9375rem; color: var(--lhc-navy-800); line-height: 1.7; } /* ========================================================================= 12. PITA STATISTIK ========================================================================= */ .lhc-band { background: var(--lhc-navy-900); border-top: 4px solid rgba(232, 181, 70, 0.7); border-bottom: 4px solid rgba(232, 181, 70, 0.7); padding-block: 3rem; } .lhc-band__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.5rem; text-align: center; } .lhc-band__item { display: flex; flex-direction: column-reverse; gap: 0.5rem; } .lhc-band__k { margin: 0; font-family: var(--lhc-mono); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lhc-navy-200); } .lhc-band__v { margin: 0; font-family: var(--lhc-mono); font-size: 2.25rem; font-weight: 600; color: #fff; line-height: 1.1; } .lhc-band__v.is-pending { font-size: 1.5rem; color: var(--lhc-gold); } .lhc-band__item.is-wide { grid-column: span 2; } @media (min-width: 1024px) { .lhc-band { padding-block: 4rem; } .lhc-band__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .lhc-band__item.is-wide { grid-column: span 1; } .lhc-band__v { font-size: 3rem; } .lhc-band__v.is-pending { font-size: 1.875rem; } } /* Sama seperti .lhc-trust di atas: kalau cuma satu kartu yang tersisa, satu baris terpusat, bukan grid 2/5 kolom dengan celah kosong. `is-wide` (span 2 kolom) dinetralkan supaya tidak ikut memengaruhi pemusatan kalau kartu yang bertahan justru "Unit alat berat". */ .lhc-band__grid:has(> .lhc-band__item:only-child) { grid-template-columns: minmax(0, max-content); justify-content: center; } .lhc-band__item:only-child { grid-column: auto; } /* Task 19: pola yang sama dengan .lhc-trust di atas — dua kartu (proyek selesai + provinsi) pas di grid mobile repeat(2, 1fr), tapi grid desktop 5 kolom menyisakan tiga kolom kosong. `:nth-child(2):last-child` cuma cocok kalau totalnya persis dua. */ @media (min-width: 1024px) { .lhc-band__grid:has(> .lhc-band__item:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================================= 13. PROYEK ========================================================================= */ /* .lhc-ruler / .lhc-ruler-cap / .lhc-scroll-x DIHAPUS di fix review putaran akhir (31 Juli 2026) — deretan tahun di atas timeline "Proyek Unggulan" dihapus total (bukan diperbaiki jadi render), lihat catatan panjang di lhc_render_proyek_unggulan_section() (inc/shortcode-proyek.php). Tidak ada pemanggil lain yang tersisa untuk ketiga class ini. */ .lhc-proj { border: 1px solid var(--lhc-navy-100); border-radius: var(--lhc-radius); overflow: hidden; background: #fff; transition: box-shadow 0.2s ease, transform 0.2s ease; } .lhc-proj:hover { box-shadow: 0 6px 18px rgba(8, 20, 52, 0.08); /* `!important`: .lhc-proj selalu dirender di dalam wrapper .lhc-reveal--timeline (lihat inc/shortcode-proyek.php) — begitu ter-scroll ke viewport, rule reset reveal dengan spesifisitas lebih tinggi menimpa translateY ini. Sama alasannya dengan .lhc-unit di atas. */ transform: translateY(-2px) !important; } .lhc-proj .lhc-shot { border-radius: 0; } .lhc-proj__body { padding: 1.5rem; } .lhc-proj__meta { margin: 0; font-family: var(--lhc-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--lhc-gold-600); } .lhc-proj__body h3 { margin: 0.5rem 0 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.4; color: var(--lhc-navy-950); } .lhc-proj__body p:last-child { margin: 0.5rem 0 0; font-size: 0.9375rem; color: var(--lhc-muted); } .lhc-project-video .lhc-h2 { max-width: 48rem; } .lhc-project-video__meta { margin-top: 0.75rem; color: var(--lhc-navy-200); } .lhc-project-video__frame { margin-top: 2rem; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--lhc-radius); background: #000; } .lhc-project-video__frame video { display: block; width: 100%; height: 100%; object-fit: cover; } /* Showcase video proyek unggulan — beberapa slide, tombol panah kalau lebih dari satu (lihat inc/shortcode-proyek.php & assets/bnl.js §8). */ .lhc-video-nav { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 1.5rem; } .lhc-video-prev, .lhc-video-next { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); background: transparent; color: #fff; font-size: 1.25rem; line-height: 1; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .lhc-video-prev:hover, .lhc-video-next:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.6); } .lhc-video-counter { color: var(--lhc-navy-200); min-width: 4ch; text-align: center; } .lhc-project-timeline { position: relative; grid-template-columns: minmax(0, 1fr); gap: 2rem; margin-top: 2.5rem; } .lhc-project-timeline::before { content: ""; position: absolute; inset-block: 1rem; left: 50%; width: 2px; transform: translateX(-50%); background: linear-gradient(var(--lhc-gold), var(--lhc-navy-400)); } .lhc-proj-group { display: grid; grid-template-columns: minmax(0, 1fr) 3.5rem minmax(0, 1fr); column-gap: 1rem; align-items: start; } .lhc-project-timeline .lhc-proj-year { z-index: 2; grid-column: 2; grid-row: 1; justify-self: center; display: flex; align-items: center; justify-content: center; width: 3.25rem; height: 1.75rem; margin: 0.5rem 0 0; border: 1px solid var(--lhc-gold); border-radius: 999px; background: var(--lhc-navy-950); font-family: var(--lhc-mono); font-size: 0.625rem; font-weight: 600; color: var(--lhc-gold); } .lhc-project-timeline .lhc-proj { z-index: 1; grid-row: 1; align-self: start; border-color: rgba(232, 181, 70, 0.45); } .lhc-project-timeline .lhc-proj--left { grid-column: 1; } .lhc-project-timeline .lhc-proj--right { grid-column: 3; } .lhc-project-timeline .lhc-proj__year-inline { display: none; } .lhc-motion-on .lhc-reveal--timeline { --lhc-motion-y: 0; } .lhc-motion-on .lhc-reveal--timeline:not(.is-in)::before { transform: translateX(-50%) scaleY(0); transform-origin: top; } .lhc-motion-on .lhc-reveal--timeline::before { transition: transform 0.72s cubic-bezier(0.16, 1, 0.3, 1); } .lhc-motion-on .lhc-reveal--timeline .lhc-proj-year, .lhc-motion-on .lhc-reveal--timeline .lhc-proj { opacity: 0; transition: opacity 0.54s cubic-bezier(0.22, 1, 0.36, 1), transform 0.54s cubic-bezier(0.22, 1, 0.36, 1); } .lhc-motion-on .lhc-reveal--timeline .lhc-proj-year { transform: scale(0.96); } .lhc-motion-on .lhc-reveal--timeline .lhc-proj--left { transform: translateX(-12px); } .lhc-motion-on .lhc-reveal--timeline .lhc-proj--right { transform: translateX(12px); } .lhc-motion-on .lhc-reveal--timeline.is-in .lhc-proj-year, .lhc-motion-on .lhc-reveal--timeline.is-in .lhc-proj { opacity: 1; transform: none; } .lhc-motion-on .lhc-reveal--timeline .lhc-proj-group:nth-child(1) > * { transition-delay: 0.12s; } .lhc-motion-on .lhc-reveal--timeline .lhc-proj-group:nth-child(2) > * { transition-delay: 0.2s; } .lhc-motion-on .lhc-reveal--timeline .lhc-proj-group:nth-child(3) > * { transition-delay: 0.28s; } .lhc-motion-on .lhc-reveal--timeline .lhc-proj-group:nth-child(4) > * { transition-delay: 0.36s; } .lhc-motion-on .lhc-reveal--timeline .lhc-proj-group:nth-child(5) > * { transition-delay: 0.44s; } @media (max-width: 767px) { .lhc-project-timeline { gap: 1.75rem; margin-top: 2rem; } .lhc-project-timeline::before { left: 1.625rem; transform: none; } .lhc-motion-on .lhc-reveal--timeline:not(.is-in)::before { transform: scaleY(0); } .lhc-proj-group { grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: 0.75rem; row-gap: 1rem; } .lhc-project-timeline .lhc-proj-year { grid-column: 1; } .lhc-project-timeline .lhc-proj { grid-column: 2; grid-row: auto; border-radius: var(--lhc-radius-sm); } .lhc-motion-on .lhc-reveal--timeline .lhc-proj--left, .lhc-motion-on .lhc-reveal--timeline .lhc-proj--right { transform: translateY(10px); } .lhc-motion-on .lhc-reveal--timeline.is-in .lhc-proj { transform: none; } .lhc-project-timeline .lhc-proj__body { padding: 1rem; } .lhc-project-timeline .lhc-proj__meta { font-size: 0.625rem; letter-spacing: 0.02em; line-height: 1.35; } .lhc-project-timeline .lhc-proj__body h3 { margin-top: 0.375rem; font-size: 0.9375rem; line-height: 1.35; } .lhc-project-timeline .lhc-proj__body p:last-child { margin-top: 0.375rem; font-size: 0.8125rem; line-height: 1.45; } } /* ========================================================================= 14. AREA OPERASIONAL (peta titik) ========================================================================= */ .lhc-map { display: grid; gap: 4px; max-width: 56rem; margin-top: 3rem; } .lhc-map span { aspect-ratio: 1; border-radius: 999px; } .lhc-map .is-land { background: rgba(95, 122, 181, 0.5); } .lhc-map .is-site { background: var(--lhc-gold); } .lhc-motion-on .lhc-reveal--map.is-in .is-site { animation: lhc-site-focus 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes lhc-site-focus { 0% { opacity: 0.35; box-shadow: 0 0 0 0 rgba(232, 181, 70, 0.5); } 100% { opacity: 1; box-shadow: 0 0 0 7px rgba(232, 181, 70, 0); } } .lhc-map:empty::before { content: "Peta titik lokasi proyek — dirender otomatis di halaman depan."; display: block; padding: 2rem; border: 1px dashed var(--lhc-navy-200); border-radius: var(--lhc-radius-sm); font-family: var(--lhc-mono); font-size: 0.75rem; color: var(--lhc-muted); } .lhc-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 1.75rem 0 0; padding: 0; font-family: var(--lhc-mono); font-size: 0.75rem; color: var(--lhc-muted); } .lhc-legend li { display: flex; align-items: center; gap: 0.5rem; } .lhc-legend li::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: rgba(95, 122, 181, 0.6); } .lhc-legend li:last-child::before { background: var(--lhc-gold); } .lhc-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0; padding: 0; } .lhc-chips li { border: 1px solid var(--lhc-navy-200); border-radius: 999px; padding: 0.25rem 0.75rem; font-family: var(--lhc-mono); font-size: 0.75rem; color: var(--lhc-navy-700); } /* Chip "+N provinsi lainnya" ditandai warna emas karena BUKAN nama provinsi, melainkan sisa hitungan. Disasar lewat class `.lhc-chips__more` (lihat inc/shortcode-area.php) — `:last-child` dulu dipakai dengan asumsi chip terakhir SELALU chip sisa itu, padahal chip itu cuma dirender kalau "Provinsi dilayani" > jumlah provinsi yang benar-benar terdata. Tanpa chip sisa, sorotan emas jatuh ke provinsi terakhir menurut abjad — provinsi acak yang tampil seolah punya arti khusus. */ .lhc-chips li.lhc-chips__more { border-color: rgba(232, 181, 70, 0.4); color: var(--lhc-gold-600); } /* ========================================================================= 15. MUTU & LEGALITAS ========================================================================= */ .lhc-cert { padding: 1rem; border-radius: var(--lhc-radius); background: #fff; } .lhc-cert__preview { background: #fff; border-radius: var(--lhc-radius-sm); } .lhc-cert__preview img { height: auto; object-fit: contain; } .lhc-cert__caption { margin: 0.875rem 0 0; font-size: 0.875rem; line-height: 1.6; color: var(--lhc-muted); } .lhc-cert__actions { margin-top: 1rem; } .lhc-cert-section .lhc-mono { color: var(--lhc-navy-200); } .lhc-legal { list-style: none; display: grid; gap: 0.75rem; margin: 1.5rem 0 0; padding: 0; } @media (min-width: 640px) { .lhc-legal { grid-template-columns: 1fr 1fr; } } .lhc-legal li { background: var(--lhc-navy-50); border-radius: var(--lhc-radius-sm); padding: 0.875rem 1rem; font-size: 0.875rem; font-weight: 500; color: var(--lhc-navy-800); } .lhc-legal li::before { content: ""; display: inline-block; vertical-align: -0.2em; width: 1.125rem; height: 1.125rem; margin-right: 0.75rem; background: var(--lhc-gold-600); -webkit-mask: var(--lhc-ico-check) no-repeat center / contain; mask: var(--lhc-ico-check) no-repeat center / contain; } .lhc-legal li em { display: block; margin-top: 0.375rem; padding-left: 1.875rem; font-family: var(--lhc-mono); font-size: 0.75rem; font-style: normal; font-weight: 400; color: var(--lhc-muted); } /* ========================================================================= 16. KLIEN ========================================================================= */ .lhc-sec--klien { padding-block: 3.5rem; border-top: 1px solid var(--lhc-navy-100); border-bottom: 1px solid var(--lhc-navy-100); } @media (min-width: 1024px) { .lhc-sec--klien { padding-block: 5rem; } } .lhc-klien-cap { margin: 0; text-align: center; font-family: var(--lhc-mono); font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--lhc-muted); } .lhc-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; } @media (min-width: 640px) { .lhc-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .lhc-logos figure { display: flex; align-items: center; justify-content: center; height: 6rem; margin: 0; padding: 1.25rem; background: #fff; border: 1px solid var(--lhc-navy-100); border-radius: var(--lhc-radius-sm); } .lhc-logos img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; } /* ========================================================================= 17. CTA BESAR ========================================================================= */ .lhc-cta { position: relative; isolation: isolate; background: var(--lhc-navy-950); color: #fff; overflow: hidden; padding-block: 5rem; text-align: center; } .lhc-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.06; background: repeating-linear-gradient(-45deg, transparent 0 26px, #e8b546 26px 34px); } .lhc-cta--video::before { opacity: 1; background: linear-gradient(180deg, rgba(8, 20, 52, 0.86), rgba(8, 20, 52, 0.76)), linear-gradient(90deg, rgba(8, 20, 52, 0.78), rgba(8, 20, 52, 0.42), rgba(8, 20, 52, 0.78)); } .lhc-cta__video { position: absolute; inset: 0; z-index: -2; margin: 0; border-radius: 0; } .lhc-cta__video video, .lhc-cta__video img { display: block; width: 100%; height: 100%; object-fit: cover; } .lhc-cta h2 { margin: 0 auto; max-width: 48rem; font-size: clamp(1.875rem, 1.1rem + 2.8vw, 2.9rem); font-weight: 800; line-height: 1.15; color: #fff; } .lhc-cta > .lhc-wrap > p { margin: 1.25rem auto 0; max-width: 36rem; color: var(--lhc-navy-200); line-height: 1.75; } .lhc-cta .lhc-cta-row { justify-content: center; } @media (min-width: 1024px) { .lhc-cta { padding-block: 8rem; } } /* ========================================================================= 18. FOOTER ========================================================================= */ .lhc-footer { background: var(--lhc-navy-950); border-top: 1px solid rgba(255, 255, 255, 0.1); color: var(--lhc-navy-200); } .lhc-footer a { color: var(--lhc-navy-200); text-decoration: none; } .lhc-footer a:hover { color: #fff; } .lhc-footer__cols { display: grid; gap: 2.5rem; padding-block: 3.5rem; } @media (min-width: 1024px) { .lhc-footer__cols { grid-template-columns: 2fr 1fr 1fr 1.4fr; padding-block: 5rem; } } .lhc-footer h3 { margin: 0; font-family: var(--lhc-display); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.04em; color: #fff; } .lhc-footer ul { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.625rem; font-size: 0.9375rem; } .lhc-footer__about p { margin: 1.25rem 0 0; max-width: 24rem; font-size: 0.9375rem; line-height: 1.7; } .lhc-footer__social { display: flex; align-items: center; gap: 0.875rem; margin-top: 1.5rem; color: var(--lhc-navy-200); } .lhc-footer__social-icon { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; color: inherit; transition: color 0.15s ease; } .lhc-footer__social-icon:hover, .lhc-footer__social-icon:focus-visible { color: var(--lhc-gold); } .lhc-footer__social-icon svg { display: block; width: 100%; height: 100%; } .lhc-footer__contact ul { gap: 0.75rem; font-size: 0.875rem; } .lhc-footer__contact li { display: flex; gap: 0.75rem; } /* Ikon per baris kontak, disasar lewat class yang menamai ISI barisnya — BUKAN `li:nth-child(n)` seperti sebelumnya. Review Task 12 temuan lanjutan: baris jam operasional ([lhc_footer_jam], inc/footer-settings.php) menghilangkan `

`-nya SELURUHNYA kalau jam operasional belum diisi — dan itu keadaan KEDUA situs sekarang. Begitu baris ketiga hilang, `nth-child(3)` (jam) jatuh ke baris alamat, jadi alamat tampil dengan ikon jam dinding, bukan pin lokasi. Pemetaan posisional apa pun akan salah lagi begitu satu baris opsional absen atau ada baris baru disisipkan; class eksplisit tidak bisa bergeser. Selektor ::before sengaja didaftar per class (bukan `li::before` umum): `

Query Loop, bukan grid item-nya langsung.

sudah meregang setinggi baris, tapi kartunya sendiri setinggi isinya — artikel tanpa Gambar Andalan jadi hanya 195px di sebelah tetangganya yang 354px, menyisakan lubang di dalam baris. `height: 100%` membuat kartu mengisi penuh selnya sehingga tinggi antar-kartu selalu rata. */ height: 100%; background: linear-gradient(150deg, #102965 0%, #0c1d4d 55%, #081434 100%); } .lhc-art-card--overlay > .lhc-shot, .lhc-art-card--overlay > .lhc-art-card__body { grid-column: 1; grid-row: 1; } .lhc-art-card--overlay .lhc-shot { margin: 0; } /* WordPress inti menyetel `.wp-block-post-featured-image { position: relative }`. Akibatnya tautan sekartu di bawah (`a::after` dengan `inset: 0`) mengacu ke KOTAK FOTO, bukan ke kartu — pada kartu yang teksnya lebih tinggi daripada fotonya, sisa kartu di bawah foto jadi mati klik. Dikembalikan ke `static` supaya acuannya naik ke `.lhc-art-card--overlay`. Efek sampingnya justru diperlukan: elemen absolut yang acuannya berada DI LUAR kotak ini tidak lagi ikut terpangkas `overflow: hidden` milik `.lhc-shot`, jadi tautannya benar-benar menutup seluruh kartu — tanpa perlu melepas `overflow: hidden` (yang kalau dilepas malah membuat ukuran minimum grid item kembali ke lebar asli file gambar dan menjebol tata letak di layar sempit). Ornamen sudut emas tidak dipakai kartu ini, jadi tidak ada yang bergantung pada `relative` di sini. */ .lhc-art-card--overlay > .lhc-shot { position: static; } /* `z-index` wajib di sini. core/post-featured-image merender , dan `a` itu INLINE — dalam urutan cat CSS, konten inline berada di atas *background* elemen blok. Jadi tanpa penaikan lapisan, gradasi gelap milik badan kartu ini tercetak DI BAWAH foto: fotonya tampil terang penuh dan judul putih di atasnya tidak terbaca. Bukan soal urutan DOM — menukar posisi blok di template tidak akan menolongnya. */ .lhc-art-card--overlay .lhc-art-card__body { position: relative; z-index: 2; align-self: end; padding: 4.5rem 1.25rem 1.25rem; background: linear-gradient( to top, rgba(8, 20, 52, 0.94) 0%, rgba(8, 20, 52, 0.78) 42%, rgba(8, 20, 52, 0) 100% ); } .lhc-art-card--overlay .lhc-art-card__body .lhc-mono { color: rgba(255, 255, 255, 0.72); } .lhc-art-card--overlay .lhc-art-card__body h3 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 1.125rem; } .lhc-art-card--overlay .lhc-art-card__body h3 a, .lhc-art-card--overlay .lhc-art-card__body h3 a:hover { color: #fff; } .lhc-art-card--overlay:hover .lhc-art-card__body h3 a { color: var(--lhc-gold); } .lhc-art-card--overlay .lhc-art-card__excerpt { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: rgba(255, 255, 255, 0.82); font-size: 0.875rem; } /* Seluruh permukaan kartu jadi satu target klik. Tautan gambar yang dilebarkan (bukan tautan judul): judul ada DI DALAM badan kartu yang absolut, jadi `inset: 0` di sana cuma akan menutupi badan kartu, bukan seluruh kartu. */ .lhc-art-card--overlay .wp-block-post-featured-image a::after { content: ""; position: absolute; inset: 0; /* 3 = DI ATAS badan kartu (2). Lapisannya transparan, jadi gradasi dan teks di bawahnya tetap terlihat utuh — yang naik cuma target kliknya, supaya area tanggal/judul/ringkasan ikut bisa diklik, bukan cuma judulnya saja. */ z-index: 3; } /* Badge kategori di sudut kanan atas foto — z-index di atas tautan yang dilebarkan supaya tetap bisa diklik menuju arsip kategorinya. */ .lhc-art-card__cat { position: absolute; top: 0.875rem; right: 0.875rem; /* Paling atas: badan kartu di lapisan 2 dan tautan sekartu di lapisan 3, jadi badge harus di 4 supaya tautan kategorinya tetap bisa diklik. */ z-index: 4; border-radius: 999px; background: var(--lhc-gold); padding: 0.25rem 0.625rem; font-family: var(--lhc-mono); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lhc-navy-950); } .lhc-art-card__cat a { color: inherit; text-decoration: none; } /* ========================================================================= 23. PENYESUAIAN EDITOR ========================================================================= */ .editor-styles-wrapper .lhc-header, .editor-styles-wrapper .lhc-wa { position: relative; inset: auto; } .editor-styles-wrapper .lhc-hero { min-height: 40rem; } .editor-styles-wrapper .lhc-reveal { opacity: 1; transform: none; animation: none; } /* Badge dibuat mengalir normal di editor supaya mudah diklik & tidak menutupi blok lain; di halaman jadi tetap menumpuk di sudut foto. */ .editor-styles-wrapper .lhc-badge { position: static; display: inline-block; margin-top: 1rem; }