/* ========================================================================== landing.css — Página de Captura Pública Suporte a tema Dark (1) e Light (2) via data-lp-theme no Autocontido: não herda variáveis do tema da plataforma ========================================================================== */ /* ────────────────────────────────────────────────────────────────────────── TOKENS — Light (padrão) ────────────────────────────────────────────────────────────────────────── */ :root, [data-lp-theme="light"] { /* Fundo geral */ --lp-page-bg: #f0f2f8; /* Tipografia */ --lp-text: #1a1a2e; --lp-text-muted: #6b7280; --lp-text-faint: #9ca3af; /* Card do formulário */ --lp-card-bg: #ffffff; --lp-card-border: rgba(0, 0, 0, 0.06); --lp-card-shadow: 0 12px 48px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.05); /* Inputs */ --lp-input-bg: #f9fafb; --lp-input-bg-focus: #ffffff; --lp-input-border: #e5e7eb; --lp-input-border-focus:#16a34a; --lp-input-shadow-focus:rgba(34, 197, 94, 0.12); --lp-input-text: #1a1a2e; --lp-input-placeholder: #b0b7c3; --lp-label: #374151; --lp-icon-color: #9ca3af; --lp-icon-focus: #16a34a; --lp-icon-divider: #e5e7eb; /* Hero com imagem de fundo (ambos os temas usam dark pois vem da imagem) */ --lp-hero-bg: linear-gradient(135deg, #1a1a2e 0%, #16213e 55%, #0f3460 100%); --lp-hero-overlay: rgba(0, 0, 0, 0.40); /* Hero sem imagem (plain) */ --lp-hero-plain-bg: #ffffff; --lp-hero-plain-border: rgba(0, 0, 0, 0.06); --lp-hero-plain-text: #1a1a2e; --lp-hero-plain-sub: #555e6e; /* Cards de ação (obrigado) */ --lp-action-card-bg: #ffffff; --lp-action-card-border:rgba(0, 0, 0, 0.06); --lp-action-card-shadow:0 4px 24px rgba(0, 0, 0, 0.08); --lp-action-title: #1a1a2e; --lp-action-text: #6b7280; /* Success simples */ --lp-success-bg: #ffffff; --lp-success-text: #6b7280; /* Progresso */ --lp-progress-track: #e5e7eb; /* Trust badge */ --lp-trust-color: #9ca3af; /* Footer */ --lp-footer-bg: #1a1a2e; --lp-footer-copy: rgba(255, 255, 255, 0.85); --lp-footer-text: rgba(255, 255, 255, 0.50); --lp-footer-link: rgba(255, 255, 255, 0.70); /* Toast */ --lp-toast-success-bg: #f0fdf4; --lp-toast-success-border: #bbf7d0; --lp-toast-success-text: #166534; --lp-toast-error-bg: #fef2f2; --lp-toast-error-border: #fecaca; --lp-toast-error-text: #991b1b; --lp-toast-info-bg: #eff6ff; --lp-toast-info-border: #bfdbfe; --lp-toast-info-text: #1e40af; } /* ────────────────────────────────────────────────────────────────────────── TOKENS — Dark ────────────────────────────────────────────────────────────────────────── */ [data-lp-theme="dark"] { --lp-page-bg: #0b0d16; --lp-text: #e8eaf6; --lp-text-muted: rgba(255, 255, 255, 0.50); --lp-text-faint: rgba(255, 255, 255, 0.30); --lp-card-bg: #13162a; --lp-card-border: rgba(255, 255, 255, 0.07); --lp-card-shadow: 0 12px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255,255,255,0.04); --lp-input-bg: #0f1122; --lp-input-bg-focus: #141728; --lp-input-border: rgba(255, 255, 255, 0.09); --lp-input-border-focus:#22c55e; --lp-input-shadow-focus:rgba(34, 197, 94, 0.15); --lp-input-text: #e8eaf6; --lp-input-placeholder: rgba(255, 255, 255, 0.25); --lp-label: rgba(255, 255, 255, 0.70); --lp-icon-color: rgba(255, 255, 255, 0.30); --lp-icon-focus: #22c55e; --lp-icon-divider: rgba(255, 255, 255, 0.08); --lp-hero-bg: linear-gradient(135deg, #040508 0%, #0b0d18 55%, #0d1124 100%); --lp-hero-overlay: rgba(0, 0, 0, 0.55); --lp-hero-plain-bg: #10132200; --lp-hero-plain-border: rgba(255, 255, 255, 0.05); --lp-hero-plain-text: #e8eaf6; --lp-hero-plain-sub: rgba(255, 255, 255, 0.55); --lp-action-card-bg: #13162a; --lp-action-card-border:rgba(255, 255, 255, 0.07); --lp-action-card-shadow:0 4px 32px rgba(0, 0, 0, 0.50); --lp-action-title: #e8eaf6; --lp-action-text: rgba(255, 255, 255, 0.50); --lp-success-bg: #13162a; --lp-success-text: rgba(255, 255, 255, 0.50); --lp-progress-track: rgba(255, 255, 255, 0.10); --lp-trust-color: rgba(255, 255, 255, 0.30); --lp-footer-bg: #06070d; --lp-footer-copy: rgba(255, 255, 255, 0.80); --lp-footer-text: rgba(255, 255, 255, 0.35); --lp-footer-link: rgba(255, 255, 255, 0.55); --lp-toast-success-bg: rgba(34, 197, 94, 0.12); --lp-toast-success-border: rgba(34, 197, 94, 0.25); --lp-toast-success-text: #86efac; --lp-toast-error-bg: rgba(239, 68, 68, 0.12); --lp-toast-error-border: rgba(239, 68, 68, 0.25); --lp-toast-error-text: #fca5a5; --lp-toast-info-bg: rgba(76, 110, 245, 0.12); --lp-toast-info-border: rgba(76, 110, 245, 0.25); --lp-toast-info-text: #bac8ff; } /* ────────────────────────────────────────────────────────────────────────── RESET & BASE ────────────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body.landing-page { font-family: 'Inter', 'Segoe UI', Arial, sans-serif; background: var(--lp-page-bg); color: var(--lp-text); min-height: 100vh; display: flex; flex-direction: column; font-size: 16px; line-height: 1.6; transition: background 0.3s, color 0.3s; } /* ────────────────────────────────────────────────────────────────────────── HERO ────────────────────────────────────────────────────────────────────────── */ .lp-hero { position: relative; width: 100%; background: var(--lp-hero-bg); overflow: hidden; } /* Brilho decorativo no hero escuro */ .lp-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 50%, rgba(34, 197, 94, 0.08) 0%, transparent 65%); pointer-events: none; } /* Hero com imagem de fundo */ .lp-hero--with-bg { background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 280px; } .lp-hero--with-bg::after { content: ''; position: absolute; inset: 0; background: var(--lp-hero-overlay); } .lp-hero__inner { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; padding: 52px 24px 44px; text-align: center; } .lp-hero__logo { max-height: 200px; max-width: 90%; object-fit: contain; border-radius: 8px; margin-bottom: 20px; filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.45)); } .lp-hero__headline { font-size: clamp(1.2rem, 3.2vw, 1.75rem); font-weight: 800; color: #ffffff; line-height: 1.25; margin-bottom: 12px; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.45); } .lp-hero__subtitle { font-size: clamp(0.85rem, 2.2vw, 1rem); color: rgba(255, 255, 255, 0.82); max-width: 560px; margin: 0 auto; line-height: 1.65; } /* Hero sem imagem de fundo (plain) */ .lp-hero--plain { background: var(--lp-hero-plain-bg); border-bottom: 1px solid var(--lp-hero-plain-border); } .lp-hero--plain::before { display: none; } .lp-hero--plain .lp-hero__inner { padding: 32px 24px 24px; } .lp-hero--plain .lp-hero__headline { color: var(--lp-hero-plain-text); text-shadow: none; } .lp-hero--plain .lp-hero__subtitle { color: var(--lp-hero-plain-sub); } .lp-hero--plain .lp-hero__logo { filter: none; } /* ────────────────────────────────────────────────────────────────────────── SEÇÃO DO FORMULÁRIO ────────────────────────────────────────────────────────────────────────── */ .lp-form-section { padding: 40px 16px 24px; flex: 1; } .lp-form-wrapper { max-width: 560px; margin: 0 auto; } /* Card */ .lp-card { background: var(--lp-card-bg); border-radius: 20px; box-shadow: var(--lp-card-shadow); padding: 36px 32px; border: 1px solid var(--lp-card-border); transition: background 0.3s, border-color 0.3s, box-shadow 0.3s; } /* ────────────────────────────────────────────────────────────────────────── CAMPOS DE FORMULÁRIO ────────────────────────────────────────────────────────────────────────── */ .lp-field { margin-bottom: 20px; } .lp-label { display: block; font-size: 0.84rem; font-weight: 600; color: var(--lp-label); margin-bottom: 8px; letter-spacing: 0.02em; transition: color 0.3s; } .lp-input-group { display: flex; align-items: stretch; border: 1.5px solid var(--lp-input-border); border-radius: 12px; background: var(--lp-input-bg); transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s; overflow: hidden; } .lp-input-group:focus-within { border-color: var(--lp-input-border-focus); box-shadow: 0 0 0 4px var(--lp-input-shadow-focus); background: var(--lp-input-bg-focus); } .lp-input-group.lp-input-error { border-color: #ef4444; background: var(--lp-input-bg); } [data-lp-theme="dark"] .lp-input-group.lp-input-error { background: rgba(239, 68, 68, 0.06); } .lp-input-icon { display: flex; align-items: center; justify-content: center; padding: 0 14px; color: var(--lp-icon-color); font-size: 0.95rem; flex-shrink: 0; border-right: 1.5px solid var(--lp-icon-divider); background: transparent; transition: color 0.2s, border-color 0.2s; } .lp-input-group:focus-within .lp-input-icon { color: var(--lp-icon-focus); border-right-color: var(--lp-icon-divider); } .lp-input { flex: 1; border: none; outline: none; background: transparent; padding: 14px 16px; font-size: 0.95rem; color: var(--lp-input-text); font-family: inherit; transition: color 0.3s; } .lp-input::placeholder { color: var(--lp-input-placeholder); } .lp-error-msg { display: none; margin-top: 6px; font-size: 0.78rem; color: #ef4444; font-weight: 500; } .lp-field.has-error .lp-error-msg { display: block; } /* ────────────────────────────────────────────────────────────────────────── BOTÃO CTA ────────────────────────────────────────────────────────────────────────── */ .lp-btn-cta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px 24px; background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); color: #fff; font-size: 0.93rem; font-weight: 700; font-family: inherit; border: none; border-radius: 12px; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s; box-shadow: 0 6px 24px rgba(34, 197, 94, 0.38); letter-spacing: 0.01em; margin-top: 8px; position: relative; overflow: hidden; } .lp-btn-cta::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent); opacity: 0; transition: opacity 0.2s; } .lp-btn-cta:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(34, 197, 94, 0.50); } .lp-btn-cta:hover::before { opacity: 1; } .lp-btn-cta:active:not(:disabled) { transform: scale(0.99); } .lp-btn-cta:disabled { opacity: 0.7; cursor: not-allowed; transform: none; } /* Spinner de loading */ .lp-btn-cta .lp-spinner { width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; animation: lp-spin 0.75s linear infinite; display: none; flex-shrink: 0; } .lp-btn-cta.loading .lp-spinner { display: block; } .lp-btn-cta.loading .lp-btn-text { opacity: 0.65; } @keyframes lp-spin { to { transform: rotate(360deg); } } /* ────────────────────────────────────────────────────────────────────────── TRUST BADGE ────────────────────────────────────────────────────────────────────────── */ .lp-trust { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; font-size: 0.78rem; color: var(--lp-trust-color); transition: color 0.3s; } .lp-trust i { color: #22c55e; } /* ────────────────────────────────────────────────────────────────────────── PÁGINA DE OBRIGADO ────────────────────────────────────────────────────────────────────────── */ .lp-obrigado-section { padding: 44px 16px 24px; flex: 1; } .lp-obrigado-wrapper { max-width: 680px; margin: 0 auto; } .lp-obrigado-header { text-align: center; margin-bottom: 32px; } .lp-obrigado-logo { max-height: 180px; object-fit: contain; border-radius: 8px; margin-bottom: 16px; } .lp-obrigado-title { font-size: clamp(1.15rem, 3.2vw, 1.5rem); font-weight: 800; color: var(--lp-text); margin-bottom: 8px; transition: color 0.3s; } .lp-obrigado-subtitle { font-size: 1rem; color: var(--lp-text-muted); transition: color 0.3s; } /* Barra de progresso */ .lp-progress-wrap { margin-bottom: 32px; } .lp-progress-bar { height: 10px; background: var(--lp-progress-track); border-radius: 99px; overflow: hidden; transition: background 0.3s; } .lp-progress-fill { height: 100%; background: linear-gradient(90deg, #22c55e, #16a34a); border-radius: 99px; transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1); } .lp-progress-label { text-align: center; font-size: 0.82rem; color: var(--lp-text-muted); margin-top: 8px; transition: color 0.3s; } /* Cards de ação */ .lp-action-cards { display: flex; flex-direction: column; gap: 16px; } .lp-action-card { background: var(--lp-action-card-bg); border-radius: 18px; box-shadow: var(--lp-action-card-shadow); padding: 32px 28px; text-align: center; border: 1px solid var(--lp-action-card-border); animation: lp-fadeUp 0.5s ease both; transition: background 0.3s, border-color 0.3s; } .lp-action-card:nth-child(2) { animation-delay: 0.1s; } .lp-action-card:nth-child(3) { animation-delay: 0.2s; } @keyframes lp-fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .lp-action-card__icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin: 0 auto 16px; } .lp-action-card__icon--whatsapp { background: rgba(37, 211, 102, 0.12); color: #25d366; } .lp-action-card__icon--download { background: rgba(76, 110, 245, 0.12); color: #4c6ef5; } .lp-action-card__title { font-size: 1.05rem; font-weight: 700; color: var(--lp-action-title); margin-bottom: 8px; transition: color 0.3s; } .lp-action-card__text { font-size: 0.88rem; color: var(--lp-action-text); margin-bottom: 22px; line-height: 1.58; transition: color 0.3s; } /* Botões de ação */ .lp-btn-whatsapp, .lp-btn-download { display: inline-flex; align-items: center; gap: 9px; padding: 13px 28px; font-size: 0.9rem; font-weight: 700; border-radius: 50px; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; font-family: inherit; color: #fff; } .lp-btn-whatsapp { background: linear-gradient(135deg, #25d366, #128c4e); box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35); } .lp-btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(37, 211, 102, 0.48); color: #fff; } .lp-btn-download { background: linear-gradient(135deg, #4c6ef5, #3b5bdb); box-shadow: 0 6px 20px rgba(76, 110, 245, 0.35); } .lp-btn-download:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(76, 110, 245, 0.48); color: #fff; } /* Sucesso simples (sem grupos/anexos) */ .lp-success-simple { background: var(--lp-success-bg); border-radius: 20px; box-shadow: var(--lp-action-card-shadow); padding: 44px 28px; text-align: center; border: 1px solid var(--lp-action-card-border); transition: background 0.3s; } .lp-success-simple p { color: var(--lp-success-text); max-width: 420px; margin: 0 auto; transition: color 0.3s; } .lp-success-icon { width: 76px; height: 76px; background: rgba(34, 197, 94, 0.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.1rem; color: #22c55e; margin: 0 auto 20px; box-shadow: 0 0 0 10px rgba(34, 197, 94, 0.06); } /* ────────────────────────────────────────────────────────────────────────── TOAST / FEEDBACK ────────────────────────────────────────────────────────────────────────── */ .lp-toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .lp-toast { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: 12px; font-size: 0.875rem; font-family: inherit; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18); pointer-events: auto; max-width: 380px; animation: lp-toastIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); border: 1px solid transparent; } .lp-toast--success { background: var(--lp-toast-success-bg); border-color: var(--lp-toast-success-border); color: var(--lp-toast-success-text); } .lp-toast--error { background: var(--lp-toast-error-bg); border-color: var(--lp-toast-error-border); color: var(--lp-toast-error-text); } .lp-toast--info { background: var(--lp-toast-info-bg); border-color: var(--lp-toast-info-border); color: var(--lp-toast-info-text); } @keyframes lp-toastIn { from { opacity: 0; transform: translateX(40px) scale(0.9); } to { opacity: 1; transform: translateX(0) scale(1); } } /* ────────────────────────────────────────────────────────────────────────── FOOTER ────────────────────────────────────────────────────────────────────────── */ .lp-footer { background: var(--lp-footer-bg); color: var(--lp-footer-text); padding: 32px 20px; font-size: 0.8rem; line-height: 1.75; text-align: center; margin-top: auto; transition: background 0.3s, color 0.3s; } .lp-footer a { color: var(--lp-footer-link); text-decoration: none; transition: color 0.2s; } .lp-footer a:hover { color: #fff; } .lp-footer__copy { font-weight: 600; color: var(--lp-footer-copy); margin-bottom: 14px; font-size: 0.85rem; } .lp-footer__disclaimer { max-width: 700px; margin: 0 auto; color: var(--lp-footer-text); } .lp-footer__disclaimer p + p { margin-top: 8px; } /* ────────────────────────────────────────────────────────────────────────── RESPONSIVO ────────────────────────────────────────────────────────────────────────── */ @media (max-width: 520px) { .lp-card { padding: 24px 18px; } .lp-btn-cta { font-size: 0.95rem; padding: 14px 18px; } .lp-hero__inner { padding: 36px 16px 28px; } .lp-action-card { padding: 24px 18px; } .lp-btn-whatsapp, .lp-btn-download { padding: 12px 22px; font-size: 0.9rem; } }