Grade de três cards em retrato. Número, título e frase ficam dentro da imagem, ancorados embaixo, sobre um gradiente escuro mais um véu desfocado com máscara. A foto ganha cor e escala levemente no hover. Sem script próprio.
É o padrão da casa para card de mídia: legenda embutida, nunca parágrafo abaixo da foto.
Quando usar
- Valores, pilares, diferenciais — 3 itens conceituais que ganham força com imagem.
- Quando existem 3 fotos editoriais boas e equivalentes em peso.
Quando não usar
- Sem foto à altura. Aqui a imagem é 100% do card; foto fraca não tem onde se esconder.
- Para serviços com descrição longa.
.pil-texttem 34ch — se o texto não couber, o componente certo élistas/leque-paineis. - Com 2 itens (a grade fica desequilibrada) ou 5+ (vira galeria).
Padrão editorial
| Slot | Regra |
|---|---|
.pil-num |
01, 02, 03. Sequência, sem pular. |
.pil-title |
1 palavra, substantivo abstrato: "Liberdade", "Propriedade", "Vida". Duas palavras já quebram a linha e desalinham os três cards. |
.pil-text |
1 frase, 18 a 26 palavras, teto de 34ch. Traduz o abstrato em prática concreta. |
Os três títulos precisam ser do mesmo tipo gramatical e de tamanho parecido. "Liberdade / Propriedade / Vida" funciona; "Liberdade / Nosso jeito de proteger / Vida" não.
Especificação das imagens
- Retrato, mínimo 1200×1700. A proporção do card é 3 : 4,15.
- Até 300 KB cada — são três fotos na mesma dobra.
- Entram em
grayscale(.55) brightness(.72): escolha por composição e luz, não por cor. - O terço inferior é coberto por scrim e véu. Nada de importante ali: nem rosto, nem horizonte, nem detalhe que justifique a foto.
- O enquadramento vai por variável no
styledo card, não por atributo:style="--pil-pos:32% 50%; --pil-pos-mob:32% 18%"
Como usar
<link rel="stylesheet" href="componentes/conteudo/pilares-texto-na-foto/estilo.css">
Variações
- Sem numeração — apague
.pil-num. - Quatro colunas —
repeat(4,1fr)easpect-ratio:3/4.6. Cards mais estreitos e altos; teste o título de 1 palavra antes. Ainda não rodou em produção.
Gotchas
- A ordem das camadas é a receita.
img→scrim(gradiente) →veil(blur mascarado) →lab(texto). Um sem o outro não resolve: só gradiente deixa o texto sobre textura; só blur deixa claro demais em foto clara. isolation:isolateno card cria contexto de empilhamento próprio, senão obackdrop-filterdo véu puxa pixel dos cards vizinhos.- O véu precisa da
mask-image. Sem ela vira faixa chapada com linha dura contra a parte nítida da foto. will-change:transformna imagem, não no card. No card ele promoveria a camada inteira, blur incluso, e o custo de composição triplica.- O enquadramento mobile é outro. No desktop os cards são altos e estreitos; no mobile ficam largos e baixos, então o corte muda de eixo. É para isso que existe
--pil-pos-mob.
Histórico
| Projeto | Onde | Data | Diferenças |
|---|---|---|---|
| Liberta Wealth | index.html, .pillars dentro de #manifesto |
2026-08 | Origem. .pillars/.pil e internas sem prefixo (.n, .pil-lab h3), border-radius:10px cravado, enquadramento por style="object-position:…" inline no <img> e três regras .pil:nth-of-type(n) img{…!important} no media query mobile. |
Normalizações aplicadas na extração: prefixo em tudo; seletores de elemento (h3, p) → .pil-title / .pil-text; raio cravado → --radius-media; gradiente rgba(6,6,6,…) → --dark-rgb; sage cru → --accent; os três !important com nth-of-type sumiram — o enquadramento virou --pil-pos / --pil-pos-mob por card, o que também elimina o acoplamento entre a ordem dos cards e o CSS; adicionado prefers-reduced-motion.