/* =========================================================================== hosts.green — camada de tema do site institucional Carregada DEPOIS de css/v_18/w3*.css, sem tocar no arquivo do W3.CSS. Mesmo princípio da camada do app (view/css/theme.css): o arquivo do framework fica intocado, e as correções vivem aqui. Mexer no w3min.css tornaria a atualização do W3.CSS impossível sem perder as customizações — que é exatamente o problema já existente com o bootstrap.min.css do app. O QUE ESTA FOLHA CORRIGE, medido antes por harness/instcores.js: 23 combinações de cor/fundo abaixo do mínimo da WCAG AA, em 4 páginas. A pior: 1.7:1. O mínimo é 4.5:1 para texto normal e 3:1 para texto grande. A paleta não foi inventada. São os mesmos valores que a fase 1 já provou no app, e usá-los mantém as duas superfícies com a mesma cor de marca: #21CE99 -> #158562 verde legível para texto e link #E9425E -> #C4243D vermelho que passa em texto e como fundo O verde e o vermelho de MARCA continuam #21CE99 e #E9425E onde são só pintura: preenchimento de ícone, faixa decorativa, borda. Trocar cor de marca em elemento decorativo seria mudar a identidade sem necessidade. Aqui muda só onde a cor carrega texto. =========================================================================== */ :root{ --hgi-green:#21CE99; /* marca, decorativo */ --hgi-green-ink:#158562; /* marca legível, para texto e fundo com texto */ --hgi-blue-ink:#0058AD; /* substitui #009AD9 (3.17:1) e #007ED1 (4.28:1) */ --hgi-red-ink:#C4243D; /* substitui #E9425E (3.88:1) */ --hgi-pink-ink:#A8356F; /* substitui #E26CA6 (3.03:1) */ --hgi-muted-ink:#4F5B57; /* substitui #868686 sobre #EBEBEB (3.05:1) */ --hgi-ink:#2B3330; } /* --------------------------------------------------------------------------- 1. VERDE COMO TEXTO -- o caso mais grave #21CE99 sobre branco dá 2.03:1. Em títulos grandes o mínimo é 3:1, e em texto normal 4.5:1: reprovava nos dois. Sobre o cinza #EBEBEB da seção de depoimento caía para 1.7:1, o pior número do site. --------------------------------------------------------------------------- */ .banner-t1, .banner-t2, .banner-t1a, .hg-sessoes, .iten2-texto, h1 strong, h2.hg-sessoes, h3.center_app{ color:var(--hgi-green-ink) !important; } /* Em seguranca são 6

sem classe, dentro de div.seguranca. Escopado pelo ancestral real, medido: `div.seguranca < div.container-p`. A tentativa anterior usava `main h3` e `section h3`, que não existem nessa página. */ .seguranca h3, .seguranca h4{ color:var(--hgi-green-ink) !important; } /* Em planos, "NÃO SE PREOCUPE." é um de 30px dentro de p.fctaplan. */ .fctaplan, .fctaplan span, .fdctaplan span{ color:var(--hgi-green-ink) !important; } /* --------------------------------------------------------------------------- 2. BRANCO SOBRE VERDE -- 13 ocorrências, entre elas o rodapé inteiro Botão, rodapé e tabela de planos usam texto branco sobre #21CE99: 2.03:1. Escurecer o FUNDO preserva o desenho (o texto branco continua branco) e resolve o contraste de uma vez para tudo que está dentro. --------------------------------------------------------------------------- */ .hg-tdireitos, footer .hg-tdireitos{ background-color:var(--hgi-green-ink) !important; color:#fff !important; } /* O rodapé todo tem fundo #21CE99, e os links dentro dele são brancos: 2.03:1 em 4 páginas. Escurecendo o fundo do rodapé, todos os links dentro passam juntos. */ footer.hg-footer{ background-color:var(--hgi-green-ink) !important; } footer.hg-footer a, footer.hg-footer p, footer.hg-footer span{ color:#fff !important; } /* Tabela de planos: o próprio carrega o fundo verde. */ .assinar a, .table-h .assinar a{ background-color:var(--hgi-green-ink) !important; color:#fff !important; } /* Link/botão com fundo verde e texto branco. */ a.w3-green, a.hg-btn-green, .hg-bg-green a, .w3-green > a{ background-color:var(--hgi-green-ink) !important; color:#fff !important; } /* --------------------------------------------------------------------------- 3. AZUIS COMO TEXTO #009AD9 = 3.17:1 e #007ED1 = 4.28:1, os dois abaixo de 4.5. --------------------------------------------------------------------------- */ .hg-large, .fun-texto, .int-texto, .hg-p-plan, a.hg-ft-m17, .w3-bar-item.hg-ft-m17{ color:var(--hgi-blue-ink) !important; } /* Em seguranca, link e destaque no corpo estão em #009AD9 (3.17:1), sem classe própria. Escopado por div.seguranca, que é o ancestral medido. */ .seguranca a, .seguranca p span, .seguranca strong{ color:var(--hgi-blue-ink) !important; } /* --------------------------------------------------------------------------- 4b. VERDE SOBRE O CINZA DO DEPOIMENTO A seção `div.hg-container.cases` tem fundo #EBEBEB. Sobre ele, o verde legível #158562 dá 3.86:1 — passa em texto grande, não em corpo de 15px. Precisa de um passo a mais de escurecimento, só nesse contexto. --------------------------------------------------------------------------- */ .cases .iten2-texto, .hg-container.cases .iten2-texto{ color:#0E5F45 !important; } /* --------------------------------------------------------------------------- 4. VERMELHO DO CTA #E9425E dá 3.88:1 como texto e também como fundo de texto branco. É o mesmo valor que a fase 1 trocou por #C4243D no app. CUIDADO DE ESPECIFICIDADE, aprendido errando: o botão tem as três classes `w3-bar-item ctas-button hg-ft-m17`. A primeira versão desta folha pintava o texto de azul por `.hg-ft-m17` (2 classes) e o fundo de vermelho por `.ctas-button` (1 classe) — o azul vencia e o resultado era azul sobre vermelho, 1.22:1, PIOR que os 3.88:1 originais. Por isso a regra do texto branco repete as três classes: tem de vencer a do azul. --------------------------------------------------------------------------- */ .cta-header{ color:var(--hgi-red-ink) !important; } a.w3-bar-item.ctas-button, a.w3-bar-item.ctas-button.hg-ft-m17, .ctas-button{ background-color:var(--hgi-red-ink) !important; color:#fff !important; border-color:var(--hgi-red-ink) !important; } /* --------------------------------------------------------------------------- 5. ROSA E CINZA #E26CA6 = 3.03:1 no texto de apoio do CTA. #868686 sobre o cinza #EBEBEB da seção de depoimento = 3.05:1. --------------------------------------------------------------------------- */ .ctas-aparencia{ color:var(--hgi-pink-ink) !important; } .case-info, .case-info .bold, .bold{ color:var(--hgi-muted-ink) !important; } /* --------------------------------------------------------------------------- 6. ALINHAMENTO -- hierarquia de leitura Medido: 11 de 14 blocos de texto centralizados no desktop, 13 de 14 no mobile. Título centralizado é decisão de composição e fica. Parágrafo centralizado apaga a hierarquia e custa legibilidade: a linha seguinte começa num ponto diferente da anterior, e o olho perde o ponto de retorno. Então: títulos seguem centralizados, o CORPO passa a ser alinhado à esquerda. --------------------------------------------------------------------------- */ .fun-texto, .int-texto, .iten2-texto, .case-info, .hg-p-plan{ text-align:left; } /* O subtítulo do herói é uma frase curta sob o título: continua centralizado, porque ali funciona como parte do bloco de abertura. */ .banner-t1 + p, .banner-t2 + p{ text-align:center; } /* Em telas estreitas, corpo alinhado à esquerda importa mais: a linha é curta e o texto centralizado fica com recuo irregular em cada linha. */ @media (max-width:768px){ .fun-texto, .int-texto, .iten2-texto, .case-info, .hg-p-plan, .tamfonsphg{ text-align:left; } } /* --------------------------------------------------------------------------- 7. LEGIBILIDADE DO CORPO O texto de apoio chega a 12px em vários pontos. 15px é o valor que a fase 1 adotou no app, pela mesma razão. --------------------------------------------------------------------------- */ .fun-texto, .int-texto, .iten2-texto{ font-size:15px; line-height:1.55; } .hg-tdireitos{ font-size:13px; line-height:1.5; } /* --------------------------------------------------------------------------- 8. FOCO VISÍVEL O W3.CSS não marca foco de teclado com clareza, mesma lacuna que o Bootstrap 4 tem no app. Sem isso, quem navega por Tab não sabe onde está. --------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(0,88,173,.35); border-radius:4px; } /* --------------------------------------------------------------------------- NÃO corrigido aqui, e por quê: - O CTA "Experimente grátis agora" aparece 3x na index, e "Assine agora" 3x em planos, com rótulo idêntico. Repetir o mesmo rótulo tira do visitante a pista de para onde cada botão leva. Corrigir é decidir texto de marketing, e isso não é decisão de quem mexe no CSS. - Os logos de integração são um sprite (img/integracao2.png) com caixas iguais de 100x72 e offsets diferentes. A desigualdade que o PENDENCIAS.md aponta está no desenho DENTRO do PNG, não no CSS. Exige editar a imagem. - O banner de consentimento é da HubSpot (#hs-eu-cookie-confirmation), com fonte de 12px e botão "Aceitar" em branco sobre #21CE99. É widget de terceiro, com regras !important próprias, e é elemento de consentimento: mexer na aparência dele por CSS de fora arrisca quebrar algo com efeito legal. A correção certa é na configuração da HubSpot. E ATENÇÃO: ele NÃO está "dentro do fluxo da página", como diz o PENDENCIAS.md. Medido: position:fixed, bottom:0, z-index 100000000. =========================================================================== */