/* ========================================================================== Selapost — tema publik -------------------------------------------------------------------------- Ditulis tangan, tanpa build step: berkas ini yang disajikan langsung, jadi mengubah tampilan cukup mengedit di sini lalu mengunggahnya. Tidak ada npm, tidak ada manifest, tidak ada langkah yang bisa terlupa saat rilis. Nol permintaan jaringan pihak ketiga: font memakai system stack, ikon memakai SVG inline. Halaman berita dinilai dari Core Web Vitals, dan setiap permintaan ke domain lain menambah latensi yang tidak kita kendalikan. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Token -------------------------------------------------------------------------- */ :root { /* Warna merek. Aksen merah dipertahankan dari identitas lama Selapost. */ --brand: #c8102e; --brand-dark: #9d0c24; --brand-tint: #fdeaed; /* Netral — dipakai lewat alias semantik di bawah, jangan dipakai langsung. */ --n-0: #ffffff; --n-50: #f7f8f9; --n-100: #eceef1; --n-200: #dcdfe4; --n-300: #b9bec7; --n-500: #6b7280; --n-700: #374151; --n-900: #14171c; --n-950: #0b0d11; /* Alias semantik: ini yang dipakai di seluruh berkas, sehingga mode gelap cukup menimpa blok ini saja. */ --bg: var(--n-0); --bg-soft: var(--n-50); --bg-raised: var(--n-0); --border: var(--n-200); --border-soft: var(--n-100); --text: var(--n-900); --text-muted: var(--n-500); --text-inverse: var(--n-0); --accent: var(--brand); --accent-hover: var(--brand-dark); --shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 8px 24px -12px rgb(0 0 0 / 12%); /* Tipografi. clamp() memberi skala mulus dari ponsel ke desktop tanpa menumpuk media query. */ --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-serif: Georgia, "Times New Roman", serif; --step--1: clamp(0.79rem, 0.77rem + 0.10vw, 0.85rem); --step-0: clamp(0.94rem, 0.91rem + 0.15vw, 1.03rem); --step-1: clamp(1.13rem, 1.07rem + 0.28vw, 1.30rem); --step-2: clamp(1.35rem, 1.25rem + 0.49vw, 1.64rem); --step-3: clamp(1.62rem, 1.46rem + 0.79vw, 2.07rem); --step-4: clamp(1.94rem, 1.69rem + 1.24vw, 2.61rem); /* Ritme spasi */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --radius: 10px; --radius-sm: 6px; --wrap: 1180px; --header-h: 60px; } /* Mode gelap mengikuti preferensi sistem, dan bisa dipaksa lewat kalau nanti ditambah tombol pengalih. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: var(--n-950); --bg-soft: #12151b; --bg-raised: #171b22; --border: #262c36; --border-soft: #1d222a; --text: #e8eaed; --text-muted: #9aa3af; --accent: #ff5c72; --accent-hover: #ff8494; --brand-tint: #2a1116; --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px -12px rgb(0 0 0 / 60%); } } :root[data-theme="dark"] { --bg: var(--n-950); --bg-soft: #12151b; --bg-raised: #171b22; --border: #262c36; --border-soft: #1d222a; --text: #e8eaed; --text-muted: #9aa3af; --accent: #ff5c72; --accent-hover: #ff8494; --brand-tint: #2a1116; --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px -12px rgb(0 0 0 / 60%); } /* -------------------------------------------------------------------------- 2. Reset -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--step-0); line-height: 1.6; -webkit-font-smoothing: antialiased; } img, picture, video, iframe { max-width: 100%; } img { height: auto; display: block; } h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; } p { margin: 0 0 var(--sp-4); } a { color: inherit; text-decoration: none; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* -------------------------------------------------------------------------- 3. Kerangka -------------------------------------------------------------------------- */ .wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; } .skip-link { position: absolute; left: var(--sp-4); top: -100px; z-index: 100; padding: var(--sp-3) var(--sp-4); background: var(--accent); color: #fff; border-radius: var(--radius-sm); font-weight: 600; transition: top 0.15s; } .skip-link:focus { top: var(--sp-3); } /* -------------------------------------------------------------------------- 4. Header -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .masthead { display: flex; align-items: center; gap: var(--sp-4); min-height: var(--header-h); } .logo { font-size: var(--step-2); font-weight: 800; letter-spacing: -0.03em; color: var(--text); flex-shrink: 0; } .logo span { color: var(--accent); } .masthead-date { margin-inline-start: auto; font-size: var(--step--1); color: var(--text-muted); white-space: nowrap; } @media (max-width: 640px) { .masthead-date { display: none; } } /* Navigasi kanal. Menggulir mendatar di layar sempit alih-alih terpotong — 17 kategori tidak mungkin muat di ponsel. */ .channels { display: flex; gap: var(--sp-1); overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--border-soft); padding-block: var(--sp-2); } .channels::-webkit-scrollbar { display: none; } .channel { flex-shrink: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); font-size: var(--step--1); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; transition: color 0.15s, background 0.15s; } .channel:hover { color: var(--accent); background: var(--bg-soft); } .channel[aria-current="page"] { color: var(--accent); background: var(--brand-tint); } /* -------------------------------------------------------------------------- 5. Kartu artikel -------------------------------------------------------------------------- */ .card { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; } .card-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius); background: var(--bg-soft); } .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .card:hover .card-media img { transform: scale(1.04); } .card-title { font-size: var(--step-1); text-wrap: pretty; } .card-title a { transition: color 0.15s; } .card:hover .card-title a { color: var(--accent); } .card-meta { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--step--1); color: var(--text-muted); } .tag { display: inline-block; padding: 2px var(--sp-2); border-radius: 999px; background: var(--brand-tint); color: var(--accent); font-size: var(--step--1); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .card-excerpt { margin: 0; color: var(--text-muted); font-size: var(--step-0); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Varian mendatar untuk daftar ringkas di sidebar dan "terbaru". */ .card-row { display: grid; grid-template-columns: 92px 1fr; gap: var(--sp-3); align-items: start; padding-block: var(--sp-3); border-bottom: 1px solid var(--border-soft); } .card-row:last-child { border-bottom: 0; } .card-row .card-media { aspect-ratio: 1; border-radius: var(--radius-sm); } .card-row .card-title { font-size: var(--step-0); } /* Kartu utama di puncak beranda. */ .card-lead .card-media { aspect-ratio: 16 / 9; } .card-lead .card-title { font-size: var(--step-4); } /* -------------------------------------------------------------------------- 6. Grid -------------------------------------------------------------------------- */ .hero { display: grid; gap: var(--sp-5); padding-block: var(--sp-6); grid-template-columns: 1fr; } @media (min-width: 900px) { .hero { grid-template-columns: 1.7fr 1fr; align-items: start; } } .hero-side { display: grid; gap: var(--sp-2); } .grid-cards { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); } .layout { display: grid; gap: var(--sp-6); padding-block: var(--sp-6); grid-template-columns: 1fr; align-items: start; } @media (min-width: 1000px) { .layout { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-7); } .layout-side { position: sticky; top: calc(var(--header-h) + var(--sp-4)); } } /* -------------------------------------------------------------------------- 7. Judul seksi -------------------------------------------------------------------------- */ .section { padding-block: var(--sp-6); border-top: 1px solid var(--border-soft); } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); } .section-title { font-size: var(--step-2); position: relative; padding-inline-start: var(--sp-3); } .section-title::before { content: ""; position: absolute; inset-block: 0.15em 0.15em; inset-inline-start: 0; width: 4px; border-radius: 2px; background: var(--accent); } .section-more { font-size: var(--step--1); font-weight: 600; color: var(--accent); white-space: nowrap; } .section-more:hover { color: var(--accent-hover); text-decoration: underline; } /* -------------------------------------------------------------------------- 8. Sidebar -------------------------------------------------------------------------- */ .panel { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-5); margin-bottom: var(--sp-5); } .panel-title { font-size: var(--step-1); margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 2px solid var(--accent); } /* Daftar bernomor untuk "terpopuler" — angkanya memberi hierarki tanpa gambar. */ .rank { list-style: none; margin: 0; padding: 0; counter-reset: rank; } .rank li { counter-increment: rank; display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); padding-block: var(--sp-3); border-bottom: 1px solid var(--border-soft); } .rank li:last-child { border-bottom: 0; } .rank li::before { content: counter(rank); font-size: var(--step-2); font-weight: 800; line-height: 1; color: var(--border); } .rank a { font-weight: 600; transition: color 0.15s; } .rank a:hover { color: var(--accent); } /* -------------------------------------------------------------------------- 9. Halaman artikel -------------------------------------------------------------------------- */ .article-head { padding-block: var(--sp-6) var(--sp-5); } .article-title { font-size: var(--step-4); margin-block: var(--sp-3); } .article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); color: var(--text-muted); font-size: var(--step--1); } .article-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); background: var(--bg-soft); margin-bottom: var(--sp-5); } /* Badan artikel. Isinya HTML dari Summernote yang membawa `style` inline — termasuk warna keras seperti rgb(51,51,51) — jadi mode gelap harus menimpanya, kalau tidak teksnya jadi hitam di atas latar hitam. */ .prose { font-family: var(--font-serif); font-size: var(--step-1); line-height: 1.75; max-width: 68ch; /* Sebagian isi membawa text-align:justify dari editor. Tanpa pemenggalan kata, itu menghasilkan "sungai" spasi yang lebar di antara kata. */ hyphens: auto; } /* Di layar sempit sungai spasinya terlalu parah untuk diselamatkan pemenggalan kata — kolomnya terlalu pendek. Hanya elemen yang benar-benar membawa text-align inline yang ditimpa, sehingga perataan lain tetap dihormati. */ @media (max-width: 700px) { .prose [style*="text-align"] { text-align: start !important; } } .prose p { margin-block: 0 var(--sp-5); } .prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .prose img { border-radius: var(--radius); margin-block: var(--sp-5); } .prose h2, .prose h3 { margin-block: var(--sp-6) var(--sp-3); font-family: var(--font); } .prose blockquote { margin: var(--sp-5) 0; padding-inline-start: var(--sp-5); border-inline-start: 4px solid var(--accent); font-style: italic; color: var(--text-muted); } .prose iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--radius); margin-block: var(--sp-5); } .prose table { width: 100%; border-collapse: collapse; margin-block: var(--sp-5); } .prose td, .prose th { border: 1px solid var(--border); padding: var(--sp-2) var(--sp-3); } /* Netralkan warna inline yang terbawa dari editor. Hanya di mode gelap, dan hanya untuk warna — ukuran serta penebalan dari penulis tetap dihormati. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .prose [style*="color"] { color: var(--text) !important; } :root:not([data-theme="light"]) .prose [style*="background"] { background: transparent !important; } } :root[data-theme="dark"] .prose [style*="color"] { color: var(--text) !important; } :root[data-theme="dark"] .prose [style*="background"] { background: transparent !important; } /* Navigasi artikel sebelumnya / berikutnya */ .pager { display: grid; gap: var(--sp-4); margin-block: var(--sp-7); padding-block: var(--sp-5); border-block: 1px solid var(--border); } @media (min-width: 700px) { .pager { grid-template-columns: 1fr 1fr; } } .pager-item { display: flex; flex-direction: column; gap: var(--sp-1); } .pager-item:last-child:nth-child(2) { text-align: end; } .pager-label { font-size: var(--step--1); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .pager-item a { font-weight: 600; } .pager-item a:hover { color: var(--accent); } /* -------------------------------------------------------------------------- 10. Iklan -------------------------------------------------------------------------- */ /* Diberi ruang tetap supaya tidak menggeser tata letak saat iklan dimuat — Cumulative Layout Shift adalah salah satu metrik Core Web Vitals. */ /* Kontainer iklan tidak memesan ruang apa pun secara bawaan. Percobaan pertama memesan tinggi (100/120/250px) demi mencegah pergeseran tata letak, lalu merobohkannya lewat [data-ad-status="unfilled"]. Diperiksa di situs live: TIDAK BEKERJA. Selama akun ditinjau, AdSense memproses (data-adsbygoogle-status terpasang) tapi tidak pernah menyetel data-ad-status sama sekali, jadi selektor itu tidak menyala — yang tersisa ~470px lubang kosong per halaman. Sekarang kebalikannya: nol ruang sampai ada bukti positif berupa