/* preloader.css — protótipo isolado (só _prototipos/index-preloader.html referencia este arquivo; index.html de produção não linka isso). Cortina opaca fixa cobrindo a tela inteira — o hero real já existe embaixo, na posição normal, sem precisar de nenhum truque de opacidade nele: some simplesmente porque a cortina cobre tudo até ser dispensada. Estado inicial controlado por .preloader-active na (aplicada por um script síncrono inline no , ver index-preloader.html) — evita flash do hero normal antes do JS assumir. Fallback seguro: sem a classe, tudo aqui é inerte e a página se comporta como o index.html de produção. */ .preloader { display: none; position: fixed; inset: 0; z-index: 9999; /* grid de pontos discreto (camada de cima) + o mesmo degradê que o canvas usava — o canvas agora fica transparente e deixa isso aparecer embaixo das partículas, ver js/preloader.js */ background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1.2px) 0 0 / 26px 26px, linear-gradient(135deg, #131314, #1b1b1d); transform: translateY(0); opacity: 1; transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.9s ease; } html.preloader-active .preloader { display: block; } .preloader.is-leaving { transform: translateY(-100%); } .preloader__canvas { position: absolute; inset: 0; width: 100%; height: 100%; } /* Logo (mesmo arquivo da navbar) em cima do numeral "40" — tamanho contido pra ficar em proporção parecida com o CTA (não um logo "de hero", só uma assinatura discreta no topo). top:10% (espelhando ingenuamente o bottom:10% do CTA) ficou colado no numeral — o centro do "40" NÃO é centralizado na tela: cy = H*0.42 e fit = min(W,H)*0.56 (ver layout() em js/preloader.js), de propósito deixando mais espaço embaixo pro CTA. Isso põe o topo do numeral em ~H*(0.42-0.28) ≈ 14% da tela — um top:10% de logo (mais ~32px de altura) sobrava quase nada de vão. 6% dá folga de verdade sem aproximar demais do topo real da tela. Não é simetria perfeita com o CTA (o design já não é simétrico de propósito), é só respiro suficiente pra não parecer colado. */ .preloader__logo { position: absolute; top: 6%; left: 50%; transform: translateX(-50%); height: 32px; width: auto; z-index: 1; } .preloader__cta { position: fixed; left: 50%; bottom: 10%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; background: transparent; border: 0; color: var(--ds-branco, #fff); font-family: var(--ds-font-family-base); font-size: var(--ds-size-14, 14px); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.6s ease; z-index: 2; } .preloader__cta.is-visible { opacity: 1; pointer-events: auto; } .preloader__cta-arrow { display: flex; animation: preloader-cta-bounce 1.6s ease-in-out infinite; } @keyframes preloader-cta-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } @media (prefers-reduced-motion: reduce) { .preloader__cta-arrow { animation: none; } .preloader { transition: none; } }