Trio de cards com interface simulada

Um cabeçalho assimétrico — título e botão pesando à esquerda, um parágrafo de apoio à direita — e embaixo três cards altos de mesma altura. O que faz a dobra não é a grade: é o que está dentro de cada card. Um traz uma fila de classes de ativo que sobe sozinha, um item a cada dois segundos, cortada pelo rodapé do quadro como se a lista continuasse para fora dele. Outro traz uma foto encostada no pé do card e, flutuando por cima, pílulas de valor que se revezam. O terceiro é um card claro dentro da dobra escura, com seletor de período e um gráfico de seis barras que se recalcula a cada troca.

Resolve a dobra de "o que a casa faz" sem lista de ícone e frase, que é o formato padrão e o que ninguém lê. A diferença é de prova: um card que afirma ser multicustódia pede confiança; um card que mostra nove classes de ativo passando, uma por vez, entrega a mesma informação já demonstrada. É caro de montar e por isso não serve para qualquer recurso — serve para os dois ou três que decidem a conversa.

Quando usar

• Página de assessoria, de produto ou de plataforma, logo depois do hero, quando existem exatamente três frentes que carregam o argumento.
• Quando cada um desses três tem uma interface reconhecível: uma lista, um valor, um gráfico, um estado. Recurso que não tem tela não tem o que mostrar aqui.
• Quando o texto de cada card cabe em duas linhas de título e três de apoio. A peça de interface ocupa a metade de baixo do card e não abre mão dela.

Quando não usar

• Mais de três recursos, ou recursos de pesos diferentes. Com quatro a grade quebra em duas linhas e o desenho perde a cadência; com um forte e dois fracos, os dois fracos denunciam o forte.
• Quando a interface do produto ainda não existe. Simular uma tela que não foi desenhada é comprar dívida: a dobra vira a especificação, e alguém vai ter que construir aquilo.
• Quando os recursos pedem texto longo ou lista de itens. Nesse caso conteudo/pilares-texto-na-foto resolve com foto e legenda, e conteudo/imagem-lista-numerada resolve com lista.
• Como grade de números ou indicadores. O gráfico do card 3 é ilustração de produto, não visualização de dado — para dado de verdade, prova/stats-contador-regua.

Padrão editorial

O que mantém a dobra coesa é o paralelismo dos três títulos: mesmo comprimento, mesma forma de frase, mesmo tempo verbal. Se um deles for uma pergunta e os outros dois afirmações, a grade desmancha antes de o olho chegar às peças de interface.

Compliance

Nenhum número desta peça é de resultado. Os três valores do card de relatório são de estoque e de estrutura — patrimônio sob assessoria, parcela com liquidez, número de classes na carteira. Rentabilidade, ganho no período e comparação com índice não entram, e a regra não é de redação: é a mesma que o irmão conteudo/lista-beneficios-palco declara com estas palavras. As duas peças são interface simulada na mesma voz de assessoria, e uma tela inventada que mostra rentabilidade é a forma mais convincente de insinuar retorno — justamente porque parece um extrato.

Até 2026-09-08 este card mostrava "+R$ 620 mil de resultado no trimestre" e "14,6% de retorno em 12 meses". A divergência só apareceu quando os dois componentes foram descritos no mesmo vocabulário editorial, lado a lado.

Antes de publicar: trocar os três números por dados do cliente, mantendo a natureza (estoque, não resultado), e conferir com a área técnica dele. Os valores do markup são ilustrativos e estão marcados como tal em comentário.

Especificação dos assets

O único asset real é a foto do card 2. Ícones e gráfico são SVG e CSS, desenhados aqui.

• Formato e dimensão mínima: retrato, 900×1200, WebP. O recorte final é 230×240 — quase quadrado.
• Peso alvo: até 140 KB. É uma foto só, mas ela carrega junto com o resto da dobra.
• Composição / enquadramento: assunto na metade inferior do quadro. As pílulas flutuam sobre os primeiros ~115px dos 240 do recorte — que, com o object-fit:cover de um retrato 900×1200, correspondem a mais ou menos 22% a 48% da altura do arquivo original. Rosto ali fica coberto.
• O que não pode ter: texto embutido, interface de outro produto, marca de terceiro, logotipo de instituição financeira. Os ícones da fila do card 1 são desenhados a mão em SVG genérico exatamente por isso — logo de banco ou de corretora é marca registrada e não atravessa (contrato §11).

Como usar

<link rel="stylesheet" href="componentes/conteudo/trio-cards-ui-simulada/estilo.css">
<script src="componentes/conteudo/trio-cards-ui-simulada/script.js"></script>

O card 3 precisa da classe de escopo sec-light nele mesmo, junto de trio-card-c. Sem ela, o texto de dentro lê o --fg da seção — que numa dobra escura é claro — e some no fundo areia. Nenhuma regra do componente escreve cor de texto: quem faz o par é o escopo.

Ganchos

Variações

