/* ========================================================= READING MODE — HALAMAN ARTIKEL (_artikel.html) --------------------------------------------------------- Hanya aktif di halaman artikel. Penanda aktif = atribut data-reading-theme di , yang cuma dipasang oleh skrip inline di _artikel.html. Halaman lain tidak pernah punya atribut itu, jadi seluruh berkas ini tidak berefek di sana. Font Literata dimuat lewat di _artikel.html, BUKAN @import di sini: @import bertingkat akan menunda render karena harus antre di belakang style.css. ========================================================= */ /* ========================================================= 1. TOKEN TEMA Selain variabel --rm-*, blok ini juga MENIMPA token global dari css/style.css (:root). Dengan begitu header, footer, komentar, dan tombol reaksi ikut berganti tema tanpa perlu ditulis ulang satu per satu. Spesifisitas html[attr] (0,1,1) mengalahkan :root (0,1,0). ========================================================= */ html[data-reading-theme] { --rm-serif: "Literata", Georgia, "Times New Roman", serif; --rm-sans: "Poppins", system-ui, sans-serif; /* Ukuran dasar kolom baca; dikali --rm-zoom di bagian 3. */ --rm-base: 1.1875rem; /* 19px */ --rm-zoom: 1; } /* --- Mode Gelap (default) --- */ html[data-reading-theme="dark"] { --rm-bg: hsl(230, 15%, 10%); --rm-surface: hsl(230, 12%, 14%); --rm-text: hsl(40, 10%, 85%); --rm-text-2: hsl(230, 8%, 55%); --rm-accent: hsl(35, 60%, 55%); --rm-accent-2: hsl(35, 65%, 64%); --rm-link: hsl(200, 50%, 60%); --rm-border: hsl(230, 10%, 20%); --rm-selection: hsla(35, 60%, 55%, 0.22); --rm-glow: hsla(35, 60%, 55%, 0.55); --rm-panel: hsla(230, 15%, 13%, 0.92); --rm-chrome: hsla(230, 15%, 8%, 0.82); --rm-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); /* Timpa token global css/style.css */ --primary-color: hsl(35, 60%, 55%); --dark-bg: hsl(230, 15%, 10%); --card-bg: hsl(230, 12%, 14%); --light-text: hsl(40, 10%, 85%); --dark-text: hsl(230, 8%, 55%); --border-color: hsl(230, 10%, 20%); } /* --- Mode Terang --- */ html[data-reading-theme="light"] { --rm-bg: hsl(40, 30%, 96%); --rm-surface: hsl(40, 25%, 92%); --rm-text: hsl(220, 15%, 20%); --rm-text-2: hsl(220, 10%, 45%); --rm-accent: hsl(35, 60%, 45%); --rm-accent-2: hsl(35, 65%, 38%); --rm-link: hsl(210, 55%, 40%); --rm-border: hsl(40, 15%, 82%); --rm-selection: hsla(35, 60%, 45%, 0.18); --rm-glow: hsla(35, 60%, 45%, 0.5); --rm-panel: hsla(40, 30%, 97%, 0.94); --rm-chrome: hsla(40, 30%, 96%, 0.86); --rm-shadow: 0 10px 30px rgba(60, 50, 30, 0.14); --primary-color: hsl(35, 60%, 45%); --dark-bg: hsl(40, 30%, 96%); --card-bg: hsl(40, 25%, 92%); --light-text: hsl(220, 15%, 20%); --dark-text: hsl(220, 10%, 45%); --border-color: hsl(40, 15%, 82%); } /* ========================================================= 2. WARNA HARDCODE YANG TIDAK IKUT TOKEN Nilai-nilai di bawah ditulis literal di style.css / bacaan.css / komentar.css, jadi tidak ikut berubah lewat custom property. Ditambal khusus di sini. ========================================================= */ html[data-reading-theme] body[data-page-id="artikel"] { background-color: var(--rm-bg); color: var(--rm-text); transition: background-color 0.4s ease, color 0.4s ease; } /* Header desktop + header atas mobile (rgba(0,0,0,.8) di style.css) */ html[data-reading-theme] body[data-page-id="artikel"] header#main-header, html[data-reading-theme] body[data-page-id="artikel"] .mobile-top-header { background-color: var(--rm-chrome); } /* Badge jumlah baca memakai rgba putih (bacaan.css) */ html[data-reading-theme] body[data-page-id="artikel"] .artikel-detail-view-badge { color: var(--rm-text-2); background: color-mix(in srgb, var(--rm-text) 6%, transparent); border-color: var(--rm-border); } /* Tombol suka aktif memakai #007bff (style.css:4482) */ html[data-reading-theme] body[data-page-id="artikel"] .reaction-btn.liked { background-color: var(--rm-accent); color: var(--rm-bg); border-color: var(--rm-accent); } html[data-reading-theme] body[data-page-id="artikel"] .kegiatan-meta, html[data-reading-theme] body[data-page-id="artikel"] .artikel-meta-info { color: var(--rm-text-2); } /* Komentar: avatar #333, tombol kirim teks #000, hover #0088cc */ html[data-reading-theme] body[data-page-id="artikel"] .comment-avatar, html[data-reading-theme] body[data-page-id="artikel"] .comment-avatar-input { background-color: var(--rm-surface); } html[data-reading-theme] body[data-page-id="artikel"] .comment-submit-btn { background-color: var(--rm-accent); color: var(--rm-bg); } html[data-reading-theme] body[data-page-id="artikel"] .comment-submit-btn:hover:not(:disabled) { background-color: var(--rm-accent-2); } html[data-reading-theme] body[data-page-id="artikel"] .comment-submit-btn:disabled { background-color: var(--rm-text-2); color: var(--rm-bg); } html[data-reading-theme] body[data-page-id="artikel"] ::selection { background: var(--rm-selection); } /* ========================================================= 3. TINGKAT ZOOM Cukup mengubah pengali; ukuran teks & lebar kolom (satuan ch dan em) ikut menyesuaikan sendiri. ========================================================= */ html[data-reading-zoom="75"] { --rm-zoom: 0.75; } html[data-reading-zoom="87"] { --rm-zoom: 0.875; } html[data-reading-zoom="100"] { --rm-zoom: 1; } html[data-reading-zoom="112"] { --rm-zoom: 1.125; } html[data-reading-zoom="125"] { --rm-zoom: 1.25; } html[data-reading-zoom="137"] { --rm-zoom: 1.375; } html[data-reading-zoom="150"] { --rm-zoom: 1.5; } /* ========================================================= 4. KOLOM BACA box-sizing: content-box dipakai supaya max-width benar-benar berlaku untuk teks (65ch), bukan teks + padding. ========================================================= */ html[data-reading-theme] body[data-page-id="artikel"] .artikel-container { box-sizing: content-box; max-width: 65ch; margin: 0 auto; padding: 2.5rem clamp(1.25rem, 5vw, 3.5rem) 3.5rem; background-color: transparent; border-radius: 0; font-family: var(--rm-serif); font-size: calc(var(--rm-base) * var(--rm-zoom)); transition: font-size 0.3s ease; } /* Daftar selektor ini mencerminkan style.css:1346-1361 yang memaksa Georgia — harus ditimpa satu-satu karena aturan di sana memasang font-family langsung di tiap elemen anak. */ html[data-reading-theme] body[data-page-id="artikel"] #artikel-dinamis-container > h1, html[data-reading-theme] body[data-page-id="artikel"] #artikel-dinamis-container > h2, html[data-reading-theme] body[data-page-id="artikel"] #artikel-dinamis-container > .kegiatan-meta, html[data-reading-theme] body[data-page-id="artikel"] .artikel-konten, html[data-reading-theme] body[data-page-id="artikel"] .artikel-konten .artikel-isi, html[data-reading-theme] body[data-page-id="artikel"] .artikel-konten > h1, html[data-reading-theme] body[data-page-id="artikel"] .artikel-konten > h2, html[data-reading-theme] body[data-page-id="artikel"] .artikel-konten > h3, html[data-reading-theme] body[data-page-id="artikel"] .artikel-konten > h4, html[data-reading-theme] body[data-page-id="artikel"] .artikel-konten .kegiatan-meta, html[data-reading-theme] body[data-page-id="artikel"] .artikel-konten p, html[data-reading-theme] body[data-page-id="artikel"] .artikel-konten li, html[data-reading-theme] body[data-page-id="artikel"] .artikel-konten blockquote, html[data-reading-theme] body[data-page-id="artikel"] .artikel-konten cite { font-family: var(--rm-serif); } html[data-reading-theme] body[data-page-id="artikel"] .artikel-konten p, html[data-reading-theme] body[data-page-id="artikel"] .artikel-konten li { /* Rata kiri, bukan justify: teks justify menimbulkan "sungai" spasi yang mengganggu lacakan mata (WCAG 1.4.8). */ text-align: left; line-height: 1.75; font-size: 1em; letter-spacing: 0.01em; color: var(--rm-text); } html[data-reading-theme] body[data-page-id="artikel"] .artikel-konten p { margin: 0 0 1.5em; } html[data-reading-theme] body[data-page-id="artikel"] .artikel-konten li { margin-bottom: 0.6em; } html[data-reading-theme] body[data-page-id="artikel"] .artikel-konten ul, html[data-reading-theme] body[data-page-id="artikel"] .artikel-konten ol { list-style-position: outside; padding-left: 1.4em; margin: 0 0 1.5em; } html[data-reading-theme] body[data-page-id="artikel"] .artikel-konten > h1, html[data-reading-theme] body[data-page-id="artikel"] #artikel-dinamis-container > h1 { font-family: var(--rm-serif); font-size: 1.9em; line-height: 1.2; letter-spacing: -0.015em; color: var(--rm-text); margin: 0 0 0.5rem; text-align: left; } html[data-reading-theme] body[data-page-id="artikel"] .artikel-konten h2 { font-size: 1.45em; line-height: 1.3; color: var(--rm-text); margin: 2em 0 0.6em; } html[data-reading-theme] body[data-page-id="artikel"] .artikel-konten h3, html[data-reading-theme] body[data-page-id="artikel"] .artikel-konten h4 { font-size: 1.2em; line-height: 1.35; color: var(--rm-accent); margin: 1.8em 0 0.5em; text-align: left; } html[data-reading-theme] body[data-page-id="artikel"] .artikel-konten a { color: var(--rm-link); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--rm-link) 40%, transparent); transition: border-color 0.25s ease, color 0.25s ease; } html[data-reading-theme] body[data-page-id="artikel"] .artikel-konten a:hover { color: var(--rm-accent); border-bottom-color: var(--rm-accent); } html[data-reading-theme] body[data-page-id="artikel"] .artikel-konten blockquote { border-left: 3px solid var(--rm-accent); padding: 0.2em 0 0.2em 1.4em; margin: 1.8em 0; font-style: italic; color: var(--rm-text-2); text-align: left; } html[data-reading-theme] body[data-page-id="artikel"] .artikel-konten img, html[data-reading-theme] body[data-page-id="artikel"] .artikel-isi img { margin: 2em auto; border-radius: 6px; } html[data-reading-theme] body[data-page-id="artikel"] .artikel-konten hr { border: none; border-top: 1px solid var(--rm-border); margin: 2.5em 0; } /* Tombol reaksi & badge tetap sans-serif (style.css:1431) */ html[data-reading-theme] body[data-page-id="artikel"] .reaction-buttons { font-family: var(--rm-sans); font-size: 0.8rem; border-top-color: var(--rm-border) !important; } /* ========================================================= 5. META WAKTU BACA Disisipkan js/reading-mode.js di bawah judul. ========================================================= */ .rm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; font-family: var(--rm-sans); font-size: 0.68em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rm-text-2); margin: 0.9em 0 2.2em; padding-bottom: 1.2em; border-bottom: 1px solid var(--rm-border); } .rm-meta i { color: var(--rm-accent); margin-right: 0.35em; } .rm-meta-sisa { color: var(--rm-accent); } /* ========================================================= 6. MUNCUL BERTAHAP SAAT DI-SCROLL ========================================================= */ .rm-masuk { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; } .rm-masuk.rm-tampil { opacity: 1; transform: none; } /* ========================================================= 7. BAR PROGRES Elemen .reading-progress sudah ada global (app-core.js); di sini hanya diwarnai ulang + diberi kilau di milestone. ========================================================= */ html[data-reading-theme] body[data-page-id="artikel"] .reading-progress { background: linear-gradient(90deg, var(--rm-accent-2), var(--rm-accent)); box-shadow: 0 0 8px var(--rm-glow); } html[data-reading-theme] body[data-page-id="artikel"] .reading-progress.rm-kilau { box-shadow: 0 0 22px 3px var(--rm-glow); filter: brightness(1.35); transition: width 0.15s ease-out, box-shadow 0.5s ease, filter 0.5s ease; } /* ========================================================= 8. PANEL KONTROL BACA Kiri bawah, supaya tidak bertabrakan dengan tombol AI Assistant (kanan bawah, chatbot.css:1020). ========================================================= */ .rm-kontrol { position: fixed; left: 20px; bottom: 24px; z-index: 9989; display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: var(--rm-panel); border: 1px solid var(--rm-border); box-shadow: var(--rm-shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-family: var(--rm-sans); } .rm-kontrol-isi { display: flex; align-items: center; gap: 4px; max-width: 260px; overflow: hidden; transition: max-width 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.24s ease; } .rm-kontrol[data-terbuka="false"] .rm-kontrol-isi { max-width: 0; opacity: 0; pointer-events: none; } .rm-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 8px; border: none; border-radius: 999px; background: transparent; color: var(--rm-text); font-family: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .rm-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--rm-accent) 22%, transparent); color: var(--rm-accent); } .rm-btn:disabled { opacity: 0.35; cursor: default; } .rm-btn:focus-visible, .rm-kontrol-toggle:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 2px; } .rm-kontrol-toggle { flex-shrink: 0; width: 38px; height: 38px; border: none; border-radius: 50%; background: var(--rm-accent); color: var(--rm-bg); font-size: 0.9rem; cursor: pointer; transition: transform 0.25s ease, filter 0.2s ease; } .rm-kontrol-toggle:hover { filter: brightness(1.08); transform: translateY(-1px); } .rm-zoom-label { min-width: 46px; text-align: center; font-size: 0.72rem; font-variant-numeric: tabular-nums; color: var(--rm-text-2); } .rm-pisah { width: 1px; height: 20px; background: var(--rm-border); margin: 0 2px; } /* Mode fokus: sembunyikan tombol AI Assistant selama membaca. Tidak menyentuh JS chatbot — hanya menumpang kelas di body, dan mundur begitu panel chat benar-benar dibuka. */ body.rm-fokus:not(.chatbot-open) #open-chatbot-btn { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px) scale(0.94); } /* ========================================================= 9. KARTU BACA — tampil setelah artikel selesai Bentuknya meniru kartu pinjam perpustakaan: judul kecil, garis-garis isian, dan stempel miring. Ini satu-satunya elemen dekoratif di mode baca; sisanya sengaja tenang. ========================================================= */ .rm-selesai { position: relative; margin: 3rem 0 1rem; padding: 1.6rem 1.6rem 1.4rem; border: 1px solid var(--rm-border); border-top: 3px double var(--rm-accent); border-radius: 4px; background: var(--rm-surface); font-family: var(--rm-sans); overflow: hidden; } .rm-selesai-label { font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--rm-text-2); margin: 0 0 0.9rem; } .rm-selesai-judul { font-family: var(--rm-serif); font-size: 1.15rem; line-height: 1.35; color: var(--rm-text); margin: 0 0 1rem; max-width: 26ch; } .rm-selesai-baris { display: flex; gap: 2rem; flex-wrap: wrap; } .rm-selesai-item { display: flex; flex-direction: column; gap: 2px; } .rm-selesai-angka { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--rm-accent); line-height: 1; } .rm-selesai-ket { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rm-text-2); } .rm-stempel { position: absolute; right: -10px; bottom: -6px; display: grid; place-items: center; width: 96px; height: 96px; border: 2px solid var(--rm-accent); border-radius: 50%; transform: rotate(-14deg); opacity: 0.4; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.18em; color: var(--rm-accent); pointer-events: none; } /* ========================================================= 10. LAYAR KECIL ========================================================= */ @media (max-width: 768px) { html[data-reading-theme] { --rm-base: 1.0625rem; /* 17px */ } html[data-reading-theme] body[data-page-id="artikel"] .artikel-container { padding: 1.5rem 1.25rem 2.5rem; } html[data-reading-theme] body[data-page-id="artikel"] .artikel-konten > h1, html[data-reading-theme] body[data-page-id="artikel"] #artikel-dinamis-container > h1 { font-size: 1.6em; } /* Nav bawah mobile setinggi ±60px (body punya padding-bottom 60px di style.css:1635) — panel harus di atasnya. */ .rm-kontrol { left: 12px; bottom: calc(72px + var(--safe-bottom, 0px)); } .rm-stempel { width: 74px; height: 74px; font-size: 0.52rem; } } /* ========================================================= 11. HORMATI prefers-reduced-motion ========================================================= */ @media (prefers-reduced-motion: reduce) { html[data-reading-theme] body[data-page-id="artikel"], html[data-reading-theme] body[data-page-id="artikel"] .artikel-container, .rm-masuk, .rm-kontrol-isi, .rm-kontrol-toggle, html[data-reading-theme] body[data-page-id="artikel"] .reading-progress.rm-kilau { transition: none !important; } .rm-masuk { opacity: 1; transform: none; } }