Manifesto com citação em duas colunas

<section class="sec-dark sec-pad" id="manifesto"> <div class="wrap"> <span class="eyebrow" data-rv>Manifesto</span> <div class="man-grid"> <p class="man-quote" data-split>"A frase que a marca assinaria. Uma só, curta o bastante para ser lida inteira, densa o bastante para valer a dobra."</p> <div class="man-body" data-rv data-d="1"> <p>O parágrafo de apoio explica o que a citação afirma: quem é a empresa, para quem trabalha e o que entrega. Duas a três linhas.</p> <a href="#equipe" class="man-link">Conheça nossa equipe <svg width="13" height="13" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 7H12M8 3L12 7L8 11"/></svg> </a> </div> </div> </div> </section>

/* ========================================================================== MANIFESTO — citação grande com reveal palavra a palavra Prefixo: man- Tokens usados: --fg --fg-2 --accent --sans --ease ========================================================================== */ .man-grid{ display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(36px,6vw,84px);align-items:start;margin-top:34px; } /* A citação usa a fonte de TEXTO em itálico, não a display. É o que a distingue de um título de seção: ela é fala, não rótulo. */ .man-quote{ font-family:var(--sans);font-style:italic;font-weight:300; font-size:clamp(23px,2.9vw,35px);line-height:1.42;color:var(--fg); } .man-body p{font-size:17px;line-height:1.6;color:var(--fg-2)} .man-body p + p{margin-top:18px} /* Link de texto com régua embaixo, não botão: o manifesto é leitura, e um botão ali competiria com o CTA principal da página. */ .man-link{ display:inline-flex;align-items:center;gap:8px;margin-top:22px; font-size:14px;color:var(--accent); border-bottom:1px solid var(--rule-2); /* fallback */ border-bottom-color:color-mix(in srgb,var(--accent) 40%,transparent); padding-bottom:2px;transition:border-color .25s; } .man-link:hover{border-color:var(--accent)} .man-link svg{transition:transform .25s} .man-link:hover svg{transform:translateX(4px)} @media(max-width:900px){.man-grid{grid-template-columns:1fr}}

Duas colunas assimétricas: à esquerda uma citação grande em itálico, revelada palavra a palavra quando entra na tela; à direita um parágrafo de apoio e um link de texto. Sem script próprio — o reveal vem do [data-split] do core.

É a seção que dá voz à empresa logo depois do hero, antes de qualquer lista de serviços.

Quando usar

Segunda dobra de uma home institucional, para dizer quem a empresa é antes de dizer o que ela vende.
Página "Quem somos", como abertura de texto.
Quando existe uma frase de posicionamento real — de sócio, de manifesto, de carta ao cliente.

Quando não usar

Sem uma frase forte de verdade. Citação genérica revelada palavra a palavra chama atenção para o vazio.
Como depoimento de cliente. Depoimento pede rosto, nome e empresa — isso é prova/, não conteudo/.
Mais de uma vez na mesma página. O efeito de palavra a palavra só funciona quando é único.

Padrão editorial

Slot	Regra
Olho	1 palavra: "Manifesto", "Propósito", "Nossa visão".
Citação	20 a 32 palavras. Entre aspas. Uma ideia só. Abaixo de 15 a revelação acaba antes de o olho chegar; acima de 35 o efeito arrasta.
Corpo	1 ou 2 parágrafos de 25 a 45 palavras. Aterrissa a citação em fato concreto: o que a empresa faz, para quem.
Link	Verbo mais destino: "Conheça nossa equipe". Nunca "Saiba mais".

A citação não leva <em> na cor de marca. Ela já é o destaque da seção — dois destaques dentro dela anulam um ao outro.

Como usar

<link rel="stylesheet" href="componentes/conteudo/manifesto-citacao/estilo.css">

Nenhum script além do core/motion.js.

Ganchos

Gancho	Papel
`[data-split]`	na citação — o core quebra em `.w` e revela palavra a palavra
`[data-rv]` `data-d="1"`	no corpo — entra logo depois da citação

Variações

Sem link — apague .man-link.
Citação sozinha — apague .man-body e o grid; a citação ocupa a coluna inteira. Usado quando não há para onde levar o leitor.

Gotchas

A citação usa --sans em itálico, não --display. É o que a distingue de um título de seção: ela é fala, não rótulo. Trocar para a display transforma a seção em mais um título grande.
O [data-split] preserva tags internas. O core percorre a árvore em vez de usar innerHTML cru, então <em>, <a> e <br> dentro da citação sobrevivem.
O link é texto com régua, não botão. Botão aqui competiria com o CTA principal da página.
1.15fr contra 1fr, não 1fr 1fr. A citação precisa pesar mais; em colunas iguais ela quebra em linhas curtas demais e perde o ritmo.

Histórico

Projeto	Onde	Data	Diferenças
Liberta Wealth	`index.html` `#manifesto`	2026-08	Origem. Citação + 1 parágrafo + link para a página de equipe.
Liberta Wealth	`quem-somos.html`, intro	2026-08	Mesma citação, 2 parágrafos, sem link e sem olho.

Normalizações aplicadas na extração: borda do link rgba(198,206,170,.4) crua → --rule-2 com color-mix sobre --accent por cima, para acompanhar qualquer tema; cor do link --sage → --accent.