/* ========================================================================== JáTomei! — landing (jatomei.app) HTML + CSS puro. Sem framework, sem build, sem dependência externa. Abre com duplo clique no index.html. Tipografia: corpo 19px no padrão do navegador (mínimo pedido: 18px). Tudo em rem e em, então aumentar a fonte do sistema aumenta a página inteira. Testado mentalmente para 200% de zoom: nenhuma largura fixa acima de 16rem, nenhuma altura fixa em bloco de texto, e as grades usam minmax(0,1fr) para poder encolher. Contraste medido (WCAG, fundo x texto): verde #14453D sobre creme #F4F2EC ....... 9,6:1 AAA verde #14453D sobre tinta #EAE7DE ....... 8,7:1 AAA creme #F4F2EC sobre verde #14453D ....... 9,6:1 AAA verde-tinta #3A5A52 sobre creme ......... 6,8:1 AA (só texto miúdo) verde-escuro #0E332D sobre âmbar ........ 6,4:1 AA (só botão grande) ========================================================================== */ :root { --verde: #14453D; --verde-escuro: #0E332D; --creme: #F4F2EC; --tinta: #EAE7DE; --ambar: #E3A72F; --meta: #3A5A52; --branco: #FFFFFF; --faixa: 62rem; /* largura máxima do conteúdo */ --prosa: 38rem; /* largura máxima de parágrafo, para leitura */ --raio: 0.75rem; } *, *::before, *::after { box-sizing: border-box; } /* Item de grade nasce com min-width:auto e NÃO encolhe abaixo do próprio min-content — a 200% de zoom isso fazia os cartões estourarem a tela (medido: 207px de borda direita num viewport de 165px). O min-width:0 libera a trilha a encolher; o overflow-wrap do body quebra a palavra longa que sobra. */ .colunas > *, .planos > *, .provas > *, .dupla > * { min-width: 0; } html { font-size: 100%; /* respeita o tamanho de fonte do usuário */ -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--creme); color: var(--verde); font-family: "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; font-size: 1.1875rem; /* 19px */ line-height: 1.6; overflow-wrap: break-word; } img { max-width: 100%; height: auto; display: block; } h1, h2, h3 { line-height: 1.2; margin: 0 0 0.6em; text-wrap: balance; /* A 200% de zoom o título não cabe e ALGO tem que ceder. Sem isto o navegador partia no meio da sílaba — medido: "O lembre / te do remédi / o". hyphens:auto pede ao navegador que parta na sílaba, com hífen, usando os padrões do lang="pt-BR" do . ⚠️ NÃO MEDIDO: não confirmei que o Chrome de fato aplicou os padrões de pt-BR aqui. O que está medido é que o estouro horizontal é zero nas cinco larguras (ver RELATORIO.md §1) — isso vem do min-width:0, não daqui. Esta linha é melhoria de legibilidade não verificada. */ hyphens: auto; } h1 { font-size: clamp(1.75rem, 7vw, 3.25rem); letter-spacing: -0.01em; } h2 { font-size: clamp(1.6rem, 5vw, 2.4rem); } h3 { font-size: clamp(1.25rem, 3.5vw, 1.6rem); } p { margin: 0 0 1em; max-width: var(--prosa); } /* O alvo do botão "Quero o alarme no celular". Era 7rem por causa da faixa sticky de bloqueio, que saiu em 05/09 na liberação para publicação. Não há mais nada fixo no topo; sobra só uma folga para o bloco não colar na borda. */ #alarme-android { scroll-margin-top: 1rem; } /* --- link de pular, só aparece no teclado ------------------------------- */ .pular { position: absolute; left: -9999px; background: var(--ambar); color: var(--verde-escuro); padding: 0.75rem 1rem; font-weight: 700; /* Nasceu 60 para ficar acima da faixa sticky de bloqueio (z-index 50), que saiu em 05/09. Fica: qualquer elemento fixo que entre no futuro precisa continuar ABAIXO deste, senão o usuário de teclado foca um link invisível (medido em 04/09). */ z-index: 60; } .pular:focus { left: 0; top: 0; } /* --- foco visível em tudo que é acionável ------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--ambar); outline-offset: 3px; } .secao--escura a:focus-visible, .secao--escura button:focus-visible, .rodape a:focus-visible { outline-color: var(--ambar); } /* O main recebe foco pelo link de pular. Sem isto o navegador desenha um contorno em volta da página inteira. O foco vai para lá de qualquer jeito — só não fica visível, porque quem precisa ver é o conteúdo. */ main:focus { outline: none; } /* --- estrutura ---------------------------------------------------------- */ .faixa { max-width: var(--faixa); margin-inline: auto; padding-inline: 1.25rem; } .secao { padding-block: clamp(2.5rem, 8vw, 5rem); } .secao--escura { background: var(--verde); color: var(--creme); } .secao--tinta { background: var(--tinta); } .topo { background: var(--verde); padding: 0.75rem 1.25rem 0.25rem; } .topo-marca { width: 9.5rem; max-width: 45vw; } /* --- herói -------------------------------------------------------------- */ .heroi { padding-top: clamp(1rem, 4vw, 2.5rem); } .heroi-sub { font-size: clamp(1.1875rem, 2.4vw, 1.4rem); max-width: 34rem; margin-bottom: 1.5rem; } /* A linha de honestidade de plataforma, aprovada em 04/09. Fica ACIMA DA DOBRA, logo abaixo dos botões. Corpo cheio (1.1875rem) e opacidade cheia: a regra é explícita — não é letra miúda nem cinza claro. */ .heroi-aviso { margin: 1.25rem 0 0; max-width: 34rem; font-size: 1.1875rem; font-weight: 600; color: var(--creme); background: rgba(244, 242, 236, 0.10); border-left: 6px solid var(--ambar); border-radius: 0 var(--raio) var(--raio) 0; padding: 0.875rem 1.125rem; } .heroi-nota { margin-top: 1.25rem; margin-bottom: 0; font-size: 1rem; color: var(--creme); opacity: 0.85; } /* --- botões ------------------------------------------------------------- */ .botoes { display: flex; flex-direction: column; gap: 0.875rem; align-items: stretch; max-width: 30rem; } .botoes--centro { margin-inline: auto; } .botao { display: flex; align-items: center; justify-content: center; min-height: 3.5rem; /* 56px — mesma régua do aplicativo */ padding: 0.75rem 1.5rem; border-radius: var(--raio); font-size: 1.1875rem; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; border: 3px solid transparent; } .botao--principal { background: var(--ambar); color: var(--verde-escuro); border-color: var(--ambar); } .botao--principal:hover { background: #D2971F; border-color: #D2971F; } .botao--secundario { background: transparent; color: var(--creme); border-color: var(--creme); } .botao--secundario:hover { background: rgba(244, 242, 236, 0.12); } /* fora de seção escura, o secundário inverte */ .secao:not(.secao--escura) .botao--secundario { color: var(--verde); border-color: var(--verde); } @media (min-width: 34em) { .botoes { flex-direction: row; flex-wrap: wrap; } /* Escopado em .botoes de propósito: solto, o flex-basis alcançava também o botão dentro do .form, que é um flex COLUMN — e ali a base de 13rem vira ALTURA. Medido: botão de 180px de altura no formulário. */ .botoes > .botao { flex: 1 1 13rem; } } /* --- a prova da seção do alarme ------------------------------------------ Uma coluna no celular: captura, depois o aviso de plataforma. A partir de 46em, duas colunas: a captura (15rem, mesma régua das capturas da seção 4) à esquerda e o aviso ao lado, centrado na altura da captura, como a `.dupla` da seção 4 (colado no topo, sobrava coluna vazia embaixo). O clipe do aparelho tocando é pendência aberta (RELATORIO.md, ADENDO 7); quando entrar, vira a segunda prova e o aviso volta para baixo da grade. Os placeholders vermelhos saíram em 05/09, na liberação para publicação. */ .provas { display: grid; gap: 1.5rem; margin: 2rem 0; } @media (min-width: 46em) { .provas { grid-template-columns: 15rem minmax(0, 1fr); align-items: center; } } /* A captura real da seção 2 (a tela de alarme). Reusa .tela (largura 100%, teto de 15rem, mesma moldura das capturas da seção 4); a legenda segue o corpo secundário de 16px do resto da página. */ .prova { margin: 0; } .prova figcaption { font-size: 1rem; color: var(--meta); margin-top: 0.625rem; max-width: 15rem; } /* --- aviso honesto (Android) -------------------------------------------- */ .aviso { border-left: 6px solid var(--ambar); background: var(--tinta); padding: 1rem 1.25rem; border-radius: 0 var(--raio) var(--raio) 0; max-width: var(--prosa); margin-bottom: 2.5rem; } /* Dentro da grade da prova o espaçamento é da grade, não do parágrafo. */ .provas .aviso { margin-bottom: 0; } .secao--tinta .aviso { background: var(--creme); } /* --- captura de e-mail --------------------------------------------------- */ .captura { background: var(--verde); color: var(--creme); padding: clamp(1.5rem, 4vw, 2.25rem); border-radius: var(--raio); } .captura h3 { margin-top: 0; } .form { display: flex; flex-direction: column; gap: 0.75rem; max-width: 30rem; margin-top: 1.25rem; } /* 18px: está no caminho da ação, então respeita o piso de acessibilidade do projeto. Legenda e rodapé, que são secundários, seguem em 16px. */ .form-rot { font-weight: 700; font-size: 1.125rem; } /* Texto de apoio do campo, ligado por aria-describedby. Corpo cheio: é promessa de uso do dado, não rodapé jurídico. */ .form-ajuda { margin: 0; font-size: 1.125rem; line-height: 1.5; color: var(--creme); max-width: 30rem; } /* CAMADA 4 — honeypot. Fora da tela em vez de display:none porque robô simples ignora o segundo. O aria-hidden + tabindex="-1" no HTML tiram o campo do leitor de tela e da tabulação, então humano nenhum o alcança. */ .armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-campo { min-height: 3.5rem; padding: 0.75rem 1rem; font-size: 1.1875rem; font-family: inherit; color: var(--verde); background: var(--branco); border: 3px solid var(--creme); border-radius: var(--raio); width: 100%; } .miudo { font-size: 1rem; color: var(--meta); margin-top: 1rem; margin-bottom: 0; } .captura .miudo { color: var(--creme); opacity: 0.85; } /* --- duas colunas: quem toma / quem acompanha ---------------------------- */ .destaque { font-size: clamp(1.1875rem, 2.4vw, 1.375rem); font-weight: 700; max-width: 34rem; margin-bottom: 2rem; } .colunas { display: grid; gap: 1.25rem; margin-bottom: 1.5rem; } @media (min-width: 46em) { .colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .cartao { background: var(--creme); border: 2px solid rgba(20, 69, 61, 0.15); border-radius: var(--raio); padding: clamp(1.25rem, 3vw, 1.75rem); } .cartao h3 { margin-top: 0; } .lista { margin: 0; padding-left: 1.15rem; max-width: var(--prosa); } .lista li { margin-bottom: 0.75rem; } .lista li:last-child { margin-bottom: 0; } .lista--clara { font-size: clamp(1.1875rem, 2.2vw, 1.3rem); } /* --- capturas de tela integradas ---------------------------------------- */ .dupla { display: grid; gap: 1.5rem; align-items: center; margin-bottom: 3rem; } .dupla:last-child { margin-bottom: 0; } @media (min-width: 46em) { .dupla { grid-template-columns: 15rem minmax(0, 1fr); } .dupla--invertida .tela { order: 2; } .dupla--invertida .dupla-txt { order: 1; } .dupla--invertida { grid-template-columns: minmax(0, 1fr) 15rem; } } .tela { width: 100%; max-width: 15rem; border-radius: var(--raio); border: 2px solid rgba(20, 69, 61, 0.15); } .dupla-txt h3 { margin-top: 0; } .dupla-txt p:last-child { margin-bottom: 0; } /* --- planos -------------------------------------------------------------- */ .planos { display: grid; gap: 1.25rem; margin-bottom: 2rem; } @media (min-width: 52em) { .planos { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } } .plano { background: var(--creme); border: 2px solid rgba(20, 69, 61, 0.15); border-radius: var(--raio); padding: clamp(1.25rem, 3vw, 1.75rem); } .plano h3 { margin-top: 0; margin-bottom: 0.25rem; } .plano-valor { font-size: clamp(2rem, 6vw, 2.75rem); font-weight: 700; line-height: 1.1; margin: 0 0 0.25rem; } .plano-equiv { font-size: 1rem; color: var(--meta); margin-bottom: 1rem; } .plano--destaque { border: 3px solid var(--ambar); position: relative; } .plano-selo { display: inline-block; background: var(--verde); color: var(--creme); font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.25rem 0.75rem; border-radius: 999px; margin-bottom: 0.75rem; /* "MAIS ECONÔMICO" era a única coisa que ainda estourava a 150px de largura (celular a 200% de zoom). Medido antes de corrigir. */ max-width: 100%; overflow-wrap: anywhere; } /* --- o que o app não é --------------------------------------------------- */ .moldura { border: 3px solid var(--verde); border-radius: var(--raio); padding: clamp(1.5rem, 4vw, 2.25rem); } .moldura h2 { margin-top: 0; } .moldura p:last-child { margin-bottom: 0; } /* --- rodapé -------------------------------------------------------------- */ .rodape { background: var(--verde); color: var(--creme); padding-block: clamp(2rem, 6vw, 3rem); } .rodape-marca { width: 8rem; max-width: 40vw; margin-bottom: 1.25rem; } .rodape-empresa { font-size: 1rem; margin-bottom: 1.25rem; } .rodape-links { list-style: none; margin: 0; padding: 0; } .rodape-links li { margin-bottom: 0.75rem; } .rodape-links a { color: var(--creme); text-decoration: underline; text-underline-offset: 4px; /* Alvo de toque: 44px é o piso da WCAG 2.5.8. Com padding de 0.25rem o link media ~33,6px de altura — reprovava. flex + min-height é mais robusto que contar padding contra line-height. */ display: inline-flex; align-items: center; min-height: 2.75rem; } .rodape-links a:hover { color: var(--ambar); }