Manifesto tipográfico com imagens na linha

Três linhas de caixa alta em corpo grande, centradas, quebradas na mão. No meio delas, no lugar exato onde caberia uma palavra, um retângulo de foto do tamanho de uma palavra. O olho lê a frase inteira de uma vez e só depois percebe que uma das palavras é uma imagem — a foto está alinhada pelo meio da linha, tem a altura da caixa alta e o mesmo vão das outras palavras, então ela entra na leitura em vez de interromper. Ao passar o ponteiro, cada palavra acende numa cor de marca diferente; nada se move.

O problema editorial é o do respiro entre duas dobras densas. Depois de uma grade de recursos e antes de uma fila de depoimentos, a página precisa de um lugar onde o leitor levante a cabeça — e uma seção comum, com olho, título e apoio, não faz isso: ela pede leitura igual às outras. Esta faixa entrega uma frase só, grande, que resume o negócio inteiro e se lê em dois segundos. As imagens existem para que ela não seja apenas mais um título grande: elas dão à frase a densidade de uma peça gráfica sem custar uma linha de texto a mais. Por isso o respiro vertical é menos da metade do de uma seção normal: isto é pontuação entre dobras, não dobra.

Quando usar

• Emenda entre duas dobras pesadas — depois de recursos, antes de prova social; depois de prova social, antes do CTA.
• Quando existe uma frase de modelo de negócio que cabe em três linhas e não precisa de autor: "o que entra, o que sai, quem cuida do meio".
• Quando há 2 ou 3 fotos genéricas de apoio que não merecem uma dobra própria mas ajudam a dar corpo à página.
• Uma vez por página. Duas faixas de manifesto na mesma rolagem viram tique.

Quando não usar

• Quando a frase é fala — de sócio, de manifesto, de carta ao cliente — e precisa de aspas, itálico e um parágrafo que a aterrisse: conteudo/manifesto-citacao. Ver o gotcha sobre por que os dois não são o mesmo componente.
• Quando são três ideias distintas, cada uma com título e texto próprio: conteudo/pilares-texto-na-foto, onde a foto é o fundo do bloco e não uma palavra dele.
• Quando a foto é o argumento e precisa de tamanho, quadro e legenda: conteudo/apresentacao-foto-alternada.
• Quando o que se quer afirmar é um número: prova/stats-contador-regua. Número dentro desta frase vira promessa auditável em corpo 46px.
• Como abertura de página. Sem dobra em cima, a faixa perde a função — ela é a pausa entre duas coisas. Abertura é hero/full-bleed-media.
• Quando a frase precisa levar a algum lugar. Aqui não há botão e nem deve haver: conversao/cta-fechamento-foto faz o fechamento.

Padrão editorial

O que mantém a faixa coesa é o paralelismo sintático das três linhas: sujeito + "vira" + objeto, duas vezes, com a terceira quebrando o padrão para fechar. É esse eco que faz o leitor terminar a última linha sem ter lido palavra por palavra. Linhas de comprimento muito diferente também estragam: como o texto é centrado, uma linha curta no meio de duas longas desenha uma ampulheta. Mire em larguras parecidas e deixe a imagem cair em coluna diferente em cada linha — duas imagens empilhadas na mesma altura horizontal viram uma coluna que ninguém pediu.

Especificação dos assets

• Formato e dimensão mínima: WebP, paisagem, 1600×900 ou maior. O quadro exibido é 2.25:1 (2em × .89em, a proporção do 72 × 32 do original) e o object-fit:cover corta em cima e embaixo — a foto é vista por uma fresta larga e baixa.
• Peso alvo: até 60 KB cada. São três numa faixa que não é o conteúdo principal da página; a primeira entra sem loading="lazy".
• Composição / enquadramento: assunto no centro vertical e legível a ~90 × 40 px, que é o tamanho real em desktop. Textura, ambiente, movimento — cidade, mesa, mar, gente de longe. As três da mesma família de luz e temperatura.
• O que não pode ter: rosto reconhecível (num quadro deste tamanho vira mancha), texto ou logo (ilegível e ainda por cima disputa com a frase), assunto pequeno no canto (o cover come), fundo branco chapado (o retângulo some no .sec-light) e foto muito saturada — o grayscale(.35) ajuda, mas não salva um vermelho no meio de uma linha preta.

Como usar

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

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

Ganchos

Variações

