/* ========================================================================== OnDock — landing page (mobile-first) Base = celular. Cada @media (min-width: ...) adiciona / amplia layout para telas maiores — nunca o contrário. Ver assets/js/landing.js para o menu mobile, o scroll-reveal e o modal de teste grátis. ========================================================================== */ :root { --bg: #06060B; --surface: #0A0B12; --surface-2: #0C0D16; --surface-3: #0E1020; --border: #1D2033; --border-soft: #16182A; --border-strong: #23263C; --text: #E8E9F5; --text-muted: #9498B8; --text-dim: #7C81A0; --text-faint: #565C7C; --accent: #8B6BFF; --accent-hover: #A288FF; --accent-2: #22D3EE; --accent-soft: rgba(139, 107, 255, .12); --accent-border: rgba(139, 107, 255, .34); --cyan-soft: rgba(34, 211, 238, .10); --cyan-border: rgba(34, 211, 238, .3); --danger: #FF8FA8; --header-bg: rgba(6, 6, 11, .82); --font-display: 'Sora', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --header-h: 64px; --container: 1200px; } /* Tema claro — mesma convenção do resto do site (data-theme="claro"/"escuro" em , chave 'ondock_tema' no localStorage — ver includes/header.php, login.html). Os tons de destaque (roxo/ciano) ficam mais escuros aqui pra manter contraste legível sobre fundo claro. */ :root[data-theme="claro"] { --bg: #F7F7FC; --surface: #FFFFFF; --surface-2: #FFFFFF; --surface-3: #FFFFFF; --border: #E4E5F1; --border-soft: #ECEDF6; --border-strong: #D8DAEA; --text: #14141F; --text-muted: #5B5F7A; --text-dim: #6E7290; --text-faint: #9598B0; --accent: #7A5AF8; --accent-hover: #6942F5; --accent-2: #0C93AD; --accent-soft: rgba(122, 90, 248, .08); --accent-border: rgba(122, 90, 248, .3); --cyan-soft: rgba(12, 147, 173, .08); --cyan-border: rgba(12, 147, 173, .28); --danger: #E0466E; --header-bg: rgba(255, 255, 255, .78); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: var(--font-display); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg { max-width: 100%; display: block; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } button { font-family: inherit; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: 20px; } .eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); } /* ---------- Header ---------- */ .od-header { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--header-h); padding-inline: 16px; background: var(--header-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-soft); } .od-logo { display: flex; align-items: center; gap: 9px; } .od-logo-mark { font-size: 19px; font-weight: 700; letter-spacing: -.06em; line-height: 1; background: linear-gradient(120deg, #B9A4FF, var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .od-logo-div { width: 1px; height: 16px; background: var(--border); } .od-logo-name { font-size: 16px; font-weight: 600; letter-spacing: -.02em; } .od-nav-desktop { display: none; } .od-header-actions { display: flex; align-items: center; gap: 8px; } /* Botão "Entrar" do cabeçalho: contorno (não compete com o CTA principal "Testar 24h grátis", mas ainda lê como botão, não como link solto). */ .od-entrar { display: none; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 9px; border: 1px solid var(--border); color: var(--text); font-size: 13.5px; font-weight: 600; transition: border-color .15s ease, color .15s ease, background-color .15s ease; } .od-entrar svg { width: 15px; height: 15px; flex-shrink: 0; } .od-entrar:hover { border-color: var(--accent-2); color: var(--accent-2); background: var(--surface-2); } /* No mobile o header mostra só logo + hamburguer — os CTAs (Entrar, Falar com o time, Testar 24h) ficam dentro do menu mobile, senão não cabem numa tela de 375px e empurram o botão do menu pra fora da viewport. */ .od-header-actions > a.btn { display: none; } .od-menu-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; } .od-menu-toggle svg { width: 18px; height: 18px; } /* Menu mobile em tela cheia, aberto via JS (classe .aberto no ) */ .od-menu-mobile { position: fixed; inset: var(--header-h) 0 0 0; z-index: 90; background: var(--bg); padding: 24px 20px 40px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; } body.menu-aberto .od-menu-mobile { opacity: 1; transform: translateY(0); visibility: visible; transition: opacity .2s ease, transform .2s ease; } body.menu-aberto { overflow: hidden; } .od-menu-mobile a { padding: 14px 4px; border-bottom: 1px solid var(--border-soft); color: var(--text); font-size: 17px; } .od-menu-mobile .od-menu-ctas { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; } /* ---------- Botões ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 10px; font-size: 14.5px; font-weight: 600; border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease, background .15s ease; white-space: nowrap; } .btn:active { transform: translateY(1px) scale(.99); } .btn-primary { background: linear-gradient(120deg, var(--accent), #6E4BFF); color: #fff; box-shadow: 0 14px 32px -16px rgba(139, 107, 255, .8); } .btn-primary:hover { background: linear-gradient(120deg, var(--accent-hover), var(--accent)); color: #fff; } .btn-ghost { background: var(--surface-2); border-color: var(--border); color: var(--text); } .btn-ghost:hover { border-color: var(--accent-2); color: var(--accent-2); } .btn-block { width: 100%; } .btn-lg { padding: 15px 26px; font-size: 16px; } /* ---------- Hero ---------- */ /* Fundo em gradiente estático (sem animação, sem blur) — pintado uma vez só pelo navegador e nunca mais recalculado. Mantém o clima "aurora" do hero sem o custo de animar blur continuamente. */ .hero { position: relative; padding: calc(var(--header-h) + 48px) 0 56px; border-bottom: 1px solid var(--border-soft); background: radial-gradient(700px 420px at 90% -10%, rgba(139, 107, 255, .18), transparent 62%), radial-gradient(520px 340px at 0% 20%, rgba(34, 211, 238, .10), transparent 62%); } .hero-grid { position: relative; z-index: 1; display: grid; gap: 40px; } .hero h1 { margin: 0; font-size: clamp(34px, 8vw, 65px); line-height: 1.05; letter-spacing: -.03em; font-weight: 700; } .hero h1 .grad { background: linear-gradient(100deg, #B9A4FF, var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero p.lede { margin: 18px 0 0; max-width: 58ch; font-size: clamp(16px, 2.4vw, 19.5px); line-height: 1.6; color: var(--text-muted); } .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .hero-note { display: flex; align-items: center; gap: 9px; margin-top: 16px; font-size: 13.5px; color: var(--text-dim); } .hero-note .dot { width: 6px; height: 6px; border-radius: 99px; background: var(--accent-2); flex-shrink: 0; } .hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 32px; max-width: 560px; } .stat { padding: 14px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); } .stat.hi { border-color: var(--cyan-border); background: var(--cyan-soft); } .stat .num { font-size: clamp(22px, 5vw, 34px); font-weight: 700; letter-spacing: -.03em; line-height: 1; } .stat.hi .num { color: var(--accent-2); } .stat .num.violet { color: #B9A4FF; } .stat .lbl { font-size: 12.5px; line-height: 1.4; color: var(--text-dim); margin-top: 8px; } .stat.hi .lbl { color: #AFB4D2; } /* mockup card */ .mockup { position: relative; border: 1px solid var(--border-strong); border-radius: 18px; background: var(--surface-3); padding: 20px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .35); animation: odFloat 7.5s ease-in-out infinite; } :root:not([data-theme="claro"]) .mockup { box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9); } @media (prefers-reduced-motion: reduce) { .mockup { animation: none; } } .mockup-bar { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); letter-spacing: .05em; } .mockup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; } .mockup-cell { padding: 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font-size: 12px; } .mockup-cell.on { border-color: var(--accent-border); background: var(--accent-soft); } .mockup-cell .who { color: var(--text-dim); font-size: 11.5px; } .mockup-cell .what { font-size: 14px; font-weight: 600; margin-top: 5px; } .mockup-cell .stat-tag { font-size: 11.5px; margin-top: 7px; } .mockup-cell .stat-tag.ok { color: var(--accent); } .mockup-cell .stat-tag.ok2 { color: var(--accent-2); } .mockup-cell .stat-tag.off { color: var(--text-faint); } .mockup-cell.dim .what { color: var(--text-faint); } .mockup-cell .log { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); line-height: 1.6; margin-top: 6px; } .mockup-foot { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); font-size: 13px; color: var(--text-muted); line-height: 1.5; } .mockup-foot strong { color: var(--text); font-weight: 600; } /* ---------- Seções gerais ---------- */ section { padding: 56px 0; border-bottom: 1px solid var(--border-soft); } section h2 { margin: 12px 0 0; font-size: clamp(26px, 6vw, 46px); line-height: 1.1; letter-spacing: -.03em; font-weight: 700; } section > .container > p.lede { margin: 16px 0 0; max-width: 68ch; font-size: clamp(15.5px, 2vw, 18.5px); line-height: 1.62; color: var(--text-muted); } section > .container > p.lede strong { color: var(--text); font-weight: 600; } /* ---------- Cards genéricos ---------- */ /* Efeito de destaque só no :hover, puro CSS (borda + leve elevação) — nada ligado a mousemove. É o suficiente pra dar vida sem custo contínuo. */ .card { padding: 22px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); transition: border-color .2s ease, transform .2s ease; } .card h3 { margin: 10px 0 0; font-size: 19px; font-weight: 600; letter-spacing: -.02em; } .card p { margin: 9px 0 0; font-size: 14.5px; line-height: 1.58; color: var(--text-muted); } /* Caminhos (comparação de licenciamento) */ .caminhos { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 36px; } .caminho { padding: 22px; border: 1px solid #2C2036; border-radius: 16px; background: #0F0A12; transition: transform .2s ease, box-shadow .2s ease; } .caminho:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -18px rgba(0,0,0,.35); } .caminho .tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--danger); } .caminho.ondock { border-color: var(--accent-border); background: linear-gradient(160deg, rgba(139, 107, 255, .13), #0A0B14); box-shadow: 0 20px 50px -30px rgba(139, 107, 255, .6); } .caminho.ondock .tag { color: var(--accent-2); } .caminho .destaque { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--cyan-soft); border: 1px solid var(--cyan-border); } .caminho .destaque .n { font-size: 21px; font-weight: 700; letter-spacing: -.02em; color: var(--accent-2); } .caminho .destaque .d { font-size: 12.5px; line-height: 1.5; color: #AFB4D2; margin-top: 3px; } .duas-colunas { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 18px; } .painel-lista { padding: 24px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); } .painel-lista .titulo { font-size: 17.5px; font-weight: 600; letter-spacing: -.02em; } .painel-item { display: flex; gap: 10px; font-size: 15px; line-height: 1.55; color: #C7CBE2; margin-top: 12px; } .painel-item .seta { color: var(--accent-2); flex-shrink: 0; } .painel-lista > p { margin: 16px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--text-dim); } .antes-depois { padding: 24px; border: 1px solid var(--border); border-radius: 18px; background: linear-gradient(180deg, #0C0E1A, #08090F); display: flex; flex-direction: column; gap: 16px; justify-content: center; } .antes-depois .linha { display: flex; align-items: center; gap: 10px; } .antes-depois .caixa { flex: 1; padding: 13px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; } .antes-depois .caixa.antes { border: 1px solid #2C2036; background: #0F0A12; color: #9A90A6; } .antes-depois .caixa.depois { border: 1px solid var(--cyan-border); background: var(--cyan-soft); color: #BFE6EE; } .antes-depois .seta-grande { font-size: 18px; color: var(--accent); } .antes-depois > p { margin: 0; font-size: 14px; line-height: 1.58; color: var(--text-dim); } /* ---------- Segurança ---------- */ .seguranca-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 36px; } .seg-card { padding: 24px; border: 1px solid var(--border-strong); border-radius: 18px; background: var(--surface); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .seg-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 14px 28px -18px rgba(0,0,0,.35); } .seg-card .kicker { font-size: 13px; color: var(--accent-2); font-weight: 600; } .seg-card h3 { margin: 10px 0 0; font-size: 20px; font-weight: 600; letter-spacing: -.02em; } .seg-card p { margin: 9px 0 0; font-size: 15px; line-height: 1.58; color: var(--text-muted); } .seg-card .termo { margin-top: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); } .seg-card.destaque { border-color: var(--accent-border); background: linear-gradient(140deg, rgba(139, 107, 255, .12), #0A0B14); } .seg-card.destaque .kicker { color: #B9A4FF; } .seg-card.destaque h3 { font-size: clamp(19px, 3.5vw, 25px); } .seg-card.destaque p { color: #AFB4D2; } .seg-card .console { margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: #06070C; border: 1px solid #1B1E30; font-family: var(--font-mono); font-size: 12px; line-height: 1.7; } .seg-card .console .no { color: var(--danger); } .seg-card .console .yes { color: var(--accent-2); } /* ---------- Exemplos ---------- */ .exemplos-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 36px; } .exemplo { border: 1px solid var(--border); border-radius: 18px; background: var(--surface); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; } .exemplo:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -18px rgba(0,0,0,.35); } .exemplo-head { padding: 22px; border-bottom: 1px solid var(--border-soft); } .exemplo-head .tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--accent); } .exemplo-head .pergunta { margin-top: 10px; font-size: 18px; font-weight: 600; line-height: 1.3; } .exemplo-body { padding: 22px; display: flex; flex-direction: column; gap: 12px; } .exemplo-body .linha { font-size: 14.5px; line-height: 1.6; color: var(--text-muted); } .exemplo-body .linha strong.ant { color: var(--danger); font-weight: 600; } .exemplo-body .linha strong.dep { color: var(--accent-2); font-weight: 600; } /* ---------- Como funciona ---------- */ .passos { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 36px; } .passo { padding: 20px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); } .passo .n { font-family: var(--font-mono); font-size: 26px; font-weight: 700; color: #332A66; } .passo .t { margin-top: 10px; font-size: 16px; font-weight: 600; } .passo p { margin: 7px 0 0; font-size: 14px; line-height: 1.55; color: var(--text-dim); } .passo.destaque { border-color: var(--accent-border); background: linear-gradient(180deg, rgba(139, 107, 255, .12), var(--surface)); } .passo.destaque .n { color: #B9A4FF; } .passo.destaque p { color: #AFB4D2; } .checklist-box { margin-top: 22px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); display: flex; flex-direction: column; gap: 16px; } .checklist-box p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-muted); } .checklist-box p strong { color: var(--text); font-weight: 600; } .pills { display: flex; gap: 8px; flex-wrap: wrap; } .pill { padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: 99px; font-size: 12px; color: var(--text-muted); } .pill.ok { border-color: var(--cyan-border); color: var(--accent-2); } /* ---------- Marca ---------- */ .marca-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; margin-top: 12px; } .marca-url { margin-top: 20px; padding: 13px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font-family: var(--font-mono); font-size: 13.5px; color: #B9A4FF; word-break: break-all; } .marca-url span { color: var(--text); } .marca-features { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .marca-feature { padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); } .marca-feature .t { font-size: 14.5px; font-weight: 600; } .marca-feature p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-dim); } /* ---------- FAQ ---------- */ .faq-list { display: flex; flex-direction: column; gap: 10px; margin-top: 32px; } .faq-item { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; } .faq-item.destaque { border-color: var(--accent-border); background: linear-gradient(140deg, rgba(139, 107, 255, .10), var(--surface)); } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; background: none; border: none; color: var(--text); font-size: 16.5px; font-weight: 600; text-align: left; cursor: pointer; } .faq-q .chev { flex-shrink: 0; transition: transform .2s ease; color: var(--text-dim); } .faq-item[data-aberto="true"] .chev { transform: rotate(180deg); color: var(--accent-2); } .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; } .faq-item[data-aberto="true"] .faq-a { grid-template-rows: 1fr; } .faq-a-inner { overflow: hidden; } .faq-a p { margin: 0 20px 18px; font-size: 15px; line-height: 1.6; color: var(--text-muted); } .faq-a p strong { color: #D6D9EE; font-weight: 600; } /* ---------- CTA final ---------- */ .cta-final { padding: 64px 0; text-align: center; background: radial-gradient(600px 380px at 50% 120%, rgba(139, 107, 255, .22), transparent 62%); border-bottom: none; } .cta-final h2 { font-size: clamp(28px, 7vw, 50px); } .cta-final p.lede { margin: 16px auto 0; max-width: 56ch; } .cta-final .hero-ctas { justify-content: center; } .cta-final .aviso { margin-top: 16px; font-size: 14px; color: var(--text-dim); } /* ---------- Footer ---------- */ .od-footer { padding: 28px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .od-footer .marca { font-size: 13px; color: var(--text-muted); } .od-footer .legal { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); } /* ---------- Scroll reveal ---------- */ /* Efeito só liga se JS realmente rodar: a classe .js só existe porque um script inline no a aplica antes da página pintar (ver index.html). Sem isso, .od-rev começando em opacity:0 dependeria 100% do IntersectionObserver disparar pra cada seção aparecer — qualquer falha de JS (erro de script, bloqueador, crawler que não rola a página) deixaria seções inteiras invisíveis pra sempre. Por padrão (sem a classe .js), tudo fica visível — o reveal é só um enfeite quando o JS está de fato ativo. */ .js .od-rev { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); } .js .od-rev.in-view { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .od-rev { opacity: 1; transform: none; transition: none; } } @keyframes odFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* ========================================================================== Breakpoints — de mobile pra cima ========================================================================== */ @media (min-width: 640px) { .container { padding-inline: 32px; } .hero-stats { max-width: 560px; } .caminhos { grid-template-columns: 1fr 1fr; } .exemplos-grid { grid-template-columns: 1fr 1fr; } .seguranca-grid { grid-template-columns: 1fr 1fr; } .marca-features { grid-template-columns: 1fr 1fr; } } @media (min-width: 860px) { .od-nav-desktop { display: flex; align-items: center; gap: 22px; font-size: 14px; } .od-nav-desktop a { color: var(--text-dim); } .od-nav-desktop a:hover { color: var(--text); } .od-menu-toggle { display: none; } .od-header-actions .od-entrar { display: inline-flex; } .od-header-actions > a.btn { display: inline-flex; padding: 10px 16px; font-size: 13.5px; } .hero-grid { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 48px; } .hero { padding-top: calc(var(--header-h) + 64px); padding-bottom: 72px; } section { padding: 88px 0; } .caminhos { grid-template-columns: repeat(4, 1fr); } .duas-colunas { grid-template-columns: 1.1fr .9fr; } .seguranca-grid { grid-template-columns: repeat(3, 1fr); } .seguranca-grid .destaque-wrap { grid-column: span 2; } .exemplos-grid { grid-template-columns: repeat(3, 1fr); } .passos { grid-template-columns: repeat(5, 1fr); } .marca-grid { grid-template-columns: 1fr 1fr; gap: 56px; } } @media (min-width: 1100px) { .hero h1 { max-width: 640px; } } /* ========================================================================== Tema claro — overrides pontuais Vários blocos acima usam hex fixo (tons escuros pensados só pro tema escuro: cartões "antes", console de exemplo, números dos passos etc.) — em vez de trocar cada var() espalhada, sobrescreve aqui só o que quebraria contraste em fundo claro. O mockup do hero fica proposital sempre escuro (like um "print" do produto), mesmo no tema claro. ========================================================================== */ :root[data-theme="claro"] { --toggle-icon: '☀'; } :root[data-theme="claro"] .caminho { border-color: #EADCF0; background: #FBF6FC; } :root[data-theme="claro"] .caminho.ondock { border-color: var(--accent-border); background: linear-gradient(160deg, rgba(122, 90, 248, .10), #FFFFFF); box-shadow: 0 16px 40px -28px rgba(122, 90, 248, .4); } :root[data-theme="claro"] .caminho .destaque .d, :root[data-theme="claro"] .antes-depois > p, :root[data-theme="claro"] .seg-card.destaque p, :root[data-theme="claro"] .passo.destaque p { color: var(--text-dim); } :root[data-theme="claro"] .painel-item { color: var(--text); } :root[data-theme="claro"] .antes-depois { border: 1px solid var(--border); background: linear-gradient(180deg, #FFFFFF, #F7F5FF); } :root[data-theme="claro"] .antes-depois .caixa.antes { border: 1px solid #EADCF0; background: #FBF6FC; color: var(--text-dim); } :root[data-theme="claro"] .antes-depois .caixa.depois { color: #085C6C; } :root[data-theme="claro"] .seg-card.destaque { background: linear-gradient(140deg, rgba(122, 90, 248, .08), #FFFFFF); } :root[data-theme="claro"] .seg-card.destaque .kicker, :root[data-theme="claro"] .passo.destaque .n, :root[data-theme="claro"] .stat .num.violet { color: var(--accent); } :root[data-theme="claro"] .passo .n { color: #D8CFF7; } :root[data-theme="claro"] .seg-card .console { background: #FBF6FC; border: 1px solid #EADCF0; } :root[data-theme="claro"] .faq-a p strong { color: var(--text); } :root[data-theme="claro"] .exemplo-body .linha, :root[data-theme="claro"] .caminho .destaque .d { color: var(--text-muted); } /* ---------- Botão de tema ---------- */ .od-tema-toggle { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; flex-shrink: 0; } .od-tema-toggle svg { width: 17px; height: 17px; } .od-tema-toggle .icone-lua { display: block; } .od-tema-toggle .icone-sol { display: none; } :root[data-theme="claro"] .od-tema-toggle .icone-lua { display: none; } :root[data-theme="claro"] .od-tema-toggle .icone-sol { display: block; } .od-menu-mobile .od-tema-linha { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; border-bottom: 1px solid var(--border-soft); font-size: 17px; color: var(--text); } /* ---------- Indicador de rolar ---------- */ .od-scroll-indicador { display: none; } @media (min-width: 640px) { .od-scroll-indicador { display: flex; align-items: center; justify-content: center; position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); cursor: pointer; animation: odScrollBounce 2s ease-in-out infinite; transition: border-color .2s ease, color .2s ease; } .od-scroll-indicador:hover { border-color: var(--accent-2); color: var(--accent-2); } .od-scroll-indicador svg { width: 16px; height: 16px; } } @keyframes odScrollBounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } } @media (prefers-reduced-motion: reduce) { .od-scroll-indicador { animation: none; } } /* ---------- Contador animado das estatísticas do hero ---------- */ .stat .num[data-final] { font-variant-numeric: tabular-nums; }