/* ═══════════════════════════════════════════ NeonByte Navbar — navbar.css Standalone component styles. Import in every page . ═══════════════════════════════════════════ */ :root { --nb-nav-h: 68px; --nb-bg: rgba(8,9,15,0.82); --nb-border: rgba(255,255,255,0.06); --nb-a: #ff6b35; --nb-b: #c45cf5; --nb-w: #f0f2ff; --nb-w2: rgba(240,242,255,0.5); --nb-w3: rgba(240,242,255,0.22); --nb-line: rgba(255,255,255,0.06); --nb-font-display: 'Barlow Condensed', sans-serif; --nb-font-body: 'Inter', sans-serif; --nb-font-mono: 'JetBrains Mono', monospace; } /* ── BASE ── */ .nb-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--nb-nav-h); display: flex; align-items: center; padding: 0 48px; gap: 40px; background: var(--nb-bg); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border-bottom: 1px solid var(--nb-border); /* Entrance animation */ transform: translateY(-100%); animation: nb-nav-in 0.6s 0.1s cubic-bezier(0.16,1,0.3,1) forwards; } @keyframes nb-nav-in { to { transform: translateY(0); } } /* Scrolled state — added by JS */ .nb-nav.scrolled { background: rgba(8,9,15,0.96); border-bottom-color: rgba(255,255,255,0.09); box-shadow: 0 4px 24px rgba(0,0,0,0.4); } /* ── LOGO ── */ .nb-nav__logo { display: flex; align-items: center; gap: 9px; text-decoration: none; flex-shrink: 0; } .nb-nav__logo-icon { width: 28px; height: 28px; transition: filter 0.2s; } .nb-nav__logo:hover .nb-nav__logo-icon { filter: drop-shadow(0 0 8px rgba(255,107,53,0.6)); } .nb-nav__logo-text { font-family: var(--nb-font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--nb-w); transition: color 0.2s; } .nb-nav__logo:hover .nb-nav__logo-text { color: #fff; } /* ── LINKS ── */ .nb-nav__links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; flex: 1; } .nb-nav__link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; text-decoration: none; font-family: var(--nb-font-body); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.04em; color: var(--nb-w3); border-radius: 5px; transition: color 0.18s, background 0.18s; position: relative; } .nb-nav__link:hover { color: var(--nb-w); background: rgba(255,255,255,0.05); } /* Active page indicator */ .nb-nav__link.active { color: var(--nb-w); } .nb-nav__link.active::after { content: ''; position: absolute; bottom: -1px; left: 12px; right: 12px; height: 1.5px; background: linear-gradient(90deg, var(--nb-a), var(--nb-b)); border-radius: 2px; } /* Staff-only link */ .nb-nav__link--staff { font-size: 0.78rem; color: rgba(255,107,53,0.6); } .nb-nav__link--staff:hover { color: var(--nb-a); } /* ── RIGHT SIDE ── */ .nb-nav__right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; } /* ── BUTTONS ── */ .nb-nav__btn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 18px; font-family: var(--nb-font-body); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; text-decoration: none; border-radius: 5px; border: 1px solid transparent; transition: all 0.18s; cursor: pointer; white-space: nowrap; } .nb-nav__btn--ghost { border-color: var(--nb-border); color: var(--nb-w2); background: transparent; } .nb-nav__btn--ghost:hover { border-color: rgba(255,255,255,0.15); color: var(--nb-w); background: rgba(255,255,255,0.04); } .nb-nav__btn--solid { background: var(--nb-a); color: #0a0b14; border-color: var(--nb-a); box-shadow: 0 0 20px rgba(255,107,53,0.25); } .nb-nav__btn--solid:hover { box-shadow: 0 0 30px rgba(255,107,53,0.45); transform: translateY(-1px); } /* ── AVATAR ── */ .nb-nav__avatar-wrap { position: relative; } .nb-nav__avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--nb-a), var(--nb-b)); border: 1.5px solid rgba(255,255,255,0.1); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.2s, box-shadow 0.2s; overflow: hidden; padding: 0; } .nb-nav__avatar:hover, .nb-nav__avatar[aria-expanded="true"] { border-color: rgba(255,107,53,0.5); box-shadow: 0 0 12px rgba(255,107,53,0.3); } .nb-nav__avatar-img { width: 100%; height: 100%; object-fit: cover; } .nb-nav__avatar-initials { font-family: var(--nb-font-display); font-size: 0.72rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.04em; pointer-events: none; } /* ── DROPDOWN ── */ .nb-nav__dropdown { position: absolute; top: calc(100% + 10px); right: 0; min-width: 210px; background: #0d0f1a; border: 1px solid rgba(255,255,255,0.09); border-radius: 10px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03); /* Animation */ transform-origin: top right; animation: nb-dropdown-in 0.18s cubic-bezier(0.16,1,0.3,1); } @keyframes nb-dropdown-in { from { opacity: 0; transform: scale(0.94) translateY(-6px); } to { opacity: 1; transform: scale(1) translateY(0); } } .nb-nav__dropdown-header { padding: 14px 16px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--nb-font-body); font-size: 0.82rem; font-weight: 600; color: var(--nb-w); } .nb-nav__role-badge { font-family: var(--nb-font-mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 7px; border-radius: 100px; background: rgba(255,107,53,0.1); border: 1px solid rgba(255,107,53,0.25); color: var(--nb-a); } .nb-nav__role-badge[data-role="staff"] { background:rgba(196,92,245,.1); border-color:rgba(196,92,245,.3); color:var(--nb-b); } .nb-nav__role-badge[data-role="admin"] { background:rgba(56,217,245,.1); border-color:rgba(56,217,245,.3); color:#38d9f5; } .nb-nav__role-badge[data-role="client"] { background:rgba(255,107,53,.1); border-color:rgba(255,107,53,.3); color:var(--nb-a); } .nb-nav__dropdown-divider { height: 1px; background: var(--nb-border); margin: 4px 0; } .nb-nav__dropdown-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; font-family: var(--nb-font-body); font-size: 0.82rem; color: var(--nb-w2); text-decoration: none; transition: background 0.15s, color 0.15s; background: transparent; border: none; width: 100%; text-align: left; cursor: pointer; } .nb-nav__dropdown-item:hover { background: rgba(255,255,255,0.05); color: var(--nb-w); } .nb-nav__dropdown-item--danger { color: rgba(255,80,80,0.7); } .nb-nav__dropdown-item--danger:hover { background: rgba(255,60,60,0.08); color: #ff5050; } /* ── HAMBURGER ── */ .nb-nav__hamburger { display: none; flex-direction: column; gap: 4px; padding: 6px; background: transparent; border: none; cursor: pointer; } .nb-nav__hamburger span { display: block; width: 20px; height: 1.5px; background: var(--nb-w2); border-radius: 2px; transition: all 0.22s cubic-bezier(0.16,1,0.3,1); } .nb-nav__hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } .nb-nav__hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); } .nb-nav__hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); } /* ── MOBILE MENU ── */ .nb-nav__mobile { position: fixed; top: var(--nb-nav-h); left: 0; right: 0; background: rgba(8,9,15,0.98); backdrop-filter: blur(20px); border-bottom: 1px solid var(--nb-border); padding: 20px 24px 28px; display: flex; flex-direction: column; gap: 24px; /* animation */ animation: nb-mobile-in 0.25s cubic-bezier(0.16,1,0.3,1); } @keyframes nb-mobile-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .nb-nav__mobile-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .nb-nav__mobile-links .nb-nav__link { padding: 10px 14px; font-size: 0.95rem; } .nb-nav__mobile-auth { display: flex; flex-direction: column; gap: 10px; } .nb-nav__mobile-auth .nb-nav__btn { justify-content: center; padding: 11px 20px; font-size: 0.88rem; } /* ── RESPONSIVE ── */ @media (max-width: 900px) { .nb-nav { padding: 0 24px; gap: 20px; } .nb-nav__links { display: none; } .nb-nav__guest { display: none; } .nb-nav__hamburger { display: flex; } } @media (max-width: 480px) { .nb-nav { padding: 0 16px; } } /* ── PAGE OFFSET ── */ /* Every page that includes the navbar needs this on or first section */ .nb-page-offset { padding-top: var(--nb-nav-h); } /* ── HIDDEN ATTRIBUTE SUPPORT ── */ [hidden] { display: none !important; } /* Mobile menu hidden by default on all sizes */ .nb-nav__mobile { display: none; } .nb-nav__mobile:not([hidden]) { display: flex; }