• em seção escura — .sec-dark ou .sec-deep no lugar de .sec-light. Texto e uma das cores de hover leem --fg/--fg-muted do escopo e viram claros sozinhos.
• corpo maior ou menor — --frase-corpo na seção. As imagens acompanham sem media query, porque estão em em.
• hover apagado — --frase-cor:var(--fg) na .frase: todas as palavras passam a transitar para a própria cor e o efeito some, sem tirar uma linha de CSS.
• uma cor só — --frase-cor:var(--accent) na .frase e apague os style das palavras.
• sem imagem — apague os <img>. Vira manifesto tipográfico puro — e aí, e só aí, cabe trocar data-rv por data-split.
• duas linhas ou quatro — acrescente ou tire um .frase-linha com o <br> e renumere o data-d. O core tem delay para 1, 2 e 3.

Gotchas

• A imagem não ilustra a frase: ela É uma palavra da frase. É essa afirmação que decide três propriedades de uma vez — display:inline-block, vertical-align:middle e medidas em em. Alinhar pela linha de base (o padrão de <img>) pendura a foto na frase em vez de encaixá-la nela; display:block a joga para uma linha própria e desmancha o desenho inteiro. Se alguém "arrumar" isso para figura com legenda, o componente perde a única ideia que tem.

• As medidas da imagem estão em em, não em px, e é o que dispensa uma segunda media query. 2em × .89em fica preso ao corpo do texto: mudou --frase-corpo, a foto cresceu junto e continua com a altura de uma palavra em qualquer tela. Em px, cada faixa de largura precisaria de um acerto — e o primeiro que esquecesse deixaria a imagem maior que a linha.

• position:relative;top:-.04em na imagem não é capricho de meio pixel. Uma caixa inline-block mais alta que a linha empurra a entrelinha do bloco inteiro: sem esse recuo, a terceira linha descola das outras duas e o manifesto deixa de parecer um bloco. É correção de leading, não de alinhamento.

• A faixa usa calc(var(--sec-gap) * .45) e não .sec-pad. Com o respiro cheio ela vira uma dobra por conta própria e perde a função — não é seção de conteúdo, é a emenda entre duas. E ainda assim o valor sai de --sec-gap por multiplicação: --sec-gap continua sendo a fonte única do ritmo vertical (§4). Um clamp solto aqui daria o mesmo pixel hoje e sairia de sincronia com o resto na primeira vez que o ritmo da página mudasse.

• --display-xl-lh:1.25 contra o .82 padrão da primitiva, de propósito. O .82 do core serve a título de uma ou duas palavras, onde as linhas se encaixam. Aqui são três frases inteiras com imagens dentro: apertar a entrelinha faz a foto de uma linha encostar no texto da outra. Quem achar a frase "solta" e devolver o .82 vai colidir as linhas.

• Os dois parafusos da .display-xl entram como fallback dentro do var(), não como declaração na própria regra. Em core/base.css está escrito font-size:var(--display-xl,clamp(46px,6vw,104px)) e line-height:var(--display-xl-lh,.82). A diferença não é de estilo: declarados na regra, --display-xl e --display-xl-lh seriam escritos no mesmo elemento que os lê, e venceriam o valor que o componente põe no ancestral .frase — o parafuso pareceria simplesmente não funcionar. É a mesma forma do --pil-pos do conteudo/pilares-texto-na-foto. Se alguém "limpar" o base.css movendo os defaults para dentro da regra, este componente e os outros dois que consomem a primitiva perdem o ajuste de corpo em silêncio.

• A .display-xl foi promovida ao core por causa deste componente, na terceira cópia. conteudo/apresentacao-foto-alternada e midia/carrossel-perfis já escreviam as mesmas seis linhas — família display, peso 700, corpo em clamp, entrelinha apertada, letter-spacing:-.02em, caixa alta —, e as duas fichas registravam por escrito "no terceiro, promova ao core". O §6 do contrato manda promover na terceira aparição, e foi o que aconteceu. Não recopie o bloco: se um quarto componente precisar de título display gigante, ele lê a primitiva e mexe nos dois parafusos.

• Não é data-split, e não pode ser. O walk() do core/motion.js só embrulha em .w o que for nodeType === 3 (texto); um nodeType === 1 é clonado raso e descido. O <img> sobrevive à varredura — ele não é perdido —, mas nunca vira .w, e como o estado inicial de invisibilidade mora em .w, ele apareceria em opacidade cheia enquanto as palavras ao redor ainda estão acendendo. Uma foto sozinha no ar antes de a frase existir é pior que não animar palavra a palavra. Por isso a entrada é data-rv por linha, com data-d escalonando — a linha inteira entra junta, imagem incluída.

