/* ========================================================================== StatsHub — landing page CSS escrito à mão, sem framework. REGRAS DE OURO PARA O SAFARI DO IPHONE (não quebre sem medir no aparelho): 1. NADA de `overflow` em ou . No iOS isso pode desligar a rolagem acelerada e jogar tudo na thread principal. É a causa clássica de "engasgo". Quem contém os brilhos que vazam é cada seção. 2. NADA de `backdrop-filter` em elemento fixo. O Safari re-desfoca tudo que passa atrás dele, quadro a quadro, a rolagem inteira. 3. `box-shadow` com raio curto. O custo de rasterizar cresce com o raio, e o Safari refaz isso a cada frame. 4. NADA de `mask-image` nem `mix-blend-mode`. Viram camadas de composição extras, re-aplicadas por frame. 5. Animar só `opacity` e `transform`. São as únicas que não forçam layout. ========================================================================== */ /* Inter variável: um único arquivo cobre os pesos 400 a 700. Hospedada aqui dentro, não no Google: uma ida e volta a menos a um servidor externo antes de o texto poder ser desenhado. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------------------------------- Reset --------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #111111; --section: #181818; --card: #202020; --line: #2a2a2a; --muted: #b8b8b8; --dim: #6e6e6e; --brand: #ff6a00; --brand-hover: #ff7e26; --ok: #22c55e; --danger: #ef4444; --nav-h: 72px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 24px); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } body { background: var(--bg); color: #fff; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ul, ol { list-style: none; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; } ::selection { background: rgba(255, 106, 0, 0.28); color: #fff; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------------------------------- Ícones -------------------------------- */ /* Um sprite: os 25 ícones são definidos UMA vez e reusados via . Na versão anterior eram 147 SVGs inline, cada um um nó de layout próprio. */ .ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; } /* --------------------------------- Layout --------------------------------- */ .wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; } @media (min-width: 640px) { .wrap { padding: 0 24px; } } @media (min-width: 1024px) { .wrap { padding: 0 32px; } } section { position: relative; /* Contém os brilhos que estouram a lateral. Antes isso era feito com `overflow-x: clip` no , que é justamente o que trava o iOS. */ overflow: hidden; } /* Exceção: `overflow: hidden` num ancestral MATA o `position: sticky`. O elemento passa a enxergar essa caixa como seu container de rolagem, e como ela não rola, ele nunca gruda. `clip` corta igual, mas não cria container de rolagem. No mobile o sticky nem existe (a coluna fica escondida), então lá o `hidden` continua valendo. */ @media (min-width: 1024px) { #modulos { overflow: clip; } } .pad { padding: 96px 0; } @media (min-width: 640px) { .pad { padding: 128px 0; } } .band { background: var(--section); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } /* Brilho de fundo: gradiente radial, nunca `filter: blur()`. */ .glow { position: absolute; z-index: -1; pointer-events: none; } /* ------------------------------- Tipografia ------------------------------- */ .h1 { font-size: 38px; font-weight: 600; line-height: 1.06; letter-spacing: -0.035em; text-wrap: balance; } .h2 { font-size: 30px; font-weight: 600; line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance; background: linear-gradient(180deg, #fff 45%, #cfcfcf 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .h3 { font-size: 28px; font-weight: 600; line-height: 1.15; letter-spacing: -0.03em; text-wrap: balance; background: linear-gradient(180deg, #fff 45%, #cfcfcf 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .grad-brand { background: linear-gradient(135deg, #ff6a00 0%, #ff9a57 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .grad-white { background: linear-gradient(180deg, #fff 45%, #cfcfcf 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } @media (min-width: 640px) { .h1 { font-size: 52px; } .h2 { font-size: 36px; } .h3 { font-size: 32px; } } @media (min-width: 1024px) { .h1 { font-size: 60px; } .h2 { font-size: 46px; } .h3 { font-size: 36px; } } .lead { margin-top: 20px; max-width: 640px; font-size: 16px; line-height: 1.65; color: var(--muted); text-wrap: pretty; } @media (min-width: 640px) { .lead { font-size: 17px; } } .head { display: flex; flex-direction: column; align-items: center; text-align: center; } .head .h2 { max-width: 760px; } .head .lead { margin-left: auto; margin-right: auto; } /* --------------------------------- Botões --------------------------------- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; user-select: none; transition: transform 0.25s var(--ease), background-color 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); } .btn:active { transform: scale(0.97); } @media (hover: hover) { .btn:hover { transform: scale(1.03); } } .btn-sm { height: 36px; padding: 0 14px; font-size: 13px; } .btn-md { height: 44px; padding: 0 20px; font-size: 14px; } .btn-lg { height: 52px; padding: 0 28px; font-size: 15px; } .btn-xl { height: 60px; padding: 0 36px; font-size: 16px; } @media (min-width: 640px) { .btn-xl { height: 64px; padding: 0 48px; font-size: 18px; } } .btn-primary { background: var(--brand); color: #fff; box-shadow: 0 4px 12px -6px rgba(255, 106, 0, 0.7); } @media (hover: hover) { .btn-primary:hover { background: var(--brand-hover); box-shadow: 0 6px 16px -6px rgba(255, 106, 0, 0.9); } } .btn-ghost { border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: #fff; } @media (hover: hover) { .btn-ghost:hover { border-color: rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.08); } } .btn-light { background: #fff; color: #111; box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.7); } @media (hover: hover) { .btn-light:hover { background: rgba(255, 255, 255, 0.9); } } .btn-block { width: 100%; } /* Aura pulsante atrás do CTA. Gradiente, não filtro. */ .btn-glow::before { content: ""; position: absolute; inset: -14px; z-index: -1; border-radius: 999px; background: radial-gradient( closest-side, rgba(255, 106, 0, 0.45), transparent ); opacity: 0.7; transition: opacity 0.4s var(--ease); } @media (hover: hover) { .btn-glow:hover::before { opacity: 1; } } /* ---------------------------- Reveal (entradas) --------------------------- */ /* A classe `js` só existe se o JavaScript rodar (main.js a coloca no ). Assim, se o JS falhar, o conteúdo aparece inteiro em vez de a página ficar em branco. A animação é opcional; o conteúdo, não. */ .js .rv { opacity: 0; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .js .rv-up { transform: translate3d(0, 26px, 0); } .js .rv-left { transform: translate3d(-48px, 0, 0); } .js .rv-right { transform: translate3d(48px, 0, 0); } .js .rv-scale { transform: translate3d(0, 22px, 0) scale(0.95); } .js .rv.in { opacity: 1; transform: none; } /* Entradas do topo, disparadas no primeiro paint (não esperam JS). */ @keyframes rise { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } } @keyframes pop { from { opacity: 0; transform: translate3d(0, 22px, 0) scale(0.95); } to { opacity: 1; transform: none; } } @keyframes drop { from { opacity: 0; transform: translate3d(0, -70px, 0); } to { opacity: 1; transform: none; } } .a-rise { animation: rise 0.8s var(--ease) backwards; } .a-pop { animation: pop 0.9s var(--ease) backwards; } .a-drop { animation: drop 0.8s var(--ease) backwards; } .d1 { animation-delay: 0.09s; } .d2 { animation-delay: 0.18s; } .d3 { animation-delay: 0.26s; } .d4 { animation-delay: 0.34s; } /* --------------------------------- Navbar --------------------------------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h); border-bottom: 1px solid transparent; transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease); } .nav.stuck { background: rgba(17, 17, 17, 0.96); border-bottom-color: rgba(42, 42, 42, 0.8); } /* Vidro fosco SÓ no desktop. Num header fixo, o `backdrop-filter` obriga o Safari do iPhone a re-desfocar tudo que passa atrás a cada frame da rolagem. */ @media (min-width: 1024px) { .nav.stuck { background: rgba(17, 17, 17, 0.7); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); } } .nav-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 100%; } .nav-logo { flex: none; } .nav-logo img { height: 24px; width: auto; } @media (min-width: 640px) { .nav-logo img { height: 36px; } } .nav-links { display: none; align-items: center; gap: 4px; } @media (min-width: 1024px) { .nav-links { display: flex; } } .nav-links a { position: relative; display: block; padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--muted); transition: color 0.3s var(--ease); } .nav-links a::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -2px; height: 1px; background: linear-gradient(90deg, transparent, var(--brand), transparent); transform: scaleX(0); transition: transform 0.3s var(--ease); } @media (hover: hover) { .nav-links a:hover { color: #fff; } .nav-links a:hover::after { transform: scaleX(1); } } .nav-cta { display: flex; flex: none; align-items: center; gap: 8px; } .nav-cta .btn { height: 36px; padding: 0 12px; font-size: 13px; } @media (min-width: 640px) { .nav-cta .btn { height: 44px; padding: 0 20px; font-size: 14px; } } .nav-cta .ico { display: none; font-size: 15px; } @media (min-width: 640px) { .nav-cta .ico { display: block; } } .only-sm { display: inline; } .only-lg { display: none; } @media (min-width: 640px) { .only-sm { display: none; } .only-lg { display: inline; } } /* ---------------------------------- Hero ---------------------------------- */ .hero { padding: 120px 0 80px; } @media (min-width: 1024px) { .hero { padding: 164px 0 128px; } } .hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .hero-grid { position: absolute; inset: 0; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 64px 64px; } /* Apaga a grade nas bordas com um gradiente por cima (nunca `mask-image`). */ .hero-fade { position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 0%, transparent, #111 75%); } .hero-glow-a { top: -18%; left: 50%; width: 900px; height: 520px; margin-left: -450px; background: radial-gradient( closest-side, rgba(255, 106, 0, 0.2), transparent ); animation: breathe 6s ease-in-out infinite; } .hero-glow-b { top: 22%; right: -160px; width: 400px; height: 400px; background: radial-gradient( closest-side, rgba(255, 106, 0, 0.1), transparent ); } @keyframes breathe { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.9; } } .hero-in { display: flex; flex-direction: column; text-align: center; } @media (min-width: 1024px) { .hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; column-gap: 40px; text-align: left; } } @media (min-width: 1280px) { .hero-in { column-gap: 64px; } } .hero-txt { grid-column: 1; grid-row: 1; } .hero-txt .lead { margin-left: auto; margin-right: auto; } @media (min-width: 1024px) { .hero-txt .lead { margin-left: 0; } } /* No mobile a imagem vem logo depois da descrição (ordem do DOM). */ .hero-shot { position: relative; margin-top: 40px; } @media (min-width: 1024px) { .hero-shot { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-top: 0; margin-right: -32px; } } @media (min-width: 1280px) { .hero-shot { margin-right: -64px; } } .hero-shot-reflex { position: absolute; left: 40px; right: 40px; bottom: -32px; height: 80px; background: radial-gradient( closest-side, rgba(255, 106, 0, 0.3), transparent ); pointer-events: none; } .hero-act { margin-top: 40px; grid-column: 1; grid-row: 2; } @media (min-width: 1024px) { .hero-act { margin-top: 36px; } } .hero-btns { display: flex; flex-direction: column; gap: 12px; } @media (min-width: 640px) { .hero-btns { flex-direction: row; justify-content: center; } } @media (min-width: 1024px) { .hero-btns { justify-content: flex-start; } } .trial { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; font-size: 13.5px; color: var(--muted); } .trial .ico { font-size: 15px; color: var(--brand); } @media (min-width: 1024px) { .trial { justify-content: flex-start; } } .checks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; width: fit-content; margin: 32px auto 0; } @media (min-width: 1024px) { .checks { width: 100%; margin-left: 0; } } .checks li { display: flex; align-items: flex-start; gap: 10px; text-align: left; font-size: 13px; color: var(--muted); } @media (min-width: 640px) { .checks li { align-items: center; font-size: 14px; } } .checks b { color: #fff; font-weight: 600; } .dot-check { display: grid; place-items: center; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 999px; border: 1px solid rgba(255, 106, 0, 0.4); background: rgba(255, 106, 0, 0.1); color: var(--brand); } .dot-check .ico { font-size: 10px; stroke-width: 3; } @media (min-width: 640px) { .dot-check { margin-top: 0; } } /* ------------------------------ Print/mockup ------------------------------ */ .shot { position: relative; } /* Aura laranja atrás do print. Gradiente radial puro. */ .shot::after { content: ""; position: absolute; inset: -18%; z-index: -1; pointer-events: none; background: radial-gradient( 50% 50% at 50% 50%, rgba(255, 106, 0, 0.26) 0%, rgba(255, 106, 0, 0.07) 45%, transparent 72% ); } .frame { overflow: hidden; border-radius: 24px; border: 1px solid var(--line); background: var(--section); box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.9); } .frame-bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--line); background: #161616; } .frame-dots { display: flex; gap: 6px; } .frame-dots i { width: 10px; height: 10px; border-radius: 999px; background: #3a3a3a; } .frame-url { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; max-width: 280px; height: 24px; margin: 0 auto; padding: 0 12px; border-radius: 6px; border: 1px solid rgba(42, 42, 42, 0.8); background: #111; font-size: 10px; font-weight: 500; color: #7a7a7a; } .frame-url::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--ok); } .frame img { width: 100%; height: auto; } /* O scanner é um card, não uma página: sem moldura de janela. */ .frame-bare { max-width: 440px; margin: 0 auto; border-radius: 24px; overflow: hidden; } .frame-bare img { width: 100%; height: auto; } /* Flutuação contínua. Só transform: roda no compositor. */ .float { animation: float 7s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -12px, 0); } } /* --------------------------------- Marquee -------------------------------- */ .mq { padding: 20px 0; background: var(--section); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .mq-view { position: relative; display: flex; overflow: hidden; } /* Fade nas laterais com gradiente sobreposto (nunca `mask-image`). */ .mq-view::before, .mq-view::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 2; width: 12%; pointer-events: none; } .mq-view::before { left: 0; background: linear-gradient(90deg, #181818, rgba(24, 24, 24, 0)); } .mq-view::after { right: 0; background: linear-gradient(270deg, #181818, rgba(24, 24, 24, 0)); } .mq-track { display: flex; width: max-content; flex: none; animation: marquee 60s linear infinite; } @keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } .mq-row { display: flex; align-items: center; flex: none; } .mq-row li { display: flex; align-items: center; gap: 10px; flex: none; padding: 0 20px; } @media (min-width: 640px) { .mq-row li { padding: 0 28px; } } .mq-ico { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 999px; border: 1px solid; } .mq-ico .ico { font-size: 15px; } .mq-row span { white-space: nowrap; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.85); } @media (min-width: 640px) { .mq-row span { font-size: 15px; } } .mq-sep { flex: none; width: 4px; height: 4px; margin-left: 12px; border-radius: 999px; background: var(--line); } @media (min-width: 640px) { .mq-sep { margin-left: 20px; } } /* --------------------------------- Cards ---------------------------------- */ .grid-4 { display: grid; gap: 16px; margin-top: 64px; } @media (min-width: 640px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } } .card { position: relative; overflow: hidden; padding: 24px; border-radius: 20px; border: 1px solid var(--line); background: var(--card); transition: transform 0.3s var(--ease), border-color 0.3s var(--ease); } .card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.12), transparent ); } @media (hover: hover) { .card:hover { transform: scale(1.03); border-color: rgba(255, 106, 0, 0.35); } } .card-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--line); background: #1a1a1a; color: var(--brand); transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease); } .card-ico .ico { font-size: 19px; } @media (hover: hover) { .card:hover .card-ico { border-color: rgba(255, 106, 0, 0.4); background: rgba(255, 106, 0, 0.1); } } .card h3 { margin-top: 20px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; } .card p { margin-top: 8px; font-size: 13.5px; line-height: 1.6; color: var(--muted); } /* ------------------------------ Demonstração ------------------------------ */ .split { display: grid; gap: 56px; align-items: center; } @media (min-width: 1024px) { .split { grid-template-columns: 1fr 1fr; gap: 64px; } } .split-img { order: 2; } .split-txt { order: 1; } @media (min-width: 1024px) { .split-img { order: 1; } .split-txt { order: 2; } } .pills { display: grid; gap: 12px; margin-top: 32px; } @media (min-width: 640px) { .pills { grid-template-columns: 1fr 1fr; } } .pills li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.9); transition: border-color 0.3s var(--ease); } @media (hover: hover) { .pills li:hover { border-color: rgba(255, 106, 0, 0.3); } } .pill-ico { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 999px; background: rgba(255, 106, 0, 0.15); color: var(--brand); } .pill-ico .ico { font-size: 11px; stroke-width: 3.5; } /* --------------------------------- Módulos -------------------------------- */ .mods { margin-top: 56px; display: grid; gap: 80px; } @media (min-width: 1024px) { .mods { margin-top: 80px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; align-items: start; } } .mods-txt { display: grid; gap: 80px; } @media (min-width: 1024px) { .mods-txt { gap: 0; } .mod-block { display: flex; flex-direction: column; justify-content: center; min-height: 74vh; padding: 40px 0; } } .mod-block .lead { margin-top: 16px; } .bullets { display: grid; gap: 10px; margin-top: 24px; } .bullets li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: rgba(255, 255, 255, 0.85); } .bul-ico { display: grid; place-items: center; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 999px; border: 1px solid rgba(255, 106, 0, 0.35); background: rgba(255, 106, 0, 0.1); color: var(--brand); } .bul-ico .ico { font-size: 11px; stroke-width: 3; } /* No mobile cada módulo mostra o seu print embaixo do texto. */ .mod-shot-inline { margin-top: 32px; } @media (min-width: 1024px) { .mod-shot-inline { display: none; } } /* No desktop o print gruda e faz crossfade. */ .mods-media { display: none; } @media (min-width: 1024px) { .mods-media { display: block; position: sticky; top: 112px; height: 640px; } .mods-stack { position: relative; width: 100%; height: 100%; } .mods-stack > div { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.95); pointer-events: none; transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); } .mods-stack > div.on { opacity: 1; transform: none; pointer-events: auto; } .mods-dots { position: absolute; left: -32px; top: 50%; display: flex; flex-direction: column; gap: 8px; transform: translateY(-50%); } .mods-dots i { width: 3px; height: 12px; border-radius: 999px; background: var(--line); transition: height 0.5s var(--ease), background-color 0.5s var(--ease); } .mods-dots i.on { height: 32px; background: var(--brand); } } .shot-narrow { max-width: 320px; margin: 0 auto; } /* ------------------------------ Como funciona ----------------------------- */ /* `--p` é o quanto a seção já passou pela tela, de 0 a 1. Quem escreve é o main.js, a cada frame, enquanto a seção está visível. Tudo aqui embaixo é derivado dele: o trilho, a bolinha e os passos que acendem. `--w` é a largura do trilho em pixels. Preciso dela para mover a bolinha com `transform` em vez de `left`: `left` refaz o layout a cada frame, `transform` não sai da GPU. */ .steps-wrap { position: relative; margin-top: 80px; --p: 1; --w: 0px; } /* Sem JavaScript, `--p` fica em 1 e a seção aparece inteira, acesa. */ .js .steps-wrap { --p: 0; } .steps { display: grid; gap: 40px; } @media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 24px; } } .step { position: relative; padding-left: 68px; } @media (min-width: 1024px) { .step { padding-left: 0; } } .step-mark { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; border: 1px solid var(--line); background: var(--card); color: var(--brand); box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.9); transition: color 0.45s var(--ease), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease); } /* O passo nasce apagado e acende quando o trilho chega nele. Só `color`, `border-color`, `box-shadow` e `opacity`: nenhuma delas mexe no layout. */ .js .step:not(.on) .step-mark { color: var(--dim); box-shadow: none; } .js .step:not(.on) .step-num { background: var(--line); color: var(--dim); } .step.on .step-mark { border-color: rgba(255, 106, 0, 0.45); box-shadow: 0 0 0 1px rgba(255, 106, 0, 0.15), 0 6px 16px -10px rgba(0, 0, 0, 0.9); } @media (min-width: 1024px) { .step-mark { position: relative; margin-bottom: 28px; } } .step-mark .ico { font-size: 20px; } .step-num { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--brand); color: #fff; font-size: 10px; font-weight: 700; transition: background-color 0.45s var(--ease), color 0.45s var(--ease); } .step h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; } .step p { margin-top: 8px; max-width: 280px; font-size: 14px; line-height: 1.6; color: var(--muted); } /* Trilho que preenche conforme a seção passa pela tela. */ .rail-v { position: absolute; top: 8px; left: 27px; width: 2px; height: calc(100% - 16px); border-radius: 999px; background: var(--line); } .rail-h { display: none; } @media (min-width: 1024px) { .rail-v { display: none; } .rail-h { display: block; position: absolute; top: 27px; left: 0; width: 100%; height: 2px; border-radius: 999px; background: var(--line); } } /* O preenchimento é `scale`, não `width`: escalar é só a GPU esticando uma camada pronta, enquanto mudar a largura obrigaria o navegador a refazer o layout a cada frame da rolagem. A transição curta (.15s) é de propósito: ela só suaviza o serrilhado entre um frame e outro. Quem manda no valor é a rolagem, não o relógio. */ .rail-fill { width: 100%; height: 100%; border-radius: 999px; background: linear-gradient(180deg, var(--brand), rgba(255, 106, 0, 0.5)); transform: scaleY(var(--p)); transform-origin: top; transition: transform 0.15s linear; } .rail-h .rail-fill { background: linear-gradient(90deg, var(--brand), rgba(255, 106, 0, 0.5)); transform: scaleX(var(--p)); transform-origin: left; } /* A bolinha anda na ponta do trilho. `translateX` sobre a largura medida, e não `left`, para não refazer o layout a cada frame. */ .rail-dot { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 999px; background: var(--brand); box-shadow: 0 0 8px 1px rgba(255, 106, 0, 0.8); transform: translateX(calc(var(--p) * var(--w))); transition: transform 0.15s linear; } /* ------------------------------- Comparativo ------------------------------ */ .cmp { margin-top: 64px; overflow: hidden; border-radius: 24px; border: 1px solid var(--line); background: var(--card); box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.9); } .cmp-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 20px; border-bottom: 1px solid var(--line); background: #1a1a1a; } @media (min-width: 640px) { .cmp-head { grid-template-columns: 1.2fr 1fr 1fr; gap: 24px; padding: 24px; } } .cmp-label { display: none; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); } @media (min-width: 640px) { .cmp-label { display: block; } } .cmp-us, .cmp-them { display: flex; align-items: center; justify-content: center; padding: 12px; border-radius: 18px; } .cmp-us { border: 1px solid rgba(255, 106, 0, 0.35); background: rgba(255, 106, 0, 0.08); box-shadow: 0 0 14px -6px rgba(255, 106, 0, 0.9); } .cmp-us img { height: 28px; width: auto; } .cmp-them { border: 1px solid var(--line); background: var(--card); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--muted); } .cmp-vs { display: grid; place-items: center; justify-self: center; flex: none; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: 10px; font-weight: 700; color: var(--dim); } @media (min-width: 640px) { .cmp-vs { display: none; } } .cmp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 20px; border-top: 1px solid var(--line); } @media (min-width: 640px) { .cmp-row { grid-template-columns: 1.2fr 1fr 1fr; align-items: center; gap: 24px; padding: 24px; } } .cmp-crit { grid-column: span 2; display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; } @media (min-width: 640px) { .cmp-crit { grid-column: span 1; } } .cmp-crit-ico { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--line); background: #1a1a1a; color: #8c8c8c; } .cmp-crit-ico .ico { font-size: 15px; } .cmp-yes, .cmp-no { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; font-size: 13.5px; } @media (min-width: 640px) { .cmp-yes, .cmp-no { font-size: 14px; } } .cmp-yes { border: 1px solid rgba(255, 106, 0, 0.25); background: rgba(255, 106, 0, 0.06); font-weight: 600; } .cmp-no { border: 1px solid var(--line); background: #1a1a1a; color: var(--muted); } .cmp-mark { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 999px; } .cmp-yes .cmp-mark { background: var(--brand); color: #fff; } .cmp-no .cmp-mark { border: 1px solid var(--line); background: var(--card); color: var(--dim); } .cmp-mark .ico { font-size: 11px; stroke-width: 3.5; } /* ------------------------------- Depoimentos ------------------------------ */ .grid-3 { display: grid; gap: 20px; margin-top: 64px; } @media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } } .quote { display: flex; flex-direction: column; padding: 24px; border-radius: 20px; border: 1px solid var(--line); background: var(--card); transition: transform 0.3s var(--ease), border-color 0.3s var(--ease); } @media (hover: hover) { .quote:hover { transform: scale(1.03); border-color: rgba(255, 106, 0, 0.35); } } .quote > .ico { font-size: 26px; fill: rgba(255, 106, 0, 0.3); stroke: none; } .quote blockquote { flex: 1; margin-top: 16px; font-size: 14.5px; line-height: 1.65; color: rgba(255, 255, 255, 0.85); text-wrap: pretty; } .quote-foot { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); } .avatar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 999px; background: linear-gradient(135deg, #ff6a00, #ff9a57); font-size: 14px; font-weight: 700; box-shadow: 0 3px 10px -4px rgba(255, 106, 0, 0.9); } .quote figcaption { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stars { display: flex; gap: 2px; color: var(--brand); } .stars .ico { font-size: 12px; fill: currentColor; stroke: none; } /* ------------------------------- CTA laranja ------------------------------ */ .cta { padding: 64px 20px; } @media (min-width: 640px) { .cta { padding: 96px 20px; } } .cta-box { position: relative; overflow: hidden; max-width: 1200px; margin: 0 auto; padding: 64px 24px; border-radius: 32px; text-align: center; background: linear-gradient(135deg, #ff6a00 0%, #ff7e26 45%, #ffa45c 100%); } @media (min-width: 640px) { .cta-box { padding: 96px 48px; } } .cta-box::before { content: ""; position: absolute; inset: 0; background: radial-gradient( 120% 120% at 50% 0%, rgba(255, 255, 255, 0.28), transparent 55% ); } .cta-box > * { position: relative; } .cta-box h2 { max-width: 760px; margin: 0 auto; font-size: 32px; font-weight: 700; line-height: 1.1; letter-spacing: -0.035em; text-wrap: balance; } @media (min-width: 640px) { .cta-box h2 { font-size: 44px; } } @media (min-width: 1024px) { .cta-box h2 { font-size: 54px; } } .cta-box p { max-width: 560px; margin: 20px auto 0; font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, 0.85); text-wrap: pretty; } @media (min-width: 640px) { .cta-box p { font-size: 17px; } } .cta-box .btn { margin-top: 40px; } .cta-note { margin-top: 24px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.75); } /* --------------------------------- Planos --------------------------------- */ .toggle-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 48px; } .toggle-lbl { font-size: 13px; font-weight: 500; color: var(--muted); } .toggle { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); } /* A pílula desliza com transform. */ .toggle-pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--brand); box-shadow: 0 4px 12px -6px rgba(255, 106, 0, 0.7); transition: transform 0.3s var(--ease); } .toggle[data-period="trimestral"] .toggle-pill { transform: translateX(100%); } .toggle button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--muted); transition: color 0.3s var(--ease); } .toggle button[aria-selected="true"] { color: #fff; } .toggle-tag { padding: 2px 6px; border-radius: 6px; font-size: 10px; font-weight: 700; background: rgba(34, 197, 94, 0.15); color: var(--ok); transition: background-color 0.3s var(--ease), color 0.3s var(--ease); } .toggle button[aria-selected="true"] .toggle-tag { background: rgba(255, 255, 255, 0.25); color: #fff; } .plans { display: grid; gap: 24px; max-width: 900px; margin: 56px auto 0; align-items: start; } @media (min-width: 768px) { .plans { grid-template-columns: 1fr 1fr; } } .plan { position: relative; display: flex; flex-direction: column; padding: 28px; border-radius: 24px; border: 1px solid var(--line); background: rgba(32, 32, 32, 0.6); transition: transform 0.3s var(--ease), border-color 0.3s var(--ease); } @media (min-width: 640px) { .plan { padding: 32px; } } @media (hover: hover) { .plan:hover { transform: translateY(-6px); } } .plan-top { border-color: rgba(255, 106, 0, 0.5); background: var(--card); box-shadow: 0 0 0 1px rgba(255, 106, 0, 0.2), 0 10px 28px -14px rgba(255, 106, 0, 0.55); } .plan-top::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 24px; background: linear-gradient( 180deg, rgba(255, 106, 0, 0.12), transparent 60% ); } .plan-badge { position: absolute; top: -14px; right: 24px; display: flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 999px; background: linear-gradient(135deg, #ff6a00, #ffa45c); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; box-shadow: 0 4px 12px -5px rgba(255, 106, 0, 1); } .plan-badge .ico { font-size: 11px; fill: currentColor; stroke: none; } .plan h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; } .plan-desc { min-height: 40px; margin-top: 8px; font-size: 13.5px; line-height: 1.6; color: var(--muted); } .plan-price { margin-top: 24px; } .plan-price-row { display: flex; align-items: flex-end; gap: 6px; } .plan-cur, .plan-per { padding-bottom: 6px; font-size: 15px; font-weight: 500; color: var(--muted); } .plan-int { font-size: 52px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; } .plan-dec { padding-bottom: 6px; font-size: 18px; font-weight: 700; } .plan-note { margin-top: 10px; font-size: 12.5px; color: var(--muted); } .plan .btn { margin-top: 24px; } .plan-hr { height: 1px; margin: 28px 0; background: var(--line); } .plan-inc { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); } .plan-feats { display: grid; gap: 12px; margin-top: 20px; flex: 1; } .plan-feats li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: rgba(255, 255, 255, 0.85); } .plan-feats li.off { color: var(--dim); } .plan-feats .ico { flex: none; margin-top: 2px; font-size: 16px; stroke-width: 3; } .plan-feats li .ico { color: var(--ok); } .plan-feats li.off .ico { color: var(--danger); } .safe { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 48px; font-size: 13.5px; color: var(--muted); } .safe .ico { font-size: 16px; color: var(--brand); } /* ----------------------------------- FAQ ---------------------------------- */ .faq { display: grid; gap: 12px; max-width: 768px; margin: 56px auto 0; } .faq-item { overflow: hidden; border-radius: 20px; border: 1px solid var(--line); background: var(--card); transition: border-color 0.3s var(--ease); } .faq-item.open { border-color: rgba(255, 106, 0, 0.35); } .faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 20px; text-align: left; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; } @media (min-width: 640px) { .faq-q { padding: 20px 24px; font-size: 16.5px; } } .faq-plus { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--line); background: #1a1a1a; color: var(--muted); transition: transform 0.3s var(--ease), background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease); } .faq-plus .ico { font-size: 15px; stroke-width: 2.5; } .faq-item.open .faq-plus { transform: rotate(45deg); border-color: var(--brand); background: var(--brand); color: #fff; } /* Truque do grid: animar 0fr -> 1fr faz a altura crescer sozinha, sem que ninguém precise medir nada em JavaScript. */ .faq-a { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.4s var(--ease), opacity 0.4s var(--ease); } .faq-item.open .faq-a { grid-template-rows: 1fr; opacity: 1; } .faq-a > div { overflow: hidden; } .faq-a p { padding: 0 20px 20px; font-size: 14.5px; line-height: 1.65; color: var(--muted); text-wrap: pretty; } @media (min-width: 640px) { .faq-a p { padding: 0 24px 24px; } } .faq-end { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 56px; text-align: center; } .faq-end p { font-size: 15px; color: var(--muted); } /* --------------------------------- Rodapé --------------------------------- */ .foot { position: relative; overflow: hidden; border-top: 1px solid var(--line); background: var(--section); padding: 64px 0; } @media (min-width: 640px) { .foot { padding: 80px 0; } } .foot-top { display: grid; gap: 48px; } @media (min-width: 1024px) { .foot-top { grid-template-columns: 1.5fr repeat(3, 1fr); gap: 32px; } } .foot-brand { max-width: 384px; } .foot-brand img { height: 40px; width: auto; } .foot-brand p { margin-top: 20px; font-size: 14px; line-height: 1.65; color: var(--muted); } .foot-col h3 { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .foot-col ul { display: grid; gap: 12px; margin-top: 20px; } .foot-col a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); transition: color 0.3s var(--ease); } .foot-col a .ico { font-size: 13px; opacity: 0; transition: opacity 0.3s var(--ease); } @media (hover: hover) { .foot-col a:hover { color: #fff; } .foot-col a:hover .ico { opacity: 1; } } .foot-bot { display: flex; flex-direction: column; gap: 16px; margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); } @media (min-width: 640px) { .foot-bot { flex-direction: row; align-items: center; justify-content: space-between; } } .foot-bot p:first-child { font-size: 13px; color: var(--muted); } .foot-legal { max-width: 576px; font-size: 12.5px; line-height: 1.65; color: #7a7a7a; } @media (min-width: 640px) { .foot-legal { text-align: right; } } /* ------------------------------ Suporte fixo ------------------------------ */ .sup { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: flex; align-items: center; height: 44px; padding: 0 12px; overflow: hidden; border-radius: 999px; border: 1px solid var(--line); background: var(--card); box-shadow: 0 4px 12px -5px rgba(0, 0, 0, 0.9); transition: transform 0.3s var(--ease), background-color 0.3s var(--ease), border-color 0.3s var(--ease); animation: rise 0.8s var(--ease) 1.2s backwards; } @media (min-width: 640px) { .sup { right: 28px; bottom: 28px; } } .sup .ico { flex: none; font-size: 18px; color: var(--brand); transition: color 0.3s var(--ease); } .sup span { max-width: 0; white-space: nowrap; font-size: 14px; font-weight: 600; opacity: 0; transition: max-width 0.3s var(--ease), opacity 0.3s var(--ease), margin-left 0.3s var(--ease); } @media (hover: hover) { .sup:hover { transform: scale(1.05); border-color: rgba(255, 106, 0, 0.5); background: var(--brand); } .sup:hover .ico { color: #fff; } .sup:hover span { max-width: 90px; margin-left: 8px; opacity: 1; } } /* --------------------------- Movimento reduzido --------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }