/* Smooth scroll */ html { scroll-behavior: smooth; } /* Navbar shrink */ .navbar.scrolled { padding: 0.5rem 0; transition: 0.3s ease; } /* Hamburger */ .hamburger { display: none; flex-direction: column; cursor: pointer; gap: 5px; } .hamburger span { width: 25px; height: 3px; background: white; transition: 0.3s; } /* Mobile menu */ #nav-menu.active { display: block; } @media(max-width: 768px) { .hamburger { display: flex; } .nav-links { flex-direction: column; background: #0c2d48; position: absolute; top: 70px; right: 0; width: 200px; padding: 1rem; display: none; } .nav-links li { margin-bottom: 1rem; } } /* Fade-in animation */ .fade-in { opacity: 0; transform: translateY(40px); transition: all 0.8s ease-out; } .fade-in.appear { opacity: 1; transform: translateY(0); } /* Hero animation */ .hero-content { animation: slideUp 1.2s ease forwards; } @keyframes slideUp { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: translateY(0); } } /* Card hover lift */ .card, .event-card { transition: 0.3s ease; } .card:hover, .event-card:hover { transform: translateY(-8px); box-shadow: 0 12px 20px rgba(0,0,0,0.15); } /* Button ripple */ .btn-primary, .btn-secondary { position: relative; overflow: hidden; } .btn-primary::after, .btn-secondary::after { content: ""; position: absolute; width: 0; height: 0; background: rgba(255,255,255,0.4); border-radius: 50%; transform: scale(1); opacity: 0; transition: width 0.4s ease, height 0.4s ease, opacity 0.8s; } .btn-primary:active::after, .btn-secondary:active::after { width: 200px; height: 200px; opacity: 1; transition: 0s; } /* Parallax Hero */ .hero { background-attachment: fixed; }