Linha do tempo de etapas

Cinco etapas de um processo empilhadas numa coluna só: um filete vertical à esquerda, o conteúdo à direita. O filete tem duas camadas — um trilho fraco na cor das divisórias e, por cima, um preenchimento na cor de marca que cresce conforme a página desce. Ele para no marcador da etapa que está sendo lida, e o marcador acende ali. A pessoa vê em que ponto do processo está pelo próprio ato de rolar: não há barra de progresso, não há número de passo, não há nada para clicar.

Resolve a dobra mais pedida de um site de assessoria — o "como funciona" — quando ela precisa dizer três coisas ao mesmo tempo: quais são as etapas, em que ordem e quanto tempo cada uma leva. Uma lista numerada comum entrega a primeira e a segunda e perde a terceira no meio do parágrafo; uma grade de cards perde a ordem, porque numa grade a etapa 1 e a etapa 4 são vizinhas de tabela. O filete devolve a sequência de graça, e o prazo em pílula ganha um lugar fixo no desenho em vez de virar frase.

Qual irmão ela substitui, e em que caso

Três componentes da casa encostam neste território, e a escolha entre eles não é de gosto:

• listas/baralho-sticky apresenta o mesmo material — método em 4 a 6 etapas — com a forma oposta: cards de vidro que grudam no topo sobre uma foto pinada, e a etapa seguinte cobre a anterior. Ele força a sequência: a pessoa não consegue pular. Custa uma tela de rolagem por etapa e uma foto grande, e a etapa que saiu de cena não pode mais ser relida sem voltar. Use o baralho quando o método é o argumento de venda da página e a dobra pode ocupar a atenção inteira; use esta linha do tempo quando o processo é informação de serviço — alguém já decidiu contratar e quer saber o que vai acontecer, em que ordem e em quanto tempo. Aqui as cinco etapas coexistem na tela e podem ser comparadas de relance, e a peça cabe em uma tela e meia em vez de cinco.
• midia/roda-de-cards é cronologia de anos, não de etapas: 6 a 10 paradas com data e foto sobre o aro de uma roda-gigante que se arrasta de lado. Ela pede foto por parada e responde a gesto. Use a roda para "quem somos desde 2012"; use esta para "o que vai acontecer depois que você assinar". A própria ficha da roda já apontava esta lacuna: uma linha do tempo vertical era o que faltava para o caso puramente sequencial.
• conteudo/imagem-lista-numerada é lista numerada de 3 a 4 diferenciais ao lado de uma foto. Ali os itens não têm ordem obrigatória e não têm duração. Se o seu item 3 pode virar item 1 sem prejuízo, o componente é aquele, não este.

Quando usar

• Página de serviço, "como funciona", "nosso processo", onboarding de cliente novo — 4 a 6 etapas em ordem obrigatória.
• Quando cada etapa tem duração, e a duração é parte da resposta. É o único componente da casa que reserva um lugar fixo para ela.
• Quando o material é texto e a página não tem foto por etapa. Uma foto opcional cabe (ver a etapa 05), mas ela é o fecho, não o padrão.
• Quando a dobra pode ocupar altura: com cabeçalho, cinco etapas e a ressalva, a seção passa de 2000px em desktop e de 2500px em 390px.

Quando não usar

• Menos de 4 etapas — com uma exceção nomeada. Três marcadores não desenham uma linha do tempo, desenham três itens com um traço, e uma lista comum resolve melhor. Isso vale quando as etapas são fases de um método. Não vale quando cada etapa é uma data de calendário: aí o traço liga pontos no tempo, e dois pontos já fazem uma linha. Ver variacoes[] — a variação de três datas é estavel e não muda uma linha de código — mas muda duas coisas no conteúdo, e as duas só apareceram montando uma campanha real: o rótulo visually-hidden do prazo deixa de ser "Prazo estimado" (com data de calendário ele mente para quem ouve a página) e o .etp-titulo precisa de um nome para a etapa, porque a data migrou para a pílula. Data na pílula, nome no título — nunca a data nos dois.
• Mais de 6. A seção passa de três telas e o filete deixa de ser lido como um único percurso.
• Itens sem ordem — serviços, benefícios, diferenciais. A forma promete sequência; sem sequência, ela mente. Use conteudo/imagem-lista-numerada ou conteudo/pilares-texto-na-foto.
• Quando cada etapa tem uma foto que vale a tela. Aí o material é de mídia, e o componente é midia/roda-de-cards ou listas/baralho-sticky.
• Quando o conteúdo é pergunta e resposta, e o visitante vai procurar a dele: listas/acordeao-faq.
• Quando a página já tem outra dobra presa ao scroll logo acima ou abaixo. Duas peças que reagem à rolagem na mesma tela competem, e a segunda parece defeito da primeira.

Padrão editorial

Comprimento parecido entre as etapas é estrutural, e não estética. A altura de cada item é o comprimento do segmento de filete que sai dele: um parágrafo com o dobro do tamanho do vizinho produz um trecho de filete com o dobro do tamanho, e o percurso deixa de parecer regular. Fique numa faixa de mais ou menos 30% entre o menor e o maior.

