/* ============================================================================ ACESSIBILIDADE — camada de correcao aplicada pelo roteador em TODAS as rotas. Por que uma folha nova, e nao edicao no lugar: · Os tokens da marca sao GERADOS a partir do design system do produto e o proprio cabecalho deles diz para nao editar. Escrever correcao ali faria site e produto divergirem em silencio. · A folha grande do site nao chega em /ghg nem em /maturidade — essas duas paginas nao a carregam. Corrigir la dentro deixaria as duas de fora. · O roteador ja injeta folha em toda pagina servida (foi assim que o menu unico passou a existir). Esta entra pelo mesmo caminho, DEPOIS de todas as outras, e por isso vence no empate de especificidade sem precisar de !important — a nao ser onde a regra original ja usava !important. Duas coisas moram aqui, e as duas foram medidas no navegador antes e depois: 1 · anel de foco visivel (o site inteiro navegava as cegas por teclado) 2 · verde vivo usado como cor de TEXTO (reprovava contraste em 11 rotas) ========================================================================== */ /* ============================================================================ 1 · ANEL DE FOCO ---------------------------------------------------------------------------- Medicao antes: dos 40 primeiros de 49 elementos focaveis da home, ZERO tinham indicador — nem contorno, nem sombra. Quem navega por teclado nao sabia onde estava. Havia ainda seis declaracoes que zeravam o contorno de proposito; foram removidas da folha grande do site no mesmo commit. COR: #08A24C, escrita como valor fixo de proposito. · sobre branco ............... 3,34:1 · sobre o verde escuro do menu interno (#072A20) ..... 4,61:1 · sobre o painel claro mais claro do site (#ECFFF5) .... 3,21:1 Minimo exigido para indicador nao textual: 3:1. Passa nos tres. Por que NAO var(--nx-accent): no tema claro esse token vale exatamente #08A24C, mas no tema escuro ele vira #17C55F, que mede 2,29:1 no branco e reprovaria. Anel de foco nao pode depender de qual tema esta ligado, entao o valor fica fixo. E o mesmo verde que o menu ja usa no proprio anel: o site inteiro passa a ter UM indicador de foco, nao dois. Por que so `outline` e nada de sombra: varios cartoes do site ja tem sombra propria e ha regra que zera sombra no foco. Contorno nao disputa com nada, nao empurra layout, e o afastamento de 2px poe o anel sobre o fundo da pagina — nao encostado no preenchimento verde do botao. O menu global tem anel proprio, com especificidade maior, e continua mandando nele mesmo. Esta regra cuida do resto da pagina. ========================================================================== */ :focus-visible { outline: 3px solid #08A24C; outline-offset: 2px; } /* ============================================================================ 2 · VERDE VIVO COMO COR DE TEXTO ---------------------------------------------------------------------------- Uma decisao explicava a maior parte das reprovacoes de contraste do site: verdes claros (#079A48, #00A147, #08AC50, #1FA463, #00A449, #05B051, #16A656, #13CD65) usados como cor de TEXTO sobre branco e quase-branco. Medidos, ficavam entre 2,11 e 4,49 — abaixo dos 4,5 exigidos. Verde vivo como PREENCHIMENTO de botao, fundo, borda ou icone decorativo NAO muda aqui: como area, ele passa, e e a identidade da marca. COR ESCOLHIDA: #07773A. · sobre branco ............... 5,66:1 · sobre #ECFFF5 (painel verde mais claro) .......... 5,43:1 · sobre #F2EFF7 (painel lilas de /parceiros) ............. 4,94:1 · sobre #E7E6F9 (painel de /maturidade) ............... 4,61:1 Por que nao --nx-accent-text: esse token vale #07873F e, medido, da 4,62:1 no branco — passa raspando — e 4,44:1 sobre os paineis verdes claros, onde continua reprovando (esta na lista de falhas do levantamento, na /plataforma). O valor daqui e um passo mais escuro e passa em todos os fundos claros do site com folga. ========================================================================== */ :root { --nx-verde-texto: #07773A; --nx-cinza-verde-texto: #4B7760; } /* --- home · /plataforma · /copilot · /analises ---------------------------- */ /* "Fazer diagnostico gratis" / "Ver planos" — 3,66:1 sobre branco. A borda continua #079A48: como borda, 3,66 esta acima dos 3:1 exigidos. */ .home-hero-static__secondary { color: var(--nx-verde-texto); } /* setas da tira de jornada — 4,10:1 */ .home-hero-static__journey i { color: var(--nx-verde-texto); } /* selo "Diagnostico gratis" (e o "GRATIS" herdado dentro dele) — 3,65:1 */ .home-hero-static__journey > span.is-free.is-diagnostic { color: var(--nx-verde-texto); } /* marcadores de confianca do hero — 3,06:1 */ body.home-light .home-hero-static__trust > span, body.home-light .home-hero-static__progress > span { color: var(--nx-verde-texto); } /* palavra destacada do fechamento ("decisao." / "acao.") — 2,92:1. A regra original usa !important e -webkit-text-fill-color; sem repetir os dois, o valor antigo continuaria pintando o texto. */ body.home-light .s-cta .home-final-copy h2 span { color: var(--nx-verde-texto) !important; -webkit-text-fill-color: var(--nx-verde-texto) !important; } /* cartoes "qual e a sua situacao" — 3,67:1 (rotulo, botao e seta) */ body.home-light .situation-card h3 small { color: var(--nx-verde-texto); } body.home-light .situation-card > a { color: var(--nx-verde-texto) !important; } /* seta redonda dos cartoes de jornada — 2,11:1 no Essentials. A seta fica num circulo BRANCO dentro do botao verde, entao aqui o fundo e branco e vale o mesmo verde escuro do resto. */ body.home-light .journey-card > a span { color: var(--nx-verde-texto); } /* EXCECAO, no sentido contrario: "Essentials" e "Enterprise" no recado acima dos cartoes ficam numa faixa ESCURA e estavam pintados de verde escuro — 2,86:1, praticamente invisiveis. Verde claro ali: 5,55:1. */ body.home-light .journeys-note strong { color: #16A656; } /* "audit-grade" na assinatura do rodape — 3,22:1 */ .home-light .footer .tagline .em { color: var(--nx-verde-texto); } /* --- /ecossistema --------------------------------------------------------- */ /* sobre-titulo do hero — 3,50:1 */ .ecosystem-eyebrow { color: var(--nx-verde-texto); } /* "6 analises" e "Abrir analises" dentro dos cartoes brancos — 3,55:1. Os cartoes seguem com a cor propria na borda e no icone; so o texto muda. */ .eco-analysis-card > b, .eco-analysis-card .eco-card-link { color: var(--nx-verde-texto); } /* --- /planos -------------------------------------------------------------- */ /* "Quero uma avaliacao" e a etiqueta "Sob consulta" — 3,28:1 e 2,99:1 */ .entry-route-copy > small, .entry-route-copy h3 span { color: var(--nx-verde-texto); } /* "Ideal para medias e grandes empresas" / "Sob consulta" — 2,98:1 */ body.home-light.pricing-board-page .pricing-screen-decision .core-card .core-label, body.home-light.pricing-board-page .pricing-screen-decision .core-card > strong { color: var(--nx-verde-texto) !important; } /* "Entre em contato" dos Packs — 2,86:1 no pior deles. A borda e o fundo continuam com a cor do pack. */ body.home-light.pricing-board-page .pricing-screen-packs .packs-grid article > a, body.home-light.pricing-board-page .pricing-screen-packs .packs-grid article > a:hover { color: var(--nx-verde-texto) !important; } /* --- /parceiros ----------------------------------------------------------- */ /* legenda "Nexta Forge" — 4,10:1 */ .partners-page-body .partners-hero-art figcaption b { color: var(--nx-verde-texto); } /* seta dos cartoes de caminho — 2,11:1 no primeiro */ .partners-page-body .partners-path-card > a b { color: var(--nx-verde-texto); } /* sobre-titulos das secoes claras — 4,49:1 e 4,36:1 */ .partners-page-body .partners-kicker, .partners-page-body .partners-benefits-head__copy > p { color: var(--nx-verde-texto); } /* EXCECAO, e no sentido contrario: o sobre-titulo "Vamos construir juntos" fica na secao escura do fim da pagina. A regra generica acima o pintava de verde escuro sobre fundo escuro — 2,82:1, pior falha da pagina. Aqui ele volta ao verde claro que a secao escura pede: 6,70:1. */ .partners-page-body .partners-join-copy .partners-kicker { color: #62DB97; } /* --- texto secundario cinza-esverdeado ------------------------------------ Nao e verde vivo — e o cinza-verde do texto de apoio, claro demais para texto pequeno. Mesma correcao, valor proprio para nao virar verde de marca. -------------------------------------------------------------------------- */ /* linhas "Sem cartao..." e "Avance conforme..." do hero — 4,36:1 */ .home-hero-static__trust, .home-hero-static__progress { color: var(--nx-cinza-verde-texto); } /* paragrafo de apoio dos Packs — 4,25:1 */ body.home-light .special-packs-head p { color: var(--nx-cinza-verde-texto); } /* /parceiros · descricoes da lista de operacao (4,35:1) e o aviso embaixo do formulario (4,33:1) */ .partners-operation-list span, .partners-form-status { color: var(--nx-cinza-verde-texto); } /* ============================================================================ 3 · DEGRADE DO BOTAO PRINCIPAL ---------------------------------------------------------------------------- "Criar inventario gratis" e todos os botoes cheios da home usam o mesmo degrade de marca, com texto branco em cima. Medido ponta a ponta: antes #007A36 (5,47:1) → #059A47 (3,67:1) → #16A656 (3,17:1) depois #005E2A (7,97:1) → #046F36 (6,31:1) → #07873F (4,62:1) O que decide e o PIOR ponto, nao a media: a ponta clara e onde a ultima letra do botao cai. Passou de 3,17 para 4,62. A parada final e exatamente #07873F, o verde que a marca ja define como "verde legivel". O degrade continua com a mesma profundidade de claro para escuro que tinha antes (a ponta clara e ~2,2x mais clara que a escura, contra ~2,0x do original), entao o botao continua tendo volume — so mais fundo. O degrade do produto GHG nao muda: a ponta clara dele ja media 4,66:1. ========================================================================== */ :root { --nexta-brand-gradient: linear-gradient(105deg, #005E2A 0%, #046F36 46%, #07873F 100%); }