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; } @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

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; }