• dois cards — apague um <article> e troque repeat(3,1fr) por repeat(2,1fr). As peças são independentes; o script só não encontra o gancho que sumiu.
• em dobra clara — .sec-light na seção. Cabeçalho e textos seguem sozinhos, mas as superfícies dos cards 1 e 2 são branco sobre escuro e sumiriam: repense --glass-bg e --trio-surface-2 no tema antes.
• sem rodízio — não carregue o script.js. Os três cards ficam no primeiro estado, que o markup já traz; nesse caso troque os <button> do card 3 por <span>, para não deixar botão morto na tela.
• período manual — --trio-periodo-hold:60s e o card 3 vira um seletor comum, que só troca quando alguém clica.

Gotchas

• Os três intervalos estão no CSS, não no JS. São lidos com getPropertyValue na inicialização, o que traz duas consequências: o valor tem de estar em segundos (1.9s; um 1900ms no tema faria a fila trocar de item a cada meia hora), e mexer na variável depois que a página carregou não tem efeito — o script leu uma vez.
• O card 1 usa a primitiva .glass com o desfoque zerado. Parece contradição e não é. Da primitiva se quer o brilho radial vindo do topo e a borda tênue — que é exatamente o que a referência tem, e que seria a terceira cópia da mesma regra se fosse reescrita aqui. Já o --glass-bg vira --dark-2, uma superfície opaca, e sobre superfície opaca não existe fundo para desfocar: --glass-blur:0px só evita pagar por uma camada de composição que ninguém vê. Trocar --glass-bg de volta para o translúcido padrão faz o card ficar refém do tom da seção atrás dele.
• A altura das barras mora no markup, não no script. Cada barra carrega os três valores como --trio-h-a/b/c no próprio style, e trocar de período é trocar uma classe no gráfico. É o que faz o card 3 nascer correto no período 7d mesmo sem JavaScript, e é o que permite editar um número sem abrir o script.
• O botão de período continua clicável com movimento reduzido. O rodízio automático não liga, mas o clique liga — botão que ignora o clique é defeito, não acessibilidade. A troca acontece sem transição, porque o @media(prefers-reduced-motion) do estilo desliga as transições da dobra inteira.
• Clicar num período desliga o rodízio para sempre. De propósito: um seletor que volta a girar sozinho três segundos depois de ser clicado é um seletor que ninguém consegue usar. Não há como religar sem recarregar a página, e não deveria haver.
• A fila do card 1 é duplicada inteira, e não só o tanto que cabe. Clonar "o que cabe na janela" obrigaria a recontar as cópias toda vez que a altura do painel ou da linha mudasse. Com a fila inteira duplicada, a volta do laço é uma identidade geométrica: a posição n = 9 desenha exatamente o mesmo que a posição 0, e o script salta de uma para a outra sem transição e sem ninguém ver. As cópias saem com aria-hidden — o leitor de tela ouve nove classes de ativo, não dezoito.
• O painel do card 1 não tem borda embaixo. A aresta dele coincide com a aresta do card, e a borda apareceria como um risco de 1px atravessando o canto arredondado.
• Os três resultados do card 3 levam visibility, além de opacidade. Sem ela, o leitor de tela leria os três valores em sequência — "R$ 18,4 mi, +R$ 620 mil, 14,6%" — como se fossem uma lista. O atraso de 0s na saída é o que segura a visibilidade até a fusão terminar.
• A dobra parada fora da tela é de propósito. O IntersectionObserver desliga o laço quando a seção sai de vista, e ao religar zera as marcas de tempo: quem rola de volta reencontra as peças onde deixou, e não os três rodízios disparando ao mesmo tempo por causa do tempo acumulado.
• min-height, e não height, nos cards. As peças de interface são ancoradas por margin-top:auto e não por posicionamento absoluto — assim, se um parágrafo crescer, o card cresce junto e o texto nunca corre por baixo do painel. O preço é que os três cards ficam sempre da altura do mais alto, o que aqui é o comportamento desejado.

Histórico

O que foi medido na referência (navegador, 1440×900): seção com padding:120px 0 21px e coluna interna de 1136; cabeçalho em flex space-between com gap:64, caixa esquerda de 480 (título de duas linhas + 32 + CTA de 199×56) e parágrafo direito de 520 a 18px; grade de três colunas de 359 com gap:30, cards de 520 de altura e raio 24. Card 1: fundo #161616 mais radial-gradient(at 31% -7%, …), padding:48px 24px 0, painel de métodos de 319×240 ancorado no rodapé com raio 16 só em cima, linhas de 293×56 com gap:8, ícone de 36×36, rotação de um item a cada 1.9s sobre nove itens. Card 2: fundo #262626, chips de 24 de altura, foto de 64% × 240 no rodapé, duas pílulas claras de 30–32 de altura com bolinha menta de 20×20, rotador vertical de três posições a cada 2.5s. Card 3: fundo #d0c9b9 com texto escuro, seletor de 127×32 com três botões de 24, gráfico de seis barras de 45 com alturas 56/27/122/61/150/37 sobre 170 e preenchimento hachurado 6px menor, rodapé com valor de 32px, ciclo de 4.26s na ordem 7d → 30d → 12m.

