/* ========================================================================== Accessibility Toolbar ========================================================================== */ .a11y-launcher { position: fixed; bottom: 24px; right: 24px; z-index: 900; width: 56px; height: 56px; border-radius: 50%; background: var(--color-amber-dark); color: var(--color-white); border: none; box-shadow: var(--shadow-lg); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .a11y-launcher:hover { background: #A11119; } .a11y-launcher .fa { font-size: 26px; } .a11y-panel { position: fixed; top: 0; right: 0; height: 100%; width: min(380px, 100%); background: var(--color-white); color: var(--color-slate); box-shadow: var(--shadow-lg); z-index: 950; transform: translateX(100%); transition: transform var(--transition); display: flex; flex-direction: column; border-left: 1px solid var(--color-border); } .a11y-panel.open { transform: translateX(0); } .a11y-panel-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-border); } .a11y-panel-header h2 { font-size: 1.15rem; margin: 0; } .a11y-close { background: none; border: none; cursor: pointer; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); } .a11y-close:hover { background: var(--color-sand); } .a11y-panel-body { overflow-y: auto; padding: var(--space-md); flex: 1; } .a11y-group { margin-bottom: var(--space-md); } .a11y-group h3 { font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-slate-mute); margin-bottom: 0.6rem; } .a11y-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } .a11y-btn { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.6rem 0.75rem; border-radius: var(--radius-sm); border: 2px solid var(--color-border); background: var(--color-white); color: var(--color-slate); cursor: pointer; font-size: 0.875rem; font-weight: 600; text-align: left; } .a11y-btn:hover { border-color: var(--color-ink); } .a11y-btn[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-white); } .a11y-btn.full { grid-column: 1 / -1; justify-content: center; } .a11y-reset { margin-top: var(--space-sm); width: 100%; } /* ---- Toggle-driven effects (applied to ) ---- */ html[data-a11y-linespacing="true"] body { line-height: 2.1 !important; } html[data-a11y-letterspacing="true"] body { letter-spacing: 0.06em !important; } html[data-a11y-highlight-links="true"] a:not(.a11y-btn):not(.a11y-close):not(.a11y-launcher) { background: #FFF3B0; color: #10141A; text-decoration: underline; } html[data-a11y-highlight-headings="true"] h1, html[data-a11y-highlight-headings="true"] h2, html[data-a11y-highlight-headings="true"] h3, html[data-a11y-highlight-headings="true"] h4 { background: #FFF3B0; color: #10141A; display: inline-block; padding: 0.1em 0.3em; } html[data-a11y-cursor="big"], html[data-a11y-cursor="big"] a, html[data-a11y-cursor="big"] button { cursor: url('data:image/svg+xml;utf8,') 2 2, auto; } html[data-a11y-kbd-indicator="true"] a:focus-visible, html[data-a11y-kbd-indicator="true"] button:focus-visible, html[data-a11y-kbd-indicator="true"] input:focus-visible, html[data-a11y-kbd-indicator="true"] [tabindex]:focus-visible { outline: 4px solid #FF4D4D !important; outline-offset: 3px !important; } /* Reading guide: a thin bar that tracks the cursor vertically */ #a11y-reading-guide { position: fixed; left: 0; right: 0; height: 3px; background: var(--color-amber); z-index: 850; pointer-events: none; display: none; } html[data-a11y-reading-guide="true"] #a11y-reading-guide { display: block; } /* Reading mask: dims page above/below a band around the cursor */ #a11y-reading-mask-top, #a11y-reading-mask-bottom { position: fixed; left: 0; right: 0; background: rgba(0,0,0,0.55); z-index: 840; pointer-events: none; display: none; } html[data-a11y-reading-mask="true"] #a11y-reading-mask-top, html[data-a11y-reading-mask="true"] #a11y-reading-mask-bottom { display: block; } @media (max-width: 480px) { .a11y-controls { grid-template-columns: 1fr; } }