Spaces:
Sleeping
Sleeping
| .navbar { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| z-index: 1000; | |
| background: var(--bg-nav); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border-bottom: 1px solid var(--border-subtle); | |
| transition: all var(--transition-base); | |
| } | |
| .navbar.scrolled { | |
| box-shadow: var(--shadow-md); | |
| } | |
| .navbar-container { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| height: 72px; | |
| max-width: var(--container-max); | |
| margin: 0 auto; | |
| padding: 0 24px; | |
| } | |
| .nav-logo { | |
| font-size: 1.4rem; | |
| font-weight: 800; | |
| background: var(--accent-gradient); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| letter-spacing: -0.5px; | |
| flex-shrink: 0; | |
| } | |
| .nav-left { | |
| display: flex; | |
| align-items: center; | |
| gap: 20px; | |
| } | |
| /* Status Badge in Nav */ | |
| .status-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| background: transparent; | |
| border: none; | |
| padding: 0; | |
| color: var(--accent-primary); | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| text-decoration: none; | |
| } | |
| .status-dot { | |
| width: 6px; | |
| height: 6px; | |
| background: #10b981; | |
| border-radius: 50%; | |
| box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); } | |
| 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); } | |
| 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } | |
| } | |
| .nav-right { | |
| display: flex; | |
| align-items: center; | |
| gap: 24px; | |
| } | |
| .nav-links { | |
| display: flex; | |
| align-items: center; | |
| gap: 24px; | |
| list-style: none; | |
| } | |
| .nav-links a { | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| position: relative; | |
| padding: 4px 0; | |
| transition: color 0.2s; | |
| white-space: nowrap; | |
| } | |
| .nav-links a:hover { | |
| color: var(--accent-primary); | |
| } | |
| .nav-links a::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -2px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: var(--accent-gradient); | |
| transition: width 0.3s; | |
| } | |
| .nav-links a:hover::after { | |
| width: 100%; | |
| } | |
| .theme-toggle { | |
| font-size: 1.1rem; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 38px; | |
| height: 38px; | |
| border-radius: 50%; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-subtle); | |
| transition: all 0.3s; | |
| flex-shrink: 0; | |
| } | |
| .theme-toggle:hover { | |
| transform: scale(1.1); | |
| border-color: var(--accent-primary); | |
| } | |
| /* Hamburger — hidden on desktop */ | |
| .mobile-menu-btn { | |
| display: none; | |
| padding: 4px; | |
| z-index: 3000; /* Stays above the full-screen menu */ | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| } | |
| .hamburger { | |
| width: 24px; | |
| height: 2px; | |
| background: var(--text-primary); | |
| position: relative; | |
| transition: all 0.3s; | |
| display: block; | |
| } | |
| .hamburger::before, | |
| .hamburger::after { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| width: 24px; | |
| height: 2px; | |
| background: var(--text-primary); | |
| transition: all 0.3s; | |
| } | |
| .hamburger::before { top: -8px; } | |
| .hamburger::after { top: 8px; } | |
| .hamburger.open { background: transparent; } | |
| .hamburger.open::before { transform: rotate(45deg); top: 0; } | |
| .hamburger.open::after { transform: rotate(-45deg); top: 0; } | |
| /* ============================================= | |
| MOBILE RESPONSIVE — this is the key fix | |
| ============================================= */ | |
| @media (max-width: 768px) { | |
| /* Hide the desktop nav links */ | |
| .nav-links { | |
| display: none; | |
| } | |
| /* Show hamburger */ | |
| .mobile-menu-btn { | |
| display: flex; | |
| } | |
| /* When menu is open, show as full-screen overlay */ | |
| .nav-links.open { | |
| display: flex; | |
| flex-direction: column; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100vw; | |
| height: 100vh; | |
| background: var(--bg-primary); /* Solid background to prevent overlap */ | |
| z-index: 2000; /* Ensure it stays above everything */ | |
| align-items: center; | |
| justify-content: center; | |
| gap: 32px; | |
| padding-top: 20px; | |
| } | |
| .hide-mobile { | |
| display: none; | |
| } | |
| .nav-links.open a { | |
| font-size: 1.5rem; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| .nav-right { | |
| gap: 12px; | |
| } | |
| .navbar-container { | |
| padding: 0 16px; | |
| } | |
| } |