/* ============================================ CodeMate — Navbar navbar.css — styles for the top navigation ============================================ */ /* the navbar sits fixed at the top so it stays visible when you scroll position: fixed pulls it out of the normal page flow we add a top padding to later so content doesn't hide behind it */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(15, 11, 12, 0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); height: 64px; } /* flexbox row — logo on left, links in center, button on right */ .navbar-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; } /* logo group — the ◉ mark and the word CodeMate sit side by side */ .navbar-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; } /* the ◉ commit node mark */ .logo-mark { font-size: 1.25rem; color: var(--accent); line-height: 1; filter: drop-shadow(0 0 8px rgba(251, 113, 133, 0.3)); } /* the wordmark */ .logo-text { font-family: 'Cabinet Grotesk', sans-serif; font-size: 1.0625rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; } /* the three nav links in the middle */ .navbar-links { display: flex; align-items: center; gap: 2rem; } .navbar-links a { font-size: 0.875rem; color: var(--muted); text-decoration: none; transition: color 0.15s ease; } .navbar-links a:hover { color: var(--text); /* brightens on hover */ } /* the CTA button — inherits .btn and .btn-primary from main.css we just adjust the size slightly for the navbar context */ .navbar-cta { font-size: 0.8125rem; padding: 8px 18px; } /* on mobile, hide the nav links — just show logo and CTA we'll add a hamburger menu later when we do the mobile audit */ @media (max-width: 768px) { .navbar-links { display: none; } } /* push page content below the fixed navbar so nothing hides behind it */ body { padding-top: 64px; }