fix(hero): align header slider title/search stack with zibll
Put hero main title/subtitle in search before_html (document flow), move the search overlay outside the swiper as a sibling, and reset search/slide-text positioning to zibll tops so title and search no longer overlap.
This commit is contained in:
kate522 committed
1 parent
e7ccc4f069
commit
397231ca75
12 files changed
+476
-439
No files matched your search
@@ -1,94 +1,93 @@
|
||||
/* Search keywords row */
|
||||
.header-components-search__keywords {
|
||||
/* Search keywords row + zibll mobile search top offsets */
|
||||
|
||||
.header-components-search__keywords,
|
||||
.header-slider-search .search-keywords {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-top: 10px;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header-components-search__kw-tag {
|
||||
.header-components-search__kw-tag,
|
||||
.header-slider-search .search_keywords {
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
font-size: 12px;
|
||||
padding: 3px 5px;
|
||||
font-size: 0.85em;
|
||||
line-height: 1.4;
|
||||
border-radius: 100px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
backdrop-filter: blur(6px);
|
||||
color: inherit;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
color: #888;
|
||||
text-decoration: none;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.header-components-search__kw-tag:hover {
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
.filter-blur .header-slider-search .search_keywords,
|
||||
.filter-blur .header-components-search__kw-tag {
|
||||
-webkit-backdrop-filter: saturate(5) blur(20px);
|
||||
backdrop-filter: saturate(5) blur(20px);
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.header-components {
|
||||
height: var(--pc-height);
|
||||
}
|
||||
|
||||
.header-components-search {
|
||||
top: calc(50% + 44px);
|
||||
max-width: 560px;
|
||||
}
|
||||
.header-components-search__kw-tag:hover,
|
||||
.header-slider-search .search_keywords:hover {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
/* zibll mobile (max-width: 767px) search / card offsets */
|
||||
@media (max-width: 767px) {
|
||||
.header-components {
|
||||
height: var(--m-height);
|
||||
}
|
||||
|
||||
.header-components__content.slide-text {
|
||||
width: calc(100% - 28px);
|
||||
max-width: 480px;
|
||||
top: 40%;
|
||||
padding-top: 0;
|
||||
.header-components--gradient {
|
||||
height: var(--m-height);
|
||||
}
|
||||
|
||||
.header-components__content.slide-text .slide-title {
|
||||
font-size: clamp(1.25rem, 5vw, 1.75rem);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.header-components__content[style*="--hero-text-size-m"] .slide-title {
|
||||
font-size: var(--hero-text-size-m);
|
||||
}
|
||||
|
||||
.header-components__content.slide-text .slide-desc {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.header-components-search {
|
||||
top: calc(50% + 20px);
|
||||
width: calc(100% - 24px);
|
||||
max-width: 420px;
|
||||
padding: 0 12px;
|
||||
.header-slider-search,
|
||||
.header-components-search,
|
||||
.header-slider-search.abs-center,
|
||||
.header-components-search.abs-center {
|
||||
font-size: 12px;
|
||||
top: calc(50% - 40px);
|
||||
width: 100%;
|
||||
max-width: 840px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.card-1 .header-slider-search,
|
||||
.card-1 .header-components-search,
|
||||
.card-2 .header-slider-search,
|
||||
.card-2 .header-components-search {
|
||||
top: calc(50% + 46px);
|
||||
top: calc(50% - 1px);
|
||||
}
|
||||
|
||||
.card-5 .header-slider-search,
|
||||
.card-5 .header-components-search,
|
||||
.card-6 .header-slider-search,
|
||||
.card-6 .header-components-search {
|
||||
top: calc(50% - 22px);
|
||||
top: calc(50% - 83px);
|
||||
}
|
||||
|
||||
.card-7 .header-slider-search,
|
||||
.card-7 .header-components-search,
|
||||
.card-8 .header-slider-search,
|
||||
.card-8 .header-components-search {
|
||||
top: calc(50% - 52px);
|
||||
top: calc(50% - 120px);
|
||||
}
|
||||
|
||||
.header-slider-search-more.before {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.header-slider-search .line-form,
|
||||
.header-components-search .line-form {
|
||||
font-size: 14px;
|
||||
padding: 4px 12px;
|
||||
}
|
||||
|
||||
.header-slider-search .scale-placeholder.is-focus,
|
||||
.header-slider-search .line-form-input:focus ~ .scale-placeholder,
|
||||
.header-components-search .scale-placeholder.is-focus,
|
||||
.header-components-search .line-form-input:focus ~ .scale-placeholder {
|
||||
transform: translateY(-32px);
|
||||
@@ -96,6 +95,7 @@
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.header-slider-card,
|
||||
.header-components-card {
|
||||
margin-top: -35px;
|
||||
}
|
||||
@@ -142,48 +142,27 @@
|
||||
.icon-cover-subtitle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.header-components {
|
||||
height: var(--m-height);
|
||||
/* zibll ~640px: slide-header text padding 52px */
|
||||
.header-components.slide-header .slide-text,
|
||||
.header-components.slide-header .header-components__content.slide-text {
|
||||
padding-top: 52px;
|
||||
}
|
||||
|
||||
.header-components__content.slide-text .slide-title {
|
||||
font-size: clamp(1.1rem, 5.4vw, 1.4rem);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.header-components__content.slide-text .slide-desc {
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.header-components-search {
|
||||
top: calc(50% + 26px);
|
||||
width: calc(100% - 20px);
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.card-5 .header-components-search,
|
||||
.card-6 .header-components-search {
|
||||
top: calc(50% - 12px);
|
||||
}
|
||||
|
||||
.card-7 .header-components-search,
|
||||
.card-8 .header-components-search {
|
||||
top: calc(50% - 40px);
|
||||
}
|
||||
|
||||
.header-components-search .search-input-text {
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.header-components-search__submit {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
.s-desc,
|
||||
.slide-text {
|
||||
padding: 0.7em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.header-components.slide-header .slide-text,
|
||||
.header-components.slide-header .header-components__content.slide-text {
|
||||
padding-top: 52px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Nav transparent helpers (when hero is present) */
|
||||
.site-nav.nav-transparent {
|
||||
background-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
@@ -233,7 +212,6 @@
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
/* 滚动后恢复实心 */
|
||||
.site-nav.nav-transparent.is-scrolled {
|
||||
background-color: var(--surface-page);
|
||||
border-bottom-color: var(--color-line);
|
||||
@@ -262,9 +240,7 @@
|
||||
border-color: var(--color-line);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* Header Slider — Swiper Navigation & Pagination (Zibll-style)
|
||||
* ============================================================ */
|
||||
/* Swiper nav / pagination (header) */
|
||||
.header-components .swiper-button-prev,
|
||||
.header-components .swiper-button-next {
|
||||
width: 30px;
|
||||
@@ -282,8 +258,8 @@
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.header-slider:hover .swiper-button-prev,
|
||||
.header-slider:hover .swiper-button-next {
|
||||
.header-components:hover .swiper-button-prev,
|
||||
.header-components:hover .swiper-button-next {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
@@ -317,8 +293,7 @@
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* Banner Module — 1:1 Zibll (.s-desc / widget slider card)
|
||||
* 圆角 = --main-radius，阴影 = main-shadow，文案底渐变条
|
||||
* Banner Module — zibll .s-desc style (unchanged geometry)
|
||||
* ============================================================ */
|
||||
.banner-module {
|
||||
position: relative;
|
||||
@@ -330,17 +305,11 @@
|
||||
background: var(--main-bg-color, var(--surface-1));
|
||||
}
|
||||
|
||||
/*
|
||||
* Aspect-ratio card height.
|
||||
* Global reset uses box-sizing:border-box, so the classic
|
||||
* height:0 + padding-bottom trick collapses to 0 unless we
|
||||
* force content-box (or use aspect-ratio).
|
||||
*/
|
||||
.banner-module__swiper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 5 / 2; /* 40% */
|
||||
aspect-ratio: 5 / 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -472,7 +441,7 @@
|
||||
}
|
||||
|
||||
.banner-module__swiper {
|
||||
aspect-ratio: 2 / 1; /* 50% */
|
||||
aspect-ratio: 2 / 1;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user