/* ========================================================================== YDML Lestari — Sistem Desain Palet diturunkan dari lanskap Papua Selatan: rawa sagu, savana Wasur, oker tanah, dan kapur. Motif "pita anyaman" dipakai sebagai tanda tangan visual (pembatas seksi, aksen judul, penanda slider). ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKEN -------------------------------------------------------------------------- */ :root { /* Warna */ --rawa-900: #06241C; --rawa-800: #0B3B2E; --rawa-700: #0F4A39; --rawa-600: #14614A; --rawa-100: #DCE9E3; --savana: #7D9A3E; --savana-l: #A9C062; --savana-d: #5C7326; --oker: #C1631A; --oker-d: #9A4C11; --oker-l: #E39B54; --tanah: #8C2F1D; --kapur: #F7F4EC; --kapur-2: #EDE7D8; --kapur-3: #DED6C2; --arang: #1C1B18; --abu: #5F5C54; --abu-l: #8B877D; --putih: #FFFFFF; /* Semantik */ --permukaan: var(--putih); --bg: var(--putih); --bg-alt: var(--kapur); --bg-deep: var(--rawa-800); --teks: var(--arang); --teks-lembut: var(--abu); --garis: var(--kapur-3); --aksen: var(--oker); --primer: var(--rawa-800); /* Tipografi */ --font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif; --font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --fs-eyebrow: 0.74rem; --fs-kecil: 0.875rem; --fs-body: 1.0625rem; --fs-lead: 1.1875rem; --fs-h4: 1.25rem; --fs-h3: 1.5rem; --fs-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.85rem); --fs-h1: clamp(2.1rem, 1.3rem + 3.4vw, 3.9rem); --fs-hero: clamp(2.4rem, 1.2rem + 4.6vw, 4.6rem); /* Ruang */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 5.5rem; --sp-10: 7rem; --lebar: 1240px; --lebar-baca: 760px; --radius: 4px; --radius-l: 10px; --bayang-1: 0 1px 2px rgba(6,36,28,.06), 0 4px 14px rgba(6,36,28,.06); --bayang-2: 0 6px 18px rgba(6,36,28,.10), 0 18px 46px rgba(6,36,28,.10); --pola-sarang-terang: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='28' viewBox='0 0 48 27.71'%3E%3Cg fill='none' stroke='%230B3B2E' stroke-opacity='0.13' stroke-width='1'%3E%3Cpath d='M-16 13.855 L-8 0 L8 0 L16 13.855 L8 27.71 L-8 27.71 Z'/%3E%3Cpath d='M8 27.71 L16 13.855 L32 13.855 L40 27.71 L32 41.565 L16 41.565 Z'/%3E%3Cpath d='M8 -13.855 L16 -27.71 L32 -27.71 L40 -13.855 L32 0 L16 0 Z'/%3E%3Cpath d='M32 13.855 L40 0 L56 0 L64 13.855 L56 27.71 L40 27.71 Z'/%3E%3C/g%3E%3C/svg%3E"); --pola-sarang-gelap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='28' viewBox='0 0 48 27.71'%3E%3Cg fill='none' stroke='%23C1631A' stroke-opacity='0.22' stroke-width='1'%3E%3Cpath d='M-16 13.855 L-8 0 L8 0 L16 13.855 L8 27.71 L-8 27.71 Z'/%3E%3Cpath d='M8 27.71 L16 13.855 L32 13.855 L40 27.71 L32 41.565 L16 41.565 Z'/%3E%3Cpath d='M8 -13.855 L16 -27.71 L32 -27.71 L40 -13.855 L32 0 L16 0 Z'/%3E%3Cpath d='M32 13.855 L40 0 L56 0 L64 13.855 L56 27.71 L40 27.71 Z'/%3E%3C/g%3E%3C/svg%3E"); --transisi: 260ms cubic-bezier(.22,.61,.36,1); --tinggi-header: 84px; color-scheme: light; } /* -------------------------------------------------------------------------- 1b. MODE GELAP -------------------------------------------------------------------------- Hanya token permukaan dan teks yang dibalik. Warna merek (rawa, oker, savana, tanah) sengaja dipertahankan supaya identitas YDML tidak berubah. Atribut data-tema dipasang pada elemen oleh ydml.js. -------------------------------------------------------------------------- */ [data-tema="gelap"] { --putih: #0E1614; --permukaan:#121D1A; --kapur: #16241F; --kapur-2: #1C2E27; --kapur-3: #2A3B34; --arang: #E9EFEA; --abu: #AAB7B0; --abu-l: #869089; --rawa-100: #1E3A31; /* Hijau daun yang cukup terang untuk dibaca di atas permukaan gelap. */ --hijau-baca: #8FC7A6; --bayang-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.35); --bayang-2: 0 6px 18px rgba(0,0,0,.45), 0 18px 46px rgba(0,0,0,.4); --pola-sarang-terang: var(--pola-sarang-gelap); color-scheme: dark; } /* Teks dan tautan yang semula hijau tua perlu dicerahkan di mode gelap, sementara elemen di dalam blok gelap (footer, hero, seksi rawa) sudah punya aturan warnanya sendiri dan tidak ikut terpengaruh. */ [data-tema="gelap"] a { color: var(--hijau-baca); } [data-tema="gelap"] a:hover { color: var(--oker-l); } [data-tema="gelap"] h1, [data-tema="gelap"] h2, [data-tema="gelap"] h3, [data-tema="gelap"] h4, [data-tema="gelap"] h5, [data-tema="gelap"] h6 { color: var(--teks); } [data-tema="gelap"] .kartu h3 a, [data-tema="gelap"] .pilar h3 a, [data-tema="gelap"] .produk h3 a, [data-tema="gelap"] .publikasi h3 a, [data-tema="gelap"] .wilayah__daftar li b, [data-tema="gelap"] .pengantar__arti b { color: var(--teks); } [data-tema="gelap"] .merek__nama { color: var(--teks); } [data-tema="gelap"] .pilar__ikon { color: #fff; } [data-tema="gelap"] .label, [data-tema="gelap"] .kartu__label { background: var(--rawa-100); color: var(--hijau-baca); } [data-tema="gelap"] .tombol--garis { border-color: var(--hijau-baca); color: var(--hijau-baca); } [data-tema="gelap"] .tombol-ikon:hover { color: var(--hijau-baca); } [data-tema="gelap"] .nav-utama > ul > li:hover > a, [data-tema="gelap"] .nav-utama ul ul li a:hover { color: var(--hijau-baca); } [data-tema="gelap"] .widget .tagcloud a, [data-tema="gelap"] .widget .wp-block-tag-cloud a { color: var(--hijau-baca); } /* -------------------------------------------------------------------------- 2. RESET & DASAR -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--tinggi-header) + 16px); } body { margin: 0; background: var(--bg); color: var(--teks); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.68; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, video, iframe { max-width: 100%; height: auto; display: block; } figure { margin: 0; } a { color: var(--rawa-700); text-decoration: none; transition: color var(--transisi); } a:hover { color: var(--oker); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.14; letter-spacing: -.018em; color: var(--arang); margin: 0 0 var(--sp-4); text-wrap: balance; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); } p { margin: 0 0 var(--sp-4); } p:last-child { margin-bottom: 0; } ul, ol { padding-left: 1.25rem; } blockquote { margin: var(--sp-6) 0; padding: var(--sp-2) 0 var(--sp-2) var(--sp-5); border-left: 3px solid var(--oker); font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; line-height: 1.42; color: var(--rawa-800); } blockquote cite { display: block; margin-top: var(--sp-3); font-family: var(--font-body); font-size: var(--fs-kecil); font-style: normal; color: var(--teks-lembut); } hr { border: 0; border-top: 1px solid var(--garis); margin: var(--sp-7) 0; } code, kbd, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; } pre { background: var(--kapur); padding: var(--sp-4); border-radius: var(--radius); overflow-x: auto; border: 1px solid var(--garis); } table { width: 100%; border-collapse: collapse; margin-bottom: var(--sp-5); } th, td { padding: var(--sp-3); border-bottom: 1px solid var(--garis); text-align: left; } th { font-family: var(--font-display); font-weight: 600; background: var(--kapur); } ::selection { background: var(--oker); color: #fff; } :focus-visible { outline: 3px solid var(--oker); outline-offset: 3px; border-radius: 2px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; left: 50%; top: -80px; transform: translateX(-50%); background: var(--oker); color: #fff; padding: .7rem 1.4rem; z-index: 2000; font-weight: 600; border-radius: 0 0 var(--radius) var(--radius); transition: top var(--transisi); } .skip-link:focus { top: 0; color: #fff; } /* -------------------------------------------------------------------------- 3. TATA LETAK -------------------------------------------------------------------------- */ .ydml-wrap { width: 100%; max-width: var(--lebar); margin-inline: auto; padding-inline: var(--sp-5); } .ydml-wrap--sempit { max-width: 880px; } .ydml-wrap--baca { max-width: var(--lebar-baca); } .seksi { padding-block: var(--sp-9); position: relative; } .seksi--rapat { padding-block: var(--sp-8); } .seksi--kapur { background: var(--bg-alt); } .seksi--rawa { background: var(--rawa-800); color: var(--rawa-100); } .seksi--rawa h2, .seksi--rawa h3, .seksi--rawa h4 { color: #fff; } .seksi--rawa a { color: var(--oker-l); } .grid { display: grid; gap: var(--sp-5); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } /* -------------------------------------------------------------------------- 4. TANDA TANGAN VISUAL — "PITA ANYAMAN" Motif anyaman noken/tikar Malind, murni CSS. -------------------------------------------------------------------------- */ .anyaman { height: 10px; width: 100%; background-image: repeating-linear-gradient(45deg, var(--oker) 0 6px, transparent 6px 12px), repeating-linear-gradient(-45deg, var(--rawa-600) 0 6px, transparent 6px 12px); background-color: var(--kapur-2); opacity: .9; } .anyaman--tipis { height: 6px; } .anyaman--gelap { background-color: var(--rawa-900); } /* Aksen garis oker di bawah judul seksi */ .judul-seksi { margin-bottom: var(--sp-6); } .judul-seksi .eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--oker); margin-bottom: var(--sp-3); } .judul-seksi .eyebrow::before { content: ""; width: 26px; height: 6px; flex: none; background-image: repeating-linear-gradient(45deg, currentColor 0 4px, transparent 4px 8px); } .seksi--rawa .judul-seksi .eyebrow { color: var(--savana-l); } .judul-seksi h2 { margin-bottom: var(--sp-3); } .judul-seksi p { max-width: 62ch; color: var(--teks-lembut); font-size: var(--fs-lead); } .seksi--rawa .judul-seksi p { color: rgba(255,255,255,.78); } .judul-seksi--tengah { text-align: center; } .judul-seksi--tengah p { margin-inline: auto; } .judul-seksi--tengah .eyebrow::before { display: none; } .judul-seksi--baris { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; } /* -------------------------------------------------------------------------- 5. TOMBOL -------------------------------------------------------------------------- */ .tombol { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 600; font-size: .95rem; letter-spacing: .01em; padding: .85rem 1.6rem; border: 2px solid transparent; border-radius: var(--radius); cursor: pointer; transition: all var(--transisi); text-align: center; } .tombol svg { width: 1em; height: 1em; flex: none; transition: transform var(--transisi); } .tombol:hover svg { transform: translateX(4px); } .tombol--utama { background: var(--oker); color: #fff; } .tombol--utama:hover { background: var(--oker-d); color: #fff; } .tombol--rawa { background: var(--rawa-800); color: #fff; } .tombol--rawa:hover { background: var(--rawa-600); color: #fff; } .tombol--garis { border-color: var(--rawa-800); color: var(--rawa-800); background: transparent; } .tombol--garis:hover { background: var(--rawa-800); color: #fff; } .tombol--terang { border-color: rgba(255,255,255,.55); color: #fff; background: transparent; } .tombol--terang:hover { background: #fff; color: var(--rawa-800); border-color: #fff; } .tautan-panah { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-display); font-weight: 600; font-size: .93rem; color: var(--oker); border-bottom: 2px solid transparent; padding-bottom: 2px; } .tautan-panah:hover { border-bottom-color: var(--oker); color: var(--oker-d); } /* -------------------------------------------------------------------------- 6. HEADER -------------------------------------------------------------------------- */ .header-atas { background: var(--rawa-900); color: rgba(255,255,255,.72); font-size: .8rem; } .header-atas .ydml-wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 38px; } .header-atas a { color: rgba(255,255,255,.72); } .header-atas a:hover { color: var(--oker-l); } .header-atas__kiri { display: flex; align-items: center; gap: var(--sp-4); } .header-atas__kanan { display: flex; align-items: center; gap: var(--sp-4); } .situs-header { position: sticky; top: 0; z-index: 900; background: var(--permukaan); border-bottom: 1px solid var(--garis); transition: box-shadow var(--transisi), background var(--transisi); } .situs-header.melayang { box-shadow: var(--bayang-1); } .header-utama { display: flex; align-items: center; gap: var(--sp-4); min-height: var(--tinggi-header); } .nav-utama { min-width: 0; flex: 0 1 auto; } .header-aksi { flex: none; } .merek { display: flex; align-items: center; gap: .8rem; flex: 0 1 auto; min-width: 0; margin-right: auto; } .merek img { max-height: 56px; width: auto; } .merek__teks { display: flex; flex-direction: column; line-height: 1.1; } .merek__nama { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; color: var(--rawa-800); letter-spacing: -.02em; } .merek__sub { font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--oker); font-weight: 600; } .merek__lambang { width: 46px; height: 46px; flex: none; } /* Navigasi utama + mega menu */ .nav-utama > ul { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; } .nav-utama li { position: relative; } .nav-utama > ul > li > a { display: flex; align-items: center; gap: .35rem; font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--arang); padding: .7rem .72rem; border-radius: var(--radius); white-space: nowrap; position: relative; } .nav-utama > ul > li > a::after { content: ""; position: absolute; left: .72rem; right: .72rem; bottom: .35rem; height: 3px; background: var(--oker); transform: scaleX(0); transform-origin: left; transition: transform var(--transisi); } .nav-utama > ul > li:hover > a::after, .nav-utama > ul > li.current-menu-item > a::after, .nav-utama > ul > li.current-menu-ancestor > a::after { transform: scaleX(1); } .nav-utama > ul > li:hover > a { color: var(--rawa-700); } .nav-utama > ul > li.menu-item-has-children > a::before { content: ""; width: 7px; height: 7px; order: 2; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .55; } .nav-utama ul ul { position: absolute; top: calc(100% + 2px); left: 0; z-index: 50; min-width: 260px; list-style: none; margin: 0; padding: .5rem; background: var(--permukaan); border: 1px solid var(--garis); border-top: 3px solid var(--oker); box-shadow: var(--bayang-2); border-radius: 0 0 var(--radius) var(--radius); opacity: 0; visibility: hidden; transform: translateY(8px); transition: all var(--transisi); } .nav-utama li:hover > ul, .nav-utama li:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(0); } .nav-utama ul ul li a { display: block; padding: .58rem .8rem; font-size: .92rem; font-weight: 500; color: var(--arang); border-radius: var(--radius); } .nav-utama ul ul li a:hover { background: var(--kapur); color: var(--rawa-700); padding-left: 1.05rem; } .nav-utama ul ul ul { top: -.5rem; left: 100%; } .header-aksi { display: flex; align-items: center; gap: .6rem; flex: none; } .tombol-ikon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--garis); border-radius: var(--radius); color: var(--arang); cursor: pointer; transition: all var(--transisi); } .tombol-ikon:hover { background: var(--kapur); border-color: var(--rawa-600); color: var(--rawa-700); } .tombol-ikon svg { width: 19px; height: 19px; } .tombol-donasi { padding: .72rem 1.25rem; font-size: .9rem; } /* Pengalih bahasa */ .pengalih-bahasa { display: flex; align-items: center; gap: .25rem; font-family: var(--font-display); font-size: .78rem; font-weight: 600; } .pengalih-bahasa a { padding: .18rem .45rem; border-radius: 3px; letter-spacing: .06em; } .pengalih-bahasa a.aktif { background: var(--oker); color: #fff; } /* Menu mobile */ .tombol-menu { display: none; } .panel-mobile { position: fixed; inset: 0 0 0 auto; width: min(400px, 88vw); z-index: 1200; background: var(--rawa-900); color: #fff; padding: var(--sp-5); transform: translateX(100%); transition: transform var(--transisi); overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-4); } .panel-mobile.terbuka { transform: translateX(0); } .panel-mobile__kepala { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--sp-4); border-bottom: 1px solid rgba(255,255,255,.14); } .panel-mobile__kepala .merek__nama { color: #fff; } .panel-mobile ul { list-style: none; margin: 0; padding: 0; } .panel-mobile > .nav-mobile > ul > li { border-bottom: 1px solid rgba(255,255,255,.09); } .panel-mobile a { color: #fff; display: block; padding: .8rem 0; font-family: var(--font-display); font-weight: 600; font-size: 1rem; } .panel-mobile a:hover { color: var(--oker-l); } .panel-mobile ul ul { padding-left: var(--sp-4); border-left: 2px solid rgba(255,255,255,.14); margin-bottom: var(--sp-3); } .panel-mobile ul ul a { font-weight: 400; font-size: .93rem; padding: .45rem 0; color: rgba(255,255,255,.78); } .panel-mobile .sub-toggle { background: transparent; border: 0; color: #fff; cursor: pointer; padding: .5rem; position: absolute; right: 0; top: .35rem; } .panel-mobile .menu-item-has-children { position: relative; } .panel-mobile .menu-item-has-children > ul { display: none; } .panel-mobile .menu-item-has-children.terbuka > ul { display: block; } .panel-mobile .sub-toggle svg { width: 16px; height: 16px; transition: transform var(--transisi); } .panel-mobile .menu-item-has-children.terbuka > .sub-toggle svg { transform: rotate(180deg); } .tirai { position: fixed; inset: 0; background: rgba(6,36,28,.6); z-index: 1100; opacity: 0; visibility: hidden; transition: all var(--transisi); backdrop-filter: blur(2px); } .tirai.tampil { opacity: 1; visibility: visible; } /* Overlay pencarian */ .overlay-cari { position: fixed; inset: 0; z-index: 1300; background: rgba(6,36,28,.97); display: flex; align-items: center; justify-content: center; padding: var(--sp-5); opacity: 0; visibility: hidden; transition: all var(--transisi); } .overlay-cari.tampil { opacity: 1; visibility: visible; } .overlay-cari__isi { width: min(720px, 100%); } .overlay-cari label { display: block; font-family: var(--font-display); color: var(--savana-l); font-size: var(--fs-eyebrow); letter-spacing: .16em; text-transform: uppercase; margin-bottom: var(--sp-3); } .overlay-cari input[type="search"] { width: 100%; background: transparent; border: 0; border-bottom: 2px solid rgba(255,255,255,.35); color: #fff; font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 2.6rem); font-weight: 700; padding: .4rem 0; outline: none; } .overlay-cari input::placeholder { color: rgba(255,255,255,.3); } .overlay-cari__tutup { position: absolute; top: 24px; right: 24px; color: #fff; background: transparent; border: 0; cursor: pointer; } .overlay-cari__tutup svg { width: 28px; height: 28px; } /* -------------------------------------------------------------------------- 7. HERO SLIDER -------------------------------------------------------------------------- */ .hero { position: relative; background: var(--rawa-900); overflow: hidden; } .hero__panggung { position: relative; min-height: clamp(460px, 74vh, 720px); } .hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 900ms ease, visibility 900ms; display: flex; align-items: flex-end; } .hero__slide.aktif { opacity: 1; visibility: visible; } .hero__slide::before { content: ""; position: absolute; inset: 0; background-image: var(--gambar); background-size: cover; background-position: center; transform: scale(1.06); transition: transform 9s linear; } .hero__slide.aktif::before { transform: scale(1); } .hero__slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,36,28,.30) 0%, rgba(6,36,28,.55) 46%, rgba(6,36,28,.88) 100%); } .hero__isi { position: relative; z-index: 2; padding-block: var(--sp-8) var(--sp-9); max-width: 780px; } .hero__eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--oker-l); margin-bottom: var(--sp-4); } .hero__eyebrow::before { content: ""; width: 30px; height: 6px; background-image: repeating-linear-gradient(45deg, currentColor 0 4px, transparent 4px 8px); } .hero__judul { font-size: var(--fs-hero); color: #fff; margin-bottom: var(--sp-4); text-shadow: 0 2px 24px rgba(0,0,0,.35); } .hero__teks { color: rgba(255,255,255,.86); font-size: var(--fs-lead); max-width: 56ch; margin-bottom: var(--sp-5); } .hero__aksi { display: flex; flex-wrap: wrap; gap: var(--sp-3); } .hero__nav { position: absolute; left: 0; right: 0; bottom: 26px; z-index: 4; } .hero__nav .ydml-wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); } .hero__titik { display: flex; gap: .5rem; } .hero__titik button { width: 34px; height: 6px; padding: 0; border: 0; cursor: pointer; background: rgba(255,255,255,.3); transition: all var(--transisi); } .hero__titik button.aktif { background: var(--oker); width: 54px; } .hero__hitung { font-family: var(--font-display); font-weight: 700; color: rgba(255,255,255,.7); font-size: .85rem; letter-spacing: .1em; } .hero__hitung b { color: #fff; font-size: 1.15rem; } .hero__panah { display: flex; gap: .5rem; } .hero__panah button { width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all var(--transisi); backdrop-filter: blur(4px); } .hero__panah button:hover { background: var(--oker); border-color: var(--oker); } .hero__panah svg { width: 18px; height: 18px; } .hero .anyaman { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; } /* Hero halaman dalam */ .hero-halaman { position: relative; background: var(--rawa-800); color: #fff; padding-block: var(--sp-9) var(--sp-8); background-size: cover; background-position: center; } .hero-halaman::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,36,28,.72), rgba(6,36,28,.93)); } .hero-halaman > * { position: relative; z-index: 2; } .hero-halaman h1 { color: #fff; margin-bottom: var(--sp-3); } .hero-halaman p { color: rgba(255,255,255,.82); max-width: 62ch; } .hero-halaman .anyaman { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; } .remah { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .84rem; margin-bottom: var(--sp-4); color: rgba(255,255,255,.6); } .remah a { color: rgba(255,255,255,.82); } .remah a:hover { color: var(--oker-l); } .remah span[aria-hidden] { opacity: .5; } /* -------------------------------------------------------------------------- 8. KARTU -------------------------------------------------------------------------- */ .kartu { background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; height: 100%; transition: transform var(--transisi), box-shadow var(--transisi), border-color var(--transisi); } .kartu:hover { transform: translateY(-5px); box-shadow: var(--bayang-2); border-color: var(--rawa-100); } .kartu__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--kapur-2); } .kartu__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--transisi); } .kartu:hover .kartu__media img { transform: scale(1.06); } .kartu__isi { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; } .kartu__judul { font-size: 1.14rem; line-height: 1.3; margin: 0; } .kartu__judul a { color: var(--arang); } .kartu__judul a:hover { color: var(--oker); } .kartu__ringkas { font-size: .95rem; color: var(--teks-lembut); margin: 0; } .kartu__kaki { margin-top: auto; padding-top: var(--sp-2); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); } .label { display: inline-block; font-family: var(--font-display); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: .3rem .6rem; background: var(--rawa-100); color: var(--rawa-700); border-radius: 2px; } .label--oker { background: rgba(193,99,26,.14); color: var(--oker-d); } .label--savana { background: rgba(125,154,62,.18); color: var(--savana-d); } .meta { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--abu-l); } .meta svg { width: 14px; height: 14px; } /* Tanggal tempel di media */ .kartu__tanggal { position: absolute; left: var(--sp-4); top: var(--sp-4); z-index: 2; background: var(--oker); color: #fff; text-align: center; font-family: var(--font-display); line-height: 1; padding: .5rem .6rem; border-radius: 2px; } .kartu__tanggal b { display: block; font-size: 1.35rem; font-weight: 700; } .kartu__tanggal span { display: block; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; margin-top: .18rem; } /* Kartu pilar — tanpa gambar, bernomor karena empat pilar adalah kerangka tetap */ .pilar { background: var(--permukaan); border: 1px solid var(--garis); border-top: 4px solid var(--oker); padding: var(--sp-6) var(--sp-5); height: 100%; display: flex; flex-direction: column; gap: var(--sp-3); transition: transform var(--transisi), box-shadow var(--transisi); } .pilar:hover { transform: translateY(-5px); box-shadow: var(--bayang-2); } .pilar__ikon { width: 44px; height: 44px; color: var(--rawa-700); } .pilar h3 { font-size: 1.16rem; margin: 0; } .pilar p { font-size: .95rem; color: var(--teks-lembut); margin: 0; } .pilar:nth-child(2) { border-top-color: var(--savana); } .pilar:nth-child(3) { border-top-color: var(--rawa-600); } .pilar:nth-child(4) { border-top-color: var(--tanah); } /* Kartu program besar */ .program-kartu { position: relative; overflow: hidden; border-radius: var(--radius); min-height: 320px; display: flex; align-items: flex-end; } .program-kartu img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--transisi); } .program-kartu::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,36,28,0) 28%, rgba(6,36,28,.86) 100%); transition: background var(--transisi); } .program-kartu:hover img { transform: scale(1.07); } .program-kartu:hover::after { background: linear-gradient(180deg, rgba(6,36,28,.15) 10%, rgba(11,59,46,.94) 100%); } .program-kartu__isi { position: relative; z-index: 2; padding: var(--sp-5); color: #fff; width: 100%; } .program-kartu__isi h3 { color: #fff; font-size: 1.3rem; margin-bottom: .4rem; } .program-kartu__isi p { color: rgba(255,255,255,.82); font-size: .93rem; margin: 0 0 var(--sp-3); max-height: 0; opacity: 0; overflow: hidden; transition: all 400ms var(--transisi); } .program-kartu:hover .program-kartu__isi p, .program-kartu:focus-within .program-kartu__isi p { max-height: 130px; opacity: 1; } .program-kartu__isi .tautan-panah { color: var(--oker-l); } /* -------------------------------------------------------------------------- 9. SEKSI KHUSUS BERANDA -------------------------------------------------------------------------- */ /* Pengantar dua kolom */ .pengantar { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sp-8); align-items: center; } .pengantar__gambar { position: relative; } .pengantar__gambar img { border-radius: var(--radius); width: 100%; position: relative; z-index: 1; } .pengantar__gambar::before { content: ""; position: absolute; inset: auto auto -18px -18px; width: 132px; height: 132px; background-image: repeating-linear-gradient(45deg, var(--savana) 0 5px, transparent 5px 10px), repeating-linear-gradient(-45deg, var(--oker) 0 5px, transparent 5px 10px); opacity: .8; z-index: 0; } .pengantar__arti { margin-top: var(--sp-5); padding: var(--sp-5); background: var(--kapur); border-left: 4px solid var(--oker); border-radius: 0 var(--radius) var(--radius) 0; } .pengantar__arti b { font-family: var(--font-display); color: var(--rawa-800); } /* Dampak dalam angka */ .angka-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); } .angka { text-align: center; padding: var(--sp-5) var(--sp-3); position: relative; } .angka + .angka::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: rgba(255,255,255,.16); } .angka__nilai { font-family: var(--font-display); font-size: clamp(2.2rem, 1.2rem + 3vw, 3.4rem); font-weight: 700; color: #fff; line-height: 1; letter-spacing: -.03em; } .angka__nilai .satuan { color: var(--oker-l); } .angka__label { margin-top: var(--sp-3); font-size: .9rem; color: rgba(255,255,255,.76); letter-spacing: .02em; } /* Wilayah kerja */ .wilayah { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--sp-8); align-items: center; } .wilayah__daftar { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: grid; gap: .1rem; } .wilayah__daftar li { display: flex; align-items: baseline; gap: var(--sp-3); padding: .85rem 0; border-bottom: 1px solid var(--garis); } .wilayah__daftar li b { font-family: var(--font-display); font-size: 1.02rem; color: var(--rawa-800); min-width: 132px; } .wilayah__daftar li span { font-size: .92rem; color: var(--teks-lembut); } .wilayah__peta { background: var(--kapur); border: 1px solid var(--garis); border-radius: var(--radius); padding: var(--sp-6); } /* Produk kampung */ .produk { text-align: center; background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--radius); overflow: hidden; transition: all var(--transisi); height: 100%; } .produk:hover { box-shadow: var(--bayang-2); transform: translateY(-5px); } .produk__media { aspect-ratio: 1; overflow: hidden; background: var(--kapur-2); } .produk__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--transisi); } .produk:hover .produk__media img { transform: scale(1.07); } .produk__isi { padding: var(--sp-4); } .produk__isi h3 { font-size: 1.02rem; margin-bottom: .3rem; } .produk__asal { font-size: .82rem; color: var(--abu-l); } /* Komitmen */ .komitmen { display: flex; flex-wrap: wrap; gap: var(--sp-5); justify-content: center; margin-top: var(--sp-6); } .komitmen__butir { display: flex; align-items: center; gap: .8rem; background: var(--kapur); border: 1px solid var(--garis); padding: .9rem 1.35rem; border-radius: 100px; } .komitmen__butir svg { width: 22px; height: 22px; color: var(--savana-d); flex: none; } .komitmen__butir b { font-family: var(--font-display); font-size: .95rem; } /* Publikasi */ .publikasi { display: flex; gap: var(--sp-4); background: var(--permukaan); border: 1px solid var(--garis); padding: var(--sp-4); border-radius: var(--radius); transition: all var(--transisi); height: 100%; } .publikasi:hover { box-shadow: var(--bayang-2); border-color: var(--rawa-100); } .publikasi__sampul { width: 96px; flex: none; aspect-ratio: 3/4; object-fit: cover; background: var(--kapur-2); border-radius: 2px; } .publikasi__isi { display: flex; flex-direction: column; gap: .5rem; } .publikasi__isi h3 { font-size: 1.02rem; margin: 0; line-height: 1.3; } .publikasi__isi .meta { margin-top: auto; } /* Galeri */ .galeri-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); } .galeri-item { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 2px; } .galeri-item:nth-child(1) { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; } .galeri-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--transisi); } .galeri-item:hover img { transform: scale(1.08); } .galeri-item__tirai { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(6,36,28,.85)); display: flex; align-items: flex-end; padding: var(--sp-4); opacity: 0; transition: opacity var(--transisi); } .galeri-item:hover .galeri-item__tirai { opacity: 1; } .galeri-item__tirai span { color: #fff; font-family: var(--font-display); font-weight: 600; font-size: .95rem; } /* Ajakan akhir */ .ajakan { position: relative; overflow: hidden; background: var(--rawa-800); color: #fff; } .ajakan::before { content: ""; position: absolute; inset: 0; opacity: .12; background-image: repeating-linear-gradient(45deg, var(--savana-l) 0 14px, transparent 14px 28px), repeating-linear-gradient(-45deg, var(--oker-l) 0 14px, transparent 14px 28px); } .ajakan .ydml-wrap { position: relative; z-index: 2; } .ajakan__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--sp-8); align-items: center; } .ajakan h2 { color: #fff; } .ajakan p { color: rgba(255,255,255,.84); } .form-langganan { display: flex; gap: .5rem; margin-top: var(--sp-4); flex-wrap: wrap; } .form-langganan input[type="email"] { flex: 1; min-width: 220px; padding: .85rem 1rem; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; border-radius: var(--radius); font-family: var(--font-body); font-size: .95rem; } .form-langganan input::placeholder { color: rgba(255,255,255,.5); } .form-langganan input:focus { outline: none; border-color: var(--oker); background: rgba(255,255,255,.14); } /* Mitra */ .mitra-baris { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-7); } .mitra-baris img { max-height: 52px; width: auto; filter: grayscale(1); opacity: .6; transition: all var(--transisi); } .mitra-baris img:hover { filter: none; opacity: 1; } /* -------------------------------------------------------------------------- 10. ARTIKEL / ARSIP -------------------------------------------------------------------------- */ .isi-artikel { font-size: var(--fs-lead); line-height: 1.78; } .isi-artikel > * { margin-bottom: var(--sp-5); } .isi-artikel h2 { font-size: 1.75rem; margin-top: var(--sp-7); } .isi-artikel h3 { font-size: 1.35rem; margin-top: var(--sp-6); } .isi-artikel img, .isi-artikel figure { border-radius: var(--radius); } .isi-artikel figcaption { font-size: .85rem; color: var(--teks-lembut); margin-top: .6rem; text-align: center; } .isi-artikel a { border-bottom: 1px solid rgba(193,99,26,.4); } .isi-artikel a:hover { border-bottom-color: var(--oker); } .isi-artikel ul, .isi-artikel ol { padding-left: 1.4rem; } .isi-artikel li { margin-bottom: .5rem; } .isi-artikel .wp-block-image { margin-block: var(--sp-6); } .alignwide { width: min(1100px, 94vw); margin-inline: calc(50% - min(550px, 47vw)); max-width: none; } .alignfull { width: 100vw; margin-inline: calc(50% - 50vw); max-width: none; } .alignleft { float: left; margin: 0 var(--sp-5) var(--sp-4) 0; } .alignright { float: right; margin: 0 0 var(--sp-4) var(--sp-5); } .aligncenter { margin-inline: auto; } .artikel-kepala { margin-bottom: var(--sp-6); } .artikel-meta { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; font-size: .88rem; color: var(--teks-lembut); } .artikel-meta__penulis { display: flex; align-items: center; gap: .6rem; } .artikel-meta__penulis img { width: 34px; height: 34px; border-radius: 50%; } .berbagi { display: flex; align-items: center; gap: .6rem; margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--garis); flex-wrap: wrap; } .berbagi b { font-family: var(--font-display); font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--teks-lembut); } .berbagi a { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--garis); border-radius: var(--radius); color: var(--arang); } .berbagi a:hover { background: var(--rawa-800); border-color: var(--rawa-800); color: #fff; } .berbagi svg { width: 17px; height: 17px; } .navigasi-pos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-7); } .navigasi-pos a { display: block; padding: var(--sp-5); border: 1px solid var(--garis); border-radius: var(--radius); } .navigasi-pos a:hover { border-color: var(--rawa-600); background: var(--kapur); } .navigasi-pos span { display: block; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--oker); font-family: var(--font-display); font-weight: 600; margin-bottom: .4rem; } .navigasi-pos strong { font-family: var(--font-display); font-size: 1.02rem; color: var(--arang); line-height: 1.3; } .navigasi-pos .selanjutnya { text-align: right; } /* Layout dengan sidebar */ .isi-sidebar { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: var(--sp-8); align-items: start; } .sidebar { position: sticky; top: calc(var(--tinggi-header) + 24px); display: grid; gap: var(--sp-5); } .widget { background: var(--kapur); border: 1px solid var(--garis); border-radius: var(--radius); padding: var(--sp-5); } .widget-title { font-size: 1.02rem; margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 2px solid var(--oker); display: inline-block; } .widget ul { list-style: none; padding: 0; margin: 0; } .widget li { padding: .5rem 0; border-bottom: 1px solid var(--garis); font-size: .95rem; } .widget li:last-child { border-bottom: 0; } /* Paginasi */ .paginasi { display: flex; justify-content: center; gap: .4rem; margin-top: var(--sp-8); flex-wrap: wrap; } .paginasi .page-numbers { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 .8rem; border: 1px solid var(--garis); font-family: var(--font-display); font-weight: 600; color: var(--arang); border-radius: var(--radius); } .paginasi .page-numbers:hover { border-color: var(--rawa-600); background: var(--kapur); } .paginasi .page-numbers.current { background: var(--rawa-800); border-color: var(--rawa-800); color: #fff; } /* Filter arsip */ .filter-baris { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--sp-6); } .filter-baris a { padding: .5rem 1.05rem; border: 1px solid var(--garis); border-radius: 100px; font-family: var(--font-display); font-weight: 600; font-size: .88rem; color: var(--arang); } .filter-baris a:hover, .filter-baris a.aktif { background: var(--rawa-800); border-color: var(--rawa-800); color: #fff; } /* Tim */ .tim-kartu { text-align: center; } .tim-kartu__foto { aspect-ratio: 3/4; overflow: hidden; border-radius: var(--radius); background: var(--kapur-2); margin-bottom: var(--sp-4); position: relative; } .tim-kartu__foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.25); transition: all 600ms var(--transisi); } .tim-kartu:hover .tim-kartu__foto img { filter: none; transform: scale(1.04); } .tim-kartu h3 { font-size: 1.05rem; margin-bottom: .2rem; } .tim-kartu .jabatan { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--oker); font-family: var(--font-display); font-weight: 600; } /* Form & komentar */ input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], textarea, select { width: 100%; padding: .8rem 1rem; border: 1px solid var(--garis); border-radius: var(--radius); font-family: var(--font-body); font-size: .98rem; background: var(--permukaan); color: var(--teks); transition: border-color var(--transisi); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--rawa-600); box-shadow: 0 0 0 3px rgba(20,97,74,.12); } label { display: block; font-family: var(--font-display); font-weight: 600; font-size: .9rem; margin-bottom: .4rem; } input[type="submit"], button[type="submit"] { width: auto; background: var(--oker); color: #fff; border: 0; padding: .9rem 1.7rem; font-family: var(--font-display); font-weight: 600; border-radius: var(--radius); cursor: pointer; transition: background var(--transisi); } input[type="submit"]:hover, button[type="submit"]:hover { background: var(--oker-d); } .comment-list { list-style: none; padding: 0; } .comment-list .comment { padding: var(--sp-5) 0; border-bottom: 1px solid var(--garis); } .comment-list .children { list-style: none; padding-left: var(--sp-6); border-left: 2px solid var(--garis); } /* Kosong / 404 */ .kosong { text-align: center; padding-block: var(--sp-9); } .kosong__angka { font-family: var(--font-display); font-size: clamp(4rem, 14vw, 9rem); font-weight: 700; color: var(--kapur-3); line-height: 1; letter-spacing: -.05em; } /* -------------------------------------------------------------------------- 11. FOOTER -------------------------------------------------------------------------- Struktur konvensional (merek + tiga kolom tautan + kolom sosial), tetapi memakai palet dan tipografi YDML: latar rawa sagu paling gelap, garis aksen oker di atas, dan judul kolom bergaris anyaman. -------------------------------------------------------------------------- */ .situs-footer { background: var(--rawa-900); color: rgba(255,255,255,.7); font-size: .94rem; } .situs-footer a { color: rgba(255,255,255,.7); } .situs-footer a:hover { color: var(--oker-l); } /* Garis aksen tiga warna merek di bibir atas footer */ .footer-aksen { height: 4px; background: linear-gradient(90deg, var(--oker) 0%, var(--oker) 34%, var(--savana) 34%, var(--savana) 67%, var(--rawa-600) 67%, var(--rawa-600) 100%); } .footer-utama { padding-block: var(--sp-8); } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--sp-7); } /* Kolom merek */ .footer-logo { display: block; max-height: 84px; width: auto; margin-bottom: var(--sp-4); } .footer-nama { display: block; font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 1.16rem; line-height: 1.3; letter-spacing: -.01em; } .footer-tagline { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--oker-l); font-weight: 600; margin: .35rem 0 var(--sp-5); } .footer-alamat { display: flex; gap: .6rem; font-style: normal; line-height: 1.7; margin-bottom: var(--sp-4); max-width: 34ch; } .footer-alamat svg { width: 16px; height: 16px; flex: none; margin-top: .35rem; color: var(--savana-l); } .footer-kontak { list-style: none; padding: 0; margin: 0; } .footer-kontak li { display: flex; align-items: center; gap: .6rem; margin-bottom: .45rem; } .footer-kontak svg { width: 15px; height: 15px; flex: none; color: var(--savana-l); } /* Judul kolom */ .footer-judul { color: #fff; font-family: var(--font-display); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 var(--sp-4); padding-bottom: var(--sp-3); position: relative; } .footer-judul::after { content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 4px; background-image: repeating-linear-gradient(45deg, var(--oker) 0 4px, transparent 4px 8px); } .footer-kol ul { list-style: none; padding: 0; margin: 0; } .footer-kol li { margin-bottom: .5rem; } .footer-kol a { font-size: .94rem; display: inline-block; } .footer-kol a:hover { transform: translateX(3px); } /* Kolom sosial + tombol dukung */ .footer-kol--sosial .sosial { margin-bottom: var(--sp-5); } .footer-tombol { width: 100%; justify-content: center; } .sosial { display: flex; gap: .5rem; flex-wrap: wrap; } .sosial a { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius); color: #fff; transition: all var(--transisi); } .sosial a:hover { background: var(--oker); border-color: var(--oker); color: #fff; transform: translateY(-2px); } .sosial svg { width: 17px; height: 17px; } .footer-bawah { border-top: 1px solid rgba(255,255,255,.1); padding-block: var(--sp-4); font-size: .85rem; } .footer-bawah .ydml-wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; } .footer-bawah p { margin: 0; } .ke-atas { position: fixed; right: 24px; bottom: 24px; z-index: 800; width: 46px; height: 46px; border: 0; border-radius: var(--radius); background: var(--oker); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(12px); transition: all var(--transisi); box-shadow: var(--bayang-2); } .ke-atas.tampil { opacity: 1; visibility: visible; transform: translateY(0); } .ke-atas svg { width: 20px; height: 20px; } /* -------------------------------------------------------------------------- 12. ANIMASI MUNCUL SAAT GULIR -------------------------------------------------------------------------- */ .muncul { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--transisi), transform 700ms var(--transisi); } .muncul.tampil { opacity: 1; transform: none; } .muncul:nth-child(2) { transition-delay: 90ms; } .muncul:nth-child(3) { transition-delay: 180ms; } .muncul:nth-child(4) { transition-delay: 270ms; } .muncul:nth-child(5) { transition-delay: 360ms; } .muncul:nth-child(6) { transition-delay: 450ms; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .muncul { opacity: 1; transform: none; } .hero__slide::before { transform: none !important; } } /* -------------------------------------------------------------------------- 12b. SARANG LEBAH — KEGIATAN INTI (heksagonal) -------------------------------------------------------------------------- Geometri: heksagon "pointy-top" reguler punya rasio lebar:tinggi = 0.866. Tiap sel selebar 25% wadah, jadi tumpang-tindih antarbaris = tinggi/4 = 0.2887 x lebar sel = 7.22% dari lebar wadah. Baris genap digeser setengah sel (12.5%) supaya saling mengunci seperti sarang lebah. -------------------------------------------------------------------------- */ .seksi--sarang { position: relative; overflow: hidden; } .seksi--sarang::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--pola-sarang-terang); opacity: .5; } .seksi--sarang > .ydml-wrap { position: relative; z-index: 1; } .sarang { --hex-jarak: 9px; margin-top: var(--sp-6); } .sarang__baris { display: flex; flex-wrap: wrap; justify-content: center; } .sarang__baris--kunci { margin-top: -7.22%; } .sarang__baris--geser { transform: translateX(12.5%); } .sarang__sel { width: 25%; padding: 0 calc(var(--hex-jarak) / 2); } .sarang__hex { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 0.866; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background-size: cover; background-position: center; background-repeat: no-repeat; background-color: var(--rawa-700); color: #fff; text-align: center; text-decoration: none; transition: transform var(--transisi); } .sarang__hex.nada-1 { background-color: var(--rawa-700); } .sarang__hex.nada-2 { background-color: var(--rawa-600); } .sarang__hex.nada-3 { background-color: var(--savana); } .sarang__hex.nada-4 { background-color: var(--oker); } .sarang__hex::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,59,46,.68) 0%, rgba(6,36,28,.88) 100%); transition: background var(--transisi); } .sarang__hex:hover { transform: translateY(-5px); } .sarang__hex:hover::before { background: linear-gradient(180deg, rgba(11,59,46,.34) 0%, rgba(193,99,26,.72) 100%); } /* Cincin fokus digambar di dalam karena clip-path memotong outline. */ .sarang__hex:focus-visible { outline: none; } .sarang__hex:focus-visible::after { content: ""; position: absolute; inset: 0; z-index: 2; box-shadow: inset 0 0 0 4px var(--oker-l); clip-path: inherit; } .sarang__isi { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: 0 17%; } .sarang__judul { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: clamp(1rem, 1.35vw, 1.3rem); line-height: 1.2; letter-spacing: -.01em; } .sarang__garis { width: 36px; height: 2px; background: rgba(255,255,255,.55); } .sarang__teks { font-size: .86rem; line-height: 1.5; color: rgba(255,255,255,.9); } /* Lambang heksagon pada kartu pilar, supaya satu bahasa bentuk. */ .pilar__ikon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 62px; padding: 12px; color: #fff; background: var(--rawa-700); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); } .pilar:nth-child(2) .pilar__ikon { background: var(--savana); } .pilar:nth-child(3) .pilar__ikon { background: var(--rawa-600); } .pilar:nth-child(4) .pilar__ikon { background: var(--tanah); } /* -------------------------------------------------------------------------- 12c. AREA WIDGET -------------------------------------------------------------------------- */ /* Sidebar (blok maupun widget klasik) */ .widget p { font-size: .95rem; line-height: 1.7; } .widget img { max-width: 100%; height: auto; border-radius: var(--radius); } .widget select, .widget input[type="text"], .widget input[type="search"], .widget input[type="email"] { width: 100%; } .widget ul ul { padding-left: 1rem; margin-top: .45rem; } .widget .tagcloud a, .widget .wp-block-tag-cloud a { display: inline-block; margin: 0 .35rem .45rem 0; padding: .3rem .75rem; border: 1px solid var(--garis); border-radius: 100px; font-size: .8rem !important; color: var(--rawa-700); } .widget .tagcloud a:hover, .widget .wp-block-tag-cloud a:hover { background: var(--rawa-800); border-color: var(--rawa-800); color: #fff; } .widget .wp-block-latest-posts__post-title { font-weight: 600; } .widget .wp-block-latest-posts__post-date { font-size: .8rem; color: var(--teks-lembut); } .widget table { width: 100%; font-size: .88rem; } .widget .wp-block-search__inside-wrapper { gap: .4rem; } /* Pita widget di atas seksi ajakan */ .pita-widget { background: var(--kapur); border-top: 1px solid var(--garis); padding-block: var(--sp-6); } .pita-widget__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-6); align-items: center; } .judul-pita { font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--oker); margin-bottom: var(--sp-3); } .widget-pita img { max-width: 100%; height: auto; } .widget-pita ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1rem; } /* Widget di dalam footer gelap */ .widget-footer { margin-bottom: var(--sp-6); } .widget-footer:last-child { margin-bottom: 0; } .footer-judul { color: #fff; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: var(--sp-4); position: relative; padding-bottom: var(--sp-3); } .footer-judul::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 5px; background-image: repeating-linear-gradient(45deg, var(--oker) 0 4px, transparent 4px 8px); } .widget-footer ul { list-style: none; padding: 0; margin: 0; } .widget-footer li { margin-bottom: .55rem; } .widget-footer p { font-size: .94rem; line-height: 1.75; } .widget-footer img { max-width: 100%; height: auto; } .widget-footer select, .widget-footer input[type="text"], .widget-footer input[type="search"], .widget-footer input[type="email"] { width: 100%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); color: #fff; } .widget-footer .tagcloud a, .widget-footer .wp-block-tag-cloud a { border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.8); } .footer-baris-widget { margin-top: var(--sp-7); padding-top: var(--sp-6); border-top: 1px solid rgba(255,255,255,.12); display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-6); } /* -------------------------------------------------------------------------- 12d. HEADER & FOOTER — LAPISAN SARANG -------------------------------------------------------------------------- */ .header-atas { position: relative; overflow: hidden; } .header-atas::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--pola-sarang-gelap); opacity: .55; } .header-atas .ydml-wrap { position: relative; z-index: 1; } /* Penanda menu aktif: heksagon kecil di bawah butir menu. Dipasang sebagai ::before agar tidak bertabrakan dengan garis ::after. */ .nav-utama > ul > li.current-menu-item > a, .nav-utama > ul > li.current-menu-ancestor > a, .nav-utama > ul > li.current_page_item > a { position: relative; } .nav-utama > ul > li.current-menu-item > a::before, .nav-utama > ul > li.current-menu-ancestor > a::before, .nav-utama > ul > li.current_page_item > a::before { content: ""; position: absolute; left: 50%; bottom: -9px; margin-left: -5px; width: 10px; height: 12px; background: var(--oker); border: 0; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); transform: none; } .menu-atas, .menu-kebijakan { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; } .menu-atas a, .menu-kebijakan a { font-size: .82rem; } .footer-bawah p { margin: 0; } .eyebrow--terang { color: var(--oker-l); } .ajakan__aksi { margin-top: var(--sp-5); } .ajakan__surel h3 { font-size: 1.05rem; letter-spacing: .02em; } .ajakan__surel p { font-size: .95rem; } /* -------------------------------------------------------------------------- 13. RESPONSIF -------------------------------------------------------------------------- */ @media (max-width: 1080px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } .angka-grid { grid-template-columns: repeat(2, 1fr); } .angka + .angka::before { display: none; } .angka:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.14); } } @media (max-width: 960px) { :root { --tinggi-header: 70px; } .nav-utama, .header-atas__kiri, .tombol-donasi span.panjang { display: none; } .tombol-menu { display: inline-flex; } .isi-sidebar { grid-template-columns: 1fr; } .sidebar { position: static; } .pengantar, .wilayah, .ajakan__grid { grid-template-columns: 1fr; gap: var(--sp-6); } .grid--3 { grid-template-columns: repeat(2, 1fr); } .galeri-grid { grid-template-columns: repeat(2, 1fr); } .galeri-item:nth-child(1) { grid-column: span 2; grid-row: auto; aspect-ratio: 16/9; } .seksi { padding-block: var(--sp-8); } } @media (max-width: 680px) { :root { --sp-9: 3.5rem; --sp-8: 2.5rem; } .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } .angka-grid { grid-template-columns: 1fr 1fr; } .navigasi-pos { grid-template-columns: 1fr; } .navigasi-pos .selanjutnya { text-align: left; } .hero__panah, .hero__hitung { display: none; } .hero__nav .ydml-wrap { justify-content: center; } .hero__isi { padding-block: var(--sp-7) var(--sp-8); } .merek img { max-height: 42px; } .merek__nama { font-size: .98rem; } .merek__sub { font-size: .6rem; } .publikasi { flex-direction: column; } .publikasi__sampul { width: 100%; aspect-ratio: 16/9; } .ydml-wrap { padding-inline: var(--sp-4); } .footer-bawah .ydml-wrap { justify-content: center; text-align: center; } } @media (max-width: 420px) { .galeri-grid { grid-template-columns: 1fr; } .komitmen__butir { width: 100%; } } /* -------------------------------------------------------------------------- 14. CETAK -------------------------------------------------------------------------- */ @media print { .situs-header, .situs-footer, .hero__nav, .ke-atas, .berbagi, .sidebar, .navigasi-pos { display: none !important; } body { font-size: 11pt; color: #000; } a { color: #000; text-decoration: underline; } } /* -------------------------------------------------------------------------- 15. RESPONSIF — SARANG LEBAH & AREA WIDGET -------------------------------------------------------------------------- */ @media (max-width: 1024px) { /* Dua sel per baris. Baris PHP berisi empat sel akan membungkus jadi 2 + 2, jadi tumpang-tindih antarbaris dimatikan supaya tidak terbentuk tangga. */ .sarang__sel { width: 50%; margin-bottom: var(--hex-jarak); } .sarang__baris--kunci { margin-top: 0; } .sarang__baris--geser { transform: none; } .sarang__isi { padding: 0 15%; } .footer-baris-widget { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { /* Di layar sempit heksagon "pointy-top" jadi terlalu jangkung, jadi diubah menjadi heksagon melintang selebar layar. */ .sarang__sel { width: 100%; padding: 0; margin: 0 0 10px; } .sarang__hex { aspect-ratio: 2.05; clip-path: polygon(7% 0%, 93% 0%, 100% 50%, 93% 100%, 7% 100%, 0% 50%); } .sarang__isi { padding: 0 12%; gap: .4rem; } .sarang__judul { font-size: 1.08rem; } .sarang__teks { font-size: .84rem; } .footer-baris-widget, .pita-widget__grid { grid-template-columns: 1fr; } } .kotak-cari-hasil { max-width: 560px; margin-bottom: 2.5rem; } /* -------------------------------------------------------------------------- 16. HEADER — RENTANG SEMPIT (menu utama masih tampil) -------------------------------------------------------------------------- */ @media (min-width: 961px) and (max-width: 1320px) { .header-utama { gap: var(--sp-4); } .merek { max-width: 250px; } .merek__nama { font-size: 1rem; } .merek__sub { font-size: .6rem; } .nav-utama { min-width: 0; } .nav-utama > ul { gap: .1rem; flex-wrap: nowrap; } .nav-utama > ul > li > a { padding-inline: .55rem; font-size: .88rem; } .tombol-donasi { padding-inline: .9rem; } } /* -------------------------------------------------------------------------- 17. HEADER — JAM, PENGALIH BAHASA, TOMBOL TEMA -------------------------------------------------------------------------- */ /* Pengalih bahasa — sejajar dengan menu utama */ .pengalih-bahasa { display: inline-flex; align-items: center; } .pengalih-bahasa ul { display: flex; list-style: none; margin: 0; padding: 0; } .bahasa { display: inline-flex; border: 1px solid var(--garis); border-radius: var(--radius); overflow: hidden; background: var(--permukaan); } .bahasa a, .bahasa span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: .42rem .5rem; line-height: 1; font-family: var(--font-display); font-weight: 700; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--teks-lembut); background: transparent; transition: background var(--transisi), color var(--transisi); } .bahasa a:hover { background: var(--kapur); color: var(--rawa-700); } .bahasa .aktif, .bahasa .current-lang a { background: var(--oker); color: #fff; } .bahasa li + li a::before, .bahasa > a + a::before { content: none; } .bahasa > * + * { border-left: 1px solid var(--garis); } /* Tombol mode gelap/terang */ .tombol-tema { position: relative; overflow: hidden; } .tombol-tema svg { width: 19px; height: 19px; transition: transform var(--transisi), opacity var(--transisi); } .tombol-tema .ikon-bulan { position: absolute; opacity: 0; transform: rotate(-90deg) scale(.6); } [data-tema="gelap"] .tombol-tema .ikon-matahari { opacity: 0; transform: rotate(90deg) scale(.6); } [data-tema="gelap"] .tombol-tema .ikon-bulan { opacity: 1; transform: none; } /* Penyesuaian header di mode gelap */ [data-tema="gelap"] .situs-header { border-bottom: 1px solid var(--garis); } [data-tema="gelap"] .nav-utama > ul > li > a { color: var(--teks); } [data-tema="gelap"] .merek__nama { color: var(--teks); } [data-tema="gelap"] .overlay-cari { background: rgba(6,26,21,.97); } [data-tema="gelap"] .seksi--kapur { background: var(--kapur); } [data-tema="gelap"] img:not(.logo-merek):not(.footer-logo) { filter: brightness(.92) contrast(1.02); } @media (max-width: 960px) { .pengalih-bahasa { display: none; } .panel-mobile .pengalih-bahasa { display: inline-flex; margin-top: var(--sp-5); } .panel-mobile .bahasa { background: transparent; border-color: rgba(255,255,255,.25); } .panel-mobile .bahasa a { color: rgba(255,255,255,.75); } .panel-mobile .bahasa > * + * { border-left-color: rgba(255,255,255,.25); } .panel-mobile .tombol-tema { margin-top: var(--sp-4); color: #fff; border-color: rgba(255,255,255,.25); } } /* Logo merek dari berkas tema */ .logo-merek { max-height: 58px; width: auto; flex: none; } .merek img { max-height: 58px; } .header-aksi { display: flex; align-items: center; gap: .5rem; } @media (max-width: 1320px) { .logo-merek, .merek img { max-height: 48px; } } @media (max-width: 720px) { .logo-merek, .merek img { max-height: 42px; } } /* -------------------------------------------------------------------------- 18. RESPONSIF FOOTER -------------------------------------------------------------------------- */ @media (max-width: 1080px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } .footer-kol--sosial { grid-column: 1 / -1; } .footer-kol--sosial .sosial { justify-content: flex-start; } .footer-tombol { width: auto; } } @media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } .footer-merek { grid-column: 1 / -1; } } @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } .footer-bawah .ydml-wrap { justify-content: center; text-align: center; } }