/* * VisionX Home — isolated presentation layer. * All selectors are scoped to vx-home-* so shared GCS widgets retain their * original appearance. Values mirror the preserved 1920px Figma frame and * adapt fluidly at Elementor's desktop, tablet and mobile breakpoints. */ .vx-home-section-widget, .vx-home-section-widget * { box-sizing: border-box; } .vx-home-section-widget { --vx-home-ink: var(--vx-gcs-ink, #030209); --vx-home-soft: #1f1e2b; --vx-home-brand: var(--vx-gcs-accent, #d60048); --vx-home-bright: #ec075d; --vx-home-mint: #56ffb0; --vx-home-content: 1600px; --vx-home-gutter: clamp(24px, 8.333vw, 160px); --vx-home-ease: cubic-bezier(.22, 1, .36, 1); position: relative; width: 100%; margin: 0; font-family: "Montserrat", Arial, sans-serif; color: var(--vx-home-ink); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } .vx-home-section-widget img { display: block; max-width: 100%; height: auto; } .vx-home-section-widget a { color: inherit; } .vx-home-section-widget button { font: inherit; } .vx-home-page-root, .vx-home-page-root > .e-con-inner { width: 100%; max-width: none !important; padding: 0 !important; margin: 0 !important; gap: 0 !important; overflow: hidden; background: #fff; } .vx-home-page-root > .elementor-element, .vx-home-page-root [class*="elementor-widget-visionx_home_"] { width: 100%; max-width: none; margin: 0 !important; } .vx-home-inner { width: min(calc(100% - (2 * var(--vx-home-gutter))), var(--vx-home-content)); margin-inline: auto; } .vx-home-grid-surface { background-color: #fff; background-image: linear-gradient(to right, rgba(210,210,218,.25) 1px, transparent 1px), linear-gradient(to bottom, rgba(210,210,218,.25) 1px, transparent 1px); background-size: 145px 145px; } .vx-home-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .vx-home-kicker { display: flex; align-items: center; gap: 16px; margin: 0 0 20px; color: var(--vx-home-bright); font-size: clamp(15px, 1.25vw, 24px); font-weight: 500; line-height: 1.4; } .vx-home-kicker::before { content: ""; width: 36px; height: 2px; background: currentColor; } .vx-home-kicker--center { justify-content: center; } .vx-home-kicker--light { color: #fff; font-size: 18px; } .vx-home-heading h2 { margin: 0; font-size: clamp(46px, 3.35vw, 64px); line-height: 1; font-weight: 600; letter-spacing: -.035em; } .vx-home-heading--center { text-align: center; } /* Hero */ .vx-home-hero { min-height: 1101px; overflow: hidden; color: #fff; background-color: #030209; background-image: var(--vx-home-atmosphere); background-position: center top; background-repeat: no-repeat; background-size: cover; border-radius: 0 80px 0 0; } .vx-home-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; display: none; opacity: .38; background-image: radial-gradient(circle at 84% 12%, rgba(255,255,255,.2) 1px, transparent 1.8px), repeating-radial-gradient(ellipse at 10% 95%, transparent 0 36px, rgba(67,98,255,.22) 38px 39px, transparent 40px 72px); background-size: 18px 18px, auto; -webkit-mask-image: linear-gradient(120deg, #000, transparent 52%, #000); mask-image: linear-gradient(120deg, #000, transparent 52%, #000); } .vx-home-hero__shell { position: relative; z-index: 1; width: min(calc(100% - 128px), 1440px); max-width: 1440px; min-height: 973px; margin: 64px auto 0; padding: 48px 64px; border: 1px solid rgba(255,255,255,.24); border-radius: 48px; background: linear-gradient(112deg, rgba(255,255,255,.1), rgba(255,255,255,.045)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 24px 70px rgba(0,0,0,.14); -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); } .vx-home-hero__shell::after { content: ""; position: absolute; left: -1px; bottom: -1px; width: 45%; height: 25%; border-left: 1px solid rgba(255,255,255,.32); border-bottom: 1px solid rgba(255,255,255,.32); border-radius: 0 0 0 48px; pointer-events: none; } .vx-home-nav { position: relative; z-index: 8; display: grid; grid-template-columns: 192px minmax(0, 1fr) 210px; align-items: center; gap: 32px; min-height: 64px; } .vx-home-nav__brand { width: 192px; } .vx-home-nav__brand img { width: 100%; } .vx-home-nav__links { display: flex; align-items: center; justify-self: center; gap: clamp(28px, 3vw, 48px); } .vx-home-nav__links a, .vx-home-nav__demo { color: #fff; font-size: 20px; text-decoration: none; opacity: .92; } .vx-home-nav__links a { position: relative; white-space: nowrap; } .vx-home-nav__group { position: relative; } .vx-home-nav__group > button { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: transparent; color: #fff; font: inherit; font-size: 20px; opacity: .92; cursor: pointer; } .vx-home-nav__group > button i { font-size: 14px; font-style: normal; transition: transform .2s; } .vx-home-nav__submenu { position: absolute; z-index: 12; left: 50%; top: calc(100% + 16px); display: none; min-width: 220px; padding: 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 16px; background: rgba(5,4,14,.95); box-shadow: 0 20px 50px rgba(0,0,0,.25); transform: translateX(-50%); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } .vx-home-nav__submenu a { display: block; padding: 10px 12px; border-radius: 10px; font-size: 14px; } .vx-home-nav__submenu a:hover,.vx-home-nav__submenu a:focus-visible { background: rgba(255,255,255,.1); } .vx-home-nav__group:hover .vx-home-nav__submenu,.vx-home-nav__group:focus-within .vx-home-nav__submenu,.vx-home-nav__group.is-open .vx-home-nav__submenu { display: block; } .vx-home-nav__group.is-open > button i { transform: rotate(180deg); } .vx-home-nav__links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 1px; background: var(--vx-home-bright); transition: right .25s; } .vx-home-nav__links a:hover::after, .vx-home-nav__links a:focus-visible::after { right: 0; } .vx-home-nav__demo { justify-self: end; display: inline-flex; align-items: center; gap: 16px; } .vx-home-nav__demo span { text-decoration: underline; text-underline-offset: 3px; } .vx-home-nav__demo i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--vx-home-bright); font-size: 28px; font-style: normal; } .vx-home-nav__toggle { display: none; } .vx-home-hero__content { position: relative; min-height: 760px; } .vx-home-hero__copy { position: relative; z-index: 3; width: min(77.06%, 1011px); margin-left: 0; padding-top: 20px; } .vx-home-hero__eyebrow { display: flex; align-items: center; gap: 16px; margin: 0 0 19px; font-size: 20px; font-weight: 600; } .vx-home-hero__eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--vx-home-bright); } .vx-home-hero__copy h1 { max-width: 1011px; margin: 0; color: #fff; font-size: clamp(64px, 5vw, 96px); font-weight: 400; line-height: 1; letter-spacing: -.045em; } .vx-home-hero__description { max-width: 470.45px; margin: 72px 0 68px 20px; color: #fff; font-size: 24px; line-height: 1.4; } .vx-home-hero__copy > .vx-gcs-button { margin-left: 20px; } .vx-home-hero .vx-gcs-button { min-height: 52px; padding: 16px 24px; font-size: 20px; font-weight: 600; line-height: 1; } .vx-home-hero__media { position: absolute; z-index: 2; right: 1.56%; bottom: -31px; width: min(55.56%, 729px); aspect-ratio: 729/395; overflow: visible; filter: drop-shadow(0 25px 70px rgba(0,0,0,.22)); transition: transform .5s var(--vx-home-ease); } .vx-home-hero__media::before, .vx-home-hero__media::after { content: ""; position: absolute; z-index: -1; inset: -42px 20px 55px -34px; border: 1px solid rgba(255,255,255,.18); border-radius: 46px; background: rgba(42,43,72,.16); box-shadow: 0 30px 90px rgba(0,0,0,.18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .vx-home-hero__media::after { inset: -78px -35px 85px 45px; opacity: .62; } .vx-home-hero__media--image:hover { transform: translateY(-8px) scale(1.005); } .vx-home-hero__media--image img { width: 125%; max-width: none; transform: translate(-3.46%, -26.2%); clip-path: inset(26.2% 16.62% 0 3.46% round 48px); } .vx-home-hero__media--video { overflow: hidden; border-radius: 48px; filter: none; } .vx-home-hero__media--video::before, .vx-home-hero__media--video::after { display: none; } .vx-home-hero__media video { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; } /* Client marquee */ .vx-home-marquee { z-index: 4; height: 147px; overflow: hidden; background: #17171c; } .vx-home-marquee::before, .vx-home-marquee::after { content: ""; position: absolute; z-index: 2; inset-block: 0; width: 12%; pointer-events: none; } .vx-home-marquee::before { left: 0; background: linear-gradient(90deg, #17171c, transparent); } .vx-home-marquee::after { right: 0; background: linear-gradient(-90deg, #17171c, transparent); } .vx-home-marquee__track { display: flex; width: max-content; height: 100%; animation: vx-home-marquee var(--vx-home-marquee-speed, 10s) linear infinite; } .vx-home-marquee__track img { flex: none; width: 1800px; height: 138px; object-fit: cover; } .vx-home-marquee__group { display: flex; flex: none; align-items: center; height: 100%; } .vx-home-marquee__item { display: grid; flex: none; place-items: center; width: 200px; height: 62%; padding: 0 46px; border-right: 1px solid rgba(255,255,255,.22); } .vx-home-marquee__item a { display: grid; width: 100%; height: 100%; place-items: center; } .vx-home-marquee__track--items .vx-home-marquee__item img { width: 100%; height: 100%; object-fit: contain; } .vx-home-marquee:hover .vx-home-marquee__track { animation-play-state: paused; } @keyframes vx-home-marquee { to { transform: translateX(-50%); } } /* Industries / shared accordion Home variant */ .vx-home-use-cases { min-height: 1396px; padding: 182px 0 180px; } .vx-home-use-cases__head { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 20px; align-items: start; } .vx-home-use-cases__head h2 { margin: 0; font-size: clamp(30px, 2.1vw, 40px); line-height: 1.3; font-weight: 500; } .vx-home-use-cases__head > p { max-width: 1067px; margin: 0; font-size: clamp(36px, 2.5vw, 48px); line-height: 1.3; font-weight: 600; letter-spacing: -.03em; } .vx-home-industries { margin-top: 88px; overflow: hidden; border-radius: 48px; background: #fff; } .vx-home-industry { position: relative; background: #fff; transition: background .35s var(--vx-home-ease); } .vx-home-industry:nth-child(odd):not(.is-open) { background: #f5f5f5; } .vx-home-industry h3 { margin: 0; } .vx-home-industry .vx-gcs-accordion__trigger { position: relative; z-index: 2; display: flex; align-items: center; width: 100%; min-height: 114px; padding: 28px 86px; border: 0; border-radius: 48px 48px 0 0; background: transparent; color: var(--vx-home-ink); text-align: left; cursor: pointer; font-size: 28px; font-weight: 500; transition: color .35s var(--vx-home-ease), padding .35s var(--vx-home-ease); } .vx-home-industry .vx-gcs-accordion__trigger > span { min-width: 64px; margin-right: 2px; color: #929292; font-weight: 600; } .vx-home-industry .vx-gcs-accordion__trigger strong { font: inherit; } .vx-home-industry .vx-gcs-accordion__trigger:hover { color: var(--vx-home-brand); } .vx-home-industry.is-open { color: #fff; background: linear-gradient(105deg, #06186c 0%, #050511 36%, #2b061c 65%, #e80b20 100%); } .vx-home-industry.is-open .vx-gcs-accordion__trigger { min-height: 92px; padding-block: 32px 20px; color: #fff; font-size: 32px; font-weight: 600; } .vx-home-industry.is-open .vx-gcs-accordion__trigger::before { content: ""; width: 24px; height: 3px; margin-right: 26px; background: var(--vx-home-bright); } .vx-home-industry.is-open .vx-gcs-accordion__trigger > span { min-width: 52px; color: var(--vx-home-bright); } .vx-home-industry .vx-gcs-accordion__panel { position: relative; min-height: 358px; overflow: hidden; } .vx-home-industry .vx-gcs-accordion__panel[hidden] { display: none; } .vx-home-industry .vx-gcs-accordion__panel > img { position: absolute; z-index: 1; right: -2%; bottom: -4%; width: min(39%, 520px); max-height: 100%; object-fit: contain; object-position: right bottom; filter: drop-shadow(0 22px 26px rgba(0,0,0,.18)); } .vx-home-industry__message { position: relative; z-index: 2; width: 70%; padding: 46px 90px 72px 150px; } .vx-home-industry__message i { position: absolute; left: 87px; top: 35px; color: #73758d; font-family: Georgia, serif; font-size: 72px; line-height: 1; font-style: normal; } .vx-home-industry__message p { max-width: 800px; margin: 0 0 34px; color: #fff; font-size: clamp(34px, 2.5vw, 48px); line-height: 1.28; font-weight: 400; letter-spacing: -.025em; } /* Why VisionX */ .vx-home-why { height: 1504px; margin-top: -24px; margin-bottom: 0; overflow: hidden; background: #fff; } .vx-home-why > .vx-home-inner { position: relative; height: 100%; } .vx-home-why .vx-home-heading { position: relative; z-index: 6; padding-top: 88px; } .vx-home-why__system { position: absolute; inset: 0; height: 1504px; } .vx-home-why__connectors { position: absolute; z-index: 0; left: 358px; top: 375px; width: 895px; height: 753px; max-width: none !important; pointer-events: none; } .vx-home-why-card { --vx-home-why-hover-lift: 0px; position: absolute; z-index: 1; overflow: hidden; border: 1px solid rgba(43,48,58,.04); background: linear-gradient(225deg, #f1f1f1 27.8%, #fff 31.8%); transform-origin: center; transition: background .38s ease, transform .38s var(--vx-home-ease); } .vx-home-why-card:hover, .vx-home-why-card:focus-within { z-index: 5; box-shadow: 0 24px 70px rgba(4,8,35,.22) !important; transform: translateY(var(--vx-home-why-hover-lift)); } .vx-home-why-card::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.75), transparent 42%); transition: opacity .38s ease; } .vx-home-why-card:hover::after, .vx-home-why-card:focus-within::after { opacity: 0; } .vx-home-why-card--own:hover, .vx-home-why-card--own:focus-within { background: radial-gradient(85% 95% at 0% 100%, rgba(0,66,220,.98) 0%, rgba(2,34,122,.7) 28%, transparent 66%), radial-gradient(85% 95% at 100% 0%, rgba(228,0,76,.96) 0%, rgba(101,0,42,.55) 34%, transparent 70%), #03020a; } .vx-home-why-card--fast:hover, .vx-home-why-card--fast:focus-within { background: radial-gradient(80% 95% at 0% 100%, rgba(186,0,61,.9) 0%, rgba(82,0,48,.56) 35%, transparent 72%), radial-gradient(75% 90% at 100% 0%, rgba(215,0,72,.76) 0%, transparent 65%), #03020a; } .vx-home-why-card--enterprise:hover, .vx-home-why-card--enterprise:focus-within { background: radial-gradient(85% 95% at 0% 100%, rgba(0,57,194,.95) 0%, rgba(4,24,98,.68) 34%, transparent 70%), radial-gradient(85% 95% at 100% 0%, rgba(221,0,74,.82) 0%, transparent 66%), #03020a; } .vx-home-why-card--cost:hover, .vx-home-why-card--cost:focus-within { background: radial-gradient(95% 100% at 100% 100%, rgba(205,0,57,.98) 0%, rgba(93,0,39,.62) 34%, transparent 68%), radial-gradient(75% 90% at 0% 100%, rgba(0,55,190,.92) 0%, transparent 66%), #03020a; } .vx-home-why-card:hover h3, .vx-home-why-card:hover p, .vx-home-why-card:focus-within h3, .vx-home-why-card:focus-within p { color: #fff; } .vx-home-why-card--own { left: 5px; top: 243px; width: 569px; height: 400px; border-radius: 48px 0 0; } .vx-home-why-card--fast { left: 1066px; top: 243px; width: 534px; height: 372px; border-radius: 0 48px 0 0; } .vx-home-why-card--enterprise { left: 0; top: 945px; width: 574px; height: 400px; border-radius: 0 0 0 48px; } .vx-home-why-card--cost { left: 1066px; top: 945px; width: 534px; height: 400px; border-radius: 0 0 48px; } .vx-home-why-card > div { position: absolute; z-index: 3; } .vx-home-why-card h3 { margin: 0 0 8px; font-size: 32px; line-height: 1.2; font-weight: 600; } .vx-home-why-card p { margin: 0; font-size: 28px; line-height: 1.4; } .vx-home-why-card--own > div { top: 55px; right: 32px; width: 276px; } .vx-home-why-card--fast > div { top: 61px; right: 51px; width: 220px; text-align: right; } .vx-home-why-card--enterprise > div { left: 34px; bottom: 27px; width: 348px; } .vx-home-why-card--cost > div { right: 30px; bottom: 29px; width: 397px; text-align: right; } .vx-home-why-card > img { position: absolute; z-index: 1; max-width: none !important; pointer-events: none; transition: transform .42s cubic-bezier(.2,.8,.2,1), filter .38s; } .vx-home-why-card--own:hover > img, .vx-home-why-card--own:focus-within > img { transform: translate(4%, -2%) scale(1.08) !important; } .vx-home-why-card--fast:hover > img, .vx-home-why-card--fast:focus-within > img { transform: translate(-3%, 5%) rotate(-3deg) scale(1.07) !important; } .vx-home-why-card--enterprise:hover > img, .vx-home-why-card--enterprise:focus-within > img { transform: translate(3%, -4%) rotate(-4deg) scale(1.08) !important; } .vx-home-why-card--cost:hover > img, .vx-home-why-card--cost:focus-within > img { transform: translate(-3%, 3%) rotate(4deg) scale(1.08) !important; } .vx-home-why-card--own > img { left: 33px; top: 55px; width: 777px; } .vx-home-why-card--fast > img { left: -244px; top: -21px; width: 679px; } .vx-home-why-card--enterprise > img { left: 1px; top: -181px; width: 871px; } .vx-home-why-card--cost > img { left: -351px; top: -209px; width: 914px; } .vx-home-orbit { position: absolute; z-index: 4; left: 537px; top: 527px; width: 535px; aspect-ratio: 1; border-radius: 50%; } .vx-home-orbit__spinner { position: absolute; inset: 0; border-radius: 50%; transform-origin: center; animation: vx-home-orbit-spin 26s linear infinite; will-change: transform; } .vx-home-orbit__rings { position: absolute; inset: 0; border-radius: 50%; } .vx-home-orbit__rings::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: conic-gradient(from -38deg, transparent 0 8%, #ea075a 8.2% 8.9%, transparent 9.1% 36%, #061b78 36.2% 37%, transparent 37.2% 61%, #ea075a 61.2% 62%, transparent 62.2% 88%, #061b78 88.2% 89%, transparent 89.2%); -webkit-mask: radial-gradient(circle, transparent 0 69%, #000 69.3% 70.2%, transparent 70.5%); mask: radial-gradient(circle, transparent 0 69%, #000 69.3% 70.2%, transparent 70.5%); } .vx-home-orbit__rings i { position: absolute; border-radius: 50%; border: 1px dashed rgba(75,75,82,.18); } .vx-home-orbit__rings i:nth-child(1) { inset: 0; background: linear-gradient(145deg, rgba(240,205,218,.58), rgba(230,240,243,.35)); } .vx-home-orbit__rings i:nth-child(2) { inset: 10.5%; background: rgba(255,255,255,.88); } .vx-home-orbit__rings i:nth-child(3) { inset: 20.9%; background: linear-gradient(145deg, #f1f5fd, #fff); } .vx-home-orbit::before { content: ""; position: absolute; z-index: 3; inset: 31.4%; overflow: hidden; border-radius: 50%; background: var(--vx-home-orb) center / cover; box-shadow: 0 18px 45px rgba(3,2,9,.2); } .vx-home-orbit::after { content: ""; position: absolute; z-index: 3; inset: 31.4%; border-radius: 50%; background: linear-gradient(180deg, transparent 62%, rgba(3,2,9,.72)); } .vx-home-orbit > strong { position: absolute; z-index: 5; inset: 31.4%; display: grid; place-items: center; color: #fff; font-size: 32px; line-height: 1; text-align: center; } .vx-home-orbit__label { position: absolute; z-index: 6; max-width: none !important; height: auto; mix-blend-mode: multiply; pointer-events: none; } .vx-home-orbit__label--assets { left: 22%; top: 2%; width: 42.1%; } .vx-home-orbit__label--agents { left: 53.5%; top: 14.2%; width: 35.9%; } .vx-home-orbit__label--experts { left: 20.7%; top: 16.8%; width: 38.3%; } @keyframes vx-home-orbit-spin { to { transform: rotate(360deg); } } /* Offerings — Home split variant */ .vx-home-offerings { display: grid; grid-template-columns: 56.25% 43.75%; min-height: 1100px; background: #fff; } .vx-home-offerings__feature { position: relative; min-height: 1100px; overflow: hidden; background: #f9f9f9; } .vx-home-offerings__feature > div { position: absolute; z-index: 2; left: max(14.8148%, calc((100vw - var(--vx-home-content)) / 2)); top: 189px; width: min(70.3704%, 760px); } .vx-home-offerings__feature h2 { margin: 0; font-size: clamp(52px, 4.1667vw, 80px); font-weight: 600; line-height: 1; letter-spacing: -.03em; } .vx-home-offerings__feature > img { position: absolute; left: 0; bottom: 0; width: 100%; height: 500px; max-width: none !important; border-radius: 0 48px 0 0; object-fit: cover; } .vx-home-offerings__list { display: flex; flex-direction: column; justify-content: flex-start; gap: 0; min-height: 1100px; padding: 10px 0 7px; overflow: hidden; background: #fff; } .vx-home-offering { position: relative; display: grid; flex: 0 0 360px; grid-template-columns: 280px minmax(0, 1fr); height: 360px; overflow: hidden; } .vx-home-offering:not(:last-child)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(3,2,9,.1); } .vx-home-offering > span { position: relative; z-index: 0; left: -12px; top: 38px; display: block; align-self: start; color: #e4e4e4; font-size: 200px; font-weight: 300; line-height: 1; letter-spacing: -.08em; white-space: nowrap; pointer-events: none; } .vx-home-offering > div { position: relative; z-index: 1; min-width: 0; padding: 95px 48px 40px 8px; } .vx-home-offering h3 { margin: 0; font-size: 32px; font-weight: 600; line-height: 1.15; letter-spacing: 0; } .vx-home-offering p { margin: 18px 0 0; font-size: 28px; line-height: 1.4; } .vx-home-offering a { color: var(--vx-home-bright); font-size: 24px; font-weight: 600; text-underline-offset: 4px; } .vx-home-offering p + a, .vx-home-offering h3 + a { display: inline-block; margin-top: 20px; } /* Modalities */ .vx-home-section-widget.vx-home-modalities { min-height: 1570px; overflow: hidden; padding: 130px 0 165px; padding-block: 130px 165px; } .vx-home-modalities__grid { display: flex; gap: 24px; width: calc(100vw - var(--vx-home-gutter)); margin-top: 80px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .vx-home-modalities__grid::-webkit-scrollbar { display: none; } .vx-home-modality-card { position: relative; flex: 0 0 min(519px, calc((100vw - (2 * var(--vx-home-gutter)) - 48px) / 3)); aspect-ratio: 1.038/1; overflow: hidden; border-radius: 48px; background: #f3f3f5; scroll-snap-align: start; transition: transform .35s var(--vx-home-ease), box-shadow .35s var(--vx-home-ease); } .vx-home-modality-card:hover { transform: translateY(-8px); box-shadow: 0 28px 65px rgba(3,2,9,.12); } .vx-home-modality-card > img { position: absolute; left: 0; top: 54px; width: 240px; height: 160px; object-fit: cover; } .vx-home-modality-card > div { position: absolute; z-index: 2; left: 48px; right: 48px; top: 276px; } .vx-home-modality-card h3 { margin: 0; font-size: 30px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; } .vx-home-modality-card p { margin: 12px 0 0; color: rgba(3,2,9,.7); font-size: 26px; line-height: 1.4; } .vx-home-modality-card a { display: inline-block; margin-top: 20px; color: var(--vx-home-bright); font-size: 24px; font-weight: 600; text-underline-offset: 4px; } /* Deployment */ .vx-home-section-widget.vx-home-deployment { z-index: 2; width: min(calc(100% - (2 * var(--vx-home-gutter))), var(--vx-home-content)); height: 900px; margin-inline: auto; padding: 0; padding-block: 0; overflow: hidden; border-radius: 56px; color: #fff; background-color: #030209 !important; background-image: radial-gradient(circle at 16% 78%, rgba(102,0,42,.32), transparent 37%), radial-gradient(circle at 84% 18%, rgba(8,28,127,.42), transparent 43%) !important; } .vx-home-deployment::before { content: ""; position: absolute; inset: 0; opacity: .14; background: var(--vx-home-particles) center / cover no-repeat; transform: scaleY(-1); } .vx-home-deployment::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 192px; background: linear-gradient(180deg, rgba(16,2,13,0), #10020d); } .vx-home-deployment__world { position: absolute; z-index: 0; left: calc(50% - 960px); top: 312px; width: 1920px; height: 1523px !important; max-width: none !important; object-fit: cover; opacity: .82; pointer-events: none; } .vx-home-deployment__head { position: absolute; z-index: 3; left: 50%; top: 50px; width: min(90%, 760px); transform: translateX(-50%); text-align: center; } .vx-home-deployment__head h2 { margin: 0; color: #fff; font-size: 64px; font-weight: 600; line-height: 1; letter-spacing: -.03em; } .vx-home-deployment__grid { position: absolute; z-index: 3; left: 50%; top: 260px; display: grid; grid-template-columns: repeat(3, minmax(0, 427px)); gap: 23px; width: min(1327px, calc(100% - 96px)); transform: translateX(-50%); } .vx-home-deploy-card { position: relative; height: 550px; padding: 56px clamp(28px, 2.4vw, 46px) 38px; overflow: hidden; border: 2px solid rgba(255,255,255,.28); border-radius: 32px; background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0)); -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px); } .vx-home-deploy-card > img { width: 40px; height: 40px; object-fit: contain; margin-bottom: 40px; } .vx-home-deploy-card h3 { margin: 0 0 12px; color: #fff; font-size: clamp(36px, 2.604vw, 50px); font-weight: 600; line-height: 1; letter-spacing: -.03em; } .vx-home-deploy-card > p { margin: 0; color: #a1a0a4; font-size: clamp(20px, 1.458vw, 28px); font-weight: 300; line-height: 1.4; } .vx-home-deploy-card__meters { position: absolute; left: clamp(28px, 2.4vw, 46px); right: clamp(28px, 2.4vw, 46px); bottom: 38px; display: flex; flex-direction: column; gap: 12px; } .vx-home-meter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(84px, 140px); align-items: center; gap: 8px; min-height: 18px; color: #fff; font-size: clamp(13px, .9375vw, 18px); font-weight: 500; line-height: 1; } .vx-home-meter > span { min-width: 0; white-space: nowrap; } .vx-home-meter > i { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; width: 100%; height: 12px; overflow: hidden; border-radius: 24px; } .vx-home-meter b { height: 12px; background: #9a9a9a; opacity: .55; } .vx-home-meter b.is-on { background: var(--vx-home-mint); opacity: 1; } /* Production proof */ .vx-home-proof { z-index: 1; min-height: 612px; margin-top: -1px; padding: 48px var(--vx-home-gutter); overflow: hidden; border-radius: 80px; background: #f9f9f9; } .vx-home-proof__head { max-width: 1600px; margin: 0 auto; text-align: center; } .vx-home-proof__head h2 { margin: 0; font-size: 64px; font-weight: 600; line-height: 1; letter-spacing: -.03em; } .vx-home-proof__head p { max-width: 863px; margin: 18px auto 0; font-size: 24px; font-weight: 500; line-height: 1.4; letter-spacing: -.04em; } .vx-home-proof__metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1600px; margin: 57px auto 0; } .vx-home-proof__metrics article { position: relative; display: flex; min-width: 0; min-height: 205px; flex-direction: column; gap: 18px; padding: 18px 48px; white-space: normal; } .vx-home-proof__metrics article:not(:last-child)::after { content: ""; position: absolute; top: 0; right: 0; width: 1px; height: 127px; background: rgba(3,2,9,.12); } .vx-home-proof__metrics strong { color: var(--vx-home-brand); font-size: 40px; font-weight: 600; line-height: 1; letter-spacing: -.04em; } .vx-home-proof__metrics span { font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -.04em; } @media (min-width: 1180px) { .vx-home-modalities > .vx-home-inner { width: 1200px; max-width: 1200px; } .vx-home-modalities__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; width: 100%; margin-top: 124px; overflow: visible; scroll-snap-type: none; } .vx-home-modality-card { width: auto; height: 500px; aspect-ratio: auto; } .vx-home-page-root .vx-gcs-footer { min-height: 700px; margin-top: -126px; padding: 120px 160px 40px; } .vx-home-page-root .vx-gcs-footer .vx-gcs-inner { width: 1600px; max-width: 1600px; padding: 10px; } .vx-home-page-root .vx-gcs-footer__top { grid-template-columns: 409px minmax(0, 1fr); gap: 70px; min-height: 314px; padding: 10px; } .vx-home-page-root .vx-gcs-footer__brand { padding: 10px; } .vx-home-page-root .vx-gcs-footer__logo { width: 190px; } .vx-home-page-root .vx-gcs-footer__brand > p { max-width: 389px; margin: 22px 0 0; font-size: 22px; line-height: 1.35; } .vx-home-page-root .vx-gcs-footer__certs { gap: 22px; margin-top: 22px; padding-left: 10px; } .vx-home-page-root .vx-gcs-footer__certs img:first-child { width: 90px; height: 87px; } .vx-home-page-root .vx-gcs-footer__certs img:last-child { width: 90px; height: 63px; } .vx-home-page-root .vx-gcs-footer__links { grid-template-columns: 384px 384px minmax(0, 1fr); gap: 50px; padding: 10px; } .vx-home-page-root .vx-gcs-footer__links h3 { margin: 0 0 20px; font-size: 20px; line-height: 1; } .vx-home-page-root .vx-gcs-footer__links div div { font-size: 17px; line-height: 2; } .vx-home-page-root .vx-gcs-footer__bottom { margin-top: 90px; padding: 25px 10px 10px; font-size: 14px; line-height: 1.5; } } /* Scale the exact 1600px Why composition on smaller desktop screens. */ @media (min-width: 1180px) and (max-width: 1919px) { .vx-home-why { --vx-why-width: calc(100vw - (2 * var(--vx-home-gutter))); --vx-why-scale: calc(var(--vx-why-width) / 1600px); height: 78.334vw; margin-top: -24px; margin-bottom: 0; } .vx-home-why > .vx-home-inner { left: 50%; width: 1600px; max-width: none; height: 1504px; margin-left: -800px; transform: scale(var(--vx-why-scale)); transform-origin: top center; } } @media (min-width: 1180px) and (max-width: 1500px) { .vx-home-deployment__grid { width: calc(100% - 96px); grid-template-columns: repeat(3, minmax(0, 1fr)); } .vx-home-deploy-card { padding-inline: 28px; } .vx-home-deploy-card h3 { font-size: 40px; } .vx-home-deploy-card > p { font-size: 18px; } .vx-home-deploy-card__meters { left: 28px; right: 28px; } .vx-home-meter { grid-template-columns: minmax(0, 1fr) minmax(84px, 112px); font-size: clamp(12px, 1.05vw, 14px); } .vx-home-meter > i { width: 100%; gap: 3px; } } /* Preserve the source homepage's fluid desktop hero on smaller laptops. */ @media (min-width: 1025px) and (max-width: 1599px) { .vx-home-hero { min-height: 0; height: auto; padding: min(3.333vw, 64px); } .vx-home-hero__shell { width: min(calc(100% - 64px), 1440px); min-height: min(973px, calc(30.38vw + 389.7px)); margin: 0 auto; } .vx-home-hero__content { min-height: min(760px, calc(30.106vw + 182px)); } .vx-home-hero__copy { width: min(77.06%, calc(32.13vw + 394px), 1011px); } .vx-home-hero__description { width: min(470.45px, calc(12.18vw + 236.6px)); } .vx-home-hero__media { right: 1.78%; width: min(55.2%, 729px); height: 395px; aspect-ratio: auto; } } @media (max-width: 1180px) { .vx-home-section-widget { --vx-home-gutter: 52px; } .vx-home-industry .vx-gcs-accordion__trigger { padding-inline: 48px; } .vx-home-industry__message { padding-left: 108px; } .vx-home-industry__message i { left: 48px; } .vx-home-why { height: auto; margin: 0; padding: 100px 0; } .vx-home-why .vx-home-heading { padding-top: 0; } .vx-home-why__system { position: relative; inset: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "own fast" "orbit orbit" "enterprise cost"; gap: 20px; height: auto; margin-top: 60px; } .vx-home-why__connectors { display: none; } .vx-home-why-card { position: relative; inset: auto; width: auto; height: 360px; border-radius: 36px; } .vx-home-why-card--own { grid-area: own; } .vx-home-why-card--fast { grid-area: fast; } .vx-home-why-card--enterprise { grid-area: enterprise; } .vx-home-why-card--cost { grid-area: cost; } .vx-home-why-card h3 { font-size: 27px; } .vx-home-why-card p { font-size: 21px; } .vx-home-orbit { position: relative; grid-area: orbit; justify-self: center; left: auto; top: auto; width: min(535px, 70vw); margin: 35px 0; } .vx-home-offerings { grid-template-columns: 1fr; } .vx-home-offerings__feature { min-height: 840px; } .vx-home-offerings__feature > div { left: var(--vx-home-gutter); top: 100px; width: calc(100% - (2 * var(--vx-home-gutter))); } .vx-home-offerings__list { gap: 72px; min-height: auto; padding: 72px var(--vx-home-gutter); } .vx-home-offering { display: grid; flex: none; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; height: auto; min-height: 240px; overflow: hidden; } .vx-home-offering > span { position: static; align-self: center; font-size: 120px; line-height: 1; } .vx-home-offering > div { padding: 0; } .vx-home-offering:not(:last-child)::after { left: 160px; bottom: -36px; } .vx-home-section-widget.vx-home-modalities { min-height: auto; padding: 160px 0; padding-block: 160px; } .vx-home-modalities__grid { width: calc(100vw - var(--vx-home-gutter)); } .vx-home-modality-card { flex-basis: min(480px, calc(100vw - (2 * var(--vx-home-gutter)))); height: 500px; aspect-ratio: auto; } .vx-home-section-widget.vx-home-deployment { width: calc(100% - (2 * var(--vx-home-gutter))); height: auto; padding: 100px 52px; padding-block: 100px; border-radius: 48px; } .vx-home-deployment__world { left: -30%; top: 22%; width: 160%; height: 90% !important; } .vx-home-deployment__head { position: relative; left: auto; top: auto; width: min(100%, 760px); margin: 0 auto; transform: none; } .vx-home-deployment__head h2 { font-size: 56px; } .vx-home-deployment__grid { position: relative; left: auto; top: auto; grid-template-columns: 1fr; gap: 22px; margin-top: 72px; transform: none; } .vx-home-deploy-card { height: 500px; } .vx-home-deploy-card > p { max-width: 520px; } .vx-home-proof { padding: 130px 52px; border-radius: 48px; } .vx-home-proof__head h2 { font-size: 56px; } .vx-home-proof__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vx-home-proof__metrics article { padding: 34px; white-space: normal; } .vx-home-proof__metrics article:nth-child(odd) { border-right: 1px solid rgba(3,2,9,.12); } .vx-home-proof__metrics article:nth-child(-n+2) { border-bottom: 1px solid rgba(3,2,9,.12); } .vx-home-proof__metrics article::after { display: none; } } @media (min-width: 768px) and (max-width: 1024px) { .vx-home-hero { min-height: 0; height: auto; padding: 16px; border-radius: 0 36px 0 0; } .vx-home-hero__shell { width: calc(100% - 64px); min-height: 0; height: auto; margin: 0 32px; padding: 0 32px 54px; border-radius: 32px; overflow: hidden; } .vx-home-hero__shell::after { display: none; } .vx-home-nav { grid-template-columns: 150px minmax(0, 1fr) 170px; gap: 0; min-height: 96px; } .vx-home-nav__brand { width: 142px; } .vx-home-nav__toggle, .vx-home-nav__links { display: none !important; } .vx-home-nav__demo { display: inline-flex; grid-column: 3; justify-self: end; width: 164px; gap: 12px; font-size: 18px; } .vx-home-nav__demo i { width: 48px; height: 48px; font-size: 25px; } .vx-home-hero__content { min-height: 0; padding-bottom: 0; } .vx-home-hero__copy { width: 100%; margin: 0; padding-top: 38px; } .vx-home-hero__eyebrow { margin: 0 0 24px; font-size: 18px; } .vx-home-hero__copy h1 { max-width: 760px; font-size: clamp(52px, 7.2vw, 68px); font-weight: 400; line-height: .98; letter-spacing: -.045em; } .vx-home-hero__description { max-width: 510px; margin: 26px 0 28px; font-size: 18px; line-height: 1.45; } .vx-home-hero__copy > .vx-gcs-button { margin-left: 0; } .vx-home-hero__media { display: none; } } @media (max-width: 767px) { .vx-home-section-widget { --vx-home-gutter: 22px; } .vx-home-hero { min-height: 0; height: auto; padding: 8px; border-radius: 0 28px 0 0; } .vx-home-hero__shell { width: calc(100% - 24px); min-height: 0; height: auto; margin: 0 12px; padding: 0 20px 40px; border-radius: 24px; overflow: hidden; } .vx-home-hero__shell::after { display: none; } .vx-home-nav { grid-template-columns: 112px minmax(0, 1fr) 138px; gap: 0; min-height: 80px; } .vx-home-nav__brand { width: 108px; } .vx-home-nav__toggle, .vx-home-nav__links { display: none !important; } .vx-home-nav__demo { display: inline-flex; grid-column: 3; justify-self: end; justify-content: flex-end; width: 132px; gap: 8px; font-size: 14px; } .vx-home-nav__demo i { width: 36px; height: 36px; font-size: 19px; } .vx-home-hero__content { min-height: 0; padding-bottom: 20px; } .vx-home-hero__copy { width: 100%; margin: 0; padding-top: 26px; } .vx-home-hero__eyebrow { margin: 0 0 20px; font-size: 15px; line-height: 1.3; } .vx-home-hero__copy h1 { font-size: clamp(38px, 11.2vw, 48px); font-weight: 400; line-height: .98; letter-spacing: -.04em; } .vx-home-hero__description { width: calc(100% - 40px); max-width: none; margin: 42px 20px 45px; font-size: 16px; line-height: 1.45; } .vx-home-hero__copy > .vx-gcs-button { margin-left: 20px; } .vx-home-hero .vx-gcs-button { min-height: 52px; padding: 16px 24px; font-size: 20px; font-weight: 600; } .vx-home-hero__media { display: none; } .vx-home-marquee { height: 88px; } .vx-home-marquee__track img { width: 1148px; height: 88px; } .vx-home-marquee__item { width: 120px; padding: 0 28px; } .vx-home-use-cases { min-height: auto; padding: 50px 0 50px; } .vx-home-use-cases__head { grid-template-columns: 1fr; gap: 40px; } .vx-home-use-cases__head h2 { font-size: 27px; } .vx-home-use-cases__head > p { font-size: 30px; line-height: 1.2; } .vx-home-industries { margin-top: 52px; border-radius: 28px; } .vx-home-industry .vx-gcs-accordion__trigger { min-height: 78px; padding: 20px 22px; border-radius: 28px 28px 0 0; font-size: 17px; line-height: 1.3; } .vx-home-industry .vx-gcs-accordion__trigger > span { min-width: 42px; } .vx-home-industry.is-open .vx-gcs-accordion__trigger { min-height: 74px; padding: 22px; font-size: 18px; } .vx-home-industry.is-open .vx-gcs-accordion__trigger::before { width: 16px; margin-right: 12px; } .vx-home-industry.is-open .vx-gcs-accordion__trigger > span { min-width: 38px; } .vx-home-industry .vx-gcs-accordion__panel { min-height: 475px; } .vx-home-industry__message { width: 100%; padding: 28px 24px 238px 54px; } .vx-home-industry__message i { left: 22px; top: 18px; font-size: 48px; } .vx-home-industry__message p { margin-bottom: 24px; font-size: 26px; } .vx-home-industry .vx-gcs-accordion__panel > img { right: 0; bottom: -2%; width: 78%; max-height: 245px; } .vx-home-why { padding: 10px 0 0; } .vx-home-why > .vx-home-inner { width: calc(100% - 40px); } .vx-home-heading h2 { font-size: 42px; } .vx-home-why__system { grid-template-columns: 1fr; grid-template-areas: "orbit" "own" "fast" "enterprise" "cost"; gap: 16px; margin-top: 24px; } .vx-home-orbit { width: min(260px, 76vw); margin: 0 0 24px; } .vx-home-orbit > strong { font-size: 22px; } .vx-home-why-card { min-height: 244px; height: 244px; border-radius: 0 30px 0 30px; } .vx-home-why-card > div { width: auto !important; } .vx-home-why-card h3 { font-size: 20px; line-height: 1.2; } .vx-home-why-card p { max-width: none; font-size: 16px; line-height: 1.4; } .vx-home-why-card--own > div { inset: 28px 164px auto 16px !important; text-align: left !important; } .vx-home-why-card--fast > div { inset: 28px 16px auto 172px !important; text-align: right !important; } .vx-home-why-card--enterprise > div { inset: 120px 130px auto 16px !important; text-align: left !important; } .vx-home-why-card--cost > div { inset: 108px 16px auto 172px !important; text-align: right !important; } .vx-home-why-card--own > img { left: 1px; top: 79px; width: 462px; } .vx-home-why-card--fast > img { left: -174px; top: 11px; width: 400px; } .vx-home-why-card--enterprise > img { left: -20px; top: -104px; width: 512px; } .vx-home-why-card--cost > img { left: -213px; top: -137px; width: 512px; } .vx-home-offerings { display: block; } .vx-home-offerings__feature { min-height: 760px; } .vx-home-offerings__feature > div { left: 22px; top: 92px; width: calc(100% - 44px); } .vx-home-offerings__feature h2 { font-size: 48px; } .vx-home-offerings__feature > img { height: 320px; object-position: center bottom; } .vx-home-offerings__list { gap: 48px; padding: 52px 22px; } .vx-home-offering { grid-template-columns: 92px minmax(0, 1fr); gap: 18px; min-height: 160px; } .vx-home-offering:not(:last-child)::after { left: 92px; bottom: -24px; } .vx-home-offering > span { align-self: start; height: auto; margin: 8px 0 0 -8px; font-size: 76px; } .vx-home-offering h3 { font-size: 23px; } .vx-home-offering p { font-size: 18px; } .vx-home-offering a { font-size: 17px; } .vx-home-section-widget.vx-home-modalities { padding: 40px 0; padding-block: 40px; } .vx-home-modalities__grid { gap: 16px; width: calc(100vw - var(--vx-home-gutter)); margin-top: 45px; } .vx-home-modality-card { flex-basis: calc(100vw - 64px); height: 337px; border-radius: 28px; } .vx-home-modality-card > img { top: 25px; width: 130px; height: 100px; } .vx-home-modality-card > div { left: 31px; right: 31px; top: 125px; bottom: auto; } .vx-home-modality-card h3 { font-size: 20px; } .vx-home-modality-card p { margin-top: 10px; font-size: 16px; width: 65%} .vx-home-modality-card a { margin-top: 20px; font-size: 16px; } .vx-home-section-widget.vx-home-deployment { padding: 72px 22px; padding-block: 72px; border-radius: 32px; } .vx-home-deployment__head h2 { font-size: 42px; } .vx-home-deployment__grid { gap: 16px; margin-top: 48px; } .vx-home-deploy-card { height: 450px; padding: 28px 24px; border-radius: 24px; } .vx-home-deploy-card > img { width: 34px; height: 34px; margin-bottom: 24px; } .vx-home-deploy-card h3 { font-size: 34px; } .vx-home-deploy-card > p { font-size: 18px; } .vx-home-deploy-card__meters { left: 24px; right: 24px; bottom: 28px; gap: 6px; } .vx-home-meter { grid-template-columns: minmax(0, 1fr) 140px; gap: 12px; min-height: 28px; font-size: 13px; line-height: .95; } .vx-home-meter > i { height: 9px; gap: 3px; } .vx-home-meter b { height: 9px; } .vx-home-proof { min-height: auto; padding: 72px 24px; border-radius: 32px; } .vx-home-proof__head h2 { font-size: 40px; line-height: 1.05; } .vx-home-proof__head p { font-size: 16px; line-height: 1.5; letter-spacing: 0; } .vx-home-proof__metrics { grid-template-columns: repeat(2, 1fr); margin-top: 44px; } .vx-home-proof__metrics article { gap: 8px; padding: 22px 10px; } .vx-home-proof__metrics strong { font-size: 34px; } .vx-home-proof__metrics span { font-size: 12px; letter-spacing: 0; } } @media (max-width: 900px) { .vx-home-why-card { box-shadow: none; } .vx-home-why-card > img { transition: none; } .vx-home-why-card::after { opacity: 0; } .vx-home-why-card--own { background: radial-gradient(85% 95% at 0% 100%, rgba(0,66,220,.98) 0%, rgba(2,34,122,.7) 28%, transparent 66%), radial-gradient(85% 95% at 100% 0%, rgba(228,0,76,.96) 0%, rgba(101,0,42,.55) 34%, transparent 70%), #03020a; } .vx-home-why-card--fast { background: radial-gradient(80% 95% at 0% 100%, rgba(186,0,61,.9) 0%, rgba(82,0,48,.56) 35%, transparent 72%), radial-gradient(75% 90% at 100% 0%, rgba(215,0,72,.76) 0%, transparent 65%), #03020a; } .vx-home-why-card--enterprise { background: radial-gradient(85% 95% at 0% 100%, rgba(0,57,194,.95) 0%, rgba(4,24,98,.68) 34%, transparent 70%), radial-gradient(85% 95% at 100% 0%, rgba(221,0,74,.82) 0%, transparent 66%), #03020a; } .vx-home-why-card--cost { background: radial-gradient(95% 100% at 100% 100%, rgba(205,0,57,.98) 0%, rgba(93,0,39,.62) 34%, transparent 68%), radial-gradient(75% 90% at 0% 100%, rgba(0,55,190,.92) 0%, transparent 66%), #03020a; } .vx-home-why-card h3, .vx-home-why-card p { color: #fff; } } @media (prefers-reduced-motion: reduce) { .vx-home-section-widget *, .vx-home-section-widget *::before, .vx-home-section-widget *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ===== Why VisionX — Figma-exact desktop layer (appended) ===== */ /* ========================================================================== Why VisionX — "Maximum speed & value" Figma: c6Sxp7eNcEuWtOxg9JDC7u › Home – 1440 › node 2877:6007 Figma section is 1200 wide; the live container is 1280 → every value below is the Figma value x 1.0666667. Locked in px so nothing rescales on viewports wider than 1440. The 4x #why-visionx prefix is deliberate: it outranks the stacked "PIXEL POLISH V2..V7" layers still sitting in the Elementor page CSS. Once those are deleted this can drop to a single #why-visionx. ========================================================================== */ @media (min-width: 1025px) { /* the design pixel: exactly 1px at >=1440, linear shrink below, so the whole fixed-proportion 1440 composition scales instead of reflowing. Floor 1025 because the plugin tablet CSS owns <=1024. */ #why-visionx#why-visionx#why-visionx#why-visionx { --u: min(1px, calc(100vw / 1440)) !important; } /* -- container ---------------------------------------------------------- */ #why-visionx#why-visionx#why-visionx#why-visionx .e-con-inner { width: calc(var(--u) * 1280) !important; max-width: calc(var(--u) * 1280) !important; margin-inline: auto !important; padding-inline: 0 !important; } /* -- heading ------------------------------------------------------------ */ #why-visionx#why-visionx#why-visionx#why-visionx .vx-eyebrow { margin: 0 !important; padding: 0 !important; } #why-visionx#why-visionx#why-visionx#why-visionx .vx-eyebrow p { display: inline-flex !important; align-items: center !important; gap: calc(var(--u) * 12.8) !important; margin: 0 !important; font-size: calc(var(--u) * 19.2) !important; /* Figma 18 */ font-weight: 500 !important; line-height: 1.5 !important; letter-spacing: normal !important; color: #d60048 !important; } /* the 27px rule that precedes the eyebrow label in Figma */ #why-visionx#why-visionx#why-visionx#why-visionx .vx-eyebrow p::before { content: "" !important; flex: 0 0 auto !important; width: calc(var(--u) * 28.8) !important; height: calc(var(--u) * 1.6) !important; background: #d60048 !important; } #why-visionx#why-visionx#why-visionx#why-visionx .vx-section-title .elementor-heading-title { margin: 0 !important; font-size: calc(var(--u) * 51.2) !important; /* Figma 48 */ font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: calc(var(--u) * -1.536) !important; color: #030209 !important; } /* -- cards: shared ------------------------------------------------------ */ #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-card { position: absolute !important; min-height: 0 !important; max-width: none !important; padding: 0 !important; overflow: hidden !important; border: 0 !important; border-radius: 0 calc(var(--u) * 38.4) 0 calc(var(--u) * 38.4) !important; /* Figma rounded-tr / rounded-bl 36 */ background: linear-gradient(226.24deg, rgb(241, 241, 241) 27.863%, rgb(255, 255, 255) 31.776%) !important; box-shadow: none !important; /* NOTE: `background` is deliberately NOT transitioned. The old rule used `transition: background .38s`, and because the resting background is a 1-layer linear-gradient while the hover background is a 2-layer radial stack, Chrome interpolates background-image *discretely* — for the first half of the transition the opaque white/grey wedge was still painted on top of a not-yet-opaque background-color, which is the white flash that showed up on hover. The dark panel now lives on ::after and cross-fades with opacity instead. Colours are unchanged. */ transition: box-shadow .38s ease, transform .38s ease !important; } #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-card::after { content: "" !important; position: absolute !important; inset: 0 !important; border-radius: inherit !important; opacity: 0 !important; transition: opacity .38s ease !important; pointer-events: none !important; z-index: 0 !important; } #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-card:hover::after, #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-card:focus-within::after { opacity: 1 !important; } #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-card:hover, #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-card:focus-within { background: linear-gradient(226.24deg, rgb(241, 241, 241) 27.863%, rgb(255, 255, 255) 31.776%) !important; box-shadow: 0 calc(var(--u) * 24) calc(var(--u) * 70) rgba(4, 8, 35, .22) !important; } /* strip the Elementor icon-box chrome so the text block can be positioned against the card box itself */ #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-card > .elementor-widget-container { position: static !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; } #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-card .elementor-icon-box-wrapper { position: static !important; padding: 0 !important; margin: 0 !important; display: block !important; } #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-card .elementor-icon-box-icon { display: none !important; } #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-card .elementor-icon-box-content { position: absolute !important; z-index: 1 !important; display: flex !important; flex-direction: column !important; gap: calc(var(--u) * 6.4) !important; /* Figma 6 */ margin: 0 !important; padding: 0 !important; } #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-card .elementor-icon-box-title { margin: 0 !important; font-size: calc(var(--u) * 25.6) !important; /* Figma 24 — was 2vw, which is what pushed the copy under the artwork */ font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: normal !important; color: #030209 !important; /* fade the colour on the same curve as the ::after panel, otherwise the text snaps to white while the dark panel is still fading in and is briefly unreadable against the light resting background */ transition: color .38s ease !important; } #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-card .elementor-icon-box-title > * { font: inherit !important; letter-spacing: inherit !important; color: inherit !important; } #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-card .elementor-icon-box-description { margin: 0 !important; font-size: calc(var(--u) * 22.4) !important; /* Figma 21 */ font-weight: 400 !important; line-height: 1.4 !important; color: #030209 !important; transition: color .38s ease !important; } #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-card:hover .elementor-icon-box-title, #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-card:hover .elementor-icon-box-title > *, #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-card:hover .elementor-icon-box-description { color: #fff !important; } /* -- artwork overlays: clipped to exactly the card box ------------------ */ #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-art { position: absolute !important; overflow: hidden !important; pointer-events: none !important; z-index: 3 !important; /* card 2 < art 3, both above the orbit -- see below */ min-height: 0 !important; border-radius: 0 calc(var(--u) * 38.4) 0 calc(var(--u) * 38.4) !important; } #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-art img { position: absolute !important; max-width: none !important; object-fit: cover !important; } /* -- per-card boxes ----------------------------------------------------- */ #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-own, #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-own-art { left: calc(var(--u) * 4) !important; top: calc(var(--u) * 194.4) !important; width: calc(var(--u) * 455.2) !important; height: calc(var(--u) * 320) !important; } #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-fast, #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-fast-art { left: calc(var(--u) * 852.8) !important; top: calc(var(--u) * 194.4) !important; width: calc(var(--u) * 427.2) !important; height: calc(var(--u) * 297.6) !important; } #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-enterprise, #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-enterprise-art { left: 0 !important; top: calc(var(--u) * 756) !important; width: calc(var(--u) * 459.2) !important; height: calc(var(--u) * 320) !important; } #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-cost, #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-cost-art { left: calc(var(--u) * 852.8) !important; top: calc(var(--u) * 756) !important; width: calc(var(--u) * 427.2) !important; height: calc(var(--u) * 320) !important; } /* -- per-card text blocks (Figma offsets, un-mirrored) ------------------ */ #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-own .elementor-icon-box-content { left: calc(var(--u) * 26) !important; right: auto !important; top: calc(var(--u) * 44) !important; bottom: auto !important; width: calc(var(--u) * 222) !important; text-align: left !important; align-items: flex-start !important; } #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-fast .elementor-icon-box-content { left: auto !important; right: calc(var(--u) * 41.2) !important; top: calc(var(--u) * 48.8) !important; bottom: auto !important; width: calc(var(--u) * 176) !important; text-align: right !important; align-items: flex-end !important; } #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-enterprise .elementor-icon-box-content { left: calc(var(--u) * 43.6) !important; right: auto !important; top: auto !important; bottom: calc(var(--u) * 42.4) !important; width: calc(var(--u) * 278.4) !important; text-align: left !important; align-items: flex-start !important; } #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-cost .elementor-icon-box-content { left: auto !important; right: calc(var(--u) * 24.4) !important; top: auto !important; bottom: calc(var(--u) * 53.6) !important; width: calc(var(--u) * 317.6) !important; text-align: right !important; align-items: flex-end !important; } /* -- per-card artwork placement ---------------------------------------- */ #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-own-art img { left: calc(var(--u) * 26) !important; top: calc(var(--u) * 44) !important; width: calc(var(--u) * 621.6) !important; height: calc(var(--u) * 414.4) !important; } #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-fast-art img { left: calc(var(--u) * -194.8) !important; top: calc(var(--u) * -16.8) !important; width: calc(var(--u) * 543.2) !important; height: calc(var(--u) * 543.2) !important; } #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-enterprise-art img { left: 0 !important; top: calc(var(--u) * -144.8) !important; width: calc(var(--u) * 697.2) !important; height: calc(var(--u) * 464.8) !important; } #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-cost-art img { left: calc(var(--u) * -280.4) !important; top: calc(var(--u) * -167.2) !important; width: calc(var(--u) * 730.8) !important; height: calc(var(--u) * 487.2) !important; } /* -- per-card hover panel (same colours as before, now on ::after) ------ */ #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-own::after { background: radial-gradient(85% 95% at 0% 100%, rgba(0, 66, 220, .98) 0%, rgba(2, 34, 122, .7) 28%, transparent 66%), radial-gradient(85% 95% at 100% 0%, rgba(228, 0, 76, .96) 0%, rgba(101, 0, 42, .55) 34%, transparent 70%), rgb(3, 2, 10) !important; } #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-fast::after { background: radial-gradient(80% 95% at 0% 100%, rgba(186, 0, 61, .9) 0%, rgba(82, 0, 48, .56) 35%, transparent 72%), radial-gradient(75% 90% at 100% 0%, rgba(215, 0, 72, .76) 0%, transparent 65%), rgb(3, 2, 10) !important; } #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-enterprise::after { background: radial-gradient(85% 95% at 0% 100%, rgba(0, 57, 194, .95) 0%, rgba(4, 24, 98, .68) 34%, transparent 70%), radial-gradient(85% 95% at 100% 0%, rgba(221, 0, 74, .82) 0%, transparent 66%), rgb(3, 2, 10) !important; } #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-cost::after { background: radial-gradient(95% 100% at 100% 100%, rgba(205, 0, 57, .98) 0%, rgba(93, 0, 39, .62) 34%, transparent 68%), radial-gradient(75% 90% at 0% 100%, rgba(0, 55, 190, .92) 0%, transparent 66%), rgb(3, 2, 10) !important; } /* -- orbit ------------------------------------------------------------- */ /* why-visionx-circle.png (the ring graphic painted by .vx-orbit::before and ::after) was exported from Figma flattened onto white -- 896x754 with zero alpha anywhere. The orbit widget sits after the cards in the DOM, so that opaque white rectangle was painting straight over the top-right of the "Own your AI" and "Intelligent enterprise" cards. Invisible at rest (section bg is white too), but on hover it showed as a hard white block on the gradient panel. The ring's actual ink only occupies ~x20-79% / y21-85% of the PNG, which clears both cards, so ordering the orbit underneath them loses nothing and drops the white. Re-export the PNG with transparency and these three z-indexes can go. */ #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-orbit { left: calc(var(--u) * 286.4) !important; top: calc(var(--u) * 300) !important; width: calc(var(--u) * 716) !important; height: calc(var(--u) * 602.4) !important; z-index: 1 !important; } #why-visionx#why-visionx#why-visionx#why-visionx .vx-why-card { z-index: 2 !important; } } /* ===== Offerings — Figma-exact desktop layer (appended) ===== */ /* ============================================================================= Offerings — "Built around your enterprise. Deployed on your terms." Figma: c6Sxp7eNcEuWtOxg9JDC7u · Home – 1440 · node 2877:564 The Figma section frame is the full 1440 viewport; the content frame inside it sits at x80 width 1280, so every Figma value below maps 1:1 to the live 1280 container (no scale factor, unlike Why VisionX). Container-relative x = Figma x - 80. The 4x #offerings prefix is deliberate: it outranks the stacked "PIXEL POLISH V2..V7" layers still sitting in the Elementor page CSS. Once those are deleted this can drop to a single #offerings. ============================================================================= */ @media (min-width: 1025px) { /* the design pixel: exactly 1px at >=1440, linear shrink below, so the whole fixed-proportion 1440 composition scales instead of reflowing. Floor 1025 because the plugin tablet CSS owns <=1024. */ #vx-hero#vx-hero#vx-hero#vx-hero, #offerings#offerings#offerings#offerings { --u: min(1px, calc(100vw / 1440)) !important; } /* -- hero banner: lock the rounded panel to 1440 (was a hard-coded 1344) --- */ #vx-hero#vx-hero#vx-hero#vx-hero > .e-con.e-child { width: min(100%, calc(var(--u) * 1440)) !important; max-width: min(100%, calc(var(--u) * 1440)) !important; margin-inline: auto !important; } /* -- section box: the Figma frame height, scaled. A 3x-ID polish layer pins this to a hard 810 which would leave dead space below 1440. ---------- */ #offerings#offerings#offerings#offerings { height: calc(var(--u) * 810) ; min-height: calc(var(--u) * 810); } /* -- container: 1280, was 1440 -------------------------------------------- */ #offerings#offerings#offerings#offerings .e-con-inner { position: relative !important; width: calc(var(--u) * 1280) !important; max-width: calc(var(--u) * 1280) !important; height: calc(var(--u) * 810) ; /* Figma section height */ min-height: calc(var(--u) * 810); margin-inline: auto !important; padding: 0 !important; } /* .e-con-inner is display:grid, so an absolutely-positioned child resolves its offsets against its *grid area* (row 2 of the auto flow sat 720px in, 270px down), not the padding box. Spanning every track makes the containing block the whole 1280x810 padding box, which is what all the px values below assume. */ #offerings#offerings#offerings#offerings > .e-con-inner > .elementor-element { grid-area: 1 / 1 / -1 / -1 !important; } /* -- eyebrow -------------------------------------------------------------- */ #offerings#offerings#offerings#offerings .vx-eyebrow { left: 0 !important; right: auto !important; top: calc(var(--u) * 141.75) !important; bottom: auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; } #offerings#offerings#offerings#offerings .vx-eyebrow p { display: inline-flex !important; align-items: center !important; gap: calc(var(--u) * 12) !important; margin: 0 !important; font-size: calc(var(--u) * 18) !important; font-weight: 500 !important; line-height: normal !important; letter-spacing: normal !important; color: #d60048 !important; } /* the 27px rule that precedes the eyebrow label in Figma */ #offerings#offerings#offerings#offerings .vx-eyebrow p::before { content: "" !important; flex: 0 0 auto !important; width: calc(var(--u) * 27) !important; height: calc(var(--u) * 1.5) !important; background: #d60048 !important; } /* -- heading -------------------------------------------------------------- */ /* Figma text box is 645 x 180 => 3 lines of 60px. The old rule left the h2 at 840px wide, which collapsed it to 2 lines. */ #offerings#offerings#offerings#offerings .vx-offerings-title { left: 0 !important; right: auto !important; top: calc(var(--u) * 174.25) !important; bottom: auto !important; width: calc(var(--u) * 645) !important; max-width: calc(var(--u) * 645) !important; margin: 0 !important; padding: 0 !important; } #offerings#offerings#offerings#offerings .vx-offerings-title .elementor-heading-title { display: block !important; width: calc(var(--u) * 645) !important; max-width: calc(var(--u) * 645) !important; margin: 0 !important; font-size: calc(var(--u) * 60) !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: calc(var(--u) * -1.8) !important; color: #030209 !important; } /* -- offering rows -------------------------------------------------------- */ /* Figma: 521.25 wide box = number 150 + gap 30 + copy 341.25, 150 tall, at x798.75 (container-relative 718.75), tops 61.5 / 330 / 598.5. */ #offerings#offerings#offerings#offerings .vx-offering-row { position: absolute !important; left: calc(var(--u) * 718.75) !important; right: auto !important; width: calc(var(--u) * 521.25) !important; max-width: none !important; height: calc(var(--u) * 150) !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; /* the old 1px #e6e6e6 bottom border */ overflow: visible !important; /* was hidden: clipped the ::after rule and row 3's overflowing line */ z-index: 2 !important; /* above the artwork panel */ } #offerings#offerings#offerings#offerings .vx-offering-1 { top: calc(var(--u) * 61.5) !important; } #offerings#offerings#offerings#offerings .vx-offering-2 { top: calc(var(--u) * 330) !important; } #offerings#offerings#offerings#offerings .vx-offering-3 { top: calc(var(--u) * 598.5) !important; } #offerings#offerings#offerings#offerings .vx-offering-row > .elementor-widget-container, #offerings#offerings#offerings#offerings .vx-offering-row .elementor-icon-box-wrapper { position: static !important; display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; } #offerings#offerings#offerings#offerings .vx-offering-row .elementor-icon-box-icon { display: none !important; } /* -- the ghost 01 / 02 / 03 ---------------------------------------------- */ /* Figma draws these as a 150x150 clipping frame with the numeral flush to its right edge, so the leading digit is cut off on the left. Right-aligning the text inside an overflow:hidden 150px box reproduces that for all three. Was 230px at left:8px/top:38px, which spilled across the heading. */ #offerings#offerings#offerings#offerings .vx-offering-row::before { position: absolute !important; left: 0 !important; right: auto !important; top: 0 !important; bottom: auto !important; width: calc(var(--u) * 150) !important; height: calc(var(--u) * 150) !important; overflow: hidden !important; display: block !important; text-align: right !important; white-space: nowrap !important; font-size: calc(var(--u) * 190) !important; font-weight: 600 !important; line-height: calc(var(--u) * 150) !important; letter-spacing: normal !important; color: #e4e4e4 !important; /* RTL is what actually does the clipping: in LTR an over-wide line always starts at the left content edge and overflows right, so text-align:right is ignored and the trailing "1" gets cut instead of the leading "0". */ direction: rtl !important; pointer-events: none !important; z-index: 0 !important; } /* -- the divider between rows (Figma: 509.25 wide, inset 12 from the row left, centred in the 59.25 gap; no rule after row 3) ---------------- */ #offerings#offerings#offerings#offerings .vx-offering-1::after, #offerings#offerings#offerings#offerings .vx-offering-2::after { content: "" !important; position: absolute !important; left: calc(var(--u) * 12) !important; right: 0 !important; top: calc(var(--u) * 209.25) !important; height: 1px !important; background: #e6e6e6 !important; pointer-events: none !important; } #offerings#offerings#offerings#offerings .vx-offering-3::after { content: none !important; } /* -- row copy ------------------------------------------------------------- */ /* Figma pins the copy frame at y9.5 inside the 150-tall row (not centred) and makes it 341.25 x 131: title 27 @y0, description 58 @y39, "Explore more" 22 @y109 — i.e. 12px gaps. */ #offerings#offerings#offerings#offerings .vx-offering-row .elementor-icon-box-content { position: absolute !important; left: calc(var(--u) * 180) !important; right: auto !important; top: calc(var(--u) * 9.5) !important; transform: none !important; width: calc(var(--u) * 341.25) !important; margin: 0 !important; padding: 0 !important; z-index: 1 !important; } #offerings#offerings#offerings#offerings .vx-offering-row .elementor-icon-box-title { margin: 0 !important; font-size: calc(var(--u) * 21.75) !important; font-weight: 600 !important; line-height: calc(var(--u) * 27) !important; letter-spacing: calc(var(--u) * -0.435) !important; color: #030209 !important; } #offerings#offerings#offerings#offerings .vx-offering-row .elementor-icon-box-title > * { font: inherit !important; letter-spacing: inherit !important; color: inherit !important; } #offerings#offerings#offerings#offerings .vx-offering-row .elementor-icon-box-description { margin: calc(var(--u) * 12) 0 0 !important; width: calc(var(--u) * 341.25) !important; font-size: calc(var(--u) * 21) !important; font-weight: 400 !important; line-height: calc(var(--u) * 29) !important; color: #030209 !important; } /* Row 3's copy carries a hard
after "systems,"; that line needs 399px, so Figma lets this one text node overflow the 341.25 frame (it records 395). */ #offerings#offerings#offerings#offerings .vx-offering-3 .elementor-icon-box-description { width: calc(var(--u) * 400) !important; } /* "Explore more" is a ::after on the description, not a real element */ #offerings#offerings#offerings#offerings .vx-offering-row .elementor-icon-box-description::after { display: block !important; margin-top: calc(var(--u) * 12) !important; font-size: calc(var(--u) * 18) !important; font-weight: 600 !important; line-height: calc(var(--u) * 22) !important; color: #d60048 !important; text-decoration: underline !important; } /* -- artwork panel: bleeds to the viewport's left edge -------------------- */ /* Figma has the globe frame at x0 (the 1440 frame's left edge) with its right edge at x810, i.e. 730 into the 1280 container. `640px - 50vw` is the distance from the container's left edge back to the viewport edge, so the panel stays flush left at any width while the right edge stays put. The extra width is filled with #030209, which is the exact colour of the artwork's own left edge, so the seam is invisible. */ #offerings#offerings#offerings#offerings .vx-offerings-art { position: absolute !important; left: calc(calc(var(--u) * 640) - 50vw) !important; right: calc(var(--u) * 550) !important; top: calc(var(--u) * 435) !important; bottom: auto !important; width: auto !important; height: calc(var(--u) * 375) !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border-radius: 0 calc(var(--u) * 48) calc(var(--u) * 48) 0 !important; background: #030209 !important; z-index: 3 !important; pointer-events: none !important; } #offerings#offerings#offerings#offerings .vx-offerings-art > * { position: static !important; margin: 0 !important; padding: 0 !important; } #offerings#offerings#offerings#offerings .vx-offerings-art img { position: absolute !important; right: 0 !important; top: 0 !important; left: auto !important; width: calc(var(--u) * 810); height: calc(var(--u) * 375) ; max-width: none !important; object-fit: cover !important; border-radius: 0 !important; } } /* ===== Use cases — Figma-exact desktop layer (appended) ===== */ /* ============================================================================= Use cases / Industries · section id #industries Figma: c6Sxp7eNcEuWtOxg9JDC7u · Home – 1440 header node 2877:556 x221.25 y1135.5 997.5 x 110.5 cards node 2877:563 x221.25 y1311.75 997.5 x 597.75 WHY EVERY NUMBER BELOW IS "native x 0.8" --------------------------------------------------------------------------- The Cards instance in the 1440 frame is a 0.75 scale of a component that is authored 1330 x 450 (get_design_context reports the inner frame as `w-[1330px] h-[450px]`). The header frame is the same 0.75 copy: 183 / 14.25 / 800.25 are exactly 244 / 19 / 1067 x 0.75. visionx-home.css itself says "Values mirror the preserved 1920px Figma frame" and sets --vx-home-content: 1600px, and 1600 x 0.75 = 1200 = the 1440 frame's content column. So: 1920 frame : content 1600, this block 1330 1440 frame : content 1200, this block 997.5 <- what Figma shows live : content 1280, this block 1064 <- 1280/1600 = 0.8 i.e. the block is deliberately inset ~108px inside the 1280 column; it is NOT full-bleed like Offerings. Everything here is therefore the native (1920) value x 0.8, which is exactly Figma x 1.0666667. WHAT WAS BROKEN --------------------------------------------------------------------------- The "PIXEL POLISH" layers in the Elementor page CSS pasted the *1440-frame* type sizes (18 / 30 / 36 / 21 / 24) straight onto the *1280-wide* layout and left the geometry at native scale. Type was 25% too small for its column, the cards ran the full 1280 instead of 1064, and the panel artwork was given hard-coded per-item left/top/width/height boxes plus `object-fit: contain; top: 0` — which is why the images sit floating at the top-right instead of being pinned to the card corner and cropped by it. 4x #industries prefix outranks those stacked polish layers. ============================================================================= */ @media (min-width: 1025px) { /* the design pixel: exactly 1px at >=1440, linear shrink below, so the whole fixed-proportion 1440 composition scales instead of reflowing. Floor 1025 because the plugin tablet CSS owns <=1024. */ #industries#industries#industries#industries { --u: min(1px, calc(100vw / 1440)) !important; } /* -- section shell -------------------------------------------------------- */ /* native padding 182 / 180 -> x0.8 */ #industries#industries#industries#industries { min-height: 0 !important; height: auto !important; padding: calc(var(--u) * 145.6) 0 calc(var(--u) * 144) !important; /* the faint layout grid: native 145 -> 116 (Figma 1440 renders it at ~110) */ background-size: calc(var(--u) * 116) calc(var(--u) * 116) !important; } #industries#industries#industries#industries > .vx-home-inner { width: min(100%, calc(var(--u) * 1280)) !important; max-width: calc(var(--u) * 1280) !important; margin-inline: auto !important; padding: 0 !important; } /* -- the 1064 block: header and card stack share the same column ---------- */ #industries#industries#industries#industries .vx-home-use-cases__head, #industries#industries#industries#industries .vx-home-industries { width: calc(var(--u) * 1064) !important; max-width: calc(var(--u) * 1064) !important; margin-inline: auto !important; } /* -- header: 244 / 19 / 1067 (native) -> 195.2 / 15.2 / 853.6 ------------- */ #industries#industries#industries#industries .vx-home-use-cases__head { display: grid !important; grid-template-columns: calc(var(--u) * 195.2) minmax(0, 1fr) !important; gap: calc(var(--u) * 15.2) !important; align-items: start !important; } /* eyebrow: native 24px type + a 36x2 rule -> 19.2px + 28.8x1.6 */ #industries#industries#industries#industries .vx-home-kicker { display: flex !important; align-items: center !important; gap: calc(var(--u) * 12.8) !important; margin: 0 0 calc(var(--u) * 16) !important; font-size: calc(var(--u) * 19.2) !important; font-weight: 500 !important; line-height: 1.4 !important; letter-spacing: normal !important; color: #d60048 !important; } #industries#industries#industries#industries .vx-home-kicker::before { content: "" !important; flex: 0 0 auto !important; width: calc(var(--u) * 28.8) !important; height: calc(var(--u) * 1.6) !important; background: currentColor !important; } /* "What we transform" — native 40px/-1.6px in a 244 column; it wraps to two lines in Figma too, so the two-line break is correct, not a bug. */ #industries#industries#industries#industries .vx-home-use-cases__head h2 { margin: 0 !important; font-size: calc(var(--u) * 32) !important; font-weight: 500 !important; line-height: 1.3 !important; letter-spacing: calc(var(--u) * -1.28) !important; color: #030209 !important; } /* lead: native 48px/-.03em in a 1067 column */ #industries#industries#industries#industries .vx-home-use-cases__head > p { margin: 0 !important; max-width: calc(var(--u) * 853.6) !important; font-size: calc(var(--u) * 38.4) !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: -0.03em !important; color: #030209 !important; } /* -- card stack ----------------------------------------------------------- */ /* Figma gap header->cards 65.75 (1440 space) -> 70.1. Radius 48 native. */ #industries#industries#industries#industries .vx-home-industries { margin-top: calc(var(--u) * 70.1) !important; overflow: hidden !important; border-radius: calc(var(--u) * 38.4) !important; background: #fff !important; } /* Cards overlap: native card 260 tall on a 114 rhythm -> -146 margin. x0.8 => 208 tall on a 91.2 rhythm, i.e. a 91.2px visible strip. */ #industries#industries#industries#industries .vx-home-industry { position: relative !important; margin-top: 0 !important; padding: 0 0 calc(var(--u) * 116.8) !important; border-radius: calc(var(--u) * 38.4) !important; } #industries#industries#industries#industries .vx-gcs-accordion__item + .vx-gcs-accordion__item { margin-top: calc(var(--u) * -116.8) !important; } /* Every card's bottom 116.8px is meant to be hidden behind the next card, so the last card must not carry it — otherwise the stack ends in 116.8px of dead space. Figma's cards frame is 597.75 (1440) = 637.6 live; without this the stack measured 788.5. */ #industries#industries#industries#industries .vx-gcs-accordion__item:last-child { padding-bottom: 0 !important; } /* -- collapsed row: number at native x88, 24px gap, 28px type ------------- */ #industries#industries#industries#industries .vx-gcs-accordion__trigger { display: flex !important; align-items: center !important; width: 100% !important; min-height: calc(var(--u) * 91.2) !important; padding: 0 calc(var(--u) * 70.4) !important; border-radius: calc(var(--u) * 38.4) calc(var(--u) * 38.4) 0 0 !important; font-size: calc(var(--u) * 22.4) !important; font-weight: 500 !important; line-height: 1.3 !important; } #industries#industries#industries#industries .vx-gcs-accordion__trigger > span { min-width: 0 !important; margin-right: calc(var(--u) * 19.2) !important; padding-left: 0 !important; font-size: calc(var(--u) * 22.4) !important; font-weight: 600 !important; /* Figma is #030209 at 50% opacity */ color: rgba(3, 2, 9, .5) !important; } #industries#industries#industries#industries .vx-gcs-accordion__trigger strong { min-width: 0 !important; font-size: calc(var(--u) * 22.4) !important; font-weight: 500 !important; line-height: 1.3 !important; } /* -- open row ------------------------------------------------------------- */ /* Figma shifts the open row left: the rule sits at native x32.5, "04" at 56.5 and the label at 124.5 — much further left than the collapsed x88. Trigger box native 92 = 40 top + 38.67 text + 13.3 bottom. */ #industries#industries#industries#industries .vx-home-industry.is-open .vx-gcs-accordion__trigger { min-height: calc(var(--u) * 73.6) !important; padding: calc(var(--u) * 32) calc(var(--u) * 70.4) calc(var(--u) * 10.7) calc(var(--u) * 26) !important; font-size: calc(var(--u) * 25.6) !important; font-weight: 600 !important; color: #fff !important; } #industries#industries#industries#industries .vx-home-industry.is-open .vx-gcs-accordion__trigger::before { content: "" !important; flex: 0 0 auto !important; width: calc(var(--u) * 19.2) !important; height: calc(var(--u) * 2.4) !important; margin-right: 0 !important; background: #ec075d !important; } #industries#industries#industries#industries .vx-home-industry.is-open .vx-gcs-accordion__trigger > span { min-width: 0 !important; margin-right: calc(var(--u) * 28) !important; padding-left: 0 !important; font-size: calc(var(--u) * 25.6) !important; font-weight: 600 !important; color: #ec075d !important; } #industries#industries#industries#industries .vx-home-industry.is-open .vx-gcs-accordion__trigger strong { font-size: calc(var(--u) * 25.6) !important; font-weight: 600 !important; color: #fff !important; } /* -- open panel: native 358 -> 286.4 (92 + 358 = the 450 card) ------------ */ #industries#industries#industries#industries .vx-gcs-accordion__panel { position: relative !important; min-height: calc(var(--u) * 286.4) !important; overflow: hidden !important; } /* quote block: native icon at x87 y149 (card) => y57 in the panel, 48px icon, 16px gap, so the copy starts at x151. x0.8 => 69.6 / 45.6 / 38.4 / 120.8 */ #industries#industries#industries#industries .vx-home-industry__message { position: relative !important; z-index: 2 !important; width: auto !important; padding: calc(var(--u) * 45.6) calc(var(--u) * 72) calc(var(--u) * 57.6) calc(var(--u) * 120.8) !important; } #industries#industries#industries#industries .vx-home-industry__message i { left: calc(var(--u) * 69.6) !important; top: calc(var(--u) * 45.6) !important; font-size: calc(var(--u) * 57.6) !important; line-height: 1 !important; } #industries#industries#industries#industries .vx-home-industry__message p { max-width: calc(var(--u) * 620) !important; margin: 0 0 calc(var(--u) * 27.2) !important; font-size: calc(var(--u) * 38.4) !important; font-weight: 400 !important; line-height: 1.3 !important; letter-spacing: -0.025em !important; color: #fff !important; } /* Explore pill: native px24/py16, r64, 20px bold -0.4px */ #industries#industries#industries#industries .vx-home-industry__message .vx-gcs-button { padding: calc(var(--u) * 12.8) calc(var(--u) * 19.2) !important; border-radius: calc(var(--u) * 51.2) !important; font-size: calc(var(--u) * 16) !important; font-weight: 700 !important; letter-spacing: calc(var(--u) * -0.32) !important; color: #1f1e2b !important; background: #fff !important; } /* -- artwork: pinned to the card's right edge and cropped by the card ----- */ /* Figma: left 66.62% / right 0.08% / top 32 (card) inside an overflow-clip 450-tall card, i.e. flush right, full height, cropped by the card's bottom. Native width 443 of 1330 = 33.3% -> 354px of 1064. What was broken: the page CSS gave each image a hard-coded left/top/width/ height box (614.7/12.1, 639.7/-56.6, 648.1/-14.7, 639.75/-33.5) plus `object-fit: contain`, so the artwork floated in mid-air instead of being glued to the card corner. Dropping all of that and letting the intrinsic ratio drive the height is what makes it stick. Measured: 354 wide -> 340/342/357/472 tall against a 322 panel, i.e. every card is flush right and cropped by its own bottom edge, as in Figma. */ #industries#industries#industries#industries .vx-gcs-accordion__panel > img { position: absolute !important; z-index: 1 !important; left: auto !important; /* Figma's artwork *frame* is flush right, but the PNG it holds is 1024x1536 with wide transparent margins, so the illustration reads as inset. The live assets (423x409, 340x454, ...) are near-square with no such margin, so a literal `right: 0` clipped the shop front / transformer in half. 32px (native 40) reproduces Figma's optical inset. */ right: 0; top: 0 !important; bottom: auto !important; width: calc(var(--u) * 354) !important; height: auto; max-width: none !important; max-height: none !important; object-fit: contain !important; object-position: right top !important; filter: drop-shadow(0 calc(var(--u) * 17.6) calc(var(--u) * 20.8) rgba(0, 0, 0, .18)) !important; } } /* ===== Deployment — Figma-exact desktop layer, fluid (appended) ===== */ /* Figma: c6Sxp7eNcEuWtOxg9JDC7u · Home – 1440 · node 2877:5707. The section is a fixed-proportion composition: a 1280 inset panel in the 1440 frame, 80 gutter each side, three cards on one row with the spec bars laid over their lower padding. Below 1440 the old CSS reflowed it — panel went edge-to-edge with zero gutter at <=1280, cards stacked to one column at <=1099, and the spec bars were hidden outright from 1439 down. This scales the whole 1440 composition by the design pixel instead. --u is exactly 1px at 1440, so the layer is a verified no-op at 1440 (0/97 descendant geometry diffs). Capped at 1439 because above 1440 the original padding-inline grows with the viewport by design; leaving that alone keeps >=1440 untouched and the two meet continuously at 1439/1440. Floor 1025 because the plugin tablet CSS owns <=1024. 4x #deployment outranks the stacked PIXEL POLISH V2..V7 layers, which pin min-height:1131px / grid-template-rows:auto auto 550px with !important. */ @media (min-width: 1025px) and (max-width: 1439px) { #deployment#deployment#deployment#deployment { --u: min(1px, calc(100vw / 1440)) !important; } /* -- the inset panel ------------------------------------------------------ */ /* rows must be scaled too: "auto auto 550px" would keep a hard 550 card row inside a shrinking 1131 panel and overflow the (overflow:hidden) box. */ #deployment#deployment#deployment#deployment > .e-con-inner { display: grid !important; width: min(100%, calc(var(--u) * 1280)) !important; max-width: calc(var(--u) * 1280) !important; margin-inline: auto !important; padding: calc(var(--u) * 115.5) calc(var(--u) * 103.536) calc(var(--u) * 115) !important; min-height: calc(var(--u) * 1131) !important; border-radius: calc(var(--u) * 56) !important; gap: calc(var(--u) * 24) !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-rows: auto auto calc(var(--u) * 550) !important; } /* -- eyebrow + heading span the full three columns ------------------------ */ #deployment#deployment#deployment#deployment .vx-eyebrow, #deployment#deployment#deployment#deployment .vx-section-title { grid-column: 1 / -1 !important; grid-row: auto !important; } #deployment#deployment#deployment#deployment .vx-eyebrow p { margin: 0 0 calc(var(--u) * 14.4) !important; font-size: calc(var(--u) * 15) !important; line-height: 1 !important; letter-spacing: -0.03em !important; } #deployment#deployment#deployment#deployment .vx-section-title { margin: calc(var(--u) * 18) 0 calc(var(--u) * 58) !important; } #deployment#deployment#deployment#deployment .vx-section-title h2 { max-width: calc(var(--u) * 760) !important; margin-inline: auto !important; font-size: calc(var(--u) * 48) !important; line-height: 1 !important; letter-spacing: -0.03em !important; } /* -- the three cards stay on one row ------------------------------------- */ /* The two-line titles ("Edge/ Air-gapped", "On-premise", "Sovereign cloud") are the Figma design, so the type scales with the card instead of being shrunk to force one line. */ #deployment#deployment#deployment#deployment .vx-deployment-card { grid-row: 3 !important; padding: calc(var(--u) * 92) calc(var(--u) * 40) calc(var(--u) * 225) !important; min-height: calc(var(--u) * 550) !important; border-radius: calc(var(--u) * 32) !important; } #deployment#deployment#deployment#deployment .vx-deployment-edge { grid-column: 1 !important; } #deployment#deployment#deployment#deployment .vx-deployment-onprem { grid-column: 2 !important; } #deployment#deployment#deployment#deployment .vx-deployment-cloud { grid-column: 3 !important; } #deployment#deployment#deployment#deployment .vx-deployment-card .elementor-icon-box-wrapper { gap: calc(var(--u) * 15) !important; } #deployment#deployment#deployment#deployment .vx-deployment-card h3 { margin: calc(var(--u) * 8) 0 calc(var(--u) * 16) !important; font-size: calc(var(--u) * 37.5) !important; line-height: 1 !important; letter-spacing: -0.03em !important; } #deployment#deployment#deployment#deployment .vx-deployment-card p { margin: calc(var(--u) * 12) 0 0 !important; font-size: calc(var(--u) * 21) !important; line-height: 1.4 !important; } /* -- spec bars: bottom-aligned in the card row, spanning all three -------- */ /* they sit over the cards' 225 bottom padding, which is what that padding is for; the old layer hid them from 1439 down and left the padding empty. */ #deployment#deployment#deployment#deployment .vx-deploy-specs-wrap { display: block !important; position: relative !important; grid-area: 3 / 1 / auto / -1 !important; align-self: end !important; width: auto !important; max-width: 100% !important; left: auto !important; right: auto !important; margin: 0 calc(var(--u) * 34.56) calc(var(--u) * 39) !important; } #deployment#deployment#deployment#deployment .vx-deploy-specs-grid { display: grid !important; width: 100% !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: calc(var(--u) * 86.4) !important; } #deployment#deployment#deployment#deployment .vx-deploy-specs { display: flex !important; gap: calc(var(--u) * 9) !important; } #deployment#deployment#deployment#deployment .vx-spec-row { display: grid !important; grid-template-columns: minmax(0, 1fr) calc(var(--u) * 110) !important; gap: calc(var(--u) * 6) !important; font-size: calc(var(--u) * 15) !important; line-height: 1 !important; } #deployment#deployment#deployment#deployment .vx-spec-row > span { font-size: calc(var(--u) * 15) !important; } #deployment#deployment#deployment#deployment .vx-spec-row i { border-radius: calc(var(--u) * 24) !important; } /* -- world backdrop: clipped by the panel, so it scales with it ----------- */ #deployment#deployment#deployment#deployment .vx-deployment-world { width: 100% !important; top: calc(var(--u) * 561) !important; height: calc(var(--u) * 820) !important; opacity: .32 !important; } #deployment#deployment#deployment#deployment .vx-deployment-world img { width: 100% !important; height: 100% !important; } } /* ===== Clients + Modalities + Production-proof — fluid desktop layer ===== */ /* Same "design pixel" approach as the Why VisionX / Offerings / Use cases / Deployment layers already in this file: --u is exactly 1px at 1440, so every calc(var(--u) * N) below reproduces the signed-off 1440 value verbatim, and below 1440 the whole fixed-proportion composition shrinks instead of reflowing. Every N here was read off the *computed* style at 1440 (not off the source declarations), so the layer is a measured no-op at 1440 rather than a guess about which of the stacked PIXEL POLISH rules wins. Capped at 1439 for the same reason as Deployment: >=1440 is signed off and is left completely untouched. Nothing in these three sections is vw-dependent above 1440 (padding-inline is a fixed 80/20 and the inner is min(1280,100%)), so 1439 and 1440 meet continuously. Floor 1025 because the plugin tablet CSS owns <=1024. 4x ID prefixes outrank the stacked PIXEL POLISH V2..V7 layers, whose own "responsive" @media (max-width:1180px) / (max-width:1199px) fallbacks are dead: they use 1x ID selectors and lose to the 3x ID desktop rules. */ @media (min-width: 1025px) and (max-width: 1439px) { #vx-clients#vx-clients#vx-clients#vx-clients, #modalities#modalities#modalities#modalities, #production-proof#production-proof#production-proof#production-proof { --u: min(1px, calc(100vw / 1440)) !important; } /* ========================================================================= Client logo strip — the band is full-bleed, the logo track is the 1280 column. The old CSS let the track go edge-to-edge below 1280 (gutter 0). ========================================================================= */ #vx-clients#vx-clients#vx-clients#vx-clients { height: calc(var(--u) * 110.25) !important; min-height: calc(var(--u) * 110.25) !important; max-height: calc(var(--u) * 110.25) !important; } #vx-clients#vx-clients#vx-clients#vx-clients > .e-con-inner { width: min(100%, calc(var(--u) * 1280)) !important; max-width: calc(var(--u) * 1280) !important; margin-inline: auto !important; height: calc(var(--u) * 110.25) !important; min-height: calc(var(--u) * 110.25) !important; max-height: calc(var(--u) * 110.25) !important; } /* the two edge fades that mask the marquee */ #vx-clients#vx-clients#vx-clients#vx-clients::before { width: calc(var(--u) * 174.75) !important; } #vx-clients#vx-clients#vx-clients#vx-clients::after { width: calc(var(--u) * 206.25) !important; } #vx-clients#vx-clients#vx-clients#vx-clients .swiper-slide img { max-height: calc(var(--u) * 56) !important; } /* the hairline divider before each logo stays a hairline */ #vx-clients#vx-clients#vx-clients#vx-clients .swiper-slide::before { width: 1px !important; height: calc(var(--u) * 60) !important; } /* ========================================================================= Modalities / "What our AI does" — 4 cards on one row inside the 1280 column. Section padding-inline was a hard 20px, so below 1320 the column lost its 80 gutter and the cards' bleeding artwork (left:-55.5px on a 288px image) spilled past the section's left edge. ========================================================================= */ #modalities#modalities#modalities#modalities { padding: calc(var(--u) * 245) calc(var(--u) * 20) calc(var(--u) * 134) !important; height: auto !important; } #modalities#modalities#modalities#modalities > .e-con-inner { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-template-rows: calc(var(--u) * 22) auto calc(var(--u) * 375) !important; column-gap: calc(var(--u) * 18) !important; row-gap: 0 !important; width: min(100%, calc(var(--u) * 1280)) !important; max-width: calc(var(--u) * 1280) !important; margin-inline: auto !important; padding: 0 !important; min-height: 0 !important; height: auto !important; } #modalities#modalities#modalities#modalities .vx-eyebrow p { margin: 0 0 calc(var(--u) * 14.4) !important; font-size: calc(var(--u) * 18) !important; } #modalities#modalities#modalities#modalities .elementor-element-a12bc94 { width: calc(var(--u) * 672) !important; max-width: calc(var(--u) * 672) !important; margin: calc(var(--u) * 10) 0 calc(var(--u) * 61) !important; } #modalities#modalities#modalities#modalities .elementor-element-a12bc94 h2 { font-size: calc(var(--u) * 48) !important; line-height: 1 !important; letter-spacing: calc(var(--u) * -1.44) !important; } /* -- the four cards ------------------------------------------------------- */ #modalities#modalities#modalities#modalities .elementor-element-577c40a, #modalities#modalities#modalities#modalities .elementor-element-5521917, #modalities#modalities#modalities#modalities .elementor-element-d460dd6, #modalities#modalities#modalities#modalities .elementor-element-3571f57, #modalities#modalities#modalities#modalities .elementor-widget-image-box { max-width: calc(var(--u) * 306.5) !important; height: calc(var(--u) * 375) !important; min-height: calc(var(--u) * 375) !important; max-height: calc(var(--u) * 375) !important; } #modalities#modalities#modalities#modalities .elementor-element-577c40a > .elementor-widget-container, #modalities#modalities#modalities#modalities .elementor-element-5521917 > .elementor-widget-container, #modalities#modalities#modalities#modalities .elementor-element-d460dd6 > .elementor-widget-container, #modalities#modalities#modalities#modalities .elementor-element-3571f57 > .elementor-widget-container { height: calc(var(--u) * 375) !important; min-height: calc(var(--u) * 375) !important; max-height: calc(var(--u) * 375) !important; border-radius: calc(var(--u) * 36) !important; } #modalities#modalities#modalities#modalities .elementor-image-box-wrapper { height: calc(var(--u) * 375) !important; border-radius: calc(var(--u) * 36) !important; } /* the artwork deliberately bleeds off the card's left edge; the offset has to scale with it or it lands outside the section. */ #modalities#modalities#modalities#modalities .elementor-image-box-img { top: calc(var(--u) * 11.25) !important; left: calc(var(--u) * -55.5) !important; width: calc(var(--u) * 288) !important; height: calc(var(--u) * 192) !important; } #modalities#modalities#modalities#modalities .elementor-image-box-img img { width: calc(var(--u) * 288) !important; height: calc(var(--u) * 192) !important; } #modalities#modalities#modalities#modalities .elementor-image-box-content { top: calc(var(--u) * 206.25) !important; left: calc(var(--u) * 22.5) !important; width: calc(var(--u) * 258.5) !important; max-width: calc(var(--u) * 258.5) !important; } #modalities#modalities#modalities#modalities .elementor-image-box-title { margin: 0 0 calc(var(--u) * 10.5) !important; font-size: calc(var(--u) * 22.5) !important; letter-spacing: calc(var(--u) * -0.45) !important; } #modalities#modalities#modalities#modalities .elementor-image-box-description { font-size: calc(var(--u) * 19.5) !important; line-height: 1.4 !important; } #modalities#modalities#modalities#modalities .elementor-image-box-content a { margin: calc(var(--u) * 16) 0 0 !important; font-size: calc(var(--u) * 18) !important; } /* ========================================================================= Production proof — 4 metric columns. padding-inline was a hard 80px, so the 1280 column shrank twice as fast as the viewport (1120 at 1280w) and the metric copy wrapped: the section grew 594 -> 791 tall as the window narrowed, which is the opposite of what it should do. ========================================================================= */ #production-proof#production-proof#production-proof#production-proof { padding: calc(var(--u) * 48) calc(var(--u) * 80) calc(var(--u) * 175) !important; min-height: 0 !important; margin: 0 !important; border-radius: calc(var(--u) * 80) !important; } #production-proof#production-proof#production-proof#production-proof > .e-con-inner { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 0 !important; width: min(100%, calc(var(--u) * 1280)) !important; max-width: calc(var(--u) * 1280) !important; margin-inline: auto !important; padding: 0 0 calc(var(--u) * 10) !important; } #production-proof#production-proof#production-proof#production-proof .vx-proof-title h2 { font-size: calc(var(--u) * 48) !important; line-height: 1 !important; letter-spacing: calc(var(--u) * -1.44) !important; } #production-proof#production-proof#production-proof#production-proof .vx-proof-summary { margin: calc(var(--u) * 18) auto calc(var(--u) * 58) !important; } #production-proof#production-proof#production-proof#production-proof .vx-proof-summary p { margin: 0 0 calc(var(--u) * 14.4) !important; font-size: calc(var(--u) * 18) !important; line-height: 1.4 !important; } #production-proof#production-proof#production-proof#production-proof .vx-metric { padding: calc(var(--u) * 18) calc(var(--u) * 48) !important; border-right-width: 1px !important; /* divider stays a hairline */ } #production-proof#production-proof#production-proof#production-proof .vx-metric h3 { margin: calc(var(--u) * 8) 0 calc(var(--u) * 16) !important; font-size: calc(var(--u) * 40) !important; line-height: 1 !important; letter-spacing: calc(var(--u) * -1.2) !important; } #production-proof#production-proof#production-proof#production-proof .vx-metric p { margin: calc(var(--u) * 30) 0 0 !important; font-size: calc(var(--u) * 18) !important; line-height: 1.2 !important; } } /* ===== Hero (#vx-hero) — fluid desktop layer ===== */ /* Last of the eight home sections to get the "design pixel" treatment. Same contract as the Why VisionX / Offerings / Use cases / Deployment / Clients / Modalities / Production-proof layers above: --u is exactly 1px at 1440, so every calc(var(--u) * N) reproduces the signed-off 1440 value verbatim, and below 1440 the whole fixed-proportion composition shrinks instead of reflowing. Every N was read off the *computed* style at 1440, not off the source declarations, so this is a measured no-op at 1440 rather than a guess about which of the stacked PIXEL POLISH rules wins. (It matters here: the source still carries a min-height:1186 / 1344 max-width / grid e-con-inner / 94px inline padding version of the hero that is entirely overridden — the live composition is a 1440x889.5 band holding a 1440x714 panel with 20/31/8/31 padding and a 36 radius.) What was broken below 1440: the video column is a hard .elementor-element-83fef71 { flex: 0 0 693px } sitting next to a hard .elementor-element-2a114f0 { flex: 0 0 475px } inside a shrinking row, so 475 + 693 = 1168 stopped fitting at ~1230 and the video pushed 100px out of the section at 1100 and 175px at 1025 (the section's own scrollWidth stayed 1280 inside a 1100 viewport). The three decorative rings (right:-48 / -96 / -144) and the 520px ::after orb pushed further still. The page's own @media (max-width:1180px) hero fallbacks never fired: they use 1x ID selectors and lose to the 3x ID desktop rules. Capped at 1439: the hero is the one section with genuine viewport-dependent rules above the cap — @media (min-width:1181px) and (max-width:1600px) sets #vx-hero { padding: clamp(40px,3.34vw,64px) }, the panel's padding-inline: clamp(62px,4.9vw,94px) and .vx-nav min-height: clamp(134px,9.06vw,174px). Those are left completely alone at >=1440. Floor 1025 because the plugin tablet CSS owns <=1024. 1.5px decorative ring borders and the panel's 1px hairline are left literal; scaling them would land on a sub-pixel and drop out. Verified: 0 geometry diffs over all 133 hero descendants at 1440 and 1441 (control run 0, so the noise floor is zero); exact linear scaling below (890/714/72px at 1440 -> 844/677/68.3 at 1366 -> 791/635/64 at 1280 -> 679/545/55 at 1100 -> 633/508/51.25 at 1025) and max horizontal overflow 0 at every width. */ @media (min-width: 1025px) and (max-width: 1439px) { #vx-hero#vx-hero#vx-hero#vx-hero { --u: min(1px, calc(100vw / 1440)) !important; } /* -- the full-bleed band -------------------------------------------------- */ /* min(100%, ...) so the ~15px scrollbar cannot create horizontal scroll. */ #vx-hero#vx-hero#vx-hero#vx-hero { width: min(100%, calc(var(--u) * 1440)) !important; max-width: min(100%, calc(var(--u) * 1440)) !important; height: calc(var(--u) * 889.5) !important; min-height: calc(var(--u) * 889.5) !important; padding: calc(var(--u) * 48) 0 calc(var(--u) * 127.5) !important; gap: calc(var(--u) * 20) !important; /* 106.15% is already a ratio; only the -124.5 offset needs scaling */ background-size: 106.15% auto !important; background-position: 50% calc(var(--u) * -124.5) !important; } /* the 520 glow orb that hangs off the right edge */ #vx-hero#vx-hero#vx-hero#vx-hero::after { width: calc(var(--u) * 520) !important; height: calc(var(--u) * 520) !important; top: calc(var(--u) * 190) !important; right: calc(var(--u) * -170) !important; } /* -- the 1440 x 714 glass panel ------------------------------------------- */ #vx-hero#vx-hero#vx-hero#vx-hero > .elementor-element-c3c2f03 { width: min(100%, calc(var(--u) * 1440)) !important; max-width: min(100%, calc(var(--u) * 1440)) !important; height: calc(var(--u) * 714) !important; min-height: calc(var(--u) * 714) !important; padding: calc(var(--u) * 20) calc(var(--u) * 31) calc(var(--u) * 8) !important; border-radius: calc(var(--u) * 36) !important; border-width: 1px !important; /* hairline stays a hairline */ gap: calc(var(--u) * 20) !important; } /* -- nav row: logo | menu | demo link ------------------------------------- */ /* the third track stays `auto` so it follows the button's own scaled type. */ #vx-hero#vx-hero#vx-hero#vx-hero .vx-nav { margin-top: calc(var(--u) * 20.5) !important; gap: calc(var(--u) * 43.2) !important; grid-template-columns: calc(var(--u) * 144) minmax(0, 1fr) auto !important; grid-template-rows: calc(var(--u) * 48) !important; } #vx-hero#vx-hero#vx-hero#vx-hero .elementor-element-5dd286e { width: calc(var(--u) * 144) !important; height: calc(var(--u) * 48) !important; } #vx-hero#vx-hero#vx-hero#vx-hero .vx-primary-nav ul.elementor-nav-menu { gap: calc(var(--u) * 30) !important; } #vx-hero#vx-hero#vx-hero#vx-hero .vx-primary-nav a { font-size: calc(var(--u) * 18) !important; line-height: calc(var(--u) * 20) !important; } #vx-hero#vx-hero#vx-hero#vx-hero .vx-demo-link .elementor-button { padding: 0 calc(var(--u) * 54) 0 0 !important; font-size: calc(var(--u) * 15) !important; line-height: calc(var(--u) * 42) !important; letter-spacing: calc(var(--u) * -0.15) !important; } /* the circular arrow puck: top/transform are 50%/-50%, already fluid */ #vx-hero#vx-hero#vx-hero#vx-hero .vx-demo-link .elementor-button::after { width: calc(var(--u) * 42) !important; height: calc(var(--u) * 42) !important; grid-template-columns: calc(var(--u) * 42) !important; grid-template-rows: calc(var(--u) * 42) !important; font-size: calc(var(--u) * 19) !important; line-height: calc(var(--u) * 19) !important; } /* -- kicker + headline ---------------------------------------------------- */ #vx-hero#vx-hero#vx-hero#vx-hero .elementor-element-fd294ea { margin-top: calc(var(--u) * 56.5) !important; } #vx-hero#vx-hero#vx-hero#vx-hero .vx-kicker { font-size: calc(var(--u) * 18) !important; line-height: 1.2 !important; gap: calc(var(--u) * 12) !important; } #vx-hero#vx-hero#vx-hero#vx-hero .vx-kicker i { flex: 0 0 calc(var(--u) * 7.5) !important; width: calc(var(--u) * 7.5) !important; height: calc(var(--u) * 7.5) !important; } #vx-hero#vx-hero#vx-hero#vx-hero .elementor-element-9d54760 { max-width: calc(var(--u) * 896) !important; margin-top: calc(var(--u) * 25) !important; } #vx-hero#vx-hero#vx-hero#vx-hero .elementor-element-9d54760 h1 { font-size: calc(var(--u) * 72) !important; line-height: 1 !important; letter-spacing: calc(var(--u) * -2.16) !important; } /* -- the copy + video row ------------------------------------------------- */ /* 475 + 693 stopped fitting the shrinking row at ~1230, which is what pushed the video (and its three rings) out of the section. Both columns are now fractions of the same scaled row, so the fit is width-independent. */ #vx-hero#vx-hero#vx-hero#vx-hero .elementor-element-785ce6a { margin-top: calc(var(--u) * 4) !important; } #vx-hero#vx-hero#vx-hero#vx-hero .elementor-element-2a114f0 { flex: 0 0 calc(var(--u) * 475) !important; width: calc(var(--u) * 475) !important; gap: calc(var(--u) * 36) !important; } #vx-hero#vx-hero#vx-hero#vx-hero .elementor-element-771f0c4 { max-width: calc(var(--u) * 381) !important; } #vx-hero#vx-hero#vx-hero#vx-hero .elementor-element-771f0c4, #vx-hero#vx-hero#vx-hero#vx-hero .elementor-element-771f0c4 p { font-size: calc(var(--u) * 18) !important; line-height: 1.4 !important; } #vx-hero#vx-hero#vx-hero#vx-hero .vx-hero-cta .elementor-button { padding: calc(var(--u) * 12) calc(var(--u) * 18) !important; font-size: calc(var(--u) * 15) !important; line-height: 1.2 !important; letter-spacing: calc(var(--u) * -0.3) !important; border-radius: calc(var(--u) * 48) !important; } #vx-hero#vx-hero#vx-hero#vx-hero .elementor-element-83fef71 { flex: 0 0 calc(var(--u) * 693) !important; width: calc(var(--u) * 693) !important; } #vx-hero#vx-hero#vx-hero#vx-hero .elementor-element-168cf54 { width: calc(var(--u) * 693) !important; height: calc(var(--u) * 395) !important; margin: calc(var(--u) * 17.5) 0 calc(var(--u) * -150) !important; border-radius: calc(var(--u) * 48) !important; } /* the video plate itself is absolutely positioned over that box */ #vx-hero#vx-hero#vx-hero#vx-hero .elementor-element-6a78c0e { width: calc(var(--u) * 693) !important; height: calc(var(--u) * 420) !important; top: calc(var(--u) * 17.5) !important; } #vx-hero#vx-hero#vx-hero#vx-hero .vx-video-overlay { border-radius: calc(var(--u) * 36) !important; } #vx-hero#vx-hero#vx-hero#vx-hero .vx-video-play { width: calc(var(--u) * 48) !important; height: calc(var(--u) * 48) !important; grid-template-columns: calc(var(--u) * 48) !important; grid-template-rows: calc(var(--u) * 48) !important; top: calc(var(--u) * 46.5) !important; left: calc(var(--u) * 54) !important; } #vx-hero#vx-hero#vx-hero#vx-hero .vx-video-play svg { width: calc(var(--u) * 24) !important; height: calc(var(--u) * 24) !important; } #vx-hero#vx-hero#vx-hero#vx-hero .vx-video-meta { top: calc(var(--u) * 225) !important; left: calc(var(--u) * 46.5) !important; max-width: calc(var(--u) * 314) !important; } #vx-hero#vx-hero#vx-hero#vx-hero .vx-video-title { font-size: calc(var(--u) * 30) !important; line-height: 1.2 !important; } /* -- the three decorative rings behind the video -------------------------- */ /* all three hang off the right edge by design (-48 / -96 / -144); unscaled they were the second source of horizontal overflow. */ #vx-hero#vx-hero#vx-hero#vx-hero .elementor-element-168cf54::before { width: calc(var(--u) * 693) !important; height: calc(var(--u) * 420) !important; top: calc(var(--u) * -48) !important; right: calc(var(--u) * -48) !important; border-radius: calc(var(--u) * 60) !important; border-width: 1.5px !important; } #vx-hero#vx-hero#vx-hero#vx-hero .elementor-element-168cf54::after { width: calc(var(--u) * 642.75) !important; height: calc(var(--u) * 411.75) !important; top: calc(var(--u) * -96) !important; right: calc(var(--u) * -96) !important; border-radius: calc(var(--u) * 90) calc(var(--u) * 90) calc(var(--u) * 48) calc(var(--u) * 90) !important; border-width: 1.5px !important; } #vx-hero#vx-hero#vx-hero#vx-hero .elementor-element-83fef71::before { width: calc(var(--u) * 540) !important; height: calc(var(--u) * 408.75) !important; top: calc(var(--u) * -126.5) !important; right: calc(var(--u) * -144) !important; border-radius: calc(var(--u) * 108) calc(var(--u) * 108) calc(var(--u) * 36) calc(var(--u) * 108) !important; border-width: 1.5px !important; } } /* ===== Tablet (<=1024) — unpin the hero's 1280px container ===== */ /* .elementor-element-c3fb4be (the container whose Elementor "CSS ID" field literally contains the string ".bannercont") stays pinned to --width:1280px with max-width:none and align-self:center under the plugin tablet CSS. At 768 that centres a 1280 box inside a 752 box, so it hangs 256px off the LEFT and the headline reads "nterprise / ence you control." --width is a custom property, so it INHERITS: unpinning the container alone makes it worse, because fd294ea and 785ce6a each independently consume the inherited --width via the generic .e-con{width:var(--width)} rule. All three have to be unpinned together, plus the 896px-wide title. Measured #vx-hero horizontal overflow (px past the viewport): vw 1024 900 834 768 was 138 200 233 266 now 0 0 0 0 and document.scrollWidth == innerWidth at every tested width. No-op at >=1025 by construction. */ @media (max-width: 1024px) { #vx-hero#vx-hero#vx-hero#vx-hero .elementor-element-c3fb4be, #vx-hero#vx-hero#vx-hero#vx-hero .elementor-element-fd294ea, #vx-hero#vx-hero#vx-hero#vx-hero .elementor-element-785ce6a { --width: 100% !important; width: 100% !important; max-width: 100% !important; } #vx-hero#vx-hero#vx-hero#vx-hero .elementor-element-9d54760, #vx-hero#vx-hero#vx-hero#vx-hero .elementor-element-9d54760 h1 { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } } /* The offerings eyebrow ("01 02 03" rail) is absolutely positioned with left:-64px; at <=1024 that is 64px of real overflow. Scoped to >=901 because a pre-existing max-width:900px rule already flips it to the other side there, and overriding it below 901 reintroduced an offender where the baseline was clean. */ @media (min-width: 901px) and (max-width: 1024px) { #offerings#offerings#offerings#offerings .elementor-element-0f79894 { width: auto !important; right: 64px !important; } } /* ===== 1025-1439: the same 1280px pin, scaled by the design pixel ===== */ /* The hero fluid layer scaled #vx-hero and .elementor-element-c3c2f03 (the 1440 banner box) but never touched the 1280 content column, which is a hard --width:1280px at EVERY width. Correct at 1440 (1280 @ x=80, the signed-off 80px gutter) but from 1279 down it is wider than the viewport and, because align-self is center, it hangs off BOTH sides and clips the headline. fd294ea and 785ce6a each declare their own --width:1280px, so they do NOT inherit the parent's scaled value and have to be scaled explicitly. max-width stays none on those two: they intentionally overflow c3fb4be's 10px padding by 20px at 1440, and clamping them to 100% would introduce a 20px step at the 1439/1440 boundary. Measured: 1440 -> c3fb 1280@80, fd 1280@90, h1 896@90 (identical to the baseline). 1439 -> 1279 (continuous). 1025 -> 911@57, right edge 968 < 1025. Zero elements wider than the viewport across all eight sections at 1300/1200/1100/1025. */ @media (min-width: 1025px) and (max-width: 1439px) { #vx-hero#vx-hero#vx-hero#vx-hero .elementor-element-c3fb4be { --width: calc(var(--u) * 1280) !important; width: calc(var(--u) * 1280) !important; max-width: 100% !important; } #vx-hero#vx-hero#vx-hero#vx-hero .elementor-element-fd294ea, #vx-hero#vx-hero#vx-hero#vx-hero .elementor-element-785ce6a { --width: calc(var(--u) * 1280) !important; width: calc(var(--u) * 1280) !important; max-width: none !important; } } /* ===== 1025-1439: correct the hero banner's top padding ===== */ /* The hero fluid layer pins .elementor-element-c3c2f03 to padding: calc(var(--u)*20) calc(var(--u)*31) calc(var(--u)*8), but the real computed padding-top at 1440 is 115px, not 20px (the 20 came from an earlier computed-style dump, taken before the 1280 content column was introduced). The wrong N collapsed the hero content 95px upward for the entire 1025-1439 band. That is what made the nav pill sit on top of the "Multimodal / Agentic / Enterprise" kicker and the headline: the pill is position:absolute; top:var(--vx-hdr-top, 124px) and did not move, while the content jumped up under it. It also made 1439 differ from 1440 by 95px, so the two ranges did not meet. Verified: with padding-top 115u, 1439 now matches 1441 on every one of 20 properties across 18 hero elements (the only remaining diff is #vx-hero's own min-height, which the layer sets deliberately). The other three padding sides (31 / 8) were already correct and are left alone. */ @media (min-width: 1025px) and (max-width: 1439px) { #vx-hero#vx-hero#vx-hero#vx-hero > .elementor-element-c3c2f03 { padding-top: calc(var(--u) * 115) !important; } } /* ===== 1025-1439: scale the global nav pill's offset with the design ===== */ /* The pill is a page-wide overlay (position:absolute; top:var(--vx-hdr-top,124px) when unscrolled; position:fixed; top:16px once scrolled). 124 is a hard desktop value, so as the hero content scaled down the pill stayed put and the gap closed. Scoped to body.page-id-23169 so the shared header component on the other ~90 pages is untouched, and only the unscrolled offset is affected. min(1px, 100vw/1440) is spelled out rather than var(--u) because --u is declared on #vx-hero and the pill lives outside it. Clearance from the pill's bottom to the kicker's top: vw 1440 1439 1300 1200 1100 1050 1025 was 32 31 10 -5 -20 ... -32 (overlapping) now 32 31 22 16 9 6 4 1439 = 123.91px, continuous with the untouched 124px at 1440. */ @media (min-width: 1025px) and (max-width: 1439px) { body.page-id-23169 { --vx-hdr-top: calc(min(1px, 100vw / 1440) * 124); } } /* ===== MOBILE HERO 390 (<=767) ===== Figma Home - Mobile (390) node 2060:694 puts the nav INSIDE the hero panel: wordmark x41 centre y71, hamburger flush right, kicker y122, h1 from y170. Live did none of that: the nav is a page-wide overlay pinned to top:var(--vx-hdr-top,124px) while the hero copy started at y67, so the VISIONX wordmark and the hamburger rendered ON TOP of the headline (pill 124-210 vs kicker 67-87, h1 from 119). 1. pill top 124 -> 28 => logo 47-84, centre 71 == design. 2. pill padding-inline 20 -> 41 so the wordmark lines up with the panel's own content inset; logo 144x48 -> 112x37, the design size. 3. copy column padding-top 10 -> 65 => kicker 122, h1 174. Nothing else moves: the video block is absolute against c3fb4be's padding box and padding-top does not shift that box's origin. 4. panel 634 -> 719 tall, hero padding-bottom 48 -> 18. The panel was 85px short so the video card (568-747) hung 81px out of its bottom into the bare strip below. 32 + 719 + 18 still == 769, so the section does not grow. Caption 144px/12.5px -> 232px/14px (it wrapped to a cramped 3 lines); play button 20 -> 28. Nav rules scoped to body.page-id-23169: the pill is the shared header on ~90 other pages. Measured after: pill 28, kicker 122, h1 174, panel 719, card 568, hero 769, docSW == 390. */ @media (max-width: 767px) { body.page-id-23169 { --vx-hdr-top: 28px; } body.page-id-23169 .elementor-element-227b78df { padding-left: 41px !important; padding-right: 41px !important; } body.page-id-23169 .elementor-element-227b78df .elementor-widget-theme-site-logo img { width: 112px !important; height: 37px !important; } #vx-hero#vx-hero#vx-hero#vx-hero { padding-bottom: 18px !important; } #vx-hero#vx-hero#vx-hero#vx-hero > .elementor-element-c3c2f03 { height: 719px !important; min-height: 719px !important; } #vx-hero#vx-hero#vx-hero#vx-hero .elementor-element-c3fb4be { padding-top: 65px !important; } #vx-hero#vx-hero#vx-hero#vx-hero .vx-video-meta { width: 232px !important; max-width: 232px !important; } #vx-hero#vx-hero#vx-hero#vx-hero .vx-video-title { font-size: 14px !important; line-height: 1.28 !important; } #vx-hero#vx-hero#vx-hero#vx-hero .vx-video-play { width: 28px !important; height: 28px !important; grid-template-columns: 28px !important; grid-template-rows: 28px !important; } } /* The logo width above lost the specificity fight: the header component declares .elementor-23602 .elementor-element.elementor-element-227b78df .elementor-element-b69d369 img{width:144px!important} = (0,4,1), which beats a .elementor-widget-theme-site-logo selector. Doubling the widget's own class gets to (0,4,2). Verified: logo 112x37 @41,47 (design x41). */ @media (max-width: 767px) { body.page-id-23169 .elementor-element-227b78df .elementor-element-b69d369.elementor-element-b69d369 img { width: 112px !important; height: 37px !important; } } /* Reusable homepage — match the current staging homepage container and type scale. * Intentionally scoped to page 22853 and desktop only. */ @media (min-width: 1180px) { body.page-id-22853 .vx-home-page-root--reusable { --vx-reference-content: min(1280px, 88.8889vw); } body.page-id-22853 .vx-home-page-root--reusable .vx-home-section-widget { --vx-home-content: var(--vx-reference-content); --vx-home-gutter: max(24px, calc((100vw - var(--vx-reference-content)) / 2)); } /* Hero: its outer geometry already matches the reference. */ body.page-id-22853 .vx-home-page-root--reusable #vx-hero .vx-kicker { font-size: min(18px, 1.25vw) !important; line-height: 1.2 !important; } /* Industries / use cases. */ body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-industries > .vx-home-inner { width: var(--vx-reference-content) !important; max-width: var(--vx-reference-content) !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-industries .vx-home-use-cases__head, body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-industries .vx-home-industries { width: min(1064px, 73.8889vw) !important; max-width: min(1064px, 73.8889vw) !important; margin-inline: auto !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-industries .vx-home-kicker { font-size: min(19.2px, 1.3333vw) !important; line-height: 1.4 !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-industries .vx-home-use-cases__head h2 { font-size: min(32px, 2.2222vw) !important; line-height: 1.3 !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-industries .vx-home-use-cases__head > p, body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-industries .vx-home-industry__message p { font-size: min(38.4px, 2.6667vw) !important; line-height: 1.3 !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-industries .vx-home-industry .vx-gcs-accordion__trigger { font-size: min(22.4px, 1.5556vw) !important; line-height: 1.3 !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-industries .vx-home-industry.is-open .vx-gcs-accordion__trigger { font-size: min(25.6px, 1.7778vw) !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-industries .vx-home-industry__message .vx-gcs-button { font-size: min(16px, 1.1111vw) !important; line-height: 1 !important; } /* Why VisionX: the artwork composition scales with the same 1280px reference container. */ body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-why { height: min(1203px, 83.5417vw) !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-why .vx-home-heading h2 { font-size: 64px !important; line-height: 1.3 !important; } /* Offerings. */ body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-offerings .vx-home-offerings__feature > div { width: min(645px, 44.7917vw) !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-offerings .vx-home-kicker { font-size: min(18px, 1.25vw) !important; line-height: 1.4 !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-offerings .vx-home-offerings__feature h2 { font-size: min(60px, 4.1667vw) !important; line-height: 1 !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-offerings .vx-home-offering > span { font-size: min(190px, 13.1944vw) !important; line-height: min(150px, 10.4167vw) !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-offerings .vx-home-offering h3 { font-size: min(21.75px, 1.5104vw) !important; line-height: 1.24 !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-offerings .vx-home-offering p { font-size: min(21px, 1.4583vw) !important; line-height: 1.38 !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-offerings .vx-home-offering a { font-size: min(18px, 1.25vw) !important; line-height: 1.22 !important; } /* Modalities. */ body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-modalities > .vx-home-inner { width: var(--vx-reference-content) !important; max-width: var(--vx-reference-content) !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-modalities .vx-home-kicker { font-size: min(18px, 1.25vw) !important; line-height: 1.4 !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-modalities .vx-home-heading h2 { font-size: min(48px, 3.3333vw) !important; line-height: 1 !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-modalities .vx-home-modality-card h3 { font-size: min(22.5px, 1.5625vw) !important; line-height: 1.2 !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-modalities .vx-home-modality-card p { font-size: min(19.5px, 1.3542vw) !important; line-height: 1.4 !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-modalities .vx-home-modality-card a { font-size: min(18px, 1.25vw) !important; line-height: 1.22 !important; } /* Deployment. */ body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-deployment .vx-home-kicker { font-size: min(15px, 1.0417vw) !important; line-height: 1 !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-deployment .vx-home-deployment__head h2 { font-size: min(48px, 3.3333vw) !important; line-height: 1 !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-deployment .vx-home-deploy-card h3 { font-size: min(37.5px, 2.6042vw) !important; line-height: 1 !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-deployment .vx-home-deploy-card > p { font-size: min(21px, 1.4583vw) !important; line-height: 1.4 !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-deployment .vx-home-meter { font-size: min(18px, 1.25vw) !important; line-height: 1 !important; } /* Production proof. */ body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-proof .vx-home-proof__head h2 { font-size: min(48px, 3.3333vw) !important; line-height: 1 !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-proof .vx-home-proof__head p { font-size: min(18px, 1.25vw) !important; line-height: 1.4 !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-proof .vx-home-proof__metrics strong { font-size: min(40px, 2.7778vw) !important; line-height: 1 !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-proof .vx-home-proof__metrics span { font-size: min(18px, 1.25vw) !important; line-height: 1.2 !important; } /* Footer. */ body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-contact { padding-inline: 0 !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-contact .vx-gcs-inner { width: var(--vx-reference-content) !important; max-width: var(--vx-reference-content) !important; padding-inline: 0 !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-contact .vx-gcs-footer__top { grid-template-columns: min(305px, 21.1806vw) minmax(0, 1fr) !important; gap: min(20px, 1.3889vw) !important; padding-inline: 0 !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-contact .vx-gcs-footer__brand { padding-inline: 0 !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-contact .vx-gcs-footer__links { grid-template-columns: repeat(3, minmax(0, min(305px, 21.1806vw))) !important; gap: min(20px, 1.3889vw) !important; padding-inline: 0 !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-contact .vx-gcs-footer__brand > p { max-width: min(305px, 21.1806vw) !important; font-size: min(18px, 1.25vw) !important; line-height: 1.5 !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-contact .vx-gcs-footer__links h3 { font-size: min(15px, 1.0417vw) !important; line-height: 1.56 !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-contact .vx-gcs-footer__links div div, body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-contact .vx-gcs-footer__links a, body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-contact .vx-gcs-footer__bottom { font-size: min(13.5px, .9375vw) !important; line-height: 2.6667 !important; } } @media (min-width: 1180px) { body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-offerings#vx-reusable-offerings .vx-home-offerings__feature > div { width: min(645px, 44.7917vw) !important; max-width: min(645px, 44.7917vw) !important; } } @media (min-width: 1180px) { body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-offerings#vx-reusable-offerings .vx-home-offerings__feature > div { min-width: 0 !important; right: auto !important; } } /* Reusable homepage — Offerings mobile cleanup and Modalities card layout. * Scoped to page 22853 only. */ @media (min-width: 1180px) { body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-modalities#vx-reusable-modalities { min-height: 0 !important; padding: 80px 0 80px !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-modalities#vx-reusable-modalities > .vx-home-inner { width: min(1280px, 88.8889vw) !important; max-width: min(1280px, 88.8889vw) !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-modalities#vx-reusable-modalities .vx-home-modalities__grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: min(18px, 1.25vw) !important; width: 100% !important; margin-top: min(61px, 4.2361vw) !important; overflow: visible !important; scroll-snap-type: none !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-modalities#vx-reusable-modalities .vx-home-modality-card { width: auto !important; min-width: 0 !important; height: min(375px, 26.0417vw) !important; min-height: min(375px, 26.0417vw) !important; max-height: min(375px, 26.0417vw) !important; flex: none !important; aspect-ratio: auto !important; border-radius: min(36px, 2.5vw) !important; scroll-snap-align: none !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-modalities#vx-reusable-modalities .vx-home-modality-card > img { top: min(11.25px, .7813vw) !important; left: max(-55.5px, -3.8542vw) !important; width: min(288px, 20vw) !important; height: min(192px, 13.3333vw) !important; max-width: none !important; object-fit: cover !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-modalities#vx-reusable-modalities .vx-home-modality-card > div { top: min(206.25px, 14.3229vw) !important; left: min(22.5px, 1.5625vw) !important; right: min(25.5px, 1.7708vw) !important; bottom: auto !important; } } @media (max-width: 767px) { body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-offerings#vx-reusable-offerings .vx-home-offerings__list { gap: 0 !important; padding: 40px 22px 40px !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-offerings#vx-reusable-offerings .vx-home-offering { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; min-height: 0 !important; height: auto !important; padding: 32px 0 40px !important; overflow: visible !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-offerings#vx-reusable-offerings .vx-home-offering > span { position: static !important; left: auto !important; top: auto !important; align-self: auto !important; height: auto !important; margin: 0 0 -8px !important; font-size: 64px !important; line-height: .9 !important; letter-spacing: -.06em !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-offerings#vx-reusable-offerings .vx-home-offering > div { width: 100% !important; min-width: 0 !important; padding: 0 !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-offerings#vx-reusable-offerings .vx-home-offering:not(:last-child)::after { left: 0 !important; right: 0 !important; bottom: 0 !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-offerings#vx-reusable-offerings .vx-home-offering h3 { font-size: 24px !important; line-height: 1.2 !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-offerings#vx-reusable-offerings .vx-home-offering p { margin-top: 12px !important; font-size: 18px !important; line-height: 1.45 !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-offerings#vx-reusable-offerings .vx-home-offering a { font-size: 17px !important; line-height: 1.3 !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-modalities#vx-reusable-modalities .vx-home-modalities__grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; width: 100% !important; margin-top: 45px !important; overflow: visible !important; overscroll-behavior-inline: auto !important; scroll-snap-type: none !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-modalities#vx-reusable-modalities .vx-home-modality-card { width: 100% !important; min-width: 0 !important; max-width: none !important; height: 250px !important; min-height: 250px !important; flex: none !important; flex-basis: auto !important; scroll-snap-align: none !important; } } /* Reusable homepage — large-screen Why canvas and horizontal mobile Offerings. * Scoped to page 22853 only. */ @media (min-width: 1920px) { body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-why#vx-reusable-why { height: 1504px !important; min-height: 1504px !important; margin-bottom: 0 !important; overflow: hidden !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-why#vx-reusable-why > .vx-home-inner { position: relative !important; left: 50% !important; width: 1600px !important; max-width: none !important; height: 1504px !important; margin-left: -800px !important; margin-right: 0 !important; transform: none !important; transform-origin: top center !important; } } @media (max-width: 767px) { body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-offerings#vx-reusable-offerings .vx-home-offering { display: grid !important; grid-template-columns: 64px minmax(0, 1fr) !important; gap: 16px !important; min-height: 0 !important; height: auto !important; padding: 30px 0 36px !important; overflow: hidden !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-offerings#vx-reusable-offerings .vx-home-offering > span { position: static !important; left: auto !important; top: auto !important; align-self: start !important; width: 64px !important; height: auto !important; margin: 5px 0 0 -2px !important; font-size: 56px !important; line-height: .9 !important; letter-spacing: -.06em !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-offerings#vx-reusable-offerings .vx-home-offering > div { width: auto !important; min-width: 0 !important; padding: 0 !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-offerings#vx-reusable-offerings .vx-home-offering:not(:last-child)::after { left: 80px !important; right: 0 !important; bottom: 0 !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-offerings#vx-reusable-offerings .vx-home-offering h3 { font-size: 22px !important; line-height: 1.2 !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-offerings#vx-reusable-offerings .vx-home-offering p { margin-top: 12px !important; font-size: 18px !important; line-height: 1.45 !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-offerings#vx-reusable-offerings .vx-home-offering a { font-size: 17px !important; line-height: 1.3 !important; } } /* Reusable homepage — contain the Offerings grid while preserving left artwork bleed. * Scoped to page 22853 only. */ @media (min-width: 1180px) { body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-offerings#vx-reusable-offerings { --vx-offerings-outer: min(1280px, 88.8889vw); --vx-offerings-side: calc((100vw - var(--vx-offerings-outer)) / 2); width: var(--vx-offerings-outer) !important; max-width: var(--vx-offerings-outer) !important; margin-inline: auto !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-offerings#vx-reusable-offerings .vx-home-offerings__feature > div { left: 0 !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-offerings#vx-reusable-offerings .vx-home-offerings__feature > img { left: calc(0px - var(--vx-offerings-side)) !important; width: calc(100% + var(--vx-offerings-side)) !important; max-width: none !important; } } /* Reusable homepage — full-bleed Offerings feature with contained right column. * Scoped to page 22853 only. */ @media (min-width: 1180px) { body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-offerings#vx-reusable-offerings { --vx-offerings-outer: min(1280px, 88.8889vw); --vx-offerings-side: calc((100vw - var(--vx-offerings-outer)) / 2); width: 100% !important; max-width: none !important; margin-inline: 0 !important; grid-template-columns: calc(var(--vx-offerings-side) + min(720px, 50vw)) min(560px, 38.8889vw) var(--vx-offerings-side) !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-offerings#vx-reusable-offerings .vx-home-offerings__feature { grid-column: 1 !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-offerings#vx-reusable-offerings .vx-home-offerings__list { grid-column: 2 !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-offerings#vx-reusable-offerings .vx-home-offerings__feature > div { left: var(--vx-offerings-side) !important; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-offerings#vx-reusable-offerings .vx-home-offerings__feature > img { left: 0 !important; width: 100% !important; max-width: none !important; } } /* Use the rendered page width rather than 100vw so the Offerings container * stays aligned when a vertical scrollbar is present. */ @media (min-width: 1180px) { body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-offerings#vx-reusable-offerings { --vx-offerings-side: calc((100% - var(--vx-offerings-outer)) / 2); } } @media (min-width: 1180px) { body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-offerings#vx-reusable-offerings .vx-home-offerings__feature > div { left: calc(100% - min(720px, 50vw)) !important; } } /* Reusable homepage responsive finishing pass. * Scoped to page 22853. Deliberately avoids !important so Elementor controls * remain available for later visual adjustments. */ @media (max-width: 767px) { body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-offerings#vx-reusable-offerings .vx-home-offerings__feature { min-height: 560px; } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-offerings#vx-reusable-offerings .vx-home-offerings__feature h2 { font-size: 28px; line-height: 1.1; } } @media (max-width: 1024px) { body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-proof#vx-reusable-proof .vx-home-proof__metrics { } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-proof#vx-reusable-proof .vx-home-proof__metrics article { border-right: 0; border-bottom: 1px solid rgba(3, 2, 9, .12); } body.page-id-22853 .vx-home-page-root--reusable #vx-reusable-proof#vx-reusable-proof .vx-home-proof__metrics article:last-child { border-bottom: 1px solid rgba(3, 2, 9, .12); } } /* Use the global Theme Builder footer on this page and suppress the duplicate * footer widget embedded in the page document on the public view. */ body.page-id-22853:not(.elementor-editor-active).page-id-22853 footer.elementor-location-footer.elementor-location-footer { display: block; } body.page-id-22853:not(.elementor-editor-active).page-id-22853 #vx-reusable-contact#vx-reusable-contact { display: none; }