/* ARTIGO DE GRIFE — VISUAL FIXES v3 Adicione no do index.html APÓS premium-upgrades.css: */ :root { --bg-deep: #0f0d0a; /* Rich luxury dark gold-bronze */ } /* FUNDO BODY — profundo com atmosfera dourada sutil */ body { background-color: #0f0d0a !important; background-image: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255,215,0,0.07) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 85% 85%, rgba(212,175,55,0.03) 0%, transparent 55%), radial-gradient(ellipse 40% 30% at 15% 55%, rgba(184,134,11,0.03) 0%, transparent 55%) !important; background-attachment: fixed !important; } /* PARTICULAS — garantir visibilidade e posicionamento correto */ #particles-js { opacity: 1 !important; z-index: 0 !important; background: transparent !important; } /* HERO — fundo transparente para revelar partículas e orbs atrás do WebGL */ .hero { background-color: transparent !important; background-image: radial-gradient(ellipse 110% 65% at 50% -5%, rgba(255,215,0,0.1) 0%, transparent 65%), radial-gradient(ellipse 55% 45% at 8% 55%, rgba(212,175,55,0.03) 0%, transparent 50%), radial-gradient(ellipse 50% 40% at 92% 65%, rgba(184,134,11,0.03) 0%, transparent 50%) !important; } /* GRADIENT CANVAS — fix crítico para partículas aparecerem */ .gradient-canvas { opacity: 0.95 !important; mix-blend-mode: screen !important; } /* HEADER */ .header { background: rgba(11,10,9,0.6) !important; border-bottom: 1px solid rgba(255,215,0,0.09) !important; } .header.scrolled { background: rgba(11,10,9,0.94) !important; } /* PRODUCT CARDS */ .product-card { background: linear-gradient(150deg,#13110e 0%,#0d0c0a 100%) !important; border: 1px solid rgba(255,215,0,0.11) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.6) !important; } .product-card:hover { background: linear-gradient(150deg,#181512 0%,#110f0c 100%) !important; border-color: rgba(255,215,0,0.42) !important; box-shadow: 0 20px 55px rgba(0,0,0,0.8), 0 0 35px rgba(255,215,0,0.11), inset 0 1px 0 rgba(255,215,0,0.07) !important; } /* SIDEBAR, MODALS, CART */ .filters-sidebar { background: linear-gradient(160deg,#13110e 0%,#0d0c0a 100%) !important; border: 1px solid rgba(255,215,0,0.08) !important; } .modal-content { background: linear-gradient(160deg,#13110e 0%,#0b0a09 100%) !important; border: 1px solid rgba(255,215,0,0.14) !important; } .cart-sidebar { background: linear-gradient(160deg,#13110e 0%,#0b0a09 100%) !important; border-left: 1px solid rgba(255,215,0,0.09) !important; } .cart-footer { background: #0b0a09 !important; } .cart-item { background: #13110e !important; border: 1px solid rgba(255,215,0,0.07) !important; } /* DIVIDERS — mais brilhantes */ .section-divider { background: linear-gradient(90deg, transparent, rgba(255,215,0,0.18) 25%, rgba(255,215,0,0.65) 50%, rgba(255,215,0,0.18) 75%, transparent) !important; box-shadow: 0 0 28px rgba(255,215,0,0.22), 0 0 70px rgba(255,215,0,0.06) !important; height: 1px !important; } /* BOXES */ .stat { background: linear-gradient(145deg,#13110e 0%,#0b0a09 100%) !important; border: 1px solid rgba(255,215,0,0.1) !important; } .feature-box { background: linear-gradient(145deg,#13110e 0%,#0b0a09 100%) !important; border: 1px solid rgba(255,215,0,0.09) !important; } .flagship-card { background: linear-gradient(135deg,#13110e 0%,#0d0c0a 100%) !important; border: 1px solid rgba(255,215,0,0.11) !important; } /* FOOTER */ .site-footer { background: linear-gradient(180deg,#0b0a09 0%,#060504 100%) !important; border-top: 1px solid rgba(255,215,0,0.09) !important; } .footer-bottom-bar { background: #060504 !important; } /* CHECKOUT */ .checkout-header { background: #0d0c0a !important; } .checkout-summary-section { background: #0d0c0a !important; border: 1px solid rgba(255,215,0,0.09) !important; } .checkout-step input { background: #13110e !important; border: 1px solid rgba(255,215,0,0.08) !important; } .checkout-step input:focus { border-color: rgba(255,215,0,0.5) !important; box-shadow: 0 0 0 3px rgba(255,215,0,0.07) !important; } .payment-method-option { background: rgba(19,17,14,0.7) !important; border: 1px solid rgba(255,255,255,0.06) !important; } .payment-method-option.active { border: 2px solid rgba(255,215,0,0.7) !important; background: rgba(255,215,0,0.04) !important; } /* TRUST BAR */ .trust-bar { background: rgba(255,215,0,0.022) !important; border-top: 1px solid rgba(255,215,0,0.07) !important; border-bottom: 1px solid rgba(255,215,0,0.07) !important; } .trust-bar::before { background: linear-gradient(90deg,#0b0a09,transparent) !important; } .trust-bar::after { background: linear-gradient(-90deg,#0b0a09,transparent) !important; } /* REVIEWS */ .testimonial-card { background: linear-gradient(145deg,#13110e 0%,#0b0a09 100%) !important; } .reviews-summary-dashboard { background: linear-gradient(135deg,rgba(19,17,14,0.85) 0%,rgba(11,10,9,0.85) 100%) !important; border: 1px solid rgba(255,215,0,0.11) !important; } /* DRAWER */ .mobile-drawer { background: linear-gradient(160deg,#0d0c0a 0%,#0b0a09 100%) !important; } .drawer-header { background: #0b0a09 !important; } /* PAYMENT + CONTACT */ .premium-payment-section { background: linear-gradient(135deg,rgba(19,17,14,0.92) 0%,rgba(11,10,9,0.92) 100%) !important; border: 1px solid rgba(255,215,0,0.09) !important; } .contact-sidebar-card, .contact-form-card { background: rgba(19,17,14,0.88) !important; border: 1px solid rgba(255,215,0,0.09) !important; } /* LOADER */ #premium-loader { background: #0b0a09 !important; } .loader-bg { background: radial-gradient(ellipse at 50% 50%,#171410 0%,#0b0a09 70%) !important; } /* HERO LOGO GLOW ANIMATION */ .hero-logo-container img { filter: drop-shadow(0 0 32px rgba(255,215,0,0.42)) drop-shadow(0 0 80px rgba(255,215,0,0.14)) !important; animation: hero-logo-glow-v2 5s ease-in-out infinite !important; } @keyframes hero-logo-glow-v2 { 0%,100% { filter: drop-shadow(0 0 26px rgba(255,215,0,0.33)) drop-shadow(0 0 62px rgba(255,215,0,0.1)); transform: translateY(0px) rotate(-0.8deg); } 50% { filter: drop-shadow(0 0 58px rgba(255,215,0,0.62)) drop-shadow(0 0 135px rgba(255,215,0,0.22)); transform: translateY(-20px) rotate(0.8deg); } } /* SECTION TITLE */ .section-title { filter: drop-shadow(0 0 22px rgba(255,215,0,0.22)) !important; } /* SCROLL PROGRESS */ #scroll-progress { background: linear-gradient(90deg,#b8860b,#FFD700,#FFF8DC,#FFD700,#b8860b) !important; box-shadow: 0 0 16px rgba(255,215,0,0.75) !important; } /* BACK TO TOP */ #back-to-top { background: rgba(255,215,0,0.07) !important; border: 1px solid rgba(255,215,0,0.18) !important; backdrop-filter: blur(16px) !important; } #back-to-top:hover { background: rgba(255,215,0,0.85) !important; color: #000 !important; } /* WHATSAPP PULSE */ @keyframes wa-pulse-v2 { 0%,100% { box-shadow: 0 6px 22px rgba(37,211,102,0.35), 0 0 0 0 rgba(37,211,102,0.28); } 50% { box-shadow: 0 6px 22px rgba(37,211,102,0.35), 0 0 0 14px rgba(37,211,102,0); } } .floating-whatsapp { animation: wa-pulse-v2 3.5s ease-in-out infinite !important; } /* ORBS ATMOSFERICOS — efeito visual de profundidade (estilo ouro líquido e âmbar) */ .hero-orb { position: absolute; border-radius: 50%; pointer-events: none; z-index: 1; filter: blur(90px); } .hero-orb-1 { width:600px;height:600px;top:-180px;left:-200px; background:radial-gradient(circle,rgba(255,215,0,0.07) 0%,transparent 65%); animation:orb-drift 14s ease-in-out infinite; } .hero-orb-2 { width:450px;height:450px;bottom:-80px;right:-120px; background:radial-gradient(circle,rgba(212,175,55,0.05) 0%,transparent 65%); animation:orb-drift 18s ease-in-out infinite reverse; } .hero-orb-3 { width:320px;height:320px;top:35%;right:8%; background:radial-gradient(circle,rgba(255,165,0,0.05) 0%,transparent 65%); animation:orb-drift 10s ease-in-out infinite; animation-delay:-5s; } @keyframes orb-drift { 0%,100% { transform:translate(0,0) scale(1); } 33% { transform:translate(28px,-22px) scale(1.06); } 66% { transform:translate(-18px,16px) scale(0.96); } } /* SEARCH BOX */ .search-box { background: rgba(19,17,14,0.8) !important; border: 1px solid rgba(255,215,0,0.08) !important; } .search-box:focus-within { border-color: rgba(255,215,0,0.45) !important; box-shadow: 0 0 0 3px rgba(255,215,0,0.07), 0 0 25px rgba(255,215,0,0.1) !important; } /* FILTER LIST */ .filter-list li { background: rgba(19,17,14,0.6) !important; border: 1px solid rgba(255,215,0,0.06) !important; } .filter-list li:hover { background: rgba(255,215,0,0.04) !important; border-color: rgba(255,215,0,0.18) !important; } /* PIX / CREDIT */ #creditCardForm { background: #12100d !important; border: 1px solid rgba(255,215,0,0.08) !important; } #pixInstructions { background: rgba(50,188,173,0.06) !important; border: 1px solid rgba(50,188,173,0.22) !important; } /* MOBILE */ @media (max-width:768px) { .hero-orb-1 { width:350px;height:350px;left:-120px; } .hero-orb-2 { width:280px;height:280px;right:-80px; } .hero-orb-3 { display:none; } }