Equipe com pessoa em destaque e grade · Biblioteca de seções

<section class="sec-dark sec-pad" id="equipe"> <div class="wrap"> <div class="sec-head team-head"> <span class="eyebrow" data-rv>Nossa equipe</span> <h2 class="sec-title ttl">Quem responde pelo seu patrimônio</h2> <p class="sec-lead" data-rv data-d="1">Assessores certificados, com carreira nas mesas que hoje eles negociam do outro lado.</p> </div> <article class="glass team-feat" data-rv data-d="2"> <div class="team-avatar">RM</div> <div> <span class="pill pill-accent team-tag">Conselho consultivo</span> <h3 class="team-name">Ricardo Menezes</h3> <p class="team-role">Sócio-fundador e head de wealth planning</p> <p class="team-bio">Vinte e dois anos de mercado, doze deles na mesa de private de um banco grande. Saiu para montar a Liberta com uma tese simples: assessoria que recebe do cliente, não da instituição. CFP e mestrado em finanças pela FGV.</p> </div> </article> <div class="team-grid"> <article class="glass glass-hover team-card" data-rv> <div class="team-avatar">CF</div> <h4 class="team-name">Carolina Fontes</h4> <p class="team-role">Estrategista de portfólio</p> <p class="team-bio">CFP, quinze anos em renda fixa e crédito privado. Responde pela tese de carteira e pelo comitê trimestral de investimentos.</p> </article> <article class="glass glass-hover team-card" data-rv data-d="1"> <div class="team-avatar">TB</div> <h4 class="team-name">Thiago Barreto</h4> <p class="team-role">Planejamento sucessório</p> <p class="team-bio">Advogado tributarista, especialista em holding familiar e sucessão. Conduz a estruturação jurídica junto ao escritório do cliente.</p> </article> <article class="glass glass-hover team-card" data-rv data-d="2"> <div class="team-avatar">JA</div> <h4 class="team-name">Juliana Arruda</h4> <p class="team-role">Estruturas internacionais</p> <p class="team-bio">CGA, veio da área internacional de uma gestora. Cuida das estruturas offshore e da exposição em moeda forte.</p> </article> </div> </div> </section>

/* ========================================================================== EQUIPE — destaque + grade de pessoas Prefixo: team- Tokens usados: --fg --fg-2 --fg-muted --rule-2 --accent --accent-2 --display Primitiva usada: .glass / .glass-hover (core/base.css) ========================================================================== */ /* Só o ajuste de largura: o resto — inclusive a centralização dos filhos vem do .sec-head do core (desde 2026-09-29) — vem da primitiva. */ .team-head{--head-max:640px} /* --- placeholder de iniciais --- Existe para o layout ficar de pé antes de as fotos reais chegarem. Gradiente nas duas cores de marca: cinza morto parece bug, isto parece decisão. Chegando as fotos, troque a <div> por <img class="team-avatar"> e nada mais muda. */ .team-avatar{ width:100%;aspect-ratio:1;border-radius:10px; display:flex;align-items:center;justify-content:center; object-fit:cover; background:linear-gradient(150deg, color-mix(in srgb,var(--accent) 16%,transparent), color-mix(in srgb,var(--accent-2) 10%,transparent)); border:1px solid var(--glass-line,color-mix(in srgb,var(--fg) 10%,transparent)); font-family:var(--display);font-weight:700;color:var(--accent);letter-spacing:-.02em; } /* --- pessoa em destaque --- */ .team-feat{ margin-top:clamp(38px,6vh,60px); display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr); gap:clamp(28px,4vw,56px);align-items:center; border-radius:16px;padding:clamp(24px,3vw,40px); } .team-feat .team-avatar{font-size:clamp(40px,5vw,64px)} /* Só o respiro: a pílula vem de .pill .pill-accent do core. */ .team-tag{margin-bottom:16px} .team-feat .team-name{ font-family:var(--display);font-weight:700;font-size:clamp(24px,2.8vw,32px); letter-spacing:-.025em;color:var(--fg); } .team-feat .team-role{font-size:14px;color:var(--fg-muted);margin-top:6px} .team-feat .team-bio{font-size:16px;line-height:1.6;color:var(--fg-2);margin-top:16px;max-width:62ch} /* --- grade --- */ .team-grid{ margin-top:clamp(20px,3vh,32px); display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,28px); } .team-card{border-radius:14px;padding:clamp(18px,1.8vw,24px);--glass-bg:color-mix(in srgb,var(--fg) 4%,transparent)} .team-card .team-avatar{font-size:clamp(22px,2.4vw,28px)} .team-card .team-name{ font-family:var(--display);font-weight:700;font-size:17px; letter-spacing:-.02em;color:var(--fg);margin-top:16px; } .team-card .team-role{font-size:12.5px;color:var(--accent);margin-top:4px} .team-card .team-bio{font-size:14px;line-height:1.65;color:var(--fg-2);margin-top:12px} @media(max-width:900px){.team-grid{grid-template-columns:1fr 1fr}} @media(max-width:700px){ .team-feat{grid-template-columns:1fr} .team-feat .team-avatar{max-width:200px;margin-inline:auto} } @media(max-width:560px){.team-grid{grid-template-columns:1fr}}

