/* ================================================================== */ /* 1. ESTILOS DOS BOTÕES FLUTUANTES DE ACESSIBILIDADE */ /* ================================================================== */ .acessibilidade-toolbar { position: fixed; top: 65%; right: 10px; /* Posição à esquerda */ transform: translateY(-50%); z-index: 99999; background: #fff; border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); display: flex; flex-direction: column; gap: 1px; overflow: hidden; } .acess-botao { background: #f1f1f1; border: none; padding: 10px 12px; cursor: pointer; font-size: 16px; font-weight: bold; color: #333; transition: background-color 0.2s; } .acess-botao:hover { background: #e0e0e0; } /* ================================================================== */ /* 2. REGRAS DE ACESSIBILIDADE (A PARTE QUE VOCÊ VAI CUSTOMIZAR) */ /* ================================================================== */ /* --- 2A. AUMENTO DE FONTE --- */ /* O JavaScript vai adicionar a classe .fonte-grande na tag color:#67717c;*/ html.fonte-grande .content p{ font-size: 24px; } html.fonte-grande .box-noticia-content > p { font-size: 18px; } html.fonte-grande .content-text p { font-size: 20px; } html.fonte-grande .tabela{ font-size: 20px; } html.fonte-grande .botao-texto{ font-size: 20px; } html.fonte-grande .quem-e-quem-container .formacao-hover-text{ font-size: 20px; } /* --- 2B. ALTO CONTRASTE (MUDANÇA DE COR) --- */ /* O JavaScript vai adicionar a classe .alto-contraste na tag */ html.alto-contraste .content p{ color: #000000; font-weight: 500; } html.alto-contraste .tabela{ color: #000000; font-weight: 500; } html.alto-contraste .botao-texto{ color: #000000; font-weight: 500; } html.alto-contraste .content-text p { color: #000000; font-weight: 500; } html.alto-contraste .box-noticia-content > p { color: #000000; font-weight: 500; } html.alto-contraste .quem-e-quem-container .formacao-hover-text p{ color: #ffffff !important; font-weight: 500; }