neongrid-vr / style.css
flitrx's picture
Design a futuristic indie game database website using Tailwind CSS with AR/VR experiences. Provide detailed specifications for user experience, technical architecture, and monetization strategy.
d0f5436 verified
/* GLOBAL */
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background: #111827; }
/* VANTA BACKGROUND */
#vanta-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
/* CARD HOVER */
.card-3d {
transition: transform 0.3s ease, box-shadow 0.3s ease;
transform-style: preserve-3d;
}
.card-3d:hover {
transform: rotateY(4deg) scale(1.03);
box-shadow: 0 25px 50px -12px rgba(249, 115, 22, 0.4);
}
/* CUSTOM SCROLLBAR */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #1f2937; }
::-webkit-scrollbar-thumb { background: #f97316; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #ea580c; }
/* GLOW BUTTON */
.glow {
position: relative;
overflow: hidden;
}
.glow::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
transition: left 0.6s;
}
.glow:hover::before { left: 100%; }