kate522/wordpress-theme-aksrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(hero): align header slider title/search stack with zibll

Browse Source 
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
2026-07-17 23:00:33 +08:00
parent e7ccc4f069
commit 397231ca75
12 changed files with 476 additions and 439 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/admin/src/schema/sections/page-display/index.js
+20
View File
@@ -608,6 +608,8 @@ export const pageDisplaySchemas = {
header_components_search_popular_limit: 5,
header_components_search_show_input_cat: false,
header_components_search_show_type: false,
header_components_search_before_html: '<div class="em16 font-bold mb10">更优雅的Wordpress主题</div>\n<div>这是导航栏幻灯片多功能组件，可在后台进行配置</div>',
header_components_search_after_html: '',
slider_config_direction: 'horizontal',
slider_config_speed: 300,
slider_config_button: true,
@@ -680,6 +682,24 @@ export const pageDisplaySchemas = {
{ key: 'header_components_search_popular_limit', label: '热词数量', type: 'number', default: 5, min: 1, max: 20, dependsOn: { key: 'header_components_search_show_keywords', value: true } },
{ key: 'header_components_search_show_input_cat', label: '显示分类搜索', type: 'switch', default: false, dependsOn: { key: 'header_components_search_enabled', value: true }, help: '搜索框内显示分类选择下拉' },
{ key: 'header_components_search_show_type', label: '显示类型切换', type: 'switch', default: false, dependsOn: { key: 'header_components_search_enabled', value: true }, help: '搜索框内显示内容类型切换' },
{
key: 'header_components_search_before_html',
label: '搜索上方额外内容',
type: 'textarea',
default: '<div class="em16 font-bold mb10">更优雅的Wordpress主题</div>\n<div>这是导航栏幻灯片多功能组件，可在后台进行配置</div>',
rows: 4,
dependsOn: { key: 'header_components_search_enabled', value: true },
help: 'Hero 主标题/副标题写在这里（支持 HTML）。不要依赖幻灯片文案，以免与搜索重叠；请注意组件总高度。',
},
{
key: 'header_components_search_after_html',
label: '搜索下方额外内容',
type: 'textarea',
default: '',
rows: 3,
dependsOn: { key: 'header_components_search_enabled', value: true },
help: '支持 HTML；请注意组件总高度。',
},
],
},
{
assets/css/frontend/header-components/admin-hint.css
+1 -15
View File
@@ -25,20 +25,7 @@
color: #ffe082;
}
/* ============================================================
* Layer 2: 搜索覆盖模块（在轮播内部 absolute 定位）
* ============================================================ */
.header-components-search {
position: absolute;
bottom: 25%;
left: 50%;
transform: translateX(-50%);
z-index: 10;
width: 100%;
max-width: 600px;
padding: 0 16px;
}
/* Legacy form-class helpers (unused by zibll-aligned search; kept for admin-only markup) */
.header-components-search__form {
display: flex;
align-items: center;
@@ -87,4 +74,3 @@
font-weight: 500;
flex-shrink: 0;
}
assets/css/frontend/header-components/base.css
+44 -59
View File
@@ -1,19 +1,17 @@
/* ============================================================
* AKSRT Header Slider — v5.0 Zibll-Aligned
* AKSRT Header Slider — v6.0 Zibll-Aligned
*
* 三层架构：
* - Layer 1: Swiper 全宽轮播背景
* - Layer 2: 搜索覆盖模块
* - Layer 3: 图标卡片网格覆盖
* Three layers:
* - Layer 1: Swiper full-bleed background
* - Layer 2: Search overlay (before_html + form + after_html)
* - Layer 3: Icon cards (negative margin)
*
* 对标 zibll 的 new-swiper 体系：
* - CSS 变量高度控制 (--pc-height / --m-height)
* - data-* 属性驱动配置
* - 缩略图分页器、视差、懒加载
* Title/subtitle for the hero live in .header-slider-search-more.before
* (document flow with the search form). .slide-text is decorative only.
* ============================================================ */
/* ============================================================
* .new-swiper 基础样式（对标 zibll）
* .new-swiper base (zibll)
* ============================================================ */
.aksrt-slider-wrapper {
position: relative;
@@ -45,7 +43,7 @@
object-fit: cover;
}
/* 懒加载预加载器 */
/* Lazy preloader */
.new-swiper .swiper-lazy-preloader {
position: absolute;
top: 50%;
@@ -53,7 +51,7 @@
width: 42px;
height: 42px;
margin: -21px 0 0 -21px;
border: 3px solid rgba(255,255,255,0.3);
border: 3px solid rgba(255, 255, 255, 0.3);
border-top-color: #fff;
border-radius: 50%;
animation: aksrt-swiper-spin 0.8s linear infinite;
@@ -64,7 +62,6 @@
to { transform: rotate(360deg); }
}
/* 懒加载图片 */
.new-swiper .swiper-lazy {
opacity: 0;
transition: opacity 0.3s;
@@ -75,7 +72,6 @@
opacity: 1;
}
/* 缩略图分页器 */
.new-swiper .pagination-thumbnail-item {
width: 60px;
height: 40px;
@@ -99,60 +95,52 @@
border-color: #fff;
}
/* 视差层 */
.new-swiper [data-swiper-parallax] {
transition: none;
}
/* 比例高度模式 */
.new-swiper.scale-height .swiper-wrapper {
height: 0;
padding-bottom: var(--scale-ratio, 45%);
}
/* 幻灯片文字覆盖层 */
/* zibll .slide-text / .s-desc */
/* ============================================================
* Slide text — decorative layer (zibll .s-desc / .slide-text)
* Main hero title is NOT here; it is search before_html.
* ============================================================ */
.aksrt-slide-text,
.s-desc,
.slide-text {
position: absolute;
color: #fff;
z-index: 2;
text-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
.aksrt-slide-text,
.slide-text:not(.s-desc) {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 32px);
max-width: 920px;
text-align: center;
background: unset;
bottom: unset;
}
.s-desc {
bottom: 0;
left: 0;
top: auto;
transform: none;
width: 100%;
padding: 1.8em 2.5em;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), transparent);
border-radius: 0 0 var(--main-radius, 8px) var(--main-radius, 8px);
width: 100%;
font-size: 16px;
text-align: left;
text-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
z-index: 1;
border-radius: 0 0 var(--main-radius, 8px) var(--main-radius, 8px);
}
/* zibll: .slide-text unsets bottom bar, uses abs-center placement */
.aksrt-slide-text,
.slide-text:not(.s-desc) {
background: unset;
bottom: unset;
--text-size-pc: 20px;
font-size: var(--text-size-pc);
opacity: 1;
transition: opacity 1s;
}
.aksrt-slide-text__title,
.slide-title {
font-family: var(--font-ui);
font-size: clamp(1.5rem, 3.2vw, 2.25rem);
font-size: inherit;
font-weight: 600;
margin: 0 0 12px;
line-height: 1.25;
margin: 0;
line-height: 1.35;
text-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
@@ -164,9 +152,9 @@
.aksrt-slide-text__desc,
.slide-desc {
font-size: clamp(0.9rem, 1.4vw, 1.125rem);
margin: 0;
line-height: 1.6;
margin: 0.6em 0 0;
line-height: 1.5;
font-size: 60%;
color: rgba(255, 255, 255, 0.95);
text-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
@@ -177,7 +165,6 @@
--m-height: 100%;
width: 100%;
height: auto;
/* Prefer aspect-ratio so global border-box cannot collapse the box. */
aspect-ratio: 5 / 2;
padding-bottom: 0;
}
@@ -196,29 +183,29 @@
position: absolute;
}
/* 移动端高度 */
@media (max-width: 767px) {
.new-swiper .swiper-wrapper {
height: var(--m-height);
}
.slide-text:not(.s-desc) {
--text-size-m: 13px;
font-size: var(--text-size-m);
}
}
/* ============================================================
* Container — 三层叠加的父容器
* Container
* ============================================================ */
.header-slider-container,
.header-components-container {
position: relative;
isolation: isolate; /* 创建独立堆叠上下文，内部 z-index 不外泄 */
isolation: isolate;
width: 100%;
margin-bottom: 24px;
margin-bottom: 20px;
}
/* ============================================================
* Device Visibility for Hero/Banner slides
* ============================================================ */
/* PC-only slides: hidden on mobile */
/* Device visibility for hero/banner slides */
@media (max-width: 767.98px) {
.hero-slide--pc-only,
.banner-slide--pc-only {
@@ -226,11 +213,9 @@
}
}
/* Mobile-only slides: hidden on PC */
@media (min-width: 768px) {
.hero-slide--mobile-only,
.banner-slide--mobile-only {
display: none !important;
}
}
assets/css/frontend/header-components/card-device-visibility.css
+11 -5
View File
@@ -12,9 +12,11 @@ html.dark .header-components-search .line-form {
color: #ddd;
}
.header-components-search .search-input-text {
/* zibll base padding; leave room for abs-right submit */
.header-components-search .search-input-text,
.header-slider-search .search-input-text {
position: relative;
padding: 3px 42px 3px 8px;
padding: 5px 42px 5px 10px;
}
.header-components-search .line-form-input {
@@ -79,12 +81,16 @@ html.dark .header-components-search .line-form-input {
opacity: 0.92;
}
.header-components-search .line-form .abs-right {
/* zibll: .header-slider-search .line-form .abs-right { margin-top:0; margin-right:-6px; } */
.header-components-search .line-form .abs-right,
.header-slider-search .line-form .abs-right {
position: absolute;
right: -6px;
right: 0.7em;
top: 50%;
transform: translateY(-50%);
margin: 0;
margin-top: 0;
margin-right: -6px;
z-index: 1;
}
.header-components-search__submit {
assets/css/frontend/header-components/dark-theme.css
+6 -80
View File
@@ -19,7 +19,7 @@ body.dark-theme .header-components-search__input {
* ============================================================ */
.header-components-card {
position: relative;
z-index: 10;
z-index: 1;
margin-top: -40px;
}
@@ -258,84 +258,8 @@ a.icon-cover-card:hover {
}
/* ============================================================
* Nav 透明模式（轮播可见时 nav 变透明）
* Container-level blur: PC/Mobile split (colors only; no top offsets)
* ============================================================ */
/* ============================================================
* Zibll-aligned text/search structure overrides
* ============================================================ */
.header-components__content.slide-text {
width: calc(100% - 32px);
max-width: 920px;
top: 42%;
z-index: 12;
padding-top: 0;
}
.header-components__content.slide-text .slide-title {
font-size: clamp(1.75rem, 4vw, 3rem);
line-height: 1.2;
margin: 0 0 12px;
}
.header-components__content.slide-text .slide-desc {
max-width: 680px;
margin: 0 auto;
font-size: clamp(0.9rem, 1.4vw, 1.125rem);
line-height: 1.6;
color: rgba(255, 255, 255, 0.9);
}
.header-components-search {
top: calc(50% + 56px);
bottom: auto;
max-width: 680px;
padding: 0 20px;
font-size: 16px;
}
.card-0 .header-components-search {
top: calc(50% + 76px);
}
.header-components-search .search-input {
max-width: 620px;
margin: 0 auto;
}
.header-components-search .search-form {
margin: 0;
display: block;
background: transparent;
border-radius: 0;
padding: 0;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
transform: none;
}
.header-components-search .search-form:focus-within {
box-shadow: none;
transform: none;
}
.header-components-search .line-form {
position: relative;
border-radius: 100px;
padding: 0.35em 1em;
background: rgba(255, 255, 255, 0.82);
color: #555;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
-webkit-backdrop-filter: saturate(5) blur(20px);
backdrop-filter: saturate(5) blur(20px);
}
.filter-blur .header-components-search .line-form {
background: rgba(255, 255, 255, 0.75);
}
/* ===== Container-level blur: PC/Mobile split ===== */
@media (min-width: 768px) {
.has-blur-pc .header-components-card__wrap--shared,
.has-blur-pc .header-components-card__item-bg {
@@ -344,7 +268,8 @@ a.icon-cover-card:hover {
-webkit-backdrop-filter: saturate(3) blur(20px);
border-color: rgba(255, 255, 255, 0.3);
}
.has-blur-pc .header-components-search .line-form {
.has-blur-pc .header-components-search .line-form,
.has-blur-pc .header-slider-search .line-form {
background: rgba(255, 255, 255, 0.75);
}
.theme-dark .has-blur-pc .header-components-card__wrap--shared,
@@ -363,7 +288,8 @@ a.icon-cover-card:hover {
-webkit-backdrop-filter: saturate(3) blur(20px);
border-color: rgba(255, 255, 255, 0.3);
}
.has-blur-mobile .header-components-search .line-form {
.has-blur-mobile .header-components-search .line-form,
.has-blur-mobile .header-slider-search .line-form {
background: rgba(255, 255, 255, 0.75);
}
.theme-dark .has-blur-mobile .header-components-card__wrap--shared,
assets/css/frontend/header-components/search-keywords-row.css
+67 -98
View File
@@ -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;
}
assets/css/frontend/header-components/widget-device-visibility.css
+94 -66
View File
@@ -21,10 +21,8 @@
/* Fixed homepage hero under-nav is owned by nav/base.css (body.nav-fixed). */
/* WordPress Admin Bar 已全局禁用，无需偏移规则 */
/* ============================================================
* Layer 1: Swiper 轮播
* Layer 1: Swiper shell
* ============================================================ */
.header-components {
position: relative;
@@ -37,23 +35,23 @@
background: #111;
}
/* slide-header 模式：背景保持满铺，仅将文本层下移避开导航 */
.header-components.slide-header {
padding-top: 0;
border-radius: 0;
}
/* zibll: .slide-header .slide-text { padding-top: 70px; } — nav clearance only */
.header-components.slide-header .slide-text,
.header-components.slide-header .header-components__content.slide-text {
padding-top: var(--nav-fixed-reserve, var(--nav-height, 60px));
padding-top: 70px;
}
/* WordPress Admin Bar 已全局禁用，无需偏移规则 */
/* 渐变兜底 */
/* Gradient fallback */
.header-components--gradient {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-active, var(--color-primary-dark)) 100%);
display: flex;
align-items: center;
justify-content: center;
display: block;
position: relative;
height: var(--pc-height);
}
.header-components--gradient::before {
@@ -65,7 +63,6 @@
pointer-events: none;
}
/* Swiper 内部 */
.header-components .swiper-wrapper {
position: absolute;
inset: 0;
@@ -80,7 +77,6 @@
cursor: pointer;
}
/* 幻灯片背景图 */
.header-components__slide-bg {
position: absolute;
inset: 0;
@@ -100,7 +96,6 @@
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
}
/* 视频背景 */
.header-components__video {
position: absolute;
inset: 0;
@@ -110,7 +105,6 @@
z-index: 0;
}
/* 图片图层（视差叠加） */
.header-components__layer {
position: absolute;
inset: 0;
@@ -130,18 +124,16 @@
transform: translateY(calc(var(--scroll-y, 0) * var(--layer-parallax-scale, 0.3) * 1px));
}
/* 文字视差 */
/* Text parallax — keep abs-center vertical model (translateY only when abs-center is full-width) */
.has-text-parallax {
will-change: transform;
transform: translate(-50%, calc(-50% + var(--scroll-y, 0) * var(--hero-text-parallax, 0) * 0.15px));
}
/* 文字尺寸覆盖 */
.header-components__content[style*="--hero-text-size-pc"] .slide-title {
font-size: var(--hero-text-size-pc);
.header-components__content[style*="--hero-text-size-pc"] .slide-title,
.header-components__content[style*="--text-size-pc"] .slide-title {
font-size: inherit;
}
/* 幻灯片遮罩 — 轻量压暗（zibll 以 .s-desc 底条为主） */
.header-components__slide-overlay {
position: absolute;
inset: 0;
@@ -155,7 +147,7 @@
pointer-events: none;
}
/* zibll .s-desc 底条文案 */
/* Bottom-bar .s-desc mode */
.header-components__content.s-desc,
.header-components__content.slide-text.s-desc {
top: auto;
@@ -185,25 +177,71 @@
background: unset;
}
/* 搜索层 — header-slider-search */
.header-components-search {
/* ============================================================
* Layer 2: Search — zibll .header-slider-search
* Full-width abs-center + fine-tuned top (NOT point-centered).
* Title/subtitle are in .header-slider-search-more.before (flow).
* ============================================================ */
.header-slider-search.abs-center,
.header-components-search.abs-center {
position: absolute;
left: 50%;
left: 0;
right: 0;
width: 100%;
top: calc(50% - 10px);
transform: translate(-50%, -50%);
transform: translateY(-50%);
z-index: 2;
margin: auto;
max-width: 840px;
padding: 0 20px;
font-size: 17px;
color: #fff;
box-sizing: border-box;
}
.header-slider-search,
.header-components-search {
max-width: 840px;
width: calc(100% - 40px);
margin: auto;
padding: 0 20px;
font-size: 17px;
top: calc(50% - 10px);
z-index: 2;
color: #fff;
}
.card-0 .header-slider-search,
.card-0 .header-components-search {
top: calc(50% + 20px);
}
.header-slider-search .search-input,
.header-components-search .search-input {
max-width: 800px;
margin: 0 auto;
}
.header-slider-search-more {
color: #fff;
}
.header-slider-search-more.before {
margin-bottom: 1.8em;
}
.header-slider-search .search-form,
.header-components-search .search-form {
margin: 0;
display: block;
background: transparent;
border-radius: 0;
padding: 0;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
transform: none;
}
.header-slider-search .line-form,
.header-components-search .line-form {
background: rgba(255, 255, 255, 0.8);
border-radius: 100px;
@@ -212,8 +250,12 @@
color: #555;
border: none;
box-shadow: none;
position: relative;
}
.has-blur-pc .header-slider-search .line-form,
.has-blur-mobile .header-slider-search .line-form,
.filter-blur .header-slider-search .line-form,
.has-blur-pc .header-components-search .line-form,
.has-blur-mobile .header-components-search .line-form,
.filter-blur .header-components-search .line-form {
@@ -221,12 +263,17 @@
backdrop-filter: saturate(5) blur(20px);
}
.header-slider-search .line-form .icon,
.header-slider-search .line-form a,
.header-components-search .line-form .icon,
.header-components-search .line-form a {
color: #555;
}
/* 图标卡 — header-slider-card margin-top:-40px */
/* ============================================================
* Layer 3: Icon cards — margin-top:-40px (zibll)
* ============================================================ */
.header-slider-card,
.header-components-card {
position: relative;
margin-top: -40px;
@@ -248,62 +295,43 @@
background: var(--blur-bg);
}
.header-components.slide-header {
border-radius: 0;
}
.header-components.slide-header .swiper-slide img,
.header-components.slide-header .header-components__slide-bg img {
border-radius: 0 !important;
}
/* 幻灯片文字内容 */
.header-components__content {
position: absolute;
bottom: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: calc(100% - 32px);
max-width: 920px;
text-align: center;
/* Decorative slide text content (not the main hero stack) */
.header-components__content.slide-text:not(.s-desc) {
/* Placement comes from .abs-center + optional alignment modifiers */
z-index: 1;
color: #fff;
max-width: none;
width: 100%;
}
.header-components__title,
.header-components .slide-title {
font-family: var(--font-ui);
font-size: clamp(1.5rem, 3.2vw, 2.25rem);
font-weight: 600;
margin: 0 0 12px;
line-height: 1.25;
margin: 0;
line-height: 1.35;
letter-spacing: 0;
color: #fff;
text-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
.header-components__subtitle {
font-size: clamp(0.9rem, 1.4vw, 1.125rem);
margin: 0;
max-width: 680px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
.header-components__subtitle,
.header-components .slide-desc {
margin: 0.6em 0 0;
line-height: 1.5;
color: rgba(255, 255, 255, 0.95);
text-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
.header-components__description {
font-size: clamp(0.8rem, 1.2vw, 0.95rem);
margin: 8px auto 0;
max-width: 600px;
font-size: 0.85em;
margin: 0.4em 0 0;
line-height: 1.5;
color: rgba(255, 255, 255, 0.8);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
color: rgba(255, 255, 255, 0.85);
text-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
assets/css/frontend/zibll-utilities.css
+37 -4
View File
@@ -42,17 +42,50 @@
top: 0;
}
/* zibll .abs-center: full-width vertical center (translateY only).
* Header search and slide-text rely on this model. Point-center
* (left:50% + translate(-50%,-50%)) is NOT used for these layers. */
.abs-center {
position: absolute;
left: 50%;
left: 0;
width: 100%;
top: 50%;
transform: translate(-50%, -50%);
right: 0.7em;
transform: translateY(-50%);
z-index: 1;
}
/* Zibll abs-center position variants (main.css) */
.abs-center.left-bottom,
.abs-center.left-top,
.abs-center.right-top {
transform: unset;
top: 0;
}
.abs-center.right-top {
left: auto;
width: auto;
text-align: right;
}
.abs-center.left-top {
text-align: left;
}
.abs-center.conter-bottom,
.abs-center.conter-conter {
text-align: center;
}
.abs-center.right-top,
.abs-center.right-bottom,
.abs-center.conter-bottom {
.abs-center.right-conter {
text-align: right;
}
.abs-center.conter-bottom,
.abs-center.right-bottom,
.abs-center.left-bottom {
top: auto;
transform: unset;
bottom: 0;
assets/js/core/slider.js
+1 -1
View File
@@ -304,7 +304,7 @@
if (link && link !== "#") {
slide.style.cursor = "pointer";
slide.addEventListener("click", function (e) {
if (e.target.closest(".header-components-search, .header-components-card, .hero__btn, .swiper-button-prev, .swiper-button-next, .swiper-pagination, .hero-search, a, button, input")) return;
if (e.target.closest(".header-components-search, .header-slider-search, .header-components-card, .header-slider-card, .hero__btn, .swiper-button-prev, .swiper-button-next, .swiper-pagination, .hero-search, a, button, input")) return;
window.location.href = link;
});
}
src/AKSRT/Admin/Schema/SchemaPageDisplay.php
+19
View File
@@ -117,6 +117,25 @@ class SchemaPageDisplay {
['key' => 'header_components_search_popular_limit', 'label' => '热词数量', 'type' => 'number', 'default' => 5, 'min' => 1, 'max' => 20, 'dependsOn' => ['key' => 'header_components_search_show_keywords', 'value' => true]],
['key' => 'header_components_search_show_input_cat', 'label' => '显示分类搜索', 'type' => 'switch', 'default' => false, 'dependsOn' => ['key' => 'header_components_search_enabled', 'value' => true]],
['key' => 'header_components_search_show_type', 'label' => '显示类型切换', 'type' => 'switch', 'default' => false, 'dependsOn' => ['key' => 'header_components_search_enabled', 'value' => true]],
[
'key' => 'header_components_search_before_html',
'label' => '搜索上方额外内容',
'type' => 'textarea',
'sanitize_type' => 'html',
'default' => '<div class="em16 font-bold mb10">更优雅的Wordpress主题</div>
<div>这是导航栏幻灯片多功能组件，可在后台进行配置</div>',
'dependsOn' => ['key' => 'header_components_search_enabled', 'value' => true],
'help' => 'Hero 主标题/副标题写在这里（支持 HTML）。勿依赖幻灯片文案，以免与搜索重叠；请注意组件总高度。',
],
[
'key' => 'header_components_search_after_html',
'label' => '搜索下方额外内容',
'type' => 'textarea',
'sanitize_type' => 'html',
'default' => '',
'dependsOn' => ['key' => 'header_components_search_enabled', 'value' => true],
'help' => '支持 HTML；请注意组件总高度。',
],
]],
['key' => 'cards', 'title' => '图标卡片样式', 'fields' => [
['key' => 'header_components_filter_blur_devices', 'label' => '容器模糊设备', 'type' => 'checkbox', 'default' => [], 'dependsOn' => ['key' => 'header_components_cards_enabled', 'value' => true], 'options' => [
src/AKSRT/Settings/DisplayRuntime.php
+15 -1
View File
@@ -67,7 +67,7 @@ class DisplayRuntime {
/**
* Hero 搜索组件详细配置（PC/移动分别 + 子选项）
*
* @return array{pc:bool,mobile:bool,show_keywords:bool,popular_limit:int,show_input_cat:bool,show_type:bool,keywords:string[],categories:array,type_options:array}
* @return array{pc:bool,mobile:bool,show:bool,show_keywords:bool,popular_limit:int,show_input_cat:bool,show_type:bool,keywords:string[],categories:array,type_options:array,before_html:string,after_html:string}
*/
public static function get_header_components_search_config(): array {
$settings = Settings::get_all();
@@ -83,6 +83,11 @@ class DisplayRuntime {
$show_cat = !empty($settings['header_components_search_show_input_cat']);
$show_type = !empty($settings['header_components_search_show_type']);
// Mobile: hide hot keywords to keep the overlay short (zibll parity).
if ($is_mobile) {
$show_kw = false;
}
$keywords = [];
if ($show && $show_kw) {
$raw = $settings['hot_search_keywords'] ?? '';
@@ -108,6 +113,13 @@ class DisplayRuntime {
}
}
$before_html = isset($settings['header_components_search_before_html'])
? (string) $settings['header_components_search_before_html']
: '';
$after_html = isset($settings['header_components_search_after_html'])
? (string) $settings['header_components_search_after_html']
: '';
return [
'pc' => $pc_on,
'mobile' => $mobile_on,
@@ -119,6 +131,8 @@ class DisplayRuntime {
'keywords' => $keywords,
'categories' => $categories,
'type_options' => $type_options,
'before_html' => $before_html,
'after_html' => $after_html,
];
}
templates/parts/home-modules/module-hero.php
+161 -110
View File
@@ -2,8 +2,11 @@
/**
* Home module: header components hero + floating search + icon cards.
*
* DOM mirrors zibll header-slider:
* container > slider | search overlay (before + form + after) | cards
*
* @package AKSRT
* @version 4.1.0
* @version 4.2.0
*/
defined('ABSPATH') || exit;
@@ -18,7 +21,16 @@ if (!is_array($cfg)) {
$hero_banners = function_exists('aksrt_get_banners') ? aksrt_get_banners(8, 'hero') : [];
$settings = function_exists('aksrt_get_all_settings') ? aksrt_get_all_settings() : [];
$search_cfg = class_exists('\AKSRT\Settings\Settings') ? \AKSRT\Settings\Settings::get_header_components_search_config() : ['show' => false, 'keywords' => [], 'categories' => [], 'type_options' => []];
$search_cfg = class_exists('\AKSRT\Settings\Settings') ? \AKSRT\Settings\Settings::get_header_components_search_config() : [
'show' => false,
'keywords' => [],
'categories' => [],
'type_options' => [],
'before_html' => '',
'after_html' => '',
'show_input_cat' => false,
'show_type' => false,
];
$show_search = !empty($search_cfg['show']) || !empty($cfg['with_search']);
$show_cards = !empty($settings['header_components_cards_enabled']);
$icon_cards = isset($settings['header_components_icon_cards']) ? (array) $settings['header_components_icon_cards'] : [];
@@ -52,14 +64,25 @@ $search_placeholder = function_exists('aksrt_get_search_placeholder') ? aksrt_ge
$search_value = trim((string) get_search_query());
$search_type = function_exists('aksrt_get_search_form_type') ? aksrt_get_search_form_type() : 'post';
/**
* Search overlay = zibll .header-slider-search.abs-center
* Title/subtitle live in before_html (same flow stack as the form).
*/
$render_hero_search = static function (string $search_id) use ($search_placeholder, $search_value, $search_type, $search_cfg): void {
$_kw = $search_cfg['keywords'] ?? [];
$_cats = $search_cfg['categories'] ?? [];
$_types = $search_cfg['type_options'] ?? [];
$_show_cat = !empty($search_cfg['show_input_cat']) && !empty($_cats);
$_show_type = !empty($search_cfg['show_type']) && !empty($_types);
$_before = isset($search_cfg['before_html']) ? (string) $search_cfg['before_html'] : '';
$_after = isset($search_cfg['after_html']) ? (string) $search_cfg['after_html'] : '';
?>
<div class="header-slider-search header-components-search abs-center">
<?php if (trim($_before) !== '') : ?>
<div class="header-slider-search-more text-center before">
<?php echo wp_kses_post($_before); ?>
</div>
<?php endif; ?>
<div class="search-input">
<form role="search" method="get" action="<?php echo esc_url(home_url('/')); ?>" class="search-form" data-aksrt-search-form="hero">
<input type="hidden" name="aksrt_search_type" value="<?php echo esc_attr($search_type); ?>">
@@ -108,12 +131,17 @@ $render_hero_search = static function (string $search_id) use ($search_placehold
</div>
</div>
</form>
<?php if (!empty($_kw)) : ?>
<div class="header-components-search__keywords search-keywords">
<?php foreach ($_kw as $_kw_text) : ?>
<a href="<?php echo esc_url(add_query_arg('s', rawurlencode($_kw_text), home_url('/'))); ?>" class="header-components-search__kw-tag search_keywords"><?php echo esc_html($_kw_text); ?></a>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
<?php if (!empty($_kw)) : ?>
<div class="header-components-search__keywords">
<?php foreach ($_kw as $_kw_text) : ?>
<a href="<?php echo esc_url(add_query_arg('s', rawurlencode($_kw_text), home_url('/'))); ?>" class="header-components-search__kw-tag"><?php echo esc_html($_kw_text); ?></a>
<?php endforeach; ?>
<?php if (trim($_after) !== '') : ?>
<div class="header-slider-search-more text-center after">
<?php echo wp_kses_post($_after); ?>
</div>
<?php endif; ?>
</div>
@@ -186,104 +214,121 @@ if (!empty($hero_banners)) :
}
?>
<div class="<?php echo esc_attr(implode(' ', $container_classes)); ?>" id="aksrt-header-components"<?php if ($height_style !== '') : ?> style="<?php echo $height_style; ?>"<?php endif; ?>>
<div class="relative zib-slider"><div class="swiper new-swiper header-components slide-index slide-header" data-swiper-config="<?php echo esc_attr(wp_json_encode($swiper_config)); ?>">
<div class="swiper-wrapper">
<?php foreach ($hero_banners as $index => $slide) :
$device_vis = $slide['device_visibility'] ?? 'all';
$slide_classes = 'swiper-slide';
if ($device_vis === 'pc') {
$slide_classes .= ' hero-slide--pc-only';
} elseif ($device_vis === 'mobile') {
$slide_classes .= ' hero-slide--mobile-only';
}
if (!empty($slide['video_url'])) {
$slide_classes .= ' hero-slide--has-video';
}
$link_target = !empty($slide['link_target']) ? $slide['link_target'] : '_self';
$has_layers = !empty($slide['layers']) && is_array($slide['layers']);
$text_parallax = !empty($slide['text_parallax']);
$text_style = '';
if (!empty($slide['text_size_pc'])) {
$text_style .= '--hero-text-size-pc:' . esc_attr($slide['text_size_pc']) . ';';
}
if (!empty($slide['text_size_m'])) {
$text_style .= '--hero-text-size-m:' . esc_attr($slide['text_size_m']) . ';';
}
if ($text_parallax) {
$text_style .= '--hero-text-parallax:1;';
}
?>
<div class="<?php echo esc_attr($slide_classes); ?>"<?php if (!empty($slide['link'])) : ?> data-link="<?php echo esc_url($slide['link']); ?>" data-target="<?php echo esc_attr($link_target); ?>"<?php endif; ?>>
<div class="header-components__slide-bg">
<?php if (!empty($slide['video_url'])) : ?>
<video class="header-components__video" autoplay muted loop playsinline preload="metadata">
<source src="<?php echo esc_url($slide['video_url']); ?>" type="video/mp4">
</video>
<?php endif; ?>
<?php if (!empty($slide['image'])) : ?>
<img
src="<?php echo esc_url($slide['image']); ?>"
alt="<?php echo esc_attr($slide['title'] ?: get_bloginfo('name')); ?>"
loading="<?php echo 0 === $index ? 'eager' : 'lazy'; ?>"
decoding="async"
class="fit-cover"
>
<?php elseif (empty($slide['video_url'])) : ?>
<div class="header-components__slide-fallback"></div>
<?php endif; ?>
<?php if ($has_layers) : ?>
<?php foreach ($slide['layers'] as $layer) :
if (empty($layer['image'])) continue;
$layer_classes = 'header-components__layer';
if (!empty($layer['parallax'])) $layer_classes .= ' header-components__layer--parallax';
if (!empty($layer['free_size'])) $layer_classes .= ' header-components__layer--free-size';
$layer_style = '';
if (!empty($layer['align']) && $layer['align'] !== 'center') {
$layer_style .= 'background-position:' . esc_attr($layer['align']) . ';';
}
if (!empty($layer['parallax'])) {
$pscale = isset($layer['parallax_scale']) ? (float) $layer['parallax_scale'] : 0.3;
$popacity = isset($layer['parallax_opacity']) ? (float) $layer['parallax_opacity'] : 0.6;
$layer_style .= '--layer-parallax-scale:' . esc_attr($pscale) . ';';
$layer_style .= '--layer-parallax-opacity:' . esc_attr($popacity) . ';';
}
?>
<div class="<?php echo esc_attr($layer_classes); ?>" style="background-image:url('<?php echo esc_url($layer['image']); ?>')<?php echo $layer_style ? ';' . $layer_style : ''; ?>"></div>
<?php endforeach; ?>
<?php endif; ?>
</div>
<div class="header-components__slide-overlay"></div>
<?php
$show_text = !isset($slide['show_text']) || $slide['show_text'];
$has_title = !empty($slide['title']);
$has_subtitle = !empty($slide['subtitle']);
$has_description = !empty($slide['description']);
$text_align = $slide['text_align'] ?? 'left';
?>
<?php if ($show_text && ($has_title || $has_subtitle || $has_description)) : ?>
<div class="header-components__content slide-text<?php echo $text_align !== 'left' ? ' text-' . esc_attr($text_align) : ''; ?><?php echo $text_parallax ? ' has-text-parallax' : ''; ?>"<?php echo $text_style ? ' style="' . $text_style . '"' : ''; ?>>
<?php if ($has_title) : ?>
<h2 class="header-components__title slide-title"><?php echo esc_html($slide['title']); ?></h2>
<div class="relative zib-slider">
<div class="swiper new-swiper header-components slide-index slide-header" data-swiper-config="<?php echo esc_attr(wp_json_encode($swiper_config)); ?>">
<div class="swiper-wrapper">
<?php foreach ($hero_banners as $index => $slide) :
$device_vis = $slide['device_visibility'] ?? 'all';
$slide_classes = 'swiper-slide';
if ($device_vis === 'pc') {
$slide_classes .= ' hero-slide--pc-only';
} elseif ($device_vis === 'mobile') {
$slide_classes .= ' hero-slide--mobile-only';
}
if (!empty($slide['video_url'])) {
$slide_classes .= ' hero-slide--has-video';
}
$link_target = !empty($slide['link_target']) ? $slide['link_target'] : '_self';
$has_layers = !empty($slide['layers']) && is_array($slide['layers']);
$text_parallax = !empty($slide['text_parallax']);
// Align CSS vars with zibll --text-size-pc / --text-size-m.
$text_style = '';
if (!empty($slide['text_size_pc'])) {
$text_style .= '--text-size-pc:' . esc_attr((int) $slide['text_size_pc']) . 'px;';
$text_style .= '--hero-text-size-pc:' . esc_attr($slide['text_size_pc']) . ';';
}
if (!empty($slide['text_size_m'])) {
$text_style .= '--text-size-m:' . esc_attr((int) $slide['text_size_m']) . 'px;';
$text_style .= '--hero-text-size-m:' . esc_attr($slide['text_size_m']) . ';';
}
if ($text_parallax) {
$text_style .= '--hero-text-parallax:1;';
}
?>
<div class="<?php echo esc_attr($slide_classes); ?>"<?php if (!empty($slide['link'])) : ?> data-link="<?php echo esc_url($slide['link']); ?>" data-target="<?php echo esc_attr($link_target); ?>"<?php endif; ?>>
<div class="header-components__slide-bg">
<?php if (!empty($slide['video_url'])) : ?>
<video class="header-components__video" autoplay muted loop playsinline preload="metadata">
<source src="<?php echo esc_url($slide['video_url']); ?>" type="video/mp4">
</video>
<?php endif; ?>
<?php if ($has_subtitle) : ?>
<div class="header-components__subtitle slide-desc"><?php echo esc_html($slide['subtitle']); ?></div>
<?php if (!empty($slide['image'])) : ?>
<img
src="<?php echo esc_url($slide['image']); ?>"
alt="<?php echo esc_attr($slide['title'] ?: get_bloginfo('name')); ?>"
loading="<?php echo 0 === $index ? 'eager' : 'lazy'; ?>"
decoding="async"
class="fit-cover"
>
<?php elseif (empty($slide['video_url'])) : ?>
<div class="header-components__slide-fallback"></div>
<?php endif; ?>
<?php if ($has_description) : ?>
<div class="header-components__description"><?php echo esc_html($slide['description']); ?></div>
<?php if ($has_layers) : ?>
<?php foreach ($slide['layers'] as $layer) :
if (empty($layer['image'])) continue;
$layer_classes = 'header-components__layer';
if (!empty($layer['parallax'])) $layer_classes .= ' header-components__layer--parallax';
if (!empty($layer['free_size'])) $layer_classes .= ' header-components__layer--free-size';
$layer_style = '';
if (!empty($layer['align']) && $layer['align'] !== 'center') {
$layer_style .= 'background-position:' . esc_attr($layer['align']) . ';';
}
if (!empty($layer['parallax'])) {
$pscale = isset($layer['parallax_scale']) ? (float) $layer['parallax_scale'] : 0.3;
$popacity = isset($layer['parallax_opacity']) ? (float) $layer['parallax_opacity'] : 0.6;
$layer_style .= '--layer-parallax-scale:' . esc_attr($pscale) . ';';
$layer_style .= '--layer-parallax-opacity:' . esc_attr($popacity) . ';';
}
?>
<div class="<?php echo esc_attr($layer_classes); ?>" style="background-image:url('<?php echo esc_url($layer['image']); ?>')<?php echo $layer_style ? ';' . $layer_style : ''; ?>"></div>
<?php endforeach; ?>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
<?php endforeach; ?>
<div class="header-components__slide-overlay"></div>
<?php
// Per-slide decorative text only (zibll .abs-center.slide-text).
// Hero main title/subtitle must live in search before_html.
$show_text = !isset($slide['show_text']) || $slide['show_text'];
$has_title = !empty($slide['title']);
$has_subtitle = !empty($slide['subtitle']);
$has_description = !empty($slide['description']);
$text_align = $slide['text_align'] ?? '';
$text_align_class = '';
if ($text_align !== '' && $text_align !== 'left') {
// zibll uses conter-bottom / left-bottom etc.; keep text-* for existing data.
$text_align_class = ' text-' . sanitize_html_class($text_align);
if (in_array($text_align, ['center', 'conter-conter', 'conter-bottom'], true)) {
$text_align_class .= ' conter-conter';
} elseif ($text_align === 'left-bottom') {
$text_align_class .= ' left-bottom';
} elseif ($text_align === 'right-bottom') {
$text_align_class .= ' right-bottom';
}
}
?>
<?php if ($show_text && ($has_title || $has_subtitle || $has_description)) : ?>
<div class="abs-center slide-text header-components__content<?php echo esc_attr($text_align_class); ?><?php echo $text_parallax ? ' has-text-parallax' : ''; ?>"<?php echo $text_style ? ' style="' . $text_style . '"' : ''; ?>>
<?php if ($has_title) : ?>
<div class="header-components__title slide-title"><?php echo esc_html($slide['title']); ?></div>
<?php endif; ?>
<?php if ($has_subtitle) : ?>
<div class="header-components__subtitle slide-desc"><?php echo esc_html($slide['subtitle']); ?></div>
<?php endif; ?>
<?php if ($has_description) : ?>
<div class="header-components__description"><?php echo esc_html($slide['description']); ?></div>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>
</div>
<?php if ($show_search) : ?>
<?php $render_hero_search('header-search-input'); ?>
<?php endif; ?>
</div>
</div>
<?php if ($show_search) : ?>
<?php $render_hero_search('header-search-input'); ?>
<?php endif; ?>
<?php $render_icon_cards(); ?>
<?php if (function_exists('aksrt_render_admin_quick_link')) : ?>
<div class="home-module__admin-tools">
@@ -299,21 +344,27 @@ if (!empty($hero_banners)) :
?>
<div class="<?php echo esc_attr(implode(' ', $container_classes)); ?>" id="aksrt-header-components">
<div class="header-components slide-header header-components--gradient">
<div class="header-components__content slide-text text-center">
<h1 class="header-components__title slide-title"><?php bloginfo('name'); ?></h1>
<div class="header-components__subtitle slide-desc"><?php echo esc_html(get_bloginfo('description', 'display')); ?></div>
<?php if ($is_admin_user) : ?>
<p class="header-components__admin-hint" role="note">
<?php esc_html_e('No Hero slides found. Showing fallback site info.', 'aksrt'); ?>
</p>
<?php endif; ?>
</div>
<?php if ($show_search) : ?>
<?php $render_hero_search('header-search-input-fallback'); ?>
<?php if (!$show_search) : ?>
<div class="abs-center slide-text header-components__content text-center conter-conter">
<div class="header-components__title slide-title"><?php bloginfo('name'); ?></div>
<div class="header-components__subtitle slide-desc"><?php echo esc_html(get_bloginfo('description', 'display')); ?></div>
<?php if ($is_admin_user) : ?>
<p class="header-components__admin-hint" role="note">
<?php esc_html_e('No Hero slides found. Showing fallback site info.', 'aksrt'); ?>
</p>
<?php endif; ?>
</div>
<?php elseif ($is_admin_user) : ?>
<div class="header-components__admin-hint" role="note" style="position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:3;">
<?php esc_html_e('No Hero slides found. Configure slides or search before_html in admin.', 'aksrt'); ?>
</div>
<?php endif; ?>
</div>
<?php if ($show_search) : ?>
<?php $render_hero_search('header-search-input-fallback'); ?>
<?php endif; ?>
<?php $render_icon_cards(); ?>
<?php if (function_exists('aksrt_render_admin_quick_link')) : ?>
<div class="home-module__admin-tools">