/* ============================================================ ARTIGO DE GRIFE — GOLD ATMOSPHERE v1.0.6 Adicione no após visual-fixes.css: ============================================================ */ /* ── FUNDO CORPO: preto puro com pontos de luz dourados elegantes ── */ :root { --gold-primary: #FFD700; --gold-mid: #D4A017; --gold-deep: #8B6914; --noir: #000000; /* Preto Puro */ --noir-2: #050505; /* Preto Profundo */ --noir-3: #0a0a0a; /* Off-Black Rico */ --noir-4: #101010; /* Carvão Escuro */ /* Sobrescrever style.css e visual-fixes.css */ --primary-color: #FFD700; --primary-hover: #D4A017; --bg-color: #000000; --card-bg: #080808; --border-color: rgba(255, 215, 0, 0.12); --bg-deep: #000000; } body { background-color: var(--noir) !important; background-image: radial-gradient(ellipse 120% 70% at 50% -10%, rgba(255, 215, 0, 0.10) 0%, transparent 50%), /* Pontos de Luz Dourados */ radial-gradient(circle 600px at 15% 45%, rgba(255, 215, 0, 0.05) 0%, transparent 100%), radial-gradient(circle 600px at 85% 75%, rgba(212, 160, 23, 0.04) 0%, transparent 100%), radial-gradient(ellipse 90% 60% at 50% 100%, rgba(255, 215, 0, 0.06) 0%, transparent 60%) !important; background-attachment: fixed !important; } /* ── PARTÍCULAS FLUTUANTES EM CSS PURO ── */ .gold-particles-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: hidden; } .gp { position: absolute; border-radius: 50%; background: var(--gold-primary); opacity: 0; animation: gp-float linear infinite; } @keyframes gp-float { 0% { transform: translateY(100vh) translateX(0) scale(0); opacity: 0; } 5% { opacity: 1; } 80% { opacity: 0.6; } 95% { opacity: 0; } 100% { transform: translateY(-10vh) translateX(var(--drift, 30px)) scale(1); opacity: 0; } } /* 100 partículas com posições/tamanhos/durações variadas */ .gp:nth-child(1) { left: 1.5%; width: 2px; height: 2px; animation-duration: 9s; animation-delay: 0.8s; --drift: -22px; } .gp:nth-child(2) { left: 2.5%; width: 2.5px; height: 2.5px; animation-duration: 14s; animation-delay: 1.6s; --drift: 29px; } .gp:nth-child(3) { left: 3.4%; width: 4.2px; height: 4.2px; animation-duration: 15s; animation-delay: 2.4s; --drift: -36px; box-shadow: 0 0 6px rgba(255,215,0,0.6); } .gp:nth-child(4) { left: 4.4%; width: 2.5px; height: 2.5px; animation-duration: 16s; animation-delay: 3.2s; --drift: 43px; } .gp:nth-child(5) { left: 5.4%; width: 2.2px; height: 2.2px; animation-duration: 13s; animation-delay: 4s; --drift: -50px; } .gp:nth-child(6) { left: 6.3%; width: 3.5px; height: 3.5px; animation-duration: 18s; animation-delay: 4.8s; --drift: 57px; box-shadow: 0 0 6px rgba(255,215,0,0.6); } .gp:nth-child(7) { left: 7.3%; width: 7px; height: 7px; animation-duration: 25s; animation-delay: 5.6s; --drift: -15px; box-shadow: 0 0 12px rgba(255,215,0,0.85), 0 0 20px rgba(255,215,0,0.4); background: rgba(255, 215, 0, 0.9); } .gp:nth-child(8) { left: 8.3%; width: 2.5px; height: 2.5px; animation-duration: 20s; animation-delay: 6.4s; --drift: 22px; } .gp:nth-child(9) { left: 9.3%; width: 4.2px; height: 4.2px; animation-duration: 21s; animation-delay: 7.2s; --drift: -29px; box-shadow: 0 0 6px rgba(255,215,0,0.6); } .gp:nth-child(10) { left: 10.2%; width: 2.5px; height: 2.5px; animation-duration: 22s; animation-delay: 8s; --drift: 36px; } .gp:nth-child(11) { left: 11.2%; width: 2.2px; height: 2.2px; animation-duration: 11s; animation-delay: 8.8s; --drift: -43px; } .gp:nth-child(12) { left: 12.2%; width: 3.5px; height: 3.5px; animation-duration: 24s; animation-delay: 9.6s; --drift: 50px; box-shadow: 0 0 6px rgba(255,215,0,0.6); } .gp:nth-child(13) { left: 13.1%; width: 2px; height: 2px; animation-duration: 13s; animation-delay: 10.4s; --drift: -57px; } .gp:nth-child(14) { left: 14.1%; width: 8px; height: 8px; animation-duration: 22s; animation-delay: 11.2s; --drift: 15px; box-shadow: 0 0 12px rgba(255,215,0,0.85), 0 0 20px rgba(255,215,0,0.4); background: rgba(255, 215, 0, 0.9); } .gp:nth-child(15) { left: 15.1%; width: 4.2px; height: 4.2px; animation-duration: 12s; animation-delay: 12s; --drift: -22px; box-shadow: 0 0 6px rgba(255,215,0,0.6); } .gp:nth-child(16) { left: 16%; width: 2.5px; height: 2.5px; animation-duration: 13s; animation-delay: 12.8s; --drift: 29px; } .gp:nth-child(17) { left: 17%; width: 2.2px; height: 2.2px; animation-duration: 9s; animation-delay: 13.6s; --drift: -36px; } .gp:nth-child(18) { left: 18%; width: 3.5px; height: 3.5px; animation-duration: 15s; animation-delay: 14.4s; --drift: 43px; box-shadow: 0 0 6px rgba(255,215,0,0.6); } .gp:nth-child(19) { left: 19%; width: 2px; height: 2px; animation-duration: 11s; animation-delay: 15.2s; --drift: -50px; } .gp:nth-child(20) { left: 19.9%; width: 2.5px; height: 2.5px; animation-duration: 17s; animation-delay: 16s; --drift: 57px; } .gp:nth-child(21) { left: 20.9%; width: 6px; height: 6px; animation-duration: 19s; animation-delay: 16.8s; --drift: -15px; box-shadow: 0 0 12px rgba(255,215,0,0.85), 0 0 20px rgba(255,215,0,0.4); background: rgba(255, 215, 0, 0.9); } .gp:nth-child(22) { left: 21.9%; width: 2.5px; height: 2.5px; animation-duration: 19s; animation-delay: 17.6s; --drift: 22px; } .gp:nth-child(23) { left: 22.8%; width: 2.2px; height: 2.2px; animation-duration: 15s; animation-delay: 0s; --drift: -29px; } .gp:nth-child(24) { left: 23.8%; width: 3.5px; height: 3.5px; animation-duration: 21s; animation-delay: 0.8s; --drift: 36px; box-shadow: 0 0 6px rgba(255,215,0,0.6); } .gp:nth-child(25) { left: 24.8%; width: 2px; height: 2px; animation-duration: 9s; animation-delay: 1.6s; --drift: -43px; } .gp:nth-child(26) { left: 25.8%; width: 2.5px; height: 2.5px; animation-duration: 23s; animation-delay: 2.4s; --drift: 50px; } .gp:nth-child(27) { left: 26.7%; width: 4.2px; height: 4.2px; animation-duration: 24s; animation-delay: 3.2s; --drift: -57px; box-shadow: 0 0 6px rgba(255,215,0,0.6); } .gp:nth-child(28) { left: 27.7%; width: 7px; height: 7px; animation-duration: 26s; animation-delay: 4s; --drift: 15px; box-shadow: 0 0 12px rgba(255,215,0,0.85), 0 0 20px rgba(255,215,0,0.4); background: rgba(255, 215, 0, 0.9); } .gp:nth-child(29) { left: 28.7%; width: 2.2px; height: 2.2px; animation-duration: 13s; animation-delay: 4.8s; --drift: -22px; } .gp:nth-child(30) { left: 29.6%; width: 3.5px; height: 3.5px; animation-duration: 12s; animation-delay: 5.6s; --drift: 29px; box-shadow: 0 0 6px rgba(255,215,0,0.6); } .gp:nth-child(31) { left: 30.6%; width: 2px; height: 2px; animation-duration: 15s; animation-delay: 6.4s; --drift: -36px; } .gp:nth-child(32) { left: 31.6%; width: 2.5px; height: 2.5px; animation-duration: 14s; animation-delay: 7.2s; --drift: 43px; } .gp:nth-child(33) { left: 32.5%; width: 4.2px; height: 4.2px; animation-duration: 15s; animation-delay: 8s; --drift: -50px; box-shadow: 0 0 6px rgba(255,215,0,0.6); } .gp:nth-child(34) { left: 33.5%; width: 2.5px; height: 2.5px; animation-duration: 16s; animation-delay: 8.8s; --drift: 57px; } .gp:nth-child(35) { left: 34.5%; width: 8px; height: 8px; animation-duration: 23s; animation-delay: 9.6s; --drift: -15px; box-shadow: 0 0 12px rgba(255,215,0,0.85), 0 0 20px rgba(255,215,0,0.4); background: rgba(255, 215, 0, 0.9); } .gp:nth-child(36) { left: 35.4%; width: 3.5px; height: 3.5px; animation-duration: 18s; animation-delay: 10.4s; --drift: 22px; box-shadow: 0 0 6px rgba(255,215,0,0.6); } .gp:nth-child(37) { left: 36.4%; width: 2px; height: 2px; animation-duration: 13s; animation-delay: 11.2s; --drift: -29px; } .gp:nth-child(38) { left: 37.4%; width: 2.5px; height: 2.5px; animation-duration: 20s; animation-delay: 12s; --drift: 36px; } .gp:nth-child(39) { left: 38.4%; width: 4.2px; height: 4.2px; animation-duration: 21s; animation-delay: 12.8s; --drift: -43px; box-shadow: 0 0 6px rgba(255,215,0,0.6); } .gp:nth-child(40) { left: 39.3%; width: 2.5px; height: 2.5px; animation-duration: 22s; animation-delay: 13.6s; --drift: 50px; } .gp:nth-child(41) { left: 40.3%; width: 2.2px; height: 2.2px; animation-duration: 9s; animation-delay: 14.4s; --drift: -57px; } .gp:nth-child(42) { left: 41.3%; width: 6px; height: 6px; animation-duration: 20s; animation-delay: 15.2s; --drift: 15px; box-shadow: 0 0 12px rgba(255,215,0,0.85), 0 0 20px rgba(255,215,0,0.4); background: rgba(255, 215, 0, 0.9); } .gp:nth-child(43) { left: 42.2%; width: 2px; height: 2px; animation-duration: 11s; animation-delay: 16s; --drift: -22px; } .gp:nth-child(44) { left: 43.2%; width: 2.5px; height: 2.5px; animation-duration: 26s; animation-delay: 16.8s; --drift: 29px; } .gp:nth-child(45) { left: 44.2%; width: 4.2px; height: 4.2px; animation-duration: 12s; animation-delay: 17.6s; --drift: -36px; box-shadow: 0 0 6px rgba(255,215,0,0.6); } .gp:nth-child(46) { left: 45.1%; width: 2.5px; height: 2.5px; animation-duration: 13s; animation-delay: 0s; --drift: 43px; } .gp:nth-child(47) { left: 46.1%; width: 2.2px; height: 2.2px; animation-duration: 15s; animation-delay: 0.8s; --drift: -50px; } .gp:nth-child(48) { left: 47.1%; width: 3.5px; height: 3.5px; animation-duration: 15s; animation-delay: 1.6s; --drift: 57px; box-shadow: 0 0 6px rgba(255,215,0,0.6); } .gp:nth-child(49) { left: 48.1%; width: 7px; height: 7px; animation-duration: 27s; animation-delay: 2.4s; --drift: -15px; box-shadow: 0 0 12px rgba(255,215,0,0.85), 0 0 20px rgba(255,215,0,0.4); background: rgba(255, 215, 0, 0.9); } .gp:nth-child(50) { left: 49%; width: 2.5px; height: 2.5px; animation-duration: 17s; animation-delay: 3.2s; --drift: 22px; } .gp:nth-child(51) { left: 50%; width: 4.2px; height: 4.2px; animation-duration: 18s; animation-delay: 4s; --drift: -29px; box-shadow: 0 0 6px rgba(255,215,0,0.6); } .gp:nth-child(52) { left: 51%; width: 2.5px; height: 2.5px; animation-duration: 19s; animation-delay: 4.8s; --drift: 36px; } .gp:nth-child(53) { left: 51.9%; width: 2.2px; height: 2.2px; animation-duration: 13s; animation-delay: 5.6s; --drift: -43px; } .gp:nth-child(54) { left: 52.9%; width: 3.5px; height: 3.5px; animation-duration: 21s; animation-delay: 6.4s; --drift: 50px; box-shadow: 0 0 6px rgba(255,215,0,0.6); } .gp:nth-child(55) { left: 53.9%; width: 2px; height: 2px; animation-duration: 15s; animation-delay: 7.2s; --drift: -57px; } .gp:nth-child(56) { left: 54.9%; width: 8px; height: 8px; animation-duration: 24s; animation-delay: 8s; --drift: 15px; box-shadow: 0 0 12px rgba(255,215,0,0.85), 0 0 20px rgba(255,215,0,0.4); background: rgba(255, 215, 0, 0.9); } .gp:nth-child(57) { left: 55.8%; width: 4.2px; height: 4.2px; animation-duration: 24s; animation-delay: 8.8s; --drift: -22px; box-shadow: 0 0 6px rgba(255,215,0,0.6); } .gp:nth-child(58) { left: 56.8%; width: 2.5px; height: 2.5px; animation-duration: 25s; animation-delay: 9.6s; --drift: 29px; } .gp:nth-child(59) { left: 57.8%; width: 2.2px; height: 2.2px; animation-duration: 11s; animation-delay: 10.4s; --drift: -36px; } .gp:nth-child(60) { left: 58.7%; width: 3.5px; height: 3.5px; animation-duration: 12s; animation-delay: 11.2s; --drift: 43px; box-shadow: 0 0 6px rgba(255,215,0,0.6); } .gp:nth-child(61) { left: 59.7%; width: 2px; height: 2px; animation-duration: 13s; animation-delay: 12s; --drift: -50px; } .gp:nth-child(62) { left: 60.7%; width: 2.5px; height: 2.5px; animation-duration: 14s; animation-delay: 12.8s; --drift: 57px; } .gp:nth-child(63) { left: 61.6%; width: 6px; height: 6px; animation-duration: 21s; animation-delay: 13.6s; --drift: -15px; box-shadow: 0 0 12px rgba(255,215,0,0.85), 0 0 20px rgba(255,215,0,0.4); background: rgba(255, 215, 0, 0.9); } .gp:nth-child(64) { left: 62.6%; width: 2.5px; height: 2.5px; animation-duration: 16s; animation-delay: 14.4s; --drift: 22px; } .gp:nth-child(65) { left: 63.6%; width: 2.2px; height: 2.2px; animation-duration: 9s; animation-delay: 15.2s; --drift: -29px; } .gp:nth-child(66) { left: 64.5%; width: 3.5px; height: 3.5px; animation-duration: 18s; animation-delay: 16s; --drift: 36px; box-shadow: 0 0 6px rgba(255,215,0,0.6); } .gp:nth-child(67) { left: 65.5%; width: 2px; height: 2px; animation-duration: 11s; animation-delay: 16.8s; --drift: -43px; } .gp:nth-child(68) { left: 66.5%; width: 2.5px; height: 2.5px; animation-duration: 20s; animation-delay: 17.6s; --drift: 50px; } .gp:nth-child(69) { left: 67.5%; width: 4.2px; height: 4.2px; animation-duration: 21s; animation-delay: 0s; --drift: -57px; box-shadow: 0 0 6px rgba(255,215,0,0.6); } .gp:nth-child(70) { left: 68.4%; width: 7px; height: 7px; animation-duration: 18s; animation-delay: 0.8s; --drift: 15px; box-shadow: 0 0 12px rgba(255,215,0,0.85), 0 0 20px rgba(255,215,0,0.4); background: rgba(255, 215, 0, 0.9); } .gp:nth-child(71) { left: 69.4%; width: 2.2px; height: 2.2px; animation-duration: 15s; animation-delay: 1.6s; --drift: -22px; } .gp:nth-child(72) { left: 70.4%; width: 3.5px; height: 3.5px; animation-duration: 24s; animation-delay: 2.4s; --drift: 29px; box-shadow: 0 0 6px rgba(255,215,0,0.6); } .gp:nth-child(73) { left: 71.3%; width: 2px; height: 2px; animation-duration: 9s; animation-delay: 3.2s; --drift: -36px; } .gp:nth-child(74) { left: 72.3%; width: 2.5px; height: 2.5px; animation-duration: 26s; animation-delay: 4s; --drift: 43px; } .gp:nth-child(75) { left: 73.3%; width: 4.2px; height: 4.2px; animation-duration: 12s; animation-delay: 4.8s; --drift: -50px; box-shadow: 0 0 6px rgba(255,215,0,0.6); } .gp:nth-child(76) { left: 74.3%; width: 2.5px; height: 2.5px; animation-duration: 13s; animation-delay: 5.6s; --drift: 57px; } .gp:nth-child(77) { left: 75.2%; width: 8px; height: 8px; animation-duration: 25s; animation-delay: 6.4s; --drift: -15px; box-shadow: 0 0 12px rgba(255,215,0,0.85), 0 0 20px rgba(255,215,0,0.4); background: rgba(255, 215, 0, 0.9); } .gp:nth-child(78) { left: 76.2%; width: 3.5px; height: 3.5px; animation-duration: 15s; animation-delay: 7.2s; --drift: 22px; box-shadow: 0 0 6px rgba(255,215,0,0.6); } .gp:nth-child(79) { left: 77.2%; width: 2px; height: 2px; animation-duration: 15s; animation-delay: 8s; --drift: -29px; } .gp:nth-child(80) { left: 78.1%; width: 2.5px; height: 2.5px; animation-duration: 17s; animation-delay: 8.8s; --drift: 36px; } .gp:nth-child(81) { left: 79.1%; width: 4.2px; height: 4.2px; animation-duration: 18s; animation-delay: 9.6s; --drift: -43px; box-shadow: 0 0 6px rgba(255,215,0,0.6); } .gp:nth-child(82) { left: 80.1%; width: 2.5px; height: 2.5px; animation-duration: 19s; animation-delay: 10.4s; --drift: 50px; } .gp:nth-child(83) { left: 81%; width: 2.2px; height: 2.2px; animation-duration: 11s; animation-delay: 11.2s; --drift: -57px; } .gp:nth-child(84) { left: 82%; width: 6px; height: 6px; animation-duration: 22s; animation-delay: 12s; --drift: 15px; box-shadow: 0 0 12px rgba(255,215,0,0.85), 0 0 20px rgba(255,215,0,0.4); background: rgba(255, 215, 0, 0.9); } .gp:nth-child(85) { left: 83%; width: 2px; height: 2px; animation-duration: 13s; animation-delay: 12.8s; --drift: -22px; } .gp:nth-child(86) { left: 84%; width: 2.5px; height: 2.5px; animation-duration: 23s; animation-delay: 13.6s; --drift: 29px; } .gp:nth-child(87) { left: 84.9%; width: 4.2px; height: 4.2px; animation-duration: 24s; animation-delay: 14.4s; --drift: -36px; box-shadow: 0 0 6px rgba(255,215,0,0.6); } .gp:nth-child(88) { left: 85.9%; width: 2.5px; height: 2.5px; animation-duration: 25s; animation-delay: 15.2s; --drift: 43px; } .gp:nth-child(89) { left: 86.9%; width: 2.2px; height: 2.2px; animation-duration: 9s; animation-delay: 16s; --drift: -50px; } .gp:nth-child(90) { left: 87.8%; width: 3.5px; height: 3.5px; animation-duration: 12s; animation-delay: 16.8s; --drift: 57px; box-shadow: 0 0 6px rgba(255,215,0,0.6); } .gp:nth-child(91) { left: 88.8%; width: 7px; height: 7px; animation-duration: 19s; animation-delay: 17.6s; --drift: -15px; box-shadow: 0 0 12px rgba(255,215,0,0.85), 0 0 20px rgba(255,215,0,0.4); background: rgba(255, 215, 0, 0.9); } .gp:nth-child(92) { left: 89.8%; width: 2.5px; height: 2.5px; animation-duration: 14s; animation-delay: 0s; --drift: 22px; } .gp:nth-child(93) { left: 90.7%; width: 4.2px; height: 4.2px; animation-duration: 15s; animation-delay: 0.8s; --drift: -29px; box-shadow: 0 0 6px rgba(255,215,0,0.6); } .gp:nth-child(94) { left: 91.7%; width: 2.5px; height: 2.5px; animation-duration: 16s; animation-delay: 1.6s; --drift: 36px; } .gp:nth-child(95) { left: 92.7%; width: 2.2px; height: 2.2px; animation-duration: 15s; animation-delay: 2.4s; --drift: -43px; } .gp:nth-child(96) { left: 93.6%; width: 3.5px; height: 3.5px; animation-duration: 18s; animation-delay: 3.2s; --drift: 50px; box-shadow: 0 0 6px rgba(255,215,0,0.6); } .gp:nth-child(97) { left: 94.6%; width: 2px; height: 2px; animation-duration: 9s; animation-delay: 4s; --drift: -57px; } .gp:nth-child(98) { left: 95.6%; width: 8px; height: 8px; animation-duration: 26s; animation-delay: 4.8s; --drift: 15px; box-shadow: 0 0 12px rgba(255,215,0,0.85), 0 0 20px rgba(255,215,0,0.4); background: rgba(255, 215, 0, 0.9); } .gp:nth-child(99) { left: 96.6%; width: 4.2px; height: 4.2px; animation-duration: 21s; animation-delay: 5.6s; --drift: -22px; box-shadow: 0 0 6px rgba(255,215,0,0.6); } .gp:nth-child(100) { left: 97.5%; width: 2.5px; height: 2.5px; animation-duration: 22s; animation-delay: 6.4s; --drift: 29px; } /* ── LINHA DOURADA SUPERIOR (accent de luxo) ── */ body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(255,215,0,0.0) 10%, rgba(255,215,0,0.8) 30%, #FFD700 50%, rgba(255,215,0,0.8) 70%, rgba(255,215,0,0.0) 90%, transparent 100% ); z-index: 99999; pointer-events: none; animation: gold-line-pulse 4s ease-in-out infinite; } @keyframes gold-line-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* ── CARDS: preto quente com bordas douradas vivas ── */ .product-card { background: linear-gradient(160deg, var(--noir-4) 0%, var(--noir-3) 60%, var(--noir-2) 100%) !important; border: 1px solid rgba(255,215,0,0.13) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,215,0,0.04) !important; } .product-card:hover { background: linear-gradient(160deg, var(--noir-3) 0%, var(--noir-2) 60%, var(--noir) 100%) !important; border-color: rgba(255,215,0,0.5) !important; box-shadow: 0 24px 60px rgba(0,0,0,0.9), 0 0 40px rgba(255,215,0,0.18), inset 0 1px 0 rgba(255,215,0,0.15) !important; } /* Fio dourado na borda superior ao hover */ .product-card::after { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,215,0,0.6), transparent); opacity: 0; transition: opacity 0.4s ease; z-index: 4; } .product-card:hover::after { opacity: 1; } /* ── HEADER: noir com brilho sutil ── */ .header { background: rgba(0,0,0,0.8) !important; border-bottom: 1px solid rgba(255,215,0,0.1) !important; box-shadow: 0 4px 30px rgba(0,0,0,0.5) !important; } .header.scrolled { background: rgba(0,0,0,0.98) !important; border-bottom-color: rgba(255,215,0,0.18) !important; box-shadow: 0 4px 40px rgba(0,0,0,0.8), 0 1px 0 rgba(255,215,0,0.12) !important; } /* ── HERO: atmosphere dourada mais intensa ── */ .hero { background-color: transparent !important; background-image: radial-gradient(ellipse 120% 80% at 50% 0%, rgba(255,215,0,0.12) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 10% 60%, rgba(180,120,0,0.05) 0%, transparent 55%), radial-gradient(ellipse 55% 45% at 90% 70%, rgba(180,120,0,0.04) 0%, transparent 55%) !important; } /* ── DIVIDERS: mais ricos ── */ .section-divider { background: linear-gradient(90deg, transparent 0%, rgba(255,215,0,0.05) 10%, rgba(255,215,0,0.25) 25%, rgba(255,215,0,0.8) 50%, rgba(255,215,0,0.25) 75%, rgba(255,215,0,0.05) 90%, transparent 100%) !important; box-shadow: 0 0 30px rgba(255,215,0,0.25), 0 0 80px rgba(255,215,0,0.07) !important; } /* ── SIDEBAR FILTROS ── */ .filters-sidebar { background: linear-gradient(170deg, var(--noir-4) 0%, var(--noir-3) 100%) !important; border: 1px solid rgba(255,215,0,0.09) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important; } /* ── FEATURE / STAT BOXES ── */ .feature-box, .stat { background: linear-gradient(145deg, var(--noir-4) 0%, var(--noir-3) 100%) !important; border: 1px solid rgba(255,215,0,0.1) !important; } .feature-box:hover, .stat:hover { border-color: rgba(255,215,0,0.35) !important; box-shadow: 0 12px 35px rgba(0,0,0,0.6), 0 0 25px rgba(255,215,0,0.08) !important; } /* ── FLAGSHIP CARD ── */ .flagship-card { background: linear-gradient(135deg, var(--noir-4) 0%, var(--noir-3) 100%) !important; border: 1px solid rgba(255,215,0,0.12) !important; } /* ── TRUST BAR ── */ .trust-bar { background: rgba(255,215,0,0.025) !important; border-top: 1px solid rgba(255,215,0,0.08) !important; border-bottom: 1px solid rgba(255,215,0,0.08) !important; } .trust-bar::before { background: linear-gradient(90deg, var(--noir), transparent) !important; } .trust-bar::after { background: linear-gradient(-90deg, var(--noir), transparent) !important; } /* ── CART / MODAIS ── */ .cart-sidebar { background: linear-gradient(180deg, var(--noir-4) 0%, var(--noir-2) 100%) !important; border-left: 1px solid rgba(255,215,0,0.1) !important; } .modal-content { background: linear-gradient(160deg, var(--noir-4) 0%, var(--noir-2) 100%) !important; border: 1px solid rgba(255,215,0,0.15) !important; box-shadow: 0 30px 100px rgba(0,0,0,0.9), 0 0 50px rgba(255,215,0,0.06) !important; } .cart-item { background: var(--noir-4) !important; border: 1px solid rgba(255,215,0,0.08) !important; } /* ── REVIEWS DASHBOARD ── */ .reviews-summary-dashboard { background: linear-gradient(145deg, rgba(10,10,10,0.9) 0%, rgba(5,5,5,0.9) 100%) !important; border: 1px solid rgba(255,215,0,0.12) !important; } .testimonial-card { background: linear-gradient(150deg, var(--noir-4) 0%, var(--noir-3) 100%) !important; border: 1px solid rgba(255,215,0,0.08) !important; } .testimonial-card:hover { border-color: rgba(255,215,0,0.3) !important; box-shadow: 0 20px 50px rgba(0,0,0,0.7), 0 0 25px rgba(255,215,0,0.07) !important; } /* ── CONTATO ── */ .contact-sidebar-card, .contact-form-card { background: rgba(10,10,10,0.9) !important; border: 1px solid rgba(255,215,0,0.1) !important; } /* ── CHECKOUT ── */ .checkout-header { background: var(--noir-3) !important; } .checkout-summary-section { background: var(--noir-3) !important; border: 1px solid rgba(255,215,0,0.1) !important; } .checkout-step input { background: var(--noir-4) !important; border: 1px solid rgba(255,215,0,0.1) !important; } .checkout-step input:focus { border-color: rgba(255,215,0,0.55) !important; box-shadow: 0 0 0 3px rgba(255,215,0,0.08) !important; } /* ── PAYMENT SECTION ── */ .premium-payment-section { background: linear-gradient(135deg, rgba(10,10,10,0.95) 0%, rgba(5,5,5,0.95) 100%) !important; border: 1px solid rgba(255,215,0,0.1) !important; } /* ── FOOTER ── */ .site-footer { background: linear-gradient(180deg, var(--noir-2) 0%, #000000 100%) !important; border-top: 1px solid rgba(255,215,0,0.1) !important; } .footer-bottom-bar { background: #000000 !important; } /* ── DRAWER MOBILE ── */ .mobile-drawer { background: linear-gradient(170deg, var(--noir-3) 0%, var(--noir-2) 100%) !important; border-right: 1px solid rgba(255,215,0,0.08) !important; } .drawer-header { background: var(--noir-2) !important; } /* ── LOADER ── */ #premium-loader { background: var(--noir) !important; } .loader-bg { background: radial-gradient(ellipse at 50% 50%, rgba(255,215,0,0.08) 0%, var(--noir) 75%) !important; } /* ── SEARCH ── */ .search-box { background: rgba(10,10,10,0.9) !important; border: 1px solid rgba(255,215,0,0.09) !important; } .search-box:focus-within { border-color: rgba(255,215,0,0.5) !important; box-shadow: 0 0 0 3px rgba(255,215,0,0.08), 0 0 20px rgba(255,215,0,0.08) !important; } /* ── ANIMAÇÃO: brilho pulsante nos títulos de seção ── */ .section-title { animation: title-glow 5s ease-in-out infinite !important; } @keyframes title-glow { 0%, 100% { filter: drop-shadow(0 0 14px rgba(255,215,0,0.18)); } 50% { filter: drop-shadow(0 0 28px rgba(255,215,0,0.38)); } } /* ── ANIMAÇÃO: partícula de luz nos botões ao hover ── */ .btn-comprar, .btn { overflow: hidden; } .btn-comprar::after, .btn::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.25), transparent 70%); opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 2; } .btn-comprar:hover::after, .btn:hover::after { opacity: 1; } /* ── ORBS: upgrade de profundidade ── */ .hero-orb-1 { background: radial-gradient(circle, rgba(255,215,0,0.09) 0%, transparent 65%) !important; animation: orb-drift-1 16s ease-in-out infinite !important; } .hero-orb-2 { background: radial-gradient(circle, rgba(200,140,0,0.065) 0%, transparent 65%) !important; animation: orb-drift-2 20s ease-in-out infinite !important; } .hero-orb-3 { background: radial-gradient(circle, rgba(255,165,0,0.06) 0%, transparent 65%) !important; animation: orb-drift-3 12s ease-in-out infinite !important; } @keyframes orb-drift-1 { 0%, 100% { transform: translate(0,0) scale(1); } 33% { transform: translate(35px,-28px) scale(1.08); } 66% { transform: translate(-22px,20px) scale(0.94); } } @keyframes orb-drift-2 { 0%, 100% { transform: translate(0,0) scale(1); } 40% { transform: translate(-30px,25px) scale(1.1); } 75% { transform: translate(18px,-15px) scale(0.97); } } @keyframes orb-drift-3 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(20px,-35px) scale(1.05); } } /* ── BADGE DE PRODUTOS: brilho extra ── */ .badge-lancamento { box-shadow: 0 2px 14px rgba(0,85,255,0.5) !important; animation: badge-glow-blue 3s ease-in-out infinite; } .badge-oferta { box-shadow: 0 2px 14px rgba(230,0,0,0.5) !important; animation: badge-glow-red 3s ease-in-out infinite; } .badge-mais-vendido { box-shadow: 0 2px 14px rgba(255,215,0,0.5) !important; animation: badge-glow-gold 3s ease-in-out infinite; } @keyframes badge-glow-blue { 0%, 100% { box-shadow: 0 2px 10px rgba(0,85,255,0.4); } 50% { box-shadow: 0 2px 20px rgba(0,85,255,0.7); } } @keyframes badge-glow-red { 0%, 100% { box-shadow: 0 2px 10px rgba(230,0,0,0.4); } 50% { box-shadow: 0 2px 20px rgba(230,0,0,0.7); } } @keyframes badge-glow-gold { 0%, 100% { box-shadow: 0 2px 10px rgba(255,215,0,0.4); } 50% { box-shadow: 0 2px 20px rgba(255,215,0,0.8); } } /* ── SCROLL PROGRESS: dourado ── */ #scroll-progress { background: linear-gradient(90deg, #8B6914, #FFD700, #FFF8DC, #FFD700, #8B6914) !important; box-shadow: 0 0 12px rgba(255,215,0,0.7), 0 0 30px rgba(255,215,0,0.3) !important; } /* ── BACK TO TOP ── */ #back-to-top { background: rgba(255,215,0,0.08) !important; border: 1px solid rgba(255,215,0,0.2) !important; } #back-to-top:hover { background: var(--gold-primary) !important; color: #000 !important; box-shadow: 0 4px 20px rgba(255,215,0,0.4) !important; } /* ── INPUTS GERAIS ── */ input, textarea, select { caret-color: var(--gold-primary); } /* ── FILTRO DE LISTA ── */ .filter-list li { background: rgba(10,10,10,0.85) !important; border: 1px solid rgba(255,215,0,0.12) !important; } .filter-list li:hover { background: rgba(255,215,0,0.08) !important; border-color: rgba(255,215,0,0.4) !important; } /* ── MOBILE ── */ @media (max-width: 768px) { /* Distribui as partículas por toda a largura da tela no mobile. Ocultamos as pares (even) para reduzir a densidade e otimizar o desempenho, mantendo 50 partículas elegantes espalhadas uniformemente por toda a resolução. */ .gp:nth-child(even) { display: none; } .hero-orb-3 { display: none !important; } }