Abertura tipográfica de dobra

Olho, uma frase em corpo de display alinhada à coluna e um apoio de duas linhas. Nada abaixo: nem card, nem lista, nem foto, nem botão. A frase entra palavra a palavra, quebra onde o <br> manda, e o olho lê a dobra inteira em dois segundos — porque é só isso que há nela.

O problema editorial é o da porta de entrada de capítulo. Uma página institucional longa tem três ou quatro assuntos, e a passagem de um para o outro não se anuncia sozinha: a pessoa rola de uma grade de serviços para uma lista de etapas e não percebe que trocou de assunto. O cabeçalho de seção não resolve, porque ele é o rótulo de um conteúdo que vem logo abaixo, dentro da mesma dobra — ele diz "isto aqui é X", não "começa aqui um assunto novo". Esta peça diz a segunda coisa, e diz com a única ferramenta que não compete com o capítulo que ela abre: escala de tipografia e respiro. É por isso que ela não tem embaixo, e é por isso que o respiro dela é assimétrico — cheio em cima, para se soltar da dobra densa anterior, e 40% embaixo, para grudar no capítulo que anuncia.

Quando usar

• Entre dois capítulos de uma home ou de uma página institucional longa: depois de recursos, antes do processo; depois do processo, antes da prova.
• Quando existe uma afirmação de método que resume o capítulo em 5 a 12 palavras — como a casa trabalha, e não o que ela vende.
• Quando a página está densa e a próxima dobra vai ser densa também. A abertura é o lugar onde o leitor levanta a cabeça sem perder o fio.
• Quando o capítulo seguinte é longo (um acordeão de dez perguntas, uma linha do tempo de cinco etapas) e merece ser apresentado antes de começar.
• Uma ou duas por página, e as duas abrindo capítulos de peso comparável. Três aberturas viram tique e a página passa a parecer um sumário.

Quando não usar

• Quando a dobra tem conteúdo abaixo do cabeçalho, dentro da mesma seção. Aí o certo não é um componente: é .sec-head + h2.sec-title + .sec-lead do core, que é o que quase toda dobra da casa já faz. Esta peça existe justamente porque não tem miolo — trocar uma pela outra é o erro que a ficha mais quer evitar. Regra prática: se você precisou de um <div> a mais depois do apoio, use o cabeçalho do core.
• Quando a frase é pontuação entre duas dobras e não anuncia nada: conteudo/manifesto-com-imagens. Ele é centrado, não tem olho (a ficha dele diz por escrito "sem olho, sem apoio, sem botão"), aguenta 12 a 20 palavras em três linhas e tem menos da metade do respiro de uma seção. O olho é a diferença: com olho a frase anuncia, sem olho ela só respira.
• Quando a frase é fala — de sócio, de manifesto, de carta ao cliente — e precisa de aspas e de um parágrafo que a aterrisse: conteudo/manifesto-citacao, que resolve em duas colunas assimétricas.
• Quando a dobra precisa de presença visual e de um próximo passo: midia/colunas-cascata. O bloco de texto dele é o parente mais próximo desta peça — olho, .display-xl com data-split, .sec-lead e botão —, mas centrado em 720px sobre uma parede de fotos em movimento, e com um .btn. Ele ganha quando a dobra é convite; esta ganha quando a dobra é limiar.
• Quando a frase tem de levar a algum lugar: conversao/cta-fechamento-foto. Botão aqui deixa de ser abertura e passa a ser chamada.
• Como primeira dobra da página. Abertura de dobra não é abertura de página: sem nada acima, o respiro de cima não separa nada e a peça fica pendurada no topo. Para isso é hero/full-bleed-media ou hero/centrado-prova-social.
• Quando o que se quer afirmar é um número: prova/stats-contador-regua. Cifra em corpo 49px vira promessa auditável, e número pede premissa e ressalva ao lado — que é conteúdo, e conteúdo aqui não cabe.

Padrão editorial

