/* ===== Skip-to-main link ===== */ .an-skip-link { position: absolute; top: -40px; inset-inline-start: 0; background: var(--primary); color: white; padding: 8px 14px; z-index: 100; border-radius: 0 0 6px 6px; font-size: 14px; text-decoration: none; transition: top .15s; } .an-skip-link:focus { top: 0; outline: 2px solid white; outline-offset: 2px; } /* ===== Focus rings (only when keyboard-navigating) ===== */ body.an-kbd a:focus, body.an-kbd button:focus, body.an-kbd input:focus, body.an-kbd select:focus, body.an-kbd textarea:focus, body.an-kbd [tabindex="0"]:focus { outline: 3px solid #ffd54f; outline-offset: 2px; border-radius: 4px; } button:focus, input:focus, select:focus, textarea:focus, a:focus { outline: none; } /* ===== Font-size preference ===== The site is authored in px (no rem/em), so changing the root font-size scales nothing. Use `zoom` on instead, which scales px content reliably across modern browsers. The floating widget is counter-zoomed so its own controls stay a stable size. */ html.a11y-fs-115 body { zoom: 1.15; } html.a11y-fs-130 body { zoom: 1.30; } html.a11y-fs-115 .a11y-fab, html.a11y-fs-115 .a11y-panel { zoom: 0.8696; } /* 1 / 1.15 */ html.a11y-fs-130 .a11y-fab, html.a11y-fs-130 .a11y-panel { zoom: 0.7692; } /* 1 / 1.30 */ /* ===== High contrast mode ===== */ html.a11y-contrast-high { --bg: #000000; --surface: #111111; --text: #ffffff; --text-muted: #d1d5db; --border: #4b5563; --primary: #ffeb3b; --primary-dark: #fbc02d; --primary-light: rgba(255,235,59,.18); } html.a11y-contrast-high body { background: #000; color: #fff; } html.a11y-contrast-high .an-card, html.a11y-contrast-high .an-section, html.a11y-contrast-high .an-empty, html.a11y-contrast-high .an-header { background: #111; } html.a11y-contrast-high .an-search-bar { background: #111; } html.a11y-contrast-high .an-search-field { background: #111; border-inline-end-color: #4b5563; } html.a11y-contrast-high .an-search-field input, html.a11y-contrast-high .an-search-field select, html.a11y-contrast-high .an-toolbar select { background: #111; color: #fff; } html.a11y-contrast-high .an-pill { background: #111; color: #fff; border-color: #4b5563; } html.a11y-contrast-high .an-pill.active, html.a11y-contrast-high .an-toolbar-btn.active { background: #ffeb3b; color: #000; border-color: #ffeb3b; } html.a11y-contrast-high .an-search-go { background: #ffeb3b; color: #000; } /* ===== Floating accessibility button + panel ===== */ .a11y-fab { position: fixed; bottom: 18px; inset-inline-start: 18px; width: 48px; height: 48px; border-radius: 50%; background: var(--primary); color: white; border: none; box-shadow: 0 4px 14px rgba(0,0,0,.2); cursor: pointer; z-index: 90; display: flex; align-items: center; justify-content: center; transition: transform .15s, background .15s; } .a11y-fab:hover { transform: scale(1.06); background: var(--primary-dark); } .a11y-fab .material-icons { font-size: 24px; } .a11y-panel { position: fixed; bottom: 78px; inset-inline-start: 18px; width: 280px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 14px 16px; z-index: 91; display: none; font-size: 14px; } .a11y-panel.open { display: block; } .a11y-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .a11y-close { background: none; border: none; padding: 4px; cursor: pointer; color: var(--text-muted); } .a11y-close .material-icons { font-size: 18px; } .a11y-section { margin-bottom: 12px; } .a11y-label { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; } .a11y-row { display: flex; gap: 6px; } .a11y-row button { flex: 1; padding: 7px 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; border-radius: 6px; } .a11y-row button.active { background: var(--primary); color: white; border-color: var(--primary); } .a11y-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--border); font-size: 13px; } .a11y-reset { background: none; border: none; color: var(--primary); cursor: pointer; padding: 0; font: inherit; } .a11y-reset:hover { text-decoration: underline; } .a11y-foot a { color: var(--primary); }