diff --git a/assets/css/frontend/base.css b/assets/css/frontend/base.css index 3d61774d..85a96051 100644 --- a/assets/css/frontend/base.css +++ b/assets/css/frontend/base.css @@ -89,6 +89,15 @@ main.container, --bs-gutter-y: 0; } +/* Header multifunc icon cards need horizontal gutter (zibll content rows). + * Global .container padding is 0 for dual-column float math. */ +.header-slider-card.container, +.header-components-card.container { + padding-left: 15px; + padding-right: 15px; + box-sizing: border-box; +} + @media (min-width: 576px) { .container, main.container { diff --git a/assets/css/frontend/header-components/dark-theme.css b/assets/css/frontend/header-components/dark-theme.css index 3e90a6bc..9a393b1a 100644 --- a/assets/css/frontend/header-components/dark-theme.css +++ b/assets/css/frontend/header-components/dark-theme.css @@ -22,6 +22,20 @@ body.dark-theme .header-components-search__input { position: relative; margin-top: -40px; z-index: 1; + /* Sit in normal flow after the slide shell; container is full-bleed */ + width: 100%; +} + +/* Ensure .container max-width + horizontal padding match site main (zibll .container) */ +.header-slider-card.container, +.header-components-card.container { + width: 100%; + max-width: var(--container, var(--mian-max-width, 1200px)); + margin-left: auto; + margin-right: auto; + padding-left: 15px; + padding-right: 15px; + box-sizing: border-box; } .header-slider-card .zib-widget, @@ -29,10 +43,16 @@ body.dark-theme .header-components-search__input { margin-bottom: 0; } -/* Individual card surface = .zib-widget (from card-primitives); shared mode uses outer .zib-widget.padding-10 */ +/* Match zibll widget surface so homepage and other page types look identical */ .header-slider-card .icon-cover-card.zib-widget, .header-components-card .icon-cover-card.zib-widget { margin-bottom: 0; + padding: var(--card-padding, 15px); + box-shadow: 0 0 10px var(--main-shadow, var(--shadow-sm, rgba(116, 116, 116, 0.08))); + border-radius: var(--main-radius, var(--radius, 8px)); + background-color: var(--main-bg-color, var(--surface-1, #fff)); + height: 100%; + box-sizing: border-box; } /* zibll filter-blur glass on card surfaces + search form */ diff --git a/assets/css/frontend/header-components/widget-device-visibility.css b/assets/css/frontend/header-components/widget-device-visibility.css index 8efec0ff..ad09960f 100644 --- a/assets/css/frontend/header-components/widget-device-visibility.css +++ b/assets/css/frontend/header-components/widget-device-visibility.css @@ -11,15 +11,15 @@ } } -/* 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. */ +/* CMS freeform: do NOT pull the whole container — nav pull is only on .slide-header + * (zibll body.nav-fixed .slide-header). Whole-container pull made homepage cards + * differ from other page types that share the same component. */ .home-modules > .header-components-container:first-child, .home-modules--fullbleed > .header-components-container:first-child { - margin-top: calc(var(--nav-fixed-reserve, var(--nav-height, 60px)) * -1); + margin-top: 0; } -/* Fixed homepage hero under-nav is owned by nav/base.css (body.nav-fixed). */ +/* Fixed homepage hero under-nav is owned by nav/zib-navbar-fixed.css (body.nav-fixed .slide-header). */ /* ============================================================ * Layer 1: Swiper shell — zibll .new-swiper.slide-header diff --git a/assets/css/frontend/nav/zib-navbar-core.css b/assets/css/frontend/nav/zib-navbar-core.css index 245d12e6..6ec5c82d 100644 --- a/assets/css/frontend/nav/zib-navbar-core.css +++ b/assets/css/frontend/nav/zib-navbar-core.css @@ -106,8 +106,17 @@ body:not(.nav-fixed) .header.show-slide { margin-bottom: 0; } -body.nav-fixed .slide-header { - margin-top: -90px; +/* Pull only the slide shell under fixed nav (zibll). Prefer --nav-fixed-reserve + * so homepage and non-home page types share the same geometry. */ +body.nav-fixed .slide-header, +body.nav-fixed .new-swiper.slide-header { + margin-top: calc(var(--nav-fixed-reserve, 90px) * -1); +} + +/* Never pull the full multifunc container (breaks card overlap on homepage). */ +body.nav-fixed .header-slider-container, +body.nav-fixed .header-components-container { + margin-top: 0; } .scroll-down.nav-fixed .header.scroll-down-hide { diff --git a/assets/css/frontend/nav/zib-navbar-fixed.css b/assets/css/frontend/nav/zib-navbar-fixed.css index 78d75946..28401a46 100644 --- a/assets/css/frontend/nav/zib-navbar-fixed.css +++ b/assets/css/frontend/nav/zib-navbar-fixed.css @@ -1,33 +1,83 @@ -/* Zibll-aligned fixed header + reserves (AKSRT) */ +/* Zibll-aligned fixed header + slide pull-under-nav + * + * demo.zibll.com / main.css: + * - body.nav-fixed → padding-top reserve + * - .nav-fixed .header → always position:fixed (including .show-slide) + * - body.nav-fixed .slide-header → margin-top negative (swiper ONLY) + * - Do NOT pull .header-slider-container as a whole (breaks card overlap on homepage) + */ + body.nav-fixed { --nav-fixed-reserve: 88px; padding-top: var(--nav-fixed-reserve); } + @media (max-width: 768px) { - body.nav-fixed { --nav-fixed-reserve: 72px; padding-top: var(--nav-fixed-reserve); } + body.nav-fixed { + --nav-fixed-reserve: 72px; + padding-top: var(--nav-fixed-reserve); + } } + @media (max-width: 640px) { - body.nav-fixed { --nav-fixed-reserve: 60px; padding-top: var(--nav-fixed-reserve); } + body.nav-fixed { + --nav-fixed-reserve: 60px; + padding-top: var(--nav-fixed-reserve); + } } -body.nav-fixed .header:not(.show-slide) { - position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 999; -} -body.nav-fixed .header-slider-container, -body.nav-fixed .header-components-container, -body.nav-fixed .header-components.slide-header, -body.nav-fixed .slide-header { - margin-top: calc(var(--nav-fixed-reserve, 88px) * -1) !important; - position: relative; - z-index: 1; -} -.scroll-down.nav-fixed .header.scroll-down-hide { - transform: translate3d(0, -105%, 0); - -webkit-backdrop-filter: none; - backdrop-filter: none; + +/* zibll .nav-fixed .header — fixed even with .show-slide */ +body.nav-fixed .header { + position: fixed; + top: 0; + left: 0; + right: 0; + width: 100%; + z-index: 999; } + +/* Transparent chrome over slider */ body.nav-fixed:not(.body-scroll):not(.mobile-navbar-show) .header.show-slide { --header-bg: linear-gradient(0, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0.1) 80%); --header-color: #fff; -webkit-backdrop-filter: unset; backdrop-filter: unset; } + +/* ONLY the slide shell pulls under the fixed nav — not the card row / search. + * zibll: body.nav-fixed .slide-header { margin-top: -90px; } */ +body.nav-fixed .header-slider-container > .zib-slider > .new-swiper.slide-header, +body.nav-fixed .header-slider-container > .relative.zib-slider > .new-swiper.slide-header, +body.nav-fixed .header-slider-container .new-swiper.slide-index.slide-header, +body.nav-fixed .header-components-container > .zib-slider > .new-swiper.slide-header, +body.nav-fixed .header-components:not(.new-swiper).slide-header, +body.nav-fixed .new-swiper.slide-header.slide-index { + margin-top: calc(var(--nav-fixed-reserve, 88px) * -1); +} + +/* Kill legacy whole-container pull (homepage-only visual break vs other pages) */ +body.nav-fixed .header-slider-container, +body.nav-fixed .header-components-container { + margin-top: 0 !important; +} + +/* Cards keep zibll overlap relative to slider bottom */ +body.nav-fixed .header-slider-card, +body.nav-fixed .header-components-card { + margin-top: -40px; + position: relative; + z-index: 1; +} + +.scroll-down.nav-fixed .header.scroll-down-hide { + transform: translate3d(0, -105%, 0); + -webkit-backdrop-filter: none; + backdrop-filter: none; +} + +@media (max-width: 767px) { + body.nav-fixed .header-slider-card, + body.nav-fixed .header-components-card { + margin-top: -35px; + } +}