/* ═══════════════════════════════════════════════════════════════════════════ or-a11y.css — Módulo de ACESSIBILIDADE do site público (MÓDULO PORTÁVEL OneRank). Emitido INCONDICIONALMENTE (skip-link e foco visível são estruturais, não recurso opcional) — carregado DEPOIS do custom.css e do or-dark.css (a ordem é load-bearing: ver header.php). Aplicável a qualquer site de qualquer cliente, nos 4 modos de chrome. Seções deste arquivo (crescem por fase — ver docs/acessibilidade.md): F0 — Skip-link + foco visível global (SEMPRE ativos, sem gate de atributo) F1 — Camada de pilha de FABs (layout mora inline em fab-stack.php; aqui só o skin) F2 — Widget: FAB + painel + os 9 controles (data-or-fs/ts/hc/lk/rm/cu) F3 — Erro inline persistente de formulário (or-form.js) F5/F6 — Carrossel + prefers-reduced-motion ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════ F3 — Erro inline de formulário (or-form.js) ═══════════════ Inserido pelo or-form.js junto de aria-invalid/aria-describedby — sobrevive ao Swal fechar (o Swal é transiente; sem isto o campo ficava visualmente idêntico ao válido). */ .or-form-erro-inline { color: #dc3545; font-size: .82rem; margin-top: 4px; } /* ═══════════════ F0 — Skip-link ═══════════════ Primeiro nó focável do documento (header.php, logo após ). position:fixed (não absolute) para o -9999px não abrir scroll horizontal — o validar-responsivo.php mediria isso como overflow. */ .or-skip { position: fixed; left: -9999px; top: 0; z-index: 100000; padding: .7rem 1.1rem; background: #000; color: #fff; border-radius: 0 0 6px 0; font: 600 .95rem/1 system-ui, -apple-system, "Segoe UI", sans-serif; text-decoration: none; } .or-skip:focus { left: 8px; top: 8px; outline: 3px solid #fff; outline-offset: -6px; } /* ═══════════════ F0 — Foco visível global ═══════════════ O maior ganho de conformidade por byte do módulo (WCAG 2.4.7 AA). O style.css do Canvas 7 (gitignored, por-fork) tem outline:none!important em vários pontos — por isso a lista é EXPLÍCITA de elementos interativos (nunca `*`) e usa !important. Anel duplo (outline escuro + halo claro) garante 3:1 contra fundo claro E escuro sem conhecer a paleta do fork (WCAG 1.4.11). */ html body :is( a[href], area[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [contenteditable="true"] ):focus-visible { outline: 3px solid var(--marca-primaria, #0B3D91) !important; outline-offset: 2px !important; box-shadow: 0 0 0 5px rgba(255, 255, 255, .85) !important; border-radius: 3px; } html[data-bs-theme="dark"] body :is( a[href], area[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [contenteditable="true"] ):focus-visible { box-shadow: 0 0 0 5px rgba(0, 0, 0, .85) !important; } /* ═══════════════ F2 — Widget: tokens locais ═══════════════ NÃO usa os tokens --or-* de or-dark.css — este arquivo carrega INCONDICIONALMENTE (mesmo com o dark desligado), então precisa ser autossuficiente. Escuro é ortogonal ao widget em si: [data-bs-theme="dark"] só existe quando Theme::darkAtivo() (que também gateia or-dark.css). */ :root { --a11y-surface: #ffffff; --a11y-surface-2: #f2f4f7; /* trilho do switch OFF, hover sutil de linha */ --a11y-text: #1a2332; --a11y-text-muted: #667085; --a11y-border: rgba(0, 0, 0, .14); --a11y-accent: var(--marca-primaria, #0B3D91); --a11y-accent-soft: color-mix(in srgb, var(--a11y-accent), transparent 88%); --a11y-elev: 0 14px 38px rgba(20, 24, 33, .16); } [data-bs-theme="dark"] { --a11y-surface: #1c1f26; --a11y-surface-2: #262b34; --a11y-text: #e6e8ec; --a11y-text-muted: #9aa3af; --a11y-border: rgba(255, 255, 255, .16); --a11y-accent: color-mix(in srgb, var(--marca-primaria, #0B3D91), white 35%); --a11y-accent-soft: color-mix(in srgb, var(--a11y-accent), transparent 82%); --a11y-elev: 0 14px 38px rgba(0, 0, 0, .55); } /* ═══════════════ F2 — FAB (neutro por padrão — mesma filosofia do FAB de tema, irmão na pilha) ═══════════════ A cor de marca do cliente NUNCA vira fundo sólido do botão fechado: uma marca clara/pastel deixaria o ícone ilegível, e um disco saturado "briga" visualmente com o FAB de tema (que já é neutro) na mesma pilha. A marca entra só como REALCE — no hover e quando o painel está aberto — então continua presente na identidade sem depender dela para contraste/legibilidade. */ .or-a11y-fab { width: var(--or-fab-size, 48px); height: var(--or-fab-size, 48px); padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--a11y-border); background: var(--a11y-surface); color: var(--a11y-text); box-shadow: 0 4px 14px rgba(0, 0, 0, .18); cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease; } .or-a11y-fab:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, .25); color: var(--a11y-accent); border-color: var(--a11y-accent); } .or-a11y-fab[aria-expanded="true"] { background: var(--a11y-accent); border-color: var(--a11y-accent); color: #fff; } /* O ícone vem envolto num (a11y-fab.php) — sem isto ele herda `display:inline-block` + `vertical-align:-0.125em` do `.or-icon` genérico (custom.css), e o span (linha de texto) fica mais alto que o SVG de 24px, descentralizando o ícone dentro do círculo. `display:flex` no próprio span neutraliza baseline/line-height — centralização robusta, não depende do texto ao redor. */ .or-a11y-fab > span { display: flex; align-items: center; justify-content: center; line-height: 0; } .or-a11y-fab .or-icon { width: 24px; height: 24px; display: block; } /* ═══════════════ F2 — Painel (Disclosure — NÃO é dialog/modal) ═══════════════ Irmão da pilha, não filho: se fosse filho de .or-fab-stack, a largura do painel viraria a largura do container e o column-reverse empurraria os outros FABs. Ancorado nos MESMOS tokens (--or-fab-gap/size/lift) para acompanhar a pilha quando o banner LGPD empurra tudo. */ .or-a11y-panel { position: fixed; z-index: 9990; /* abaixo do banner LGPD (9999); acima do conteúdo */ left: var(--or-fab-gap, 20px); bottom: calc(var(--or-fab-gap, 20px) * 2 + var(--or-fab-size, 48px) + var(--or-fab-lift, 0px)); width: min(340px, calc(100vw - var(--or-fab-gap, 20px) * 2)); /* Acompanha o lado ATUAL do FAB (\OneRank\Acessibilidade::posicao(), configurável desde a padronização dos FABs) — sem isto, mover o botão pra direita deixava o painel "flutuando" ainda ancorado à esquerda, longe do gatilho que o abriu. max-height também NUNCA pode exceder o espaço acima do próprio FAB (o terceiro termo do min()) — sem isso, com --or-fab-lift alto (banner LGPD grande em mobile) o painel estourava o topo da viewport e o cabeçalho/botão fechar ficavam inalcançáveis. Achado real, 22/08/2026, em fork com tema bespoke (custom.css sem a Camada 3 do adapter escondendo overflow). !important: este componente é documentado como portável para QUALQUER template Envato — não dá pra confiar em especificidade contra um reset arbitrário de terceiro. As propriedades ESTRUTURAIS da pilha de FABs (posição/tamanho/z-index/overflow) sempre vencem; cor/sombra/ borda (abaixo) continuam sem !important — o template pode restilizar a aparência à vontade. */ max-height: min(70vh, 620px, calc(100vh - (var(--or-fab-gap, 20px) * 2 + var(--or-fab-size, 48px) + var(--or-fab-lift, 0px)) - 16px)) !important; overflow-y: auto; overscroll-behavior: contain; background: var(--a11y-surface); color: var(--a11y-text); border: 1px solid var(--a11y-border); border-radius: 14px; box-shadow: var(--a11y-elev); padding: 18px; font-size: .95rem; /* Rolagem SEMPRE visível quando o conteúdo excede max-height — templates que zeram ::-webkit-scrollbar globalmente (ex.: Envato "Azurio", `::-webkit-scrollbar{display:none !important}`) escondiam a barra aqui também, deixando o painel roláve mas sem affordance nenhuma. Escopado ao painel — não é uma opinião de scrollbar pro site inteiro. Achado real, 22/08/2026 — o reset do template usava `width:0 !important`, então width AQUI também precisa de !important (display/appearance vencem por especificidade sozinhos, mas width perderia pro !important do template sem reforço). */ scrollbar-width: thin !important; } .or-a11y-panel::-webkit-scrollbar { display: block; width: 6px !important; -webkit-appearance: none !important; } .or-a11y-panel::-webkit-scrollbar-thumb { background: var(--a11y-border); border-radius: 999px; } .or-a11y-panel[hidden] { display: none; } .or-a11y-panel[data-or-lado="direita"] { left: auto; right: var(--or-fab-gap, 20px); } @media (max-width: 575.98px) { /* Cobre a tela (bottom-sheet) — o foco fica preso via `inert` no #wrapper (or-a11y.js), não CSS. */ .or-a11y-panel { left: 0; right: 0; width: auto; bottom: var(--or-fab-lift, 0px); border-radius: 16px 16px 0 0; max-height: min(80vh, calc(100vh - var(--or-fab-lift, 0px) - 16px)) !important; } } .or-a11y-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .or-a11y-panel-title { display: flex; align-items: center; gap: 10px; min-width: 0; } .or-a11y-badge { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--a11y-accent-soft); color: var(--a11y-accent); } .or-a11y-badge .or-icon { width: 17px; height: 17px; display: block; } .or-a11y-panel-head h2 { font-size: 1.05rem; font-weight: 700; margin: 0; outline: none; } .or-a11y-close { width: 30px; height: 30px; flex-shrink: 0; border: 0; border-radius: 8px; background: transparent; color: var(--a11y-text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease; } .or-a11y-close:hover { background: var(--a11y-surface-2); color: var(--a11y-text); } .or-a11y-field { border: 0; padding: 0; margin: 0 0 16px; } .or-a11y-field legend { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--a11y-text-muted); padding: 0; margin-bottom: 9px; } .or-a11y-scale { display: flex; gap: 6px; } .or-a11y-scale input { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .or-a11y-scale label { flex: 1; text-align: center; padding: 9px 4px; border: 1px solid var(--a11y-border); background: var(--a11y-surface); border-radius: 9px; cursor: pointer; font-weight: 700; font-size: .84rem; transition: background .15s ease, color .15s ease, border-color .15s ease; } .or-a11y-scale label:hover { border-color: var(--a11y-accent); } .or-a11y-scale input:checked + label { background: var(--a11y-accent); color: #fff; border-color: var(--a11y-accent); } .or-a11y-scale input:focus-visible + label { outline: 3px solid var(--a11y-accent); outline-offset: 2px; } /* Toggles (checkbox) — switch moderno, CSS puro sobre o real (nunca div decorativa: o input continua focável/operável por teclado e leitor de tela, só a pele muda). O trilho é desenhado pelo próprio input via `appearance:none` + `::after` (a bolinha); nenhum JS a mais — or-a11y.js já lê estes mesmos IDs via `.checked`/evento `change`, inalterado. */ .or-a11y-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 2px; margin: 0 -2px; border-radius: 8px; cursor: pointer; font-size: .92rem; transition: background .15s ease; } .or-a11y-toggle:hover { background: var(--a11y-surface-2); } .or-a11y-toggle input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 38px; height: 22px; border-radius: 999px; background: var(--a11y-surface-2); border: 1px solid var(--a11y-border); position: relative; cursor: pointer; margin: 0; transition: background .18s ease, border-color .18s ease; } .or-a11y-toggle input[type="checkbox"]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .18s ease; } .or-a11y-toggle input[type="checkbox"]:checked { background: var(--a11y-accent); border-color: var(--a11y-accent); } .or-a11y-toggle input[type="checkbox"]:checked::after { transform: translateX(16px); } .or-a11y-toggle input[type="checkbox"]:focus-visible { outline: 3px solid var(--a11y-accent); outline-offset: 2px; } /* Botão "Tema escuro" — MESMA pele de switch dos checkboxes acima (era um bloco retangular destoante; um `