diff --git a/css/styles.css b/css/styles.css index 1a99cf2..3200c97 100644 --- a/css/styles.css +++ b/css/styles.css @@ -319,4 +319,109 @@ body { flex: 0 0 100%; max-width: 100%; } +} + +/* Navbar Styles */ +.glass-nav { + background: rgba(139, 92, 246, 0.1); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +.glass-nav:hover { + background: rgba(139, 92, 246, 0.15); +} + +.navbar-brand img { + filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.5)); +} + +.nav-link { + position: relative; + padding: 0.5rem 1rem; + margin: 0 0.25rem; +} + +.nav-link.active { + color: #fff !important; +} + +.nav-link.active::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 2px; + background: linear-gradient(to right, #8B5CF6, #EC4899); + transform: scaleX(1); + transition: transform 0.3s ease; +} + +.nav-link:not(.active)::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 2px; + background: linear-gradient(to right, #8B5CF6, #EC4899); + transform: scaleX(0); + transition: transform 0.3s ease; + transform-origin: right; +} + +.nav-link:hover::after { + transform: scaleX(1); + transform-origin: left; +} + +/* Slow spin animation for logo */ +@keyframes spin-slow { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +.animate-spin-slow { + animation: spin-slow 20s linear infinite; +} + +/* Navbar scroll effect */ +.navbar { + transition: all 0.3s ease; +} + +.navbar.scrolled { + background: rgba(139, 92, 246, 0.95); + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); +} + +/* Mobile menu styles */ +@media (max-width: 991.98px) { + .navbar-collapse { + background: rgba(139, 92, 246, 0.95); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border-radius: 0.5rem; + padding: 1rem; + margin-top: 0.5rem; + } + + .nav-link { + padding: 0.75rem 1rem; + border-radius: 0.375rem; + } + + .nav-link:hover { + background: rgba(255, 255, 255, 0.1); + } + + .nav-link::after { + display: none; + } } \ No newline at end of file diff --git a/index.html b/index.html index d55e50c..445f500 100644 --- a/index.html +++ b/index.html @@ -17,28 +17,51 @@ -