/* Modal RSX - Estilo Urgente */
.rsx-urgent-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
z-index: 9999999999;
/* Z-index altíssimo para garantir que apareça */
display: flex;
justify-content: center;
align-items: center;
font-family: 'Arial', sans-serif;
}
.rsx-urgent-modal-box {
background: linear-gradient(135deg, #1a2a6c, #b21f1f);
color: white;
padding: 30px;
border-radius: 10px;
max-width: 500px;
width: 90%;
text-align: center;
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.5);
animation: rsx-pulse 0.5s ease;
}
@keyframes rsx-pulse {
0% {
transform: scale(0.9);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.rsx-urgent-modal-title {
font-size: 24px;
font-weight: bold;
margin-bottom: 15px;
}
.rsx-urgent-modal-text {
margin-bottom: 20px;
line-height: 1.5;
}
.rsx-urgent-modal-btn {
padding: 12px 25px;
border: none;
border-radius: 5px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s;
margin: 0 10px;
}
.rsx-urgent-modal-btn-primary {
background: #FF6B00;
color: white;
}
.rsx-urgent-modal-btn-primary:hover {
background: #FF8C00;
}
.rsx-urgent-modal-btn-close {
background: transparent;
color: white;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.rsx-urgent-modal-btn-close:hover {
background: rgba(255, 255, 255, 0.1);
}
#nprogress {
pointer-events: none;
}
#nprogress .bar {
background: #8a2be2;
position: fixed;
z-index: 1600;
top: 0;
left: 0;
width: 100%;
height: 2px;
}
#nprogress .peg {
display: block;
position: absolute;
right: 0;
width: 100px;
height: 100%;
box-shadow: 0 0 10px #8a2be2, 0 0 5px #8a2be2;
opacity: 1;
transform: rotate(3deg) translate(0px, -2px);
}
#nprogress .spinner {
display: none;
}
.boaplay-hero {
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
padding: 40px 0;
flex-wrap: wrap;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
position: relative;
background: transparent;
margin: 20px 0;
}
.boaplay-hero-left {
flex: 1;
min-width: 300px;
padding: 0 30px;
}
.boaplay-hero-left h1 {
font-size: 2.2rem;
line-height: 1.2;
color: white;
font-weight: 700;
margin-bottom: 15px;
background: linear-gradient(to right, #fff 0%, #b967ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.boaplay-hero-left .highlight {
color: #b967ff;
font-weight: 700;
}
.boaplay-hero-left p {
margin-top: 15px;
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.7);
line-height: 1.6;
max-width: 90%;
}
.boaplay-buttons {
margin-top: 25px;
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.boaplay-buttons button {
font-size: 0.95rem;
padding: 12px 20px;
font-weight: 600;
border-radius: 8px;
transition: all 0.3s ease;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
border: none;
}
.boaplay-buttons .btn-blue {
background: rgba(138, 43, 226, 0.9);
color: white;
backdrop-filter: blur(5px);
box-shadow: 0 4px 15px rgba(138, 43, 226, 0.3);
}
.boaplay-buttons .btn-blue:hover {
background: rgba(138, 43, 226, 1);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(138, 43, 226, 0.4);
}
.boaplay-buttons .btn-dark {
background: rgba(26, 0, 26, 0.6);
color: white;
backdrop-filter: blur(5px);
border: 1px solid rgba(138, 43, 226, 0.3);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.boaplay-buttons .btn-dark:hover {
background: rgba(40, 0, 40, 0.7);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.whatsapp-icon {
width: 20px;
height: 20px;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
}
.boaplay-hero-image {
flex: 1;
min-width: 300px;
position: relative;
text-align: right;
cursor: pointer;
padding-right: 30px;
}
.boaplay-hero-image img {
max-width: 100%;
height: auto;
border-radius: 10px;
transition: all 0.4s ease;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(138, 43, 226, 0.2);
}
.boaplay-hero-image:hover img {
transform: scale(1.02);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}
.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
opacity: 0;
transition: all 0.3s ease;
cursor: pointer;
background: rgba(26, 0, 26, 0.7);
border-radius: 50%;
padding: 8px;
backdrop-filter: blur(5px);
border: 1px solid rgba(138, 43, 226, 0.3);
}
.arrow:hover {
background: rgba(138, 43, 226, 0.8);
}
.arrow.left {
left: 15px;
}
.arrow.right {
right: 15px;
}
.boaplay-hero-image:hover .arrow {
opacity: 1;
}
.progress-bar-container {
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
width: 90%;
height: 3px;
background: rgba(0, 0, 0, 0.2);
opacity: 0;
transition: opacity 0.3s ease;
border-radius: 3px;
z-index: 2;
}
.progress-bar {
height: 100%;
width: 0;
background-color: #8a2be2;
border-radius: 3px;
transition: width 0.1s linear;
}
.quick-buy-btn {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
background: rgba(138, 43, 226, 0.9);
color: white;
padding: 10px 20px;
border-radius: 30px;
font-weight: 600;
font-size: 0.9rem;
opacity: 0;
transition: all 0.3s ease;
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
z-index: 3;
white-space: nowrap;
}
.quick-buy-btn:hover {
background: rgba(138, 43, 226, 1);
transform: translateX(-50%) translateY(-2px);
box-shadow: 0 6px 20px rgba(138, 43, 226, 0.3);
}
.boaplay-hero-image:hover .quick-buy-btn,
.mobile-banner-slide:hover .quick-buy-btn {
opacity: 1;
}
/* Mobile Slider */
.mobile-banner-container {
display: none;
width: calc(100% - 40px);
margin: 20px auto 0;
position: relative;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(138, 43, 226, 0.2);
}
.mobile-banner-track {
display: flex;
transition: transform 0.5s ease;
width: 100%;
}
.mobile-banner-slide {
min-width: 100%;
position: relative;
}
.mobile-banner-slide img {
width: 100%;
height: auto;
display: block;
}
.mobile-banner-dots {
position: absolute;
bottom: 15px;
left: 0;
right: 0;
display: flex;
justify-content: center;
gap: 8px;
z-index: 2;
}
.mobile-banner-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
cursor: pointer;
transition: all 0.3s ease;
}
.mobile-banner-dot.active {
background: #8a2be2;
transform: scale(1.2);
}
.quality-badge {
position: absolute;
top: 15px;
right: 15px;
background: rgba(138, 43, 226, 0.2);
color: white;
padding: 5px 12px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
backdrop-filter: blur(5px);
border: 1px solid rgba(138, 43, 226, 0.3);
z-index: 1;
}
@media (max-width: 768px) {
.boaplay-hero {
padding: 30px 0;
background: transparent;
}
.boaplay-hero-left {
padding: 0 20px;
text-align: center;
}
.boaplay-hero-left h1 {
font-size: 1.7rem;
}
.boaplay-hero-left p {
max-width: 100%;
font-size: 0.9rem;
}
.boaplay-buttons {
justify-content: center;
}
.boaplay-hero-image {
display: none;
}
.mobile-banner-container {
display: block;
}
.quality-badge {
position: relative;
top: 0;
right: 0;
margin: 0 auto 15px;
display: inline-block;
}
.quick-buy-btn {
padding: 8px 16px;
font-size: 0.8rem;
bottom: 25px;
}
}
@media (min-width: 1200px) {
.boaplay-hero {
padding: 50px 0;
}
.boaplay-hero-left h1 {
font-size: 2.5rem;
}
}
a[href^="/product/"]:hover {
outline: 2px solid #7152fa;
border-radius: 10px;
box-shadow: 0 0 15px #7152fa, 0 0 30px #7152fa;
transition: all 0.3s ease;
}
// ===================================================================
// SCRIPT ROBUSTO PARA ADICIONAR SELO DE VERIFICADO
// ===================================================================
(function () {
// --- CONFIGURAÇÃO ---
// Insira aqui o seletor CSS do elemento onde você quer adicionar o selo.
// Exemplo: '.nome-da-loja' ou '#titulo-principal'
const seletorAlvo='SEU_SELETOR_CSS_AQUI';
// URL do ícone de verificado (corrigido para azul, para aparecer em fundos escuros)
const urlIcone='https://img.icons8.com/?size=100&id=98A4yZTt9abw&format=png&color=3b82f6';
// --------------------
// Função que cria e adiciona o selo
function adicionarSelo(elementoPai) {
// Verifica se o selo já foi adicionado para não duplicar
if (elementoPai.querySelector('.selo-verificado-custom')) {
return;
}
// Cria o contêiner do ícone
const containerSelo=document.createElement('span');
containerSelo.className='selo-verificado-custom';
containerSelo.style.display='inline-flex';
containerSelo.style.alignItems='center';
containerSelo.style.marginLeft='8px'; // Espaçamento
// Cria o ícone
const icone=document.createElement('img');
icone.src=urlIcone;
icone.alt='Verificado';
icone.style.width='18px';
icone.style.height='18px';
// Adiciona o ícone ao contêiner e o contêiner ao elemento pai
containerSelo.appendChild(icone);
elementoPai.appendChild(containerSelo);
console.log('Selo de verificado adicionado com sucesso a:', elementoPai);
}
// Função que tenta encontrar o elemento e adicionar o selo
function tentarAdicionarSelo() {
const elementoAlvo=document.querySelector(seletorAlvo);
if (elementoAlvo) {
adicionarSelo(elementoAlvo);
// Opcional: Desconectar o observer depois de encontrar e adicionar o selo
// observer.disconnect();
}
}
// MutationObserver: A "mágica" que espera o elemento aparecer
const observer=new MutationObserver((mutations)=> {
// Para cada mudança na página, tentamos adicionar o selo
tentarAdicionarSelo();
});
// Inicia a observação no corpo do documento
observer.observe(document.body, {
childList: true, // Observa adição/remoção de elementos filhos
subtree: true // Observa toda a árvore de descendentes
});
// Tenta adicionar o selo uma vez quando a página carrega, para garantir
if (document.readyState==='complete') {
tentarAdicionarSelo();
}
else {
document.addEventListener('DOMContentLoaded', tentarAdicionarSelo);
}
})();
// Animação CSS
const estilo=document.createElement("style");
estilo.innerHTML=` @keyframes gradientMove {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
`;
document.head.appendChild(estilo);
// Função para criar um botão
function criarBotaoVoltarAoTopo(id, position, comTexto=true) {
const botao=document.createElement("button");
botao.id=id;
botao.innerHTML=` $ {
comTexto ? `
Voltar ao Topo`: ''
}