Vitrine com destaque comutável

Uma frente por vez, do tamanho de uma dobra. Em cima, o destaque: um card largo de duas colunas — à esquerda um número grande com o rótulo do que ele mede, a ressalva presa a ele, uma frase e três atributos com ícone de traço; à direita a foto sangrada, com a categoria e o título escritos dentro da imagem, ancorados no alto, sobre véu desfocado com máscara. No canto de baixo da foto gira o selo circular. Embaixo, a fileira de três a quatro escolhas — número, categoria, nome e frase curta —, e clicar numa delas troca o destaque: o conteúdo entra seco e só a foto atravessa, em 280ms.

O problema editorial que ela resolve não é "mostrar serviços": é dar tamanho de dobra a uma frente sem esconder as outras. Quatro frentes de assessoria em quatro colunas viram quatro cartõezinhos em que nenhuma tem foto, número nem espaço para uma frase inteira; quatro dobras empilhadas custam quatro rolagens e a quarta ninguém lê. A vitrine dá a uma delas a dobra inteira e deixa as outras três à vista como escolha, na mesma tela.

Compliance

O número grande é o ponto de compliance desta peça, e é ele que decide o que pode entrar. Um algarismo em corpo de 75px ao lado de uma foto de escritório é lido como afirmação, e num site de assessoria a afirmação mais perigosa é a de desempenho.

Se a área técnica do cliente pedir um número que é de resultado, a resposta não é amaciar o texto: é outro componente. Número apurado com fonte e data mora em dados/grade-indicadores; cotação com validade declarada, em dados/cards-cotacoes.

Quando usar

• Três ou quatro frentes de atuação que merecem uma dobra cada, mas não têm página própria (ou têm, e esta dobra é o convite).
• Quando cada frente tem foto editorial boa, um número estrutural e três compromissos que se escrevem em cinco palavras. Faltando qualquer um dos três nas quatro, o componente é outro.
• Depois do hero ou no meio da página, quando a proposta já está apresentada e o que falta é o escopo.
• Quando a página não pode crescer mais: a vitrine entrega quatro dobras de conteúdo em uma dobra de altura.
• Quando a ordem das frentes não é informação. Etapas que se leem em sequência pedem listas/linha-do-tempo-etapas.

Quando não usar

• Quando as frentes precisam ser COMPARADAS. Este é o corte que decide, e o irmão mais próximo é conversao/planos-honorarios: três colunas lado a lado, com as linhas equivalentes alinhadas na horizontal por subgrid. Ele ganha sempre que a pergunta for "qual destas é a minha?" — comparar exige tudo à vista, e uma aba por vez esconde três quartos da resposta. Esta vitrine ganha quando a pergunta for "o que tem dentro desta?": coluna comparável não tem largura para foto, número grande, frase e três atributos, e forçar isso nela produz três colunas que ninguém lê até o fim. Um detalhe do irmão vale como precedente e está registrado na ficha dele: a alternância dele é um grupo de radio e não um tablist, porque são dois conjuntos mutuamente exclusivos e não painéis de aba. Aqui é o contrário — cada painel é conteúdo próprio, navegável fora de ordem, que é exatamente a definição de aba.
• Com cinco ou mais frentes. A fileira de quatro cai para 2×2 no celular; cinco deixam uma célula órfã, e em desktop a quinta escolha desce para 200px de largura. Com cinco a oito frentes, listas/paineis-empilhados ou listas/leque-paineis.
• Com duas frentes. Duas abas são um interruptor, não uma vitrine — e aí o grupo de radio do conversao/planos-honorarios é o padrão certo.
• Sem foto. Metade do card é imagem sangrada. Quatro frentes só de texto são conteudo/grid-entidades ou a grade de serviços com ícone.
• Quando cada item é um link para outra página. Aqui o painel é o conteúdo, e nada dentro dele é focável. Conjunto fechado de quatro cards clicáveis é midia/grade-cases-foto.
• Acima da dobra. É peça de escopo; precisa de uma proposta antes.
• Duas vezes na mesma página. Funciona (o script renumera tudo), mas obriga a pessoa a aprender o mesmo gesto duas vezes. por_pagina: [1,1].

Contra os vizinhos

Padrão editorial

Quantidade: 3 ou 4 frentes. Quatro é o desenho de origem e o que fecha a fileira em 2×2 no celular.

As frases dos destaques no mesmo comprimento, e isso aqui é regra e não gosto. A peça não muda de altura entre uma aba e outra — quem garante isso é o visibility:hidden dos painéis, não a copy —, mas a dobra tem sempre a altura do maior painel. Uma frente com metade do texto das outras não desalinha nada: ela deixa um vão morto no pé da coluna e lê como frente de segunda classe. Medido com a copy do markup: frases de 184 a 196 caracteres, ressalvas de 105 a 141, e os quatro painéis fechando entre 517 e 537px a 1440 — os 20px de diferença vêm da ressalva do painel 2, que fecha em duas linhas em vez de três.

