/* ===== GOOGLE FONT ===== */ @import url('https://fonts.googleapis.com/css2?family=Arizonia&display=swap'); /* ===== BASE ===== */ .home-wrapper { color: #cbd5f5; font-family: Arial, sans-serif; } /* ===== HERO ===== */ .home-wrapper .hero-gaming { display: flex; align-items: center; justify-content: space-between; padding: 60px 40px; background: radial-gradient(circle at 30% 30%, rgba(255,0,0,0.1), transparent 40%), linear-gradient(135deg, #020617, #0a0f1f); gap: 20px; flex-wrap: wrap; } .home-wrapper .hero-left { max-width: 500px; } .home-wrapper .hero-title { font-family: 'Arizonia', cursive; font-size: 64px; color: #fff; margin: 10px 0; padding: 10px 0; text-shadow: 0 0 10px rgba(255, 0, 0, 0.7), 0 0 30px rgba(0, 240, 255, 0.3), 0 0 60px rgba(255, 0, 0, 0.2); line-height: 1.2; } .home-wrapper .hero-sub { margin: 10px 0; padding: 10px 0; font-size: 18px; color: #cbd5f5; } .home-wrapper .hero-btn { display: inline-block; margin: 10px 0; padding: 12px 24px; background: #ff2e2e; color: #fff; border-radius: 6px; text-decoration: none; transition: 0.3s; } .home-wrapper .hero-btn:hover { background: #ff0000; box-shadow: 0 0 20px rgba(255, 0, 0, 0.6), 0 0 40px rgba(255, 0, 0, 0.3); color: #fff; text-decoration: none; } /* ===== HERO IMAGE NEON — JOURNAL-3 FIX ===== */ .home-wrapper .hero-right img { max-width: 320px !important; width: 100% !important; display: block !important; -webkit-filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.9)) drop-shadow(0 0 20px rgba(255, 0, 0, 0.6)) drop-shadow(0 0 40px rgba(0, 240, 255, 0.5)) !important; filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.9)) drop-shadow(0 0 20px rgba(255, 0, 0, 0.6)) drop-shadow(0 0 40px rgba(0, 240, 255, 0.5)) !important; animation: heroNeon 3s ease-in-out infinite !important; } @-webkit-keyframes heroNeon { 0%, 100% { -webkit-filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.9)) drop-shadow(0 0 20px rgba(255, 0, 0, 0.6)) drop-shadow(0 0 40px rgba(0, 240, 255, 0.4)); } 50% { -webkit-filter: drop-shadow(0 0 15px rgba(255, 0, 0, 1)) drop-shadow(0 0 35px rgba(255, 0, 0, 0.8)) drop-shadow(0 0 70px rgba(0, 240, 255, 0.7)); } } @keyframes heroNeon { 0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.9)) drop-shadow(0 0 20px rgba(255, 0, 0, 0.6)) drop-shadow(0 0 40px rgba(0, 240, 255, 0.4)); } 50% { filter: drop-shadow(0 0 15px rgba(255, 0, 0, 1)) drop-shadow(0 0 35px rgba(255, 0, 0, 0.8)) drop-shadow(0 0 70px rgba(0, 240, 255, 0.7)); } } /* ===== HERO IMAGE WRAPPER — EXTRA GLOW LAYER ===== */ .home-wrapper .hero-right { position: relative; display: inline-block; } .home-wrapper .hero-right::after { content: ""; position: absolute; inset: 0; border-radius: 12px; box-shadow: 0 0 30px rgba(255, 0, 0, 0.4), 0 0 60px rgba(0, 240, 255, 0.2); pointer-events: none; animation: wrapperGlow 3s ease-in-out infinite; } @keyframes wrapperGlow { 0%, 100% { box-shadow: 0 0 30px rgba(255, 0, 0, 0.4), 0 0 60px rgba(0, 240, 255, 0.2); } 50% { box-shadow: 0 0 50px rgba(255, 0, 0, 0.7), 0 0 90px rgba(0, 240, 255, 0.4); } } /* ===== PRODUCT SECTION ===== */ .home-wrapper .product-section { padding: 40px; } .home-wrapper .section-title { font-size: 28px; margin: 0 0 20px 0; padding: 10px 0; color: #fff; } .home-wrapper .product-grid { display: flex; gap: 20px; flex-wrap: wrap; } /* ===== PRODUCT CARD ===== */ .home-wrapper .product-card { width: 220px; padding: 15px; border-radius: 12px; background: linear-gradient( 145deg, rgba(15, 23, 42, 0.85), rgba(2, 6, 23, 0.9) ); border: 1px solid rgba(255, 255, 255, 0.05); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.03); backdrop-filter: blur(6px); transition: all 0.35s ease; position: relative; overflow: hidden; } .home-wrapper .product-card:hover { transform: translateY(-10px) scale(1.03); box-shadow: 0 0 25px rgba(0, 240, 255, 0.5), 0 0 50px rgba(0, 240, 255, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.05); } /* ===== PRODUCT CARD IMAGE — NEON GLOW ===== */ .home-wrapper .product-card img { width: 100%; display: block; border-radius: 6px; filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.5)) drop-shadow(0 0 15px rgba(255, 0, 0, 0.3)); transition: filter 0.35s ease; } .home-wrapper .product-card:hover img { filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.9)) drop-shadow(0 0 25px rgba(255, 0, 0, 0.5)); } /* ===== CARD SHINE EFFECT ===== */ .home-wrapper .product-card::before { content: ""; position: absolute; inset: -1px; background: linear-gradient( 120deg, transparent, rgba(255, 0, 0, 0.4), rgba(0, 240, 255, 0.4), transparent ); opacity: 0; transition: opacity 0.4s ease; filter: blur(12px); z-index: 0; pointer-events: none; } .home-wrapper .product-card:hover::before { opacity: 1; } /* ===== CARD TEXT ===== */ .home-wrapper .p-title { margin: 10px 0; padding: 10px 0 0 0; color: #cbd5f5; font-size: 14px; position: relative; z-index: 1; } .home-wrapper .p-price { margin: 10px 0 0 0; padding: 0; color: #ff2e2e; font-weight: bold; font-size: 15px; position: relative; z-index: 1; } /* ===== PROMO BANNER ===== */ .home-wrapper .promo-banner { margin: 40px; padding: 40px; text-align: center; background: linear-gradient(120deg, #000000, #0a0f1f); border-radius: 12px; box-shadow: 0 0 30px rgba(255, 0, 0, 0.2); } .home-wrapper .banner-content h2 { color: #fff; margin: 10px 0; padding: 10px 0; } .home-wrapper .banner-content p { margin: 10px 0; padding: 0; color: #cbd5f5; } /* ===== RESPONSIVE ===== */ @media (max-width: 768px) { .home-wrapper .hero-gaming { flex-direction: column; padding: 40px 20px; text-align: center; } .home-wrapper .hero-title { font-size: 38px; } .home-wrapper .hero-right img { max-width: 260px; } .home-wrapper .product-grid { justify-content: center; } .home-wrapper .promo-banner { margin: 20px; padding: 20px; } }