/* ============================================================ IT Managed Services - Zazz pixel-mirror (self-contained) All rules scoped under .zmit to avoid global leakage. ============================================================ */ /* Fonts (Figtree, Inter, Poppins) are loaded via a non-blocking in the page instead of an @import here, since CSS @import is render-blocking and hurts Total Blocking Time. */ .zmit, .zmit * { box-sizing: border-box; } .zmit { --z-blue: #3A43C4; --z-blue-dark: #2C3499; --z-ink: #14121f; --z-body: #56566a; --z-line: #e7e9f2; --z-soft: #f5f7fc; --z-dark: #1b1a29; --z-darker: #14131f; --z-green: #10a64a; --z-radius: 16px; --z-shadow: 0 18px 50px rgba(20,19,31,.10); font-family: 'Figtree', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--z-ink); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; } .zmit img { max-width: 100%; height: auto; display: block; } .zmit a { text-decoration: none; color: inherit; } .zmit p { margin: 0 0 1em; } .zmit h1, .zmit h2, .zmit h3, .zmit h4 { margin: 0 0 .5em; line-height: 1.18; font-weight: 800; letter-spacing: -.01em; } .zmit ul { margin: 0; padding: 0; list-style: none; } .zmit .z-container { max-width: 1400px; margin: 0 auto; padding: 0 30px; } .zmit .z-narrow { max-width: 920px; margin: 0 auto; } /* Align the site menu/header pill with the wider Zazz-style content (these pages only; this stylesheet is page-scoped). The global .container is 1557px, which left the 1140px content looking narrow inside a wide header. */ header .container { max-width: 1400px; } /* ---- Buttons ---- */ .zmit .z-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--z-blue); color: #fff; font-weight: 600; font-size: 15px; padding: 14px 26px; border-radius: 10px; border: none; cursor: pointer; transition: background .2s ease, transform .2s ease; } .zmit .z-btn:hover { background: var(--z-blue-dark); color: #fff; transform: translateY(-1px); } .zmit .z-btn-ghost { background: transparent; color: var(--z-blue); border: 1.5px solid rgba(58,67,196,.4); } .zmit .z-btn-ghost:hover { background: rgba(58,67,196,.07); color: var(--z-blue); } .zmit .z-btn-light { background: #fff; color: var(--z-blue); } .zmit .z-btn-light:hover { background: #eef0fc; color: var(--z-blue); } .zmit .z-btn .z-arrow { font-size: 13px; } /* ---- Section scaffolding ---- */ /* Match Zazz's rhythm: every section carries deliberate top AND bottom padding so the page reads with even breathing room between bands, rather than the previous flat layout that zeroed section tops and butted blocks together. */ .zmit .z-section { padding: 64px 0; } .zmit .z-section-sm { padding: 48px 0; } .zmit .z-eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--z-blue); margin-bottom: 14px; } .zmit .z-h2 { font-size: 40px; font-weight: 800; } .zmit .z-h2-center { text-align: center; } .zmit .z-lead { font-size: 17px; color: var(--z-body); } /* ============================================================ HEADER ============================================================ */ .zmit-header { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--z-line); font-family: 'Figtree', sans-serif; } .zmit-header .z-nav { max-width: 1280px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .zmit-header .z-logo img { height: 34px; } .zmit-header .z-menu { display: flex; align-items: center; gap: 30px; } .zmit-header .z-menu a { font-size: 15px; font-weight: 600; color: #1d1d2c; display: inline-flex; align-items: center; gap: 6px; } .zmit-header .z-menu a:hover { color: var(--z-blue); } .zmit-header .z-menu .caret { font-size: 9px; opacity: .6; } .zmit-header .z-quote { background: var(--z-blue); color: #fff; padding: 12px 22px; border-radius: 8px; font-weight: 600; font-size: 14px; } .zmit-header .z-quote:hover { background: var(--z-blue-dark); color: #fff; } .zmit-header .z-burger { display: none; font-size: 24px; background: none; border: none; cursor: pointer; } /* ============================================================ HERO ============================================================ */ .zmit-hero { position: relative; background: #0a0d14; color: #fff; overflow: visible; font-family: 'Poppins', 'Figtree', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } .zmit-hero::before { content: ""; position: absolute; inset: 0; /* Use a smaller responsive banner variant to cut page weight; the 2560px "-scaled" original was the single heaviest request on the page. */ background: linear-gradient(100deg, rgba(8,11,18,.96) 38%, rgba(8,11,18,.55) 100%), url('https://dahqbtk1vlskk.cloudfront.net/wp-content/uploads/2025/06/20131832/IT-Managed-Services-main-Banner-1024x320.webp') center/cover no-repeat; z-index: 0; } @media (min-width: 768px) { .zmit-hero::before { background: linear-gradient(100deg, rgba(8,11,18,.96) 38%, rgba(8,11,18,.55) 100%), url('https://dahqbtk1vlskk.cloudfront.net/wp-content/uploads/2025/06/20131832/IT-Managed-Services-main-Banner-1536x480.webp') center/cover no-repeat; } } .zmit-hero .z-container { position: relative; z-index: 1; } .zmit-hero-crumb { padding-top: 22px; margin-bottom: 16px; font-size: 13px; color: #b8c0d4; } .zmit-hero-crumb a:hover { color: #fff; } .zmit-hero-crumb .sep { margin: 0 8px; opacity: .6; } .zmit-hero-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 60px; align-items: start; padding: 28px 0 0; } /* Left text column drives the (short) banner height; Zazz uses a 50px bottom pad so the dark area ends just below the CTA, while the taller form column overflows out of the banner via the negative margin below. */ .zmit-hero-left { padding-bottom: 39px; } .zmit-hero .zmit-hero-pill { display: inline-block; background: rgba(255,255,255,.12); color: #fff; font-size: 16px; font-weight: 400; padding: 4px 12px; border-radius: 10px; margin: 0 0 24px; line-height: 1.5; letter-spacing: normal; } .zmit-hero .zmit-hero-headline { font-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.75rem); font-weight: 700; line-height: 1.22; margin: 0 0 18px; letter-spacing: -.01em; color: #fff; } .zmit-hero .zmit-hero-sub { font-size: 16px; font-weight: 400; color: #e6eaf2; line-height: 1.6; max-width: 560px; margin: 0 0 26px; } /* Hero CTA button - white bg, blue text, trailing arrow (Zazz style). Scoped under .zmit-hero (specificity 0,2,0) so it beats the generic `.zmit a { color: inherit }` rule (0,1,1); without this the link inherits the hero's white text and the button renders blank white-on-white. */ .zmit-hero-cta { margin-bottom: 6px; } .zmit-hero .zmit-hero-cta-btn { display: inline-flex; align-items: center; gap: 9px; min-height: 46px; background: #fff; color: #3A43C4 !important; font-weight: 600; font-size: 14px; padding: 12px 22px; border-radius: 8px; border: 1px solid #d7daf4; transition: background .2s ease, transform .2s ease; } .zmit-hero .zmit-hero-cta-btn:hover { background: #eceefb; color: #3A43C4 !important; transform: translateY(-1px); } .zmit-hero .zmit-hero-cta-btn .zmit-hero-cta-text { color: #3A43C4 !important; } .zmit-hero .zmit-hero-cta-btn .zmit-hero-cta-ico { display: inline-flex; align-items: center; color: #3A43C4 !important; order: 2; } .zmit-hero .zmit-hero-cta-btn .zmit-hero-cta-ico svg { display: block; fill: #3A43C4; } /* Hero form card */ .zmit-form-card { background: #fff; color: var(--z-ink); border: 2px solid rgba(93,100,129,.2); border-radius: 8px; padding: 20px; /* The (tall) form card overflows DOWN onto the white logo band so the dark banner stays short (the LEFT column drives its height). -90px (was -210px) keeps the Budget / Submit / note rows overflowing onto the band while sitting beside the logos rather than burying them. See the min-width:1081px block below for the desktop lift + rightward shift. */ margin-bottom: -90px; position: relative; z-index: 10; } /* Desktop (two-column) only: lift the form toward the breadcrumb and shift it right for a clear gap from the logo strip. Gated at min-width:1081px because the hero is single-column at <=1080px (see the responsive block near the end), where the form is full-width and must not be lifted or shifted sideways. The rightward shift is responsive: ~20px on laptops (the .z-container maxes at 1400px with no side margin there, so a larger fixed shift would clip) growing to 50px on wide screens that have spare margin. */ @media (min-width: 1081px) { .zmit-form-card { margin-top: -50px; transform: translateX(clamp(20px, calc((100vw - 1400px) / 8 + 20px), 50px)); } } .zmit-form-card h3 { font-size: 18px; font-weight: 600; margin-bottom: 16px; color: var(--z-ink); } .zmit-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .zmit-form-field { display: flex; flex-direction: column; } .zmit-form-field label { font-size: 13.5px; font-weight: 600; color: #2a2a3a; margin-bottom: 7px; } .zmit-form-field label .req { color: #e23; } .zmit-form-field input, .zmit-form-field select, .zmit-form-field textarea { border: 1px solid #d9dce8; border-radius: 8px; padding: 11px 13px; font-size: 14px; font-family: inherit; color: #2a2a3a; background: #fcfcfe; width: 100%; } .zmit-form-field input::placeholder, .zmit-form-field textarea::placeholder { color: #aab; } .zmit-form-field input:focus, .zmit-form-field select:focus, .zmit-form-field textarea:focus { outline: none; border-color: var(--z-blue); background: #fff; } .zmit-form-field textarea { resize: vertical; min-height: 84px; } .zmit-form-phone { display: grid; grid-template-columns: 64px 1fr; gap: 8px; } .zmit-form-card .z-btn { width: 100%; justify-content: center; padding: 14px; margin-top: 4px; } .zmit-form-note { font-size: 14px; color: #2a2929; text-align: center; margin: 16px 0 0; } /* Trust badges band - white section below the dark hero, auto-scrolling marquee. Mirrors Zazz's logo marquee: 4 logos visible per view on desktop/tablet (3 on mobile), 70px tall, 50px spacing, continuous left scroll, no edge fade, no pause on hover. Each chip takes a quarter of the band width so the logos are spread out 4-up exactly like Zazz, rather than packed densely. */ .zmit-trust-band { background: #fff; padding: 40px 0; overflow: hidden; } /* The marquee only spans the LEFT (hero text) column and ends exactly where the form column begins. The grid is `1.5fr 1fr` with a 60px gap, so the form's left edge sits at calc(60% + 24px) of the container; the strip is clipped to that width and left-aligned, leaving the overflowing form to sit to its right. */ .zmit-trust { position: relative; z-index: 1; overflow: hidden; width: calc(60% + 24px); max-width: calc(60% + 24px); margin: 0; } .zmit-trust-track { display: flex; align-items: center; gap: 44px; width: max-content; animation: zmit-marquee 80s linear infinite; } .zmit-trust-chip { flex: 0 0 auto; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; height: 52px; } .zmit-trust-chip img { height: 52px; width: auto; object-fit: contain; } @keyframes zmit-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Hero scroll-down chevron */ /* Scroll cue. Absolutely positioned against .zmit-hero (already position:relative) so it centres on the hero instead of sitting left-aligned under the CTA inside .zmit-hero-left. Border raised from .35 to .6 alpha: the ring is this control's only visible boundary and at .35 it measured roughly 2.4:1, under the 3:1 that non-text contrast requires. */ .zmit-hero-scroll { position: absolute; left: 50%; bottom: 26px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); background: rgba(255,255,255,.06); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); color: #fff; transition: background .2s ease, border-color .2s ease; animation: zmit-bob 1.8s ease-in-out infinite; } .zmit-hero-scroll svg { width: 15px; height: 15px; display: block; } .zmit-hero-scroll:hover { color: #fff; background: rgba(255,255,255,.16); border-color: #fff; } .zmit-hero-scroll:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } /* The X translation has to live inside the keyframes: an animated transform replaces the one declared on the rule, so translateX(-50%) on its own would be dropped for the duration of the bob and the button would jump right. */ @keyframes zmit-bob { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,5px); } } /* ============================================================ WHY (4 dark cards) ============================================================ */ .zmit-why { background: #fff; } /* Global change: tighten the gap below the Why section (the space above the Services section that follows it). Mobile override lives in the max-680 block. */ .zmit .zmit-why.z-section { padding-bottom: 36px; } .zmit-why-head { margin-bottom: 36px; } .zmit-why-head h2 { font-size: 34px; margin: 0; color: #1c1a33; font-weight: 700; } .zmit-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .zmit-why-card { background: #272540; color: #fff; border-radius: 16px; padding: 36px 26px; text-align: center; } .zmit-why-ic { margin: 0 auto 22px; width: 64px; height: 64px; } .zmit-why-ic svg { width: 64px; height: 64px; display: block; } .zmit-why-card h3 { font-size: 19px; font-weight: 700; margin-bottom: 12px; } .zmit-why-card p { font-size: 14.5px; color: #c3c3d2; margin: 0; line-height: 1.6; } /* ============================================================ SERVICES (12 cards) ============================================================ */ .zmit-services { background: #fff; } .zmit-services-head { text-align: left; margin-bottom: 38px; } .zmit-services-head .z-eyebrow { color: #6c6c7c; text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; margin-bottom: 6px; } .zmit-services-head h2 { font-size: 34px; font-weight: 700; color: #1c1a33; } .zmit-services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .zmit-svc-card { position: relative; cursor: pointer; background: #f5f6fa; border: 1px solid #eef0f6; border-radius: 12px; padding: 26px 22px; display: flex; flex-direction: column; transition: box-shadow .2s ease, transform .2s ease; } .zmit-svc-card:hover { box-shadow: 0 12px 34px rgba(20,19,31,.08); transform: translateY(-2px); } .zmit-svc-card h3, .zmit-svc-card h4 { font-size: 16.5px; font-weight: 700; margin-bottom: 14px; color: var(--z-ink); line-height: 1.3; } .zmit-svc-card ul { margin-bottom: 0; } .zmit-svc-card li { position: relative; padding-left: 18px; font-size: 13px; color: var(--z-body); margin-bottom: 10px; line-height: 1.5; } .zmit-svc-card li::before { content: "\2022"; position: absolute; left: 2px; top: -1px; color: #e89a3c; font-size: 15px; font-weight: 700; } .zmit-svc-card .z-explore { position: absolute; inset: 0; z-index: 1; display: block; margin: 0; padding: 0; border: 0; font-size: 0; line-height: 0; color: transparent; text-indent: -9999px; overflow: hidden; opacity: 0; } .zmit-svc-card a:not(.z-explore) { position: relative; z-index: 2; } /* ============================================================ MID CTA + QUOTE ============================================================ */ .zmit-midcta { background: #fff; } .zmit-midcta-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; } .zmit-midcta-video video { width: 100%; display: block; border-radius: 6px; background: #000; aspect-ratio: 16 / 9; object-fit: cover; } .zmit-midcta-copy h2 { font-size: 34px; font-weight: 700; color: var(--z-ink); line-height: 1.2; margin: 0 0 26px; } .zmit-midcta-cta { margin-bottom: 30px; } .zmit-midcta-quote { position: relative; padding-left: 44px; } .zmit-midcta-qmark { position: absolute; left: 0; top: -6px; font-size: 40px; line-height: 1; color: var(--z-blue); font-family: Georgia, serif; } .zmit-midcta-quote blockquote { font-size: 17px; font-style: italic; font-weight: 700; color: var(--z-ink); line-height: 1.55; margin: 0 0 10px; } .zmit-midcta-quote cite { font-style: normal; color: var(--z-body); font-size: 14px; } /* ============================================================ CHALLENGES (comparison) ============================================================ */ .zmit-challenges { background: #fff; font-family: 'Poppins', 'Figtree', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } .zmit-challenges h2 { text-align: left; font-size: 34px; font-weight: 600; color: #14142b; margin-bottom: 40px; } /* Three vertical column panels with internal row dividers (Zazz layout) */ .zmit-compare-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; align-items: start; } .zmit-compare-col { overflow: hidden; border-radius: 10px; } .zmit-challenges .zmit-compare-col-title { padding: 20px 30px; font-size: 24px; font-weight: 500; line-height: 32px; color: #14142b; margin: 0; background: transparent; letter-spacing: normal; } .zmit-compare-col-body { display: flex; flex-direction: column; } .zmit-compare-item { min-height: 100px; padding: 20px 30px; display: flex; align-items: center; font-size: 16px; font-weight: 500; line-height: 28px; color: #06001c; border: 1px solid rgba(6,0,28,.12); border-top-width: 0; } .zmit-compare-col-body .zmit-compare-item:first-child { border-top-width: 1px; border-radius: 10px 10px 0 0; } .zmit-compare-col-body .zmit-compare-item:last-child { border-radius: 0 0 10px 10px; } /* Column 1 - blue gradient applied to the whole column */ .zmit-compare-col.is-priority { background: linear-gradient(0deg, rgba(255,255,255,.7), rgba(255,255,255,.7)), linear-gradient(102.79deg, #eceef2 -4.21%, #b9bced 44.41%, #8e92e4 93.03%), linear-gradient(102.29deg, #eceef2 8.75%, #b9bced 45.11%, #8e92e4 81.46%); } /* Global change: only the "Business Priorities" header cell is white (to match the other two column titles); the column body keeps its gradient. */ .zmit-challenges .zmit-compare-col.is-priority .zmit-compare-col-title { background: #fff; } /* Columns 2 & 3 - white panels with alternating row tints */ .zmit-compare-col.is-gap .zmit-compare-item:nth-child(odd) { background: #fff; } .zmit-compare-col.is-gap .zmit-compare-item:nth-child(even) { background: #f9fcff; } .zmit-compare-col.is-advantage .zmit-compare-item:nth-child(odd) { background: #f9fcff; } .zmit-compare-col.is-advantage .zmit-compare-item:nth-child(even) { background: #fff; } /* ============================================================ STANDARDS / BOOK CONSULTATION ============================================================ */ .zmit-standards { background: #000; color: #fff; text-align: center; } .zmit-standards h2 { font-size: 36px; font-weight: 700; color: #fff; } .zmit-standards p { color: #c9c9d0; max-width: 660px; margin: 0 auto 44px; font-size: 14.5px; line-height: 1.6; } .zmit-standards-logos { display: flex; justify-content: center; flex-wrap: nowrap; gap: 18px; align-items: stretch; } /* Dark charcoal cards, each holding one circular certification badge (transparent PNGs sit directly on the card -- no blend mode needed). Matches the Zazz "Global Standards. Built-In Trust." layout. */ .zmit-standards-badge { flex: 1 1 0; max-width: 210px; min-height: 190px; background: #161618; /* global: enlarged cards */ border: 1px solid rgba(255,255,255,.05); border-radius: 14px; display: flex; align-items: center; justify-content: center; padding: 16px; } .zmit-standards-badge img { height: 160px; width: auto; } /* global: ~25% larger logos */ .zmit-bookcta { background: var(--z-blue); color: #fff; text-align: center; } .zmit-bookcta h2 { color: #fff; font-size: 34px; } .zmit-bookcta p { color: #dcddf5; max-width: 680px; margin: 0 auto 28px; } .zmit-recognized { background: #fff; } .zmit-recognized-band { background: #0c0c10; border-radius: 18px; padding: 46px 54px; display: grid; grid-template-columns: 1fr auto; gap: 44px; align-items: center; } .zmit-recognized-copy h2 { color: #fff; font-size: 26px; font-weight: 700; line-height: 1.28; margin: 0 0 14px; } .zmit-recognized-copy p { color: #bdbdc9; font-size: 13.5px; line-height: 1.6; max-width: 540px; margin: 0 0 26px; } .zmit-recognized-logos { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; } .zmit-recognized-logos img { height: 50px; width: auto; } .zmit-recognized-cta .z-btn { white-space: nowrap; } .zmit-bookcal { background: #fff; } .zmit-bookcal h2 { color: #1c1a33; font-size: 28px; margin-bottom: 12px; } .zmit-bookcal p { color: var(--z-body); font-size: 14.5px; } .zmit-bookcal-embed { max-width: 900px; margin: 0 auto; border: 0; border-radius: 0; overflow: hidden; min-height: 640px; background: #fff; } .zmit-bookcal-embed .meetings-iframe-container, .zmit-bookcal-embed iframe { width: 100%; min-height: 640px; border: 0; } /* ============================================================ TECH STACK ============================================================ */ .zmit-tech { background: #fff; } .zmit-tech-head { text-align: left; padding-bottom: 28px; border-bottom: 1px solid var(--z-line); } .zmit-tech-head h2 { font-size: 34px; color: #1c1a33; margin-bottom: 12px; } .zmit-tech-head p { color: var(--z-body); font-size: 14px; max-width: 620px; line-height: 1.6; } .zmit-tech-hl { color: var(--z-blue); } .zmit-tech-layout { display: grid; grid-template-columns: 300px 1fr; margin-top: 30px; align-items: start; } .zmit-tech-tabs { display: flex; flex-direction: column; gap: 4px; max-height: 430px; overflow-y: auto; padding-right: 22px; } .zmit-tech-tabs::-webkit-scrollbar { width: 4px; } .zmit-tech-tabs::-webkit-scrollbar-thumb { background: #c9ccd9; border-radius: 4px; } .zmit-tech-tab { text-align: left; background: transparent; border: 0; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; color: #3a3a4a; padding: 13px 18px; border-radius: 8px; line-height: 1.3; transition: background .15s ease, color .15s ease; } .zmit-tech-tab:hover { color: var(--z-blue); } .zmit-tech-tab.is-active { background: var(--z-blue); color: #fff; box-shadow: 0 6px 16px rgba(58,67,196,.30); } .zmit-tech-panels { border-left: 1px solid var(--z-line); padding-left: 34px; min-height: 430px; } .zmit-tech-panel { display: none; grid-template-columns: 1fr 1fr; gap: 16px; } .zmit-tech-panel.is-active { display: grid; } .zmit-tech-card { background: #f3f4f9; border-radius: 10px; padding: 14px 20px; display: flex; align-items: center; gap: 16px; } .zmit-tech-logo { flex: none; width: 52px; height: 52px; background: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .zmit-tech-logo img { max-width: 32px; max-height: 32px; width: auto; height: auto; } .zmit-tech-name { font-size: 14.5px; font-weight: 600; color: #2b2a40; } /* ============================================================ ITIL ============================================================ */ .zmit-itil { background: linear-gradient(180deg, #f4f6fd 0%, #eef0fb 100%); } .zmit-itil-head { text-align: center; max-width: 880px; margin: 0 auto 40px; } .zmit-itil-head h2 { font-size: 34px; font-weight: 700; color: #1c1a33; } .zmit-itil-head p { color: var(--z-body); font-size: 14.5px; line-height: 1.6; } .zmit-itil-accordion { display: flex; gap: 16px; align-items: stretch; } .zmit-itil-item { display: flex; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 32px rgba(20,19,31,.07); flex: 0 0 90px; transition: flex-basis .4s ease, flex-grow .4s ease; } .zmit-itil-item.is-open { flex: 1 1 auto; } .zmit-itil-rail { flex: none; width: 90px; border: 0; cursor: pointer; background: #fff; font-family: inherit; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 26px 0 24px; transition: background .4s ease, width .4s ease; } .zmit-itil-item.is-open .zmit-itil-rail { width: 118px; background: linear-gradient(180deg,#3A43C4 0%, #6a5cf0 100%); } .zmit-itil-ic { width: 46px; height: 46px; border-radius: 50%; background: #f0f2f8; display: flex; align-items: center; justify-content: center; } .zmit-itil-item.is-open .zmit-itil-ic { background: #fff; } .zmit-itil-ic svg, .zmit-itil-ic img { width: 24px; height: 24px; } .zmit-itil-item:not(.is-open) .zmit-itil-ic svg { opacity: .55; } .zmit-itil-letter { font-size: 56px; font-weight: 800; line-height: 1; color: #e2e4ee; } .zmit-itil-item.is-open .zmit-itil-letter { color: #fff; } .zmit-itil-body { flex: 1; min-width: 0; padding: 34px 42px; display: none; } .zmit-itil-item.is-open .zmit-itil-body { display: block; } .zmit-itil-body h3 { font-size: 22px; color: var(--z-ink); margin-bottom: 14px; } .zmit-itil-body p { font-size: 14.5px; color: var(--z-body); line-height: 1.7; margin: 0; } /* ============================================================ APPROACH (timeline) ============================================================ */ .zmit-approach { background: #fff; } .zmit-approach-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; } .zmit-approach-copy h2 { font-size: 34px; font-weight: 700; color: #1c1a33; line-height: 1.18; margin-bottom: 22px; } .zmit-approach-copy p { color: var(--z-body); font-size: 14.5px; line-height: 1.75; margin: 0 0 18px; } .zmit-approach-copy p:last-child { margin-bottom: 0; } .zmit-approach-hl { color: var(--z-blue); } .zmit-approach-acc { display: flex; flex-direction: column; gap: 14px; } .zmit-acc-item { background: #272540; border-radius: 10px; overflow: hidden; } .zmit-acc-q { width: 100%; background: transparent; border: 0; cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 26px; text-align: left; color: #fff; font-size: 15px; font-weight: 600; } .zmit-acc-q .sign { color: var(--z-blue); font-size: 22px; font-weight: 400; line-height: 1; flex: none; transition: transform .25s ease; } .zmit-acc-item.open .zmit-acc-q .sign { transform: rotate(45deg); } .zmit-acc-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; } .zmit-acc-item.open .zmit-acc-a { max-height: 360px; } .zmit-acc-a-inner { padding: 0 26px 22px; color: #c3c2d4; font-size: 13.5px; line-height: 1.65; } /* The cards sit on the white (#fff) .zmit-approach section. While .zmit-acc-a animates its max-height inside the rounded, overflow:hidden card, the compositor's sub-pixel rounding can briefly expose a ~1px strip of that white background at the header/panel seam - a light line that flashes during the expand and settles away afterwards. Promote the card to its own compositing layer so its background and children rasterize together (no inter-layer seam), and paint the card colour onto the header and panel as well so no lighter pixel can show through the seam mid-animation. */ .zmit-acc-item { transform: translateZ(0); } .zmit-acc-q, .zmit-acc-a { background: #272540; } /* The header button (border:0) otherwise falls back to the UA focus outline, whose bottom edge lands exactly on the header/content seam and reads as a stray light line once expanded. Keep a crisp, inset ring for keyboard users (never touches the seam); drop the ring only for pointer/tap focus. Guarded with :focus-visible so browsers without support keep their default ring. */ .zmit-acc-q:focus-visible { outline: 2px solid var(--z-blue); outline-offset: -3px; } .zmit-acc-q:focus:not(:focus-visible) { outline: none; } /* ============================================================ STATS ============================================================ */ .zmit-stats { background: #1c1a33; color: #fff; } .zmit-stats-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center; } .zmit-stats-eyebrow { display: block; font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 18px; } .zmit-stats-copy h2 { color: #fff; font-size: 34px; font-weight: 700; line-height: 1.22; margin-bottom: 30px; } .zmit-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 44px; } .zmit-stat { text-align: left; } .zmit-stat .big { font-size: 50px; font-weight: 800; color: #5b8def; line-height: 1; margin-bottom: 12px; } .zmit-stat p { font-size: 14px; color: #c3c6d6; margin: 0; line-height: 1.5; } /* ============================================================ TESTIMONIALS ============================================================ */ .zmit-testi { background: #fff; } .zmit-testi h2 { text-align: left; font-size: 34px; font-weight: 700; color: #1c1a33; margin-bottom: 36px; } .zmit-testi-carousel { display: flex; align-items: center; gap: 12px; } .zmit-testi-nav { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--z-line); background: #fff; color: #6a6a7a; cursor: pointer; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .2s ease, color .2s ease; } .zmit-testi-nav:hover { background: var(--z-blue); color: #fff; border-color: var(--z-blue); } .zmit-testi-card { flex: 1; min-width: 0; border-radius: 16px; padding: 56px 64px; min-height: 268px; display: flex; align-items: center; background: linear-gradient(105deg, #eaeaf2 0%, #d3d4ef 42%, #a7a9e6 75%, #8f92e0 100%); } .zmit-testi-slide { display: none; max-width: none; } .zmit-testi-slide.is-active { display: block; } .zmit-testi-name { display: inline-block; font-weight: 700; font-size: 15px; color: #1c1a33; margin-bottom: 14px; } .zmit-testi-name::after { content: ''; display: block; width: 26px; height: 2px; background: #1c1a33; margin-top: 8px; } .zmit-testi-role { font-weight: 800; font-size: 24px; color: #1c1a33; margin-bottom: 18px; line-height: 1.2; } .zmit-testi-quote { font-size: 15px; color: #2b2a40; line-height: 1.7; margin: 0; } .zmit-testi-link { color: var(--z-blue); text-decoration: none; } .zmit-testi-link:hover { text-decoration: underline; } /* ============================================================ SUCCESS STORIES ============================================================ */ .zmit-stories { background: #fff; } .zmit-stories h2 { text-align: left; font-size: 34px; font-weight: 700; color: #1c1a33; margin-bottom: 36px; } .zmit-stories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .zmit-story { background: #f5f6fa; border-radius: 10px; padding: 14px; display: flex; flex-direction: column; transition: box-shadow .2s ease, transform .2s ease; } .zmit-story:hover { box-shadow: 0 14px 36px rgba(20,19,31,.08); transform: translateY(-2px); } .zmit-story-img { border-radius: 8px; overflow: hidden; } .zmit-story-img img { width: 100%; height: 188px; object-fit: cover; display: block; } .zmit-story .body { padding: 18px 12px 24px; } .zmit-story-logo { height: 26px; margin-bottom: 16px; display: flex; align-items: center; } .zmit-story-logo img { max-height: 26px; max-width: 150px; width: auto; } .zmit-story h3 { font-size: 16px; color: var(--z-ink); margin-bottom: 12px; line-height: 1.35; } .zmit-story p { font-size: 13px; color: var(--z-body); margin: 0; line-height: 1.6; } /* ============================================================ INDUSTRIES ============================================================ */ .zmit-industries { background: #f6f7fc; } .zmit-industries-head { text-align: center; max-width: 760px; margin: 0 auto 40px; } .zmit-industries-head h2 { font-size: 34px; font-weight: 700; color: #1c1a33; } .zmit-industries-head p { color: var(--z-body); font-size: 13.5px; line-height: 1.6; } .zmit-industries-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; align-items: stretch; } a.zmit-ind-card { color: inherit; text-decoration: none; cursor: pointer; } a.zmit-ind-card:hover, a.zmit-ind-card:focus { color: inherit; text-decoration: none; } .zmit-ind-card { background: #eef0f6; border-radius: 6px; padding: 22px 20px; min-height: 132px; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; height: 100%; width: 100%; box-sizing: border-box; min-width: 0; cursor: default; } /* Flip cards (pages that render .zmit-ind-inner): back face is absolute so it cannot inflate grid-row height and stagger the industries layout. min-height sized so title + 3 bullets fit without clipping. */ .zmit-industries .zmit-ind-card:has(.zmit-ind-inner) { background: transparent; padding: 0; gap: 0; display: block; perspective: 1400px; } .zmit-ind-inner { position: relative; min-height: 200px; height: 100%; transform-style: preserve-3d; transition: transform .6s ease; } .zmit-ind-card:hover .zmit-ind-inner, .zmit-ind-card.is-flipped .zmit-ind-inner { transform: rotateY(180deg); } .zmit-ind-front, .zmit-ind-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 6px; padding: 18px 16px; display: flex; flex-direction: column; box-sizing: border-box; } .zmit-ind-front { position: relative; background: #eef0f6; justify-content: space-between; gap: 16px; min-height: 200px; height: 100%; } .zmit-ind-back { position: absolute; inset: 0; background: #fff; color: #1c1a33; border: 1px solid rgba(6,0,28,.12); box-shadow: 0 8px 24px rgba(20,20,43,.08); transform: rotateY(180deg); justify-content: flex-start; gap: 8px; overflow: hidden; } .zmit-ind-back h3 { color: #1c1a33; font-size: 12.5px; font-weight: 700; margin: 0; line-height: 1.3; flex-shrink: 0; } .zmit-ind-back ul { margin: 0; padding: 0 0 0 15px; list-style: disc; min-height: 0; } .zmit-ind-back li { font-size: 11px; line-height: 1.35; margin: 0 0 5px; color: #333; } .zmit-ind-back li:last-child { margin-bottom: 0; } @media (prefers-reduced-motion: reduce) { .zmit-ind-inner { transition: none; } /* the bob was previously unguarded: an infinite loop with no opt-out */ .zmit-hero-scroll { animation: none; transform: translateX(-50%); } } /* Row wrappers (legacy pyramid markup) flatten into the parent grid */ .zmit-ind-row { display: contents; } .zmit-ind-ic { width: 44px; height: 44px; border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; } .zmit-ind-ic img, .zmit-ind-ic svg { width: 22px; height: 22px; } .zmit-ind-card h3 { font-size: 13px; font-weight: 700; color: #1c1a33; margin: 0; line-height: 1.35; } /* ============================================================ POWER 100 (longform) ============================================================ */ .zmit-power { background: #fff; } .zmit-power-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; } .zmit-power-copy h2 { font-size: 34px; color: #1c1a33; font-weight: 700; line-height: 1.28; margin-bottom: 22px; } .zmit-power-copy p { color: var(--z-body); font-size: 13.5px; line-height: 1.75; margin: 0 0 16px; } .zmit-power-link { color: var(--z-blue); text-decoration: none; } .zmit-power-link:hover { text-decoration: underline; } .zmit-power-cta { margin-top: 14px; } .zmit-power-media img { width: 100%; border-radius: 10px; display: block; } /* ============================================================ ARTICLES ============================================================ */ .zmit-articles { background: #fff; } .zmit-articles-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; flex-wrap: wrap; gap: 16px; } .zmit-articles-head h2 { font-size: 34px; font-weight: 700; color: #1c1a33; margin: 0; } .zmit-articles-more { font-size: 13.5px; font-weight: 600; color: #1c1a33; text-decoration: none; border-bottom: 1px solid #1c1a33; padding-bottom: 2px; } .zmit-articles-more:hover { color: var(--z-blue); border-color: var(--z-blue); } .zmit-articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .zmit-article { background: transparent; border: 0; display: flex; flex-direction: column; } .zmit-article-img { border-radius: 8px; overflow: hidden; } .zmit-article-img img { width: 100%; height: 200px; object-fit: cover; display: block; } .zmit-article .body { padding: 16px 2px 0; } .zmit-article .date { font-size: 12px; color: var(--z-blue); font-weight: 600; margin-bottom: 10px; } .zmit-article h3 { font-size: 16px; line-height: 1.42; margin: 0; color: #1c1a33; } /* ============================================================ FAQ ============================================================ */ .zmit-faq { background: #f4f6fc; } .zmit-faq h2 { text-align: left; font-size: 34px; font-weight: 700; color: #1c1a33; margin-bottom: 36px; } .zmit-faq-list { column-count: 2; column-gap: 22px; } .zmit-faq-item { background: #272540; border-radius: 8px; margin-bottom: 14px; overflow: hidden; break-inside: avoid; -webkit-column-break-inside: avoid; } .zmit-faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 18px 22px; font-size: 14px; font-weight: 600; color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 14px; font-family: inherit; line-height: 1.4; } .zmit-faq-q .sign { flex: none; width: 16px; text-align: center; font-size: 20px; color: var(--z-blue); line-height: 1; } /* Toggle focus: no outline flash on mouse click, keep it for keyboard nav (a11y). */ .zmit-faq-q:focus { outline: none; } .zmit-faq-q:focus-visible { outline: 2px solid #6ea2ff; outline-offset: -2px; } .zmit-faq-q .sign::before { content: '+'; } .zmit-faq-item.open .zmit-faq-q .sign::before { content: '\2212'; } .zmit-faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; } .zmit-faq-a-inner { padding: 0 22px 20px; font-size: 13px; color: #c3c2d4; line-height: 1.65; } .zmit-faq-item.open .zmit-faq-a { max-height: 600px; } .zmit-faq-a-inner a { color: #6ea2ff; } /* ============================================================ FINAL CTA + CONTACT ============================================================ */ .zmit-final { background: #fff; } .zmit-final-banner { position: relative; border-radius: 14px; padding: 56px 60px; background: linear-gradient(105deg, #eef0f6 0%, #e0e2f6 42%, #b1b4ec 78%, #898ee2 100%); overflow: visible; min-height: 200px; } .zmit-final-copy { max-width: 48%; } .zmit-final-copy h2 { font-size: 30px; line-height: 1.2; color: #15131f; font-weight: 800; margin-bottom: 16px; } .zmit-final-copy p { font-size: 13.5px; line-height: 1.75; color: #3a3a48; max-width: 430px; margin: 0 0 26px; } .zmit-final-media { position: static; } .zmit-final-media img { position: absolute; right: 56px; bottom: 0; height: 320px; width: auto; display: block; } .zmit-contact { background: linear-gradient(120deg, #3f78f2 0%, #2a5fe6 50%, #1f4fd6 100%); } .zmit-contact-head { text-align: center; max-width: 760px; margin: 0 auto 34px; } .zmit-contact-head h2 { color: #fff; font-size: 30px; font-weight: 700; margin-bottom: 12px; } .zmit-contact-head p { color: #dde7ff; font-size: 13.5px; line-height: 1.7; } .zmit-contact-form { background: #fff; color: var(--z-ink); border-radius: 12px; padding: 36px 40px; max-width: 720px; margin: 0 auto; box-shadow: 0 24px 60px rgba(10,30,80,.22); } .zmit-contact-form h3 { font-size: 20px; font-weight: 700; color: #1c1a33; margin-bottom: 22px; } .zmit-contact-submit { width: 100%; } /* ============================================================ FOOTER ============================================================ */ .zmit-footer { background: #000; color: #c4c6d4; } .zmit-footer .z-container { max-width: 1400px; } .zmit-footer-logo { height: 34px; width: auto; display: block; } /* Top CTA band */ .zmit-footer-band { background: #000; padding: 40px 0; } .zmit-footer-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; } .zmit-footer-cta-brand { display: flex; align-items: center; gap: 22px; } .zmit-footer-cta-divider { width: 1px; align-self: stretch; min-height: 56px; background: rgba(255,255,255,.22); } .zmit-footer-cta-text strong { display: block; color: #fff; font-size: 19px; font-weight: 700; line-height: 1.25; margin-bottom: 8px; } .zmit-footer-cta-text p { font-size: 12.5px; line-height: 1.55; color: #b9bbc8; margin: 0; } .zmit-footer-cta-btns { display: flex; flex-direction: column; gap: 12px; } .zmit-footer-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 170px; padding: 11px 22px; border: 1px solid rgba(255,255,255,.45); border-radius: 6px; color: #fff; font-size: 13px; font-weight: 600; transition: background .2s, border-color .2s; } .zmit-footer-btn span { font-size: 16px; line-height: 1; } .zmit-footer-btn:hover { background: var(--z-blue, #3A43C4); border-color: var(--z-blue, #3A43C4); } /* Main columns */ .zmit-footer-main { background: #141414; padding: 50px 0 56px; } .zmit-footer-cols { display: grid; grid-template-columns: 1.3fr 1.1fr 1.2fr 1fr; gap: 40px; } .zmit-footer-brandcol .zmit-footer-logo { margin-bottom: 22px; } .zmit-footer-badges { display: flex; gap: 14px; margin-bottom: 32px; } .zmit-footer-badges img { height: 48px; width: auto; } .zmit-footer-news-label { display: block; color: #fff; font-size: 14px; font-weight: 600; margin-bottom: 12px; } .zmit-footer-news-form { display: flex; align-items: center; background: #1f1f1f; border: 1px solid #333; border-radius: 4px; overflow: hidden; max-width: 280px; } .zmit-footer-news-form input { flex: 1; min-width: 0; background: transparent; border: 0; padding: 11px 12px; color: #fff; font-size: 12.5px; } .zmit-footer-news-form input::placeholder { color: #8a8a92; } .zmit-footer-news-form input:focus { outline: none; } .zmit-footer-news-form button { display: inline-flex; align-items: center; gap: 5px; background: var(--z-blue, #3A43C4); color: #fff; border: 0; padding: 9px 14px; margin: 3px; border-radius: 3px; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; } .zmit-footer-linkcol h4 { color: #fff; font-size: 15px; font-weight: 700; margin: 0 0 16px; } .zmit-footer-linkcol h4 + ul { margin-bottom: 26px; } .zmit-footer-linkcol ul li { margin-bottom: 11px; } .zmit-footer-linkcol ul li a { font-size: 13px; color: #b1b3c4; } .zmit-footer-linkcol ul li a:hover { color: #fff; } /* Bottom bar */ .zmit-footer-bottom { background: #000; padding: 30px 0 26px; text-align: center; } .zmit-footer-social { display: flex; justify-content: center; gap: 12px; margin-bottom: 18px; } .zmit-footer-social a { width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #000; display: inline-flex; align-items: center; justify-content: center; transition: opacity .2s; } .zmit-footer-social a:hover { opacity: .8; } .zmit-footer-copy { font-size: 12px; color: #c9cad4; margin: 0 0 10px; } .zmit-footer-copy a { color: #c9cad4; } .zmit-footer-copy a:hover { color: #fff; } .zmit-footer-cookie { font-size: 12px; color: #c9cad4; margin: 0; } .zmit-footer-cookie a { color: var(--z-blue, #8088e6); text-decoration: underline; } /* ============================================================ RESPONSIVE ============================================================ */ /* @media(1080) removed: old sheet overrode these with later non-media rules, so the page was non-responsive down to 680px; keep that. */ @media (max-width: 680px) { /* Hidden on small screens: the hero stacks, so a hero-anchored centre cue would land over the form card, and a scroll affordance earns nothing on a phone. */ .zmit-hero-scroll { display: none; } .zmit .z-section { padding: 52px 0; } .zmit .zmit-why.z-section { padding-bottom: 32px; } .zmit .z-h2, .zmit-why-head h2, .zmit-services-head h2, .zmit-challenges h2, .zmit-itil-head h2, .zmit-approach-head h2, .zmit-testi h2, .zmit-stories h2, .zmit-faq h2, .zmit-final h2 { font-size: 27px; } .zmit-form-row { grid-template-columns: 1fr; } .zmit-tech-panel.is-active { grid-template-columns: 1fr; } .zmit-why-grid, .zmit-services-grid, .zmit-stats-grid, .zmit-stories-grid, .zmit-articles-grid { grid-template-columns: 1fr; } .zmit-industries-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zmit-testi-card { padding: 32px 24px; } .zmit-testi-role { font-size: 20px; } .zmit-compare-grid { grid-template-columns: 1fr; gap: 20px; } .zmit-midcta-grid { grid-template-columns: 1fr; gap: 32px; } .zmit-standards-logos { flex-wrap: wrap; } .zmit-standards-badge { flex: 1 1 40%; max-width: none; } .zmit-recognized-band { grid-template-columns: 1fr; gap: 28px; padding: 32px 26px; } .zmit-footer-cols { grid-template-columns: 1fr; gap: 30px; } .zmit-footer-cta { flex-direction: column; align-items: flex-start; } .zmit-footer-cta-brand { flex-wrap: wrap; gap: 14px; } .zmit-footer-cta-divider { display: none; } .zmit-footer-cta-btns { flex-direction: row; flex-wrap: wrap; } .zmit-footer-btn { min-width: 140px; } .zmit-contact-form { padding: 28px 22px; } } /* Scroller drops to 3-up on phones (Zazz mobile-items=3). Declared after the 1080px rule so it wins for viewports that match both. */ @media (max-width: 767px) { .zmit-trust-band { padding: 32px 0; } .zmit-trust-track { gap: 28px; } .zmit-trust-chip { height: 48px; } .zmit-trust-chip img { height: 48px; } } /* ============================================================ ZAZZ SERVICE-PAGE BASELINE ------------------------------------------------------------ Promoted out of azure-consulting-services.css so every zmit service page (and inc/it-managed-services-zazz/service-page-template.php) inherits the zazz look — palette, typography, colours and section LAYOUTS — instead of copying the Azure page's stylesheet. Page-specific GEOMETRY (section paddings, overlap margins, content heights, hero image) stays in each page's own sheet; nothing here sets those properties, so the two sheets never collide on the same property. ============================================================ */ /* ---- Palette + type ---- */ .zmit { --z-blue: #0161ff; --z-blue-dark: #0148c7; --z-ink: #14142b; --z-body: #212d3a; --z-line: #e9eaf2; --z-soft: #f5f8fa; --z-dark: #262338; --z-darker: #14142b; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .zmit-hero, .zmit-challenges { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; } /* ---- Zazz colour overrides (shared sheet shipped AppStudio indigo) ---- */ .zmit-hero .zmit-hero-cta-btn, .zmit-hero .zmit-hero-cta-btn:hover, .zmit-hero .zmit-hero-cta-btn .zmit-hero-cta-text, .zmit-hero .zmit-hero-cta-btn .zmit-hero-cta-ico { color: #0161ff !important; } .zmit-hero .zmit-hero-cta-btn .zmit-hero-cta-ico svg { fill: #0161ff; } .zmit-hero .zmit-hero-cta-btn { border-color: #cfdcff; } .zmit-hero .zmit-hero-cta-btn:hover { background: #eaf1ff; } .zmit-why-card, .zmit-acc-item, .zmit-acc-q, .zmit-acc-a, .zmit-faq-item { background: #262338; } .zmit-stat .big { color: #76aaff; } .zmit-faq { background: #eff0f7; } .zmit-contact { background: linear-gradient(120deg, #0091ff 0%, #0161ff 55%, #0148c7 100%); } .zmit-hsform input:focus, .zmit-hsform textarea:focus, .zmit-hsform select:focus, .zmit-hsform .hsfc-TextInput:focus, .zmit-hsform .hsfc-TextareaInput:focus { border-color: #0161ff !important; } .zmit-hsform .hsfc-Button { background-color: #0161ff !important; } .zmit-hsform .hsfc-Button:hover { background-color: #0148c7 !important; } .zmit-hsform li.hsfc-DropdownOptions__List__ListItem:hover { background: #eaf1ff !important; color: #0161ff !important; } .zmit-hsform input.hs-button, .zmit-hsform .hs-button, .zmit-hsform button[type="submit"] { background-color: #0161ff !important; border-color: #0161ff !important; color: #fff !important; } .zmit-why-head h2, .zmit-services-head h3, .zmit-approach-copy h2, .zmit-testi h2, .zmit-stories h2, .zmit-faq h2, .zmit-bookcal h2, .zmit-story h3, .zmit-intro-copy h2, .zmit-testi-role, .zmit-testi-lead, .zmit-articles-head h2 { color: #14142b; } .zmit-testi-rule { background: #14142b; } /* ---- Production typography (weights 300–600, measured sizes) ---- */ .zmit-hero .zmit-hero-pill { font-size: 16px; font-weight: 400; line-height: 24px; } .zmit-hero .zmit-hero-headline { font-size: 54px; font-weight: 600; line-height: 64.8px; letter-spacing: normal; } .zmit-hero .zmit-hero-sub { font-size: 16px; font-weight: 400; line-height: 26.4px; } .zmit-form-card h3 { font-size: 20px; font-weight: 600; color: #000; } .zmit-form-note { font-size: 14px; font-weight: 400; line-height: 14px; color: #2a2929; } .zmit-intro-copy h2 { font-size: 34px; font-weight: 400; line-height: 44.2px; color: #14142b; margin-bottom: 34px; } .zmit-intro-copy p { font-size: 15.5px; font-weight: 400; line-height: 24px; color: #14142b; margin: 0 0 26px; } .zmit-services-head h3 { font-size: 34px; font-weight: 400; line-height: 44.2px; color: #14142b; } .zmit-approach-copy h2 { font-size: 30px; font-weight: 400; line-height: 39px; color: #141414; } .zmit-approach-copy p { font-size: 16px; font-weight: 400; line-height: 26.4px; color: #14142b; } .zmit-recognized-copy h2 { font-size: 30px; font-weight: 300; line-height: 42px; } .zmit-recognized-copy p { font-size: 16px; font-weight: 300; line-height: 26.4px; color: #f2f7ff; margin-bottom: 18px; } .zmit-recognized-logos img { height: 44px; } .zmit-why-head h2 { font-size: 34.7px; font-weight: 400; line-height: 43px; color: #14142b; } .zmit-why-head p { font-size: 18px; font-weight: 400; line-height: 27px; color: #14142b; } .zmit-stories h2 { font-size: 34px; font-weight: 400; line-height: 44.2px; } .zmit-story h3 { font-size: 18px; font-weight: 700; line-height: 25.2px; } .zmit-story p { font-size: 14px; font-weight: 400; line-height: 23.1px; } .zmit-story .body { padding: 20px 12px 26px; } .zmit-bookcal h2 { font-size: 30px; font-weight: 400; line-height: 39px; margin-bottom: 8px; } .zmit-bookcal p { font-size: 16px; font-weight: 400; line-height: 26.4px; margin-bottom: 20px; } .zmit-stats-copy h2 { font-size: 34px; font-weight: 400; line-height: 44.2px; color: #fcfcfc; margin-bottom: 30px; } .zmit-testi h2 { font-size: 30px; font-weight: 300; line-height: 39px; } .zmit-testi-role { font-size: 22.5px; font-weight: 500; line-height: 33.6px; margin-bottom: 0; } .zmit-testi-lead { font-size: 34px; font-weight: 600; line-height: 43px; margin: 0 0 14px; } .zmit-testi-quote { font-size: 18px; font-weight: 400; line-height: 29.7px; } .zmit-testi-rule { width: 26px; height: 2px; margin: 10px 0 18px; } .zmit-faq h2 { font-size: 34px; font-weight: 400; line-height: 44.2px; } .zmit-faq-a-inner { font-size: 14px; } .zmit-acc-a-inner { font-size: 14.5px; } .zmit-final-copy h2 { font-size: 33px; font-weight: 600; line-height: 43px; } .zmit-final-copy p { font-size: 17.16px; font-weight: 400; line-height: 25.2px; } .zmit-contact-head h2 { font-size: 33.89px; font-weight: 300; line-height: 43px; color: #fcfcfc; } .zmit-contact-head p { font-size: 16px; font-weight: 400; line-height: 26.4px; color: #fcfcfc; } .zmit-contact-form h3 { font-size: 25px; font-weight: 400; line-height: 32.5px; color: #6e7191; } .zmit-contact-form { padding: 30px 40px; } /* ---- Intro band layout ---- */ .zmit-intro { background: #fcfcfc; } .zmit-intro-grid { display: grid; grid-template-columns: 1fr .72fr; gap: 50px; align-items: center; } .zmit-intro-cta { margin-top: 10px; } .zmit-intro-media img { width: 100%; border-radius: 10px; display: block; } /* ---- Services: borderless cards, flush photo, grey copy panel, chevron nav ---- */ .zmit-services { background: #f7f7fc; } .zmit-svc-carousel { position: relative; } .zmit-svc-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 22px) / 4); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 6px; scrollbar-width: none; } .zmit-svc-track::-webkit-scrollbar { display: none; } .zmit-svc-track > .zmit-svc-card { scroll-snap-align: start; } .zmit-svc-track > .zmit-svc-card, .zmit-svc-track > .zmit-svc-card:nth-child(even) { padding: 0; background: linear-gradient(180deg, transparent 0, transparent 180px, #f4f4f8 180px, #f4f4f8 100%); border-right: 1px solid rgba(20, 20, 43, .08); border-radius: 0; } .zmit-svc-card:hover { box-shadow: none; transform: none; } .zmit-svc-media { margin: 0; border-radius: 0; overflow: hidden; } .zmit-svc-media img { width: 100%; object-fit: cover; display: block; border-radius: 0; } .zmit-svc-card h4 { padding: 20px 18px 0; margin-bottom: 12px; font-size: 17px; line-height: 23px; color: #14142b; font-weight: 700; } .zmit-svc-card ul { padding: 0 18px 22px; margin: 0; } .zmit-svc-card li { font-size: 13px; line-height: 20px; color: #14142b; } .zmit-svc-card li::before { color: #6e71c8; } .zmit-svc-nav { display: flex; gap: 18px; justify-content: flex-start; margin-top: 16px; } .zmit-svc-nav button { background: transparent !important; border: 0 !important; color: #14142b !important; width: auto; height: auto; font-size: 26px; line-height: 1; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color .2s ease; } .zmit-svc-nav button:hover { color: #0161ff !important; background: transparent !important; } /* ---- Approach accordion ---- */ .zmit-approach { background: #fcfcfc; } .zmit-approach-acc { gap: 8px; } .zmit-acc-item { border-radius: 6px; } .zmit-acc-q { padding: 25px 26px; font-size: 16px; font-weight: 500; } .zmit-acc-q .sign { font-size: 24px; } /* ---- Recognized band container width ---- */ .zmit-recognized .z-container { max-width: 1280px; } /* ---- Why: heading+lead left, 2x2 card-less grid right ---- */ .zmit-why .z-container { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; } .zmit-why-head { margin-bottom: 0; max-width: none; } .zmit-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; } .zmit-why-card { background: transparent; border-radius: 0; padding: 0; text-align: left; color: inherit; } .zmit-why-ic { margin: 0 0 24px; width: 50px; height: auto; } .zmit-why-ic img { width: 50px; height: auto; margin: 0; display: block; } .zmit-why-card h3 { font-size: 19px; font-weight: 700; line-height: 25px; color: #14142b; margin-bottom: 14px; } .zmit-why-card p { font-size: 15px; font-weight: 400; line-height: 22.5px; color: #56566a; } /* ---- Stats: copy left, three counters right ---- */ .zmit-stats { background: #262338; } .zmit-stats-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: 56px; align-items: center; } .zmit-stats-copy { max-width: 420px; } .zmit-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .zmit-stat .big { font-size: 40px; margin-bottom: 10px; } .zmit-stat .big .num, .zmit-stat .big .pct { display: inline; } .zmit-stat p { font-size: 14px; line-height: 23px; } /* ---- Book-a-consultation band ---- */ .zmit-bookcal { background: #fff; text-align: center; } .zmit-bookcal p { max-width: 760px; margin-left: auto; margin-right: auto; } /* ---- CTA arrows are decoration, not label text ---- */ .zmit .zmit-intro-cta .z-btn::after, .zmit .zmit-recognized-cta .z-btn::after, .zmit .zmit-stats-copy .z-btn::after, .zmit .zmit-final-copy .z-btn::after { content: "\2192"; font-size: 15px; line-height: 1; } /* ---- Final CTA gradient (banner geometry stays in the page sheet) ---- */ .zmit-final-banner { background: linear-gradient(100deg, #eef6f1 0%, #dce9fb 34%, #93b8fb 68%, #2f7bff 100%); border-radius: 10px; } /* ---- Insights band ---- */ .zmit-insights { background: #000; color: #fff; } .zmit-insights-grid { display: grid; grid-template-columns: 1fr auto; gap: 44px; align-items: center; } .zmit-insights-copy { display: grid; grid-template-columns: auto 1fr; column-gap: 0; row-gap: 12px; } .zmit-insights-logo { grid-column: 1; grid-row: 1; height: 34px; width: auto; margin: 0; align-self: center; display: block; } .zmit-insights-copy p.zmit-insights-title { grid-column: 2; grid-row: 1; margin: 0; align-self: center; max-width: 400px; color: #fff; font-size: 22px; font-weight: 400; line-height: 31px; border-left: 1px solid rgba(255,255,255,.22); padding-left: 24px; margin-left: 24px; } .zmit-insights-copy p:not(.zmit-insights-title) { grid-column: 1 / -1; grid-row: 2; margin: 0; max-width: 560px; color: #c8cad4; font-size: 14.5px; line-height: 22px; } .zmit-insights-btns { display: flex; flex-direction: column; gap: 12px; } .zmit-insights-btns a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 180px; padding: 12px 24px; border: 1px solid rgba(255,255,255,.45); border-radius: 6px; color: #fff; font-size: 13px; font-weight: 600; transition: background .2s, border-color .2s; } .zmit-insights-btns a:hover { background: var(--z-blue); border-color: var(--z-blue); color: #fff; } .zmit-insights-btns a:first-child { background: #fff; border-color: #fff; color: #14142b; } .zmit-insights-btns a:first-child:hover { background: #eaf1ff; border-color: #eaf1ff; color: #14142b; } /* ---- Hero form card spacing ---- */ .zmit-form-card .zmit-hsform .hsfc-NavigationRow { margin-top: 12px !important; } .zmit-form-card .zmit-form-note { margin-top: 18px !important; } /* ============================================================ FOOTER — link tree, brand column, inline newsletter ============================================================ */ .zmit-footer-cols { display: grid; grid-template-columns: 1.35fr 1.05fr 1.15fr .95fr; gap: 40px; } .zmit-footer-linkcol h4 { color: #fff; font-size: 15px; font-weight: 700; margin: 0 0 18px; } .zmit-footer-linkcol h4 + ul { margin-bottom: 30px; } .zmit-footer-linkcol ul li { margin-bottom: 12px; } .zmit-footer-linkcol ul li a { font-size: 13.5px; white-space: normal; } .zmit-footer-brandcol { display: block; padding-top: 26px; } .zmit-footer-brandcol .zmit-footer-logo { width: 221px; height: 50px; object-fit: contain; object-position: left center; margin: 0 0 52px; } .zmit-footer-badges { margin: 0; display: flex; } .zmit-footer-badges img { height: 64px; width: auto; } .zmit-footer-news-label { display: block; margin: 163px 0 22px; font-size: 14px; } .zmit-footer-news { max-width: 389px; } .zmit-footer-news .zmit-hsform .hsfc-Form { display: flex; align-items: center; background: #1f1f1f; border: 1px solid #333; border-radius: 4px; overflow: hidden; max-width: 389px; padding: 0; position: relative; } .zmit-footer-news .zmit-hsform form { position: relative; } .zmit-footer-news .zmit-hsform .hsfc-Step, .zmit-footer-news .zmit-hsform .hsfc-Step__Content { flex: 1 1 auto; min-width: 0; } .zmit-footer-news .zmit-hsform .hsfc-Step__Content { display: flex; align-items: center; } .zmit-footer-news .zmit-hsform .hsfc-Row { flex: 1 1 auto; min-width: 0; margin: 0; } .zmit-footer-news .zmit-hsform label, .zmit-footer-news .zmit-hsform .hsfc-Label { display: none !important; } .zmit-footer-news .zmit-hsform input[type="email"], .zmit-footer-news .zmit-hsform .hsfc-TextInput { background: transparent !important; border: 0 !important; border-radius: 0 !important; height: 46px !important; padding: 0 12px !important; width: 100% !important; box-shadow: none !important; color: #fff !important; font-size: 12.5px !important; } .zmit-footer-news .zmit-hsform input::placeholder { color: #8a8a92 !important; } .zmit-footer-news .zmit-hsform .hsfc-NavigationRow { position: static !important; transform: none !important; flex: 0 0 auto; margin: 0 4px 0 0; top: auto; right: auto; bottom: auto; align-self: stretch; display: flex; } .zmit-footer-news .zmit-hsform .hsfc-Button__Wrapper { position: static !important; transform: none !important; } .zmit-footer-news .zmit-hsform .hsfc-NavigationRow__Buttons { margin: 0; align-items: stretch; height: 100%; } .zmit-footer-news .zmit-hsform .hsfc-Button { width: auto !important; height: 100% !important; align-self: stretch; padding: 0 20px !important; font-size: 12.5px !important; border-radius: 0 3px 3px 0 !important; background-color: #0161ff !important; white-space: nowrap; display: inline-flex !important; align-items: center; gap: 8px; } .zmit-footer-news .zmit-hsform .hsfc-Button::after { content: "\203A"; font-size: 15px; line-height: 1; } .zmit-footer-social { display: flex; gap: 14px; margin-bottom: 12px; } .zmit-footer-social a { width: 46px; height: 46px; } .zmit-footer-social svg { width: 20px; height: 20px; } .zmit-footer-copy { font-size: 13.5px; margin-bottom: 6px; } .zmit-footer-copy a { color: #c9cad4; } .zmit-footer-cookie { font-size: 13px; } .zmit-footer-main { padding: 54px 0 50px; } .zmit-footer-bottom { padding: 30px 0 26px; } /* ============================================================ HEADER — fixed 100px bar, zazz colours, dropdown bridge ============================================================ */ .custom-navbar, .custom-navbar.fixed { position: fixed !important; top: 0; left: 0; right: 0; z-index: 999; background-color: #fff !important; min-height: 100px !important; align-items: center; display: flex !important; flex-wrap: nowrap !important; padding-left: 125px !important; padding-right: 24px !important; box-shadow: none !important; border-bottom: 0 !important; } .custom-navbar .container, .custom-desktop-navbar { border-bottom: 0 !important; box-shadow: none !important; } .zmit { padding-top: 100px; } .custom-navbar .nav-link { color: #14142b !important; } .custom-navbar .navbar-brand, .custom-navbar.fixed .navbar-brand, .custom-mobile-navbar .navbar-brand, .custom-mobile-navbar .mobile-header a:first-child { display: inline-block; width: 150px; height: 44px; margin: 0; flex: 0 0 auto; background: url('https://dahqbtk1vlskk.cloudfront.net/wp-content/uploads/2025/06/18072504/Zazz-Logo-black.svg') left center / contain no-repeat; } .custom-navbar .navbar-brand img, .custom-navbar.fixed .navbar-brand img, .custom-mobile-navbar .navbar-brand img, .custom-mobile-navbar .mobile-header a:first-child img { visibility: hidden; width: 150px !important; height: 44px !important; } #customNavbar { flex: 1 1 auto; margin: 0 !important; justify-content: center !important; } .custom-navbar .header-button, .custom-navbar.fixed .header-button { flex: 0 0 auto; margin-left: auto; } .custom-navbar .header-button, .custom-navbar.fixed .header-button, .custom-mobile-navbar .header-menu-button { background: #0161ff !important; color: #fff !important; border: 0 !important; border-radius: 2px; padding: 13px 22px; font-weight: 600; font-size: 14px; } .custom-navbar .header-button svg { display: none; } .custom-navbar .navbar-nav { margin-right: auto; } .custom-navbar .header-d-icon { filter: none !important; } .custom-navbar .header-d-icon svg, .custom-navbar .header-d-icon svg * { fill: #14142b !important; stroke: #14142b !important; } .zmit-hero-crumb { padding-top: 26px; } /* Dropdown hover bridge: the panel opens 16px below the nav item; a transparent ::before fills the gap so the descending cursor keeps :hover on the li. */ .custom-navbar .dropdown-menu { position: absolute; } .custom-navbar .dropdown-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 22px; background: transparent; } @media (max-width: 999px) { .custom-navbar, .custom-navbar.fixed { padding-left: 24px !important; padding-right: 24px !important; } .custom-mobile-navbar { min-height: 100px; } .custom-mobile-navbar .mobile-header { position: fixed !important; top: 0; left: 0; right: 0; z-index: 999; background: #fff; min-height: 100px; display: flex; align-items: center; } .zmit { padding-top: 100px; } .zmit-hero-crumb { padding-top: 22px; } .zmit-footer-news .zmit-hsform input[type="email"], .zmit-footer-news .zmit-hsform .hsfc-TextInput { padding-right: 120px !important; } } /* ============================================================ RESPONSIVE LAYOUT (structural; page geometry stays in the page sheet) ============================================================ */ /* @media(1080) removed: old sheet overrode these with later non-media rules, so the page was non-responsive down to 680px; keep that. */ @media (max-width: 999px) and (min-width: 681px) { .zmit-footer-cols { grid-template-columns: 1.35fr 1.05fr 1.15fr .95fr; gap: 24px; } .zmit-footer-linkcol ul li a { font-size: 12.5px; } } @media (max-width: 680px) { .zmit-intro-copy h2, .zmit-bookcal h2 { font-size: 27px; } .zmit-svc-track { grid-auto-columns: 84%; } .zmit-stats-grid { grid-template-columns: 1fr; } .zmit-insights-btns { flex-direction: row; flex-wrap: wrap; } .zmit-why-grid { grid-template-columns: 1fr; } .zmit-footer-cols { grid-template-columns: 1fr; gap: 26px; } .zmit-footer-brandcol { order: -1; } .zmit-footer-news { max-width: 100%; } .zmit-footer-linkcol h4 { margin-bottom: 12px; } .zmit-footer-linkcol h4 + ul { margin-bottom: 18px; } .zmit-footer-linkcol ul li { margin-bottom: 8px; } .zmit-footer-main { padding: 34px 0 30px; } } /* Desktop brand mark renders 34px tall; the mobile bar keeps 44px. (Split out because the two share a rule above but differ in height.) */ .custom-navbar .navbar-brand, .custom-navbar.fixed .navbar-brand { height: 34px; } .custom-navbar .navbar-brand img, .custom-navbar.fixed .navbar-brand img { height: 34px !important; } /* FAQ item spacing (was in the page sheet; belongs to the shared FAQ layout) */ .zmit-faq-item { margin-bottom: 10px; } .zmit-faq-q { padding: 16px 22px; } /* Services cards carry only a right divider; reset the template's full border (the border-right rule above re-adds the divider). */ .zmit-svc-card { border: 0; } /* Small layout rules that were in the page sheet (structural, all pages) */ .zmit-why-head p { margin: 12px 0 0; } .zmit-stories-grid { gap: 20px; } .zmit-bookcal p { margin: 0 auto 20px; } .zmit-faq-list { column-gap: 30px; } .zmit-insights-copy { position: relative; } .zmit-insights-copy p.zmit-insights-title { font-size: 24px; } .zmit-footer-brandcol { flex-direction: column; } .zmit-footer-news .zmit-hsform label, .zmit-footer-news .zmit-hsform .hsfc-Label { margin-bottom: 5px !important; } .zmit-footer-news .zmit-hsform input { padding: 9px 11px !important; font-size: 12.5px !important; } .zmit-footer-news .zmit-hsform label, .zmit-footer-news .zmit-hsform .hsfc-Label { font-size: 12.5px !important; } .zmit-footer-news .zmit-hsform .hsfc-NavigationRow { margin: 0 !important; } /* Align mobile header cascade to the pre-split final values: the desktop bar keeps its 125px pad at all widths, and the mobile wrapper is min-height:0 (the fixed .mobile-header is out of flow; .zmit padding-top reserves space). */ @media (max-width: 999px) { .custom-navbar, .custom-navbar.fixed { padding-left: 125px !important; padding-right: 24px !important; } .custom-mobile-navbar { min-height: 0; } } /* Mobile bar (<1000px) button styling — matches the pre-split @media cascade. */ @media (max-width: 999px) { .custom-mobile-navbar .header-menu-button, .custom-mobile-navbar .header-button { background: #0161ff !important; color: #fff !important; border-radius: 2px; padding: 12px 18px; font-weight: 600; font-size: 13.5px; } .custom-mobile-navbar .header-menu-button svg, .custom-mobile-navbar .header-button svg { display: none; } } /* ============================================================ MOBILE / TABLET LAYOUT (structural) ------------------------------------------------------------ The pre-split cascade left the hero and a few wide grids locked to their desktop column counts at every viewport (see the repeated "@media(1080) removed" notes above), so the hero overflowed the viewport horizontally below ~1080px and the form column was squeezed to ~140px on a phone. These rules restore the stacking. Appended last so no later non-media rule in this sheet can override them again. Page GEOMETRY (section paddings, content heights) stays in each page's own sheet, per the split rule at the top of the file. ============================================================ */ @media (max-width: 1080px) { /* Hero: one column. The form card's desktop lift + rightward shift is already gated at min-width:1081px, so only the grid itself and the card's overhang onto the trust band need undoing here. */ .zmit-hero-grid { grid-template-columns: 1fr; gap: 30px; padding: 22px 0 44px; } .zmit-hero .zmit-hero-headline { font-size: 38px; line-height: 1.22; } .zmit-hero .zmit-hero-sub { max-width: none; } .zmit-form-card { margin-bottom: 0; } .zmit-approach-layout { grid-template-columns: 1fr; gap: 34px; } } /* Tablet only: the 680px block above already puts stories one-up on a phone. */ @media (max-width: 1080px) and (min-width: 681px) { .zmit-stories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { .zmit-hero .zmit-hero-headline { font-size: 30px; line-height: 1.25; } .zmit-hero .zmit-hero-pill { font-size: 14px; } .zmit-hero .zmit-hero-cta-btn { width: 100%; justify-content: center; } /* Two columns of Q&A on a phone leaves ~140px of text per column. */ .zmit-faq-list { column-count: 1; } } /* header.php hides .custom-desktop-navbar below 1000px and shows .custom-mobile-navbar instead. The `display: flex !important` above (needed to beat header.php's own desktop rules) was overriding that too, so the desktop bar stayed fixed at z-index 999 across the working mobile header — and its Bootstrap toggler is inert on these pages because zazz-footer.php ships no jQuery/Bootstrap. Tapping the burger did nothing. Hand the bar back. */ @media (max-width: 1000px) { .custom-navbar.custom-desktop-navbar, .custom-navbar.custom-desktop-navbar.fixed { display: none !important; } } @media (max-width: 1000px) { /* header.php's mobile bar is built for a dark hero: white wordmark, white burger strokes. The bar is white here, so both were invisible. CSS cannot change an img src, so the logo gets the black mark as a background and a zero-width content box. */ .custom-mobile-navbar .mobile-header img.logo { width: 132px !important; height: 34px !important; padding-left: 132px; box-sizing: border-box; background: url('https://dahqbtk1vlskk.cloudfront.net/wp-content/uploads/2025/06/18072504/Zazz-Logo-black.svg') left center / contain no-repeat; } .custom-mobile-navbar .mobile-header .hamburger-icon { width: 44px; height: 44px; border-radius: 6px; } /* .headerfixed inverts the burger svg on scroll, which flipped the dark strokes back to white against the white bar. */ .custom-mobile-navbar .mobile-header .hamburger-icon svg { filter: none !important; } .custom-mobile-navbar .mobile-header .hamburger-icon svg path { stroke: #14142b; } /* "Get Custom Quote" wrapped inside a 44px box and clipped, and its width pushed the burger off the bar. */ .custom-mobile-navbar .mobile-header .header-button { white-space: nowrap; padding: 11px 14px !important; font-size: 13px !important; line-height: 1.2; border-radius: 2px; } .custom-mobile-navbar .mobile-header .right-items { display: flex; align-items: center; gap: 10px; } } @media (max-width: 680px) { /* Insights band: the logo / rule / title row is a desktop composition. At 360px it squeezed the title into a ~150px column seven lines deep. */ .zmit-insights-copy { grid-template-columns: 1fr; row-gap: 14px; } /* .zmit img { height: auto } outranks a single-class rule, so this needs two classes to keep the mark at bar height instead of its natural 64px. */ .zmit .zmit-insights-logo { grid-column: 1; grid-row: 1; height: 30px; width: auto; } .zmit-insights-copy p.zmit-insights-title { grid-column: 1; grid-row: 2; max-width: none; border-left: 0; padding-left: 0; margin-left: 0; font-size: 20px; line-height: 28px; } .zmit-insights-copy p:not(.zmit-insights-title) { grid-row: 3; } .zmit-insights-btns a { flex: 1 1 auto; min-width: 0; } } @media (max-width: 680px) { /* Testimonials: the prev/next buttons flank the card in a flex row, which left the card 234px wide and broke the 34px pull-quote across six lines. Wrap the nav under a full-width card. */ .zmit-testi-carousel { flex-wrap: wrap; justify-content: center; gap: 16px; } .zmit-testi-card { flex: 1 0 100%; order: -1; } .zmit-testi-lead { font-size: 22px; line-height: 1.32; } .zmit-testi-role { font-size: 18px; } } /* Touch targets: the carousel controls were 7x26 (services) and 36x36 (testimonials), both under the 44px minimum. */ @media (max-width: 1000px) { .zmit-svc-nav button, .zmit-testi-nav { width: 44px; height: 44px; min-width: 44px; } }