/* ============================================================================ acessibilidade.css — Alto contraste, escala de fonte e redução de movimento Referência: DES.md §5.1, §8.1. ÚLTIMO arquivo da cadeia de CSS: o modo de alto contraste precisa sobrescrever tudo que veio antes. O ajuste de fonte (A+ / A / A−) não tem regra aqui: ele age no font-size do (tokens.css) e, como toda a escala do portal é em rem, o layout inteiro reescala sozinho. ========================================================================= */ /* --- Redução de movimento (DES §8.1) --------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } /* Transição zerada ainda deixaria o salto de posição acontecer de uma vez. Estes componentes se deslocam no hover — aqui eles ficam parados. */ .card-servico:hover, .card-portal:hover, .card-noticia:hover, .leis__link:hover, .flutuante:hover { transform: none !important; } } /* --- Zoom e reflow (WCAG 1.4.10) ------------------------------------------- Em 200 % a área útil vertical encolhe pela metade, e um cabeçalho grudado no topo passa a ocupar uma fatia grande dela. Abaixo de 26 rem de altura ele volta a rolar junto com a página. O limite é em rem de propósito: sobe junto com o A+ e acompanha o zoom. */ @media (max-height: 26rem) { .cabecalho { position: static; } } /* --- Alvo mínimo de toque em controles compactos --------------------------- */ @media (pointer: coarse) { .barra-acessibilidade__botao, .barra-acessibilidade__social { min-height: 32px; min-width: 32px; } } /* ============================================================================ MODO ALTO CONTRASTE — DES §5.1 Preto de fundo, amarelo #FFFF00 de tinta e de borda, imagens em grayscale(1) contrast(2), sem sombra, 2 px de borda em todos os cards. A varredura é feita por regiões (barra, cabeçalho, main, rodapé, flutuantes) em vez de `body *`: o widget do VLibras é injetado por script de terceiro e tem estilo próprio — varrê-lo junto quebraria o player. ========================================================================= */ body.alto-contraste, body.alto-contraste .pular-conteudo, body.alto-contraste .sobreposicao-menu, body.alto-contraste :is(.barra-acessibilidade, .cabecalho, main, .rodape, .flutuantes), body.alto-contraste :is(.barra-acessibilidade, .cabecalho, main, .rodape, .flutuantes) * { color: #FFFF00 !important; background-color: #000000 !important; background-image: none !important; border-color: #FFFF00 !important; box-shadow: none !important; text-shadow: none !important; } /* Contorno de 2 px em tudo que é card, campo, botão ou bloco da marca — sem sombra e sem cor de fundo, a borda passa a ser o único limite visível entre um componente e o fundo preto. */ body.alto-contraste :is( .card-servico, .card-portal, .card-noticia, .card-contato, .card-servico__icone, .card-portal__icone, .card-contato__icone, .card-noticia__capa--vazia, .bloco-marca, .telefone__icone, .faq__item, .dados, .telefones, .telefones__campo, .mapa, .campanha__painel, .campanha__citacao, .campanha__alerta, .etapa, .etapa__desconto, .hero__badge, .chip, .leis__link, .botao, .flutuante, .pular-conteudo, .barra-acessibilidade__botao, .cabecalho__hamburguer, .cabecalho__fechar ) { border: 2px solid #FFFF00 !important; } /* Estados que já eram "cheios" na versão colorida (botão primário, chip selecionado, contraste ligado, flutuantes, badge de desconto) continuam cheios: amarelo de fundo com tinta preta. É a única inversão do modo, e é o que preserva a hierarquia entre ação primária e secundária. */ body.alto-contraste .botao--primario, body.alto-contraste .botao--primario *, body.alto-contraste .chip[aria-pressed="true"], body.alto-contraste .chip[aria-pressed="true"] *, body.alto-contraste .barra-acessibilidade__botao[aria-pressed="true"], body.alto-contraste .barra-acessibilidade__botao[aria-pressed="true"] *, body.alto-contraste .flutuante, body.alto-contraste .flutuante *, body.alto-contraste .etapa__desconto, body.alto-contraste .card-servico--destaque .card-servico__icone, body.alto-contraste .card-servico--destaque .card-servico__icone * { color: #000000 !important; background-color: #FFFF00 !important; } /* Sublinhado em todo link de conteúdo: sem variação de cor disponível, ele é o que separa um link do texto ao redor (WCAG 1.4.1). */ body.alto-contraste :is(main, .rodape, .barra-acessibilidade) a:not(.botao):not(.flutuante) { text-decoration: underline !important; } /* Ponteiro sobre item de lista, pergunta do FAQ, chip e link de menu. */ body.alto-contraste .chip:hover, body.alto-contraste .chip:hover *, body.alto-contraste .telefone:hover, body.alto-contraste .telefone:hover *, body.alto-contraste .leis__link:hover, body.alto-contraste .leis__link:hover *, body.alto-contraste .faq__pergunta:hover, body.alto-contraste .faq__pergunta:hover *, body.alto-contraste .menu__link:hover, body.alto-contraste .rodape__lista a:hover, body.alto-contraste .barra-acessibilidade__link:hover, body.alto-contraste .barra-acessibilidade__social:hover { color: #000000 !important; background-color: #FFFF00 !important; } /* Cards não invertem no hover — o card inteiro piscando de amarelo é desconfortável. Ganham um anel branco, que também não colide com o contorno de foco. */ body.alto-contraste .card-servico:hover, body.alto-contraste .card-portal:hover, body.alto-contraste .card-noticia:hover { outline: 2px solid #FFFFFF !important; outline-offset: 2px !important; } /* Item ativo do menu: a barra de 3 px é a única marca de "onde estou". */ body.alto-contraste .menu__link::after { background-color: #FFFF00 !important; } /* Foco em branco, e não em amarelo: sobre a borda amarela dos componentes o contorno amarelo desapareceria. */ body.alto-contraste :focus-visible { outline: 3px solid #FFFFFF !important; outline-offset: 3px !important; } /* O texto de dica do campo precisa do mesmo contraste do valor digitado; os navegadores aplicam opacidade por padrão. */ body.alto-contraste ::placeholder { color: #FFFF00 !important; opacity: 1 !important; } /* Imagens e mapa: cinza puro com contraste dobrado (DES §5.1). */ body.alto-contraste img, body.alto-contraste iframe { filter: grayscale(1) contrast(2) !important; } /* O logo do cabeçalho é escuro sobre fundo claro: em cima do preto ele sumiria mesmo depois do filtro. Mantém a própria base branca. */ body.alto-contraste .cabecalho__marca img { background-color: #FFFFFF !important; padding: 2px; } /* Grafismo do hero: decorativo, a .18 de opacidade sobre preto vira sujeira. */ body.alto-contraste .hero__grafismo { display: none !important; }