/* ForumRix shared floating desktop navbar. Mobile nav remains page-native. */ .logo-badge, .brand-badge{ background:transparent!important; border-color:transparent!important; box-shadow:none!important; overflow:hidden!important; } .logo-badge img, .brand-badge img{ display:block; width:100%; height:100%; object-fit:contain; transform:scale(2.65); transform-origin:center; } .logo-badge i, .brand-badge i{ display:none!important; } @media(min-width:1101px){ .navbar.navbar{ top:18px!important; left:50%!important; right:auto!important; width:min(82vw, 1280px)!important; height:72px!important; transform:translateX(-50%)!important; border:1px solid rgba(137,168,230,.20)!important; border-radius:24px!important; background: linear-gradient(135deg, rgba(18,24,38,.78), rgba(9,13,23,.62))!important; box-shadow: 0 24px 70px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.035) inset, 0 0 42px rgba(54,113,239,.13)!important; backdrop-filter:blur(18px)!important; -webkit-backdrop-filter:blur(18px)!important; overflow:visible!important; } .navbar > .nav-shell{ width:100%!important; max-width:none!important; margin:0!important; padding:0!important; } .navbar .nav-content, .nav-shell.nav-content{ width:100%!important; max-width:none!important; margin:0!important; padding:0 18px!important; } .nav-holder.nav-holder{ height:108px!important; } } @media(min-width:1101px) and (max-width:1240px){ .navbar.navbar{ width:min(90vw, 1160px)!important; } } .profile-btn .navProfileAvatar{ width:100%; height:100%; border-radius:999px; object-fit:cover; display:block; max-width:100%; max-height:100%; } .profile-btn{ overflow:hidden; } /* Shared mobile header/hamburger system. index.html is the visual source of truth. */ @media(max-width:860px){ .navbar .nav-shell, .nav-shell.nav-content{ width:min(100% - 32px, 1860px)!important; } .navbar .nav-content, .nav-shell.nav-content{ gap:14px!important; } .navbar nav, .navbar .nav-actions, .navbar #navActions, .navbar #desktopAuthActions, .navbar .actions#desktopAuthActions{ display:none!important; } .navbar .nav-right, .navbar .navRight{ gap:10px!important; margin-left:auto!important; } .hamburger, .notifBtn, .profile-btn, .profileBtn{ width:42px!important; height:42px!important; min-width:42px!important; min-height:42px!important; padding:0!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; border-radius:14px!important; border:1px solid rgba(255,255,255,.10)!important; background:rgba(255,255,255,.055)!important; color:var(--text, #f8fafc)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important; overflow:hidden!important; flex:0 0 42px!important; } .hamburger{ margin-left:0!important; order:1!important; } .notifWrap{ order:2!important; } .profile-wrap, .profileWrap{ order:3!important; } .hamburger i, .notifBtn i, .profile-btn i, .profileBtn i{ font-size:16px!important; line-height:1!important; } .notifBadge{ min-width:16px!important; height:16px!important; padding:0 5px!important; top:-5px!important; right:-5px!important; display:none; align-items:center!important; justify-content:center!important; font-size:11px!important; line-height:16px!important; border-radius:999px!important; } .notifBadge.show{ display:inline-flex!important; } .profile-btn .navProfileAvatar, .profileBtn .navProfileAvatar, .profile-btn img.navProfileAvatar, .profileBtn img.navProfileAvatar{ width:100%!important; height:100%!important; max-width:100%!important; max-height:100%!important; object-fit:cover!important; object-position:center!important; border-radius:999px!important; display:block!important; } .mobile-panel, .mobilePanel{ position:fixed!important; top:var(--navH, 74px)!important; left:0!important; right:0!important; z-index:8999!important; width:auto!important; padding:14px 0!important; background:rgba(10,13,20,.88)!important; border-bottom:1px solid rgba(255,255,255,.10)!important; backdrop-filter:blur(16px)!important; -webkit-backdrop-filter:blur(16px)!important; } .mobile-backdrop{ position:fixed!important; inset:var(--navH, 74px) 0 0 0!important; z-index:8998!important; background:rgba(0,0,0,.45)!important; } .mobile-panel.show, .mobilePanel.show, .mobilePanel.open{ display:block!important; } .mobile-backdrop.show{ display:block!important; } .mobile-inner, .mobileLinks, .mobile-links{ width:min(760px, calc(100% - 34px))!important; margin:0 auto!important; display:flex!important; flex-direction:column!important; gap:8px!important; } .mobile-inner a, .mobileLinks a, .mobile-links a, #mobileAuthArea a, .mobile-auth a{ min-height:46px!important; padding:12px!important; border:1px solid rgba(255,255,255,.10)!important; border-radius:14px!important; background:rgba(255,255,255,.055)!important; color:var(--text, #f8fafc)!important; font-size:14px!important; font-weight:850!important; line-height:1.2!important; align-items:center!important; gap:10px!important; box-shadow:none!important; } .mobile-inner > a, .mobileLinks > a, .mobile-links > a, #mobileAuthArea a:not([style*="display:none"]):not([style*="display: none"]), .mobile-auth a:not([style*="display:none"]):not([style*="display: none"]){ display:flex!important; } .mobile-inner a:hover, .mobileLinks a:hover, .mobile-links a:hover, #mobileAuthArea a:hover, .mobile-auth a:hover{ border-color:rgba(93,168,255,.28)!important; background:rgba(93,168,255,.10)!important; color:#fff!important; } .mobile-inner a.active, .mobileLinks a.active, .mobile-links a.active{ border-color:rgba(93,168,255,.34)!important; background:rgba(47,125,255,.13)!important; color:#fff!important; } .mobile-inner a i, .mobileLinks a i, .mobile-links a i, #mobileAuthArea a i, .mobile-auth a i{ width:18px!important; min-width:18px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; margin:0!important; font-size:15px!important; line-height:1!important; } #mobilePanel #mobileSignOut, #mobilePanel #mSignOutLink{ display:none!important; } }