kate522
b8d6f70af3
Align nav-fixed geometry with zibll: only .slide-header pulls under the bar; restore card container gutters so home overlay cards match other page types.
181 lines
6.0 KiB
CSS
181 lines
6.0 KiB
CSS
/* Dark theme */
|
|
.theme-dark .header-components-search__form,
|
|
html.dark .header-components-search__form,
|
|
body.dark-theme .header-components-search__form {
|
|
background: rgba(30, 30, 30, 0.9);
|
|
}
|
|
|
|
.theme-dark .header-components-search__input,
|
|
html.dark .header-components-search__input,
|
|
body.dark-theme .header-components-search__input {
|
|
color: #eee;
|
|
}
|
|
|
|
/* ============================================================
|
|
* Layer 3: Icon cards — 1:1 zibll header-slider-card
|
|
* DOM: .header-slider-card.container > (.zib-widget.padding-10|div)
|
|
* > .flex.jse.flex-row.gutters-5.flex-col-sm-2
|
|
* > (.flex1|.relative-h) > [.main-color >] .icon-cover-card.flex.ac.(zib-widget|padding-10)
|
|
* ============================================================ */
|
|
.header-slider-card,
|
|
.header-components-card {
|
|
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,
|
|
.header-components-card .zib-widget {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* 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 */
|
|
.filter-blur .header-slider-search .line-form,
|
|
.filter-blur .header-components-search .line-form,
|
|
.filter-blur .header-slider-card .zib-widget,
|
|
.filter-blur .header-components-card .zib-widget {
|
|
-webkit-backdrop-filter: saturate(5) blur(20px);
|
|
backdrop-filter: saturate(5) blur(20px);
|
|
}
|
|
|
|
.filter-blur .header-slider-card .zib-widget,
|
|
.filter-blur .header-components-card .zib-widget {
|
|
background: var(--blur-bg, rgba(255, 255, 255, 0.75));
|
|
}
|
|
|
|
.theme-dark .filter-blur .header-slider-card .zib-widget,
|
|
html.dark .filter-blur .header-slider-card .zib-widget,
|
|
body.dark-theme .filter-blur .header-slider-card .zib-widget,
|
|
.theme-dark .filter-blur .header-components-card .zib-widget,
|
|
html.dark .filter-blur .header-components-card .zib-widget,
|
|
body.dark-theme .filter-blur .header-components-card .zib-widget {
|
|
background: var(--blur-bg, rgba(30, 30, 30, 0.75));
|
|
}
|
|
|
|
/* Device-split blur (AKSRT extension of zibll filter-blur) */
|
|
@media (min-width: 768px) {
|
|
.has-blur-pc .header-slider-card .zib-widget,
|
|
.has-blur-pc .header-components-card .zib-widget {
|
|
-webkit-backdrop-filter: saturate(5) blur(20px);
|
|
backdrop-filter: saturate(5) blur(20px);
|
|
background: var(--blur-bg, rgba(255, 255, 255, 0.75));
|
|
}
|
|
.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-slider-card .zib-widget,
|
|
html.dark .has-blur-pc .header-slider-card .zib-widget,
|
|
.theme-dark .has-blur-pc .header-components-card .zib-widget,
|
|
html.dark .has-blur-pc .header-components-card .zib-widget {
|
|
background: var(--blur-bg, rgba(30, 30, 30, 0.75));
|
|
}
|
|
}
|
|
@media (max-width: 767px) {
|
|
.has-blur-mobile .header-slider-card .zib-widget,
|
|
.has-blur-mobile .header-components-card .zib-widget {
|
|
-webkit-backdrop-filter: saturate(5) blur(20px);
|
|
backdrop-filter: saturate(5) blur(20px);
|
|
background: var(--blur-bg, rgba(255, 255, 255, 0.75));
|
|
}
|
|
.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-slider-card .zib-widget,
|
|
html.dark .has-blur-mobile .header-slider-card .zib-widget,
|
|
.theme-dark .has-blur-mobile .header-components-card .zib-widget,
|
|
html.dark .has-blur-mobile .header-components-card .zib-widget {
|
|
background: var(--blur-bg, rgba(30, 30, 30, 0.75));
|
|
}
|
|
|
|
.header-slider-card .icon-cover-card.zib-widget,
|
|
.header-components-card .icon-cover-card.zib-widget {
|
|
padding: 10px;
|
|
}
|
|
.header-slider-card .icon-cover-card.padding-10,
|
|
.header-components-card .icon-cover-card.padding-10 {
|
|
padding: 2px;
|
|
}
|
|
.header-slider-card,
|
|
.header-components-card {
|
|
margin-top: -35px;
|
|
}
|
|
}
|
|
|
|
/* icon-cover-card itself is a flex row — do NOT re-skin as a bordered box here.
|
|
* Surface comes from .zib-widget / .padding-10; icon badge from .badg.cir + c-*/jb-*. */
|
|
.header-slider-card .icon-cover-card,
|
|
.header-components-card .icon-cover-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0;
|
|
/* padding comes from .zib-widget or .padding-10 class on the same node */
|
|
}
|
|
|
|
.header-slider-card a.main-color,
|
|
.header-components-card a.main-color {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
display: block;
|
|
}
|
|
|
|
.header-slider-card a.main-color:hover,
|
|
.header-components-card a.main-color:hover {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Let .badg.cir + color modifiers drive icon look; only size/image tweaks here */
|
|
.header-slider-card .icon-cover-icon.badg.cir,
|
|
.header-components-card .icon-cover-icon.badg.cir {
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.header-slider-card .icon-cover-icon img,
|
|
.header-components-card .icon-cover-icon img {
|
|
width: 70%;
|
|
height: 70%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.header-slider-card .icon-cover-desc,
|
|
.header-components-card .icon-cover-desc {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.header-slider-card .icon-cover-desc .font-bold,
|
|
.header-components-card .icon-cover-desc .font-bold {
|
|
font-weight: bold;
|
|
}
|