/* ============================================================ Logistics App Development page (/service/logistic-app-development) Light theme, blue accent. BEM-ish `lg-` prefix; scroll-reveal via `.lg-anim` on , mirroring llm.css / dubai.css. ============================================================ */ /* The global stylesheets set `overflow-x: hidden` on , which makes it a scroll container and silently disables `position: sticky` inside it. `clip` prevents the same horizontal overflow without creating a scroll container. Scoped with :has() so only this page is affected. */ body:has(.lg-page) { overflow-x: clip; } .lg-page { --lg-blue: #1766fc; --lg-blue-hi: #007eff; --lg-ink: #0b1220; --lg-body: #4a5568; --lg-muted: #6b7280; --lg-line: #e8ecf4; --lg-card: #ffffff; --lg-soft: #f5f8ff; --lg-page-bg: #fcfdfe; position: relative; background: var(--lg-page-bg); color: var(--lg-ink); overflow-x: clip; font-family: "Poppins", "Inter", system-ui, -apple-system, sans-serif; } .lg-page .container { max-width: 1240px; } .lg-page h1, .lg-page h2, .lg-page h3 { margin: 0; letter-spacing: -0.02em; } .lg-page p { margin: 0; } .lg-page ul, .lg-page ol { margin: 0; padding: 0; list-style: none; } .lg-blue { color: var(--lg-blue); } /* ---------- shared section furniture ---------- */ .lg-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lg-blue); } .lg-eyebrow::before, .lg-eyebrow::after { content: ""; width: 34px; height: 1px; background: currentColor; opacity: 0.7; } .lg-eyebrow--pill { padding: 6px 18px; border-radius: 999px; background: #eef1f6; color: #0b1220; font-size: 12px; letter-spacing: 0.12em; } .lg-eyebrow--pill::before, .lg-eyebrow--pill::after { display: none; } .lg-head { text-align: center; max-width: 900px; margin: 0 auto 56px; } .lg-head--left { text-align: left; margin-left: 0; } .lg-title { margin-top: 18px; font-size: clamp(30px, 3.6vw, 54px); line-height: 1.15; font-weight: 800; color: var(--lg-ink); } .lg-lead { margin-top: 18px; font-size: 17px; line-height: 1.65; color: var(--lg-muted); } /* Blue underline stub used at the bottom of most cards. */ .lg-bar { display: block; width: 38px; height: 3px; border-radius: 2px; background: var(--lg-blue); } /* ---------- buttons ---------- */ .lg-btn { --lg-btn-icon-w: 34px; --lg-btn-gap: 14px; display: inline-flex; align-items: center; gap: var(--lg-btn-gap); padding: 14px 16px 14px 28px; border-radius: 999px; background: var(--lg-blue-hi); color: #fff; font-size: 17px; font-weight: 600; text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; } .lg-btn:hover, .lg-btn:focus-visible { color: #fff; background: #0b5fd6; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0, 126, 255, 0.32); } /* Hover: label and arrow disc trade sides, keeping the gap — the same swap as `.dubai-industry__actions`, but inside one anchor so the link stays a single element. The label travels past the disc (a fixed 34px + gap); the disc travels past the label, whose width `--lg-btn-label-w` is published per button by the script in the blade. Killed by prefers-reduced-motion below. */ .lg-btn__label { transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1); } .lg-btn:hover .lg-btn__label, .lg-btn:focus-visible .lg-btn__label { transform: translateX(calc(var(--lg-btn-icon-w) + var(--lg-btn-gap))); } .lg-btn__icon { display: grid; place-items: center; width: var(--lg-btn-icon-w); height: var(--lg-btn-icon-w); border-radius: 50%; background: #fff; color: var(--lg-blue-hi); flex: none; transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1), background 0.4s ease, color 0.4s ease; } .lg-btn:hover .lg-btn__icon, .lg-btn:focus-visible .lg-btn__icon { transform: translateX(calc(-1 * (var(--lg-btn-label-w, 190px) + var(--lg-btn-gap)))); } .lg-btn__icon svg { width: 17px; height: 17px; } .lg-btn--flat { padding: 14px 30px; background: var(--lg-blue); } .lg-btn--flat .lg-btn__icon { background: #0b1220; color: #fff; } .lg-btn--ghost { padding: 8px 8px 8px 26px; background: #fff; color: #0b1220; font-size: 15px; } .lg-btn--ghost:hover, .lg-btn--ghost:focus-visible { color: #0b1220; background: #fff; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18); } .lg-btn--ghost .lg-btn__icon { background: #fff; border: 1px solid #d9e2f2; color: #0b1220; } /* ============================================================ HERO ============================================================ */ .lg-hero { position: relative; isolation: isolate; padding: clamp(70px, 8vw, 120px) 0 0; color: #fff; overflow: hidden; } .lg-hero__bg { position: absolute; inset: 0; z-index: -2; } .lg-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; } /* Darkens the left half so the headline stays legible over the photo. */ .lg-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(3, 8, 20, 0.88) 0%, rgba(3, 8, 20, 0.66) 38%, rgba(3, 8, 20, 0.12) 72%, rgba(3, 8, 20, 0.05) 100% ), linear-gradient(180deg, rgba(3, 8, 20, 0.55) 0%, rgba(3, 8, 20, 0) 26%); } .lg-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 40px; align-items: center; } .lg-hero__copy { max-width: 820px; padding-bottom: 40px; } .lg-hero__title { font-size: clamp(38px, 5.2vw, 76px); line-height: 1.08; font-weight: 800; color: #fff; } .lg-hero__text { margin-top: 26px; max-width: 710px; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.7; color: rgba(255, 255, 255, 0.88); } .lg-hero__cta { margin-top: 38px; } .lg-hero__phone { position: relative; justify-self: end; align-self: center; width: 300px; max-width: 100%; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.45)); } .lg-hero__phone img { width: 100%; height: auto; } /* stats strip sitting on the darkened base of the hero photo */ .lg-hero__stats { position: relative; margin-top: clamp(30px, 5vw, 70px); padding: 34px 0 46px; background: linear-gradient(180deg, rgba(3, 8, 20, 0) 0%, rgba(3, 8, 20, 0.82) 42%, #030814 100%); } .lg-hero__stats ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; } .lg-stat__value { display: block; font-size: clamp(28px, 2.6vw, 40px); font-weight: 800; line-height: 1.1; color: #fff; /* Fixed-width digits so the count-up doesn't jitter as figures change. */ font-variant-numeric: tabular-nums; } .lg-stat__label { margin-top: 8px; font-size: clamp(14px, 1.1vw, 18px); color: rgba(255, 255, 255, 0.88); } /* ============================================================ AWARDS ============================================================ */ .lg-awards { padding: clamp(56px, 6vw, 88px) 0 clamp(20px, 3vw, 40px); background: #fff; overflow: hidden; } .lg-awards__marquee { position: relative; margin-top: 8px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .lg-awards__track { display: flex; gap: 42px; width: max-content; animation: lg-marquee 34s linear infinite; } .lg-awards__marquee:hover .lg-awards__track { animation-play-state: paused; } @keyframes lg-marquee { to { transform: translateX(-50%); } } .lg-award { flex: none; width: 170px; padding: 22px 16px 18px; border: 1px solid var(--lg-line); border-radius: 14px; background: #fff; text-align: center; } .lg-award img { width: auto; height: 108px; object-fit: contain; } .lg-award__title { margin-top: 14px; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--lg-ink); } .lg-award .lg-bar { margin: 12px auto 0; } /* ============================================================ CASE STUDY (Built by iApp: Meet Transwayz) ============================================================ */ /* No bottom padding: the full-bleed card below carries its own vertical padding and butts straight up against the next section. */ .lg-cs { padding: clamp(40px, 5vw, 70px) 0 0; background: #fff; } /* Full-bleed band: the card breaks out of `.container` and spans the viewport, while its own padding keeps the content capped at 1600px on wide screens. */ .lg-cs__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(24px, 3vw, 56px); align-items: center; margin-inline: calc(50% - 50vw); padding-block: clamp(40px, 5vw, 80px); padding-inline: max(clamp(20px, 4vw, 64px), calc((100vw - 1600px) / 2)); border-block: 1px solid var(--lg-line); background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%); } .lg-cs__label { font-size: 13px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--lg-blue); } .lg-cs__title { margin-top: 18px; font-size: clamp(28px, 3.2vw, 48px); line-height: 1.15; font-weight: 800; } .lg-cs__text { margin-top: 20px; font-size: 16px; line-height: 1.7; color: var(--lg-body); } .lg-cs__text strong { color: var(--lg-ink); font-weight: 600; } /* Scoped with `.lg-page` so these margins outrank the `.lg-page ul` reset. */ .lg-page .lg-cs__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 30px; margin: 36px 0 38px; } .lg-cs__stat { display: flex; align-items: center; gap: 16px; } .lg-cs__stat img { width: 52px; height: 52px; flex: none; } .lg-cs__stat b { display: block; font-size: 26px; font-weight: 800; line-height: 1.1; color: var(--lg-ink); } .lg-cs__stat span { font-size: 15px; color: var(--lg-body); } .lg-cs__media img { width: 100%; height: auto; } /* ============================================================ PROCESS ============================================================ */ /* The decorative strip is a background layer pinned to the bottom edge. It is a flat crop, so a gradient layer above it fades its top into the section background instead of showing a hard seam. Percentage padding resolves against the section's width, so it reserves exactly the strip's drawn height (1536x420 -> 27.34%) minus the 30px the cards overlap it by. */ .lg-proc { --lg-proc-decor-h: 27.34%; position: relative; padding: clamp(60px, 7vw, 100px) 0 calc(var(--lg-proc-decor-h) - 30px); background-image: linear-gradient(180deg, #f4f8ff 0%, rgba(244, 248, 255, 0) 22%), url("../images/logistic/proc-decor.png"), linear-gradient(180deg, #fbfcff 0%, #f4f8ff 100%); background-repeat: no-repeat; background-position: center bottom, center bottom, center top; /* The fade layer tracks the strip's drawn height (it scales past its native 1536px width), so the seam is always covered. */ background-size: 100% 27.34vw, 100% auto, 100% 100%; overflow: hidden; } .lg-proc__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; } .lg-proc__card { position: relative; padding: 46px 22px 30px; border: 1px solid var(--lg-line); border-radius: 18px; background: rgba(255, 255, 255, 0.72); text-align: center; } /* The card is also a `.lg-reveal`, and `.lg-anim .lg-reveal.is-in` sets both `transform: none` and its own `transition` — either would cancel the hover lift. The `html.lg-anim …` selector outranks it; the bare selector is the no-JS / reduced-motion fallback. `opacity` stays in the transition list so the scroll-reveal fade still runs. */ html.lg-anim .lg-proc__card.lg-reveal, .lg-proc__card { transition: opacity 0.6s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease; } html.lg-anim .lg-proc__card.lg-reveal:hover, .lg-proc__card:hover { transform: translateY(-8px); border-color: rgba(23, 102, 252, 0.28); background: #fff; box-shadow: 0 22px 44px rgba(15, 40, 90, 0.12); } .lg-proc__num { position: absolute; top: -19px; left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--lg-blue); color: #fff; font-size: 14px; font-weight: 700; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease; } /* Badge grows out of the card edge, icon lifts and swells, underline stretches. */ .lg-proc__card:hover .lg-proc__num { transform: translateX(-50%) scale(1.12); box-shadow: 0 8px 18px rgba(23, 102, 252, 0.38); } .lg-proc__icon { display: block; width: 108px; height: 108px; margin: 0 auto 20px; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .lg-proc__card:hover .lg-proc__icon { transform: translateY(-4px) scale(1.07); } .lg-proc__title { font-size: 19px; font-weight: 700; line-height: 1.3; } .lg-proc__text { margin-top: 14px; font-size: 14.5px; line-height: 1.6; color: var(--lg-body); } .lg-proc__card .lg-bar { margin: 20px auto 0; transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .lg-proc__card:hover .lg-bar { width: 72px; } /* ============================================================ SERVICES ============================================================ */ .lg-svc { padding: clamp(60px, 7vw, 100px) 0; background: var(--lg-page-bg); } /* ---------- service card (x-logistic.service-card) ---------- Icon, body and rule are absolutely positioned inside a fixed-height card, so the hover swap (icon drops to the bottom, text rises to the top) runs on `transform` alone -- no reflow, no layout shift, compositor-only work. Every offset below is derived from these custom properties, so changing the padding or icon size keeps the animation correct: travel up = icon height + the gap beneath it travel down = the space left once padding, rule and icon are accounted for */ .lg-svc__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; --lg-svc-h: 380px; --lg-svc-pad-x: 22px; --lg-svc-pad-t: 30px; --lg-svc-pad-b: 26px; --lg-svc-icon: 96px; --lg-svc-icon-gap: 18px; --lg-svc-bar-h: 3px; --lg-svc-bar-gap: 22px; --lg-svc-ease: cubic-bezier(0.45, 0, 0.2, 1); --lg-svc-dur: 0.6s; } .lg-svc-card { position: relative; display: block; height: var(--lg-svc-h); border: 1px solid var(--lg-line); border-radius: 18px; background: linear-gradient(180deg, #ffffff 0%, #fafcff 100%); box-shadow: 0 2px 10px rgba(15, 40, 90, 0.04); text-align: center; overflow: hidden; cursor: pointer; transition: transform var(--lg-svc-dur) var(--lg-svc-ease), box-shadow var(--lg-svc-dur) var(--lg-svc-ease), border-color var(--lg-svc-dur) var(--lg-svc-ease), background var(--lg-svc-dur) var(--lg-svc-ease); } .lg-svc-card:hover { transform: translateY(-10px); border-color: rgba(37, 99, 235, 0.3); background: #fff; box-shadow: 0 30px 60px rgba(15, 40, 90, 0.16); } .lg-svc-card__icon { position: absolute; top: var(--lg-svc-pad-t); left: 50%; width: var(--lg-svc-icon); height: var(--lg-svc-icon); transform: translateX(-50%); transition: transform var(--lg-svc-dur) var(--lg-svc-ease); } /* Down to the bottom slot, just above the rule, shrinking slightly on the way. */ .lg-svc-card:hover .lg-svc-card__icon { transform: translateX(-50%) translateY( calc( var(--lg-svc-h) - var(--lg-svc-pad-t) - var(--lg-svc-pad-b) - var(--lg-svc-bar-h) - var(--lg-svc-bar-gap) - var(--lg-svc-icon) ) ) scale(0.9); } .lg-svc-card__body { position: absolute; top: calc(var(--lg-svc-pad-t) + var(--lg-svc-icon) + var(--lg-svc-icon-gap)); left: var(--lg-svc-pad-x); right: var(--lg-svc-pad-x); transition: transform var(--lg-svc-dur) var(--lg-svc-ease); } /* Up by exactly the block the icon vacated, so the title lands at the top. */ .lg-svc-card:hover .lg-svc-card__body { transform: translateY(calc(-1 * (var(--lg-svc-icon) + var(--lg-svc-icon-gap)))); } .lg-svc-card__title { font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--lg-ink); transition: color var(--lg-svc-dur) var(--lg-svc-ease); } .lg-svc-card:hover .lg-svc-card__title { color: #2563eb; } .lg-svc-card__text { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--lg-body); } /* Laid out at its full 80px and scaled down to 40px, so the expansion animates on the compositor instead of triggering layout every frame. */ .lg-svc-card .lg-bar { position: absolute; bottom: var(--lg-svc-pad-b); left: 50%; width: 80px; margin-left: -40px; transform: scaleX(0.5); transition: transform var(--lg-svc-dur) var(--lg-svc-ease); } .lg-svc-card:hover .lg-bar { transform: scaleX(1); } /* ============================================================ COMPLIANCE ============================================================ */ .lg-comp { padding: clamp(60px, 7vw, 100px) 0; background: #f7f8fa; } /* Full-bleed two-row marquee. `overflow: hidden` clips the oversized tracks, so the block is padded (and pulled back by an equal negative margin) to leave room for the tiles' hover lift and shadow. */ .lg-comp__marquee { margin: -18px calc(50% - 50vw); padding: 18px 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .lg-comp__track { display: flex; gap: 22px; width: max-content; animation: lg-marquee 48s linear infinite; } .lg-comp__track + .lg-comp__track { margin-top: 22px; } .lg-comp__track--rev { animation-name: lg-marquee-rev; } .lg-comp__marquee:hover .lg-comp__track { animation-play-state: paused; } /* Fixed width because the tiles now sit in a flex marquee track rather than a grid; flex `stretch` keeps every tile in a row the same height. */ .lg-comp__item { display: flex; flex: none; width: clamp(210px, 17vw, 250px); flex-direction: column; align-items: center; justify-content: flex-start; gap: 18px; padding: 34px 18px 28px; border: 1px solid #eceef2; border-radius: 16px; /* white, so the logo artwork (exported on white) has no visible edge */ background: #fff; text-align: center; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease; } .lg-comp__item:hover { transform: translateY(-8px); border-color: rgba(23, 102, 252, 0.28); box-shadow: 0 18px 36px rgba(15, 40, 90, 0.12); } .lg-comp__item img { width: 100%; max-width: 150px; height: 84px; object-fit: contain; } .lg-comp__item span { font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--lg-ink); } /* ============================================================ CTA BAND ============================================================ */ .lg-band { position: relative; padding: clamp(60px, 7vw, 96px) 0; background: #e9f9fa; overflow: hidden; } /* the two faint rings on the right edge of the Figma band */ .lg-band::after { content: ""; position: absolute; top: 22%; right: -140px; width: 420px; height: 420px; border-radius: 50%; border: 42px solid rgba(255, 255, 255, 0.6); pointer-events: none; } .lg-band__inner { position: relative; max-width: 830px; margin: 0 auto; text-align: center; } .lg-band__title { font-size: clamp(28px, 3.2vw, 46px); line-height: 1.22; font-weight: 800; } .lg-band__text { margin-top: 22px; font-size: 17px; line-height: 1.65; color: #3f4a5a; } .lg-band__cta { margin-top: 34px; text-transform: uppercase; letter-spacing: 0.02em; font-size: 16px; } /* ============================================================ KEY FEATURES ============================================================ */ .lg-feat { position: relative; padding: clamp(60px, 7vw, 100px) 0; background: linear-gradient(180deg, #fbfcff 0%, #f6f9ff 100%); overflow: hidden; } /* Decorative crops sit behind the copy; their inner edge is masked so the rectangular crop never shows a seam against the section gradient. */ .lg-feat__decor { position: absolute; top: 90px; z-index: 0; pointer-events: none; opacity: 0.95; } .lg-feat__decor--left { left: 0; width: min(22vw, 300px); -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 100%); mask-image: linear-gradient(90deg, #000 55%, transparent 100%); } .lg-feat__decor--right { right: 0; top: 40px; width: min(17vw, 250px); -webkit-mask-image: linear-gradient(270deg, #000 60%, transparent 100%); mask-image: linear-gradient(270deg, #000 60%, transparent 100%); } .lg-feat__decor img { width: 100%; height: auto; } .lg-feat > .container { position: relative; z-index: 1; } .lg-feat__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; } .lg-feat__card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: start; padding: 30px 26px 26px; border: 1px solid var(--lg-line); border-radius: 18px; background: rgba(255, 255, 255, 0.86); } /* Same reveal clash as `.lg-proc__card` / `.lg-card`: `.lg-anim .lg-reveal.is-in` sets `transform: none` plus its own transition, so the hover state needs the `html.lg-anim …` selector to outrank it. The bare selector is the no-JS / reduced-motion fallback. */ html.lg-anim .lg-feat__card.lg-reveal, .lg-feat__card { transition: opacity 0.6s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease; } html.lg-anim .lg-feat__card.lg-reveal:hover, .lg-feat__card:hover { transform: translateY(-8px); border-color: rgba(23, 102, 252, 0.28); background: #fff; box-shadow: 0 22px 44px rgba(15, 40, 90, 0.12); } .lg-feat__card img { width: 96px; height: 96px; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .lg-feat__card:hover img { transform: translateY(-4px) scale(1.07); } .lg-feat__title { font-size: 18px; font-weight: 700; color: var(--lg-ink); } .lg-feat__text { margin-top: 12px; font-size: 14.5px; line-height: 1.62; color: var(--lg-body); } .lg-feat__card .lg-bar { margin-top: 18px; transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .lg-feat__card:hover .lg-bar { width: 72px; } /* ============================================================ TECHNOLOGY STACK ============================================================ */ .lg-tech { padding: clamp(60px, 7vw, 100px) 0; background: var(--lg-page-bg); } /* Full-bleed two-row marquee. `overflow: hidden` clips the oversized tracks, so the block is padded (and pulled back by an equal negative margin) to leave room for the tiles' hover lift and shadow. */ .lg-tech__marquee { margin: -18px calc(50% - 50vw); padding: 18px 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .lg-tech__track { display: flex; gap: 22px; width: max-content; animation: lg-marquee 44s linear infinite; } .lg-tech__track + .lg-tech__track { margin-top: 22px; } .lg-tech__track--rev { animation-name: lg-marquee-rev; } @keyframes lg-marquee-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } } .lg-tech__marquee:hover .lg-tech__track { animation-play-state: paused; } /* Fixed width because the tiles now sit in a flex marquee track rather than a grid; flex `stretch` keeps every tile in a row the same height. */ .lg-tech__item { display: flex; flex: none; width: clamp(150px, 13vw, 190px); flex-direction: column; align-items: center; gap: 16px; padding: 26px 12px 22px; border: 1px solid #eef1f6; border-radius: 16px; background: #fff; text-align: center; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease; } .lg-tech__item:hover { transform: translateY(-8px); border-color: rgba(23, 102, 252, 0.28); box-shadow: 0 18px 34px rgba(15, 40, 90, 0.12); } .lg-tech__item img { width: 62px; height: 62px; object-fit: contain; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .lg-tech__item:hover img { transform: scale(1.12); } .lg-tech__item span { font-size: 14.5px; font-weight: 600; color: var(--lg-ink); transition: color 0.35s ease; } .lg-tech__item:hover span { color: var(--lg-blue); } /* ============================================================ WHY CHOOSE US ============================================================ */ .lg-why { position: relative; padding: clamp(60px, 7vw, 100px) 0; background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%); overflow: hidden; } .lg-why__decor { position: absolute; top: 120px; z-index: 0; pointer-events: none; } .lg-why__decor--left { left: 0; width: min(19vw, 270px); -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 100%); mask-image: linear-gradient(90deg, #000 55%, transparent 100%); } .lg-why__decor--right { right: 0; width: min(22vw, 320px); -webkit-mask-image: linear-gradient(270deg, #000 60%, transparent 100%); mask-image: linear-gradient(270deg, #000 60%, transparent 100%); } .lg-why__decor img { width: 100%; height: auto; } .lg-why > .container { position: relative; z-index: 1; } .lg-why__grid { /* Fixed card height: both faces are absolutely positioned, so nothing in the grid can shift while a card flips. */ --lg-flip-h: 320px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; } /* ---------- 3D flip card (x-logistic.flip-card) ---------- */ .lg-flip { height: var(--lg-flip-h); perspective: 1200px; } .lg-flip__inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.7s ease-in-out; cursor: pointer; } /* Hover only on real pointer devices — on touch, `:hover` sticks after a tap and would fight the click toggle below. */ @media (hover: hover) { .lg-flip:hover .lg-flip__inner { transform: rotateY(180deg); } } /* Set by the page script on tap / Enter / Space; one card at a time. */ .lg-flip.is-flipped .lg-flip__inner { transform: rotateY(180deg); } .lg-flip__face { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 28px 22px 26px; border: 1px solid var(--lg-line); border-radius: 18px; background: rgba(255, 255, 255, 0.9); -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; transition: border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease; } .lg-flip__back { transform: rotateY(180deg); background: #fff; } /* Subtle highlight while the card is active, on either face. */ .lg-flip:hover .lg-flip__face, .lg-flip.is-flipped .lg-flip__face, .lg-flip__inner:focus-visible .lg-flip__face { border-color: rgba(23, 102, 252, 0.28); background: #fff; box-shadow: 0 22px 44px rgba(15, 40, 90, 0.12); } .lg-flip__inner:focus-visible { outline: none; } .lg-flip__inner:focus-visible .lg-flip__face { outline: 2px solid var(--lg-blue); outline-offset: 3px; } .lg-flip__num { position: absolute; top: 22px; right: 22px; font-size: 15px; font-weight: 700; color: #75a0fc; transition: color 0.35s ease; } .lg-flip:hover .lg-flip__num { color: var(--lg-blue); } .lg-flip__front img { width: 74px; height: 74px; margin-bottom: 16px; } .lg-flip__title { display: block; font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--lg-ink); padding-right: 26px; } .lg-flip__back .lg-flip__title { padding-right: 0; } .lg-flip__text { margin-top: 12px; font-size: 13.5px; line-height: 1.6; color: var(--lg-body); } /* ============================================================ FAQ ============================================================ */ .lg-faq { position: relative; padding: clamp(60px, 7vw, 110px) 0; background: linear-gradient(140deg, #f4f6fd 0%, #eef2fc 45%, #f7f8fd 100%); overflow: hidden; } .lg-faq__layout { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: start; } .lg-faq__title { font-size: clamp(34px, 4.4vw, 64px); line-height: 1.12; font-weight: 800; } .lg-faq__promo { margin-top: clamp(40px, 8vw, 120px); padding: 34px 32px 36px; border-radius: 18px; background: linear-gradient(135deg, #052eb4 0%, #0e4cd7 100%); color: #fff; } .lg-faq__promo h3 { font-size: 21px; font-weight: 700; } .lg-faq__promo p { margin-top: 10px; font-size: 14.5px; color: rgba(255, 255, 255, 0.82); } .lg-faq__promo .lg-btn { margin-top: 26px; } .lg-faq__list { display: grid; gap: 18px; } .lg-faq__item { border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(21, 42, 90, 0.06); overflow: hidden; } .lg-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 30px; font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--lg-ink); cursor: pointer; list-style: none; } .lg-faq__q::-webkit-details-marker { display: none; } /* +/- toggle drawn from two bars so the vertical one can collapse on open */ .lg-faq__mark { position: relative; flex: none; width: 22px; height: 22px; } .lg-faq__mark::before, .lg-faq__mark::after { content: ""; position: absolute; left: 50%; top: 50%; background: #0b1220; transform: translate(-50%, -50%); transition: opacity 0.25s ease; } .lg-faq__mark::before { width: 22px; height: 2px; } .lg-faq__mark::after { width: 2px; height: 22px; } .lg-faq__item[open] .lg-faq__mark::after { opacity: 0; } .lg-faq__a { padding: 0 30px 28px; font-size: 15.5px; line-height: 1.65; color: var(--lg-muted); } /* ============================================================ SCROLL REVEAL ============================================================ */ .lg-anim .lg-reveal { opacity: 0; transform: translateY(26px); } .lg-anim .lg-reveal.is-in { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } @media (prefers-reduced-motion: reduce) { .lg-anim .lg-reveal { opacity: 1; transform: none; } .lg-awards__track, .lg-tech__track, .lg-comp__track { animation: none; } /* Without the scroll animation the rows would only ever show their first few tiles, so each marquee falls back to a plain contained grid and the duplicated tiles are dropped. */ .lg-tech__marquee, .lg-comp__marquee { margin: 0; padding: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; } .lg-tech__track { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); width: auto; } .lg-comp__track { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); width: auto; } .lg-tech__item, .lg-comp__item { width: auto; } .lg-tech__item[aria-hidden="true"], .lg-comp__item[aria-hidden="true"] { display: none; } /* Transitions are off below, so the swap would jump instantly — skip it. */ .lg-btn:hover .lg-btn__label, .lg-btn:focus-visible .lg-btn__label, .lg-btn:hover .lg-btn__icon, .lg-btn:focus-visible .lg-btn__icon { transform: none; } .lg-page * { transition: none !important; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1199.98px) { .lg-proc__grid, .lg-svc__grid, .lg-why__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Wider cards wrap the copy into fewer lines, so the fixed height drops. */ .lg-svc__grid { --lg-svc-h: 320px; } .lg-feat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg-proc__grid { row-gap: 40px; } .lg-feat__decor, .lg-why__decor { display: none; } } @media (max-width: 991.98px) { .lg-hero__grid { grid-template-columns: minmax(0, 1fr); } .lg-hero__phone { display: none; } .lg-hero__stats ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; } .lg-cs__card { grid-template-columns: minmax(0, 1fr); } .lg-faq__layout { grid-template-columns: minmax(0, 1fr); } .lg-faq__promo { margin-top: 34px; } .lg-band::after { display: none; } } @media (max-width: 767.98px) { .lg-proc__grid, .lg-svc__grid, .lg-why__grid, .lg-feat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Wider cards wrap the text into fewer lines, so the fixed face height drops. */ .lg-why__grid { --lg-flip-h: 280px; } .lg-svc__grid { --lg-svc-h: 340px; } .lg-feat__card { grid-template-columns: minmax(0, 1fr); } .lg-page .lg-cs__stats { gap: 18px; } .lg-faq__q { padding: 20px 22px; font-size: 16px; } .lg-faq__a { padding: 0 22px 22px; } } @media (max-width: 575.98px) { .lg-proc__grid, .lg-svc__grid, .lg-why__grid, .lg-feat__grid { grid-template-columns: minmax(0, 1fr); } .lg-why__grid { --lg-flip-h: 230px; } .lg-svc__grid { --lg-svc-h: 300px; } .lg-hero__stats ul { grid-template-columns: minmax(0, 1fr); gap: 22px; } .lg-page .lg-cs__stats { grid-template-columns: minmax(0, 1fr); } .lg-btn { font-size: 15px; padding: 12px 12px 12px 22px; } }