/* ================================================================ ACESSIBILIDADE — Conecta Bueno Sistema único, incluído em todas as páginas do site. Widget (FAB + menu) + classes de efeito globais aplicadas via js/accessibility.js. Ajustes específicos de cada página continuam nos respectivos arquivos CSS (home.css, auth.css, map.css, etc.). ================================================================ */ /* --------------------------------------------------------------- WIDGET — botão flutuante + painel de opções --------------------------------------------------------------- */ .a11y-tools { position: fixed; right: 18px; bottom: 18px; z-index: 11000; } .a11y-fab { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border: none; border-radius: 50%; background: linear-gradient(135deg, #4a9060, #1a3a2e); color: #fff; box-shadow: 0 12px 28px rgba(15, 36, 25, 0.35); cursor: pointer; font-weight: 800; font-size: 15px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .a11y-fab-icon { width: 24px; height: 24px; flex: none; } .a11y-fab:hover, .a11y-fab:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(15, 36, 25, 0.42); } .a11y-menu { position: absolute; right: 0; bottom: 60px; width: min(300px, calc(100vw - 28px)); max-height: min(560px, calc(100vh - 90px)); overflow-y: auto; padding: 18px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 16px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 24px 60px rgba(15, 36, 25, 0.22); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); animation: a11yMenuIn 0.2s cubic-bezier(.22,1,.36,1) both; } .a11y-menu[hidden] { display: none; } .a11y-menu__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .a11y-menu__eyebrow { margin-bottom: 3px; color: #c2703c; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .a11y-menu__title { color: #111827; font-size: 0.95rem; font-weight: 800; } .a11y-menu__hint { margin: 6px 0 14px; color: #6b7280; font-size: 0.74rem; line-height: 1.4; } .a11y-menu__close { flex: none; width: 28px; height: 28px; border: 1px solid rgba(17, 24, 39, 0.14); border-radius: 50%; background: #fff; color: #374151; cursor: pointer; font-size: 1.05rem; line-height: 1; } .a11y-menu__subtitle { margin: 16px 0 8px; color: #4a9060; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .a11y-menu__subtitle:first-of-type { margin-top: 0; } .a11y-menu__group { display: grid; gap: 8px; } .a11y-menu > button, .a11y-menu__group button, .a11y-size button, .a11y-reset { border: 1px solid rgba(17, 24, 39, 0.12); border-radius: 10px; background: #fff; color: #111827; cursor: pointer; font-family: inherit; } .a11y-menu__group button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 12px; text-align: left; font-size: 0.8rem; font-weight: 600; } .a11y-menu__group small { color: #9ca3af; font-size: 0.66rem; font-weight: 400; } .a11y-menu button:hover, .a11y-menu button.is-active { background: #e8f5ee; border-color: #9dcfb0; } .a11y-menu button.is-active { color: #1a3a2e; } .a11y-menu button.is-active small { color: #4a9060; } .a11y-menu__group--select { gap: 6px; } .a11y-select-label { color: #111827; font-size: 0.8rem; font-weight: 600; } .a11y-select { width: 100%; padding: 9px 10px; border: 1px solid rgba(17, 24, 39, 0.16); border-radius: 10px; background: #fff; color: #111827; font-family: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; } .a11y-select:focus-visible { outline: 2px solid #4a9060; outline-offset: 1px; } .a11y-size { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(17, 24, 39, 0.1); color: #374151; font-size: 0.78rem; font-weight: 600; } .a11y-size span { flex: 1; } .a11y-size button { width: 32px; height: 32px; font-size: 1rem; } .a11y-size button:disabled { opacity: .4; cursor: not-allowed; } .a11y-size output { min-width: 40px; color: #1a3a2e; font-size: 0.7rem; font-weight: 800; text-align: center; } .a11y-reset { width: 100%; margin-top: 14px; padding: 10px 12px; text-align: center; font-size: 0.78rem; font-weight: 700; color: #9a3412; border-color: rgba(154, 52, 18, 0.25); } .a11y-reset:hover { background: #fff1e8; border-color: #f0a06a; } .a11y-menu button:focus-visible, .a11y-fab:focus-visible { outline: 2px solid #4a9060; outline-offset: 2px; } @keyframes a11yMenuIn { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (max-width: 540px) { .a11y-tools { right: 12px; bottom: 12px; } .a11y-menu { bottom: 58px; } } @media (prefers-reduced-motion: reduce) { .a11y-menu { animation: none; } } /* --------------------------------------------------------------- DALTONISMO — filtro de correção aplicado no . Qualquer elemento position:fixed é retirado de dentro do antes disso (ver escapeFixedElementsFromFilter em accessibility.js), senão o filtro vira "containing block" deles e eles somem de vista ao rolar a página. Matrizes de daltonização (LMS + realocação de erro) definidas via injetado por accessibility.js. --------------------------------------------------------------- */ body[data-a11y-colorblind="protanopia"] { filter: url(#cb-protanopia); } body[data-a11y-colorblind="deuteranopia"] { filter: url(#cb-deuteranopia); } body[data-a11y-colorblind="tritanopia"] { filter: url(#cb-tritanopia); } body[data-a11y-colorblind="achromatopsia"] { filter: grayscale(1) contrast(1.15); } /* --------------------------------------------------------------- FONTE LEGÍVEL — troca tipográfica para leitura facilitada (dislexia, baixa visão). Atkinson Hyperlegible foi desenhada especificamente para diferenciar letras facilmente confundíveis. --------------------------------------------------------------- */ body.a11y-readable-font, body.a11y-readable-font input, body.a11y-readable-font textarea, body.a11y-readable-font select, body.a11y-readable-font button { font-family: 'Atkinson Hyperlegible', Arial, Helvetica, sans-serif !important; } /* --------------------------------------------------------------- ESPAÇAMENTO DE TEXTO — mais respiro entre linhas/letras/palavras --------------------------------------------------------------- */ body.a11y-text-spacing, body.a11y-text-spacing p, body.a11y-text-spacing li, body.a11y-text-spacing span, body.a11y-text-spacing a { line-height: 1.85 !important; letter-spacing: 0.03em !important; word-spacing: 0.12em !important; } body.a11y-text-spacing p, body.a11y-text-spacing li { margin-bottom: 0.9em !important; } /* --------------------------------------------------------------- SUBLINHAR LINKS — reforça links de texto sem depender só de cor --------------------------------------------------------------- */ body.a11y-underline-links a:not(.a11y-fab):not(.hd-brand):not(.hd-nav-link):not(.hd-dd-item):not(.btn-primary):not(.hero-btn):not([class*="btn"]) { text-decoration: underline !important; text-underline-offset: 3px; } /* --------------------------------------------------------------- CURSOR AMPLIADO --------------------------------------------------------------- */ body.a11y-large-cursor, body.a11y-large-cursor * { cursor: url("data:image/svg+xml;utf8,") 3 2, auto !important; } body.a11y-large-cursor a, body.a11y-large-cursor button, body.a11y-large-cursor [role="button"], body.a11y-large-cursor input, body.a11y-large-cursor select, body.a11y-large-cursor textarea, body.a11y-large-cursor label { cursor: url("data:image/svg+xml;utf8,") 3 2, pointer !important; } /* --------------------------------------------------------------- REDUZIR MOVIMENTO — congela animações/transições decorativas. Vídeos com autoplay são pausados via JS (accessibility.js). O Modo Foco usa a mesma regra: pulsar, saltitar, brilhar etc. são exatamente o tipo de estímulo que distrai quem tem TDAH — o modo foco não faz sentido sem isso, mesmo com "reduzir movimento" desligado. --------------------------------------------------------------- */ /* Sem prefixo "body." de propósito: elementos position:fixed são realocados para fora do (filhos de ) sempre que o filtro de daltonismo está ativo — ver escapeFixedElementsFromFilter() em accessibility.js. Um seletor "body.a11y-reduce-motion *" para de casar com eles assim que isso acontece; ancorando em ".a11y-reduce-motion" (aplicada tanto a quanto a ) a regra continua valendo não importa qual dos dois seja o ancestral no momento. */ .a11y-reduce-motion *, .a11y-reduce-motion *::before, .a11y-reduce-motion *::after, .a11y-focus *, .a11y-focus *::before, .a11y-focus *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* --------------------------------------------------------------- MODO FOCO (TDAH) — regra "base" que funciona em qualquer página que carregue este arquivo. Sem isso, o botão ficava sem nenhum efeito visível em páginas que não tinham CSS próprio para .a11y-focus (panel.html e settings.html) — o usuário ativava e nada mudava na tela. Itens não-ativos do menu lateral (.nav-item, usado em panel/observatório/configurações) ficam acinzentados para competir menos com o conteúdo principal; o item ativo continua destacado normalmente. Volta à cor normal em hover/foco, então a navegação continua 100% utilizável — só menos "gritante" quando não está em uso. Cada página soma ajustes próprios (ver css/home.css, css/map.css, css/eventos.css, css/observatorio.css, css/auth.css, css/settings.css, css/panel.css). --------------------------------------------------------------- */ .a11y-focus .nav-item:not(.active), .a11y-focus .nav-item:not(.active) svg { color: var(--grey-400, #9ca3af) !important; } .a11y-focus .nav-item:not(.active):hover, .a11y-focus .nav-item:not(.active):hover svg, .a11y-focus .nav-item:not(.active):focus-visible, .a11y-focus .nav-item:not(.active):focus-visible svg { color: var(--leaf-900, #145c30) !important; }