/* ========================================================= style.css - Compatível com Bootstrap 5 - Suporte a tema claro/escuro via [data-bs-theme] - Hero usa variável CSS: --hero-bg (definida inline no HTML) - WhatsApp: botão flutuante + barra fixa sempre visível ========================================================= */ /* ---------- Variáveis de tema ---------- */ :root{ --bg:#f6f8fb; --bg-elev:#fff; --ink:#0b1324; --muted:#64748b; --bdr:#e5e7eb; --pri:#0b5cff; --pri-ink:#ffffff; --ok:#16a34a; --warn:#f59e0b; --err:#dc2626; --radius-lg:20px; --radius-md:14px; --shadow-lg:0 16px 44px rgba(2,6,23,.15); --shadow-md:0 10px 26px rgba(2,6,23,.06); /* Altura da barra fixa do WhatsApp */ --wa-bar-h:72px; } /* Tema escuro (opcional, se usar ) */ html[data-bs-theme="dark"]{ --bg:#0b1220; --bg-elev:#0f172a; --ink:#e2e8f0; --muted:#94a3b8; --bdr:#1e293b; --shadow-lg:0 12px 30px rgba(0,0,0,.45); --shadow-md:0 8px 18px rgba(0,0,0,.35); } /* ---------- Base ---------- */ *{box-sizing:border-box} html,body{height:100%} body{ font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif; background:var(--bg); color:var(--ink); line-height:1.45; } a{text-decoration:none; color:inherit} a:focus-visible, button:focus-visible, [role="button"]:focus-visible, .btn:focus-visible{ outline:3px solid color-mix(in srgb, var(--pri) 45%, transparent); outline-offset:2px; border-radius:8px; } img{max-width:100%; height:auto; display:block} .lead{font-weight:500} /* ---------- Navegação ---------- */ .al-nav{ backdrop-filter:saturate(140%) blur(6px); background:rgba(255,255,255,.92); border-bottom:1px solid rgba(2,6,23,.06); } html[data-bs-theme="dark"] .al-nav{ background:rgba(15,23,42,.8); border-bottom:1px solid rgba(255,255,255,.06); } .al-brand img{height:36px} /* ---------- Botões ---------- */ .btn-wa{ background:#25D366; color:#fff; border:none; } .btn-wa:hover{filter:brightness(.95)} .btn-wa:disabled{opacity:.6} .btn-ghost{ border:1px solid var(--bdr); color:var(--ink); background:#fff; } html[data-bs-theme="dark"] .btn-ghost{ background:var(--bg-elev); color:var(--ink); border-color:var(--bdr); } .btn-ghost:hover{background:#f1f5f9} html[data-bs-theme="dark"] .btn-ghost:hover{background:#111827} /* ---------- HERO (usa --hero-bg definida no HTML) ---------- */ .hero{ position:relative; border-radius:var(--radius-lg); overflow:hidden; background: linear-gradient(180deg,rgba(11,16,32,.70),rgba(11,16,32,.85)), var(--hero-bg, none); color:#eaf1ff; border:1px solid rgba(2,6,23,.15); box-shadow:var(--shadow-lg); } .hero h1{font-weight:800; letter-spacing:-.02em} .hero .lead{color:#cfe3ff} .hero .badges{display:flex; flex-wrap:wrap; gap:.5rem} @media (min-width:992px){ .hero{min-height:420px} } /* ---------- Chips / Tags ---------- */ .chip{ --c:#ffffff; /* cor base (pode ser sobrescrita por inline style: style="--c:#0b5cff" ) */ display:inline-flex; align-items:center; gap:.5rem; padding:.45rem .8rem; border:1px solid color-mix(in srgb, var(--c) 28%, transparent); border-radius:999px; background:color-mix(in srgb, var(--c) 12%, transparent); color:#fff; font-weight:700; } /* ---------- Painéis / Cartões ---------- */ .pane{ background:var(--bg-elev); border:1px solid var(--bdr); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); } .trust .item{ display:flex; align-items:center; gap:.6rem; border:1px solid var(--bdr); background:var(--bg-elev); border-radius:12px; padding:.6rem .8rem; } .section-title{font-weight:800; letter-spacing:-.02em} .icon-box{ width:46px; height:46px; border:1px solid var(--bdr); border-radius:12px; display:inline-flex; align-items:center; justify-content:center; color:var(--pri); background:var(--bg-elev); } .card-soft{ border:1px solid var(--bdr); border-radius:16px; background:var(--bg-elev); box-shadow:var(--shadow-md); } /* ---------- Badges “neon” com color-mix (opcional p/ status) ---------- */ .badge-neon{ --c:#94a3b8; /* default */ display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .6rem; border-radius:999px; border:1px solid color-mix(in srgb, var(--c) 45%, transparent); background:color-mix(in srgb, var(--c) 12%, transparent); color:#fff; font-weight:700; letter-spacing:.01em; } .badge-neon-online { --c:#22c55e; } .badge-neon-offline { --c:#ef4444; } .badge-neon-sanction { --c:#eab308; } .badge-neon-checking { --c:#3b82f6; } /* ---------- Lista / componentes auxiliares ---------- */ .list-unstyled{list-style:none; padding-left:0; margin:0} .hr-soft{border:0; height:1px; background:var(--bdr); opacity:.6} /* ---------- WhatsApp: flutuante + barra fixa ---------- */ /* Botão flutuante (fica acima da barra) */ .float-wa{ position:fixed !important; right:max(16px, env(safe-area-inset-right)) !important; bottom:calc(16px + env(safe-area-inset-bottom) + var(--wa-bar-h)) !important; z-index:2147483647 !important; } .float-wa .btn{ box-shadow:0 12px 30px rgba(37,211,102,.35); background:#25D366; color:#fff; border:0; border-radius:999px; font-weight:700; } /* Barra fixa inferior (sempre ligada) */ .sticky-wa{ position:fixed !important; left:0 !important; right:0 !important; bottom:env(safe-area-inset-bottom) !important; background:var(--bg-elev); border-top:1px solid var(--bdr, #e5e7eb); padding:.55rem; display:block !important; z-index:2147483646 !important; } /* Evita que a barra cubra o conteúdo */ body{ padding-bottom:calc(var(--wa-bar-h) + env(safe-area-inset-bottom)); } /* Fallback para navegadores sem env() */ @supports not (bottom: calc(1px + env(safe-area-inset-bottom))){ .float-wa{ bottom:calc(16px + var(--wa-bar-h)) !important; } .sticky-wa{ bottom:0 !important; } body{ padding-bottom:var(--wa-bar-h); } } /* ---------- Animações / efeitos ---------- */ .fade-in{opacity:0; transform:translateY(10px); transition:all .5s ease} .fade-in.reveal{opacity:1; transform:none} /* Reduz movimento para quem preferir */ @media (prefers-reduced-motion: reduce){ .fade-in{transition:none} } /* ---------- Utilitários rápidos ---------- */ .shadow-soft{box-shadow:var(--shadow-md)} .rounded-2xl{border-radius:20px} .text-muted{color:var(--muted) !important} .bg-elev{background:var(--bg-elev)} /* ---------- Ajustes dark mode pontuais ---------- */ html[data-bs-theme="dark"] .hero{ border-color:rgba(255,255,255,.08); } html[data-bs-theme="dark"] .chip, html[data-bs-theme="dark"] .badge-neon{ color:#eaf1ff; } html[data-bs-theme="dark"] .btn-ghost:hover{ background:color-mix(in srgb, #ffffff 6%, transparent); } /* ---------- Print ---------- */ @media print{ .float-wa, .sticky-wa{ display:none !important; } body{ padding-bottom:0 !important; background:#fff } }