175 lines
5.9 KiB
CSS
175 lines
5.9 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)
|
|
*
|
|
* IMPORTANT: gutters/flex helpers must live here (not only zibll-utilities.css).
|
|
* zibll-utilities was single-post-only, so homepage cards stuck together while
|
|
* other pages that load utilities showed 10px gaps — exact user screenshot bug.
|
|
* ============================================================ */
|
|
|
|
/* Self-contained zibll flex + gutters for header cards (page-type independent) */
|
|
.header-slider-card .flex,
|
|
.header-components-card .flex {
|
|
display: flex;
|
|
}
|
|
.header-slider-card .flex.jse,
|
|
.header-components-card .flex.jse,
|
|
.header-slider-card .jse,
|
|
.header-components-card .jse {
|
|
justify-content: space-evenly;
|
|
}
|
|
.header-slider-card .flex-row,
|
|
.header-components-card .flex-row {
|
|
flex-direction: row;
|
|
}
|
|
.header-slider-card .flex.ac,
|
|
.header-components-card .flex.ac,
|
|
.header-slider-card .ac,
|
|
.header-components-card .ac {
|
|
align-items: center;
|
|
}
|
|
/* zibll: .gutters-5 { margin:-5px } > * { padding:5px } → 10px visual gap.
|
|
* Use both gutters model AND flex gap so homepage (which used to miss
|
|
* zibll-utilities) and any future cascade zero-padding still show seams. */
|
|
.header-slider-card .gutters-5,
|
|
.header-components-card .gutters-5,
|
|
.header-slider-card .flex.jse.flex-row,
|
|
.header-components-card .flex.jse.flex-row {
|
|
margin: -5px;
|
|
gap: 0; /* spacing comes from child padding to match zibll exactly */
|
|
}
|
|
.header-slider-card .gutters-5 > *,
|
|
.header-components-card .gutters-5 > *,
|
|
.header-slider-card .flex.jse.flex-row > *,
|
|
.header-components-card .flex.jse.flex-row > * {
|
|
padding: 5px !important;
|
|
box-sizing: border-box;
|
|
}
|
|
.header-slider-card .flex1,
|
|
.header-components-card .flex1,
|
|
.header-slider-card .flex .flex1,
|
|
.header-components-card .flex .flex1 {
|
|
flex: 1 1 0;
|
|
overflow: hidden;
|
|
min-width: 0;
|
|
}
|
|
.header-slider-card .relative-h,
|
|
.header-components-card .relative-h {
|
|
position: relative;
|
|
height: 100%;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* 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 {
|
|
padding: 10px;
|
|
}
|
|
.header-slider-card .icon-cover-card.padding-10 {
|
|
padding: 2px;
|
|
}
|
|
.header-slider-card,
|
|
.header-components-card {
|
|
margin-top: -35px;
|
|
}
|
|
}
|