/* ============================================================================ * VBZ-STATIC — linguagem visual VBZ para as landing pages estáticas (public/). * Estilo/UX-UI do app VBZ (Plus Jakarta Sans, super arredondado, CTAs em * pílula com glow) usando 100% as CORES do SellPipe (--green = #007F2D). * * Aditivo e reversível: cada página linka este arquivo no fim do e * recebe a classe `vbz` no . Reverter = soltar o + a classe. * Mantém textos, imagens, vídeos e a estrutura de cada página intactos — * só eleva tipografia, arredondamento e o tratamento dos botões/CTAs. * ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap'); /* ---- Tipografia display VBZ + arredondamento mais generoso --------------- */ body.vbz { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; /* Reaproveita os tokens de raio das próprias páginas: subir aqui arredonda cards/botões que usam var(--radius*) de uma vez, sem tocar componente a componente. Páginas sem esses tokens simplesmente ignoram. */ --radius: 14px; --radius-lg: 22px; } body.vbz h1, body.vbz h2, body.vbz h3, body.vbz h4 { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; letter-spacing: -0.025em; font-weight: 800; } /* ---- Marca: quadradinho um pouco mais arredondado (estilo VBZ) ----------- */ body.vbz .brand-mark, body.vbz .brand__mark { border-radius: 12px; } /* ---- CTAs viram pílula com glow (assinatura VBZ), verde SellPipe --------- */ body.vbz .btn, body.vbz .btn-primary, body.vbz .btn-secondary, body.vbz .btn-tertiary, body.vbz .btn-vendas, body.vbz .btn-posts, body.vbz .btn-whatsapp, body.vbz .btn-glow, body.vbz .btn--primary, body.vbz .btn--ghost, body.vbz .btn--glass, body.vbz .btn--lg, body.vbz .btn--block, body.vbz .topbar-cta, body.vbz .cta__inner { border-radius: 9999px; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.15s ease, filter 0.18s ease; } /* Glow + leve elevação no hover dos CTAs primários (verde da marca). */ body.vbz .btn-primary:hover, body.vbz .btn-vendas:hover, body.vbz .btn-posts:hover, body.vbz .btn-glow:hover, body.vbz .btn--primary:hover, body.vbz .topbar-cta:hover, body.vbz .cta__inner:hover { transform: translateY(-1px); box-shadow: 0 16px 42px -16px color-mix(in srgb, var(--green, #007f2d) 60%, transparent); } /* ---- Cards comuns: glow suave + hover-lift (quando a página tem cards) --- */ body.vbz .card, body.vbz .feature, body.vbz .feature-card, body.vbz .pricing-card, body.vbz .plan, body.vbz .testimonial { transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } body.vbz .card:hover, body.vbz .feature-card:hover, body.vbz .pricing-card:hover, body.vbz .plan:hover, body.vbz .testimonial:hover { transform: translateY(-3px); box-shadow: 0 18px 44px -20px color-mix(in srgb, var(--green, #007f2d) 30%, rgba(0, 0, 0, 0.18)); } @media (prefers-reduced-motion: reduce) { body.vbz .btn-primary:hover, body.vbz .btn-vendas:hover, body.vbz .btn-posts:hover, body.vbz .btn-glow:hover, body.vbz .btn--primary:hover, body.vbz .topbar-cta:hover, body.vbz .cta__inner:hover, body.vbz .card:hover, body.vbz .feature-card:hover, body.vbz .pricing-card:hover, body.vbz .plan:hover, body.vbz .testimonial:hover { transform: none; } }