/* ============================================================ MVP App Development Company (/service/mvp-app-developement) White page, single blue accent. BEM-ish `mvp-` prefix. Base, buttons, hero, awards, CTA band, process and FAQ are ported from pwa.css; the stack tabs come from food-delivery.css, the benefit cards and the why-bento from white-label.css. Scroll-reveal via `.mvp-anim` on . ============================================================ */ /* Global stylesheets set `overflow-x: hidden` on , which makes it a scroll container and disables `position: sticky` inside it. `clip` stops the same overflow without creating one. Scoped with :has() to this page. */ body:has(.mvp-page) { overflow-x: clip; } .mvp-page { --mvp-blue: #0b6cf0; --mvp-blue-deep: #0148c4; --mvp-ink: #0b0b0f; --mvp-body: #55575e; --mvp-muted: #7d8494; --mvp-line: #e9edf4; position: relative; background: #fff; color: var(--mvp-ink); overflow-x: clip; font-family: "Gabarito", "Poppins", "Inter", system-ui, -apple-system, sans-serif; } .mvp-page .container { max-width: 1290px; } .mvp-page :where(h1, h2, h3, h4) { margin: 0; letter-spacing: -0.02em; color: var(--mvp-ink); } .mvp-page :where(p) { margin: 0; color: var(--mvp-body); } .mvp-page :where(ul, ol) { margin: 0; padding: 0; list-style: none; } /* Blue highlight word in headings. */ .mvp-accent { color: transparent; background: linear-gradient(90deg, #0166FA 0%, #6609FC 100%); background-clip: text; } /* ---------- pill button (label + arrow disc swap on hover) ---------- */ .mvp-btn { --mvp-btn-icon-w: 44px; --mvp-btn-gap: 14px; --mvp-btn-pad-l: 30px; --mvp-btn-pad-r: 10px; position: relative; display: inline-flex; align-items: center; gap: var(--mvp-btn-gap); width: max-content; max-width: 100%; padding: 10px var(--mvp-btn-pad-r) 10px var(--mvp-btn-pad-l); border-radius: 999px; background: var(--mvp-blue); color: #fff; overflow: hidden; text-decoration: none; transition: box-shadow 0.25s ease, transform 0.25s ease, padding 0.5s cubic-bezier(0.65, 0, 0.35, 1); } .mvp-btn:hover, .mvp-btn:focus-visible { padding-left: var(--mvp-btn-pad-r); padding-right: var(--mvp-btn-pad-l); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(11, 108, 240, 0.35); } .mvp-btn__label { display: inline-block; flex: none; font-family: "Poppins", "Gabarito", sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; will-change: transform; transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1); } .mvp-btn__icon { display: grid; place-items: center; flex: none; width: var(--mvp-btn-icon-w); height: var(--mvp-btn-icon-w); border-radius: 50%; background: #0b0b0f; color: #fff; will-change: transform; transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1), box-shadow 0.25s ease; } .mvp-btn__icon svg { width: 18px; height: 18px; transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1); } .mvp-btn:hover .mvp-btn__icon svg, .mvp-btn:focus-visible .mvp-btn__icon svg { transform: rotate(45deg); } /* Label and disc trade sides; the blade script publishes the measured label width as --mvp-btn-label-w so the disc knows how far to travel. */ .mvp-btn:hover .mvp-btn__label, .mvp-btn:focus-visible .mvp-btn__label { transform: translateX(calc(var(--mvp-btn-icon-w) + var(--mvp-btn-gap))); } .mvp-btn:hover .mvp-btn__icon, .mvp-btn:focus-visible .mvp-btn__icon { transform: translateX(calc(-1 * (var(--mvp-btn-label-w, 200px) + var(--mvp-btn-gap)))); } /* White pill on the blue FAQ promo card. */ .mvp-btn--white { background: #fff; color: var(--mvp-ink); } .mvp-btn--white:hover, .mvp-btn--white:focus-visible { color: var(--mvp-ink); box-shadow: 0 14px 32px rgba(4, 24, 80, 0.35); } @media (prefers-reduced-motion: reduce) { .mvp-btn__label, .mvp-btn__icon { transition: none; } .mvp-btn:hover .mvp-btn__label, .mvp-btn:focus-visible .mvp-btn__label, .mvp-btn:hover .mvp-btn__icon, .mvp-btn:focus-visible .mvp-btn__icon, .mvp-btn:hover .mvp-btn__icon svg, .mvp-btn:focus-visible .mvp-btn__icon svg { transform: none; } } /* Narrow phones: the label alone is wider than the pill, so the icon was being pushed out of the button and clipped by its own `overflow: hidden`. Below 576px the pill goes full-width, the label wraps, and the hover swap is turned off — there is no room to slide the disc past a two-line label, and no hover on these devices anyway. */ @media (max-width: 575.98px) { .mvp-btn { --mvp-btn-icon-w: 40px; --mvp-btn-gap: 12px; --mvp-btn-pad-l: 18px; --mvp-btn-pad-r: 8px; width: 100%; justify-content: space-between; } .mvp-btn__label { flex: 1 1 auto; min-width: 0; white-space: normal; font-size: 12.5px; line-height: 1.35; letter-spacing: 0.04em; } .mvp-btn:hover, .mvp-btn:focus-visible { padding-left: var(--mvp-btn-pad-l); padding-right: var(--mvp-btn-pad-r); } .mvp-btn:hover .mvp-btn__label, .mvp-btn:focus-visible .mvp-btn__label, .mvp-btn:hover .mvp-btn__icon, .mvp-btn:focus-visible .mvp-btn__icon { transform: none; } } /* ---------- scroll reveal ---------- */ .mvp-anim .mvp-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1); } .mvp-anim .mvp-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .mvp-anim .mvp-reveal { opacity: 1; transform: none; transition: none; } } /* ---------- shared section furniture ---------- */ .mvp-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; margin: 0 auto 52px; max-width: 1080px; } .mvp-title { font-weight: 700; font-size: clamp(27px, 2.9vw, 40px); line-height: 1.3; } .mvp-lead { max-width: 1000px; font-size: 16px; line-height: 27px; color: var(--mvp-muted); } /* ============================================================ 1. HERO ============================================================ */ .mvp-hero { position: relative; /* Even 98px band, set by the owner over the reference-matched 38/96 — our header is an opaque bar above the band, the mock's sits inside it, so the mock's lighter top padding read as cramped here. */ padding: 98px 0; /* Artwork first, the gradient behind it: the PNG is a soft wash with transparent edges, so the gradient still colours the whole band. */ background: var(--mvp-hero-bg) center / cover no-repeat, linear-gradient(120deg, #fdfdff 0%, #f4f8ff 50%, #e7f0ff 100%); overflow: hidden; } .mvp-hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; } .mvp-hero h1 { font-weight: 700; font-size: clamp(34px, 4.2vw, 60px); line-height: 1.16; } .mvp-hero__text { margin-top: 22px; max-width: 520px; font-size: 17px; line-height: 29px; } .mvp-hero__actions { margin-top: 38px; } /* The hero artwork is a landscape illustration, so it just centres in its column — no cut-out crop like the page this hero was ported from. It runs wider than its column (the mock's art is ~730px against a ~617px column) and hangs off the right, which is why the band clips instead of scrolling. */ .mvp-hero__art { position: relative; justify-self: end; align-self: center; width: min(120%, 760px); max-width: none; margin-right: -20px; } .mvp-hero__art img { display: block; width: 100%; height: auto; } /* ============================================================ 3. AWARDS ============================================================ */ .mvp-awards { padding: 74px 0 90px; background: #fff; overflow: clip; } .mvp-awards h2 { max-width: 900px; margin: 0 auto 48px; text-align: center; font-size: clamp(26px, 3vw, 38px); line-height: 1.3; } .mvp-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .mvp-marquee__track { display: flex; gap: 22px; width: max-content; animation: mvp-scroll 46s linear infinite; } .mvp-marquee:hover .mvp-marquee__track { animation-play-state: paused; } .mvp-marquee--rev .mvp-marquee__track { animation-direction: reverse; } @keyframes mvp-scroll { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .mvp-marquee__track { animation: none; } .mvp-marquee { overflow-x: auto; } } .mvp-award { flex: 0 0 auto; width: 172px; margin: 0; padding: 20px 18px 18px; border: 1px solid var(--mvp-line); border-radius: 14px; background: #fff; text-align: center; box-shadow: 0 18px 34px -28px rgba(15, 22, 38, 0.55); } .mvp-award img { height: 116px; width: auto; margin: 0 auto 14px; object-fit: contain; } .mvp-award figcaption { font-size: 13.5px; font-weight: 600; color: var(--mvp-ink); line-height: 1.35; } .mvp-award__rule { display: block; width: 34px; height: 2px; margin: 12px auto 0; border-radius: 2px; background: #2b3a4d; } .mvp-award__rule--blue { background: var(--mvp-blue); } /* ============================================================ CTA BAND (used three times) ============================================================ */ .mvp-cta { padding: 100px 0; background: var(--mvp-band-bg) center / cover no-repeat, #e4f1fd; text-align: center; } .mvp-cta h2 { font-weight: 700; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.3; } .mvp-cta p { margin: 20px auto 40px; max-width: 800px; font-size: 16px; line-height: 27px; color: #3c414d; } .mvp-cta__actions { display: flex; justify-content: center; } /* ============================================================ 14. FAQ ============================================================ */ .mvp-faq { padding: 70px 0 110px; background: linear-gradient(140deg, rgb(244, 246, 253) 0%, rgb(238, 242, 252) 45%, rgb(247, 248, 253) 100%); } .mvp-faq__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 70px; align-items: start; } /* Heading + promo track the list while it scrolls. */ .mvp-faq__aside { position: sticky; top: 110px; } .mvp-faq__title { font-family: "Poppins", "Gabarito", sans-serif; font-weight: 600; font-size: clamp(38px, 5.3vw, 77px); line-height: 1.25; color: #000; } .mvp-faq__title span { color: var(--mvp-blue); } .mvp-faq__promo { margin-top: 120px; padding: 32px 30px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 20px; background: linear-gradient(241deg, #196dff 30%, #001da0 100%); color: #fff; } .mvp-faq__promo h3 { font-size: 24px; line-height: 1.3; font-weight: 500; color: #fff; } .mvp-faq__promo p { margin: 10px 0 26px; max-width: 494px; font-size: 16px; line-height: 21px; color: rgba(255, 255, 255, 0.75); } .mvp-faq__list { display: flex; flex-direction: column; gap: 18px; } .mvp-faq__item { padding: 24px 40px; border: 1px solid rgba(16, 16, 16, 0.06); border-radius: 26px; background: rgba(255, 255, 255, 0.86); overflow: hidden; transition: background 0.2s ease, box-shadow 0.2s ease; } .mvp-faq__item[open] { background: #fff; border-color: rgba(55, 55, 55, 0.1); box-shadow: 0 10px 30px rgba(17, 19, 24, 0.05); } .mvp-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; list-style: none; font-family: "Poppins", "Gabarito", sans-serif; font-weight: 600; font-size: 19px; line-height: 1.5; color: #000; } .mvp-faq__q::-webkit-details-marker { display: none; } /* Plus that becomes a minus when the item is open. */ .mvp-faq__mark { position: relative; flex: none; width: 26px; height: 26px; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .mvp-faq__mark::before, .mvp-faq__mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; background: #101010; transform: translate(-50%, -50%); transition: transform 0.25s ease, opacity 0.25s ease; } .mvp-faq__mark::after { transform: translate(-50%, -50%) rotate(90deg); } .mvp-faq__item[open] .mvp-faq__mark::after { opacity: 0; transform: translate(-50%, -50%) rotate(180deg); } /*

cannot transition its own height, so this wrapper is what animates — driven from 0 to its measured height and back by the blade script. */ .mvp-faq__a-wrap { height: 0; opacity: 0; overflow: hidden; transition: height 0.3s ease, opacity 0.3s ease; } .mvp-faq__item[open] .mvp-faq__a-wrap { height: auto; opacity: 1; } .mvp-faq__a { padding-top: 14px; max-width: 523px; font-size: 17px; line-height: 25px; color: #7d7d7d; text-align: justify; } /* ============================================================ 1b. HERO FEATURE GRID (2x2 icon chips under the hero copy) ============================================================ */ .mvp-hero__feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; margin-top: 32px; max-width: 620px; } .mvp-hero__feat { display: flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 500; color: #2a2d35; } /* First child only — the second span is the label, and the shared selector was painting it as a second icon tile. */ .mvp-hero__feat > span:first-child { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: #fff; color: var(--mvp-blue); box-shadow: 0 10px 24px -16px rgba(15, 22, 38, 0.7); } .mvp-hero__feat svg { width: 21px; height: 21px; } /* ============================================================ 9. PROCESS (ported from taxi.css .tx-process — alternating cards with a dashed diagonal run in the gap between them) ============================================================ */ .mvp-process { padding: 88px 0 96px; background: linear-gradient(180deg, #fff 0%, #fbfcff 40%, #fff 100%); } .mvp-process__list { position: relative; display: grid; gap: 90px; } .mvp-step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: center; gap: 30px; } .mvp-step--right { grid-template-columns: 300px minmax(0, 1fr); } .mvp-step--right .mvp-step__card { order: 2; margin-left: auto; } .mvp-step--right .mvp-step__no { order: 1; } .mvp-step__card { display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: center; gap: 18px; width: min(100%, 881px); min-height: 121px; padding: 20px 30px; border-radius: 14px; background: #fff; box-shadow: 0 18px 44px rgba(15, 22, 38, 0.12); transition: transform 0.3s ease, box-shadow 0.3s ease; } .mvp-step__card:hover { transform: translateY(-4px); box-shadow: 0 24px 54px rgba(15, 22, 38, 0.18); } .mvp-step__card:hover .mvp-step__icon img { transform: scale(1.08); } .mvp-step__icon { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: #e8f1ff; color: var(--mvp-blue); } .mvp-step__icon img { width: 34px; height: 34px; object-fit: contain; transition: transform 0.3s ease; } .mvp-step__card h3 { font-size: 20px; font-weight: 600; } .mvp-step__card p { margin-top: 6px; font-size: 14px; line-height: 1.55; } .mvp-step__no { font-size: clamp(28px, 3.2vw, 44px); font-weight: 500; color: var(--mvp-blue); letter-spacing: -0.02em; text-align: center; } /* Dashed diagonal linking one card to the next: a ~136px run of 18px dashes sitting in the gap, leaning toward whichever side the next card is on. `repeating-linear-gradient` keeps the dash rhythm fixed — `border-style: dashed` leaves it up to the browser. */ .mvp-step + .mvp-step::before { content: ""; position: absolute; top: -84px; width: 136px; height: 3px; border-radius: 2px; background: repeating-linear-gradient( 90deg, var(--mvp-blue) 0 18px, transparent 18px 32px ); transform-origin: left center; } /* Next card is on the right: the run falls left-to-right. */ .mvp-step--right::before { left: 47%; transform: rotate(36deg); } /* Next card is on the left: same run, mirrored. */ .mvp-step--left::before { left: 53%; transform: rotate(144deg); } @media (max-width: 1199px) { .mvp-step { grid-template-columns: minmax(0, 1fr) 200px; } .mvp-step--right { grid-template-columns: 200px minmax(0, 1fr); } } @media (max-width: 991px) { .mvp-step, .mvp-step--right { grid-template-columns: minmax(0, 1fr); gap: 14px; } .mvp-step--right .mvp-step__card, .mvp-step--right .mvp-step__no { order: 0; margin-left: 0; } .mvp-step__no { text-align: left; font-size: 22px; } .mvp-step + .mvp-step::before { display: none; } .mvp-process__list { gap: 26px; } } @media (max-width: 767px) { .mvp-step__card:hover { transform: none; } } /* Lead paragraph under the awards heading. */ .mvp-awards__lead { max-width: 900px; margin: -30px auto 46px; text-align: center; font-size: 16px; line-height: 27px; color: var(--mvp-muted); } /* ============================================================ BENEFITS (ported from taxi.css .tx-invest — sticky stacking cards, copy left, artwork right) ============================================================ */ .mvp-benefits { /* Site header is fixed at 76px; the extra 14px is the gap the taxi stack uses at this breakpoint. */ --mvp-benefits-stick: 90px; position: relative; padding: 84px 0 96px; background: #f6f8fd; /* `overflow: hidden` here would make this section a scroll container and silently kill the sticky rows below — `clip` prevents the same horizontal spill without that side effect. */ overflow: clip; } .mvp-benefits__list { display: flex; flex-direction: column; gap: 18px; } /* Every row pins at the same offset and the next one rides up and covers it — which is why the row needs an opaque fill, and why the rows carry no `mvp-reveal` (a row that had not revealed yet would pin while still transparent, letting the one underneath show through the stack). */ .mvp-benefit { position: sticky; top: var(--mvp-benefits-stick); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 54px; padding: 36px 40px; border: 1px solid rgba(16, 16, 16, 0.07); border-radius: 18px; background: #fff; box-shadow: 0 18px 44px rgba(17, 19, 24, 0.06); transition: background 0.25s ease, border-color 0.25s ease; } /* No lift on hover: a `transform` on a pinned row shifts it out of its sticky offset, so only the border responds. */ .mvp-benefit:hover { border-color: rgba(11, 108, 240, 0.32); } /* Outlined numeral, big enough to anchor the card. */ .mvp-benefit__no { display: block; margin-bottom: 10px; font-family: "Poppins", "Gabarito", sans-serif; font-weight: 700; font-size: 64px; line-height: 1; color: transparent; -webkit-text-stroke: 1.6px rgba(11, 108, 240, 0.75); } .mvp-benefit__name { font-weight: 700; font-size: clamp(24px, 2.3vw, 33px); line-height: 1.2; } .mvp-benefit__text { margin-top: 18px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 17px; line-height: 29px; color: #838383; } /* `height: auto` is load-bearing: the carries width/height attributes and a global rule resolves the height from them, which fights the ratio box. */ .mvp-benefit__media { width: 100%; height: auto; border-radius: 12px; object-fit: cover; } /* ============================================================ MVP SERVICES (2-col cards, blue icon disc left) ============================================================ */ .mvp-svc { padding: 20px 0 92px; background: #fff; } .mvp-svc__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; } .mvp-svc__card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; padding: 26px 28px; border: 1px solid var(--mvp-line); border-radius: 14px; background: #fff; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .mvp-svc__card:hover { transform: translateY(-4px); border-color: #d2e0f8; box-shadow: 0 22px 46px rgba(11, 108, 240, 0.13); } .mvp-svc__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--mvp-blue); color: #fff; } .mvp-svc__ico img { width: 26px; height: 26px; object-fit: contain; transition: transform 0.3s ease; } .mvp-step__icon { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: #e8f1ff; color: var(--mvp-blue); } .mvp-step__icon img { width: 34px; height: 34px; object-fit: contain; transition: transform 0.3s ease; } .mvp-svc__card h3 { font-size: 20px; font-weight: 600; } .mvp-svc__card p { margin-top: 10px; font-size: 15px; line-height: 25px; } /* ============================================================ INDUSTRIES (ported from on-demand.css .odm-industry — photo tile with a scrim; the blurb slides in under the title on hover) ============================================================ */ .mvp-inds { padding: 80px 0 90px; background: #eef0fb; } .mvp-inds__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .mvp-ind { position: relative; display: block; aspect-ratio: 285 / 220; border-radius: 16px; overflow: hidden; } .mvp-ind img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); } .mvp-ind:hover img, .mvp-ind:focus-visible img { transform: scale(1.06); } /* Bottom scrim so the white caption stays legible over any photo. It deepens and covers the whole card on hover, when the blurb slides in under the title. */ .mvp-ind::after { content: ""; position: absolute; inset: auto 0 0 0; height: 58%; background: linear-gradient(180deg, rgba(9, 10, 20, 0) 0%, rgba(9, 10, 20, 0.72) 100%); pointer-events: none; transition: height 0.45s ease, background 0.45s ease; } .mvp-ind:hover::after, .mvp-ind:focus-within::after { height: 100%; background: linear-gradient(180deg, rgba(9, 10, 20, 0.3) 0%, rgba(9, 10, 20, 0.88) 55%); } .mvp-ind__caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px 26px; } .mvp-ind h3 { font-size: 20px; font-weight: 700; line-height: 1.3; color: #fff; } /* Blurb is collapsed until hover / keyboard focus. Clamped so the longest copy still fits the fixed 285:220 card instead of pushing the title off the top. */ .mvp-ind p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; max-height: 0; margin-top: 0; opacity: 0; transform: translateY(6px); font-size: 13.5px; line-height: 20px; color: rgba(255, 255, 255, 0.86); transition: max-height 0.45s ease, margin-top 0.45s ease, opacity 0.35s ease, transform 0.45s ease; } .mvp-ind:hover p, .mvp-ind:focus-within p { max-height: 130px; opacity: 1; } .mvp-ind:focus-visible { outline: 2px solid var(--mvp-blue); outline-offset: 3px; } /* Touch devices get no hover, so the blurb stays open. The card drops its fixed ratio and grows to fit the copy — otherwise the bottom-anchored caption runs off the top of a short card. */ @media (hover: none) { .mvp-ind { display: flex; align-items: flex-end; min-width: 0; } .mvp-ind img { position: absolute; inset: 0; } .mvp-ind::after { height: 100%; background: linear-gradient(180deg, rgba(9, 10, 20, 0.3) 0%, rgba(9, 10, 20, 0.88) 55%); } /* `relative`, not `static`: the caption's z-index only applies to a positioned box, and without it the absolutely-positioned photo and scrim paint over the blurb. */ .mvp-ind__caption { position: relative; z-index: 2; flex: 1 1 auto; min-width: 0; } .mvp-ind p { -webkit-line-clamp: unset; max-height: none; margin-top: 10px; opacity: 1; transform: none; } } /* ============================================================ NEXT-GEN TECH (three plain columns) ============================================================ */ .mvp-next { padding: 84px 0 90px; background: #fff; } .mvp-next__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } /* Artwork stands on its own here — no tinted plate behind it. */ .mvp-next__ico { display: block; width: 54px; height: 54px; } .mvp-next__ico img { width: 100%; height: 100%; object-fit: contain; } .mvp-next__item h3 { margin-top: 20px; font-size: 20px; font-weight: 600; line-height: 1.35; } .mvp-next__item p { margin-top: 12px; font-size: 15px; line-height: 26px; } /* ============================================================ TECH STACK (ported from white-label.css .wl-stack — two marquee rows of logo tiles reading as one hairline grid) ============================================================ */ .mvp-stack { padding: 20px 0 90px; background: #fff; } .mvp-stack__rows { display: grid; gap: 0; } .mvp-stack__tile { flex: none; display: flex; flex-direction: column; justify-content: center; width: 190px; height: 187px; padding: 20px 10px; border-right: 1px solid #ededed; border-bottom: 1px solid #ededed; text-align: center; transition: background 0.3s ease; } .mvp-stack__tile:hover { background: #f7faff; } .mvp-stack__tile:hover img { transform: translateY(-4px) scale(1.08); } .mvp-stack__tile img { display: block; width: 64px; height: 64px; margin-inline: auto; object-fit: contain; transition: transform 0.3s ease; } .mvp-stack__tile span { display: block; margin-top: 16px; font-size: 15px; color: #6c6c6c; } /* Stand-in for a tech whose brand mark has not been supplied yet. */ .mvp-stack__mono { display: grid; place-items: center; width: 64px; height: 64px; margin-inline: auto; border: 1px solid rgba(11, 108, 240, 0.22); border-radius: 50%; background: rgba(11, 108, 240, 0.08); color: var(--mvp-blue); font-family: "Poppins", "Gabarito", sans-serif; font-weight: 700; font-size: 20px; transition: transform 0.3s ease; } .mvp-stack__tile:hover .mvp-stack__mono { transform: translateY(-4px) scale(1.08); } /* The two rows read as one grid: no gap between tiles, and only the first row draws a top border so the outer edge isn't doubled. */ .mvp-stack .mvp-marquee__track { gap: 0; } .mvp-stack .mvp-marquee:first-child .mvp-stack__tile { border-top: 1px solid #ededed; } /* ============================================================ WHY CHOOSE (bento — ported from white-label.css .wl-why) ============================================================ */ .mvp-why { padding: 86px 0 96px; background: #fff; } /* White-label bento: a 612px intro column beside a 2x2 card block. Two differences here: the cell under the intro holds two cards instead of the single photo card, and the left column is one flex stack so that pair grows into whatever height the card block on the right sets — otherwise the intro leaves a hole above it and the pair leaves one below. */ .mvp-why__grid { display: grid; grid-template-columns: minmax(0, 612px) minmax(0, 1fr); gap: 24px; align-items: stretch; } .mvp-why__left { display: flex; flex-direction: column; gap: 26px; } /* The split cell. `flex: 1` is what takes up the slack under the intro. */ .mvp-why__pair { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; } .mvp-why__actions { margin-top: 28px; } .mvp-why__intro h2 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.24; font-weight: 700; } .mvp-why__intro p { margin-top: 24px; max-width: 509px; font-size: 16px; line-height: 1.7; } .mvp-why__arrow { display: inline-grid; place-items: center; width: 84px; height: 46px; border-radius: 999px; border: 1.5px solid #2b2b2b; margin-left: 14px; vertical-align: middle; transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease; } .mvp-why__intro:hover .mvp-why__arrow { background: #111; color: #fff; transform: translateX(4px); } .mvp-why__arrow svg { width: 22px; height: 22px; transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1); } .mvp-why__intro:hover .mvp-why__arrow svg { transform: rotate(45deg); } /* The two card columns fill the right-hand cell. */ .mvp-why__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; align-items: start; } .mvp-why__col { display: grid; gap: 23px; align-content: start; } .mvp-card { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 24px; border-radius: 18px; background: #f8f8f8; transition: transform 0.3s ease, box-shadow 0.3s ease; } .mvp-card:hover { transform: translateY(-5px); box-shadow: 0 24px 48px rgba(20, 20, 43, 0.12); } .mvp-card h3 { font-size: 21px; line-height: 1.28; font-weight: 700; } .mvp-card p { margin-top: 12px; font-size: 15.5px; line-height: 1.6; } .mvp-card__art { display: block; width: 191px; max-width: 100%; height: auto; margin: 6px auto 4px; } .mvp-card--peach { background: #fccebc; } .mvp-card--peach .mvp-card__art { width: 193px; } .mvp-card--mint { background: #bcfcdc; } .mvp-card--dark { background: #101010; } .mvp-card--dark h3 { color: #fff; } .mvp-card--dark p { color: rgba(255, 255, 255, 0.78); } .mvp-card__chip { width: 66px; height: 66px; align-self: start; transition: transform 0.3s ease; } .mvp-card--dark:hover .mvp-card__chip { transform: scale(1.06); } .mvp-ghost { display: block; width: 269px; max-width: 100%; height: auto; } /* Photo card: background photo, floating badges, copy at the bottom. */ .mvp-card--photo { position: relative; height: 100%; padding: 0; overflow: hidden; background: #f0f1f1; isolation: isolate; } .mvp-card__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); } .mvp-card--photo:hover .mvp-card__bg { transform: scale(1.05); } /* Supplied icon on a white disc. The photo card and the track-record card both use it; the dark card's mark carries its own disc in the PNG. */ .mvp-card__icon { display: grid; place-items: center; flex: none; width: 88px; height: 88px; border-radius: 50%; background: #fff; box-shadow: 0 10px 26px rgba(20, 20, 43, 0.12); transition: transform 0.35s ease; } .mvp-card__icon img { width: 44px; height: 44px; object-fit: contain; } .mvp-card:hover .mvp-card__icon { transform: translateY(-4px); } /* On the photo card the disc floats over the artwork, top left. */ .mvp-card--photo .mvp-card__icon { margin: 24px 0 0 24px; } /* Copy sits on the floor of the card, with the photo filling everything the badge strip and the copy do not use. */ .mvp-card--photo .mvp-card__body { margin-top: auto; padding: 0 24px 24px; } /* Sixth bento tile — the ported layout shipped five, this page needs one more. */ .mvp-card--lav { background: #cdd4fb; } /* ============================================================ RESPONSIVE ============================================================ */ /* Between 992px and the container's 1240px cap the viewport, not the container, is the limiting edge, so the full 120%/-20px bleed pushed the artwork's right side off screen. Pull it back inside the container at those widths. */ @media (max-width: 1365.98px) { .mvp-hero__art { width: min(112%, 700px); margin-right: 0; } } @media (max-width: 1199.98px) { /* One column: the intro, the pair and the card block stack, so the explicit cell pins have to go. */ .mvp-why__grid { grid-template-columns: minmax(0, 1fr); } .mvp-why__left, .mvp-why__cards { grid-column: 1; grid-row: auto; } } @media (max-width: 991.98px) { .mvp-benefit { gap: 32px; padding: 30px 28px; } .mvp-hero__grid, .mvp-faq__layout { grid-template-columns: minmax(0, 1fr); gap: 40px; } .mvp-hero__art { order: -1; justify-self: center; width: min(100%, 560px); margin-right: 0; } .mvp-faq__aside { position: static; } .mvp-faq__promo { margin-top: 36px; } .mvp-inds__grid, .mvp-next__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767.98px) { .mvp-hero__feats, .mvp-svc__grid, .mvp-inds__grid, .mvp-next__grid, .mvp-why__pair, .mvp-why__cards { grid-template-columns: minmax(0, 1fr); } .mvp-awards, .mvp-benefits, .mvp-inds, .mvp-next, .mvp-process { padding: 56px 0 64px; } .mvp-cta { padding: 64px 0; } .mvp-svc, .mvp-stack { padding: 10px 0 60px; } /* Artwork under the copy, and the pin comes off: stacked cards that are taller than the viewport would trap the scroll. */ .mvp-benefit { position: static; grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 26px 22px; } .mvp-ind { aspect-ratio: 16 / 11; } }