/* PRODUCTS WITH HERO DESIGN STYLE */ /* Aplicando o mesmo design glassmórfico do hero banner nos produtos */ /* Variáveis do projeto para produtos */ :root { --product-brand: #00008B; /* azul correto do projeto */ --product-brand-2: #0000CD; /* azul secundário */ --product-ink: #0b1220; /* azul profundo */ --product-paper: #f8fafc; /* quase branco */ --product-glass: rgba(255,255,255,.15); --product-shadow: 0 8px 25px rgba(0,0,0,.2); --product-radius: 16px; --product-ease: cubic-bezier(.22,1,.36,1); } /* DESKTOP - Cards com design hero */ @media screen and (min-width: 769px) { article[data-product-id] { background: linear-gradient(145deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.12) 100%) !important; border: 1px solid rgba(255,255,255,.2) !important; backdrop-filter: blur(12px) saturate(130%) !important; border-radius: var(--product-radius) !important; box-shadow: var(--product-shadow) !important; position: relative !important; overflow: hidden !important; transition: all 0.4s var(--product-ease) !important; } /* Efeito aurora nos cards */ article[data-product-id]::before { content: ""; position: absolute; inset: -20%; z-index: -1; background: radial-gradient(300px 200px at 20% 80%, rgba(0,0,139,.08), transparent 60%), radial-gradient(250px 150px at 80% 20%, rgba(0,0,205,.06), transparent 60%); filter: blur(20px); animation: product-aurora 8s ease-in-out infinite alternate; } /* Hover effect com glow */ article[data-product-id]:hover { transform: translateY(-6px) !important; box-shadow: 0 12px 35px rgba(0,0,0,.25), 0 0 20px rgba(0,0,139,.15) !important; border-color: rgba(0,0,139,.3) !important; } /* Container da imagem com glassmorphism */ article[data-product-id] .product-image-container, article[data-product-id] > div:first-child { background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.05) 100%) !important; border: 1px solid rgba(255,255,255,.15) !important; backdrop-filter: blur(8px) !important; border-radius: 12px !important; } /* Texto do produto com estilo hero */ article[data-product-id] h3, article[data-product-id] .product-title { color: var(--product-ink) !important; text-shadow: 0 1px 2px rgba(255,255,255,.5) !important; font-weight: 700 !important; } /* Preço com gradiente */ article[data-product-id] .product-price, article[data-product-id] .price, article[data-product-id] .current { background: linear-gradient(135deg, var(--product-brand), var(--product-brand-2)) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; font-weight: 800 !important; text-shadow: none !important; } /* Botão com estilo hero */ article[data-product-id] button[data-action="add"] { background: linear-gradient(135deg, var(--product-brand) 0%, var(--product-brand-2) 100%) !important; border: 1px solid rgba(255,255,255,.3) !important; backdrop-filter: blur(8px) !important; border-radius: 12px !important; box-shadow: 0 4px 15px rgba(0,0,139,.3) !important; color: white !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.3px !important; font-size: 10px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; transition: all 0.3s var(--product-ease) !important; } article[data-product-id] button[data-action="add"]:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 25px rgba(0,0,139,.4), 0 0 15px rgba(0,0,205,.3) !important; } /* Status "No Carrinho" com glassmorphism */ article[data-product-id] > div:last-child > div[style*="f0f8ff"] { background: linear-gradient(135deg, rgba(0,0,139,.15) 0%, rgba(0,0,205,.1) 100%) !important; border: 1px solid rgba(0,0,139,.25) !important; backdrop-filter: blur(6px) !important; color: var(--product-ink) !important; text-shadow: 0 1px 2px rgba(255,255,255,.8) !important; } } /* MOBILE - Versão adaptada */ @media screen and (max-width: 768px) { article[data-product-id] { background: linear-gradient(145deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.08) 100%) !important; border: 1px solid rgba(255,255,255,.2) !important; backdrop-filter: blur(8px) saturate(120%) !important; border-radius: 12px !important; box-shadow: 0 4px 15px rgba(0,0,0,.15) !important; } /* Preço mobile com gradiente */ article[data-product-id] .product-price, article[data-product-id] .price { background: linear-gradient(135deg, var(--product-brand), var(--product-brand-2)) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; font-weight: 800 !important; } /* Botão mobile */ article[data-product-id] button[data-action="add"] { background: linear-gradient(135deg, var(--product-brand), var(--product-brand-2)) !important; border: 1px solid rgba(255,255,255,.2) !important; backdrop-filter: blur(6px) !important; color: white !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.2px !important; font-size: 8px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } } /* Animação aurora para produtos */ @keyframes product-aurora { 0% { transform: rotate(0deg) scale(1); opacity: 0.3; } 50% { transform: rotate(180deg) scale(1.1); opacity: 0.5; } 100% { transform: rotate(360deg) scale(1); opacity: 0.3; } } /* Efeito de entrada dos produtos */ article[data-product-id] { animation: product-entrance 0.6s var(--product-ease) forwards; } @keyframes product-entrance { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }