/** * KILAS — styles.css * Shared stylesheet untuk seluruh halaman template portal berita KILAS. * * Di-load via: * (tepat setelah CDN Tailwind + tailwind.config inline di ) * * ==================================================================== * STRUKTUR * ==================================================================== * [1] Base & Reset * [2] Tipografi * [3] Line Clamp * [4] Scrollbar Utilities * [5] Headline Link Affordance * [6] Breaking News Ticker * [7] Live Pulse Dot * [8] Image Fallback / Placeholder * [9] Rank Numerals * [10] Focus Ring (Aksesibilitas) * [11] Marquee Fade Edges * --- Page-specific --- * [12] Reading Progress Bar (single-standard, single-video) * [13] Article Body Prose (single-standard, single-video) * [14] Video Player (single-video) * [15] Category Hero & View Toggle (category) * [16] Search — Keyword Highlight & Filter Pill (search) * [17] Page Static Prose (page) * [18] 404 Glitch Numeral (404) * ==================================================================== * * CSS VARIABLES (tema) * --kilas-brand : #E11D48 — warna utama (merah brand) * --kilas-brand-ink : #0B1220 — teks gelap/heading utama * Untuk mengganti warna tema, ubah nilai di tailwind.config (inline di * setiap HTML) pada bagian colors.brand, lalu sesuaikan juga nilai hex * hardcoded di keyframe / pseudo-element di bawah ini. */ /* ============================================================ [1] BASE & RESET ============================================================ */ :root { color-scheme: light dark; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; } /* ============================================================ [2] TIPOGRAFI Kelas serif display untuk heading artikel & widget judul. ============================================================ */ .font-serif-display { font-family: 'Source Serif 4', Georgia, serif; font-optical-sizing: auto; letter-spacing: -0.01em; } /* ============================================================ [2b] LOGO SIZE CONSTRAINT Mencegah logo membesar tak terkontrol dari WordPress custom_logo atau upload logo via Customizer. ============================================================ */ /* WordPress built-in custom_logo */ .custom-logo-link { display: inline-flex; align-items: center; line-height: 1; } .custom-logo-link .custom-logo, .custom-logo-link img { height: 36px; width: auto; max-width: 180px; object-fit: contain; display: block; } /* Logo upload via KILAS Customizer (kilas_logo_light / kilas_logo_dark) */ .kilas-logo-img { height: 36px; width: auto; max-width: 180px; object-fit: contain; display: block; } /* Nav logo (sedikit lebih kecil di mobile) */ @media (max-width: 767px) { .custom-logo-link .custom-logo, .custom-logo-link img, .kilas-logo-img { height: 28px; max-width: 140px; } } /* ============================================================ [3] LINE CLAMP Batasi jumlah baris teks agar layout tidak pecah. ============================================================ */ .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /* ============================================================ [4] SCROLLBAR UTILITIES Sembunyikan scrollbar tanpa menghilangkan fungsi scroll. ============================================================ */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* ============================================================ [5] HEADLINE LINK AFFORDANCE Garis bawah animasi yang muncul saat hover pada tautan judul. ============================================================ */ .headline-link { background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 0.35s ease; } .headline-link:hover { background-size: 100% 1px; } /* ============================================================ [6] BREAKING NEWS TICKER Marquee teks berjalan — pause saat hover. ============================================================ */ @keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .ticker-track { display: inline-flex; gap: 3rem; padding-right: 3rem; animation: ticker 55s linear infinite; } .ticker:hover .ticker-track { animation-play-state: paused; } /* ============================================================ [7] LIVE PULSE DOT Animasi denyut merah untuk label LIVE / BREAKING. ============================================================ */ @keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.55); } 50% { box-shadow: 0 0 0 6px rgba(225, 29, 72, 0); } } .live-dot { animation: pulse-dot 1.6s ease-in-out infinite; } /* ============================================================ [8] IMAGE FALLBACK / PLACEHOLDER Stripe diagonal untuk gambar yang gagal load. ============================================================ */ .img-fallback { background: repeating-linear-gradient( 135deg, #e2e8f0 0 8px, #f1f5f9 8px 16px ); } .dark .img-fallback { background: repeating-linear-gradient( 135deg, #1e293b 0 8px, #0f172a 8px 16px ); } /* ============================================================ [9] RANK NUMERALS Angka ranking yang lebar karakternya konsisten (tabular). ============================================================ */ .rank-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* ============================================================ [10] FOCUS RING — AKSESIBILITAS (WCAG AA) Outline brand merah untuk navigasi keyboard. ============================================================ */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid #E11D48; outline-offset: 2px; border-radius: 4px; } /* ============================================================ [11] MARQUEE FADE EDGES Masking gradient di kiri-kanan ticker/carousel horisontal. ============================================================ */ .marquee-fade { mask-image: linear-gradient( to right, transparent 0, black 32px, black calc(100% - 32px), transparent 100% ); -webkit-mask-image: linear-gradient( to right, transparent 0, black 32px, black calc(100% - 32px), transparent 100% ); } /* ============================================================ [12] READING PROGRESS BAR Fixed bar merah di ujung atas viewport. Digunakan di: single-standard.html, single-video.html ============================================================ */ #progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 50; } #progress > span { display: block; height: 100%; background: #E11D48; width: 0%; transition: width 0.15s linear; } /* ============================================================ [13] ARTICLE BODY PROSE Tipografi tubuh artikel — serif, ukuran nyaman dibaca. Digunakan di: single-standard.html, single-video.html ============================================================ */ .article-body { font-family: 'Source Serif 4', Georgia, serif; font-size: 19px; line-height: 1.75; } /* Direct children — generated oleh the_content() WordPress */ .article-body > p, .article-body > h2, .article-body > h3, .article-body > h4, .article-body > ul, .article-body > ol, .article-body > blockquote, .article-body > figure, .article-body > .pull, .article-body > aside { margin-bottom: 1.5em; } /* Fallback untuk konten yang dibungkus extra div oleh plugin/Gutenberg */ .article-body p { margin-bottom: 1.5em; } .article-body p:last-child { margin-bottom: 0; } .article-body > h2 { font-family: 'Source Serif 4', Georgia, serif; font-size: 28px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; margin-top: 1.6em; } .article-body > h3 { font-size: 22px; font-weight: 700; margin-top: 1.4em; } .article-body p > strong { color: inherit; } .article-body p > a { color: #E11D48; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .article-body p > a:hover { background: rgba(225, 29, 72, 0.08); } .article-body > blockquote { border-left: 3px solid #E11D48; padding: 0.25em 0 0.25em 1.25rem; font-style: italic; color: #475569; font-size: 22px; line-height: 1.45; } .dark .article-body > blockquote { color: #cbd5e1; } /* Drop cap — huruf pertama paragraf pembuka */ .article-body .dropcap::first-letter { font-family: 'Source Serif 4', Georgia, serif; font-weight: 800; font-size: 4.2em; line-height: 0.9; float: left; padding: 0.05em 0.12em 0 0; color: #0b1220; } .dark .article-body .dropcap::first-letter { color: #f1f5f9; } .article-body ul { padding-left: 1.4rem; list-style: disc; } .article-body ul li { margin-bottom: 0.4em; } .article-body figure figcaption { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 13px; color: #64748b; margin-top: 0.5rem; } /* ============================================================ [14] VIDEO PLAYER (simulasi) Rasio 16:9 dengan padding-top trick; kontrol overlay gradien. Digunakan di: single-video.html ============================================================ */ /* Wrapper mempertahankan rasio 16:9 */ .player-wrap { position: relative; background: #000; } .player-wrap::before { content: ''; display: block; padding-top: 56.25%; /* 16:9 */ } .player-wrap > * { position: absolute; inset: 0; width: 100%; height: 100%; } /* Gradien gelap di bagian bawah player untuk kontrol */ .player-controls { background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 100%); } /* Scrubber timeline */ .scrubber { -webkit-appearance: none; appearance: none; height: 3px; border-radius: 9999px; background: rgba(255, 255, 255, 0.3); cursor: pointer; transition: height 0.15s; } .scrubber:hover { height: 5px; } .scrubber::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #E11D48; cursor: pointer; } .scrubber::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #E11D48; border: none; cursor: pointer; } /* Volume slider */ .vol-slider { -webkit-appearance: none; appearance: none; height: 3px; border-radius: 9999px; background: rgba(255, 255, 255, 0.3); cursor: pointer; width: 60px; } .vol-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; border-radius: 50%; background: #fff; cursor: pointer; } .vol-slider::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: #fff; border: none; cursor: pointer; } /* Related video card hover */ .vid-card img { transition: transform 0.4s ease; } .vid-card:hover img { transform: scale(1.05); } /* ============================================================ [15] CATEGORY HERO & LIST/GRID VIEW TOGGLE Digunakan di: category.html ============================================================ */ /* Hero stripe — subtle pattern di header kategori */ .cat-hero { background-image: linear-gradient(135deg, rgba(225, 29, 72, 0.06) 0%, transparent 50%), repeating-linear-gradient( 135deg, transparent 0 28px, rgba(15, 23, 42, 0.025) 28px 29px ); } .dark .cat-hero { background-image: linear-gradient(135deg, rgba(225, 29, 72, 0.12) 0%, transparent 50%), repeating-linear-gradient( 135deg, transparent 0 28px, rgba(255, 255, 255, 0.04) 28px 29px ); } /* Tombol list/grid toggle: sembunyikan konten yang tidak aktif */ body.view-list .grid-only { display: none !important; } body.view-grid .list-only { display: none !important; } /* ============================================================ [16] SEARCH — KEYWORD HIGHLIGHT & FILTER PILLS Digunakan di: search.html ============================================================ */ /* Highlight kata kunci hasil pencarian */ mark { background: #fde68a; color: inherit; border-radius: 2px; padding: 0 2px; } .dark mark { background: #78350f; color: #fef3c7; } /* Filter pill aktif */ .filter-active { background: #E11D48; color: #fff; border-color: #E11D48; } /* ============================================================ [17] PAGE STATIC PROSE Tipografi konten halaman statis (Tentang, Disclaimer, dll.) Digunakan di: page.html ============================================================ */ .prose-page h2 { font-family: 'Source Serif 4', Georgia, serif; font-size: 1.375rem; font-weight: 700; line-height: 1.3; margin-top: 2.25rem; margin-bottom: 0.75rem; letter-spacing: -0.01em; } .prose-page h3 { font-size: 1.0625rem; font-weight: 700; margin-top: 1.75rem; margin-bottom: 0.5rem; } .prose-page p { font-size: 0.9375rem; line-height: 1.8; color: inherit; margin-bottom: 1rem; } .prose-page ul, .prose-page ol { padding-left: 1.25rem; margin-bottom: 1rem; } .prose-page li { font-size: 0.9375rem; line-height: 1.8; margin-bottom: 0.35rem; } .prose-page ul li { list-style-type: disc; } .prose-page ol li { list-style-type: decimal; } .prose-page a { color: #E11D48; text-decoration: underline; text-underline-offset: 3px; } .prose-page a:hover { opacity: 0.8; } .prose-page strong { font-weight: 600; } .prose-page hr { border-color: #e2e8f0; margin: 2rem 0; } .dark .prose-page p, .dark .prose-page li { color: #cbd5e1; } .dark .prose-page hr { border-color: #1e293b; } .dark .prose-page h2, .dark .prose-page h3 { color: #f1f5f9; } /* ============================================================ [18] 404 GLITCH NUMERAL Animasi flicker pada angka "404". Digunakan di: 404.html ============================================================ */ @keyframes flicker { 0%, 90%, 94%, 96%, 100% { opacity: 1; } 92% { opacity: 0.4; } 93% { opacity: 1; } 95% { opacity: 0.6; } 97% { opacity: 0.9; } } .glitch-num { animation: flicker 6s ease-in-out infinite; }