/* ============================================================ 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; /* Pull the (tall) form card up far enough that it no longer stretches the dark banner: the LEFT column now drives the banner height, so the dark area ends just below the CTA -- i.e. around the Budget field -- and the Budget / Submit / note rows overflow down onto the white logo band. */ margin-bottom: -210px; position: relative; z-index: 10; } .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; } .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%); } /* 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: 178px; min-height: 152px; background: #161618; 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: 128px; width: auto; } .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: 28px; 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: 28px auto 0; border: 1px solid var(--z-line); border-radius: 10px; 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; } /* ============================================================ 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: 800px; } .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; } .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 .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; } }