/* ===================================================================== LiGaMu — Accessibility Hub WCAG 2.1 AA-aligned settings, applied via [data-a11y-*] on ===================================================================== */ /* === Trigger icon di header === */ .a11y-trigger { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: transparent; border: 1px solid var(--border); border-radius: 50%; color: var(--brand); cursor: pointer; transition: background 0.15s, border-color 0.15s; flex-shrink: 0; } .a11y-trigger:hover { background: var(--brand-light); border-color: var(--brand); } .a11y-trigger i { font-size: 18px; } /* === Modal === */ .a11y-root { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; } .a11y-root[hidden] { display: none; } .a11y-backdrop { position: absolute; inset: 0; background: rgba(15, 45, 36, 0.4); backdrop-filter: blur(2px); animation: a11y-fade 0.15s ease-out; } @keyframes a11y-fade { from { opacity: 0; } to { opacity: 1; } } .a11y-panel { position: relative; z-index: 1; width: 100%; max-width: 420px; margin: 0 16px; background: var(--paper); border-radius: var(--radius-lg); box-shadow: 0 24px 80px rgba(15, 45, 36, 0.24); overflow: hidden; animation: a11y-zoom 0.18s ease-out; max-height: 90vh; display: flex; flex-direction: column; } @keyframes a11y-zoom { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } /* === Header === */ .a11y-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border); } .a11y-title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 8px; color: var(--brand); } .a11y-title i { font-size: 22px; } .a11y-subtitle { margin: 2px 0 0; font-size: 0.75rem; color: var(--ink-soft); } .a11y-close { width: 32px; height: 32px; border: 0; background: transparent; border-radius: 50%; color: var(--ink-soft); cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: inherit; flex-shrink: 0; } .a11y-close:hover { background: var(--neutral-warm); color: var(--ink); } .a11y-close i { font-size: 18px; } /* === Body === */ .a11y-body { padding: 18px 20px; overflow-y: auto; flex: 1; } .a11y-group { margin-bottom: 16px; } .a11y-group:last-child { margin-bottom: 0; } .a11y-label { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; } .a11y-label i { font-size: 14px; color: var(--ink-soft); } /* Segmented control (Ukuran teks / Kontras) */ .a11y-segmented { display: grid; gap: 6px; } .a11y-segmented[role="radiogroup"][aria-label*="ukuran"] { grid-template-columns: repeat(4, 1fr); } .a11y-segmented[role="radiogroup"][aria-label*="kontras"] { grid-template-columns: repeat(2, 1fr); } .a11y-seg { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 8px; font-size: 0.8125rem; font-family: inherit; color: var(--ink); cursor: pointer; transition: all 0.1s; } .a11y-seg:hover { background: var(--neutral-warm); border-color: var(--border-strong); } .a11y-seg.is-active { background: var(--brand); border-color: var(--brand); color: white; font-weight: 500; } /* Toggle row (Disleksia / Animasi / Spasi / Underline) */ .a11y-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; background: var(--neutral-warm); border-radius: var(--radius-md); margin-bottom: 8px; } .a11y-row:last-child { margin-bottom: 0; } .a11y-row-info { flex: 1; min-width: 0; } .a11y-row-title { display: flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 500; color: var(--ink); } .a11y-row-title i { font-size: 14px; color: var(--ink-soft); } .a11y-row-sub { font-size: 0.6875rem; color: var(--ink-soft); margin-top: 2px; } .a11y-toggle { position: relative; width: 40px; height: 22px; background: var(--border-strong); border: 0; border-radius: 999px; cursor: pointer; transition: background 0.15s; flex-shrink: 0; padding: 0; } .a11y-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: white; border-radius: 50%; transition: transform 0.18s ease-out; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .a11y-toggle[data-a11y-value="on"] { background: var(--brand); } .a11y-toggle[data-a11y-value="on"] .a11y-toggle-thumb { transform: translateX(18px); } /* === Footer === */ .a11y-footer { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; border-top: 1px solid var(--border); background: var(--neutral-warm); } .a11y-reset { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 0; color: var(--ink-soft); font-size: 0.75rem; cursor: pointer; font-family: inherit; } .a11y-reset:hover { color: var(--brand); } .a11y-reset i { font-size: 13px; } .a11y-wcag-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.6875rem; color: var(--brand); font-weight: 500; } .a11y-wcag-badge i { font-size: 13px; color: var(--success); } /* ===================================================================== APPLIED MODES — di-trigger oleh data-attributes pada ===================================================================== */ /* 1. Font size (WCAG 1.4.4) */ html[data-a11y-fontsize="small"] { font-size: 14px; } html[data-a11y-fontsize="normal"] { font-size: 16px; /* default */ } html[data-a11y-fontsize="large"] { font-size: 18px; } html[data-a11y-fontsize="xlarge"] { font-size: 21px; } /* 2. High contrast (WCAG 1.4.3 + 1.4.6 AAA) */ html[data-a11y-contrast="high"] { --paper: #FFFFFF; --neutral-warm: #FFFFFF; --ink: #000000; --ink-soft: #000000; --ink-mute: #1A1A1A; --border: #000000; --border-strong: #000000; --brand: #003318; --brand-light: #FFFFE0; --brand-dark: #001A0C; --accent-ai: #4B0082; --accent-gold: #6B3F00; --success: #003D00; --danger: #8B0000; } html[data-a11y-contrast="high"] body { background: #FFFFFF; color: #000000; } html[data-a11y-contrast="high"] a { text-decoration: underline; } html[data-a11y-contrast="high"] img, html[data-a11y-contrast="high"] svg { filter: contrast(1.2); } html[data-a11y-contrast="high"] .btn, html[data-a11y-contrast="high"] button { border-width: 2px !important; } /* 3. Dyslexia-friendly font */ @font-face { font-family: 'Atkinson Hyperlegible'; src: url('https://fonts.gstatic.com/s/atkinsonhyperlegible/v11/9Bt23C1KxNDXMspQ1lPyU89-1h6ONRlW45GE5ZgpewSSbQ.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Atkinson Hyperlegible'; src: url('https://fonts.gstatic.com/s/atkinsonhyperlegible/v11/9Bt73C1KxNDXMspQ1lPyU89-1h6ONRlW45G055ItWQGCbA.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } html[data-a11y-dyslexic="on"] body, html[data-a11y-dyslexic="on"] body * { font-family: 'Atkinson Hyperlegible', 'Plus Jakarta Sans', system-ui, sans-serif !important; letter-spacing: 0.01em !important; } html[data-a11y-dyslexic="on"] p, html[data-a11y-dyslexic="on"] li, html[data-a11y-dyslexic="on"] body { line-height: 1.7 !important; } /* 4. Reduce motion (WCAG 2.2.2 + 2.3.3) */ html[data-a11y-motion="off"] *, html[data-a11y-motion="off"] *::before, html[data-a11y-motion="off"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* 5. Text spacing (WCAG 1.4.12) */ html[data-a11y-spacing="on"] body { line-height: 1.8 !important; letter-spacing: 0.05em !important; word-spacing: 0.16em !important; } html[data-a11y-spacing="on"] p, html[data-a11y-spacing="on"] li { line-height: 2 !important; margin-bottom: 1.2em !important; } /* 6. Underline links (colorblind-friendly) */ html[data-a11y-underline="on"] a:not(.btn):not(.nav-link):not(.action-tile):not(.cmdk-item):not(.lbn-item):not(.brand-link) { text-decoration: underline !important; text-underline-offset: 3px; } /* ===================================================================== FOUNDATION A11Y (always-on, invisible to most users) ===================================================================== */ /* Skip link (WCAG 2.4.1 Bypass Blocks) */ .skip-link { position: absolute; top: -100px; left: 16px; background: var(--brand); color: white; padding: 12px 20px; border-radius: var(--radius-md); text-decoration: none; font-weight: 500; font-size: 0.9375rem; z-index: 9999; transition: top 0.2s; } .skip-link:focus { top: 16px; } /* Enhanced focus indicators (WCAG 2.4.7 Focus Visible) */ *:focus-visible { outline: 3px solid var(--brand) !important; outline-offset: 2px !important; border-radius: 4px; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--brand) !important; outline-offset: 2px !important; } /* Screen reader only utility */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { .a11y-backdrop, .a11y-panel, .a11y-toggle-thumb { animation: none; transition: none; } }