/* ============================================================ Professor Max — landing 60+ (smartgenlab.net/mestres) OVERLAY sobre /styles.css. A folha base carrega primeiro e traz o design system (Baloo 2 + Nunito, indigo/coral, raios, sombras, componentes). Aqui fica SÓ o que a faixa 60+ muda. Por que overlay e não uma folha própria: duas cópias do design system divergem na primeira mudança de marca — é a mesma razão pela qual o og-cover.png sai de `pnpm brand:icons` e não é desenhado à mão (ver webpage/README.md). O que muda, e por quê (espelha o BL-42 do produto, que aplica `data-band="60plus"` sobre os mesmos tokens): 1. corpo ~19px (base é 17px); 2. contraste AAA (≥7:1) em texto de corpo; 3. alvos de toque ≥48px; 4. foco visível forte (teclado e leitor de tela); 5. sem movimento perpétuo — a arte do hero não flutua. ============================================================ */ /* ---------- 1. tokens: contraste AAA ---------- Ratios medidos contra #fff, com a fórmula da WCAG 2.1: ink #1f1b3a 16.46:1 AAA ink-soft #4b4869 8.64:1 AAA ink-faint #565374 7.28:1 AAA (base era #7c7a93 = 4.15:1, reprova) brand-600 #4338ca 7.90:1 AAA (base era #4f46e5 = 6.29:1, reprova por pouco) accent #c2410c 5.18:1 branco sobre laranja — AAA para texto GRANDE (o rótulo do botão é ≥18.66px em peso 600), AA no resto. O #f97316 da base dá 2.80:1: reprova até em AA. accent-ink #9a3412 7.31:1 AAA — laranja para texto pequeno sobre branco. ⚠️ Ao mexer numa destas cores, refaça a conta. "Parece escuro o bastante" não é medida. */ :root[data-band="60plus"] { /* ⚠️ A escala inteira do design system é em `rem`, e `rem` olha para o — não para o . Aumentar só o body (a primeira tentativa aqui) deixava o corpo em 19px e TODO o resto — menu, eyebrow, rótulo de plano, legenda do balão — preso aos 16px do navegador. Subir a raiz escala texto E espaçamento juntos, que é o comportamento certo para esta faixa. 19/16 = +18,75%. */ font-size: 19px; --ink-faint: #565374; --brand-600: #4338ca; --shadow-pop: 0 12px 34px -8px rgba(154, 52, 18, 0.42); --radius-lg: 1.5rem; /* Laranja escuro para TEXTO pequeno sobre branco (7,31:1). */ --accent-ink: #9a3412; /* Verde escuro para FUNDO com texto branco (7,13:1). */ --success-ink: #166534; } /* ⚠️ `--accent` e `--success` NÃO são sobrescritos como token. Foi a primeira tentativa e ela quebrou o que estava certo: `--accent` escurecido derrubou o "Max" da marca no rodapé escuro (3,48:1) e `--success` escurecido apagou o número verde do painel sobre fundo escuro (2,35:1). A mesma cor precisa ser ESCURA quando é fundo de texto branco e CLARA quando é texto sobre fundo escuro — um token só não resolve os dois. Por isso as regras abaixo são pontuais. */ /* Botão de ação: branco sobre #9a3412 = 7,31:1 (AAA em qualquer tamanho). O #f97316 da base dá 2,80:1 e reprova até em AA — passa despercebido na página das crianças porque o rótulo é grande, mas aqui há botão pequeno e a dica de 0,8rem dentro do botão. */ [data-band="60plus"] .btn--accent { background: var(--accent-ink); font-weight: 700; } [data-band="60plus"] .btn--accent:hover { background: #7c2d12; } /* Verde como FUNDO de texto/ícone branco. */ [data-band="60plus"] .feature-list li::before, [data-band="60plus"] .badge--xp { background: var(--success-ink); } /* Verde como TEXTO sobre branco ("online" do balão). */ [data-band="60plus"] .chat-mock__live { color: var(--success-ink); } [data-band="60plus"] .chat-mock__live::before { background: var(--success-ink); } /* Sobre fundo escuro o verde continua o claro da base (7,37:1) — nada a fazer, e é justamente o que a sobrescrita de token estragava. */ /* Indigo: o #6366f1 da base dá 4,47:1 sobre branco. Serve para preço grande por 0,03 e reprova no selo de 12px. Os dois vão para o 700. */ [data-band="60plus"] .plan__price { color: var(--brand-700); } [data-band="60plus"] .plan__flag { background: var(--brand-700); font-size: 0.8rem; } /* Gradientes: `background-color` computado é transparente, então nenhuma ferramenta automática mede estes dois. Ambos começavam em #4f46e5 (6,29:1 com branco) e agora começam no 700 (7,90:1). */ [data-band="60plus"] .step__n { background: linear-gradient(135deg, var(--brand-600), #312e81); } [data-band="60plus"] .cta-final__box { background: linear-gradient(135deg, var(--brand-700), #312e81 55%, #241f4d); } /* Destaque dentro da fala do Max: #ea580c sobre o lilás do balão dá 3,4:1. */ [data-band="60plus"] .bubble--max em { color: #7c2d12; } /* ---------- 2. corpo maior e mais respirado ---------- */ [data-band="60plus"] body { /* A base crava `body { font-size:17px }` em px, que vence a herança — precisa ser sobrescrito explicitamente. 1rem = os 19px da raiz. */ font-size: 1rem; line-height: 1.75; } [data-band="60plus"] .lede { font-size: 1.22rem; } [data-band="60plus"] .card p, [data-band="60plus"] .step p, [data-band="60plus"] .feature-list li, [data-band="60plus"] .check-list li, [data-band="60plus"] .faq details p { font-size: 1.04rem; } /* Medida de linha: passar de ~75 caracteres cansa a leitura, e cansa mais quando a fonte é maior. */ [data-band="60plus"] .card p, [data-band="60plus"] .faq details p, [data-band="60plus"] .founder-box p { max-width: 62ch; } /* ---------- 3. alvos de toque ≥48px ---------- */ [data-band="60plus"] .btn { min-height: 52px; padding-inline: 1.6rem; } [data-band="60plus"] .btn--lg { min-height: 60px; font-size: 1.18rem; } [data-band="60plus"] .btn--sm { min-height: 48px; font-size: 1.02rem; } [data-band="60plus"] .faq summary { padding: 1.25rem 0; min-height: 56px; font-size: 1.15rem; } [data-band="60plus"] .nav__links a, [data-band="60plus"] .footer__links a { padding: 0.5rem 0; display: inline-block; } /* ---------- 4. foco visível forte ---------- Sem isto o foco herda o anel fino do navegador, que numa tela grande e clara simplesmente não se enxerga. */ [data-band="60plus"] :focus-visible { outline: 4px solid var(--brand-700); outline-offset: 3px; border-radius: 6px; } [data-band="60plus"] .section--dark :focus-visible, [data-band="60plus"] .cta-final__box :focus-visible, [data-band="60plus"] .footer :focus-visible { outline-color: #fdba74; } /* ---------- 5. links de corpo sublinhados ---------- Cor sozinha não é sinal suficiente (WCAG 1.4.1) e, nesta faixa, "o que é clicável" precisa ser óbvio sem passar o mouse. */ [data-band="60plus"] .card a, [data-band="60plus"] .faq details p a, [data-band="60plus"] .lede a, [data-band="60plus"] p:not(.hero__strip-text) > a:not(.btn) { color: var(--brand-700); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; } /* ---------- 6. sem movimento perpétuo ---------- A base faz o cartão do Max flutuar em laço infinito. Movimento contínuo na periferia da visão atrapalha a leitura — e aqui o cartão fica ao lado do texto principal. O `pop` de entrada fica: acontece uma vez e termina. */ [data-band="60plus"] .float { animation: none; } /* ---------- 7. seção escura com mais luz ---------- */ [data-band="60plus"] .lede--light { color: rgba(255, 255, 255, 0.92); } [data-band="60plus"] .card--glass p { color: rgba(255, 255, 255, 0.9); } [data-band="60plus"] .check-list li { color: rgba(255, 255, 255, 0.94); } [data-band="60plus"] .cta-final__box > p { color: rgba(255, 255, 255, 0.94); } [data-band="60plus"] .cta-final__note { color: rgba(255, 255, 255, 0.88); } [data-band="60plus"] .footer { color: rgba(255, 255, 255, 0.82); } [data-band="60plus"] .footer__legal { color: rgba(255, 255, 255, 0.7); } /* ---------- 8. eyebrow / chips um pouco maiores ---------- */ [data-band="60plus"] .eyebrow { font-size: 0.9rem; padding: 0.4rem 0.95rem; } /* ============================================================ COMPONENTES PRÓPRIOS DESTA PÁGINA ============================================================ */ /* ---------- faixa "grátis" do hero ---------- O argumento mais forte da página cabe em uma frase: o mundo que está aberto de graça é justamente o de reconhecer golpes. */ .free-strip { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; background: #fff7ed; border: 2px solid #fed7aa; border-radius: var(--radius); padding: 1rem 1.3rem; margin-top: 1.6rem; } .free-strip__tag { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: var(--accent-ink); padding: 0.35rem 0.85rem; border-radius: 999px; white-space: nowrap; } .free-strip p { margin: 0; color: var(--ink); font-size: 1.04rem; flex: 1 1 260px; } /* ---------- cartões numerados dos 12 mundos ---------- */ .worlds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; } .world { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 0.9rem; align-items: start; background: var(--surface); border: 1px solid var(--surface-inset); border-radius: var(--radius); padding: 1.2rem 1.3rem; box-shadow: var(--shadow-card); } .world__n { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 0.9rem; background: var(--brand-50); color: var(--brand-700); font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 1.15rem; } .world strong { font-family: "Baloo 2", sans-serif; font-weight: 600; font-size: 1.08rem; line-height: 1.3; color: var(--ink); } .world span { font-size: 0.95rem; color: var(--ink-soft); } /* O mundo aberto na degustação é o único destacado — e o destaque é informação, não decoração: diz onde a pessoa pode começar hoje. */ .world--free { border: 2px solid var(--accent); background: #fff7ed; } .world--free .world__n { background: var(--accent-ink); color: #fff; } .world--bonus .world__n { background: var(--brand-700); color: #fff; } /* ⚠️ Precisa do `.world` na frente: `.world span` (0,1,1) é mais específico que `.world__free-tag` (0,1,0) e vencia a cor, deixando o selo em texto escuro sobre fundo escuro — ilegível. */ .world .world__free-tag { display: inline-block; margin-top: 0.35rem; font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: var(--accent-ink); padding: 0.2rem 0.7rem; border-radius: 999px; } .worlds__note { margin-top: 1.4rem; text-align: center; color: var(--ink-soft); font-size: 1.02rem; } /* ---------- acessibilidade: lista de duas colunas ---------- */ .access { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 2.4rem; margin-top: 2rem; list-style: none; padding: 0; } .access li { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start; color: var(--ink-soft); } .access li span[aria-hidden] { font-size: 1.6rem; line-height: 1.2; } .access li strong { display: block; color: var(--ink); font-family: "Baloo 2", sans-serif; font-weight: 600; font-size: 1.1rem; } /* ---------- "sem pressão": lista de negativas ---------- O diferencial desta faixa é o que o produto NÃO faz. A marca visual é um ✕ calmo, não um ✓ — a leitura é "isso aqui não existe", e essa é a boa notícia. */ .calm { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem 2rem; margin: 2rem 0 0; list-style: none; padding: 0; } .calm li { position: relative; padding-left: 2.3rem; color: var(--ink-soft); font-size: 1.04rem; } .calm li::before { content: "✕"; position: absolute; left: 0; top: 0.15rem; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 50%; background: var(--brand-50); color: var(--brand-700); font-weight: 800; font-size: 0.9rem; } .calm li strong { color: var(--ink); } /* ---------- bloco para quem compra para o pai/mãe ---------- */ .gift { margin-top: 2.4rem; background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 2rem); } .gift h3 { font-size: 1.35rem; margin-bottom: 0.6rem; } .gift p { color: var(--ink-soft); margin-bottom: 0.8rem; max-width: 68ch; } .gift p:last-child { margin-bottom: 0; } /* ---------- responsivo ---------- */ @media (max-width: 980px) { .worlds { grid-template-columns: repeat(2, 1fr); } .access, .calm { grid-template-columns: 1fr; } } @media (max-width: 560px) { /* A base cai para 16px aqui; nesta faixa 18px é o piso — de novo na RAIZ, para o menu e as legendas acompanharem. */ :root[data-band="60plus"] { font-size: 18px; } .worlds { grid-template-columns: 1fr; } .free-strip { flex-direction: column; align-items: flex-start; } /* ⚠️ Aqui morava um bug medido no headless: a folha base esconde o "Entrar" abaixo de 560px, e reexibi-lo sem apertar o resto fazia o cabeçalho pedir 465px de largura — ou seja, ROLAGEM HORIZONTAL em todo telefone (320/360/390 medidos). A régua é o documento, não o gosto: `document.scrollWidth > window.innerWidth` é defeito. A marca e o botão encolhem, e o "Entrar" só volta a partir de 400px (regra separada, fora deste bloco). Abaixo disso o caminho de quem já tem conta continua existindo três vezes: no hero, no CTA final e no rodapé. */ [data-band="60plus"] .nav__inner { gap: 0.5rem; } [data-band="60plus"] .nav__actions { gap: 0.5rem; } [data-band="60plus"] .brand__name { font-size: 1.1rem; } [data-band="60plus"] .nav__cta { padding-inline: 0.85rem; font-size: 0.95rem; } } /* O "Entrar" do cabeçalho volta assim que há largura para ele sem empurrar o botão para fora da tela. */ @media (min-width: 400px) and (max-width: 560px) { [data-band="60plus"] .nav__login { display: inline-block; font-size: 0.92rem; padding: 0.7rem 0.3rem; } } /* ============================================================ CORREÇÕES DE RENDERIZAÇÃO (pegas no headless, 1400px e 390px) ============================================================ */ /* ---------- menu: 19px de base alarga os rótulos ---------- Com a métrica da folha base (gap 1.6rem, .98rem) os seis itens estouravam a linha e o menu quebrava em duas alturas dentro de um cabeçalho de 70px. Os rótulos já foram encurtados no HTML; aqui a métrica acompanha. `nowrap` impede que um item quebre no meio. */ [data-band="60plus"] .nav__links { gap: 1.15rem; font-size: 0.92rem; } [data-band="60plus"] .nav__links a { white-space: nowrap; } /* ---------- selos do hero ---------- ⚠️ O selo da direita fica na altura do balão de fala e cobre a segunda linha dele ("seu professor de IA" saía cortado). Subimos para a altura do avatar, onde a margem do cartão é vazia — o avatar tem 200px num cartão de 330px, sobram ~65px de cada lado. A folha base posiciona em `top:64%`, calibrado para o rótulo curto ("🔥 7 dias") da página das crianças. */ [data-band="60plus"] .badge--xp { top: 4%; left: -1%; } [data-band="60plus"] .badge--streak { top: 24%; right: -3%; } /* ---------- faixa "grátis" no celular ---------- ⚠️ Bug de flexbox: `flex:1 1 260px` no parágrafo define a base do EIXO PRINCIPAL. Ao virar `flex-direction:column` abaixo de 560px o eixo principal passa a ser o vertical, e os 260px viraram ALTURA MÍNIMA — a caixa ganhava ~130px de vazio embaixo do texto. */ @media (max-width: 560px) { .free-strip p { flex: 0 1 auto; } } /* ---------- alvos de toque do cabeçalho ---------- Medido no headless: itens do menu com 42px de altura, "Entrar" com 45×27 e a marca com 184×34 — todos abaixo dos 44px. Links INLINE dentro de uma frase (o "Entrar em profmax.app" do hero, o "página principal" da FAQ) ficam como estão: a WCAG 2.5.8 os isenta, e engordá-los quebraria o parágrafo. */ [data-band="60plus"] .nav__links a { padding: 0.7rem 0; } /* ⚠️ Sem `display`: a folha base esconde o "Entrar" abaixo de 560px e a reexibição é decidida na media query de 400px. Declarar `display:inline-block` aqui (fora de qualquer media query) anulava aquele portão em toda largura — foi assim que o cabeçalho voltou a transbordar depois de "corrigido". */ [data-band="60plus"] .nav__login { padding: 0.7rem 0.5rem; } [data-band="60plus"] .brand { padding: 0.35rem 0; } /* ---------- últimos dois achados do headless ---------- */ /* O "Max" da marca em #f97316 sobre branco dá 2,80:1. A WCAG isenta logotipo do requisito de contraste, mas numa página cujo argumento é justamente enxergar bem, a marca ilegível no cabeçalho contradiz a promessa. No rodapé escuro ele continua o laranja claro da base (6,42:1), que ali está correto. */ [data-band="60plus"] .nav .brand__ia { color: var(--accent-ink); } /* "online" no balão decorativo ficava em 14,8px. */ [data-band="60plus"] .chat-mock__live { font-size: 0.85rem; } /* Cabeçalho translúcido (rgba .82) sobre a seção escura vira um cinza claro onde os rótulos caem para ~5,9:1. Opacidade maior devolve o AAA durante a rolagem — o blur decorativo continua. */ [data-band="60plus"] .nav { background: rgba(255, 255, 255, 0.96); } /* ---------- piso de 15px também nos rótulos ---------- Na raiz de 18px do celular, quatro rótulos caíam para 14,4–14,8px: a dica dentro do botão, o selo "Grátis, sem cartão", as legendas do painel e o selo do lote. São `rem` pequenos que a base calibrou para uma raiz de 16px. Numa página cujo argumento é enxergar bem, letra de 14px é uma contradição — ainda que seja "só um rótulo". */ [data-band="60plus"] .btn__hint { font-size: 0.85rem; } [data-band="60plus"] .world .world__free-tag { font-size: 0.88rem; } [data-band="60plus"] .mini-stat span { font-size: 0.88rem; } [data-band="60plus"] .plan__flag { font-size: 0.85rem; } /* ---------- eyebrow longa não pode ser mais larga que a tela ---------- `.eyebrow--center` usa `width:max-content`, que ignora o contêiner. Os rótulos curtos da página das crianças nunca revelaram isso; "FEITO PARA ENXERGAR, OUVIR E ACERTAR O BOTÃO" pediu 445px numa janela de 390px e sozinho já punha a página inteira em rolagem horizontal. */ [data-band="60plus"] .eyebrow--center { max-width: 100%; }