/* --------------------------------------------------------------------------- Gaya bersama untuk /blog/ dan tiap artikel di dalamnya. Halaman jualan di akar menyimpan CSS-nya inline karena dia satu berkas. Blog punya lima halaman yang harus terlihat persis sama, jadi di sini stylesheet terpisah lebih murah daripada menyalin dua ribu baris lima kali. Bagian pertama berkas ini adalah salinan chrome dari index.html: token warna, tombol, kepala, laci, penutup, kaki, dan gerak. Disalin apa adanya, bukan ditulis ulang, supaya blog tidak pernah terasa seperti situs lain. Kalau token di index.html berubah, ubah juga di sini. Bagian kedua, mulai dari "Blog", baru milik halaman ini sendiri. --------------------------------------------------------------------------- */ :root { color-scheme: light dark; --kertas: #F4F3F0; --permukaan: #FFFFFF; --nampan: #E4E1DA; --garis: #E1DFD9; --garis-tebal: #C8C5BC; --tinta: #16161A; --redup: #62626A; --aksen: #0E7A43; --aksen-pendar: rgb(14 122 67 / 0.45); --aksen-tinta: #FFFFFF; --aksen-lembut: rgb(14 122 67 / 0.07); --stabilo: rgb(14 122 67 / 0.16); --kilau: rgb(255 255 255 / 0.16); --redam-gambar: none; --lebar: 1200px; --r-besar: 20px; --r-sedang: 14px; --r-kecil: 9px; --pegas: cubic-bezier(0.16, 1, 0.3, 1); --bayang: 0 1px 2px rgb(22 22 26 / 0.05), 0 24px 52px -26px rgb(22 22 26 / 0.24); } /* Tiga keadaan tema: mengikuti sistem (bawaan), dipaksa terang, dipaksa gelap. Atribut data-tema dipasang skrip kecil di sebelum CSS dibaca, jadi tidak ada kedipan tema saat halaman dimuat. Nilai gelapnya ditulis dua kali dengan sengaja. CSS tidak bisa menggabungkan sebuah media query dengan selektor atribut dalam satu aturan, jadi pilihannya antara menduplikasi empat belas baris ini atau memakai light-dark(), yang akan menjatuhkan warna sama sekali di peramban yang belum mendukungnya. Kalau nilainya diubah, ubah di KEDUA tempat. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="terang"]) { --kertas: #0B0B0C; --permukaan: #141416; --nampan: #17171A; --garis: #25252A; --garis-tebal: #3A3A41; --tinta: #ECECEC; --redup: #97979E; --aksen: #25D366; --aksen-pendar: rgb(37 211 102 / 0.50); --aksen-tinta: #16161A; --aksen-lembut: rgb(37 211 102 / 0.10); --stabilo: rgb(37 211 102 / 0.20); --kilau: rgb(22 22 26 / 0.14); --redam-gambar: brightness(0.86) saturate(0.92); --bayang: none; } } :root[data-tema="gelap"] { --kertas: #0B0B0C; --permukaan: #141416; --nampan: #17171A; --garis: #25252A; --garis-tebal: #3A3A41; --tinta: #ECECEC; --redup: #97979E; --aksen: #25D366; --aksen-pendar: rgb(37 211 102 / 0.50); --aksen-tinta: #16161A; --aksen-lembut: rgb(37 211 102 / 0.10); --stabilo: rgb(37 211 102 / 0.20); --kilau: rgb(22 22 26 / 0.14); --redam-gambar: brightness(0.86) saturate(0.92); --bayang: none; } /* color-scheme mengatur warna bawaan peramban: bilah gulir, kotak isian, dan latar di balik halaman. Harus ikut dipaksa, bukan cuma tokennya. */ :root[data-tema="terang"] { color-scheme: light; } :root[data-tema="gelap"] { color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Supaya block-size: auto bisa ditransisikan pada ::details-content. */ interpolate-size: allow-keywords; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--kertas); color: var(--tinta); font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; } /* Kepalanya lengket setinggi 68px. Tanpa ini, tiap lompatan dari tautan menu menaruh tepi atas seksi persis di y=0, jadi judulnya masuk ke bawah kepala dan pembaca mendarat di tengah paragraf. */ :where(section[id]) { scroll-margin-top: 92px; } :where(a, button, summary, iframe):focus-visible { outline: 2px solid var(--aksen); outline-offset: 3px; border-radius: var(--r-kecil); } .bungkus { width: 100%; max-width: var(--lebar); margin-inline: auto; padding-inline: 20px; } @media (min-width: 768px) { .bungkus { padding-inline: 40px; } } .mono { font-family: "Geist Mono", ui-monospace, "SF Mono", monospace; font-size: 12px; letter-spacing: 0.02em; color: var(--redup); } /* Kepala bagian: judul saja, tanpa label kecil di atasnya. Posisi bagian di halaman sudah cukup memberi tahu isinya apa. */ .judul-bagian { margin: 0; max-width: 20ch; font-size: clamp(1.875rem, 4.4vw, 2.75rem); font-weight: 600; line-height: 1.08; letter-spacing: -0.032em; text-wrap: balance; } .isi-bagian { margin: 18px 0 0; max-width: 56ch; color: var(--redup); font-size: clamp(0.9375rem, 1.6vw, 1.0625rem); text-wrap: pretty; } /* --- Tombol -------------------------------------------------------------- */ .tombol { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 12px 12px 12px 22px; border: 1px solid transparent; border-radius: 999px; font-size: 15px; font-weight: 500; white-space: nowrap; text-decoration: none; transition: transform 180ms var(--pegas), filter 180ms var(--pegas), border-color 180ms var(--pegas), background 180ms var(--pegas); } .tombol--utama { background: var(--aksen); color: var(--aksen-tinta); transform: translate(var(--tarik-x, 0px), var(--tarik-y, 0px)) scale(var(--tekan, 1)); } .tombol--utama:hover { filter: brightness(1.07); } .tombol--sunyi { padding-inline: 22px; border-color: var(--garis-tebal); color: var(--tinta); } .tombol--sunyi:hover { border-color: var(--tinta); background: var(--permukaan); } .tombol--sunyi:active { transform: scale(0.98); } .tombol--utama:active { --tekan: 0.97; } /* Panah tidak pernah telanjang di sebelah teks: dia punya lingkarannya sendiri, rata dengan tepi dalam tombol. */ .tombol__bulat { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: var(--kilau); transition: transform 220ms var(--pegas); } .tombol__bulat::before { content: ""; width: 6px; height: 6px; border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor; rotate: 45deg; translate: -1px 0; } .tombol--utama:hover .tombol__bulat { transform: translate(2px, -1px) scale(1.06); } /* --- Kepala -------------------------------------------------------------- */ /* Di puncak halaman kepala menyatu dengan kertas. Garis dan kacanya baru muncul setelah pembuka terlewat, jadi pengunjung dapat sinyal "kamu sudah turun" tanpa perlu tulisan apa pun. Yang berubah cuma warna dan opasitas. */ .kepala { position: sticky; top: 0; z-index: 20; background: transparent; transition: background 320ms var(--pegas), border-color 320ms var(--pegas); border-bottom: 1px solid transparent; } .kepala--turun { background: color-mix(in srgb, var(--kertas) 82%, transparent); backdrop-filter: blur(16px) saturate(170%); -webkit-backdrop-filter: blur(16px) saturate(170%); border-bottom-color: var(--garis); } .kepala__isi { position: relative; z-index: 26; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 68px; } .merek { display: inline-flex; align-items: baseline; gap: 9px; font-weight: 600; font-size: 15.5px; letter-spacing: -0.02em; text-decoration: none; } /* Dua berkas, satu per tema. Yang tidak dipakai disembunyikan lewat CSS supaya pergantiannya ikut sistem tanpa perlu JavaScript. */ .merek__logo { width: auto; height: 26px; translate: 0 3px; } .merek__logo--gelap { display: none; } /* Di 320px, lambang plus nama merek plus pengalih bahasa plus pengalih tema plus tombol WhatsApp tidak muat satu baris. Nama merek yang dilepas: lambangnya sudah mengenali, sedangkan tiga kontrol di kanan semuanya punya fungsi yang tidak bisa dihilangkan. */ .merek__nama { display: inline; } @media (prefers-color-scheme: dark) { :root:not([data-tema="terang"]) .merek__logo--terang { display: none; } :root:not([data-tema="terang"]) .merek__logo--gelap { display: inline; } } :root[data-tema="gelap"] .merek__logo--terang { display: none; } :root[data-tema="gelap"] .merek__logo--gelap { display: inline; } /* Nav, pengalih bahasa, dan pengalih tema. Di layar lebar satu baris mendatar; di layar sempit kelompok yang sama menjadi laci di balik tombol burger. Sebelumnya nav-nya cuma disembunyikan di bawah 900px, jadi pengunjung ponsel sama sekali tidak punya cara melompat antarbagian. */ .kepala__alat { display: flex; align-items: center; gap: 24px; margin-inline-start: auto; } .kepala__menu { display: flex; gap: 28px; } .burger { display: none; } /* Laci hanya dipasang kalau JavaScript hidup. Tanpa penanda ini, laci yang disembunyikan CSS tidak akan pernah bisa dibuka siapa pun; yang terjadi tanpa JavaScript cuma nav-nya turun ke baris berikutnya. */ /* Ambang laci 1180px, bukan 900px seperti dulu. Delapan tautan nav pada 14,5px plus lambang, pengalih tema, pengalih bahasa, dan tombol WhatsApp butuh sekitar 1180 piksel untuk berdiri satu baris tanpa satu pun labelnya terlipat. Di bawah itu flexbox tidak meluber, dia menyusutkan tautannya, jadi "Cara kerja" pecah jadi dua baris dan kepala terlihat rusak tanpa pernah memunculkan bilah gulir mendatar. Angka 900px yang lama sudah salah bahkan waktu tautannya masih tujuh: antara 900 dan 1120 label-labelnya memang sudah terlipat. Laci burger sudah berisi nav yang sama persis, jadi yang hilang di bawah 1180 cuma barisnya, bukan isinya. */ @media (max-width: 1179px) { :root[data-js] .kepala__alat { position: fixed; inset-block-start: 68px; inset-inline: 0; z-index: 25; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; padding: 14px 20px 22px; background: var(--kertas); border-bottom: 1px solid var(--garis); box-shadow: 0 24px 48px -28px rgb(0 0 0 / 0.5); translate: 0 -12px; opacity: 0; visibility: hidden; transition: translate 260ms var(--pegas), opacity 200ms var(--pegas), visibility 0s linear 260ms; } :root[data-js] .kepala__alat[data-buka] { translate: 0 0; opacity: 1; visibility: visible; transition-delay: 0s; } :root[data-js] .kepala__menu { display: grid; gap: 2px; flex-basis: 100%; } :root[data-js] .kepala__tautan { display: block; padding: 13px 0; font-size: 16px; border-bottom: 1px solid var(--garis); } :root[data-js] .kepala__tautan:last-child { border-bottom: 0; } /* Pengalih bahasa dan tema turun ke baris sendiri di dasar laci. */ :root[data-js] .kepala__alat > .bahasa, :root[data-js] .kepala__alat > .tema { margin-inline-start: 0; } :root[data-js] .burger { display: grid; } /* Tanpa JavaScript laci tidak pernah bisa dibuka, jadi isinya harus tetap terjangkau. Flex tidak membungkus dengan sendirinya: tanpa aturan ini tujuh tautan plus dua kontrol memaksa kepala meleber 485px di layar 390px. Dibungkus ke baris berikutnya, dan tinggi kepala dibiarkan mengikuti isi. */ :root:not([data-js]) .kepala__isi { flex-wrap: wrap; height: auto; gap: 12px; padding-block: 12px; } :root:not([data-js]) .kepala__alat { flex-wrap: wrap; flex-basis: 100%; margin-inline-start: 0; gap: 12px 18px; } :root:not([data-js]) .kepala__menu { flex-wrap: wrap; gap: 10px 18px; } .tirai { position: fixed; inset: 0; z-index: 24; background: rgb(6 6 7 / 0.5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } } /* Tiga garis burger digambar dari satu elemen: garis tengahnya badan span, dua lainnya pseudo-element. Saat terbuka yang tengah memudar dan dua lainnya berputar jadi silang, satu properti transform per garis. */ .burger { position: relative; flex: none; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--garis); border-radius: 999px; background: transparent; color: var(--tinta); cursor: pointer; transition: border-color 180ms var(--pegas), background 180ms var(--pegas); } .burger:hover { border-color: var(--garis-tebal); background: var(--permukaan); } .burger:focus-visible { outline: 2px solid var(--aksen); outline-offset: 3px; } .burger__garis, .burger__garis::before, .burger__garis::after { position: absolute; inset-inline-start: 50%; width: 16px; height: 1.6px; background: currentColor; border-radius: 2px; translate: -50% 0; transition: rotate 260ms var(--pegas), translate 260ms var(--pegas), background 160ms var(--pegas); } .burger__garis { inset-block-start: 50%; translate: -50% -50%; } .burger__garis::before { content: ""; inset-block-start: -5px; } .burger__garis::after { content: ""; inset-block-start: 5px; } /* Yang disembunyikan cuma garis tengahnya. Memakai opacity di sini akan ikut menghapus ::before dan ::after yang ada di dalamnya, jadi silangnya tidak pernah muncul dan tombolnya terlihat kosong. */ .burger[aria-expanded="true"] .burger__garis { background: transparent; } .burger[aria-expanded="true"] .burger__garis::before { rotate: 45deg; translate: -50% 5px; } .burger[aria-expanded="true"] .burger__garis::after { rotate: -45deg; translate: -50% -5px; } @media (prefers-reduced-motion: reduce) { .kepala__alat, .burger__garis, .burger__garis::before, .burger__garis::after { transition: none; } } .kepala__tautan { font-size: 14.5px; color: var(--redup); text-decoration: none; transition: color 180ms var(--pegas); } .kepala__tautan:hover { color: var(--tinta); } /* Pengalih bahasa. Tautan biasa ke /en/ dan kembali, bukan tombol berskrip: halaman ini berjanji tetap terbaca tanpa JavaScript, dan itu termasuk bisa berpindah bahasa. Disisipkan saat build, jadi tidak ada di sumbernya. */ .bahasa { flex: none; display: grid; place-items: center; min-width: 38px; height: 38px; padding-inline: 10px; margin-inline-start: auto; border: 1px solid var(--garis); border-radius: 999px; font-family: "Geist Mono", ui-monospace, "SF Mono", monospace; font-size: 11.5px; letter-spacing: 0.04em; color: var(--redup); text-decoration: none; transition: color 180ms var(--pegas), border-color 180ms var(--pegas), background 180ms var(--pegas); } .bahasa:hover { color: var(--tinta); border-color: var(--garis-tebal); background: var(--permukaan); } /* Kalau pengalih bahasa ada, dialah yang mendorong kelompok kanan; pengalih tema tidak boleh ikut mendorong atau keduanya jadi terpisah jauh. */ .bahasa ~ .tema { margin-inline-start: 0; } /* Sabit dan cakram digambar dari satu box-shadow yang sama, jadi peralihannya bisa ditransisikan mulus tanpa berkas ikon apa pun. Sabit berarti "pindah ke gelap", cakram penuh berarti "pindah ke terang". */ .tema { flex: none; display: grid; place-items: center; width: 38px; height: 38px; margin-inline-start: auto; padding: 0; border: 1px solid var(--garis); border-radius: 999px; background: transparent; color: var(--redup); cursor: pointer; transition: color 180ms var(--pegas), border-color 180ms var(--pegas), background 180ms var(--pegas); } .tema:hover { color: var(--tinta); border-color: var(--garis-tebal); background: var(--permukaan); } .tema__ikon { width: 15px; height: 15px; border-radius: 50%; box-shadow: inset -5px -3px 0 0 currentColor; transition: box-shadow 340ms var(--pegas); } :root[data-tema="gelap"] .tema__ikon { box-shadow: inset 0 0 0 8px currentColor; } @media (prefers-color-scheme: dark) { :root:not([data-tema="terang"]) .tema__ikon { box-shadow: inset 0 0 0 8px currentColor; } } /* Di 320px, lambang plus nama merek plus pengalih tema plus tombol ini tidak muat dalam satu baris. Kata "WhatsApp" yang dibuang duluan: pil hijau dan panah sudah cukup memberi tahu tombol ini ke mana. */ .kepala__aksi-panjang { display: none; } @media (min-width: 400px) { .kepala__aksi-panjang { display: inline; } } .kepala__aksi { min-height: 40px; padding: 9px 9px 9px 18px; font-size: 14px; } .kepala__aksi .tombol__bulat { width: 22px; height: 22px; } /* --- Tombol melayang ----------------------------------------------------- */ /* Baru muncul setelah ajakan di pembuka terlewat, dan menyingkir lagi begitu ajakan penutup masuk layar. Dua tombol yang sama bertumpuk di satu layar cuma membuat halamannya terasa memaksa. Tanpa JavaScript dia tidak pernah muncul, dan itu tidak merugikan: tombol yang sama sudah ada di kepala. */ .melayang { position: fixed; z-index: 30; inset-block-end: max(20px, env(safe-area-inset-bottom)); inset-inline-end: max(20px, env(safe-area-inset-right)); display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 14px 22px; border-radius: 999px; background: var(--aksen); color: var(--aksen-tinta); font-size: 14.5px; font-weight: 500; white-space: nowrap; text-decoration: none; box-shadow: 0 4px 12px -4px rgb(22 22 26 / 0.35), 0 20px 44px -22px rgb(22 22 26 / 0.55); opacity: 0; visibility: hidden; transform: translateY(12px) scale(0.94); transition: opacity 220ms var(--pegas), transform 220ms var(--pegas), filter 180ms var(--pegas), visibility 0s linear 220ms; } .melayang--tampil { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .melayang:hover { filter: brightness(1.07); } /* Cincin yang memuai keluar lalu pudar. Digambar di atas tombol, bukan di belakangnya: tombolnya buram, jadi pseudo-element dengan z-index negatif akan tertutup badannya sendiri. Tengah cincin transparan, jadi menaruhnya di atas tidak menghalangi apa pun. */ .melayang::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--aksen); pointer-events: none; opacity: 0; } @media (prefers-reduced-motion: no-preference) { /* Satu detak lalu diam, bukan denyut sinus terus-menerus. Jeda panjangnya yang membuat gerakan ini menarik perhatian tanpa jadi mengganggu. */ .melayang--tampil { animation: denyut 3000ms var(--pegas) 900ms infinite; box-shadow: 0 4px 12px -4px rgb(22 22 26 / 0.35), 0 20px 44px -22px rgb(22 22 26 / 0.55), 0 0 26px -4px var(--aksen-pendar); } .melayang--tampil::after { animation: pendar 3000ms var(--pegas) 900ms infinite; } /* Sudah diarahkan ke tombolnya berarti sudah tersadar. Berhenti. */ .melayang:hover, .melayang:focus-visible { animation: none; scale: 1; } .melayang:hover::after, .melayang:focus-visible::after { animation: none; opacity: 0; } } @keyframes denyut { 0%, 58%, 100% { scale: 1; } 70% { scale: 1.06; } 82% { scale: 0.99; } } @keyframes pendar { 0% { opacity: 0.65; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.85); } } .melayang:active { transform: scale(0.97); } .melayang__lambang { width: 21px; height: 21px; flex: none; fill: currentColor; } /* Di layar sempit tinggal lambangnya. Pil berteks di sudut bawah menutupi isi halaman persis di jalur baca jempol. */ @media (max-width: 560px) { .melayang { width: 56px; height: 56px; padding: 0; justify-content: center; } .melayang__teks { display: none; } .melayang__lambang { width: 27px; height: 27px; } } @media (prefers-reduced-motion: reduce) { .melayang, .melayang--tampil { transform: none; animation: none; scale: 1; } .melayang::after { animation: none; opacity: 0; } .melayang { transition: opacity 220ms linear, visibility 0s linear 220ms; } } /* Di layar sempit tombol melayang menggantikan tombol di kepala, bukan menemani. Dua slab hijau sekaligus di layar 390px terasa mendesak. Browser tanpa :has() menampilkan keduanya, dan itu pun tidak rusak. */ @media (max-width: 560px) { body:has(.melayang--tampil) .kepala__aksi { opacity: 0; pointer-events: none; transition: opacity 200ms var(--pegas); } } /* --- Penutup ------------------------------------------------------------- */ /* Satu-satunya bagian yang membalik ke gelap, dan disengaja: ajakan terakhir harus terasa seperti pindah ruangan. Kalau fotonya belum ada, yang tersisa bidang gelap pekat, tetap utuh. */ .penutup { position: relative; isolation: isolate; border-top: 1px solid var(--garis); background: #0A0A0B var(--foto) center / cover no-repeat; color: #F4F3F0; } .penutup::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, rgb(9 9 10 / 0.94) 26%, rgb(9 9 10 / 0.66) 100%); } .penutup .penutup__ringkas { color: rgb(244 243 240 / 0.72); } .penutup__isi { padding-block: clamp(64px, 9vw, 104px); display: grid; gap: 32px; align-items: end; } /* Tombolnya anak grid langsung, dan justify-self bawaan grid adalah stretch: tanpa ini dia memanjang selebar kolom waktu tata letaknya jatuh ke satu kolom di layar sempit. Lebar tombol harus mengikuti teksnya. */ .penutup__isi > .tombol { justify-self: start; } @media (min-width: 820px) { .penutup__isi { grid-template-columns: minmax(0, 1fr) auto; gap: 56px; } } .penutup__judul { margin: 0; max-width: 22ch; font-size: clamp(1.875rem, 4.6vw, 3rem); font-weight: 600; line-height: 1.06; letter-spacing: -0.036em; text-wrap: balance; } .penutup__ringkas { margin: 18px 0 0; max-width: 44ch; color: var(--redup); } /* --- Kaki ---------------------------------------------------------------- */ .kaki { border-top: 1px solid var(--garis); padding-block: 36px 44px; } .kaki__baris { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; } .kaki__catatan { margin: 24px 0 0; padding-top: 22px; border-top: 1px solid var(--garis); max-width: 68ch; font-family: "Geist Mono", ui-monospace, "SF Mono", monospace; font-size: 11.5px; line-height: 1.75; color: var(--redup); } /* --- Gerak --------------------------------------------------------------- */ /* Satu gerakan saja, dan hanya sekali: isi naik pelan saat pertama masuk layar, supaya mata turun mengikuti urutan bacaan. Tidak ada yang berulang. Kelas .siap dipasang oleh skrip, jadi tanpa JavaScript semuanya tetap terlihat sejak awal. */ [data-muncul].siap { opacity: 0; transform: translateY(18px); } [data-muncul].siap.tampil { opacity: 1; transform: none; transition: opacity 700ms var(--pegas), transform 700ms var(--pegas); transition-delay: calc(var(--urut, 0) * 70ms); } @media (prefers-reduced-motion: reduce) { [data-muncul].siap, [data-muncul].siap.tampil { opacity: 1; transform: none; transition: none; } } /* =========================================================================== BLOG =========================================================================== Satu aturan yang memandu seluruh bagian ini: judulnya boleh memancing, tapi isinya harus terbaca seperti catatan teknisi. Jadi tidak ada kartu berbayang, tidak ada ikon hiasan, tidak ada tiga kolom kembar. Yang membentuk halaman cuma kolom teks selebar 68ch, garis rambut, dan angka yang ditarik keluar dari paragraf lalu diberi sumbernya. ------------------------------------------------------------------------ */ .utama { padding-block: clamp(28px, 4vw, 44px) 0; } /* --- Remah --------------------------------------------------------------- Jejak ke atas, bukan hiasan: pembaca yang mendarat dari hasil pencarian sering tidak tahu situs ini menjual apa, dan remah inilah tautan pertama yang membawanya ke sana. */ .remah { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 clamp(20px, 3vw, 30px); padding: 0; list-style: none; font-family: "Geist Mono", ui-monospace, "SF Mono", monospace; font-size: 11.5px; letter-spacing: 0.02em; color: var(--redup); } .remah li { display: flex; align-items: center; gap: 8px; } .remah li + li::before { content: "/"; color: var(--garis-tebal); } .remah a { color: inherit; text-decoration: none; } .remah a:hover { color: var(--tinta); } .remah [aria-current] { color: var(--tinta); } /* --- Kepala artikel ------------------------------------------------------ */ .artikel__kepala { padding-block: 0 clamp(28px, 4vw, 40px); } .topik { display: inline-block; margin: 0 0 18px; padding: 5px 12px; border: 1px solid var(--garis); border-radius: 999px; background: var(--permukaan); font-family: "Geist Mono", ui-monospace, "SF Mono", monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--redup); } .artikel__judul { margin: 0; max-width: 26ch; font-size: clamp(1.6875rem, 4.6vw, 2.875rem); font-weight: 600; line-height: 1.04; letter-spacing: -0.038em; text-wrap: balance; } .artikel__dek { margin: 22px 0 0; max-width: 58ch; color: var(--redup); font-size: clamp(1rem, 1.9vw, 1.1875rem); line-height: 1.6; text-wrap: pretty; } /* Penulis, tanggal, dan lama baca. Tiga fakta yang menentukan apakah orang percaya tulisannya, jadi dinaikkan ke atas lipatan, bukan ditaruh di kaki. */ .artikel__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 28px 0 0; padding-top: 22px; border-top: 1px solid var(--garis); font-family: "Geist Mono", ui-monospace, "SF Mono", monospace; font-size: 11.5px; letter-spacing: 0.02em; color: var(--redup); } .artikel__penulis { display: inline-flex; align-items: center; gap: 9px; color: var(--tinta); } .artikel__wajah { width: 26px; height: 26px; border-radius: 999px; border: 1px solid var(--garis); background: var(--nampan) var(--wajah, none) center / cover no-repeat; filter: var(--redam-gambar); } /* --- Foto utama ---------------------------------------------------------- Dipasang sebagai background-image, bukan , dengan alasan yang sama seperti di halaman induk: kalau berkasnya belum ada, yang tersisa bidang berwarna yang rapi, bukan ikon gambar rusak. */ /* Berkasnya 1,9:1, sama dengan rasio kartu berbagi, jadi satu gambar melayani halaman dan pratinjau WhatsApp sekaligus. Di ponsel dipakai utuh. Di layar lebar dipotong jadi pita 2,75:1, karena 1,9:1 selebar kolom berarti 630 piksel tinggi dan pembaca harus menggulir satu layar penuh sebelum sampai ke kalimat pertama. Yang TIDAK boleh dipakai untuk memendekkannya adalah max-height. Digabung dengan aspect-ratio, batas tinggi ikut menyusutkan lebarnya, dan fotonya berhenti sejajar dengan kolom teks di atasnya. Ganti rasionya, jangan batasi tingginya. */ .artikel__foto { margin: 0 0 clamp(36px, 5vw, 56px); aspect-ratio: 40 / 21; border: 1px solid var(--garis-tebal); border-radius: var(--r-besar); background: var(--nampan) var(--foto, none) center / cover no-repeat; filter: var(--redam-gambar); } @media (min-width: 900px) { .artikel__foto { aspect-ratio: 11 / 4; } } /* --- Badan artikel ------------------------------------------------------- Dua kolom baru dipasang di 1080px ke atas, dan kolom kedua isinya daftar isi yang benar-benar dipakai, bukan pengisi ruang. Di bawah itu satu kolom, daftar isinya pindah ke atas teks dan bisa dilipat. */ .artikel__badan { display: grid; gap: clamp(32px, 4vw, 52px); padding-bottom: clamp(56px, 7vw, 88px); } /* Anak grid punya min-width: auto secara bawaan, artinya dia menolak menyusut lebih sempit dari isi terlebarnya. Tabel di dalam artikel memakai nowrap, jadi tanpa baris ini kolomnya melebar melewati layar dan seluruh halaman ikut bisa digulir ke samping di 320 piksel. Yang boleh digulir mendatar cuma pembungkus tabelnya sendiri. */ .artikel__badan > * { min-width: 0; } @media (min-width: 1080px) { .artikel__badan { grid-template-columns: minmax(0, 1fr) 210px; align-items: start; gap: 72px; } .artikel__samping { order: 2; } } .artikel__samping { position: sticky; top: 92px; align-self: start; } .daftar-isi__judul { margin: 0 0 14px; font-family: "Geist Mono", ui-monospace, "SF Mono", monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--redup); } .daftar-isi__daftar { margin: 0; padding: 0 0 0 16px; list-style: none; border-inline-start: 1px solid var(--garis); display: grid; gap: 11px; } .daftar-isi__daftar a { display: block; font-size: 13.5px; line-height: 1.4; color: var(--redup); text-decoration: none; transition: color 180ms var(--pegas); } .daftar-isi__daftar a:hover { color: var(--tinta); } /* Di layar sempit daftar isi jadi
supaya tidak mendorong paragraf pertama turun sejauh satu layar penuh. */ .daftar-isi--lipat { margin-bottom: clamp(28px, 4vw, 40px); border: 1px solid var(--garis); border-radius: var(--r-sedang); background: var(--permukaan); padding: 4px 18px; } .daftar-isi--lipat > summary { padding: 14px 0; list-style: none; cursor: pointer; font-family: "Geist Mono", ui-monospace, "SF Mono", monospace; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--redup); } .daftar-isi--lipat > summary::-webkit-details-marker { display: none; } .daftar-isi--lipat[open] > summary { color: var(--tinta); } .daftar-isi--lipat .daftar-isi__daftar { padding-bottom: 18px; } @media (min-width: 1080px) { .daftar-isi--lipat { display: none; } } @media (max-width: 1079px) { .artikel__samping { display: none; } } /* --- Prosa --------------------------------------------------------------- Ukuran badan teks sengaja lebih besar dari halaman induk. Halaman jualan dipindai, artikel dibaca sampai habis, dan itu dua pekerjaan mata yang berbeda. */ .prosa { max-width: 68ch; font-size: clamp(1.0625rem, 1.6vw, 1.125rem); line-height: 1.78; } .prosa > * { margin-block: 0 1.35em; } .prosa > *:last-child { margin-bottom: 0; } .prosa p { text-wrap: pretty; } .prosa h2 { margin-block: 2.2em 0.7em; max-width: 24ch; font-size: clamp(1.4375rem, 3vw, 1.875rem); font-weight: 600; line-height: 1.14; letter-spacing: -0.03em; scroll-margin-top: 92px; text-wrap: balance; } .prosa h3 { margin-block: 1.9em 0.55em; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.012em; scroll-margin-top: 92px; } .prosa strong { font-weight: 600; color: var(--tinta); } /* Tautan dalam teks memakai aksen, dan itu konsisten dengan aturan satu aksen di halaman induk: tautan adalah aksi, bukan hiasan. :not(.tombol) itu wajib, bukan kehati-hatian berlebihan. Tanpa itu aturan ini menang atas .tombol--utama karena selektornya lebih spesifik, dan tulisan di dalam tombol hijau ikut jadi hijau. Tombolnya terlihat kosong. */ .prosa a:not(.tombol) { color: var(--aksen); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--aksen) 42%, transparent); transition: text-decoration-color 180ms var(--pegas); } .prosa a:not(.tombol):hover { text-decoration-color: var(--aksen); } .prosa ul, .prosa ol { padding-inline-start: 0; list-style: none; } .prosa li { position: relative; margin-bottom: 0.7em; padding-inline-start: 26px; } .prosa ul > li::before { content: ""; position: absolute; inset-inline-start: 2px; inset-block-start: 0.72em; width: 12px; height: 1px; background: var(--garis-tebal); } .prosa ol { counter-reset: butir; } .prosa ol > li { counter-increment: butir; padding-inline-start: 34px; } .prosa ol > li::before { content: counter(butir); position: absolute; inset-inline-start: 0; inset-block-start: 0.16em; font-family: "Geist Mono", ui-monospace, "SF Mono", monospace; font-size: 12px; color: var(--redup); } /* --- Angka yang ditarik keluar ------------------------------------------- Satu-satunya perabot editorial di halaman ini. Angka yang penting diangkat dari paragraf, diberi kalimat pendek, lalu sumbernya disebut namanya. Tanpa baris sumber, blok ini tidak boleh dipakai. */ .angka { margin-block: 2.2em; padding-inline-start: clamp(18px, 3vw, 26px); border-inline-start: 2px solid var(--aksen); } .angka__nilai { display: block; font-size: clamp(2.25rem, 6vw, 3.25rem); font-weight: 600; line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; } .angka__teks { margin: 12px 0 0; max-width: 44ch; font-size: 1rem; line-height: 1.55; } .angka__sumber { margin: 12px 0 0; font-family: "Geist Mono", ui-monospace, "SF Mono", monospace; font-size: 11.5px; line-height: 1.6; color: var(--redup); } .angka__sumber a { color: inherit; text-decoration-color: var(--garis-tebal); } /* --- Catatan pinggir ----------------------------------------------------- */ .catatan { margin-block: 2em; padding: clamp(20px, 3vw, 26px); border: 1px solid var(--garis); border-radius: var(--r-sedang); background: var(--permukaan); } .catatan__judul { margin: 0 0 10px; font-family: "Geist Mono", ui-monospace, "SF Mono", monospace; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--redup); } .catatan > p:last-child { margin-bottom: 0; } .catatan p { font-size: 1rem; line-height: 1.65; } /* --- Daftar periksa ------------------------------------------------------ */ .periksa { margin-block: 1.8em; padding: 0; list-style: none; border-top: 1px solid var(--garis); } .periksa > li { position: relative; margin: 0; padding: 15px 0 15px 30px; border-bottom: 1px solid var(--garis); font-size: 1rem; line-height: 1.6; } .periksa > li::before { content: ""; position: absolute; inset-inline-start: 2px; inset-block-start: 21px; width: 12px; height: 6px; border-inline-start: 2px solid var(--aksen); border-block-end: 2px solid var(--aksen); border-end-start-radius: 1px; rotate: -45deg; } /* --- Putusan ------------------------------------------------------------- Pasangan "kalau kebutuhanmu ini, yang masuk akal itu". Ditulis sebagai
dan bukan : datanya memang pasangan istilah dan keterangan, satu sumbu saja, jadi tabel dua sumbu berlebihan. Untungnya di ponsel:
menumpuk dengan sendirinya, sementara tabel dua kolom di layar 390 piksel memaksa tiap sel jadi menara lima baris atau digulir ke samping. */ .putusan { margin-block: 2em; padding: 0; border-top: 1px solid var(--garis); } .putusan > div { display: grid; gap: 2px; padding-block: 14px; border-bottom: 1px solid var(--garis); } @media (min-width: 620px) { .putusan > div { grid-template-columns: minmax(0, 1fr) 210px; gap: 24px; align-items: baseline; } } .putusan dt { margin: 0; font-size: 1rem; line-height: 1.5; } .putusan dd { margin: 0; font-family: "Geist Mono", ui-monospace, "SF Mono", monospace; font-size: 12.5px; line-height: 1.5; color: var(--aksen); } /* --- Tabel --------------------------------------------------------------- */ .tabel-bungkus { margin-block: 2em; overflow-x: auto; border: 1px solid var(--garis); border-radius: var(--r-sedang); background: var(--permukaan); } .tabel { width: 100%; border-collapse: collapse; font-size: 0.9375rem; white-space: nowrap; } .tabel th, .tabel td { padding: 13px 18px; text-align: start; border-bottom: 1px solid var(--garis); } .tabel thead th { font-family: "Geist Mono", ui-monospace, "SF Mono", monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--redup); } .tabel tbody tr:last-child th, .tabel tbody tr:last-child td { border-bottom: 0; } .tabel tbody th { font-weight: 500; white-space: normal; } .tabel td { color: var(--redup); white-space: normal; } /* --- Ajakan sisipan ------------------------------------------------------ Di tengah artikel ajakannya harus tenang. Slab hijau kedua sebelum pembaca selesai membaca terasa seperti diseret. Yang dipakai cuma kotak bergaris dengan satu tautan. */ .sisip { margin-block: 2.4em; padding: clamp(22px, 3vw, 28px); border: 1px solid var(--garis-tebal); border-radius: var(--r-sedang); background: var(--permukaan); } .sisip__judul { margin: 0 0 8px; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.018em; } .sisip p { margin: 0 0 18px; max-width: 46ch; color: var(--redup); font-size: 0.9375rem; line-height: 1.6; } /* --- Sumber -------------------------------------------------------------- */ .sumber { margin-top: clamp(48px, 6vw, 68px); padding-top: 26px; border-top: 1px solid var(--garis); max-width: 68ch; } .sumber__judul { margin: 0 0 16px; font-family: "Geist Mono", ui-monospace, "SF Mono", monospace; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--redup); } .sumber__daftar { margin: 0; padding: 0; list-style: none; counter-reset: rujuk; display: grid; gap: 10px; } .sumber__daftar li { counter-increment: rujuk; position: relative; padding-inline-start: 30px; font-size: 13.5px; line-height: 1.65; color: var(--redup); } .sumber__daftar li::before { content: counter(rujuk); position: absolute; inset-inline-start: 0; font-family: "Geist Mono", ui-monospace, "SF Mono", monospace; font-size: 11.5px; color: var(--garis-tebal); } .sumber__daftar a { color: var(--tinta); text-decoration: underline; text-decoration-color: var(--garis-tebal); text-underline-offset: 3px; } .sumber__daftar a:hover { text-decoration-color: var(--aksen); } /* --- Tulisan lain -------------------------------------------------------- */ .terkait { padding-block: clamp(48px, 6vw, 72px); border-top: 1px solid var(--garis); } .terkait__judul { margin: 0 0 clamp(24px, 3vw, 34px); font-size: clamp(1.25rem, 2.6vw, 1.5rem); font-weight: 600; letter-spacing: -0.026em; } .terkait__daftar { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; border-top: 1px solid var(--garis); } .terkait__daftar > li { border-bottom: 1px solid var(--garis); } .terkait__tautan { display: grid; gap: 6px; padding: 22px 0; text-decoration: none; transition: opacity 180ms var(--pegas); } .terkait__tautan:hover .terkait__nama { color: var(--aksen); } .terkait__nama { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; text-wrap: balance; transition: color 180ms var(--pegas); } .terkait__ringkas { max-width: 62ch; color: var(--redup); font-size: 0.9375rem; line-height: 1.6; } /* --- Indeks blog --------------------------------------------------------- */ .blog__kepala { padding-block: clamp(16px, 3vw, 30px) clamp(40px, 5vw, 60px); } .blog__judul { margin: 0; max-width: 17ch; font-size: clamp(2rem, 5.2vw, 3.25rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.038em; text-wrap: balance; } .blog__dek { margin: 20px 0 0; max-width: 56ch; color: var(--redup); font-size: clamp(1rem, 1.8vw, 1.125rem); line-height: 1.6; text-wrap: pretty; } .tulisan__daftar { margin: 0; padding: 0; list-style: none; } /* Judul, ringkasan, dan foto di daftar ini ditulis sebagai , bukan

dan

, karena seluruh kartunya satu dan tautan tidak boleh membungkus heading. Konsekuensinya semuanya inline secara bawaan, jadi harus diblokkan di sini atau judul dan ringkasannya menyambung jadi satu baris dan foto beraspect-ratio kehilangan kotaknya. */ .utama-tulisan__foto, .utama-tulisan__isi, .utama-tulisan__nama, .utama-tulisan__ringkas, .baris-tulisan__foto, .baris-tulisan__nama, .baris-tulisan__ringkas, .terkait__nama, .terkait__ringkas { display: block; } /* Yang pertama besar dan berfoto, sisanya baris teks dengan foto kecil. Empat kartu seragam akan terbaca sebagai grid bawaan; ini terbaca sebagai halaman yang punya urutan. */ .utama-tulisan { display: block; text-decoration: none; padding-bottom: clamp(34px, 4.5vw, 48px); border-bottom: 1px solid var(--garis); } .utama-tulisan__foto { aspect-ratio: 40 / 21; border: 1px solid var(--garis-tebal); border-radius: var(--r-besar); background: var(--nampan) var(--foto, none) center / cover no-repeat; filter: var(--redam-gambar); transition: transform 420ms var(--pegas); } @media (min-width: 900px) { .utama-tulisan__foto { aspect-ratio: 11 / 4; } } .utama-tulisan:hover .utama-tulisan__foto { transform: translateY(-3px); } .utama-tulisan__isi { margin-top: clamp(22px, 3vw, 30px); } .utama-tulisan__nama { margin: 12px 0 0; max-width: 26ch; font-size: clamp(1.5rem, 3.8vw, 2.25rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.032em; text-wrap: balance; transition: color 180ms var(--pegas); } .utama-tulisan:hover .utama-tulisan__nama { color: var(--aksen); } .utama-tulisan__ringkas { margin: 14px 0 0; max-width: 56ch; color: var(--redup); font-size: clamp(0.9375rem, 1.6vw, 1.0625rem); line-height: 1.6; text-wrap: pretty; } .jejak { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-family: "Geist Mono", ui-monospace, "SF Mono", monospace; font-size: 11.5px; letter-spacing: 0.02em; color: var(--redup); } .jejak__topik { color: var(--aksen); } .baris-tulisan { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: center; padding-block: clamp(26px, 3.4vw, 34px); border-bottom: 1px solid var(--garis); text-decoration: none; } @media (min-width: 720px) { .baris-tulisan { grid-template-columns: minmax(0, 1fr) 132px; gap: 40px; } } .baris-tulisan__nama { margin: 10px 0 0; max-width: 40ch; font-size: clamp(1.125rem, 2.2vw, 1.375rem); font-weight: 600; line-height: 1.22; letter-spacing: -0.024em; text-wrap: balance; transition: color 180ms var(--pegas); } .baris-tulisan:hover .baris-tulisan__nama { color: var(--aksen); } .baris-tulisan__ringkas { margin: 10px 0 0; max-width: 58ch; color: var(--redup); font-size: 0.9375rem; line-height: 1.62; text-wrap: pretty; } .baris-tulisan__foto { order: -1; aspect-ratio: 16 / 10; border: 1px solid var(--garis-tebal); border-radius: var(--r-kecil); background: var(--nampan) var(--foto, none) center / cover no-repeat; filter: var(--redam-gambar); } @media (min-width: 720px) { .baris-tulisan__foto { order: 0; aspect-ratio: 1 / 1; } } /* --- Langganan bukan tujuan halaman ini ---------------------------------- */ /* Blok penutup halaman indeks: bukan formulir langganan, karena tidak ada surat kabar yang mau dikirim. Yang ditawarkan hal yang benar-benar ada. */ .blog__tutup { padding-block: clamp(48px, 6vw, 72px); border-top: 1px solid var(--garis); }