• O .frase-linha existe só para o data-rv ter em que pegar. Sem esse invólucro, o reveal seria da frase inteira (uma peça só, sem escalonamento) ou de palavra solta. É inline-block porque um <span> em linha não aceita transform nem participa do reveal direito.

• As quebras estão no <br>, e nenhuma media query mexe nelas. Quebra automática desmancharia o desenho: a graça é que cada linha termine na palavra certa e as imagens caiam em colunas diferentes. Em tela estreita, uma linha do manifesto vira duas — e isso é o comportamento correto, porque inline-block quebra por dentro; o que o <br> impede é a segunda linha subir para o lado da primeira. (É também por isso que a primitiva carrega text-wrap:initial: o reset do core dá balance a todo h1..h4, e balancear por cima reintroduz exatamente a quebra automática que o <br> existe para evitar.)

• grayscale(.35) — parcial, não total. A imagem entra no meio de uma frase em caixa alta: colorida demais, ela rouba a linha e o olho para nela em vez de continuar lendo. Dessaturar por inteiro mataria a foto; 35% deixa legível e subordinada. Quem subir para foto crua vai ver o manifesto virar moldura de imagem.

• cursor:default na palavra, e nenhum :hover que mova. A palavra não é clicável: sem cursor:default o ponteiro vira barra de texto e sugere seleção, e num bloco em caixa alta e corpo grande isso convida ao arrasto. E o hover troca só a cor — não muda peso, não desloca, não sublinha: qualquer variação de métrica aqui faria a linha inteira dançar sob o ponteiro, porque as palavras são caixas em linha e uma que engorda empurra todas as seguintes.

• A cor do hover mora no style de cada palavra, e isso não é cor crua no markup. O que está escrito ali é --frase-cor:var(--accent-2) — um token, não um hex. O giro entre as três é decisão editorial (qual palavra acende em quê), muda a cada texto e por isso vive no conteúdo, não na folha. Cravar a rotação no CSS por :nth-child amarraria a cor à posição da palavra, e reescrever a frase trocaria as cores sozinho. Mesmo recurso do --pil-pos do conteudo/pilares-texto-na-foto.

• Não há @media(prefers-reduced-motion) neste arquivo, e está certo. A única animação é a entrada, que é do core — e o core já a desliga. O que sobra aqui é a transição de cor no hover, que não é movimento e fica: apagá-la em reduce tiraria retorno de ponteiro de quem não pediu para tirar.

• As imagens vão com alt="" e aria-hidden="true". A frase tem de ser lida inteira sem elas — "seu patrimônio ganha estrutura" é a sentença, e a foto é tratamento gráfico no lugar de um vão. Qualquer alt descritivo enfiaria "homem observando a cidade pela janela" no meio de um manifesto de três linhas.

• A primeira imagem não leva loading="lazy"; as outras duas levam. A faixa pode cair alto na página, e nesse caso o lazy atrasaria justamente a palavra-imagem da primeira linha — que entra junto com o data-rv dessa linha e apareceria como buraco. Da segunda em diante o atraso não custa nada.

• Isto não é uma variação do conteudo/manifesto-citacao, apesar do nome. Aquele é fala: duas colunas assimétricas, citação em --sans itálico entre aspas, um parágrafo de apoio que a aterrissa, um link, e o reveal palavra a palavra do data-split — o componente que dá voz à empresa logo depois do hero, e que a ficha dele descreve como "fala, não rótulo". Este é peça gráfica: uma faixa sem colunas, sem aspas, sem autor e sem destino, em --display caixa alta, com imagem dentro da linha, ocupando menos da metade do respiro de uma seção. Os dois têm papéis opostos na página (um é dobra de abertura, o outro é emenda entre dobras), tipografias opostas e mecanismos de reveal incompatíveis — e podem conviver na mesma página sem se repetir. Fundir os dois obrigaria o resultado a escolher um dos dois papéis.

Histórico

Origem. Escrito do zero a partir da observação da faixa de manifesto de kirvano.com — site em Tailwind, sem licença declarada, com fonte de terceiro. Nada foi copiado (§11): o que veio de lá foi a medida, lida no navegador a 1440×900 — seção com padding:61px 0 sobre #f1ece1; H2 de 36px/45px (=1.25) em caixa alta, peso 400, centralizado, cor #292929, três linhas separadas por <br>, cada palavra num span; imagens inline de 72×32 (=2.25:1) com border-radius:5.76px, vertical-align:middle, object-fit:cover, margin:0 8px, display:inline-block; hover de palavra com transition:color .15s e a cor definida por palavra, girando entre #D356DE, #392A86 e #003A35. Status externo: nunca rodou em produção nossa. O primeiro site que usar promove — e a ficha registra qual. A referência está registrada em projetos/referencias-externas.md.

