/* ============================================================ White Label App Development (/service/white-label-development) Light page, blue accent + warm pink CTA bands. BEM-ish `wl-` prefix; scroll-reveal via `.wl-anim` on , mirroring crypto.css / casino.css. ============================================================ */ /* Global stylesheets set `overflow-x: hidden` on , which makes it a scroll container and kills `position: sticky` inside. `clip` avoids the horizontal overflow without creating a scroll container. */ body:has(.wl-page) { overflow-x: clip; background: #fff; } .wl-page { --wl-blue: #1268e3; --wl-blue-dk: #0b57c9; --wl-navy: #1e2455; --wl-red: #f5333f; --wl-ink: #221e1e; --wl-body: #5a5a5a; --wl-line: #ececec; --wl-soft: #f2f4f8; --wl-pink: #fdf1ee; --wl-pink-2: #f9d8cc; position: relative; background: #fff; color: var(--wl-ink); overflow-x: clip; font-family: "Gabarito", "Poppins", "Inter", system-ui, -apple-system, sans-serif; } .wl-page .container { /* Design content column is 1259px wide; bootstrap adds 15px padding a side. */ max-width: 1290px; } /* Zero-specificity resets so components below never fight them. */ .wl-page :where(h1, h2, h3, h4) { margin: 0; letter-spacing: -0.02em; color: var(--wl-ink); } .wl-page :where(p) { margin: 0; color: var(--wl-body); } .wl-page :where(ul, ol) { margin: 0; padding: 0; list-style: none; } .wl-page :where(img) { max-width: 100%; height: auto; } /* ---------- shared furniture ---------- */ .wl-section { padding: 92px 0; } .wl-eyebrow { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--wl-red); text-align: center; margin-bottom: 14px; } /* Same eyebrow, ranged left for the two-column split sections. */ .wl-eyebrow--left { text-align: left; margin-bottom: 18px; } .wl-head { max-width: 1030px; margin: 0 auto 56px; text-align: center; } .wl-head h2 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.16; font-weight: 700; } .wl-head p { margin-top: 18px; font-size: 16px; line-height: 1.75; max-width: 1000px; margin-inline: auto; } /* Pill buttons -------------------------------------------------- */ /* On hover the label and the arrow disc trade sides. The disc has to travel the label's width, which only JS can measure, so the blade script publishes it as --wl-btn-label-w. Same mechanic as .cry-btn on the crypto page. */ .wl-btn { --wl-btn-disc-w: 38px; --wl-btn-gap: 18px; --wl-btn-pad-l: 30px; --wl-btn-pad-r: 13px; position: relative; display: inline-flex; align-items: center; gap: var(--wl-btn-gap); width: max-content; overflow: hidden; padding: 13px var(--wl-btn-pad-r) 13px var(--wl-btn-pad-l); border-radius: 999px; border: 0; background: #000; color: #fff; font-size: 15px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, padding 0.5s cubic-bezier(0.65, 0, 0.35, 1); } .wl-btn:hover, .wl-btn:focus-visible { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18); } /* Only the arrow buttons swap sides; the flat CTA buttons keep their padding. */ .wl-btn:has(.wl-btn__disc):hover, .wl-btn:has(.wl-btn__disc):focus-visible { padding-left: var(--wl-btn-pad-r); padding-right: var(--wl-btn-pad-l); } .wl-btn__label { display: inline-block; flex: none; white-space: nowrap; will-change: transform; transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1); } .wl-btn__disc { display: grid; place-items: center; width: var(--wl-btn-disc-w); height: var(--wl-btn-disc-w); border-radius: 50%; background: #fff; color: #000; flex: none; will-change: transform; transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1); } .wl-btn__disc svg { width: 17px; height: 17px; /* Drawn pointing up-right, so 45deg lands it pointing straight right. */ transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1); } .wl-btn:hover .wl-btn__label, .wl-btn:focus-visible .wl-btn__label { transform: translateX(calc(var(--wl-btn-disc-w) + var(--wl-btn-gap))); } .wl-btn:hover .wl-btn__disc, .wl-btn:focus-visible .wl-btn__disc { transform: translateX(calc(-1 * (var(--wl-btn-label-w, 200px) + var(--wl-btn-gap)))); } .wl-btn:hover .wl-btn__disc svg, .wl-btn:focus-visible .wl-btn__disc svg { transform: rotate(45deg); } .wl-btn--blue { background: var(--wl-blue); } .wl-btn--blue .wl-btn__disc { background: #fff; color: var(--wl-blue); } .wl-btn--blue:hover { background: var(--wl-blue-dk); box-shadow: 0 14px 30px rgba(18, 104, 227, 0.28); } /* Square (flat) button used inside the CTA bands. */ .wl-btn--flat { border-radius: 6px; padding: 18px 34px; } .wl-btn--flat:hover, .wl-btn--flat:focus-visible { background: #1a1a1a; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24); } .wl-btn--white { background: #fff; color: #10102a; } .wl-btn--white:hover, .wl-btn--white:focus-visible { color: #10102a; background: #f2f2f2; } /* Scroll reveal -------------------------------------------------- */ .wl-anim .wl-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); } .wl-anim .wl-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .wl-anim .wl-reveal { opacity: 1; transform: none; transition: none; } .wl-btn, .wl-btn__label, .wl-btn__disc, .wl-btn__disc svg { transition: none; } .wl-btn:hover .wl-btn__label, .wl-btn:focus-visible .wl-btn__label, .wl-btn:hover .wl-btn__disc, .wl-btn:focus-visible .wl-btn__disc, .wl-btn:hover .wl-btn__disc svg, .wl-btn:focus-visible .wl-btn__disc svg { transform: none; } .wl-btn:has(.wl-btn__disc):hover, .wl-btn:has(.wl-btn__disc):focus-visible { padding-left: var(--wl-btn-pad-l); padding-right: var(--wl-btn-pad-r); } } /* ================= HERO ================= */ .wl-hero { position: relative; padding: 74px 0 96px; isolation: isolate; } .wl-hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; } .wl-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } .wl-hero__inner { position: relative; min-height: 640px; } /* Narrower than the design's 877px so the bigger art has room beside it. */ .wl-hero__copy { max-width: 650px; } .wl-hero__title { /* Trimmed from 70px so `Development Company` still sets on one line in the narrower copy column the enlarged art leaves behind. */ font-size: clamp(36px, 4.4vw, 62px); line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; } .wl-hero__title em { display: block; font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 500; letter-spacing: -0.01em; background: linear-gradient(90deg, #17b6e8 0%, #6f8fd0 46%, #ef3f8d 78%, #e8355f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .wl-hero__lead { margin-top: 26px; max-width: 680px; font-size: 17px; line-height: 1.72; color: #4b4b4b; } .wl-hero__pills { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; max-width: 700px; } .wl-pill { display: inline-flex; align-items: center; gap: 12px; padding: 13px 22px; border-radius: 12px; border: 1px solid currentColor; background: rgba(255, 255, 255, 0.62); backdrop-filter: blur(6px); font-size: 16px; font-weight: 600; } .wl-pill { transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; } .wl-pill:hover { transform: translateY(-3px); background: #fff; box-shadow: 0 14px 28px rgba(20, 20, 43, 0.1); } .wl-pill svg { width: 22px; height: 22px; flex: none; transition: transform 0.35s ease; } .wl-pill:hover svg { transform: rotate(-8deg) scale(1.1); } .wl-pill--rose { color: #e8446f; } .wl-pill--amber { color: #ef8a1f; } .wl-pill--blue { color: #1aa0e8; } .wl-pill--indigo { color: #5566e8; } .wl-hero__cta { margin-top: 34px; } /* Filled the full height of the hero row rather than sitting in the top corner. Centred with flex, not a transform — `.wl-reveal` animates `transform` on this same element and would cancel it. */ .wl-hero__art { position: absolute; top: 0; bottom: 0; right: -40px; width: min(680px, 50vw); display: flex; align-items: center; } .wl-hero__art img { width: 100%; max-width: none; display: block; } /* ================= STATS ================= */ .wl-stats { padding: 84px 0 76px; } .wl-stats__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 33px; } .wl-stat { position: relative; min-height: 216px; transition: transform 0.3s ease, box-shadow 0.3s ease; padding: 22px 18px 30px; border-radius: 20px; background: linear-gradient(160deg, #fdece7 0%, #fdf5f2 55%, #fff 100%); box-shadow: 0 18px 40px rgba(226, 145, 120, 0.18); } .wl-stat:hover { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(226, 145, 120, 0.28); } .wl-stat__inner { border-radius: 16px; background: #fff; padding: 30px 14px 26px; text-align: center; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05); } .wl-stat__num { display: block; font-size: 36px; font-weight: 700; letter-spacing: -0.03em; } .wl-stat__label { margin-top: 8px; font-size: 13px; line-height: 1.4; } /* ================= AWARDS ================= */ .wl-awards { background: var(--wl-soft); padding: 74px 0 86px; overflow: hidden; } .wl-awards h2 { text-align: center; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.2; font-weight: 700; max-width: 900px; margin: 0 auto 52px; } .wl-award { flex: none; width: 169px; min-height: 244px; margin: 0; padding: 18px 14px 16px; border-radius: 14px; background: #fff; border: 1px solid #e8ebf1; box-shadow: 0 10px 24px rgba(23, 39, 77, 0.06); text-align: center; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .wl-award img { height: 110px; width: auto; object-fit: contain; margin-inline: auto; display: block; mix-blend-mode: multiply; } .wl-award:hover { transform: translateY(-4px); border-color: rgba(18, 104, 227, 0.35); box-shadow: 0 18px 34px rgba(23, 39, 77, 0.12); } .wl-award figcaption { margin-top: 10px; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--wl-ink); } .wl-award small { display: block; margin-top: 4px; font-size: 11px; color: #9a9a9a; } .wl-award__rule { display: block; width: 38px; height: 3px; border-radius: 2px; margin: 12px auto 0; background: #2b2b2b; } .wl-award__rule--blue { background: #1aa0e8; } /* Marquee (used by awards + tech stack) -------------------------- */ .wl-marquee { position: relative; 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); } .wl-marquee__track { display: flex; gap: 40px; width: max-content; animation: wl-scroll 38s linear infinite; } .wl-marquee:hover .wl-marquee__track { animation-play-state: paused; } .wl-marquee--rev .wl-marquee__track { animation-direction: reverse; } @keyframes wl-scroll { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .wl-marquee__track { animation: none; } .wl-marquee { overflow-x: auto; } } /* ================= INTRO (built once, branded as yours) ========= Layered composition: a tinted slab sits behind the photo, a dot grid pokes out of the top-right corner and a proof card breaks the left edge. The copy column sets the row height; the photo fills whatever that comes to, so neither column ends with dead space. */ .wl-intro { position: relative; } .wl-intro::before { content: ""; position: absolute; inset: 0; background: radial-gradient(720px 460px at 8% 14%, rgba(18, 104, 227, 0.08), transparent 68%), radial-gradient(520px 380px at 96% 88%, rgba(245, 51, 63, 0.05), transparent 70%); pointer-events: none; } .wl-intro > .container { position: relative; } .wl-intro__grid { display: grid; grid-template-columns: 560px minmax(0, 1fr); gap: 78px; align-items: stretch; } .wl-intro__media { position: relative; } /* Tinted slab, offset down-left behind the frame. */ .wl-intro__media::before { content: ""; position: absolute; z-index: 0; left: -28px; right: 40px; top: 40px; bottom: -28px; border-radius: 26px; background: linear-gradient(150deg, #e6eefc 0%, #dde8fb 55%, var(--wl-pink) 100%); } /* Dot grid peeking past the top-right corner. */ .wl-intro__media::after { content: ""; position: absolute; z-index: 2; pointer-events: none; right: -16px; top: -16px; width: 116px; height: 116px; background-image: radial-gradient(rgba(18, 104, 227, 0.42) 1.6px, transparent 1.7px); background-size: 14px 14px; } .wl-intro__frame { position: relative; z-index: 1; height: 100%; min-height: 460px; border-radius: 22px; overflow: hidden; box-shadow: 0 34px 64px rgba(20, 20, 43, 0.18); } /* Absolute so the portrait source contributes no height of its own — otherwise it would drive the row and reopen the gap beside the copy. */ .wl-intro__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); } .wl-intro__media:hover .wl-intro__frame img { transform: scale(1.04); } /* Grounds the badge against a busy photo. */ .wl-intro__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30, 36, 85, 0) 46%, rgba(30, 36, 85, 0.44) 100%); } .wl-intro__badge { position: absolute; z-index: 3; left: -26px; bottom: 38px; display: flex; align-items: center; gap: 15px; max-width: 292px; padding: 17px 24px 17px 20px; border-radius: 18px; background: #fff; box-shadow: 0 22px 48px rgba(20, 20, 43, 0.18); transition: transform 0.35s ease; } .wl-intro__media:hover .wl-intro__badge { transform: translateY(-5px); } .wl-intro__badge strong { font-size: 36px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--wl-blue); } .wl-intro__badge span { font-size: 13.5px; font-weight: 600; line-height: 1.42; color: var(--wl-ink); } .wl-intro__badge em { font-family: "Poppins", sans-serif; font-style: italic; font-weight: 600; color: var(--wl-red); } .wl-intro__copy { align-self: center; } .wl-intro h2 { font-size: clamp(30px, 3.3vw, 45px); line-height: 1.15; font-weight: 700; } /* Own line — a mid-sentence face switch orphans punctuation at the wrap. Poppins italic keeps the accent in the page's own type family. */ .wl-intro h2 em { display: block; margin-top: 4px; font-family: "Poppins", sans-serif; /* Poppins sets wider than the Gabarito line above it — trimmed so the accent still fits on one line. */ font-size: 0.87em; font-style: italic; font-weight: 600; letter-spacing: -0.025em; color: var(--wl-blue); } .wl-intro__lead { margin-top: 22px; font-size: 17.5px; line-height: 1.68; font-weight: 500; color: var(--wl-ink); } /* Hairline rule fading down the secondary copy. */ .wl-intro__body { position: relative; margin-top: 26px; padding-left: 26px; } .wl-intro__body::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--wl-blue), rgba(18, 104, 227, 0.04)); } .wl-intro__copy p { font-size: 16px; line-height: 1.72; } .wl-intro__body p + p { margin-top: 18px; } .wl-intro__points { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px; } .wl-intro__points li { display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px 9px 10px; border-radius: 999px; background: #f3f7fe; border: 1px solid #e2ebfa; font-size: 14px; font-weight: 600; color: var(--wl-ink); transition: border-color 0.25s ease, background 0.25s ease; } .wl-intro__points li:hover { background: #eaf2fe; border-color: #cddffa; } .wl-intro__points svg { box-sizing: border-box; width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: var(--wl-blue); color: #fff; flex: none; } .wl-intro__cta { margin-top: 38px; } /* ================= CTA BANDS ================= */ .wl-cta--pink { position: relative; background: var(--wl-pink); padding: 96px 0; text-align: center; overflow: hidden; } .wl-cta--pink h2 { font-size: clamp(30px, 3.9vw, 54px); line-height: 1.18; font-weight: 800; max-width: 760px; margin-inline: auto; } .wl-cta--pink p { margin: 22px auto 0; max-width: 880px; font-size: 16px; line-height: 1.7; } .wl-cta--pink .wl-btn { margin-top: 38px; } /* Decorative four-point sparkles. */ .wl-spark { position: absolute; color: var(--wl-pink-2); pointer-events: none; } .wl-spark svg { display: block; width: 100%; height: auto; } .wl-spark--a { width: 108px; top: 12%; right: 8%; } .wl-spark--b { width: 52px; top: 6%; right: 4%; } .wl-spark--c { width: 96px; bottom: 12%; left: 15%; } .wl-spark--d { width: 46px; bottom: 26%; left: 22%; } .wl-spark--e { width: 56px; bottom: 14%; right: 22%; } /* Navy CTA ------------------------------------------------------- */ .wl-cta--navy { padding: 40px 0 60px; } .wl-cta--navy__panel { position: relative; border-radius: 20px; background: #1e2455; padding: 32px 60px 0; min-height: 508px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 24px; align-items: center; overflow: hidden; } .wl-cta--navy h2 { color: #fff; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.18; font-weight: 700; } .wl-cta--navy p { margin-top: 20px; color: rgba(255, 255, 255, 0.72); font-size: 16px; line-height: 1.7; max-width: 430px; } .wl-cta--navy .wl-btn { margin-top: 34px; } .wl-cta--navy__art { position: relative; align-self: end; justify-self: center; margin-bottom: 0; max-width: 480px; } .wl-cta--navy__art img { display: block; width: 100%; } /* ================= RANGE — HIGHLIGHT LIST ================= */ /* Figma: cream band, 662px list + 539px aside, 72px gutter; rows are 662 wide with a 70px icon and a 510px text column, 30px apart. */ .wl-range { background: #fff8ef; padding: 120px 0; } .wl-range__grid { display: grid; grid-template-columns: 662px minmax(0, 1fr); gap: 72px; align-items: start; } .wl-range__list { display: grid; gap: 30px; } .wl-range__item { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 52px; align-items: start; padding: 30px; border-radius: 12px; background: #fff; border: 1px solid #ece7de; transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); } .wl-range__item:hover { border-color: rgba(239, 91, 52, 0.45); box-shadow: 0 18px 40px rgba(239, 91, 52, 0.12); } .wl-range__item.is-active:hover { box-shadow: 0 22px 46px rgba(239, 91, 52, 0.32); } .wl-range__item img { width: 70px; height: 70px; object-fit: contain; transition: filter 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); } .wl-range__item h3 { font-size: 24px; font-weight: 500; line-height: 1.3; transition: color 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); } .wl-range__item p { margin-top: 10px; font-size: 17px; line-height: 1.62; transition: color 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); } .wl-range__item.is-active { background: #ef5b34; border-color: #ef5b34; transform: translateX(6px); box-shadow: 0 22px 46px rgba(239, 91, 52, 0.26); } .wl-range__item.is-active img { transform: scale(1.06); } .wl-range__item.is-active h3, .wl-range__item.is-active p { color: #fff; } .wl-range__item.is-active img { filter: brightness(0) invert(1); } .wl-range__aside h2 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.2; font-weight: 700; } .wl-range__aside p { margin-top: 30px; font-size: 17px; line-height: 1.62; } .wl-range__aside img { margin-top: 60px; width: 100%; max-width: 525px; aspect-ratio: 525 / 722; object-fit: cover; border-radius: 4px; display: block; } /* ================= MODELS — THREE COLUMNS ================= */ .wl-models3__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 80px; align-items: start; } .wl-models3__col img { width: 59px; height: 59px; object-fit: contain; transition: transform 0.3s ease; } .wl-models3__col:hover img { transform: translateY(-4px) scale(1.06); } .wl-models3__col h3 { margin-top: 20px; font-size: 22px; font-weight: 700; line-height: 1.3; } .wl-models3__col p { margin-top: 14px; font-size: 16px; line-height: 1.7; } /* ================= SERVICE CARDS ================= */ .wl-svc__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; } .wl-svc__card { display: grid; grid-template-columns: 98px minmax(0, 1fr); gap: 43px; align-items: start; padding: 38px 23px; border-radius: 18px; background: #fff; border: 1px solid #f0f0f0; box-shadow: 0 16px 40px rgba(20, 20, 43, 0.06); transition: transform 0.3s ease, box-shadow 0.3s ease; } .wl-svc__card:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(20, 20, 43, 0.1); } .wl-svc__card img { width: 98px; height: 98px; object-fit: contain; } .wl-svc__card h3 { font-size: 24px; line-height: 1.25; font-weight: 600; } .wl-svc__card p { margin-top: 14px; font-size: 16px; line-height: 1.65; } /* ================= MODEL ROWS ================= */ .wl-model { padding: 70px 0; } .wl-model--tint { background: #f1f4ff; } .wl-model__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px; align-items: center; } .wl-model__copy h3 { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.25; font-weight: 700; } .wl-model__copy p { margin-top: 22px; font-size: 17px; line-height: 1.75; max-width: 613px; } .wl-model--flip .wl-model__copy { order: 2; } /* Social-style mock card that carries the row artwork. */ .wl-mock { width: 100%; max-width: 361px; border-radius: 8px; background: #fff; padding: 16px 16px 20px; box-shadow: 0 26px 60px rgba(24, 32, 74, 0.14); justify-self: center; transition: transform 0.35s ease, box-shadow 0.35s ease; } .wl-mock:hover { transform: translateY(-6px); box-shadow: 0 34px 70px rgba(24, 32, 74, 0.2); } .wl-mock__head { display: flex; align-items: center; gap: 14px; } .wl-mock__avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; } .wl-mock__bars { flex: 1; display: grid; gap: 8px; } .wl-mock__bars span { display: block; height: 8px; border-radius: 4px; background: #eceefb; } .wl-mock__bars span:nth-child(2) { width: 82%; } .wl-mock__bars span:nth-child(3) { width: 64%; } .wl-mock__shot { margin-top: 16px; width: 100%; height: 275px; object-fit: cover; border-radius: 4px; display: block; } .wl-mock__likes { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 22px; font-weight: 600; color: #2b2b2b; } .wl-mock__likes svg { width: 30px; height: 30px; color: #f5334f; } .wl-mock__likes small { font-size: 15px; font-weight: 400; color: #8a8a8a; } /* ================= PROCESS ================= */ .wl-process { padding: 88px 0 96px; background: linear-gradient(180deg, #fff 0%, #f8fbff 40%, #fff 100%); } .wl-process .wl-eyebrow { color: var(--wl-red); } .wl-process__list { position: relative; display: grid; gap: 90px; } .wl-step { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: center; gap: 30px; position: relative; } .wl-step--right { grid-template-columns: 300px minmax(0, 1fr); } .wl-step--right .wl-step__card { order: 2; margin-left: auto; } .wl-step--right .wl-step__no { order: 1; } .wl-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(24, 51, 104, 0.12); transition: transform 0.3s ease, box-shadow 0.3s ease; } .wl-step__card:hover { transform: translateY(-4px); box-shadow: 0 24px 54px rgba(24, 51, 104, 0.18); } .wl-step__card:hover .wl-step__icon img { transform: scale(1.08); } .wl-step__icon { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: #e8f1ff; } .wl-step__icon img { width: 32px; height: 32px; object-fit: contain; transition: transform 0.3s ease; } .wl-step__card h3 { font-size: 20px; font-weight: 600; } .wl-step__card p { margin-top: 6px; font-size: 14px; line-height: 1.55; } .wl-step__no { font-size: clamp(28px, 3.2vw, 44px); font-weight: 500; color: var(--wl-blue); letter-spacing: -0.02em; text-align: center; } /* Dashed diagonal linking one card to the next. Figma: a ~110x80 run of 18px dashes sitting in the gap, leaning toward whichever side the next card is on. repeating-linear-gradient keeps the dash rhythm identical to the frame — `border-style: dashed` leaves it up to the browser. */ .wl-step + .wl-step::before { content: ""; position: absolute; top: -84px; width: 136px; height: 3px; border-radius: 2px; background: repeating-linear-gradient( 90deg, var(--wl-blue) 0 18px, transparent 18px 32px ); transform-origin: left center; } /* Next card is on the right: the run falls left-to-right. */ .wl-step--right::before { left: 47%; transform: rotate(36deg); } /* Next card is on the left: same run, mirrored. */ .wl-step--left::before { left: 53%; transform: rotate(144deg); } /* ================= BENEFITS ================= Horizontal cards: thumbnail left, copy right, two per row. Keeps six benefits inside roughly a third of the height the stacked version took. The whole card is one hover surface — image zooms, index chip inverts, an accent rule wipes down the left of the copy. */ .wl-benefits { position: relative; } .wl-benefits::before { content: ""; position: absolute; inset: 0; background: radial-gradient(760px 480px at 88% 6%, rgba(18, 104, 227, 0.06), transparent 68%); pointer-events: none; } .wl-benefits > .container { position: relative; } .wl-benefits__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .wl-benefit { display: grid; grid-template-columns: 214px minmax(0, 1fr); align-items: center; gap: 24px; padding: 16px; border-radius: 20px; background: #fff; border: 1px solid #eaeef6; box-shadow: 0 12px 30px rgba(20, 20, 43, 0.05); transition: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease; } .wl-benefit:hover { transform: translateY(-5px); border-color: #d2e0f8; box-shadow: 0 26px 52px rgba(18, 104, 227, 0.14); } .wl-benefit__media { position: relative; border-radius: 14px; overflow: hidden; } .wl-benefit__media img { width: 100%; /* Source ratio — the artwork has baked-in labels, so any crop cuts them. */ aspect-ratio: 596 / 413; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.35s ease; } .wl-benefit:hover .wl-benefit__media img { transform: scale(1.06); filter: saturate(1.06); } /* Index chip in the thumbnail's lower-left corner. */ .wl-benefit__no { position: absolute; left: 10px; bottom: 10px; min-width: 38px; padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(4px); font-family: "Poppins", sans-serif; font-style: italic; font-size: 14px; font-weight: 700; text-align: center; color: var(--wl-blue); box-shadow: 0 6px 16px rgba(20, 20, 43, 0.18); transition: background 0.32s ease, color 0.32s ease; } .wl-benefit:hover .wl-benefit__no { background: var(--wl-blue); color: #fff; } .wl-benefit__body { position: relative; padding: 4px 8px 4px 18px; } /* Accent rule that wipes down the copy on hover. */ .wl-benefit__body::before { content: ""; position: absolute; left: 0; top: 4px; width: 3px; height: 0; border-radius: 3px; background: linear-gradient(180deg, var(--wl-blue), rgba(18, 104, 227, 0.08)); transition: height 0.36s cubic-bezier(0.22, 0.61, 0.36, 1); } .wl-benefit:hover .wl-benefit__body::before { height: calc(100% - 8px); } .wl-benefit h3 { font-size: 21px; line-height: 1.26; font-weight: 700; } .wl-benefit p { margin-top: 11px; font-size: 15.5px; line-height: 1.62; } /* ================= WHAT COMES STANDARD ================= Mirror of the intro composition, flipped: the slab offsets down-right and the seal overlaps the top-right corner. Warm tint separates the section from the white benefits grid above it. */ .wl-standard { position: relative; background: linear-gradient(180deg, #fff 0%, #f7f9fd 42%, #f4f7fc 100%); } .wl-standard__grid { display: grid; grid-template-columns: 530px minmax(0, 1fr); gap: 74px; align-items: stretch; } .wl-standard__media { position: relative; } .wl-standard__media::before { content: ""; position: absolute; z-index: 0; left: 40px; right: -28px; top: 40px; bottom: -28px; border-radius: 26px; background: linear-gradient(210deg, var(--wl-pink) 0%, #f6e3f0 48%, #dfe9fb 100%); } .wl-standard__frame { position: relative; z-index: 1; height: 100%; min-height: 460px; border-radius: 22px; overflow: hidden; box-shadow: 0 34px 64px rgba(20, 20, 43, 0.16); } /* Absolute for the same reason as .wl-intro__frame img. */ .wl-standard__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); } .wl-standard__media:hover .wl-standard__frame img { transform: scale(1.04); } .wl-standard__stamp { position: absolute; z-index: 2; right: -22px; top: 30px; display: flex; align-items: center; gap: 12px; padding: 14px 20px 14px 15px; border-radius: 16px; background: #fff; box-shadow: 0 20px 44px rgba(20, 20, 43, 0.16); font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--wl-ink); transition: transform 0.35s ease; } .wl-standard__media:hover .wl-standard__stamp { transform: translateY(-5px); } .wl-standard__stamp svg { box-sizing: border-box; width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--wl-blue); color: #fff; flex: none; } .wl-standard__stamp em { font-family: "Poppins", sans-serif; font-style: italic; font-weight: 600; color: var(--wl-red); } .wl-standard__copy { align-self: center; } .wl-standard h2 { font-size: clamp(28px, 3.1vw, 43px); line-height: 1.18; font-weight: 700; } .wl-standard h2 em { font-family: "Poppins", sans-serif; font-style: italic; font-weight: 600; letter-spacing: -0.025em; color: var(--wl-blue); } .wl-standard__list { margin-top: 32px; display: grid; gap: 13px; } .wl-standard__list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 19px 22px; border-radius: 14px; background: #fff; border: 1px solid #e9eef7; box-shadow: 0 10px 26px rgba(20, 20, 43, 0.05); font-size: 16.5px; font-weight: 600; transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; } .wl-standard__list li:hover { transform: translateX(7px); border-color: #cfdffa; box-shadow: 0 18px 36px rgba(18, 104, 227, 0.14); } .wl-standard__no { font-family: "Poppins", sans-serif; font-style: italic; font-size: 17px; font-weight: 700; letter-spacing: 0.01em; color: var(--wl-blue); opacity: 0.45; transition: opacity 0.28s ease; } .wl-standard__list li:hover .wl-standard__no { opacity: 1; } .wl-standard__tick { box-sizing: border-box; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #eaf1fd; color: var(--wl-blue); flex: none; transition: background 0.28s ease, color 0.28s ease; } .wl-standard__list li:hover .wl-standard__tick { background: var(--wl-blue); color: #fff; } .wl-standard__tick svg { width: 15px; height: 15px; } /* ================= TECH CARDS ================= */ .wl-tech__slider { position: relative; overflow: hidden; /* Room for the active card to scale up without being clipped. */ padding: 26px 0 34px; } .wl-tech__slider .wl-drag { z-index: 3; } .wl-tech__slider .swiper-wrapper { align-items: center; } .wl-tech__slider .swiper-slide.wl-techcard { position: relative; border-radius: 12px; overflow: hidden; height: 460px; display: flex; align-items: flex-end; color: #fff; isolation: isolate; /* Inactive slides sit back; the active one comes forward. */ opacity: 0.45; transform: scale(0.88); transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.5s ease; } .wl-tech__slider .swiper-slide.swiper-slide-active.wl-techcard { opacity: 1; transform: scale(1); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3); } .wl-techcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); } .wl-techcard:hover img { transform: scale(1.06); } .wl-techcard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.72) 100%); } .wl-techcard__body { padding: 26px 24px 28px; } .wl-techcard h3 { color: #fff; font-size: 23px; font-weight: 600; } .wl-techcard p { margin-top: 10px; color: rgba(255, 255, 255, 0.88); font-size: 15px; line-height: 1.6; } /* ================= TECH STACK MARQUEE ================= */ .wl-stack { padding: 80px 0 90px; } .wl-stack__rows { display: grid; gap: 0; } .wl-stack__tile { flex: none; width: 190px; height: 187px; display: flex; flex-direction: column; justify-content: center; padding: 20px 10px; text-align: center; border-right: 1px solid #ededed; border-bottom: 1px solid #ededed; transition: background 0.3s ease; } .wl-stack__tile:hover { background: #f7faff; } .wl-stack__tile:hover img { transform: translateY(-4px) scale(1.08); } .wl-stack__tile img { width: 64px; height: 64px; object-fit: contain; margin-inline: auto; display: block; transition: transform 0.3s ease; } .wl-stack__tile span { display: block; margin-top: 16px; font-size: 15px; color: #6c6c6c; } .wl-stack .wl-marquee__track { gap: 0; } /* The two rows read as one grid: no gap, and only the first row draws a top border so the outer edge isn't doubled. */ .wl-stack .wl-marquee + .wl-marquee { margin-top: 0; } .wl-stack .wl-marquee:first-child .wl-stack__tile { border-top: 1px solid #ededed; } /* ================= DELIVERED ================= */ /* Same anatomy as `.rm-ind` on the ready-made page: a cross-fading showcase beside a list of industries. The accent colour is published per row and lifted onto the section by the script, so the arrows and the active row always match the artwork on screen. */ .wl-delivered { --wl-del-accent: #f0a81e; } .wl-del__layout { display: grid; grid-template-columns: minmax(0, 1fr) 375px; gap: 22px; align-items: start; } .wl-del__showcase { display: flex; flex-direction: column; gap: 22px; } /* Every slide lives in the same box and cross-fades, so switching industries never reflows the section. The first slide is in flow and sets the height. */ .wl-del__stage { position: relative; border-radius: 32px; overflow: hidden; background: #f2f4f8; user-select: none; } /* A "Drag" badge replaces the cursor over any drag zone (the showcase stage and the technology slider). Only fine pointers get it, so touch devices keep their native behaviour. */ @media (hover: hover) and (pointer: fine) { .js-drag { cursor: none; } } .wl-drag { position: absolute; left: 0; top: 0; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: rgba(17, 17, 17, 0.86); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(calc(var(--wl-drag-x, 0px) - 50%), calc(var(--wl-drag-y, 0px) - 50%)) scale(0.85); transition: opacity 0.2s ease, transform 0.08s linear; } .wl-drag svg { width: 16px; height: 16px; } .js-drag.has-drag .wl-drag { opacity: 1; transform: translate(calc(var(--wl-drag-x, 0px) - 50%), calc(var(--wl-drag-y, 0px) - 50%)) scale(1); } /* While the showcase is actually being dragged the pill takes the accent. */ .wl-del__stage.is-dragging .wl-drag { background: var(--wl-del-accent); } .wl-del__slide { display: block; width: 100%; height: auto; object-fit: cover; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } /* `:first-of-type`, not `:first-child`: the drag badge is the stage's first child, and the in-flow slide is what sets the stage height. */ .wl-del__slide:not(:first-of-type) { position: absolute; inset: 0; height: 100%; } .wl-del__slide.is-on { opacity: 1; } /* Touch and coarse pointers keep a grab cursor instead of the badge. */ @media (hover: none), (pointer: coarse) { .js-drag { cursor: grab; } .wl-del__stage.is-dragging { cursor: grabbing; } .wl-drag { display: none; } } .wl-del__nav { display: flex; align-items: center; gap: 12px; } .wl-del__arrow { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--wl-del-accent) 18%, #fff); color: var(--wl-del-accent); transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease; } .wl-del__arrow svg { width: 18px; height: 18px; } .wl-del__arrow:hover, .wl-del__arrow:focus-visible { background: var(--wl-del-accent); color: #fff; transform: translateY(-2px); } .wl-del__count { margin-left: 6px; font-size: 14px; letter-spacing: 0.08em; color: #8b93a3; } .wl-del__count b { font-weight: 700; color: var(--wl-ink); } /* Sits at the far end of the same row as the arrows and takes the active industry's accent, so it always reads as belonging to the slide on screen. */ .wl-del__cta { /* Trimmed from the page default so it matches the 44px arrows. */ --wl-btn-disc-w: 30px; --wl-btn-gap: 14px; --wl-btn-pad-l: 22px; --wl-btn-pad-r: 7px; margin-left: auto; padding-top: 7px; padding-bottom: 7px; font-size: 13px; background: var(--wl-del-accent); color: #fff; transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease, padding 0.5s cubic-bezier(0.65, 0, 0.35, 1); } .wl-del__cta .wl-btn__disc { background: #fff; color: var(--wl-del-accent); } .wl-del__cta:hover, .wl-del__cta:focus-visible { color: #fff; box-shadow: 0 14px 30px color-mix(in srgb, var(--wl-del-accent) 34%, transparent); } .wl-del__list { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid #e6ebf3; border-radius: 22px; background: #fff; box-shadow: 0 12px 34px rgba(11, 18, 32, 0.06); } /* Each row is a card with a left accent bar that grows in on hover/active. */ .wl-del__item { position: relative; display: block; width: 100%; padding: 15px 18px; border: 1px solid transparent; border-radius: 14px; background: transparent; text-align: left; overflow: hidden; transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .wl-del__item::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--wl-del-accent); transform: scaleY(0); opacity: 0; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease; } .wl-del__item:hover { background: color-mix(in srgb, var(--wl-del-accent) 8%, #fff); border-color: color-mix(in srgb, var(--wl-del-accent) 24%, #fff); transform: translateX(2px); } .wl-del__item:hover::before { transform: scaleY(1); opacity: 1; } .wl-del__item.is-active { background: linear-gradient(135deg, var(--wl-del-accent) 0%, color-mix(in srgb, var(--wl-del-accent) 78%, #000) 100%); border-color: transparent; box-shadow: 0 12px 26px color-mix(in srgb, var(--wl-del-accent) 34%, transparent); transform: none; } .wl-del__item.is-active::before { background: rgba(255, 255, 255, 0.85); transform: scaleY(1); opacity: 1; } .wl-del__item:focus-visible { outline: 2px solid var(--wl-del-accent); outline-offset: 2px; } .wl-del__name { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-weight: 700; font-size: 17px; line-height: 1.45; color: var(--wl-ink); transition: color 0.25s ease; } /* Chevron marker — right when closed, down when the row is open. */ .wl-del__name::after { content: ""; flex: none; width: 7px; height: 7px; margin-right: 3px; border-right: 2px solid #b4bdcd; border-bottom: 2px solid #b4bdcd; transform: rotate(-45deg); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease; } .wl-del__item:hover .wl-del__name::after, .wl-del__item.is-active .wl-del__name::after { transform: rotate(45deg); } .wl-del__item:hover .wl-del__name::after { border-color: var(--wl-del-accent); } .wl-del__item.is-active .wl-del__name::after { border-color: #fff; } /* Collapsed by default; 0fr -> 1fr animates the height without a hardcoded max. */ .wl-del__meta { display: grid; grid-template-rows: 0fr; margin-top: 0; font-size: 14px; line-height: 1.6; color: #616161; opacity: 0; transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1), margin-top 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease; } .wl-del__meta-in { min-height: 0; overflow: hidden; display: block; } .wl-del__item:hover .wl-del__meta, .wl-del__item.is-active .wl-del__meta { grid-template-rows: 1fr; margin-top: 8px; opacity: 1; } .wl-del__item.is-active .wl-del__name { color: #fff; } .wl-del__item.is-active .wl-del__meta { color: rgba(255, 255, 255, 0.88); } @media (max-width: 960px) { .wl-del__layout { grid-template-columns: minmax(0, 1fr); } .wl-del__stage { border-radius: 20px; } } @media (max-width: 560px) { .wl-del__nav { flex-wrap: wrap; } .wl-del__cta { margin-left: 0; } } /* ================= WHY PARTNER (bento) ================= */ /* Figma: 612px left column (title + pricing card) beside a 651px pair of 317px card columns. */ .wl-why { padding: 86px 0 96px; } .wl-why__grid { display: grid; grid-template-columns: 612px minmax(0, 1fr); gap: 24px 24px; align-items: start; } .wl-why__intro { grid-column: 1; } .wl-why__intro h2 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.24; font-weight: 800; } .wl-why__intro p { margin-top: 24px; max-width: 509px; font-size: 16px; line-height: 1.7; } .wl-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; } .wl-why__intro:hover .wl-why__arrow { background: #111; color: #fff; transform: translateX(4px); } .wl-why__arrow svg { width: 22px; height: 22px; transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1); } .wl-why__intro:hover .wl-why__arrow svg { transform: rotate(45deg); } /* The two 317px card columns sit in the right-hand cell and span both rows. */ .wl-why__cards { grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; align-items: start; } .wl-why__col { display: grid; gap: 23px; align-content: start; } .wl-card { display: flex; flex-direction: column; gap: 18px; border-radius: 18px; padding: 24px; background: #f8f8f8; transition: transform 0.3s ease, box-shadow 0.3s ease; } .wl-card:hover { transform: translateY(-5px); box-shadow: 0 24px 48px rgba(20, 20, 43, 0.12); } .wl-card h3 { font-size: 22px; line-height: 1.28; font-weight: 700; } .wl-card p { margin-top: 12px; font-size: 16px; line-height: 1.6; } /* Illustration that heads the track-record and dedicated-team cards. */ .wl-card__art { width: 191px; max-width: 100%; height: auto; margin: 6px auto 4px; display: block; } .wl-card--peach { background: #fccebc; } .wl-card--peach .wl-card__art { width: 193px; } .wl-card--mint { background: #bcfcdc; } .wl-card--dark { background: #101010; } .wl-card--dark h3, .wl-card--dark p { color: #fff; } .wl-card--dark p { color: rgba(255, 255, 255, 0.78); } /* Chat chip pinned to the bottom of the support card. */ .wl-card__chip { width: 66px; height: 66px; align-self: start; transition: transform 0.3s ease; } .wl-card--dark:hover .wl-card__chip { transform: scale(1.06); } /* Record row inside the mint card (supplied as one piece of art). */ .wl-ghost { width: 283px; max-width: 100%; height: auto; display: block; } /* Pricing card: photo background, floating badges, copy at the bottom. */ .wl-card--photo { position: relative; grid-column: 1; padding: 0; overflow: hidden; min-height: 408px; background: #f0f1f1; isolation: isolate; } .wl-card__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); } .wl-card--photo:hover .wl-card__bg { transform: scale(1.05); } .wl-badges { position: relative; height: 245px; } .wl-badge { position: absolute; object-fit: contain; transition: transform 0.35s ease; } .wl-card--photo:hover .wl-badge { transform: translateY(-4px); } /* The supplied art is 1x with a 44px shadow bleed around the disc, so each box is the full PNG size and is offset by that bleed to land the disc on the frame's coordinates (24,17 / 160,101 / 341,38 / 460,113). */ .wl-badge--gradient { width: 225px; height: 225px; left: -20px; top: -27px; } .wl-badge--bestprice { width: 247px; height: 247px; left: 116px; top: 57px; } .wl-badge--medal { width: 192px; height: 192px; left: 297px; top: -6px; } .wl-badge--chart { width: 208px; height: 208px; left: 416px; top: 69px; } .wl-card--photo .wl-card__body { padding: 0 24px 24px; } /* ================= FAQ ================= */ .wl-faq { background: linear-gradient(140deg, #f7f9ff 0%, #f4f4f7 55%, #eef3fd 100%); padding: 92px 0 100px; } .wl-faq__grid { display: grid; grid-template-columns: 610px minmax(0, 1fr); gap: 61px; align-items: start; } /* Left column stays put while the questions scroll past it. */ .wl-faq__grid > div:first-child { position: sticky; top: 110px; } .wl-faq h2 { font-size: clamp(34px, 4.6vw, 64px); line-height: 1.12; font-weight: 800; } .wl-faq h2 span { color: var(--wl-blue); } .wl-faq__aside { margin-top: 80px; border-radius: 14px; padding: 34px 32px 36px; background: linear-gradient(135deg, #1268e3 0%, #0b3fbe 100%); color: #fff; max-width: 540px; } .wl-faq__aside h3 { color: #fff; font-size: 22px; font-weight: 600; } .wl-faq__aside p { margin-top: 8px; color: rgba(255, 255, 255, 0.82); font-size: 14px; } .wl-faq__aside .wl-btn { margin-top: 28px; background: #fff; color: #111; padding: 10px 10px 10px 24px; font-size: 14px; letter-spacing: 0; text-transform: none; } .wl-faq__aside .wl-btn__disc { width: 34px; height: 34px; background: #fff; color: #111; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); } .wl-faq__list { display: grid; gap: 16px; } .wl-faq__item { background: #fff; border-radius: 12px; padding: 22px 28px; box-shadow: 0 10px 26px rgba(24, 41, 87, 0.05); transition: box-shadow 0.3s ease; } .wl-faq__item:hover { box-shadow: 0 18px 38px rgba(24, 41, 87, 0.1); } .wl-faq__item:hover .wl-faq__q, .wl-faq__item[open] .wl-faq__q { color: var(--wl-blue); } .wl-faq__item:hover .wl-faq__mark::before, .wl-faq__item:hover .wl-faq__mark::after { background: var(--wl-blue); } .wl-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 24px; cursor: pointer; list-style: none; font-size: 18px; font-weight: 500; line-height: 1.45; transition: color 0.25s ease; } .wl-faq__q::-webkit-details-marker { display: none; } .wl-faq__mark { position: relative; width: 20px; height: 20px; flex: none; transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1); } .wl-faq__item[open] .wl-faq__mark { transform: rotate(180deg); } .wl-faq__mark::before, .wl-faq__mark::after { content: ""; position: absolute; background: #111; border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; } .wl-faq__mark::before { inset: 9px 0; height: 2px; } .wl-faq__mark::after { inset: 0 9px; width: 2px; } .wl-faq__item[open] .wl-faq__mark::after { transform: scaleY(0); opacity: 0; } .wl-faq__a-wrap { height: 0; opacity: 0; overflow: hidden; transition: height 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.28s ease; } .wl-faq__item[open] .wl-faq__a-wrap { height: auto; opacity: 1; } .wl-faq__a { padding-top: 14px; font-size: 16px; line-height: 1.7; color: #8b8b8b; } /* ================= RESPONSIVE ================= */ @media (max-width: 1199px) { .wl-section { padding: 74px 0; } /* Below the design width the fixed design columns become fluid. */ .wl-intro__grid, .wl-standard__grid, .wl-faq__grid, .wl-range__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px; } /* Keep the offset slabs clear of the copy column once the gap shrinks. */ .wl-intro__grid, .wl-standard__grid { gap: 56px; } .wl-intro__badge { left: -16px; max-width: 258px; } .wl-standard__stamp { right: -14px; } .wl-why__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .wl-badges { height: 215px; } .wl-models3__grid { gap: 44px; } .wl-svc__card { min-height: 0; } .wl-stats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .wl-tech__slider .swiper-slide.wl-techcard { height: 430px; } .wl-step { grid-template-columns: minmax(0, 1fr) 200px; } .wl-step--right { grid-template-columns: 200px minmax(0, 1fr); } } @media (max-width: 991px) { .wl-hero__inner, .wl-range__grid, .wl-intro__grid, .wl-model__row, .wl-standard__grid, .wl-faq__grid, .wl-cta--navy__panel { grid-template-columns: minmax(0, 1fr); } /* Stacked: no sibling column to borrow height from, so the frames go back to the design's own aspect and the slabs/cards pull inside the viewport. */ .wl-intro__grid, .wl-standard__grid { gap: 44px; } .wl-intro__frame { min-height: 0; aspect-ratio: 590 / 620; } .wl-standard__frame { min-height: 0; aspect-ratio: 555 / 600; } .wl-intro__media::before, .wl-standard__media::before { left: 18px; right: 18px; top: 28px; bottom: -18px; } .wl-intro__media::after { right: -8px; top: -10px; width: 88px; height: 88px; } .wl-intro__badge { left: 16px; bottom: 18px; } /* Bottom corner once stacked — the sticky site header sits over the top one. `top` must be cleared or the box stretches between both edges. */ .wl-standard__stamp { top: auto; right: auto; left: 16px; bottom: 16px; } .wl-hero { padding: 48px 0 64px; text-align: left; } .wl-hero__inner { min-height: 0; } .wl-hero__art { position: static; display: block; width: auto; max-width: 595px; margin: 34px auto 0; } .wl-hero__copy { max-width: none; } .wl-model--flip .wl-model__copy { order: 0; } .wl-svc__grid, .wl-models3__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Two horizontal cards a row get cramped below the design width — one full-width row each keeps the copy readable. */ .wl-benefits__grid { grid-template-columns: minmax(0, 1fr); } .wl-why__grid { grid-template-columns: minmax(0, 1fr); } .wl-why__intro, .wl-card--photo, .wl-why__cards { grid-column: 1; grid-row: auto; } .wl-badges { height: 200px; } .wl-faq__grid > div:first-child { position: static; } .wl-range { padding: 74px 0; } .wl-range__aside img { margin-top: 34px; max-width: none; } .wl-why__intro { grid-column: 1 / -1; } .wl-cta--navy__panel { padding: 48px 34px 0; text-align: center; } .wl-cta--navy p { margin-inline: auto; } .wl-cta--navy__art { margin-bottom: 0; } .wl-faq__aside { margin-top: 24px; max-width: none; } .wl-step, .wl-step--right { grid-template-columns: minmax(0, 1fr); gap: 14px; } .wl-step--right .wl-step__card, .wl-step--right .wl-step__no { order: 0; margin-left: 0; } .wl-step__no { text-align: left; font-size: 22px; } .wl-step + .wl-step::before { display: none; } .wl-process__list { gap: 26px; } .wl-tech__slider { padding: 16px 0 24px; } } @media (max-width: 767px) { .wl-section { padding: 58px 0; } .wl-stats { padding: 58px 0; } .wl-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wl-svc__grid, .wl-benefits__grid, .wl-models3__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; } .wl-why__cards { grid-template-columns: minmax(0, 1fr); gap: 23px; } /* Badges shrink and re-flow so they still sit inside the narrower card. */ .wl-badges { height: 175px; } .wl-badge--gradient { width: 150px; height: 150px; left: -18px; top: -20px; } .wl-badge--bestprice { width: 165px; height: 165px; left: 70px; top: 40px; } .wl-badge--medal { width: 130px; height: 130px; left: 175px; top: -8px; } .wl-badge--chart { width: 140px; height: 140px; left: 215px; top: 58px; } .wl-range { padding: 58px 0; } .wl-range__item { grid-template-columns: 56px minmax(0, 1fr); gap: 20px; padding: 22px; } .wl-range__item img { width: 56px; height: 56px; } .wl-range__item h3 { font-size: 20px; } .wl-range__item p { font-size: 15px; } .wl-svc__card { grid-template-columns: 64px minmax(0, 1fr); padding: 26px 22px; gap: 16px; } .wl-svc__card img { width: 64px; height: 64px; } .wl-cta--pink { padding: 68px 0; } .wl-cta--navy__panel { padding: 40px 22px 0; } .wl-benefit h3 { font-size: 19px; } .wl-standard__list li { padding: 18px 20px; font-size: 15px; } .wl-mock { max-width: 320px; } .wl-tech__slider .swiper-slide.wl-techcard { height: 400px; } .wl-faq__item { padding: 18px 20px; } .wl-faq__q { font-size: 16px; } } @media (max-width: 575px) { .wl-hero__pills { gap: 10px; } .wl-pill { width: 100%; font-size: 14px; padding: 11px 16px; } .wl-btn { padding: 10px 10px 10px 22px; font-size: 13px; gap: 12px; } .wl-btn--flat { padding: 15px 24px; } .wl-btn__disc { width: 32px; height: 32px; } .wl-stats__grid { grid-template-columns: minmax(0, 1fr); } .wl-intro__badge { left: 12px; bottom: 12px; gap: 12px; max-width: 236px; padding: 13px 17px 13px 15px; } .wl-intro__badge strong { font-size: 29px; } .wl-intro__badge span { font-size: 12.5px; } .wl-intro__body { padding-left: 18px; } .wl-standard__stamp { left: 10px; bottom: 10px; padding: 11px 15px 11px 12px; font-size: 12.5px; } .wl-standard__stamp svg { width: 24px; height: 24px; } /* Below ~575 the thumbnail column starves the copy — stack it instead. */ .wl-benefit { grid-template-columns: minmax(0, 1fr); gap: 15px; } .wl-benefit__media img { aspect-ratio: 596 / 413; } .wl-benefit__body { padding: 0 6px 8px 16px; } .wl-standard__list li { gap: 12px; padding: 16px 16px; } .wl-standard__no { font-size: 18px; } .wl-award { width: 150px; } .wl-award img { height: 108px; } .wl-stack__tile { width: 150px; } } /* The longest label ("Book a Free 30-Minute Consultation") sets ~337px wide, and `.wl-btn` is `width: max-content` with a `nowrap` label — so on a narrow phone it runs past the content column and the arrow disc gets clipped. Below 575 every button is pinned to its column and the label is free to wrap. Applies to every long button, not just the hero CTA. */ @media (max-width: 575px) { .wl-btn { width: 100%; justify-content: space-between; padding: 12px 12px 12px 18px; font-size: 12px; letter-spacing: 0.02em; text-align: left; } .wl-btn__label { white-space: normal; } /* The label/disc swap slides by a measured label width, which a wrapped label no longer has — freeze it so a tap can't shove the disc off-screen. */ .wl-btn:has(.wl-btn__disc):hover, .wl-btn:has(.wl-btn__disc):focus-visible { padding-left: 18px; padding-right: 12px; } .wl-btn:hover .wl-btn__label, .wl-btn:focus-visible .wl-btn__label, .wl-btn:hover .wl-btn__disc, .wl-btn:focus-visible .wl-btn__disc { transform: none; } /* No disc to push away from, so centre the label. */ .wl-btn--flat { justify-content: center; padding: 14px 18px; text-align: center; } } /* Everything above degrades to a plain colour change when the visitor asks for reduced motion. */ @media (prefers-reduced-motion: reduce) { .wl-page *, .wl-page *::before, .wl-page *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } .wl-stat:hover, .wl-award:hover, .wl-range__item:hover, .wl-benefit:hover, .wl-mock:hover, .wl-step__card:hover, .wl-techcard:hover, .wl-card:hover, .wl-standard__list li:hover, .wl-pill:hover, .wl-svc__card:hover { transform: none; } }