` with an inner `` overlay and has NO `.has-link` class, so the state is keyed on `:has(.z-explore)`. A rule keyed on `.has-link` matched nothing on an earlier page and silently killed the working fill hover while a CSS-text grep still reported the declaration "present" — verify by RENDERING and reading the computed values with transitions disabled, never by grepping the declaration. Cards live does NOT link get no hover change at all; on this page all 12 cards are linked, so `:has(.z-explore)` matches every one of them. */ .zmit-services-grid .zmit-svc-card:has(.z-explore) { transition: transform .3s ease, border-color .3s ease, background-color .3s ease; } .zmit-services-grid .zmit-svc-card:has(.z-explore):hover, .zmit-services-grid .zmit-svc-card:has(.z-explore):focus-within { transform: translate(-10px, -10px); border-color: var(--zab-accent); } /* The fill change is live's inner-node rule; our card has no inner wrapper, so it lands on the card itself. Kept on the plain selector too so a card with no overlay link (none on this page) would still get live's fill. */ .zmit-services-grid .zmit-svc-card:hover, .zmit-services-grid .zmit-svc-card:focus-within { background: #d5e0f3; } @media (prefers-reduced-motion: reduce) { .zmit-services-grid .zmit-svc-card:has(.z-explore) { transition: none; } .zmit-services-grid .zmit-svc-card:has(.z-explore):hover, .zmit-services-grid .zmit-svc-card:has(.z-explore):focus-within { transform: none; } } /* ------------------------------------------------------------ S11 RECOGNITION BAND — 375 OVERFLOW FIX (measured, not guessed). The shared sheet pins the band's CTA with `.zmit-recognized-cta .z-btn { white-space: nowrap }`, so the label "Schedule Your Free IT Assessment" has a 334px min-content width. Below 681 the band collapses to a single `1fr` column, and a `1fr` track is minmax(auto, 1fr) — it cannot shrink under that 334px floor. At 375 the band's content box is only 263px, so the heading, copy, review logos AND the button all run 45px past the black box and are visibly clipped. `body { overflow-x: hidden }` swallows the page-level scrollbar, which is exactly why scrollWidth still reports 375 and a numbers-only check passes — it was caught by SCREENSHOT at 375, per CLAUDE.md's mobile rule. Letting the label wrap drops the min-content floor and the column fits. Measured identically on the charlotte reference at 375, so this is a shared-sheet interaction inherited by every city page, not something this page introduced; the fix is kept page-local because the shared sheet is owned by another session (CLAUDE.md). ------------------------------------------------------------ */ @media (max-width: 680px) { .zmit .zmit-recognized-cta .z-btn { white-space: normal; text-align: center; } } /* --------------------------------------------------------------------------- Owner request 2026-09-01: live renders this page's services block on WHITE (no ancestor background behind the cards on any of the three nested city pages) — the shared sheet's `.zmit-services { background: #f7f7fc }` is a city-family rule that does not apply here and created a visible white/gray boundary under the heading. Page-local override; shared sheet untouched. --------------------------------------------------------------------------- */ .zmit .zmit-services { background: #fff; } /* --------------------------------------------------------------------------- Owner request 2026-09-01: live's NESTED-city template does not reserve flow space for the hover CTA. The button is position:absolute (bottom 12px inside the card's 30px padding) and overlays the bottom padding on hover, so the card height is content-driven (live 256-279 at 1440 vs the 300 the in-flow reserve produced) and still cannot grow or shift on hover. Measured on live chicago, dallas AND houston with a real pointer: card height identical at rest and hovered, button position:absolute, bottom:12px. This replaces the in-flow margin-top:auto reservation that the older ROOT-level city pages correctly keep (their live template IS in-flow) - do not copy this block back to those pages. --------------------------------------------------------------------------- */ .zmit-services-grid .zmit-svc-card .zab-svc-cta, .zmit-services-grid .zmit-svc-card .zab-svc-more, .zmit-services-grid .zmit-svc-card .zmit-svc-more { position: absolute; left: 30px; right: 30px; bottom: 12px; margin-top: 0; padding-top: 0; } @media (max-width: 767px) { .zmit-services-grid .zmit-svc-card .zab-svc-cta, .zmit-services-grid .zmit-svc-card .zab-svc-more, .zmit-services-grid .zmit-svc-card .zmit-svc-more { left: 22px; right: 22px; } } /* ============================================================ S14 INDUSTRY CARDS — live c8a0882 / widget 920baf7, a `ucaddon_dynamic_flip_boxes` band that NONE of the 20 already-migrated pages implements. Built in the zab- namespace (CLAUDE.md: new Family B components take the zab- prefix — never invent a per-page one). GEOMETRY MEASURED ON THE LIVE 1440 DOM, not inferred from the markup and not copied off a sibling (there is no sibling). All numbers below are readings: .small-card-sec background #f7f7fc, padding 70px 0, band height 1487 .cust-container max-width 1400, x13, w1400 .services-heading text-align center, height 222 h2 34.7px / weight 400 / #1f1f1f p 15.5px / 25px / #000, 728 wide, centred (live centres it with `margin: 0 336px`; expressed here as max-width 728 + margin auto so it degrades) .card-container display flex, flex-wrap wrap, justify-content center, row-gap 15 / column-gap 15 .flip-card 260 x 270 fixed; row 1 lefts 33 / 308 / 583 / 858 / 1133 => step 275 = 260 + 15, FIVE per row, 16 cards over 4 rows, row pitch 285 sideBySide test |top0 - top1| = 0 (<80) and left1 (308) > left0 (33)+200 => TRUE, a real multi-column grid, never a stack .flip-card-front position absolute, inset 0, background #f1f1f7, radius 10, padding 12px 27px, flex column, align-items flex-start, justify-content center icon img width 75, padding 12, background #fff, radius 16 (border-box, so the tile renders 75 x 77) h3 16px / 19.2px / 600 / #111, margin 28px 0 0 li 14px / 23.1px / #111, native disc, margin-bottom 6, ul padding-left 20 / margin 12px 0 THE FLIP IS SWITCHED OFF ON THIS PAGE — this is the whole reason the band is not built as a flip. Live's page-level Elementor overrides, read out of the CSSOM on the live page, are: .flip-card-inner { transform:none!important; transition:none!important; transform-style:flat!important } .flip-card:hover .flip-card-inner { transform:none!important } .flip-card-back { display:none!important } .flip-card-front { backface-visibility:visible!important } .flip-card { perspective:none!important } .flip-card { cursor:pointer; transition:.3s } .flip-card:hover { transform:translateY(-6px); box-shadow:0 15px 35px rgba(0,0,0,.08) } So the visible component is a STATIC icon+title tile with a 6px lift on hover; the three-bullet back face is never displayed. That back-face copy is therefore NOT emitted in our markup — shipping keyword-rich text behind `display:none` is cloaking and fails the accessibility bar, and CLAUDE.md's quality bar outranks copying live's flaw. The bullets are recorded in the page's `$industries` array so the owner can decide to surface them. The band is rendered inside the house .z-container (1340 at x43) rather than live's 1400, so the five tracks are computed from the container instead of pinned at 260: (1340 - 4*15) / 5 = 256, 4px narrower than live and still five-up. Height stays live's 270. ============================================================ */ .zab-flip { background: #f7f7fc; } .zmit .zab-flip.z-section { padding: 70px 0; } .zab-flip-head { text-align: center; } .zmit .zab-flip-head h2 { font-size: 34.7px; font-weight: 400; line-height: 1.3; color: #1f1f1f; margin: 0; } .zmit .zab-flip-head p { font-size: 15.5px; font-weight: 400; line-height: 25px; color: #000; max-width: 728px; margin: 0 auto; } .zab-flip-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; margin-top: 0; } .zab-flip-card { background: #f1f1f7; border-radius: 10px; padding: 12px 27px; min-height: 270px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; transition: transform .3s ease, box-shadow .3s ease; } .zab-flip-card:hover { transform: translateY(-6px); box-shadow: 0 15px 35px rgba(0, 0, 0, .08); } @media (prefers-reduced-motion: reduce) { .zab-flip-card { transition: none; } .zab-flip-card:hover { transform: none; } } .zab-flip-ico { display: block; width: 75px; height: 77px; padding: 12px; background: #fff; border-radius: 16px; box-sizing: border-box; object-fit: contain; } .zmit .zab-flip-card h3 { font-size: 16px; font-weight: 600; line-height: 19.2px; color: #111; margin: 28px 0 0; } /* ------------------------------------------------------------ S06 RECOGNITION LOGOS — the two breakpoints where an inherited rule silently inflates or squashes the band. Both measured, not guessed. 768: live's column-gap for the three marks is ZERO and the marks total 130 + 203 + 241 = 574px, which fits the 613px copy track. The clone's inherited 36px gap needs 646px in a 641px track, so the last mark wraps and the band grows ~106px. Zero the column gap and let the row gap do the work. 375: live keeps the marks at FULL size (130/203/241 x 70) across three rows. The clone capped them at max-width 96 / max-height 26, which collapses all three into one 26px row — and `max-height` beats `height`, so releasing only max-width does nothing. BOTH caps are released above in the base rule. ------------------------------------------------------------ */ @media (max-width: 1080px) and (min-width: 681px) { .zmit .zmit-recognized-logos { display: flex; flex-wrap: wrap; column-gap: 0; row-gap: 20px; align-items: center; } } @media (max-width: 680px) { /* Measured at 375: the three marks sit on three CENTRED rows (lefts 123 / 86 / 67 in a 375 viewport), each at full 70px height. */ .zmit .zmit-recognized-logos { display: flex; flex-wrap: wrap; column-gap: 0; row-gap: 20px; align-items: center; justify-content: center; } .zmit .zmit-recognized-logos img { height: 70px; width: auto; max-width: none; max-height: none; object-fit: contain; } } /* S14 flip band, measured at the other two widths on live: 768 — .small-card-sec padding 70px 20px; container 713 at x20; TWO cards per row, still 260 x 270, gap 15 (lefts 109 / 384). 375 — .small-card-sec padding 50px 20px; container 335 at x20; ONE card per row at 335 x 250 (the tile shortens by 20px), gap 15; heading h2 stays 34.7px but its line-height drops to 40px. Live's 20px horizontal padding is NOT carried: live's own .cust-container has no gutter, ours is the shared .z-container which already supplies 30px. Adding live's 20 on top would start this band's content at x63 while every other section starts at x43, which is the alignment check in CLAUDE.md. Only the VERTICAL rhythm is taken from live here. */ @media (max-width: 1080px) { .zmit .zab-flip.z-section { padding: 70px 0; } .zab-flip-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 680px) { .zmit .zab-flip.z-section { padding: 50px 0; } .zab-flip-grid { grid-template-columns: 1fr; } .zab-flip-card { min-height: 250px; } .zmit .zab-flip-head h2 { line-height: 40px; } }