O que mantém a peça coesa é a relação entre os três textos: o olho nomeia, a frase afirma e o apoio concretiza, nessa ordem e sem sobreposição. O erro mais comum é o apoio repetir a frase em prosa — e aí a abertura tem duas vozes dizendo a mesma coisa, o que num bloco de três linhas é imediato.

A quebra de linha é conteúdo, e é a única regra que muda quando a copy muda. A linha mais longa tem de ocupar entre 75% e 90% da coluna. Abaixo de 75% a frase deixa de ser peça gráfica e volta a parecer um rótulo grande; acima de 90% ela encosta na borda e a segunda linha fica solta. Medido no tema liberta-wealth com a frase de exemplo:

Trocando a copy, remeça e ajuste --abt-corpo — e remeça também o corte do mobile, que é função da linha mais longa e não do dispositivo (ver Gotchas).

Especificação dos assets

Nenhum. A peça é tipografia e não recebe imagem, ícone, logo, vídeo nem número. É a única coisa que ela pede do projeto:

• A família de --display do tema tem de estar carregada de verdade. Em corpo 49px a diferença entre a display do cliente e a fonte de sistema é a peça inteira. Se o tema declara @font-face para arquivo que não está no repositório, o 404 não cai no fallback de graça — MANUAL §1.
• O --accent do tema tem de fechar contraste no escopo de tom escolhido. Ver a variação "em escopo claro".

Como usar

<link rel="stylesheet" href="componentes/conteudo/abertura-tipografica/estilo.css">

Não há script.js. A entrada vem do core/motion.js, que a página já carrega.

Cole um capítulo depois dela, no mesmo escopo de tom. Sem isso o respiro de baixo não tem no que grudar e a peça vira um cabeçalho órfão.

Ganchos

Variações

• Em escopo claro — .sec-paper (ou .sec-light) e --abt-em:var(--fg) na .abt. As duas coisas andam juntas: medido no tema liberta-wealth, a sage do --accent cai de 10.83:1 no .sec-deep para 1.36:1 no .sec-paper, e o --accent-2 fica em 2.42:1, abaixo dos 3:1 de texto grande. Com o parafuso em --fg o realce mede 14.62:1 e o itálico continua marcando a palavra. Só troque o escopo se o capítulo que a abertura abre for claro também.
• Centrada — .abt-centro no .abt-bloco. Medido: apoio com margin-inline automático, 233px de folga de cada lado a 1440. A peça passa a ler como monumento em vez de porta de entrada; nesse caso confira se o irmão certo não é conteudo/manifesto-com-imagens, que é centrado de nascença.
• Sem apoio — apague o .abt-apoio. Nada muda no CSS.
• Sem a entrada palavra a palavra — data-rv no lugar do data-split na frase. Use em página que já tem outro data-split (o efeito só funciona quando é único na rolagem) ou quando a frase é curta, em que a onda de 48ms termina antes de o olho chegar.
• Entre dobras sem padding próprio — suba --abt-antes e --abt-depois. Os valores padrão contam com o --sec-gap do vizinho para somar. (experimental — não exercitada)
• Três linhas de frase — um segundo <br class="abt-quebra">, --abt-corpo mais baixo e o corte do mobile remedido. Acima de três linhas a peça deixa de ser abertura. (experimental — não exercitada)

Gotchas

• Ela não é o .sec-head do core com mais respiro, e a diferença é estrutural, não de gosto. As duas coisas empilham olho, título e apoio. Só que o .sec-head centra em --head-max:760px e leva h2.sec-title (26–40px, max-width:22ch), porque é o rótulo de um miolo que vem logo abaixo dentro do mesmo .wrap; e o .sec-pad que o acompanha é padding:var(--sec-gap) 0, simétrico por definição. Aqui não há miolo, a frase é .display-xl (a primitiva gráfica que enche a coluna, 49px medidos a 1440), o alinhamento é à esquerda e o respiro é assimétrico. Quem "consertar" trocando por .sec-head + .sec-pad recupera três linhas de CSS e perde as quatro coisas que a peça é.