Especificação dos assets

São três ou quatro fotos, e nenhuma delas atravessa esta biblioteca (contrato §11). O preview usa ph-wide-2, ph-wide-1, ph-wide-4 e ph-wide-3 de showroom/demo/.

As fotos precisam ser do mesmo tratamento. Elas não aparecem lado a lado — aparecem uma no lugar da outra, e a troca é uma fusão de 280ms. Duas fotos de temperatura diferente fazem a fusão parecer um erro de renderização, e não uma travessia. O critério objetivo é o mesmo do midia/grade-cases-foto: luminância média dos arquivos dentro de uma faixa de 20 pontos.

Como usar

<link rel="stylesheet" href="componentes/efeitos/selo-circular/estilo.css">
<link rel="stylesheet" href="componentes/conteudo/vitrine-destaque/estilo.css">
<script src="componentes/conteudo/vitrine-destaque/script.js"></script>

A primeira folha é do componente composto: o selo do canto é o efeitos/selo-circular, e nada no estilo.css daqui redesenha o disco, o texto curvo ou a volta. No preview isso é declarado em preview-css.txt (MANUAL §8). Não existe preview-js.txt porque o selo é CSS puro — não há script dele para carregar. Tirando o selo (ver Variações), a primeira linha sai junto.

Ganchos

Parafusos

Variações

• Três frentes — apague uma escolha e o painel dela, troque repeat(4,…) por repeat(3,…) no .vit-fileira e a queda de 980px para uma coluna: três escolhas em duas colunas deixam uma célula órfã. Estável.
• Em dobra clara — .sec-paper no lugar de .sec-dark. Nenhuma linha de CSS muda; medido nos quatro escopos (tabela em Gotchas). Estável.
• Sem selo — apague o <span class="vit-selo"> e a folha do selo. Estável.
• Sem número — apague o .vit-cifra inteiro: número, rótulo e ressalva juntos. Ressalva sem número não tem o que ressalvar. Estável.
• Foto à esquerda — grid-column:1 no .vit-media e grid-column:2 no .vit-info. A ordem do DOM não muda, que é o que mantém a leitura de quem ouve. Experimental.
• Duas vitrines na mesma página — funciona: o script renumera ids, href, aria-controls, aria-labelledby e o arco do selo a partir da segunda cópia (medido: zero id duplicado no documento, e clicar numa não mexe na outra). Editorialmente caro. Experimental.

As duas rotas, e o que cada uma entrega

Com JavaScript é o padrão de abas do APG, inteiro. Medido no DOM: role="tablist" na fileira, role="tab" nas quatro escolhas com aria-selected numa só, role="tabpanel" nos quatro destaques com aria-labelledby apontando para a aba, aria-controls apontando para o painel, roving tabindex (0,-1,-1,-1 andando com a escolha) e tabindex="0" no painel visível — que o APG pede para painel sem nada focável dentro. ←/→ andam e trocam, com a fila circular; Home/End vão às pontas; o foco acompanha. Uma região aria-live="polite" anuncia a troca ("Sucessão, Holding, doação e testamento. Painel em exibição.").

Sem JavaScript a peça continua inteira, e isso foi medido com o JS desligado de verdade (--sem-js, que é quando o @media (scripting:none) do core casa): os quatro painéis visíveis e empilhados (topos em 421, 988, 1535 e 2103), o palco em opacity:1 e filter:none, as quatro escolhas na ordem de tabulação (tabIndex 0 nas quatro) e as quatro âncoras resolvendo — abrindo preview.html#vit-painel-3 a página para com o painel 3 no topo da janela, ao pixel.

Gotchas

• Os painéis inativos saem por visibility:hidden, e não por [hidden]. Parece o caminho errado e é o certo, por uma razão medida: com display:none a célula da grade tem a altura do painel visível, e os quatro não têm a mesma altura natural — 537px nos painéis 1, 3 e 4 e 517px no 2 a 1440, e 22px de diferença a 1024 (ali a diferença vem da frase, que ganha uma linha em dois dos quatro). A fileira de escolhas está logo abaixo do card: ela subia e descia debaixo do cursor de quem acabou de clicar. Com visibility os quatro continuam ocupando a célula, a dobra tem sempre a altura do maior, e a fileira não se move — medido, top da fileira em 1000px nas quatro abas. Não é opacity:0, e a diferença é toda: visibility:hidden tira o painel da árvore de acessibilidade e da ordem de foco; opacity:0 deixaria um bloco invisível e tabulável, a armadilha que o planos-honorarios já registrava. De quebra, o painel que entra já está com layout pronto e imagem rasterizada, e a fusão vira pintura e nada mais.

