/* Generated from checked-in ordered modules; do not edit. */
/* css/modules/features/foundation-layout.css */ :root { --bg: #f6faff; --bg-2: #eef6ff; --white: #ffffff; --ink: #071b3a; --text: #29405f; --muted: #5a6f8c; --line: rgba(31, 123, 255, 0.16); --line-strong: rgba(31, 123, 255, 0.28); --blue: #1f7bff; --blue-2: #69a9ff; --blue-dark: #0b4cbd; --shadow: 0 24px 80px rgba(15, 55, 115, 0.12); --shadow-soft: 0 16px 48px rgba(15, 55, 115, 0.08); --radius-lg: 34px; --radius-md: 24px; --container: 1180px; } @media (max-width: 640px) { :where(.hero-actions, .cases-actions, .heatmaster-actions, .mg-actions) > .btn { min-height: 44px !important; } }
/* css/modules/responsive/aquasync-responsive-max-width-1180px.css */ body.aquasync-route .aquasync-page { background: #f4fbff; color: #09263b; } body.aquasync-route .aquasync-slide { position: relative; isolation: isolate; min-height: 100svh; overflow: hidden; padding: 0; background: #f4fbff; } body.aquasync-route .aquasync-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; max-width: none; object-fit: fill; object-position: center; filter: none; opacity: 1; pointer-events: none; } body.aquasync-route .aquasync-inner { position: relative; z-index: 1; min-height: 100svh; } body.aquasync-route .aquasync-copy { width: min(56%, 760px); padding-top: clamp(52px, 7svh, 96px); padding-bottom: clamp(48px, 7svh, 88px); color: #0a2c42; overflow-wrap: normal; word-break: normal; hyphens: manual; } body.aquasync-route .aquasync-copy--left { margin-right: auto; } body.aquasync-route .aquasync-copy--right { margin-left: auto; } body.aquasync-route .aquasync-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; color: #168d76; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } body.aquasync-route .aquasync-kicker::before { width: 28px; height: 2px; content: ""; background: #42b883; } body.aquasync-route .aquasync-copy h1, body.aquasync-route .aquasync-copy h2, body.aquasync-route .aquasync-process-copy h2 { max-width: 820px; margin-bottom: 16px; color: #061c30; letter-spacing: 0; line-height: 1.06; overflow-wrap: normal; word-break: normal; hyphens: manual; } body.aquasync-route .aquasync-copy h1 { font-size: clamp(40px, 4.6vw, 68px); } body.aquasync-route .aquasync-copy h2, body.aquasync-route .aquasync-process-copy h2 { font-size: clamp(32px, 3.35vw, 50px); } body.aquasync-route .aquasync-copy p, body.aquasync-route .aquasync-copy li, body.aquasync-route .aquasync-process-copy p, body.aquasync-route .aquasync-process-note p { color: #25445a; font-size: clamp(16px, 1.22vw, 19px); line-height: 1.46; overflow-wrap: normal; word-break: normal; hyphens: manual; } body.aquasync-route .aquasync-lead { color: #11324a; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.34; } body.aquasync-route .aquasync-result { color: #0e334f; } body.aquasync-route .aquasync-copy p + p { margin-top: 12px; } body.aquasync-route .aquasync-list { display: grid; gap: 7px; margin-top: 16px; padding-left: 0; list-style: none; } body.aquasync-route .aquasync-list li { position: relative; padding-left: 22px; } body.aquasync-route .aquasync-list li::before { position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; content: ""; background: #20a6c9; } body.aquasync-route .aquasync-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } body.aquasync-route .aquasync-actions .btn { white-space: normal; } body.aquasync-route .aquasync-actions .btn-primary { border-color: #0b80a8; background: #0b80a8; color: #ffffff; } body.aquasync-route .aquasync-actions .btn-secondary { border-color: rgba(11, 128, 168, 0.28); background: rgba(255, 255, 255, 0.72); color: #075c78; } body.aquasync-route .aquasync-process-inner { display: grid; min-height: 100svh; grid-template-rows: minmax(0, 31svh) minmax(0, 39svh) minmax(0, 30svh); } body.aquasync-route .aquasync-process-copy { align-self: end; max-width: 1120px; padding-bottom: clamp(8px, 1.8svh, 16px); color: #0a2c42; overflow-wrap: normal; word-break: normal; hyphens: manual; } body.aquasync-route .aquasync-process-copy h2 { max-width: 1120px; margin-bottom: 10px; } body.aquasync-route .aquasync-process-copy p { max-width: 980px; } body.aquasync-route .aquasync-process-note { grid-row: 3; align-self: start; max-width: 1160px; padding-top: clamp(10px, 1.8svh, 18px); overflow-wrap: normal; word-break: normal; hyphens: manual; } body.aquasync-route .aquasync-process-note p + p { margin-top: 10px; } @media (max-width: 1180px) { body.aquasync-route .aquasync-copy { width: min(58%, 700px); } } @media (max-height: 820px) and (min-width: 781px) { body.aquasync-route .aquasync-copy { padding-top: clamp(34px, 5svh, 58px); padding-bottom: clamp(30px, 5svh, 54px); } } @media (max-height: 820px) and (min-width: 781px) { body.aquasync-route .aquasync-copy h1 { font-size: clamp(36px, 4vw, 58px); } } @media (max-height: 820px) and (min-width: 781px) { body.aquasync-route .aquasync-copy h2, body.aquasync-route .aquasync-process-copy h2 { font-size: clamp(28px, 3vw, 42px); } } @media (max-height: 820px) and (min-width: 781px) { body.aquasync-route .aquasync-copy p, body.aquasync-route .aquasync-copy li, body.aquasync-route .aquasync-process-copy p, body.aquasync-route .aquasync-process-note p { font-size: clamp(15px, 1.08vw, 17px); line-height: 1.36; } } @media (max-width: 780px) { body.aquasync-route .aquasync-slide { min-height: auto; overflow: visible; padding: 0; background: #f4fbff; } } @media (max-width: 780px) { body.aquasync-route .aquasync-bg, body.aquasync-route [data-slide-background], body.aquasync-route [data-role="immutable-background"] { display: none !important; } } @media (max-width: 780px) { body.aquasync-route .aquasync-inner, body.aquasync-route .aquasync-process-inner { display: block; min-height: auto; padding-top: clamp(42px, 10vw, 72px); padding-bottom: clamp(42px, 10vw, 72px); } } @media (max-width: 780px) { body.aquasync-route .aquasync-copy, body.aquasync-route .aquasync-copy--left, body.aquasync-route .aquasync-copy--right, body.aquasync-route .aquasync-process-copy, body.aquasync-route .aquasync-process-note { width: 100%; max-width: none; margin: 0; padding: 0; } } @media (max-width: 780px) { body.aquasync-route .aquasync-process-note { margin-top: 20px; } } @media (max-width: 780px) { body.aquasync-route .aquasync-copy h1 { font-size: clamp(34px, 10vw, 46px); } } @media (max-width: 780px) { body.aquasync-route .aquasync-copy h2, body.aquasync-route .aquasync-process-copy h2 { font-size: clamp(28px, 8vw, 38px); } } @media (max-width: 780px) { body.aquasync-route .aquasync-copy p, body.aquasync-route .aquasync-copy li, body.aquasync-route .aquasync-process-copy p, body.aquasync-route .aquasync-process-note p { font-size: clamp(16px, 4.4vw, 18px); line-height: 1.48; } } @media (max-width: 780px) { body.aquasync-route .aquasync-lead { font-size: clamp(18px, 5vw, 21px); } } @media (max-width: 780px) { body.aquasync-route .aquasync-actions { gap: 10px; margin-top: 22px; } } @media (max-width: 780px) { body.aquasync-route .aquasync-actions .btn { width: 100%; min-height: 46px; justify-content: center; padding: 12px 16px; } }
/* css/modules/responsive/aquasync-responsive-max-width-420px.css */ @media (max-width: 420px) { body.aquasync-route .aquasync-copy h1 { font-size: clamp(31px, 9vw, 38px); } } @media (max-width: 420px) { body.aquasync-route .aquasync-copy h2, body.aquasync-route .aquasync-process-copy h2 { font-size: clamp(25px, 7.4vw, 32px); } }
/* css/modules/responsive/leak-control-responsive-max-width-780px.css */ @media (max-width: 780px) { [data-role="immutable-background"], [data-role="abstract-background"], [data-slide-background], [data-visual-role*="background"], img[aria-hidden="true"][class*="-bg"], img[aria-hidden="true"][class*="bg-"], .products-wf-bg, .mg-wf-bg, .pm-wf-bg, .software-bg, .electronics-bg, .development-v2-bg, .development-index-bg, .rf-bg, .leak-bg, .leak-slide-bg, .askue-bg, .cases-bg, .grocery-bg, .hvac-bg, .wastewater-bg, .ventilation-bg, .refrigeration-bg, .dev-auto-bg { display: none !important; } } @media (max-width: 780px) { [data-background-asset], [class*="-slide"], [class*="-section"], [class*="-hero"], [class*="-route"] { background-image: none !important; } }
/* css/modules/responsive/development-index-responsive-max-width-1100px.css */ /* Development index Phase 3 integration */ .development-index-route { background: #f7fbff; } .development-index-route .generated-page { background: #f7fbff; } .development-index-section, .development-index-section * { overflow-wrap: normal; word-break: normal; hyphens: manual; } .development-index-section { position: relative; isolation: isolate; overflow: hidden; padding: 0; color: #071b3a; background: #f7fbff; } .development-index-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; max-width: none; object-fit: fill; object-position: center; filter: none; opacity: 1; pointer-events: none; } .development-index-inner { position: relative; z-index: 1; padding-top: clamp(58px, 7vw, 104px); padding-bottom: clamp(64px, 8vw, 118px); } .development-index-head { max-width: 1080px; } .development-index-head h1 { max-width: 980px; margin-bottom: 22px; color: #071b3a; font-size: clamp(42px, 5vw, 72px); line-height: 1.02; overflow-wrap: normal; word-break: normal; } .development-index-head p { max-width: 980px; margin-bottom: 14px; color: #29405f; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.52; } .development-index-head .development-index-lead { color: #102b4c; font-size: clamp(19px, 1.65vw, 24px); font-weight: 650; line-height: 1.38; } .development-index-message { margin-top: 18px; padding: 18px 20px; border: 1px solid rgba(31, 123, 255, 0.16); border-radius: 8px; background: rgba(255, 255, 255, 0.76); box-shadow: 0 18px 48px rgba(15, 55, 115, 0.08); } .development-index-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 26px); margin-top: clamp(34px, 4vw, 52px); } .development-index-card { min-width: 0; display: flex; } .development-index-card-link { min-width: 0; display: flex; width: 100%; flex-direction: column; overflow: hidden; border: 1px solid rgba(31, 123, 255, 0.16); border-radius: 8px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 18px 50px rgba(15, 55, 115, 0.1); transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } .development-index-card-link:hover, .development-index-card-link:focus-visible { transform: translateY(-6px); border-color: rgba(31, 123, 255, 0.34); box-shadow: 0 24px 68px rgba(15, 55, 115, 0.15); } .development-index-card-link:focus-visible { outline: 3px solid rgba(31, 123, 255, 0.28); outline-offset: 4px; } .development-index-media { display: block; aspect-ratio: 16 / 9; background: #eef6ff; } .development-index-media img { width: 100%; height: 100%; object-fit: contain; object-position: center; } .development-index-card-body { display: flex; flex: 1; flex-direction: column; padding: clamp(20px, 2vw, 28px); } .development-index-card-kicker { margin-bottom: 12px; color: #0b4cbd; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .development-index-card h2 { margin-bottom: 14px; color: #071b3a; font-size: clamp(25px, 2vw, 32px); line-height: 1.08; } .development-index-card p, .development-index-card strong { color: #29405f; font-size: 15.5px; line-height: 1.48; } .development-index-card p { margin-bottom: 14px; } .development-index-card strong { margin-top: 4px; margin-bottom: 7px; color: #102b4c; } .development-index-card-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px; color: #0b4cbd; font-weight: 800; } .development-index-card-cta span { transition: transform 180ms ease; } .development-index-card-link:hover .development-index-card-cta span, .development-index-card-link:focus-visible .development-index-card-cta span { transform: translateX(4px); } .development-index-cta { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-top: clamp(28px, 4vw, 48px); padding: clamp(22px, 2.5vw, 30px); border: 1px solid rgba(31, 123, 255, 0.18); border-radius: 8px; background: rgba(255, 255, 255, 0.84); box-shadow: 0 18px 54px rgba(15, 55, 115, 0.1); } .development-index-cta p { max-width: 820px; margin: 0; color: #102b4c; font-size: clamp(18px, 1.5vw, 22px); font-weight: 650; line-height: 1.34; } @media (max-width: 1100px) { .development-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1100px) { .development-index-card:last-child { grid-column: 1 / -1; } } @media (max-width: 760px) { .development-index-section { padding: 0; } } @media (max-width: 760px) { .development-index-inner { padding-top: 40px; padding-bottom: 56px; } } @media (max-width: 760px) { .development-index-head h1 { font-size: clamp(33px, 9vw, 44px); line-height: 1.04; } } @media (max-width: 760px) { .development-index-head p, .development-index-head .development-index-lead { font-size: 16px; line-height: 1.42; } } @media (max-width: 760px) { .development-index-message { padding: 16px; } } @media (max-width: 760px) { .development-index-grid { grid-template-columns: 1fr; margin-top: 28px; } } @media (max-width: 760px) { .development-index-card:last-child { grid-column: auto; } } @media (max-width: 760px) { .development-index-card-body { padding: 18px; } } @media (max-width: 760px) { .development-index-card h2 { font-size: 26px; } } @media (max-width: 760px) { .development-index-card p, .development-index-card strong { font-size: 15px; line-height: 1.42; } } @media (max-width: 760px) { .development-index-cta { align-items: stretch; flex-direction: column; } } @media (max-width: 760px) { .development-index-cta .btn { width: 100%; } } /* Development index v2: two-slide structure from approved wireframe */ .development-index-route .development-v2-slide, .development-index-route .development-v2-slide * { overflow-wrap: normal; word-break: normal; hyphens: manual; letter-spacing: 0; } .development-index-route .development-v2-slide { position: relative; isolation: isolate; overflow: hidden; background: #f7fbff; color: #071b3a; } .development-index-route .development-v2-bg { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; max-width: none; object-fit: fill; object-position: center; filter: none; opacity: 1; pointer-events: none; } .development-index-route .development-v2-hero { min-height: min(56.25vw, calc(100svh - 78px)); display: grid; align-items: center; }
/* css/modules/responsive/development-index-responsive-max-width-1100px-foundation.css */ .development-index-route .development-v2-hero-inner { box-sizing: border-box; display: grid; min-height: inherit; align-items: center; grid-template-columns: minmax(0, 0.50fr) minmax(0, 0.50fr); padding-top: clamp(44px, 5vw, 82px); padding-bottom: clamp(44px, 5vw, 82px); } .development-index-route .development-v2-hero-copy { max-width: 616px; } .development-index-route .development-v2-hero-copy h1 { max-width: 616px; margin: 0 0 22px; color: #071b3a; font-size: clamp(42px, 4.6vw, 70px); line-height: 1.02; } .development-index-route .development-v2-hero-copy p { max-width: 583px; margin: 0 0 14px; color: #29405f; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; } .development-index-route .development-v2-hero-copy .development-v2-lead { color: #102b4c; font-size: clamp(19px, 1.55vw, 24px); font-weight: 650; line-height: 1.36; } .development-index-route .development-v2-message { margin-top: 18px !important; padding: 18px 20px; border: 1px solid rgba(31, 123, 255, 0.16); border-radius: 8px; background: rgba(255, 255, 255, 0.78); box-shadow: 0 18px 48px rgba(15, 55, 115, 0.08); } .development-index-route .development-v2-hero-copy .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } .development-index-route .development-v2-directions { overflow: visible; } .development-index-route .development-v2-directions-inner { position: relative; z-index: 1; padding-top: clamp(56px, 6vw, 92px); padding-bottom: clamp(64px, 7vw, 106px); } .development-index-route .development-v2-section-head { max-width: 980px; } .development-index-route .development-v2-section-head h2 { margin: 0 0 16px; color: #071b3a; font-size: clamp(36px, 4vw, 58px); line-height: 1.04; } .development-index-route .development-v2-section-head p { max-width: 900px; margin: 0; color: #29405f; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; } .development-index-route .development-v2-grid { margin-top: clamp(30px, 3.5vw, 46px); } .development-index-route .development-v2-cta { margin-top: clamp(26px, 3.5vw, 42px); } @media (max-width: 1100px) { .development-index-route .development-v2-hero-inner { grid-template-columns: minmax(0, 0.55fr) minmax(0, 0.45fr); } } @media (max-width: 1100px) { .development-index-route .development-v2-hero-copy h1 { font-size: clamp(38px, 5.8vw, 60px); } } @media (max-width: 1500px) and (min-width: 1101px) { .development-index-route .development-v2-hero-copy h1 { margin-bottom: 16px; font-size: clamp(38px, 4.1vw, 58px); line-height: 1.03; } } @media (max-width: 1500px) and (min-width: 1101px) { .development-index-route .development-v2-hero-copy p { margin-bottom: 11px; font-size: 17px; line-height: 1.4; } } @media (max-width: 1500px) and (min-width: 1101px) { .development-index-route .development-v2-hero-copy .development-v2-lead { font-size: 20px; line-height: 1.32; } } @media (max-width: 1500px) and (min-width: 1101px) { .development-index-route .development-v2-message { margin-top: 14px !important; padding: 14px 16px; } } @media (max-width: 1500px) and (min-width: 1101px) { .development-index-route .development-v2-hero-copy .hero-actions { margin-top: 18px; } } @media (max-height: 820px) and (min-width: 761px) { .development-index-route .development-v2-hero-inner { padding-top: 24px; padding-bottom: 24px; } } @media (max-height: 820px) and (min-width: 761px) { .development-index-route .development-v2-hero-copy h1 { max-width: 664px; margin-bottom: 14px; font-size: clamp(36px, 4vw, 52px); line-height: 1.03; } } @media (max-height: 820px) and (min-width: 761px) { .development-index-route .development-v2-hero-copy p { margin-bottom: 10px; font-size: 16px; line-height: 1.34; } } @media (max-height: 820px) and (min-width: 761px) { .development-index-route .development-v2-hero-copy .development-v2-lead { font-size: 18px; line-height: 1.3; } } @media (max-height: 820px) and (min-width: 761px) { .development-index-route .development-v2-message { margin-top: 12px !important; padding: 12px 14px; } } @media (max-height: 820px) and (min-width: 761px) { .development-index-route .development-v2-hero-copy .hero-actions { margin-top: 16px; } } @media (max-width: 760px) { .development-index-route .development-v2-hero { min-height: min(216vw, calc(100svh - 70px)); } } @media (max-width: 760px) { .development-index-route .development-v2-hero-inner { display: block; padding-top: 40px; padding-bottom: 44px; } } @media (max-width: 760px) { .development-index-route .development-v2-hero-copy { max-width: none; } } @media (max-width: 760px) { .development-index-route .development-v2-hero-copy h1 { margin-bottom: 14px; font-size: clamp(30px, 8.4vw, 40px); line-height: 1.04; } } @media (max-width: 760px) { .development-index-route .development-v2-hero-copy p, .development-index-route .development-v2-hero-copy .development-v2-lead, .development-index-route .development-v2-section-head p { font-size: 16px; line-height: 1.42; } } @media (max-width: 760px) { .development-index-route .development-v2-message { padding: 12px 14px; } } @media (max-width: 760px) { .development-index-route .development-v2-hero-copy .hero-actions { flex-direction: column; } } @media (max-width: 760px) { .development-index-route .development-v2-hero-copy .btn, .development-index-route .development-v2-cta .btn { width: 100%; } } @media (max-width: 760px) { .development-index-route .development-v2-directions-inner { padding-top: 42px; padding-bottom: 56px; } } @media (max-width: 760px) { .development-index-route .development-v2-section-head h2 { font-size: clamp(30px, 8vw, 40px); } }
/* css/modules/responsive/electronics-responsive-max-width-1180px.css */ /* Electronics development landing */ .electronics-development-route, .electronics-development-route .generated-page { background: #f7fbff; color: #071b3a; } .electronics-page :where(h1, h2, h3, p, a, button, span, strong, li) { overflow-wrap: normal; word-break: normal; hyphens: manual; letter-spacing: 0; } .electronics-slide { --electronics-aspect: 1.7778958555; position: relative; isolation: isolate; display: grid; place-items: center; min-height: min(56.25vw, calc(100svh - 1px)); padding: 0; overflow: clip; background: #f7fbff; color: #071b3a; scroll-margin-top: 76px; } .electronics-frame { position: relative; width: 100%; min-height: inherit; overflow: visible; } .electronics-bg { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: fill; object-position: center; filter: none; opacity: 1; pointer-events: none; } .electronics-bg--abstract { object-fit: fill; } .electronics-hero-copy, .electronics-thesis-grid, .electronics-card-layout, .electronics-process-copy, .electronics-final-copy { position: absolute; z-index: 1; } .electronics-hero-copy { top: 9.5%; left: 5.4%; display: grid; width: 49%; gap: clamp(10px, 1.15vw, 16px); } .electronics-hero-copy h1, .electronics-process-copy h2, .electronics-final-copy h2, .electronics-section-head h2 { margin: 0; color: #071b3a; font-weight: 820; line-height: 1.03; } .electronics-hero-copy h1 { max-width: 720px; font-size: clamp(34px, 3.9vw, 64px); } .electronics-hero-copy p, .electronics-process-copy p, .electronics-final-copy p, .electronics-section-head p, .electronics-card p, .electronics-thesis p { margin: 0; color: #29405f; font-size: clamp(14px, 1.02vw, 18px); line-height: 1.46; } .electronics-hero-copy .electronics-lead { color: #102b4c; font-size: clamp(16px, 1.25vw, 21px); font-weight: 650; line-height: 1.36; } .electronics-hero-copy .hero-actions { margin-top: 4px; } .electronics-thesis-grid { right: 5.3%; bottom: 5.4%; left: 5.3%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1vw, 16px); } .electronics-thesis { min-width: 0; padding: clamp(13px, 1.25vw, 18px); border: 1px solid rgba(31, 123, 255, 0.14); border-radius: 8px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 14px 38px rgba(15, 55, 115, 0.08); } .electronics-thesis h3 { margin: 0 0 6px; color: #071b3a; font-size: clamp(15px, 1.08vw, 19px); line-height: 1.14; } .electronics-thesis p { font-size: clamp(12px, 0.82vw, 14px); line-height: 1.35; } .electronics-slide--cards { overflow: visible; } .electronics-frame--cards { width: 100%; aspect-ratio: auto; } .electronics-slide--cards .electronics-bg { object-fit: fill; } .electronics-card-layout { position: relative; inset: auto; display: grid; width: min(calc(100% - 40px), 1440px); margin: 0 auto; gap: clamp(18px, 2vw, 28px); padding: clamp(44px, 5.3vw, 76px) clamp(28px, 4.9vw, 72px); } .electronics-section-head { display: grid; gap: 10px; max-width: 1120px; } .electronics-section-head h2, .electronics-process-copy h2, .electronics-final-copy h2 { font-size: clamp(30px, 3.2vw, 54px); } .electronics-section-head p { max-width: 920px; font-size: clamp(15px, 1.08vw, 19px); } .electronics-section-note { color: #0b4cbd !important; font-weight: 720; } .electronics-grid { display: grid; gap: clamp(14px, 1.45vw, 22px); align-items: stretch; } .electronics-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .electronics-grid--six { grid-template-columns: repeat(3, minmax(0, 1fr)); } .electronics-card { min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(31, 123, 255, 0.13); border-radius: 8px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 14px 42px rgba(15, 55, 115, 0.09); } .electronics-card-media { display: block; width: 100%; aspect-ratio: 16 / 9; background: #eef7fb; } .electronics-card-media img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; filter: none; opacity: 1; } .electronics-card-body { display: grid; align-content: start; gap: 8px; padding: clamp(16px, 1.5vw, 22px); } .electronics-card h3 { margin: 0; color: #071b3a; font-size: clamp(18px, 1.55vw, 25px); line-height: 1.12; } .electronics-card p { font-size: clamp(13px, 0.96vw, 16px); line-height: 1.42; } .electronics-process-copy { top: 7.2%; left: 6.3%; display: grid; width: 72%; gap: 10px; } .electronics-process-bottom { position: absolute; right: 6%; bottom: 6%; z-index: 1; width: 1px; height: 1px; pointer-events: none; } .electronics-process-copy p { max-width: 980px; font-size: clamp(15px, 1.08vw, 19px); } .electronics-final-copy { top: 17%; left: 6%; display: grid; width: min(640px, 48%); gap: clamp(12px, 1.25vw, 18px); } .electronics-final-copy p { font-size: clamp(15px, 1.08vw, 19px); } .electronics-final-helper { color: #0b4cbd !important; font-weight: 700; } @media (max-width: 1180px) { .electronics-grid--three, .electronics-grid--six { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 820px) { .electronics-slide { display: block; padding: 0 14px; overflow: visible; } } @media (max-width: 820px) { .electronics-frame { display: flex; flex-direction: column; width: 100%; min-height: 0; aspect-ratio: auto; gap: 12px; padding: 34px 0; } } @media (max-width: 820px) { .electronics-bg, .electronics-hero-copy, .electronics-thesis-grid, .electronics-card-layout, .electronics-process-copy, .electronics-final-copy { position: relative; inset: auto; width: 100%; max-width: none; } } @media (max-width: 820px) { .electronics-bg { order: 2; height: auto; aspect-ratio: 1672 / 941; object-fit: contain; } } @media (max-width: 820px) { .electronics-hero-copy, .electronics-process-copy, .electronics-final-copy { order: 1; gap: 10px; } }
/* css/modules/responsive/electronics-responsive-max-width-820px.css */ @media (max-width: 820px) { .electronics-hero-copy h1 { font-size: clamp(34px, 9vw, 48px); } } @media (max-width: 820px) { .electronics-section-head h2, .electronics-process-copy h2, .electronics-final-copy h2 { font-size: clamp(28px, 8vw, 40px); } } @media (max-width: 820px) { .electronics-hero-copy p, .electronics-process-copy p, .electronics-final-copy p, .electronics-section-head p { font-size: 16px; line-height: 1.42; } } @media (max-width: 820px) { .electronics-thesis-grid { order: 3; grid-template-columns: 1fr; } } @media (max-width: 820px) { .electronics-frame--cards { width: 100%; } } @media (max-width: 820px) { .electronics-slide--cards .electronics-bg { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-fit: fill; } } @media (max-width: 820px) { .electronics-card-layout { z-index: 1; width: 100%; padding: 34px 16px; } } @media (max-width: 820px) { .electronics-grid--three, .electronics-grid--six { grid-template-columns: 1fr; } } @media (max-width: 820px) { .electronics-card-body { padding: 17px; } } @media (max-width: 820px) { .electronics-card h3 { font-size: 22px; } } @media (max-width: 820px) { .electronics-final .btn, .electronics-hero .btn { width: 100%; } }
/* css/modules/features/refrigeration-layout.css */ /* Refrigeration monitoring premium landing */ .refrigeration-route { background: #061018; }
/* css/modules/components/grocery-retail-components.css */ .rf-slide { position: relative; isolation: isolate; min-height: min(56.25vw, 100vh); overflow: hidden; background: #07111c; color: #ecf8ff; } .rf-slide, .rf-slide * { overflow-wrap: normal; word-break: normal; hyphens: manual; } .rf-bg { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; object-fit: fill; object-position: center; pointer-events: none; } .rf-inner, .rf-card-section { min-height: inherit; display: grid; align-items: center; padding-top: clamp(34px, 5vh, 64px); padding-bottom: clamp(34px, 5vh, 64px); } .rf-inner--left { grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.54fr); } .rf-inner--right { grid-template-columns: minmax(0, 0.52fr) minmax(0, 0.48fr); } .rf-inner--right .rf-copy { grid-column: 2; } .rf-copy { max-width: 610px; } .rf-copy h1, .rf-copy h2, .rf-section-head h2 { margin: 0; color: #ffffff; letter-spacing: 0; line-height: 1.04; } .rf-copy h1 { font-size: clamp(42px, 4.9vw, 76px); } .rf-copy h2, .rf-section-head h2 { font-size: clamp(34px, 3.6vw, 56px); } .rf-copy p, .rf-section-head p, .rf-card-note { color: rgba(229, 244, 255, 0.82); font-size: clamp(16px, 1.35vw, 19px); line-height: 1.45; } .rf-copy p { margin: 18px 0 0; } .rf-copy .hero-actions { margin-top: clamp(20px, 3vh, 30px); } .rf-accent { color: #8be6ff !important; font-weight: 700; } .rf-card-slide { min-height: auto; overflow: visible; } .rf-card-section { align-items: stretch; gap: clamp(22px, 3vw, 34px); } .rf-section-head { max-width: 900px; } .rf-section-head p { margin: 16px 0 0; } .rf-card-grid { display: grid; gap: clamp(16px, 1.5vw, 22px); } .rf-card-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .rf-card-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rf-card-grid--six { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rf-card { min-width: 0; display: flex; flex-direction: column; padding: 0; overflow: visible; border: 1px solid rgba(126, 221, 255, 0.2); border-radius: 8px; background: rgba(8, 22, 34, 0.82); box-shadow: 0 20px 55px rgba(0, 0, 0, 0.24); } .rf-card-media { aspect-ratio: 16 / 9; background: rgba(4, 12, 20, 0.8); } .rf-card-media img { display: block; width: 100%; height: 100%; object-fit: contain; } .rf-card-body { padding: clamp(16px, 1.7vw, 22px); } .rf-card-body span { display: inline-block; margin-bottom: 10px; color: #8be6ff; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; } .rf-card-body span:empty { display: none; } .rf-card h3 { margin: 0 0 10px; color: #fff; font-size: clamp(18px, 1.45vw, 22px); line-height: 1.14; } .rf-card p { margin: 0; color: rgba(229, 244, 255, 0.76); font-size: 14.5px; line-height: 1.42; } .rf-card-note { max-width: 980px; margin: 0; color: #8be6ff; font-weight: 700; } .ventilation-route .rf-inner { padding-top: clamp(24px, 3.6vh, 44px); padding-bottom: clamp(24px, 3.6vh, 44px); } /* Grocery retail monitoring Phase 3 integration */ .grocery-route { --gr-ink: #18321e; --gr-text: #2f4d35; --gr-muted: #5a765f; --gr-green: #2f8a3b; --gr-green-dark: #176327; --gr-line: rgba(47, 138, 59, 0.18); --gr-surface: rgba(255, 255, 255, 0.88); background: #f7fbf4; } .grocery-route .generated-page { background: #f7fbf4; } .grocery-route .rf-slide { min-height: min(56.28vw, 100vh); background: #f7fbf4; color: var(--gr-ink); } .grocery-route .rf-bg { object-fit: fill; filter: none; opacity: 1; } .grocery-route .rf-inner, .grocery-route .rf-card-section { position: relative; z-index: 1; padding-top: clamp(28px, 4.4vh, 56px); padding-bottom: clamp(28px, 4.4vh, 56px); } .grocery-route .rf-inner--left { grid-template-columns: minmax(0, 0.58fr) minmax(0, 0.42fr); } .grocery-route .rf-inner--right { grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); } .grocery-route .rf-copy { max-width: min(640px, 54vw); } .grocery-route .rf-inner--right .rf-copy { justify-self: end; } .grocery-route .rf-copy h1, .grocery-route .rf-copy h2, .grocery-route .rf-section-head h2 { color: var(--gr-ink); } .grocery-route .rf-copy h1 { max-width: 620px; font-size: clamp(38px, 4.2vw, 64px); line-height: 1.02; } .grocery-route .rf-copy h2, .grocery-route .rf-section-head h2 { font-size: clamp(32px, 3.2vw, 50px); line-height: 1.06; } .grocery-route .rf-copy p, .grocery-route .rf-section-head p, .grocery-route .rf-card-note { color: var(--gr-text); font-size: clamp(16px, 1.22vw, 18px); line-height: 1.44; } .grocery-route .rf-copy p { margin-top: 13px; } .grocery-route .eyebrow { color: var(--gr-green-dark); } .grocery-route .eyebrow::before { background: var(--gr-green); box-shadow: 0 0 0 8px rgba(47, 138, 59, 0.1); } .grocery-route .rf-accent { color: var(--gr-green-dark) !important; } .grocery-route .btn-primary { background: linear-gradient(135deg, #35a346 0%, #176327 100%); box-shadow: 0 14px 34px rgba(47, 138, 59, 0.24); } .grocery-route .btn-secondary { color: var(--gr-green-dark); border-color: rgba(47, 138, 59, 0.24); background: rgba(255, 255, 255, 0.8); } .grocery-route .rf-card-slide { min-height: auto; } .grocery-route .rf-card-section { gap: clamp(22px, 3vw, 34px); } .grocery-route .rf-section-head { max-width: 1020px; } .grocery-route .rf-card-grid--six { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grocery-route .gr-role-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grocery-route .rf-card { overflow: hidden; border-color: var(--gr-line); background: var(--gr-surface); box-shadow: 0 18px 44px rgba(37, 95, 45, 0.09); } .grocery-route .rf-card-media { aspect-ratio: 3 / 1; background: #eef8ea; } .grocery-route .rf-card-media img { width: 100%; height: 100%; object-fit: contain; } .grocery-route .rf-card-body { padding: clamp(15px, 1.45vw, 20px); } .grocery-route .rf-card-body span { color: var(--gr-green); } .grocery-route .rf-card h3 { color: var(--gr-ink); font-size: clamp(17px, 1.28vw, 21px); } .grocery-route .rf-card p { color: var(--gr-text); font-size: 14px; line-height: 1.38; } .grocery-route .rf-card p + p { margin-top: 8px; } .grocery-route .rf-card-note { color: var(--gr-green-dark); }
/* css/modules/responsive/grocery-retail-responsive-max-width-1180px.css */ .grocery-route .gr-pilot-inner { min-height: inherit; position: relative; display: block; padding-top: clamp(24px, 3.8vh, 42px); padding-bottom: clamp(24px, 3.8vh, 42px); } .grocery-route .gr-pilot { min-height: max(100vh, 980px); } .grocery-route .gr-pilot .rf-copy { max-width: min(760px, 60vw); } .grocery-route .gr-pilot-top { position: absolute; top: clamp(24px, 3.8vh, 42px); left: 0; } .grocery-route .gr-pilot-bottom { position: absolute; top: 70%; left: 0; right: 0; width: min(900px, 86vw); max-width: min(900px, 86vw); margin-left: auto; margin-right: auto; text-align: center; } .grocery-route .gr-pilot-bottom p { font-size: clamp(15px, 1.05vw, 16px); line-height: 1.28; margin-top: 9px; } .grocery-route .gr-pilot-bottom .hero-actions { margin-top: 14px; } .grocery-route .gr-contact { background: #f4faf1; } .grocery-route .generated-cta-card { border-color: var(--gr-line); box-shadow: 0 20px 60px rgba(37, 95, 45, 0.1); } .grocery-route .contact-form input, .grocery-route .contact-form textarea { border-color: rgba(47, 138, 59, 0.18); } .grocery-route .contact-form input:focus, .grocery-route .contact-form textarea:focus { outline-color: rgba(47, 138, 59, 0.35); border-color: rgba(47, 138, 59, 0.42); } @media (max-width: 1180px) { .grocery-route .rf-slide { min-height: auto; } } @media (max-width: 1180px) { .grocery-route .rf-inner--left { grid-template-columns: minmax(0, 0.58fr) minmax(0, 0.42fr); } } @media (max-width: 1180px) { .grocery-route .rf-inner--right { grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); } } @media (max-width: 1180px) { .grocery-route .gr-pilot-inner { display: block; } } @media (max-width: 1180px) { .grocery-route .rf-copy, .grocery-route .rf-inner--right .rf-copy { max-width: min(620px, 54vw); } } @media (max-width: 1180px) { .grocery-route .gr-pilot .rf-copy { max-width: min(720px, 62vw); } } @media (max-width: 1180px) { .grocery-route .gr-pilot-bottom { max-width: min(880px, 86vw); } } @media (max-width: 1180px) { .grocery-route .rf-card-grid--six, .grocery-route .gr-role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 761px) and (max-height: 820px) { .grocery-route .rf-copy h1 { font-size: clamp(35px, 3.6vw, 54px); } } @media (min-width: 761px) and (max-height: 820px) { .grocery-route .rf-copy h2, .grocery-route .rf-section-head h2 { font-size: clamp(29px, 2.75vw, 42px); } } @media (min-width: 761px) and (max-height: 820px) { .grocery-route .rf-copy p, .grocery-route .rf-section-head p, .grocery-route .rf-card-note { font-size: 15px; line-height: 1.32; } } @media (max-width: 760px) { .grocery-route .rf-bg { object-fit: fill; } } @media (max-width: 760px) { .grocery-route .rf-inner, .grocery-route .rf-card-section { display: block; padding-top: 24px; padding-bottom: 30px; } } @media (max-width: 760px) { .grocery-route .gr-pilot-inner { display: block; padding-top: 18px; padding-bottom: 18px; } } @media (max-width: 760px) { .grocery-route .gr-pilot-top { top: 18px; } } @media (max-width: 760px) { .grocery-route .gr-pilot-bottom { top: 70%; width: 96%; max-width: 96%; } } @media (max-width: 760px) { .grocery-route .gr-pilot-bottom p { font-size: 14px; line-height: 1.22; margin-top: 7px; } } @media (max-width: 760px) { .grocery-route .gr-pilot-bottom .hero-actions { gap: 8px; margin-top: 10px; } } @media (max-width: 760px) { .grocery-route .gr-pilot-bottom .hero-actions .btn { min-height: 38px; padding: 9px 12px; font-size: 13px; } } @media (max-width: 760px) { .grocery-route .rf-copy, .grocery-route .rf-inner--right .rf-copy, .grocery-route .gr-pilot .rf-copy, .grocery-route .rf-section-head { max-width: 58%; } } @media (max-width: 760px) { .grocery-route .rf-inner--right .rf-copy { margin-left: auto; } } @media (max-width: 760px) { .grocery-route .gr-pilot .rf-copy { max-width: 74%; } } @media (max-width: 760px) { .grocery-route .gr-pilot-bottom { max-width: 82%; } } @media (max-width: 760px) { .grocery-route .rf-copy h1 { font-size: clamp(30px, 8.5vw, 38px); } } @media (max-width: 760px) { .grocery-route .rf-copy h2, .grocery-route .rf-section-head h2 { font-size: clamp(27px, 7.3vw, 34px); } } @media (max-width: 760px) { .grocery-route .rf-copy p, .grocery-route .rf-section-head p, .grocery-route .rf-card-note { font-size: 14.5px; line-height: 1.32; } } @media (max-width: 760px) { .grocery-route .rf-card-grid--six, .grocery-route .gr-role-grid { grid-template-columns: 1fr; } } .ventilation-route .vent-pilot .rf-inner--right { grid-template-columns: minmax(0, 0.58fr) minmax(0, 0.42fr); } .ventilation-route .vent-pilot .rf-copy { max-width: 600px; } @media (max-width: 1180px) { .rf-slide { min-height: auto; } } @media (max-width: 1180px) { .rf-inner--left, .rf-inner--right { grid-template-columns: 1fr; } } @media (max-width: 1180px) { .rf-inner--right .rf-copy { grid-column: auto; margin-left: auto; } } @media (max-width: 1180px) { .rf-copy { max-width: min(680px, 58vw); } } @media (max-width: 1180px) { .rf-pilot .rf-copy { max-width: min(720px, 100%); } } @media (max-width: 1180px) { .rf-card-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1180px) { .rf-card-grid--six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* css/modules/responsive/wastewater-responsive-min-width-761px.css */ @media (min-width: 761px) and (max-height: 820px) { .wastewater-route .ww-hero .rf-copy h1 { font-size: clamp(30px, 3.3vw, 50px); } } @media (min-width: 761px) and (max-height: 820px) { .wastewater-route .ww-hero .rf-copy p { margin-top: 8px; font-size: 14px; line-height: 1.24; } }
/* css/modules/responsive/grocery-retail-responsive-min-width-761px.css */ @media (min-width: 761px) and (max-height: 820px) { .rf-inner, .rf-card-section { padding-top: 22px; padding-bottom: 22px; } } @media (min-width: 761px) and (max-height: 820px) { .rf-copy h1 { font-size: clamp(38px, 4.1vw, 58px); } } @media (min-width: 761px) and (max-height: 820px) { .rf-copy h2, .rf-section-head h2 { font-size: clamp(30px, 3vw, 44px); } } @media (min-width: 761px) and (max-height: 820px) { .rf-copy p, .rf-section-head p, .rf-card-note { font-size: 15.5px; line-height: 1.34; } } @media (min-width: 761px) and (max-height: 820px) { .rf-copy p { margin-top: 10px; } } @media (min-width: 761px) and (max-height: 820px) { .rf-copy .hero-actions { margin-top: 14px; } } @media (max-width: 760px) { .rf-slide { min-height: auto; overflow: hidden; } } @media (max-width: 760px) { .rf-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; opacity: 1; } } @media (max-width: 760px) { .rf-inner, .rf-card-section { min-height: 0; display: block; padding-top: 22px; padding-bottom: 28px; } } @media (max-width: 760px) { .rf-copy, .rf-inner--right .rf-copy, .rf-section-head { max-width: 100%; margin-left: 0; } } @media (max-width: 760px) { .rf-copy h1 { font-size: clamp(31px, 8.7vw, 38px); line-height: 1.02; } } @media (max-width: 760px) { .rf-copy h2, .rf-section-head h2 { font-size: clamp(27px, 7.4vw, 34px); line-height: 1.05; } } @media (max-width: 760px) { .rf-copy p, .rf-section-head p, .rf-card-note { font-size: 15px; line-height: 1.34; } } @media (max-width: 760px) { .rf-copy p { margin-top: 10px; } } @media (max-width: 760px) { .rf-card-grid--four, .rf-card-grid--six, .rf-card-grid--three { grid-template-columns: 1fr; } } @media (max-width: 760px) { .rf-card-grid { margin-top: 22px; } } @media (max-width: 760px) { .rf-card-body { padding: 16px; } } @media (max-width: 760px) { .rf-copy .hero-actions { align-items: stretch; margin-top: 14px; gap: 10px; } } @media (max-width: 760px) { .rf-copy .hero-actions .btn { min-height: 44px; padding-top: 12px; padding-bottom: 12px; } } @media (max-width: 760px) { .rf-pilot .rf-copy p { font-size: 14.5px; line-height: 1.28; margin-top: 8px; } } @media (max-width: 1180px) { .grocery-route .rf-inner--left { grid-template-columns: minmax(0, 0.58fr) minmax(0, 0.42fr); } } @media (max-width: 1180px) { .grocery-route .rf-inner--right { grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); } } @media (max-width: 1180px) { .grocery-route .rf-inner--right .rf-copy { grid-column: 2; margin-left: 0; } } @media (max-width: 1180px) { .grocery-route .gr-pilot-inner { display: block; } } @media (max-width: 1180px) { .grocery-route .rf-copy, .grocery-route .rf-inner--right .rf-copy { max-width: min(620px, 54vw); } } @media (max-width: 1180px) { .grocery-route .gr-pilot .rf-copy { max-width: min(720px, 62vw); } } @media (max-width: 1180px) { .grocery-route .gr-pilot-bottom { max-width: min(880px, 86vw); } } @media (max-width: 760px) { .grocery-route .rf-inner, .grocery-route .rf-card-section { display: block; } } @media (max-width: 760px) { .grocery-route .gr-pilot { min-height: 1580px; } } @media (max-width: 760px) { .grocery-route .gr-pilot-inner { display: block; } } @media (max-width: 760px) { .grocery-route .rf-copy, .grocery-route .rf-section-head { max-width: 58%; margin-left: 0; } } @media (max-width: 760px) { .grocery-route .rf-inner--right .rf-copy { max-width: 58%; margin-left: auto; } } @media (max-width: 760px) { .grocery-route .gr-pilot .rf-copy { max-width: 74%; } } @media (max-width: 760px) { .grocery-route .gr-pilot-bottom { max-width: 96%; } } @media (min-width: 761px) and (max-width: 1180px) { .grocery-route .gr-pilot { min-height: 1260px; } } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; overflow-x: hidden; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: linear-gradient(180deg, #fff 0%, var(--bg) 38%, #fff 100%); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } button, a { -webkit-tap-highlight-color: transparent; } .site-header :where(a, button, span), .site-footer :where(a, p, h3, span) { overflow-wrap: normal; word-break: normal; hyphens: manual; } .container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; } .section { position: relative; padding: 112px 0; overflow: clip; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; color: var(--blue-dark); font-size: 13px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; } .eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 999px; background: var(--blue); box-shadow: 0 0 0 8px rgba(31, 123, 255, 0.1); } h1, h2, h3, p { margin-top: 0; } h1 { max-width: 900px; margin-bottom: 24px; font-size: clamp(40px, 5.2vw, 72px); line-height: 0.96; letter-spacing: 0; overflow-wrap: anywhere; } h2 { margin-bottom: 18px; font-size: clamp(34px, 4vw, 58px); line-height: 1.02; letter-spacing: 0; } h3 { margin-bottom: 12px; font-size: 22px; line-height: 1.15; letter-spacing: 0; } p { color: var(--text); font-size: 17px; line-height: 1.62; } .muted { color: var(--muted); } .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; }
/* css/modules/components/grocery-retail-components-foundation.css */ .site-header { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); background: rgba(255, 255, 255, 0.78); border-bottom: 1px solid rgba(31, 123, 255, 0.12); } .header-inner { position: relative; height: 76px; display: flex; align-items: center; gap: 24px; } .brand { display: inline-flex; align-items: center; gap: 10px; min-width: max-content; } .brand-logo { width: 142px; height: auto; } .main-nav { margin-left: auto; display: flex; align-items: center; gap: 8px; } .nav-item { position: relative; } .nav-item-solutions::after, .nav-item-products::after, .nav-item-development::after { content: ""; position: fixed; top: 48px; left: 0; z-index: 119; display: none; width: 100vw; height: 48px; } .nav-item-solutions:hover::after, .nav-item-solutions:focus-within::after, .nav-item-products:hover::after, .nav-item-products:focus-within::after, .nav-item-development:hover::after, .nav-item-development:focus-within::after { display: block; } .main-nav > a, .main-nav .nav-link, .main-nav > .client-panel-entry { display: inline-flex; align-items: center; padding: 10px 14px; color: #25415f; font-weight: 650; font-size: 15px; border-radius: 999px; transition: background 0.2s ease, color 0.2s ease; } .main-nav > a:hover, .main-nav .nav-link:hover, .nav-item:focus-within .nav-link, .nav-item:hover .nav-link { background: rgba(31, 123, 255, 0.08); color: var(--blue-dark); } .mega-menu { position: fixed; top: 74px; left: 50%; z-index: 120; display: grid; width: min(calc(100vw - 40px), 1180px); grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; padding: 14px; border: 1px solid rgba(31, 123, 255, 0.16); border-radius: 22px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 24px 70px rgba(15, 55, 115, 0.14); opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: opacity 180ms ease 80ms, transform 180ms ease 80ms; } .mega-menu-development { width: min(calc(100vw - 40px), 600px); grid-template-columns: repeat(3, minmax(0, 1fr)); } .mega-menu-products { grid-template-columns: repeat(8, minmax(0, 1fr)); } .nav-item:hover .mega-menu, .nav-item:focus-within .mega-menu { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); transition-delay: 0ms; } .mega-card { position: relative; display: grid; min-width: 0; grid-template-rows: 92px auto; gap: 9px; padding: 10px; border: 1px solid rgba(31, 123, 255, 0.12); border-radius: 16px; background: linear-gradient(180deg, rgba(246,250,255,0.96), rgba(255,255,255,0.98)); color: var(--text); transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease; } .mega-card::after { content: "→"; position: absolute; right: 10px; top: 10px; display: grid; width: 28px; height: 28px; place-items: center; border-radius: 999px; color: var(--blue-dark); background: rgba(255,255,255,0.86); box-shadow: 0 8px 18px rgba(31, 123, 255, 0.12); opacity: 0; transform: translate(4px, -4px); transition: opacity 180ms ease, transform 180ms ease, background 180ms ease, color 180ms ease; } .mega-card img { width: 100%; height: 92px; object-fit: contain; border-radius: 12px; background: rgba(244, 248, 255, 0.72); transition: transform 180ms ease, filter 180ms ease; } .mega-card span { display: block; min-height: 38px; color: #18345a; font-size: 12.5px; font-weight: 800; line-height: 1.18; } .mega-card:hover, .mega-card:focus-visible { transform: translateY(-4px); border-color: rgba(31, 123, 255, 0.3); background: #fff; box-shadow: 0 18px 42px rgba(15, 55, 115, 0.12); outline: none; } .mega-card:hover::after, .mega-card:focus-visible::after { opacity: 1; transform: translate(0, 0); color: #fff; background: var(--blue); } .mega-card:hover img, .mega-card:focus-visible img { transform: translateY(-3px) scale(1.04); filter: drop-shadow(0 12px 18px rgba(31, 123, 255, 0.12)); } .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 13px 20px; border-radius: 999px; border: 1px solid transparent; font-weight: 760; font-size: 15px; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease; } .btn:hover { transform: translateY(-2px); } .btn-primary { color: #fff; background: linear-gradient(135deg, var(--blue) 0%, #0b55d9 100%); box-shadow: 0 14px 34px rgba(31, 123, 255, 0.28); } .btn-secondary { color: var(--blue-dark); background: rgba(255, 255, 255, 0.74); border-color: rgba(31, 123, 255, 0.24); box-shadow: 0 10px 26px rgba(15, 55, 115, 0.07); } .header-cta { margin-left: 6px; } .menu-toggle { display: none; } .hero { height: min(820px, calc(100svh - 100px)); min-height: 620px; display: flex; align-items: center; padding: clamp(36px, 5vh, 64px) 0; background: #f7fbff; } .hero-bg { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(246, 250, 255, 0.97) 0%, rgba(246, 250, 255, 0.9) 34%, rgba(246, 250, 255, 0.54) 62%, rgba(246, 250, 255, 0.48) 100%), url("/assets/home/hero-digital-contour.webp") center right / cover no-repeat; transform: scale(1.015); } .hero-grid { position: relative; z-index: 2; } .hero-copy { max-width: min(900px, 100%); } .hero-lead { max-width: 730px; margin-bottom: 16px; font-size: clamp(18px, 1.8vw, 23px); line-height: 1.56; } .hero-note { max-width: 730px; margin-bottom: 28px; color: var(--blue-dark); font-weight: 700; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; } .section-bg-pattern { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(246, 250, 255, 0.86)); opacity: 0.8; } .section-head { position: relative; max-width: 760px; margin-bottom: 42px; } .route-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
/* css/modules/components/route-cards-components.css */ .route-card, .why-card, .step-card, .cta-card, .image-panel { background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(31, 123, 255, 0.16); box-shadow: var(--shadow-soft); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .route-card { display: flex; flex-direction: column; min-height: 430px; padding: 28px; border-radius: var(--radius-md); color: inherit; text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .route-card:hover, .route-card:focus-visible { transform: translateY(-7px); border-color: rgba(31, 123, 255, 0.35); box-shadow: var(--shadow); } .route-card:focus-visible { outline: 3px solid rgba(31, 123, 255, 0.34); outline-offset: 4px; } .route-card:hover .route-visual, .route-card:focus-visible .route-visual { transform: translateY(-4px) scale(1.025); } .route-visual { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; margin-bottom: 22px; padding: 0; border: 0; border-radius: 0; background: transparent; transition: transform 0.25s ease; } .mini-asset { width: 78px; height: 78px; object-fit: contain; margin-bottom: 22px; padding: 8px; border: 1px solid rgba(31, 123, 255, 0.14); border-radius: 22px; background: linear-gradient(180deg, #fff, #edf6ff); box-shadow: 0 12px 26px rgba(31, 123, 255, 0.1); } .route-card p { font-size: 15.5px; line-height: 1.55; } .card-link { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--blue-dark); font-weight: 800; } .card-link span { transition: transform 0.2s ease; } .route-card:hover .card-link span, .route-card:focus-visible .card-link span, .card-link:hover span { transform: translateX(4px); } .digital-loop { overflow: hidden; padding: 68px 0 74px; color: #f7fbff; background: radial-gradient(circle at 16% 10%, rgba(31, 123, 255, 0.28), transparent 28%), radial-gradient(circle at 86% 72%, rgba(99, 205, 255, 0.18), transparent 30%), linear-gradient(135deg, #061326 0%, #0a1e38 48%, #071a2e 100%); } .digital-loop::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); pointer-events: none; } .digital-loop-head { position: relative; z-index: 1; } .digital-loop .eyebrow { color: #7ac4ff; } .digital-loop h2 { color: #fff; } .digital-loop .split-copy { max-width: 820px; } .digital-loop .split-copy p { max-width: 760px; color: rgba(235, 246, 255, 0.84); } .split-layout { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(420px, 1fr); gap: 52px; align-items: center; } .split-copy { max-width: 560px; } .image-panel { padding: 10px; border-radius: var(--radius-lg); overflow: hidden; } .image-panel img { width: 100%; border-radius: 27px; } .steps-wrap { position: relative; z-index: 1; margin-top: 34px; } .step-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; padding: 0; } .step-card { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 18px; min-height: 204px; padding: 20px; overflow: hidden; border-radius: 26px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.055)); border: 1px solid rgba(128, 201, 255, 0.2); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.22); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; } .step-card:hover { transform: translateY(-6px); border-color: rgba(116, 198, 255, 0.46); background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.075)); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3); } .step-card img { grid-row: 1 / 4; align-self: center; width: 150px; height: 150px; object-fit: contain; filter: drop-shadow(0 18px 26px rgba(20, 148, 255, 0.22)); transition: transform 0.25s ease; } .step-card:hover img { transform: translateY(-4px) scale(1.035); } .step-card span { display: inline-flex; margin-bottom: 10px; color: #69c7ff; font-weight: 900; font-size: 13px; } .step-card h3 { color: #fff; font-size: 20px; } .step-card p { color: rgba(232, 245, 255, 0.78); font-size: 14.5px; line-height: 1.52; } .js .digital-loop .step-card.reveal { opacity: 1; transform: none; } .why { background: #f8fbff; } .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .why-card { padding: 34px; border-radius: var(--radius-md); } .why-card p { font-size: 16px; } .applications { background: radial-gradient(circle at 20% 20%, rgba(31, 123, 255, 0.12), transparent 30%), linear-gradient(180deg, #fff 0%, #f5faff 100%); } .application-grid { display: grid; grid-template-columns: 0.82fr 1fr; gap: 56px; align-items: center; } .application-copy { max-width: 580px; } .chips { display: flex; flex-wrap: wrap; gap: 12px; padding: 26px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.64); border: 1px solid rgba(31, 123, 255, 0.16); box-shadow: var(--shadow-soft); } .chips span { display: inline-flex; align-items: center; min-height: 42px; padding: 10px 15px; color: #17406e; background: #fff; border: 1px solid rgba(31, 123, 255, 0.17); border-radius: 999px; font-weight: 720; box-shadow: 0 8px 24px rgba(15, 55, 115, 0.05); } .trust-section { background: radial-gradient(circle at 15% 0%, rgba(31, 123, 255, 0.09), transparent 34%), linear-gradient(180deg, #fff 0%, #f6faff 100%); } .trust-head { max-width: 900px; } .trust-head p, .trust-group-head p { max-width: 820px; color: var(--text); line-height: 1.65; } .trust-groups { display: grid; gap: clamp(28px, 4vw, 46px); margin-top: 38px; } .trust-group { display: grid; gap: 18px; } .trust-group-head { display: grid; gap: 10px; } .trust-group h3 { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--ink); font-size: clamp(18px, 2vw, 24px); font-weight: 760; line-height: 1.25; } .trust-group h3::before { width: 34px; height: 3px; flex: 0 0 auto; content: ""; border-radius: 999px; background: linear-gradient(90deg, var(--blue), var(--blue-2)); } .trust-grid, .compat-logo-grid { display: grid; gap: 14px; } .trust-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .trust-grid--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* css/modules/components/route-cards-components-foundation.css */ .trust-card, .compat-logo-card { position: relative; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, 0.86); box-shadow: 0 12px 34px rgba(15, 55, 115, 0.06); text-decoration: none; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease; } .trust-card { display: grid; align-content: start; gap: 12px; min-height: 190px; padding: clamp(20px, 2.4vw, 28px); color: var(--text); } .trust-card span { color: var(--ink); font-size: clamp(17px, 1.7vw, 21px); font-weight: 820; line-height: 1.2; } .trust-card p { margin: 0; line-height: 1.58; } .trust-card[href]:hover, .trust-card[href]:focus-visible, .compat-logo-card:hover, .compat-logo-card:focus-visible { border-color: var(--line-strong); background: #fff; box-shadow: var(--shadow-soft); transform: translateY(-3px); outline: none; } .trust-links { display: flex; flex-wrap: wrap; gap: 10px; } .trust-links a { display: inline-flex; align-items: center; min-height: 38px; padding: 9px 13px; color: #17406e; border: 1px solid rgba(31, 123, 255, 0.17); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 760; text-decoration: none; } .trust-links a:hover, .trust-links a:focus-visible { border-color: var(--line-strong); outline: none; } .trust-chips { display: flex; flex-wrap: wrap; gap: 10px; } .trust-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 9px 14px; color: #17406e; border: 1px solid rgba(31, 123, 255, 0.17); border-radius: 999px; background: rgba(255, 255, 255, 0.92); font-weight: 760; box-shadow: 0 8px 24px rgba(15, 55, 115, 0.04); } .compat-logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .compat-logo-card { display: grid; grid-template-rows: minmax(96px, 1fr) auto; gap: 14px; min-height: 180px; padding: clamp(18px, 2.2vw, 24px); color: var(--text); } .compat-logo-card img { display: block; align-self: center; justify-self: center; width: auto; max-width: min(190px, 76%); max-height: 62px; object-fit: contain; filter: saturate(0.98); } .compat-logo-card span { color: var(--muted); font-size: 13px; font-weight: 680; line-height: 1.35; text-align: center; } .trust-disclaimer { max-width: 940px; margin: 0; padding: 16px 18px; color: var(--muted); border: 1px solid rgba(31, 123, 255, 0.12); border-radius: 16px; background: rgba(255, 255, 255, 0.74); font-size: 13px; line-height: 1.55; } .final-cta { padding: 98px 0; background: #f6faff; } .cta-bg { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(246, 250, 255, 0.93), rgba(246, 250, 255, 0.72)), url("/assets/home/hero-digital-contour.webp") center / cover no-repeat; opacity: 0.68; } .cta-card { position: relative; display: grid; grid-template-columns: 1fr minmax(280px, 360px); gap: 38px; align-items: center; padding: clamp(30px, 5vw, 58px); border-radius: 38px; } .cta-card h2 { max-width: 640px; } .cta-card p { max-width: 640px; }
/* css/modules/components/contact-components.css */ .contact-card { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 24px; font-style: normal; color: var(--text); background: rgba(255, 255, 255, 0.74); border: 1px solid rgba(31, 123, 255, 0.16); border-radius: 24px; } .contact-card strong { color: var(--ink); font-size: 20px; } .contact-card a { color: var(--blue-dark); font-weight: 750; } .site-footer { padding: 62px 0 32px; color: #cbd7e8; background: #071b3a; } .site-footer h3 { color: #fff; } .site-footer p { color: #a9bad3; font-size: 15px; } .footer-logo { width: 150px; height: auto; margin-bottom: 16px; } .footer-grid { display: grid; grid-template-columns: minmax(220px, 1.35fr) repeat(4, minmax(140px, 1fr)); gap: 34px; } .footer-grid h3 { margin-bottom: 14px; font-size: 15px; letter-spacing: 0.02em; } .footer-grid a { display: block; margin: 9px 0; color: #c8d7ea; } .footer-grid a:hover { color: #fff; } .footer-requisites { display: grid; gap: 6px; margin-top: 18px; color: #a9bad3; font-size: 14px; line-height: 1.45; } .footer-requisites span:first-child { color: #fff; font-weight: 760; } .footer-app-link { display: block; width: fit-content; margin: 10px 0; } .footer-app-link img { display: block; width: 146px; height: auto; } .footer-app-link:hover { opacity: 0.88; } .footer-bottom { margin-top: 36px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.12); color: #91a7c5; font-size: 14px; } .legal-utility-page { background: #f6f8fb; } .legal-utility { padding: 72px 0 88px; } .legal-utility-wrap { max-width: 920px; } .legal-utility-head { margin-bottom: 24px; } .legal-kicker { margin-bottom: 10px; color: var(--blue-dark); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .legal-utility-head h1 { margin-bottom: 12px; color: #10233f; font-size: 44px; line-height: 1.05; } @media (max-width: 600px) { body .legal-utility .legal-utility-head h1 { max-width: 100%; font-size: clamp(30px, 9vw, 38px); overflow-wrap: anywhere !important; word-break: break-word !important; } } .legal-utility-head p { margin-bottom: 0; color: #66758d; } .legal-utility-card { padding: clamp(24px, 4vw, 44px); border: 1px solid rgba(31, 123, 255, 0.12); border-radius: 8px; background: #fff; box-shadow: 0 18px 48px rgba(15, 55, 115, 0.08); } .legal-utility-card h2 { margin-top: 34px; margin-bottom: 12px; color: #10233f; font-size: 25px; line-height: 1.18; } .legal-utility-card h3 { margin-top: 24px; margin-bottom: 10px; color: #17345b; font-size: 18px; } .legal-utility-card p, .legal-utility-card dd { color: #3f4d63; font-size: 16px; line-height: 1.7; } .legal-utility-card a { color: var(--blue-dark); font-weight: 760; } .legal-utility-card dl { display: grid; gap: 12px; margin: 18px 0 0; } .legal-utility-card dt { color: #10233f; font-weight: 800; } .legal-utility-card dd { margin: -8px 0 0; } .reveal { opacity: 1; transform: none; } .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; } /* The homepage remains complete if optional reveal enhancement cannot start. */ .js .home-route .reveal { opacity: 1; transform: none; } .js .reveal.is-visible { opacity: 1; transform: translateY(0); }
/* css/modules/responsive/route-cards-responsive-max-width-1100px.css */ .js .route-card.reveal.is-visible:hover, .js .route-card.reveal.is-visible:focus-visible, .js .step-card.reveal.is-visible:hover { transform: translateY(-7px); } .route-card:nth-child(2), .why-card:nth-child(2), .step-card:nth-child(2) { transition-delay: 0.08s; } .route-card:nth-child(3), .why-card:nth-child(3), .step-card:nth-child(3) { transition-delay: 0.16s; } .route-card:nth-child(4), .step-card:nth-child(4) { transition-delay: 0.24s; } .step-card:nth-child(5) { transition-delay: 0.32s; } .step-card:nth-child(6) { transition-delay: 0.4s; } @media (max-width: 1100px) { .route-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1100px) { .route-card { min-height: 340px; } } @media (max-width: 1100px) { .split-layout, .application-grid { grid-template-columns: 1fr; } } @media (max-width: 1100px) { .split-copy, .application-copy { max-width: 760px; } } @media (max-width: 1100px) { .step-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1100px) { .step-card { grid-template-columns: 128px minmax(0, 1fr); min-height: 220px; } } @media (max-width: 1100px) { .step-card img { width: 128px; height: 128px; } } @media (max-width: 1100px) { .trust-grid--five, .compat-logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1100px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 780px) { .container { width: min(calc(100% - 28px), var(--container)); } } @media (max-width: 780px) { .section { padding: 56px 0; } } @media (max-width: 780px) { .entry-routes { padding-top: 42px; } } @media (max-width: 780px) { .header-inner { height: 68px; } } @media (max-width: 780px) { .brand-logo { width: 132px; } } @media (max-width: 780px) { .header-cta { display: none; } } @media (max-width: 780px) { .menu-toggle { position: absolute; top: 12px; right: 0; z-index: 3; display: inline-flex; flex-direction: column; gap: 5px; justify-content: center; align-items: center; width: 44px; height: 44px; margin-left: 0; border: 1px solid rgba(31, 123, 255, 0.18); border-radius: 14px; background: #fff; } } @media (max-width: 780px) { .menu-toggle span { width: 18px; height: 2px; border-radius: 999px; background: var(--ink); transition: transform 0.2s ease, opacity 0.2s ease; } } @media (max-width: 780px) { .main-nav { position: fixed; top: 68px; left: 14px; right: 14px; display: none; flex-direction: column; align-items: stretch; gap: 4px; padding: 12px; background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(31, 123, 255, 0.16); border-radius: 22px; box-shadow: var(--shadow); } } @media (max-width: 780px) { .main-nav.is-open { display: flex; } } @media (max-width: 780px) { .main-nav > a, .main-nav .nav-link, .main-nav > .client-panel-entry { width: 100%; padding: 14px 16px; } } @media (max-width: 780px) { .mega-menu { position: static; display: none; width: 100%; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); grid-template-columns: none; gap: 10px; margin-top: 4px; padding: 10px 2px 4px; overflow-x: auto; border: 0; border-radius: 0; background: transparent; box-shadow: none; opacity: 1; pointer-events: auto; transform: none; scroll-snap-type: x proximity; } } @media (max-width: 780px) { .nav-item-solutions::after, .nav-item-products::after, .nav-item-development::after { display: none; } } @media (max-width: 780px) { .nav-item:hover .mega-menu, .nav-item:focus-within .mega-menu { transform: none; } } @media (max-width: 780px) { .mega-card { grid-template-rows: 82px auto; scroll-snap-align: start; } } @media (max-width: 780px) { .mega-card img { height: 82px; } } @media (max-width: 780px) { .hero { height: auto; min-height: min(680px, calc(100svh - 84px)); align-items: flex-start; padding: 42px 0 42px; } } @media (max-width: 780px) { .hero-bg { background: linear-gradient(180deg, rgba(246, 250, 255, 0.96) 0%, rgba(246, 250, 255, 0.92) 48%, rgba(246, 250, 255, 0.84) 100%), url("/assets/home/hero-digital-contour.webp") center right / cover no-repeat; opacity: 0.96; } } @media (max-width: 780px) { h1 { font-size: clamp(30px, 8.2vw, 34px); line-height: 1.08; } } @media (max-width: 780px) { h2 { font-size: clamp(30px, 8vw, 44px); } } @media (max-width: 780px) { .hero-lead { font-size: 17px; } } @media (max-width: 780px) { .hero-copy, .hero-copy > * { max-width: 100%; } } @media (max-width: 780px) { .hero-note { display: block; } } @media (max-width: 780px) { .hero-actions { display: grid; grid-template-columns: 1fr; } } @media (max-width: 780px) { .trust-grid--three, .trust-grid--five, .compat-logo-grid { grid-template-columns: 1fr; } } @media (max-width: 780px) { .route-grid, .why-grid, .step-grid, .cta-card, .footer-grid { grid-template-columns: 1fr; } } @media (max-width: 780px) { .route-card { min-height: auto; padding: 24px; } } @media (max-width: 780px) { .step-card { grid-template-columns: 104px minmax(0, 1fr); min-height: auto; padding: 18px; column-gap: 14px; } } @media (max-width: 780px) { .step-card img { width: 104px; height: 104px; } } @media (max-width: 780px) { .step-card span { margin-bottom: 10px; } } @media (max-width: 780px) { .step-card h3 { font-size: 19px; } } @media (max-width: 780px) { .step-card p { font-size: 14px; } } @media (max-width: 780px) { .image-panel { border-radius: 24px; } } @media (max-width: 780px) { .image-panel img { border-radius: 18px; } } @media (max-width: 780px) { .cta-card { padding: 26px; border-radius: 28px; } } @media (max-width: 560px) { .trust-card, .compat-logo-card { min-height: 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.001ms !important; } } @media (prefers-reduced-motion: reduce) { .js .reveal, .reveal { opacity: 1; transform: none; } }
/* css/modules/responsive/modbus-responsive-max-width-1180px.css */ /* Modbus Gateway workflow-correct landing */ .modbus-page { --mg-bg: #030812; --mg-panel: rgba(6, 18, 32, 0.72); --mg-panel-strong: rgba(8, 24, 42, 0.86); --mg-line: rgba(91, 196, 255, 0.22); --mg-line-strong: rgba(91, 196, 255, 0.4); --mg-text: rgba(230, 242, 255, 0.86); --mg-muted: rgba(185, 204, 224, 0.72); --mg-cyan: #62d6ff; --mg-blue: #2f8cff; background: #020713; color: #f5f9ff; } .modbus-page :where(h1, h2, h3, p, a, button, span, strong, li) { overflow-wrap: normal !important; word-break: normal !important; hyphens: manual !important; letter-spacing: 0; } .mg-slide { position: relative; isolation: isolate; height: calc(100vh - 1px); min-height: 0; padding: clamp(34px, 5vh, 62px) 0; display: flex; align-items: stretch; overflow: clip; background: var(--mg-bg); } .mg-slide + .mg-slide { border-top: 1px solid rgba(91, 196, 255, 0.08); } .mg-wf-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: contain; object-position: center center; pointer-events: none; } .mg-slide::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(2, 7, 19, 0.05), rgba(2, 7, 19, 0.26)), radial-gradient(circle at 50% 100%, rgba(47, 140, 255, 0.12), transparent 36%); } .mg-slide-inner, .mg-process-layout, .mg-cards-wrap { position: relative; z-index: 1; width: min(calc(100% - 40px), var(--container)); margin: auto; } .mg-slide-inner { display: grid; min-height: 0; height: calc(100vh - clamp(68px, 10vh, 124px) - 1px); align-items: center; } .mg-slide-inner--left { grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr); } .mg-slide-inner--right { grid-template-columns: minmax(0, 0.68fr) minmax(0, 0.32fr); } .mg-slide-inner--right .mg-copy { grid-column: 2; } .mg-slide-inner--left .mg-copy { max-width: 470px; } .mg-copy, .mg-section-head, .mg-process-copy { max-width: 600px; } .mg-copy { padding: 0; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55); } .mg-kicker { margin: 0 0 12px; color: var(--mg-cyan); font-size: 12px; font-weight: 800; line-height: 1.3; text-transform: uppercase; } .mg-copy h1, .mg-copy h2, .mg-section-head h2, .mg-process-copy h2 { max-width: 100%; margin: 0 0 16px; color: #fff; font-size: clamp(42px, 4.7vw, 72px); line-height: 0.98; } .mg-copy h2, .mg-section-head h2, .mg-process-copy h2 { font-size: clamp(34px, 3.5vw, 54px); line-height: 1.02; } .mg-lead, .mg-copy p, .mg-section-head p, .mg-process-copy p { margin: 0; color: var(--mg-text); font-size: clamp(17px, 1.28vw, 20px); line-height: 1.52; } .mg-chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .mg-chip-list span, .mg-process-note span { display: inline-flex; align-items: center; min-height: 38px; padding: 9px 13px; border: 1px solid rgba(98, 214, 255, 0.24); border-radius: 8px; color: rgba(239, 249, 255, 0.9); background: rgba(6, 22, 39, 0.74); font-size: 14px; line-height: 1.2; } .mg-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .modbus-page .btn-secondary { border: 1px solid rgba(98, 214, 255, 0.32); color: #eaf8ff; background: rgba(5, 20, 36, 0.74); } .mg-cards-wrap { display: grid; min-height: 0; height: calc(100vh - clamp(68px, 10vh, 124px) - 1px); align-content: center; gap: clamp(18px, 3vh, 32px); } .mg-section-head { max-width: 940px; } .mg-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.5vw, 18px); } .mg-card { min-width: 0; padding: 12px; border: 1px solid rgba(91, 196, 255, 0.16); border-radius: 8px; background: linear-gradient(180deg, rgba(7, 20, 36, 0.82), rgba(3, 11, 22, 0.88)); box-shadow: 0 20px 54px rgba(0, 0, 0, 0.24); } .mg-card img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: contain; border-radius: 6px; background: #06101d; } .mg-card h3 { margin: 12px 0 8px; color: #fff; font-size: clamp(17px, 1.55vw, 21px); line-height: 1.14; } .mg-card p { margin: 0; color: var(--mg-muted); font-size: 14px; line-height: 1.45; } .mg-process-layout { min-height: 0; height: calc(100vh - clamp(68px, 10vh, 124px) - 1px); display: grid; grid-template-rows: minmax(0, 0.30fr) minmax(0, 0.40fr) minmax(0, 0.30fr); align-items: center; } .mg-process-copy { grid-row: 1; align-self: start; max-width: 940px; padding: 0; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.62); } .mg-process-copy h2 { margin-bottom: 8px; font-size: clamp(34px, 3.2vw, 50px); } .mg-process-copy p { font-size: clamp(16px, 1.15vw, 18px); line-height: 1.46; } .mg-process-note { grid-row: 3; align-self: end; display: flex; flex-wrap: wrap; gap: 9px; max-width: 860px; padding: 16px 0 0; } @media (max-width: 1180px) { .mg-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1180px) { .mg-card img { max-height: 132px; } } @media (max-width: 900px) { .mg-slide { padding: 28px 0; } } @media (max-width: 900px) { .mg-slide-inner, .mg-process-layout, .mg-cards-wrap { width: min(calc(100% - 28px), var(--container)); } } @media (max-width: 900px) { .mg-slide-inner--left, .mg-slide-inner--right { grid-template-columns: 1fr; align-content: end; } } @media (max-width: 900px) { .mg-slide-inner--right .mg-copy { grid-column: 1; } } @media (max-width: 900px) { .mg-copy, .mg-process-copy { max-width: min(620px, 100%); padding: 0; } } @media (max-width: 900px) { .mg-wf-bg { object-position: center top; } } @media (max-width: 900px) { .mg-process-layout { grid-template-rows: minmax(0, 0.30fr) minmax(0, 0.40fr) minmax(0, 0.30fr); } } @media (max-width: 900px) { .mg-process-copy h2 { font-size: clamp(26px, 4vw, 34px); line-height: 1; } } @media (max-width: 900px) { .mg-process-copy p { font-size: 15px; line-height: 1.36; } } @media (max-width: 560px) { .mg-slide { padding: 18px 0; } }
/* css/modules/responsive/modbus-responsive-max-width-560px.css */ @media (max-width: 560px) { .mg-slide-inner, .mg-process-layout, .mg-cards-wrap { width: min(calc(100% - 22px), var(--container)); min-height: 0; height: calc(100vh - 36px); } } @media (max-width: 560px) { .mg-slide-inner--left, .mg-slide-inner--right { align-content: center; } } @media (max-width: 560px) { .mg-copy, .mg-process-copy { max-width: min(330px, calc(100vw - 24px)); padding: 0; } } @media (max-width: 560px) { .mg-copy h1 { max-width: 300px; font-size: clamp(25px, 7.3vw, 30px); line-height: 1.04; } } @media (max-width: 560px) { .mg-copy h2, .mg-section-head h2, .mg-process-copy h2 { margin-bottom: 8px; font-size: clamp(24px, 6.6vw, 32px); line-height: 1.08; } } @media (max-width: 560px) { .mg-lead, .mg-copy p, .mg-section-head p, .mg-process-copy p { max-width: min(330px, calc(100vw - 24px)); font-size: 13.5px; line-height: 1.44; } } @media (max-width: 560px) { .mg-kicker { margin-bottom: 7px; font-size: 10px; } } @media (max-width: 560px) { .mg-chip-list { display: grid; grid-template-columns: repeat(2, max-content); max-width: min(330px, calc(100vw - 24px)); gap: 6px; margin-top: 10px; } } @media (max-width: 560px) { .mg-chip-list span, .mg-process-note span { max-width: 100%; min-height: 26px; padding: 6px 7px; font-size: 10.5px; } } @media (max-width: 560px) { .mg-actions { gap: 8px; margin-top: 12px; } } @media (max-width: 560px) { .mg-actions .btn { max-width: 100%; min-height: 40px; padding: 10px 11px; font-size: 12.5px; } } @media (max-width: 560px) { .mg-cards-wrap { gap: 10px; } } @media (max-width: 560px) { .mg-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } } @media (max-width: 560px) { .mg-card { padding: 8px; } } @media (max-width: 560px) { .mg-card img { max-height: 68px; } } @media (max-width: 560px) { .mg-card h3 { margin: 7px 0 5px; font-size: 13px; line-height: 1.12; } } @media (max-width: 560px) { .mg-card p { font-size: 11px; line-height: 1.25; } } @media (max-width: 560px) { .mg-section-head { max-width: 100%; } } @media (max-width: 560px) { .mg-process-copy { align-self: start; } } @media (max-width: 560px) { .mg-process-note { gap: 6px; padding-top: 8px; } } @media (max-height: 820px) and (min-width: 900px) { .mg-copy { max-width: 560px; padding: 0; } } @media (max-height: 820px) and (min-width: 900px) { .mg-copy h1 { margin-bottom: 10px; font-size: clamp(36px, 3.7vw, 54px); line-height: 1.02; } } @media (max-height: 820px) and (min-width: 900px) { .mg-copy h2 { margin-bottom: 8px; font-size: clamp(30px, 3vw, 44px); line-height: 1.04; } } @media (max-height: 820px) and (min-width: 900px) { .mg-lead, .mg-copy p { font-size: 16px; line-height: 1.42; } } @media (max-height: 820px) and (min-width: 900px) { .mg-chip-list { gap: 6px; margin-top: 10px; } } @media (max-height: 820px) and (min-width: 900px) { .mg-chip-list span { min-height: 32px; padding: 7px 10px; font-size: 12px; } } @media (max-height: 820px) and (min-width: 900px) { .mg-actions { gap: 8px; margin-top: 12px; } } @media (max-height: 820px) and (min-width: 900px) { .mg-actions .btn { min-height: 40px; padding: 10px 12px; font-size: 13px; } } @media (max-height: 820px) and (min-width: 900px) { .mg-process-copy { padding: 0; } } @media (max-height: 820px) and (min-width: 900px) { .mg-process-copy h2 { font-size: clamp(28px, 2.65vw, 38px); } } body :where(a, p, h1, h2, h3, h4, span, strong, li, button) { overflow-wrap: normal !important; word-break: normal !important; hyphens: manual !important; } .modbus-page { background: #06101d; } .modbus-hero, .modbus-scene { position: relative; min-height: min(820px, calc(100svh - 76px)); display: flex; align-items: center; overflow: hidden; color: #fff; background: #06101d; } .modbus-hero { min-height: min(840px, calc(100svh - 76px)); } .modbus-bg, .modbus-shade { position: absolute; inset: 0; width: 100%; height: 100%; } .modbus-bg { object-fit: cover; object-position: center right; } .modbus-shade { background: radial-gradient(circle at 72% 58%, rgba(31, 123, 255, 0.1), transparent 28rem), linear-gradient(90deg, rgba(4, 10, 20, 0.98) 0%, rgba(4, 10, 20, 0.9) 34%, rgba(4, 10, 20, 0.44) 62%, rgba(4, 10, 20, 0.08) 100%), linear-gradient(180deg, rgba(4, 10, 20, 0.06), rgba(4, 10, 20, 0.7)); } .modbus-hero-inner, .modbus-scene-inner { position: relative; z-index: 1; padding: clamp(76px, 10vw, 136px) 0; } .modbus-copy { width: min(680px, 100%); } .modbus-copy h1, .modbus-copy h2 { max-width: 680px; margin-bottom: 24px; color: #fff; font-size: clamp(44px, 6.2vw, 84px); line-height: 0.98; } .modbus-copy h2 { font-size: clamp(38px, 4.6vw, 66px); line-height: 1; } .modbus-lead { max-width: 660px; margin-bottom: 18px; color: rgba(255, 255, 255, 0.94); font-size: clamp(20px, 2vw, 27px); line-height: 1.34; } .modbus-text, .modbus-copy p, .modbus-list { max-width: 640px; color: rgba(219, 235, 250, 0.84); font-size: 17px; line-height: 1.72; } .modbus-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .modbus-ghost { color: #fff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); } .modbus-strip, .modbus-benefits, .modbus-economy, .modbus-mail { background: #f5f8fc; } .modbus-strip { padding: 28px 0; } .modbus-strip-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
/* css/modules/responsive/modbus-responsive-max-width-1100px.css */ .modbus-chip, .modbus-card, .modbus-price-grid > div { border: 1px solid rgba(31, 123, 255, 0.14); border-radius: 22px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 18px 50px rgba(11, 45, 76, 0.1); } .modbus-chip { padding: 20px; } .modbus-chip strong, .modbus-chip span { display: block; } .modbus-chip strong { margin-bottom: 6px; color: #071b3a; font-size: 20px; } .modbus-chip span { color: #5a6f8c; font-size: 14px; line-height: 1.45; } .modbus-scene-right .modbus-scene-inner { display: flex; justify-content: flex-start; } .modbus-scene-right .modbus-shade { background: radial-gradient(circle at 72% 58%, rgba(31, 123, 255, 0.1), transparent 28rem), linear-gradient(90deg, rgba(4, 10, 20, 0.98) 0%, rgba(4, 10, 20, 0.9) 34%, rgba(4, 10, 20, 0.44) 62%, rgba(4, 10, 20, 0.08) 100%), linear-gradient(180deg, rgba(4, 10, 20, 0.06), rgba(4, 10, 20, 0.7)); } .modbus-scene-light { color: #071b3a; background: #f5f8fc; } .modbus-scene-light .modbus-bg { opacity: 0.94; } .modbus-scene-light .modbus-shade { background: linear-gradient(90deg, rgba(245, 248, 252, 0.98) 0%, rgba(245, 248, 252, 0.92) 35%, rgba(245, 248, 252, 0.56) 64%, rgba(245, 248, 252, 0.16) 100%), linear-gradient(180deg, rgba(245, 248, 252, 0.1), rgba(245, 248, 252, 0.72)); } .modbus-scene-light .modbus-copy h2 { color: #071b3a; } .modbus-scene-light .modbus-copy p { color: #29405f; } .modbus-scene-light .modbus-list li, .modbus-scene-light .modbus-specs span { color: #0c315c; background: rgba(255, 255, 255, 0.74); border-color: rgba(31, 123, 255, 0.2); box-shadow: 0 12px 34px rgba(15, 55, 115, 0.08); } .modbus-list { display: grid; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; } .modbus-list li { padding: 13px 16px; border: 1px solid rgba(119, 213, 255, 0.2); border-radius: 16px; background: rgba(6, 22, 38, 0.62); } .modbus-specs, .modbus-flow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } .modbus-specs span, .modbus-flow span { display: inline-flex; align-items: center; min-height: 42px; padding: 10px 14px; border: 1px solid rgba(119, 213, 255, 0.24); border-radius: 999px; color: #dff7ff; background: rgba(6, 22, 38, 0.62); font-weight: 780; } .modbus-section-head { max-width: 780px; margin-bottom: 34px; } .modbus-section-head h2 { color: #071b3a; } .modbus-section-head p { max-width: 700px; color: #5a6f8c; font-size: 18px; } .modbus-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .modbus-card { min-width: 0; padding: 24px; } .modbus-card h3 { color: #071b3a; } .modbus-card p { color: #5a6f8c; font-size: 15.5px; } .modbus-card-visual { display: block; width: min(156px, 74%); height: 132px; margin: -2px 0 18px; object-fit: contain; object-position: left center; filter: drop-shadow(0 18px 28px rgba(31, 123, 255, 0.16)); } .modbus-economy-grid { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: 30px; align-items: center; } .modbus-price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .modbus-price-grid > div { padding: 24px; } .modbus-price-grid span { color: #0b4cbd; font-size: 12px; font-weight: 840; letter-spacing: 0.08em; text-transform: uppercase; } .modbus-price-grid strong { display: block; margin: 12px 0; color: #071b3a; font-size: clamp(34px, 3.4vw, 48px); line-height: 1; } .modbus-price-grid p { margin: 0; color: #5a6f8c; font-size: 15px; } .modbus-page .generated-band, .modbus-page .generated-cta { background: #f5f8fc; } .modbus-mail-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: clamp(28px, 5vw, 52px); border: 1px solid rgba(31, 123, 255, 0.16); border-radius: 30px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(237, 246, 255, 0.92)); box-shadow: 0 24px 70px rgba(15, 55, 115, 0.12); } .modbus-mail-card h2 { max-width: 720px; color: #071b3a; } .modbus-mail-card p { max-width: 760px; margin: 0; color: #29405f; } @media (max-width: 1100px) { .modbus-strip-grid, .modbus-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1100px) { .modbus-economy-grid { grid-template-columns: 1fr; } } @media (max-width: 780px) { .modbus-hero, .modbus-scene { min-height: auto; } } @media (max-width: 780px) { .modbus-bg { object-position: 68% center; } } @media (max-width: 780px) { .modbus-shade, .modbus-scene-right .modbus-shade { background: linear-gradient(180deg, rgba(4, 10, 20, 0.98) 0%, rgba(4, 10, 20, 0.9) 58%, rgba(4, 10, 20, 0.58) 100%); } } @media (max-width: 780px) { .modbus-scene-light .modbus-shade { background: linear-gradient(180deg, rgba(245, 248, 252, 0.98) 0%, rgba(245, 248, 252, 0.9) 58%, rgba(245, 248, 252, 0.62) 100%); } } @media (max-width: 780px) { .modbus-hero-inner, .modbus-scene-inner { padding: 82px 0 70px; } } @media (max-width: 780px) { .modbus-copy, .modbus-copy h1, .modbus-copy h2, .modbus-lead, .modbus-text, .modbus-copy p, .modbus-list { max-width: min(340px, calc(100vw - 34px)); } } @media (max-width: 780px) { .modbus-copy h1 { font-size: clamp(38px, 10vw, 48px); } } @media (max-width: 780px) { .modbus-copy h2 { font-size: clamp(31px, 8.3vw, 40px); } } @media (max-width: 780px) { .modbus-lead { font-size: 19px; } } @media (max-width: 780px) { .modbus-actions { display: grid; grid-template-columns: 1fr; } } @media (max-width: 780px) { .modbus-actions .btn { width: 100%; } } @media (max-width: 780px) { .modbus-mail-card { grid-template-columns: 1fr; padding: 24px; border-radius: 24px; } } @media (max-width: 780px) { .modbus-mail-card .btn { width: 100%; } } @media (max-width: 780px) { .modbus-strip-grid, .modbus-card-grid, .modbus-price-grid { grid-template-columns: 1fr; } } @media (max-width: 780px) { .modbus-card { padding: 20px; } }
/* css/modules/components/solutions-components.css */ .solutions-page { background: #f7fbff; } .solutions-hero { position: relative; height: min(820px, calc(100svh - 96px)); min-height: 640px; display: flex; align-items: center; overflow: clip; } .solutions-hero-bg { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(247, 251, 255, 0.08) 0%, rgba(247, 251, 255, 0.12) 42%, rgba(247, 251, 255, 0.02) 100%), url("/assets/solutions/hero-solutions-map.webp") center / cover no-repeat; } .solutions-hero-grid { position: relative; z-index: 1; display: block; } .solutions-hero h1 { max-width: 620px; margin-bottom: 24px; font-size: clamp(38px, 4.4vw, 62px); line-height: 1; } .solutions-hero-copy { width: min(620px, 100%); padding: clamp(28px, 4vw, 46px); border: 1px solid rgba(31, 123, 255, 0.14); border-radius: 30px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 24px 74px rgba(15, 55, 115, 0.13); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .solutions-hero-copy p { max-width: 690px; margin-bottom: 28px; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.55; } .solutions-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; } .solutions-map { display: none; } .solutions-map img { display: none; } .solutions-section-head { position: relative; max-width: 760px; margin-bottom: 34px; } .solutions-section-head h2, .matrix-copy h2, .implementation-copy h2 { margin-bottom: 16px; font-size: clamp(34px, 4vw, 56px); line-height: 1.02; } .solutions-section-head p, .matrix-copy p { font-size: 18px; } .solution-selector { background: linear-gradient(180deg, #fff 0%, #f4f9ff 100%); } .selector-bg { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(31, 123, 255, 0.16), rgba(255, 255, 255, 0)); opacity: 0.34; pointer-events: none; } .selector-layout { position: relative; display: grid; grid-template-columns: minmax(300px, 0.38fr) minmax(0, 1fr); gap: 24px; align-items: stretch; } .solution-rail { display: grid; gap: 10px; align-content: start; padding: 18px; border: 1px solid rgba(31, 123, 255, 0.15); border-radius: 26px; background: rgba(255, 255, 255, 0.82); box-shadow: var(--shadow-soft); } .solution-rail a { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center; min-height: 54px; padding: 10px 12px; border-radius: 18px; color: #183456; font-weight: 760; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; } .solution-rail a:hover { color: var(--blue-dark); background: #eef6ff; transform: translateX(3px); } .solution-rail span { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; color: var(--blue-dark); background: #fff; border: 1px solid rgba(31, 123, 255, 0.16); font-size: 12px; font-weight: 900; } .solution-preview { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 28px; border: 1px solid rgba(31, 123, 255, 0.16); border-radius: 30px; background: rgba(255, 255, 255, 0.78); box-shadow: var(--shadow-soft); } .preview-media { align-self: stretch; min-width: 0; aspect-ratio: 1672 / 941; overflow: hidden; border-radius: 24px; background: #fff; } .preview-media img { width: 100%; height: 100%; object-fit: contain; padding: 10px; } .preview-copy { align-self: center; min-width: 0; max-width: 780px; } .preview-copy h3 { max-width: 520px; font-size: clamp(28px, 3vw, 42px); line-height: 1.04; } .preview-copy p { font-size: 17px; } .preview-copy ul { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; } .preview-copy li { padding: 14px 16px; border-left: 3px solid var(--blue); border-radius: 14px; color: #29405f; background: rgba(238, 246, 255, 0.8); } .solutions-matrix { background: #fff; } .matrix-grid { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); gap: 46px; align-items: start; } .matrix-copy { position: sticky; top: 110px; } .matrix-table { display: grid; gap: 14px; } .matrix-table > div { display: grid; grid-template-columns: 74px 48px minmax(150px, 0.32fr) minmax(0, 1fr); gap: 16px; align-items: center; min-height: 104px; padding: 22px; border: 1px solid rgba(31, 123, 255, 0.14); border-radius: 22px; background: linear-gradient(180deg, #fff, #f6faff); box-shadow: 0 14px 38px rgba(15, 55, 115, 0.06); } .matrix-icon { display: block; width: 66px; height: 66px; object-fit: contain; } .matrix-table span { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; color: var(--blue-dark); background: #edf6ff; font-weight: 900; } .matrix-table strong { color: var(--ink); font-size: 20px; } .matrix-table p { margin: 0; font-size: 15.5px; } .implementation-strip { background: #f5faff; } .implementation-bg { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(31, 123, 255, 0.12), rgba(255, 255, 255, 0)); opacity: 0.24; } .implementation-flow { position: relative; display: grid; gap: 34px; } .implementation-copy { max-width: 960px; } .implementation-copy p { max-width: 680px; font-size: 18px; } .implementation-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .implementation-cards article { min-height: 100%; padding: 0 4px; } .implementation-cards img { display: block; width: 100%; aspect-ratio: 0.7; object-fit: contain; margin-bottom: 18px; } .implementation-cards h3 { font-size: 19px; margin: 0 8px 10px; } .implementation-cards p { margin: 0 8px; font-size: 15.5px; }
/* css/modules/components/products-components.css */ .generated-page { background: linear-gradient(180deg, #fff 0%, #f4f9ff 44%, #fff 100%); } .generated-hero { min-height: min(760px, calc(100svh - 76px)); display: flex; align-items: center; overflow: hidden; background: linear-gradient(90deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.9) 46%, rgba(238,246,255,0.72) 100%); } .generated-hero-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.8fr); gap: 44px; align-items: center; } .generated-hero-copy { max-width: 760px; min-width: 0; } .generated-hero-copy h1 { font-size: clamp(42px, 5vw, 70px); max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } .generated-hero-copy p { max-width: 680px; color: var(--text); font-size: clamp(18px, 1.7vw, 22px); line-height: 1.55; } .generated-hero-visual { width: min(520px, 100%); justify-self: center; filter: drop-shadow(0 24px 40px rgba(15,55,115,0.13)); } .generated-list, .generated-detail { background: #fff; } .generated-band { background: linear-gradient(180deg, rgba(245,250,255,0.96), rgba(238,246,255,0.9)); } .generated-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .generated-card { min-width: 0; min-height: 100%; padding: 22px; border: 1px solid rgba(31, 123, 255, 0.15); border-radius: 24px; background: rgba(255,255,255,0.86); box-shadow: var(--shadow-soft); } .generated-card img { width: 100%; aspect-ratio: 1.35; object-fit: contain; margin-bottom: 12px; } .generated-card h3 { font-size: 22px; line-height: 1.12; overflow-wrap: anywhere; word-break: break-word; } .generated-card p { color: var(--text); font-size: 15.5px; overflow-wrap: anywhere; word-break: break-word; }
/* css/modules/components/cases-components.css */ .cases-overview { background: #fff; } .cases-overview-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(360px, 0.55fr); gap: 34px; align-items: end; } .cases-proof-grid { display: grid; gap: 14px; } .cases-proof-grid div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: center; min-height: 86px; padding: 18px 20px; border: 1px solid rgba(31, 123, 255, 0.15); border-radius: 22px; background: rgba(255,255,255,0.86); box-shadow: var(--shadow-soft); } .cases-proof-grid strong { color: var(--blue-dark); font-size: 42px; line-height: 1; } .cases-proof-grid span { color: var(--text); font-weight: 740; line-height: 1.32; } .cases-study-list { background: linear-gradient(180deg, rgba(245,250,255,0.96), rgba(255,255,255,0.96)); } .case-study-grid { display: grid; gap: 24px; } .case-study-card { display: grid; grid-template-columns: minmax(360px, 0.92fr) minmax(0, 1fr); gap: 28px; align-items: stretch; min-width: 0; padding: 18px; border: 1px solid rgba(31, 123, 255, 0.15); border-radius: 26px; background: rgba(255, 255, 255, 0.88); box-shadow: var(--shadow-soft); } .case-study-media { display: grid; place-items: center; min-width: 0; border-radius: 20px; background: linear-gradient(135deg, #eaf5ff, #fff); } .case-study-media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; border-radius: 18px; } .case-study-content { display: flex; min-width: 0; flex-direction: column; padding: 6px 8px 6px 0; } .case-study-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; } .case-study-meta span { display: inline-flex; align-items: center; min-height: 34px; padding: 8px 12px; border: 1px solid rgba(31, 123, 255, 0.16); border-radius: 999px; color: var(--blue-dark); background: rgba(255,255,255,0.84); font-size: 12px; font-weight: 820; letter-spacing: 0.06em; text-transform: uppercase; } .case-study-card h3 { margin-bottom: 18px; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.08; } .case-study-facts { display: grid; gap: 12px; margin: 0; } .case-study-facts div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; } .case-study-facts dt { color: var(--blue-dark); font-size: 12px; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; } .case-study-facts dd { margin: 0; color: var(--text); font-size: 15.5px; line-height: 1.52; } .case-study-products { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 18px; } .case-study-products span { display: inline-flex; align-items: center; min-height: 32px; padding: 7px 10px; border: 1px solid rgba(31,123,255,0.14); border-radius: 999px; color: #17406e; background: #fff; font-size: 12px; font-weight: 760; } .cases-method { background: #fff; } /* Cases workflow-correct landing */ .cases-page { --cases-bg: #05080d; --cases-panel: rgba(7, 18, 28, 0.72); --cases-panel-strong: rgba(9, 23, 36, 0.9); --cases-line: rgba(91, 213, 255, 0.2); --cases-line-strong: rgba(139, 224, 199, 0.34); --cases-text: rgba(238, 246, 252, 0.88); --cases-muted: rgba(196, 211, 224, 0.76); --cases-cyan: #5bd5ff; --cases-mint: #8be0c7; --cases-amber: #f1b85b; background: var(--cases-bg); color: #f7fbff; } .cases-page :where(h1, h2, h3, p, a, button, span, strong, li, dt, dd, label, input, textarea) { overflow-wrap: normal !important; word-break: normal !important; hyphens: manual !important; letter-spacing: 0; } .cases-slide { position: relative; isolation: isolate; display: flex; align-items: stretch; min-height: calc(100svh - 1px); padding: clamp(34px, 5vh, 62px) 0; overflow: clip; background: radial-gradient(circle at 10% 0%, rgba(139, 224, 199, 0.08), transparent 24%), var(--cases-bg); } .cases-slide + .cases-slide { border-top: 1px solid rgba(91, 213, 255, 0.08); } .cases-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: contain; object-position: center center; pointer-events: none; } .cases-slide-inner, .cases-process-layout, .cases-catalog-wrap { position: relative; z-index: 1; width: min(calc(100% - 40px), var(--container)); margin: auto; } .cases-slide-inner { display: grid; min-height: 0; height: calc(100svh - clamp(68px, 10vh, 124px) - 1px); align-items: center; } .cases-slide-inner--left { grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); } .cases-copy { max-width: 460px; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.64); } .cases-kicker { margin: 0 0 12px; color: var(--cases-mint); font-size: 12px; font-weight: 840; line-height: 1.25; text-transform: uppercase; } .cases-copy h1, .cases-copy h2, .cases-section-head h2, .cases-process-copy h2 { max-width: 100%; margin: 0 0 16px; color: #fff; font-size: clamp(40px, 4.2vw, 68px); line-height: 1.02; } .cases-copy h2, .cases-section-head h2, .cases-process-copy h2 { font-size: clamp(34px, 3.4vw, 54px); line-height: 1.04; } .cases-lead, .cases-copy p, .cases-section-head p, .cases-process-copy p { margin: 0; color: var(--cases-text); font-size: clamp(17px, 1.25vw, 20px); line-height: 1.52; } .cases-hero-list { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; } .cases-hero-list li { position: relative; padding-left: 20px; color: var(--cases-text); font-size: 15px; line-height: 1.42; } .cases-hero-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 999px; background: var(--cases-amber); } .cases-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .cases-page .btn-secondary { border: 1px solid rgba(91, 213, 255, 0.28); color: #eef9ff; background: rgba(7, 22, 35, 0.74); } .cases-process-layout { display: grid; grid-template-rows: minmax(0, 0.30fr) minmax(0, 0.40fr) minmax(0, 0.30fr); min-height: 0; height: calc(100svh - clamp(68px, 10vh, 124px) - 1px); align-items: center; } .cases-process-copy { grid-row: 1; align-self: start; max-width: 940px; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.64); } .cases-process-copy h2 { margin-bottom: 8px; font-size: clamp(32px, 3vw, 50px); }
/* css/modules/components/cases-components-foundation.css */ .cases-process-copy p { max-width: 920px; font-size: clamp(16px, 1.12vw, 18px); line-height: 1.45; } .cases-process-note { grid-row: 3; align-self: end; display: flex; flex-wrap: wrap; gap: 10px; max-width: 980px; padding: 12px 0 0; } .cases-process-note span { display: inline-flex; align-items: center; min-height: 42px; padding: 9px 12px; border: 1px solid var(--cases-line-strong); border-radius: 8px; color: rgba(241, 250, 255, 0.92); background: rgba(6, 20, 32, 0.76); font-size: 14px; line-height: 1.28; } .cases-process-note b { margin-right: 6px; color: var(--cases-mint); } .cases-method-note { align-items: center; } .cases-method-note .btn { min-height: 42px; } .cases-catalog { display: block; min-height: auto; height: auto; padding: clamp(72px, 8vw, 112px) 0; overflow: visible; background: linear-gradient(180deg, rgba(5, 8, 13, 0.94), rgba(8, 13, 20, 0.98)), var(--cases-bg); } .cases-bg--catalog { object-position: center top; } .cases-catalog-wrap { display: grid; gap: clamp(28px, 4vw, 42px); } .cases-section-head { max-width: 980px; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.58); } .cases-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 22px); } .cases-card { display: flex; min-width: 0; flex-direction: column; padding: 12px; border: 1px solid rgba(91, 213, 255, 0.16); border-radius: 8px; background: linear-gradient(180deg, rgba(9, 23, 36, 0.9), rgba(5, 12, 21, 0.96)); box-shadow: 0 24px 62px rgba(0, 0, 0, 0.24); } .cases-card-media { min-width: 0; border-radius: 7px; background: #071420; } .cases-card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; border-radius: 7px; } .cases-card-content { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; padding: 14px 2px 2px; } .cases-card-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .cases-card-meta span, .cases-card-products span { display: inline-flex; align-items: center; min-height: 28px; padding: 6px 8px; border: 1px solid rgba(91, 213, 255, 0.18); border-radius: 8px; color: rgba(230, 248, 255, 0.9); background: rgba(8, 24, 38, 0.76); font-size: 11px; font-weight: 780; line-height: 1.2; } .cases-card h3 { margin: 0 0 14px; color: #fff; font-size: clamp(19px, 1.65vw, 24px); line-height: 1.14; } .cases-card-facts { display: grid; gap: 10px; margin: 0; } .cases-card-facts div { display: grid; gap: 4px; } .cases-card-facts dt { color: var(--cases-mint); font-size: 11px; font-weight: 850; line-height: 1.2; text-transform: uppercase; } .cases-card-facts dd { margin: 0; color: var(--cases-muted); font-size: 13.5px; line-height: 1.48; } .cases-card-products { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 14px; } .cases-card-products span { color: rgba(251, 239, 202, 0.92); border-color: rgba(241, 184, 91, 0.2); } .cases-cta-copy { max-width: 460px; }