/* ============================================================================ * accessibility-widget.css * Lapisan aksesibilitas untuk halaman landing microsite UPBU. * * Semua unit di dalam widget sengaja memakai px, BUKAN rem. Fitur "ukuran teks" * bekerja dengan mengubah font-size elemen , jadi kalau widget ikut rem * panel pengaturannya ikut membesar sampai tidak muat layar. * * Kelas mode dipasang pada (asw-*) sehingga bisa aktif sebelum widget * selesai dirender dan otomatis berlaku untuk konten yang disisipkan belakangan * (AJAX, Google Translate, dsb) tanpa perlu menyentuh DOM lagi. * ==========================================================================*/ /* --- Token ---------------------------------------------------------------- */ :root { --asw-primary: #06667f; /* kontras 6.1:1 di atas putih (WCAG AA) */ --asw-primary-ink: #ffffff; --asw-surface: #ffffff; --asw-surface-2: #f4f6f8; --asw-ink: #1a1d21; --asw-ink-muted: #4a5259; --asw-border: #c9d1d8; --asw-focus: #06667f; --asw-z-widget: 2147483000; --asw-font-scale: 1; } html.dark { --asw-surface: #16191d; --asw-surface-2: #1f242a; --asw-ink: #f3f5f7; --asw-ink-muted: #b7c0c8; --asw-border: #3a424a; --asw-primary: #4cc2e0; /* kontras 8.2:1 di atas #16191d */ --asw-primary-ink: #06231c; --asw-focus: #4cc2e0; } /* ============================================================================ * 1. Dasar aksesibilitas situs (berlaku selalu, bukan hanya saat widget dipakai) * ==========================================================================*/ /* Teks khusus pembaca layar. */ .asw-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* WCAG 2.4.1 Bypass Blocks — tautan lewati navigasi. */ .asw-skip-link { position: fixed; top: 8px; left: 8px; z-index: calc(var(--asw-z-widget) + 20); display: inline-block; padding: 12px 20px; font: 600 16px/1.2 inherit; color: #ffffff; background: #06667f; border: 2px solid #ffffff; border-radius: 8px; box-shadow: 0 4px 16px rgb(0 0 0 / 35%); text-decoration: none; transform: translateY(-200%); transition: transform 0.15s ease-in-out; } .asw-skip-link:focus { transform: translateY(0); } /* WCAG 2.4.7 Focus Visible — banyak komponen situs ini meng-override outline bawaan peramban, jadi indikator fokus dipasang ulang di sini secara global. */ :focus-visible { outline: 3px solid var(--asw-focus); outline-offset: 2px; border-radius: 2px; } /* Target yang dituju skip link / navigasi struktur tidak boleh memunculkan outline saat difokuskan lewat skrip (tabindex="-1"), agar tidak mengganggu. */ [tabindex="-1"]:focus:not(:focus-visible) { outline: none; } /* WCAG 2.3.3 — hormati preferensi sistem sejak muat pertama, sebelum pengguna sempat membuka menu apa pun. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================================ * 2. Mode penyesuaian konten * * Selektor konten selalu mengecualikan #asw-root (widget itu sendiri) supaya * panel pengaturan tetap terbaca ketika mode ekstrem sedang aktif. * ==========================================================================*/ /* -- Ukuran teks ----------------------------------------------------------- */ /* Menskalakan font-size akar. Seluruh situs memakai Tailwind (satuan rem), jadi satu properti ini menskalakan semuanya — termasuk konten yang baru disisipkan — tanpa menulis style inline ke ribuan elemen. */ html.asw-scaled { font-size: calc(100% * var(--asw-font-scale)); } /* -- Jarak teks (WCAG 1.4.12 Text Spacing) --------------------------------- */ html.asw-line-height body *:not(#asw-root, #asw-root *) { line-height: 1.8 !important; } html.asw-letter-spacing body *:not(#asw-root, #asw-root *) { letter-spacing: 0.12em !important; } html.asw-word-spacing body *:not(#asw-root, #asw-root *) { word-spacing: 0.16em !important; } html.asw-paragraph-spacing body :is(p, li, dd, blockquote):not(#asw-root *) { margin-bottom: 2em !important; } html.asw-font-weight body *:not(#asw-root, #asw-root *) { font-weight: 700 !important; } /* -- Rata kiri ------------------------------------------------------------- */ /* Teks rata kanan-kiri (justify) menghasilkan "sungai" spasi yang menyulitkan pembaca disleksia; mode ini memaksa rata kiri. */ html.asw-align-left body *:not(#asw-root, #asw-root *) { text-align: left !important; } /* -- Font ramah disleksia -------------------------------------------------- */ @font-face { font-family: 'OpenDyslexic3'; /* Jalur relatif terhadap berkas CSS ini — tidak bergantung pada base URL aplikasi, sehingga tidak bisa rusak lagi seperti versi sebelumnya. */ src: url('fonts/OpenDyslexic3-Regular.woff') format('woff'), url('fonts/OpenDyslexic3-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } html.asw-readable-font body *:not(#asw-root, #asw-root *, .fa, .fas, .far, .fab, .fal, .material-icons, i[class*='fa-']) { font-family: 'OpenDyslexic3', 'Comic Sans MS', Verdana, Arial, sans-serif !important; } /* -- Sorot judul & tautan -------------------------------------------------- */ html.asw-highlight-title body :is(h1, h2, h3, h4, h5, h6):not(#asw-root *) { outline: 2px solid #06667f !important; outline-offset: 2px; background-color: #fff3bf !important; color: #1a1d21 !important; } html.asw-highlight-links body a[href]:not(#asw-root *) { outline: 2px solid #06667f !important; outline-offset: 2px; text-decoration: underline !important; text-underline-offset: 3px; background-color: #fff3bf !important; color: #10306b !important; } /* -- Penekanan fokus (WCAG 2.4.11/2.4.13) ---------------------------------- */ html.asw-highlight-focus :focus-visible, html.asw-highlight-focus :focus { outline: 4px solid #ffdd00 !important; outline-offset: 3px !important; box-shadow: 0 0 0 8px #000000 !important; border-radius: 2px; } /* -- Sembunyikan gambar ---------------------------------------------------- */ /* Mengurangi beban kognitif dan menghilangkan gambar yang mengganggu; teks alternatif tetap dibacakan pembaca layar karena elemennya tidak dibuang. */ html.asw-hide-images body :is(img, picture, svg, video, iframe):not(#asw-root *) { visibility: hidden !important; } html.asw-hide-images body *:not(#asw-root, #asw-root *) { background-image: none !important; } /* -- Kursor besar ---------------------------------------------------------- */ html.asw-big-cursor body *:not(#asw-root *) { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58' viewBox='0 0 512 512'%3E%3Cpath fill='%23ffffff' stroke='%23000000' stroke-width='24' d='M82 0v471l105-100 62 141 96-42-62-141 146-9z'/%3E%3C/svg%3E") 4 4, auto !important; } html.asw-big-cursor body :is(a, button, [role='button'], input, select, textarea, label):not(#asw-root *) { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58' viewBox='0 0 512 512'%3E%3Cpath fill='%23ffdd00' stroke='%23000000' stroke-width='24' d='M82 0v471l105-100 62 141 96-42-62-141 146-9z'/%3E%3C/svg%3E") 4 4, pointer !important; } /* -- Hentikan animasi (WCAG 2.2.2) ----------------------------------------- */ html.asw-stop-animations *:not(#asw-root *), html.asw-stop-animations *:not(#asw-root *)::before, html.asw-stop-animations *:not(#asw-root *)::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* ============================================================================ * 3. Penyesuaian warna * * Filter warna dipasang lewat overlay ber-backdrop-filter, BUKAN `filter` pada * . Alasannya: properti `filter` pada sebuah elemen menjadikannya * containing block bagi seluruh keturunan position:fixed — artinya header * sticky, tombol "kembali ke atas", dan tombol widget ini sendiri akan ikut * menggulung bersama halaman. Overlay tidak punya efek samping itu. * ==========================================================================*/ #asw-filter-overlay { position: fixed; inset: 0; display: none; pointer-events: none; /* Satu tingkat di bawah widget agar panel pengaturannya sendiri tidak ikut terfilter (mustahil dibaca kalau monokrom + kontras tinggi). */ z-index: calc(var(--asw-z-widget) - 1); } html.asw-contrast-monochrome #asw-filter-overlay { display: block; backdrop-filter: grayscale(1); } html.asw-contrast-low-saturation #asw-filter-overlay { display: block; backdrop-filter: saturate(0.5); } html.asw-contrast-high-saturation #asw-filter-overlay { display: block; backdrop-filter: saturate(2); } html.asw-contrast-high-contrast #asw-filter-overlay { display: block; backdrop-filter: contrast(1.35); } /* Cadangan untuk peramban tanpa backdrop-filter: kembali ke filter pada dengan menerima konsekuensi position:fixed di atas. */ @supports not (backdrop-filter: grayscale(1)) { html.asw-contrast-monochrome { filter: grayscale(1); } html.asw-contrast-low-saturation { filter: saturate(0.5); } html.asw-contrast-high-saturation { filter: saturate(2); } html.asw-contrast-high-contrast { filter: contrast(1.35); } } /* Kontras gelap / terang: memaksa palet, bukan menyaring warna, supaya rasio kontrasnya benar-benar terjamin dan bukan sekadar "lebih tajam". */ html.asw-contrast-dark-contrast body *:not(#asw-root, #asw-root *) { background-color: #000000 !important; background-image: none !important; color: #ffffff !important; fill: #ffffff !important; border-color: #ffffff !important; text-shadow: none !important; box-shadow: none !important; } html.asw-contrast-dark-contrast body a[href]:not(#asw-root *) { color: #ffdd00 !important; text-decoration: underline !important; } html.asw-contrast-light-contrast body *:not(#asw-root, #asw-root *) { background-color: #ffffff !important; background-image: none !important; color: #000000 !important; fill: #000000 !important; border-color: #000000 !important; text-shadow: none !important; box-shadow: none !important; } html.asw-contrast-light-contrast body a[href]:not(#asw-root *) { color: #0000cc !important; text-decoration: underline !important; } /* ============================================================================ * 4. Panduan membaca (reading guide / mask) * ==========================================================================*/ .asw-guide-band { position: fixed; left: 0; right: 0; height: 0; pointer-events: none; background-color: rgb(0 0 0 / 65%); z-index: calc(var(--asw-z-widget) - 2); } .asw-guide-band--top { top: 0; } .asw-guide-band--bottom { bottom: 0; } /* ============================================================================ * 5. Widget: tombol pemicu, panel, dan isinya * ==========================================================================*/ #asw-root { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 16px; line-height: 1.4; -webkit-font-smoothing: antialiased; } #asw-root *, #asw-root *::before, #asw-root *::after { box-sizing: border-box; } /* -- Tombol pemicu --------------------------------------------------------- */ .asw-trigger { position: fixed; left: 20px; bottom: 20px; z-index: var(--asw-z-widget); /* WCAG 2.5.8 Target Size (Minimum) mensyaratkan 24x24; 48x48 memenuhi rekomendasi 2.5.5 (Enhanced) dan tetap nyaman di layar sentuh. */ width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; padding: 0; color: var(--asw-primary-ink); background: var(--asw-primary); border: 2px solid var(--asw-primary-ink); border-radius: 12px; box-shadow: 0 4px 14px rgb(0 0 0 / 30%); cursor: pointer; transition: transform 0.2s ease, background-color 0.2s ease; } .asw-trigger:hover { transform: scale(1.08); } .asw-trigger svg { width: 30px; height: 30px; fill: currentColor; pointer-events: none; } /* -- Panel ----------------------------------------------------------------- */ .asw-panel { position: fixed; left: 20px; top: 20px; bottom: 84px; z-index: calc(var(--asw-z-widget) + 2); display: flex; flex-direction: column; width: 420px; max-width: calc(100vw - 40px); color: var(--asw-ink); background: var(--asw-surface); border: 1px solid var(--asw-border); border-radius: 12px; box-shadow: 0 10px 40px rgb(0 0 0 / 35%); overflow: hidden; } .asw-panel[hidden] { display: none; } .asw-backdrop { position: fixed; inset: 0; z-index: calc(var(--asw-z-widget) + 1); background: rgb(0 0 0 / 45%); } .asw-backdrop[hidden] { display: none; } .asw-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--asw-border); background: var(--asw-surface-2); } .asw-panel-title { margin: 0; font-size: 17px; font-weight: 700; } .asw-header-actions { display: flex; gap: 4px; } .asw-icon-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; color: var(--asw-ink); background: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer; } .asw-icon-btn:hover { background: var(--asw-surface); border-color: var(--asw-border); } .asw-icon-btn svg { width: 22px; height: 22px; fill: currentColor; pointer-events: none; } .asw-panel-body { flex: 1; padding: 14px 16px 20px; overflow-y: auto; overscroll-behavior: contain; } .asw-panel-footer { padding: 10px 16px; font-size: 13px; color: var(--asw-ink-muted); border-top: 1px solid var(--asw-border); background: var(--asw-surface-2); } .asw-panel-footer kbd { padding: 1px 6px; font: inherit; font-size: 12px; border: 1px solid var(--asw-border); border-radius: 4px; background: var(--asw-surface); } /* -- Grup & kontrol -------------------------------------------------------- */ .asw-group { margin: 0 0 22px; padding: 0; border: 0; } .asw-group-title { display: block; margin: 0 0 10px; padding: 0; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--asw-ink-muted); } .asw-field { display: block; margin-bottom: 14px; } .asw-field-label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; } .asw-select { width: 100%; min-height: 44px; padding: 10px 12px; font: inherit; font-size: 15px; color: var(--asw-ink); background: var(--asw-surface); border: 1px solid var(--asw-border); border-radius: 8px; } /* Penyetel ukuran teks. */ .asw-stepper { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--asw-surface-2); border: 1px solid var(--asw-border); border-radius: 8px; } .asw-stepper-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; color: var(--asw-primary-ink); background: var(--asw-primary); border: 1px solid transparent; border-radius: 50%; cursor: pointer; } .asw-stepper-btn[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; } .asw-stepper-btn svg { width: 22px; height: 22px; fill: currentColor; pointer-events: none; } .asw-stepper-value { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; } /* Kisi tombol mode. */ .asw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .asw-toggle { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; min-height: 92px; padding: 12px 6px; font: inherit; font-size: 13px; line-height: 1.3; text-align: center; color: var(--asw-ink); background: var(--asw-surface); border: 1px solid var(--asw-border); border-radius: 8px; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; } .asw-toggle:hover { border-color: var(--asw-primary); } .asw-toggle svg { width: 24px; height: 24px; flex: none; fill: currentColor; pointer-events: none; } /* Status aktif ditandai warna DAN tanda centang, bukan warna saja (WCAG 1.4.1 Use of Color). aria-pressed menyampaikannya ke pembaca layar. */ .asw-toggle[aria-pressed='true'] { color: var(--asw-primary-ink); background: var(--asw-primary); border-color: var(--asw-primary); } .asw-toggle[aria-pressed='true']::after { content: '✓ '; font-weight: 700; } /* -- Navigasi struktur halaman --------------------------------------------- */ .asw-structure { max-height: 260px; margin: 0; padding: 0; overflow-y: auto; list-style: none; border: 1px solid var(--asw-border); border-radius: 8px; } .asw-structure:empty::after { display: block; padding: 12px; font-size: 14px; color: var(--asw-ink-muted); content: attr(data-empty); } .asw-structure li + li { border-top: 1px solid var(--asw-border); } .asw-structure button { display: block; width: 100%; min-height: 44px; padding: 10px 12px; font: inherit; font-size: 14px; text-align: left; color: var(--asw-ink); background: transparent; border: 0; cursor: pointer; } .asw-structure button:hover { background: var(--asw-surface-2); } .asw-structure button .asw-structure-level { display: inline-block; min-width: 30px; margin-right: 8px; font-size: 11px; font-weight: 700; color: var(--asw-ink-muted); } .asw-structure li[data-depth='2'] button { padding-left: 26px; } .asw-structure li[data-depth='3'] button { padding-left: 40px; } .asw-structure li[data-depth='4'] button { padding-left: 54px; } .asw-structure li[data-depth='5'] button { padding-left: 68px; } .asw-structure li[data-depth='6'] button { padding-left: 82px; } /* Sorotan sementara pada elemen yang baru dilompati. */ .asw-jump-target { outline: 4px dashed #06667f !important; outline-offset: 4px; } /* -- Notifikasi ------------------------------------------------------------ */ /* role="status" membuat isinya dibacakan pembaca layar (WCAG 4.1.3), toast ini adalah versi terlihatnya. */ .asw-toast { position: fixed; left: 50%; bottom: 32px; z-index: calc(var(--asw-z-widget) + 5); max-width: min(90vw, 460px); padding: 12px 20px; font-size: 15px; text-align: center; color: #ffffff; background: #16191d; border: 1px solid #ffffff; border-radius: 8px; box-shadow: 0 6px 24px rgb(0 0 0 / 40%); transform: translateX(-50%); } .asw-toast[hidden] { display: none; } /* ============================================================================ * 6. Responsif & mode kontras paksa sistem * ==========================================================================*/ @media (max-width: 560px) { .asw-panel { left: 10px; right: 10px; top: 10px; bottom: 10px; width: auto; max-width: none; } .asw-trigger { left: 12px; bottom: 12px; } } @media (max-width: 400px) { .asw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Windows High Contrast / forced-colors: jangan lawan palet sistem. */ @media (forced-colors: active) { .asw-trigger, .asw-toggle, .asw-icon-btn, .asw-stepper-btn { border: 1px solid ButtonBorder; forced-color-adjust: none; color: ButtonText; background: ButtonFace; } .asw-toggle[aria-pressed='true'] { color: HighlightText; background: Highlight; } #asw-filter-overlay, .asw-guide-band { display: none !important; } } @media (prefers-reduced-motion: reduce) { .asw-trigger, .asw-toggle, .asw-skip-link { transition: none; } .asw-trigger:hover { transform: none; } }