/* * VIS Sales Core — Aula Gratuita * * Base mínima da preparação: tarja + headline + VSL (espaço reservado) * + microtexto + botão oculto + rodapé. Headline e frase de apoio usam * Inter (self-hosted, ver @font-face abaixo) -- largura NORMAL, nunca * condensada (uma revisão anterior usou Roboto Condensed na headline; * revertido nesta revisão). O resto da página permanece na pilha de * fontes de sistema (--vis-font-body). * * TESTE — VERSÃO CLARA: fundo branco / textos escuros nesta página, * só como teste (ver --vis-bg/--vis-text/--vis-text-muted abaixo). A * tarja vermelha permanece com as cores originais da marca (--vis-red, * texto branco, preço em destaque amarelo) — nenhuma delas depende das * variáveis de fundo/texto da página, por isso a troca acima não a * afeta. Só esta página muda; nenhuma outra do funil usa este CSS. * * MOBILE-FIRST: valores base (sem media query) valem para qualquer * largura de tela. O arquivo não tem nenhum media query -- o tamanho * da headline é sempre calculado via JS (ver aula-gratuita.js), * medindo a largura real disponível em qualquer tela, mobile ou * desktop, então uma regra fixa de desktop aqui só duplicaria/ * divergiria do que o JS decide. A headline tem EXATAMENTE 4 linhas * fixas (cada uma seu próprio elemento de bloco, nunca quebrando por * dentro); o apoio tem 2 linhas fixas com tamanho FIXO via CSS (sem * JS, confiável o bastante para garantir a contagem sem medir nada). */ /* * Inter self-hosted (WOFF2, licença SIL Open Font License) -- pesos * usados: 700 e 900 (headline), 800 (botão de compra) -- os três do * MESMO arquivo variável (confirmado via requisição combinada à API * do Google Fonts, que serve o mesmo arquivo para toda a faixa) -- e * 400 itálico (apoio, arquivo separado). Sem a * declaração explícita do 800, o navegador renderizaria o botão com a * instância 900 (regra de fallback de peso), não com o 800 pedido. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter/inter-normal-700-900-latin.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/inter/inter-normal-700-900-latin.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/inter/inter-normal-700-900-latin.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/inter/inter-italic-400-latin.woff2') format('woff2'); } .vis-aula-gratuita-page { --vis-bg: #ffffff; --vis-text: #111111; --vis-text-muted: #374151; --vis-gold: #c6a15b; --vis-red: #e94141; --vis-font-body: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background-color: var(--vis-bg); color: var(--vis-text); margin: 0; min-height: 100vh; font-family: var(--vis-font-body); } .vis-aula-gratuita-page, .vis-aula-gratuita-page *, .vis-aula-gratuita-page *::before, .vis-aula-gratuita-page *::after { box-sizing: border-box; } .vis-aula-gratuita-page { overflow-x: clip; } .vis-aula-gratuita { display: flex; flex-direction: column; min-height: 100vh; } /* ---------- 1) Tarja ---------- */ /* * Faixa vermelha única, largura total, sem caixa preta interna (a * referência enviada substitui a versão anterior com área preta). * Fica no fluxo normal do documento — nunca position:fixed/sticky — * então nunca sobrepõe conteúdo, conforme pedido explicitamente. * Cor aproximada da referência: não tenho acesso visual à imagem * anexada nesta sessão (só a descrição textual chegou), então * reaproveitei o mesmo vermelho de marca já usado/aprovado no resto * do funil (--vis-red, #e94141) — conferir contra a imagem e ajustar * o valor aqui se necessário, é a única declaração de cor da faixa. */ .vis-aula-gratuita__banner { background-color: var(--vis-red); color: #ffffff; text-align: center; padding: 6px 12px; } /* * Tamanho fluido (clamp) em vez de fixo: em telas muito estreitas o * texto encolhe suavemente e o wrap (abaixo) cuida do resto — nunca * corta texto nem gera rolagem horizontal. column-gap também fluido * pelo mesmo motivo. */ .vis-aula-gratuita__banner-line { margin: 0; font-weight: 700; font-size: clamp(10px, 3.1vw, 13px); line-height: 1.5; letter-spacing: 0.01em; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; column-gap: clamp(4px, 1.5vw, 8px); row-gap: 2px; } .vis-aula-gratuita__banner-sep { opacity: 0.6; font-weight: 400; } .vis-aula-gratuita__banner-price-old { text-decoration: line-through; opacity: 0.8; font-weight: 400; } .vis-aula-gratuita__banner-price-new { color: #ffe066; font-weight: 800; } /* * Largura estável dos dígitos (font-variant-numeric, recurso nativo * do CSS — sem baixar nenhuma fonte) para o texto ao redor não ficar * "tremendo" a cada segundo que o contador muda. */ .vis-aula-gratuita__countdown { font-variant-numeric: tabular-nums; font-weight: 800; } /* ---------- Hero (headline + VSL + microtexto) ---------- */ .vis-aula-gratuita__hero { flex: 1; /* * 36px entre a tarja e a headline. Esta é a ÚNICA fonte desse * espaçamento: nem .content, nem .intro, nem .headline têm * margin/padding-top próprios (todos zerados, ver regras abaixo), * então o valor efetivo bate exatamente com este padding-top, sem * somar margens de vários elementos. Margens laterais de 12px no * celular. * * padding-bottom: 64px (era 24px, pedido explícito desta revisão -- * "considerável", fora do rodapé, na área branca) é a ÚNICA fonte * do espaço entre o final da caixa da frase abaixo do vídeo e o * início do fundo preto do rodapé enquanto o botão está oculto -- * o contêiner #oferta-aula nasce com display:none inline (não ocupa * espaço no fluxo, inclusive a margin-top dele, que fica DENTRO do * próprio contêiner); quando o VTurb o revela, o botão aparece * entre a frase e esse mesmo espaço de 64px. O padding * interno do próprio rodapé preto (.vis-aula-gratuita__footer, * mais abaixo) não foi alterado -- este espaço fica inteiramente * FORA da seção preta, não é o padding-top dela. */ padding: 36px 12px 64px; max-width: 640px; margin: 0 auto; width: 100%; text-align: center; } /* * CONTÊINER ÚNICO compartilhado por headline, apoio e vídeo (pedido * explícito desta revisão): esta é a ÚNICA regra do arquivo que * declara largura/centralização para esse bloco -- .intro e .vsl * (logo abaixo) são ambos filhos diretos dela, cada um só com * width: 100%, sem max-width/margin horizontal próprios. Sem uma * segunda declaração de largura competindo em outro lugar, a borda * esquerda do texto e a borda esquerda do vídeo coincidem por * construção (mesmo pai, mesma caixa), não por dois valores que só * coincidem numericamente. 400px = a largura atual do vídeo, usada * como referência (vídeo não foi redimensionado nem movido). */ .vis-aula-gratuita__content { width: 100%; max-width: 400px; margin: 0 auto; } /* * Filho direto de .vis-aula-gratuita__content, 100% da largura dele, * sem margin/padding horizontal próprios (zerados explicitamente -- * nenhuma segunda fonte de deslocamento). text-align: left garante que * o texto comece na borda esquerda da caixa (nunca centralizado * individualmente, nunca justificado). overflow-x: hidden é defesa em * profundidade (não o mecanismo principal, reintroduzida nesta revisão * junto com as linhas fixas/nowrap) -- o JS de ajuste de fonte é quem * garante o encaixe da headline; isto só evita rolagem horizontal * visível no caso extremo em que nem o piso mínimo de fonte caiba. */ .vis-aula-gratuita__intro { width: 100%; margin: 0; padding: 0; text-align: left; overflow-x: hidden; } /* * Cada linha da headline/apoio é seu próprio elemento de bloco, sem * quebra interna (white-space: nowrap) -- exigência desta revisão: * exatamente 4 linhas na headline, 2 no apoio, nos pontos de quebra * definidos no HTML (ver views/front.php). margin/padding zerados * explicitamente -- nenhuma linha introduz recuo próprio. */ .vis-aula-gratuita__headline-line, .vis-aula-gratuita__support-line { display: block; white-space: nowrap; margin: 0; padding: 0; } /* * Definição única e consolidada da tipografia da headline. Inter * (self-hosted, ver @font-face no topo do arquivo), largura NORMAL -- * nunca condensada, nem como fallback (Arial/Helvetica/sans-serif aqui * são fontes de largura normal também). Peso 700 como base (encorpado, * não um peso leve com aparência de texto comum). Peso 900 (extra * bold) só nos trechos destacados — ver * .vis-aula-gratuita__headline-strong: "MAIOR" (2ª linha) e "sair na * frente e ter" + "os Maiores Salários." (fim da 3ª linha + 4ª linha * inteira -- uma frase de destaque que atravessa a quebra entre as * duas últimas linhas, por isso 2 elementos para ela, ver * views/front.php). * * Entrelinha 1.4. margin é 0 nos 4 lados, o espaçamento até a frase de * apoio é definido inteiramente pela margin-top dela (ver * .vis-aula-gratuita__support), nunca somando duas margens. * * O font-size AQUI é só o fallback estático antes do JS rodar -- * propositalmente pequeno para nunca transbordar durante o instante * entre o primeiro paint e o JS aplicar o tamanho calculado (o texto * nunca fica escondido nesse meio-tempo). O valor real, único para as * 4 linhas, é definido via JS (element.style.fontSize) medindo a * largura real renderizada da linha mais longa contra a largura * disponível, usando as métricas da fonte efetivamente carregada e os * pesos reais de cada trecho -- ver a seção "ajuste de tamanho de * fonte" em aula-gratuita.js (mecanismo novo desta revisão, escopado * só à headline -- o apoio usa tamanho fixo, sem JS) -- depois que a * fonte Inter termina de carregar (document.fonts.ready) e recalculado * quando a largura do contêiner muda (nunca um loop contínuo). Usa o * MAIOR tamanho que caiba nas 4 linhas, nunca reaproveitando um valor * calculado para uma contagem de linhas diferente. * * Nunca clamp()/vw, nunca compressão (sem letter-spacing negativo, sem * font-stretch condensed, sem transform: scaleX/relative usados para * compensar alinhamento ou contagem de linhas), sem altura fixa nem * line-clamp. */ .vis-aula-gratuita__headline { font-family: 'Inter', Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.4; font-weight: 700; font-style: normal; letter-spacing: normal; margin: 0; padding: 0; color: var(--vis-text); } .vis-aula-gratuita__headline-strong { font-weight: 900; } /* * margin-top: 4px é a ÚNICA fonte da distância até a headline (a * headline acima tem margin: 0 nos 4 lados, então as duas margens não * se somam -- 4px líquidos, conferido). margin-bottom: 16px é a ÚNICA * fonte da distância até o vídeo (.vis-aula-gratuita__vsl abaixo tem * margin-top efetivamente 0). .vis-aula-gratuita__content (pai) não * tem padding nem gap que pudesse somar distância extra a nenhuma das * duas. Tamanho FIXO (13px, era 14px -- ligeiramente menor, pedido * explícito desta revisão), sem JS: as 2 linhas fixas garantem a * contagem por construção, não precisa medir nada em tempo real. */ .vis-aula-gratuita__support { font-family: 'Inter', Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.35; font-weight: 400; font-style: italic; margin: 4px 0 16px; padding: 0; color: #222222; } /* * Filho direto de .vis-aula-gratuita__content, 100% da largura dele * (igual a .vis-aula-gratuita__intro acima) -- sem max-width/margin * horizontal próprios, então não há uma segunda declaração de largura * que pudesse divergir da de .intro. margin-bottom: 0 -- o espaço até * a frase abaixo do vídeo é definido inteiramente pela margin-top de * .vis-aula-gratuita__microtext, nunca somando duas margens. * * Contém só o embed oficial do teste A/B do VTurb * ( com o style do próprio embed: display:block, * margin:0 auto, width:100%). Sem moldura com aspect-ratio, fundo ou * altura fixa aqui: a altura é a que o player define para a variante * sorteada pelo VTurb -- nenhuma altura duplicada, faixa ou espaço * artificial ao redor do vídeo. */ .vis-aula-gratuita__vsl { width: 100%; margin: 0; } /* * MESMA largura e centralização do vídeo (max-width:400px + margin:0 * auto, idênticos a .vis-aula-gratuita__vsl) -- por construção, não * coincidência, já que os dois são irmãos dentro do mesmo * .vis-aula-gratuita__hero. text-align: center centraliza o texto * dentro dessa largura (hero já é text-align:center, mas declarado * aqui explicitamente por clareza). * * Uma única linha (white-space: nowrap) -- nunca quebra para uma 2ª * linha. font-size fluido (clamp), começando em 11px no celular e * encolhendo só o necessário para caber sem cortar nem gerar rolagem * horizontal -- mesma técnica já usada na tarja * (.vis-aula-gratuita__banner-line, mais acima neste arquivo), nunca * um mecanismo novo. Cor #666666 (cinza discreto, direto -- não a * variável --vis-text-muted, que aqui teria o mesmo valor mas a cor * pedida é um tom específico, desacoplado do tema). Peso 400, itálico * (pedido explícito desta revisão -- era normal). Sem ícone, * animação, fundo destacado ou aparência de botão -- nenhuma dessas * propriedades é declarada aqui. * * margin-top: 8px é a ÚNICA fonte da distância até o vídeo (o vídeo * acima tem margin: 0, então não soma). Sem margin-bottom próprio -- o * espaço até o rodapé preto vem do padding-bottom do hero (ver acima). */ .vis-aula-gratuita__microtext { max-width: 400px; margin: 8px auto 0; text-align: center; white-space: nowrap; font-size: clamp(9px, 3vw, 11px); font-weight: 400; font-style: italic; color: #666666; } /* ---------- 6) Área revelada (botão único) ---------- */ /* * Contêiner #oferta-aula (só o botão dentro dele). MESMA * largura/centralização do vídeo (max-width:400px + margin:0 auto, * idêntico a .vis-aula-gratuita__microtext) -- bordas laterais do botão * alinhadas às do vídeo por construção. margin-top: 16px é a ÚNICA * fonte da distância até a frase acima (ela não tem margin-bottom * próprio); o espaço até o rodapé vem do padding-bottom do hero. * * SEM regra de display aqui, de propósito: o estado oculto inicial é * o style="display: none;" inline do HTML (ver views/front.php), e * quem o revela é exclusivamente a ação nativa "Mostrar conteúdo * oculto" do VTurb (seletor ID oferta-aula), que altera o display * inline do elemento. Uma regra display:none nesta folha manteria o * botão oculto se o VTurb apenas limpasse o valor inline -- por isso * não existe, nem com !important, nem via [hidden]. */ .vis-aula-gratuita__reveal { max-width: 400px; margin: 16px auto 0; } /* * Aparência: mais curto e mais encorpado. Largura ajustada ao conteúdo * (fit-content), centralizado (margin: 0 auto) e limitado ao contêiner * do vídeo MENOS 24px (12px de cada lado) -- essa folga lateral, * somada aos 12px de padding lateral do hero, reserva espaço para a * expansão da pulsação (escala + halo, no máximo ~14px por lado) sem * encostar na borda da página nem ser cortada por overflow-x: clip. * * Fundo verde sólido #07963E, texto branco, Inter peso 800 (mesmo * arquivo variável self-hosted, ver @font-face no topo), 16px, altura * mínima 64px, bordas 8px. Profundidade só com verdes: base inferior * #056B2C de 4px (primeira box-shadow, sem blur) + sombra verde suave * abaixo (segunda box-shadow). Sem gradiente nem outras cores. * * Uma única linha (white-space: nowrap). Em telas estreitas o padding * horizontal encolhe primeiro (clamp, de 24px até 12px); só abaixo de * ~355px de viewport o font-size cede levemente (min(16px, 4.5vw)), * como segunda medida -- nunca reticências, compressão horizontal ou * quebra em 2 linhas. */ .vis-aula-gratuita__button { position: relative; display: flex; align-items: center; justify-content: center; width: fit-content; max-width: calc(100% - 24px); min-height: 64px; margin: 0 auto; padding: 0 clamp(12px, 4vw, 24px); border-radius: 8px; background-color: #07963e; color: #ffffff; font-family: 'Inter', Arial, Helvetica, sans-serif; font-weight: 800; font-size: min(16px, 4.5vw); letter-spacing: normal; white-space: nowrap; text-align: center; text-decoration: none; border: none; cursor: pointer; box-shadow: 0 4px 0 #056b2c, 0 8px 14px rgba(7, 150, 62, 0.3); transition: translate 80ms ease, box-shadow 80ms ease; /* * Pulsação: anima SÓ a propriedade individual `scale` (nunca * margem, largura, altura nem box-shadow do botão) -- a base escura * e a sombra de profundidade ficam intactas durante todo o ciclo, e * `scale` é só de composição, nunca desloca os elementos ao redor. * Usar `scale` (e não `transform`) deixa o pressionamento livre * para usar `translate` sem que a animação o sobrescreva. */ animation: vis-aula-gratuita-button-pulse 1.6s ease-in-out infinite; } /* * Halo em pseudo-elemento separado, com pointer-events: none -- nunca * sobrescreve a sombra da base (que é do próprio botão) nem intercepta * o clique. box-shadow de spread animado de 0 a 12px, desaparecendo. * Mesmo ciclo (1,6s, ease-in-out, infinito) da escala do botão. */ .vis-aula-gratuita__button::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 0 rgba(7, 150, 62, 0); animation: vis-aula-gratuita-button-halo 1.6s ease-in-out infinite; } .vis-aula-gratuita__button:hover { background-color: #068536; } /* * Pressionamento: desce 2px e a base encolhe de 4px para 2px (o botão * "afunda" sobre ela). `translate` é independente de `scale`, então * funciona mesmo com a pulsação rodando. */ .vis-aula-gratuita__button:active { translate: 0 2px; box-shadow: 0 2px 0 #056b2c, 0 4px 8px rgba(7, 150, 62, 0.3); } .vis-aula-gratuita__button:focus-visible { outline: 3px solid #056b2c; outline-offset: 4px; } @keyframes vis-aula-gratuita-button-pulse { 0%, 100% { scale: 1; } 50% { scale: 1.035; } } @keyframes vis-aula-gratuita-button-halo { 0% { box-shadow: 0 0 0 0 rgba(7, 150, 62, 0.55); } 100% { box-shadow: 0 0 0 12px rgba(7, 150, 62, 0); } } /* * prefers-reduced-motion: botão estático -- remove só as animações; * base escura e sombra de profundidade (box-shadow do próprio botão) * continuam, e o halo fica invisível (valor estático transparente). */ @media (prefers-reduced-motion: reduce) { .vis-aula-gratuita__button, .vis-aula-gratuita__button::before { animation: none; } } /* ---------- 5) Rodapé ---------- */ /* * Seção visualmente separada do resto da página (pedido explícito * desta revisão): fundo preto de ponta a ponta --