/* =========================================================================== Barra de acessibilidade flutuante (site público). Carregada só quando o recurso está ativo no admin. As classes `a11y-*` no são alternadas pelo accessibility.js e persistidas em localStorage. =========================================================================== */ /* --- Modos de cor (mutuamente exclusivos), aplicados na tela toda --- */ html.a11y-grayscale { filter: grayscale(100%); } html.a11y-negative { filter: invert(100%) hue-rotate(180deg); } html.a11y-high-contrast { filter: contrast(160%) saturate(140%); } /* --- Ajustes independentes --- */ html.a11y-light-bg body { background: #ffffff !important; } html.a11y-underline a { text-decoration: underline !important; } /* Fonte legível: aplica só em ELEMENTOS DE TEXTO — nunca nos ícones ( com fonte própria do Font Awesome/Boxicons). Antes o seletor `*` trocava a fonte dos e os ícones viravam quadradinhos ("tofu"). */ html.a11y-readable body { font-family: Verdana, Tahoma, Arial, "Segoe UI", sans-serif !important; } html.a11y-readable body :is(p, h1, h2, h3, h4, h5, h6, span, a, li, label, small, strong, b, em, button, input, select, textarea, td, th, dt, dd, figcaption, blockquote, .btn, .nav-link, .form-control) { font-family: Verdana, Tahoma, Arial, "Segoe UI", sans-serif !important; letter-spacing: .01em; } /* --- Botão flutuante (FAB), à DIREITA, logo ACIMA do botão do VLibras. Mesmo tamanho (40px), mesmo alinhamento (right:25px) e mesma borda arredondada (8px) do VLibras — porém com FUNDO BRANCO e ícone azul (não azulão). --- */ .a11y-widget { position: fixed; /* right:10px alinha a borda direita EXATAMENTE com o botão do VLibras (o cálculo de `fixed` ignora a barra de rolagem, ~15px, então visualmente casa com o VLibras). */ right: 10px; top: 50%; /* VLibras fica centralizado (top:50%); subimos 72px p/ ficar logo acima dele, com o mesmo alinhamento à direita. */ transform: translateY(-72px); z-index: 2147483000; font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif; } .a11y-fab { width: 40px; height: 40px; border-radius: 8px; border: 1px solid rgba(15, 30, 46, .12); cursor: pointer; background: #ffffff; color: #1f6fb2; font-size: 22px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .22); transition: transform .15s ease, box-shadow .15s ease; } .a11y-fab:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .28); } .a11y-fab:focus-visible { outline: 3px solid #1f6fb2; outline-offset: 2px; } .a11y-fab img { width: 26px; height: 26px; object-fit: contain; } /* Widgets flutuantes (acessibilidade + VLibras) NÃO devem ficar por cima do lightbox das galerias. O Fancybox v5 adiciona `with-fancybox` no ao abrir. */ html.with-fancybox .a11y-widget, html.with-fancybox div[vw] { display: none !important; } /* --- Painel de opções --- */ .a11y-panel { position: fixed; right: 78px; top: 50%; transform: translateY(-50%); width: 268px; max-width: calc(100vw - 36px); max-height: 82vh; overflow-y: auto; background: #ffffff; color: #182430; border-radius: 16px; overflow: hidden; } .a11y-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: #2563a8; color: #fff; font-weight: 800; } .a11y-close { background: transparent; border: none; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; } .a11y-close:focus-visible { outline: 2px solid #ffbf47; outline-offset: 2px; } .a11y-actions { padding: 8px; } .a11y-btn { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 2px 0; border: none; border-radius: 10px; background: #f4f6f9; color: #182430; font-weight: 700; font-size: 15px; text-align: left; text-decoration: none; cursor: pointer; } .a11y-btn i { width: 20px; text-align: center; color: #2563a8; font-size: 16px; } .a11y-btn:hover { background: #e8edf5; } .a11y-btn:focus-visible { outline: 2px solid #2563a8; outline-offset: 1px; } .a11y-btn.is-active { background: #2563a8; color: #fff; } .a11y-btn.is-active i { color: #fff; } .a11y-btn.a11y-reset { background: #fff0ed; color: #d95647; margin-top: 6px; } .a11y-btn.a11y-reset i { color: #d95647; } @media (max-width: 575.98px) { /* Mantém o MESMO right do desktop (10px) para a borda direita casar exatamente com o botão do VLibras também no mobile — medido: VLibras e FAB ficam ambos com a borda direita no mesmo x. (Antes, right:20px jogava o ícone ~10px para a esquerda do VLibras.) */ .a11y-widget { right: 10px; } .a11y-panel { right: 60px; } }