/* ═══════════════════════════════════════════════════════════════════════════ sections.css — o que vem DEPOIS do trilho: seções empilhadas comuns sobre o off-white, o bloco roxo, os passos, os recursos, os dados e o rodapé. Respiro vertical do DNA: 160 no computador, 128 em tela média, 96 no celular (--secao-y, definido em tokens.css por faixa). Container: 87,5% de largura, no máximo 1260px. ═════════════════════════════════════════════════════════════════════════ */ /* ÂNCORAS: o recuo da barra é aplicado EM UM LUGAR SÓ, e o lugar é o scroll-padding-top do (css/base.css: --nav-h + --s-6 = 92px). O scroll-margin-top que existia aqui somava com ele — 92 + 84 = 176px — e todo link da barra parava a seção quase duas alturas de barra abaixo do topo, metade da folga sendo espaço morto que ninguém pediu. Os dois estão certos isoladamente e errados juntos; este é o que sai, porque o do vale para qualquer alvo de âncora da página, inclusive os que não são .secao. NÃO reintroduzir scroll-margin-top aqui. */ .secao { padding-block: var(--secao-y); background: var(--vl-bg); } /* Bloco colado no anterior: o palco roxo do problema entra logo abaixo do trilho, sem o respiro de cima duplicado. */ .secao--colada { padding-top: 0; } /* ═══ PALCO ROXO ═══════════════════════════════════════════════════════════ O único contexto em que o limão atinge contraste. Sobre off-white o limão dá 1,04 — está proibido lá fora, e a inversão de paleta vive em base.css como regra de ancestral para que seja impossível errar. ═════════════════════ */ .palco { background: var(--vl-purple); border-radius: var(--raio); padding: var(--s-24) var(--s-18); } .palco .titulo-md, .palco .titulo-lg { max-width: 18ch; } /* Duas colunas dentro do palco: o título ocupa a esquerda e a leitura a direita. Sem isso um bloco roxo de 1247px fica com todo o texto encostado na margem esquerda e meia página de roxo vazio à direita. */ .palco--duas { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: var(--s-18); align-items: end; } .palco--duas .corpo { margin-top: 0; max-width: var(--leitura-max); } .palco--duas .btn { margin-top: var(--s-8); } .palco--beat { padding: var(--s-8); border-radius: var(--raio); } .palco--dados { margin-top: var(--s-16); padding: var(--s-16) var(--s-18); } /* ═══ DADOS ════════════════════════════════════════════════════════════════ Número nunca aparece sozinho: o rótulo colado nele carrega a base de comparação e a condição. ═══════════════════════════════════════════════ */ .grid-dado { display: grid; /* Colunas com teto: dois dados esticados em 1fr num painel de 1100px deixam o rótulo (22ch) boiando no meio de muito roxo vazio. Com teto e justify-content:start eles ficam agrupados e legíveis. */ grid-template-columns: repeat(auto-fit, minmax(200px, 320px)); justify-content: start; gap: var(--s-12) var(--s-16); } .grid-dado--um { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: var(--s-8); } .dado-bloco { min-width: 0; } /* ═══ PASSOS ═══════════════════════════════════════════════════════════════ */ .passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-12); margin-top: var(--s-16); } .passo { border-top: 1px solid var(--vl-rule); padding-top: var(--s-6); } .passo__n { display: block; font-family: var(--f-display); font-weight: 500; font-size: 15px; letter-spacing: .02em; color: var(--vl-purple); margin-bottom: var(--s-4); font-variant-numeric: tabular-nums; } .passo .titulo-sm { max-width: 18ch; } /* ═══ RECURSOS ═════════════════════════════════════════════════════════════ */ .recursos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-12) var(--s-16); margin-top: var(--s-16); } .recurso { border-top: 1px solid var(--vl-rule); padding-top: var(--s-6); } .recurso .titulo-sm { max-width: 20ch; } .recurso .legenda { max-width: 38ch; } /* ═══ O FECHO ══════════════════════════════════════════════════════════════ O último trecho não é mais uma seção como as outras: é uma tela inteira de papel com o pedido sozinho no meio. O silêncio é o material aqui — a pessoa acabou de ver a peça trocar de corpo, e a única coisa que a página faz com isso é esperar. A tela cheia É o respiro: não há enchimento inventado por cima do --secao-y, porque a altura mínima já garante que nada mais divide a atenção com o botão quando ele entra em quadro. Nada some quando a tela é baixa — a seção simplesmente cresce a partir do conteúdo. Coluna única e centrada de propósito: as duas colunas do palco roxo servem para dividir título e leitura em um bloco largo, e dividir é exatamente o que um fecho não deve fazer. ══════════════════════════════════════════════ */ .secao--fecho { min-height: calc(100 * var(--vh-unit)); display: grid; align-content: center; } .fecho { display: flex; flex-direction: column; align-items: center; text-align: center; } .fecho__titulo { max-width: 18ch; } .fecho__corpo { max-width: var(--leitura-max); margin-top: var(--s-6); } /* O botão que fecha o filme. Maior e mais lento que qualquer outro da página: o enchimento é o dobro na vertical, a tipografia sobe um degrau para --t-lead e a troca de cor usa --dur-slow em vez de --dur-quick. Mesma curva, mesma escala de durações — só a ponta lenta dela, que é o que faz o botão responder sem pressa nenhuma. */ /* O BOTÃO ABRE A SEÇÃO, então a margem de cima saiu: ela existia para separá-lo do texto que vinha antes, e agora não vem nada antes dele. */ .btn--fecho { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 0; padding: var(--s-4) var(--s-12); min-height: var(--tap-min); transition: background-color var(--dur-slow) var(--ease-out), color var(--dur-slow) var(--ease-out); } .btn--fecho .btn__rotulo { font-size: var(--t-lead); line-height: 1.2; } /* O SUB-RÓTULO É APOIO, NÃO SEGUNDO BOTÃO: menor, em caixa alta e com a tinta rebaixada do próprio roxo. Ele diz o que o gesto faz; o rótulo diz o que é. Duas linhas do mesmo peso disputariam a leitura entre si. */ .btn--fecho .btn__sub { font-family: var(--f-body); font-size: var(--t-caption); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--vl-on-purple-soft); } /* O título perdeu quem o precedia e ganha o respiro que era do botão. */ .fecho__titulo { margin-top: var(--s-12); } /* ═══ RODAPÉ ═══════════════════════════════════════════════════════════════ Uma linha e uma assinatura. A navegação repetida saiu: logo abaixo do pedido final ela era uma segunda oferta, e "Ver funcionando" aparecia duas vezes com um filete de distância. O que fica é o que a marca deve a quem chegou até aqui — a declaração de origem das imagens. Sem lockup: existem exatamente DUAS cópias da assinatura no documento (barra e voo), mais a do carregamento, que é dispensada antes de qualquer rolagem. Uma quarta só criaria mais uma para manter. ═══════════════════════════ */ .rodape { background: var(--vl-bg); border-top: 1px solid var(--vl-rule); padding-block: var(--s-16); padding-bottom: calc(var(--s-16) + env(safe-area-inset-bottom)); } .rodape__inner { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-4) var(--s-8); } .rodape__nota { font-size: var(--t-caption); line-height: var(--lh-caption); letter-spacing: var(--tk-caption); color: var(--vl-ink-faint); max-width: 56ch; } /* (.rodape__marca saiu junto com a assinatura do rodapé — ver o comentário no index.html. Regra sem nó é regra que envelhece sozinha e engana a próxima leitura do arquivo, e este projeto já pagou por CSS descrevendo o que não existe mais.) */ /* ═══ FAIXAS ═══════════════════════════════════════════════════════════════ */ @media (max-width: 1068px) { .palco { padding: var(--s-20) var(--s-12); } .palco--dados { margin-top: var(--s-12); padding: var(--s-12); } .passos, .recursos { margin-top: var(--s-12); gap: var(--s-10); } } @media (max-width: 935px) { .palco--duas { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); align-items: start; } .palco .titulo-md, .palco .titulo-lg { max-width: 22ch; } } @media (max-width: 734px) { .palco { padding: var(--s-16) var(--s-8); } .palco--dados { padding: var(--s-12) var(--s-8); } .palco > .titulo-md, .palco > .titulo-lg { max-width: none; } .passos { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); } .recursos { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); } .grid-dado { grid-template-columns: minmax(0, 1fr); gap: var(--s-10); } .rodape { padding-block: var(--s-12); padding-bottom: calc(var(--s-12) + env(safe-area-inset-bottom)); } }