// Host fixo na página
const host = document.createElement("div");
host.style.position = "fixed";
host.style.bottom = "24px";
host.style.right = "24px";
host.style.zIndex = "2147483647";
host.style.all = "initial"; // reduz chance de herdar estilos
host.setAttribute("aria-hidden", "false");
// Shadow DOM p/ isolar estilos
const shadow = host.attachShadow({ mode: "open" });
// Estilos do botão
const style = document.createElement("style");
style.textContent = `
@keyframes fabPulse {
0% { box-shadow: 0 8px 24px rgba(0,0,0,.18); }
50% { box-shadow: 0 12px 28px rgba(0,0,0,.26); }
100% { box-shadow: 0 8px 24px rgba(0,0,0,.18); }
}
a {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
width: 64px;
height: 64px;
border-radius: 9999px;
text-decoration: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
background: radial-gradient(120% 120% at 85% 15%, #20c997 0%, #0ea5e9 60%, #2563eb 100%);
color: #fff;
font: 600 28px/1 system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif;
letter-spacing: .5px;
box-shadow: 0 8px 24px rgba(0,0,0,.18);
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
animation: fabPulse 2.2s ease-in-out infinite;
}
a:focus { outline: 0; }
a:focus-visible { outline: 3px solid rgba(59,130,246,.7); outline-offset: 3px; }
a:hover { transform: translateY(-2px) scale(1.03); }
a:active { transform: translateY(0) scale(.98); filter: brightness(.96); }
@media (prefers-reduced-motion: reduce) {
a { animation: none; transition: none; }
}
.label {
position: absolute;
right: 80px;
bottom: 50%;
transform: translateY(50%);
background: #111827;
color: #fff;
font: 500 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif;
padding: 8px 10px;
border-radius: 10px;
white-space: nowrap;
box-shadow: 0 6px 18px rgba(0,0,0,.2);
opacity: 0;
pointer-events: none;
transition: opacity .18s ease, transform .18s ease;
}
a:hover + .label, a:focus-visible + .label {
opacity: 1; transform: translate(6px, 50%);
}
`;
// Anchor + acessibilidade
const btn = document.createElement("a");
btn.href = URL;
btn.target = "_blank";
btn.rel = "noopener noreferrer";
btn.setAttribute("role", "button");
btn.setAttribute("aria-label", "Abrir portal ViaImob");
btn.textContent = "$"; // troque para "R$" se preferir
// Tooltip opcional
const label = document.createElement("div");
label.className = "label";
label.textContent = "Abrir portal ViaImob";
shadow.appendChild(style);
shadow.appendChild(btn);
shadow.appendChild(label);
document.body.appendChild(host);
})();