:root{ --nav-bg: rgba(0,0,0,0.72); --nav-bd: rgba(255,255,255,0.12); --nav-tx: rgba(255,255,255,0.92); } .ueos-hubsbar{ position:fixed; top:0; left:0; right:0; z-index:9999; backdrop-filter: blur(10px); background: var(--nav-bg); border-bottom:1px solid var(--nav-bd); } .ueos-hubsbar .wrap{ max-width:1200px; margin:0 auto; padding:10px 14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .ueos-hubsbar .brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.3px; } .ueos-hubsbar .dot{ width:10px; height:10px; border-radius:999px; background: var(--ueos-gold, #ffd166); box-shadow: 0 0 14px rgba(255,209,102,0.35); } .ueos-hubsbar a{ color:var(--nav-tx); text-decoration:none; } .ueos-hubsbar .links{ display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; } .ueos-hubsbar .pill{ display:inline-block; padding:8px 11px; border-radius:999px; border:1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); } .ueos-hubsbar .pill:hover{ background: rgba(255,255,255,0.09); } body{ padding-top:56px; } /* ensures content isn't hidden behind fixed bar */ @media (max-width:520px){ body{ padding-top:74px; } .ueos-hubsbar .links{ margin-left:0; } }