Grade de serviços com ícone

Quatro células de peso igual, lado a lado. Cada uma abre com um filete de 1px atravessando a largura da célula, um segmento de 2px na cor de marca encostado à esquerda desse filete, e abaixo um ícone de traço numa caixa quadrada, um título de uma a três palavras e uma frase. Sem foto, sem hover, sem nada que abra. Zero JavaScript — a entrada é o [data-rv] do core e o resto é layout.

É a grade mais comum da web inteira, e é justamente por isso que ela precisava existir aqui: a casa tinha oito peças de forma itens-paralelos e nenhuma era a fileira simples de quatro serviços com ícone. O que ela resolve, e nenhuma irmã resolvia, é o custo editorial: quatro títulos curtos e quatro frases, e nada mais. Sem foto por item, sem tela de produto, sem número, sem hierarquia a decidir. Metade dos sites trava na dobra de serviços por falta de foto boa — quatro fotos equivalentes em peso, com a mesma luz e o mesmo tratamento, é material que quase nenhum cliente tem pronto. Aqui o único asset é um desenho de 24×24 que o próprio markup carrega.

O que a separa de "quatro divs com borda" é o alinhamento, e ele é regra de CSS e não sorte de redação: filete, ícone, título e frase começam na mesma altura em todas as células porque --gsv-title-min reserva duas linhas para o título — e essa reserva é, ao mesmo tempo, o vão até a frase. Medido a 1440 no tema liberta-wealth: os quatro filetes em top:419, os quatro ícones em 448, os quatro títulos em 524 e as quatro frases em 571.

Quando usar

• A dobra "o que fazemos" quando são quatro frentes de peso igual e nenhuma é a principal.
• Quando não há foto. É a razão de ela existir. Nenhum dos slots pede imagem, e o ícone vem desenhado.
• Quando o texto de cada item é uma frase. Uma, curta. Se cada serviço tem um parágrafo a dizer, a célula não é o lugar.
• Quatro ou seis itens. Quatro é o padrão; seis pede a classe .gsv-cols-3 e vira duas fileiras de três.
• Em dobra escura ou clara indiferentemente. O ícone é currentColor e acompanha o escopo de tom sem ajuste.
• Depois do hero ou no meio da página, como respiro entre duas dobras com imagem: em repouso esta seção é só tipografia e filete.

Quando não usar

• Com cinco itens. Não fecha fileira em nenhuma das duas configurações — ver o Padrão editorial. Escreva a quarta ou a sexta frente, ou escolha outra peça.
• Quando um dos itens é claramente mais importante. Grade regular afirma que as quatro coisas valem o mesmo; se não valem, a peça mente.
• Quando cada item precisa levar a uma página. A célula não é link, e transformá-la em <a> colide com o desenho (não há afordância de clique nenhuma, de propósito). Para item que leva a algum lugar, listas/lista-imagem-flutuante.
• Quando a ordem é informação. A forma é itens-paralelos. Etapa, passo e método pedem listas/linha-do-tempo-etapas ou conteudo/imagem-lista-numerada.
• Quando existe foto boa para cada item. Aí a peça está deixando material na mesa — ver a tabela abaixo.

Os irmãos, e o que cada um ganha de mim

Qual irmão eu substituo, e em que caso: substituo listas/leque-paineis e conteudo/pilares-texto-na-foto no caso — comum — em que o cliente tem os textos dos serviços prontos e não tem as fotos. As duas caem com foto fraca; eu não tenho onde cair.

Padrão editorial

O comprimento das frases é estrutural, não estético. A célula de quatro colunas cabe cerca de 29 caracteres por linha a 1440. Medido, com a mesma frase cortada em vários pontos:

As quatro frases têm de cair na mesma contagem de linhas, e o teto seguro é 24 caracteres de diferença entre a maior e a menor — as quatro do exemplo estão entre 65 e 71. Cada linha a mais numa célula deixa 24px de vão morto debaixo das outras três: dobrar uma frase para 143 caracteres cresceu a grade em 48px e abriu 48px de buraco nas três vizinhas. O mesmo vale para o título — a fileira só parece cuidada porque as quatro células terminam juntas.

E os quatro títulos precisam ser do mesmo tipo gramatical. "Sucessão" ao lado de "Previdência e proteção" funciona: os dois são substantivos. "Cuidamos da sucessão" no meio de três substantivos salta mais do que parece, porque os quatro são lidos de uma vez, na horizontal.

Contagem de itens. Medido a 1440:

Ou seja: quatro ou seis, nunca cinco.

