Três pilares com o texto dentro da foto

<section class="sec-dark sec-pad" id="pilares"> <div class="wrap"> <span class="eyebrow" data-rv>No que acreditamos</span> <h2 class="sec-title ttl">Três pilares que sustentam cada <em>decisão</em></h2> <div class="pil-grid"> <article class="pil-card" data-rv style="--pil-pos:32% 50%;--pil-pos-mob:32% 18%"> <img class="pil-img" src="../../../showroom/demo/ph-7.webp" alt="Reunião de quatro pessoas em sala de vidro"> <div class="pil-scrim"></div> <div class="pil-veil"></div> <div class="pil-lab"> <span class="pil-num">01</span> <h3 class="pil-title">Liberdade</h3> <p class="pil-text">Independência total, sem vínculos com bancos ou corretoras. Nossas recomendações respondem apenas aos seus interesses.</p> </div> </article> <article class="pil-card" data-rv data-d="1" style="--pil-pos:64% 50%;--pil-pos-mob:64% 18%"> <img class="pil-img" src="../../../showroom/demo/ph-2.webp" alt="Família caminhando por alameda arborizada"> <div class="pil-scrim"></div> <div class="pil-veil"></div> <div class="pil-lab"> <span class="pil-num">02</span> <h3 class="pil-title">Propriedade</h3> <p class="pil-text">Estruturamos e protegemos o que você construiu, com estratégias de alocação, sucessão e blindagem patrimonial sob medida.</p> </div> </article> <article class="pil-card" data-rv data-d="2" style="--pil-pos:44% 46%;--pil-pos-mob:44% 12%"> <img class="pil-img" src="../../../showroom/demo/ph-5.webp" alt="Homem mais velho e criança lendo um livro à mesa"> <div class="pil-scrim"></div> <div class="pil-veil"></div> <div class="pil-lab"> <span class="pil-num">03</span> <h3 class="pil-title">Vida</h3> <p class="pil-text">Cada decisão de investimento existe para servir seus objetivos de vida — presente e futuro — e o legado da sua família.</p> </div> </article> </div> </div> </section>

/* ========================================================================== PILARES — três cards com o texto DENTRO da foto Prefixo: pil- Tokens usados: --accent --dark --dark-rgb --display --radius-media --ease Card de mídia com legenda embutida. A ordem das camadas importa: img -> scrim (gradiente) -> veil (blur mascarado) -> lab (texto) O scrim garante contraste sempre; o veil separa o texto do detalhe da foto. Um sem o outro não resolve: só gradiente deixa o texto sobre textura, só blur deixa claro demais em foto clara. ========================================================================== */ .pil-grid{ display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.4vw,18px);margin-top:clamp(44px,7vh,72px); } /* isolation:isolate cria contexto de empilhamento próprio: o blur do veil não vaza para os cards vizinhos. */ .pil-card{ position:relative;overflow:hidden;isolation:isolate; border-radius:var(--radius-media); aspect-ratio:3/4.15; } .pil-img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:var(--pil-pos,50% 50%); filter:grayscale(.55) brightness(.72); transition:filter 1.1s var(--ease); } /* HOVER NÃO MEXE NA IMAGEM (CLAUDE.md §6, regra de 2026-09-29). O zoom de foto sob o ponteiro saiu: escala e deslocamento de mídia no hover mexem em recorte e composição, e é o que quebra a página quando o componente é colado noutro lugar. O retorno ficou em cor e brilho, que não mudam a geometria de nada. */ .pil-card:hover .pil-img{filter:grayscale(.1) brightness(.82)} .pil-scrim{ position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(to top, rgba(var(--dark-rgb),.92) 0%, rgba(var(--dark-rgb),.7) 24%, rgba(var(--dark-rgb),.26) 52%, transparent 74%); } /* Véu desfocado COM máscara em degradê. Sem a máscara vira faixa chapada com linha dura contra a parte nítida da foto. */ .pil-veil{ position:absolute;left:0;right:0;bottom:0;height:62%;z-index:1;pointer-events:none; backdrop-filter:blur(9px) saturate(1.12); -webkit-backdrop-filter:blur(9px) saturate(1.12); -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.92) 40%,transparent 100%); mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.92) 40%,transparent 100%); } .pil-lab{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(20px,2.4vw,30px)} .pil-num{font-size:11px;letter-spacing:.18em;color:var(--accent)} /* O texto vive dentro da foto escura, entao e' claro sempre -- nao segue o escopo de tom da secao, que pode ser clara. */ .pil-title{ font-family:var(--display);font-weight:700;font-size:clamp(19px,2.1vw,25px); letter-spacing:-.025em;color:var(--light);margin:10px 0 0; } .pil-text{font-size:14px;line-height:1.7; color:color-mix(in srgb,var(--light) 86%,transparent);margin-top:10px;max-width:34ch} /* No mobile os cards empilham e ficam largos e baixos: o corte da foto muda de eixo, por isso o --pil-pos-mob. */ @media(max-width:860px){ .pil-grid{grid-template-columns:1fr} .pil-card{aspect-ratio:4/3.2} .pil-img{object-position:var(--pil-pos-mob,var(--pil-pos,50% 30%))} } @media(prefers-reduced-motion:reduce){ .pil-img{transition:none} }

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-text tem 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 style do 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) e aspect-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:isolate no card cria contexto de empilhamento próprio, senão o backdrop-filter do 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:transform na 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.