body {
font-family: 'Inter', sans-serif;
margin: 0;
padding: 0;
}
.glass-effect {
background: rgba(31, 41, 55, 0.4);
backdrop-filter: blur(10px);
border: 1px solid rgba(75, 85, 99, 0.3);
}
.hero-gradient {
background: linear-gradient(135deg, #1f2937 0%, #111827 50%, #0f172a 100%);
}
.card-hover {
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.card-hover:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.floating-animation {
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
.pulse-ring {
content: '';
position: relative;
display: block;
width: 300%;
height: 300%;
position: absolute;
top: -100%;
left: -100%;
background: transparent;
border: 3px solid #667eea;
border-radius: 50%;
animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
@keyframes pulse-ring {
0% { transform: scale(0.33); }
80%, 100% { opacity: 0; }
}
.nav-link.active {
color: #60a5fa !important;
background: rgba(59, 130, 246, 0.1);
border-radius: 0.5rem;
padding: 0.5rem 1rem;
}
.nav-link {
border-radius: 0.5rem;
padding: 0.5rem 1rem;
transition: all 0.2s ease-in-out;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
20%, 40%, 60%, 80% { transform: translateX(10px); }
}
.animate-shake {
animation: shake 0.6s;
}
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}