A última dobra antes do rodapé. Uma foto sangrada quase apagada, um gradiente de três paradas que fecha em preto sólido em cima e embaixo, grão por cima, e no centro só duas coisas: a frase que a marca assinaria, em itálico grande, e um botão.
É o eco do hero: mesma foto, mesmo escuro, mesma promessa — dita agora por quem já leu a página inteira. Não tem olho, não tem título de seção, não tem lista, não tem formulário. Essa pobreza é o componente: se ele tivesse mais uma coisa, seria mais uma seção, e a página não precisa de mais uma seção nesse ponto.
Sem script. Três tokens. É a peça mais barata da biblioteca e provavelmente a mais reutilizável: toda página institucional precisa acabar, e quase toda acaba desta forma.
Este ou o cta-formulario-lead?
A categoria conversão tem duas peças de dobra inteira, e elas não competem: fazem trabalhos diferentes em momentos diferentes da página.
cta-fechamento-foto |
cta-formulario-lead |
|
|---|---|---|
| Pede ao visitante | um clique | 4 campos preenchidos |
| Onde vive | último bloco antes do rodapé | onde a conversão realmente acontece — meio ou fim |
| O que entrega | intenção: leva a pessoa até a oferta | o lead, com nome, contato e qualificação |
| Complexidade | baixa, CSS puro | alta, com script, validação e select composto |
| Precisa de backend | não | sim — sem endpoint ele perde lead em silêncio |
| Custo de montar | copiar dois arquivos | copiar quatro, mais o select-custom, mais ligar o envio |
A regra prática: se a página tem um momento de conversão, ele é o cta-formulario-lead, e este aqui não substitui. Se a página tem um momento de conversão e ainda continua — FAQ, prova social, mais um bloco editorial —, este componente é o que fecha a conta no fim.
Os dois na mesma página é o uso certo, não o excesso. O botão daqui aponta para a âncora do formulário (href="#contato"), então o fechamento não é um segundo pedido: é o mesmo pedido, repetido a quem chegou até o fim. Foi assim na origem.
Ponha pelo menos uma dobra entre os dois. Formulário e fechamento colados leem como insistência, e o segundo cancela o primeiro. Na origem havia o FAQ inteiro no meio.
Quando usar
- Fim de home, de landing ou de página institucional — sempre como última seção antes do rodapé.
- Quando a página já pediu a conversão em algum lugar acima e você quer fechar com a promessa, não com mais um argumento.
- Quando existe uma foto de atmosfera boa: horizonte, cidade, mar, paisagem. Ela entra quase apagada, então serve para dar volume ao preto, não para mostrar nada.
- Como respiro antes do rodapé em página densa. Depois de quatro dobras de texto e número, uma frase só, centralizada, no escuro, é o que devolve o fôlego.
Quando não usar
- Como CTA principal da página. Ele não captura nada. Se o objetivo é lead, a peça é o
cta-formulario-lead. - No meio da página. As duas pontas do gradiente fecham em preto sólido para emendar com rodapé e com a seção anterior. No meio de uma página clara, isso vira uma faixa preta sem motivo.
- Em seção clara. O componente é escuro por definição (veja os gotchas).
- Sem foto de atmosfera. Sem
.end-mediaele ainda funciona, mas aí é uma faixa de texto centralizado — considere se vale uma dobra inteira de--sec-gap. - Logo depois de outro CTA. Dois pedidos colados não somam, se anulam.
- Quando a marca não tem uma frase própria. Este componente é 90% frase; sem ela, é uma foto escura com um botão.
Padrão editorial
| Slot | Regra |
|---|---|
.end-sign |
6 a 10 palavras, duas linhas — não três. A promessa da marca, não uma oferta: sem número, sem prazo, sem "clique aqui". Duas cláusulas que se espelham em torno de uma vírgula é o ritmo que faz a frase soar assinada. Acima de 10 palavras o max-width:20ch já a quebra em três linhas e ela vira parágrafo. |
| Quebra da frase | A <br> é sua, não do navegador. Escolha onde a frase respira e marque; data-split preserva a tag. O max-width:20ch é a rede de segurança, não o plano. |
| Rótulo do botão | 2 a 4 palavras, a mesma ação do CTA principal. Se lá em cima está "Agende seu diagnóstico", aqui não vire "Fale conosco": rótulo diferente lê como oferta diferente. |
| Destino do botão | A âncora da seção de conversão da própria página. Link para outra página aqui desperdiça a única intenção que a peça produz. |
Não use <em> na assinatura. A linha inteira já é itálico; o <em> do h2.sec-title existe para destacar uma palavra dentro de um título reto, e aqui não há reto contra o qual destacar. Se precisar de ênfase, ela vem da quebra de linha.
A frase não repete o título do hero, mas rima com ele. Se o hero diz "Segurança no presente, liberdade no futuro", o fechamento pode fechar o mesmo par por outro lado. Repetir literalmente lê como falta de assunto.
Especificação da imagem
| Proporção | paisagem, mínimo 1600×900 |
| Peso | até 250 KB — é a última imagem da página, não vale mais que isso |
| Assunto | horizonte, cidade, paisagem, mar. Nada com rosto, texto ou detalhe fino |
| Enquadramento | object-fit:cover num bloco largo e baixo: o assunto tem de sobreviver a corte em cima e embaixo |
| Tratamento | já entra em opacity:.3 e grayscale(.5), e o gradiente come as duas pontas. Escolha por atmosfera, não por conteúdo |
O teste: se, no preview, você consegue dizer o que está na foto, ela está clara demais para este componente. A foto certa aqui parece um vinco de luz no preto.
loading="lazy" e decoding="async" estão no markup de propósito — é a última imagem da página e ela é puramente decorativa. Se o seu público chega por scroll rápido até o rodapé e você vê a foto entrando, tire o lazy: o custo é um request adiantado, o ganho é não piscar.
Como usar
<link rel="stylesheet" href="componentes/conversao/cta-fechamento-foto/estilo.css">
Só isso. Não há script.js — o movimento inteiro vem do core/motion.js, que a página já carrega.
Ganchos
| Gancho | O quê |
|---|---|
[data-split] na .end-sign |
reveal palavra a palavra, do core. Preserva <br> |
[data-rv][data-d="1"] no .end-cta |
o botão entra depois da frase terminar de se montar |
.grain |
primitiva do core, irmã da .end-media — precisa ficar fora dela para não passar por baixo do gradiente |
Variações
| Variação | Como | Quando |
|---|---|---|
| Sem foto | apagar .end-media e o .grain |
Página que já tem foto demais, ou projeto sem banco de imagem |
| Botão fantasma | .btn-ghost no lugar de .btn-primary |
O CTA de verdade está poucas dobras acima e este é só o eco |
| Dois botões | um .btn-primary e um .btn-ghost dentro do mesmo .end-cta |
Duas saídas legítimas: agendar e falar no WhatsApp |
| Sem botão | apagar o .end-cta inteiro |
Fechamento puramente editorial, com a conversão morando no rodapé |
O .end-cta é flex com justify-content:center e flex-wrap:wrap — o segundo botão entra e quebra no mobile sem nenhuma regra a mais.
Gotchas
- A foto precisa de luz, e o véu tem de ser calibrado nela.
--end-veusai de fábrica em.5. O valor certo depende do brilho médio da imagem: com foto clara,.3já basta; com fotografia escura — que é a regra em site de fundo preto —.3some por completo e a dobra vira um retângulo preto com texto.
Como medir antes de calibrar:
python
from PIL import Image, ImageStat
print(ImageStat.Stat(Image.open("foto.jpg").convert("L")).mean[0])
Abaixo de ~90 (numa escala de 0 a 255) a foto é escura: suba --end-veu para .5–.6. Acima de ~140, desça para .3, senão a imagem briga com a assinatura. Este gotcha foi descoberto no próprio preview: a primeira foto escolhida tinha média 78 e a dobra ficou indistinguível de um fundo liso.
-
O componente é escuro por definição. Use
.sec-dark. O gradiente fecha em--dark-rgbnas duas pontas, e a assinatura é--fgclara sobre foto escurecida — em.sec-papervocê teria um gradiente preto sob texto escuro, ou seja, nada legível. -
Em
.sec-deepaparece uma emenda..sec-deeptem--bg:var(--dark-2)(#131313), mas o gradiente só sabe fechar emrgb(var(--dark-rgb))(#0a0a0a): não existe--dark-2-rgb. Sobra um degrau de um tom nas duas pontas. Pela regra do tom vizinho (contrato §3) é quase imperceptível, mas é real. Não conserte inventando token — token novo é decisão de arquitetura, e a saída certa é usar.sec-dark, que é onde esta peça vive. -
As duas pontas do gradiente são sólidas, e é isso que costura a seção. Um overlay de opacidade única no lugar dele devolve duas linhas retas: uma na emenda com a seção anterior, outra na emenda com o rodapé. Se a foto parecer "colada" na página, é porque alguém achatou o gradiente.
-
O
.grainé irmão da.end-media, não filho. O gradiente é o::afterda.end-media, e pseudo-elemento pinta depois dos filhos: um.grainlá dentro sumiria por baixo do gradiente. Fora, ele pega oz-index:1do core e fica acima da foto e abaixo do texto (.end-bodyéz-index:2). -
.end-bodyé uma segunda classe no.wrap, e só mexe em empilhamento e alinhamento. Não toca empadding-inlinenem emmax-width— a coluna continua sendo assunto do core (contrato §4). Se precisar da assinatura mais estreita, o controle é omax-width:20chda.end-sign. -
text-align:centermora na.end-body, não na seção. Na origem estava na seção inteira, e qualquer coisa colada dentro dela herdava centralização sem pedir. -
A assinatura é
h2, nãop. É o cabeçalho da última seção da página e vale como marco de navegação para leitor de tela. Não a rebaixe para parágrafo só porque não parece um título. -
Sem
.ttlna assinatura..ttle[data-split]são dois reveals concorrentes; com os dois no mesmo elemento a frase pisca antes de se montar. Escolha um, e aqui o certo é odata-split— palavra a palavra é exatamente o ritmo de quem assina. -
A seção não tem
id. Ninguém navega até um fechamento. Se você puser um, ele vai aparecer em índice automático e em sumário de leitor de tela como se fosse destino.
Histórico
| Projeto | Onde | Data | O quê |
|---|---|---|---|
| Liberta Wealth | site/index.html, .close-sec (entre o FAQ e o rodapé) |
2026-08 | Origem. Classes .close-, seletores de elemento (.close-media img, .close-sec h2), alcance nas primitivas (.close-sec > .wrap, .close-sec .btn) e a assinatura em var(--serif). |
Normalizações aplicadas na extração:
| Na origem | Aqui | Por quê |
|---|---|---|
prefixo close- |
end- |
close é verbo em inglês e vai colidir com o primeiro modal, drawer ou toast da categoria sobreposições — a biblioteca já tem .fold-close e [data-fold-close] querendo dizer "fechar". end- é substantivo: o fim da página |
.close-media img |
.end-img |
seletor de elemento (contrato §6.3) |
.close-sec h2 |
.end-sign |
idem |
.close-sec > .wrap |
.end-body, segunda classe no .wrap |
componente não estiliza primitiva do core por descendência |
.close-sec .btn{margin-top:36px} |
.end-cta, wrapper flex |
mesmo motivo, e de quebra o segundo botão passou a caber sem regra nova |
text-align:center na seção |
na .end-body |
a centralização era herdada por qualquer coisa colada dentro |
font-family:var(--serif) |
var(--sans) em itálico |
a biblioteca não tem --serif. A citação do conteudo/manifesto-citacao veio do mesmo site com o mesmo --serif e foi mapeada para --sans itálico, com o argumento de que citação é fala, não rótulo. A assinatura é a mesma voz e recebe o mesmo tratamento — duas peças com a mesma função tipográfica não podem divergir |
font-weight:500 |
300 |
consequência da troca acima: 500 era o peso do serif; o --sans em 300 é o que casa com a .man-quote |
| seta diagonal no SVG do botão | seta horizontal, a mesma do hero e do cta-formulario-lead |
o .btn:hover svg do core faz translateX(4px) — uma seta diagonal deslizando na horizontal lê torto |
<h2 class="ttl"> |
<h2 class="end-sign" data-split> |
reveal palavra a palavra, que é o ritmo de assinatura |
<img src alt=""> |
mais loading="lazy" e decoding="async" |
é a última imagem da página e é decorativa |
Calibragem no primeiro uso. O código é da própria Liberta Wealth, sem autor externo nem licença a creditar. Uma ressalva de proveniência: a pasta do projeto tem duas cópias do site — github-repo/, a versão confirmada de onde saíram os 18 componentes da varredura, e site/, uma composição cuja ida ao ar não está confirmada. A seção .close-sec existe somente na site/, então o que está aqui foi lido de uma composição, não de uma página publicada.
O que esperar no primeiro uso real: o opacity:.3 da foto e o .62 do meio do gradiente foram calibrados numa foto específica, escura e de horizonte. Foto mais clara vai pedir .22/.55; foto muito escura, .4/.7. Ajuste os dois juntos — mexer só num deixa a foto ou chapada ou fantasma.