fix(header): force 10px seams between homepage icon cards

Harden gutters-5 child padding with higher specificity so homepage-fixed utilities cannot collapse header-slider card gaps.
This commit is contained in:
2026-07-24 11:45:15 +08:00
parent e45bfc6eec
commit 8bad0c1252
@@ -43,20 +43,28 @@ body.dark-theme .header-components-search__input {
.header-components-card .ac {
align-items: center;
}
/* zibll: .gutters-5 { margin:-5px } > * { padding:5px } → 10px visual gap */
/* 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-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 > * {
padding: 5px;
.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;
flex: 1 1 0;
overflow: hidden;
min-width: 0;
}