/* ============================================================ 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 */ .zmit-hero-scroll { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-top: 14px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); color: #fff; font-size: 16px; animation: zmit-bob 1.8s ease-in-out infinite; } .zmit-hero-scroll:hover { color: #fff; background: rgba(255,255,255,.1); } @keyframes zmit-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(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 { 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 { 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 { display: none; } /* ============================================================ 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, 1fr); gap: 16px; } .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; } .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 (max-width: 1080px) { .zmit-hero-grid { grid-template-columns: 1fr; gap: 36px; padding-top: 36px; } .zmit-hero-left { padding-bottom: 24px; } .zmit-form-card { margin-bottom: 0; } /* Stacked layout: scroller spans the full width again (no form beside it) */ .zmit-trust { width: 100%; max-width: 100%; } .zmit-trust-track { gap: 36px; } .zmit-why-grid { grid-template-columns: repeat(2, 1fr); } .zmit-services-grid { grid-template-columns: repeat(2, 1fr); } .zmit-tech-layout { grid-template-columns: 1fr; } .zmit-tech-tabs { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; max-height: none; padding-right: 0; padding-bottom: 12px; margin-bottom: 20px; } .zmit-tech-tab { white-space: nowrap; } .zmit-tech-panels { border-left: 0; padding-left: 0; min-height: 0; } .zmit-approach-layout { grid-template-columns: 1fr; gap: 36px; } .zmit-stats-layout { grid-template-columns: 1fr; gap: 36px; } .zmit-stats-grid { grid-template-columns: repeat(2, 1fr); } .zmit-stories-grid, .zmit-articles-grid { grid-template-columns: repeat(2, 1fr); } .zmit-industries-grid { grid-template-columns: repeat(3, 1fr); } .zmit-power-grid { grid-template-columns: 1fr; gap: 32px; } .zmit-faq-list { column-count: 1; } .zmit-itil-accordion { flex-direction: column; } .zmit-itil-item, .zmit-itil-item.is-open { flex: 1 1 auto; } .zmit-itil-item .zmit-itil-rail { width: 110px; background: linear-gradient(180deg,#3A43C4 0%, #6a5cf0 100%); flex-direction: row; justify-content: center; gap: 14px; padding: 18px; } .zmit-itil-item .zmit-itil-ic { background: #fff; } .zmit-itil-item .zmit-itil-ic svg { opacity: 1; } .zmit-itil-item .zmit-itil-letter { color: #fff; font-size: 34px; } .zmit-itil-item .zmit-itil-body { display: block; padding: 24px 26px; } .zmit-footer-cols { grid-template-columns: 1fr 1fr; gap: 36px; } .zmit-footer-cta { justify-content: flex-start; } .zmit-final-banner { padding: 40px 36px 0; min-height: 0; } .zmit-final-copy { max-width: 100%; } .zmit-final-media { position: static; text-align: center; } .zmit-final-media img { position: static; height: 280px; margin-top: 20px; } .zmit-header .z-menu { display: none; } .zmit-header .z-burger { display: block; } } @media (max-width: 680px) { .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, 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; } }