/* ========================================================================= ALTO CONTRASTE — modo de acessibilidade Ju Tonini — Gestão e Produção Cultural Ativado pelo botão do cabeçalho, que define data-contraste="alto" em . Objetivo: fundo totalmente preto, textos e ícones totalmente brancos, em todas as páginas do site. Carregado por último para vencer os estilos específicos de cada página. ========================================================================= */ /* Elementos: fundo preto, texto/bordas brancos ------------------------------ */ :root[data-contraste="alto"], :root[data-contraste="alto"] * { background-color: #000 !important; background-image: none !important; color: #fff !important; border-color: #fff !important; box-shadow: none !important; text-shadow: none !important; outline-color: #fff !important; -webkit-text-fill-color: #fff !important; filter: none !important; } /* Pseudo-elementos: por padrão transparentes, para não cobrirem o conteúdo (ex.: a camada clicável .card__link::after). Os traços decorativos que realmente devem aparecer são recoloridos de branco logo abaixo. */ :root[data-contraste="alto"] *::before, :root[data-contraste="alto"] *::after { background-color: transparent !important; background-image: none !important; color: #fff !important; border-color: #fff !important; box-shadow: none !important; text-shadow: none !important; } /* Traços, linhas e marcadores decorativos: brancos, não pretos ----------- */ :root[data-contraste="alto"] .menu-botao__barra, :root[data-contraste="alto"] .hero::after, :root[data-contraste="alto"] .hero__sobrelinha::before, :root[data-contraste="alto"] .secao__sobrelinha::before, :root[data-contraste="alto"] .navegacao__link::after, :root[data-contraste="alto"] .card__midia::after, :root[data-contraste="alto"] .linha-tempo__item::before, :root[data-contraste="alto"] .audio-faixa__rotulo::before { background-color: #fff !important; } /* Foco sempre visível sobre o fundo preto -------------------------------- */ :root[data-contraste="alto"] :focus-visible { outline: 3px solid #fff !important; outline-offset: 3px !important; } /* Links sublinhados: a cor não os diferencia mais do texto comum --------- */ :root[data-contraste="alto"] a { text-decoration: underline !important; } :root[data-contraste="alto"] a:hover, :root[data-contraste="alto"] a:focus { text-decoration: none !important; } /* Elementos interativos ganham contorno branco para se destacarem -------- */ :root[data-contraste="alto"] button, :root[data-contraste="alto"] .botao, :root[data-contraste="alto"] .card__acao, :root[data-contraste="alto"] .navegacao__link--destaque, :root[data-contraste="alto"] input, :root[data-contraste="alto"] select, :root[data-contraste="alto"] textarea, :root[data-contraste="alto"] audio { border: 2px solid #fff !important; } /* Ícone do botão de contraste: círculo (traço) + metade preenchida ------- */ :root[data-contraste="alto"] .contraste-botao, :root[data-contraste="alto"] .contraste-botao__icone { color: #fff !important; } /* Imagens e vídeos permanecem visíveis, com moldura para separá-los do fundo */ :root[data-contraste="alto"] img, :root[data-contraste="alto"] video, :root[data-contraste="alto"] iframe { background-color: #000 !important; border: 1px solid #fff !important; } /* Logotipos (arte escura sobre transparência) reduzidos a silhueta branca */ :root[data-contraste="alto"] .marca__logo, :root[data-contraste="alto"] .hero__logo, :root[data-contraste="alto"] .projeto-logotipo img { background-color: transparent !important; border: 0 !important; filter: brightness(0) invert(1) !important; } /* Símbolo do rodapé: recorte do logotipo via background-image ------------ */ :root[data-contraste="alto"] .marca-simbolo { background-color: transparent !important; background-image: url("../logo/ju-tonini-logo.png") !important; filter: brightness(0) invert(1) !important; } /* Cabeçalho: fundo sólido preto, sem desfoque, com divisória branca ------ */ :root[data-contraste="alto"] .cabecalho { border-bottom: 1px solid #fff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }