/* ========================================================================== BRINDEFLY — style.css 1 arquivo, organizado por seções numeradas (1 por bloco da página). Sem :root e sem reset global — tudo escopado em cada bloco (.s04, .s06...) pra não conflitar quando novos blocos forem entrando. Cores em hex direto. ÍNDICE 1. BASE — reset escopado, container (.wrap), selo (.badge) 2. EFEITOS DE SCROLL — [data-scrub] (motor em assets/js/script.js) 3. EFEITOS DE ENTRADA — [data-reveal] (above the fold, sem rolagem) 4. BLOCO 01 — Hero + menu 5. BLOCO 02 — Sincronizado com o Fornecedor + Painel intuitivo 6. BLOCO 03 — Venda por quantidade e faixa de preço 7. BLOCO 04 — Crie um catálogo exclusivo 8. BLOCO 05 — Sistema de orçamento com métricas 9. BLOCO 06 — Produtos prontos para vender 10. BLOCO 07 — Automação de preços 11. BLOCO 08 — Sistema avançado de busca (+ 09 Sem limites, aninhado) 12. BLOCO 10 — Checkout em 40 segundos 13. FOOTER 14. MODAL — Fila de espera / contato 15. SCAFFOLDING de preview (não há mais placeholders no HTML — só o reset de abaixo continua em uso pelo preview isolado deste arquivo) ========================================================================== */ /* ========================================================================== 1. BASE ========================================================================== */ .s01, .s02, .s03, .s04, .s05, .s06, .s07, .s08, .s10, .ft{ font-family:"Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color:#1b1f27; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .s01 *, .s01 *::before, .s01 *::after, .s02 *, .s02 *::before, .s02 *::after, .s03 *, .s03 *::before, .s03 *::after, .s04 *, .s04 *::before, .s04 *::after, .s05 *, .s05 *::before, .s05 *::after, .s06 *, .s06 *::before, .s06 *::after, .s07 *, .s07 *::before, .s07 *::after, .s08 *, .s08 *::before, .s08 *::after, .s10 *, .s10 *::before, .s10 *::after, .ft *, .ft *::before, .ft *::after, .scrollpad, .scrollpad *{ box-sizing:border-box; } /* :where() = especificidade zero — o reset nunca briga com o CSS de cada bloco */ .s01 :where(img), .s02 :where(img), .s03 :where(img), .s04 :where(img), .s05 :where(img), .s06 :where(img), .s07 :where(img), .s08 :where(img), .s10 :where(img), .ft :where(img){ max-width:100%; display:block; } .s01 :where(p), .s02 :where(p), .s03 :where(p), .s04 :where(p), .s05 :where(p), .s06 :where(p), .s07 :where(p), .s08 :where(p), .s10 :where(p), .ft :where(p) { margin:0; } .s10 :where(a), .ft :where(a){ text-decoration:none; color:inherit; } .s08 :where(a){ text-decoration:none; color:inherit; } .s01 :where(a), .s02 :where(a){ text-decoration:none; color:inherit; } html{ scroll-behavior:smooth; overflow-x:hidden; } body{ overflow-x:hidden; } /* Container central --------------------------------------------------------*/ .wrap{ width:100%; max-width:1324px; /* 1260 + 32 de gutter dos dois lados */ margin-inline:auto; padding-inline:32px; } @media (max-width:600px){ .wrap{ padding-inline:20px; } } /* Selo / badge — reutilizado por vários blocos ------------------------------ */ .badge{ display:inline-flex; align-items:center; gap:10px; height:38px; padding:0 22px; border-radius:36px; background:linear-gradient(106deg, #6b57ec 28%, #4d4fd1 97%); color:#fff; font-size:14px; font-weight:600; letter-spacing:-0.01em; white-space:nowrap; } .badge img{ width:13px; height:auto; } /* ========================================================================== 2. EFEITOS DE SCROLL — ligados à rolagem (scrub): progride ao descer, reverte ao subir. O JS (assets/js/script.js) escreve --bf-p (0 → 1) em cada [data-scrub] conforme ele cruza a viewport. Custom props com prefixo --bf- e escopadas no próprio elemento (não em :root). ========================================================================== */ [data-scrub]{ --bf-p:0; --bf-dist:120px; /* deslocamento horizontal */ --bf-dist-y:70px; /* deslocamento vertical (ponto inicial) */ --bf-final-y:0px; /* desloca só o ponto final (0 = final na posição normal) */ opacity:var(--bf-p); will-change:transform, opacity; } [data-scrub="left"] { transform:translateX(calc((var(--bf-p) - 1) * var(--bf-dist))); } [data-scrub="right"]{ transform:translateX(calc((1 - var(--bf-p)) * var(--bf-dist))); } [data-scrub="up"] { transform:translateY(calc((1 - var(--bf-p)) * var(--bf-dist-y) - var(--bf-p) * var(--bf-final-y))); } [data-scrub="down"] { transform:translateY(calc((var(--bf-p) - 1) * var(--bf-dist-y) + var(--bf-p) * var(--bf-final-y))); } [data-scrub="zoom"] { transform:scale(calc(0.9 + var(--bf-p) * 0.1)); } .scrub-sm{ --bf-dist:60px; --bf-dist-y:40px; } /* elementos pequenos (pills, ícones) */ @media (prefers-reduced-motion:reduce){ [data-scrub]{ --bf-p:1 !important; opacity:1 !important; transform:none !important; } } /* ========================================================================== 3. EFEITOS DE ENTRADA — [data-reveal] Pra conteúdo "above the fold" (ex.: o Hero do bloco 01): como ele já aparece na tela no carregamento, não há rolagem pra "revelar" nada — o [data-scrub] ficaria sempre com --bf-p:1 e nunca se veria animar. Em vez disso, [data-reveal] dispara UMA VEZ no carregamento da página (JS adiciona .is-in), com o mesmo idioma visual (fade + leve translação) e cascata via data-reveal-delay (ms). ========================================================================== */ [data-reveal]{ opacity:0; transition:opacity .7s ease, transform .7s cubic-bezier(.16,.72,.24,1); will-change:opacity, transform; } [data-reveal="up"] { transform:translateY(22px); } [data-reveal="down"]{ transform:translateY(-22px); } [data-reveal="left"] { transform:translateX(-26px); } [data-reveal="right"]{ transform:translateX(26px); } [data-reveal="fade"]{ transition:opacity .7s ease; } /* só aparece, sem deslocamento */ [data-reveal].is-in{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; } } /* ========================================================================== 4. BLOCO 01 — Hero + menu ========================================================================== */ .s01{ position:relative; background:#fff; padding:40px 0 74px; } /* --- Menu ------------------------------------------------------------------ */ .s01-nav{ display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:64px; } .s01-nav__logo{ height:62px; width:auto; flex-shrink:0; } .s01-nav__menu{ display:flex; align-items:center; gap:46px; list-style:none; margin:0; padding:0; } .s01-nav__menu a{ font-size:15px; font-weight:500; color:#000; white-space:nowrap; transition:color 0.3s ease; } .s01-nav__menu a:hover{ color:#fcbe2c; } .s01-nav__cta{ display:inline-flex; align-items:center; justify-content:center; height:47px; padding:0 26px; border-radius:17px; background:#083fc9; color:#fff; font-size:14px; font-weight:600; letter-spacing:-0.14px; white-space:nowrap; flex-shrink:0; } /* --- Hero -------------------------------------------------------------- */ .s01-hero{ text-align:center; } .s01-title{ margin:0 auto; max-width:1013px; color:#061e4c; font-size:50px; font-weight:800; line-height:0.80; letter-spacing:-0.03em; } /* vira um "bloco" próprio dentro do h1 — evita a pílula colidir com a linha de cima/baixo (padding de um inline não empurra as linhas vizinhas) e continua responsivo: cada trecho quebra sozinho. */ .s01-title__highlight{ display:block; width:fit-content; margin:0.22em auto; background:#083fc9; color:#fff; padding:0.14em 0.5em; border-radius:14px; } .s01-subtitle{ max-width:1020px; margin:20px auto 0; color:#080808; font-size:16px; font-weight:400; line-height:1.44; letter-spacing:-0.16px; } .s01-actions{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:32px; margin-top:52px; } .s01-actions__timer{ display:inline-flex; align-items:center; gap:13px; color:#083fc9; font-size:18px; font-weight:700; letter-spacing:-0.18px; white-space:nowrap; } .s01-actions__timer img{ width:35px; height:35px; } /* botão replicado do brindefly.com.br: "shine" passando em loop no estado normal (raven-button-widget-normal-effect-shine) + "grow" no hover (elementor-animation-grow, scale(1.1)) */ .s01-actions__cta{ position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; height:67px; padding:0 40px; border-radius:26px; background:linear-gradient(90deg, #6763d9 1.44%, #083fc9 100%); color:#fff; font-size:16px; font-weight:700; letter-spacing:-0.16px; white-space:nowrap; transition:transform 0.3s; } .s01-actions__cta:hover, .s01-actions__cta:focus-visible{ transform:scale(1.1); } .s01-actions__cta:not(:hover)::before{ content:""; display:block; position:absolute; top:0; left:-75%; width:50%; height:100%; transform:skewX(30deg); z-index:2; background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.19) 50%, rgba(255,255,255,0) 100%); animation:s01-shine 1.5s linear infinite; } @keyframes s01-shine{ 100%{ left:125%; } } @media (prefers-reduced-motion:reduce){ .s01-actions__cta::before{ animation:none; content:none; } .s01-actions__cta{ transition:none; } } /* --- Responsivo bloco 01 --------------------------------------------------- */ @media (max-width:1024px){ .s01-nav__menu{ display:none; } } @media (max-width:960px){ .s01-title{ font-size:38px; } } @media (max-width:600px){ .s01{ padding:24px 0 48px; } .s01-nav{ margin-bottom:40px; } .s01-nav__logo{ height:52px; } .s01-nav__cta{ height:40px; padding:0 18px; font-size:12.5px; } .s01-title{ font-size:28px; line-height:1.35; } /* no mobile o destaque some do "bloco próprio" e vira inline, colado só nas palavras — cada linha que ele ocupar ganha seu próprio fundo. (line-height precisa de espaço extra aqui pra pílula não colidir com a linha vizinha, diferente do 0.80 usado no resto do título) */ .s01-title__highlight{ display:inline; width:auto; margin:0; padding:0.03em 0.3em; box-decoration-break:clone; -webkit-box-decoration-break:clone; } .s01-subtitle{ font-size:15px; margin-top:16px; } .s01-actions{ gap:20px; margin-top:32px; } .s01-actions__timer{ font-size:15px; } .s01-actions__cta{ height:54px; padding:0 28px; font-size:14.5px; } } @media (max-width:380px){ .s01-title{ font-size:24px; } } /* ========================================================================== 5. BLOCO 02 — Sincronizado com o Fornecedor + Painel intuitivo ========================================================================== */ /* --- fundo azul (Sincronizado + título/mockup do Painel) ------------------- */ .s02{ /* zoom fluido do .s02-panel-visual (repetido aqui pro .s02-tail calcular o espaço antes do texto — ver comentário lá). Fluido em vez de breakpoints fixos: a caixa (1483px) tem cards que vazam pros dois lados, e um zoom fixo por faixa deixava a caixa mais larga que a tela em certas larguras — cortando o card esquerdo pra fora da viewport sem poder rolar até ele. calc() garante que a caixa nunca passe do espaço disponível (100vw-64 de gutter), só limitada a 0.85 como teto pra telas grandes. */ --panel-zoom:min(0.85, calc((100vw - 64px) / 1483px)); } .s02-top{ position:relative; z-index:1; /* garante que o mockup, ao vazar, fique acima do fecho branco */ background:linear-gradient(180deg, #080bc9 0%, #080bc9 38%, #6a67da 100%); padding:70px 0 0; } /* --- "Sincronizado com estoque do seu Fornecedor" -------------------------- */ .s02-sync-grid{ display:grid; grid-template-columns:minmax(0,480px) minmax(0,1fr); gap:40px 70px; align-items:start; } .s02-sync-title{ margin:22px 0 0; max-width:480px; color:#fff; font-size:52px; font-weight:700; line-height:0.93; letter-spacing:-0.03em; } .s02-sync-subtitle{ margin:18px 0 0; max-width:434px; color:#ffd931; font-size:22px; font-weight:500; line-height:0.95; letter-spacing:-0.03em; } .s02-sync-body{ margin:22px 0 0; max-width:476px; color:#fff; font-size:16px; font-weight:400; line-height:1.25; letter-spacing:-0.16px; } .s02-sync-body p + p{ margin-top:1em; } .s02-sync-body b{ font-weight:600; } /* coluna direita: fluxograma + selos — largura igual ao Figma (513px), não um valor arbitrário menor, pra não encolher a composição toda. */ .s02-flow{ position:relative; width:100%; max-width:513px; margin-inline:auto; container-type:inline-size; } .s02-flow__label{ position:absolute; left:67.3%; top:37.6%; width:29.2%; color:#fff; font-size:2.9cqw; font-weight:600; text-align:center; line-height:1.15; letter-spacing:-0.03em; } .s02-sync-highlight{ max-width:520px; margin:14px auto 0; color:#ffd931; font-size:24px; font-weight:700; text-align:center; line-height:0.95; letter-spacing:-0.03em; } .s02-pills{ display:flex; flex-wrap:wrap; justify-content:center; gap:23px; margin-top:18px; } .s02-pill{ display:flex; align-items:center; gap:13px; width:282px; /* fixo, igual ao Figma — o texto quebra em 2 linhas */ min-height:73px; background:#2966ff; color:#fff; font-size:16px; font-weight:700; line-height:1.05; letter-spacing:-0.03em; padding:12px 22px 12px 19px; border-radius:27px; } .s02-pill img{ width:26px; height:26px; flex-shrink:0; } .s02-sync-caption{ max-width:520px; margin:14px auto 0; color:#fff; font-size:19px; font-weight:500; text-align:center; letter-spacing:-0.03em; } /* --- 2 cards contornados (linha cheia, abaixo da grid) ---------------------- */ .s02-cards{ display:grid; grid-template-columns:1fr 1fr; gap:50px; margin-top:50px; } /* ícone ao lado do título (mesma linha) e a descrição alinhada embaixo do título — não do ícone — igual ao Figma (ícone x409, título/descrição x486). */ .s02-card{ display:grid; grid-template-columns:60px 1fr; column-gap:17px; row-gap:14px; border:2px solid #4b7eff; border-radius:44px; padding:36px 50px; } .s02-card__ic{ grid-column:1; grid-row:1; align-self:start; width:60px; height:60px; } .s02-card h3{ grid-column:2; grid-row:1; margin:0; align-self:start; color:#fff; font-size:30px; font-weight:700; line-height:0.95; letter-spacing:-0.03em; } .s02-card p{ grid-column:2; grid-row:2; max-width:382px; color:#fff; font-size:15px; font-weight:400; line-height:1.33; letter-spacing:-0.15px; } /* --- "Painel intuitivo e fácil de navegar" ---------------------------------- */ .s02-panel-title{ margin:80px 0 0; text-align:center; color:#fff; font-size:47px; font-weight:300; line-height:1.077; letter-spacing:-0.02em; } .s02-panel-title b{ font-weight:700; } /* mockup do painel — escala 1:1 do Figma (palco 1483 x 788), com o dashboard "caindo" pra fora do fundo azul de propósito — igual fizemos com o card do bloco 06: como TODO filho aqui é absolute, a altura do palco conta só até onde o azul deve terminar (389px) e a imagem/cards continuam além disso, vazando por cima do que vem depois (sem precisar de margin negativo, que não reduz a altura do pai de forma confiável quando combinado com zoom). */ .s02-panel-visual{ position:relative; z-index:1; left:50%; width:1483px; height:389px; margin-top:56px; zoom:var(--panel-zoom); } /* centraliza via transform, não margin:auto — combinado com zoom, o auto-centering do margin quebra (margin-left vira 0 e margin-right fica negativo, em vez de simétrico). Precisa incluir o scale do [data-scrub="zoom"] na mesma declaração, senão uma sobrescreve a outra (mesma especificidade). */ .s02-panel-visual[data-scrub="zoom"]{ transform:translateX(-50%) scale(calc(0.9 + var(--bf-p) * 0.1)); } .s02-panel-visual__img{ position:absolute; left:138px; top:0; width:1220px; border-radius:14px; filter:drop-shadow(0 20px 40px rgba(6,11,90,.35)); } .s02-panel-visual__el{ position:absolute; filter:drop-shadow(0 14px 28px rgba(0,0,0,.18)); } .s02-panel-visual__dados{ left:0; top:305px; width:294px; --bf-final-y:60px; } .s02-panel-visual__menu { left:1240px; top:123px; width:243px; --bf-final-y:90px; } /* --- fecho em fundo branco --------------------------------------------------- */ .s02-tail{ position:relative; z-index:2; /* fica acima do vazamento do .s02-panel-visual (z-index:1) */ /* 454px = quanto a imagem (788px de altura real) ultrapassa a caixa encurtada do .s02-panel-visual (389px) + a folga de 55px do Figma — escalado pelo mesmo --panel-zoom do mockup, senão o texto nasce embaixo da imagem em telas menores. */ padding:calc(459px * var(--panel-zoom)) 0 90px; text-align:center; } .s02-tail__text{ max-width:760px; margin-inline:auto; color:#000; font-size:30px; font-weight:300; line-height:1.137; letter-spacing:-0.01em; } .s02-tail__text b{ font-weight:500; } /* --- Responsivo bloco 02 ---------------------------------------------------- */ /* --panel-zoom já é fluido (ver .s02 acima) — só as fontes/grid mudam aqui */ @media (max-width:1180px){ .s02-sync-title{ font-size:44px; } .s02-panel-title{ font-size:40px; } } @media (max-width:960px){ .s02-top{ padding-top:56px; } .s02-sync-grid{ grid-template-columns:1fr; gap:44px; text-align:center; } .s02-sync-title, .s02-sync-subtitle, .s02-sync-body{ margin-inline:auto; } .s02-flow{ max-width:360px; } .s02-cards{ grid-template-columns:1fr; gap:20px; } .s02-card{ grid-template-columns:1fr; justify-items:center; text-align:center; } .s02-card__ic{ grid-column:1; grid-row:1; } .s02-card h3{ grid-column:1; grid-row:2; } .s02-card p{ grid-column:1; grid-row:3; margin-inline:auto; } .s02-panel-title{ font-size:34px; margin-top:60px; } .s02-tail__text{ font-size:24px; } } @media (max-width:600px){ .s02-sync-title{ font-size:32px; } .s02-sync-subtitle{ font-size:19px; } .s02-sync-highlight{ font-size:20px; } .s02-pill{ width:100%; max-width:282px; font-size:14px; min-height:64px; padding:10px 18px 10px 15px; } .s02-panel-title{ font-size:26px; } .s02-tail{ padding-bottom:56px; } .s02-tail__text{ font-size:19px; } } /* ========================================================================== 6. BLOCO 03 — Venda por quantidade e faixa de preço ========================================================================== */ .s03{ background:linear-gradient(180deg, #080bc9 0%, #080bc9 38%, #6a67da 100%); padding:82px 0 90px; text-align:center; } .s03-badge{ margin-inline:auto; } .s03-title{ margin:20px auto 0; max-width:673px; color:#fff; font-size:52px; font-weight:700; line-height:0.96; letter-spacing:-0.03em; } .s03-subtitle{ margin:18px auto 0; max-width:991px; color:#fff; font-size:17px; font-weight:400; line-height:1.29; letter-spacing:-0.03em; } .s03-stage{ position:relative; height:660px; max-width:1260px; margin:0 auto; } .s03-stage__pdp{ position:absolute; left:95px; top:18px; width:786px; border-radius:24px; filter:drop-shadow(0 0 20px rgba(0,0,0,.2)); } .s03-stage__discount{ position:absolute; left:624px; top:160px; width:561px; border-radius:20px; filter:drop-shadow(0 0 20px rgba(0,0,0,.2)); } .s03-stage__arrow{ position:absolute; left:862px; top:11px; width:118px; transform:scaleY(-1) rotate(-81.88deg); } .s03-stage__caption{ position:absolute; left:932px; top:76px; width:253px; color:#fff; font-size:27px; font-weight:700; line-height:0.96; letter-spacing:-0.02em; text-align:left; } /* --- Responsivo bloco 03 ----------------------------------------------------- */ @media (max-width:1330px){ .s03-stage{ zoom:0.85; } } @media (max-width:1180px){ .s03-title{ font-size:44px; } .s03-stage{ zoom:0.7; } } @media (max-width:960px){ .s03-title{ font-size:36px; } .s03-subtitle{ font-size:16px; } .s03-stage{ zoom:0.52; } } @media (max-width:600px){ /* seção fica bem mais alta empilhada (cards um embaixo do outro) — o degradê original (pensado pra altura compacta do desktop) viraria claro cedo demais, então aqui é uma cor sólida. */ .s03{ background:#080bc9; padding:56px 0 64px; } .s03-title{ font-size:28px; } .s03-subtitle{ font-size:15px; } .s03-stage{ zoom:1; height:auto; display:flex; flex-direction:column; align-items:center; gap:56px; } .s03-stage__pdp, .s03-stage__discount, .s03-stage__arrow, .s03-stage__caption{ position:static; width:100%; max-width:360px; } .s03-stage__arrow{ display:none; } .s03-stage__caption{ text-align:center; } } /* ========================================================================== 7. BLOCO 04 — Crie um catálogo exclusivo ========================================================================== */ .s04{ position:relative; background:#f7f7f7; padding:78px 0 64px; overflow:hidden; } .s04-head{ text-align:center; } .s04-head .badge{ margin-bottom:22px; } .s04-title{ margin:0 auto; max-width:670px; color:#061e4c; font-size:52px; font-weight:700; line-height:0.95; letter-spacing:-0.03em; } /* linha: conteúdo à esquerda + mockup à direita */ .s04-grid{ display:grid; grid-template-columns:minmax(0,520px) minmax(0,1fr); gap:24px 48px; align-items:start; margin-top:34px; } .s04-intro{ color:#10131a; font-size:22px; font-weight:700; line-height:1.1; letter-spacing:-0.02em; max-width:495px; } .s04-feature{ display:grid; grid-template-columns:50px 1fr; gap:14px; margin-top:34px; } .s04-feature__ic{ width:50px; height:50px; border-radius:50%; background:#083fc9; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .s04-feature__ic img{ width:100%; height:100%; } .s04-feature__ic--glyph img{ width:22px; height:22px; } .s04-feature__title{ margin:2px 0 6px; color:#000; font-size:18px; font-weight:600; line-height:1.17; letter-spacing:-0.02em; } .s04-feature__text{ color:#000; font-size:15px; font-weight:400; line-height:1.33; letter-spacing:-0.01em; max-width:415px; } /* Mockup macbook + iphone */ .s04-mock{ position:relative; width:100%; max-width:680px; margin-left:auto; aspect-ratio:807 / 520; } .s04-mock__mac{ position:absolute; right:-6%; top:0; width:100%; filter:drop-shadow(0 30px 45px rgba(6,30,76,.18)); } .s04-mock__phone{ position:absolute; left:-1.4%; top:20%; width:24.5%; filter:drop-shadow(0 18px 30px rgba(6,30,76,.22)); } /* bloco de texto centralizado */ .s04-lead{ max-width:940px; margin:64px auto 0; text-align:center; color:#000; font-size:21px; font-weight:400; line-height:1.38; letter-spacing:-0.02em; } .s04-lead b{ font-weight:600; } .s04-kicker{ max-width:680px; margin:44px auto 0; text-align:center; color:#000; font-size:20px; font-weight:700; line-height:1.3; letter-spacing:-0.02em; } /* cards de controle */ .s04-cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; max-width:1150px; margin:26px auto 0; } .s04-card{ display:grid; grid-template-columns:26px 1fr; gap:13px; align-items:center; min-height:86px; padding:16px 22px; border-radius:21px; background:linear-gradient(125deg, #5d60f6 5%, #1750df 95%); color:#fff; font-size:14px; font-weight:700; line-height:1.2; letter-spacing:-0.02em; } .s04-card img{ width:26px; height:26px; } /* --- Responsivo bloco 04 --------------------------------------------------- */ @media (max-width:1180px){ .s04-title{ font-size:44px; } .s04-grid{ grid-template-columns:minmax(0,480px) minmax(0,1fr); } } @media (max-width:960px){ .s04{ padding:64px 0 56px; } .s04-title{ font-size:38px; } .s04-grid{ grid-template-columns:1fr; gap:40px; justify-items:start; } .s04-mock{ max-width:560px; margin-inline:auto; order:3; } .s04-mock__mac{ right:0; } .s04-lead{ margin-top:60px; font-size:19px; } } @media (max-width:600px){ .s04{ padding:48px 0 44px; } .s04-head .badge{ font-size:12.5px; height:34px; padding:0 18px; } .s04-title{ font-size:30px; } .s04-intro{ font-size:19px; } .s04-feature{ margin-top:26px; } .s04-feature__title{ font-size:16.5px; } .s04-lead{ font-size:17px; margin-top:44px; } .s04-kicker{ font-size:17px; } .s04-cards{ grid-template-columns:1fr; gap:14px; } } @media (max-width:380px){ .s04-title{ font-size:27px; } } /* ========================================================================== 8. BLOCO 05 — Sistema de orçamento com métricas Composição "palco" (igual ao mockup do bloco 02): tudo posicionado em valores absolutos exatos do Figma dentro de .s05-stage (1260px = largura do .wrap), com zoom fluido pra caber em qualquer tela sem vazar pros lados. Só a checklist de texto (não é imagem) sai da composição em telas menores — reduzir texto real via zoom até ficar ilegível não é opção. ========================================================================== */ .s05{ position:relative; background:#fff; padding:64px 0 90px; text-align:center; /* zoom do palco: nunca passa de 1 (tamanho original) nem fica maior que o espaço disponível (100vw - 64px de gutter) */ --s05-zoom:min(1, calc((100vw - 64px) / 1260px)); } .s05-badge{ margin-inline:auto; } .s05-title{ margin:20px auto 0; max-width:673px; color:#061e4c; font-size:52px; font-weight:700; line-height:0.96; letter-spacing:-0.03em; } .s05-subtitle{ margin:18px auto 0; max-width:991px; color:#1b1f27; font-size:16px; font-weight:400; line-height:1.25; letter-spacing:-0.01em; } /* --- palco: mockups do orçamento por email + métricas ----------------------- */ .s05-stage{ position:relative; left:50%; transform:translateX(-50%); width:1260px; height:905px; margin-top:56px; zoom:var(--s05-zoom); } .s05-stage__headers{ position:absolute; top:0; left:0; width:100%; height:20px; font-size:14px; font-weight:700; letter-spacing:-0.01em; } .s05-stage__headers span{ position:absolute; top:0; white-space:nowrap; } .s05-stage__headers span:nth-child(1){ left:304px; } .s05-stage__headers span:nth-child(2){ left:439px; } .s05-stage__headers span:nth-child(3){ left:636px; } .s05-stage__headers span:nth-child(4){ left:900px; } .s05-stage__email{ position:absolute; left:208px; width:928px; filter:drop-shadow(0 0 15px rgba(0,0,0,.15)); } .s05-stage__email--1{ top:33px; } .s05-stage__email--2{ top:116px; } .s05-stage__email--3{ top:199px; } .s05-stage__email--4{ top:282px; } .s05-stage__rastreio{ position:absolute; left:272px; top:116px; width:334px; } .s05-stage__metricas{ position:absolute; left:589px; top:366px; width:577px; filter:drop-shadow(0 0 25px rgba(0,0,0,.2)); } .s05-stage__capa{ position:absolute; left:267px; top:544px; width:256px; filter:drop-shadow(0 0 29px rgba(0,0,0,.25)); } .s05-stage__callout{ position:absolute; left:197px; top:447px; display:flex; align-items:center; gap:12px; width:294px; height:71px; padding:0 22px; border-radius:26px; background:#ff6c8c; text-align:left; } .s05-stage__callout img{ flex-shrink:0; width:26px; height:26px; } .s05-stage__callout span{ color:#fff; font-size:16px; font-weight:700; line-height:0.95; letter-spacing:-0.03em; } .s05-checklist{ position:absolute; left:606px; top:712px; width:365px; display:flex; flex-direction:column; gap:16px; text-align:left; } .s05-checklist__item{ display:flex; align-items:flex-start; gap:13px; } .s05-checklist__item img{ flex-shrink:0; width:46px; height:46px; } .s05-checklist__item p{ color:#061e4c; font-size:15px; font-weight:600; line-height:1.27; letter-spacing:-0.02em; } /* --- cards inferiores (Métricas / Converta visitante) ------------------------ */ .s05-cards{ display:grid; grid-template-columns:1fr 1fr; gap:50px; max-width:1166px; margin:48px auto 0; } .s05-card{ display:grid; grid-template-columns:60px 1fr; column-gap:16px; row-gap:10px; text-align:left; border:2px solid #083fc9; border-radius:44px; padding:32px 50px; } .s05-card img{ grid-column:1; grid-row:1; align-self:start; width:60px; height:60px; } .s05-card h3{ grid-column:2; grid-row:1; align-self:start; margin:0; color:#061e4c; font-size:30px; font-weight:700; line-height:0.95; letter-spacing:-0.03em; } .s05-card p{ grid-column:2; grid-row:2; color:#1b1f27; font-size:15px; font-weight:400; line-height:1.33; letter-spacing:-0.01em; } /* --- checklist fora do palco (ver comentário no HTML) ----------------------- */ .s05-checklist--mobile{ display:none; width:100%; max-width:460px; margin:32px auto 0; } /* --- Responsivo bloco 05 ----------------------------------------------------- O palco (e-mails, rastreio, métricas, capa, callout) continua com o mesmo visual compacto e sobreposto do desktop em qualquer largura — só o zoom fluido (--s05-zoom) encolhe tudo junto. Únicas trocas por breakpoint: a checklist de texto sai do zoom (senão ficaria ilegível) e os cards inferiores empilham. */ @media (max-width:900px){ .s05-title{ font-size:36px; } .s05-subtitle{ font-size:15px; } .s05-checklist--desktop{ display:none; } .s05-checklist--mobile{ display:flex; flex-direction:column; position:static; left:auto; top:auto; } .s05-cards{ grid-template-columns:1fr; max-width:420px; gap:24px; } } @media (max-width:480px){ .s05-title{ font-size:28px; } .s05-card{ padding:28px 26px; } .s05-card h3{ font-size:24px; } } /* ========================================================================== 9. BLOCO 06 — Produtos prontos para vender ========================================================================== */ .s06{ position:relative; z-index:1; /* card que transborda fica acima do que vem depois */ isolation:isolate; background:linear-gradient(180deg, #080bc9 0%, #080bc9 38%, #6a67da 100%); padding:0 0 0; overflow-x:clip; /* corta o sangramento lateral da marca d'água */ overflow-y:visible; /* deixa o card "cair" pra fora da section */ } /* marca d'água (b + OpenAI) que sangra nas bordas */ .s06-bg{ position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:100%; min-width:1280px; height:auto; z-index:0; pointer-events:none; user-select:none; } .s06 .wrap{ position:relative; z-index:1; } .s06-grid{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:40px; align-items:center; } /* coluna de texto */ .s06-left{ max-width:530px; } .s06-title{ margin:22px 0 0; color:#fff; font-size:52px; font-weight:700; line-height:0.95; letter-spacing:-0.03em; } .s06-subtitle{ margin:14px 0 0; color:#fce42c; font-size:23px; font-weight:600; line-height:1.0; letter-spacing:-0.03em; } .s06-body{ margin:22px 0 0; color:#fff; font-size:16px; font-weight:400; line-height:1.28; letter-spacing:-0.01em; max-width:520px; } .s06-body p + p{ margin-top:1em; } /* faixa amarela */ .s06-callout{ display:grid; grid-template-columns:26px 1fr; gap:14px; align-items:center; max-width:391px; margin:34px 0 0; padding:18px 26px; border-radius:27px; background:#fce42c; color:#000; font-size:19px; font-weight:700; line-height:1.05; letter-spacing:-0.03em; } .s06-callout img{ width:26px; height:26px; } /* --- composição/hero da direita — escala 1:1 do Figma (palco 700 x 735) --- */ .s06-hero{ position:relative; width:700px; height:735px; flex:none; margin-inline:auto; margin-top:44px; /* desce a composição inteira dentro da section */ transform:translateY(40px); /* desce +40px sem aumentar a altura da section */ align-self:start; zoom:1; /* reduzido nos breakpoints (mantém proporção do Figma) */ } .s06-hero__el{ position:absolute; } .s06-hero__ellipse{ left:77px; top:260px; width:450px; height:450px; } .s06-hero__ellipse img{ width:100%; height:100%; } .s06-hero__bottle{ left:177px; top:22px; width:330px; } .s06-hero__bottle img{ width:100%; filter:drop-shadow(0 26px 46px rgba(0,0,0,.35)); } .s06-hero__arrow{ left:44px; top:20px; width:111px; } .s06-hero__arrow img{ width:100%; } .s06-hero__label{ left:105px; top:106px; width:210px; color:#fff; font-weight:700; font-size:27px; line-height:26px; letter-spacing:-0.81px; } /* pílulas rosa */ .s06-pill{ display:flex; align-items:center; gap:10px; width:100%; min-height:55px; padding:8px 16px 8px 9px; border-radius:15px; background:#ff6c8c; color:#fff; font-size:16px; font-weight:700; line-height:1.0; letter-spacing:-0.48px; } .s06-pill__ic{ width:38px; height:38px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .s06-pill__ic img{ width:100%; height:100%; } .s06-hero__p1{ left:76px; top:289px; width:172px; } .s06-hero__p2{ left:24px; top:385px; width:172px; } .s06-hero__p3{ left:6px; top:487px; width:187px; } .s06-hero__p4{ left:488px; top:400px; width:187px; } .s06-hero__p5{ left:460px; top:501px; width:192px; } /* b + openai */ .s06-hero__ia{ left:515px; top:114px; width:182px; } .s06-hero__ia-row{ display:flex; align-items:center; gap:12px; height:50px; margin-bottom:16px; } .s06-hero__ia-row img{ height:50px; width:auto; } .s06-hero__ia-plus{ color:#fff; font-size:36px; font-weight:700; line-height:1; } .s06-hero__ia-txt{ color:#fff; font-size:27px; font-weight:700; line-height:26px; letter-spacing:-0.81px; } .s06-hero__ia-txt span{ color:#fce42c; } /* card de produto — "cai" pra fora da section (metade de baixo no branco) */ .s06-hero__card{ left:88px; top:604px; width:423px; } .s06-hero__card img{ width:100%; filter:drop-shadow(0 20px 40px rgba(0,0,0,.22)); } /* --- Escala da composição da direita (.s06-hero) --------------------------- Mantém a proporção 1:1 do Figma reduzindo o palco inteiro via `zoom`. Acima de 960px o layout é de 2 colunas; de 960 pra baixo vira 1 coluna e sobra largura, por isso o valor volta a subir nesse ponto. (obs: 440px = 0.56 é maior que 600px = 0.54 — ajustar se for engano.) */ @media (max-width:1330px){ .s06-hero{ zoom:0.86; } } @media (max-width:1180px){ .s06-hero{ zoom:0.74; } } @media (max-width:960px) { .s06-hero{ zoom:0.80; } } @media (max-width:760px) { .s06-hero{ zoom:0.62; } } @media (max-width:600px) { .s06-hero{ zoom:0.54; } } @media (max-width:440px) { .s06-hero{ zoom:0.56; } } @media (max-width:380px) { .s06-hero{ zoom:0.40; } } /* --- Responsivo bloco 06 --------------------------------------------------- */ @media (max-width:1180px){ .s06-title{ font-size:44px; } } @media (max-width:960px){ .s06{ padding:60px 0 0; } /* sem padding embaixo p/ o card "cair" pra fora */ .s06-title{ font-size:38px; } .s06-grid{ grid-template-columns:minmax(0,1fr); gap:48px; justify-items:center; } .s06-left{ width:100%; max-width:640px; text-align:center; } .s06-body{ max-width:none; } .s06-title, .s06-subtitle, .s06-body{ margin-inline:auto; } .s06-callout{ margin-inline:auto; } .s06-hero{ justify-self:center; } } @media (max-width:600px){ .s06{ padding:48px 0 0; } .s06 .badge{ font-size:12.5px; height:34px; padding:0 18px; } .s06-title{ font-size:30px; } .s06-subtitle{ font-size:20px; } .s06-body{ font-size:15px; } .s06-callout{ font-size:17px; padding:16px 20px; max-width:100%; } } @media (max-width:380px){ .s06-title{ font-size:27px; } } /* ========================================================================== 10. BLOCO 07 — Automação de preços Layout em 2 colunas (texto + "palco" com a tabela de produtos e os selos flutuantes). Abaixo de ~1330px de tela não cabem as 2 colunas lado a lado com o palco no tamanho real (721px) — em vez de espremer, empilha (texto em cima, palco embaixo) e aplica zoom fluido só no palco, igual ao bloco 05, pra nunca vazar da tela. ========================================================================== */ .s07{ position:relative; background:linear-gradient(180deg, #f0f1ff 0%, #fcfaf7 51%, #f3f3fe 100%); padding:80px 0; --s07-zoom:1; } .s07-grid{ display:grid; grid-template-columns:490px 721px; justify-content:center; gap:40px; align-items:start; } /* --- coluna esquerda: texto ---------------------------------------------- */ .s07-badge{ margin-bottom:20px; } .s07-title{ margin:0; color:#061e4c; font-size:52px; font-weight:700; line-height:0.93; letter-spacing:-0.03em; } .s07-subtitle{ margin-top:18px; max-width:485px; color:#1b1f27; font-size:16px; font-weight:400; line-height:1.25; letter-spacing:-0.01em; } .s07-subtitle + .s07-subtitle{ margin-top:16px; } .s07-arrow{ position:relative; width:405px; height:84px; margin-top:38px; } .s07-arrow img{ position:absolute; left:0; top:0; width:405px; transform:scaleX(-1); /* espelha só a seta — o Figma gira 180°+flipY, que dá no mesmo */ } .s07-arrow h3{ position:absolute; left:91px; top:31px; width:253px; margin:0; color:#061e4c; font-size:27px; font-weight:700; line-height:0.85; letter-spacing:-0.03em; white-space:nowrap; } .s07-callout{ display:flex; align-items:center; gap:11px; margin-top:20px; max-width:361px; padding:20px 24px; border-radius:27px; background:#061e4c; } .s07-callout img{ flex-shrink:0; width:28.5px; height:28.5px; } .s07-callout p{ color:#fff; font-size:16px; font-weight:700; line-height:1.03; letter-spacing:-0.03em; } /* --- coluna direita: palco (tabela + selos flutuantes) -------------------- */ .s07-stage{ position:relative; width:721px; height:520px; zoom:var(--s07-zoom); } .s07-stage__header4{ position:absolute; left:34px; top:32px; width:187px; } .s07-stage__header3{ position:absolute; left:34px; top:90px; width:269px; } .s07-stage__row{ position:absolute; left:29px; width:692px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.06)); } .s07-stage__row--1{ top:142px; } .s07-stage__row--2{ top:199px; } .s07-stage__row--3{ top:256px; } .s07-stage__row--4{ top:313px; } .s07-stage__row--5{ top:370px; } .s07-pill{ position:absolute; display:flex; align-items:center; gap:10px; height:71px; padding-left:13px; padding-right:22px; border-radius:26px; white-space:nowrap; } .s07-pill__ic{ flex-shrink:0; width:50px; height:50px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; } .s07-pill__ic img{ width:24px; height:auto; } .s07-pill__label{ font-size:16px; font-weight:600; line-height:0.95; letter-spacing:-0.03em; } .s07-pill--reprecificacao{ left:313px; top:0; width:237px; background:#b3ffc9; color:#1f9459; } .s07-pill--markup{ left:503px; top:60px; width:175px; background:#e5f1fb; color:#1d7bcc; } .s07-pill--porcentagem{ left:0; top:413px; width:267px; background:#ff6c8c; color:#fff; white-space:normal; padding-right:18px; } .s07-pill--preco-base{ left:248px; top:449px; width:206px; background:#ffdf89; color:#71623f; } /* --- Responsivo bloco 07 --------------------------------------------------- */ @media (max-width:1330px){ .s07{ --s07-zoom:min(1, calc((100vw - 64px) / 721px)); } .s07-grid{ grid-template-columns:1fr; justify-items:center; } .s07-left{ max-width:490px; text-align:center; } .s07-subtitle{ margin-inline:auto; } .s07-arrow, .s07-callout{ margin-inline:auto; } .s07-stage{ margin:40px auto 0; } } @media (max-width:600px){ .s07-title{ font-size:40px; } .s07-arrow{ zoom:0.8; } } @media (max-width:380px){ .s07-arrow{ zoom:0.62; } } /* ========================================================================== 11. BLOCO 08 — Sistema avançado de busca (+ 09 Sem limites, aninhado) O 09 (card amarelo "sem limites") vive DENTRO do 08 (fundo azul), como pedido — os dois nascem do mesmo frame no Figma. Mesma técnica de "palco" + zoom fluido dos blocos 05/07 pros dois: .s08-row (mockup+features) cabe sem zoom (1260px já é suficiente), .s09-stage precisa porque tem elementos que vazam pros dois lados (personagem, decorações). ========================================================================== */ .s08{ position:relative; padding:76px 0 0; text-align:center; --s09-zoom:min(1, calc((100vw - 64px) / 1260px)); } /* fundo em elemento à parte, mais baixo que a section: o cartão amarelo (.s09) "cai" pra fora do azul, revelando o fundo claro do próximo bloco atrás dele (91px, igual ao Figma) — só funciona com o fundo separado do .s08 porque um filho com margin-bottom negativo NÃO encolhe o pai (o pai sempre envolve a caixa inteira do filho, o margin colapsado só afeta o espaço DEPOIS do pai). */ .s08-bg{ position:absolute; z-index:0; left:0; right:0; top:0; bottom:calc(91px * var(--s09-zoom)); background:linear-gradient(178.6deg, #080bc9 9.5%, #6a67da 80.2%); } .s08 .wrap, .s08 .s09{ position:relative; z-index:1; } .s08-badge{ margin:0 auto 20px; } .s08-title{ margin:0 auto; max-width:600px; text-align:center; color:#fff; font-size:52px; font-weight:700; line-height:0.96; letter-spacing:-0.03em; } .s08-tagline{ margin:16px auto 0; max-width:879px; text-align:center; color:#fff; font-size:28px; font-weight:600; line-height:0.96; letter-spacing:-0.03em; } .s08-subtitle{ margin:16px auto 0; max-width:991px; text-align:center; color:#fff; font-size:17px; font-weight:400; line-height:1.29; letter-spacing:-0.03em; } /* --- busca: mockup + lista de recursos --------------------------------------- */ .s08-row{ display:grid; grid-template-columns:minmax(0,647px) minmax(0,1fr); gap:60px; align-items:start; margin-top:50px; text-align:left; } .s08-row__mock{ width:100%; border-radius:24px; filter:drop-shadow(0 20px 40px rgba(0,0,0,.2)); } .s08-features{ display:flex; flex-direction:column; padding-top:8px; } .s08-feature{ display:flex; align-items:flex-start; gap:14px; } .s08-feature img{ width:68px; height:68px; flex-shrink:0; } .s08-feature p{ padding-top:12px; color:#fff; font-size:16px; font-weight:500; line-height:1.31; letter-spacing:-0.02em; } .s08-feature:nth-child(2){ margin-top:21px; } .s08-feature:nth-child(3){ margin-top:39px; } .s08-feature:nth-child(4){ margin-top:27px; } /* --- 09: card amarelo "sem limites", aninhado -------------------------------- Igual o site ao vivo faz (conferido em bg-esq-amarelo.svg): o corte diagonal NÃO é um fundo esticado full-bleed — é um recorte pequeno, de tamanho fixo (do mesmo tamanho do personagem, ~460px), só com o canto. O resto do amarelo é um retângulo sólido comum. Os dois vivem dentro do .s09-stage (mesmo zoom do personagem) pra nunca desalinhar em nenhuma largura — e como é um recorte pequeno, nunca precisa esticar/distorcer. */ .s09{ position:relative; margin-top:90px; } .s09-fill{ position:absolute; z-index:0; left:393px; top:0; bottom:0; width:6000px; background:#fcbe2c; } .s09-bg{ position:absolute; z-index:0; left:-67px; top:0; width:460px; height:646px; pointer-events:none; } .s09-stage{ position:relative; z-index:2; left:50%; transform:translateX(-50%); width:1260px; height:646px; zoom:var(--s09-zoom); } .s09-mask-blob{ position:absolute; z-index:0; left:1185px; top:0; width:477px; opacity:.6; pointer-events:none; } .s09-swirl{ position:absolute; z-index:0; left:1410px; top:140px; width:74px; } .s09-b-outline{ position:absolute; z-index:0; left:334px; top:110px; width:79px; opacity:.5; } /* seta roxa "Conheça as vantagens": no Figma a caixa (já rotacionada) mede 135x123, bem diferente do SVG original (120x65) — ou seja, ela nasce rotacionada ~36°. Posicionado pelo centro dessa caixa rotacionada, não pelo canto, porque o rotate() do CSS gira em torno do centro. */ .s09-arrow-vantagens{ position:absolute; z-index:1; left:782px; top:87px; width:120px; transform:rotate(-35.55deg) scaleX(-1); } .s09-person{ position:absolute; z-index:1; left:-74px; top:20px; width:471.5px; } .s09-heading{ position:absolute; z-index:1; left:463px; top:76px; width:437px; } .s09-stripes{ display:flex; } .s09-stripes img{ width:24.24px; height:22.55px; margin-right:-4px; } .s09-heading h2{ margin:18px 0 0; text-align:left; color:#061e4c; font-size:62px; font-weight:700; line-height:0.93; letter-spacing:-0.03em; } .s09-logo{ width:222.93px; margin-top:28px; } .s09-pills{ position:absolute; z-index:1; left:931px; top:55px; width:237px; } .s09-pills__label{ margin:0 0 10px; color:#253248; font-size:20px; font-weight:700; letter-spacing:-0.02em; white-space:nowrap; } .s09-pill{ display:flex; align-items:center; gap:12px; height:65px; padding-left:16px; padding-right:13px; line-height:16px; text-align:left; border:1.5px solid #ffe5a7; border-radius:17px; } .s09-pill + .s09-pill{ margin-top:6px; } .s09-pill img{ width:26px; height:26px; flex-shrink:0; } .s09-pill span{ color:#061e4c; font-size:16px; font-weight:600; letter-spacing:-0.03em; } .s09-cta{ position:absolute; z-index:1; left:882px; top:551px; width:335px; height:70px; display:flex; align-items:center; justify-content:center; border-radius:26px; background:linear-gradient(90deg, #6763d9 1.44%, #083fc9 100%); color:#fff; font-size:20px; font-weight:700; letter-spacing:-0.02em; transition:transform .3s; } .s09-cta:hover{ transform:scale(1.05); } /* --- Responsivo bloco 08/09 --------------------------------------------------- */ @media (max-width:960px){ .s08-title{ font-size:40px; } .s08-tagline{ font-size:22px; } .s08-row{ grid-template-columns:1fr; } .s08-features{ margin-top:32px; } } @media (max-width:600px){ .s08{ padding:76px 0 0; } .s08-bg{ bottom:0; } .s08-title{ font-size:32px; } .s08-tagline{ font-size:19px; } /* --- 09 no mobile: sem o personagem, tudo empilhado em vez do "palco" compacto/sobreposto (esse tem texto pequeno demais pra ler numa tela estreita, e o personagem some pra dar lugar ao conteúdo). Fundo amarelo vira um retângulo liso 100% da largura, sem o recorte/cantos do Figma (que só faz sentido na composição larga do desktop). ------------------ */ .s09-bg, .s09-fill{ display:none; } .s09-stage{ position:static; left:auto; transform:none; width:100%; height:auto; zoom:1; display:flex; flex-direction:column; align-items:center; padding:48px 24px; text-align:center; background:#fcbe2c; } .s09-mask-blob, .s09-swirl, .s09-b-outline, .s09-arrow-vantagens, .s09-person{ display:none; } .s09-heading{ position:static; width:100%; max-width:460px; } .s09-stripes{ justify-content:center; } .s09-heading h2{ font-size:34px; text-align:center; } .s09-logo{ margin-inline:auto; } .s09-pills{ position:static; width:100%; max-width:460px; margin-top:32px; } .s09-pills__label{ text-align:center; white-space:normal; } .s09-pill{ text-align:left; } .s09-cta{ position:static; width:100%; max-width:460px; margin-top:24px; } } /* ========================================================================== 12. BLOCO 10 — Checkout em 40 segundos ========================================================================== */ .s10{ position:relative; background:#fff; padding:90px 0 100px; text-align:center; } .s10-badge{ margin:0 auto 22px; } .s10-title{ margin:0 auto; max-width:841px; color:#061e4c; font-size:52px; font-weight:700; line-height:0.93; letter-spacing:-0.03em; } .s10-title__highlight{ color:#083fc9; } .s10-subtitle{ max-width:820px; margin:20px auto 0; color:#000; font-size:16px; font-weight:400; line-height:1.25; letter-spacing:-0.01em; } .s10-subtitle + .s10-subtitle{ margin-top:1em; } /* --- linha: recursos (grade 3x3) + mockup do celular ------------------------ */ .s10-row{ display:grid; grid-template-columns:minmax(0,400px) minmax(0,1fr); gap:26px; align-items:center; justify-content:center; margin-top:60px; text-align:left; } .s10-recursos__title{ margin:0 0 34px; text-align:center; color:#061e4c; font-size:26px; font-weight:700; line-height:0.93; letter-spacing:-0.03em; } .s10-grid{ display:grid; grid-template-columns:repeat(3, 100px); column-gap:30px; row-gap:36px; } .s10-item{ text-align:center; } .s10-item__ic{ width:100px; height:100px; border-radius:50%; background:linear-gradient(180deg, #080bc9 0%, #080bc9 38%, #6a67da 100%); display:flex; align-items:center; justify-content:center; margin:0 auto; } .s10-item__ic img{ width:44px; height:44px; } .s10-item p{ margin-top:10px; width:110px; margin-inline:auto; color:#000; font-size:14px; font-weight:700; line-height:1.07; letter-spacing:-0.02em; text-transform:uppercase; } /* --- mockup do celular + legenda flutuante ---------------------------------- */ .s10-phone{ position:relative; width:100%; max-width:672px; margin-inline:auto; } .s10-phone__caption{ position:absolute; left:62%; top:-14px; transform:translateX(-50%); width:260px; color:#253248; font-size:22px; font-weight:300; line-height:1.0; letter-spacing:-0.02em; text-align:center; } .s10-phone__caption b{ font-weight:600; } .s10-cta{ display:inline-flex; align-items:center; justify-content:center; margin-top:56px; width:362px; max-width:100%; height:67px; border-radius:26px; background:linear-gradient(90deg, #6763d9 1.44%, #083fc9 100%); color:#fff; font-size:18px; font-weight:700; letter-spacing:-0.02em; transition:transform .3s; } .s10-cta:hover{ transform:scale(1.05); } /* --- Responsivo bloco 10 ----------------------------------------------------- */ @media (max-width:960px){ .s10-title{ font-size:42px; } .s10-row{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:56px; } .s10-recursos__title{ text-align:center; } .s10-phone{ max-width:420px; } } @media (max-width:600px){ .s10{ padding:64px 0 64px; } .s10-title{ font-size:30px; } .s10-subtitle{ font-size:15px; } .s10-row{ margin-top:44px; gap:44px; } .s10-recursos__title{ font-size:22px; margin-bottom:26px; } .s10-grid{ grid-template-columns:repeat(3, 78px); column-gap:16px; row-gap:26px; } .s10-item__ic{ width:78px; height:78px; } .s10-item__ic img{ width:34px; height:34px; } .s10-item p{ font-size:11.5px; width:90px; } .s10-phone{ display:flex; flex-direction:column; align-items:center; } .s10-phone__caption{ position:static; order:-1; left:auto; top:auto; transform:none; width:100%; max-width:300px; margin:0 auto 28px; font-size:18px; } .s10-cta{ margin-top:40px; height:58px; font-size:16px; } } /* ========================================================================== 13. FOOTER ========================================================================== */ .ft{ background:#083fc9; padding:64px 0 0; } .ft-grid{ display:grid; grid-template-columns:minmax(0,280px) minmax(0,220px) minmax(0,180px) minmax(0,330px); gap:60px; padding-bottom:56px; } .ft-logo{ width:168px; margin-bottom:28px; } .ft-contact{ display:flex; flex-direction:column; gap:18px; } .ft-contact__item{ display:flex; align-items:center; gap:14px; color:#fff; font-family:"Poppins", sans-serif; font-size:15px; font-weight:500; } .ft-contact__item img{ width:23px; height:23px; flex-shrink:0; } .ft-contact__phone-ic{ transform:rotate(45deg); } .ft-col__title{ position:relative; margin:0 0 30px; padding-bottom:20px; color:#fff; font-size:25px; font-weight:700; text-transform:uppercase; line-height:1; } .ft-col__title::after{ content:""; position:absolute; left:0; bottom:0; width:30px; height:3px; background:#fcbe2c; } .ft-nav{ display:flex; flex-direction:column; gap:12px; } .ft-nav a{ color:#fff; font-size:15px; font-weight:400; transition:color .2s; } .ft-nav a:hover{ color:#fcbe2c; } .ft-social{ display:flex; flex-direction:column; gap:20px; } .ft-social__item{ display:flex; align-items:center; gap:14px; color:#fff; font-family:"Poppins", sans-serif; font-size:15px; font-weight:500; } .ft-social__item img{ width:auto; height:26px; flex-shrink:0; } .ft-address{ max-width:328px; color:#fff; font-size:15px; font-weight:400; line-height:1.53; } .ft-copy{ margin:0; padding:26px 0; text-align:center; color:#fff; font-size:15px; border-top:1px solid rgba(255,255,255,.15); } /* --- Responsivo footer ------------------------------------------------------- */ @media (max-width:960px){ .ft-grid{ grid-template-columns:1fr 1fr; gap:44px 30px; } .ft-brand{ grid-column:1 / -1; } } @media (max-width:600px){ .ft{ padding:48px 0 0; } .ft-grid{ grid-template-columns:1fr; gap:36px; text-align:center; padding-bottom:40px; } .ft-logo{ margin-inline:auto; } .ft-contact{ align-items:center; } .ft-col__title::after{ left:50%; transform:translateX(-50%); } .ft-nav{ align-items:center; } .ft-social{ align-items:center; } .ft-address{ margin-inline:auto; } .ft-copy{ font-size:13px; } } /* ========================================================================== 14. MODAL — Fila de espera / contato Reaproveitado por todos os links "A BrindeFly", "Planos e Preços", "Contato", "Fale com um especialista" e "Confira o site demonstração" (ver data-modal="contato" no HTML e o JS que liga isso em script.js). ========================================================================== */ .modal, .modal *, .modal *::before, .modal *::after{ box-sizing:border-box; } .modal{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:24px; font-family:"Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } .modal.is-open{ display:flex; } .modal__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.5); } .modal__card{ position:relative; z-index:1; width:100%; max-width:800px; max-height:90vh; overflow-y:auto; background:#fff; border-radius:24px; padding:48px; } .modal__close{ position:absolute; top:16px; right:16px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border:0; background:none; color:#b2b2b2; font-size:28px; line-height:1; cursor:pointer; } .modal__close:hover{ color:#061e4c; } .modal__title{ margin:0 0 32px; text-align:center; color:#061e4c; font-size:36px; font-weight:800; letter-spacing:-0.3px; } .modal__form{ display:flex; flex-direction:column; gap:24px; } .modal__row{ display:grid; grid-template-columns:1fr 1fr; gap:24px; } .modal__field{ display:flex; flex-direction:column; gap:8px; } .modal__field label{ color:#55595c; font-size:16px; font-weight:400; } .modal__field input, .modal__field textarea{ width:100%; border:1px solid #d8d8d8; border-radius:12px; padding:16px 20px; color:#55595c; font-family:inherit; font-size:16px; background:#fff; } .modal__field input{ height:58px; } .modal__field textarea{ resize:vertical; min-height:90px; } .modal__field input::placeholder, .modal__field textarea::placeholder{ color:#9a9a9a; } .modal__field input:focus, .modal__field textarea:focus{ outline:2px solid #083fc9; outline-offset:1px; } .modal__submit{ height:56px; border:0; border-radius:12px; background:#083fc9; color:#fff; font-family:inherit; font-size:16px; font-weight:500; cursor:pointer; transition:background .2s; } .modal__submit:hover{ background:#062f9c; } @media (max-width:600px){ .modal__card{ padding:32px 24px; border-radius:20px; } .modal__title{ font-size:26px; margin-bottom:24px; } .modal__row{ grid-template-columns:1fr; gap:20px; } .modal__form{ gap:20px; } } /* ========================================================================== 15. SCAFFOLDING — só p/ testar a rolagem no preview enquanto os demais blocos não entram (remover / substituir conforme forem sendo construídos). Inclui o único reset de do arquivo: existe apenas pro preview isolado — no site real de verdade o próprio layout cuida disso. ========================================================================== */ body{ margin:0; background:#fff; } .scrollpad{ min-height:92vh; display:flex; align-items:center; justify-content:center; background:#f7f7f7; color:#a2a8b4; font-size:13px; letter-spacing:.08em; text-transform:uppercase; text-align:center; padding:0 20px; } .scrollpad--bottom{ background:#fff; } /* ========================================================================== 16. MODAL — ENVIO DO FORMULÁRIO + FESTA 🎉 Estados criados pelo script.js (bloco 3): carregando, erro, sucesso e o