Especificação dos assets

Não há imagem. O único asset é o ícone, e ele vem desenhado no markup — quatro SVG de traço feitos aqui, porque ícone proprietário não atravessa (contrato §11): nenhuma biblioteca de ícones, nenhuma dependência, nenhum arquivo externo.

Para trocar por outro desenho, troque o conteúdo do <svg> e deixe a caixa em paz. O que o desenho precisa ser:

• Grade de 24. viewBox="0 0 24 24", com o desenho ocupando de 3 a 21 nos dois eixos — margem de 3 unidades, senão o traço encosta na caixa.
• Traço, nunca preenchimento. fill="none", stroke-width="1.5" (1,4 a 1,6 se o desenho for muito denso), stroke-linecap e stroke-linejoin em round.
• stroke="currentColor", e isso não é detalhe. É o que faz o ícone acompanhar o escopo de tom da seção. Medido: em .sec-deep o traço computa rgb(242,240,236); a mesma peça em .sec-paper computa rgb(28,24,17), sem uma linha de CSS a mais. Ícone que traz a própria cor — stroke="#fff", um <svg> com fill cravado, um PNG — fica preso ao tom em que foi desenhado e desaparece na variação clara.
• Um conceito por ícone. A caixa é de 46 a 54px e o desenho é exibido a 46% dela: ícone com cena dentro some em ~24px de desenho útil. Os quatro do exemplo têm 1 a 3 elementos cada.
• Sem texto dentro do SVG e sem <title>: o ícone é decorativo, a caixa leva aria-hidden="true" e quem nomeia o serviço é o <h3>.
• Os quatro do mesmo peso óptico. Um ícone com seis traços ao lado de um com um traço desequilibra a fileira mais que qualquer diferença de texto. Medido nos quatro da casa: cada desenho ocupa 13 a 15 unidades de largura e 15 a 17,6 de altura, dentro da margem de 3. O anel é o mais estreito dos quatro de propósito — círculo lê maior que qualquer outra forma na mesma medida.

Os quatro desenhos da casa: anel com fatia (alocação), caule que se abre em dois (sucessão), escudo (proteção) e folha com canto dobrado (relatório).

Compliance

A peça não devolve número nenhum, e isso é da forma — não sobrou espaço para cifra em lugar algum. É o que a torna barata de aprovar. O que o consumidor tem de checar antes de publicar mora todo na frase:

• A frase diz o que o serviço é, nunca o que ele rende. "Política de investimentos escrita, revisada em comitê a cada trimestre" descreve um processo. "Carteira que acompanha o mercado" insinua resultado e não entra.
• Nada de superlativo de mercado. "A melhor alocação", "o maior escritório independente" — fora, mesmo sendo verdade e mesmo sendo verificável.
• Cadência não é retorno. "A cada trimestre", "no mesmo dia de cada mês" são compromissos de serviço, e podem ficar — desde que o cliente de fato os cumpra.
• Sem nome de instituição real, sem logo. O ícone é desenho genérico exatamente por isso.
• Não há campo, não há localStorage, não há dado de pessoa: a peça é estática.

Como usar

<link rel="stylesheet" href="componentes/conteudo/grade-servicos-icone/estilo.css">

Não há script.js. O core (motion.css + motion.js) já entrega a entrada, e sem JavaScript a dobra lê inteira — medido com o script desligado: as quatro células computam opacity:1, filter:none, e a altura da seção é idêntica à do carregamento normal (769px), graças ao @media (scripting:none) do core.

Ganchos

Variações

• Seis itens — .gsv-cols-3 na seção. Duas fileiras de três, células de 338px em 1440, as duas fileiras com a mesma altura e cada uma com o seu filete. Medido.
• Dobra clara — trocar .sec-deep por .sec-paper. Título, frase, filete, caixa do ícone e traço do ícone acompanham sozinhos; só o segmento de marca fica igual, porque é --accent. Medido nos quatro escopos.
• Numeração no lugar do ícone — 01…04 na mesma caixa. Honesto e nunca envelhece, mas número em grade de pesos iguais lê como ranking, e a forma aqui é itens-paralelos. Não foi exercitada.
• Oito itens — 4 + 4, sem classe nenhuma. Fecha regular, mas oito frases de 45 a 85 caracteres é muito texto para uma dobra. Não foi exercitada.

Gotchas

• A reserva do título É o vão até a frase, e é por isso que ela não custa nada. .gsv-text não tem margin-top. Com título de uma linha, a segunda linha reservada aparece como o respiro entre título e frase — 24px em 1440, derivado da entrelinha do próprio título em vez de um número inventado. Com título que quebra em duas, o vão fecha e a frase encosta: feio de propósito, porque é o sinal visível de que o título passou de três palavras. Pôr margin-top na frase reabre a conta e devolve o ar morto que a reserva foi desenhada para não custar.
• Apagar --gsv-title-min não quebra nada hoje. Com os quatro títulos do exemplo, todos de uma linha, as frases continuam alinhadas (medido: sobem juntas de 571 para 547). Quebra no primeiro título de quatro palavras que um cliente escrever — e aí ninguém liga uma coisa à outra, porque o sintoma aparece meses depois da remoção.
• O filete é por célula, não no contêiner. Assim a fileira de baixo ganha o próprio filete de graça quando há seis itens, sem nenhum :nth-child amarrado à contagem de colunas. A calha entre colunas parte a linha em segmentos, e é esse corte que faz a grade ser vista.
• O segmento de marca fica em top:-1px, cobrindo o filete. Um segmento de 2px pousado abaixo de uma régua de 1px lê como duas linhas empilhadas, não como uma marca.
• O teto de largura da frase sai em duas colunas, e isso foi medido nas duas direções. Em quatro colunas o teto de 34ch nunca encosta, então ele só agia na faixa de duas — e agindo ali era ele que fazia as contagens de linha divergirem: a 900px, com o teto as quatro frases davam 2/3/2/2 linhas (24px de vão morto na primeira fileira); sem ele, 2/2/2/2. A célula de duas colunas tem 326 a 463px, o que dá 40 a 54 caracteres por linha — medida legível, sem precisar de teto.
• Contagem de linha igual em toda largura não é promessa que se possa fazer, e o resto é sorte de empacotamento. Medido em onze larguras de 320 a 1920 com a copy de exemplo: dez saem parelhas (3/3/3/3 ou 2/2/2/2) e 768px sai 2/3/2/2 — ali a célula tem 326px, cabem ~38 caracteres por linha, e "Holding, testamento e doação desenhados junto ao advogado da família" quebra mal por uma palavra. Custo: 24px de vão numa célula. É inerente a qualquer grade de texto; o que a faixa de tolerância do padrão editorial garante é a largura em que a peça foi desenhada, não todas.
• minmax(0,1fr) e não 1fr nas colunas. Com 1fr a coluna nasce com min-width:auto e uma palavra longa ("internacionalização") empurra a grade para fora da coluna do .wrap em vez de quebrar.
• Nada position:fixed dentro de uma célula. [data-rv].in termina em filter:blur(0), e elemento com filtro é bloco de contenção para descendente fixo — o filho fixo passaria a se prender à célula, para sempre (MANUAL §5). A peça não tem nada fixo, e não é por acaso.
• Não há @media(prefers-reduced-motion) no CSS, e a ausência é deliberada. Todo o movimento é o [data-rv] do core, que o próprio core desliga. Medido com --reduce: opacity:1, filter:none, transform:none, transition-duration:0s e zero animações em curso.
• Zero elementos focáveis dentro da peça, e isso é a resposta certa para o teclado. Não há link, botão nem campo: Tab atravessa a dobra sem parar, porque não há nada que a pessoa possa acionar. Se um projeto precisar que cada serviço leve a uma página, o componente é outro (listas/lista-imagem-flutuante) — não este com um <a> enfiado dentro.
• subgrid resolveria o alinhamento sem reserva, e foi descartado. Ele exige faixas explícitas no contêiner (repeat(N,auto)), e repeat() não aceita var() na contagem: com seis itens em duas fileiras, cada fileira pediria a sua faixa e a peça deixaria de servir qualquer contagem. É a armadilha que conversao/planos-honorarios documenta — lá ela se paga porque as doze linhas são fixas; aqui, não.

Histórico

Normalizações aplicadas na extração: não houve extração. Duas decisões vieram da tradução do padrão para o contrato desta casa: (1) os ícones foram desenhados aqui, na grade de 24 com traço de 1.5 e currentColor, porque ícone de biblioteca não atravessa (§11), e a ficha passou a especificar o que um substituto precisa ser; (2) a contagem de colunas troca por classe e não por style inline, porque valor inline vence media query e a grade ficaria em três colunas no celular.

Divergências conhecidas vs. produção: nenhuma — a peça nasceu aqui e não tem site de origem. O texto de exemplo é da voz da Liberta e sem número nenhum; ver Compliance antes de publicar com copy de cliente.