/* * conversao.css -- pontos de conversao das paginas internas (app/Views/site/page.php). * Usa as variaveis definidas em :root por app-blue.css (--brand, --brand-2, * --accent, --ink, --muted, --line, --soft, --shadow). Nao redefine paleta: * carregar DEPOIS de app-blue.css no . */ /* ===================== Hero: duas acoes ===================== */ .page-hero .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px} .btn-whatsapp{background:#16a34a;border-color:#16a34a;color:#fff} .btn-whatsapp:hover{background:#15803d;border-color:#15803d} /* ===================== Faixa de confianca ===================== */ .trust-strip{background:#fff;border-bottom:1px solid var(--line);padding:16px clamp(16px,5vw,76px)} .trust-strip ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;max-width:1180px;margin:0 auto;padding:0} .trust-strip li{display:flex;align-items:center;gap:8px;font-size:14.5px;line-height:1.3;font-weight:800;color:var(--ink)} .trust-strip li span{display:inline-flex;flex:none;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:rgba(22,163,74,.14);color:#16a34a;font-size:12px;font-weight:900} /* ===================== Bloco de conversao no meio do texto ===================== * Inserido em PHP (page.php) apos ~40% do corpo, dividindo o HTML pelas tags * . Fica dentro de .section.prose, entao herda a largura de leitura, * mas ganha fundo proprio para se destacar do texto corrido ao redor. */ .section.prose .mid-cta{margin:40px 0;padding:28px clamp(20px,4vw,34px);border-radius:14px;background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);color:#fff;box-shadow:var(--shadow)} .section.prose .mid-cta-eyebrow{margin:0 0 8px;text-transform:uppercase;letter-spacing:.04em;font-size:12px;font-weight:900;color:#bcd6ff} .section.prose h2.mid-cta-title{margin:0 0 20px;padding:0;border:0;color:#fff;font-size:24px;line-height:1.25;font-weight:900} .mid-cta-actions{display:flex;flex-wrap:wrap;gap:12px} .section.prose .mid-cta .btn{background:#fff;color:var(--brand);border-color:#fff} .section.prose .mid-cta .btn.btn-whatsapp{background:#16a34a;color:#fff;border-color:#16a34a} /* ===================== Hierarquia de leitura do corpo ===================== * So afeta os elementos de NIVEL SUPERIOR de .prose (o texto vindo do banco), * usando o combinador ">" -- assim nao mexe no espacamento ja calibrado do * FAQ (.prose .faq h2/h3/p) nem da caixa de CTA final (.cta-box), que ficam * aninhados um nivel abaixo e continuam com as regras de app-blue.css. */ .section.prose{max-width:760px} .section.prose > p:not(.disclaimer), .section.prose > ul > li, .section.prose > ol > li{line-height:1.75;margin:0 0 18px} .section.prose > h2{margin:46px 0 16px;padding-top:26px;border-top:1px solid var(--line);font-size:26px;line-height:1.2;font-weight:900;color:var(--brand)} .section.prose > h2:first-child{margin-top:0;padding-top:0;border-top:0} .section.prose > ul, .section.prose > ol{margin:0 0 20px;padding-left:22px} /* ===================== Barra fixa mobile ===================== */ .mobile-cta-bar{display:none} @media (max-width:620px){ body{padding-bottom:78px} .mobile-cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:8px;padding:10px 12px;background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(7,26,51,.14)} .mobile-cta-bar .btn{flex:1;min-height:44px;padding:11px 6px;font-size:14px;white-space:nowrap} .section.prose{max-width:100%} .trust-strip ul{gap:8px 18px} }