/* ========================================================================== Metal Collection — mc-ui.css Padronizacao de UI e acessibilidade. Arquivo ADITIVO. Nao altera nenhum CSS do Elementor, nem mc-polimento.css/.js, nem nenhum .php. Ver NOTAS-UI.md na raiz do site. COMO ESTE ARQUIVO ESTA ORGANIZADO --------------------------------- PARTE 1 — ATIVO. So entra aqui o que deu para provar SEM navegador: mudanca de COR, com o contraste calculado pela formula da WCAG a partir dos valores que eu medi na pagina, e um alinhamento de texto. Nenhuma regra da Parte 1 muda a caixa de nenhum elemento: nada de largura, altura, padding, margin, font-size ou quebra de linha. A altura das paginas e identica antes e depois, por construcao. PARTE 2 — PROPOSTAS, TODAS COMENTADAS. Sao as correcoes de geometria (alvo de toque, escala de botao, ritmo vertical, veu sobre foto). Cada uma traz a medida do problema e a conta do resultado, mas NENHUMA foi vista renderizada — o trabalho no navegador foi interrompido no meio. Descomentar so depois de olhar na tela. ORDEM DE CARGA / ESPECIFICIDADE ------------------------------- Desde a mudanca do mc-perf (os bundles -2.css viraram stub e o CSS inteiro subiu para o ), o mc-polimento.css e este arquivo sao os ULTIMOS folhas de estilo do documento. Mesmo assim, toda regra ativa aqui vence por especificidade e nao por ordem, para continuar funcionando se o empacotamento mudar de novo. A especificidade que cada bloco precisa vencer esta anotada nele. Nenhuma regra ativa usa !important. ========================================================================== */ /* ========================================================================== PARTE 1 — ATIVO ========================================================================== */ /* -------------------------------------------------------------------------- 1.1 AZUL DOS BOTOES: #297DDD -> #2470C9 -------------------------------------------------------------------------- MEDIDO no site: rotulo branco sobre #297DDD = 4,14:1. A WCAG 2.1 AA pede 4,5:1 para texto normal. Reprova em todos os botoes de texto pequeno, que sao a maioria dos botoes do site: rodape "Converse pelo WhatsApp" 14px/700 4,14:1 reprova cards "Saiba mais" 16px/500 4,14:1 reprova /contato "Enviar agora" 16px/500 4,14:1 reprova /projetos"Falar no WhatsApp" 16px/600 4,14:1 reprova home "Ver o projeto" 16px/600 4,14:1 reprova #2470C9 da 4,96:1 com branco: aprova AA em qualquer tamanho. E um escurecimento de ~5%, no mesmo matiz — lado a lado quase nao se ve. POR QUE NAO TROQUEI O TOKEN GLOBAL --e-global-color-accent no : ele tambem pinta TEXTO azul sobre os fundos escuros do site, e ali o escurecimento PIORARIA o contraste (#297DDD sobre #17262F = 3,74:1; #2470C9 = 3,13:1). Entao a cor nova vale so dentro do botao. COMO: em vez de brigar por especificidade com as dezenas de regras que escrevem `background-color: var(--e-global-color-accent)`, eu redefino a VARIAVEL no proprio botao. Uma declaracao no elemento sempre vence a herdada do , entao isto funciona sem !important e sem depender de ordem. Efeitos colaterais, todos desejados: . o border-color do botao (que le a mesma variavel) acompanha; . o hover amarelo le outra variavel (--e-global-color-2996d54) e continua exatamente como esta; . o botao vazado do topo da home le --e-global-color-e6d2c6c (transparente) e NAO e afetado — continua vazado com borda branca; . os dois botoes de WhatsApp do cabecalho tem o verde cravado no header.php e estao excluidos pelo :not() de qualquer forma. -------------------------------------------------------------------------- */ /* Regra separada de proposito: usa :not() com seletor composto, que navegador muito antigo descarta. Se ele descartar ESTA regra, a de baixo continua valendo e o pior caso e ficar como esta hoje. */ .elementor-button:not(.elementor-location-header *) { --e-global-color-accent: #2470C9; } /* Os cards de servico nunca estao no cabecalho, entao aqui nao precisa do :not(). Cobre "Saiba mais" nas 7 chamadas de Nossos Servicos. */ .elementor-cta__button { --e-global-color-accent: #2470C9; } /* Botoes escritos a mao (a chamada do YachtHouse na home e a /projetos/): estes tem #297DDD cravado, nao leem a variavel. Especificidade (0,1,1) — vence o base .mc-btn / .mc-yh__btn (0,1,0) e PERDE para .mc-btn:hover / .mc-yh__btn:hover (0,2,0), que e o que se quer: o hover amarelo continua igual. */ body .mc-btn, body .mc-yh__btn { background: #2470C9; } /* -------------------------------------------------------------------------- 1.2 VERDE DO WHATSAPP NO CABECALHO: #128C7E -> #108073 -------------------------------------------------------------------------- MEDIDO: "Fale conosco agora", branco 16px/500 sobre #128C7E = 4,14:1. Mesma reprovacao do azul (pede 4,5:1). O comentario dentro do header.php ja estimava "~4:1" — a conta fecha; so que 4:1 nao passa. #108073 da 4,82:1. Continua o verde escuro da marca WhatsApp, dois pontos mais fechado. O hover desce junto para manter o mesmo degrau visual: #0B6459 = 7,04:1 (hoje o hover e #0E7266 = 5,81:1). Isto sobrescreve o