/* ============================================================ Offshore IT Outsourcing — page-specific layer. Loads AFTER css/it-managed-services-zazz.css. Built band by band. Where a component already existed in this repo it is REUSED and only this page's measured deltas are written here; the reference for each band is named in its own comment. New components in this family take the `zab-` prefix. MEASURED ON LIVE AT 1440 — window.innerWidth === 1440 asserted in the same evaluation as every reading below, and the section list was taken from a depth-aware `.e-con` walk with NO height/display filter: - Live's boxed containers run 1380 at x30 (some bands 1400 at x20 and the flip-card band full-bleed 1440). The house 1400px .z-container is KEPT — owner decision 2026-08-26, CLAUDE.md section 7 "Never widen the content box". Percentage / fr column splits carry the proportions instead. - Hero H2 measured 54px/600/64.8px white, 766 wide at x30. Rendered at 42px here: owner deviation, applied across this page family. - Services grid: FOUR columns at 1440 (live's own grid-template-columns on .uc_post_grid_style_one_wrap). - Compare: 3 columns, FIVE rows. Zazz-column hairline written row-count-INDEPENDENT. - Stats: dark #262338; copy column 443 at x30 | FOUR counters right in a 2x2 grid (399px cells at x523 / x942, 20px gap). Number 57px. - Elevate band: #eff0f7, copy 665 at x30 | 665 at x745, cards 2x2 322.5. - Empower band: #fcfcfc, copy 665 at x30 | 665x400 photo at x745. - Industries: band #f7f7fc, 70px padding; flip cards 260x270 radius 10, FIVE per row 15px apart, front padding 12px 27px, back padding 11px. - FAQ: 14 items across live's TWO accordion widgets, so the forced column break sits on nth-child(7). - Final CTA figure: 500x576 at x910. - Recognition band shell (rgb(20,20,20), radius 10, padding 40) is already correct in the shared sheet and is deliberately NOT re-specified here. Owner-approved deviations from live, tagged inline: hero headline 42px not live's 54, contact card 620 wide, stat number left-aligned, marquee chips bounded on both axes, the 1400px container. Deliberate; do not "fix" back. LIVE DEFECT NOT CARRIED: on live this page's contact band renders its heading and copy in #fcfcfc on a WHITE background, so both are invisible (confirmed with a 1440 screenshot of the band). The shared sheet's Family A blue gradient band is kept instead — the accessibility bar in CLAUDE.md outranks reproducing an unreadable-contrast flaw. Split rule: a given CSS property for a given selector lives in exactly one of the two sheets, never both. ============================================================ */ /* ------------------------------------------------------------ BRAND TOKENS taken from live's Elementor globals ------------------------------------------------------------ */ .zmit { --zab-ink: #14142b; /* live body/heading ink */ --zab-accent: #0161ff; /* --e-global-color-accent */ --zab-body: rgba(20, 20, 20, .7); /* --e-global-color-text */ --zab-line: rgba(6, 0, 28, .12); /* compare-table hairline */ --zab-fill: #eff0f7; /* card fill (uc_content / icon-box bg) */ --zab-dark: #262338; /* dark 4-up panel + stats band */ } /* ============================================================ HERO — the approved Family A geometry; only the artwork is this page's. Live paints the banner as a plain with object-fit:fill (stretched, not cropped) — center/100% 100% is the background equivalent. ============================================================ */ .zmit-hero::before { background: url('https://dahqbtk1vlskk.cloudfront.net/wp-content/uploads/2025/08/07125858/Offshore-IT-Outsourcing-Banner-Image-scaled.webp') center/100% 100% no-repeat; background-color: #05070f; } .zmit-hero-left { padding-bottom: 56px; } @media (min-width: 1081px) { .zmit .zmit-hero-crumb { padding-top: 17px; margin-bottom: 18px; } /* 766 / 100 / 508 of live's 1380 box, as percentages. */ .zmit .zmit-hero-grid { grid-template-columns: 55.51% 36.81%; gap: 7.68%; align-items: stretch; padding: 28px 0 0; } .zmit .zmit-hero-left { padding-bottom: 50px; align-self: start; } .zmit-hero .zmit-hero-pill { margin-bottom: 20px; } /* Owner request 2026-08-26: hero headline + sub reduced below live's 54px/16px (live here measures 54px/64.8px). Deliberate deviation, applied on request across this page family. */ .zmit-hero .zmit-hero-headline { margin-bottom: 20px; font-size: 42px; line-height: 1.18; } .zmit-hero .zmit-hero-sub { max-width: 766px; color: #fff; margin-bottom: 20px; font-size: 15px; line-height: 1.6; } .zmit-hero .zmit-hero-cta { margin-bottom: 0; } .zmit-hero .zmit-hero-cta-btn { font-size: 16px; line-height: 16px; font-weight: 500; padding: 13px 35px; gap: 20px; background: #f2f7ff; border: 0; min-height: 42px; } .zmit-hero .zmit-hero-cta-btn .zmit-hero-cta-ico { line-height: 12px; } .zmit-hero .zmit-hero-cta-btn .zmit-hero-cta-ico svg { width: 16px; height: 12px; } .zmit-hero .zmit-hero-cta-btn:hover { background: #e2ecff; } /* Live's white hero CARD, found by its own styling (white fill, card-ish width, near the top) and never by walking up from the .hsfc-Form inside it — those two boxes measure very differently. It is stretched to the hero row and overhangs the banner into the logo strip: live's own composition, not a bug. */ .zmit .zmit-hero-right { align-self: stretch; margin: -44px 0 -95.55px; } .zmit-form-card { margin: 0; height: 100%; transform: none; padding: 20px 25px 20px 20px; } .zmit-form-card h3 { margin-bottom: 12px; } /* Scoped to the wrapper: .zmit-hsform is on THREE forms per page (hero, contact band, footer newsletter) and a bare rule floors all three. */ .zmit-form-card .zmit-hsform { min-height: 0; } .zmit-hsform .hsfc-Row { margin-bottom: 8px !important; } .zmit-hsform input, .zmit-hsform textarea, .zmit-hsform select, .zmit-hsform .hsfc-TextInput, .zmit-hsform .hsfc-TextareaInput { padding: 8px 12px !important; } .zmit-hsform .hsfc-TextareaInput, .zmit-hsform textarea { min-height: 56px !important; } .zmit-hsform .hsfc-Button, .zmit-hsform button[type="submit"] { padding: 10px !important; } } /* Scroll cue — bare 30px chevron, no disc, bobbing (reference-approved). */ .zmit-hero .zmit-hero-scroll { left: 50%; bottom: 18px; width: 30px; height: 30px; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: rgba(255, 255, 255, .66); animation: zab-float 3s ease-in-out infinite; } @keyframes zab-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } @media (prefers-reduced-motion: reduce) { .zmit-hero .zmit-hero-scroll { animation: none; transform: none; } } .zmit-hero .zmit-hero-scroll svg { width: 30px; height: 30px; } .zmit-hero .zmit-hero-scroll:hover { background: none; color: #fff; } /* Trust strip — live's chip row is 70px. Owner request 2026-08-26: every marquee logo bounded on BOTH axes, so the chip height and the max-* pair move together and `height` is never set on the image itself. */ .zmit .zmit-trust-band { padding: 15px 0 40px; } .zmit .zmit-trust { width: min(792px, 100%); max-width: 792px; margin: 0; } .zmit .zmit-trust-chip { display: flex; align-items: center; justify-content: center; height: 70px; width: 180px; } .zmit .zmit-trust-chip img { height: auto; width: auto; max-height: 62px; max-width: 168px; object-fit: contain; } /* ============================================================ SHARED PAGE BUTTON — label first, then arrow (live's own order). ============================================================ */ .zmit .zab-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 15.38px; font-weight: 600; line-height: 16px; color: #fcfcfc; background: var(--zab-accent); border-radius: 5px; padding: 15px 30px; text-decoration: none; transition: background .2s ease; } .zmit .zab-btn:hover { background: #141414; color: #fcfcfc; } .zmit .zab-btn-ico { display: inline-flex; align-items: center; order: 2; } .zmit .zab-btn-ico svg { display: block; width: 16px; height: 10px; } .zmit .zab-btn-ico svg path { fill: currentColor; } /* stats CTA: #0161ff label on a #f2f7ff pill, 13px 35px, 8px radius */ .zmit .zab-btn-light { background: #f2f7ff; color: var(--zab-accent); font-size: 16px; line-height: 16px; font-weight: 500; padding: 13px 35px; border-radius: 8px; gap: 20px; } .zmit .zab-btn-light:hover { background: #e2ecff; color: var(--zab-accent); } /* empower CTA: live's own #0161ff button, 8px radius */ .zmit .zab-btn-accent { background: var(--zab-accent); color: #f2f7ff; border-radius: 8px; padding: 15px 30px; font-size: 16px; } /* final CTA: accent pill (live's button here is the accent, not a black square) */ .zmit .zab-btn-final { background: var(--zab-accent); color: #f2f7ff; border-radius: 8px; padding: 15px 30px; font-size: 16px; } .zmit .zab-btn-final:hover { background: #141414; color: #fcfcfc; } /* ============================================================ SERVICES — FOUR columns / 30px gap (live's own column count AND gap on this page: read off .uc_post_grid_style_one_wrap at 1440). Card 30px padding, h3 18px/23.4px, bullets 12px/19.8px, ul margin 12px 0 — all measured on live. Card internals are the measured Family A grid-card design (light-lavender fill, 1px border, 10px radius) which the shared sheet already owns. ============================================================ */ .zmit .zmit-services.z-section { padding: 30px 0; } .zmit-services-head { margin-bottom: 14px; } .zmit .zmit-services-head h2.z-eyebrow { font-size: 16.31px; font-weight: 700; line-height: 25.2px; color: var(--zab-ink); text-transform: none; letter-spacing: 0; margin: 0 0 6px; display: inline-block; } .zmit .zab-svc-lead { font-size: 34.7px; font-weight: 400; line-height: 43px; color: var(--zab-ink); margin: 0; } .zmit-services-grid { grid-template-columns: repeat(4, 1fr); gap: 30px; } .zmit-services-grid .zmit-svc-card { /* Flex COLUMN so the hover CTA pins to the card bottom with margin-top:auto (live's own mechanism); display:block would tie the CTA's y to the bullet count and break row alignment. */ display: flex; flex-direction: column; background: var(--zab-fill); border: 1px solid #eff0f7; border-radius: 10px; padding: 30px; text-decoration: none; transition: border-color .3s ease, background-color .3s ease; } .zmit-services-grid .zmit-svc-card h3 { font-size: 18px; font-weight: 700; line-height: 23.4px; color: var(--zab-ink); margin: 0 0 20px; transition: color .2s ease; } /* NO list-style and NO left padding: the shared sheet draws the bullet itself (li::before over li { padding-left: 18px }) — adding a native disc gives TWO dots per bullet. */ .zmit-services-grid .zmit-svc-card ul { margin: 12px 0; padding: 0; list-style: none; } .zmit-services-grid .zmit-svc-card li { font-size: 12px; font-weight: 400; line-height: 19.8px; color: var(--zab-ink); margin-bottom: 0; } .zmit-svc-card.no-image .zmit-svc-media { display: none; } /* HOVER — the industry-template values (border #eff0f7 -> #0161ff, fill #eff0f7 -> #d5e0f3, CTA hidden -> shown, transform NONE). This page's cards do not lift; the city template's translate(-10px,-10px) must NOT be carried here without re-measuring. :focus-within beside every :hover — the overlay anchor is the only tab stop, so keyboard users must also see the CTA appear. Keyed on BOTH .has-link and :has(.z-explore) so it holds whether or not the markup carries the class. */ /* SS1 hover-lift + no-reflow CTA (owner request 2026-09-23): add the translate lift. This page already reserves the CTA via visibility (no reflow). Deliberate owner deviation from the "no lift" note above - do NOT revert. Matches backend-outsourcing-services. */ .zmit-services-grid .zmit-svc-card.has-link, .zmit-services-grid .zmit-svc-card:has(.z-explore) { transition: border-color .3s ease, background-color .3s ease, transform .3s ease; } .zmit-services-grid .zmit-svc-card.has-link:hover, .zmit-services-grid .zmit-svc-card.has-link:focus-within, .zmit-services-grid .zmit-svc-card:has(.z-explore):hover, .zmit-services-grid .zmit-svc-card:has(.z-explore):focus-within { border-color: #0161ff; background: #d5e0f3; transform: translate(-10px, -10px); } /* Live toggles the CTA display:none -> block, but display:none makes the card GROW on hover and makes the bottom-gap assertion meaningless (a display:none box measures 0). House rule (CLAUDE.md section 7): keep the box and hide it with `visibility`, with `margin-top: auto` pinning the reserved row to the card foot and `padding-top` supplying the minimum gap — so every card's CTA sits on the same line whatever its bullets wrap to, and the card height is identical resting and hovered. */ .zmit-services-grid .zmit-svc-card .zmit-svc-cta { display: flex; align-items: center; height: 34px; visibility: hidden; margin-top: auto; padding-top: 10px; } .zmit-services-grid .zmit-svc-card.has-link:hover .zmit-svc-cta, .zmit-services-grid .zmit-svc-card.has-link:focus-within .zmit-svc-cta, .zmit-services-grid .zmit-svc-card:has(.z-explore):hover .zmit-svc-cta, .zmit-services-grid .zmit-svc-card:has(.z-explore):focus-within .zmit-svc-cta { visibility: visible; } .zmit-svc-cta .z-svc-more { display: inline-flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 700; line-height: 24px; color: #000; text-decoration: none; } .zmit-svc-cta .z-svc-more:hover, .zmit-svc-cta .z-svc-more:focus { color: #000; text-decoration: none; } .zmit-svc-cta .ico { display: inline-flex; align-items: center; } .zmit-svc-cta svg { display: block; width: 14px; height: 8px; } /* ============================================================ KEY CHALLENGES — reused from the law-firms .zab-problems component. Live splits the items across TWO icon-list widgets (612 at x30 | 708 at x702); rendered here as an even 1fr 1fr pair inside the house container. ============================================================ */ .zmit .zab-problems.z-section { background: #fff; padding: 30px 0; } .zmit .zab-problems-head { font-size: 33.05px; font-weight: 600; line-height: 43px; color: var(--zab-ink); text-align: center; margin: 0 0 30px; } .zab-problems-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; margin-bottom: 30px; } .zab-problems-list { list-style: none; margin: 0; padding: 0; } .zab-problems-list li { display: flex; align-items: flex-start; gap: 6px; padding-bottom: 7.5px; margin-top: 7.5px; } .zab-problems-list li:first-child { margin-top: 0; } .zab-problems-list li:last-child { padding-bottom: 0; } .zab-tick { flex: 0 0 22px; margin-top: 1px; } .zab-tick svg { display: block; width: 22px; height: 22px; fill: #046bd2; } .zab-tick-text { font-size: 18px; font-weight: 500; line-height: 29.7px; color: var(--zab-ink); } .zmit .zab-problems-answer { font-size: 24px; font-weight: 400; line-height: 43.2px; color: var(--zab-ink); text-align: center; margin: 0 0 30px; padding-bottom: 15px; } .zab-problems-cta { text-align: center; } .zmit .zab-problems-cta .zab-btn { background: #f2f7ff; color: var(--zab-accent); font-size: 16px; line-height: 16px; font-weight: 500; padding: 13px 35px; border-radius: 8px; gap: 20px; } .zmit .zab-problems-cta .zab-btn:hover { background: #e2ecff; color: var(--zab-accent); } /* ============================================================ COMPARISON HEADING — live ships it as its own heading-only sibling band. ============================================================ */ .zmit .zab-cmp-head.z-section { background: #fff; padding: 20px 0; } .zmit .zab-cmp-head h2 { font-size: 36.8px; line-height: 36.8px; font-weight: 400; text-align: left; color: #141414; margin: 0; } /* ============================================================ COMPARISON TABLE — 3 columns, FIVE rows on this page. Live has NO mobile-only accordion sibling for this band (no elementor-hidden-* classes on the container), so below 1081 the three columns simply stack. ============================================================ */ .zmit .zab-cmp.z-section { background: #fff; padding: 0; } .zab-cmp-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; } .zab-cmp-col { display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; } .zmit .zab-cmp-col-head { background: #fff; padding: 20px 30px; margin: 0; height: 72px; display: flex; align-items: center; font-size: 24px; font-weight: 600; line-height: 32px; color: #141414; } .zmit .zab-cmp-cell { margin: 0; padding: 20px 30px; height: 100px; display: flex; align-items: center; font-size: 16px; font-weight: 500; line-height: 23px; color: #06001c; border: 1px solid var(--zab-line); border-top-width: 0; } .zab-cmp-cell a { color: var(--zab-accent); } /* ONE flex item per cell: an inline link plus a bare text node would become two items and wrap independently, scrambling the sentence. */ .zmit .zab-cmp-cell > span { display: block; width: 100%; } /* Only the FIRST body cell of each column is rounded and carries the top border. */ .zab-cmp-col .zab-cmp-cell:first-of-type { border-top-width: 1px; border-radius: 10px 10px 0 0; } /* Criteria column: live's 3-layer gradient (a 70% white veil over two blue gradients). Cells transparent so it shows. NEVER flatten it. */ .zab-cmp-col-0 { background: linear-gradient(0deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)), linear-gradient(102.79deg, #ecf1eb -4.21%, #aec8fd 44.41%, #84c3fc 93.03%), linear-gradient(102.29deg, #ecf1eb 8.75%, #aec8fd 45.11%, #84c3fc 81.46%); } .zab-cmp-col-0 .zab-cmp-cell { background: transparent; } .zab-cmp-col-1 .zab-cmp-cell { background: var(--zab-fill); } .zab-cmp-col-2 .zab-cmp-cell { background: #f9fcff; } /* Live's alternate-row stripes, written nth-of-type(even) and never an enumerated list — an enumerated list silently drops off the bottom rows of a longer table. */ .zab-cmp-col-1 .zab-cmp-cell:nth-of-type(even) { background: #f9fcff; } .zab-cmp-col-2 .zab-cmp-cell:nth-of-type(even) { background: #fff; } /* Zazz-column hairline on EVERY row — row-count-independent house rule. */ .zab-cmp-col-1 .zab-cmp-cell { border-top-width: 1px; } /* ============================================================ STANDARDS / CERTIFICATIONS — measured at 1440: BLACK band (rgb(0,0,0)), centred heading (850 wide) + centred copy (800 wide), then SIX badge PNGs in a 6-up row 226.67px wide each. The dark tile is BAKED INTO each PNG, so this is a 16px-gap grid at NATURAL image aspect. gap:0 plus object-fit:fill would fuse them into one smeared uneven bar — that exact defect shipped on seven pages once (CLAUDE.md). DARK BAND => LIGHT COPY. ============================================================ */ .zmit .zab-certified.zab-certified-dark.z-section { background: #000; padding: 60px 0 70px; } .zmit .zab-certified-dark h2 { font-size: 40px; font-weight: 600; line-height: 56px; color: #fcfcfc; text-align: center; max-width: 880px; margin: 0 auto; } .zmit .zab-certified-dark > .z-container > p { font-size: 16px; font-weight: 400; line-height: 26px; color: #f7f7fc; text-align: center; max-width: 800px; margin: 10px auto 0; } .zmit .zab-certified-dark .zab-certified-badges { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 40px; align-items: center; } .zmit .zab-certified-dark .zab-certified-badges img { width: 100%; height: auto; display: block; } /* ============================================================ BOOK A FREE CONSULTATION — heading 30px/400/39px CENTRED. The embed geometry is the shared sheet's. ============================================================ */ .zmit .zmit-bookcal.z-section { padding: 30px 0; } .zmit .zmit-bookcal h2 { font-size: 30px; font-weight: 400; line-height: 39px; color: var(--zab-ink); text-align: center; margin-bottom: 12px; } .zmit .zmit-bookcal p { font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--zab-ink); text-align: center; max-width: 1000px; margin: 0 auto; } .zmit .zmit-bookcal-embed { margin-top: 20px; } /* ============================================================ RECOGNIZED — dark rgb(20,20,20) box, radius 10, padding 40. All three are ALREADY CORRECT in the shared sheet and are deliberately NOT re-specified here. Only the type and the logo row are this page's. ============================================================ */ .zmit .zmit-recognized.z-section { padding: 32px 0 18px; } .zmit .zmit-recognized-copy h2 { font-size: 30px; font-weight: 300; line-height: 42px; color: #fff; } .zmit .zmit-recognized-copy p { font-size: 16px; font-weight: 300; line-height: 1.7; color: #f2f7ff; max-width: 640px; } .zmit-recognized-logos { gap: 36px; } .zmit-recognized-logos img { height: 50px; width: auto; } .zmit-recognized-cta .z-btn { background: #fcfcfc; color: #141414; border-radius: 8px; padding: 20px 28px; font-weight: 600; } .zmit-recognized-cta .z-btn:hover { background: #b3d0ff; color: #141414; } /* ============================================================ STRUCTURED APPROACH — TWO COLUMNS, confirmed with the sideBySide test at 1440: copy column 700 at x20 (inner 640 at x50) and the accordion column 700 at x720 (inner 640 at x750) share a top, and 720 > 20 + 200. Accordion is native
, all items CLOSED on load (live's own state); item header #262338 with #fcfcfc label, padding 25, radius 5, 77 tall. DARK PANEL => LIGHT COPY. Reused from the MSSP page's .zab-proc component. ============================================================ */ .zmit .zab-proc.z-section { background: #fff; padding: 50px 0 30px; } .zab-proc-grid { display: grid; grid-template-columns: 1fr; gap: 30px; } .zmit .zab-proc-copy h2 { font-size: 30px; font-weight: 400; line-height: 39px; color: #141414; margin: 0 0 20px; } .zmit .zab-proc-copy p { font-size: 16px; font-weight: 400; line-height: 26.4px; color: var(--zab-ink); margin: 0 0 20px; } .zmit .zab-proc-copy p:last-child { margin-bottom: 0; } .zab-proc-copy a { color: var(--zab-accent); } .zab-proc-acc { display: flex; flex-direction: column; gap: 7px; } .zab-proc-item { background: var(--zab-dark); border-radius: 5px; overflow: hidden; } .zab-proc-q { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 25px; cursor: pointer; list-style: none; min-height: 77px; font-size: 18px; font-weight: 400; line-height: 27px; color: #fcfcfc; } .zab-proc-q::-webkit-details-marker { display: none; } .zab-proc-sign { position: relative; flex: 0 0 16px; height: 16px; } .zab-proc-sign::before, .zab-proc-sign::after { content: ''; position: absolute; background: #fcfcfc; } .zab-proc-sign::before { left: 0; top: 7px; width: 16px; height: 2px; } .zab-proc-sign::after { left: 7px; top: 0; width: 2px; height: 16px; transition: opacity .2s ease; } .zab-proc-item[open] .zab-proc-sign::after { opacity: 0; } .zab-proc-a { padding: 0 25px 25px; } .zmit .zab-proc-a p { font-size: 16px; font-weight: 400; line-height: 26.4px; color: #f7f7fc; margin: 0; } .zab-proc-a a { color: #a9c9ff; } /* Guard (owner defect, 2026-09-21): a closed row must never paint its answer. The UA already hides details content and live opens NONE of these rows at rest, but the owner saw every row open at once with all answers showing, so the hiding is stated explicitly here rather than left to the engine. Live, measured at 1440: row 77 collapsed, summary padding 25 / radius 5 / background #262338, the answer inside that same dark card, rows 7px apart, one open at a time. */ .zab-proc-acc details:not([open]) > *:not(summary) { display: none; } @media (min-width: 1081px) { /* 700 | 700 of live's 1400 row; live's own 60px inner gutter comes from the two 30px paddings, so a 50px grid gap reproduces the same rhythm inside the narrower house container. */ .zab-proc-grid { grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; } } /* ============================================================ STATS — #262338; copy column 443 at x30 | FOUR counters right in a 2x2 grid (399px cells at x523 / x942, 20px gap). Number 57px ON TOP, label below. FOUR stats => TWO columns (CLAUDE.md: a 4-stat page left on the shared 3-col default renders a broken 3+1). DARK BAND => LIGHT COPY. ============================================================ */ .zmit-stats { background: var(--zab-dark); } .zmit .zmit-stats.z-section { margin: 30px 0; padding: 60px 0; } .zmit-stats-copy { max-width: none; } .zmit .zmit-stats-copy h2.zmit-stats-eyebrow { font-size: 16px; font-weight: 400; line-height: 19px; color: #fff; margin: 0 0 18px; display: block; letter-spacing: normal; text-transform: none; } .zmit .zmit-stats-copy h3 { font-size: 34px; font-weight: 400; line-height: 44.2px; color: #fcfcfc; margin: 0 0 40px; } @media (min-width: 1081px) { .zmit-stats-layout { grid-template-columns: 443fr 887fr; gap: 50px; align-items: center; } .zmit-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 44px; align-items: start; } } .zmit-stat { display: flex; flex-direction: column; } .zmit-stat p { font-size: 14px; font-weight: 400; line-height: 21px; color: #fcfcfc; margin: 0; } .zmit-stat .big { /* Owner request 2026-08-31: the stat NUMBER is left-aligned so it shares a left edge with its label. Live centres the number inside the same column while the label is start-aligned. Deliberate deviation from live — do NOT "fix" this back to center. */ order: -1; text-align: left; font-size: 57px; font-weight: 600; color: #76aaff; line-height: 57px; margin: 0 0 18px; } /* Live's own "Upto" prefix and the %/days suffixes sit inline with the number. */ .zmit-stat .big .pct { font-size: 57px; font-weight: 600; } .zmit-stat .big .pct:first-child { font-size: 24px; margin-right: 8px; } /* ============================================================ TESTIMONIALS — heading 34px/300/44.2px LEFT. ============================================================ */ .zmit .zmit-testi.z-section { padding: 30px 0; } .zmit-testi h2 { font-size: 34px; font-weight: 300; line-height: 44.2px; color: var(--zab-ink); margin-bottom: 40px; } .zmit-testi-card { background-color: transparent; background-image: linear-gradient(100deg, #eef6f1 0%, #dce9fb 34%, #93b8fb 68%, #2f7bff 100%); /* DEFECT FIX (owner, 2026-09-21): the card is CONTENT-DRIVEN. It used to carry min-height: 352px copied off live's own card height, and the shared sheet adds min-height: 268px + display:flex/align-items:center - so a short quote was centred in a fixed box and left a large blank band under the text (measured 106 px of dead space top AND bottom at 1440). Both floors are cleared here. The slides are stacked in ONE grid cell instead of the shared display:none/block swap, so the deck's height is the tallest slide and the auto-advance below cannot make the page jump. */ min-height: 0; display: grid; align-items: center; } .zmit-testi-card > .zmit-testi-slide { grid-area: 1 / 1; display: block; visibility: hidden; } .zmit-testi-card > .zmit-testi-slide.is-active { visibility: visible; } .zmit-testi-lead { font-size: 20px; line-height: 1.4; color: #1c1a33; margin-bottom: 18px; } /* ============================================================ COPY | 2x2 ICON CARDS — measured at 1440: #eff0f7, copy 665 at x30 | 50 gap | 2x2 card grid 665 at x745 (cells 322.5, gap 20), cards TRANSPARENT (the band is the fill), 20px padding, 50px icon. Reused verbatim from the law-firms / MSSP .zab-elevate component — live serves the same container shape and the measured geometry matches. ============================================================ */ .zmit .zab-elevate.z-section { background: var(--zab-fill); padding: 30px 0; } .zab-elevate-grid { display: grid; grid-template-columns: 1fr; gap: 30px; } .zmit .zab-elevate-copy h2 { font-size: 34px; font-weight: 400; line-height: 1.3em; color: var(--zab-ink); margin: 0 0 24px; } .zmit .zab-elevate-copy p { font-size: 18px; font-weight: 400; line-height: 27px; color: var(--zab-ink); margin: 0 0 24px; } .zmit .zab-elevate-copy p:last-child { margin-bottom: 0; } .zab-elevate-copy a { color: var(--zab-accent); } .zab-elevate-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 20px; align-content: start; } .zab-elevate-card { padding: 20px; } .zab-elevate-ico { display: block; margin-bottom: 16px; } .zab-elevate-ico svg { display: block; width: 50px; height: 50px; } .zmit .zab-elevate-card h3 { font-size: 20px; font-weight: 700; line-height: 1.3; color: #141414; margin: 0 0 12px; } .zmit .zab-elevate-card p { font-size: 15px; font-weight: 400; line-height: 22.5px; color: var(--zab-body); margin: 0; } .zab-elevate-card a { color: var(--zab-accent); } @media (min-width: 1081px) { .zab-elevate-grid { grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; } } /* ============================================================ SUCCESS STORIES — card + 50px left-aligned brand-logo treatment (approved Family A rule; a missing logo is a visible defect, never a fallback). ============================================================ */ .zmit .zmit-stories.z-section { padding: 23px 0; } .zmit-stories h2 { font-size: 29px; font-weight: 300; line-height: 37.7px; color: #141414; margin-bottom: 30px; } .zmit-story { background: #f5f6fb; border-radius: 10px; overflow: hidden; } .zmit-story-img img { height: 250px; } .zmit-story .body .zmit-story-logos { min-height: 50px; margin: 0 0 14px; display: flex; align-items: center; } .zmit-story .body .zmit-story-logo { display: block; height: 50px; width: auto; max-width: 150px; object-fit: contain; object-position: left center; } .zmit-story .body { padding: 20px; } .zmit-story h3 { font-size: 18px; font-weight: 700; line-height: 1.35; } .zmit-story p { font-size: 14px; line-height: 1.6; } /* ============================================================ INDUSTRIES — measured at 1440: band #f7f7fc, 70px vertical padding; heading 34.7px/400 #1f1f1f centred; lead 15.5px/400/25px centred (728 wide); flip cards 260x270 radius 10, FIVE per row 15px apart, front padding 12px 27px, back padding 11px, front #f1f1f7 / back #fff. The 3D flip mechanism itself is already in the shared sheet (.zmit-ind-inner / -front / -back) — only this band's sizing and type are set here. ============================================================ */ .zmit .zmit-industries { background: #f7f7fc; } .zmit .zmit-industries.z-section { padding: 70px 0; } .zmit-industries-head { text-align: center; max-width: 728px; margin: 0 auto 48px; } .zmit .zmit-industries-head h2 { font-size: 34.7px; font-weight: 400; line-height: 1.3; color: #1f1f1f; margin: 0 0 18px; } .zmit .zmit-industries-head p.z-lead { font-size: 15.5px; font-weight: 400; line-height: 25px; color: #000; margin: 0; } .zmit-industries-head a { color: var(--zab-accent); } .zmit-industries-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 15px; } .zmit .zmit-industries .zmit-ind-card { min-height: 270px; border-radius: 10px; } .zmit-ind-front { background: #f1f1f7; border-radius: 10px; padding: 12px 27px; } .zmit-ind-back { background: #fff; border-radius: 10px; padding: 11px; } .zmit .zmit-ind-front h3 { font-size: 16px; font-weight: 600; line-height: 19.2px; color: #111; } .zmit .zmit-ind-back h3 { font-size: 13px; font-weight: 700; line-height: 1.3; color: #1c1a33; } .zmit .zmit-ind-back li { font-size: 11.5px; line-height: 1.4; color: #333; } .zmit-ind-back a { color: var(--zab-accent); } .zmit .zmit-ind-ic img { width: 48px; height: 48px; object-fit: contain; } /* ============================================================ COPY + CTA | PHOTO — measured at 1440: #fcfcfc, copy 665 at x30 | 50 gap | 665x400 photo at x745, radius 10, cover. Reused from the law-firms .zab-empower component. ============================================================ */ .zmit .zab-empower.z-section { background: #fcfcfc; padding: 30px 0; } .zab-empower-grid { display: grid; grid-template-columns: 1fr; gap: 30px; } .zmit .zab-empower-copy h2 { font-size: 34px; font-weight: 400; line-height: 44.2px; color: var(--zab-ink); margin: 0 0 40px; } .zmit .zab-empower-copy p { font-size: 16px; font-weight: 400; line-height: 26.4px; color: var(--zab-ink); margin: 0 0 26px; } .zab-empower-copy a { color: var(--zab-accent); } .zmit .zab-empower-copy .zab-btn { margin-top: 14px; } .zab-empower-media img { display: block; width: 100%; height: auto; aspect-ratio: 658 / 400; object-fit: cover; border-radius: 10px; } @media (min-width: 1081px) { /* align-items START, not center: live pins the 400-tall photo to the TOP of its column, so centring it drops the photo and the sideBySide test fails on the top comparison. */ .zab-empower-grid { grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; } } /* ============================================================ FAQ — #eff0f7 band, two columns split 7 / 14 minus 7. NEVER a two-value padding shorthand here (it zeroes the shared 22px sides and the first character looks clipped). ============================================================ */ .zmit-faq { background: var(--zab-fill); } .zmit .zmit-faq.z-section { padding: 30px 0; } .zmit-faq h2 { font-size: 34px; font-weight: 400; line-height: 44.2px; color: var(--zab-ink); margin-bottom: 30px; } .zmit-faq-q { padding: 25px 22px; font-size: 18px; line-height: 27px; } .zmit-faq-item { margin-bottom: 7px; } .zmit-faq-item.open .zmit-faq-a-inner { padding: 0 22px 40px; } .zmit-faq-list { column-gap: 30px; padding-right: 25px; } /* Live ships TWO explicit accordion widgets; the forced break reproduces live's own split. Gated above the phone breakpoint: with column-count:1 a forced break would create a second column. */ @media (min-width: 681px) { .zmit-faq-item:nth-child(7) { break-after: column; } } /* ============================================================ FINAL CTA — no band fill of its own; copy column left with the accent CTA and a 500x576 consultant figure right (measured at x910). The SHARED sheet absolutely positions this figure for the REFERENCE band (position:absolute; right:56px; bottom:0; height:320px). This page's band is a two-column row, so that MUST be reset here — otherwise the image leaves its cell, the cell collapses to 0 height, and it covers the copy. ============================================================ */ /* Mobile keeps the tight 30px lead-in: at 430 live stacks the figure under the copy with no overhang, so it needs no clearance (live's own 430 margin is 50px 0). The desktop 150px/80px lives in the min-width:1081px block below. */ .zmit .zmit-final.z-section { margin: 30px 0 0; padding: 0; background: #fff; } /* Live's row IS painted - read it with the band IN VIEW and settled, or Seraphinite's deferred CSS reports backgroundImage:none and you copy a flatness live does not have. Measured 2026-09-10 at 1440. */ .zmit-final-banner { background: linear-gradient(102.29deg, #ecf1eb 8.75%, #aec8fd 45.11%, #84c3fc 81.46%); border-radius: 5px; padding: 0; display: flex; justify-content: space-between; gap: 20px; } /* Live's copy column (718d6c9) is a STRETCHED flex column with its content centred, so the copy is what the band height reads from - not the figure. */ .zmit-final-copy { flex: 0 0 690px; max-width: 690px; padding: 50px; border-radius: 5px; display: flex; flex-direction: column; justify-content: center; } .zmit-final-copy h2 { font-size: 34px; font-weight: 400; line-height: 44.2px; color: var(--zab-ink); margin-bottom: 16px; } .zmit-final-copy p { font-size: 16px; font-weight: 400; line-height: 26.4px; color: var(--zab-ink); max-width: 658px; margin: 0 0 26px; } /* THE OVERHANG. Measured on LIVE at 1440 (window.innerWidth asserted 1440): band 1440 x 438 transparent (no fill, no radius); copy column 690 at x30, padding 50, radius 5, transparent, height 438; figure 500 x 576, object-fit fill, position static, margin 0; media column align-self flex-end, position relative, overflow visible; imgTopVsBandTop -138 and imgOverhangBelowBand 0 - it hangs out of the TOP, never below. Live gets that from margin: -10% on the media column, which against its own 1380 row resolves to -138px; the fixed -138px reproduces the same pixels in the narrower 1340 house container. It cuts the column's height CONTRIBUTION to 576 - 138 = 438, so the row stops growing. Without it the band becomes 576 tall - the empty-white-area defect the owner reported. Desktop only: at 430 live stacks (copy 417, then figure 390 x 500, media margin-top -46.8px), and the max-width:1080 block below owns that. */ .zmit-final-media { align-self: flex-end; flex: 0 0 500px; max-width: 500px; position: relative; overflow: visible; } @media (min-width: 1081px) { /* Live's band (e-con 1187a39) is margin: 150px 0 80px at desktop. The 150px top is the figure's room to hang ABOVE the band - do not shrink it. */ .zmit .zmit-final.z-section { margin: 150px 0 80px; } .zmit-final-media { margin-top: -138px; } } .zmit-final-media img { position: static; right: auto; bottom: auto; display: block; width: 100%; max-width: 500px; height: auto; margin: 0 0 0 auto; object-fit: contain; /* Reserve live's own 500x576 box: without it a not-yet-loaded (or locally referer-blocked) CloudFront image collapses the band to ~256px and shifts the page. */ aspect-ratio: 500 / 576; } /* ============================================================ REQUEST A CONSULTATION — the shared sheet's Family A band (blue gradient, light copy) with the owner-approved narrower 620px white form card. Heading 33.89px/300/43px, measured on live. NOT copied from live: live paints this band WHITE while keeping the heading and copy #fcfcfc, so both are invisible on the live page (confirmed with a 1440 screenshot). That is a live defect; the readable Family A band is kept. ============================================================ */ .zmit .zmit-contact.z-section { padding: 50px 0; } .zmit-contact .zmit-contact-head { max-width: 1100px; margin: 0 auto 30px; text-align: center; } .zmit-contact-head h2 { font-size: 33.89px; font-weight: 300; line-height: 43px; color: #fcfcfc; } .zmit-contact-head p { font-size: 16px; line-height: 1.7; color: #e6eaf2; max-width: 1000px; margin: 0 auto; } .zmit-contact-form { border-radius: 8px; padding: 30px; max-width: 620px; } .zmit-contact-form h3 { font-size: 25px; font-weight: 400; color: #6e7191; margin-bottom: 20px; } /* ============================================================ PRE-FOOTER BAND — #000, 80px vertical padding, copy column 770 and the two buttons 280 wide. DARK BAND => LIGHT COPY. ============================================================ */ .zmit-insights-copy p.zmit-insights-title { font-weight: 400; border-left: 2px solid #fff; } .zmit-insights-copy p:not(.zmit-insights-title) { font-weight: 400; color: #fff; } .zmit-insights-btns a { background: #fff; color: #000; border: 1px solid #fff; border-radius: 5px; font-size: 16px; font-weight: 500; line-height: 24px; min-width: 0; justify-content: center; } .zmit-insights-btns a:last-child { background: transparent; color: #fff; } .zmit-insights-btns a:hover { background: #b3d0ff; color: #000; border-color: #b3d0ff; } @media (min-width: 1081px) { .zmit .zmit-insights.z-section { padding: 80px 0; } .zmit-insights-grid { grid-template-columns: 770px 280px; justify-content: space-between; gap: 0; align-items: start; } .zmit-insights-copy { grid-template-columns: 225px 1fr; column-gap: 20px; row-gap: 20px; align-items: center; } .zmit .zmit-insights-logo { height: 50px; width: 225px; object-fit: contain; object-position: left center; } .zmit-insights-copy p.zmit-insights-title { font-size: 28px; line-height: 34px; padding-left: 20px; margin-left: 0; max-width: none; } .zmit-insights-copy p:not(.zmit-insights-title) { /* Owner request 2026-08-26: no dead space under this band. */ font-size: 20px; line-height: 28px; max-width: 770px; margin: 0; } .zmit-insights-btns { gap: 20px; } .zmit-insights-btns a { padding: 16px 30px; width: 280px; } } /* ============================================================ TABLET (<= 1080) ============================================================ */ @media (max-width: 1080px) { .zmit-hero .zmit-hero-headline { font-size: 40.98px; line-height: 49.17px; } .zmit-services-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } /* The SHARED sheet never stacks .zmit-stats-layout, so without this the copy | counters row stays 2-col and the counter column overflows the viewport at 375. Found by measuring element widths, not scrollWidth (body{overflow-x:hidden} hides it from scrollWidth). */ .zmit-stats-layout { grid-template-columns: 1fr; gap: 32px; } .zmit-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } .zmit .zab-cmp-head h2 { font-size: 27px; line-height: 1.25; } .zab-cmp-grid { grid-template-columns: 1fr; } .zmit .zab-cmp-cell { height: auto; min-height: 80px; } .zmit .zab-certified h2 { font-size: 34px; line-height: 1.3; } .zab-certified-badges { grid-template-columns: repeat(2, 1fr); } .zmit .zab-certified-dark .zab-certified-badges { grid-template-columns: repeat(3, 1fr); } /* Live's panel is ONE column at 768 (measured grid track 708px). */ .zab-trust-panel { grid-template-columns: 1fr; } .zmit .zab-trust-eyebrow { font-size: 26px; line-height: 1.3; margin-bottom: 24px; } .zmit .zab-nist h2 { font-size: 30px; line-height: 1.3; } .zmit .zab-proc-copy h2 { font-size: 25px; line-height: 1.3; } .zmit .zab-elevate-copy h2, .zmit .zab-empower-copy h2 { font-size: 27px; line-height: 1.3; } .zmit .zab-elevate-copy p { font-size: 16px; line-height: 25px; } /* Live wraps its fixed 260px flip cards, so 768 lands on TWO per row (measured: card 260 in a 708 box) — not three. */ .zmit-industries-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zmit-final-banner { flex-direction: column; align-items: flex-start; padding: 0; } .zmit-final-media { align-self: center; } .zmit-final-media img { max-width: 400px; } /* Live's recognition band at 768: the inherited 36px gap wraps the logo row and inflates the band. Kill the column gap, give the row a 20px row-gap instead. */ .zmit-recognized-logos { column-gap: 0; row-gap: 20px; flex-wrap: wrap; } } /* ============================================================ PHONE (<= 680) ============================================================ */ @media (max-width: 680px) { .zmit-hero .zmit-hero-headline { font-size: 24px; line-height: 1.3; } .zmit-services-grid { grid-template-columns: 1fr; } .zmit .zmit-services-head h2.z-eyebrow { font-size: 14px; } .zmit .zab-svc-lead { font-size: 24px; line-height: 1.3; } .zmit .zab-cmp-head h2 { font-size: 22px; } .zmit .zab-certified.z-section { padding: 40px 0; } .zmit .zab-certified h2 { font-size: 26px; } .zmit .zab-certified-dark h2 { font-size: 24px; line-height: 1.3; } .zab-certified-badges { grid-template-columns: 1fr; margin-top: 28px; } .zmit .zab-certified-dark .zab-certified-badges { grid-template-columns: repeat(2, 1fr); } .zab-cert-box { min-height: 0; } .zab-trust-panel { grid-template-columns: 1fr; gap: 0; } .zab-trust-cell { padding: 24px 20px; } .zmit .zab-trust-eyebrow { font-size: 22px; } .zmit .zab-nist h2 { font-size: 22px; line-height: 1.3; } .zab-nist-letter { font-size: 60px; line-height: 60px; } /* Live at 375: question 14.59px/24.08px, 20px vertical padding. The horizontal 22px is restated so the shorthand cannot zero it. */ .zmit-faq-q { padding: 20px 22px; font-size: 14.6px; line-height: 24px; } .zmit .zab-proc-copy h2 { font-size: 22px; } .zmit .zab-elevate-copy h2, .zmit .zab-empower-copy h2 { font-size: 22px; } .zab-elevate-cards { grid-template-columns: 1fr; gap: 20px; } .zab-elevate-card { padding: 16px 0; } .zmit-stats-grid { grid-template-columns: 1fr; } /* At 375 live's card is 335 wide in a 335 box => ONE per row. */ .zmit-industries-grid { grid-template-columns: 1fr; } .zmit .zmit-industries.z-section { padding: 40px 0; } .zmit .zmit-industries-head h2 { font-size: 24px; } .zmit-final-copy h2 { font-size: 26px; line-height: 1.3; } .zmit-final-media img { max-width: 300px; } /* Live's recognition CTA overflows its box at 375 unless the label wraps. */ .zmit .zmit-recognized-cta .z-btn { white-space: normal; text-align: center; } /* At 375 BOTH bounds must be released on the review logos — max-height beats height, so leaving it set keeps the row too tall. */ .zmit-recognized-logos img { height: auto; max-height: 40px; max-width: 100%; } } /* Problems band down the breakpoints. */ @media (max-width: 1080px) { .zmit .zab-problems-head { font-size: 26px; line-height: 1.3; } .zmit .zab-problems-answer { font-size: 20px; line-height: 1.5; } .zab-tick-text { font-size: 16px; line-height: 26px; } } @media (max-width: 680px) { .zab-problems-cols { grid-template-columns: 1fr; gap: 0; } .zmit .zab-problems-head { font-size: 22px; } }