/* ========================================================================== HERO Seção de abertura do site, exibida assim que o preloader termina. Título, subtítulo e botões começam invisíveis e um pouco deslocados para baixo (opacity: 0 + translateY) — é esse estado inicial que o GSAP (js/hero.js) anima até a posição final, criando a entrada em cascata. ========================================================================== */ /* Fundo fixo com rede de partículas (ver .hero_particles e js/particles.js). O canvas fica "grudado" na tela atrás de tudo (position: fixed no body). A Hero usa a mesma cor translúcida das outras seções (uma camada só, var(--color-bg-translucent)) pra ficar no mesmo nível de transparência do resto do site — sem isso, a Hero ficaria com o canvas "cru" (sem nenhum filtro, só a vinheta do ::before), bem mais forte/vivo que as outras seções. Assim que a página rola pra próxima seção, ela cobre o canvas naturalmente, criando o efeito de fundo fixo enquanto o site "desce" por cima. */ .hero { position: relative; /* isolation: isolate cria um novo contexto de empilhamento pra Hero. Sem isso, o z-index dos filhos (.hero_inner, .hero::before) "vazava" pro contexto raiz da página e ficava por cima até do menu mobile aberto (header .navegacao-primaria.ativado) — por isso o menu aparecia meio "por baixo"/transparente no celular. */ isolation: isolate; background-color: var(--color-bg-translucent); min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 60px 40px; overflow: hidden; } /* Canvas da rede de partículas — fixo no viewport, atrás de todo o resto do site. z-index negativo garante que toda seção com fundo sólido (Serviços, Projetos, etc.) o cubra normalmente ao rolar a página. */ .hero_particles { position: fixed; top: 0; left: 50%; width: 100%; /* Mesma largura máxima do (ver style.css), centralizado com o truque left:50% + translateX(-50%) — assim o canvas nunca "vaza" nas laterais em telas largas, onde o site já limita tudo a 1200px. */ max-width: 1200px; /* é um elemento "replaced" — diferente de uma div comum, ele NÃO estica sozinho só com top:0/bottom:0, precisa de altura explícita. 100vh é o suspeito nº1 de o efeito não aparecer no celular: no mobile, 100vh conta com a barra de endereço RECOLHIDA, então em alguns navegadores (principalmente Safari/iOS) o canvas nasce com altura errada (às vezes 0) na hora que a página carrega. 100dvh ("dynamic viewport height") resolve isso usando a altura real visível — a linha de cima fica só como fallback pra navegador muito antigo que não conhece dvh. */ height: 100vh; height: 100dvh; transform: translateX(-50%); z-index: -1; background-color: var(--color-bg); pointer-events: none; } /* Esse ::before ficou "morto" de propósito (sem background). Antes ele tinha uma vinheta (linear + radial-gradient) pra escurecer bordas/rodapé da Hero e dar contraste ao texto — mas isso era necessário quando a Hero não tinha fundo translúcido próprio (mostrava o canvas "cru"). Agora que .hero já tem var(--color-bg-translucent) (mesma camada única das outras seções, ver acima), somar a vinheta por cima criava uma SEGUNDA camada escura ali (mesmo tipo de bug do body+seção duplicados que já corrigimos) — deixava a Hero visivelmente mais escura/apagada que o resto do site, sobretudo nas bordas. O texto já tem contraste de sobra só com a camada translúcida padrão (é o que acontece em todas as outras seções). Mantido o seletor (não o elemento) caso algum dia valha a pena reintroduzir um efeito bem sutil aqui. */ .hero::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; } /* ---- Fundo "aurora" (NÃO usado mais na Hero — substituído pela rede de partículas fixa, .hero_particles). Deixado aqui porque os keyframes auroraFloat1/2 são reaproveitados pelo fundo da seção de Contato (ver .contact_aurora em style.css). 3 manchas de luz coloridas, borradas, se movendo lentamente. Cada é um círculo com gradiente radial; o filter: blur() funde as bordas, e o keyframe move/escala cada uma em um tempo e direção diferentes para o efeito parecer orgânico, não sincronizado. mix-blend-mode: screen deixa as cores se somarem onde se sobrepõem, como luzes. */ .hero_aurora { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .hero_aurora span { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .6; mix-blend-mode: screen; } .hero_aurora span:nth-child(1) { width: 480px; height: 480px; top: -140px; left: -100px; background: radial-gradient(circle, var(--color-accent-cta), transparent 70%); animation: auroraFloat1 20s ease-in-out infinite; } .hero_aurora span:nth-child(2) { width: 420px; height: 420px; bottom: -150px; right: -80px; background: radial-gradient(circle, var(--color-accent), transparent 70%); animation: auroraFloat2 24s ease-in-out infinite; } .hero_aurora span:nth-child(3) { width: 360px; height: 360px; top: 25%; left: 42%; background: radial-gradient(circle, #0ea5e9, transparent 70%); animation: auroraFloat3 28s ease-in-out infinite; } @keyframes auroraFloat1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(70px, 50px) scale(1.15); } } @keyframes auroraFloat2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-60px, -40px) scale(1.1); } } @keyframes auroraFloat3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-50px, 60px) scale(1.2); } } /* Quem prefere menos movimento na tela não precisa das manchas animando */ @media (prefers-reduced-motion: reduce) { .hero_aurora span { animation: none; } } .hero_inner { position: relative; z-index: 2; max-width: 720px; display: grid; justify-items: center; gap: 24px; text-align: center; } /* Estado inicial (antes do GSAP animar): invisível e 24px mais abaixo do lugar final */ .hero_title, .hero_subtitle, .hero_actions { opacity: 0; transform: translateY(24px); } .hero_title { font-family: 'Poppins'; font-weight: 700; color: var(--color-text); font-size: 28px; line-height: 1.3; } .hero_subtitle { font-family: 'Poppins'; font-weight: 300; color: var(--color-text); font-size: 16px; line-height: 1.6; max-width: 560px; } .hero_actions { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; } .hero_cta { padding: 15px 36px; border-radius: var(--radius-sm); font-family: 'Poppins'; font-weight: 600; color: var(--color-text); transition: transform var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } .hero_cta--primary { background-color: var(--color-accent-cta); color: var(--color-accent-cta-text); } .hero_cta--primary:hover { background-color: var(--color-accent-cta-hover); transform: translateY(-2px); } .hero_cta--secondary { border: 2px solid var(--color-text); } .hero_cta--secondary:hover { border-color: var(--color-accent); color: var(--color-accent); transform: translateY(-2px); } @media (min-width: 993px) { .hero { min-height: 75vh; } .hero_title { font-size: 42px; } .hero_subtitle { font-size: 19px; } } @media (max-width: 480px) { .hero { padding: 30px 20px; } .hero_title { font-size: 22px; } .hero_actions { flex-direction: column; width: 100%; } .hero_cta { width: 100%; } }