Nenhuma etapa fala de retorno. "Implementação" é onde a carteira é montada, não onde o dinheiro "começa a render" — ver Compliance.

Especificação dos assets

A foto é opcional e cabe em uma etapa, não em todas.

• Formato paisagem 16:9, mínimo 1600×900. A caixa é reservada por aspect-ratio, então a foto entra sem mover a lista.
• Até 180 KB. Ela é pequena na tela (520px de largura no máximo) e não precisa de mais.
• Composição com o assunto acima da metade: o terço de baixo fica sob o véu da legenda.
• Não pode ter: rosto identificável de cliente, tela com dados de carteira legíveis, logo de instituição financeira, documento com nome ou valor visível.

Como usar

<link rel="stylesheet" href="componentes/listas/linha-do-tempo-etapas/estilo.css">
<script src="componentes/listas/linha-do-tempo-etapas/script.js"></script>

Cada etapa declara a própria posição na sequência, a partir de 0:

<li class="etp-item" style="--etp-i:0">
<li class="etp-item" style="--etp-i:1">

Acrescentar ou tirar uma etapa é acrescentar ou tirar um <li> e continuar a numeração. Nada mais muda: a altura do segmento, o fim do filete e o alcance do progresso saem todos da própria lista.

Ganchos

Parafusos

Variações

• Seis etapas — acrescente um <li> e continue a numeração de --etp-i. Nada mais muda. Rodou no preview.
• Sem foto — apague a <figure> da última etapa. A foto é opcional por desenho.
• Última dobra da página — --etp-linha:.62 antecipa o fecho do filete. Ver o gotcha da meia tela abaixo. Experimental: a proporção certa depende de quanto rodapé a página tem.
• Sobre seção clara — troque .sec-deep por .sec-paper no <section>. O componente não lê cor própria em lugar nenhum, e o miolo do marcador apagado é --bg, que acompanha o escopo. Não foi exercitada em produção.

Gotchas

• O data-rv está no .etp-corpo e não no <li>, e isso é medido. O core termina todo reveal com [data-rv].in{transform:none}, seletor (0,2,0), que vence qualquer classe do componente. O preenchimento do filete se move por transform:scaleY() — no mesmo nó do data-rv ele seria apagado em silêncio assim que a dobra entrasse, com o style inline aparecendo certo no inspetor e o computado voltando a none. O segundo motivo é tão forte quanto: o repouso do data-rv vale translateY(22px), e o script mede a posição dos marcadores — marcador dentro de um bloco deslocado devolveria medida errada até o reveal. Aqui o marcador e o filete são irmãos do bloco revelado, não filhos dele. Precedente da regra: efeitos/inclinacao-3d com o .tilt-card-slot.
• O reset do core zera ul, não ol. A lista aqui é ordenada de propósito, e sem list-style:none; padding:0; margin:… 0 0 no .etp-lista o navegador entrega os padrões dele. Medido: 40px de recuo (o filete saía da coluna) e, num <li> que é display:grid, um ::marker numerado que o Chrome trata como inside e insere na grade — o que empurrava o texto 10px para baixo do marcador, a 1440 e a 390. O número visível é a .etp-num; o ::marker seria um segundo número.
• O último item não desenha segmento, e é por isso que o filete nunca passa do último marcador. Não há grampo, não há Math.min, não há medida no script: simplesmente não existe trilho depois do último ponto. Medido a 1440, a 390 e depois de redimensionar a janela — a ponta do preenchimento cai exatamente sobre o centro do último marcador, com diferença de 0,1px de arredondamento.
• scaleY não engorda o filete. A largura do elemento é fixa (--etp-fio-w) e só o eixo Y escala, então o traço tem 2px em qualquer estágio do preenchimento. Trocar scaleY por height funcionaria visualmente e refaria o layout de quatro segmentos a cada quadro de rolagem — que é o jank que o §7 do contrato existe para evitar.
• A dobra precisa de meia tela de página abaixo do último marcador. A linha de leitura mora no meio da janela; se a linha do tempo for a última coisa antes do rodapé, o último marcador pode nunca cruzá-la e o filete não fecharia. O script trata a ponta do documento grampeando a rolagem prevista de cada marcador no curso que a página realmente tem — o filete fecha no fim do documento mesmo assim —, mas o fecho fica concentrado nos últimos pixels. Quando isso incomodar, --etp-linha:.62. Numa página normal, o rodapé já resolve.
• --etp-topo-h é 30px porque é a altura da .pill do core. Trocar o rótulo de prazo por outra coisa — um .eyebrow, um texto solto — muda essa altura e tira o marcador do eixo do número. Refaça o número junto.
• Movimento reduzido desliga o comportamento inteiro, e o repouso é o CHEIO. O script sai antes de pôr .is-live: o filete nasce completo e todos os marcadores acesos. Não é "desligar a animação": desligar deixando o filete vazio apagaria a peça, e um processo sem filete não é um processo com menos movimento — é uma lista de cinco parágrafos soltos. Medido com prefers-reduced-motion: reduce e com JavaScript desligado de verdade: escala 1 nos quatro segmentos, cinco marcadores na cor de marca, texto em opacidade 1.
• Nada na peça é focável, e isso é decisão. Cinco marcadores clicáveis dariam cinco paradas de Tab que levariam a lugar nenhum — o conteúdo já está inteiro na tela, não há o que abrir. Se a etapa precisar de link, ele entra dentro de .etp-texto como link de prosa, e aí é um link de verdade, com destino.

