/* ========================================================================== ETAPAS EM ABAS COM REPRODUÇÃO — prefixo eta- Lista de etapas à esquerda (role="tablist"), painel de mídia à direita, e três discos de reprodução acima. A etapa ativa abre a descrição e o filete embaixo dela enche no tempo da etapa. Tokens usados: --bg --fg --fg-2 --fg-muted tinta e superfície, do escopo da seção --rule trilho do filete e fio da ressalva --dark --light o véu e a tinta da legenda, que está sobre FOTO e não sobre o fundo do escopo --accent o filete que enche (é GRÁFICO, não texto) --accent-ink o número da etapa ativa (é TEXTO sobre o fundo do escopo — MANUAL §3; o var() traz --accent de fallback para quem colar a dobra fora de um escopo de tom) --display --sans tipografia --ease curva do projeto --radius-media canto do painel --nota-max medida da ressalva (parafuso da primitiva) A coluna vem do .wrap do core: --max e --pad não são lidos aqui. UM RELÓGIO SÓ. --eta-dur é o tempo de cada etapa, e ele é lido em dois lugares que não podem discordar: a animação do filete (aqui) e o setTimeout do script, que a pega por getComputedStyle na raiz. Nunca há dois números para manter em sincronia. O FILETE É CSS, NÃO JAVASCRIPT ESCREVENDO LARGURA POR QUADRO. A regra que anima casa com a aba de aria-selected="true", e só com ela — então trocar de etapa tira a regra de uma aba e a põe na outra, e uma animação que passa a casar COMEÇA DO ZERO. O reinício a cada troca é de graça, e não custa uma linha de script. Pausar é animation-play-state, escrito numa regra mais específica que a shorthand (ver abaixo). ========================================================================== */ .eta{ /* Relógio da dobra: quanto cada etapa fica em cena. Seis segundos é o tempo de ler uma descrição de ~45 palavras sem correr. Abaixo de 4s a troca vira pisca-pisca; acima de 9s a dobra parece travada e o filete parece parado. O script lê ESTE valor. */ --eta-dur:6s; /* Fusão entre um painel e o seguinte. */ --eta-swap:.7s; /* Abertura e fecho da descrição. Mais curta que a fusão do painel de propósito: o texto precisa ter assentado antes de a foto terminar de trocar, senão as duas coisas se movem ao mesmo tempo e o olho não sabe para onde ir. */ --eta-open:.44s; /* Desfoque da fusão do painel. Nada entra seco (contrato §5). */ --eta-blur:14px; /* Corpo do título de cada etapa. */ --eta-rot:clamp(17px,1.5vw,21px); /* Proporção do palco. 16/11 é a caixa que mais se aproxima da altura da coluna de quatro etapas sem cortar demais uma foto 16/9. */ --eta-palco:16 / 11; } /* ===== CABEÇALHO ===== */ .eta-head{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; column-gap:clamp(24px,4vw,64px); } .eta-head-txt{min-width:0} /* OS TRÊS DISCOS SÓ EXISTEM COM SCRIPT. Sem JavaScript eles não comandam nada, e botão que não faz nada é pior que botão que não existe — mesma decisão da barra de abas do hero/slideshow-cinematico. Quem escreve .is-live é o script, na primeira linha da inicialização. O [hidden] do botão de pausa não precisa de regra aqui: quem dá display a ele é o .btn-disc do core, e o .btn-play[hidden]{display:none} da mesma folha vem depois e vence (§6.5, já resolvido na primitiva). */ .eta-ctl{display:none} .eta.is-live .eta-ctl{ display:flex;align-items:center; gap:10px; padding-bottom:6px; } .eta-seta{width:17px;height:17px} /* ===== GRADE ===== */ .eta-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr); column-gap:clamp(28px,4.4vw,72px); align-items:start; margin-top:clamp(34px,4.6vh,56px); } .eta-col{min-width:0} .eta-lista{ display:flex;flex-direction:column; min-width:0; } /* ===== A ABA ===== Botão de verdade, sem cara de botão. O reset é local porque o .btn do core é outra coisa (pílula de rótulo, com fundo e padding fixos), e o .btn-disc é o disco de ícone — nenhum dos dois cabe numa linha de lista. TUDO É , e não é preguiça: