/* adaptations.css — camada de adaptações do widget (blueprint modelo §1.3).
* Todas as regras são condicionais a atributos data-a11y-* no , escritos
* pelo bootstrap (antes da 1ª pintura) e pelo loader. Reverter = remover os
* atributos; nenhum estilo inline é tocado (reversibilidade absoluta §0).
* Estático e cacheável; nada aqui depende de JS depois de aplicado. */
/* ── Tamanho do texto (níveis 1..4) ─────────────────────────────────────────
* ponytail: escala via font-size do root — perfeito em sites rem-based,
* parcial em sites 100% px; upgrade = reescala por elemento como overlays
* comerciais fazem, quando houver demanda medida. */
html[data-a11y-fontscale="1"] { font-size: 112.5% !important; }
html[data-a11y-fontscale="2"] { font-size: 125% !important; }
html[data-a11y-fontscale="3"] { font-size: 150% !important; }
html[data-a11y-fontscale="4"] { font-size: 175% !important; }
/* ── Altura de linha (1..3) ── */
html[data-a11y-lineheight="1"] body :is(p, li, dd, blockquote, span, a, td, th, label) { line-height: 1.5 !important; }
html[data-a11y-lineheight="2"] body :is(p, li, dd, blockquote, span, a, td, th, label) { line-height: 1.8 !important; }
html[data-a11y-lineheight="3"] body :is(p, li, dd, blockquote, span, a, td, th, label) { line-height: 2.2 !important; }
/* ── Espaçamento entre letras (1..3) ── */
html[data-a11y-spacing="1"] body * { letter-spacing: .05em !important; }
html[data-a11y-spacing="2"] body * { letter-spacing: .1em !important; }
html[data-a11y-spacing="3"] body * { letter-spacing: .15em !important; }
html[data-a11y-spacing] body :is(.a11y-trigger, .a11y-panel-frame) { letter-spacing: normal !important; }
/* ── Alinhamento de texto ── */
html[data-a11y-align="left"] body :is(p, li, dd, blockquote, h1, h2, h3, h4, h5, h6, td, th) { text-align: left !important; }
html[data-a11y-align="center"] body :is(p, li, dd, blockquote, h1, h2, h3, h4, h5, h6, td, th) { text-align: center !important; }
html[data-a11y-align="right"] body :is(p, li, dd, blockquote, h1, h2, h3, h4, h5, h6, td, th) { text-align: right !important; }
html[data-a11y-align="justify"] body :is(p, li, dd, blockquote, td, th) { text-align: justify !important; }
/* ── Contraste ──────────────────────────────────────────────────────────────
* dark/light: esquema forçado simples. invert: filtro no root com contra-
* inversão de mídia (imagens/vídeos voltam ao natural). O widget em si fica
* fora do filtro (iframe + trigger re-invertidos). */
html[data-a11y-contrast="dark"] body,
html[data-a11y-contrast="dark"] body :is(div, section, article, main, aside, header, footer, nav, table, tr, td, th, ul, ol, li, form, fieldset) {
background-color: #101418 !important;
color: #f2f4f7 !important;
border-color: #3a4048 !important;
}
html[data-a11y-contrast="dark"] body :is(a, a *) { color: #8ab4ff !important; }
html[data-a11y-contrast="light"] body,
html[data-a11y-contrast="light"] body :is(div, section, article, main, aside, header, footer, nav, table, tr, td, th, ul, ol, li, form, fieldset) {
background-color: #ffffff !important;
color: #101828 !important;
border-color: #667085 !important;
}
html[data-a11y-contrast="light"] body :is(a, a *) { color: #0b3ecc !important; }
html[data-a11y-contrast="invert"] { filter: invert(1) hue-rotate(180deg); }
html[data-a11y-contrast="invert"] :is(img, picture, video, canvas, iframe, embed, object, [style*="background-image"]) {
filter: invert(1) hue-rotate(180deg);
}
/* ── Saturação (1=baixa, 2=alta, 3=sem cor) ── */
html[data-a11y-saturation="1"] { filter: saturate(.4); }
html[data-a11y-saturation="2"] { filter: saturate(2); }
html[data-a11y-saturation="3"] { filter: saturate(0); }
/* ── Parar animações ── */
html[data-a11y-noanim] *,
html[data-a11y-noanim] *::before,
html[data-a11y-noanim] *::after {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
/* ── Ocultar imagens (visibility preserva layout; sem colapso brusco) ── */
html[data-a11y-noimg] body :is(img, picture, video, svg:not(.a11y-keep)) { visibility: hidden !important; }
html[data-a11y-noimg] body * { background-image: none !important; }
/* ── Destacar links ── */
html[data-a11y-links] body a {
text-decoration: underline !important;
background-color: #ffe999 !important;
color: #101828 !important;
outline: 2px solid #b54700 !important;
outline-offset: 1px;
}
/* ── Fonte para dislexia ──
* ponytail: stack de fontes de alta legibilidade disponíveis no SO; a
* OpenDyslexic embarcada (licença SIL) entra quando o CDN servir a webfont. */
html[data-a11y-dyslexia] body *:not(code, pre, kbd) {
font-family: "OpenDyslexic", "Comic Sans MS", Verdana, Tahoma, sans-serif !important;
}
/* ── Cursor grande (1..2) — SVG inline, sem rede ── */
html[data-a11y-cursor="1"], html[data-a11y-cursor="1"] body * {
cursor: url('data:image/svg+xml;utf8,') 4 2, auto !important;
}
html[data-a11y-cursor="2"], html[data-a11y-cursor="2"] body * {
cursor: url('data:image/svg+xml;utf8,') 6 3, auto !important;
}
/* ── Guia de leitura (elemento do loader, id fixo) ── */
#a11y-reading-guide {
position: fixed;
left: 0; right: 0;
height: 3.2rem;
pointer-events: none;
z-index: 2147482000;
background: rgb(255 213 0 / .22);
border-top: 2px solid #b54700;
border-bottom: 2px solid #b54700;
}
/* ── Widget imune às próprias adaptações ── */
html[data-a11y-contrast="invert"] .a11y-trigger,
html[data-a11y-contrast="invert"] #a11y-panel-frame { filter: invert(1) hue-rotate(180deg); }
html[data-a11y-noanim] .a11y-trigger { transition: none !important; }
/* ── Trigger (blueprint modelo §2) ── */
.a11y-trigger {
--size: 68px;
--m: 20px;
position: fixed;
inline-size: var(--size);
block-size: var(--size);
border-radius: 50%;
background: var(--a11y-brand, #1849FF);
border: 3px solid #fff;
box-shadow: 0 4px 14px rgb(0 0 0 / .28);
display: grid;
place-items: center;
cursor: pointer;
padding: 0;
z-index: 2147483000;
transition: transform .18s ease, box-shadow .18s ease;
}
.a11y-trigger[data-oversize="1"] { --size: 108px; }
.a11y-trigger:hover { transform: scale(1.06); }
.a11y-trigger:focus-visible {
outline: 3px solid #fff;
outline-offset: 3px;
box-shadow: 0 0 0 6px #1849FF, 0 4px 14px rgb(0 0 0 / .28);
}
.a11y-trigger svg { inline-size: 58%; block-size: 58%; fill: #fff; }
.a11y-trigger[data-x="right"] { inset-inline-end: calc(var(--m) + env(safe-area-inset-right)); }
.a11y-trigger[data-x="left"] { inset-inline-start: calc(var(--m) + env(safe-area-inset-left)); }
.a11y-trigger[data-y="top"] { inset-block-start: calc(var(--m) + env(safe-area-inset-top)); }
.a11y-trigger[data-y="middle"] { inset-block-start: 50%; translate: 0 -50%; }
.a11y-trigger[data-y="bottom"] { inset-block-end: calc(var(--m) + env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: reduce) { .a11y-trigger { transition: none; } }
/* ── Iframe do painel ── */
#a11y-panel-frame {
position: fixed;
inline-size: min(400px, 100vw);
block-size: min(639px, 92vh);
border: 0;
border-radius: 16px;
box-shadow: 0 12px 40px rgb(16 24 40 / .18);
z-index: 2147482900;
background: #EFF1F5;
}
#a11y-panel-frame[data-x="right"] { inset-inline-end: 16px; }
#a11y-panel-frame[data-x="left"] { inset-inline-start: 16px; }
#a11y-panel-frame[data-open="0"] { display: none; }
#a11y-panel-frame { inset-block-end: 16px; }
@media (max-width: 480px) {
#a11y-panel-frame { inset: 0; inline-size: 100vw; block-size: 100vh; border-radius: 0; }
}
/* ── Região viva (sr-only) ── */
#a11y-live {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}