/* Landing institucional (WEB-08) na direção Aurora, aprovada pelo dono em 25/09/2026 (docs/prototypes/WEB-08-functional-prototype). Tokens --lp-* por tema, no : o primeiro tema segue o aparelho e a pessoa troca no cabeçalho (js/aurora/theme.js). O azul continua primário; violeta e ciano entram só na assinatura da marca (degradês), nunca como cor de ação isolada. */ :root[data-theme="dark"] { --lp-bg: #060914; --lp-ink: #f5f7ff; --lp-soft: #c9d2ea; --lp-muted: #9aa6c4; --lp-glass: rgba(255, 255, 255, 0.06); --lp-line: rgba(255, 255, 255, 0.12); --lp-card: rgba(14, 20, 40, 0.78); --lp-card-solid: #0e1428; --lp-field: rgba(6, 9, 20, 0.7); --lp-chip: rgba(255, 255, 255, 0.08); --lp-blob-a: rgba(59, 130, 246, 0.5); --lp-blob-b: rgba(139, 92, 246, 0.42); --lp-blob-c: rgba(34, 211, 238, 0.3); --lp-shadow: 0 30px 80px rgba(2, 6, 23, 0.55); --lp-ok: #34d399; --lp-warn: #fbbf24; --lp-danger: #fda4af; --lp-info: #93c5fd; --lp-footer: #04060e; --lp-skeleton: #19263a; color-scheme: dark; } :root[data-theme="light"] { --lp-bg: #f7f8ff; --lp-ink: #0b1026; --lp-soft: #26304d; --lp-muted: #525d7a; --lp-glass: rgba(255, 255, 255, 0.72); --lp-line: rgba(15, 23, 42, 0.1); --lp-card: rgba(255, 255, 255, 0.88); --lp-card-solid: #ffffff; --lp-field: #ffffff; --lp-chip: rgba(15, 23, 42, 0.05); --lp-blob-a: rgba(96, 165, 250, 0.42); --lp-blob-b: rgba(167, 139, 250, 0.36); --lp-blob-c: rgba(103, 232, 249, 0.4); --lp-shadow: 0 30px 70px rgba(30, 41, 90, 0.16); --lp-ok: #059669; --lp-warn: #b45309; --lp-danger: #be123c; --lp-info: #1d4ed8; --lp-footer: #eef1fb; --lp-skeleton: #e3e8f5; color-scheme: light; } :root { --lp-blue: #2563eb; --lp-brand: linear-gradient(100deg, #3b82f6, #8b5cf6 45%, #22d3ee); --lp-page: min(100% - 48px, 1240px); --lp-content: min(100% - 48px, 1160px); scroll-behavior: smooth; scroll-padding-top: 96px; } *, *::before, *::after { box-sizing: border-box; } /* `hidden` vale mesmo quando o componente define display (botão, grade, aviso). */ .lp-app [hidden] { display: none !important; } /* flow-root: a margem do cabeçalho não atravessa o body, o que deixava uma faixa sem fundo acima dele. */ html:has(body.lp-app) { background: var(--lp-bg); } body.lp-app { display: flow-root; position: relative; margin: 0; min-height: 100vh; overflow-x: hidden; background: var(--lp-bg); color: var(--lp-ink); font-family: "Inter", system-ui, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; } .lp-app img { max-width: 100%; } .lp-app button, .lp-app input, .lp-app select { font: inherit; } .lp-app button { cursor: pointer; } /* Sem especificidade: o link comum herda a cor do texto, mas nunca vence a cor de um botão (.bs-button). */ :where(.lp-app) a { color: inherit; } .lp-app :focus-visible { outline: 2px solid #60a5fa; outline-offset: 3px; } .bs-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .lp-accent { background: var(--lp-brand); -webkit-background-clip: text; background-clip: text; color: transparent; } /* A aurora passa das bordas de propósito; a camada corta nas bordas para não criar rolagem lateral. */ .lp-backdrop { position: absolute; inset: 0 0 auto; height: 1100px; z-index: 0; overflow: hidden; pointer-events: none; } .lp-aurora { position: absolute; inset: -20% -10% auto; height: 900px; filter: blur(90px); } .lp-aurora span { position: absolute; border-radius: 50%; animation: lp-drift 18s ease-in-out infinite alternate; } .lp-aurora span:nth-child(1) { width: 620px; height: 520px; left: 8%; top: 12%; background: var(--lp-blob-a); } .lp-aurora span:nth-child(2) { width: 560px; height: 520px; right: 6%; top: 4%; background: var(--lp-blob-b); animation-delay: -6s; } .lp-aurora span:nth-child(3) { width: 520px; height: 420px; left: 38%; top: 38%; background: var(--lp-blob-c); animation-delay: -12s; } @keyframes lp-drift { to { transform: translate(60px, 40px) scale(1.08); } } .lp-gridlines { position: absolute; inset: 0; background-image: linear-gradient(var(--lp-line) 1px, transparent 1px), linear-gradient(90deg, var(--lp-line) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 15%, transparent 65%); mask-image: radial-gradient(ellipse at 50% 0%, #000 15%, transparent 65%); opacity: 0.45; } .lp-app.calm .lp-aurora { opacity: 0.45; height: 520px; } .lp-main { position: relative; z-index: 1; } /* Página de um item do menu: o rodapé não sobe para o meio da tela quando o conteúdo é curto. */ .lp-page { min-height: calc(100vh - 220px); padding-top: 8px; } /* Botões em pílula. Toda ação principal usa um azul só, sólido — o primário do produto (dono, 24/09/2026, entre três alternativas). O degradê da marca fica nos textos e no fundo. */ .bs-button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: 999px; background: var(--lp-blue); color: #fff; font-size: 14px; font-weight: 750; line-height: 1.2; text-decoration: none; white-space: nowrap; box-shadow: 0 8px 22px rgba(37, 99, 235, 0.3); transition: background 160ms ease, transform 160ms ease; } .bs-button:hover { background: #3b82f6; transform: translateY(-1px); } .bs-button svg { flex: 0 0 auto; } .bs-button.secondary { border-color: var(--lp-line); background: var(--lp-glass); color: var(--lp-ink); box-shadow: none; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .bs-button.ghost { border-color: var(--lp-line); background: transparent; color: var(--lp-ink); box-shadow: none; } .bs-button.lp-equal { min-width: 112px; border-color: var(--lp-line); background: var(--lp-card-solid); color: var(--lp-ink); box-shadow: none; } .bs-button:is(.secondary, .ghost, .lp-equal):hover { background: var(--lp-chip); } .bs-button[disabled], .bs-button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; border-color: var(--lp-line); background: var(--lp-chip); color: var(--lp-muted); box-shadow: none; } .lp-text-link { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; padding: 0 6px; border: 0; background: transparent; color: var(--lp-info); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } /* Selos */ .lp-badge-free { display: inline-flex; align-items: center; align-self: flex-start; min-height: 28px; padding: 0 14px; border-radius: 999px; background: linear-gradient(90deg, #10b981, #22d3ee); color: #03261b; font-size: 12px; font-weight: 800; line-height: 1; white-space: nowrap; } /* No claro, o degradê neon com texto escuro ficava pesado: selo verde suave. */ :root[data-theme="light"] .lp-badge-free { border: 1px solid rgba(5, 150, 105, 0.35); background: #dcfce7; color: #047857; } .lp-soon { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid rgba(139, 92, 246, 0.5); border-radius: 999px; background: rgba(139, 92, 246, 0.12); color: var(--lp-ink); font-size: 12px; font-weight: 700; } .bs-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 25px; padding: 0 11px; border-radius: 999px; background: var(--lp-chip); color: var(--lp-soft); font-size: 11px; font-weight: 800; white-space: nowrap; } /* Seções */ .lp-section { position: relative; width: var(--lp-content); margin: 0 auto; padding: 56px 0; } .lp-eyebrow { display: inline-block; margin: 0 0 12px; background: var(--lp-brand); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .lp-section-title { margin: 0; font-size: 44px; font-weight: 800; line-height: 1.08; letter-spacing: -0.035em; } .lp-section-copy { max-width: 720px; margin: 14px 0 0; color: var(--lp-muted); font-size: 18px; line-height: 1.6; } .lp-actions-row { display: flex; flex-wrap: wrap; gap: 10px; } /* Mensagens e esqueleto */ .lp-message { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--lp-line); border-radius: 16px; background: var(--lp-chip); font-size: 14px; line-height: 1.5; } .lp-message svg { flex: 0 0 auto; } .lp-message p { margin: 4px 0 0; color: var(--lp-soft); font-size: 13px; } .lp-message strong { color: var(--lp-ink); } .lp-message.success { border-color: rgba(52, 211, 153, 0.55); color: var(--lp-ok); } .lp-message.warning { border-color: rgba(251, 191, 36, 0.55); color: var(--lp-warn); } .lp-message.danger { border-color: rgba(251, 113, 133, 0.55); color: var(--lp-danger); } .lp-message.info { border-color: rgba(96, 165, 250, 0.5); color: var(--lp-info); } .bs-skeleton { position: relative; display: block; height: 14px; overflow: hidden; border-radius: 10px; background: var(--lp-skeleton); } .bs-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.18), transparent); animation: lp-shimmer 1.4s infinite; } @keyframes lp-shimmer { to { transform: translateX(100%); } } @media (max-width: 767px) { :root { --lp-page: calc(100% - 32px); --lp-content: calc(100% - 32px); } .lp-section { padding: 36px 0; } .lp-section-title { font-size: 30px; } .lp-section-copy { font-size: 15px; } } /* Movimento com respeito: tudo para para quem pede menos movimento no aparelho. */ @media (prefers-reduced-motion: reduce) { :root { scroll-behavior: auto; } .lp-app *, .lp-app *::before, .lp-app *::after { animation: none !important; transition: none !important; } }