• As quatro fotos são eager, e isso não é descuido. Imagem com loading="lazy" dentro de display:none não é buscada, e na primeira troca a fusão atravessaria para um retângulo vazio. Medido antes da correção: três das quatro apareciam em imgsSemPintar no primeiro carregamento. Imagem eager dentro de conteúdo escondido, ao contrário, carrega normalmente. É o mesmo preço que o hero/slideshow-cinematico pagou pela mesma razão. (Com a troca para visibility o problema deixaria de existir sozinho — os painéis passaram a ter layout. As fotos ficam eager assim mesmo: é o que garante a peça de pé se alguém voltar a esconder painel por display.)

• Os papéis de aba estão no markup; o tabindex, não. Escrito à mão no HTML, o roving tabindex tiraria três das quatro escolhas da ordem de tabulação de quem está sem script — e aí a rota sem JavaScript, que é a razão de as escolhas serem <a href>, quebraria de verdade. O preço, declarado: sem script a fileira se anuncia como abas enquanto os quatro painéis estão todos visíveis, e o aria-selected descreve a intenção e não o estado. A alternativa era escrever role e aria por script e deixar o markup mudo sobre a própria estrutura.

• A ativação é automática nas setas, e não manual (seta move, Enter confirma). O APG permite quando mostrar o painel é barato, e aqui é: o conteúdo já está no DOM e a troca não busca nada. Ativação manual custaria um Enter a cada leitura e faria a seta não produzir efeito visível.

• A legenda é ancorada EM CIMA, ao contrário da receita da casa. O contrato §6 manda a legenda para dentro da imagem, e é o que ela faz; a ancoragem embaixo é o padrão porque o caso típico é um card de galeria. Aqui o card tem duas colunas e o número já ocupa o alto da coluna de texto: título no alto da foto deixa as duas colunas começando na mesma linha, e a metade de baixo fica para o selo e para a descida do olho até a fileira. O véu acompanhou — a máscara em gradiente vai do topo para baixo, o contrário da receita padrão.

• O véu é um ::before da legenda e mede a altura DELA, não a da foto. bottom negativo em porcentagem resolve contra a altura do .vit-cap, então o véu é sempre 1,8× o texto que ele serve. Véu medido em fração da foto é ultrapassado por um título de três linhas em tela estreita, e a última linha cai sobre a parte nítida — foi o midia/grade-cases-foto que mediu isso, pela outra ponta. E o texto fica fora do elemento mascarado de propósito: mask-image aplica-se aos descendentes, e um título dentro do véu apareceria esmaecido na ponta.

• backdrop-filter sem máscara em gradiente lê "tarja". Caixa reta produz borda dura contra a parte nítida da foto. E o gradiente escuro não substitui o desfoque, nem o contrário: só o gradiente deixa o texto sobre textura, só o desfoque deixa claro demais em foto clara.

• O scrim escurece de novo no pé da foto, e é pelo selo. O degradê vai de .92 no topo a .20 em 70% e volta a .54 embaixo. Sem esse retorno, o selo cairia sobre a parte clara de uma foto de céu aberto e o texto curvo dele sumiria.

• A superfície do card é color-mix de --light, e não de --fg. A primeira versão misturava a tinta do escopo, o que escurece o card numa dobra clara: a tinta de realce caía a 4,25:1 sobre ele, contra os 4,59:1 que ela tem sobre o creme puro — abaixo do mínimo de 4,5 para texto normal, por uma casa. Com --light o card clareia nos dois escopos: rgb(22,22,22) sobre o escuro da casa, e 4,63:1 no claro. Medido nos quatro escopos, com o tema da Liberta:

Os dois números em negrito são da ressalva, e a conta é do --fg-muted do core — não de uma cor desta peça. A primitiva .nota define essa tinta, e ela vale hoje para dezessete componentes. Projeto que precise de AA estrito em dobra clara corrige no --fg-muted do tema, e a correção chega a todos de graça.

• A categoria dentro da foto lê --accent PURO; a unidade do número e o ícone leem --accent-ink. É a regra do MANUAL §3, e as duas metades importam: o que está sobre o fundo da seção lê a tinta de realce do escopo; o que está sobre foto com véu lê a cor de marca crua, porque ali o fundo real é a foto escurecida e o --accent-ink de um escopo claro cairia para ~3,5:1. Uma varredura que trocasse um pelo outro "por consistência" piora metade desta peça sem que nada acuse.

• O ícone de traço é o caso de fronteira, e ele ficou no grupo do texto. Ícone é desenho, e desenho pede 3:1, não 4,5:1 — mas é um traço de 1,4px, e 1,36:1 numa dobra clara o apagaria por completo. Ele lê --accent-ink como o texto ao lado.

