/* ============================================================================ * ACESSIBILIDADE — ProSST Control * * Camadas ligadas/desligadas por atributo em . Mesma arquitetura do tema * escuro: nenhuma das 809 telas precisa ser editada, e desligar restaura o * visual original exatamente, porque nada e sobrescrito de forma permanente. * * Atributos: * data-a11y-fonte="85|92|100|115|130|150" escala do texto (%) * data-a11y-contraste="1" preto/branco/amarelo * data-a11y-cinza="1" escala de cinza * data-a11y-espaco="1" espacamento de leitura * data-a11y-destaque="1" links e botoes marcados * data-a11y-animacao="0" animacoes desligadas * data-a11y-foco="1" foco de teclado reforcado * * TUDO em @media screen: no papel nenhuma regra daqui vale (mesma licao do * dark.css, onde um @media print enumerado sempre deixava algo passar). * ========================================================================== */ @media screen { /* --------------------------------------------------------------------------- * TAMANHO DO TEXTO * O Tailwind dimensiona tudo em rem e nem html nem body fixam font-size, entao * mexer na raiz escala texto E espacamentos juntos — que e como o zoom do * navegador se comporta, e o que a pessoa espera. * Faixa limitada a 85–150%: acima disso o layout de tabela comeca a quebrar, e * quem precisa de mais tem o zoom do proprio navegador. * ------------------------------------------------------------------------- */ html[data-a11y-fonte="85"] { font-size: 85%; } html[data-a11y-fonte="92"] { font-size: 92.5%; } html[data-a11y-fonte="100"] { font-size: 100%; } html[data-a11y-fonte="115"] { font-size: 115%; } html[data-a11y-fonte="130"] { font-size: 130%; } html[data-a11y-fonte="150"] { font-size: 150%; } /* --------------------------------------------------------------------------- * ESPACAMENTO DE LEITURA * Valores alinhados ao criterio 1.4.12 da WCAG (Text Spacing). * ------------------------------------------------------------------------- */ html[data-a11y-espaco="1"] body { line-height: 1.9 !important; letter-spacing: 0.055em !important; word-spacing: 0.14em !important; } html[data-a11y-espaco="1"] p, html[data-a11y-espaco="1"] li, html[data-a11y-espaco="1"] td, html[data-a11y-espaco="1"] label { margin-bottom: 0.6em !important; } /* --------------------------------------------------------------------------- * ESCALA DE CINZA * Feito por overlay com backdrop-filter, NAO por filter no html. * Motivo: `filter` num ancestral transforma todo position:fixed em containing * block — a sidebar fixa e os widgets flutuantes descolariam e passariam a * rolar com a pagina. O overlay dessatura o que esta atras sem tocar no layout. * pointer-events:none deixa o clique passar direto. * ------------------------------------------------------------------------- */ html[data-a11y-cinza="1"]::after { content: ''; position: fixed; inset: 0; z-index: 99998; pointer-events: none; backdrop-filter: grayscale(1); -webkit-backdrop-filter: grayscale(1); } /* --------------------------------------------------------------------------- * ALTO CONTRASTE * Preto / branco / amarelo, o esquema classico de baixa visao. * Aqui o !important e proposital: e um pedido explicito do usuario por * legibilidade maxima, e a identidade visual e sacrificada de propria vontade. * Imagem, logo e o proprio painel de acessibilidade ficam de fora. * ------------------------------------------------------------------------- */ html[data-a11y-contraste="1"] body, html[data-a11y-contraste="1"] body *:not(img):not(svg):not(svg *):not(.a11y-fora) { background-color: #000 !important; background-image: none !important; color: #FFF !important; border-color: #FFF !important; box-shadow: none !important; text-shadow: none !important; } html[data-a11y-contraste="1"] a:not(.a11y-fora), html[data-a11y-contraste="1"] a:not(.a11y-fora) * { color: #FFFF00 !important; text-decoration: underline !important; } html[data-a11y-contraste="1"] button:not(.a11y-fora):not(.a11y-btn), html[data-a11y-contraste="1"] [type="submit"]:not(.a11y-fora), html[data-a11y-contraste="1"] [type="button"]:not(.a11y-fora) { background-color: #FFFF00 !important; color: #000 !important; border: 2px solid #FFF !important; font-weight: 700 !important; } html[data-a11y-contraste="1"] input:not(.a11y-fora), html[data-a11y-contraste="1"] select:not(.a11y-fora), html[data-a11y-contraste="1"] textarea:not(.a11y-fora) { background-color: #000 !important; color: #FFF !important; border: 2px solid #FFF !important; } html[data-a11y-contraste="1"] ::placeholder { color: #BBB !important; opacity: 1 !important; } /* Logo e foto sao informacao: continuam visiveis. */ html[data-a11y-contraste="1"] img { background: transparent !important; } /* --------------------------------------------------------------------------- * DESTACAR LINKS E BOTOES * Para quem nao distingue o elemento clicavel so pela cor (WCAG 1.4.1). * ------------------------------------------------------------------------- */ html[data-a11y-destaque="1"] a:not(.a11y-fora), html[data-a11y-destaque="1"] button:not(.a11y-fora):not(.a11y-btn), html[data-a11y-destaque="1"] [role="button"]:not(.a11y-fora), html[data-a11y-destaque="1"] [type="submit"]:not(.a11y-fora) { outline: 2px dashed #B45309 !important; outline-offset: 2px !important; } html[data-a11y-destaque="1"] a:not(.a11y-fora) { text-decoration: underline !important; } /* --------------------------------------------------------------------------- * REDUZIR ANIMACOES * Vale tanto pela escolha no painel quanto pela preferencia do sistema * operacional, que muita gente ja tem ligada e ninguem respeitava aqui. * ------------------------------------------------------------------------- */ html[data-a11y-animacao="0"] *, html[data-a11y-animacao="0"] *::before, html[data-a11y-animacao="0"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } @media (prefers-reduced-motion: reduce) { html:not([data-a11y-animacao="1"]) *, html:not([data-a11y-animacao="1"]) *::before, html:not([data-a11y-animacao="1"]) *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* --------------------------------------------------------------------------- * FOCO DE TECLADO REFORCADO — ligado por padrao * * Ha 123 `focus:outline-none` nos templates e apenas 1 `focus-visible`: em boa * parte do sistema o contorno de foco foi removido e nada colocado no lugar, * entao quem navega por teclado nao enxerga onde esta. O !important existe * para vencer esses 123 pontos sem precisar edita-los um a um. * * :focus-visible (e nao :focus) para o anel aparecer no teclado e nao no * clique de mouse. * ------------------------------------------------------------------------- */ html[data-a11y-foco="1"] a:focus-visible, html[data-a11y-foco="1"] button:focus-visible, html[data-a11y-foco="1"] input:focus-visible, html[data-a11y-foco="1"] select:focus-visible, html[data-a11y-foco="1"] textarea:focus-visible, html[data-a11y-foco="1"] summary:focus-visible, html[data-a11y-foco="1"] [tabindex]:focus-visible, html[data-a11y-foco="1"] [role="button"]:focus-visible, html[data-a11y-foco="1"] [contenteditable]:focus-visible { outline: 3px solid #1D4ED8 !important; outline-offset: 3px !important; box-shadow: 0 0 0 6px rgba(29, 78, 216, 0.30) !important; border-radius: 4px; } /* Sobre fundo escuro o azul some; o branco garante o contraste. */ html[data-theme="dark"][data-a11y-foco="1"] :focus-visible, html[data-a11y-contraste="1"][data-a11y-foco="1"] :focus-visible { outline-color: #FFFFFF !important; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.35) !important; } /* --------------------------------------------------------------------------- * PULAR PARA O CONTEUDO * Primeiro item do Tab em qualquer tela. Sem ele, quem usa teclado percorre o * menu inteiro a cada troca de pagina (WCAG 2.4.1). * ------------------------------------------------------------------------- */ .a11y-skip { position: fixed; top: -100px; left: 12px; z-index: 1000000; background: #1D4ED8; color: #FFF; padding: 12px 20px; border-radius: 0 0 10px 10px; font-weight: 700; font-size: 14px; text-decoration: none; transition: top 0.15s ease; } .a11y-skip:focus { top: 0; outline: 3px solid #FFF; outline-offset: -6px; } } /* fim @media screen */ /* ============================================================================ * O WIDGET (botao + painel). * Marcado com .a11y-fora para o alto contraste nao repintar o proprio painel: * a pessoa precisa enxergar os controles para conseguir DESLIGAR o modo. * ========================================================================== */ @media screen { .a11y-btn { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 999998; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; padding: 0; background: #1D4ED8; color: #FFF; border: 0; cursor: pointer; box-shadow: 0 4px 12px rgba(29,78,216,.38), 0 1px 4px rgba(0,0,0,.22); transition: transform .16s ease, background .16s ease; } .a11y-btn:hover { background: #1E40AF; transform: translateY(-50%) scale(1.08); } .a11y-btn:focus-visible { outline: 3px solid #FFF !important; outline-offset: 3px !important; } .a11y-btn svg { width: 23px; height: 23px; } /* Alvo de toque com folga: o circulo tem 42px, a area clicavel passa de 44px (WCAG 2.5.5), o que importa para quem tem limitacao motora. */ .a11y-btn::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; } /* Tudo do painel em rem, de proposito. * * A escala de fonte e aplicada em `html { font-size: N% }`, entao px fixo nao * acompanha: quem punha o texto em 130% via a pagina inteira crescer e ESTE * painel continuar em 13px. Ou seja, o painel de acessibilidade era a unica * coisa que ficava ilegivel justamente para quem tinha acabado de pedir texto * maior. O `max-height` + `overflow-y` abaixo seguram o painel dentro da tela * quando ele cresce em 150%. */ .a11y-painel { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 999999; width: 17.5rem; max-width: calc(100vw - 36px); max-height: calc(100vh - 40px); overflow-y: auto; background: #FFF; color: #111827; border: 1px solid #D7DFEA; border-radius: 14px; box-shadow: 0 10px 34px rgba(0,0,0,.32); font-family: inherit; font-size: 0.875rem; line-height: 1.5; } .a11y-painel[hidden] { display: none; } .a11y-painel header { background: #1D4ED8; color: #FFF; padding: 0.7rem 0.8rem; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-radius: 13px 13px 0 0; } .a11y-painel header b { font-size: 0.9375rem; font-weight: 700; } .a11y-painel header button { background: rgba(255,255,255,.18); border: 0; color: #FFF; cursor: pointer; width: 1.6rem; height: 1.6rem; border-radius: 6px; font-size: 1rem; line-height: 1; font-family: inherit; padding: 0; } .a11y-corpo { padding: 0.7rem 0.8rem 0.8rem; display: flex; flex-direction: column; gap: 0.75rem; } .a11y-tit { font-size: 0.7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #6B7280; margin-bottom: 0.4rem; } .a11y-fonte { display: flex; align-items: center; gap: 0.4rem; } .a11y-fonte button { flex: 1; background: #F1F5F9; border: 1px solid #DBE3EE; color: #111827; border-radius: 8px; padding: 0.45rem 0; cursor: pointer; font-size: 0.95rem; font-weight: 700; font-family: inherit; } .a11y-fonte button:hover { background: #E2E8F0; } .a11y-nivel { min-width: 3rem; text-align: center; font-size: 0.82rem; font-weight: 700; color: #374151; font-variant-numeric: tabular-nums; } .a11y-opt { display: flex; align-items: center; gap: 0.55rem; width: 100%; text-align: left; background: #FFF; border: 1px solid #E2E8F0; border-radius: 9px; padding: 0.5rem 0.65rem; cursor: pointer; font-size: 0.875rem; color: #111827; font-family: inherit; margin-bottom: 0.375rem; } .a11y-opt:hover { border-color: #94A3B8; background: #F8FAFC; } .a11y-opt[aria-pressed="true"] { border-color: #1D4ED8; background: #EFF6FF; font-weight: 600; } .a11y-estado { margin-left: auto; font-size: 0.7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #94A3B8; } .a11y-opt[aria-pressed="true"] .a11y-estado { color: #1D4ED8; } .a11y-reset { width: 100%; background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; border-radius: 9px; padding: 0.58rem 0; cursor: pointer; font-size: 0.875rem; font-weight: 700; font-family: inherit; } .a11y-reset:hover { background: #FEE2E2; } .a11y-painel :focus-visible { outline: 3px solid #1D4ED8 !important; outline-offset: 2px !important; } /* No tema escuro o painel acompanha, em vez de virar um retangulo branco. */ html[data-theme="dark"] .a11y-painel { background: #1E293B; color: #F1F5F9; border-color: #334155; } html[data-theme="dark"] .a11y-opt { background: #172033; color: #F1F5F9; border-color: #2C3A52; } html[data-theme="dark"] .a11y-opt:hover { background: #24304A; } html[data-theme="dark"] .a11y-opt[aria-pressed="true"] { background: #1E3A5F; border-color: #60A5FA; } html[data-theme="dark"] .a11y-fonte button { background: #172033; color: #F1F5F9; border-color: #2C3A52; } html[data-theme="dark"] .a11y-nivel { color: #CBD5E1; } html[data-theme="dark"] .a11y-tit { color: #94A3B8; } /* Impressao: nada disso vai para o papel. */ } @media print { .a11y-btn, .a11y-painel, .a11y-skip { display: none !important; } } /* Arrastar o botao. `touch-action:none` impede o navegador de rolar a pagina durante o gesto no celular — sem isso o arrasto nao funciona no toque. */ @media screen { .a11y-btn { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; } .a11y-btn:active { cursor: grabbing; } .a11y-nota { margin: 0 0 0.45rem; font-size: 0.78rem; line-height: 1.45; color: #6B7280; } html[data-theme="dark"] .a11y-nota { color: #94A3B8; } }