• Não se sobrescreve metade do .sec-pad, e é por isso que a peça escreve o próprio padding-block. .abt e .sec-pad empatam em especificidade (0,1,0): um .abt{padding-bottom:…} colado depois do core funciona, colado antes não, e o §6.4 proíbe depender disso. A saída é a peça não vestir .sec-pad — que é o que o conteudo/manifesto-com-imagens já fazia pelo mesmo motivo.

• O vão de baixo da frase COLAPSA com o margin-top:18px do .sec-lead. Margens verticais de irmãos adjacentes colapsam no maior dos dois, não somam. Medido a 1440: margin-bottom de 27.4px, vão real de 28px; a 390, margem de 15.7px e vão real de 18px — a primitiva mandando. Consequência: abaixo de 18px o parafuso não faz nada, e quem o baixar tentando fechar o bloco vai jurar que a folha não carregou.

• O corte de 720px não é breakpoint de dispositivo: é função da copy e da display do tema. A linha escrita à mão mede 549px no piso de 28px, e a coluna vale 0.9 × viewport enquanto --pad está em 5vw — então ela só cabe acima de ~610px. Com o corte em 600 havia um defeito medido a 601px: três linhas de 453, 92 e 364px, sendo o 92 a sobra da primeira linha quebrada por dentro pelo navegador. O <br> não estoura a coluna; ele produz toco. 720 dá 18% de folga. Quem trocar a copy remede este número — é o único valor do estilo.css que não se deriva de token nem de parafuso de primitiva.

• Abaixo do corte a quebra volta ao text-wrap:balance, e isso é o oposto de desistir. balance é a opinião do próprio core, declarada no reset de h1..h4 e desligada pela .display-xl justamente para o <br> valer. Apagado o <br>, a opinião volta. Medido a 390: 3 linhas de 288/337/284 numa coluna de 350, contra 4 linhas de 288/257/226/133 sem a regra. Nem um caso nem o outro estoura a coluna — o defeito é a linha órfã.

• O espaço antes do <br class="abt-quebra"> é obrigatório e não é formatação. Com o <br> em display:none no mobile, sem esse espaço "escrita" e "antes" colam numa palavra só. O split() do core preserva nós de espaço em branco (ele empurra o texto não-palavra como TextNode), então o espaço sobrevive à quebra em .w.

• Este componente USA data-split e o hero/centrado-prova-social não pode — e os dois estão certos. A armadilha registrada na ficha dele é real: o gancho gera a classe .w, que é do core, e o §6.1 proíbe componente estilizar classe fora do próprio prefixo. Lá isso era fatal, porque a dobra precisava de uma cor e de um atraso por palavra, e não havia onde pendurá-los. Aqui não é: o escalonamento que a peça quer é exatamente o do core (48ms por palavra, no setTimeout do wIO), e nenhuma palavra precisa de tratamento próprio. Nada neste componente toca em .w. Quem no futuro quiser uma palavra em cor diferente cai na mesma parede e a saída é a mesma: spans no markup, e aí a peça deixa de usar data-split.

• data-split e data-rv são irmãos aqui, nunca aninhados. Um [data-rv] envolvendo a frase somaria o blur(14px) do invólucro ao blur(12px) de cada .w sobre o mesmo texto, com dois limiares de interseção diferentes (.16 no data-rv, .2 no data-split) e o resultado pulsando. A frase não vai dentro de invólucro revelado.

• data-split não deixa nó invisível para leitor de tela. O estado de repouso do .w é opacity:0, que a árvore de acessibilidade lê normalmente — não é visibility:hidden nem display:none. Medido depois da entrada: 10 spans .w, todos com .in, opacidade mínima 1, texto íntegro ("Cada patrimônio pede uma política escrita antes da primeira aplicação."), nenhum aria-hidden e nenhum elemento focável na peça. O <em> sobrevive ao walk() do core — ele é clonado com cloneNode(false) e recebe o .w dentro, então a regra .abt-frase em continua valendo.

• Os dois casos de "sem script" são diferentes, e só um deles é resolvido. Medidos os dois:

