Lista de serviços como painéis de foto lado a lado. O ativo ocupa ~3,4× a largura dos outros e revela título grande e descrição; os fechados mostram só o número e o título girado na vertical. Hover, clique, foco ou seta trocam o painel aberto.
Resolve o problema clássico de "5 serviços, 5 cards iguais, nenhum lido": aqui só um bloco de texto existe por vez, então o olho tem um destino.
Quando usar
- 4 a 6 serviços, soluções ou verticais de atuação — cada um com foto própria.
- Quando as descrições são curtas e equivalentes em peso (nenhum item é o principal).
- Seção de meio de página, depois que o visitante já sabe quem é a empresa.
Quando não usar
- Menos de 4 itens. Sobra largura, os painéis fechados ficam gordos e o efeito de leque some.
- Mais de 6. O painel fechado fica estreito demais para o título vertical, que passa a truncar.
- Itens com texto longo ou com sub-listas — o
.fan-fulltem 440px fixos. - Quando os itens precisam ser comparados lado a lado (preço, plano, pacote). Leque esconde; comparação exige mostrar tudo junto.
- Se não houver foto boa para cada item. Painel com foto fraca destrói a fileira inteira.
Padrão editorial
| Slot | Regra |
|---|---|
| Olho | 2 a 4 palavras: "O que oferecemos", "Nossas frentes". |
| Título da seção | 1 linha com uma palavra em <em>. |
.fan-num |
Sequência 01…05. Não pule número, não use ícone no lugar. |
.fan-vert |
Nome do serviço, 2 a 3 palavras, quebrado com <br> em até 2 linhas. É o rótulo do painel fechado — se não couber na vertical, o nome é longo demais. |
.fan-title |
Repete o nome do serviço por extenso, sem <br>. |
.fan-text |
1 frase, 18 a 30 palavras, teto de 40ch de largura. Diz o benefício, não o processo. |
Consistência é o que sustenta o efeito. Se um item tem 12 palavras e outro tem 40, a troca de painel fica desigual. Escreva os cinco textos juntos, no mesmo fôlego.
Especificação das imagens
- Retrato ou quadrada, mínimo 1200×1600. O painel fechado é estreito e alto.
- Assunto centralizado na horizontal — as bordas são cortadas quando o painel fecha.
- Até 250 KB cada. São 5 a 6 fotos na mesma dobra.
- Já entram em
grayscale(1) brightness(.45): a cor só aparece parcialmente no painel aberto. Escolha fotos com contraste de forma, não de cor.
Como usar
<link rel="stylesheet" href="componentes/listas/leque-paineis/estilo.css">
<script src="componentes/listas/leque-paineis/script.js"></script>
O script varre [data-fan], então mais de um leque na mesma página funciona sem conflito.
Ganchos
| Gancho | Papel |
|---|---|
[data-fan] |
raiz do leque |
.fan-panel.is-open |
painel ativo — marque um no HTML |
tabindex="0" no painel |
obrigatório: é o que dá navegação por teclado |
Variações
- Proporção da abertura —
flex:3.4no.is-open. Com 4 painéis,4.2fica melhor; com 6,3. - Sem numeração — apague
.fan-num. Funciona, mas perde a leitura de "conjunto ordenado". - Canto arredondado — vem de
--radius-media, do tema. Projeto flat entrega 0.
Gotchas
.fan-fulltem largura fixa (min(440px,84vw)), não porcentagem. Com porcentagem o texto reflui enquanto o painel encolhe e a saída fica sanfonada. Não "conserte" isso.- A saída é rápida e a entrada é atrasada (
.18scontra.5s .22s). É proposital: o texto antigo tem que sumir antes de o novo chegar, senão os dois se sobrepõem no meio da transição. - O véu precisa da máscara em gradiente.
backdrop-filterem caixa reta corta a foto no meio com borda dura. Amask-imageestá no CSS — se sumir, o painel lê "chapado". - O leque é uma ilha escura. O texto interno é branco fixo, não
--fg. Ele pode viver dentro de uma seção.sec-paperclara sem virar texto escuro sobre foto escura. height:min(62vh,520px)— em notebook de 768px de altura o leque ocupa 62% da tela e ainda sobra respiro. Não troque porvhpuro: em monitor 4K vira uma parede.- Hover abre no mobile também, via o
click. Não há estado "nenhum aberto" — por design.
Histórico
| Projeto | Onde | Data | Diferenças |
|---|---|---|---|
| Liberta Wealth | index.html #solucoes |
2026-08 | Origem. Classes internas sem prefixo (.veil, .n, .vert, .full), .open em vez de .is-open, sem acesso por teclado, border-radius:10px cravado. |
Normalizações aplicadas na extração: prefixo em todas as classes internas; .open → .is-open (evita colidir com acordeão e drawer); raio cravado → --radius-media; escurecimento passou a ler --dark-rgb; sage cru → --accent; adicionado tabindex, :focus-visible, navegação por setas e Enter/Espaço; script passou a partir de [data-fan] em vez de .fan global, para suportar múltiplos leques.
Divergência conhecida vs. produção: a Liberta Wealth rodou com border-radius:10px nos painéis, o que contraria a regra flat de canto vivo do próprio projeto. Aqui o valor vem do tema (--radius-media:0). Se for sincronizar a biblioteca de volta para o site, essa é uma mudança visual real — decida antes.