| .navbar { |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| z-index: 100; |
| padding: 16px 0; |
| transition: all 0.3s ease; |
| border-bottom: 1px solid transparent; |
| } |
| .navbar--scrolled { |
| background: rgba(5, 5, 8, 0.85); |
| backdrop-filter: blur(16px); |
| border-bottom-color: var(--border); |
| padding: 12px 0; |
| } |
| .navbar__inner { |
| display: flex; |
| align-items: center; |
| gap: 32px; |
| } |
| .navbar__logo { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| font-size: 18px; |
| font-weight: 700; |
| letter-spacing: -0.02em; |
| color: var(--text); |
| flex-shrink: 0; |
| } |
| .navbar__links { |
| display: flex; |
| align-items: center; |
| gap: 28px; |
| margin-left: auto; |
| } |
| .navbar__links a { |
| font-size: 14px; |
| color: var(--text-muted); |
| transition: color 0.2s; |
| font-weight: 500; |
| } |
| .navbar__links a:hover { color: var(--text); } |
| .navbar__link-docs { color: var(--purple-light) !important; } |
| .navbar__actions { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| flex-shrink: 0; |
| } |
| .btn { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| padding: 8px 16px; |
| border-radius: 8px; |
| font-size: 14px; |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.2s; |
| border: none; |
| text-decoration: none; |
| } |
| .btn--ghost { |
| background: transparent; |
| color: var(--text-muted); |
| border: 1px solid var(--border); |
| } |
| .btn--ghost:hover { color: var(--text); border-color: rgba(255,255,255,0.15); } |
| .btn--primary { |
| background: linear-gradient(135deg, var(--purple), var(--blue)); |
| color: white; |
| box-shadow: 0 0 24px rgba(249,115,22,0.3); |
| } |
| .btn--primary:hover { |
| box-shadow: 0 0 32px rgba(249,115,22,0.5); |
| transform: translateY(-1px); |
| } |
| .btn--lg { padding: 14px 28px; font-size: 15px; border-radius: 10px; } |
| .btn--outline { |
| background: transparent; |
| color: var(--text); |
| border: 1px solid var(--border); |
| } |
| .btn--outline:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.04); } |
|
|
| .navbar__hamburger { |
| display: none; |
| flex-direction: column; |
| gap: 4px; |
| background: none; |
| border: none; |
| cursor: pointer; |
| padding: 4px; |
| margin-left: auto; |
| } |
| .navbar__hamburger span { |
| display: block; |
| width: 20px; |
| height: 2px; |
| background: var(--text-muted); |
| border-radius: 2px; |
| transition: 0.2s; |
| } |
|
|
| @media (max-width: 768px) { |
| .navbar__links { display: none; } |
| .navbar__actions { display: none; } |
| .navbar__hamburger { display: flex; } |
| .navbar__links--open { |
| display: flex; |
| flex-direction: column; |
| position: absolute; |
| top: 100%; |
| left: 0; right: 0; |
| background: rgba(5,5,8,0.97); |
| padding: 16px 24px; |
| border-bottom: 1px solid var(--border); |
| } |
| } |
|
|
