kate522
e35011f2c0
Rebuild header-slider card DOM/CSS against zib_header_slide + zib_icon_cover_card so shared/individual backgrounds, flex gutters, and badge icons match the reference theme.
161 lines
5.3 KiB
CSS
161 lines
5.3 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;
|
|
}
|
|
|
|
.header-slider-card .zib-widget,
|
|
.header-components-card .zib-widget {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Individual card surface = .zib-widget (from card-primitives); shared mode uses outer .zib-widget.padding-10 */
|
|
.header-slider-card .icon-cover-card.zib-widget,
|
|
.header-components-card .icon-cover-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,
|
|
.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;
|
|
}
|