/* ============================================================ Accessibility widget — floating button + panel, and the user-toggle effect classes applied to . ============================================================ */ /* ---- Floating launcher button ---- */ .a11y-fab { position: fixed; left: 18px; bottom: 18px; z-index: 10050; width: 54px; height: 54px; border-radius: 50%; background: var(--ink); color: var(--parchment); border: 2px solid var(--gold); cursor: pointer; display: grid; place-items: center; box-shadow: 0 8px 24px -8px rgba(26, 18, 8, 0.5); transition: transform 0.2s ease, background 0.2s ease; } .a11y-fab:hover { transform: scale(1.06); background: var(--rust); } .a11y-fab svg { width: 28px; height: 28px; } .a11y-fab:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; } /* ---- Panel ---- */ .a11y-panel { position: fixed; left: 18px; bottom: 84px; z-index: 10051; width: min(360px, calc(100vw - 36px)); max-height: min(78vh, 620px); overflow-y: auto; background: var(--cream); color: var(--ink); border: 1px solid var(--ink-12); border-radius: 14px; box-shadow: 0 20px 50px -16px rgba(26, 18, 8, 0.45); font-family: var(--font-body); } .a11y-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.1rem; background: var(--ink); color: var(--parchment); border-radius: 14px 14px 0 0; position: sticky; top: 0; } .a11y-head h2 { font-size: 1rem; margin: 0; font-family: var(--font-heading); } .a11y-close { background: none; border: none; color: var(--parchment); cursor: pointer; font-size: 1.3rem; line-height: 1; padding: 0.2rem 0.4rem; } .a11y-close:focus-visible { outline: 2px solid var(--gold); } .a11y-body { padding: 1rem 1.1rem 1.2rem; } .a11y-section-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-70); margin: 0.4rem 0 0.6rem; font-weight: 700; } /* text-size row */ .a11y-textsize { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; } .a11y-textsize button { width: 40px; height: 40px; border: 1.5px solid var(--ink); background: var(--parchment); color: var(--ink); border-radius: 8px; cursor: pointer; font-size: 1.1rem; font-weight: 700; } .a11y-textsize .a11y-pct { min-width: 3.5ch; text-align: center; font-weight: 700; } /* toggle grid */ .a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; } .a11y-toggle { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; padding: 0.7rem 0.8rem; border: 1.5px solid var(--ink-12); border-radius: 10px; background: var(--parchment); color: var(--ink); cursor: pointer; text-align: left; font: inherit; font-size: 0.85rem; transition: border-color 0.15s ease, background 0.15s ease; } .a11y-toggle:hover { border-color: var(--gold); } .a11y-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; } .a11y-toggle .a11y-ic { font-size: 1.2rem; line-height: 1; } .a11y-toggle[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-soft); font-weight: 700; } .a11y-toggle[aria-pressed="true"]::after { content: " ✓"; color: var(--gold); } .a11y-reset { width: 100%; margin-top: 1rem; padding: 0.7rem; border: 1.5px solid var(--ink); background: var(--ink); color: var(--parchment); border-radius: 8px; cursor: pointer; font-family: var(--font-heading); letter-spacing: 0.04em; } .a11y-reset:hover { background: var(--rust); border-color: var(--rust); } .a11y-foot { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; justify-content: center; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--ink-12); font-size: 0.82rem; } .a11y-foot a { color: var(--rust); } @media (max-width: 600px) { .a11y-fab { left: 12px; bottom: 12px; } .a11y-panel { left: 12px; right: 12px; width: auto; bottom: 76px; } } /* ============================================================ USER EFFECT CLASSES (applied on ) ============================================================ */ /* High contrast */ html.a11y-contrast body { background: #ffffff !important; color: #000000 !important; } html.a11y-contrast .grain, html.a11y-contrast .hero-ghost { display: none !important; } html.a11y-contrast .topbar, html.a11y-contrast .site-header { background: #000 !important; color: #fff !important; } html.a11y-contrast a { color: #00339a !important; text-decoration: underline !important; } html.a11y-contrast .btn, html.a11y-contrast .a11y-toggle { border-color: #000 !important; } html.a11y-contrast :is(.pub-title, .news-title, .toc-title, h1, h2, h3) { color: #000 !important; } /* Highlight links */ html.a11y-links a:not(.btn):not(.a11y-fab) { text-decoration: underline !important; text-underline-offset: 2px; outline: 1px dashed currentColor; outline-offset: 2px; } /* Readable font */ html.a11y-readable body, html.a11y-readable :is(p, a, li, span, h1, h2, h3, button, input, label, blockquote, td, th) { font-family: Verdana, "Atkinson Hyperlegible", Arial, sans-serif !important; letter-spacing: 0.01em; } /* Bigger spacing */ html.a11y-spacing body { line-height: 2 !important; } html.a11y-spacing :is(p, li) { letter-spacing: 0.05em; word-spacing: 0.16em; margin-bottom: 1.2em; } /* Pause animations (epilepsy-safe) */ html.a11y-no-motion *, html.a11y-no-motion *::before, html.a11y-no-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } html.a11y-no-motion .js .reveal { opacity: 1 !important; transform: none !important; } /* Big cursor */ html.a11y-big-cursor, html.a11y-big-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='1.5' d='M5 2l14 8-6 1.5L16 18l-3 1.5-3-6.5L5 16z'/%3E%3C/svg%3E") 4 2, auto !important; }