, entre a barra de cima e o conteúdo. É o que deixa o link "Pular para o conteúdo" — primeiro item do teclado — continuar saltando a faixa inteira em vez de parar dentro dela. */ .a11y-area { padding-top: var(--e5); } .a11y { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); margin: 0; padding: var(--e3) var(--e4); background: var(--cor-fundo); border: 2px solid var(--cor-borda); border-radius: var(--raio); } .a11y__grupo { display: flex; align-items: center; gap: var(--e2); } .a11y__rotulo { font-weight: var(--peso-medio); /* Fora da escala: ver o comentário do .a11y__botao logo abaixo. */ font-size: var(--base-texto-corpo); } /* ⚠️ OS BOTÕES DA PRÓPRIA FAIXA NÃO CRESCEM. NUNCA. Se crescessem, a página refluiria a cada toque e o A+ escaparia de baixo do dedo entre um toque e o outro: o segundo toque cairia no A- ou no contraste, e a pessoa concluiria que o site "faz sozinho" e pararia de mexer. Tamanho fixo, 52px, em qualquer nível de letra. */ .a11y__botao { display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); min-width: var(--base-alvo-toque); min-height: var(--base-alvo-toque); padding: 0 var(--e3); font-family: inherit; font-size: var(--base-texto-medio); font-weight: var(--peso-forte); line-height: 1.2; color: var(--cor-primaria); background: var(--cor-fundo); border: 2px solid var(--cor-primaria); border-radius: var(--raio); cursor: pointer; } .a11y__botao:hover { background: var(--cor-primaria-clara); } /* Ligado é fundo cheio E a palavra escrita ao lado (nunca só a cor). */ .a11y__botao[aria-pressed="true"] { color: var(--cor-texto-invertido); background: var(--cor-primaria); } /* Chegou no limite. `aria-disabled` e não `disabled`: o botão desabilitado de verdade some do teclado e do leitor de tela, e aí a pessoa aperta, não acontece nada, ninguém explica nada — que é como se conclui que o site quebrou. Assim ele continua alcançável e responde com a frase de estado. */ .a11y__botao[aria-disabled="true"] { color: var(--cor-texto-suave); border-color: var(--cor-borda); cursor: default; } .a11y__botao[aria-disabled="true"]:hover { background: var(--cor-fundo); } .a11y__botao--largo { flex: 1 1 auto; } /* A frase que diz, por escrito, em que tamanho a pessoa está. É ela que o leitor de tela anuncia, e é ela que impede a marcação de depender só de cor. ESTA CRESCE JUNTO COM A LETRA (`--texto-pequeno`, e não `--base-texto-pequeno`), ao contrário dos botões logo acima. Não é incoerência: o `flex: 1 1 100%` joga esta linha SEMPRE para uma linha só dela, embaixo dos botões, então crescer aqui não desloca botão nenhum — nada foge de baixo do dedo. E deixá-la fixa em 16px seria o pior dos mundos: a única linha pequena da tela seria justamente a que explica, a quem pediu letra grande, em que tamanho ela está. */ .a11y__estado { flex: 1 1 100%; margin: 0; font-size: var(--texto-pequeno); color: var(--cor-texto); } /* --------------------------------------------------------------------------- 3. VELOCIDADE DO VÍDEO (dentro da aula, logo abaixo do player) --------------------------------------------------------------------------- */ .a11y-velocidade { margin: var(--e5) 0 0; padding: var(--e4); background: var(--cor-fundo); border: 2px solid var(--cor-borda); border-radius: var(--raio); } .a11y-velocidade__titulo { margin: 0 0 var(--e3); font-size: var(--texto-medio); } .a11y-velocidade__botoes { display: flex; flex-wrap: wrap; gap: var(--e2); } .a11y-velocidade__botao { flex: 1 1 auto; } .a11y-velocidade__estado { margin: var(--e3) 0 0; font-size: var(--texto-corpo); font-weight: var(--peso-medio); } /* Velocidade fora do normal fica ESCRITA na tela o tempo todo. Se ela pusesse 1,5x numa aula teórica e esquecesse, a próxima aula — de exercício — também começaria a 1,5x, e uma pessoa de 70 anos tentando acompanhar o movimento acelerado pode se machucar de verdade. */ .a11y-velocidade[data-fora-do-normal="sim"] { background: var(--cor-aviso-fundo); border-color: var(--cor-aviso-borda); } .a11y-velocidade[data-fora-do-normal="sim"] .a11y-velocidade__estado { color: var(--cor-aviso-esc); } /* A frase honesta de quando o player não responde ao comando de velocidade. Quatro botões bonitos que não fazem nada fazem a pessoa apertar três vezes, concluir que o vídeo travou e pedir reembolso do curso por causa de um botão. */ .a11y-velocidade__aviso { margin: 0; font-size: var(--texto-corpo); color: var(--cor-texto); } /* --------------------------------------------------------------------------- 4. MODO DE MAIS CONTRASTE NÃO é modo escuro. Modo escuro dobraria o número de combinações de cor a provar e, para 50+ com catarata ou vista cansada, o ganho é menor que o de texto preto grande em fundo branco. Se o dono quiser, é decisão dele — e com todas as combinações medidas de novo antes. Aplicado no pelo mesmo motivo da escala: no a substituição seria circular com o tokens.css. Quem já pediu mais contraste no próprio celular (`prefers-contrast: more`) recebe este modo sem precisar achar o nosso botão — quem cuida disso é o JavaScript, que põe data-contraste="alto" enquanto a pessoa não tiver escolhido nada aqui. Não é feito por @media de propósito: seriam vinte linhas de cor repetidas, e paleta duplicada é paleta que diverge. --------------------------------------------------------------------------- */ html[data-contraste="alto"] body { --cor-texto: #000000; /* 21.00:1 sobre branco */ --cor-texto-suave: #262626; /* 15.13:1 — o cinza-claro some da tela */ --cor-texto-invertido: #FFFFFF; --cor-fundo: #FFFFFF; --cor-fundo-suave: #FFFFFF; /* o cinza de fundo "lava" a página; aqui ele some */ --cor-fundo-realce: #E6EFF8; --cor-borda: #1A1A1A; /* 17.40:1 — é a borda que diz ONDE digitar */ --cor-borda-forte: #000000; --cor-primaria: #0B3D6E; /* 11.01:1 */ --cor-primaria-esc: #06294A; --cor-primaria-clara: #E6EFF8; --cor-sucesso: #106238; --cor-sucesso-esc: #0A3F24; --cor-sucesso-fundo: #E4F3EA; --cor-erro: #A0140E; --cor-erro-esc: #6E0D09; --cor-erro-fundo: #FDECEA; --cor-aviso-esc: #4A3300; --cor-aviso-fundo: #FFF4D0; --cor-aviso-borda: #6B4A00; --cor-marca-texto: #F5E6B3; /* o grifo areia; a tinta preta em cima dá 17.1:1 */ /* Fase 12 — os tokens do bloco escuro e do cobre, para o modo de mais contraste não herdar a paleta normal dentro do cartão escuro. */ --cor-fundo-escuro: #000000; --cor-fundo-escuro-2: #1A1A1A; --cor-texto-sobre-escuro: #FFFFFF; --cor-borda-sobre-escuro: #FFFFFF; --cor-acento: #7A2E0E; /* 9.4:1 sobre branco */ --cor-acento-fundo: #FFFFFF; } /* As bordas ficam mais grossas junto com o preto: para quem enxerga pouco, um fio de 1px continua sumindo por mais escuro que seja. */ html[data-contraste="alto"] .caixa, html[data-contraste="alto"] .banner, html[data-contraste="alto"] .comentario, html[data-contraste="alto"] .lateral, html[data-contraste="alto"] .vazio, html[data-contraste="alto"] .topo { border-width: 2px; } /* ☠️ A COR DO NÍVEL VEM DO SERVIDOR E ENTRA COMO ESTILO NA MARCAÇÃO. O gamificacao.ts manda um hex por nível, já conferido contra BRANCO, e o painel.js o escreve direto no elemento. É o único texto da tela que este modo não alcança pelo caminho normal — por isso o `!important`, que aqui não é preguiça: é a única forma de o modo de mais contraste ser realmente completo. No modo alto, o nome do nível sai na cor do texto. */ html[data-contraste="alto"] .nivel__nome { color: var(--cor-texto) !important; }