/* ========================================================================== Accessibility widget Self-hosted, no third-party script/subscription (replaces UserWay). ========================================================================== */ .a11y-toggle { position: fixed; bottom: 20px; left: 20px; z-index: 9999; width: 52px; height: 52px; border-radius: 50%; background: var(--navy); color: var(--ivory); border: 2px solid var(--brass-light); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,0.3); } .a11y-toggle:hover { background: var(--navy-soft); } .a11y-toggle svg { width: 26px; height: 26px; } .a11y-panel { position: fixed; bottom: 82px; left: 20px; z-index: 9999; width: 290px; background: var(--white); border: 1px solid rgba(34,48,58,0.16); box-shadow: 0 20px 48px rgba(0,0,0,0.28); padding: 18px; display: none; } .a11y-panel.open { display: block; } .a11y-panel h2 { font-size: 15px; margin-bottom: 4px; } .a11y-panel .a11y-sub { font-family: var(--font-mono); font-size: 10.5px; color: #7c8a92; margin-bottom: 14px; } .a11y-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-top: 1px solid rgba(34,48,58,0.08); font-size: 13.5px; } .a11y-row:first-of-type { border-top: none; } .a11y-stepper { display: flex; align-items: center; gap: 8px; } .a11y-stepper button { width: 26px; height: 26px; border: 1px solid rgba(34,48,58,0.25); background: var(--ivory); cursor: pointer; font-family: var(--font-mono); font-size: 14px; line-height: 1; } .a11y-switch { width: 38px; height: 20px; border-radius: 999px; background: rgba(34,48,58,0.2); border: none; position: relative; cursor: pointer; flex-shrink: 0; } .a11y-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--white); transition: left 0.15s ease; } .a11y-switch[aria-pressed="true"] { background: var(--seafoam); } .a11y-switch[aria-pressed="true"]::after { left: 20px; } .a11y-reset { margin-top: 14px; width: 100%; background: transparent; border: 1px solid var(--navy); color: var(--navy); font-family: var(--font-mono); font-size: 12px; padding: 9px; cursor: pointer; } .a11y-reset:hover { background: rgba(13,36,54,0.06); } /* ---- Applied states (added to ) ---- */ html.a11y-contrast { filter: contrast(1.15); } html.a11y-contrast body { background: #ffffff; } html.a11y-contrast .site-header, html.a11y-contrast .hero, html.a11y-contrast .city-ticker, html.a11y-contrast .site-footer { background: #000000 !important; } html.a11y-underline a { text-decoration: underline !important; } html.a11y-readable body, html.a11y-readable input, html.a11y-readable select, html.a11y-readable textarea, html.a11y-readable button { font-family: Arial, Helvetica, sans-serif !important; letter-spacing: 0.01em; } html.a11y-motion-off * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }