/* ============================================================ HERO SCROLL VIDEO — Aelius Solar Inclua este arquivo no do index.php, depois do CSS do template (bootstrap.css / style.css etc), para que estas regras tenham prioridade quando necessário: ============================================================= */ .hero-scroll { position: relative; /* altura total de scroll disponível para a animação do vídeo. Quanto maior, mais "devagar" o vídeo avança por scroll. */ height: var(--scroll-height, 300vh); } .hero-scroll__sticky { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; background: #0a0a0a; } .hero-scroll__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } /* "película" sobre o vídeo: escurecimento neutro (preto, sem matiz de cor), mais denso e uniforme (clima editorial/cinematográfico) — mais forte à esquerda (onde o texto fica) e no rodapé, mas sem cair a zero em nenhum ponto do quadro, então o vídeo nunca "estoura" claro por baixo do texto. */ .hero-scroll__overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient( 90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.55) 32%, rgba(0, 0, 0, 0.38) 58%, rgba(0, 0, 0, 0.3) 100% ), linear-gradient( 180deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.14) 26%, rgba(0, 0, 0, 0.14) 68%, rgba(0, 0, 0, 0.58) 100% ); pointer-events: none; } .hero-scroll__content { position: relative; z-index: 3; height: 100%; display: flex; align-items: center; padding: 0 6vw; } /* cada bloco de texto ocupa o mesmo espaço, empilhados, e o JS alterna a visibilidade via classe .is-active */ .hero-text { position: absolute; left: 6vw; right: 6vw; max-width: 640px; opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; pointer-events: none; } .hero-text.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; } .hero-text__eyebrow { display: inline-block; font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.72rem; font-weight: 500; color: var(--solar-highlight, #C9703C); margin-bottom: 0.75rem; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); } .hero-text__title { font-family: 'Space Grotesk', 'Segoe UI', sans-serif; color: #ffffff; font-size: clamp(1.8rem, 4vw, 3.2rem); line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 1rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.35); } .hero-text__desc { color: rgba(255, 255, 255, 0.9); font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.5; max-width: 480px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); } .hero-text__cta { display: inline-block; margin-top: 1rem; padding: 0.85rem 1.75rem; background: var(--solar-highlight, #C9703C); color: #ffffff; font-weight: 600; border-radius: 0.5rem; text-decoration: none; transition: background 0.3s ease, transform 0.25s ease, box-shadow 0.3s ease; } .hero-text__cta:hover { transform: translateY(-2px); box-shadow: 0 8px 20px hsla(22, 57%, 51%, 0.4); background: hsl(22, 57%, 44%); color: #ffffff; } .hero-scroll__scroll-hint { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: rgba(255, 255, 255, 0.75); font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; letter-spacing: 0.24em; text-transform: uppercase; animation: heroHintFade 2.5s ease-in-out infinite; } .hero-scroll__scroll-hint span { width: 1px; height: 32px; background: rgba(255, 255, 255, 0.6); } @keyframes heroHintFade { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } /* mobile: reduz a altura de scroll para não ficar excessivamente longo, e ajusta paddings */ @media (max-width: 768px) { .hero-scroll { height: 280vh; } .hero-scroll__content { padding: 0 5vw; } .hero-text { left: 5vw; right: 5vw; } }