Compliance

A peça devolve números de calendário, e é por isso que esta seção existe. Antes de publicar, o consumidor tem de fazer as quatro coisas abaixo.

1. Trocar os prazos. Os intervalos do markup.html são exemplo editorial, calibrados para soarem plausíveis numa assessoria — não são compromisso de ninguém. Substituir pelos prazos reais do cliente, validá-los com quem executa o processo e datá-los na ficha do projeto.
2. Manter o prazo em faixa. "De 2 a 3 semanas", nunca "15 dias". Prazo cravado numa peça de marketing é lido como compromisso, e o .etp-prazo tem largura para a faixa justamente para tirar a tentação.
3. Manter a fronteira processo × resultado. Nenhuma etapa pode falar de rentabilidade, retorno, ganho ou desempenho. A armadilha é sempre a mesma e sempre na etapa de implementação: "onde seu dinheiro começa a render" é a frase que não pode existir. Aqui a etapa 03 diz o que acontece (a carteira é montada dentro das faixas aprovadas, na custódia que já é do cliente) e como o assessor é remunerado (taxa previamente acordada), e para por aí.
4. Passar a ressalva pelo compliance do cliente. O texto da .etp-nota diz que os prazos são estimados, de onde eles são contados e o que os faz variar. Ele fica no fim da lista, onde a pessoa acabou de ler as pílulas — não no rodapé da página.

Já resolvido no componente e que não deve regredir: nenhum nome de instituição real, nenhum nome de cliente, nenhum superlativo de mercado, nenhum dado pessoal coletado e nada gravado — a peça não tem campo, não tem clique e não usa localStorage, cookie nem envio.

Histórico

Origem. Componente autoral (§11 do contrato). Não há referência única: o padrão — coluna única, marcador por etapa, fio que acompanha a leitura — aparece em página de processo de consultoria, em documentação de produto e em onboarding de fintech, e é justamente por ser um lugar-comum bem resolvido que ele merecia uma versão da casa em vez de ser improvisado a cada site. A categoria listas tinha quatro componentes e nenhuma linha do tempo vertical.

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

1. Coluna única, sem alternar lados. A alternância esquerda/direita é o desenho mais visto do padrão e o que menos sobrevive: em 390px os dois lados desabam para a mesma coluna e sobra um remendo com metade dos itens desalinhados. Processo se lê em sequência, não em simetria — e foi por ter recusado a alternância desde o começo que a media query de mobile precisou de quatro linhas, todas de escala.
2. O trilho é por etapa e é calculado só em CSS. Cada .etp-item desenha o próprio segmento, do centro do seu marcador ao centro do seguinte, usando --etp-cap e um vazamento de --etp-cap para baixo da própria caixa. O script não mede altura de trilho nenhum, e o último item simplesmente não desenha segmento — de onde sai, de graça, a garantia de que o preenchimento nunca passa do último marcador.
3. Um número, cinco segmentos. O script escreve um único --etp-k na seção; cada segmento tira a própria fatia com clamp(0, calc(var(--etp-k) - var(--etp-i)), 1). É a mesma economia do --wheel-angle do midia/roda-de-cards: uma escrita por quadro, e a distribuição fica no CSS.
4. O repouso é o cheio. Sem script e com movimento reduzido a peça fica completa e parada, e é a classe .is-live do script que liga o comportamento — como faz o conversao/diagnostico-perfil. O contrário (nascer vazio, o script encher) deixaria a dobra em branco no dia em que o script não rodasse.
5. A linha de leitura é grampeada nas pontas do documento. "Corrente é a etapa que cruzou o meio da janela" é o critério, e ele não fecha quando a dobra é a última da página. Converter cada marcador na rolagem que o traria até a linha, e grampear esse número em [0, scrollHeight - innerHeight], preserva a ordem (logo o progresso continua monótono) e garante o fecho no fim do documento.

Normalizações aplicadas: prefixo etp- em toda classe; zero cor crua (o véu da legenda usa rgba(var(--dark-rgb),…), que lê token); .pill, .visually-hidden, .eyebrow, .sec-title, .sec-lead, .wrap e .nota (a ressalva) vêm do core e não foram recopiadas; scroll pelo laço único LIB.onScroll; LIB.reduce consultado com o mesmo fallback dos irmãos, para o caso de o componente ser colado sem o motion.js; JS ES5-safe dentro de IIFE, com guard silencioso e busca a partir da raiz.

Divergências conhecidas vs. produção: nenhuma — não rodou em produção ainda.

O que foi medido (bin/medir.js, Chrome headless, tema liberta-wealth):