• Os doze ícones são desenhados no markup, um SVG por atributo. Nenhum ícone de terceiro atravessa a biblioteca (contrato §11) — a referência desta dobra usa uma família proprietária, e ela ficou lá. São viewBox="0 0 24 24", traço de 1,4px em currentColor, aria-hidden e focusable="false". Repetir o mesmo desenho em dois destaques é legítimo; o que não é legítimo é colar um ícone de fora.

• data-rv mora no .vit-palco, nunca nos painéis. Painel que nasce escondido nunca intersecta, e o IntersectionObserver do core o deixaria em opacity:0 para sempre quando a aba o revelasse — a armadilha que o planos-honorarios mediu. E o selo tem o data-rv no invólucro pela outra razão: ele gerencia o próprio transform (o giro), e [data-rv].in{transform:none} vale (0,2,0) e congelaria a volta depois da entrada (contrato §5).

• O arco do selo é um id, e o script o renumera junto. Dois selos na mesma página com o mesmo id fazem os dois textos curvos seguirem o primeiro arco — gotcha documentado no efeitos/selo-circular. Como os arcos são idênticos, ninguém percebe até o dia em que um selo tiver tamanho diferente do outro. O script lê o alvo do próprio textPath em vez de cravar o nome, então quem trocar o id no markup leva a correção junto.

• .vit-painel[hidden]{display:none} está lá mesmo sem a comutação usar o atributo (§6.5). O display:grid do painel é regra de autor e venceria o [hidden] do navegador. Quem derruba uma frente inteira no site consumidor usa o atributo — e derrubar uma frente é esconder a aba e o painel: aba sem painel vira botão morto.

• A troca por clique chama preventDefault. A escolha é um <a href> de verdade porque sem script ela precisa navegar; com script, navegar seria rolar a página por baixo do dedo de quem só queria trocar de aba.

• Nada anda sozinho, e é decisão. A vitrine não gira no relógio: aba que troca sozinha rouba a leitura no meio de um parágrafo, e ainda obrigaria a peça a carregar o botão de pausa da WCAG 2.2.2. Quem troca é sempre a pessoa — e por isso esta peça não usa o .btn-play/LIB.pausavel do core.

Movimento reduzido / toque

Movimento reduzido desliga a fusão e mantém a troca — a pessoa pediu por ela. Medido com a preferência ligada: transition-duration da foto em 0s, LIB.reduce em true, a volta do selo em animation:none (o selo desliga sozinho, no CSS dele), e a troca completa em menos de 40ms, sem painel pintado esperando o relógio. O script lê a mesma preferência e pula a fase de saída: com a transição desligada, os 280ms seriam uma pausa morta e não uma travessia. A entrada da dobra é do core e o core já a desliga.

Toque: nada aqui depende de hover. O único hover da peça é o realce de borda da escolha, e ele é acréscimo — o estado aceso sai do aria-selected, que existe com ou sem ponteiro. Medido em 390px com emulação de toque: sem estouro horizontal, a foto sobe para o topo do card (grid-row:1, topo em 438 contra 679 do texto), a fileira vira 2×2 de 170px por célula com 159px de altura, e o selo sai — num card de 350px o disco de 132px comeria um terço da foto e cairia sobre a legenda com título de três linhas.

Histórico

O que não atravessou. three.js e GSAP/ScrollTrigger, que lá animavam a troca — aqui a travessia é uma transição de opacidade de 280ms num <img>. Os ícones Phosphor, substituídos por doze SVG desenhados no markup. Os assets de Figma, substituídos pelos placeholders de showroom/demo/. E as cores cruas, substituídas por token: a peça roda nos quatro escopos de tom sem uma variação de código.

O que entrou, e não existia no original: o padrão de abas do APG inteiro, a região aria-live, a rota sem JavaScript (no original o destaque inicial e as trocas dependem do script) e a camada de compliance — que aqui deu forma à peça, e não só ao texto. O número grande da referência é uma métrica de produto; aqui ele foi fechado em estrutura do trabalho, com ressalva presa e uma regra escrita no componente.json que proíbe qualquer cifra de desempenho.

Decisões da tradução para o contrato:

Divergências conhecidas vs. produção: nenhuma — a peça nasce aqui.

Calibragem no primeiro uso. Espere ajustar três coisas: o --vit-pos de cada foto (o corte que o assunto aguenta com a legenda no alto), o comprimento das frases dos destaques (é o que decide a altura da dobra inteira, porque ela é a do maior painel) e — antes de tudo — qual número cada frente vai mostrar, que é conversa com o compliance do cliente e não decisão de design.