/* ============================================================ Progressive Web App Development (/service/pwa-development) White page, single blue accent. BEM-ish `pwa-` prefix; scroll-reveal via `.pwa-anim` on , ported from on-demand.css. ============================================================ */ /* 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(.pwa-page) { overflow-x: clip; } .pwa-page { --pwa-blue: #0b6cf0; --pwa-blue-deep: #0148c4; --pwa-ink: #0b0b0f; --pwa-body: #55575e; --pwa-muted: #7d8494; --pwa-line: #e9edf4; position: relative; background: #fff; color: var(--pwa-ink); overflow-x: clip; font-family: "Gabarito", "Poppins", "Inter", system-ui, -apple-system, sans-serif; } .pwa-page .container { max-width: 1240px; } .pwa-page :where(h1, h2, h3, h4) { margin: 0; letter-spacing: -0.02em; color: var(--pwa-ink); } .pwa-page :where(p) { margin: 0; color: var(--pwa-body); } .pwa-page :where(ul, ol) { margin: 0; padding: 0; list-style: none; } /* Blue highlight word in headings. */ .pwa-accent { color: transparent; background: linear-gradient(90deg, #0166FA 0%, #6609FC 100%); background-clip: text; } /* ---------- pill button (label + arrow disc swap on hover) ---------- */ .pwa-btn { --pwa-btn-icon-w: 44px; --pwa-btn-gap: 14px; --pwa-btn-pad-l: 30px; --pwa-btn-pad-r: 10px; position: relative; display: inline-flex; align-items: center; gap: var(--pwa-btn-gap); width: max-content; max-width: 100%; padding: 10px var(--pwa-btn-pad-r) 10px var(--pwa-btn-pad-l); border-radius: 999px; background: var(--pwa-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); } .pwa-btn:hover, .pwa-btn:focus-visible { padding-left: var(--pwa-btn-pad-r); padding-right: var(--pwa-btn-pad-l); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(11, 108, 240, 0.35); } .pwa-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); } .pwa-btn__icon { display: grid; place-items: center; flex: none; width: var(--pwa-btn-icon-w); height: var(--pwa-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; } .pwa-btn__icon svg { width: 18px; height: 18px; transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1); } .pwa-btn:hover .pwa-btn__icon svg, .pwa-btn:focus-visible .pwa-btn__icon svg { transform: rotate(45deg); } /* Label and disc trade sides; the blade script publishes the measured label width as --pwa-btn-label-w so the disc knows how far to travel. */ .pwa-btn:hover .pwa-btn__label, .pwa-btn:focus-visible .pwa-btn__label { transform: translateX(calc(var(--pwa-btn-icon-w) + var(--pwa-btn-gap))); } .pwa-btn:hover .pwa-btn__icon, .pwa-btn:focus-visible .pwa-btn__icon { transform: translateX(calc(-1 * (var(--pwa-btn-label-w, 200px) + var(--pwa-btn-gap)))); } /* White pill on the blue FAQ promo card. */ .pwa-btn--white { background: #fff; color: var(--pwa-ink); } .pwa-btn--white:hover, .pwa-btn--white:focus-visible { color: var(--pwa-ink); box-shadow: 0 14px 32px rgba(4, 24, 80, 0.35); } @media (prefers-reduced-motion: reduce) { .pwa-btn__label, .pwa-btn__icon { transition: none; } .pwa-btn:hover .pwa-btn__label, .pwa-btn:focus-visible .pwa-btn__label, .pwa-btn:hover .pwa-btn__icon, .pwa-btn:focus-visible .pwa-btn__icon, .pwa-btn:hover .pwa-btn__icon svg, .pwa-btn:focus-visible .pwa-btn__icon svg { transform: none; } } /* ---------- scroll reveal ---------- */ .pwa-anim .pwa-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1); } .pwa-anim .pwa-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .pwa-anim .pwa-reveal { opacity: 1; transform: none; transition: none; } } /* ---------- shared section furniture ---------- */ .pwa-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; margin: 0 auto 52px; max-width: 1080px; } .pwa-title { font-weight: 700; font-size: clamp(27px, 2.9vw, 40px); line-height: 1.3; } .pwa-lead { max-width: 1000px; font-size: 16px; line-height: 27px; color: var(--pwa-muted); } /* ============================================================ 1. HERO ============================================================ */ .pwa-hero { position: relative; /* No bottom padding: the cut-out figure is bottom-aligned so she stands on the band's floor, as in the reference. */ padding: 28px 0 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(--pwa-hero-bg) center / cover no-repeat, linear-gradient(120deg, #fdfdff 0%, #f4f8ff 50%, #e7f0ff 100%); overflow: hidden; } .pwa-hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; /* End, not center: the art column is a full-height cut-out. */ align-items: end; } .pwa-hero h1 { font-weight: 700; font-size: clamp(34px, 4.2vw, 58px); line-height: 1.16; } .pwa-hero__text { margin-top: 22px; max-width: 520px; font-size: 15.5px; line-height: 27px; } /* Checklist under the hero copy. */ .pwa-hero__points { display: grid; gap: 16px; margin-top: 30px; } .pwa-hero__points li { display: flex; align-items: center; gap: 14px; font-size: 15.5px; font-weight: 500; color: #2a2d35; } .pwa-hero__check { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--pwa-blue); color: #fff; } .pwa-hero__check svg { width: 14px; height: 14px; } .pwa-hero__actions { margin-top: 38px; } /* The art column runs to the band floor, so the copy centres against it instead of sinking to the bottom with it. */ .pwa-hero__copy { align-self: center; padding-bottom: 70px; } /* hero-art.png is 1122x1402 but the figure stops at row ~1258 — the last 144 rows are the blob's near-invisible fade. The box is given that shorter ratio and clips the tail, so the figure lands on the band's floor at every width (a fixed negative margin would only be right at one viewport size). */ .pwa-hero__art { position: relative; justify-self: center; align-self: end; width: min(112%, 700px); max-width: none; aspect-ratio: 1122 / 1258; overflow: hidden; } .pwa-hero__art img { display: block; width: 100%; height: auto; } /* ============================================================ 2. STATS (ported from canada.css .ca-metrics — plain columns separated by hairlines, no icons, no card) ============================================================ */ .pwa-stats { padding: 62px 0 56px; background: #eef5ff; } .pwa-stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .pwa-stat { padding: 6px 30px; border-left: 1px solid #d7e4fb; text-align: center; } .pwa-stat:first-child { border-left: 0; } .pwa-stat__num { display: flex; align-items: baseline; justify-content: center; font-weight: 800; font-size: clamp(34px, 3.6vw, 50px); line-height: 1.1; color: var(--pwa-blue); } /* Its own element so the count-up script only ever rewrites the digits. */ .pwa-stat__suffix { color: inherit; } .pwa-stat__label { display: block; margin-top: 10px; font-size: 13.5px; font-weight: 500; line-height: 1.5; color: var(--pwa-ink); } /* ============================================================ 3. AWARDS ============================================================ */ .pwa-awards { padding: 74px 0 90px; background: #fff; overflow: clip; } .pwa-awards h2 { max-width: 900px; margin: 0 auto 48px; text-align: center; font-size: clamp(26px, 3vw, 38px); line-height: 1.3; } .pwa-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); } .pwa-marquee__track { display: flex; gap: 22px; width: max-content; animation: pwa-scroll 46s linear infinite; } .pwa-marquee:hover .pwa-marquee__track { animation-play-state: paused; } @keyframes pwa-scroll { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .pwa-marquee__track { animation: none; } } .pwa-award { flex: 0 0 auto; width: 172px; margin: 0; padding: 20px 18px 18px; border: 1px solid var(--pwa-line); border-radius: 14px; background: #fff; text-align: center; box-shadow: 0 18px 34px -28px rgba(15, 22, 38, 0.55); } .pwa-award img { height: 116px; width: auto; margin: 0 auto 14px; object-fit: contain; } .pwa-award figcaption { font-size: 13.5px; font-weight: 600; color: var(--pwa-ink); line-height: 1.35; } .pwa-award__rule { display: block; width: 34px; height: 2px; margin: 12px auto 0; border-radius: 2px; background: #2b3a4d; } .pwa-award__rule--blue { background: var(--pwa-blue); } /* ============================================================ 4. WHY PWA BAND (photo left, copy + bullets right) ============================================================ */ /* The artwork URL comes from the blade via --pwa-band-bg so it goes through asset(), like every other image on the page. The flat colour behind it is the fallback if the variable is ever absent. */ .pwa-why { padding: 70px 0; background: var(--pwa-why-bg) center / cover no-repeat, #e8f4fe; } .pwa-why__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 60px; align-items: center; } .pwa-why__art { display: flex; justify-content: center; } .pwa-why__art img { /* The render is 252px wide; anything larger upscales it. */ width: min(100%, 250px); height: auto; } .pwa-why__copy h2 { font-weight: 700; font-size: clamp(27px, 3.1vw, 42px); line-height: 1.28; } .pwa-why__copy p { margin-top: 22px; font-size: 16px; line-height: 28px; color: #3c414d; text-align: justify; } /* ============================================================ 10. INDUSTRIES (ported from taxi.css .tx-solutions — full-bleed horizontal rail, drag + auto-drift, two identical copies of the list) ============================================================ */ .pwa-industries { padding: 80px 0 92px; background: linear-gradient(140deg, #f7f9ff 0%, #eaf0fe 55%, #e6ecfd 100%); overflow: hidden; } .pwa-industries__rail { /* No scroll-snap: it fights the continuous auto-scroll. */ overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; /* Stop scroll re-anchoring on image load, which fights the drag. */ overflow-anchor: none; /* overflow-x also makes overflow-y `auto`, so the outlined numbers — whose glyphs overflow their line box — need headroom or they get clipped. The negative margin keeps the section's spacing unchanged. */ padding: 26px 0 10px; margin-top: -26px; cursor: grab; /* Entrance: the rail slides up into place when the section arrives. */ opacity: 0; transform: translateY(40px); transition: opacity 0.7s ease, transform 0.7s ease; } .pwa-industries__rail.is-inview { opacity: 1; transform: none; } .pwa-industries__rail::-webkit-scrollbar { display: none; } .pwa-industries__rail.is-grabbing { cursor: grabbing; user-select: none; } .pwa-industries__rail.is-grabbing img { pointer-events: none; } .pwa-industries__track { display: flex; gap: 23px; /* Aligns the first card with the container's left edge while the rail itself stays full-bleed. */ padding: 0 max(20px, calc((100vw - 1240px) / 2)); } .pwa-indcard { position: relative; flex: none; width: 428px; /* Room for the number, which straddles the top edge of the card. */ padding-top: 33px; } .pwa-indcard__num { position: absolute; z-index: 2; top: 0; left: 47px; height: 66px; line-height: 66px; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 94px; letter-spacing: -3.8px; color: transparent; -webkit-text-stroke: 3px rgba(23, 30, 48, 0.35); pointer-events: none; } .pwa-indcard__media { position: relative; height: 428px; border-radius: 30px; overflow: hidden; box-shadow: 0 5px 28px rgba(0, 0, 0, 0.08); } .pwa-indcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .pwa-indcard:hover .pwa-indcard__media img { transform: scale(1.05); } .pwa-indcard__shade { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), #000 74%); filter: blur(3px); pointer-events: none; } .pwa-indcard__label { position: absolute; left: 34px; right: 34px; bottom: 30px; font-weight: 700; font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; color: #fff; } @media (max-width: 767px) { .pwa-indcard { width: 300px; padding-top: 23px; } .pwa-indcard__media { height: 300px; } .pwa-indcard__num { left: 30px; height: 46px; line-height: 46px; font-size: 66px; letter-spacing: -2.6px; -webkit-text-stroke-width: 2px; } .pwa-indcard__label { left: 24px; right: 24px; bottom: 22px; font-size: 28px; } } /* ============================================================ 7. CASE STUDIES (sticky shot, one card at a time) ============================================================ */ .pwa-stories { padding: 80px 0 90px; background: #fff; } .pwa-stories__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; } /* One fixed box that every slide fills. The three shots are near-square but not identical (1264x1244 vs 1254x1254); stacked in a grid cell the tallest set the row height and the other two sat short of the bottom edge. */ .pwa-stories__stage { position: relative; aspect-ratio: 1264 / 1244; border-radius: 18px; overflow: hidden; background: #f3f6fc; /* Drag to scrub between stories. */ cursor: grab; touch-action: pan-y; user-select: none; } .pwa-stories__stage.is-grabbing { cursor: grabbing; } .pwa-stories__stage img { -webkit-user-drag: none; } /* All slides stack; only the active one is painted, so the stage keeps the height of the tallest shot instead of jumping between stories. */ /* Absolute, so the stage's ratio is the only thing sizing them — a grid row would still resolve to the tallest slide's intrinsic height. */ .pwa-stories__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s ease; } .pwa-stories__slide.is-on { opacity: 1; } .pwa-stories__nav { display: flex; justify-content: center; gap: 12px; margin-top: 20px; } .pwa-stories__arrow { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--pwa-blue); color: #fff; cursor: pointer; transition: background 0.25s ease, transform 0.25s ease; } .pwa-stories__arrow:hover { transform: translateY(-2px); } .pwa-stories__arrow svg { width: 18px; height: 18px; } /* The card keeps its own height and pins while the taller shot scrolls past. */ .pwa-stories__card { position: sticky; top: 110px; padding: 40px 42px; border: 1px solid var(--pwa-line); border-radius: 18px; background: #fff; box-shadow: 0 24px 50px -44px rgba(15, 22, 38, 0.5); } .pwa-stories__title { font-size: clamp(20px, 2vw, 26px); line-height: 1.3; } .pwa-stories__facts { display: grid; gap: 22px; margin-top: 28px; } .pwa-stories__fact { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; } .pwa-stories__fact-ico { grid-row: 1 / 3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--pwa-blue); } .pwa-stories__fact-ico svg { width: 22px; height: 22px; } .pwa-stories__fact--solution .pwa-stories__fact-ico { color: #38b96a; } .pwa-stories__fact--result .pwa-stories__fact-ico { color: #a468f5; } .pwa-stories__fact dt { align-self: center; font-size: 16px; font-weight: 700; color: var(--pwa-ink); } .pwa-stories__fact dd { margin: 0; font-size: 15px; color: var(--pwa-body); text-align: justify; } /* ============================================================ CTA BAND (used three times) ============================================================ */ .pwa-cta { padding: 100px 0; background: var(--pwa-band-bg) center / cover no-repeat, #e4f1fd; text-align: center; } .pwa-cta h2 { font-weight: 700; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.3; } .pwa-cta p { margin: 20px auto 40px; max-width: 800px; font-size: 16px; line-height: 27px; color: #3c414d; } .pwa-cta__actions { display: flex; justify-content: center; } .pwa-why__actions { margin-top: 34px; } /* ============================================================ 14. FAQ ============================================================ */ .pwa-faq { padding: 70px 0 110px; background: linear-gradient(140deg, rgb(244, 246, 253) 0%, rgb(238, 242, 252) 45%, rgb(247, 248, 253) 100%); } .pwa-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. */ .pwa-faq__aside { position: sticky; top: 110px; } .pwa-faq__title { font-family: "Poppins", "Gabarito", sans-serif; font-weight: 600; font-size: clamp(38px, 5.3vw, 77px); line-height: 1.25; color: #000; } .pwa-faq__title span { color: var(--pwa-blue); } .pwa-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; } .pwa-faq__promo h3 { font-size: 24px; line-height: 1.3; font-weight: 500; color: #fff; } .pwa-faq__promo p { margin: 10px 0 26px; max-width: 494px; font-size: 16px; line-height: 21px; color: rgba(255, 255, 255, 0.75); } .pwa-faq__list { display: flex; flex-direction: column; gap: 18px; } .pwa-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; } .pwa-faq__item[open] { background: #fff; border-color: rgba(55, 55, 55, 0.1); box-shadow: 0 10px 30px rgba(17, 19, 24, 0.05); } .pwa-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; } .pwa-faq__q::-webkit-details-marker { display: none; } /* Plus that becomes a minus when the item is open. */ .pwa-faq__mark { position: relative; flex: none; width: 26px; height: 26px; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .pwa-faq__mark::before, .pwa-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; } .pwa-faq__mark::after { transform: translate(-50%, -50%) rotate(90deg); } .pwa-faq__item[open] .pwa-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. */ .pwa-faq__a-wrap { height: 0; opacity: 0; overflow: hidden; transition: height 0.3s ease, opacity 0.3s ease; } .pwa-faq__item[open] .pwa-faq__a-wrap { height: auto; opacity: 1; } .pwa-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) ============================================================ */ .pwa-hero__feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; margin-top: 32px; max-width: 620px; } .pwa-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. */ .pwa-hero__feat > span:first-child { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: #fff; color: var(--pwa-blue); box-shadow: 0 10px 24px -16px rgba(15, 22, 38, 0.7); } .pwa-hero__feat svg { width: 21px; height: 21px; } /* ============================================================ 4b. WHY PWA BAND overrides — the artwork here is a landscape photo, not the portrait handset the ported band was sized for. ============================================================ */ .pwa-why { background: var(--pwa-why-bg) center / cover no-repeat, linear-gradient(180deg, #f5f9ff 0%, #eef5ff 100%); } .pwa-why__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 70px; } .pwa-why__art img { width: 100%; max-width: 620px; border-radius: 16px; box-shadow: 0 30px 60px -46px rgba(15, 22, 38, 0.8); } .pwa-why__copy h2 { font-size: clamp(30px, 3.4vw, 46px); } .pwa-why__copy p { text-align: left; } .pwa-why__points { display: grid; gap: 10px; margin-top: 26px; } .pwa-why__points li { position: relative; padding-left: 22px; font-size: 17px; line-height: 30px; color: #2a2d35; } .pwa-why__points li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: #2a2d35; } /* ============================================================ 5. RANGE OF SERVICES (stacked cards left, device shot right) ============================================================ */ .pwa-range { padding: 84px 0 90px; background: linear-gradient(140deg, #fbfcff 0%, #eef2fe 55%, #e7edfd 100%); } .pwa-range__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; margin-top: 52px; } .pwa-range__list { display: grid; gap: 16px; } .pwa-range__card { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 18px; row-gap: 8px; padding: 24px 26px; border: 1px solid rgba(16, 16, 16, 0.07); border-radius: 10px; background: rgba(255, 255, 255, 0.72); transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; } .pwa-range__card:hover { background: #fff; transform: translateY(-3px); box-shadow: 0 26px 46px -38px rgba(15, 22, 38, 0.75); } .pwa-range__ico { grid-row: 1 / 3; display: grid; place-items: center; width: 46px; height: 46px; color: var(--pwa-blue); } .pwa-range__ico svg { width: 34px; height: 34px; } .pwa-range__card h3 { align-self: center; font-size: 21px; font-weight: 700; line-height: 1.3; } .pwa-range__card p { font-size: 15px; line-height: 24px; } /* Tinted stage so the placeholder handset has something to sit on. */ .pwa-range__art { position: sticky; top: 110px; place-items: center; border-radius: 14px; } .pwa-range__art img { width: 100%; height: auto; border-radius: 14px; } /* ============================================================ 8. FEATURES CHECKLIST (heading left, ticked rows right) ============================================================ */ .pwa-feats { padding: 90px 0; background: linear-gradient(120deg, #f6f4f6 0%, #f4f2f5 50%, #f7f5f8 100%); } .pwa-feats__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 60px; align-items: start; } .pwa-feats__copy { position: sticky; top: 120px; } .pwa-feats__copy h2 { font-weight: 700; font-size: clamp(30px, 3.6vw, 50px); line-height: 1.22; } .pwa-feats__copy p { margin-top: 24px; max-width: 470px; font-size: 17px; line-height: 28px; } .pwa-feats__list { display: grid; gap: 14px; } .pwa-feats__item { display: flex; align-items: center; gap: 18px; padding: 20px 26px; border-radius: 10px; background: #fff; font-size: 16px; line-height: 26px; color: #2a2d35; box-shadow: 0 20px 40px -38px rgba(15, 22, 38, 0.75); transition: transform 0.3s ease; } .pwa-feats__item:hover { transform: translateX(4px); } .pwa-feats__item b { font-weight: 600; color: var(--pwa-ink); } .pwa-feats__tick { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--pwa-blue); color: #fff; } .pwa-feats__tick svg { width: 14px; height: 14px; } /* ============================================================ 9. PROCESS (ported from taxi.css .tx-process — alternating cards with a dashed diagonal run in the gap between them) ============================================================ */ .pwa-process { padding: 88px 0 96px; background: linear-gradient(180deg, #fff 0%, #fbfcff 40%, #fff 100%); } .pwa-process__list { position: relative; display: grid; gap: 90px; } .pwa-step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: center; gap: 30px; } .pwa-step--right { grid-template-columns: 300px minmax(0, 1fr); } .pwa-step--right .pwa-step__card { order: 2; margin-left: auto; } .pwa-step--right .pwa-step__no { order: 1; } .pwa-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; } .pwa-step__card:hover { transform: translateY(-4px); box-shadow: 0 24px 54px rgba(15, 22, 38, 0.18); } .pwa-step__card:hover .pwa-step__icon img { transform: scale(1.08); } .pwa-step__icon { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: #e8f1ff; color: var(--pwa-blue); } .pwa-step__icon img { width: 34px; height: 34px; object-fit: contain; transition: transform 0.3s ease; } .pwa-step__card h3 { font-size: 20px; font-weight: 600; } .pwa-step__card p { margin-top: 6px; font-size: 14px; line-height: 1.55; } .pwa-step__no { font-size: clamp(28px, 3.2vw, 44px); font-weight: 500; color: var(--pwa-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. */ .pwa-step + .pwa-step::before { content: ""; position: absolute; top: -84px; width: 136px; height: 3px; border-radius: 2px; background: repeating-linear-gradient( 90deg, var(--pwa-blue) 0 18px, transparent 18px 32px ); transform-origin: left center; } /* Next card is on the right: the run falls left-to-right. */ .pwa-step--right::before { left: 47%; transform: rotate(36deg); } /* Next card is on the left: same run, mirrored. */ .pwa-step--left::before { left: 53%; transform: rotate(144deg); } @media (max-width: 1199px) { .pwa-step { grid-template-columns: minmax(0, 1fr) 200px; } .pwa-step--right { grid-template-columns: 200px minmax(0, 1fr); } } @media (max-width: 991px) { .pwa-step, .pwa-step--right { grid-template-columns: minmax(0, 1fr); gap: 14px; } .pwa-step--right .pwa-step__card, .pwa-step--right .pwa-step__no { order: 0; margin-left: 0; } .pwa-step__no { text-align: left; font-size: 22px; } .pwa-step + .pwa-step::before { display: none; } .pwa-process__list { gap: 26px; } } @media (max-width: 767px) { .pwa-step__card:hover { transform: none; } } /* ============================================================ 12. COST (dark band, copy + factor list left, artwork right) ============================================================ */ .pwa-cost { padding: 90px 0; background: radial-gradient(120% 90% at 78% 45%, rgba(20, 108, 255, 0.28) 0%, rgba(4, 10, 30, 0) 60%), linear-gradient(140deg, #050b1e 0%, #071130 55%, #04091c 100%); color: #fff; } .pwa-cost__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 50px; align-items: center; } .pwa-cost h2 { font-weight: 700; font-size: clamp(30px, 3.6vw, 50px); line-height: 1.2; color: #fff; } .pwa-cost h2 span { color: #3b9bff; } .pwa-cost__text { margin-top: 24px; max-width: 620px; font-size: 16.5px; line-height: 28px; color: rgba(255, 255, 255, 0.78); } .pwa-cost h3 { margin-top: 30px; font-size: 20px; font-weight: 600; color: #fff; } .pwa-cost__factors { display: grid; gap: 12px; margin-top: 18px; } .pwa-cost__factors li { display: flex; align-items: center; gap: 14px; font-size: 16px; color: rgba(255, 255, 255, 0.9); } .pwa-cost__tick { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(59, 155, 255, 0.55); background: rgba(59, 155, 255, 0.14); color: #3b9bff; } .pwa-cost__tick svg { width: 13px; height: 13px; } .pwa-cost__actions { margin-top: 38px; } .pwa-cost__art { display: grid; place-items: center; } .pwa-cost__art img { width: 100%; height: auto; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 991.98px) { .pwa-hero { padding: 32px 0 0; } .pwa-hero__copy { padding-bottom: 0; } .pwa-hero__art { width: min(100%, 440px); } .pwa-hero__grid, .pwa-why__grid, .pwa-range__grid, .pwa-feats__grid, .pwa-cost__grid, .pwa-stories__layout, .pwa-faq__layout { grid-template-columns: minmax(0, 1fr); gap: 40px; } .pwa-hero__art { order: -1; } .pwa-range__art, .pwa-feats__copy, .pwa-faq__aside, .pwa-stories__card { position: static; } .pwa-faq__promo { margin-top: 36px; } /* Metrics drop to two columns; the hairline is on the left edge, so it has to come off whichever cell now starts a row. */ .pwa-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; } .pwa-stat:nth-child(odd) { border-left: 0; } } @media (max-width: 767.98px) { .pwa-hero__feats { grid-template-columns: minmax(0, 1fr); gap: 14px; } .pwa-awards, .pwa-range, .pwa-feats, .pwa-process, .pwa-industries, .pwa-stories, .pwa-cost { padding: 56px 0 64px; } .pwa-cta { padding: 64px 0; } .pwa-why { padding: 50px 0; } .pwa-stories__card, .pwa-range__card, .pwa-feats__item { padding: 24px 22px; } } @media (max-width: 575.98px) { .pwa-stats__grid { grid-template-columns: minmax(0, 1fr); } .pwa-stat { border-left: 0; padding: 0; } .pwa-range__card { grid-template-columns: minmax(0, 1fr); } .pwa-range__ico { grid-row: auto; } } /* Lead paragraph under the awards heading. */ .pwa-awards__lead { max-width: 900px; margin: -30px auto 46px; text-align: center; font-size: 16px; line-height: 27px; color: var(--pwa-muted); }