Cabeçalho centralizado, uma pessoa em destaque num card largo de vidro, e o restante do time numa grade de três colunas. O avatar é um placeholder de iniciais em gradiente de marca — some assim que as fotos reais chegarem.

Quando usar

Página "Quem somos" de negócio onde a decisão de compra passa por confiança em pessoas: consultoria, advocacia, saúde, arquitetura.
Time de 4 a 15 pessoas.

Quando não usar

Time de 2 ou 3. Uma grade de três com um buraco parece empresa que perdeu gente. Use cards em linha ou o conteudo/imagem-lista-numerada.
Time acima de ~20: vira listagem, e listagem quer busca e filtro.
Quando não há bio real de cada um. Card com nome e cargo só é currículo, não prova.

Padrão editorial

Slot	Regra
`.team-tag`	Só no destaque. 2 a 3 palavras: o papel que justifica o destaque ("Comitê de Investimentos").
`.team-name`	Nome como a pessoa assina, certificação inclusa: "Matheus Gonzalez, CFP®".
`.team-role`	2 a 4 palavras. Cargo, não título acadêmico.
`.team-bio` no destaque	45 a 70 palavras, teto de 62ch.
`.team-bio` no card	30 a 45 palavras. Todas as bios da grade precisam caber em 4 a 5 linhas — desigualdade aqui deixa buraco visível entre cards.

Ordem: o destaque primeiro; depois o líder da área; depois o resto em ordem alfabética. Ordem por hierarquia inteira gera política interna; ordem alfabética depois do líder resolve.

Registro profissional entra na bio, não no cargo: "credenciado pela CVM (registro 2886-0)".

Especificação das fotos

Quadradas, mínimo 800×800, enquadramento de busto, fundo consistente entre todas.
Até 120 KB cada.
Foto de todo mundo ou de ninguém. Metade com foto e metade com iniciais é pior que só iniciais.

Como usar

<link rel="stylesheet" href="componentes/conteudo/grid-equipe/estilo.css">

O destaque leva class="glass team-feat"; os cards levam class="glass glass-hover team-card".

Trocar iniciais por foto

<img class="team-avatar" src="fotos/matheus.jpg" alt="Matheus Gonzalez">

A classe é a mesma. O aspect-ratio:1 e o object-fit:cover já estão nela — nada mais muda.

Variações

Sem destaque — apague .team-feat.
Grade de quatro — repeat(4,1fr); a bio cai para 2 linhas. Não rodou em produção.

Gotchas

O placeholder de iniciais é decisão, não gambiarra. Gradiente nas duas cores de marca; cinza chapado pareceria bug. Ele existe para o layout ficar de pé antes de as fotos chegarem — situação normal em projeto de cliente.
.team-card reduz --glass-bg para .04. São 3 a 12 cards na mesma dobra; no valor padrão a soma de vidro pesa e a seção fica leitosa.
Três breakpoints, não dois. 900px leva a grade a 2 colunas, 700px desmonta o destaque, 560px leva a grade a 1. O destaque quebra antes da grade porque o avatar dele é muito maior.
max-width:200px no avatar do destaque no mobile. Sem isso ele ocupa a largura inteira da tela e a pessoa vira outdoor.
A grade não tem align-items. Os cards esticam para a mesma altura da linha, o que só funciona porque as bios têm comprimento parecido — ver padrão editorial.

Histórico

Projeto	Onde	Data	Diferenças
Liberta Wealth	`quem-somos.html`, seção Equipe	2026-08	Origem. 1 destaque e 9 cards, todos com iniciais (fotos nunca chegaram). Nomes por seletor de elemento (`h3`, `h4`), estilo de vidro escrito duas vezes no componente, `rgba` de marca cravado no gradiente do avatar, `style="margin-inline:auto"` inline no olho.

Normalizações aplicadas na extração: prefixo em tudo; h3/h4 → .team-name; o vidro virou a primitiva .glass (eram mais duas cópias da regra); rgba(198,206,170,…) e rgba(175,146,116,…) do avatar → color-mix sobre --accent e --accent-2, para acompanhar qualquer tema; margin-inline inline foi para o CSS; object-fit:cover adicionado ao avatar para a troca por <img> funcionar sem editar CSS.