/* --------------------------------------------------------------------------- palco.css — a estrutura mínima da rolagem coreografada. Só o esqueleto: cor, tipo e layout do conteúdo são de cada projeto. --------------------------------------------------------------------------- */ /* Ato = seção alta. Dentro dela um palco `sticky` de uma tela, que fica parado enquanto você rola. A rolagem continua NATIVA — barra, inércia do trackpad, momentum do iPhone, teclado. O que a altura da seção faz é dar "tempo" ao ato: 300vh = três telas de rolagem para o progresso ir de 0 a 1. */ .ato { position: relative; } .ato__palco { position: sticky; top: 0; height: 100svh; /* svh, não vh: no iOS a barra do Safari come o vh */ overflow: hidden; display: grid; place-items: center; padding: max(4rem, env(safe-area-inset-top, 0px)) var(--gutter, 1.5rem) 5rem; } .ato__conteudo { width: min(100%, 1080px); } /* Pino horizontal. A trilha é mais larga que a coluna de propósito; o `overflow: hidden` no pai é o que impede os cards de invadirem o crômo fixo da direita, e a máscara dissolve a borda em vez de cortar a faca. */ .trilha { display: flex; gap: clamp(1rem, 2.4vw, 2rem); will-change: transform; } .trilha-recorte { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 0 88%, transparent 100%); mask-image: linear-gradient(90deg, #000 0 88%, transparent 100%); } /* Barra de progresso do documento inteiro. */ [data-barra-progresso] { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 80; background: currentColor; transform: scaleX(0); transform-origin: left; will-change: transform; } /* Índice lateral: quantos atos existem, onde estou, o que vem depois. É a peça que resolve o "não sei que tem mais coisa embaixo" de página sem rolagem aparente. Some no celular. */ [data-trilho] { position: fixed; right: max(1rem, var(--gutter, 1.5rem)); top: 50%; transform: translateY(-50%); z-index: 85; display: grid; gap: .85rem; justify-items: end; } [data-trilho] a { display: flex; align-items: center; gap: .6rem; text-decoration: none; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; opacity: .45; transition: opacity .4s, color .4s; } [data-trilho] a::after { content: ""; width: 16px; height: 1px; background: currentColor; transition: width .4s; } [data-trilho] a[aria-current="true"] { opacity: 1; } [data-trilho] a[aria-current="true"]::after { width: 32px; } @media (max-width: 980px) { [data-trilho] { display: none; } } /* --------------------------------------------------------------------------- A REGRA QUE NÃO SE NEGOCIA A página nasce LEGÍVEL. Os estados iniciais escondidos só valem quando o JS marca `data-coreo` no . Sem JS, com leitor de tela ou com movimento reduzido, isto vira uma página comum que rola — e o buscador lê tudo, porque o texto está no HTML e não dentro do script. --------------------------------------------------------------------------- */ [data-coreo] [data-entra] { opacity: 0; } @media (prefers-reduced-motion: reduce) { .ato { height: auto !important; } .ato__palco { position: relative; height: auto; padding-block: 4.5rem; } .trilha { flex-wrap: wrap; transform: none !important; } .trilha-recorte { overflow: visible; -webkit-mask-image: none; mask-image: none; } [data-coreo] [data-entra] { opacity: 1 !important; transform: none !important; } }