/* ================================================================ MÁRCIO PEÇA A PEÇA — PRO.CSS Performance · Acessibilidade · Conversão Cole: no ================================================================ */ /* ================================================================ 1. PERFORMANCE — Reduz animações pesadas em mobile/low-end ================================================================ */ /* GPU hints apenas nos elementos que realmente animam */ .ticker-track, .brands-track, .pre-ring::before, .pre-ring::after, .wa-float { will-change: transform; } /* Para de animar quando fora da tela (JS complementa) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .ticker-track, .brands-track { animation: none !important; } .orb { animation: none !important; } body::before { animation: none !important; } } /* Mobile: simplifica sombras pesadas */ @media (max-width: 768px) { .hero-card, .cat-card, .diff-card, .product-card, .testi-card { box-shadow: 0 8px 24px rgba(0,0,0,.40) !important; } /* Para partículas (JS remove o canvas, mas garante) */ #particles { display: none !important; } /* Reduz blur — pesado em GPU mobile */ .orb { filter: blur(40px) !important; } body::after { display: none !important; } } /* ================================================================ 2. ACESSIBILIDADE — Skip to content ================================================================ */ #skip-link { position: fixed; top: -100px; left: 16px; z-index: 99999; background: #FFD600; color: #040B38; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: .88rem; padding: 12px 24px; border-radius: 0 0 12px 12px; text-decoration: none; transition: top .3s ease; box-shadow: 0 8px 24px rgba(0,0,0,.4); } #skip-link:focus { top: 0; outline: 3px solid #1A3EC8; outline-offset: 2px; } /* ================================================================ 3. ACESSIBILIDADE — Focus visível em todos os elementos ================================================================ */ :focus-visible { outline: 2.5px solid #FFD600 !important; outline-offset: 3px !important; border-radius: 6px; } /* Botões e links sem outline feio no clique (só no teclado) */ :focus:not(:focus-visible) { outline: none; } /* ================================================================ 4. ACESSIBILIDADE — Contraste de textos ================================================================ */ /* Textos com baixo contraste — melhora legibilidade */ .s-desc, .hero-sub, .cat-card p, .diff-card p, .testi-text, .contact-card p, .about-list li, .footer-brand p { color: rgba(240, 246, 255, .78) !important; /* era .60 — muito baixo */ } .f-ci, .footer-col ul li a, .stat-label, .brand-cat, .hc-item span { color: rgba(240, 246, 255, .72) !important; } /* ================================================================ 5. CONVERSÃO — Popup WhatsApp ================================================================ */ #waPopup { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: flex-end; justify-content: flex-end; padding: 24px; pointer-events: none; opacity: 0; transition: opacity .4s ease; } #waPopup.show { opacity: 1; pointer-events: auto; } .wa-popup-inner { background: linear-gradient(145deg, #0B1880, #040B38); border: 1.5px solid rgba(255, 214, 0, .35); border-radius: 24px; padding: 28px 24px 24px; width: min(340px, calc(100vw - 48px)); box-shadow: 0 24px 60px rgba(0,0,0,.70), 0 0 0 1px rgba(255,214,0,.10); position: relative; transform: translateY(30px) scale(.95); transition: transform .4s cubic-bezier(.34,1.56,.64,1); } #waPopup.show .wa-popup-inner { transform: translateY(0) scale(1); } /* Linha top colorida */ .wa-popup-inner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 24px 24px 0 0; background: linear-gradient(90deg, #25D366, #FFD600, #25D366); } .wa-popup-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); color: rgba(240,246,255,.60); font-size: .8rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s; } .wa-popup-close:hover { background: rgba(230,50,0,.25); border-color: rgba(230,50,0,.50); color: #fff; transform: scale(1.1); } .wa-popup-icon { width: 56px; height: 56px; border-radius: 18px; background: #25D366; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #fff; margin-bottom: 16px; box-shadow: 0 8px 24px rgba(37,211,102,.45); animation: popupIconPulse 2s ease-in-out infinite; } @keyframes popupIconPulse { 0%,100% { box-shadow: 0 8px 24px rgba(37,211,102,.45); } 50% { box-shadow: 0 8px 32px rgba(37,211,102,.70); } } .wa-popup-title { font-family: 'Oswald', sans-serif; font-size: 1.3rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; } .wa-popup-sub { font-size: .84rem; color: rgba(240,246,255,.70); line-height: 1.6; margin-bottom: 20px; } .wa-popup-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px; border-radius: 14px; background: #25D366; color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: .92rem; text-decoration: none; transition: all .25s; box-shadow: 0 8px 24px rgba(37,211,102,.40); margin-bottom: 10px; } .wa-popup-btn:hover { background: #1ebe5a; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(37,211,102,.55); } .wa-popup-later { display: block; width: 100%; background: none; border: none; color: rgba(240,246,255,.45); font-family: 'Montserrat', sans-serif; font-size: .78rem; cursor: pointer; padding: 6px; transition: color .2s; text-align: center; } .wa-popup-later:hover { color: rgba(240,246,255,.75); } /* Mobile: popup na parte inferior centralizado */ @media (max-width: 480px) { #waPopup { align-items: flex-end; justify-content: center; padding: 0; } .wa-popup-inner { width: 100%; border-radius: 24px 24px 0 0; padding: 28px 20px 32px; } .wa-popup-inner::before { border-radius: 24px 24px 0 0; } } /* ================================================================ 6. CONVERSÃO — Destaque no botão WA da navbar ao rolar ================================================================ */ #navbar.scrolled .btn-nav-wa { animation: navWaPulse 3s ease-in-out infinite; } @keyframes navWaPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } 50% { box-shadow: 0 0 0 8px rgba(37,211,102,.15); } } /* ================================================================ 7. PERFORMANCE — Imagens com aspect-ratio evita layout shift ================================================================ */ .product-img img, .slide img, .brand-logo-wrap img { aspect-ratio: auto; } .product-img { content-visibility: auto; contain-intrinsic-size: 200px; } /* ================================================================ 8. ACESSIBILIDADE — Melhor foco no menu mobile ================================================================ */ .mobile-drawer nav a:focus-visible { outline: 2px solid #FFD600 !important; outline-offset: 2px; background: rgba(255,214,0,.12) !important; } /* ================================================================ 9. PERFORMANCE — Contain em seções longas ================================================================ */ .brands-section, .section.testimonials, #categorias, #diferenciais { contain: layout style; } /* ================================================================ 10. CONVERSÃO — Urgência no ticker ================================================================ */ .ticker-line:first-child .ticker-track span:nth-child(2)::before { content: '🔥 '; }