/* ===== FONTE ===== */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800;900&display=swap'); /* ===== VARIÁVEIS ===== */ :root { --haze-bg: #050507; --haze-purple: #b832ff; --haze-pink: #ff2bd6; --haze-border: rgba(255,255,255,.14); } /* ===== BASE ===== */ body { background: var(--haze-bg) !important; color: #fff !important; font-family: 'Poppins', sans-serif !important; font-weight: 700 !important; overflow-x: hidden; } /* ===== FUNDO ===== */ body::before { content: ""; position: fixed; inset: 0; background: linear-gradient(rgba(0,0,0,.75), rgba(0,0,0,.95)), radial-gradient(circle at 20% 10%, rgba(184,50,255,.35), transparent 28%), radial-gradient(circle at 80% 20%, rgba(255,43,214,.22), transparent 25%), url("https://images.unsplash.com/photo-1635776063043-ab23b4c226f6?auto=format&fit=crop&w=1600&q=80"); background-size: cover; background-position: center; filter: blur(2px); z-index: -5; pointer-events: none; } body::after { content: ""; position: fixed; inset: 0; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); background: rgba(0,0,0,.42); z-index: -4; pointer-events: none; } /* ===== TOPBAR ===== */ .haze-topbar { width: 100%; padding: 10px; background: rgba(0,0,0,.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--haze-border); display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; font-weight: 800; letter-spacing: .3px; position: relative; z-index: 50; } /* ===== HERO ===== */ .haze-hero { text-align: center; padding: 80px 20px 35px; position: relative; z-index: 20; } .haze-logo-title { font-size: 44px; font-weight: 900 !important; letter-spacing: -1px; margin: 0; text-shadow: 0 0 25px rgba(184,50,255,.65); } .haze-verified { width: 24px; height: 24px; margin-left: 6px; vertical-align: middle; transform: translateY(-2px); filter: drop-shadow(0 0 10px rgba(29,161,242,.95)); } h1, h2, h3 { font-weight: 900 !important; } p, span, a { font-weight: 600 !important; letter-spacing: .2px; } /* ===== BOTÕES ===== */ .haze-buttons { margin-top: 30px; } .haze-btn { padding: 16px 28px; border-radius: 10px; border: 1px solid var(--haze-border); margin: 5px; display: inline-block; text-decoration: none !important; font-weight: 800 !important; letter-spacing: .3px; transition: .25s ease; } .haze-btn-main { background: white; color: black !important; } .haze-btn-discord { background: rgba(255,255,255,.1); color: white !important; } .haze-btn:hover { transform: translateY(-4px); box-shadow: 0 0 25px rgba(184,50,255,.4); } /* ===== BADGE ===== */ .haze-floating-badge { margin-top: 20px; display: inline-block; padding: 10px 18px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(12px); font-weight: 700; } /* ===== BANNER AUTOMÁTICO ===== */ .haze-banner-slider { width: min(92%, 760px); margin: 25px auto 45px; position: relative; overflow: hidden; border-radius: 18px; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 0 35px rgba(184,50,255,.25); z-index: 9999; } .haze-banner-track { display: flex; transition: transform .7s ease; } .haze-banner-slide { min-width: 100%; height: 230px; background-size: cover; background-position: center; position: relative; } .haze-banner-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.75), rgba(0,0,0,.18)); } .haze-banner-content { position: absolute; z-index: 2; left: 22px; bottom: 25px; color: white; } .haze-banner-content h2 { font-size: 26px; font-weight: 900 !important; margin: 0 0 8px; } .haze-banner-content p { margin: 0; font-size: 14px; color: #ddd; } .haze-banner-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; z-index: 3; } .haze-banner-dots span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.35); } .haze-banner-dots span.active { background: white; box-shadow: 0 0 12px rgba(184,50,255,.9); } /* ===== CARDS GLASS ===== */ [class*="card"], [class*="Card"], [class*="product"], [class*="Product"], [class*="produto"], [class*="Produto"] { background: rgba(255,255,255,0.07) !important; backdrop-filter: blur(18px) saturate(150%) !important; -webkit-backdrop-filter: blur(18px) saturate(150%) !important; border-radius: 18px !important; border: 1px solid rgba(255,255,255,.15) !important; transition: .3s; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.35); } [class*="card"]:hover, [class*="Card"]:hover, [class*="product"]:hover, [class*="Product"]:hover, [class*="produto"]:hover, [class*="Produto"]:hover { transform: translateY(-6px); } [class*="card"]::before, [class*="card"]::after, [class*="Card"]::before, [class*="Card"]::after, [class*="product"]::before, [class*="product"]::after, [class*="Product"]::before, [class*="Product"]::after, [class*="produto"]::before, [class*="produto"]::after, [class*="Produto"]::before, [class*="Produto"]::after { display: none !important; content: none !important; pointer-events: none !important; } /* ===== PARTÍCULAS ===== */ .haze-particles { position: fixed; inset: 0; pointer-events: none; z-index: -1; } .haze-particles span { position: absolute; color: var(--haze-purple); animation: float 6s linear infinite; opacity: .8; } @keyframes float { from { transform: translateY(100vh); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(-10vh); opacity: 0; } } /* ===== RESPONSIVO ===== */ @media (max-width: 600px) { .haze-logo-title { font-size: 36px; } p { font-size: 15px; } .haze-btn { width: 100%; max-width: 280px; } .haze-topbar { gap: 10px; font-size: 13px; } .haze-banner-slide { height: 210px; } .haze-banner-content h2 { font-size: 23px; } .haze-banner-content { left: 18px; bottom: 25px; } }