/* ========================================================================= ZAIA LANDING PAGES — SHARED THEME Design tokens + componentes reutilizáveis para todas as landing pages. Qualquer LP nova deve importar apenas este arquivo + landing-engine.js e seguir os data-attributes documentados no topo do landing-engine.js. ========================================================================= */ :root { --primary: #7C3AED; --primary-hover: #6D28D9; --primary-light: #F3E8FF; --primary-border: #DDD6FE; --primary-rgb: 124, 58, 237; --dark: #0F172A; --dark-surface: #1E293B; --text: #334155; --text-muted: #64748B; --bg: #FFFFFF; --bg-alt: #F8FAFC; --white: #FFFFFF; --success: #10B981; --border: #E2E8F0; /* cor do botão de CTA (.btn-cta) — separada de --primary de propósito: verde contrasta melhor com o roxo da marca e converte melhor que um botão da mesma cor do resto da página. Uma LP futura que quiser CTA roxo de novo só precisa sobrescrever --cta/--cta-hover/--cta-shadow. */ --cta: #16A34A; --cta-hover: #15803D; --cta-shadow: 22, 163, 74; --font-body: system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-display: 'Newsreader', Georgia, serif; --font-weight-body: 400; --font-weight-heading: 700; --font-weight-hero: 700; --font-weight-display: 600; --text-hero: 52px; --text-title: 40px; --text-sub: 21px; --line-body: 1.6; --line-hero: 1.15; --tracking-hero: -1.5px; --tracking-title: -1px; --btn-font: 16px; --btn-pad-y: 14px; --btn-pad-x: 24px; --btn-weight: 600; --btn-tracking: 0.5px; --radius-button: 16px; --radius-card: 24px; --space-section: 95px; --container-max: 1120px; /* tokens da mecânica de gate/pip — cada LP pode sobrescrever via inline style no se precisar */ --lp-gate-seconds: 40; --lp-header-h: 64px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-weight: var(--font-weight-body); background-color: var(--bg); color: var(--text); line-height: var(--line-body); } /* Display accent: use sparingly for editorial emphasis, never for utility copy. */ .lp-editorial { font-family: var(--font-display); font-style: italic; font-weight: var(--font-weight-display); } .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; } /* ========================================================================= ANIMAÇÕES DE ENTRADA (primeira dobra) ========================================================================= */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate { opacity: 0; animation: fadeIn 0.8s ease forwards; } .delay-1 { animation-delay: 0.2s; } .delay-2 { animation-delay: 0.4s; } .delay-3 { animation-delay: 0.6s; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .animate, .reveal { animation: none !important; opacity: 1 !important; transform: none !important; } } /* ========================================================================= MOTOR DE GATE (trava de conteúdo até liberar o restante da página) Estado padrão = travado. O landing-engine.js adiciona .lp-unlocked no quando o tempo configurado em data-lp-gate-seconds expira. ========================================================================= */ /* Não travamos overflow-y: o .lp-content já fica display:none durante o gate, então não há nada "além" do hero para vazar. Se o hero for mais alto que a viewport (vídeo grande + título + subtítulo), o usuário precisa poder rolar dentro dele para ver o player inteiro — travar o scroll aqui impedia isso. */ html.lp-locked, body.lp-locked { overflow-x: hidden; } .lp-content { display: none; opacity: 0; transform: translateY(28px); } body.lp-unlocked .lp-content { display: block; transition: opacity 1s ease, transform 1s ease; } body.lp-unlocked .lp-content.lp-fade-in { opacity: 1; transform: translateY(0); } /* barra de progresso fina no topo, enquanto o conteúdo está travado */ .lp-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--primary), #A78BFA); z-index: 2000; transition: width 0.2s linear, opacity 0.5s ease; } .lp-progress.lp-hide { opacity: 0; pointer-events: none; } /* dica de scroll (seta/bounce) exibida assim que libera o conteúdo */ .lp-scroll-cue { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--primary); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; opacity: 0; pointer-events: none; transition: opacity 0.6s ease; z-index: 50; } .lp-scroll-cue.lp-show { opacity: 1; pointer-events: auto; } .lp-scroll-cue.lp-fade-out { opacity: 0; } .lp-scroll-cue i { font-size: 20px; animation: lpBounce 1.6s ease-in-out infinite; } @keyframes lpBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } } /* CTA travado até o gate liberar */ .btn-cta[data-lp-gated-cta] { position: relative; transition: all 0.3s ease; } body.lp-locked .btn-cta[data-lp-gated-cta] { opacity: 0.55; cursor: not-allowed; box-shadow: none; transform: none !important; } .btn-cta[data-lp-gated-cta] .lp-cta-hint { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px); background: var(--dark); color: var(--white); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; padding: 8px 14px; border-radius: 8px; white-space: nowrap; opacity: 0; pointer-events: none; transition: all 0.25s ease; } .btn-cta[data-lp-gated-cta] .lp-cta-hint::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--dark); } .btn-cta[data-lp-gated-cta].lp-shake .lp-cta-hint { opacity: 1; transform: translateX(-50%) translateY(0); } @keyframes lpShake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } } .btn-cta[data-lp-gated-cta].lp-shake { animation: lpShake 0.4s ease; } /* ========================================================================= REVEAL ON SCROLL (seções que aparecem suavemente ao entrar na viewport) ========================================================================= */ .reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.8s ease, transform 0.8s ease; } .reveal.in-view { opacity: 1; transform: translateY(0); } .reveal-1.in-view { transition-delay: 0.08s; } .reveal-2.in-view { transition-delay: 0.16s; } .reveal-3.in-view { transition-delay: 0.24s; } .reveal-4.in-view { transition-delay: 0.32s; } .reveal-5.in-view { transition-delay: 0.4s; } /* ========================================================================= HEADER ========================================================================= */ header { background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); padding: 16px 0; position: sticky; top: 0; z-index: 1000; text-align: center; } .tag-header { display: inline-flex; align-items: center; gap: 8px; background-color: var(--primary-light); color: var(--primary); font-weight: 700; font-size: 13px; padding: 6px 20px; border-radius: 50px; text-transform: uppercase; letter-spacing: 0.8px; } /* ========================================================================= HERO SECTION ========================================================================= */ .hero { padding: clamp(32px, 6vh, 64px) 0 clamp(40px, 8vh, 90px); text-align: center; background: radial-gradient(circle at top right, #F5F3FF, transparent 45%); position: relative; } .hero h1 { font-size: var(--text-hero); font-weight: var(--font-weight-hero); color: var(--dark); line-height: var(--line-hero); max-width: 950px; margin: 0 auto 24px; letter-spacing: var(--tracking-hero); } .hero h1 span { color: var(--primary); } .hero p.sub { font-size: var(--text-sub); color: var(--text-muted); max-width: 820px; margin: 0 auto 48px; font-weight: var(--font-weight-body); } /* ========================================================================= VÍDEO — dobra inicial + player fixo (PIP) ao rolar Por padrão o vídeo é um elemento normal, dentro do fluxo do hero — 100% alinhado com o subtítulo e o CTA, sem nenhum cálculo de JS envolvido. Só quando ele está prestes a sair de vista (scroll passa por baixo do header) o JS "congela" o tamanho atual, alterna para position:fixed e anima até o canto inferior (esquerdo ou direito, configurável via data-lp-pin-corner no .video-box). Isso evita qualquer lag/dessincronia visual em relação ao texto ao redor durante o scroll. ========================================================================= */ /* largura limitada por 3 fatores: teto de 900px, 92% da viewport, OU o equivalente em largura de 50vh de altura — o que for menor "ganha", então o player nunca fica mais alto que ~50% da tela e cabe sem precisar rolar na maioria dos monitores/notebooks. */ .video-box { position: relative; width: min(900px, 92vw, calc(50vh * 16 / 9)); /* aspect-ratio (Safari 15+/2021) dá o tamanho certo imediatamente, antes até do JS rodar. Em navegadores sem suporte (comum em Mac com Safari desatualizado, já que ele fica preso à versão do macOS e não atualiza sozinho como o Chrome) a caixa colapsaria pra altura 0 — por isso o JS (ver PIP no landing-engine.js) também calcula e força a altura certa via style.height, garantindo o resultado em qualquer navegador independente de suporte a aspect-ratio. */ aspect-ratio: 16 / 9; margin: 0 auto 50px; background-color: var(--dark); border-radius: var(--radius-card); box-shadow: 0 30px 60px rgba(var(--primary-rgb), 0.22); border: 1px solid rgba(var(--primary-rgb), 0.3); overflow: hidden; z-index: 500; } /* aplicada só no instante do "encaixe" no canto, para animar suavemente (adicionada depois de congelar o tamanho atual via inline style, então nunca entra em conflito com o estado de repouso) */ .video-box.lp-pin-anim { transition: top 0.45s cubic-bezier(.16,1,.3,1), left 0.45s cubic-bezier(.16,1,.3,1), width 0.45s cubic-bezier(.16,1,.3,1), height 0.45s cubic-bezier(.16,1,.3,1), border-radius 0.45s ease, box-shadow 0.45s ease; } /* "inset: 0" também é recente (Safari 14.1+/2021) — top/right/bottom/left explícitos fazem a mesma coisa e funcionam em qualquer navegador. */ .video-box video, .video-box .video-poster, .video-box [data-lp-youtube] { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; background: #000; } /* a API do YouTube apaga a div [data-lp-youtube] e põe um