/* ==========================================================================
Zinho Toda Hora — CTA fixo.
Os quatro estados do UI-SPEC §14, a entrada por CLASSE (nunca por tween) e a
reserva de espaço que mantém o CLS em zero.
NENHUM HEX PODE APARECER NESTE ARQUIVO. Toda cor sai de var(--token), e os
tokens vivem só em tokens.css. A varredura entra no go-live da Fase 5.
Este é o ÚNICO elemento interativo da LP e a conversão inteira da campanha.
Tudo o que segue existe para que ele nunca fique invisível por acidente.
========================================================================== */
/* ------------------------------------------------ 1. Base: SEMPRE VISÍVEL */
/* ANIM-04, dependência invertida: o estado padrão do documento é VISÍVEL.
Nada esconde o CTA sem a classe .js-anim, que o boot da animação escreve no
de forma síncrona, no , antes deste arquivo. Se o GSAP falhar,
se a CSP bloquear o script ou se o failsafe do boot disparar, a regra de
repouso da seção 2 simplesmente deixa de casar e o CTA aparece — sem uma
linha de código a mais. Com um tween no lugar da transição, ele ficaria
preso fora de tela, e ele é a ÚNICA conversão da página.
CLS ZERO, por três razões INDEPENDENTES — as três precisam continuar valendo:
(a) o CTA é fixo ao viewport, fora do fluxo: ele não empurra nada;
(b) a especificação de Layout Instability EXCLUI deslocamentos causados por
`transform`, e a entrada é transform + opacidade, nunca altura;
(c) o token --cta-h reserva a faixa ESTATICAMENTE, em :root, e
`main { padding-block-end: calc(var(--cta-h) + var(--sp-24)) }` já está
valendo no primeiro paint, em lp.css.
Corolário de (c), que é a decisão D-07: NUNCA medir a altura da barra por JS
para escrever o padding depois. Medir por JS é CLS garantido. */
.cta-fixo {
position: fixed;
z-index: 100;
inset-block-end: 0;
inset-inline: 0;
transform: none;
opacity: 1;
visibility: visible;
touch-action: manipulation; /* elimina o atraso de 300ms do duplo-toque */
}
/* AVISO — LEIA ANTES DE ADICIONAR PROPRIEDADE A html, body OU A QUALQUER WRAPPER:
nenhum ancestral do .cta-fixo pode receber transform, filter, perspective,
backdrop-filter, dica de promoção de camada nem `contain: paint|layout|strict`
(e nem a propriedade que pula a renderização de conteúdo fora de tela, que a
implica). Qualquer uma delas cria containing block e rebaixa o posicionamento
do CTA de fixo para absoluto: ele para de acompanhar a rolagem, some depois da
primeira dobra e LP-09 falha EM SILÊNCIO, com a página parecendo perfeita.
O mesmo aviso está em lp.css, ao lado do padding que reserva a faixa. */
/* -------------------------------- 2. Repouso e entrada, por classe + transição */
/* D-05/D-06: o CTA entra DEPOIS do primeiro bloco. No PDF o card aparece nas 8
páginas, mas ali cada página é uma peça isolada; na LP contínua, manter o CTA
desde o topo cobre parte do family_shot, que é o elemento de LCP. Deixar o
topo respirar preserva o LCP e costuma converter melhor.
A entrada é CSS, não tween, por quatro razões: roda no compositor e não
disputa a main thread com o scrub do parallax; ANIM-04 de graça (ver seção 1);
ANIM-05 de graça (o bloco prefers-reduced-motion de anim.css já zera a
duração de transição); e zero disputa pelo canal de transform. */
.js-anim .cta-fixo {
transform: translateY(112%); /* 112% e não 100%: folga para borda e para
qualquer sombra que venha a existir, para
que nada fique espiando na base da tela */
opacity: 0;
visibility: hidden; /* D-05 criou uma armadilha que o PITFALLS não
previa: um apenas com opacity:0 continua FOCÁVEL pelo TAB, e o usuário de
teclado "sai da tela" no primeiro TAB. visibility:hidden tira o CTA da ordem
de foco E da árvore de acessibilidade, e volta com visibility 0s na entrada,
sem atrasar um milissegundo da transição. */
transition: transform .45s cubic-bezier(.22,1,.36,1),
opacity .30s linear,
visibility 0s linear .45s;
/* SEGUNDA REDE DE PROTEÇÃO, e ela existe por um caso real de interação entre
dois arquivos: o failsafe do boot só remove .js-anim se NADA inicializar,
mas assets/js/lp.js cancela esse failsafe quando ELE inicializa. Se lp.js
subir e cta.js não (404, bloqueio de rede, erro de sintaxe), .js-anim fica
no e o CTA nunca recebe .is-in — some para sempre. Aqui, sem prova de
vida do cta.js em 4s, o CTA aparece por CSS puro. */
animation: cta-failsafe 0s linear 4s forwards;
}
/* A prova de vida: cta.js escreve .cta-js no assim que confirma que tem
GSAP e ScrollTrigger para trabalhar. Com ela, o failsafe acima nunca dispara e
quem manda no CTA é o gatilho de rolagem. */
.js-anim.cta-js .cta-fixo { animation: none; }
@keyframes cta-failsafe {
to { transform: none; opacity: 1; visibility: visible; }
}
.js-anim .cta-fixo.is-in {
transform: translateY(0);
opacity: 1;
visibility: visible;
transition: transform .45s cubic-bezier(.22,1,.36,1),
opacity .30s linear,
visibility 0s;
}
/* prefers-reduced-motion NÃO precisa de uma linha aqui: o bloco de anim.css zera
transition-duration em `*`, e o CTA passa a aparecer instantaneamente. cta.js
ainda aplica .is-in de imediato no ramo `reduce` do matchMedia, para que ele
não dependa de rolagem nenhuma. ANIM-05 sai de graça dos dois lados. */
/* ------------------------------------------------ 3. O card — UI-SPEC §14 */
/* Abaixo de 1024px isto é uma BARRA de largura total (UI-SPEC §13); a partir de
1024px vira card ancorado, na seção 5. min-height amarrado ao MESMO token que
reserva a faixa: quem mexer em --cta-h move a barra e a reserva juntas, e não
uma sem a outra. */
.cta-fixo__card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--sp-8);
min-height: var(--cta-h);
/* env(): no iPhone a faixa do indicador de home comeria a base do botão. O
fallback 0px mantém a conta idêntica em todo o resto. */
padding: var(--sp-8) var(--sp-16) calc(var(--sp-8) + env(safe-area-inset-bottom, 0px));
background: var(--cta-fundo);
}
.cta-fixo__headline {
margin: 0;
font-family: var(--ff-display);
font-weight: 400;
font-size: var(--fs-corpo);
line-height: var(--lh-titulo);
letter-spacing: var(--ls-titulo);
color: var(--cta-texto); /* 4,71:1 sobre o vermelho do card */
text-align: center;
text-wrap: balance;
}
/* O {{ }} do headline. Só a COR muda aqui — o piso de corpo de 24px vem de
lp.css e é DELIBERADO: este par tem 4,03:1, que reprova como texto normal
(4,5:1) e aprova como texto grande (3:1). Reduzir o corpo do .dm dentro do
card é reprovação de acessibilidade, não ajuste de layout. */
.cta-fixo__headline .dm { color: var(--cta-destaque); }
/* A pílula. A COR da pílula é a exata da peça; só o RÓTULO muda — divergência 2
do UI-SPEC §11: no PDF o rótulo é creme sobre o laranja, o que dá 1,74:1.
Com --cta-rotulo são 5,57:1, e a peça continua reconhecível. */
.cta-fixo__pilula {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: stretch; /* a pílula ocupa a largura do card, como na peça */
min-height: var(--alvo-toque); /* 44px — WCAG 2.2 pede 24; 44 é o piso de conversão */
min-width: var(--alvo-toque);
padding: var(--sp-8) var(--sp-16);
background: var(--cta-pilula);
border: 2px solid var(--cta-borda); /* 4,71:1 contra o card — WCAG 1.4.11 */
border-radius: 999px;
color: var(--cta-rotulo);
font-family: var(--ff-texto);
font-weight: 600;
font-size: var(--fs-legal);
line-height: var(--lh-corpo);
letter-spacing: var(--ls-corpo);
text-align: center;
text-decoration: none;
}
/* Hover e active só no . O inerte (destino não configurado) NÃO pode
levantar ao passar o mouse: prometer um clique que não existe é pior que não
prometer nada. `filter` aqui é aplicado NA PÍLULA, que não é ancestral do
.cta-fixo — não cria containing block para ele. */
@media (hover: hover) {
a.cta-fixo__pilula:hover {
filter: brightness(1.06);
transform: translateY(-2px);
transition: transform 160ms ease-out, filter 160ms ease-out;
}
}
a.cta-fixo__pilula:active {
transform: translateY(0);
filter: brightness(0.96);
}
/* Anel DUPLO, repetido aqui de propósito: o de lp.css cobre `a` e `button`, mas
este arquivo precisa funcionar sozinho se alguém reordenar os . Claro
resolve o vermelho do card (5,73:1), escuro resolve o creme (11,96:1).
Nunca `outline: none` sem substituto (UI-SPEC §5.5). */
.cta-fixo__pilula:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--foco-interno), 0 0 0 6px var(--foco-externo);
}
.cta-fixo__pilula--inerte { cursor: default; }
/* ------------------------------- 4. Card ancorado a partir de 1024px (§13) */
@media (min-width: 1024px) {
/* --cta-h vale 0px aqui, em tokens.css: o card não ocupa faixa de rolagem, e
por isso a reserva de padding do some sozinha. */
.cta-fixo {
inset-inline: auto 0;
inset-block-end: var(--sp-32);
margin-inline-end: var(--sp-32);
max-width: 420px;
}
.cta-fixo__card {
gap: var(--sp-16);
padding: var(--sp-24);
border-radius: var(--sp-24);
}
.cta-fixo__pilula { font-size: var(--fs-corpo); }
}