Normalizações aplicadas na tradução:

• Cores cruas trocadas por token: fundo #f1ece1 e texto #292929 viraram o escopo .sec-light (--bg, --fg); as três cores de hover #D356DE / #392A86 / #003A35 viraram --accent, --accent-2 e --fg-muted, lidas por --frase-cor no style da palavra. Nenhum hex sobrou no componente.
• Medidas fixas viraram razão ou variável: 36px de corpo virou --frase-corpo em clamp(22px,3.1vw,46px) — calibrado pela fração da coluna (~69%) e não pelo número, porque o original roda numa display condensada; 45px de entrelinha virou a razão 1.25 em --display-xl-lh; 72×32 viraram 2em × .89em, presos ao corpo do texto; border-radius:5.76px virou --radius-media; margin:0 8px virou margin-inline:.22em, com .14em abaixo de 560px porque em corpo pequeno o mesmo vão abre um buraco visível no meio da frase.
• padding:61px 0 virou calc(var(--sec-gap) * .45) — derivado da fonte única do ritmo vertical (§4), não de um clamp solto.
• As seis linhas de título display gigante, que seriam a terceira cópia idêntica na biblioteca, foram promovidas à primitiva .display-xl do core (§6), com dois parafusos e nenhuma regra a sobrescrever. Este componente passou a consumi-la, e os outros dois foram ajustados junto.
• Entrada por data-rv/data-d do core, uma linha por vez, com fade + blur + subida — o original não anima esta faixa, e o §5 do contrato exige blur em toda entrada.
• Acessibilidade que não existia: imagens com alt="" e aria-hidden="true" (a frase lê inteira sem elas), decoding="async", loading="lazy" da segunda em diante, e cursor:default nas palavras para o ponteiro não sugerir clique nem seleção onde não há nenhum dos dois.

Divergências conhecidas vs. a referência:

• A fonte não atravessa. O original roda Inter Tight no texto e uma display condensada proprietária nesta faixa. Nenhuma das duas tem licença declarada e o §1 proíbe Google Fonts em produção, então o componente lê --display do tema. Consequência direta: o corpo tem de ser maior que os 36px do original para desenhar a mesma mancha — uma face de largura normal precisa de ~45px para encher os mesmos ~69% da coluna. Ao receber uma condensada licenciada, baixe --frase-corpo junto.
• Peso 700, não 400. A primitiva do core traz font-weight:700 e letter-spacing:-.02em; o original é peso 400 sem tracking negativo. Numa display condensada o peso leve ainda desenha um bloco denso; numa face de largura normal ele fica ralo. Mais afirmativo que o original, de propósito.
• O canto da imagem lê --radius-media do tema, não os 5.76px cravados do original. No tema kirvano isso dá 16px numa caixa de ~40px de altura — mais arredondado que a referência. Num tema flat (--radius-media:0, como o liberta-wealth) a foto fica de canto vivo e a faixa muda de caráter: fica mais dura e mais gráfica. As duas leituras são válidas; a escolha é do tema, como manda o §10.5.
• O preview roda no tema kirvano, não no tema padrão da biblioteca. Os outros previews saem em liberta-wealth, que pinta sage e canto vivo — e nele esta faixa fica com outra cara. O preview-tema.txt fixa o tema da referência justamente para que uma regeração geral no tema padrão não desmanche a comparação. Ao consumir num site real, o tema do cliente manda.
• O botão não existe aqui, e onde a referência tem botão a casa usa a primitiva. Esta faixa não tem CTA — mas vale registrar para quem clonar as dobras vizinhas: o botão menta border-radius:12px do original não atravessa em forma própria; ele vira .btn/.btn-primary do core, que lê --accent e --radius-pill do tema.
• As fotos são placeholders de showroom/demo/. O original usa três imagens próprias que não atravessam (§11). O enquadramento apertado e temático do original — objeto isolado, fundo neutro — lê melhor num quadro de 2.25:1 do que as paisagens do preview. Com os assets certos, a faixa fica mais próxima do original do que o preview sugere.
• O texto do preview não é o da Kirvano. A estrutura sintática ("X vira Y, Z vira W, e a marca cuida do todo") é a mesma porque é ela que faz a faixa funcionar; o conteúdo é da casa.
• grayscale(.35) não existe no original. Lá as três imagens entram cruas — e lá isso funciona porque são objetos isolados em fundo neutro. Com foto de ambiente, que é o caso mais provável no consumo real, o dessaturado parcial é o que mantém a foto subordinada ao texto.