From 56b9d61209206e61c354c15247f467f740d12c23 Mon Sep 17 00:00:00 2001
From: unknown <kate522@88.com>
Date: Fri, 17 Jul 2026 09:32:28 +0800
Subject: [PATCH] fix(nav): cancel full fixed-nav reserve under homepage hero

body.nav-fixed pads 88px but hero only pulled up by --nav-height (60px),
leaving a blank strip above the slider. Share --nav-fixed-reserve so body
padding and hero margin-top cancel exactly, matching zibll slide-header.
---
 .../widget-device-visibility.css              |  8 ++++---
 assets/css/frontend/nav/base.css              | 23 ++++++++++++-------
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/assets/css/frontend/header-components/widget-device-visibility.css b/assets/css/frontend/header-components/widget-device-visibility.css
index 6a4e074c..7a11e41d 100644
--- a/assets/css/frontend/header-components/widget-device-visibility.css
+++ b/assets/css/frontend/header-components/widget-device-visibility.css
@@ -11,10 +11,12 @@
     }
 }
 
-/* CMS freeform modules only: hero as first module under nav */
+/* CMS freeform modules only: hero as first module under nav.
+ * Prefer --nav-fixed-reserve when body.nav-fixed is present so the pull-up
+ * matches body padding-top (88/72/60), not just the 60px bar height. */
 .home-modules > .header-components-container:first-child,
 .home-modules--fullbleed > .header-components-container:first-child {
-    margin-top: calc(var(--nav-height, 60px) * -1);
+    margin-top: calc(var(--nav-fixed-reserve, var(--nav-height, 60px)) * -1);
 }
 
 /* Fixed homepage hero under-nav is owned by nav/base.css (body.nav-fixed). */
@@ -41,7 +43,7 @@
 }
 
 .header-components.slide-header .header-components__content.slide-text {
-    padding-top: var(--nav-height, 60px);
+    padding-top: var(--nav-fixed-reserve, var(--nav-height, 60px));
 }
 
 /* WordPress Admin Bar 已全局禁用，无需偏移规则 */
diff --git a/assets/css/frontend/nav/base.css b/assets/css/frontend/nav/base.css
index baac002a..ac6f2b8b 100644
--- a/assets/css/frontend/nav/base.css
+++ b/assets/css/frontend/nav/base.css
@@ -1,23 +1,28 @@
 /* Zibll body.nav-fixed: hard 88px reserve (main.css), not bare --nav-height.
- * Nav bar itself is ~60px; extra space matches zibll chrome/shadow gap. */
+ * Nav bar itself is ~60px; extra space matches zibll chrome/shadow gap.
+ * --nav-fixed-reserve is shared with the hero pull-up so they cancel exactly
+ * (zibll: body padding-top 88px + .slide-header { margin-top: -90px }). */
 body.nav-fixed {
-  padding-top: 88px;
+  --nav-fixed-reserve: 88px;
+  padding-top: var(--nav-fixed-reserve);
 }
 
 @media (max-width: 768px) {
   body.nav-fixed {
-    padding-top: 72px;
+    --nav-fixed-reserve: 72px;
+    padding-top: var(--nav-fixed-reserve);
   }
 }
 
 @media (max-width: 640px) {
   body.nav-fixed {
-    padding-top: 60px;
+    --nav-fixed-reserve: 60px;
+    padding-top: var(--nav-fixed-reserve);
   }
 }
 
 /* Fixed nav without hero overlay: take header out of flow.
-   body.nav-fixed already reserves --nav-height via padding-top. */
+   body.nav-fixed already reserves space via padding-top. */
 body.nav-fixed .header:not(.show-slide) {
   position: fixed;
   top: 0;
@@ -41,14 +46,16 @@ body.nav-fixed .header:not(.show-slide) .navbar.navbar-top {
  */
 body.nav-fixed:not(:has(.header.show-slide)) .fluid-widget-wrap:first-of-type:empty + main.container,
 body.nav-fixed:not(:has(.header.show-slide)) main.container:first-of-type {
-  scroll-margin-top: calc(var(--nav-height, 60px) + 8px);
+  scroll-margin-top: calc(var(--nav-fixed-reserve, 88px) + 8px);
 }
 
-/* Hero sits under transparent fixed/absolute header (zibll slide-header) */
+/* Hero sits under transparent fixed/absolute header.
+ * MUST cancel the full --nav-fixed-reserve (88/72/60), not just --nav-height (60).
+ * Using only -60px against 88px padding left a ~28px blank strip above the hero. */
 body.nav-fixed .header-slider-container,
 body.nav-fixed .header-components-container,
 body.nav-fixed .header-components.slide-header {
-  margin-top: calc(var(--nav-height, 60px) * -1) !important;
+  margin-top: calc(var(--nav-fixed-reserve, 88px) * -1) !important;
   position: relative;
   z-index: 1;
 }