/* =============== EM BREVE (waitlist) =============== */ /* HERO — seção principal centralizada */ .em-breve-hero{ padding: 96px 0 80px; background: radial-gradient(900px 420px at 50% 0%, color-mix(in oklab, var(--brand-primary) 14%, transparent) 0%, transparent 60%), var(--bg-primary); text-align: center; } .em-breve-hero k-eyebrow, .em-breve-hero .eyebrow{ display: inline-block; } .em-breve-hero h1{ margin: 0 auto 16px; max-width: 640px; } .em-breve-hero .lead{ max-width: 520px; margin: 0 auto 36px; color: var(--text-secondary); font-size: 18px; } /* Form de inscrição — largura confortável, centralizado */ .em-breve-hero form{ max-width: 440px; margin: 0 auto; display: grid; gap: 16px; text-align: left; } /* Honeypot anti-spam — invisível para humanos, armadilha para bots */ .hp-field{ position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; } /* Checkbox LGPD */ .lgpd-check{ display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; } .lgpd-check input[type="checkbox"]{ flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand-primary); } .lgpd-check a{ color: var(--brand-primary); text-decoration: underline; text-underline-offset: 2px; } /* Botão de submit ocupa a largura total do form */ .em-breve-hero form k-button, .em-breve-hero form .k-btn{ width: 100%; } /* Estado de envio em progresso */ .em-breve-hero form.submetendo{ opacity: .7; pointer-events: none; } /* PAINEL DE SUCESSO — confirmação "Você está na lista" */ .em-breve-success{ max-width: 440px; margin: 0 auto; padding: 32px 28px; background: color-mix(in oklab, var(--success-strong) 8%, var(--bg-primary)); border: 1.5px solid color-mix(in oklab, var(--success-strong) 28%, transparent); border-radius: var(--r-xl); text-align: center; } .em-breve-success h2{ font-family: var(--font-display); font-size: 22px; font-weight: 600; margin: 0 0 10px; color: var(--text-primary); letter-spacing: -.02em; } .em-breve-success p{ color: var(--text-secondary); font-size: 15px; line-height: 1.6; margin: 0; } /* Modo escuro — sem ajuste necessário: todas as propriedades usam tokens que já variam via [data-theme="dark"] no (tokens.css). */ /* Responsivo */ @media (max-width: 480px){ .em-breve-hero{ padding: 72px 0 60px; } .em-breve-hero .lead{ font-size: 16px; } .em-breve-success{ padding: 24px 20px; } }