Normalizações aplicadas na tradução:

• Prefixo trio- em tudo. Nenhuma classe solta.
• Toda cor virou token. #161616 é --dark-2; #d0c9b9 é --accent-2 (o tema kirvano já o descreve como "superfície de card claro dentro de dobra escura"); #262626 virou --trio-surface-2, um color-mix de 7% de --light sobre --dark-2 que devolve exatamente aquele valor e continua certo em qualquer outro tema. Os brancos com alfa da referência viraram color-mix sobre --light, e os pretos com alfa, sobre --dark.
• O raio de 24 do card saiu de calc(var(--radius-media) * 1.5). Num projeto flat o card fica reto, que é o comportamento certo: quem decide a forma é o tema, não o componente.
• O fundo do card 1 virou a primitiva .glass do core, com os parafusos dela trocados, em vez de uma segunda cópia da mesma regra (§6).
• O título da dobra é h2.sec-title do core; o botão é .btn + .btn-primary. Nenhum dos dois foi reescrito.
• A entrada, que na referência é um translateY seco, virou data-rv + data-d do core — com o blur que o §5 exige.
• Os nove meios de pagamento da referência viraram nove classes de ativo, com ícones desenhados em SVG na hora. Nenhuma marca de terceiro atravessou.
• Fonte, fotos e ícones da referência não atravessaram. O preview usa showroom/demo/ph-5.webp.
• O leitor de tela recebeu tratamento que o original não tem: aria-label na fila, aria-hidden nas cópias, aria-pressed nos botões de período e visibility nos resultados fora de cena.

Divergências conhecidas vs. a referência medida:

• Respiro da seção. A referência usa 120px 0 21px — quase cola esta dobra na seguinte, que tem 96 de respiro próprio. Aqui é .sec-pad, o ritmo único da biblioteca, e portanto simétrico. O §4 do contrato não deixa inventar clamp solto para separar seção.
• Corpo do título da dobra. A referência roda ~32px; h2.sec-title do core roda até 40px. A caixa de 480 e as duas linhas se mantêm; o bloco fica um pouco mais alto.
• Botão. A referência tem 199×56 em caixa baixa de 16px; o .btn da biblioteca é pílula de 11.5px em caixa alta e sai mais baixo. Corrigir isso seria reescrever o botão, que o contrato não permite — é ajuste de tema, se um dia for preciso.
• Direção da pílula que sai (card 2). A medição descreve a anterior descendo e apagando enquanto a nova sobe. Foi reproduzido literalmente: o rotador tem três posições — destaque, próxima e uma terceira fora de cena, mais abaixo — e o ciclo é destaque → fora → próxima → destaque. Quem sai desce até a posição de fora e apaga no caminho; quem entra sobe de lá, acende e assume o destaque. É o que fecha o ciclo sem que ninguém atravesse ninguém.
• Alturas das barras nos períodos 30d e 12m. Só o conjunto de 7d foi medido (56/27/122/61/150/37). Os outros dois foram inventados com a mesma lógica: seis valores irregulares, o último sempre no topo da caixa, para o gráfico nunca parecer vazio.
• Hachura das barras. A referência não registrou a cor do preenchimento interno. Aqui ele é --accent a 34% sobre a barra escura — o que amarra o gráfico à cor de ação do projeto em vez de inventar um cinza.
• Botões de período funcionam. Na referência o seletor só cicla sozinho. Aqui ele também responde ao clique, e o clique desliga o rodízio. Três <button> que ignoram o clique seriam um defeito de acessibilidade herdado sem necessidade.
• Apoio dos cards 1 e 2. A referência apaga o parágrafo com opacity:.4 sobre o título claro, o que devolve pouco mais de 3:1 de contraste. Aqui ele lê --fg-muted, o tom de apoio do escopo, que no par escuro passa de 5:1. O peso visual é quase o mesmo e o texto deixa de ser um problema de acessibilidade herdado — além de acompanhar o tema, que opacity não faria.
• Corpo do título do card 3. A referência mede a caixa dele em 171×90, três linhas de 30 — leitura mais apertada que a dos cards 1 e 2, que rodam 30/37.5. Aqui os três títulos usam a MESMA regra (.trio-card-title), porque três escalas de título dentro de uma grade de três cards é o tipo de diferença que ninguém consegue justificar depois. O bloco do card 3 sai alguns pixels mais alto que na referência; a folga do card absorve.
• Borda do card 1. A referência mede só fundo e brilho radial, sem borda. A primitiva .glass traz a borda tênue junto — é parte do desenho dela, e separá-la custaria uma segunda regra de fundo só para este card. Fica, atenuada a 6% de --light.