fix(frontend): align top navigation with reference theme

assets/css/frontend/header-userbox.css

@@ -1,122 +1,43 @@
 /**
  * Header account popover.
  *
- * The shared legacy navigation styles provide the popover shell, and every
- * account row (avatar, VIP bar, check-in, wallet tiles, stats badges) renders
- * through the reference legacy classes. This module only owns the navigation
- * shell anchoring plus the account action-row geometry.
+ * The shared navigation rules own the layout. Restore the reference typography
+ * and action controls where the public reset differs from Bootstrap 3.
  */
 
-/* The reference keeps the right cluster as three floated .navbar-form groups.
- * Bootstrap's base .navbar-form rule carries margin-top: 8px and the >=768px
- * override only zeroes the horizontal margins, so every right-cluster group
- * starts 8px below the top of .navbar-collapse. The 50px menu row and the logo
- * put the navbar midline at 25px, so a 34px cross-size lands a group's midline
- * at 8 + 17 = 25px. The publish/VIP chips already reach that line through their
- * own 0.4em margin stacked on the group's 8px; the account row reaches it from
- * its 34px icon tiles, and the theme group needs the same cross-size because
- * its 29px toggle is otherwise 2.5px high. Nothing here may restate a 50px
- * min-height: it would double-count the 8px and push that group's content 8px
- * below the line while inflating the navbar from 50px to 58px. */
-.navbar-top .aksrt-navbar-account {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  margin: 0;
-}
-
-.navbar-top .aksrt-navbar-account > li {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  flex: 0 0 auto;
-  padding: 0;
-  overflow: visible;
-}
-
-.navbar-top .aksrt-navbar-account > li > .sub-menu {
-  top: calc(100% + 5px);
-  right: 0;
-  left: auto;
-  z-index: 1002;
-  margin: 0;
-}
-
-.navbar-top .aksrt-nav-icon,
-.navbar-top .aksrt-nav-avatar {
-  display: inline-flex !important;
-  align-items: center;
-  justify-content: center;
-  width: 34px;
-  height: 34px;
-  padding: 0 !important;
-  overflow: visible !important;
-  border: 0 !important;
-  border-radius: 0;
-  background: transparent !important;
-  box-shadow: none !important;
-}
-
-.navbar-top .aksrt-nav-icon .icon {
-  width: 1.2em;
-  height: 1.2em;
-}
-
-.navbar-top .aksrt-nav-avatar {
-  margin-top: 0;
-}
-
-.navbar-top .aksrt-nav-avatar .avatar {
-  display: block;
-  width: 29px;
-  height: 29px;
-  border-radius: 50%;
-  object-fit: cover;
-}
-
-/* The account-row chips, the theme and the language toggles all want the 29px
- * midline circle. The popover's quick-login buttons are .toggle-radius too and
- * also live inside .navbar-form, but they must keep the .social_loginbar
- * geometry from main.css: in a flex container flex-basis outranks width, so
- * without this exemption the buttons collapse to 29px and lose the 5px side
- * margins that space them apart. */
-.navbar-top .navbar-form .toggle-radius:not(.social-login-item):not(.xh-social-item) {
-  flex: 0 0 29px;
-  margin: 0;
-  vertical-align: middle;
-}
-
-/* Match the account row's 34px cross-size so the 29px toggle shares the 25px
- * midline instead of sitting 2.5px above it. */
-.navbar-top .navbar-form.flex.ac {
-  min-height: 34px;
-}
-
-.navbar-top .navbar-form .aksrt-navbar-language {
-  margin: 0;
-}
-
-/* The reference keeps the publish/VIP hover wrapper a plain inline-block, so the
- * absolutely positioned .sub-vip-card takes its normal-flow static position.
- * The shared action cluster otherwise forces inline-flex on every child, which
- * would move that static position to the flex container's cross-start. */
-.navbar-top .navbar-but > .hover-show {
-  display: inline-block;
-}
-
-/* Keep the drop-down search panel above a fixed header (z-index: 999). */
+.header,
+.mobile-header,
 .navbar-search {
-  z-index: 1001;
-  opacity: 0;
-  transform: translate3d(0, -24px, 0);
-  transition: transform .24s ease, opacity .18s ease, visibility 0s linear .24s;
-  will-change: transform, opacity;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.42857143;
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+  text-rendering: auto;
 }
 
-.navbar-search.show {
-  opacity: 1;
-  transform: translate3d(0, 0, 0);
-  transition-delay: 0s;
+/* Keep the logo inline so the centered mobile brand can use text-align. */
+.navbar-logo > img {
+  display: inline;
+}
+
+/* Reference .btn geometry without the public .btn skin. The 14px SVG keeps
+ * main.css's 1em size and -0.15em baseline; list-inline owns the item spacing. */
+.navbar-top .aksrt-nav-icon {
+  display: inline-block;
+  padding: 6px 12px;
+  margin-bottom: 0;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.42857143;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  user-select: none;
 }
 
 .navbar-search .line-form-input:focus,
@@ -125,17 +46,6 @@
   box-shadow: none;
 }
 
-.navbar-search .search-close-box {
-  display: flex;
-  justify-content: flex-end;
-  max-width: 660px;
-  margin: 16px auto 0;
-}
-
-.navbar-search .search-close-box > .but {
-  float: none;
-}
-
 .aksrt-header-userbox {
   color: var(--color-ink-2);
   line-height: 1.42857143;