O primeiro é o @media (scripting: none) do core/motion.css fazendo o que promete — a dobra inteira lê, com a mesma altura de sempre, e nenhum .w chega a ser criado. O segundo não é coberto por nada, e é condição de todo data-rv da biblioteca, não desta peça: [data-rv] tem estado de repouso invisível e quem o desfaz é o script. O que a peça ganha de graça é que a frase sobrevive aos dois — o motion.css não estiliza [data-split], só os .w que o script cria —, então o pior caso degrada para "olho e apoio invisíveis, frase legível", e a frase é a mensagem. Não se conserta aqui (§0/§10.5): é o core.

• O tom é do capítulo, não da abertura. A seção declara o mesmo escopo de tom da dobra que ela abre — é isso que faz a assimetria ser legível: o vão de cima separa dois tons e o de baixo é um respiro dentro de um só. Uma abertura .sec-paper entre duas dobras .sec-dark continua funcionando como respiro claro (§3), mas aí ela é uma faixa isolada e o respiro devia ser simétrico — nesse caso o componente certo é conteudo/manifesto-com-imagens.

• Contraste medido nos quatro escopos (tema liberta-wealth; --accent sage #c6ceaa, --accent-2 tan #af9274):

A frase, o apoio e o olho fecham em qualquer escopo. O realce em cor de marca não fecha nos dois claros — daí o parafuso --abt-em. Vale lembrar que o itálico é o que carrega o realce: a cor é reforço, e nunca a única pista.

Compliance

A peça não devolve número, não compara e não captura dado. O que ela pede antes de publicar:

• A frase é afirmação de método, nunca de resultado. Sem cifra, sem prazo, sem percentual e sem retorno insinuado. Em corpo 49px, um número vira promessa auditável — e número pede premissa visível e ressalva ao lado de onde a pessoa o lê, o que nesta peça não caberia sem transformá-la em outra coisa.
• Sem superlativo de mercado ("a melhor", "a maior", "líder"). Uma abertura institucional afirma como a casa trabalha, não onde ela está no ranking.
• Sem nome de cliente real, marca de instituição real ou logo. A peça não tem onde pôr um, e não deve ganhar.
• O texto de exemplo é da Liberta Investimentos e descreve política de investimentos, alocação, liquidez e horizonte. Substitua pelo texto do cliente e confira que ele passa pela mesma régua — a régua vale para a copy, não para o componente.

Histórico

Normalizações aplicadas na extração: não houve extração. A forma foi reduzida ao que o core não faz: a frase é a primitiva .display-xl, o olho é .eyebrow, o apoio é .sec-lead, a coluna é .wrap e a entrada é data-split mais data-rv. Sobraram quatro decisões — ritmo assimétrico, corpo da letra, realce do <em> e devolução da quebra no mobile — e o estilo.css tem quatro regras.

Divergências conhecidas vs. produção: nenhuma; a peça não veio de site nosso.

Pendências que não são desta peça (registradas aqui porque foram medidas aqui):

• O <em> em --accent sobre escopo claro mede 1.36:1 no tema liberta-wealth, e isso vem da regra h2.sec-title em do core, não deste componente. Quatro componentes já catalogados fazem o mesmo — conversao/calculadora-sucessao, efeitos/quebra-papel-rasgado, listas/leque-paineis e prova/manchetes-imprensa põem <em> em --accent dentro de .sec-paper. O --accent da casa é escolhido para fundo escuro; um --accent por escopo de tom (ou um token de tinta de realce) resolveria os cinco casos de uma vez. Decisão de arquitetura — §3 manda discutir antes, e este componente não a tomou: ele resolveu localmente com o parafuso --abt-em.
• A regra do <em> em corpo de display está agora em dois lugares: h2.sec-title em (core) e .abt-frase em (aqui). São duas cópias, não três: pelo §6 ainda não é candidata a primitiva, mas fica contada. A terceira aparição é o gatilho para promover uma regra de realce que sirva às duas escalas.