/* =================================== CSS Variables - Token Layer (LX Cable) =================================== */ :root { /* 品牌主色 (LX Cable) */ --lx-color-primary: #fcb604; --lx-color-primary-light: #ffd359; --lx-color-primary-dark: #c48c00; --lx-gradient-primary: linear-gradient(135deg, var(--lx-color-primary-light) 0%, var(--lx-color-primary) 50%, var(--lx-color-primary-dark) 100%); /* 兼容别名：首页不使用独立强调色，统一沿用品牌黄 */ --lx-color-accent: var(--lx-color-primary); /* 文字颜色 */ --lx-color-text-heading: #18181b; --lx-color-text-body: #1a1a1a; --lx-color-text-muted: #6c6d73; /* 边框与分割 */ --lx-color-border: #e8e8ea; --lx-color-border-light: #f3f4f6; /* 背景色 */ --lx-color-bg-base: #f1f1f1; --lx-color-bg-soft: #f3f5f8; --lx-color-bg-card: #ffffff; --lx-color-bg-dark: #18181b; /* 页脚与深色区块均采用首页的近黑色 */ --lx-color-bg-footer: var(--lx-color-bg-dark); /* 圆角规范（严格直角） */ --lx-radius-sm: 0; --lx-radius-md: 0; --lx-radius-lg: 0; /* 阴影（暖色调，避免蓝调污染） */ --lx-shadow-soft: 0 14px 40px rgba(122, 87, 0, 0.08); --lx-shadow-modal: rgba(122, 87, 0, 0.5); /* 遮罩层 */ --lx-overlay-light: rgba(0, 0, 0, 0.4); --lx-overlay-dark: rgba(17, 24, 39, 0.75); /* 字体族 */ --lx-font-heading: "Manrope", "Poppins", "Inter", Arial, sans-serif; --lx-font-body: "Inter", Arial, sans-serif; /* 布局与间距 */ --lx-container-max: 1280px; --lx-container-pad: 40px; --lx-content-max-narrow: 800px; /* 间距 (gap) 体系 —— 等价重构，数值与原硬编码一致 */ --lx-gap-2: 2px; --lx-gap-4: 4px; --lx-gap-6: 6px; --lx-gap-8: 8px; --lx-gap-10: 10px; --lx-gap-12: 12px; --lx-gap-14: 14px; --lx-gap-16: 16px; --lx-gap-24: 24px; --lx-gap-28: 28px; --lx-gap-32: 32px; --lx-gap-40: 40px; --lx-gap-48: 48px; --lx-gap-60: 60px; --lx-section-y: 80px; --lx-section-y-sm: 40px; --lx-section-y-lg: 120px; --lx-section-y-mobile: 40px; --lx-section-y-sm-mobile: 24px; --lx-section-y-lg-mobile: 64px; /* 文字排版 */ --lx-fs-h1: clamp(2.5rem, 5vw, 4rem); /* 40px - 64px */ --lx-fs-h2: clamp(2rem, 4vw, 3rem); /* 32px - 48px */ --lx-fs-h3: clamp(1.5rem, 3vw, 2rem); /* 24px - 32px */ --lx-fs-h4: clamp(1.25rem, 2vw, 1.5rem); /* 20px - 24px */ --lx-fs-lead: clamp(1.125rem, 1.5vw, 1.25rem); /* 18px - 20px */ --lx-fs-body: 1rem; /* 16px */ --lx-fs-sm: 0.875rem; /* 14px */ --lx-fs-xs: 0.75rem; /* 12px */ /* 其他阴影 */ --lx-shadow-sm: rgba(122, 87, 0, 0.05); --lx-shadow-md: rgba(122, 87, 0, 0.1); /* Modal 专属 */ --lx-modal-close-bg: rgba(255, 255, 255, 0.85); --lx-modal-panel-from: #18181b; --lx-modal-panel-to: #27272a; /* 社交媒体 */ --lx-social-facebook: #1877F2; --lx-social-twitter: #1DA1F2; --lx-social-linkedin: #0A66C2; --lx-social-whatsapp: #25D366; --lx-social-pinterest: #BD081C; } /* =================================== Typography Layer - 文字体系 =================================== */ .lx-text-h1 { font-family: var(--lx-font-heading); font-size: var(--lx-fs-h1); font-weight: 900; line-height: 1.1; color: var(--lx-color-text-heading); } .lx-text-h2 { font-family: var(--lx-font-heading); font-size: var(--lx-fs-h2); font-weight: 800; line-height: 1.2; color: var(--lx-color-text-heading); } .lx-text-h3 { font-family: var(--lx-font-heading); font-size: var(--lx-fs-h3); font-weight: 800; line-height: 1.3; color: var(--lx-color-text-heading); } .lx-text-h4 { font-family: var(--lx-font-heading); font-size: var(--lx-fs-h4); font-weight: 700; line-height: 1.4; color: var(--lx-color-text-heading); } .lx-text-lead { font-family: var(--lx-font-body); font-size: var(--lx-fs-lead); line-height: 1.6; color: var(--lx-color-text-muted); } .lx-text-body { font-family: var(--lx-font-body); font-size: var(--lx-fs-body); line-height: 1.6; color: var(--lx-color-text-body); } .lx-text-sm { font-family: var(--lx-font-body); font-size: var(--lx-fs-sm); line-height: 1.5; color: var(--lx-color-text-muted); } .lx-text-xs { font-family: var(--lx-font-body); font-size: var(--lx-fs-xs); line-height: 1.5; color: var(--lx-color-text-muted); } /* 装饰性文本 / Eyebrow */ .lx-text-eyebrow { font-family: var(--lx-font-heading); font-size: clamp(14px, calc(0.8rem + 0.2vw), 16px); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--lx-color-primary); display: inline-flex; align-items: center; gap: var(--lx-gap-8); } /* =================================== Homepage heading standard 新页面保留语义标签，并按场景叠加对应的 lx-heading-* 类。 不直接重置全局 h1/h2/h3，避免影响 WordPress 富文本与现有模板。 =================================== */ /* Hero H1：首屏主标题 */ .lx-heading-hero { font-family: var(--lx-font-heading); font-size: clamp(36px, calc(1.25rem + 2.85vw), 58px); font-weight: 700; line-height: 1.05; letter-spacing: -0.05em; color: inherit; } /* Standard H2：常规内容区标题 */ .lx-heading-section { font-family: var(--lx-font-heading); font-size: clamp(28px, 3.5vw, 44px); font-weight: 600; line-height: 0.98; letter-spacing: -0.04em; color: var(--lx-color-text-heading); } /* Dark H2：深色或大视觉区标题（如企业实力） */ .lx-heading-section--dark { font-family: var(--lx-font-heading); font-size: clamp(32px, 4vw, 56px); font-weight: 600; line-height: 0.98; letter-spacing: -0.04em; color: #ffffff; } /* App H2：全屏行业应用区标题 */ .lx-heading-section--app { font-family: var(--lx-font-heading); font-size: clamp(36px, 4.5vw, 56px); font-weight: 600; line-height: 0.98; letter-spacing: -0.04em; color: #ffffff; } /* BOMFLEX H2：深色双栏服务区标题 */ .lx-heading-section--bomflex { font-family: var(--lx-font-heading); font-size: clamp(32px, 4vw, 52px); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; color: #ffffff; } /* Card H3：产品、配件、文章等卡片标题 */ .lx-heading-card { font-family: var(--lx-font-heading); font-size: clamp(16px, calc(0.9rem + 0.35vw), 20px); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--lx-color-text-heading); } @media (max-width: 1180px) { .lx-heading-hero { font-size: clamp(30px, calc(1rem + 2.5vw), 48px); line-height: 1.08; } } @media (min-width: 1181px) and (max-width: 1440px) { .lx-heading-hero { font-size: clamp(38px, calc(1rem + 2.2vw), 48px); } } @media (max-width: 767px) { .lx-heading-section--app { font-size: clamp(30px, 9vw, 40px); line-height: 1.08; } } /* =================================== Layout - 布局样式（通用） =================================== */ .container { width: 100%; max-width: var(--lx-container-max); margin: 0 auto; padding: 0 var(--lx-container-pad); } /* Section - 通用区块容器 页面由多个 section 垂直堆叠而成，统一控制上下间距。 用法：
...
变体： - .section--sm / .section--lg：紧凑 / 宽松间距 - .section--gray / .section--dark：浅灰 / 深色背景，用于交替分块 - .section--center：内容水平居中（标题组常用） */ .section { padding: var(--lx-section-y) 0; } .section--sm { padding: var(--lx-section-y-sm) 0; } .section--lg { padding: var(--lx-section-y-lg) 0; } .section--flush { padding: 0; } .section--tight-bottom { padding-bottom: 20px; } .section--gray { background: var(--lx-color-bg-base); } .section--soft { background: var(--lx-color-bg-soft); } .section--dark { background: var(--lx-color-bg-dark); color: var(--lx-color-bg-card); } .section--center .container { text-align: center; } .is-hidden { display: none !important; } .lx-section__head--center { text-align: center; row-gap: var(--lx-gap-16); } .lx-section__lead--narrow { max-width: var(--lx-content-max-narrow); margin-left: auto !important; margin-right: auto !important; text-align: center; } /* 响应式：移动端收紧间距 */ @media (max-width: 768px) { main .lx-action-group { flex-direction: column; align-items: stretch; gap: 20px; } main .lx-btn, main a.button, main .button, main a.button-ghost, main .button-ghost { width: 100%; justify-content: center; } .section { padding: var(--lx-section-y-mobile) 0; } .section--sm { padding: var(--lx-section-y-sm-mobile) 0; } .section--lg { padding: var(--lx-section-y-lg-mobile) 0; } } /* =================================== Animations - 滚动显示动画（通用） =================================== */ .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .reveal.active { opacity: 1; transform: translateY(0); } .animate-in { opacity: 0; transform: translateY(20px); animation: fade-up 0.6s ease forwards; } .animate-right { opacity: 0; transform: translateX(20px); animation: fade-left 0.6s ease forwards; } .animate-scale { opacity: 0; transform: scale(0.95); animation: scale-in 0.6s ease forwards; } .animate-delay-1 { animation-delay: 0.1s; } .animate-delay-2 { animation-delay: 0.2s; } .animate-delay-3 { animation-delay: 0.3s; } .animate-delay-4 { animation-delay: 0.4s; } .animate-delay-5 { animation-delay: 0.5s; } @keyframes fade-up { to { opacity: 1; transform: translateY(0); } } @keyframes fade-left { to { opacity: 1; transform: translateX(0); } } @keyframes scale-in { to { opacity: 1; transform: scale(1); } } /* =================================== Legacy button aliases 新页面使用 .lx-btn + 变体；以下仅兼容现有详情页。 =================================== */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 32px; font-family: var(--lx-font-heading); font-size: 14px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid transparent; border-radius: var(--lx-radius-md); background: var(--lx-color-primary); color: var(--lx-color-bg-dark); text-decoration: none; transition: all 0.3s ease; cursor: pointer; } .btn-primary:hover, .btn-primary:focus { filter: brightness(1.1); color: #ffffff; } .btn-outline { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 32px; font-family: var(--lx-font-heading); font-size: 14px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid currentColor; border-radius: var(--lx-radius-md); background: transparent; color: var(--lx-color-text-heading); text-decoration: none; transition: all 0.3s ease; cursor: pointer; } .btn-outline:hover, .btn-outline:focus { background: rgba(24, 24, 27, 0.05); color: var(--lx-color-text-heading); } /* =================================== Card - 卡片样式（通用） =================================== */ .card { background-color: var(--lx-color-bg-card); border: 1px solid var(--lx-color-border); border-radius: var(--lx-radius-md); box-shadow: 0 4px 6px -1px var(--lx-shadow-sm); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; overflow: hidden; display: flex; flex-direction: column; min-height: 100%; color: inherit; } a:hover .card { transform: translateY(-5px); border-color: var(--lx-color-border); box-shadow: 0 10px 15px -3px var(--lx-shadow-md); } /* =================================== Breadcrumb Styles 面包屑组件（通用） =================================== */ .wxkn-breadcrumb-wrapper { padding: 0.75rem 0; background-color: var(--lx-color-bg-card); border-bottom: 1px solid var(--lx-color-border); } .wxkn-breadcrumb-wrapper--has-container { padding: 0.75rem 0; } .wxkn-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0; font-size: 14px; font-weight: 500; line-height: 1.5; margin-left: 1rem; } .wxkn-breadcrumb-wrapper--has-container .wxkn-breadcrumb { margin-left: 0; } .wxkn-breadcrumb a { color: var(--lx-color-text-muted); text-decoration: none; transition: color 0.3s ease; display: inline-flex; align-items: center; } .wxkn-breadcrumb a:hover { color: var(--lx-color-primary, #4b5563); } .wxkn-breadcrumb a:focus-visible { outline: 2px solid var(--lx-color-primary, #4b5563); outline-offset: 2px; } .wxkn-breadcrumb-separator { color: var(--lx-color-text-muted); margin: 0 0.75rem; user-select: none; } .wxkn-breadcrumb-current { color: var(--lx-color-text-heading); font-weight: 600; } .wxkn-breadcrumb--light .wxkn-breadcrumb a { color: var(--lx-color-text-muted); } .wxkn-breadcrumb--light .wxkn-breadcrumb a:hover { color: var(--lx-color-primary, #4b5563); } .wxkn-breadcrumb--light .wxkn-breadcrumb-separator { color: var(--lx-color-text-muted); } .wxkn-breadcrumb--light .wxkn-breadcrumb-current { color: var(--lx-color-text-heading); } .wxkn-breadcrumb--compact { padding: 0.5rem 0; margin-bottom: 0.75rem; border-bottom: none; } .wxkn-breadcrumb--compact .wxkn-breadcrumb { font-size: 13px; } .wxkn-breadcrumb--compact .wxkn-breadcrumb-separator { margin: 0 0.5rem; } .wxkn-breadcrumb--float { position: absolute; bottom: 20px; left: 0; right: 0; z-index: 20; padding: 0; background: none; border: none; } .wxkn-breadcrumb--float .wxkn-breadcrumb { font-size: 14px; letter-spacing: 0.05em; margin-left: 0; } .wxkn-breadcrumb--float .wxkn-breadcrumb a { color: var(--lx-color-text-muted); } .wxkn-breadcrumb--float .wxkn-breadcrumb a:hover { color: var(--lx-color-primary, #4b5563); } .wxkn-breadcrumb--float .wxkn-breadcrumb-separator { color: var(--lx-color-text-muted); margin: 0 8px; } .wxkn-breadcrumb--float .wxkn-breadcrumb-current { color: var(--lx-color-text-heading); } @media (max-width: 767px) { .wxkn-breadcrumb-wrapper { padding: 0.5rem 0; } .wxkn-breadcrumb { font-size: 13px; margin-left: 0; } .wxkn-breadcrumb-separator { margin: 0 0.5rem; } .wxkn-breadcrumb--float { bottom: 12px; } .wxkn-breadcrumb--float .wxkn-breadcrumb { font-size: 13px; } .wxkn-breadcrumb--float .wxkn-breadcrumb-separator { margin: 0 6px; } } /* =================================== LX Breadcrumbs - 面包屑组件 =================================== */ .lx-breadcrumb-wrapper { padding: var(--lx-gap-14) 0; background: var(--lx-color-primary); border-bottom: 1px solid var(--lx-color-primary-dark); } .single-product-page > .lx-breadcrumb-wrapper { margin-top: -80px; padding-top: calc(96px + var(--lx-gap-14)); } .single-product-page > .lx-breadcrumb-wrapper .lx-breadcrumbs { color: rgba(255, 255, 255, .78); } .single-product-page > .lx-breadcrumb-wrapper .lx-breadcrumbs__link { color: rgba(255, 255, 255, .72); } .single-product-page > .lx-breadcrumb-wrapper .lx-breadcrumbs__link:hover, .single-product-page > .lx-breadcrumb-wrapper .lx-breadcrumbs__link:focus-visible { color: #fff; } .single-product-page > .lx-breadcrumb-wrapper .lx-breadcrumbs__link:focus-visible { outline-color: #fff; } .single-product-page > .lx-breadcrumb-wrapper .lx-breadcrumbs__separator { color: rgba(255, 255, 255, .52); } .single-product-page > .lx-breadcrumb-wrapper .lx-breadcrumbs__text { color: #fff; } .lx-breadcrumbs { color: var(--lx-color-text-muted); font-family: var(--lx-font-body); font-size: var(--lx-fs-xs); font-weight: 500; line-height: 1.5; } .lx-breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; } .lx-breadcrumbs__item { display: inline-flex; align-items: center; min-width: 0; } .lx-breadcrumbs__link { color: var(--lx-color-text-muted); text-decoration: none; transition: color 0.3s ease; } .lx-breadcrumbs__link:hover, .lx-breadcrumbs__link:focus-visible { color: var(--lx-color-primary); } .lx-breadcrumbs__link:focus-visible { outline: 2px solid var(--lx-color-primary); outline-offset: 3px; } .lx-breadcrumbs__separator { display: inline-flex; align-items: center; margin: 0 var(--lx-gap-12); color: var(--lx-color-text-muted); user-select: none; } .lx-breadcrumbs__separator [data-lucide] { width: 14px; height: 14px; } .lx-breadcrumbs__text { overflow: hidden; color: var(--lx-color-text-heading); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 1180px) { .single-product-page > .lx-breadcrumb-wrapper { padding-top: calc(72px + var(--lx-gap-12)); } } @media (max-width: 767px) { .lx-breadcrumb-wrapper { padding: var(--lx-gap-12) 0; } .single-product-page > .lx-breadcrumb-wrapper { padding-bottom: var(--lx-gap-12); } .lx-breadcrumbs { font-size: 11px; } .lx-breadcrumbs__separator { margin: 0 var(--lx-gap-8); } } .lx-product-highlights { display: grid; gap: var(--lx-gap-16); margin: 0; padding: 0; list-style: none; } .lx-product-highlights__item { display: flex; align-items: flex-start; gap: var(--lx-gap-12); margin: 0; } .lx-product-highlights__icon { flex: 0 0 auto; width: 24px; height: 24px; color: var(--lx-color-primary); } .lx-product-highlights__text { color: var(--lx-color-text-body); font-weight: 600; line-height: 1.5; } /* =================================== Prose - 内容排版样式（通用） =================================== */ .prose { color: var(--lx-color-text-body); line-height: 1.8; } .prose h2, .prose h3, .prose h4 { color: var(--lx-color-text-heading); font-weight: 700; margin-top: 2.5rem; margin-bottom: 1.25rem; } .prose p { margin-bottom: 1.5rem; } .prose ul, .prose ol { margin-bottom: 1.5rem; padding-left: 1.5rem; } .prose li { margin-bottom: 0.5rem; } .prose blockquote { border-left: 4px solid var(--lx-color-text-muted); padding-left: 1.5rem; font-style: italic; color: var(--lx-color-text-heading); margin: 2rem 0; } .prose img { margin: 2.5rem 0; } .prose a { color: var(--lx-color-primary, #4b5563); text-decoration: underline; text-underline-offset: 4px; transition: color 0.3s ease; } .prose a:hover { color: var(--lx-color-primary-dark, #374151); } /* =================================== Single Product Page - 产品详情页 =================================== */ .site-main.single-product-page { margin: 0; } /* GeneratePress separate-containers adds 20px around the main element and below every direct child; product detail sections already own their rhythm. */ .site-main.single-product-page > * { margin-bottom: 0; } .single-product-page .text-body p { margin-bottom: 1.5rem; color: var(--lx-color-text-muted); } .single-product-page .text-body img { max-width: 100%; height: auto; border-radius: 8px; } .single-product-page .text-body h2, .single-product-page .text-body h3, .single-product-page .text-body h4 { color: var(--lx-color-text-heading); margin-top: 2.5rem; margin-bottom: 1.25rem; font-weight: 600; line-height: 1.4; } .single-product-page .text-body h2 { font-size: 1.75rem; } .single-product-page .text-body h3 { font-size: 1.5rem; } .single-product-page .text-body h4 { font-size: 1.25rem; } .single-product-page .text-body ul, .single-product-page .text-body ol { margin-bottom: 1.5rem; padding-left: 1.5rem; color: var(--lx-color-text-muted); } .single-product-page .text-body ul { list-style-type: disc; } .single-product-page .text-body ol { list-style-type: decimal; } .single-product-page .text-body li { margin-bottom: 0.5rem; } .single-product-page .card-overlay { position: absolute; inset: 0; background: var(--lx-overlay-dark); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } .single-product-page .lx-related-card:hover .card-overlay { opacity: 1; } .single-product-page .card-overlay-arrow { width: 56px; height: 56px; border-radius: 50%; background: var(--lx-color-primary); display: flex; align-items: center; justify-content: center; color: var(--lx-color-bg-dark); transform: translate(0, 12px); opacity: 0; transition: all 0.35s ease; } .single-product-page .lx-related-card:hover .card-overlay-arrow { transform: translate(0, 0); opacity: 1; } .single-product-page .section-product-matrix { background: transparent; } /* =================================== Product Detail - 设计规范组件 =================================== */ .single-product-page .lx-product-detail-section { padding: var(--lx-section-y) 0; } .single-product-page .lx-product-detail-section--hero { background: var(--lx-color-bg-card); border-bottom: 1px solid var(--lx-color-border); } .single-product-page .lx-product-detail-section--content { background: var(--lx-color-bg-soft); border-top: 1px solid var(--lx-color-border); } .single-product-page .lx-product-detail-section--related { background: var(--lx-color-bg-card); border-top: 1px solid var(--lx-color-border); } .single-product-page .lx-product-detail-hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: var(--lx-gap-48); } .single-product-page .lx-product-detail-content-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(280px, 4fr); align-items: start; gap: var(--lx-gap-32); } .single-product-page .lx-product-main-media, .single-product-page .lx-product-thumbnail { background: var(--lx-color-bg-soft); border: 1px solid var(--lx-color-border); } .single-product-page .lx-product-main-media { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; margin-bottom: var(--lx-gap-16); padding: var(--lx-gap-24); overflow: hidden; } .single-product-page .lx-product-main-image-view, .single-product-page .lx-product-video-embed { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .single-product-page .lx-product-video-view { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--lx-color-bg-dark); } /* Keep the 16:9 player fully visible inside the 4:3 gallery frame. */ .single-product-page .lx-product-video-view .lx-product-video-embed iframe { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; } .single-product-page .lx-product-main-image-view img, .single-product-page .lx-product-thumbnail img { display: block; width: 100%; height: 100%; object-fit: contain; } .single-product-page .lx-product-thumbnail { position: relative; display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 96px; aspect-ratio: 4 / 3; padding: var(--lx-gap-8); cursor: pointer; transition: border-color 0.3s ease; } .single-product-page .lx-product-thumbnail__badge { position: absolute; right: var(--lx-gap-8); bottom: var(--lx-gap-8); display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--lx-color-primary); background: var(--lx-color-primary); color: var(--lx-color-bg-dark); } .single-product-page .lx-product-thumbnail:hover, .single-product-page .lx-product-thumbnail.is-active { border-color: var(--lx-color-primary); } .single-product-page .lx-product-thumbnail.is-active { border-width: 2px; } .single-product-page .lx-product-thumbnails { display: flex; gap: var(--lx-gap-12); overflow-x: auto; padding-bottom: var(--lx-gap-8); scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; } .single-product-page .lx-product-thumbnails::-webkit-scrollbar { display: none; } .single-product-page .lx-product-carousel-arrow { box-sizing: border-box; display: flex; align-items: center; justify-content: center; flex: 0 0 32px; min-width: 32px; min-height: 32px; width: 32px; height: 32px; aspect-ratio: 1 / 1; padding: 0; line-height: 1; appearance: none; -webkit-appearance: none; border: 1px solid var(--lx-color-primary); border-radius: 50%; background: var(--lx-color-primary); color: #fff; box-shadow: 0 4px 10px var(--lx-shadow-md); } .single-product-page .lx-product-carousel-arrow:hover { background: var(--lx-color-primary-dark); } .single-product-page .lx-product-carousel-arrow svg { display: block; flex: 0 0 auto; } .single-product-page .lx-product-info h1 { margin: 0 0 var(--lx-gap-16); color: var(--lx-color-text-heading); font-family: var(--lx-font-heading); font-size: clamp(28px, calc(1rem + 2vw), 42px); font-weight: 700; line-height: 1.05; letter-spacing: -0.05em; } .single-product-page .lx-product-subtitle { margin-bottom: var(--lx-gap-32); color: var(--lx-color-text-muted); font-size: var(--lx-fs-body); font-weight: 500; line-height: 1.7; } .single-product-page .lx-product-highlights-heading { margin: 0 0 var(--lx-gap-8); color: var(--lx-color-text-heading); font-family: var(--lx-font-heading); font-size: var(--lx-fs-body); font-weight: 700; } .single-product-page .lx-product-highlights-rule { height: 1px; margin-bottom: var(--lx-gap-16); background: var(--lx-color-border); } .single-product-page .lx-product-content-card, .single-product-page .lx-product-inquiry-card { background: var(--lx-color-bg-card); border: 1px solid var(--lx-color-border); border-radius: var(--lx-radius-md); box-shadow: var(--lx-shadow-soft); } .single-product-page .lx-product-content-card { padding: var(--lx-gap-48); } .single-product-page .lx-product-table-scroll { margin: 20px 0 var(--lx-gap-32); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .single-product-page .lx-product-table-scroll table { width: 100%; table-layout: fixed; word-wrap: break-word; } .single-product-page .lx-product-inquiry { position: sticky; top: 96px; z-index: 10; } .single-product-page .lx-product-inquiry-card { position: relative; padding: var(--lx-gap-32); } .single-product-page .lx-product-inquiry-card::before { content: ''; position: absolute; top: 0; right: 0; left: 0; height: 4px; background: var(--lx-color-primary); } .single-product-page .lx-product-inquiry-card h3 { margin: 0 0 var(--lx-gap-8); color: var(--lx-color-text-heading); font-family: var(--lx-font-heading); font-size: var(--lx-fs-h4); font-weight: 800; } .single-product-page .lx-product-inquiry-card > p { margin: 0 0 var(--lx-gap-32); color: var(--lx-color-text-muted); font-size: var(--lx-fs-sm); line-height: 1.6; } .single-product-page #modal-form-standard form.infility-form input[type='text'], .single-product-page #modal-form-standard form.infility-form input[type='email'], .single-product-page #modal-form-standard form.infility-form input[type='tel'], .single-product-page #modal-form-standard form.infility-form select, .single-product-page #modal-form-standard form.infility-form textarea { border: 1px solid var(--lx-color-border); border-radius: var(--lx-radius-sm); background: var(--lx-color-bg-card); color: var(--lx-color-text-body); } .single-product-page #modal-form-standard form.infility-form input:focus, .single-product-page #modal-form-standard form.infility-form select:focus, .single-product-page #modal-form-standard form.infility-form textarea:focus { border-color: var(--lx-color-primary); outline: 2px solid rgba(252, 182, 4, 0.22); outline-offset: 1px; } .single-product-page #modal-form-standard form.infility-form label, .single-product-page #modal-form-standard form.infility-form .label { color: var(--lx-color-text-heading); } .single-product-page #modal-form-standard form.infility-form input[type='submit'], .single-product-page #modal-form-standard form.infility-form button[type='submit'] { border: 1px solid var(--lx-color-primary); border-radius: var(--lx-radius-sm); background: var(--lx-color-primary); color: var(--lx-color-bg-dark); } .single-product-page #modal-form-standard form.infility-form input[type='submit']:hover, .single-product-page #modal-form-standard form.infility-form button[type='submit']:hover { background: var(--lx-color-primary-dark); color: var(--lx-color-bg-card); } .single-product-page .lx-product-prose a { color: var(--lx-color-primary-dark); } .single-product-page .lx-product-prose img, .single-product-page .lx-product-feature-media img, .single-product-page .lx-product-feature-media iframe { max-width: 100%; border-radius: var(--lx-radius-sm); box-shadow: var(--lx-shadow-soft); } .single-product-page .lx-product-section-heading { margin: 0 0 var(--lx-gap-24); color: var(--lx-color-text-heading); font-family: var(--lx-font-heading); font-size: clamp(24px, 3vw, 36px); font-weight: 600; line-height: 0.98; letter-spacing: -0.04em; } .single-product-page .lx-product-content-divider { margin: var(--lx-gap-48) 0; border: 0; border-top: 1px solid var(--lx-color-border); } .single-product-page .lx-product-spec-table, .single-product-page .lx-product-table-scroll table { width: 100%; min-width: 640px; border-collapse: collapse; border: 1px solid var(--lx-color-border); background: var(--lx-color-bg-card); text-align: left; font-size: var(--lx-fs-sm); line-height: 1.5; } .single-product-page .lx-product-spec-subheading { margin: 0; color: var(--lx-color-text-heading); font-family: var(--lx-font-heading); font-size: var(--lx-fs-h4); font-weight: 700; line-height: 1.2; } .single-product-page .lx-product-spec-table th, .single-product-page .lx-product-table-scroll table th { background: var(--lx-color-primary-light); color: var(--lx-color-text-heading); font-weight: 700; white-space: normal; } .single-product-page .lx-product-spec-table th, .single-product-page .lx-product-spec-table td, .single-product-page .lx-product-table-scroll table th, .single-product-page .lx-product-table-scroll table td { padding: var(--lx-gap-16); border-bottom: 1px solid var(--lx-color-border); border-right: 1px solid var(--lx-color-border); vertical-align: top; } .single-product-page .lx-product-spec-table td, .single-product-page .lx-product-table-scroll table td { color: var(--lx-color-text-muted); } .single-product-page .lx-product-spec-table tr:nth-child(even) td, .single-product-page .lx-product-table-scroll table tr:nth-child(even) td { background: #fafafa; } .single-product-page .lx-product-spec-table tr:last-child th, .single-product-page .lx-product-spec-table tr:last-child td, .single-product-page .lx-product-table-scroll table tr:last-child th, .single-product-page .lx-product-table-scroll table tr:last-child td { border-bottom: 0; } .single-product-page .lx-product-spec-table th:last-child, .single-product-page .lx-product-spec-table td:last-child, .single-product-page .lx-product-table-scroll table th:last-child, .single-product-page .lx-product-table-scroll table td:last-child { border-right: 0; } .single-product-page .lx-product-table-scroll table p { margin: 0; } .single-product-page .lx-product-spec-toggle { min-height: 48px; margin-top: var(--lx-gap-16); padding: 0 var(--lx-gap-24); border: 1px solid var(--lx-color-primary); border-radius: var(--lx-radius-sm); background: transparent; color: var(--lx-color-text-heading); font-family: var(--lx-font-heading); font-size: var(--lx-fs-sm); font-weight: 800; cursor: pointer; transition: background 0.3s ease, color 0.3s ease; } .single-product-page .lx-product-spec-toggle:hover { background: var(--lx-color-primary); } .single-product-page .lx-product-feature { display: flex; align-items: center; gap: var(--lx-gap-32); margin: var(--lx-gap-32) 0; } .single-product-page .lx-product-feature--reverse { flex-direction: row-reverse; } .single-product-page .lx-product-feature__media, .single-product-page .lx-product-feature__text { width: 50%; } .single-product-page .lx-product-feature__text--full { width: 100%; } .single-product-page .lx-product-feature__text h3 { margin: 0 0 var(--lx-gap-8); color: var(--lx-color-text-heading); font-family: var(--lx-font-heading); font-size: var(--lx-fs-h4); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; } .single-product-page .lx-product-feature__text p { margin: 0; color: var(--lx-color-text-muted); font-family: var(--lx-font-body); font-size: var(--lx-fs-body); font-weight: 400; line-height: 1.6; } .single-product-page .lx-product-feature-media { width: 100%; overflow: hidden; } .single-product-page .lx-product-feature-media iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; } .single-product-page .lx-related-header { display: flex; align-items: center; justify-content: space-between; gap: var(--lx-gap-24); margin-bottom: var(--lx-gap-48); } .single-product-page .lx-related-header h2 { margin: 0; font-size: clamp(24px, 3vw, 36px); line-height: 1.05; } .single-product-page .lx-related-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--lx-gap-24); } .single-product-page .lx-related-card { position: relative; text-decoration: none; } .single-product-page .lx-related-card .card__visual { position: relative; display: flex; align-items: center; justify-content: center; height: 260px; padding: 0; background: var(--lx-color-bg-card); overflow: hidden; } .single-product-page .lx-related-card__image { display: block; width: 100%; height: 100%; padding: var(--lx-gap-24); object-fit: contain; } .single-product-page .lx-related-card .card__body { flex: 1; padding: var(--lx-gap-24); background: var(--lx-color-bg-card); } .single-product-page .lx-related-card .card__body h3 { margin: 0 0 var(--lx-gap-16); } .single-product-page .lx-related-tags { display: flex; flex-wrap: wrap; gap: var(--lx-gap-6); } .single-product-page .lx-related-tag { display: inline-block; padding: var(--lx-gap-2) var(--lx-gap-8); background: var(--lx-color-bg-soft); color: var(--lx-color-text-muted); font-size: var(--lx-fs-xs); } .single-product-page .lx-related-link { display: inline-flex; align-items: center; gap: var(--lx-gap-12); color: var(--lx-color-primary); font-size: var(--lx-fs-body); font-weight: 700; text-decoration: none; } .single-product-page .lx-related-link__icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--lx-color-primary); background: transparent; color: var(--lx-color-primary); } .single-product-page .lx-related-link__arrow { width: 20px; height: 20px; } .single-product-page .lx-related-desktop-link { display: inline-flex; } .single-product-page .lx-related-link:hover .lx-related-link__icon { background: var(--lx-color-primary); color: var(--lx-color-bg-dark); } .single-product-page .lx-related-mobile-link { display: none; justify-content: center; padding-top: var(--lx-gap-32); } @media (max-width: 1180px) { .single-product-page .lx-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .single-product-page .lx-product-detail-section { padding: var(--lx-section-y-mobile) 0; } .single-product-page .lx-product-detail-hero-grid, .single-product-page .lx-product-detail-content-grid { grid-template-columns: 1fr; } .single-product-page .lx-product-detail-hero-grid { gap: var(--lx-gap-24); } .single-product-page .lx-product-detail-content-grid { gap: var(--lx-gap-24); } .single-product-page .lx-product-main-media { padding: var(--lx-gap-16); } .single-product-page .lx-product-thumbnails { gap: var(--lx-gap-8); padding-bottom: 0; } .single-product-page .lx-product-thumbnail { width: 72px; } .single-product-page .lx-product-carousel-arrow { display: none; } .single-product-page .lx-product-info, .single-product-page .lx-product-content-main, .single-product-page .lx-product-inquiry { min-width: 0; } .single-product-page .lx-product-info h1 { font-size: clamp(30px, 8vw, 36px); line-height: 1.12; letter-spacing: -0.03em; } .single-product-page .lx-product-subtitle { margin-bottom: var(--lx-gap-24); font-size: 15px; } .single-product-page .lx-product-info .lx-action-group { flex-direction: column; } .single-product-page .lx-product-info .lx-action-group .lx-btn { width: 100%; justify-content: center; } .single-product-page .lx-product-inquiry { position: static; } .single-product-page .lx-product-content-card { padding: var(--lx-gap-24); } .single-product-page .lx-product-inquiry-card { padding: 20px; } .single-product-page .lx-product-table-scroll { margin: 16px 0 24px; } .single-product-page .lx-product-table-scroll table { min-width: 560px; table-layout: auto; } .single-product-page .lx-product-spec-table th, .single-product-page .lx-product-spec-table td, .single-product-page .lx-product-table-scroll table th, .single-product-page .lx-product-table-scroll table td { padding: 12px; font-size: 14px; } .single-product-page #modal-form-standard form.infility-form input[type='submit'], .single-product-page #modal-form-standard form.infility-form button[type='submit'] { width: 100%; } .single-product-page .lx-product-feature, .single-product-page .lx-product-feature--reverse { flex-direction: column; align-items: stretch; } .single-product-page .lx-product-feature__media, .single-product-page .lx-product-feature__text, .single-product-page .lx-product-feature__text--full { width: 100%; } .single-product-page .lx-related-header { margin-bottom: var(--lx-gap-32); } .single-product-page .lx-related-grid { grid-template-columns: 1fr; } .single-product-page .lx-related-mobile-link { display: flex; } .single-product-page .lx-related-desktop-link { display: none; } } /* =================================== Single Post Page - 博客详情页 =================================== */ .single-post-page { overflow: visible; } .single-post-page .single-post-grid { display: grid; grid-template-columns: 1fr; gap: var(--lx-gap-48); overflow: visible; } @media (min-width: 992px) { .single-post-page .single-post-grid { grid-template-columns: 2fr 1fr; } } .single-post-page.single-post-main { padding-top: 100px; background-color: var(--lx-color-bg-base); overflow: visible; } .single-post-page .single-post-section { padding-top: 2rem; overflow: visible; } .single-post-page .post-content .post-featured-image { margin-bottom: 2.5rem; border-radius: var(--lx-radius-md); overflow: hidden; box-shadow: 0 8px 24px -4px var(--lx-shadow-sm); } .single-post-page .post-content .post-featured-image img { width: 100%; height: auto; display: block; } .single-post-page .post-content .post-meta { display: flex; align-items: center; gap: var(--lx-gap-16); margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--lx-color-border); } .single-post-page .post-content .post-cat-label { color: var(--lx-color-primary); font-family: var(--lx-font-heading); font-size: var(--lx-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .single-post-page .post-content .post-date-label { color: var(--lx-color-text-muted); font-size: var(--lx-fs-sm); } .single-post-page .post-content .post-title { color: var(--lx-color-text-heading); margin-bottom: 2rem; font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.25; font-weight: 800; letter-spacing: -0.02em; } .single-post-page .post-content .post-body { color: var(--lx-color-text-body); line-height: 1.8; font-size: 1rem; } .single-post-page .post-content .post-body h1, .single-post-page .post-content .post-body h2, .single-post-page .post-content .post-body h3, .single-post-page .post-content .post-body h4 { color: var(--lx-color-text-heading); font-weight: 700; line-height: 1.3; margin-top: 2.5rem; margin-bottom: 1.25rem; } .single-post-page .post-content .post-body h1 { font-size: clamp(1.75rem, 3vw, 2.25rem); } .single-post-page .post-content .post-body h2 { font-size: clamp(1.5rem, 2.5vw, 1.75rem); } .single-post-page .post-content .post-body h3 { font-size: 1.5rem; } .single-post-page .post-content .post-body h4 { font-size: 1.25rem; } .single-post-page .post-content .post-body p { margin-bottom: 1.5rem; } .single-post-page .post-content .post-body ul, .single-post-page .post-content .post-body ol { margin-bottom: 1.5rem; padding-left: 1.5rem; } .single-post-page .post-content .post-body ul { list-style-type: disc; } .single-post-page .post-content .post-body ol { list-style-type: decimal; } .single-post-page .post-content .post-body li { margin-bottom: 0.5rem; } .single-post-page .post-content .post-body a { color: var(--lx-color-primary); text-decoration: underline; text-underline-offset: 4px; transition: color 0.3s ease; } .single-post-page .post-content .post-body a:hover { color: var(--lx-color-primary-dark); } .single-post-page .post-content .post-body img { max-width: 100%; height: auto; margin: 2rem 0; border-radius: var(--lx-radius-sm); } .single-post-page .post-content .post-body blockquote { border-left: 4px solid var(--lx-color-primary); padding: 1rem 1.5rem; margin: 2rem 0; background: var(--lx-color-bg-soft); border-radius: 0 var(--lx-radius-sm) var(--lx-radius-sm) 0; font-style: italic; color: var(--lx-color-text-heading); } .single-post-page .post-content .post-body strong { font-weight: 700; color: var(--lx-color-text-heading); } .single-post-page .post-content .post-body hr { border: none; border-top: 1px solid var(--lx-color-border); margin: 2.5rem 0; } .single-post-page .post-content .post-body code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.875em; padding: 0.2em 0.4em; background: var(--lx-color-bg-soft); border-radius: var(--lx-radius-sm); color: var(--lx-color-text-heading); } .single-post-page .post-content .post-body pre { margin: 2rem 0; padding: 1.5rem; background: var(--lx-color-bg-dark); border-radius: var(--lx-radius-sm); overflow-x: auto; } .single-post-page .post-content .post-body pre code { padding: 0; background: none; color: #e8e8ea; font-size: 0.875rem; line-height: 1.7; } .single-post-page .post-content .post-body table { width: 100%; margin: 2rem 0; border-collapse: collapse; } .single-post-page .post-content .post-body th, .single-post-page .post-content .post-body td { padding: 0.75rem 1rem; border: 1px solid var(--lx-color-border); text-align: left; } .single-post-page .post-content .post-body th { background: var(--lx-color-bg-soft); font-weight: 700; color: var(--lx-color-text-heading); } .single-post-page .post-content .post-body figure { margin: 2rem 0; } .single-post-page .post-content .post-body figure img { margin: 0; } .single-post-page .post-content .post-body figcaption { margin-top: 0.75rem; font-size: var(--lx-fs-sm); color: var(--lx-color-text-muted); text-align: center; } .single-post-page .post-content .post-tags { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--lx-color-border); display: flex; align-items: center; flex-wrap: wrap; gap: var(--lx-gap-8); } .single-post-page .post-content .post-tags .tags-label { color: var(--lx-color-text-heading); font-size: 14px; font-weight: 600; margin-right: 0.5rem; } .single-post-page .post-content .post-tags a { color: var(--lx-color-primary, #4b5563); background: var(--lx-color-bg-base); font-size: 13px; padding: 0.3rem 0.8rem; border-radius: 4px; text-decoration: none; transition: background 0.2s; } .single-post-page .post-content .post-tags a:hover { background: var(--lx-color-border); } .single-post-page .post-content .post-share { margin-top: 1.5rem; padding-top: 1.5rem; margin-bottom: 2rem; border-top: 1px dashed var(--lx-color-border); display: flex; align-items: center; gap: var(--lx-gap-12); flex-wrap: wrap; } .single-post-page .post-content .post-share .share-label { color: var(--lx-color-text-heading); font-size: 14px; font-weight: 600; } .single-post-page .post-content .post-share a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background-color: var(--lx-color-bg-base); color: var(--lx-color-text-muted); text-decoration: none; transition: all 0.2s ease; } .single-post-page .post-content .post-share a:hover { transform: translateY(-2px); } .single-post-page .post-content .post-share a svg { width: 18px; height: 18px; } .single-post-page .post-content .post-share a.share-facebook:hover { background-color: var(--lx-social-facebook); color: var(--lx-color-bg-card); } .single-post-page .post-content .post-share a.share-twitter:hover { background-color: var(--lx-social-twitter); color: var(--lx-color-bg-card); } .single-post-page .post-content .post-share a.share-linkedin:hover { background-color: var(--lx-social-linkedin); color: var(--lx-color-bg-card); } .single-post-page .post-content .post-share a.share-whatsapp:hover { background-color: var(--lx-social-whatsapp); color: var(--lx-color-bg-card); } .single-post-page .post-content .post-share a.share-pinterest:hover { background-color: var(--lx-social-pinterest); color: var(--lx-color-bg-card); } .single-post-page .post-content .post-share a.share-email:hover { background-color: var(--lx-color-text-muted); color: var(--lx-color-bg-card); } .single-post-page .post-content .post-share a.share-copy:hover { background-color: var(--lx-color-text-heading); color: var(--lx-color-bg-card); } .single-post-page .post-content .lx-post-author-card { display: grid; grid-template-columns: minmax(112px, 148px) minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); align-items: start; margin-top: 2.5rem; padding: clamp(24px, 3vw, 40px); border: 1px solid var(--lx-color-border); background: var(--lx-color-bg-card); box-shadow: 0 10px 15px -3px var(--lx-shadow-md); position: relative; overflow: hidden; } .single-post-page .post-content .lx-post-author-card::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 4px; background: var(--lx-color-primary); } .single-post-page .post-content .lx-post-author-card__media { display: flex; justify-content: center; } .single-post-page .post-content .lx-post-author-card__avatar { width: 100%; max-width: 148px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 1px solid var(--lx-color-border); background: var(--lx-color-bg-soft); } .single-post-page .post-content .lx-post-author-card__avatar img { width: 100%; height: 100%; display: block; object-fit: cover; } .single-post-page .post-content .lx-post-author-card__content { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } .single-post-page .post-content .lx-post-author-card__eyebrow { color: var(--lx-color-text-muted); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .single-post-page .post-content .lx-post-author-card__name { margin: 0; color: var(--lx-color-text-heading); font-size: clamp(28px, 3.4vw, 40px); line-height: 1.05; letter-spacing: -0.04em; } .single-post-page .post-content .lx-post-author-card__role { margin: 0; color: var(--lx-color-primary); font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .single-post-page .post-content .lx-post-author-card__description { margin: 0; color: var(--lx-color-text-body); font-size: 14px; line-height: 1.8; } .single-post-page .post-content .lx-post-author-card__note { margin: 0; color: var(--lx-color-text-body); font-size: 17px; line-height: 1.8; } .single-post-page .post-content .lx-post-author-card__actions { margin-top: 8px; gap: 16px; } .single-post-page .post-content .lx-post-author-card__actions .lx-btn i { margin-left: 10px; font-size: 14px; } .single-post-page .post-content .lx-post-author-card__social { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; } .single-post-page .post-content .lx-post-author-card__social-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--lx-color-border); background: var(--lx-color-bg-card); color: var(--lx-color-text-heading); text-decoration: none; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease; } .single-post-page .post-content .lx-post-author-card__social-link:hover, .single-post-page .post-content .lx-post-author-card__social-link:focus-visible { background: var(--lx-color-primary); border-color: var(--lx-color-primary); color: var(--lx-color-bg-dark); transform: translateY(-2px); } .single-post-page .post-content .lx-post-author-card__social-icon { width: 16px; height: 16px; fill: currentColor; } .single-post-page .post-sidebar { display: flex; gap: var(--lx-gap-24); flex-direction: column; top: 100px; align-self: start; } .single-post-page .post-sidebar .sidebar-widget { padding: 1.5rem; } .single-post-page .post-sidebar .sidebar-widget h4 { color: var(--lx-color-text-heading); font-size: 18px; font-weight: 600; margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--lx-color-border-light); } .single-post-page .related-posts-sidebar { display: flex; flex-direction: column; gap: var(--lx-gap-16); } .single-post-page .related-posts-sidebar .related-item { display: flex; gap: var(--lx-gap-12); text-decoration: none; padding: 0.5rem 0; border-bottom: 1px solid var(--lx-color-border-light); transition: background 0.2s; } .single-post-page .related-posts-sidebar .related-item:last-child { border-bottom: none; } .single-post-page .related-posts-sidebar .related-item:hover { background: var(--lx-color-border-light); } .single-post-page .related-posts-sidebar .related-thumb { width: 60px; height: 60px; flex-shrink: 0; border-radius: 6px; overflow: hidden; } .single-post-page .related-posts-sidebar .related-thumb img { width: 100%; height: 100%; object-fit: cover; } .single-post-page .related-posts-sidebar .related-info { display: flex; flex-direction: column; justify-content: center; gap: var(--lx-gap-4); } .single-post-page .related-posts-sidebar .related-title { color: var(--lx-color-text-heading); font-size: 15px; font-weight: 500; line-height: 1.3; } .single-post-page .related-posts-sidebar .related-date { color: var(--lx-color-text-muted); font-size: 13px; } /* ===== Exit-Intent Modal ===== */ .wxkn-modal { position: fixed; inset: 0; z-index: 2147483647; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .wxkn-modal.is-open { opacity: 1; visibility: visible; } .wxkn-modal__overlay { position: absolute; inset: 0; background: var(--lx-overlay-dark); backdrop-filter: blur(4px); } .wxkn-modal__dialog { position: relative; z-index: 1; display: grid; grid-template-columns: 5fr 6fr; width: min(960px, 94vw); max-height: 88vh; background: var(--lx-color-bg-card); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -15px var(--lx-shadow-modal); transform: translateY(12px) scale(0.98); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; } .wxkn-modal.is-open .wxkn-modal__dialog { transform: translateY(0) scale(1); opacity: 1; } .wxkn-modal__close { position: absolute; top: 14px; right: 14px; z-index: 5; width: 38px; height: 38px; border: none; border-radius: 50%; background: var(--lx-modal-close-bg); color: var(--lx-color-text-heading); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, transform 0.2s; } .wxkn-modal__close:hover { background: var(--lx-color-bg-card); transform: rotate(90deg); } .wxkn-modal__left { background: linear-gradient(135deg, var(--lx-modal-panel-from) 0%, var(--lx-modal-panel-to) 100%); color: var(--lx-color-bg-card); padding: 48px 40px; display: flex; flex-direction: column; justify-content: center; position: relative; } .wxkn-modal__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lx-color-primary); margin-bottom: 16px; } .wxkn-modal__title { font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; line-height: 1.2; margin: 0 0 18px; } .wxkn-modal__title em { color: var(--lx-color-primary); font-style: normal; } .wxkn-modal__lede { font-size: 15px; line-height: 1.65; color: var(--lx-color-text-muted); margin: 0 0 24px; } .wxkn-modal__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--lx-gap-12); } .wxkn-modal__list li { display: flex; gap: var(--lx-gap-10); align-items: flex-start; font-size: 14px; color: var(--lx-color-bg-card); } .wxkn-modal__list li::before { content: "✓"; color: var(--lx-color-primary); font-weight: 700; flex-shrink: 0; } .wxkn-modal__right { padding: 48px 44px; overflow-y: auto; background: var(--lx-color-bg-card); } .wxkn-modal__form-title { font-size: 22px; font-weight: 700; margin: 0 0 6px; color: var(--lx-color-text-heading); } .wxkn-modal__form-sub { font-size: 13px; color: var(--lx-color-text-muted); margin: 0 0 24px; } /* Lead form inside the modal */ .wxkn-form { display: flex; flex-direction: column; gap: var(--lx-gap-14); } .wxkn-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lx-gap-14); } .wxkn-form__field { display: flex; flex-direction: column; gap: var(--lx-gap-6); } .wxkn-form__field label { font-size: 12px; font-weight: 600; color: var(--lx-color-text-muted); } .wxkn-form__field input, .wxkn-form__field textarea, .wxkn-form__field select { width: 100%; padding: 11px 13px; font-size: 14px; font-family: inherit; color: var(--lx-color-text-heading); background: var(--lx-color-bg-base); border: 1px solid var(--lx-color-border); border-radius: 8px; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; box-sizing: border-box; } .wxkn-form__field input:focus, .wxkn-form__field textarea:focus, .wxkn-form__field select:focus { outline: none; border-color: var(--lx-color-primary); background: var(--lx-color-bg-card); box-shadow: 0 0 0 3px var(--lx-shadow-md); } .wxkn-form__field textarea { min-height: 90px; resize: vertical; } .wxkn-form__submit { margin-top: 8px; padding: 14px; background: var(--lx-color-primary); color: var(--lx-color-bg-card); border: none; border-radius: 9999px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.25s, transform 0.25s, box-shadow 0.25s; } .wxkn-form__submit:hover { background: var(--lx-color-primary-dark); transform: translateY(-2px); box-shadow: 0 10px 24px var(--lx-shadow-md); } .wxkn-form__note { font-size: 11px; color: var(--lx-color-text-muted); text-align: center; margin: 10px 0 0; } .wxkn-modal__privacy-note { margin: 16px 0 0; color: var(--lx-color-text-muted); font-size: 11px; line-height: 1.5; } .wxkn-modal__privacy-note a { color: var(--lx-color-primary-dark); text-decoration: underline; text-underline-offset: 2px; } /* Keep the custom Country / Region list independent from the page scroller. */ .infility-country-dropdown { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; } @media (max-width: 768px) { .wxkn-modal__dialog { grid-template-columns: 1fr; width: 100vw; max-height: 100vh; border-radius: 0; } .wxkn-modal__left { display: none; } .wxkn-modal__right { padding: 60px 22px 32px; height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; } .wxkn-modal__dialog { grid-template-rows: minmax(0, 1fr); } .wxkn-form__row { grid-template-columns: 1fr; } } .border-fine-b { border-bottom: 1px solid var(--lx-color-border); } /* Mobile Navigation */ .wxkn-mobile-nav { position: fixed; inset: 0; z-index: 60; background: var(--lx-overlay-light); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .wxkn-mobile-nav.active { opacity: 1; visibility: visible; } .wxkn-mobile-nav-inner { position: absolute; top: 0; right: 0; width: 85%; max-width: 380px; height: 100%; background: var(--lx-color-bg-card); transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; overflow: hidden; } .wxkn-mobile-nav.active .wxkn-mobile-nav-inner { transform: translateX(0); } .wxkn-mobile-nav-header { display: flex; align-items: center; justify-content: space-between; padding: 0 24px; height: 80px; border-bottom: 1px solid var(--lx-color-border); flex-shrink: 0; } .wxkn-mobile-nav-body { flex: 1; overflow-y: auto; padding: 12px 0 32px; } /* Mobile Nav Groups (accordion) */ .wxkn-mobile-nav-group { border-bottom: 1px solid var(--lx-color-border-light); } .wxkn-mobile-nav-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 24px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lx-color-text-body); background: none; border: none; cursor: pointer; text-align: left; transition: background-color 0.3s ease, color 0.3s ease; } .wxkn-mobile-nav-toggle i { transition: transform 0.3s ease; } .wxkn-mobile-nav-toggle.active { background-color: var(--lx-color-primary, #4b5563); color: var(--lx-color-bg-card); } .wxkn-mobile-nav-toggle.active i { transform: rotate(180deg); } .wxkn-mobile-subnav { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; background-color: var(--lx-color-bg-base); } .wxkn-mobile-subnav.active { max-height: 800px; } .wxkn-mobile-subnav-link { display: block; padding: 16px 24px 16px 36px; font-size: 15px; color: var(--lx-color-text-body); font-weight: 700; text-decoration: none; border-top: 1px solid var(--lx-color-border-light); transition: color 0.2s ease; white-space: nowrap; } .wxkn-mobile-subnav-link:hover { color: var(--lx-color-primary, #4b5563); } /* Mobile Nav Simple Links */ .wxkn-mobile-nav-link { display: block; padding: 16px 24px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lx-color-text-body); text-decoration: none; border-bottom: 1px solid var(--lx-color-border-light); } /* Mobile CTA */ .wxkn-mobile-cta { display: block; margin: 20px 24px; padding: 14px 0; text-align: center; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lx-color-bg-card); background: var(--lx-color-text-muted); text-decoration: none; transition: background 0.2s ease; } .wxkn-mobile-cta:hover { background: var(--lx-color-primary-dark); } /* =================================== Back to Top - 返回顶部浮动按钮 风格对齐：cubic-bezier(0.4,0,0.2,1)、hover translateY(-2px)、 focus 2px/2px、卡片级中性阴影、断点 767px；主色引用 --lx-color-primary / --lx-color-primary-dark。 =================================== */ .lx-back-to-top { position: fixed; right: 24px; bottom: 24px; width: 52px; height: 52px; border: none; border-radius: 50%; background: var(--lx-color-primary); color: var(--lx-color-bg-card); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 99999; box-shadow: 0 4px 6px -1px var(--lx-shadow-md); opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .lx-back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .lx-back-to-top:hover { background: var(--lx-color-primary-dark); transform: translateY(-2px); box-shadow: 0 10px 15px -3px var(--lx-shadow-md); } .lx-back-to-top:focus-visible { outline: 2px solid var(--lx-color-primary); outline-offset: 2px; } .lx-back-to-top svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 767px) { .lx-back-to-top { right: 16px; bottom: 16px; width: 46px; height: 46px; } .lx-back-to-top svg { width: 22px; height: 22px; } } /* --- Styles from home.html --- */ html, body { background: var(--lx-color-bg-base); color: var(--lx-color-text-heading); font-family: var(--lx-font-body); } .bg-background { background-color: var(--lx-color-bg-base); } .text-background { color: var(--lx-color-bg-base); } .border-background { border-color: var(--lx-color-bg-base); } .ring-background { --tw-ring-color: var(--lx-color-bg-base); } .bg-foreground { background-color: var(--lx-color-text-heading); } .text-foreground { color: var(--lx-color-text-heading); } .border-foreground { border-color: var(--lx-color-text-heading); } .ring-foreground { --tw-ring-color: var(--lx-color-text-heading); } .bg-card { background-color: var(--lx-color-bg-card); } .text-card { color: var(--lx-color-bg-card); } .border-card { border-color: var(--lx-color-bg-card); } .ring-card { --tw-ring-color: var(--lx-color-bg-card); } .bg-primary { background-color: var(--lx-color-primary); } .text-primary { color: var(--lx-color-primary); } .border-primary { border-color: var(--lx-color-primary); } .ring-primary { --tw-ring-color: var(--lx-color-primary); } .bg-muted { background-color: var(--lx-color-text-muted); } .text-muted { color: var(--lx-color-text-muted); } .border-muted { border-color: var(--lx-color-text-muted); } .ring-muted { --tw-ring-color: var(--lx-color-text-muted); } .bg-accent { background-color: var(--lx-color-accent); } .text-accent { color: var(--lx-color-accent); } .border-accent { border-color: var(--lx-color-accent); } .ring-accent { --tw-ring-color: var(--lx-color-accent); } .bg-border { background-color: var(--lx-color-border); } .text-border { color: var(--lx-color-border); } .border-border { border-color: var(--lx-color-border); } .ring-border { --tw-ring-color: var(--lx-color-border); } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } @media (max-width: 768px) { .lx-article-list-item { flex-direction: column; gap: var(--lx-gap-24) !important; } .lx-article-list-item__visual { flex: none !important; width: 100%; order: -1; } .lx-article-list-item__body { order: 0; } } .lx-article-list-item { transition: background-color 0.3s ease, padding 0.3s ease !important; } .lx-article-list-item h3, .lx-article-list-item p { transition: color 0.3s ease !important; } .lx-article-list-item:hover { background-color: #272727 !important; padding: 24px 32px !important; } .lx-article-list-item:hover h3 { color: #ffffff !important; } .lx-article-list-item:hover p { color: rgba(255,255,255,0.7) !important; } .lx-article-list-item:hover .lx-article-list-item__visual img { transform: scale(1.05) !important; } .lx-article-list-item:hover .lx-article-list-item__arrow { border-color: rgba(255,255,255,0.3) !important; opacity: 1 !important; } .lx-article-list-item:hover .lx-article-list-item__arrow img { filter: brightness(0) invert(1); } [data-icon] { display: inline-flex; align-items: center; justify-content: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background-color: currentColor; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--lx-color-bg-base); color: var(--lx-color-text-body); font-family: var(--lx-font-body); } h1, h2, h3, h4, h5, h6 { text-wrap: balance; font-family: var(--lx-font-heading); } p, li, span, a, strong { text-wrap: pretty; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } .lx-page-shell { overflow-x: clip; } .container { --container-width: min(var(--lx-container-max), calc(100% - var(--lx-container-pad) * 2)); width: var(--container-width); max-width: none; padding: 0; margin: 0 auto; } .section-number { display: inline-block; margin-bottom: 18px; color: var(--lx-color-primary); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } .lx-section__head { display: grid; grid-template-columns: 7fr 3fr; gap: var(--lx-gap-32); align-items: end; margin-bottom: 40px; } .lx-section__head h2 { margin: 0; font-size: clamp(28px, 3.5vw, 44px); line-height: 0.98; letter-spacing: -0.04em; font-weight: 600; } .lx-section__head p { margin: 0; color: var(--lx-color-text-muted); font-size: 16px; line-height: 1.8; } .lx-section__head.lx-section__head--stack { display: block; text-align: left; margin-bottom: 0; } .lx-section__head--stack h2 { margin-bottom: var(--lx-gap-16); } .lx-section__head--stack p { max-width: 100%; } .lx-section__head--start { align-items: flex-start; } .lx-section__head--narrow > div:first-child { max-width: var(--lx-content-max-narrow); } .lx-section__head.lx-section__head--split { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--lx-gap-40); } .lx-section__head--split > div:first-child { flex: 1; min-width: 300px; } .lx-section__head--split p { max-width: 600px; } .spec-note, .meta-strip, .media-note, .dynamic-note { border: 1px solid var(--lx-color-border); padding: 14px 16px; font-size: 12px; line-height: 1.7; } .spec-note strong, .meta-strip strong, .dynamic-note strong { display: block; margin-bottom: 6px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; } .lx-site-header { position: fixed; inset: 0 0 auto; z-index: 50; background: transparent; transition: background-color 0.3s ease; } .lx-site-header.is-scrolled { background: #ffffff; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .lx-site-header__inner { width: 100%; padding: 0 32px; margin: 0; min-height: 96px; display: flex; align-items: center; gap: var(--lx-gap-24); transition: width 0.3s ease, padding 0.3s ease; } .lx-site-header.is-scrolled .lx-site-header__inner { width: 1280px; max-width: calc(100% - var(--lx-container-pad) * 2); padding: 0; margin: 0 auto; } /* CTA wrap: scroll-triggered centering */ .lx-site-header__cta-wrap { flex: 0.0001; display: flex; justify-content: flex-end; min-width: max-content; transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .lx-site-header.is-scrolled .lx-site-header__cta-wrap { flex: 1; } .lx-site-header__cta { display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 0; } .lx-site-header__logo { flex: 1; display: inline-flex; align-items: center; gap: var(--lx-gap-12); color: #ffffff; font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } .lx-site-header__logo img { width: 80px; } .lx-footer-brand img { max-width: 160px; width: auto; } .lx-site-header__logo-text, .lx-footer-logo-text { display: inline-block; font-family: "Manrope", sans-serif; font-size: 26px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; } .lx-footer-logo-text { color: #ffffff; margin-bottom: 24px; } .lx-site-nav { display: flex; align-items: center; gap: var(--lx-gap-28); color: #ffffff; font-family: var(--lx-font-heading); font-size: 15px; font-weight: 700; text-transform: capitalize; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .lx-site-nav .lx-nav-item a { color: inherit; transition: color 0.3s ease; } .lx-nav-item:hover > a, .lx-nav-item.active > a, .lx-site-nav a:hover { color: var(--lx-color-primary); } .lx-site-nav a { position: relative; padding: 10px 0; text-decoration: none; color: inherit; } .lx-site-nav .lx-nav-item { position: relative; height: 96px; display: flex; align-items: center; } .lx-nav-item__trigger { display: inline-flex; align-items: center; gap: var(--lx-gap-4); cursor: pointer; height: 100%; } .lx-site-nav .lx-nav-item__trigger, .lx-site-nav .lx-nav-item > a { font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-decoration: none; } .lx-nav-item__trigger:hover { color: var(--lx-color-primary); } .lx-dropdown-arrow { font-size: 10px; margin-left: 4px; opacity: 0.7; transition: transform 0.3s ease; } .lx-nav-item.active .lx-dropdown-arrow { transform: rotate(180deg); } /* ========== Mobile Menu System ========== */ .lx-mobile-menu { position: fixed; inset: 0; z-index: 100; background: rgba(24, 24, 27, 0.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .lx-mobile-menu.is-open { opacity: 1; pointer-events: auto; } .lx-mobile-menu__inner { position: absolute; top: 0; right: 0; bottom: 0; width: 100%; max-width: 400px; height: 100%; max-height: 100dvh; background: var(--lx-color-primary, #fcb604); transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; overflow: hidden; } .lx-mobile-menu.is-open .lx-mobile-menu__inner { transform: translateX(0); } /* Make the mobile panel and its expandable menu cards independently scrollable. */ .lx-mobile-menu__header { flex: 0 0 72px; min-height: 72px; } .lx-mobile-menu__header img { display: block; width: auto !important; height: 24px !important; max-width: 140px !important; object-fit: contain; } .lx-mobile-menu__header { border-color: rgba(24, 24, 27, 0.18) !important; } .lx-mobile-menu__header button, .lx-mobile-menu__content > a, .lx-mobile-menu-trigger { color: #18181b !important; } .lx-mobile-menu__content { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; gap: 0 !important; padding-top: 16px !important; padding-bottom: 24px !important; } .lx-mobile-menu__content > .lx-mobile-menu-item, .lx-mobile-menu__content > a { border-bottom: 1px solid rgba(24, 24, 27, 0.22); } .lx-mobile-menu__content > .lx-mobile-menu-item { margin: 0; } .lx-mobile-menu__content > a { display: flex; align-items: center; min-height: 56px; margin: 0 !important; padding: 14px 0 !important; } .lx-mobile-menu-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 14px 0; border: 0; background: transparent !important; color: #ffffff; text-align: left; cursor: pointer; box-shadow: none !important; -webkit-tap-highlight-color: transparent; } .lx-mobile-menu-trigger:hover, .lx-mobile-menu-trigger:focus, .lx-mobile-menu-trigger:active { background: transparent !important; box-shadow: none !important; } .lx-mobile-menu-trigger:focus-visible { outline: 2px solid rgba(24, 24, 27, 0.55); outline-offset: 4px; } .lx-mobile-menu-dropdown { display: flex !important; flex-direction: column; gap: 12px; max-height: 0; margin-top: 0; margin-bottom: 0; padding: 0 0 0 16px; border-left: 1px solid rgba(24, 24, 27, 0.28); overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transition: max-height 0.35s ease, margin-top 0.35s ease, padding 0.35s ease, opacity 0.2s ease, visibility 0s linear 0.35s; } .lx-mobile-menu-dropdown:not(.hidden) { max-height: 480px; margin-top: 8px; margin-bottom: 12px; padding: 12px 0 12px 16px; opacity: 1; visibility: visible; pointer-events: auto; transition: max-height 0.35s ease, margin-top 0.35s ease, padding 0.35s ease, opacity 0.2s ease, visibility 0s linear 0s; } .lx-mobile-menu-dropdown a { display: block; color: rgba(24, 24, 27, 0.82) !important; font-size: 15px !important; font-weight: 500; line-height: 1.45; padding: 4px 0; white-space: normal; overflow-wrap: anywhere; visibility: visible; opacity: 1; } .lx-mobile-menu__content > div { border-color: rgba(24, 24, 27, 0.18) !important; } .lx-mobile-menu__content .lx-btn-primary { background: #18181b; color: #ffffff !important; } @media (max-width: 420px) { .lx-mobile-menu__inner { max-width: none; } } .lx-site-header.is-scrolled .lx-mobile-menu-toggle { color: var(--lx-color-bg-dark) !important; } /* Keep the mobile trigger aligned with the custom 1180px navigation breakpoint. */ .lx-mobile-menu-toggle { display: none; } @media (max-width: 1180px) { .lx-mobile-menu-toggle { display: inline-flex !important; align-items: center; justify-content: center; } } /* ========== AZAK-style Full-width Subnav ========== */ .lx-header-subnav { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--lx-color-border); max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; z-index: 49; } .lx-header-subnav.open { max-height: 600px; opacity: 1; } .lx-header-subnav__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lx-gap-32); padding: var(--lx-container-pad) var(--lx-container-pad) 0 var(--lx-container-pad); max-width: var(--lx-container-max); margin: 0 auto; } .lx-header-subnav__pane { display: none; } .lx-header-subnav__pane.active { display: block; } .lx-header-subnav__images { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--lx-gap-32); } .lx-header-subnav__images--4 { grid-template-columns: repeat(4, 1fr); } .lx-header-subnav__img-wrap { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 0; } /* Cables pane: keep 4:3 aspect ratio */ [data-pane="subnav-cables"] .lx-header-subnav__img-wrap { aspect-ratio: 4 / 3; } /* Other panes: images square (1:1) */ .lx-header-subnav__pane:not([data-pane="subnav-cables"]) .lx-header-subnav__img-wrap { aspect-ratio: 1 / 1; } .lx-header-subnav__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .lx-header-subnav__img-wrap:hover .lx-header-subnav__img { transform: scale(1.04); } /* Single-image mode: stack all images, only .active is visible */ .lx-header-subnav__images--single { grid-template-columns: 1fr; gap: 0; } .lx-header-subnav__images--single .lx-header-subnav__img-wrap { position: relative; aspect-ratio: 1 / 1; border-radius: 0; } /* Base single-image mode: stack and position */ .lx-header-subnav__images--single .lx-header-subnav__img { position: absolute; inset: 0; opacity: 0; transition: opacity 0.35s ease; object-fit: contain; object-position: center; width: 100%; height: 100%; } /* Other panes: images smaller and centered like the original design */ .lx-header-subnav__pane:not([data-pane="subnav-cables"]) .lx-header-subnav__images--single .lx-header-subnav__img { inset: 96px; width: calc(100% - 192px); height: calc(100% - 192px); object-fit: cover; object-position: center; } /* Cables pane: image sticks to bottom and contain */ [data-pane="subnav-cables"] .lx-header-subnav__images--single .lx-header-subnav__img { top: auto; bottom: 0; left: 40px; right: 40px; height: 75%; width: calc(100% - 80px); object-fit: contain; object-position: bottom center; } .lx-header-subnav__images--single .lx-header-subnav__img.active { opacity: 1; } .lx-header-subnav__links { display: flex; flex-direction: column; justify-content: center; gap: var(--lx-gap-2); padding: 0 20px 40px 20px; } .lx-header-subnav__link { font-size: clamp(20px, 2.5vw, 36px); font-weight: 600; color: rgba(39,39,39,0.35); text-decoration: none; line-height: 1.3; transition: color 0.3s ease; padding: 8px 0; letter-spacing: -0.02em; font-family: "Manrope", sans-serif; } .lx-header-subnav__link:hover { color: var(--lx-color-primary); opacity: 1; } /* Backdrop overlay */ .lx-header-subnav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 48; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .lx-header-subnav-backdrop.visible { opacity: 1; pointer-events: auto; } .lx-site-header.is-scrolled .lx-site-nav, .lx-site-header.is-scrolled .lx-site-nav a { color: var(--lx-color-bg-dark); } .lx-site-header.is-scrolled .lx-site-header__cta { background: var(--lx-color-primary); color: var(--lx-color-bg-dark); border-color: var(--lx-color-primary); } /* =================================== Grid System - 12 列栅格体系 =================================== */ .lx-grid { display: grid; } .lx-grid--12 { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--lx-gap-32); } .lx-grid--cards { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--lx-gap-32); } .lx-grid--cards > * { grid-column: span 4; } .lx-col-1 { grid-column: span 1; } .lx-col-2 { grid-column: span 2; } .lx-col-3 { grid-column: span 3; } .lx-col-4 { grid-column: span 4; } .lx-col-5 { grid-column: span 5; } .lx-col-6 { grid-column: span 6; } .lx-col-7 { grid-column: span 7; } .lx-col-8 { grid-column: span 8; } .lx-col-9 { grid-column: span 9; } .lx-col-10 { grid-column: span 10; } .lx-col-11 { grid-column: span 11; } .lx-col-12 { grid-column: span 12; } /* 卡片网格响应式：桌面多列 → 平板 2 列 → 手机 1 列 */ @media (max-width: 1180px) { .lx-grid--cards > * { grid-column: span 6; } } @media (max-width: 767px) { .lx-grid--cards > * { grid-column: span 12; } } /* =================================== Button System - 按钮体系 =================================== */ .lx-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 32px; font-family: var(--lx-font-heading); font-size: 14px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid transparent; border-radius: 0; text-decoration: none; transition: all 0.3s ease; cursor: pointer; } .lx-btn-primary { background: var(--lx-color-primary); color: var(--lx-color-bg-dark); } .lx-btn-primary:hover, .lx-btn-primary:focus { filter: brightness(1.1); color: #ffffff; } .lx-btn-primary [data-lucide="arrow-right"] { margin-left: var(--lx-gap-8); } .lx-btn-dark { background: var(--lx-color-bg-dark); color: #ffffff; } .lx-btn-dark:hover, .lx-btn-dark:focus { background: #2a2a2e; color: #ffffff; } .lx-btn-ghost { background: transparent; border-color: currentColor; } .lx-btn-ghost:hover, .lx-btn-ghost:focus { background: rgba(255, 255, 255, 0.08); } .lx-btn-ghost-dark { background: transparent; border-color: rgba(24, 24, 27, 0.5); color: var(--lx-color-bg-dark); } .lx-btn-ghost-dark:hover, .lx-btn-ghost-dark:focus { background: rgba(24, 24, 27, 0.05); } /* --- 为了兼容旧代码暂时保留 --- */ a.button, .button, a.button-ghost, .button-ghost, .lx-site-header__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 32px; font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid transparent; border-radius: 0; text-decoration: none; transition: all 0.3s ease; } .lx-site-header__cta { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); color: #ffffff; } a.button, .button { background: var(--lx-color-primary); color: var(--lx-color-bg-dark); } a.button-ghost, .button-ghost { border-color: currentColor; } a.button:hover, a.button:focus, .button:hover, .button:focus { filter: brightness(1.1); color: #ffffff; } a.button-ghost:hover, a.button-ghost:focus, .button-ghost:hover, .button-ghost:focus { background: rgba(255, 255, 255, 0.08); } .lx-hero { position: relative; height: 100vh; background: var(--lx-gradient-primary); color: #ffffff; overflow: hidden; } .lx-hero__grid { width: 100%; padding: 0 0 0 40px; margin: 0 auto; height: 100%; display: grid; grid-template-columns: 28fr 72fr; gap: var(--lx-gap-40); } .lx-hero__copy { --hero-header-height: 96px; --hero-safe-padding: max(40px, 4vh); padding: calc(var(--hero-header-height) + var(--hero-safe-padding)) 0 40px; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; max-width: 100%; /* 防止强制撑破容器 */ } .lx-hero__eyebrow { margin: 0 0 22px; color: #ffffff; font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; text-shadow: 0 2px 4px rgba(122, 87, 0, 0.4); } .lx-hero h1 { margin: 0 0 clamp(20px, 2vw, 28px); max-width: 100%; font-size: clamp(36px, calc(1.25rem + 2.85vw), 58px); font-weight: 700; line-height: 1.05; letter-spacing: -0.05em; color: #ffffff; text-shadow: 0 2px 8px rgba(122, 87, 0, 0.3), 0 1px 2px rgba(122, 87, 0, 0.2); } .lx-hero__lead, .lx-hero__copy p, .lx-hero__copy li { max-width: 100%; color: #ffffff; font-size: 18px; line-height: 1.8; text-shadow: 0 1px 4px rgba(122, 87, 0, 0.25); } .lx-hero__certs { display: flex; flex-wrap: wrap; gap: var(--lx-gap-12); margin: 28px 0 28px; } .lx-hero__cert-img { height: 36px; width: auto; object-fit: contain; } .lx-hero__actions { margin: 10px 0 26px; } .lx-hero a.button, .lx-hero .button { background: #18181b; color: #ffffff; } .lx-hero a.button:hover, .lx-hero .button:hover { background: #2a2a2e; } .lx-hero a.button-ghost, .lx-hero .button-ghost { border-color: rgba(255, 255, 255, 0.6); color: #ffffff; } .lx-hero a.button-ghost:hover, .lx-hero .button-ghost:hover { background: rgba(255, 255, 255, 0.1); } .lx-hero__media-note { max-width: 520px; } .lx-hero__visual { position: relative; background-image: url("./images/banner2.webp"); background-repeat: no-repeat; background-position: center; background-size: cover; } .lx-hero__img { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .carousel-item { opacity: 0; transition: opacity 0.8s ease; } .carousel-item.active { opacity: 1; } .lx-strength-carousel-dots { position: absolute; bottom: 16px; right: 16px; display: flex; gap: var(--lx-gap-8); z-index: 5; } .lx-strength-carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.4); cursor: pointer; transition: background 0.3s ease; } .lx-strength-carousel-dot.is-active, .lx-strength-carousel-dot:hover { background: #fff; } .lx-hero__support { position: absolute; left: 0; bottom: 0; width: min(420px, 82%); padding: 34px; background: var(--lx-color-primary); color: var(--lx-color-bg-dark); } .lx-hero__support strong { display: block; margin-bottom: 12px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; } .lx-hero__support h2 { margin: 0 0 16px; font-size: clamp(26px, calc(1.2rem + 1.1vw), 34px); line-height: 1.05; letter-spacing: -0.04em; font-weight: 600; } .lx-hero__support p, .lx-hero__support li { margin: 0; color: rgba(39, 39, 39, 0.82); font-size: 14px; line-height: 1.7; } .lx-hero__support ul { margin: 18px 0 0; padding-left: 18px; } .lx-hero__floating { position: absolute; right: 24px; bottom: 28px; display: grid; grid-template-columns: 210px 170px; gap: var(--lx-gap-12); align-items: end; } .float-card { padding: 18px; border: none; background: rgba(255, 255, 255, 0.9); border-radius: 0; overflow: hidden; } .float-card--dark { background: rgba(39, 39, 39, 0.92); color: #ffffff; } .float-card--blue { background: rgba(252, 182, 4, 0.96); color: var(--lx-color-bg-dark); } .float-card span { display: inline-block; margin-bottom: 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .float-card strong { display: block; margin-bottom: 8px; font-size: 34px; line-height: 1; } .float-card p { margin: 0; font-size: 12px; line-height: 1.7; } .lx-hero-stats { position: absolute; bottom: 30px; left: 30px; right: 30px; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: none; border-radius: 0; color: #ffffff; } .lx-hero-stats__grid { width: 100%; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--lx-gap-10); } .lx-hero-stats__item { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; border-right: none; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-family: var(--lx-font-heading); text-align: center; } .lx-hero-stats__icon { width: 40px; height: 40px; margin-bottom: var(--lx-gap-16); color: var(--lx-color-primary); stroke-width: 1.5px; } .lx-hero-stats__title { margin: 0; color: #ffffff; } .lx-hero-stats__description { margin: var(--lx-gap-8) 0 0; color: rgba(255, 255, 255, 0.8); } .lx-hero-stats__item strong { display: block; margin-bottom: 8px; font-size: 30px; line-height: 1; color: #fcb604; } .lx-hero-stats__item .lx-hero-stats__label { font-size: 18px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #ffffff; } .lx-hero-stats__item .lx-hero-stats__value { font-size: 30px; font-family: var(--lx-font-heading); letter-spacing: -0.02em; } .lx-hero-stats__item span { font-size: 10px; line-height: 1.6; letter-spacing: 0.08em; text-transform: uppercase; } @media (max-width: 768px) { .section { padding: 40px 0; } } .section--blue { background: #ffffff; color: var(--lx-color-bg-dark); } .section--blue .section-number, .section--insights .section-number, .section--cta .section-number { color: rgba(39, 39, 39, 0.72); } .section--dark .section-number { color: rgba(255, 255, 255, 0.78); } .section--blue .lx-section__head p, .section--blue .spec-note, .section--insights .lx-section__head p, .section--insights .dynamic-note, .section--cta .lx-section__head p { color: rgba(39, 39, 39, 0.82); border-color: rgba(39, 39, 39, 0.14); } .section--dark .lx-section__head p, .section--dark .spec-note { color: rgba(255, 255, 255, 0.82); border-color: rgba(255, 255, 255, 0.18); } .section--gray { background: var(--lx-color-bg-card); } .section--dark { background: var(--lx-color-bg-dark); color: #ffffff; } .section--insights { color: var(--lx-color-bg-dark); } .section--cta { padding: 0; } .cards-3, .cards-4, .cards-6 { display: grid; gap: var(--lx-gap-32); } .cards-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .card, .info-card, .lx-cert-card, .article-card { border: none; background: #ffffff; border-radius: 0; overflow: hidden; } .section--blue .card, .section--cta .info-card { border-color: rgba(39, 39, 39, 0.14); background: #f3f5f8; } .section--insights .article-card { border-color: rgba(39, 39, 39, 0.14); background: #ffffff; } .section--dark .card { border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.05); } .section--dark .info-card { border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.08); } .section--dark .info-card p, .section--dark .info-card li { color: rgba(255, 255, 255, 0.85); } .card { border-radius: 0; overflow: hidden; display: flex; flex-direction: column; min-height: 100%; text-decoration: none; color: inherit; } .card__visual { flex-shrink: 0; aspect-ratio: 4 / 3; border-bottom: 1px solid currentColor; background: linear-gradient(135deg, rgba(252, 182, 4, 0.18), rgba(252, 182, 4, 0.04)), var(--lx-color-bg-base); padding: 18px; display: flex; align-items: end; justify-content: start; color: var(--lx-color-primary); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .section--blue .card__visual, .section--cta .card__visual { background: rgba(39, 39, 39, 0.06); color: var(--lx-color-bg-dark); } .section--dark .card__visual { background: rgba(255, 255, 255, 0.08); color: #ffffff; } .card__body { flex: 1; padding: 22px 22px 24px; display: flex; flex-direction: column; gap: var(--lx-gap-14); } .card__hover { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .card__hover-inner { overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; } .card__hover-inner p { margin: 16px 0 0 0 !important; opacity: 0; transform: translateY(10px); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .card:hover .card__hover { grid-template-rows: 1fr; } .card:hover .card__hover-inner p { opacity: 1; transform: translateY(0); transition-delay: 0.1s; } .card-arrow { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--lx-color-primary, #fcb604); margin-top: 20px; opacity: 0; transform: translateY(10px); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .card-arrow img { width: 24px; height: 24px; transition: filter 0.3s ease; } .card:hover .card-arrow { opacity: 1; transform: translateY(0); transition-delay: 0.15s; } .card-arrow:hover { transform: scale(1.1) !important; background: var(--lx-color-bg-dark); } .card-arrow:hover img { filter: brightness(0) invert(1); } #products .card { aspect-ratio: 1 / 1.15; border: none; background: #f3f5f8; } #products .card__visual { aspect-ratio: 1 / 1; flex: 1; flex-shrink: 1; min-height: 0; overflow: hidden; padding: 10% 10% 0 10%; border-bottom: none; background: #f3f5f8; } #products .card__visual > img, #accessories .card__visual > img { width: 100%; height: 100%; object-fit: contain; } #products .card__visual img { object-position: 50% 100%; } #products .card__body { flex: none; background: #ffffff; gap: 0; text-align: center; align-items: center; } #products .card__hover-inner { align-items: center; } #products .card__body h3 { font-weight: 700; } #accessories .card { aspect-ratio: 1 / 1.15; border: none; background: #ffffff; } #accessories .card__visual { aspect-ratio: 1 / 1; flex: 1; flex-shrink: 1; min-height: 0; overflow: hidden; padding: 10% 10% 0 10%; border-bottom: none; background: #ffffff; } #accessories .card__body { flex: none; gap: 0; text-align: center; align-items: center; } #accessories .card__hover-inner { align-items: center; } #accessories .card__body h3 { font-weight: 700; } .card__body h3, .info-card h3, .article-card h3 { margin: 0; font-size: clamp(16px, calc(0.9rem + 0.35vw), 20px); line-height: 1.2; letter-spacing: -0.02em; } .lx-advantage-card { display: flex; flex-direction: column; align-items: center; justify-content: center; } .lx-advantage-grid { position: relative; z-index: 10; } .lx-advantage-card__metric { display: block; color: var(--lx-color-primary); font-family: var(--lx-font-heading); font-size: 40px; line-height: 1; } .lx-advantage-card__label { color: var(--lx-color-text-body); font-family: var(--lx-font-body); font-size: var(--lx-fs-body); line-height: 1.6; } .lx-advantage-card__description { margin: 12px 0 0 !important; color: #71717a; font-family: var(--lx-font-heading); font-size: var(--lx-fs-body); font-weight: 500; line-height: 1.6; } .lx-advantage-card h3 { font-size: clamp(15px, calc(0.8rem + 0.45vw), 20px) !important; font-weight: 900 !important; margin-bottom: 8px !important; } .lx-advantage-card p { margin-bottom: 0 !important; } .lx-cert-card h3 { margin: 0; font-size: clamp(12px, calc(0.7rem + 0.2vw), 14px); line-height: 1.4; letter-spacing: 0; } .card__body p, .info-card p, .lx-cert-card p, .article-card p, .card__body li { margin: 0; color: inherit; font-size: 14px; line-height: 1.8; } .card__body a { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .card__body ul, .lx-bomflex-content-list, .cta-checklist { margin: 0; padding-left: 18px; } /* Action group: arrange primary and secondary buttons without owning a section. */ .lx-action-group { margin-top: var(--lx-gap-32); display: flex; flex-wrap: wrap; gap: var(--lx-gap-14); justify-content: flex-start; } .lx-action-group--center { justify-content: center; } .lx-action-group--start { justify-content: flex-start; } .lx-action-group--spacious { margin-top: var(--lx-gap-48); } .lx-action-group--flush { margin-top: 0; } .lx-action-group.lx-hero__actions { margin: 10px 0 26px; } .lx-bomflex-grid { display: grid; gap: calc(var(--lx-gap-32) * 2); align-items: stretch; } .lx-bomflex-feature-wall { border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 0; overflow: hidden; position: relative; } .lx-bomflex-feature-wall img { width: 100%; height: 100%; object-fit: cover; display: block; } .lx-stack { display: grid; gap: var(--lx-gap-16); } .lx-bomflex-header { margin-bottom: 16px; } .lx-bomflex-header h2 { margin: 0 0 16px 0; font-size: clamp(32px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.02em; font-weight: 600; color: #ffffff; } .lx-bomflex-header p { font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, 0.85); margin: 0; } .lx-bomflex-text { display: flex; flex-direction: column; gap: var(--lx-gap-16); } .lx-bomflex-text p, .lx-bomflex-text li { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.85); margin: 0; } .lx-bomflex-text .lx-bomflex-content-list { list-style: none; padding-left: 0; margin-top: 8px; display: flex; flex-direction: column; gap: var(--lx-gap-12); } .lx-bomflex-text .lx-bomflex-content-list li { position: relative; padding-left: 20px; } .lx-bomflex-text .lx-bomflex-content-list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 12px; height: 3px; background-color: #fcb604; border-radius: 1.5px; } .info-card, .article-card { padding: 22px; } .lx-cert-card { padding: 0; background: transparent; } .info-card__label, .article-card__label { display: inline-block; margin-bottom: 12px; color: var(--lx-color-primary); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .section--dark .info-card__label { color: rgba(255, 255, 255, 0.78); } .section--insights .article-card__label, .section--cta .info-card__label { color: rgba(39, 39, 39, 0.78); } .section--app-fullscreen { height: 100vh; min-height: 800px; position: relative; padding: 0; overflow: hidden; display: flex; align-items: stretch; } .lx-app-bg-wrapper { position: absolute; inset: 0; z-index: 1; } .lx-app-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.8s ease, transform 0.8s ease; transform: scale(1.05); } .lx-app-bg.is-active { opacity: 1; transform: scale(1); } .lx-app-bg-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(39,39,39,0.2) 0%, rgba(39,39,39,0.2) 60%, rgba(39,39,39,0.85) 85%, rgba(39,39,39,1) 100%); z-index: 2; } .lx-app-content { position: relative; z-index: 3; width: 100%; padding: 120px 40px 60px 40px; display: flex; flex-direction: column; justify-content: space-between; color: #ffffff; } .lx-section__head--app h2, .lx-section__head--app p { color: #ffffff; } .lx-section__head--app { align-items: start; } .lx-section__head--app h2 { font-size: clamp(36px, 4.5vw, 56px); } .lx-section__head--app p { font-size: 20px; line-height: 1.6; max-width: 800px; } .lx-app-bottom { display: flex; flex-direction: column; gap: var(--lx-gap-40); } .lx-app-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--lx-gap-32); border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 24px; } .lx-app-tab { position: relative; cursor: pointer; opacity: 0.7; transition: opacity 0.4s ease; } .lx-app-tab::before { content: ""; position: absolute; top: -25px; left: 0; width: 0; height: 4px; background-color: #ffffff; } @keyframes tabProgress { 0% { width: 0; } 100% { width: 100%; } } .lx-app-tab:hover, .lx-app-tab.is-active { opacity: 1; } .lx-app-tab.is-active::before { animation: tabProgress 3s linear forwards; } .lx-app-tab h3 { font-size: clamp(18px, calc(1rem + 0.65vw), 24px); font-weight: 700; margin: 0 0 12px 0; color: #ffffff; letter-spacing: -0.01em; } .lx-app-tab p { font-size: 15px; line-height: 1.6; margin: 0; color: rgba(255, 255, 255, 0.8); } .lx-market-band { position: relative; overflow: hidden; } .lx-market-band > .container { position: relative; z-index: 1; } .lx-world-map { position: relative; width: 100%; margin: 0 auto 40px auto; } .lx-world-map--flush { margin-bottom: 0; } .lx-world-map svg { display: block; width: 100%; height: auto; } .lx-market-layout { display: grid; gap: var(--lx-gap-40); align-items: center; } @media (max-width: 900px) { .lx-market-layout { grid-template-columns: 1fr; gap: var(--lx-gap-32); } .lx-market-layout > * { grid-column: span 1; } } .lx-market-card { position: absolute; width: 280px; padding: 20px; border-radius: 0; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); z-index: 10; transition: transform 0.4s ease, box-shadow 0.4s ease; } .lx-market-card:hover { transform: translateY(-4px) !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12); } /* Base transform offsets stored in custom properties for the hover to combine smoothly, but for simplicity we can just let it overwrite or use simple adjustments */ .lx-market-card--primary { background: var(--lx-color-primary); } .lx-market-card--dark { background: var(--lx-color-bg-dark); border: none; } .lx-market-card--white { background: #d1d5db; border: none; } .lx-market-card h3 { margin: 0; font-size: clamp(15px, calc(0.85rem + 0.25vw), 18px); font-weight: 700; letter-spacing: -0.01em; transition: margin 0.4s ease; } .lx-market-card:hover h3 { margin: 0 0 10px 0; } .lx-market-card--primary h3 { color: #3e392d; margin: 0 0 10px 0; } .lx-market-card--dark h3 { color: #ffffff; } .lx-market-card--white h3 { color: var(--lx-color-bg-dark); } .lx-market-card p { margin: var(--lx-gap-8) 0 0; font-size: 14px; line-height: 1.6; max-height: 0; opacity: 0; overflow: hidden; transition: all 0.4s ease; } .lx-market-card:hover p { max-height: 150px; opacity: 1; } .lx-market-card--primary p { color: rgba(62, 57, 45, 0.9); max-height: 150px; opacity: 1; } .lx-market-card--dark p { color: rgba(255, 255, 255, 0.7); } .lx-market-card--white p { color: rgba(62, 57, 45, 0.85); } /* Speech Bubble Arrows */ .lx-market-card::before { content: ""; position: absolute; width: 14px; height: 14px; transform: rotate(45deg); pointer-events: none; } .lx-market-card--africa::before { right: -7px; top: 24px; margin-top: -7px; background: var(--lx-color-primary); } .lx-market-card--middle-east::before { left: -7px; top: 24px; margin-top: -7px; background: var(--lx-color-bg-dark); } .lx-market-card--europe::before { right: -7px; top: 24px; margin-top: -7px; background: #d1d5db; } /* Desktop Positioning */ .lx-market-card--africa { left: 60.25%; top: 50.7%; margin-left: -295px; /* To the left of the point */ margin-top: -30px; /* Slightly above the point */ } .lx-market-card--middle-east { left: 65.35%; top: 36.0%; margin-left: 15px; /* Moved slightly left to make the arrow touch the point */ margin-top: -60px; } .lx-market-card--europe { left: 52.88%; top: 21.6%; margin-left: -295px; /* Moved slightly right to make the arrow touch the point (width 280 + 15 gap) */ margin-top: -60px; } .lx-market-card--africa:hover { transform: translateY(-4px); } .lx-market-card--middle-east:hover { transform: translateY(-4px); } .lx-market-card--europe:hover { transform: translateY(-4px); } .lx-strength-section { padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.15); border-bottom: 1px solid rgba(255, 255, 255, 0.15); background: #272727; } .lx-strength-full-grid { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; min-height: 100vh; } .lx-strength-visual-panel { position: relative; border-right: 1px solid rgba(255, 255, 255, 0.15); } .lx-strength-visual-panel .lx-strength-carousel { position: absolute; inset: 0; width: 100%; height: 100%; } .lx-strength-carousel-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.8s ease; } .lx-strength-carousel-img.is-active { opacity: 1; } .lx-strength-content-panel, .lx-audience-card { display: flex; flex-direction: column; } .lx-strength-text-area { padding-block: clamp(32px, 5.5vw, 80px); padding-inline: clamp(20px, 5vw, 80px); border-bottom: 1px solid rgba(255, 255, 255, 0.15); flex: 1; display: flex; flex-direction: column; justify-content: center; } .lx-strength-text-area h2 { font-size: clamp(32px, 4vw, 56px); font-weight: 600; margin: 0 0 32px 0; line-height: 0.98; letter-spacing: -0.04em; color: #ffffff; } .lx-strength-text-area .lx-strength-desc-box { margin-bottom: 0; display: flex; flex-direction: column; gap: var(--lx-gap-16); } .lx-strength-text-area .lx-strength-desc-box p { margin: 0; font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, 0.85); } .lx-strength-text-area .lx-strength-desc-box .lx-strength__lead { font-size: 18px; color: #ffffff; } .lx-strength-text-area .lx-strength-desc-box strong { color: var(--lx-color-primary); } .lx-strength-text-area .lx-strength-action { margin-top: 16px; display: none; } .lx-strength-data-grid { display: grid; grid-template-columns: repeat(3, 1fr); } .lx-strength-data-cell { padding: 40px 32px; border-right: 1px solid rgba(255, 255, 255, 0.15); border-bottom: 1px solid rgba(255, 255, 255, 0.15); position: relative; } .lx-strength-data-cell:nth-child(3n) { border-right: none; } .lx-strength-data-cell:nth-last-child(-n+3) { border-bottom: none; } .lx-strength-action-cell { padding: 0; } .lx-strength-action-cell__button { width: 100%; height: 100%; display: flex; gap: var(--lx-gap-8); font-size: 18px; font-weight: 800; border: none; color: var(--lx-color-text-heading); } .lx-strength-action-cell__icon { width: 20px; height: 20px; } .lx-strength-action-cell a.button, .lx-strength-action-cell .button { border-radius: 0; font-weight: 900; background-color: transparent; color: #ffffff; border-top: 1px solid rgba(255, 255, 255, 0.15); transition: background-color 0.3s ease, color 0.3s ease; } .lx-strength-action-cell a.button:hover, .lx-strength-action-cell .button:hover { background-color: rgba(255, 255, 255, 0.05); } .lx-strength-action-cell .button img { filter: brightness(0) invert(1) !important; } .lx-strength-data-cell .lx-strength-data-value { font-size: 36px; font-family: var(--lx-font-heading); font-weight: 700; color: #ffffff; margin-bottom: 12px; line-height: 1; letter-spacing: -0.02em; } .lx-strength-data-cell .lx-strength-data-value span { font-size: 14px; font-weight: 700; color: var(--lx-color-primary); margin-left: 6px; text-transform: uppercase; letter-spacing: 0.1em; } .lx-strength-data-cell .lx-strength-data-label { font-size: 14px; color: rgba(255, 255, 255, 0.7); line-height: 1.6; } .empty-cell { background: rgba(255, 255, 255, 0.02); } .lx-cert-carousel { position: relative; margin-top: 32px; } .lx-cert-carousel__nav { display: flex; gap: var(--lx-gap-8); justify-content: flex-end; } .lx-cert-carousel__track { display: flex; gap: var(--lx-gap-16); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 24px; -ms-overflow-style: none; scrollbar-width: none; } .lx-cert-carousel__track::-webkit-scrollbar { display: none; } .lx-cert-carousel__track .lx-cert-card { flex: 0 0 calc(20% - 12.8px); scroll-snap-align: start; } .lx-cert-carousel__button { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: var(--lx-color-bg-dark); color: #ffffff; cursor: pointer; border: none; padding: 0; transition: background-color 0.3s ease; } .lx-cert-carousel__button svg, .lx-cert-carousel__icon { width: 18px; height: 18px; flex: 0 0 18px; stroke-width: 2.25; } .lx-cert-carousel__button:hover { background: var(--lx-color-primary); color: var(--lx-color-bg-dark); } .lx-cert-carousel__button:disabled { opacity: 0.3; cursor: not-allowed; } .lx-cert-card__frame { aspect-ratio: 2 / 3; border: none; background: #f1f1f1; margin-bottom: 16px; padding: 0; display: block; overflow: hidden; } .lx-cert-card__frame > img { width: 100%; height: 100%; object-fit: cover; } .article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lx-gap-16); } .lx-article-list { display: flex; flex-direction: column; border-top: 1px solid rgba(0, 0, 0, 0.15); } .lx-article-list-item h3 { margin-bottom: var(--lx-article-title-gap, 12px) !important; color: var(--lx-color-bg-dark); } .lx-article-list-item__arrow { margin-top: 16px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.15); display: flex; align-items: center; justify-content: center; opacity: 0.6; transition: all 0.3s ease; } .lx-article-list-item__arrow img { width: 18px; height: 18px; transition: filter 0.3s ease; } .lx-article-list-item__visual img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .lx-article-list-item > a { position: absolute; inset: 0; z-index: 10; } .lx-article-list-item > a span { display: none; } .lx-articles__mobile-action { display: none; } .article-card__meta { margin-bottom: 12px; font-size: 12px; line-height: 1.7; color: rgba(39, 39, 39, 0.8); } .lx-audience-grid { display: grid; gap: var(--lx-gap-32); margin-top: 48px; } .lx-audience-card__image { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; margin-bottom: 24px; border: 1px solid rgba(0,0,0,0.1); } .lx-audience-card__image img { width: 100%; height: 100%; object-fit: cover; } .lx-audience-card__content { display: flex; flex-direction: column; position: relative; min-height: 100px; /* Lock height to prevent layout shift */ border-top: 2px solid var(--lx-color-primary); padding-top: 16px; } .lx-audience-card__content h3 { font-size: clamp(17px, calc(0.95rem + 0.45vw), 22px); font-weight: 700; margin: 0; color: var(--lx-color-bg-dark); line-height: 1.4; opacity: 1; transform: translateY(0); transition: opacity 0.3s ease, transform 0.3s ease; } .lx-audience-card__content h3 span { flex: 1 1 auto; } .lx-audience-card__content h3 { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .lx-audience-card__icon { flex: 0 0 auto; color: var(--lx-color-primary); font-size: 18px; line-height: 1; } .lx-audience-card__content p { position: absolute; top: 16px; left: 0; width: 100%; color: rgba(0,0,0,0.65); font-size: 14px; line-height: 1.6; margin: 0; opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; } .lx-audience-card:hover .lx-audience-card__content h3 { opacity: 0; transform: translateY(-10px); } .lx-audience-card:hover .lx-audience-card__content p { opacity: 1; transform: translateY(0); } .market-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--lx-gap-40); margin-top: 24px; } .market-item { position: relative; padding-top: 32px; border-top: 1px solid var(--lx-color-border); } .market-item::before { content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 2px; background-color: var(--lx-color-primary); transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .market-item::after { content: ""; position: absolute; top: -4px; left: 0; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--lx-color-primary); background-color: var(--lx-color-bg-base); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .market-item:hover::before { width: 100%; } .market-item:hover::after { background-color: var(--lx-color-primary); transform: scale(1.2); box-shadow: 0 0 12px rgba(252, 182, 4, 0.5); } .market-item h3 { margin: 0 0 16px 0; font-size: clamp(16px, calc(0.9rem + 0.35vw), 20px); font-weight: 700; color: var(--lx-color-bg-dark); letter-spacing: -0.01em; } .market-item p { margin: 0; font-size: 15px; line-height: 1.7; color: rgba(62, 57, 45, 0.85); } .lx-cta-full-grid { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border-top: 1px solid rgba(255, 255, 255, 0.15); } .lx-cta-left { padding: 100px 8vw; display: flex; flex-direction: column; justify-content: center; background: var(--lx-color-primary); color: var(--lx-color-bg-dark); } .lx-cta-left h2 { font-size: clamp(32px, 4vw, 52px); line-height: 0.98; letter-spacing: -0.04em; font-weight: 700; margin: 0 0 24px 0; color: #ffffff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1); } .lx-cta-left p { font-size: 16px; line-height: 1.6; margin: 0 0 40px 0; max-width: 560px; color: #ffffff; } .section--cta .lx-action-group { gap: var(--lx-gap-16); } .lx-cta-left a.button, .lx-cta-left .button { background: var(--lx-color-bg-dark); color: #ffffff; } .lx-cta-left a.button:hover, .lx-cta-left .button:hover { filter: brightness(1.15); } .lx-cta-left a.button-ghost, .lx-cta-left .button-ghost { border-color: rgba(24, 24, 27, 0.5); color: var(--lx-color-bg-dark); } .lx-cta-left a.button-ghost:hover, .lx-cta-left .button-ghost:hover { background: rgba(24, 24, 27, 0.05); } .lx-cta-right { padding: 100px 8vw; display: flex; flex-direction: column; justify-content: center; background: #272727; color: #ffffff; border-left: 1px solid rgba(255, 255, 255, 0.15); } .lx-cta-check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lx-gap-32); } .lx-cta-check-grid--stacked { grid-template-columns: 1fr; } .lx-cta-check-item { display: flex; align-items: flex-start; gap: var(--lx-gap-16); } .lx-cta-check-icon { flex-shrink: 0; width: 32px; height: 32px; border: 1px solid rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; color: var(--lx-color-primary); } .lx-cta-check-icon svg { width: 16px; height: 16px; } .lx-cta-check-text strong { display: block; font-size: 18px; font-weight: 700; margin-bottom: 6px; } .lx-cta-check-text span { display: block; font-size: 14px; color: rgba(255, 255, 255, 0.6); line-height: 1.5; } /* Check items inside lx-cta-left (yellow background) */ .lx-cta-left .lx-cta-check-icon { background-color: #ffffff; border-color: #ffffff; color: var(--lx-color-primary); } .lx-cta-left .lx-cta-check-text strong { color: #ffffff; } .lx-cta-left .lx-cta-check-text span { color: rgba(255, 255, 255, 0.85); } .lx-cta-left .lx-cta-check-grid { margin-bottom: 40px; } /* CTA Form */ .lx-cta-right { justify-content: flex-start; } .lx-cta-form { width: 100%; } .lx-cta-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lx-gap-12); margin-bottom: 12px; } .lx-cta-form .lx-cta-form__input { width: 100%; padding: 12px 15px; font-size: 14px; font-family: "Manrope", sans-serif; color: #ffffff; background-color: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 4px; outline: none; transition: border-color 0.2s, background-color 0.2s; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .lx-cta-form .lx-cta-form__input:-webkit-autofill, .lx-cta-form .lx-cta-form__input:-webkit-autofill:hover, .lx-cta-form .lx-cta-form__input:-webkit-autofill:focus, .lx-cta-form .lx-cta-form__textarea:-webkit-autofill, .lx-cta-form .lx-cta-form__textarea:-webkit-autofill:hover, .lx-cta-form .lx-cta-form__textarea:-webkit-autofill:focus { -webkit-text-fill-color: #ffffff; -webkit-box-shadow: 0 0 0px 1000px #2a2a2d inset; transition: background-color 5000s ease-in-out 0s; } .lx-cta-form .lx-cta-form__input::placeholder { color: rgba(255, 255, 255, 0.55); } .lx-cta-form .lx-cta-form__input:focus { border-color: var(--lx-color-primary); background-color: rgba(255, 255, 255, 0.14); } .lx-cta-form .lx-cta-form__input option { color: #18181b; background: #ffffff; } .lx-cta-form select.lx-cta-form__input { background-color: rgba(255, 255, 255, 0.08); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; padding-right: 40px; } .lx-cta-form .lx-cta-form__textarea { width: 100%; min-height: 100px; padding: 12px 15px; font-size: 14px; font-family: "Manrope", sans-serif; color: #ffffff; background-color: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 4px; outline: none; resize: vertical; transition: border-color 0.2s, background-color 0.2s; box-sizing: border-box; margin-bottom: 12px; } .lx-cta-form .lx-cta-form__textarea::placeholder { color: rgba(255, 255, 255, 0.55); } .lx-cta-form .lx-cta-form__textarea:focus { border-color: var(--lx-color-primary); background-color: rgba(255, 255, 255, 0.14); } .lx-cta-form__file-row { margin-bottom: 20px; } .lx-cta-form__file-label { display: inline-flex; align-items: center; gap: var(--lx-gap-8); padding: 11px 15px; font-size: 13px; color: rgba(255, 255, 255, 0.55); background-color: rgba(255, 255, 255, 0.08); border: 1px dashed rgba(255, 255, 255, 0.2); border-radius: 4px; cursor: pointer; transition: border-color 0.2s, background-color 0.2s; } .lx-cta-form__file-label:hover { border-color: var(--lx-color-primary); background-color: rgba(255, 255, 255, 0.14); } .lx-cta-form__file { display: none; } .lx-cta-form__submit { width: 100%; padding: 14px; font-size: 15px; font-weight: 700; font-family: "Manrope", sans-serif; background: var(--lx-color-primary); color: var(--lx-color-bg-dark); border: none; border-radius: 4px; cursor: pointer; transition: background 0.25s; } .lx-cta-form__submit:hover { background: #e5b800; } .lx-cta-form__note { font-size: 12px; color: rgba(255, 255, 255, 0.45); text-align: center; margin: 12px 0 0; } .lx-cta-form__note a { color: rgba(255, 255, 255, 0.6); text-decoration: underline; } .lx-cta-form__note a:hover { color: #ffffff; } .lx-footer { background: var(--lx-color-bg-dark); color: #ffffff; } .lx-footer__inner { width: min(var(--lx-container-max), calc(100% - 56px)); margin: 0 auto; padding: 60px 0 30px; } .lx-footer-row-1 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lx-gap-60); padding-bottom: 60px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); margin-bottom: 60px; } .lx-footer-brand p { margin: 24px 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.7); max-width: 400px; } .lx-footer-certs { display: flex; gap: var(--lx-gap-12); align-items: center; } .lx-footer-cert-img { height: 40px; width: auto; object-fit: contain; } .lx-footer-contact p { margin: 0 0 16px; font-size: 15px; color: rgba(255, 255, 255, 0.7); display: flex; flex-direction: column; } .lx-footer-contact strong { color: #ffffff; margin-bottom: 4px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; } .lx-footer-contact a { color: var(--lx-color-primary); text-decoration: none; } .lx-footer-contact a:hover { text-decoration: underline; } .lx-footer-row-2 { display: flex; justify-content: space-between; gap: var(--lx-gap-40); flex-wrap: wrap; padding-bottom: 60px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); margin-bottom: 30px; } .lx-footer-nav-col h3 { margin: 0 0 24px; font-size: clamp(12px, calc(0.7rem + 0.15vw), 14px); font-weight: 700; color: #ffffff; text-transform: uppercase; letter-spacing: 0.1em; } .lx-footer-nav-col ul { list-style: none; padding: 0; margin: 0; } .lx-footer-nav-col li { margin-bottom: 12px; } .lx-footer-nav-col a { color: rgba(255, 255, 255, 0.7); text-decoration: none; font-size: 14px; transition: color 0.3s; } .lx-footer-nav-col a:hover { color: var(--lx-color-primary); } .lx-footer-row-3 { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: rgba(255, 255, 255, 0.5); } .lx-footer-row-3 a { color: rgba(255, 255, 255, 0.5); text-decoration: none; transition: color 0.3s; } .lx-footer-row-3 a:hover { color: #ffffff; } .lx-footer-row-3 p { margin: 0; } @media (max-width: 1180px) { .lx-site-header { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; border-bottom: 0; } .lx-site-header.is-scrolled { background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 10px 30px rgba(24, 24, 27, 0.08); border-bottom: 1px solid rgba(24, 24, 27, 0.08); } .lx-site-header__inner { padding: 0 24px; min-height: 72px; justify-content: space-between; } .lx-site-header.is-scrolled .lx-site-header__inner { width: 100%; max-width: none; margin: 0; padding: 0 24px; } .lx-site-header__logo { flex: 0 1 auto; min-width: 0; color: var(--lx-color-bg-dark); } .lx-site-header__logo img { width: 60px; } .lx-site-nav { display: none; } .lx-site-header__cta-wrap { display: flex !important; flex: 0 0 auto; min-width: 0; margin-left: auto; } .lx-site-header__cta { min-height: 40px; padding: 0 14px; font-size: 11px; letter-spacing: 0.12em; background: var(--lx-color-primary); color: var(--lx-color-bg-dark); border-color: var(--lx-color-primary); } .lx-mobile-menu-toggle { width: 40px; height: 40px; margin-left: 12px !important; border: 1px solid rgba(24, 24, 27, 0.12) !important; background: #ffffff !important; color: var(--lx-color-bg-dark) !important; } .lx-mobile-menu__inner { max-width: 420px; background: #ffffff; border-left: 1px solid rgba(24, 24, 27, 0.08); box-shadow: -24px 0 48px rgba(24, 24, 27, 0.16); } .lx-mobile-menu__header { padding: 0 20px !important; background: #ffffff; } .lx-mobile-menu__content { padding: 8px 20px 20px !important; } .lx-mobile-menu-trigger, .lx-mobile-menu__content > a { min-height: 52px; font-size: 16px !important; } .lx-mobile-menu-dropdown:not(.hidden) { margin-top: 0; margin-bottom: 12px; padding: 0 0 20px 16px; } .lx-hero { height: auto; min-height: 100vh; } .lx-hero__grid { padding: 0; grid-template-columns: 1fr; grid-template-rows: auto auto; } .lx-hero__copy { --hero-header-height: 72px; padding: calc(var(--hero-header-height) + var(--hero-safe-padding)) 20px 40px; } .lx-hero__lead { padding: 0 !important; margin: 0 !important; } .lx-hero__visual { min-height: 500px; } .lx-hero-stats { position: absolute; bottom: 0; left: 20px; right: 20px; margin: 0; padding: 0; background: rgba(255, 255, 255, 0.08); } .lx-hero-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lx-gap-10); } .lx-hero-stats__item { padding: 16px 12px !important; margin: 0 !important; } .lx-hero-stats__item:first-child { padding: 16px 12px !important; } .lx-hero-stats__item:last-child { padding: 16px 12px !important; } .lx-section__head, .lx-bomflex-grid, .cta-wrap, .lx-footer-row-1 { grid-template-columns: 1fr; gap: var(--lx-gap-40); } .lx-section__head > *, .lx-bomflex-grid > *, .cta-wrap > *, .lx-footer-row-1 > * { grid-column: 1 / -1 !important; } .lx-footer-row-2 { gap: var(--lx-gap-24); } .lx-footer-row-3 { flex-direction: column; gap: var(--lx-gap-16); text-align: center; } .lx-app-tabs { grid-template-columns: 1fr; border-top: none; padding-top: 0; gap: 16px; } .lx-app-tab { padding-left: 20px; border-left: 2px solid rgba(255, 255, 255, 0.2); } .lx-app-tab::before { top: 0; left: -2px; width: 2px !important; height: 0; background-color: #ffffff; } @keyframes tabProgressMobile { 0% { height: 0; } 100% { height: 100%; } } .lx-app-tab.is-active::before { animation: tabProgressMobile 3s linear forwards; } .cards-4, .cards-3, .cert-grid, .article-grid, .market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lx-cta-full-grid { grid-template-columns: 1fr; } .lx-cta-left, .lx-cta-right { padding: 60px 5vw; } .lx-cta-right { border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.15); } .lx-hero__img { height: 100%; } .lx-hero__copy { --hero-header-height: 72px; padding: calc(var(--hero-header-height) + var(--hero-safe-padding)) 20px 40px; } .lx-hero h1 { font-size: clamp(30px, calc(1rem + 2.5vw), 48px); line-height: 1.08; } .lx-hero__support, .lx-hero__floating { position: absolute; left: 24px; right: 24px; width: auto; } .lx-hero__support { bottom: 210px; } .lx-hero__floating { bottom: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .gallery-grid .card:first-child { grid-column: span 1; } .metric-row { grid-template-columns: 1fr; } } @media (max-width: 1180px) { .lx-strength-full-grid { grid-template-columns: 1fr; } .lx-strength-visual-panel { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.15); min-height: 400px; } } @media (max-width: 1024px) { .lx-cert-carousel__track .lx-cert-card { flex: 0 0 calc(33.333% - 10.6px); } } @media (max-width: 900px) { .lx-strength-data-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lx-strength-data-cell:nth-child(3n) { border-right: 1px solid rgba(255, 255, 255, 0.15); } .lx-strength-data-cell:nth-child(2n) { border-right: none; } .lx-strength-data-cell:nth-last-child(-n+3) { border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .lx-strength-data-cell:nth-last-child(-n+2) { border-bottom: none; } .lx-market-card::before { display: none; } .lx-market-card { position: relative; width: 100%; left: auto !important; top: auto !important; margin: 0 0 16px 0 !important; transform: none !important; } .lx-market-card h3 { margin: 0 0 10px 0; } .lx-market-card p { max-height: none; opacity: 1; } .lx-world-map { margin-bottom: 24px; } } @media (max-width: 600px) { .lx-cert-carousel__track .lx-cert-card { flex: 0 0 calc(50% - 8px); } .lx-strength-data-grid { grid-template-columns: 1fr; } .lx-strength-data-cell { border-right: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important; } .lx-strength-data-cell:last-child { border-bottom: none !important; } } @media (max-width: 768px) { .lx-audience-card__image { aspect-ratio: 16/9; } } @media (max-width: 767px) { .cards-4, .cards-3, .cert-grid, .article-grid, .market-grid { grid-template-columns: 1fr; } .section--app-fullscreen { height: auto; min-height: 680px; } .section--app-fullscreen .lx-app-content { padding: 80px 20px 40px; } .lx-cta-form__row { grid-template-columns: 1fr; } .lx-cta-check-grid { grid-template-columns: 1fr; gap: 20px; } .lx-footer__inner { width: calc(100% - 40px); padding: 40px 0 20px; } .lx-footer-row-1 { gap: 24px; padding-bottom: 32px; margin-bottom: 32px; } .lx-footer-brand p { margin: 16px 0 20px; max-width: none; } .lx-footer-certs { flex-wrap: wrap; gap: 10px; } .lx-footer-cert-img { height: 36px; } .lx-footer-contact { display: grid; gap: 0; } .lx-footer-contact p { margin: 0; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); } .lx-footer-contact p:first-child { padding-top: 0; border-top: 0; } .lx-footer-row-2 { display: grid; grid-template-columns: 1fr; column-gap: 0; row-gap: 0; padding-bottom: 24px; margin-bottom: 24px; } .lx-footer-nav-col { min-width: 0; padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); } .lx-footer-nav-col:first-child { padding-top: 0; border-top: 0; } .lx-footer-nav-col h3 { margin-bottom: 12px; font-size: clamp(12px, 3.2vw, 13px); letter-spacing: 0.06em; } .lx-footer-nav-col li { margin-bottom: 10px; } .lx-footer-row-3 { align-items: flex-start; gap: 12px; text-align: left; } } @media (max-width: 420px) { .lx-site-header__inner, .lx-site-header.is-scrolled .lx-site-header__inner { padding: 0 16px; } .lx-site-header__logo img { width: 56px; } .lx-site-header__cta { min-height: 38px; padding: 0 12px; font-size: 10px; } .lx-mobile-menu-toggle { width: 38px; height: 38px; margin-left: 10px !important; } .lx-footer-row-2 { grid-template-columns: 1fr; } } @media (max-width: 560px) { .lx-hero__actions { flex-direction: column; align-items: stretch; margin-bottom: 0; } .lx-hero__actions .lx-btn { width: 100%; } } @media (max-width: 1180px) { .section[aria-label="Advantages"] > .w-full > .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .section[aria-label="Advantages"] .lx-advantage-card > strong { font-size: clamp(28px, calc(1rem + 4vw), 40px) !important; } .section[aria-label="Advantages"] .lx-advantage-card .lx-advantage-card__label { font-size: clamp(13px, 3.8vw, 18px) !important; } } @media (max-width: 767px) { :root { --lx-container-pad: 20px; } /* Mobile section rhythm: 40px vertically, 20px horizontal content inset. */ .section { padding: 40px 0 !important; } .section > .container { width: calc(100% - 40px) !important; max-width: calc(100% - 40px) !important; margin-inline: auto; } .lx-bomflex-grid { gap: 20px !important; } .lx-strength-section { padding: 40px 20px !important; } .section[aria-label="Advantages"] { padding: 0 !important; } .section--app-fullscreen .lx-app-content { padding: 40px 20px; } html, body { max-width: 100%; overflow-x: clip; } .lx-page-shell, main, .container, .lx-hero__grid, .lx-hero__copy, .lx-hero__visual, .lx-section__head, .lx-article-list-item { min-width: 0; max-width: 100%; } .lx-hero__grid > *, .lx-section__head > *, .lx-article-list-item > *, .lx-article-list-item__body, .lx-article-list-item__visual { min-width: 0; max-width: 100%; } .lx-section__head > div[style*="min-width"] { min-width: 0 !important; } .lx-section__head--split > div:first-child { min-width: 0; } /* Keep mobile card grids inside the viewport while preserving hover behavior. */ .lx-grid--cards { width: 100%; max-width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr) !important; } .lx-grid--cards > .card { grid-column: 1 / -1 !important; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } #products .lx-grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px; } #products .lx-grid--cards > .card { grid-column: auto !important; aspect-ratio: 1 / 1.35; } #products .card__body { padding: 16px 10px 18px; } #products .card__body h3 { font-size: clamp(15px, 4.2vw, 18px); line-height: 1.25; } #products .card__hover-inner p { margin-top: 8px !important; font-size: 12px !important; line-height: 1.35; } #products .card-arrow { width: 32px; height: 32px; margin-top: 10px; } #products .card-arrow img { width: 18px; height: 18px; } .lx-grid--cards .card__visual, .lx-grid--cards .card__body, .lx-grid--cards .card__hover, .lx-grid--cards .card__hover-inner { min-width: 0; max-width: 100%; } .lx-grid--cards .card__body h3, .lx-grid--cards .card__body p { max-width: 100%; overflow-wrap: anywhere; } .lx-section__head.lx-grid--12 { grid-template-columns: minmax(0, 1fr); } .lx-section__head.lx-grid--12 > [class*="lx-col-"] { grid-column: 1 / -1 !important; min-width: 0; } .lx-hero { min-height: 0; overflow: visible; } .section--app-fullscreen { height: auto; min-height: 0; display: block; padding: 0 !important; overflow: hidden; background: #272727; } .section--app-fullscreen .lx-app-content { height: auto; min-height: 0; display: block; padding: 40px 20px; background: #272727; } .section--app-fullscreen .lx-app-bg-wrapper { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 16 / 9; overflow: hidden; background: #18181b; } .section--app-fullscreen .lx-app-bg { object-fit: cover; object-position: center; transform: scale(1.02); } .section--app-fullscreen .lx-app-bg.is-active { transform: scale(1); } .section--app-fullscreen .lx-app-bg-overlay { background: linear-gradient(to bottom, rgba(24, 24, 27, 0) 62%, rgba(39, 39, 39, 0.38) 100%); } .section--app-fullscreen .lx-section__head--app { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 32px; } .section--app-fullscreen .lx-section__head--app h2 { font-size: clamp(30px, 9vw, 40px); line-height: 1.08; } .section--app-fullscreen .lx-section__head--app p { max-width: none; font-size: 16px; line-height: 1.65; } .section--app-fullscreen .lx-app-bottom { display: block; } .section--app-fullscreen .lx-app-tabs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 0; } .section--app-fullscreen .lx-app-tab { padding: 20px 36px 20px 0; border-left: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.16); opacity: 0.72; } .section--app-fullscreen .lx-app-tab::before { top: auto; right: 0; bottom: -1px; left: 0; width: 100% !important; height: 2px; background: var(--lx-color-primary); opacity: 0; } .section--app-fullscreen .lx-app-tab.is-active::before { animation: none; opacity: 1; } .section--app-fullscreen .lx-app-tab::after { content: "+"; position: absolute; top: 17px; right: 0; color: var(--lx-color-primary); font-size: 24px; line-height: 1; } .section--app-fullscreen .lx-app-tab.is-active::after { content: "−"; } .section--app-fullscreen .lx-app-tab h3 { margin: 0; font-size: clamp(17px, 4.6vw, 19px); line-height: 1.35; } .section--app-fullscreen .lx-app-tab p { max-height: 0; margin: 0; overflow: hidden; opacity: 0; transform: translateY(-6px); transition: max-height 0.35s ease, margin 0.35s ease, opacity 0.3s ease, transform 0.35s ease; } .section--app-fullscreen .lx-app-tab.is-active { opacity: 1; } .section--app-fullscreen .lx-app-tab.is-active p { max-height: 180px; margin-top: 12px; opacity: 1; transform: translateY(0); } .lx-market-band { overflow: visible; } .lx-hero__grid, .lx-hero__copy { height: auto; } .lx-hero__grid { row-gap: 0; } .lx-hero__visual { padding-block: 40px; overflow: hidden; } .lx-hero__visual .lx-hero__img { top: 40px; bottom: 40px; height: calc(100% - 80px); } .lx-hero__visual .lx-hero-stats { bottom: 40px; } .section[aria-label="Advantages"] .lx-advantage-card { padding: clamp(20px, 6vw, 28px) clamp(12px, 4vw, 20px) !important; } .section[aria-label="Advantages"] .lx-advantage-card > strong { font-size: clamp(26px, calc(0.875rem + 3vw), 34px) !important; } .section[aria-label="Advantages"] .lx-advantage-card > p { font-size: 12px !important; } } @media (min-width: 768px) and (max-width: 1180px) { .lx-hero__visual { min-height: clamp(420px, 42vw, 500px); } } /* Keep the desktop hero content and bottom advantage cards visible on shorter laptop/desktop viewports without changing the page copy. */ @media (min-width: 1181px) and (max-width: 1440px) and (max-height: 1000px) { .lx-hero { height: auto; min-height: 0; } .lx-hero__grid { height: auto; min-height: 0; grid-template-columns: minmax(360px, 32fr) minmax(0, 68fr); gap: 24px; } .lx-hero__copy, .lx-hero__visual { min-width: 0; } .lx-hero__copy { justify-content: center; --hero-header-height: 96px; padding: calc(var(--hero-header-height) + var(--hero-safe-padding)) 0 40px; } .lx-hero h1 { font-size: clamp(40px, calc(1rem + 2.8vw), 54px); margin-bottom: clamp(20px, 1.6vw, 24px); } .lx-hero__lead, .lx-hero__copy p, .lx-hero__copy li { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.65; } .lx-hero__certs { margin: 20px 0; } .lx-hero__actions { gap: 12px; margin: 8px 0 20px; } .lx-hero__visual { min-height: 760px; } .lx-hero-stats { left: 24px; right: 24px; bottom: 24px; } .lx-hero-stats__grid { gap: 8px !important; } .lx-hero-stats__item { padding: 18px 12px !important; } } /* Laptop-width desktops need a smaller heading scale than wide screens. */ @media (min-width: 1181px) and (max-width: 1440px) { .lx-hero h1 { font-size: clamp(38px, calc(1rem + 2.2vw), 48px); } } /* Homepage H2-to-content spacing system. */ body.home { --lx-heading-content-gap: clamp(20px, 2.2vw, 40px); } body.home .lx-page-shell main .lx-section__head { gap: var(--lx-heading-content-gap) !important; margin-bottom: var(--lx-heading-content-gap) !important; } body.home .lx-page-shell .lx-site-header__cta.lx-btn-primary { background: var(--lx-color-primary); color: var(--lx-color-bg-dark); } body.home .lx-page-shell main .lx-section__head h2 + p { margin-top: var(--lx-heading-content-gap) !important; } body.home .lx-page-shell main .lx-bomflex-header h2, body.home .lx-page-shell main .lx-strength-text-area h2 { margin-bottom: var(--lx-heading-content-gap); } body.home .lx-page-shell main .lx-market-layout h2 { margin-bottom: var(--lx-heading-content-gap) !important; } body.home .lx-page-shell main #products .lx-grid--cards, body.home .lx-page-shell main #accessories .lx-grid--cards, body.home .lx-page-shell main .lx-audience-grid, body.home .lx-page-shell main .lx-cert-carousel { margin-top: 0 !important; } @media (max-width: 767px) { body.home .lx-page-shell main .lx-audience-grid { gap: 40px; } body.home { --lx-heading-content-gap: 20px; --lx-mobile-element-gap: 20px; --lx-article-title-gap: 20px; } body.home .lx-page-shell main .lx-grid, body.home .lx-page-shell main .lx-bomflex-grid, body.home .lx-page-shell main .lx-stack, body.home .lx-page-shell main .lx-bomflex-text, body.home .lx-page-shell main .lx-market-layout { gap: var(--lx-mobile-element-gap) !important; } body.home .lx-page-shell main > .lx-hero .lx-hero__copy { padding: calc(var(--hero-header-height) + 20px) 20px 40px; } body.home .lx-page-shell main > .lx-hero .lx-hero__actions { margin-bottom: 0 !important; } body.home .lx-page-shell main > .lx-hero .lx-hero__copy::before { content: ""; display: block; width: 100%; aspect-ratio: 16 / 11; margin-bottom: 20px; background-image: url("./images/banner2.webp"); background-repeat: no-repeat; background-position: center; background-size: cover; } body.home .lx-page-shell main > .lx-hero .lx-hero__visual { min-height: 0; padding: 0 20px 40px; background-image: none; } body.home .lx-page-shell main > .lx-hero .lx-hero-stats { position: static; left: auto; right: auto; bottom: auto; } body.home .lx-page-shell main > .lx-hero .lx-hero-stats__icon { width: 28px; height: 28px; margin-bottom: 12px; color: #ffffff; } body.home .lx-page-shell main .lx-article-list-item { gap: var(--lx-gap-12) !important; } body.home .lx-page-shell main .lx-section__head--split { flex-direction: column; align-items: stretch; } body.home .lx-page-shell main .lx-section__head--split > div:first-child { width: 100%; flex: none; } body.home .lx-page-shell main .lx-section__head--split .lx-action-group { align-self: flex-start; } body.home .lx-page-shell main .lx-articles__header-action { display: none; } body.home .lx-page-shell main .lx-articles__mobile-action { display: flex; width: 100%; margin-top: var(--lx-mobile-element-gap); } body.home .lx-page-shell main .lx-articles__mobile-action .lx-btn { width: 100%; } body.home .lx-page-shell main #products .lx-action-group--spacious { margin-top: var(--lx-mobile-element-gap) !important; } body.home .lx-page-shell main .lx-bomflex-header { margin-bottom: 0; } body.home .lx-page-shell main .section--app-fullscreen .lx-app-content, body.home .lx-page-shell main .lx-strength-text-area { padding-top: var(--lx-mobile-element-gap); } body.home .lx-page-shell main .card__body { padding-top: var(--lx-mobile-element-gap); } body.home .lx-page-shell main .lx-audience-card__image { margin-bottom: 0; } body.home .lx-page-shell main .lx-audience-card__content { min-height: 0; padding-top: var(--lx-mobile-element-gap); } body.home .lx-page-shell main .lx-audience-card__content h3, body.home .lx-page-shell main .lx-audience-card__content p { top: var(--lx-mobile-element-gap); } body.home .lx-page-shell main .lx-audience-card { cursor: pointer; } body.home .lx-page-shell main .lx-audience-card__content p { position: static; top: auto; left: auto; width: auto; max-height: 0; margin-top: 0; overflow: hidden; opacity: 0; transform: translateY(-4px); transition: max-height 0.35s ease, margin-top 0.35s ease, opacity 0.2s ease, transform 0.35s ease; pointer-events: auto; } body.home .lx-page-shell main .lx-audience-card:hover .lx-audience-card__content h3 { opacity: 1; transform: none; } body.home .lx-page-shell main .lx-audience-card:hover .lx-audience-card__content p { max-height: 0; margin-top: 0; opacity: 0; transform: translateY(-4px); } body.home .lx-page-shell main .lx-audience-card.is-open .lx-audience-card__content p { max-height: 220px; margin-top: 12px; opacity: 1; transform: translateY(0); } body.home .lx-page-shell main .lx-audience-card__icon { transition: transform 0.3s ease; } body.home .lx-page-shell main .lx-audience-card.is-open .lx-audience-card__icon { transform: rotate(45deg); } margin-bottom: var(--lx-mobile-element-gap); } body.home .lx-page-shell main .market-item h3, body.home .lx-page-shell main .lx-article-list-item h3 { margin-bottom: var(--lx-gap-12) !important; } body.home .lx-page-shell main .lx-article-list-item__arrow { margin-top: var(--lx-gap-12); } body.home .lx-page-shell main .section--app-fullscreen .lx-app-tab.is-active p { margin-top: var(--lx-mobile-element-gap); } body.home .lx-page-shell main #accessories .card__hover-inner p { margin-top: var(--lx-mobile-element-gap) !important; } } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-scrolling iframe { pointer-events: none; } /* =================================== Product Category Template Shared taxonomy product-category page styles =================================== */ .lx-category-template { --lx-category-hero-gradient: linear-gradient(135deg, color-mix(in srgb, var(--lx-color-primary) 75%, var(--lx-color-primary-light) 25%) 0%, var(--lx-color-primary) 100%); background: var(--lx-color-bg-card, #fff); color: var(--lx-color-text-body, #1a1a1a); font-family: var(--lx-font-body, Inter, Arial, sans-serif); } .lx-category-template .container { width: min(var(--lx-container-max, 1280px), calc(100% - var(--lx-container-pad, 40px) * 2)); max-width: none; padding: 0; } .lx-category-template__hero { position: relative; overflow: hidden; min-height: 760px; padding: 60px 0 0; background: var(--lx-category-hero-gradient); color: #fff; } .lx-category-template__hero::before { position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(50% - 1px), rgba(255,255,255,.055) 50%, transparent calc(50% + 1px)); content: ""; pointer-events: none; } .lx-category-template__hero--background { background-image: var(--lx-category-hero-gradient); } .lx-category-template__hero--background .lx-category-template__hero-copy { max-width: none; } .lx-category-template__hero--background .lx-category-template__visual { display: grid; } .lx-category-template__hero-grid { position: relative; z-index: 1; min-height: 700px; align-items: center; } .lx-category-template__breadcrumb { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 52px; color: rgba(255,255,255,.78); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } .lx-category-template__breadcrumb a:hover { color: #fff; } .lx-category-template__hero .lx-text-eyebrow { color: #fff; text-shadow: 0 2px 4px rgba(122,87,0,.4); } .lx-category-template__hero-copy h1 { max-width: 780px; margin: 18px 0 26px; color: #fff; font-size: clamp(38px, 4.6vw, 64px); line-height: .96; letter-spacing: -.06em; text-shadow: 0 2px 8px rgba(122,87,0,.3), 0 1px 2px rgba(122,87,0,.2); } .lx-category-template__hero-copy > p { max-width: 700px; margin: 0; color: #fff; font-size: 17px; line-height: 1.75; text-shadow: 0 1px 4px rgba(122,87,0,.25); } .lx-category-template__hero .lx-btn-dark { border-color: #fff; background: #fff; color: var(--lx-color-bg-dark, #18181b); } .lx-category-template__hero .lx-btn-dark:hover, .lx-category-template__hero .lx-btn-dark:focus { background: var(--lx-color-bg-card, #fff); color: var(--lx-color-bg-dark, #18181b); } .lx-category-template__badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; } .lx-category-template__badges span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 13px; border: 0; background: var(--lx-color-primary-dark, #c48c00); color: #fff; font-family: var(--lx-font-heading, Manrope, sans-serif); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .lx-category-template__badges svg { width: 14px; height: 14px; color: #fff; } .lx-category-template__visual { position: relative; display: grid; min-height: 540px; place-items: center; align-self: center; margin: 0; background: transparent; } .lx-category-template__visual::before, .lx-category-template__visual::after { display: none; } .lx-category-template__visual img { position: relative; z-index: 1; width: 96%; height: 500px; object-fit: contain; filter: drop-shadow(0 34px 34px rgba(0,0,0,.24)); } .lx-category-template__applications { background: var(--lx-color-bg-base, #f1f1f1); } .lx-category-template__applications-grid { display: grid; grid-template-columns: repeat(var(--lx-application-count, 5), minmax(0, 1fr)); } .lx-category-template__application { display: grid; min-height: 132px; place-items: center; align-content: center; gap: 13px; padding: 22px 16px; border-right: 1px solid rgba(24,24,27,.18); color: var(--lx-color-bg-dark, #18181b); text-align: center; } .lx-category-template__application:last-child { border-right: 0; } .lx-category-template__application svg { width: 25px; height: 25px; stroke-width: 1.7; } .lx-category-template__application span { font-family: var(--lx-font-heading, Manrope, sans-serif); font-size: 12px; font-weight: 800; line-height: 1.3; letter-spacing: .05em; text-transform: uppercase; } .lx-category-template #products .lx-category-template__product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: var(--lx-gap-32); } .lx-category-template #products .lx-category-template__product-card { grid-column: auto; min-width: 0; min-height: 100%; border: 1px solid var(--lx-color-border, #e8e8ea); border-radius: 0; background: #fff; box-shadow: none; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; } .lx-category-template #products .lx-category-template__product-card:hover { transform: translateY(-4px); border-color: var(--lx-color-primary, #fcb604); box-shadow: 0 12px 26px rgba(122, 87, 0, .1); } .lx-category-template #products .lx-category-template__product-image { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / .86; overflow: hidden; padding: 24px; background: var(--lx-color-bg-card, #fff); } .lx-category-template #products .lx-category-template__product-image img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .4s ease; } .lx-category-template #products .lx-category-template__product-card:hover .lx-category-template__product-image img { transform: scale(1.04); } .lx-category-template #products .lx-category-template__product-body { display: flex; min-height: 0; flex-direction: column; padding: 20px 20px 18px; background: #fff; } .lx-category-template #products .lx-category-template__product-body h3 { margin: 0; color: var(--lx-color-text-heading, #18181b); font-family: var(--lx-font-heading, Manrope, sans-serif); font-size: clamp(16px, 1.3vw, 18px); font-weight: 800; line-height: 1.15; letter-spacing: -.03em; } .lx-category-template #products .products-card__link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; color: var(--lx-color-primary, #fcb604); font-family: var(--lx-font-heading, Manrope, sans-serif); font-size: var(--lx-fs-xs, 12px); font-weight: 900; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; } .lx-category-template #products .products-card__link span { transition: color .25s ease; } .lx-category-template #products .products-card__link svg { width: 15px; height: 15px; transition: transform .25s ease; } .lx-category-template #products .products-card__link:hover, .lx-category-template #products .products-card__link:focus-visible, .lx-category-template #products .lx-category-template__product-card:hover .products-card__link span { color: var(--lx-color-primary-dark, #c48c00); } .lx-category-template #products .lx-category-template__product-card:hover .products-card__link svg { transform: translate(3px, -3px); } .lx-category-template__empty { padding: 42px; border: 1px solid var(--lx-color-border, #e8e8ea); background: #fff; color: var(--lx-color-text-muted, #6c6d73); text-align: center; } .lx-category-template__spec-scroll { overflow-x: auto; border: 1px solid var(--lx-color-border, #e8e8ea); background: #fff; } .lx-category-template__spec-block + .lx-category-template__spec-block { margin-top: 34px; } .lx-category-template__spec-title { margin: 0 0 18px; } .lx-category-template__spec-note { max-width: 920px; margin: 24px 0 0; color: var(--lx-color-text-muted, #6c6d73); font-size: 14px; line-height: 1.75; } .lx-category-template__section-copy, .lx-category-template__capability-copy-text, .lx-category-template__faq-answer { color: var(--lx-color-text-muted, #6c6d73); font-size: 15px; line-height: 1.8; } .lx-category-template__section-copy p, .lx-category-template__capability-copy-text p, .lx-category-template__faq-answer p { margin: 0 0 1em; } .lx-category-template__section-copy p:last-child, .lx-category-template__capability-copy-text p:last-child, .lx-category-template__faq-answer p:last-child { margin-bottom: 0; } .lx-category-template__spec-scroll:focus-visible { outline: 3px solid var(--lx-color-primary, #fcb604); outline-offset: 4px; } .lx-category-template__spec-head { grid-template-columns: 7fr 3fr; } .lx-category-template__spec-head h2 { text-wrap: wrap; } .lx-category-template__spec-table { width: 100%; min-width: 880px; border-collapse: collapse; color: var(--lx-color-text-body, #1a1a1a); font-size: 13px; } .lx-category-template__spec-table th, .lx-category-template__spec-table td { padding: 18px 16px; border-bottom: 1px solid var(--lx-color-border, #e8e8ea); text-align: left; white-space: nowrap; } .lx-category-template__spec-table thead th { background: var(--lx-color-primary, #fcb604); color: var(--lx-color-bg-dark, #18181b); font-family: var(--lx-font-heading, Manrope, sans-serif); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; } .lx-category-template__spec-table tbody tr:nth-child(odd) { background: var(--lx-color-bg-card, #fff); } .lx-category-template__spec-table tbody tr:nth-child(even) { background: var(--lx-color-bg-soft, #f3f5f8); } .lx-category-template__spec-table tbody th { background: transparent; font-weight: 800; } .lx-category-template__spec-table tbody tr:last-child th, .lx-category-template__spec-table tbody tr:last-child td { border-bottom: 0; } .lx-category-template__capability { padding: 112px 0; background: var(--lx-color-bg-dark, #18181b); } .lx-category-template__capability-grid { align-items: center; } .lx-category-template__capability-copy h2 { max-width: 760px; margin: 0 0 26px; } .lx-category-template__capability-copy-text { max-width: 720px; margin: 0; color: rgba(255,255,255,.7); font-size: 16px; line-height: 1.8; } .lx-category-template__capability-copy ul { display: grid; gap: 13px; margin: 30px 0 0; padding: 0; list-style: none; } .lx-category-template__capability-copy li { display: flex; gap: 12px; align-items: flex-start; color: rgba(255,255,255,.88); font-size: 14px; line-height: 1.55; } .lx-category-template__capability-copy li svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; color: var(--lx-color-primary, #fcb604); } .lx-category-template__capability-visual { position: relative; min-height: 540px; margin: 0; overflow: hidden; background: #26262a; } .lx-category-template__capability-visual::after { display: none; } .lx-category-template__capability-visual img { width: 100%; height: 540px; object-fit: cover; } .lx-category-template__feature-grid { margin-top: 48px; } .lx-category-template .lx-section__head--stack.lx-section__head--center { text-align: center; } .lx-category-template__feature-card { min-height: 310px; padding: 34px 28px; border: 0; background: var(--lx-color-border, #e8e8ea); color: var(--lx-color-bg-dark, #18181b); } .lx-category-template__feature-card:nth-child(odd) { background: var(--lx-color-primary, #fcb604); } .lx-category-template__feature-card:nth-child(3) { background: var(--lx-color-bg-base, #f1f1f1); } .lx-category-template__feature-card:nth-child(4) { background: var(--lx-color-bg-soft, #f3f5f8); } .lx-category-template__feature-card:first-child h3, .lx-category-template__feature-card:first-child p, .lx-category-template__feature-card:first-child > svg { color: var(--lx-color-bg-card, #fff); } .lx-category-template__feature-card > svg { width: 28px; height: 28px; margin-bottom: 68px; color: var(--lx-color-primary-dark, #c48c00); stroke-width: 1.6; } .lx-category-template__feature-card:not(:first-child) > svg { color: var(--lx-color-primary, #fcb604); } .lx-category-template__feature-card h3 { margin: 0 0 14px; } .lx-category-template__feature-card p { margin: 0; color: var(--lx-color-text-muted, #6c6d73); font-size: 14px; line-height: 1.7; } .lx-category-template__feature-card:not(:first-child):nth-child(odd) p { color: var(--lx-color-bg-dark, #18181b); } .lx-category-template__faq-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; } .lx-category-template__faq-intro { text-align: center; } .lx-category-template__faq-intro h2 { margin: 0; } .lx-category-template__faq-list { width: 100%; max-width: 960px; margin: 0 auto; border-top: 1px solid var(--lx-color-bg-dark, #18181b); text-align: left; } .lx-category-template__faq-item { border-bottom: 1px solid var(--lx-color-border, #e8e8ea); } .lx-category-template__faq-trigger { width: 100%; display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 26px 0; border: 0; background: transparent; cursor: pointer; text-align: left; font-family: var(--lx-font-heading, Manrope, sans-serif); font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--lx-color-text-heading, #18181b); transition: color .25s ease; } .lx-category-template__faq-trigger svg { flex: 0 0 auto; width: 20px; height: 20px; transition: transform .35s ease, color .25s ease; } .lx-category-template__faq-trigger:hover, .lx-category-template__faq-trigger:focus, .lx-category-template__faq-trigger:focus-visible { background: transparent; box-shadow: none; color: var(--lx-color-primary, #fcb604); } .lx-category-template__faq-item.is-open .lx-category-template__faq-trigger svg { transform: rotate(45deg); } .lx-category-template__faq-answer { height: 0; opacity: 0; overflow: hidden; transition: height .45s cubic-bezier(.22, 1, .36, 1), opacity .25s ease; } .lx-category-template__faq-answer-inner { padding: 0 54px 28px 0; } .lx-category-template__faq-item.is-open .lx-category-template__faq-answer { opacity: 1; } .single-product-page .lx-related-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .single-product-page .lx-related-grid .products-card { min-width: 0; min-height: 100%; border: 1px solid var(--lx-color-border, #e8e8ea); border-radius: 0; background: #fff; box-shadow: none; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; } .single-product-page .lx-related-grid .products-card:hover { transform: translateY(-4px); border-color: var(--lx-color-primary, #fcb604); box-shadow: 0 12px 26px rgba(122, 87, 0, .1); } .single-product-page .lx-related-grid .products-card__visual { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / .86; overflow: hidden; padding: 24px; background: var(--lx-color-bg-card, #fff); } .single-product-page .lx-related-grid .products-card__visual img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .4s ease; } .single-product-page .lx-related-grid .products-card:hover .products-card__visual img { transform: scale(1.04); } .single-product-page .lx-related-grid .products-card__body { display: flex; min-height: 152px; flex-direction: column; padding: 20px 20px 18px; background: #fff; } .single-product-page .lx-related-grid .products-card__body h3 { margin: 0; color: var(--lx-color-text-heading, #18181b); font-family: var(--lx-font-heading, Manrope, sans-serif); font-size: clamp(16px, 1.3vw, 18px); font-weight: 800; line-height: 1.15; letter-spacing: -.03em; } .single-product-page .lx-related-grid .products-card__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 40px !important; color: var(--lx-color-primary, #fcb604); font-family: var(--lx-font-heading, Manrope, sans-serif); font-size: var(--lx-fs-xs, 12px); font-weight: 900; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; } .single-product-page .lx-related-grid .products-card__link:hover, .single-product-page .lx-related-grid .products-card__link:focus-visible { color: var(--lx-color-primary-dark, #c48c00); } .single-product-page .lx-related-grid .products-card__link svg { width: 15px; height: 15px; transition: transform .25s ease; } .single-product-page .lx-related-grid .products-card:hover .products-card__link svg { transform: translate(3px, -3px); } @media (max-width: 1180px) { .single-product-page .lx-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .single-product-page .lx-related-grid { grid-template-columns: minmax(0, 1fr); } } .lx-category-template-error { min-height: 60vh; padding: 180px 0 80px; } @media (max-width: 1180px) { .lx-category-template #products .lx-category-template__product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lx-category-template__hero-grid, .lx-category-template__capability-grid { gap: var(--lx-gap-32); } .lx-category-template__hero-grid > [class*="lx-col-"] { grid-column: 1 / -1; } .lx-category-template__feature-grid > [class*="lx-col-"] { grid-column: span 6; } } @media (max-width: 767px) { .lx-category-template .container { width: calc(100% - 40px); } .lx-category-template__hero { min-height: 0; padding: 60px 0 0; } .lx-category-template__hero-grid { gap: 20px; min-height: 0; } .lx-category-template__visual { order: -1; min-height: 0; } .lx-category-template__visual img { width: 84%; height: 320px; } .lx-category-template__hero-copy { order: 2; } .lx-category-template__capability-grid, .lx-category-template__faq-layout { gap: 20px; } .lx-category-template__hero-grid, .lx-category-template__capability-grid, .lx-category-template__feature-grid, .lx-category-template__faq-layout { grid-template-columns: minmax(0, 1fr); column-gap: 0; } .lx-category-template__hero-grid > [class*="lx-col-"], .lx-category-template__capability-grid > [class*="lx-col-"], .lx-category-template__feature-grid > [class*="lx-col-"], .lx-category-template__faq-layout > [class*="lx-col-"] { grid-column: 1 / -1; } .lx-category-template__hero-grid > *, .lx-category-template__capability-grid > *, .lx-category-template__feature-grid > *, .lx-category-template__faq-layout > * { min-width: 0; max-width: 100%; } .lx-category-template .lx-section__head { gap: 20px; margin-bottom: 20px; } .lx-category-template .lx-section__head--stack h2 { margin-bottom: 20px; } .lx-category-template #products .lx-grid--cards { grid-template-columns: minmax(0, 1fr) !important; } .lx-category-template #products .lx-grid--cards > .card { grid-column: 1 / -1 !important; aspect-ratio: auto; } .lx-category-template__breadcrumb { margin-bottom: 20px; } .lx-category-template__hero-copy h1 { margin: 0 0 20px; font-size: clamp(30px, 8vw, 38px); } .lx-category-template__badges { margin-top: 20px; } .lx-category-template__visual { min-height: 380px; } .lx-category-template__visual img { width: 84%; height: 320px; } .lx-category-template__applications-grid { grid-template-columns: 1fr; } .lx-category-template__application { display: flex; align-items: center; justify-content: flex-start; min-height: 0; gap: 12px; padding: 16px 0; border-right: 0; border-bottom: 1px solid rgba(24,24,27,.18); text-align: left; } .lx-category-template__application svg { width: 20px; height: 20px; flex: 0 0 auto; } .lx-category-template__application span { font-size: 11px; line-height: 1.4; letter-spacing: .04em; } .lx-category-template__application:last-child { border-bottom: 0; } .lx-category-template #products .lx-category-template__product-grid { gap: 20px; } .lx-category-template__spec-block + .lx-category-template__spec-block { margin-top: 20px; } .lx-category-template__spec-title { margin-bottom: 20px; } .lx-category-template__spec-note { margin-top: 20px; } .lx-category-template__capability { padding: 64px 0; } .lx-category-template__capability-copy h2 { margin-bottom: 20px; } .lx-category-template__capability-copy ul { gap: 20px; margin-top: 20px; } .lx-category-template__capability-visual, .lx-category-template__capability-visual img { min-height: 340px; height: 340px; } .lx-category-template__feature-grid { margin-top: 20px; } .lx-category-template__feature-card { min-height: 0; } .lx-category-template__feature-card > svg { margin-bottom: 20px; } .lx-category-template__feature-card h3 { margin-bottom: 20px; } .lx-category-template__faq-layout { gap: 20px; } .lx-category-template__faq-intro { position: static; } .lx-category-template__faq-trigger { gap: 20px; padding: 20px 0; } .lx-category-template__faq-answer p { margin-bottom: 20px; } .lx-category-template__faq-answer-inner { padding-right: 0; padding-bottom: 20px; } .lx-category-template #products .lx-category-template__product-grid { grid-template-columns: minmax(0, 1fr) !important; } .lx-category-template #products .lx-category-template__product-card { grid-column: 1 / -1 !important; } } @media (prefers-reduced-motion: reduce) { .lx-category-template *, .lx-category-template *::before, .lx-category-template *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } } /* =================================== BOMFLEX One-Stop Solution page =================================== */ .lx-bomflex-page { overflow: hidden; color: var(--lx-color-text-body); font-family: var(--lx-font-body); } .lx-bomflex-page p, .lx-bomflex-page li { font-family: var(--lx-font-body); } .lx-bomflex-page .section-number { display: inline-block; margin-bottom: var(--lx-gap-16); color: var(--lx-color-primary-dark); font-family: var(--lx-font-heading); font-size: var(--lx-fs-xs); font-weight: 900; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; } .lx-bomflex-page .section--dark .section-number, .lx-bomflex-page .section-bomflex-hero .section-number { color: var(--lx-color-primary); } .section-bomflex-hero { position: relative; height: auto; min-height: 0; padding: 0 !important; overflow: hidden; isolation: isolate; background: var(--lx-gradient-primary); color: #fff; } .section-bomflex-hero::after { position: absolute; inset: auto 0 0; height: 1px; background: rgba(255, 255, 255, .16); content: ''; } .section-bomflex-hero > .container { width: 100% !important; max-width: none; padding-right: 0; padding-left: 0; } .lx-bomflex-hero__grid { display: grid; height: auto; min-height: 0; grid-template-columns: 28fr 72fr; gap: var(--lx-gap-40); align-items: center; padding-right: 0; padding-left: var(--lx-container-pad); } .lx-bomflex-hero__copy { --hero-header-height: 96px; --hero-safe-padding: max(40px, 4vh); display: flex; max-width: 100%; flex-direction: column; justify-content: center; position: relative; z-index: 1; padding: calc(var(--hero-header-height) + var(--hero-safe-padding)) 0 40px; } .lx-bomflex-hero__visual { position: relative; align-self: stretch; min-width: 0; min-height: 0; overflow: hidden; } .lx-bomflex-hero__visual img { position: absolute; inset: 0; display: block; max-width: none; width: 100%; height: 100%; object-fit: cover; } .lx-bomflex-breadcrumb { display: flex; gap: var(--lx-gap-10); margin-bottom: var(--lx-gap-40); color: #fff; font-size: var(--lx-fs-xs); font-weight: 600; } .lx-bomflex-breadcrumb a { color: inherit; text-decoration: none; } .lx-bomflex-breadcrumb a:hover, .lx-bomflex-breadcrumb a:focus-visible { color: var(--lx-color-primary); } .lx-bomflex-hero h1 { max-width: 800px; margin-bottom: var(--lx-gap-24); color: #fff; } .lx-bomflex-hero__lead { max-width: 680px; margin: 0; color: #fff; font-size: var(--lx-fs-lead); line-height: 1.6; } .lx-bomflex-hero__actions { margin-top: var(--lx-gap-32); } .lx-bomflex-hero__actions svg, .lx-bomflex-scope-card--cta .lx-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; } .section-bomflex-hero .lx-btn-primary { background: #18181b; color: #fff; } .section-bomflex-hero .lx-btn-primary:hover, .section-bomflex-hero .lx-btn-primary:focus-visible { background: #2a2a2e; } .section-bomflex-hero .lx-btn-ghost { border-color: #fff; color: #fff; } .lx-bomflex-hero__badges { display: grid; max-width: 760px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lx-gap-16); margin-top: var(--lx-gap-48); } .lx-bomflex-hero__badge { display: flex; min-height: 92px; flex-direction: column; justify-content: flex-start; gap: var(--lx-gap-8); padding: 0; border-left: 0; background: transparent; } .lx-bomflex-hero__badge strong { color: #fff; font-family: var(--lx-font-heading); font-size: clamp(24px, 3vw, 36px); font-weight: 800; line-height: 1; } .lx-bomflex-hero__badge span { color: #fff; font-size: var(--lx-fs-xs); line-height: 1.4; } .section-bomflex-pain-points .lx-section__head, .section-bomflex-scope .lx-section__head, .section-bomflex-advantages .lx-section__head, .section-bomflex-process .lx-section__head { max-width: 760px; margin-right: auto; margin-left: auto; } .section-bomflex-pain-points .lx-section__head.lx-section__head--stack.lx-section__head--center { max-width: 960px; text-align: center; } .section-bomflex-pain-points .lx-section__head p { width: 100%; max-width: 900px; margin-right: auto; margin-left: auto; } .lx-bomflex-pain-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lx-gap-16); margin-top: var(--lx-gap-48); } .lx-bomflex-pain-grid > *, .lx-bomflex-scope-grid > *, .lx-bomflex-advantages-grid > * { grid-column: auto; } .lx-bomflex-pain-card, .lx-bomflex-advantage-card, .lx-bomflex-scope-card { min-width: 0; border-radius: 0; box-shadow: none; } .lx-bomflex-pain-card { display: flex; min-height: 0; flex-direction: column; padding: var(--lx-gap-24); border: 0; background: rgba(252, 182, 4, .12); } .lx-bomflex-icon { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid currentColor; color: var(--lx-color-primary-dark); } .lx-bomflex-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; } .lx-bomflex-pain-card .lx-bomflex-icon { width: 28px; height: 28px; margin-bottom: var(--lx-gap-24); border: 0; color: var(--lx-color-primary, #fcb604); } .lx-bomflex-pain-card .lx-bomflex-icon svg { width: 28px; height: 28px; } .lx-bomflex-pain-card .card__body { padding: 0; } .lx-bomflex-pain-card h3 { margin-bottom: 0; } .lx-bomflex-advantage-card h3 { margin-bottom: var(--lx-gap-16); } .lx-bomflex-pain-card p, .lx-bomflex-advantage-card p, .lx-bomflex-scope-card p { margin: 0; color: var(--lx-color-text-muted); font-size: var(--lx-fs-sm); line-height: 1.6; } .section-bomflex-intro { background: var(--lx-color-bg-soft, #f3f5f8); } .lx-bomflex-intro__grid { align-items: center; row-gap: var(--lx-gap-48); } .lx-bomflex-intro__copy { min-width: 0; } .lx-bomflex-intro__copy h2 { margin-bottom: var(--lx-gap-24); } .lx-bomflex-intro__copy > p { max-width: 720px; margin: 0 0 var(--lx-gap-16); color: var(--lx-color-text-muted, #6c6d73); font-size: var(--lx-fs-body); line-height: 1.65; } .lx-bomflex-intro__copy > p strong { color: var(--lx-color-text-heading, #18181b); } .lx-bomflex-intro__visual { min-height: 520px; margin: 0; overflow: hidden; background: #27272a; } .lx-bomflex-intro__visual img { width: 100%; height: 520px; object-fit: cover; } .lx-bomflex-service-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lx-gap-12); margin-top: var(--lx-gap-32); } .lx-bomflex-service-card { min-width: 0; padding: var(--lx-gap-16); border: 1px solid var(--lx-color-border, #e8e8ea); background: var(--lx-color-bg-card, #fff); } .lx-bomflex-service-card .lx-bomflex-icon { width: 34px; height: 34px; margin-bottom: var(--lx-gap-16); color: var(--lx-color-primary); } .lx-bomflex-service-card .lx-bomflex-icon svg { width: 17px; height: 17px; } .lx-bomflex-service-card h3 { margin: 0 0 var(--lx-gap-8); color: var(--lx-color-text-heading, #18181b); font-family: var(--lx-font-heading); font-size: var(--lx-fs-sm); font-weight: 800; line-height: 1.25; } .lx-bomflex-service-card p { margin: 0; color: var(--lx-color-text-muted, #6c6d73); font-size: var(--lx-fs-xs); line-height: 1.5; } .lx-bomflex-scope-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--lx-gap-16); margin-top: var(--lx-gap-48); } .lx-bomflex-scope-card { display: flex; min-height: 100%; flex-direction: column; border: 1px solid var(--lx-color-border); background: var(--lx-color-bg-card); } .lx-bomflex-scope-card .card__visual { display: flex; height: 168px; align-items: center; justify-content: center; padding: var(--lx-gap-16); background: var(--lx-color-bg-card); } .lx-bomflex-scope-card .card__visual img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } .lx-bomflex-scope-card .card__body { display: flex; min-height: 168px; flex: 1; flex-direction: column; padding: var(--lx-gap-16) var(--lx-gap-16) var(--lx-gap-16); } .lx-bomflex-scope-card h3 { margin: 0; } /* BOMFLEX scope section: center the heading copy and remove any internal accent divider. */ .section-bomflex-scope .lx-section__head { text-align: center; } .section-bomflex-scope .lx-section__head p { margin-inline: auto; } .section-bomflex-scope .lx-bomflex-scope-card::before, .section-bomflex-scope .lx-bomflex-scope-card::after, .section-bomflex-scope .lx-bomflex-scope-card .card__visual::before, .section-bomflex-scope .lx-bomflex-scope-card .card__visual::after, .section-bomflex-scope .lx-bomflex-scope-card .card__body::before, .section-bomflex-scope .lx-bomflex-scope-card .card__body::after { display: none; content: none; } .section-bomflex-scope .lx-bomflex-scope-card .card__visual, .section-bomflex-scope .lx-bomflex-scope-card .card__body { border-top: 0; } .section-bomflex-scope .lx-bomflex-scope-card { border: 0 !important; box-shadow: 0 6px 18px rgba(24, 24, 27, .07) !important; } .section-bomflex-scope .lx-bomflex-scope-card--cta { border: 0 !important; box-shadow: 0 6px 18px rgba(24, 24, 27, .09) !important; } .section-bomflex-scope .lx-bomflex-scope-card .card__body { border-top: 0 !important; } .section-bomflex-scope .lx-bomflex-scope-card--cta h3 { font-size: clamp(24px, 3vw, 32px); } .lx-bomflex-scope-card--cta { border-color: var(--lx-color-primary); background: var(--lx-color-primary); color: var(--lx-color-bg-dark); } .lx-bomflex-scope-card--cta .card__body { min-height: 168px; padding-top: var(--lx-gap-16); } .lx-bomflex-scope-card--cta h3 { color: #fff; font-size: clamp(28px, 3.5vw, 40px); line-height: 1.2; text-shadow: 0 2px 6px rgba(24, 24, 27, .24); } .lx-bomflex-scope-card--cta p { color: #fff; text-shadow: 0 1px 4px rgba(24, 24, 27, .2); } .lx-bomflex-scope-card--cta .lx-btn { align-self: flex-start; margin-top: auto; background: #fff; border-color: #fff; color: var(--lx-color-bg-dark); } .lx-bomflex-advantages-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--lx-gap-16); margin-top: var(--lx-gap-48); } .lx-bomflex-advantage-card { min-height: 300px; padding: var(--lx-gap-24); border: 1px solid var(--lx-color-border); background: var(--lx-color-bg-card); } .lx-bomflex-advantage-card .lx-bomflex-icon { margin-bottom: var(--lx-gap-32); } .lx-bomflex-advantage-card strong { color: var(--lx-color-text-heading); } .lx-bomflex-standards__grid { align-items: start; row-gap: var(--lx-gap-48); } .section-bomflex-standards { background-color: var(--lx-color-bg-soft); background-image: linear-gradient(90deg, rgba(247, 244, 245, .94) 0%, rgba(247, 244, 245, .84) 52%, rgba(247, 244, 245, .76) 100%), url("./images/bomflex-standards-bg.png"); background-position: center; background-repeat: no-repeat; background-size: cover; } /* Standards scene: dark image mask with a readable light content surface. */ .section-bomflex-standards { background-image: linear-gradient(90deg, rgba(24, 24, 27, .82) 0%, rgba(24, 24, 27, .72) 52%, rgba(24, 24, 27, .62) 100%), url("./images/bomflex-standards-bg.png"); } .section-bomflex-standards .lx-bomflex-standards__copy { padding: var(--lx-gap-32); background: rgba(247, 244, 245, .94); } .section-bomflex-standards .lx-bomflex-standards__copy h2, .section-bomflex-standards .lx-bomflex-standards__copy > p, .section-bomflex-standards .lx-bomflex-standards__list li strong, .section-bomflex-standards .lx-bomflex-standards__list li span { color: #18181b; } .section-bomflex-standards .lx-bomflex-standards__copy > p { color: #3f3f46; } .section-bomflex-standards .lx-bomflex-standards__list li { border-bottom-color: #c9c9c9; } .section-bomflex-standards .lx-bomflex-table thead th { background: var(--lx-color-primary); color: var(--lx-color-bg-dark); } /* Let the left copy sit directly on the darkened scene. */ .section-bomflex-standards .lx-bomflex-standards__copy { background: transparent; } .section-bomflex-standards .lx-bomflex-standards__copy h2, .section-bomflex-standards .lx-bomflex-standards__copy > p, .section-bomflex-standards .lx-bomflex-standards__list li strong, .section-bomflex-standards .lx-bomflex-standards__list li span { color: #fff; } .lx-bomflex-standards__copy h2 { margin-bottom: var(--lx-gap-24); } .lx-bomflex-standards__copy > p { margin: 0 0 var(--lx-gap-16); color: var(--lx-color-text-muted); font-size: var(--lx-fs-body); line-height: 1.65; } .lx-bomflex-standards__list { display: grid; gap: var(--lx-gap-12); margin: var(--lx-gap-24) 0 0; padding: 0; list-style: none; } .lx-bomflex-standards__list li { display: grid; grid-template-columns: minmax(130px, .6fr) 1fr; gap: var(--lx-gap-12); padding-bottom: var(--lx-gap-12); border-bottom: 1px solid var(--lx-color-border); font-size: var(--lx-fs-sm); } .lx-bomflex-standards__list strong { color: var(--lx-color-text-heading); font-family: var(--lx-font-heading); font-weight: 800; } .lx-bomflex-standards__list span { color: var(--lx-color-text-muted); } .lx-bomflex-table-wrap { overflow-x: auto; border: 1px solid var(--lx-color-border); background: var(--lx-color-bg-card); } .lx-bomflex-table { width: 100%; min-width: 660px; border-collapse: collapse; font-size: var(--lx-fs-sm); } .lx-bomflex-table th, .lx-bomflex-table td { padding: var(--lx-gap-12) var(--lx-gap-14); border-bottom: 1px solid var(--lx-color-border-light); text-align: left; vertical-align: top; } .lx-bomflex-table thead th { background: var(--lx-color-bg-dark); color: #fff; font-family: var(--lx-font-heading); font-size: var(--lx-fs-xs); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .lx-bomflex-table tbody th { color: var(--lx-color-text-heading); font-family: var(--lx-font-heading); font-weight: 800; } .lx-bomflex-table tbody td { color: var(--lx-color-text-muted); } .lx-bomflex-table tbody td strong { color: var(--lx-color-primary-dark); white-space: nowrap; } .section-bomflex-process { background: var(--lx-color-bg-card); color: var(--lx-color-text-heading); } .section-bomflex-process > .container { width: 100% !important; max-width: var(--lx-container-max) !important; padding-top: var(--lx-gap-48); padding-bottom: var(--lx-gap-48); background: var(--lx-color-bg-card); } .section-bomflex-process .lx-section__head { align-items: flex-start; text-align: left; } .section-bomflex-process .lx-section__head h2 { color: var(--lx-color-text-heading); text-align: left; } .lx-bomflex-process__grid { display: flex; align-items: stretch; gap: var(--lx-gap-20, 20px); margin: var(--lx-gap-48) 0 0; padding: 0; list-style: none; } .lx-bomflex-process__step { position: relative; display: grid; flex: 1 1 0; grid-template-columns: minmax(72px, .5fr) minmax(0, 1.5fr); grid-template-areas: "number title" "number copy"; align-content: start; column-gap: var(--lx-gap-8); min-width: 0; min-height: 260px; padding: var(--lx-gap-32) var(--lx-gap-12) var(--lx-gap-24) 0; overflow: hidden; border-left: 0; border-right: 0; border-top: 3px solid var(--lx-color-border); border-bottom: 0; background: var(--lx-color-bg-card); cursor: default; transition: flex .65s cubic-bezier(.22, 1, .36, 1), background-color .5s ease, border-color .5s ease, padding .65s cubic-bezier(.22, 1, .36, 1); } .lx-bomflex-process__step:hover, .lx-bomflex-process__step:focus-visible, .lx-bomflex-process__grid:not(:has(.lx-bomflex-process__step:hover, .lx-bomflex-process__step:focus-visible, .lx-bomflex-process__step.is-auto-active)) .lx-bomflex-process__step:first-child { flex: 2.8 1 0; border-top-color: var(--lx-color-primary); grid-template-columns: minmax(72px, .5fr) minmax(0, 1.5fr); grid-template-areas: "number title" "number copy"; column-gap: var(--lx-gap-8); padding-right: var(--lx-gap-24); padding-left: 0; background: var(--lx-color-bg-card); outline: none; } .lx-bomflex-process__step:focus-visible { outline: 2px solid var(--lx-color-primary); outline-offset: 3px; } .lx-bomflex-process__number { grid-area: number; display: block; margin: 0 0 var(--lx-gap-24); color: #c8c8ca; font-family: var(--lx-font-heading); font-size: clamp(88px, 12vw, 168px); font-weight: 700; line-height: .82; letter-spacing: -0.04em; transition: color .5s ease; } .section-bomflex-process .lx-section__head h2 strong { color: var(--lx-color-primary); } .lx-bomflex-process__step h3 { grid-area: title; min-height: 0; margin: 0; color: var(--lx-color-text-muted); font-family: var(--lx-font-heading); font-size: var(--lx-fs-sm); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; max-height: 0; overflow: hidden; opacity: 0; transform: translateY(8px); transition: color .5s ease, font-size .5s ease, max-height .5s ease, opacity .4s ease, transform .5s ease; } .lx-bomflex-process__step p { grid-area: copy; max-width: 560px; max-height: 0; margin: 0; overflow: hidden; color: var(--lx-color-text-muted); font-family: var(--lx-font-body); font-size: var(--lx-fs-body); font-weight: 400; line-height: 1.6; opacity: 0; transform: translateY(8px); transition: max-height .55s ease, margin .55s ease, opacity .45s ease, transform .55s ease; } .lx-bomflex-process__step:hover .lx-bomflex-process__number, .lx-bomflex-process__step:focus-visible .lx-bomflex-process__number, .lx-bomflex-process__grid:not(:has(.lx-bomflex-process__step:hover, .lx-bomflex-process__step:focus-visible, .lx-bomflex-process__step.is-auto-active)) .lx-bomflex-process__step:first-child .lx-bomflex-process__number { color: var(--lx-color-primary); } .lx-bomflex-process__step:hover h3, .lx-bomflex-process__step:focus-visible h3, .lx-bomflex-process__grid:not(:has(.lx-bomflex-process__step:hover, .lx-bomflex-process__step:focus-visible, .lx-bomflex-process__step.is-auto-active)) .lx-bomflex-process__step:first-child h3 { color: var(--lx-color-text-heading); font-size: clamp(18px, 1.5vw, 24px); max-height: 100px; opacity: 1; transform: translateY(0); } .lx-bomflex-process__step:hover p, .lx-bomflex-process__step:focus-visible p, .lx-bomflex-process__grid:not(:has(.lx-bomflex-process__step:hover, .lx-bomflex-process__step:focus-visible, .lx-bomflex-process__step.is-auto-active)) .lx-bomflex-process__step:first-child p { max-height: 180px; margin-top: var(--lx-gap-12); opacity: 1; transform: translateY(0); } .lx-bomflex-faq__grid { align-items: start; row-gap: var(--lx-gap-48); } .lx-bomflex-faq__intro { position: sticky; top: 120px; } .lx-bomflex-faq__intro h2 { margin-bottom: var(--lx-gap-24); } .lx-bomflex-faq__intro p { max-width: 400px; margin: 0; color: var(--lx-color-text-muted); font-size: var(--lx-fs-body); line-height: 1.65; } .lx-bomflex-faq__list { border-top: 1px solid var(--lx-color-border); } .lx-bomflex-faq__list details { border-bottom: 1px solid var(--lx-color-border); } .lx-bomflex-faq__list summary { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: var(--lx-gap-16); color: var(--lx-color-text-heading); cursor: pointer; font-family: var(--lx-font-heading); font-size: var(--lx-fs-body); font-weight: 800; list-style: none; } .lx-bomflex-faq__list summary::-webkit-details-marker { display: none; } .lx-bomflex-faq__list summary svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: var(--lx-color-primary-dark); stroke-linecap: round; stroke-width: 1.8; transition: transform .3s ease; } .lx-bomflex-faq__list details[open] summary svg { transform: rotate(45deg); } .lx-bomflex-faq__list details > div { padding: 0 48px var(--lx-gap-24) 0; } .lx-bomflex-faq__list details p { margin: 0; color: var(--lx-color-text-muted); font-size: var(--lx-fs-body); line-height: 1.65; } .section-bomflex-cta .section-number { color: rgba(24, 24, 27, .68); } .section-bomflex-cta .lx-cta-left h2, .section-bomflex-cta .lx-cta-left p, .section-bomflex-cta .lx-cta-left .lx-cta-check-text strong { font-family: var(--lx-font-heading); } .section-bomflex-cta .lx-cta-left p { font-family: var(--lx-font-body); } .section-bomflex-cta .lx-cta-right { min-width: 0; } /* CTA form labels stay readable on the dark right panel. */ .section--cta .lx-cta-right form.infility-form label, .section--cta .lx-cta-right form.infility-form .label, .section--cta .lx-cta-right form.infility-form label span { color: #fff !important; } @media (min-width: 1181px) and (max-width: 1440px) and (max-height: 1000px) { .section-bomflex-hero { min-height: 0; } .lx-bomflex-hero__grid { min-height: 0; grid-template-columns: minmax(360px, 32fr) minmax(0, 68fr); gap: 24px; } } @media (max-width: 1180px) { .section-bomflex-hero { height: auto; } .lx-bomflex-hero__grid { min-height: 0; grid-template-columns: minmax(0, 1fr); } .section-bomflex-hero { min-height: 0; } .lx-bomflex-hero__grid { padding: 0; grid-template-rows: auto auto; } .lx-bomflex-hero__copy { --hero-header-height: 72px; padding: calc(var(--hero-header-height) + var(--hero-safe-padding)) 20px 40px; } .lx-bomflex-hero__visual { min-height: 0; } .lx-bomflex-scope-grid, .lx-bomflex-advantages-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .section-bomflex-process > .container { width: 100% !important; max-width: var(--lx-container-max) !important; padding-right: var(--lx-gap-24); padding-left: var(--lx-gap-24); } .lx-bomflex-process__grid { overflow-x: auto; padding-bottom: var(--lx-gap-8); } .lx-bomflex-process__step { flex: 0 0 172px; } .lx-bomflex-process__step:hover, .lx-bomflex-process__step:focus-visible { flex-basis: 340px; } .lx-bomflex-process__step h3 { min-height: 0; } } @media (max-width: 767px) { .lx-bomflex-page .section-number { margin-bottom: var(--lx-gap-12); } .section-bomflex-process > .container { width: calc(100% - 40px) !important; max-width: calc(100% - 40px) !important; } .section-bomflex-hero, .lx-bomflex-hero__grid { min-height: 0; } .section-bomflex-hero { padding: 0 !important; } .lx-bomflex-hero__copy { padding: 0; } .lx-bomflex-hero__visual { min-height: 360px; } .lx-bomflex-breadcrumb { margin-bottom: var(--lx-gap-32); } .lx-bomflex-hero__lead { font-size: var(--lx-fs-body); } .lx-bomflex-hero__actions { align-items: stretch; flex-direction: column; } .lx-bomflex-hero__actions .lx-btn { justify-content: center; } .lx-bomflex-hero__badges { grid-template-columns: 1fr; gap: var(--lx-gap-12); margin-top: var(--lx-gap-32); } .lx-bomflex-hero__badge { min-height: 0; gap: var(--lx-gap-8); } .lx-bomflex-pain-grid, .lx-bomflex-service-cards, .lx-bomflex-scope-grid, .lx-bomflex-advantages-grid, .lx-bomflex-process__grid { display: grid; grid-template-columns: 1fr; gap: var(--lx-gap-20, 20px); overflow: visible; } .lx-bomflex-pain-card { min-height: 0; } .lx-bomflex-intro__visual { min-height: 320px; } .lx-bomflex-intro__visual img { height: 320px; } .lx-bomflex-scope-card .card__visual { height: 190px; } .lx-bomflex-standards__list li { grid-template-columns: 1fr; gap: var(--lx-gap-4); } .lx-bomflex-process__step { display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: "number title" "number copy"; column-gap: var(--lx-gap-16); min-height: 0; padding: var(--lx-gap-24) var(--lx-gap-24) var(--lx-gap-24) 0; border-top: 3px solid var(--lx-color-border); border-right: 0; border-bottom: 0; border-left: 0; } .lx-bomflex-process__step:hover, .lx-bomflex-process__step:focus-visible { flex: none; } .lx-bomflex-process__step p, .lx-bomflex-process__step:hover p, .lx-bomflex-process__step:focus-visible p { margin-top: var(--lx-gap-12); max-height: none; opacity: 1; transform: none; } .lx-bomflex-process__step h3, .lx-bomflex-process__step:hover h3, .lx-bomflex-process__step:focus-visible h3 { max-height: 100px; opacity: 1; transform: none; } .lx-bomflex-process__number { font-size: clamp(60px, 18vw, 80px); } .lx-bomflex-faq__intro { position: static; } .lx-bomflex-faq__list summary { min-height: 64px; font-size: var(--lx-fs-sm); } .lx-bomflex-faq__list details > div { padding-right: 0; } .section-bomflex-cta .lx-cta-left, .section-bomflex-cta .lx-cta-right { padding-right: 20px; padding-left: 20px; } } /* Reusable FAQ standard. Use the lx-faq__* classes on future pages. */ .lx-faq__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; } /* Horizontal process expansion: copy stays to the right of the number. */ .lx-bomflex-process__step { display: block; } .lx-bomflex-process__copy { position: absolute; top: var(--lx-gap-32); right: var(--lx-gap-24); left: clamp(84px, 8vw, 120px); width: auto; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: none; transition: none; } .lx-bomflex-process__step:hover .lx-bomflex-process__copy, .lx-bomflex-process__step:focus-visible .lx-bomflex-process__copy, .lx-bomflex-process__grid:not(:has(.lx-bomflex-process__step:hover, .lx-bomflex-process__step:focus-visible, .lx-bomflex-process__step.is-auto-active)) .lx-bomflex-process__step:first-child .lx-bomflex-process__copy { opacity: 1; visibility: visible; transform: none; transition: none; } .lx-bomflex-process__step::before { position: absolute; top: 0; left: 0; z-index: 1; width: 0; height: 3px; background: var(--lx-color-primary); content: ''; } .lx-bomflex-process__step.is-auto-active::before { width: 100%; animation: lx-bomflex-process-progress 3s linear forwards; } @keyframes lx-bomflex-process-progress { from { width: 0; } to { width: 100%; } } .lx-bomflex-process__step.is-auto-active { flex: 2.8 1 0; border-top-color: var(--lx-color-primary); background: var(--lx-color-bg-card); } .lx-bomflex-process__step.is-auto-active .lx-bomflex-process__number { color: var(--lx-color-primary); } .lx-bomflex-process__step.is-auto-active .lx-bomflex-process__copy { opacity: 1; visibility: visible; transform: none; } .lx-bomflex-process__step.is-auto-active h3 { max-height: 100px; color: var(--lx-color-text-heading); font-size: clamp(18px, 1.5vw, 24px); opacity: 1; transform: none; } .lx-bomflex-process__step.is-auto-active p { max-height: 180px; margin-top: var(--lx-gap-12); opacity: 1; transform: none; } @media (max-width: 767px) { .lx-bomflex-process__step.is-auto-active { flex: none; } .lx-bomflex-process__step::before, .lx-bomflex-process__step.is-auto-active::before { display: none; } } @media (max-width: 767px) { .lx-bomflex-process__step { display: block; } .lx-bomflex-process__copy { position: static; width: auto; display: block; opacity: 1; visibility: visible; transform: none; } .lx-bomflex-process__step .lx-bomflex-process__copy h3 { max-height: none; opacity: 1; transform: none; } .lx-bomflex-process__step .lx-bomflex-process__copy p { max-height: none; margin-top: var(--lx-gap-12); opacity: 1; transform: none; } } .lx-faq__intro { text-align: center; } .lx-faq__intro h2 { margin: 0; } .lx-faq__intro p { max-width: 720px; margin: 16px auto 0; color: var(--lx-color-text-muted, #71717a); font-size: var(--lx-fs-body, 16px); line-height: 1.65; } .lx-faq__list { width: 100%; max-width: 960px; margin: 0 auto; border-top: 1px solid var(--lx-color-bg-dark, #18181b); text-align: left; } .lx-faq__item { border-bottom: 1px solid var(--lx-color-border, #e8e8ea); } .lx-faq__trigger { width: 100%; display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 26px 0; border: 0; background: transparent; cursor: pointer; text-align: left; font-family: var(--lx-font-heading, Manrope, sans-serif); font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--lx-color-text-heading, #18181b); transition: color .25s ease; } .lx-faq__trigger svg { flex: 0 0 auto; width: 20px; height: 20px; transition: transform .35s ease, color .25s ease; } .lx-faq__trigger:hover, .lx-faq__trigger:focus, .lx-faq__trigger:focus-visible { background: transparent; box-shadow: none; color: var(--lx-color-primary, #fcb604); } .lx-faq__item.is-open .lx-faq__trigger svg { transform: rotate(45deg); } .lx-faq__answer { height: 0; opacity: 0; overflow: hidden; transition: height .45s cubic-bezier(.22, 1, .36, 1), opacity .25s ease; } .lx-faq__answer-inner { padding: 0 54px 28px 0; } .lx-faq__item.is-open .lx-faq__answer { opacity: 1; } @media (max-width: 767px) { .lx-faq__layout { gap: 36px; } .lx-faq__answer-inner { padding-right: 0; } } /* =================================== Utility Power Transmission Page Page-specific composition for P05-1. =================================== */ .lx-utility-page { overflow-x: clip; background: var(--lx-color-bg-card); color: var(--lx-color-text-body); font-family: var(--lx-font-body); } body:has(.lx-utility-page) { background: var(--lx-color-bg-card); } .lx-utility-page .section { position: relative; } .lx-utility-hero { min-height: 480px; display: grid; align-items: end; isolation: isolate; overflow: hidden; } .lx-utility-hero::before, .lx-utility-final-cta::before { position: absolute; inset: 0; z-index: -1; background-position: center; background-size: cover; content: ''; } .lx-utility-hero::before { background-image: linear-gradient(90deg, rgba(24, 24, 27, .72) 0%, rgba(24, 24, 27, .48) 44%, rgba(24, 24, 27, .06) 100%), url('https://lx-cable.wxkntest.com/wp-content/uploads/2026/08/utility-transmission-hero.webp'); } .lx-utility-page.page-civil-construction .lx-utility-hero::before { background-image: linear-gradient(90deg, rgba(24, 24, 27, .72) 0%, rgba(24, 24, 27, .48) 44%, rgba(24, 24, 27, .06) 100%), url('https://lx-cable.wxkntest.com/wp-content/uploads/2026/08/civil-s01-hero-construction.png'); } .lx-utility-page.page-renewable-energy .lx-utility-hero::before { background-image: linear-gradient(90deg, rgba(24, 24, 27, .72) 0%, rgba(24, 24, 27, .48) 44%, rgba(24, 24, 27, .06) 100%), url('https://lx-cable.wxkntest.com/wp-content/uploads/2026/08/renewable-s01-hero-solar-farm.png'); } .lx-utility-page.page-fttx-telecom .lx-utility-hero::before { background-image: linear-gradient(90deg, rgba(24, 24, 27, .72) 0%, rgba(24, 24, 27, .48) 44%, rgba(24, 24, 27, .06) 100%), url('https://lx-cable.wxkntest.com/wp-content/uploads/2026/08/fttx-s01-hero-fttx.png'); } .lx-utility-page.page-optical-fiber-supplier .lx-utility-hero::before { background-image: linear-gradient(90deg, rgba(24, 24, 27, .72) 0%, rgba(24, 24, 27, .48) 44%, rgba(24, 24, 27, .06) 100%), url('https://lxelectrical.com/wp-content/uploads/2026/09/cable-banner-PC-1.webp'); } .lx-utility-page.page-fttx-solution .lx-utility-hero::before { background-image: linear-gradient(90deg, rgba(24, 24, 27, .72) 0%, rgba(24, 24, 27, .48) 44%, rgba(24, 24, 27, .06) 100%), url('https://lxelectrical.com/wp-content/uploads/2026/09/banner.webp'); } .lx-utility-page.page-medium-voltage-cable-supplier .lx-utility-hero::before { background-image: linear-gradient(90deg, rgba(24, 24, 27, .72) 0%, rgba(24, 24, 27, .48) 44%, rgba(24, 24, 27, .06) 100%), url('https://lxelectrical.com/wp-content/uploads/2026/09/banner-1.webp'); } .lx-utility-hero .container { min-height: 480px; padding-top: 100px; padding-bottom: 72px; } .lx-utility-breadcrumb { position: static; display: flex; gap: var(--lx-gap-10); margin: 0 0 28px; color: rgba(255, 255, 255, .62); font-size: var(--lx-fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .lx-utility-breadcrumb a { color: inherit; text-decoration: none; } .lx-utility-breadcrumb a:hover { color: var(--lx-color-primary); } .lx-utility-hero__content { width: 100%; } .lx-utility-hero__copy { max-width: 780px; } .lx-utility-hero .lx-text-eyebrow { margin: 0 0 var(--lx-gap-16); } .lx-utility-hero h1 { max-width: 760px; margin: 0 0 22px; color: #fff; } .lx-utility-hero__lead { max-width: 630px; margin: 0 0 32px; color: rgba(255, 255, 255, .78); font-size: 18px; line-height: 1.7; } .lx-utility-badges { display: flex; flex-wrap: wrap; gap: var(--lx-gap-12); margin-top: var(--lx-gap-24); } .lx-utility-badges span { display: inline-flex; align-items: center; gap: var(--lx-gap-8); min-height: 40px; padding: 0 var(--lx-gap-14); border: 0; background: rgba(255, 255, 255, .08); box-shadow: 0 8px 24px rgba(0, 0, 0, .08); -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%); color: rgba(255, 255, 255, .86); font-size: var(--lx-fs-xs); font-weight: 700; letter-spacing: .04em; } .lx-utility-badges i { color: var(--lx-color-primary); } .lx-utility-hero__actions { margin-top: 0; } .lx-utility-page .lx-section__head { margin-bottom: var(--lx-gap-48); } .lx-utility-page .lx-section__head--stack { display: flex; flex-direction: column; align-items: center; } .lx-utility-page .lx-section__head--stack h2, .lx-utility-page .lx-section__head--stack p { margin-top: 0; } .lx-utility-page .lx-section__head--stack > p:not(.lx-text-eyebrow) { max-width: 760px; } .lx-utility-card-grid, .lx-utility-scenario-grid, .lx-utility-product-grid { align-items: stretch; } .lx-utility-challenges .lx-utility-card-grid { gap: var(--lx-gap-16); } .lx-utility-info-card { min-height: 270px; padding: var(--lx-gap-32); border-top: 3px solid var(--lx-color-primary); background: var(--lx-color-bg-card); } .lx-utility-info-card__icon { display: block; margin-bottom: var(--lx-gap-32); color: var(--lx-color-primary-dark); font-size: 28px; } .lx-utility-info-card h3, .lx-utility-scenario-card h3, .lx-utility-product-card h3, .lx-utility-bomflex__features h3 { margin: 0 0 var(--lx-gap-16); } .lx-utility-info-card p, .lx-utility-scenario-card p, .lx-utility-product-card p, .lx-utility-bomflex__features p { margin: 0; color: var(--lx-color-text-muted); line-height: 1.65; } .lx-utility-scenarios .lx-section__head { margin-bottom: var(--lx-gap-48); } .lx-utility-scenarios .lx-heading-card, .lx-utility-scenarios .lx-text-lead { color: rgba(255, 255, 255, .82); } .lx-utility-scenario-card { display: flex; flex-direction: column; border: 1px solid rgba(255, 255, 255, .16); background: #27272a; } .lx-utility-scenario-card__visual { aspect-ratio: 1.45; margin: 0; overflow: hidden; } .lx-utility-scenario-card__visual img, .lx-utility-product-card .card__visual img, .lx-utility-bomflex__visual img { width: 100%; height: 100%; object-fit: cover; } .lx-utility-scenario-card__body { flex: 1; padding: var(--lx-gap-24); } .lx-utility-scenario-card__body p { color: rgba(255, 255, 255, .68); } .lx-utility-scenario-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); gap: var(--lx-gap-48); align-items: center; } .lx-utility-scenario-layout__visual { aspect-ratio: 1.15; margin: 0; overflow: hidden; background: var(--lx-color-bg-card); position: relative; } .lx-utility-scenario-layout__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .45s ease; opacity: 0; } .lx-utility-scenario-layout__visual img.is-visible { opacity: 1; } .lx-utility-scenario-layout__content h2 { margin: 0 0 var(--lx-gap-40); font-size: clamp(32px, 4vw, 52px); line-height: 1.08; color: var(--lx-color-text-heading); } .lx-utility-scenario-accordion { border-top: 1px solid var(--lx-color-border); } .lx-utility-scenario-item { border-bottom: 1px solid var(--lx-color-border); } .lx-utility-scenario-trigger { display: flex; width: 100%; min-height: 72px; align-items: center; justify-content: space-between; gap: var(--lx-gap-16); padding: var(--lx-gap-16) 0; border: 0; background: transparent; color: var(--lx-color-text-heading); cursor: pointer; font-family: var(--lx-font-heading); font-size: clamp(20px, 1.7vw, 22px); font-weight: 700; line-height: 1.35; text-align: left; transition: color .35s ease, background-color .35s ease; } .lx-utility-scenario-trigger:hover, .lx-utility-scenario-trigger:focus-visible, .lx-utility-scenario-item.is-active .lx-utility-scenario-trigger { background: transparent; box-shadow: none; color: var(--lx-color-primary); } .lx-utility-scenario-trigger:focus-visible { background: transparent; outline: 2px solid var(--lx-color-primary); outline-offset: 4px; } .lx-utility-scenario-trigger svg { width: 20px; height: 20px; flex: 0 0 auto; color: currentColor; transition: transform .35s ease; } .lx-utility-scenario-item.is-active .lx-utility-scenario-trigger svg { transform: rotate(45deg); } .lx-utility-scenario-answer { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .4s cubic-bezier(.22, 1, .36, 1), opacity .25s ease; } .lx-utility-scenario-answer > div { overflow: hidden; } .lx-utility-scenario-item.is-active .lx-utility-scenario-answer { grid-template-rows: 1fr; opacity: 1; } .lx-utility-scenario-answer p { margin: 0 0 var(--lx-gap-24); color: var(--lx-color-text-muted); font-size: var(--lx-fs-body); line-height: 1.65; } .lx-about-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lx-about-stats strong { font-variant-numeric: tabular-nums; } .section-testimonials .lx-testimonial-role { display: block; margin: -8px 0 var(--lx-gap-12); color: var(--lx-color-text-muted); font-size: var(--lx-fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .section--dark.section-testimonials .lx-testimonial-role { color: rgba(255, 255, 255, .62); } .section-why .lx-section__head::before { display: block; margin-bottom: var(--lx-gap-12); color: var(--lx-color-primary); content: 'Advantages'; font-size: var(--lx-fs-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .section-testimonials article:nth-child(1) .lx-heading-card::after, .section-testimonials article:nth-child(2) .lx-heading-card::after, .section-testimonials article:nth-child(3) .lx-heading-card::after { display: block; margin-top: var(--lx-gap-8); color: var(--lx-color-text-muted); font-size: var(--lx-fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .section--dark.section-testimonials article:nth-child(1) .lx-heading-card::after, .section--dark.section-testimonials article:nth-child(2) .lx-heading-card::after, .section--dark.section-testimonials article:nth-child(3) .lx-heading-card::after { color: rgba(255, 255, 255, .62); } .section-testimonials article:nth-child(1) .lx-heading-card::after { content: 'Project Manager'; } .section-testimonials article:nth-child(2) .lx-heading-card::after { content: 'Construction Supervisor'; } .section-testimonials article:nth-child(3) .lx-heading-card::after { content: 'Operations Director'; } /* Supplier-page cards on dark sections must keep their headings readable. */ .lx-utility-page .section--dark.section-why .card__body .lx-heading-card, .lx-utility-page .section--dark.section-testimonials .card__body .lx-heading-card { color: var(--lx-color-bg-card, #fff); } /* The three supplier banners use a more compact title and lead for a calmer first fold. */ .lx-utility-page.page-optical-fiber-supplier .lx-utility-hero h1, .lx-utility-page.page-fttx-solution .lx-utility-hero h1, .lx-utility-page.page-medium-voltage-cable-supplier .lx-utility-hero h1 { font-size: clamp(32px, calc(1rem + 2.1vw), 48px); line-height: 1.08; } .lx-utility-page.page-optical-fiber-supplier .lx-utility-hero__lead, .lx-utility-page.page-fttx-solution .lx-utility-hero__lead, .lx-utility-page.page-medium-voltage-cable-supplier .lx-utility-hero__lead { font-size: 16px; line-height: 1.65; } @media (max-width: 767px) { .lx-utility-page.page-optical-fiber-supplier .lx-utility-hero h1, .lx-utility-page.page-fttx-solution .lx-utility-hero h1, .lx-utility-page.page-medium-voltage-cable-supplier .lx-utility-hero h1 { font-size: clamp(28px, 7vw, 36px); } .lx-utility-page.page-optical-fiber-supplier .lx-utility-hero__lead, .lx-utility-page.page-fttx-solution .lx-utility-hero__lead, .lx-utility-page.page-medium-voltage-cable-supplier .lx-utility-hero__lead { font-size: 15px; } } /* The three supplier pages use a stacked intro, then a visual/accordion row. */ .section-bomflex .lx-utility-scenario-layout { grid-template-areas: "heading heading" "lead lead" "visual accordion"; row-gap: var(--lx-gap-24); align-items: start; } .section-bomflex .lx-utility-scenario-layout__content { display: contents; } .section-bomflex .lx-utility-scenario-layout__content h2 { grid-area: heading; margin-bottom: 0; } .section-bomflex .lx-utility-scenario-layout__content > .lx-text-lead { grid-area: lead; max-width: 980px; margin: 0; } .section-bomflex .lx-utility-scenario-layout__visual { grid-area: visual; } .section-bomflex .lx-utility-scenario-accordion { grid-area: accordion; width: 100%; } .lx-utility-products .lx-section__head--split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(260px, 3fr); gap: var(--lx-gap-32); align-items: start; } .lx-utility-products .lx-section__head--split > * { margin: 0; } .lx-utility-products .lx-section__head--split h2 { margin: var(--lx-gap-12) 0 0; } .lx-utility-product-card { min-height: 100%; color: inherit; text-decoration: none; } .lx-utility-product-card .card__visual { aspect-ratio: 1.45; } .lx-utility-product-card .card__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--lx-gap-16); padding: var(--lx-gap-24); } .lx-utility-product-card .card__body p { flex: 1; } .lx-utility-product-card:hover { transform: translateY(-5px); border-color: var(--lx-color-border); box-shadow: 0 10px 15px -3px var(--lx-shadow-md); } .lx-utility-product-card:focus-visible { outline: 2px solid var(--lx-color-primary); outline-offset: 4px; } .lx-utility-products__action { margin-top: var(--lx-gap-48); } .lx-utility-bomflex .lx-section__head { width: 80%; max-width: none; margin-right: auto; margin-left: auto; } .lx-utility-bomflex .lx-section__head h2, .lx-utility-bomflex .lx-section__head > p:not(.lx-text-eyebrow) { width: 100%; max-width: none; } .lx-utility-bomflex .lx-section__head h2, .lx-utility-bomflex .lx-section__head > p:not(.lx-text-eyebrow) { color: #fff; } .lx-utility-bomflex .lx-section__head h2 { margin-bottom: 0; } .lx-utility-bomflex .lx-section__head > p:not(.lx-text-eyebrow) { color: rgba(255, 255, 255, .72); } .lx-utility-bomflex__grid { align-items: stretch; } .lx-utility-bomflex__visual { min-height: 100%; margin: 0; overflow: hidden; } .lx-utility-bomflex__visual img { min-height: 100%; } .lx-utility-bomflex__features { display: flex; flex-direction: column; gap: 0; } .lx-utility-bomflex__features article { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--lx-gap-16); padding: var(--lx-gap-24) 0; border-top: 1px solid rgba(255, 255, 255, .2); } .lx-utility-bomflex__features article:first-child { padding-top: 0; border-top: 0; } .lx-utility-bomflex__features article > i { padding-top: 4px; color: var(--lx-color-primary); font-size: 20px; } .lx-utility-bomflex__features h3 { color: #fff; } .lx-utility-bomflex__features p { color: rgba(255, 255, 255, .58); } .lx-utility-bomflex .lx-action-group { margin-top: var(--lx-gap-48); } .lx-utility-faq .lx-faq__layout { gap: var(--lx-gap-48); } .lx-utility-faq .lx-faq__intro { text-align: center; } .lx-utility-faq .lx-faq__intro p:not(.lx-text-eyebrow) { max-width: 760px; margin: 16px auto 0; } .lx-utility-final-cta { max-width: 1200px; margin: var(--lx-gap-48) auto; padding-bottom: calc(var(--lx-section-y) + var(--lx-gap-24)); border: 1px solid rgba(255, 255, 255, .12); box-shadow: var(--lx-shadow-soft); isolation: isolate; overflow: hidden; } .lx-utility-final-cta::before { background-image: linear-gradient(90deg, rgba(24, 24, 27, .76), rgba(24, 24, 27, .58)), url('https://lx-cable.wxkntest.com/wp-content/uploads/2026/08/utility-shipping-background.webp'); } .lx-utility-final-cta__inner { max-width: 820px; } .lx-utility-final-cta h2 { margin: 0 0 var(--lx-gap-24); font-size: clamp(28px, 3.2vw, 44px); } .lx-utility-final-cta__inner > p:not(.lx-text-eyebrow) { max-width: 720px; margin: 0; color: rgba(255, 255, 255, .72); font-size: var(--lx-fs-lead); line-height: 1.65; } .lx-utility-final-cta .lx-action-group { margin-top: var(--lx-gap-40); } /* Utility page section backgrounds and alignment overrides. */ .lx-utility-challenges { background: var(--lx-color-bg-card); } .lx-utility-scenarios { background: var(--lx-color-bg-soft); color: var(--lx-color-text-body); } .lx-utility-scenarios .lx-heading-section--dark { color: var(--lx-color-text-heading); } .lx-utility-scenarios .lx-heading-card { color: var(--lx-color-text-heading); } .lx-utility-scenarios .lx-text-lead { color: var(--lx-color-text-muted); } .lx-utility-scenario-card { border-color: var(--lx-color-border); background: var(--lx-color-bg-card); } .lx-utility-scenario-card__body p { color: var(--lx-color-text-muted); } .lx-utility-products { background: var(--lx-color-bg-card); } .lx-utility-products .lx-utility-product-card .card__visual { padding: 0; } .lx-utility-products .lx-utility-product-card .card__body h3 { margin-bottom: 0; } .lx-utility-products .lx-utility-product-card .products-card__link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; color: var(--lx-color-primary); font-family: var(--lx-font-heading); font-size: var(--lx-fs-xs, 12px); font-weight: 900; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; } .lx-utility-products .lx-utility-product-card .products-card__link:hover, .lx-utility-products .lx-utility-product-card .products-card__link:focus-visible, .lx-utility-products .lx-utility-product-card:hover .products-card__link { color: var(--lx-color-primary); } .lx-utility-products .lx-utility-product-card .products-card__link svg { width: 15px; height: 15px; transition: transform .25s ease; } .lx-utility-products .lx-utility-product-card .products-card__link:hover svg, .lx-utility-products .lx-utility-product-card .products-card__link:focus-visible svg, .lx-utility-products .lx-utility-product-card:hover .products-card__link svg { transform: translate(3px, -3px); } /* Product and accessory cards: four columns, light image canvas, and primary CTAs. */ .lx-utility-page .section-products .lx-utility-products__grid, .lx-utility-page .section-accessories .lx-utility-products__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lx-utility-page .section-products .lx-utility-products__grid > *, .lx-utility-page .section-accessories .lx-utility-products__grid > * { grid-column: auto; } .lx-utility-page .section-products .lx-utility-product-card .card__visual, .lx-utility-page .section-accessories .lx-utility-product-card .card__visual { background: #F3F5F8; } .lx-utility-page .section-products .lx-utility-product-card .products-card__link, .lx-utility-page .section-accessories .lx-utility-product-card .products-card__link { min-height: 48px; padding: 0 20px; background: var(--lx-color-primary); color: var(--lx-color-bg-dark); font-size: var(--lx-fs-xs, 12px); letter-spacing: .08em; } .lx-utility-page .section-products .lx-utility-product-card .products-card__link:hover, .lx-utility-page .section-products .lx-utility-product-card .products-card__link:focus-visible, .lx-utility-page .section-products .lx-utility-product-card:hover .products-card__link, .lx-utility-page .section-accessories .lx-utility-product-card .products-card__link:hover, .lx-utility-page .section-accessories .lx-utility-product-card .products-card__link:focus-visible, .lx-utility-page .section-accessories .lx-utility-product-card:hover .products-card__link { background: var(--lx-color-primary); color: #fff; filter: brightness(1.1); } .lx-utility-page .section-products .lx-utility-product-card .products-card__link > i, .lx-utility-page .section-accessories .lx-utility-product-card .products-card__link > i { display: none; } .lx-utility-bomflex { background: #272727; } .lx-utility-bomflex .lx-section__head { align-items: center; text-align: center; } .lx-utility-bomflex .lx-section__head h2, .lx-utility-bomflex .lx-section__head > p:not(.lx-text-eyebrow) { text-align: center; } @media (max-width: 1180px) { .lx-utility-card-grid > *, .lx-utility-scenario-grid > *, .lx-utility-product-grid > * { grid-column: span 6; } .lx-utility-page .section-products .lx-utility-products__grid, .lx-utility-page .section-accessories .lx-utility-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lx-utility-bomflex__visual, .lx-utility-bomflex__features { grid-column: span 12; } .lx-utility-bomflex__visual { max-height: 480px; } } @media (max-width: 767px) { .lx-utility-hero { min-height: 0; padding: 0 !important; } .lx-utility-hero .container { min-height: 0; padding-top: 80px; padding-bottom: 40px; } .lx-utility-breadcrumb { margin-bottom: 20px; } .lx-utility-hero h1 { margin-bottom: 20px; } .lx-utility-hero__lead { margin-bottom: 20px; font-size: var(--lx-fs-body); } .lx-utility-badges { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 16px; } .lx-utility-badges span { width: 100%; } .lx-utility-challenges .lx-utility-card-grid { gap: 20px; } .lx-utility-challenges .lx-section__head { margin-bottom: 20px; } .lx-utility-challenges .lx-section__head h2 { margin-bottom: 0; } .lx-utility-challenges .lx-bomflex-pain-card { padding: 20px; } .lx-utility-challenges .lx-bomflex-pain-card .lx-bomflex-icon { margin-bottom: 20px; } .lx-utility-challenges .lx-bomflex-pain-card h3 { margin-bottom: 20px; } .lx-utility-challenges .lx-bomflex-pain-card .card__body { gap: 0; } .lx-utility-info-card { padding: 20px; } .lx-utility-info-card h3 { margin-bottom: 20px; } .lx-utility-info-card__icon { margin-bottom: 20px; } .lx-utility-card-grid > *, .lx-utility-scenario-grid > *, .lx-utility-product-grid > * { grid-column: span 12; } .lx-utility-scenario-layout__content h2 { margin-bottom: 20px; } .lx-utility-scenario-trigger { gap: 20px; padding: 20px 0; } .lx-utility-scenario-answer p { margin-bottom: 20px; } .lx-utility-products .lx-section__head--split { grid-template-columns: 1fr; margin-bottom: 20px; } .lx-utility-products .lx-section__head--split { gap: 20px; } .lx-utility-products .lx-section__head--split > p { width: 100%; max-width: none; } .lx-utility-product-grid { gap: 20px; } .lx-utility-page .section-products .lx-utility-products__grid, .lx-utility-page .section-accessories .lx-utility-products__grid { grid-template-columns: minmax(0, 1fr); } .lx-utility-product-card .card__body { gap: 20px; padding: 20px; } .lx-utility-products__action, .lx-utility-bomflex .lx-action-group { margin-top: 20px; } .lx-utility-final-cta { margin: 0; padding-bottom: calc(var(--lx-section-y-mobile) + var(--lx-gap-16)); } .lx-utility-final-cta h2 { margin-bottom: 20px; } .lx-utility-final-cta .lx-action-group { margin-top: 20px; } .lx-utility-bomflex__features { margin-top: 20px; } .lx-utility-bomflex .lx-section__head { margin-bottom: 20px; } .lx-utility-bomflex__features article { gap: 20px; padding: 20px 0; } .lx-utility-bomflex__features article:first-child { padding-top: 0; } .lx-utility-bomflex__features h3 { margin-bottom: 20px; } .lx-utility-faq .lx-faq__layout { gap: 20px; } .lx-utility-faq .lx-faq__trigger { padding: 20px 0; } .lx-utility-faq .lx-faq__answer-inner { padding-bottom: 20px; } .lx-utility-bomflex__visual { max-height: none; } } @media (max-width: 900px) { .lx-utility-scenario-layout { grid-template-columns: 1fr; gap: 20px; } .lx-utility-scenario-layout__visual { aspect-ratio: 1.55; } .lx-utility-scenario-layout__content h2 { margin-top: 0; } .section-bomflex .lx-utility-scenario-layout { grid-template-areas: "heading" "lead" "visual" "accordion"; row-gap: 20px; } } /* Reusable feature-card standard: icon + title + description. */ .lx-feature-grid { margin-top: 48px; } .lx-feature-card { min-height: 310px; padding: 34px 28px; border: 0; background: var(--lx-color-border, #e8e8ea); color: var(--lx-color-bg-dark, #18181b); } .lx-feature-card:nth-child(odd) { background: var(--lx-color-primary, #fcb604); } .lx-feature-card:nth-child(3) { background: var(--lx-color-bg-base, #f1f1f1); } .lx-feature-card:nth-child(4) { background: var(--lx-color-bg-soft, #f3f5f8); } .lx-feature-card:first-child .lx-feature-card__title, .lx-feature-card:first-child .lx-feature-card__description, .lx-feature-card:first-child .lx-feature-card__icon { color: var(--lx-color-bg-card, #fff); } .lx-feature-card__icon { display: block; width: 28px; height: 28px; margin-bottom: 68px; color: var(--lx-color-primary-dark, #c48c00); stroke-width: 1.6; } .lx-feature-card:not(:first-child) .lx-feature-card__icon { color: var(--lx-color-primary, #fcb604); } .lx-feature-card__title { margin: 0 0 14px; } .lx-feature-card__description { margin: 0; color: var(--lx-color-text-muted, #6c6d73); font-size: 14px; line-height: 1.7; } .lx-feature-card:not(:first-child):nth-child(odd) .lx-feature-card__description { color: var(--lx-color-bg-dark, #18181b); } @media (min-width: 768px) and (max-width: 1180px) { .lx-feature-grid > [class*="lx-col-"] { grid-column: span 6; } } @media (max-width: 767px) { .lx-feature-grid { grid-template-columns: minmax(0, 1fr); } .lx-feature-grid > [class*="lx-col-"] { grid-column: 1 / -1; } .lx-feature-card { min-height: 0; } .lx-feature-card__icon { margin-bottom: 42px; } } /* BOMFLEX uses the reusable feature-card structure with a white card variant. */ .section-bomflex-advantages .lx-feature-card, .section-bomflex-advantages .lx-feature-card:nth-child(odd), .section-bomflex-advantages .lx-feature-card:nth-child(3), .section-bomflex-advantages .lx-feature-card:nth-child(4) { border: 1px solid var(--lx-color-border, #e8e8ea); background: var(--lx-color-bg-card, #fff); color: var(--lx-color-text-heading, #18181b); } .section-bomflex-advantages .lx-feature-card .lx-feature-card__icon, .section-bomflex-advantages .lx-feature-card:first-child .lx-feature-card__icon { color: var(--lx-color-primary, #fcb604); } .section-bomflex-advantages .lx-feature-card:first-child .lx-feature-card__title, .section-bomflex-advantages .lx-feature-card:first-child .lx-feature-card__description { color: var(--lx-color-text-heading, #18181b); } .section-bomflex-advantages .lx-feature-card:first-child .lx-feature-card__description { color: var(--lx-color-text-muted, #6c6d73); } .section-bomflex-advantages { background: var(--lx-color-primary, #fcb604); } .section-bomflex-advantages .lx-section__head h2 { color: #fff; text-shadow: 0 2px 6px rgba(24, 24, 27, .24); } /* S03 hierarchy: definition first, core promise second, project types third. */ .section-bomflex-intro { background: #272727; color: #fff; } .section-bomflex-intro .lx-bomflex-intro__promise { border-left-color: var(--lx-color-primary, #fcb604); } .section-bomflex-intro .lx-bomflex-intro__types-head { border-bottom-color: rgba(24, 24, 27, .22); } .section-bomflex-intro .lx-bomflex-intro__header h2, .section-bomflex-intro .lx-bomflex-intro__types-head h3 { color: #fff; } .section-bomflex-intro .lx-bomflex-intro__lead { color: rgba(255, 255, 255, .86); } .section-bomflex-intro .lx-bomflex-intro__types-head p { color: rgba(255, 255, 255, .68); } .section-bomflex-intro .lx-bomflex-intro__types-head { border-bottom-color: rgba(255, 255, 255, .22); } .section-bomflex-intro .container { max-width: 1280px; } .lx-bomflex-intro__header { width: 100%; max-width: 100%; margin-bottom: var(--lx-gap-56, 56px); } .lx-bomflex-intro__header h2 { margin-bottom: 0; font-size: clamp(36px, 4.5vw, 56px); line-height: .98; } .section-bomflex-intro .lx-bomflex-intro__header h2 strong { color: var(--lx-color-primary, #fcb604); } .lx-bomflex-intro__lead { width: 100%; max-width: 100%; margin: var(--lx-gap-20, 20px) 0 0; color: var(--lx-color-text-heading, #18181b); font-size: clamp(20px, 2.1vw, 28px); line-height: 1.5; } .lx-bomflex-intro__lead strong { color: var(--lx-color-primary, #fcb604); } .lx-bomflex-intro__core { align-items: stretch; row-gap: var(--lx-gap-32, 32px); } .lx-bomflex-intro__copy { display: flex; } .lx-bomflex-intro__promise { width: 100%; padding: 40px 44px; border-left: 6px solid var(--lx-color-primary, #fcb604); background: var(--lx-color-bg-card, #fff); } .lx-bomflex-intro__promise-label { display: block; margin-bottom: var(--lx-gap-20, 20px); color: var(--lx-color-primary, #fcb604); font-family: var(--lx-font-heading, Manrope, sans-serif); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .lx-bomflex-intro__promise p { max-width: 680px; margin: 0 0 var(--lx-gap-16, 16px); color: var(--lx-color-text-heading, #18181b); font-size: 22px; line-height: 1.5; } .lx-bomflex-intro__promise p + p { margin-bottom: 0; color: var(--lx-color-text-muted, #6c6d73); font-size: var(--lx-fs-body, 16px); line-height: 1.65; } .lx-bomflex-intro__promise strong { color: var(--lx-color-primary, #fcb604); } .lx-bomflex-intro__visual { min-height: 420px; background: var(--lx-color-bg-card, #fff); } .lx-bomflex-intro__visual img { height: 100%; } .lx-bomflex-intro__types { margin-top: var(--lx-gap-72, 72px); } .lx-bomflex-intro__types-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--lx-gap-32, 32px); padding-bottom: var(--lx-gap-16, 16px); border-bottom: 1px solid var(--lx-color-border, #e8e8ea); } .section-bomflex-intro .lx-bomflex-intro__types-head h3 { margin: 0; color: var(--lx-color-primary, #fcb604); font-family: var(--lx-font-heading, Manrope, sans-serif); font-size: 28px; font-weight: 600; line-height: 1.25; } .lx-bomflex-intro__types-head p { max-width: 600px; margin: 0; color: var(--lx-color-text-muted, #6c6d73); font-size: var(--lx-fs-sm, 14px); line-height: 1.6; text-align: right; } .lx-bomflex-intro__types .lx-bomflex-service-cards { align-items: start; gap: var(--lx-gap-16, 16px); margin-top: var(--lx-gap-24, 24px); } .lx-bomflex-intro__types .lx-bomflex-service-card { position: relative; min-height: 0; height: auto; padding: 56px var(--lx-gap-24, 24px) var(--lx-gap-24, 24px); border: 0; background: #3a3a3a; } .lx-bomflex-intro__types .lx-bomflex-service-card::before { position: absolute; top: 0; left: 0; width: 0; height: 0; border-top: 28px solid var(--lx-color-primary, #fcb604); border-right: 28px solid transparent; content: ''; } .lx-bomflex-intro__types .lx-bomflex-service-card h3 { margin-bottom: var(--lx-gap-8, 8px); color: #fff; font-size: 20px; line-height: 1.2; } .lx-bomflex-intro__types .lx-bomflex-service-card p { color: rgba(255, 255, 255, .68); font-size: var(--lx-fs-sm, 14px); line-height: 1.6; } @media (max-width: 767px) { .lx-bomflex-intro__header { margin-bottom: var(--lx-gap-36, 36px); } .lx-bomflex-intro__lead { font-size: 20px; } .lx-bomflex-intro__core > [class*="lx-col-"] { grid-column: 1 / -1; } .lx-bomflex-intro__promise { padding: 28px 24px; } .lx-bomflex-intro__promise p { font-size: 20px; } .lx-bomflex-intro__visual { min-height: 320px; } .lx-bomflex-intro__types { margin-top: var(--lx-gap-56, 56px); } .lx-bomflex-intro__types-head { display: block; } .lx-bomflex-intro__types-head h3 { font-size: 22px; } .lx-bomflex-intro__types-head p { margin-top: var(--lx-gap-12, 12px); text-align: left; } .lx-bomflex-intro__types .lx-bomflex-service-cards { grid-template-columns: 1fr; } } /* Static six-column process layout. */ .section-bomflex-process .lx-section__head { max-width: none; margin-right: 0; margin-left: 0; } .lx-bomflex-process__grid { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; overflow: visible; border-top: 1px solid var(--lx-color-border); } .section-bomflex-process .lx-bomflex-process__step, .section-bomflex-process .lx-bomflex-process__step:hover, .section-bomflex-process .lx-bomflex-process__step:focus-visible { display: flex; min-width: 0; min-height: 360px; flex: none; flex-direction: column; padding: var(--lx-gap-24) var(--lx-gap-16) var(--lx-gap-24); border-top: 0; border-right: 0; border-bottom: 0; border-left: 1px solid var(--lx-color-border); background: var(--lx-color-bg-card); outline: none; } .section-bomflex-process .lx-bomflex-process__step:last-child { border-right: 1px solid var(--lx-color-border); } .section-bomflex-process .lx-bomflex-process__step::before, .section-bomflex-process .lx-bomflex-process__step::after { display: none; } .section-bomflex-process .lx-bomflex-process__number { display: block; margin: 0; color: var(--lx-color-text-heading); font-size: clamp(56px, 6vw, 88px); font-weight: 400; line-height: 1; } .section-bomflex-process .lx-bomflex-process__copy, .section-bomflex-process .lx-bomflex-process__step:hover .lx-bomflex-process__copy, .section-bomflex-process .lx-bomflex-process__step:focus-visible .lx-bomflex-process__copy { position: static; width: auto; margin-top: auto; opacity: 1; visibility: visible; transform: none; transition: none; } .section-bomflex-process .lx-bomflex-process__copy h3, .section-bomflex-process .lx-bomflex-process__step:hover .lx-bomflex-process__copy h3, .section-bomflex-process .lx-bomflex-process__step:focus-visible .lx-bomflex-process__copy h3 { max-height: none; margin: 0 0 var(--lx-gap-8); color: var(--lx-color-text-heading); font-size: var(--lx-fs-xs); line-height: 1.35; opacity: 1; transform: none; } .section-bomflex-process .lx-bomflex-process__copy p, .section-bomflex-process .lx-bomflex-process__step:hover .lx-bomflex-process__copy p, .section-bomflex-process .lx-bomflex-process__step:focus-visible .lx-bomflex-process__copy p { max-height: none; margin: 0; color: var(--lx-color-text-muted); font-size: var(--lx-fs-xs); line-height: 1.5; opacity: 1; transform: none; } @media (max-width: 1180px) { .lx-bomflex-process__grid { display: flex !important; overflow-x: auto; padding-bottom: var(--lx-gap-8); } .section-bomflex-process .lx-bomflex-process__step, .section-bomflex-process .lx-bomflex-process__step:hover, .section-bomflex-process .lx-bomflex-process__step:focus-visible { flex: 0 0 180px; } } @media (max-width: 767px) { .lx-bomflex-process__grid { display: grid !important; grid-template-columns: 1fr; gap: var(--lx-gap-20, 20px); overflow: visible; } .section-bomflex-process .lx-bomflex-process__step, .section-bomflex-process .lx-bomflex-process__step:hover, .section-bomflex-process .lx-bomflex-process__step:focus-visible { min-height: 0; padding: var(--lx-gap-24) 0; border-top: 1px solid var(--lx-color-border); border-right: 0; border-bottom: 0; border-left: 0; } } /* Process interaction: collapsed columns stay narrow while the active one expands horizontally. */ .lx-bomflex-process__step { flex: 0 0 clamp(88px, 8vw, 120px); } .lx-bomflex-process__step:hover, .lx-bomflex-process__step:focus-visible, .lx-bomflex-process__grid:not(:has(.lx-bomflex-process__step:hover, .lx-bomflex-process__step:focus-visible)) .lx-bomflex-process__step:first-child { flex: 1 1 auto; min-width: clamp(340px, 34vw, 460px); } @media (max-width: 1180px) { .lx-bomflex-process__step { flex-basis: 156px; } .lx-bomflex-process__step:hover, .lx-bomflex-process__step:focus-visible, .lx-bomflex-process__grid:not(:has(.lx-bomflex-process__step:hover, .lx-bomflex-process__step:focus-visible)) .lx-bomflex-process__step:first-child { min-width: 340px; } } @media (max-width: 767px) { .lx-bomflex-process__step, .lx-bomflex-process__step:hover, .lx-bomflex-process__step:focus-visible, .lx-bomflex-process__grid:not(:has(.lx-bomflex-process__step:hover, .lx-bomflex-process__step:focus-visible)) .lx-bomflex-process__step:first-child { flex: none; min-width: 0; } } /* Reference finish: warm-white panel on a light-gray canvas, with neutral dividers. */ .section-bomflex-process { background: var(--lx-color-bg-card); } .section-bomflex-process > .container { width: 80% !important; max-width: none !important; background: var(--lx-color-bg-card); } .section-bomflex-process .lx-bomflex-process__grid { border-top-color: #bdbdbd; } .section-bomflex-process .lx-bomflex-process__step, .section-bomflex-process .lx-bomflex-process__step:hover, .section-bomflex-process .lx-bomflex-process__step:focus-visible { flex: none !important; min-width: 0 !important; background: var(--lx-color-bg-card); border-left-color: #bdbdbd; } .section-bomflex-process .lx-bomflex-process__step:last-child { border-right-color: #bdbdbd; } .section-bomflex-process .lx-bomflex-process__number { color: #171717; font-size: clamp(64px, 7vw, 100px); } .section-bomflex-process .lx-bomflex-process__copy h3 { color: #171717; font-size: var(--lx-fs-sm); } .section-bomflex-process .lx-bomflex-process__copy p { color: #3f3f3f; font-size: var(--lx-fs-body); line-height: 1.55; } @media (max-width: 1180px) { .section-bomflex-process > .container { width: 90% !important; max-width: none !important; } .section-bomflex-process .lx-bomflex-process__step, .section-bomflex-process .lx-bomflex-process__step:hover, .section-bomflex-process .lx-bomflex-process__step:focus-visible { flex: 0 0 180px !important; } } @media (max-width: 767px) { .section-bomflex-process > .container { width: calc(100% - 40px) !important; max-width: calc(100% - 40px) !important; } .section-bomflex-process .lx-bomflex-process__step, .section-bomflex-process .lx-bomflex-process__step:hover, .section-bomflex-process .lx-bomflex-process__step:focus-visible { flex: none !important; } } /* Keep the process-card heading size stable on hover/focus and use the site H3 scale. */ .section-bomflex-process .lx-bomflex-process__copy h3, .section-bomflex-process .lx-bomflex-process__step:hover .lx-bomflex-process__copy h3, .section-bomflex-process .lx-bomflex-process__step:focus-visible .lx-bomflex-process__copy h3, .section-bomflex-process .lx-bomflex-process__step.is-auto-active .lx-bomflex-process__copy h3 { font-size: 20px !important; font-weight: 800; line-height: 1.3; } /* Process cards: title first, then reveal the copy upward from the bottom. */ .section-bomflex-process .lx-bomflex-process__grid { border-top: 0; } .section-bomflex-process .lx-bomflex-process__step, .section-bomflex-process .lx-bomflex-process__step:hover, .section-bomflex-process .lx-bomflex-process__step:focus-visible { padding-bottom: 0; border-top: 0; border-right: 0; border-left: 0; } .section-bomflex-process .lx-bomflex-process__copy { display: flex; flex-direction: column; justify-content: flex-end; } .section-bomflex-process .lx-bomflex-process__copy h3, .section-bomflex-process .lx-bomflex-process__step:hover .lx-bomflex-process__copy h3, .section-bomflex-process .lx-bomflex-process__step:focus-visible .lx-bomflex-process__copy h3 { margin-bottom: 0 !important; } .section-bomflex-process .lx-bomflex-process__copy p, .section-bomflex-process .lx-bomflex-process__step:hover .lx-bomflex-process__copy p, .section-bomflex-process .lx-bomflex-process__step:focus-visible .lx-bomflex-process__copy p, .section-bomflex-process .lx-bomflex-process__step.is-auto-active .lx-bomflex-process__copy p { max-height: 0 !important; margin-top: 0 !important; overflow: hidden; opacity: 0 !important; transform: none !important; font-size: 14px !important; line-height: 1.55; will-change: max-height, margin-top; transition: max-height 1.15s cubic-bezier(.4, 0, .2, 1), margin-top 1.15s cubic-bezier(.4, 0, .2, 1); } .section-bomflex-process .lx-bomflex-process__step:hover .lx-bomflex-process__copy p, .section-bomflex-process .lx-bomflex-process__step:focus-visible .lx-bomflex-process__copy p, .section-bomflex-process .lx-bomflex-process__step.is-auto-active .lx-bomflex-process__copy p { max-height: 220px !important; margin-top: var(--lx-gap-12) !important; opacity: 1 !important; } .section-bomflex-process .lx-bomflex-process__copy h3, .section-bomflex-process .lx-bomflex-process__step:hover .lx-bomflex-process__copy h3, .section-bomflex-process .lx-bomflex-process__step:focus-visible .lx-bomflex-process__copy h3, .section-bomflex-process .lx-bomflex-process__step.is-auto-active .lx-bomflex-process__copy h3 { font-size: 20px !important; } /* Reserve one consistent heading row so all card subtitles start at the same height. */ .section-bomflex-process .lx-bomflex-process__copy h3, .section-bomflex-process .lx-bomflex-process__step:hover .lx-bomflex-process__copy h3, .section-bomflex-process .lx-bomflex-process__step:focus-visible .lx-bomflex-process__copy h3 { min-height: 78px; } @media (max-width: 767px) { .section-bomflex-process .lx-bomflex-process__copy h3, .section-bomflex-process .lx-bomflex-process__step:hover .lx-bomflex-process__copy h3, .section-bomflex-process .lx-bomflex-process__step:focus-visible .lx-bomflex-process__copy h3 { min-height: 0; } } /* Separators sit only between cards, never around the outside edge. */ .section-bomflex-process .lx-bomflex-process__step + .lx-bomflex-process__step { border-left: 1px solid #bdbdbd; } @media (max-width: 767px) { .section-bomflex-process .lx-bomflex-process__step + .lx-bomflex-process__step { border-top: 1px solid #bdbdbd; border-left: 0; } } /* Hover state: shorten the reveal and let the description sit close to the title. */ .section-bomflex-process .lx-bomflex-process__step:hover .lx-bomflex-process__copy h3, .section-bomflex-process .lx-bomflex-process__step:focus-visible .lx-bomflex-process__copy h3, .section-bomflex-process .lx-bomflex-process__step.is-auto-active .lx-bomflex-process__copy h3 { min-height: 0; } .section-bomflex-process .lx-bomflex-process__copy p { transition-duration: .75s; } .section-bomflex-process .lx-bomflex-process__step:hover .lx-bomflex-process__copy p, .section-bomflex-process .lx-bomflex-process__step:focus-visible .lx-bomflex-process__copy p, .section-bomflex-process .lx-bomflex-process__step.is-auto-active .lx-bomflex-process__copy p { margin-top: var(--lx-gap-8) !important; } /* Smooth the motion by avoiding a non-animatable heading-height jump. */ .section-bomflex-process .lx-bomflex-process__copy h3, .section-bomflex-process .lx-bomflex-process__step:hover .lx-bomflex-process__copy h3, .section-bomflex-process .lx-bomflex-process__step:focus-visible .lx-bomflex-process__copy h3, .section-bomflex-process .lx-bomflex-process__step.is-auto-active .lx-bomflex-process__copy h3 { min-height: 52px !important; } .section-bomflex-process .lx-bomflex-process__copy p { transition: max-height .85s cubic-bezier(.22, 1, .36, 1), margin-top .85s cubic-bezier(.22, 1, .36, 1); } @media (max-width: 767px) { .section-bomflex-process .lx-bomflex-process__copy h3, .section-bomflex-process .lx-bomflex-process__step:hover .lx-bomflex-process__copy h3, .section-bomflex-process .lx-bomflex-process__step:focus-visible .lx-bomflex-process__copy h3, .section-bomflex-process .lx-bomflex-process__step.is-auto-active .lx-bomflex-process__copy h3 { min-height: 0 !important; } } .section-bomflex-process .lx-bomflex-process__step { padding-bottom: 0 !important; } .section-bomflex-process .lx-bomflex-process__step:last-child { border-right: 0 !important; } /* Remove the legacy default-active state from the first card. */ .section-bomflex-process .lx-bomflex-process__grid:not(:has(.lx-bomflex-process__step:hover, .lx-bomflex-process__step:focus-visible, .lx-bomflex-process__step.is-auto-active)) .lx-bomflex-process__step:first-child { flex: none !important; min-width: 0 !important; border-top-color: transparent !important; background: var(--lx-color-bg-card) !important; } .section-bomflex-process .lx-bomflex-process__grid:not(:has(.lx-bomflex-process__step:hover, .lx-bomflex-process__step:focus-visible, .lx-bomflex-process__step.is-auto-active)) .lx-bomflex-process__step:first-child .lx-bomflex-process__number { color: #171717 !important; } /* Keep the standards scene fixed while the page scrolls. */ .section-bomflex-standards { background-attachment: fixed; } /* Keep the first process card in the same collapsed layout before hover. */ .section-bomflex-process .lx-bomflex-process__grid:not(:has(.lx-bomflex-process__step:hover, .lx-bomflex-process__step:focus-visible, .lx-bomflex-process__step.is-auto-active)) .lx-bomflex-process__step:first-child { padding-left: var(--lx-gap-16) !important; padding-right: var(--lx-gap-16) !important; transform: none !important; translate: none !important; } .section-bomflex-process .lx-bomflex-process__grid:not(:has(.lx-bomflex-process__step:hover, .lx-bomflex-process__step:focus-visible, .lx-bomflex-process__step.is-auto-active)) .lx-bomflex-process__step:first-child .lx-bomflex-process__copy p { max-height: 0 !important; margin-top: 0 !important; opacity: 0 !important; transform: none !important; } .section-bomflex-process .lx-bomflex-process__step:first-child, .section-bomflex-process .lx-bomflex-process__step:first-child:hover, .section-bomflex-process .lx-bomflex-process__step:first-child:focus-visible { transform: none !important; translate: none !important; } /* Remove the inner padding from the standards section's left copy. */ .section-bomflex-standards .lx-bomflex-standards__copy { padding: 0 !important; } /* Global icon language: standalone icons have no frame or decorative background. */ .lx-bomflex-icon { border: 0 !important; background: transparent !important; } /* Corporate content pages generated from P06-P08 planning documents. */ .lx-corporate-page { overflow: clip; } .lx-corporate-page .lx-corporate-section { padding-block: clamp(64px, 8vw, 120px); } .lx-corporate-page .lx-section__head--center { text-align: center; } .lx-corporate-page .lx-section__head--center p { max-width: 760px; margin-inline: auto; } .lx-eyebrow { margin: 0 0 20px; color: var(--lx-color-primary); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } .lx-corporate-hero { min-height: 640px; display: flex; align-items: center; position: relative; background: #202124; background-size: cover; background-position: center; } .lx-corporate-hero::before { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,12,15,.8), rgba(10,12,15,.35)); content: ''; } .lx-about-hero { background-image: url('https://lx-cable.wxkntest.com/wp-content/uploads/2026/08/utility-bomflex-service.webp'); } .lx-manufacturing-hero { background-image: url('https://lx-cable.wxkntest.com/wp-content/uploads/2026/08/utility-overhead-conductors.webp'); } .lx-bomflex-page .lx-manufacturing-hero { background-image: url('https://lx-cable.wxkntest.com/wp-content/themes/generatepress-child/images/who-bom.webp'); } .lx-corporate-hero .container { position: relative; z-index: 1; width: min(var(--lx-container-max), calc(100% - var(--lx-container-pad) * 2)); max-width: none; margin-inline: auto; padding: 0; } .lx-corporate-hero__copy { max-width: 760px; color: #fff; } .lx-corporate-hero__copy h1 { margin-bottom: 20px; } .lx-corporate-hero__copy > p:not(.lx-eyebrow) { max-width: 680px; color: rgba(255,255,255,.82); font-size: 18px; line-height: 1.7; } .lx-manufacturing-hero .lx-corporate-hero__copy > p:not(.lx-eyebrow) { max-width: none; } .lx-corporate-hero__copy .lx-btn { margin-top: 20px; } .lx-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; } .lx-stat-grid > div { display: flex; flex-direction: column; gap: 8px; } .lx-stat-grid strong { font-size: clamp(26px, 3vw, 44px); line-height: 1; color: var(--lx-color-primary); } .lx-stat-grid span { color: currentColor; font-size: 13px; font-weight: 700; } .lx-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; } .lx-media-frame, .lx-strength-visual { margin: 0; overflow: hidden; position: relative; } .lx-media-frame img, .lx-strength-visual img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .lx-split > div > p + p { margin-top: 20px; } .lx-feature-grid { display: grid; gap: 20px; } .lx-feature-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lx-feature-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lx-quote-card, .lx-feature-grid .card { padding: 28px; } .lx-quote-card svg, .lx-feature-grid .card > svg, .lx-feature-grid .card > i { width: 28px; height: 28px; color: var(--lx-color-primary); margin-bottom: 20px; } .lx-feature-grid h3, .lx-image-card h3 { margin: 0 0 12px; font-size: 20px; line-height: 1.2; } .lx-feature-grid p, .lx-feature-grid li, .lx-image-card p { color: var(--lx-color-text-muted); line-height: 1.7; } .lx-timeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; position: relative; margin-top: 48px; } .lx-timeline::before { position: absolute; top: 15px; left: 0; right: 0; height: 1px; background: var(--lx-color-primary); content: ''; } .lx-timeline article { position: relative; padding-top: 44px; } .lx-timeline article::before { position: absolute; top: 9px; left: 0; width: 14px; height: 14px; border: 3px solid var(--lx-color-primary); border-radius: 50%; background: var(--lx-color-bg-page, #fff); content: ''; } .lx-timeline span { color: var(--lx-color-primary); font-weight: 800; } .lx-timeline h3 { margin: 12px 0; font-size: 18px; } .lx-timeline p { margin: 0; color: var(--lx-color-text-muted); font-size: 14px; line-height: 1.6; } .lx-strength-layout { display: grid; grid-template-columns: minmax(260px, 2fr) minmax(0, 3fr); gap: 20px; align-items: stretch; } .lx-strength-visual { min-height: 100%; } .lx-strength-visual img { height: 100%; min-height: 520px; } .lx-strength-visual span { position: absolute; top: 20px; left: 20px; padding: 10px 16px; background: var(--lx-color-primary); color: #18181b; font-size: 12px; font-weight: 800; } .lx-strength-layout .lx-feature-grid .card { padding: 24px; } .lx-map-section { text-align: center; } .lx-map-section .lx-section__head { margin-bottom: 20px; } .lx-map-image { display: block; width: min(100%, 980px); height: 320px; margin: 20px auto 0; object-fit: contain; filter: brightness(0) invert(1) opacity(.78); } .lx-gallery-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 20px; } .lx-gallery-grid img { display: block; width: 100%; height: 300px; object-fit: cover; } .lx-gallery-grid img:first-child { height: 380px; } .lx-corporate-cta { text-align: center; } .lx-corporate-cta .container > p { max-width: 760px; margin: 20px auto 0; line-height: 1.7; } .lx-corporate-cta .lx-btn { margin-top: 20px; } .lx-manufacturing-page .lx-corporate-cta { position: relative; isolation: isolate; overflow: hidden; background-color: #272727; background-image: url('https://lx-cable.wxkntest.com/wp-content/uploads/2026/08/verified-manufacturer-background.webp'); background-position: center; background-size: cover; color: #fff; } .lx-manufacturing-page .lx-corporate-cta::before { position: absolute; z-index: -1; inset: 0; background: rgba(24, 24, 27, .38); content: ''; } .lx-manufacturing-page .lx-corporate-cta > .container { position: relative; z-index: 1; } .lx-manufacturing-page .lx-corporate-cta h2, .lx-manufacturing-page .lx-corporate-cta p { color: #fff; } .lx-cert-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .lx-cert-grid > * { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 120px; padding: 20px; border: 1px solid var(--lx-color-border); text-align: center; } .lx-cert-grid svg, .lx-cert-grid i { width: 28px; height: 28px; color: var(--lx-color-primary); } .lx-cert-grid .lx-cert-logo { display: block; width: 56px; height: 56px; object-fit: contain; } .lx-cert-grid span { font-size: 13px; color: var(--lx-color-text-muted); } .lx-cert-grid--hero { margin-top: 28px; } .lx-cert-grid--hero > * { min-height: 80px; border-color: rgba(255,255,255,.22); color: #fff; } .lx-cert-grid--hero span { color: #fff; font-weight: 800; } .lx-stat-bar { padding-block: 28px; } .lx-stat-bar .lx-stat-grid { margin: 0; grid-template-columns: repeat(4, 1fr); color: #fff; } .lx-stat-bar .lx-stat-grid > div { padding-inline: 20px; border-right: 1px solid rgba(255,255,255,.2); text-align: center; } .lx-stat-bar .lx-stat-grid > div:last-child { border-right: 0; } .lx-corporate-page .lx-stat-bar > .container.lx-stat-grid { justify-items: center; } .lx-corporate-page .lx-stat-bar .lx-stat-grid > div { width: 100%; align-items: center; } .lx-corporate-page .lx-stat-bar > .container.lx-stat-grid { width: min(var(--lx-container-max), calc(100% - var(--lx-container-pad) * 2)); max-width: none; padding-inline: 0; margin-inline: auto; } .lx-corporate-page .lx-stat-bar { background: #606060; color: #fff; } .lx-corporate-page .lx-stat-bar .lx-stat-grid { color: #fff; } .lx-corporate-page .lx-stat-bar .lx-stat-grid strong, .lx-corporate-page .lx-stat-bar .lx-stat-grid span { color: #fff; } .lx-corporate-page .lx-stat-bar .lx-stat-grid strong > .lx-stat-value { display: inline; color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; } .lx-corporate-page .lx-stat-bar .lx-stat-grid > div { border-color: rgba(255, 255, 255, .22); } .lx-corporate-page .section--gray, .lx-corporate-page .section--soft { background: #fff; } /* Manufacturing S02: editorial intro on the left, vertical process timeline on the right. */ .lx-manufacturing-page section:has(> .container > .lx-process-grid) > .container { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-section__head { grid-column: 1; grid-row: 1; margin: 0; text-align: left; align-items: flex-start; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid { position: relative; grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 0 0 0 64px; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid::before { position: absolute; top: 42px; bottom: 42px; left: 21px; width: 2px; background: var(--lx-color-border); content: ''; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid .card { position: relative; min-height: 0; margin-left: 0; padding: 20px; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; transition: background-color .25s ease, color .25s ease; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid .card:last-child { padding-bottom: 20px; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-step-number { position: absolute; top: 20px; left: -64px; z-index: 2; display: flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--lx-color-border); border-radius: 50%; background: #f1f1f1; color: #18181b !important; font-family: var(--lx-font-heading); font-size: 14px !important; font-weight: 700; line-height: 1; text-align: center; visibility: visible; opacity: 1; transition: background-color .25s ease, border-color .25s ease, color .25s ease; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid .card.is-active, .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid .card:hover, .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid .card:focus-within { background: #f1f1f1; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid .card.is-active h3, .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid .card.is-active p, .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid .card:hover h3, .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid .card:hover p, .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid .card:focus-within h3, .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid .card:focus-within p { color: #18181b; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid .card.is-active .lx-step-number, .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid .card:hover .lx-step-number, .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid .card:focus-within .lx-step-number { border-color: var(--lx-color-primary); background: var(--lx-color-primary); color: #18181b !important; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid h3 { margin: 0 0 12px; font-size: 20px; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid p { margin: 0; font-weight: 300; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid h3 { font-weight: 700; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid p { text-shadow: none; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid .card.is-active h3, .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid .card.is-active p, .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid .card:hover h3, .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid .card:hover p, .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid .card:focus-within h3, .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid .card:focus-within p { text-shadow: none; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid .card.is-active p, .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid .card:hover p, .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid .card:focus-within p { opacity: .72; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid + .lx-action-group { grid-column: 1; grid-row: 2; justify-content: flex-start; margin-top: 20px; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-section__head h2 { margin-bottom: 20px !important; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) { background: #fff !important; } @media (max-width: 1024px) { .lx-manufacturing-page section:has(> .container > .lx-process-grid) > .container { display: block; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-section__head { text-align: center; align-items: center; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid { margin-top: 20px; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid + .lx-action-group { justify-content: center; } } @media (min-width: 1025px) { .lx-manufacturing-page section:has(> .container > .lx-process-grid) > .container > .lx-process-intro { position: sticky !important; top: calc(96px + 40px); align-self: start; height: max-content; z-index: 3; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid { position: relative; height: auto; max-height: none; overflow: visible; } } /* Keep the S02 heading, description, and CTA together on the left. */ .lx-page-shell:has(.lx-manufacturing-page) { overflow-x: clip; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) > .container { grid-template-rows: auto; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) > .container > .lx-process-intro { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 40px; align-items: flex-start; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) > .container > .lx-process-intro .lx-section__head { grid-column: auto; grid-row: auto; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) > .container > .lx-process-intro .lx-action-group { grid-column: auto; grid-row: auto; margin: 0; align-self: flex-start; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid { grid-row: 1; align-self: start; } @media (max-width: 1024px) { .lx-manufacturing-page section:has(> .container > .lx-process-grid) > .container > .lx-process-intro { display: flex; gap: 20px; align-items: stretch; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid { position: relative; height: auto; max-height: none; overflow: visible; } } .lx-process-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 48px; } .lx-process-grid .card { padding: 28px; } .lx-step-number { display: block; width: 44px; height: 44px; padding-top: 12px; border-radius: 50%; background: var(--lx-color-primary); color: #18181b; text-align: center; font-weight: 900; } .lx-process-grid h3 { margin: 20px 0 12px; font-size: 20px; } .lx-process-grid p { margin: 0; color: var(--lx-color-text-muted); line-height: 1.7; } .lx-image-card { overflow: hidden; padding: 0 !important; } .lx-image-card img { display: block; width: 100%; height: 260px; object-fit: cover; } .lx-image-card > div { padding: 28px; } .lx-corporate-page .lx-facilities-section { background: #f1f1f1; } .lx-facilities-layout { display: grid; grid-template-columns: minmax(260px, .75fr) minmax(0, 2fr); gap: 64px; align-items: center; } .lx-facilities-intro { display: flex; min-height: 100%; flex-direction: column; align-items: flex-start; } .lx-facilities-intro .lx-eyebrow { margin: 0 0 28px; color: #64748b; } .lx-facilities-intro h2 { margin: 0 0 20px; max-width: 440px; text-align: left; } .lx-facilities-intro > p:not(.lx-eyebrow) { max-width: 420px; margin: 0; color: var(--lx-color-text-muted); line-height: 1.7; } .lx-facilities-controls { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 56px; } .lx-facilities-control { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--lx-color-primary); cursor: pointer; transition: background-color .2s ease, color .2s ease, transform .2s ease; } .lx-facilities-control:hover, .lx-facilities-control:focus-visible { background: var(--lx-color-primary); color: #18181b; transform: translateY(-2px); } .lx-facilities-control svg { width: 18px; height: 18px; } .lx-facilities-index, .lx-facilities-total, .lx-facilities-separator { font-family: var(--lx-font-heading); font-size: 12px; font-weight: 700; letter-spacing: .08em; } .lx-facilities-index { margin-left: 8px; color: #18181b; } .lx-facilities-total, .lx-facilities-separator { color: #94a3b8; } .lx-facilities-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; min-width: 0; } .lx-facilities-grid .lx-image-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; padding: 0 !important; border: 0; border-radius: 0; background: #fff; box-shadow: 0 12px 32px rgba(15, 23, 42, .08); } .lx-facilities-grid .lx-image-card > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } .lx-facilities-grid .lx-image-card > div { display: flex; flex: 1; flex-direction: column; justify-content: flex-start; padding: 32px 36px 36px; } .lx-facilities-grid .lx-image-card h3 { margin: 0 0 20px; font-family: var(--lx-font-heading); font-size: 22px; font-weight: 700; line-height: 1.2; } .lx-facilities-grid .lx-image-card p { margin: 0; color: var(--lx-color-text-muted); line-height: 1.7; } .lx-facilities-grid .lx-image-card.is-selected { box-shadow: 0 0 0 2px var(--lx-color-primary), 0 12px 32px rgba(15, 23, 42, .08); } .lx-content-narrow { max-width: 760px; margin: 20px auto 0; text-align: center; line-height: 1.7; } .lx-dark-card { padding: 28px; border: 1px solid rgba(255,255,255,.18); } .lx-dark-card h3 { margin: 0 0 20px; color: #fff; font-size: 22px; } .lx-dark-card li { margin-bottom: 12px; color: rgba(255,255,255,.75); line-height: 1.6; } .lx-anchor-pills, .lx-blog-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; } .lx-anchor-pills a, .lx-blog-filter button { min-height: 42px; padding: 10px 16px; border: 1px solid var(--lx-color-border); border-radius: 999px; background: transparent; color: var(--lx-color-text-heading); font: inherit; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; } .lx-blog-filter button.is-active, .lx-blog-filter button:hover, .lx-anchor-pills a:hover { border-color: var(--lx-color-primary); background: var(--lx-color-primary); color: #18181b; } .lx-faq-hero .lx-action-group { margin-top: 20px; } .lx-faq-group .lx-section__head { margin-bottom: 20px; } .lx-faq-group .lx-section__head h2 { margin-bottom: 0; } .lx-blog-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 20px; } .lx-blog-card { overflow: hidden; display: flex; flex-direction: column; } .lx-blog-card > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; } .lx-blog-card .card__body { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 24px; } .lx-blog-card h3 { margin: 0; font-size: 18px; line-height: 1.25; } .lx-blog-card p { margin: 0; color: var(--lx-color-text-muted); font-size: 14px; line-height: 1.6; } .lx-blog-card time { color: var(--lx-color-text-muted); font-size: 12px; } .lx-blog-card .products-card__link { margin-top: auto; } .lx-blog-category { width: fit-content; color: var(--lx-color-primary); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .lx-blog-pagination { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: var(--lx-gap-20, 20px); padding-top: var(--lx-gap-20, 20px); border-top: 1px solid var(--lx-color-border); } .lx-blog-pagination .page-numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--lx-gap-8); margin: 0; padding: 0; list-style: none; } .lx-blog-pagination .page-numbers a, .lx-blog-pagination .page-numbers span { display: inline-flex; min-width: 40px; height: 40px; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--lx-color-border); color: var(--lx-color-text-heading); font-family: var(--lx-font-heading); font-size: 13px; font-weight: 700; line-height: 1; } .lx-blog-pagination .page-numbers a:hover, .lx-blog-pagination .page-numbers a:focus-visible, .lx-blog-pagination .page-numbers .current { border-color: var(--lx-color-primary); background: var(--lx-color-primary); color: #18181b; } .lx-blog-cta .lx-split { align-items: start; } .lx-blog-cta h3 { color: #fff; font-size: 24px; margin: 0; } .lx-newsletter form { display: flex; gap: 12px; margin-top: 20px; } .lx-newsletter input { min-height: 56px; min-width: 0; flex: 1; padding: 0 16px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; } .lx-newsletter small { display: block; margin-top: 12px; color: rgba(255,255,255,.6); } .lx-corporate-page .lx-privacy-hero { padding-block: 120px; background: var(--lx-gradient-primary); } .lx-privacy-hero .container { max-width: var(--lx-container-max, 1280px); } .lx-privacy-content .container { max-width: 860px; } .lx-privacy-hero .lx-corporate-breadcrumb, .lx-privacy-hero .lx-corporate-breadcrumb a, .lx-privacy-hero .lx-corporate-breadcrumb [aria-current="page"], .lx-privacy-hero h1, .lx-privacy-hero p { color: #fff; } .lx-privacy-hero .lx-corporate-breadcrumb { justify-content: center; margin-bottom: var(--lx-gap-32); text-shadow: 0 2px 4px rgba(122, 87, 0, .4); } .lx-privacy-hero h1 { margin: 0 0 var(--lx-gap-28); font-family: var(--lx-font-heading); text-align: center; text-shadow: 0 2px 8px rgba(122, 87, 0, .3), 0 1px 2px rgba(122, 87, 0, .2); } .lx-corporate-page .lx-privacy-hero p { max-width: 760px; margin: 0 auto; font-family: var(--lx-font-body); line-height: 1.75; text-align: center; text-shadow: 0 1px 4px rgba(122, 87, 0, .25); } .lx-corporate-page .lx-privacy-hero p + p { margin-top: var(--lx-gap-20, 20px); } .lx-privacy-updated { margin-bottom: var(--lx-gap-20, 20px) !important; color: rgba(255, 255, 255, .84) !important; font-family: var(--lx-font-heading) !important; font-size: var(--lx-fs-sm, 14px); font-weight: 700; letter-spacing: .04em; } .lx-privacy-content { padding-top: 0; padding-bottom: var(--lx-section-y, 80px); } .lx-privacy-content article { position: relative; isolation: isolate; padding-block: var(--lx-gap-40); border-bottom: 1px solid var(--lx-color-border); } .lx-privacy-content article::before { position: absolute; z-index: 0; inset: 0 auto 0 50%; width: 100vw; background: #fff; content: ''; transform: translateX(-50%); } .lx-privacy-content article:nth-child(even)::before { background: var(--lx-color-bg-soft); } .lx-privacy-content article > * { position: relative; z-index: 1; } .lx-privacy-content article:first-child { padding-top: 0; } .lx-privacy-content article:last-child { border-bottom: 0; } .lx-privacy-content h2 { margin: 0 0 var(--lx-gap-20, 20px); color: var(--lx-color-text-heading); font-family: var(--lx-font-heading); font-size: clamp(28px, 3vw, 40px); font-weight: 700; line-height: 1.1; } .lx-privacy-content h3 { margin: var(--lx-gap-28) 0 var(--lx-gap-12); color: var(--lx-color-text-heading); font-family: var(--lx-font-heading); font-size: 20px; font-weight: 700; line-height: 1.3; } .lx-privacy-content p, .lx-privacy-content li { color: var(--lx-color-text-body); font-family: var(--lx-font-body); font-size: var(--lx-fs-body, 16px); line-height: 1.75; } .lx-privacy-content p { margin: 0 0 var(--lx-gap-16); } .lx-privacy-content p:last-child { margin-bottom: 0; } .lx-privacy-content ul { display: grid; gap: var(--lx-gap-8); margin: 0 0 var(--lx-gap-20, 20px); padding-left: var(--lx-gap-24); } .lx-privacy-content a { color: var(--lx-color-primary-dark); text-decoration: underline; text-underline-offset: 3px; } .lx-privacy-contact { margin-top: var(--lx-gap-40); padding: var(--lx-gap-32) !important; border: 1px solid var(--lx-color-border); background: var(--lx-color-bg-soft); } @media (max-width: 1024px) { .lx-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lx-strength-layout { grid-template-columns: 1fr; } .lx-strength-visual img { min-height: 360px; max-height: 480px; } .lx-facilities-layout { grid-template-columns: 1fr; gap: 40px; } .lx-facilities-intro, .lx-facilities-grid { grid-column: auto; grid-row: auto; } .lx-facilities-intro { min-height: 0; } .lx-facilities-controls { margin-top: 0; padding-top: 28px; } } @media (max-width: 767px) { .lx-corporate-page .lx-corporate-section { padding-block: var(--lx-section-y-mobile, 40px); } .lx-corporate-hero { min-height: 600px; } .lx-corporate-hero__copy > p:not(.lx-eyebrow) { font-size: 16px; } .lx-stat-grid, .lx-stat-bar .lx-stat-grid, .lx-split, .lx-feature-grid--2, .lx-feature-grid--3, .lx-cert-grid, .lx-process-grid { grid-template-columns: 1fr; gap: 20px; } .lx-stat-grid { margin-top: 20px; } .lx-stat-bar .lx-stat-grid > div { width: 100%; } .lx-stat-bar .lx-stat-grid > div { padding: 20px 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.2); } .lx-stat-bar .lx-stat-grid > div:last-child { border-bottom: 0; } .lx-timeline { grid-template-columns: 1fr; gap: 20px; margin-top: 20px; } .lx-timeline::before { top: 0; bottom: 0; left: 6px; right: auto; width: 1px; height: auto; } .lx-timeline article { padding: 0 0 0 32px; } .lx-timeline article::before { top: 3px; left: 0; } .lx-gallery-grid { grid-template-columns: 1fr; gap: 20px; } .lx-gallery-grid img, .lx-gallery-grid img:first-child { height: 240px; } .lx-map-image { height: 200px; } .lx-anchor-pills, .lx-blog-filter { justify-content: flex-start; gap: 12px; margin-top: 20px; } .lx-blog-grid { grid-template-columns: 1fr; gap: 20px; } .lx-blog-card .card__body { padding: 20px; } .lx-newsletter form { flex-direction: column; gap: 20px; } .lx-privacy-hero { padding-block: 64px; } .lx-privacy-hero .lx-corporate-breadcrumb { margin-bottom: var(--lx-gap-20, 20px); } .lx-privacy-content { padding-top: 0; padding-bottom: var(--lx-section-y-mobile, 40px); } .lx-privacy-content article { padding-block: var(--lx-gap-32); } .lx-privacy-content h3 { margin-block: var(--lx-gap-20); } .lx-privacy-content p { margin-bottom: var(--lx-gap-20, 20px); } .lx-privacy-content ul { margin-bottom: var(--lx-gap-20, 20px); } .lx-privacy-contact { margin-top: var(--lx-gap-32); padding: var(--lx-gap-20, 20px) !important; } .lx-facilities-section { padding-block: var(--lx-section-y-mobile, 40px); } .lx-facilities-grid { grid-template-columns: 1fr; gap: 20px; } .lx-facilities-grid .lx-image-card > div { padding: 20px; } .lx-faq__trigger { padding-block: 20px; } .lx-faq__answer-inner { padding: 0 0 20px; } .lx-corporate-page .lx-section__head--stack h2 { margin-bottom: 0; } .lx-corporate-page .lx-section__head--stack p { margin-top: 20px; } .lx-corporate-page .lx-action-group { gap: 20px; margin-top: 20px; } .lx-corporate-page .lx-action-group .lx-btn { margin-top: 0; } } /* Corporate pages: use the shared 12-column grid and dark-surface contrast. */ .lx-corporate-page .lx-grid--12 { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--lx-gap-32); } .lx-corporate-page .lx-feature-grid, .lx-corporate-page .lx-process-grid { margin-top: 20px; } .lx-corporate-page .lx-feature-grid > .lx-col-6, .lx-corporate-page .lx-feature-grid > .lx-col-4, .lx-corporate-page .lx-process-grid > .lx-col-4, .lx-corporate-page .lx-cert-grid > .lx-col-3, .lx-corporate-page .lx-blog-grid > .lx-col-3 { min-width: 0; } .lx-corporate-page .lx-cert-grid { margin-top: 20px; } .lx-corporate-page .lx-strength-layout, .lx-corporate-page .lx-gallery-grid { margin-top: 20px; } .lx-corporate-page .lx-feature-grid h3, .lx-corporate-page .lx-process-grid h3 { margin-bottom: 20px; } .lx-corporate-page .lx-feature-grid h3 { font-weight: 700; } .lx-quality-control-section .lx-feature-grid > .card > .lx-quality-stage { display: block; margin: 0 0 12px; color: #b6b6b6; font-family: var(--lx-font-heading); font-size: clamp(22px, 2vw, 28px); font-weight: 400; line-height: 1; letter-spacing: 0; } .lx-quality-control-section .lx-feature-grid > .card > h3 { margin: 0 0 20px; } .lx-quality-control-section .lx-feature-grid > .card > .lx-quality-stage { color: #dedede; font-size: clamp(34px, 4vw, 44px); font-weight: 400; letter-spacing: 0; } .lx-quality-control-section .lx-feature-grid > .card > ul { margin: 0; padding: 0; list-style: none; } .lx-quality-control-section .lx-feature-grid > .card > ul > li { position: relative; margin-left: 0; padding-left: 16px; } .lx-quality-control-section .lx-feature-grid > .card > ul > li::before { position: absolute; top: 0; left: 0; color: currentColor; content: '•'; } .lx-corporate-page .lx-blog-card .card__body { gap: 20px; } .lx-corporate-page .section--dark .lx-heading-section, .lx-corporate-page .section--dark .lx-section__head h2, .lx-corporate-page .section--dark > .container > p, .lx-corporate-page .section--dark .lx-newsletter p { color: #fff; } .lx-corporate-page .section--dark .lx-section__head p, .lx-corporate-page .section--dark .lx-corporate-cta p, .lx-corporate-page .section--dark .lx-newsletter small { color: rgba(255, 255, 255, .78); } .lx-corporate-page .section--dark .lx-btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .7); } .lx-faq-page .lx-faq-group .lx-section__head { text-align: center; } .lx-faq-page .lx-faq__answer { height: 0; max-height: none; opacity: 0; overflow: hidden; transition: height .48s cubic-bezier(.22, 1, .36, 1), opacity .28s ease; } .lx-faq-page .lx-faq__answer-inner { transform: translateY(-5px); transition: transform .48s cubic-bezier(.22, 1, .36, 1); } .lx-faq-page .lx-faq__item.is-open .lx-faq__answer { opacity: 1; } .lx-faq-page .lx-faq__item.is-open .lx-faq__answer-inner { transform: translateY(0); } @media (max-width: 767px) { .lx-corporate-page .lx-grid--12 { gap: 20px; } .lx-corporate-page .lx-grid--12 > [class*="lx-col-"] { grid-column: 1 / -1; } .lx-corporate-page .lx-cert-grid--hero { margin-top: 20px; } } /* Banner compositions: About is centered by brief; Manufacturing stays left-aligned. */ .lx-about-hero .lx-corporate-hero__copy { max-width: 920px; margin-inline: auto; text-align: center; } .lx-about-hero .lx-corporate-hero__copy > p:not(.lx-eyebrow) { margin-inline: auto; } .lx-about-hero .lx-stat-grid { max-width: 780px; margin-inline: auto; } .lx-about-hero .lx-stat-grid > div { align-items: center; } .lx-manufacturing-hero .lx-corporate-hero__copy { max-width: 800px; } /* About Us timeline: an editorial two-sided milestone path. */ .lx-about-page .lx-timeline { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 80px; width: 100%; max-width: none; margin: 64px auto 0; } .lx-about-page .lx-timeline::before { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; height: auto; background: linear-gradient(to bottom, transparent, var(--lx-color-primary) 8%, var(--lx-color-primary) 92%, transparent); content: ''; transform: translateX(-50%); } .lx-about-page .lx-timeline article { position: relative; grid-column: 1; min-height: 190px; padding: 24px; border: 1px solid var(--lx-color-border); border-top: 3px solid var(--lx-color-primary); border-radius: 0; background: var(--lx-color-primary); box-shadow: 0 14px 30px rgba(24, 24, 27, .08); transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease; } .lx-about-page .lx-timeline article:nth-child(even) { grid-column: 2; } .lx-about-page .lx-timeline article:nth-child(odd)::before, .lx-about-page .lx-timeline article:nth-child(even)::before { position: absolute; top: 28px; width: 14px; height: 14px; border: 4px solid var(--lx-color-primary); border-radius: 50%; background: #fff; content: ''; box-shadow: 0 0 0 5px rgba(255, 185, 0, .14); } .lx-about-page .lx-timeline article:nth-child(odd)::before { right: -49px; } .lx-about-page .lx-timeline article:nth-child(even)::before { left: -49px; } .lx-about-page .lx-timeline article:nth-child(odd)::after, .lx-about-page .lx-timeline article:nth-child(even)::after { position: absolute; top: 35px; width: 40px; height: 1px; background: var(--lx-color-primary); content: ''; } .lx-about-page .lx-timeline article:nth-child(odd)::after { right: -40px; } .lx-about-page .lx-timeline article:nth-child(even)::after { left: -40px; } .lx-about-page .lx-timeline article:hover { background: #fff; box-shadow: 0 20px 36px rgba(24, 24, 27, .13); transform: translateY(-4px); } .lx-about-page .lx-timeline span { display: inline-block; padding: 6px 10px; background: #272727; color: var(--lx-color-primary); font-family: var(--lx-font-heading); font-size: 13px; font-weight: 700; letter-spacing: .04em; line-height: 1; } .lx-about-page .lx-timeline h3 { margin: 20px 0 16px; font-size: 20px; line-height: 1.2; } .lx-about-page .lx-timeline p { margin: 0; font-size: 14px; line-height: 1.7; } @media (max-width: 767px) { .lx-about-page .lx-timeline { grid-template-columns: 1fr; gap: 20px; margin-top: 20px; padding-left: 28px; } .lx-about-page .lx-timeline::before { top: 0; bottom: 0; left: 7px; width: 2px; transform: none; } .lx-about-page .lx-timeline article, .lx-about-page .lx-timeline article:nth-child(even) { grid-column: 1; min-height: 0; padding: 20px; } .lx-about-page .lx-timeline article:nth-child(odd)::before, .lx-about-page .lx-timeline article:nth-child(even)::before { top: 24px; left: -29px; right: auto; } .lx-about-page .lx-timeline article:nth-child(odd)::after, .lx-about-page .lx-timeline article:nth-child(even)::after { top: 31px; left: -28px; right: auto; width: 28px; } .lx-about-page .lx-timeline article:hover { transform: none; } .lx-about-page .lx-timeline h3 { margin: 20px 0; } } /* About Us timeline: horizontal milestone rail with alternating annotations. */ .lx-about-page .lx-timeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; position: relative; width: 100%; max-width: none; min-height: 420px; margin: 72px auto 0; padding: 0; } .lx-about-page .lx-timeline::before { position: absolute; top: 50%; right: 0; left: 0; width: auto; height: 1px; background: #a6a6a6; content: ''; transform: none; } .lx-about-page .lx-timeline article, .lx-about-page .lx-timeline article:nth-child(even) { position: relative; grid-column: auto; min-height: 420px; padding: 0 16px; border: 0; border-radius: 0; background: transparent; box-shadow: none; transform: none; } .lx-about-page .lx-timeline article::before, .lx-about-page .lx-timeline article:nth-child(odd)::before, .lx-about-page .lx-timeline article:nth-child(even)::before { position: absolute; top: calc(50% - 5px); left: 16px; width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--lx-color-primary); box-shadow: 0 0 0 3px rgba(255, 185, 0, .16); content: ''; z-index: 2; transform: none; } .lx-about-page .lx-timeline article::after, .lx-about-page .lx-timeline article:nth-child(odd)::after, .lx-about-page .lx-timeline article:nth-child(even)::after { position: absolute; top: calc(50% - 160px); left: 21px; display: block; width: 1px; height: 160px; background: #a6a6a6; content: ''; z-index: 1; transform: none; } .lx-about-page .lx-timeline article:nth-child(even)::after { top: 50%; } .lx-about-page .lx-timeline span, .lx-about-page .lx-timeline h3, .lx-about-page .lx-timeline p { position: absolute; right: 16px; left: 32px; } .lx-about-page .lx-timeline span { top: calc(50% - 180px); right: auto; left: 32px; width: max-content; padding: 6px 12px; border-radius: 999px; background: var(--lx-color-primary); color: #272727; font-family: var(--lx-font-heading); font-size: 13px; font-weight: 700; letter-spacing: .02em; line-height: 1; } .lx-about-page .lx-timeline h3 { top: calc(50% - 132px); margin: 0; font-size: 18px; line-height: 1.2; } .lx-about-page .lx-timeline p { top: calc(50% - 94px); margin: 0; color: var(--lx-color-text-muted); font-size: 14px; line-height: 1.55; } .lx-about-page .lx-timeline article:nth-child(even) span { top: calc(50% + 172px); } .lx-about-page .lx-timeline article:nth-child(even) h3 { top: calc(50% + 60px); } .lx-about-page .lx-timeline article:nth-child(even) p { top: calc(50% + 96px); } .lx-about-page .lx-timeline article:hover { background: transparent; box-shadow: none; } .lx-about-page .lx-timeline article:hover span { background: var(--lx-color-primary); } @media (max-width: 767px) { .lx-about-page .lx-timeline { display: grid; grid-template-columns: 1fr; gap: 20px; min-height: 0; margin-top: 20px; padding-left: 0; } .lx-about-page .lx-timeline::before { top: 8px; bottom: 8px; left: 5px; right: auto; width: 2px; height: auto; } .lx-about-page .lx-timeline article, .lx-about-page .lx-timeline article:nth-child(even) { grid-column: 1; min-height: 0; padding: 0 0 0 28px; } .lx-about-page .lx-timeline article::before, .lx-about-page .lx-timeline article:nth-child(odd)::before, .lx-about-page .lx-timeline article:nth-child(even)::before { top: 6px; left: 0; width: 12px; height: 12px; transform: none; } .lx-about-page .lx-timeline article::after, .lx-about-page .lx-timeline article:nth-child(odd)::after, .lx-about-page .lx-timeline article:nth-child(even)::after { display: none; } .lx-about-page .lx-timeline span, .lx-about-page .lx-timeline h3, .lx-about-page .lx-timeline p, .lx-about-page .lx-timeline article:nth-child(even) span, .lx-about-page .lx-timeline article:nth-child(even) h3, .lx-about-page .lx-timeline article:nth-child(even) p { position: static; display: block; } .lx-about-page .lx-timeline span { width: max-content; margin-bottom: 12px; } .lx-about-page .lx-timeline h3 { margin: 0 0 8px; } .lx-about-page .lx-timeline p { margin: 0; } } /* About Us capability cards: reuse the product-category card language without imagery. */ .lx-about-page .lx-strength-visual { display: none; } .lx-about-page .lx-strength-layout { display: block; } .lx-about-page .lx-strength-layout > .lx-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 32px; } .lx-about-page .lx-strength-layout > .lx-feature-grid > .card { grid-column: auto; min-width: 0; min-height: 100%; padding: 24px; border: 1px solid var(--lx-color-border, #e8e8ea); border-radius: 0; background: #fff; box-shadow: none; } .lx-about-page .lx-strength-layout > .lx-feature-grid > .card > i, .lx-about-page .lx-strength-layout > .lx-feature-grid > .card > svg { width: 28px; height: 28px; margin-bottom: 20px; color: var(--lx-color-primary); } .lx-about-page .lx-strength-layout > .lx-feature-grid > .card h3 { margin: 0 0 16px; font-size: 18px; font-weight: 800; line-height: 1.2; } .lx-about-page .lx-strength-layout > .lx-feature-grid > .card p { margin: 0; color: var(--lx-color-text-muted); font-size: 14px; line-height: 1.7; } @media (max-width: 1024px) { .lx-about-page .lx-strength-layout > .lx-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .lx-about-page section:has(> .container > .lx-strength-layout) > .container { display: flex; flex-direction: column; gap: 20px; } .lx-about-page section:has(> .container > .lx-strength-layout) .lx-strength-layout { margin-top: 0; } .lx-about-page section:has(> .container > .lx-strength-layout) .lx-section__head--split { display: grid; gap: 20px; margin-bottom: 0; } .lx-about-page section:has(> .container > .lx-strength-layout) .lx-section__head--split > p { max-width: none; } .lx-about-page section:has(> .container > .lx-strength-layout) .lx-strength-layout > .lx-feature-grid, .lx-about-page section:has(> .container > .lx-strength-layout) > .container > .lx-action-group { margin-top: 0; } .lx-about-page .lx-strength-layout > .lx-feature-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 0; } .lx-about-page .lx-strength-layout > .lx-feature-grid > .card { padding: 20px; } } /* About Us mission and vision: paired editorial statements. */ .lx-about-page .lx-mission-section { background: url('https://lx-cable.wxkntest.com/wp-content/uploads/2026/08/mission-vision-background-transmission-scaled.jpg') center / cover no-repeat fixed !important; } .lx-about-page .lx-mission-section .lx-section__head { margin-bottom: var(--lx-gap-40); } .lx-about-page .lx-mission-section .lx-section__head h2 { margin: 0; color: #fff; } /* About Us S08: remove the surface fill and top spacing from the sustainability split. */ .lx-about-page .lx-sustainability-section { background: #fff !important; background-image: none !important; padding-top: 0 !important; } /* About Us split sections: keep the body copy visually separated from its H2. */ .lx-about-page .lx-split-section .lx-heading-section, .lx-about-page .lx-sustainability-section .lx-heading-section { margin: 0 0 20px; } .lx-about-page .lx-mission-cards { align-items: stretch; } .lx-about-page .lx-mission-card { display: flex; min-height: 320px; flex-direction: column; justify-content: flex-start; gap: 20px; padding: var(--lx-gap-40); border: 0; border-radius: 0; color: #fff; } .lx-about-page .lx-mission-card--mission { background: var(--lx-color-primary, #fcb604); } .lx-about-page .lx-mission-card--vision { background: #606060; } .lx-about-page .lx-mission-card h3 { margin: 0; color: #fff; font-family: var(--lx-font-heading, Manrope, sans-serif); font-size: clamp(24px, 2.5vw, 32px); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; } .lx-about-page .lx-mission-card p { max-width: 560px; margin: 0; color: #fff; font-size: clamp(16px, 1.5vw, 18px); font-weight: 400; line-height: 1.75; } @media (max-width: 767px) { .lx-about-page .lx-mission-section .lx-section__head { margin-bottom: var(--lx-mobile-element-gap, 20px); } .lx-about-page .lx-mission-section { background-attachment: scroll !important; } .lx-about-page .lx-mission-card { min-height: 260px; justify-content: flex-start; gap: 20px; padding: 24px; } } /* Match the product-category card interior: compact body padding and a clear reading order. */ .lx-about-page .lx-strength-layout > .lx-feature-grid > .card { display: flex; flex-direction: column; gap: 20px; padding: 20px; } .lx-about-page .lx-strength-layout > .lx-feature-grid > .card > i, .lx-about-page .lx-strength-layout > .lx-feature-grid > .card > svg { flex: 0 0 28px; margin: 0; } .lx-about-page .lx-strength-layout > .lx-feature-grid > .card h3 { margin: 0; font-family: var(--lx-font-heading, Manrope, sans-serif); font-size: clamp(16px, 1.3vw, 18px); font-weight: 800; line-height: 1.15; letter-spacing: -.03em; } .lx-about-page .lx-strength-layout > .lx-feature-grid > .card p { margin: 0; } /* About Us capability section: align the split heading to the top and center its actions. */ .lx-about-page section:has(> .container > .lx-strength-layout) .lx-section__head--split { align-items: flex-start; } .lx-about-page section:has(> .container > .lx-strength-layout) > .container > .lx-action-group { justify-content: center; } /* About Us S07: make the three exhibition visuals readable image-and-copy cards. */ .lx-about-page .lx-s07-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 32px; } .lx-about-page .lx-s07-card { display: flex; min-width: 0; flex-direction: column; border: 1px solid var(--lx-color-border, #e8e8ea); border-radius: 0; background: #fff; box-shadow: none; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; } .lx-about-page .lx-s07-card > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } .lx-about-page .lx-s07-card > div { display: flex; min-height: 152px; flex: 1; flex-direction: column; gap: 20px; padding: 20px 20px 18px; } .lx-about-page .lx-s07-card h3 { margin: 0; color: var(--lx-color-text-heading, #18181b); font-family: var(--lx-font-heading, Manrope, sans-serif); font-size: clamp(16px, 1.3vw, 18px); font-weight: 800; line-height: 1.15; letter-spacing: -.03em; } .lx-about-page .lx-s07-card p { margin: 0; color: var(--lx-color-text-muted); font-size: 14px; line-height: 1.6; } .lx-about-page .lx-s07-card:hover { border-color: var(--lx-color-primary, #fcb604); box-shadow: 0 12px 26px rgba(122, 87, 0, .1); transform: translateY(-4px); } @media (max-width: 767px) { .lx-about-page .lx-s07-gallery { grid-template-columns: 1fr; gap: 20px; margin-top: 20px; } .lx-about-page .lx-s07-card > div { min-height: 0; padding: 20px; } .lx-about-page .lx-s07-card:hover { transform: none; } } /* About Us S06: use the homepage market-map composition with always-visible region copy. */ .lx-about-page .lx-about-market-section { background: #fff !important; } @media (min-width: 901px) { .lx-about-page .lx-about-market-section .lx-world-map { grid-column: 1 / span 8; grid-row: 1; } .lx-about-page .lx-about-market-section .lx-section__head { grid-column: 9 / span 4; grid-row: 1; } } @media (max-width: 900px) { .lx-about-page .lx-about-market-section .lx-world-map { order: 1; } .lx-about-page .lx-about-market-section .lx-section__head { order: 2; } } .lx-about-page .lx-about-market-section > .container > .lx-market-layout { align-items: center; } .lx-about-page .lx-about-market-section .lx-section__head { margin: 0; } .lx-about-page .lx-about-market-section .lx-world-map { margin: 0; } .lx-about-page .lx-about-market-section .lx-market-card { cursor: default; } .lx-about-page .lx-about-market-section .lx-market-card h3, .lx-about-page .lx-about-market-section .lx-market-card:hover h3 { margin: 0 0 10px; } .lx-about-page .lx-about-market-section .lx-market-card p, .lx-about-page .lx-about-market-section .lx-market-card:hover p { max-height: 150px; margin: 8px 0 0; opacity: 1; overflow: visible; } .lx-about-page .lx-about-market-section .lx-market-card:hover { transform: none !important; } .lx-about-page .lx-about-market-section .lx-section__head > .lx-action-group { margin-top: 20px; } .lx-about-page .lx-about-market-section .lx-section__head > .lx-action-group .lx-btn { margin-top: 0; } .lx-about-page .lx-about-market-section .lx-market-card--southeast-asia { left: 74.7%; top: 42%; margin: -28px 0 0 15px; } .lx-about-page .lx-about-market-section .lx-market-card--middle-east { left: 66.7%; top: 35%; margin: -54px 0 0 15px; } .lx-about-page .lx-about-market-section .lx-market-card--africa { left: 60.1%; top: 51%; margin: -28px 0 0 -235px; } .lx-about-page .lx-about-market-section .lx-market-card--south-america { left: 27.3%; top: 60%; margin: 15px 0 0 15px; background: #d1d5db; } .lx-about-page .lx-about-market-section .lx-market-card--southeast-asia::before, .lx-about-page .lx-about-market-section .lx-market-card--middle-east::before, .lx-about-page .lx-about-market-section .lx-market-card--africa::before, .lx-about-page .lx-about-market-section .lx-market-card--south-america::before { display: none; } @media (max-width: 900px) { .lx-about-page .lx-about-market-section .lx-market-card--southeast-asia, .lx-about-page .lx-about-market-section .lx-market-card--middle-east, .lx-about-page .lx-about-market-section .lx-market-card--africa, .lx-about-page .lx-about-market-section .lx-market-card--south-america { left: auto; top: auto; margin: 0 0 16px !important; } } .lx-corporate-page .lx-stat-grid, .lx-corporate-page .lx-stat-grid strong, .lx-corporate-page .lx-stat-grid span { font-family: var(--lx-font-heading); } .lx-corporate-page .lx-stat-grid strong { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; } .lx-corporate-page .lx-stat-grid span { font-weight: 600; } .lx-corporate-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 28px; color: var(--lx-color-text-muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .lx-corporate-breadcrumb a { color: inherit; text-decoration: none; } .lx-corporate-breadcrumb a:hover, .lx-corporate-breadcrumb a:focus-visible { color: var(--lx-color-primary); } .lx-corporate-breadcrumb [aria-current="page"] { color: var(--lx-color-text-heading); } .lx-corporate-hero .lx-corporate-breadcrumb { color: rgba(255,255,255,.72); } .lx-corporate-hero .lx-corporate-breadcrumb [aria-current="page"] { color: #fff; } .lx-corporate-hero .lx-corporate-breadcrumb a:hover, .lx-corporate-hero .lx-corporate-breadcrumb a:focus-visible { color: var(--lx-color-primary); } .lx-corporate-hero__certs { margin-block: 28px; } .lx-corporate-hero__certs .lx-hero__cert-img { height: 36px; } @media (max-width: 767px) { .lx-about-page .lx-corporate-hero { padding: 0 !important; } .lx-about-page .lx-corporate-hero .container { padding-block: 64px; } .lx-corporate-hero { min-height: 0; } .lx-corporate-hero .container { padding-block: 72px; } .lx-corporate-hero__copy h1 { max-width: 100%; } .lx-corporate-breadcrumb { margin-bottom: 20px; } .lx-corporate-hero .lx-btn { width: 100%; } .lx-corporate-page .lx-cert-grid--hero > .lx-col-3 { grid-column: span 6; } .lx-about-hero .lx-stat-grid { grid-template-columns: 1fr; } } /* Manufacturing S04: turn the dual-facility cards into alternating editorial bands. */ .lx-manufacturing-page section:has(> .container > .lx-feature-grid > .lx-image-card) .lx-section__head { max-width: 780px; margin-inline: auto; } .lx-manufacturing-page section:has(> .container > .lx-feature-grid > .lx-image-card) .lx-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; margin-inline: auto; gap: 20px; } .lx-manufacturing-page section:has(> .container > .lx-feature-grid > .lx-image-card) .lx-feature-grid > .lx-image-card { grid-column: auto; display: flex; flex-direction: column; min-height: 0; padding: 0 !important; border: 1px solid var(--lx-color-border); border-top: 3px solid var(--lx-color-primary); border-radius: 0; background: #fff; box-shadow: none; } .lx-manufacturing-page section:has(> .container > .lx-feature-grid > .lx-image-card) .lx-feature-grid > .lx-image-card > img { display: block; width: 100%; height: auto; min-height: 0; aspect-ratio: 16 / 9; object-fit: cover; } .lx-manufacturing-page section:has(> .container > .lx-feature-grid > .lx-image-card) .lx-feature-grid > .lx-image-card > div { display: flex; flex: 1; flex-direction: column; justify-content: center; padding: 24px; } .lx-manufacturing-page section:has(> .container > .lx-feature-grid > .lx-image-card) .lx-feature-grid > .lx-image-card h3 { margin: 0 0 16px; font-family: var(--lx-font-heading); font-size: clamp(20px, 2vw, 24px); font-weight: 700; line-height: 1.2; } .lx-manufacturing-page section:has(> .container > .lx-feature-grid > .lx-image-card) .lx-feature-grid > .lx-image-card p { margin: 0; max-width: 520px; line-height: 1.75; } @media (max-width: 767px) { .lx-manufacturing-page section:has(> .container > .lx-feature-grid > .lx-image-card) .lx-feature-grid { grid-template-columns: 1fr; } .lx-manufacturing-page section:has(> .container > .lx-feature-grid > .lx-image-card) .lx-feature-grid > .lx-image-card, .lx-manufacturing-page section:has(> .container > .lx-feature-grid > .lx-image-card) .lx-feature-grid > .lx-image-card:nth-child(2) { grid-column: 1 / -1; display: flex; flex-direction: column; min-height: 0; } .lx-manufacturing-page section:has(> .container > .lx-feature-grid > .lx-image-card) .lx-feature-grid > .lx-image-card:nth-child(2) > img, .lx-manufacturing-page section:has(> .container > .lx-feature-grid > .lx-image-card) .lx-feature-grid > .lx-image-card:nth-child(2) > div { grid-column: auto; grid-row: auto; } .lx-manufacturing-page section:has(> .container > .lx-feature-grid > .lx-image-card) .lx-feature-grid > .lx-image-card > img { height: auto; min-height: 0; aspect-ratio: 16 / 9; } .lx-manufacturing-page section:has(> .container > .lx-feature-grid > .lx-image-card) .lx-feature-grid > .lx-image-card > div { padding: 20px; } .lx-manufacturing-page section:has(> .container > .lx-feature-grid > .lx-image-card) .lx-feature-grid > .lx-image-card h3 { margin-bottom: 20px; font-size: 22px; } } /* Manufacturing S06: full-bleed engineering split with the visual filling the left half. */ .lx-manufacturing-page section:has(> .container.lx-split > .lx-media-frame) { padding-block: 0 !important; background: #272727; } .lx-manufacturing-page section:has(> .container.lx-split > .lx-media-frame) > .container.lx-split { width: 100% !important; max-width: none !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding-inline: 0 !important; align-items: stretch; } .lx-manufacturing-page section:has(> .container.lx-split > .lx-media-frame) .lx-media-frame { height: auto; min-height: 0; align-self: start; } .lx-manufacturing-page section:has(> .container.lx-split > .lx-media-frame) .lx-media-frame img { height: auto; min-height: 0; aspect-ratio: 16 / 9; object-fit: cover; } .lx-manufacturing-page section:has(> .container.lx-split > .lx-media-frame) .lx-split > div { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--lx-gap-20, 20px); padding: 64px; } .lx-manufacturing-page section:has(> .container.lx-split > .lx-media-frame) .lx-split > div { background: #272727; color: #fff; } .lx-manufacturing-page section:has(> .container.lx-split > .lx-media-frame) .lx-split > div h2 { margin: 0; color: #fff; } .lx-manufacturing-page section:has(> .container.lx-split > .lx-media-frame) .lx-split > div p { color: rgba(255,255,255,.78); } .lx-manufacturing-page section:has(> .container.lx-split > .lx-media-frame) .lx-split > div p { margin: 0; } .lx-manufacturing-page section:has(> .container.lx-split > .lx-media-frame) .lx-split > div ul { display: flex; flex-direction: column; gap: var(--lx-gap-16); margin: 0; padding: 0; list-style: none; } .lx-manufacturing-page section:has(> .container.lx-split > .lx-media-frame) .lx-split > div li { position: relative; margin: 0; padding-left: 28px; color: rgba(255,255,255,.78); line-height: 1.6; } .lx-manufacturing-page section:has(> .container.lx-split > .lx-media-frame) .lx-split > div li:last-child { margin-bottom: 0; } .lx-manufacturing-page section:has(> .container.lx-split > .lx-media-frame) .lx-split > div li > i, .lx-manufacturing-page section:has(> .container.lx-split > .lx-media-frame) .lx-split > div li > svg { position: absolute; top: .2em; left: 0; width: 18px; height: 18px; color: var(--lx-color-primary); stroke-width: 2; } @media (max-width: 767px) { .lx-manufacturing-page section:has(> .container.lx-split > .lx-media-frame) > .container.lx-split { grid-template-columns: 1fr; } .lx-manufacturing-page section:has(> .container.lx-split > .lx-media-frame) .lx-media-frame { min-height: 0; } .lx-manufacturing-page section:has(> .container.lx-split > .lx-media-frame) .lx-media-frame img { height: auto; min-height: 0; aspect-ratio: 16 / 9; } .lx-manufacturing-page section:has(> .container.lx-split > .lx-media-frame) .lx-split > div { padding: 40px 20px; } } /* Manufacturing S08: white editorial intro with stacked OEM/ODM capability cards. */ .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) { border-top: 1px solid var(--lx-color-border); border-bottom: 1px solid var(--lx-color-border); background: #fff; color: var(--lx-color-text-heading); } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) > .container { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); grid-template-rows: auto auto; gap: 20px 40px; align-items: start; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-section__head { grid-column: 1; grid-row: 1; margin: 0; align-items: flex-start; text-align: left; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-section__head h2 { margin: 0; color: var(--lx-color-text-heading); } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-section__head p { max-width: 560px; margin: 20px 0 0; color: var(--lx-color-text-muted); } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid { grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-columns: 1fr; gap: 20px; margin: 0; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card { grid-column: 1 / -1; padding: 40px 24px; border: 1px solid var(--lx-color-border); border-left: 4px solid var(--lx-color-primary); border-radius: 0; background: #f1f1f1; box-shadow: none; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-dark-card h3 { margin: 0 0 16px; color: var(--lx-color-text-heading); font-family: var(--lx-font-heading); font-size: clamp(24px, 2.4vw, 28px); font-weight: 700; line-height: 1.2; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-dark-card h3 .lx-card-keyword { color: var(--lx-color-primary); } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-dark-card ul { margin: 0; padding: 0; list-style: none; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-dark-card li { position: relative; margin: 0 0 8px; padding-left: 28px; color: var(--lx-color-text-muted); line-height: 1.6; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-dark-card li:last-child { margin-bottom: 0; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-dark-card li > i, .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-dark-card li > svg { position: absolute; top: .2em; left: 0; width: 18px; height: 18px; color: var(--lx-color-primary); stroke-width: 2; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:first-child { border-color: #272727; border-left: 1px solid #272727; border-top: 4px solid var(--lx-color-primary); background: #272727; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:not(:first-child) { border-left: 1px solid var(--lx-color-border); border-top: 4px solid var(--lx-color-primary); } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:not(:first-child) { box-shadow: 0 18px 40px rgba(24, 24, 27, .12); } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:first-child h3 { color: #fff; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:first-child li { color: rgba(255,255,255,.78); } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-action-group { grid-column: 1; grid-row: 2; justify-content: flex-start; margin: 0; align-self: start; } @media (min-width: 768px) { .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:first-child { width: calc(100% + 32px); margin: 0 0 0 -16px; padding: 40px; position: relative; z-index: 1; } } @media (max-width: 767px) { .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) > .container { grid-template-columns: 1fr; grid-template-rows: auto; gap: 20px; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-section__head { grid-column: 1; grid-row: 1; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-action-group { grid-column: 1; grid-row: 2; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-action-group .lx-btn { width: 100%; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid { grid-column: 1; grid-row: 3; gap: 20px; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card { padding: 20px; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:first-child { width: auto; min-height: 0; margin: 0; } } /* Keep the S08 intro and CTA together so the button follows the description. */ .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) > .container { grid-template-rows: auto; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) > .container > .lx-s08-intro { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) > .container > .lx-s08-intro .lx-section__head { grid-column: auto; grid-row: auto; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) > .container > .lx-s08-intro .lx-action-group { grid-column: auto; grid-row: auto; margin: 0; align-self: flex-start; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid { grid-row: 1; align-self: start; } @media (max-width: 767px) { .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) > .container > .lx-s08-intro { grid-column: 1; grid-row: 1; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid { grid-column: 1; grid-row: 2; } } /* S08 hierarchy: OEM is the featured manufacturing capability; ODM is the supporting development capability. */ @media (min-width: 768px) { .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:first-child { border-top-width: 6px; box-shadow: 0 16px 32px rgba(39,39,39,.14); } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:first-child ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 8px; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:first-child li { margin-bottom: 0; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:not(:first-child) { width: 100%; padding: 40px; border-top-width: 2px; background: #fff; } } @media (max-width: 767px) { .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:first-child ul { display: block; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:first-child li { margin-bottom: 8px; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:not(:first-child) { background: #fff; } } /* S08 editorial cards: separate the primary OEM capability from the supporting ODM capability. */ @media (min-width: 768px) { .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:first-child { display: grid; grid-template-columns: minmax(180px, .65fr) minmax(0, 1.35fr); column-gap: 48px; align-items: start; padding: 40px; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:first-child h3 { margin: 0; font-size: clamp(28px, 2.8vw, 34px); } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:first-child ul { display: block; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:first-child li { margin-bottom: 12px; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:not(:first-child) { display: grid; grid-template-columns: minmax(180px, .65fr) minmax(0, 1.35fr); column-gap: 48px; align-items: start; padding: 40px; background: #fff; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:not(:first-child) h3 { margin: 0; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:not(:first-child) ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 8px; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:not(:first-child) li { margin-bottom: 0; } } @media (max-width: 767px) { .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:first-child, .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:not(:first-child) { display: block; padding: 20px; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:first-child h3, .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:not(:first-child) h3 { margin-bottom: 16px; font-size: 24px; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:not(:first-child) ul { display: block; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:not(:first-child) li { margin-bottom: 8px; } } /* Shared banner and breadcrumb rules: readable title case, consistent content width. */ .lx-corporate-hero__copy, .lx-utility-hero__copy, .lx-category-template__hero-copy { width: 80%; max-width: none; } .lx-corporate-hero__copy > .lx-eyebrow, .lx-category-template__hero-copy > .lx-text-eyebrow { display: none; } .lx-corporate-breadcrumb, .lx-utility-breadcrumb, .lx-category-template__breadcrumb, .lx-bomflex-breadcrumb, .lx-breadcrumbs, .wxkn-breadcrumb { text-transform: none; } @media (max-width: 767px) { .lx-corporate-hero__copy, .lx-utility-hero__copy, .lx-category-template__hero-copy { width: 100%; } } /* Manufacturing stats: content-width cards with dividers centered in the flexible gaps. */ .lx-manufacturing-page .lx-stat-bar .lx-stat-grid { grid-template-columns: max-content minmax(32px, 1fr) max-content minmax(32px, 1fr) max-content minmax(32px, 1fr) max-content; column-gap: 0; align-items: stretch; justify-content: space-between; } .lx-manufacturing-page .lx-stat-bar .lx-stat-grid > div { width: auto; min-width: max-content; padding-inline: 0; border-right: 0; } .lx-manufacturing-page .lx-stat-bar .lx-stat-divider { display: block; width: 1px; min-height: 56px; align-self: center; background: rgba(255, 255, 255, .22); } @media (max-width: 767px) { .lx-manufacturing-page .lx-stat-bar .lx-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0; } .lx-manufacturing-page .lx-stat-bar .lx-stat-grid > div { width: 100%; min-width: 0; padding: 20px 0; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .2); } .lx-manufacturing-page .lx-stat-bar .lx-stat-grid > div:nth-of-type(odd) { border-right: 1px solid rgba(255, 255, 255, .2); } .lx-manufacturing-page .lx-stat-bar .lx-stat-grid > div:nth-of-type(n+3) { border-bottom: 0; } .lx-manufacturing-page .lx-stat-bar .lx-stat-divider { display: none; } } /* About Us data bar: use the same content-width layout as Manufacturing. */ .lx-about-page .lx-stat-bar .lx-stat-grid { grid-template-columns: max-content minmax(32px, 1fr) max-content minmax(32px, 1fr) max-content; column-gap: 0; align-items: stretch; justify-content: space-between; } .lx-about-page .lx-stat-bar .lx-stat-grid > div { width: auto; min-width: max-content; padding-inline: 0; border-right: 0; } .lx-about-page .lx-stat-bar .lx-stat-divider { display: block; width: 1px; min-height: 56px; align-self: center; background: rgba(255, 255, 255, .22); } .lx-about-hero .lx-corporate-breadcrumb { justify-content: center; } @media (min-width: 768px) { .lx-about-hero { min-height: 720px; } } @media (max-width: 767px) { .lx-about-page .lx-stat-bar .lx-stat-grid { grid-template-columns: 1fr; row-gap: 0; } .lx-about-page .lx-stat-bar .lx-stat-grid > div { width: 100%; min-width: 0; padding: 20px 0; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .2); } .lx-about-page .lx-stat-bar .lx-stat-grid > div:last-child { border-bottom: 0; } .lx-about-page .lx-stat-bar .lx-stat-divider { display: none; } } /* S09 quality-control cards: add a soft, natural elevation on the light surface. */ .lx-quality-control-section .lx-feature-grid > .card { box-shadow: 0 10px 26px rgba(24, 24, 27, .10); } /* S10 certification cards: keep the four-card group clean without outer borders. */ .lx-manufacturing-page .lx-cert-grid:not(.lx-cert-grid--hero) > * { border: 0; } /* Manufacturing banner: center the complete content group. */ .lx-manufacturing-hero .lx-corporate-hero__copy { margin-inline: auto; text-align: center; } .lx-manufacturing-hero .lx-corporate-breadcrumb { justify-content: center; } .lx-manufacturing-hero .lx-corporate-hero__copy > p:not(.lx-eyebrow) { margin-inline: auto; } .lx-manufacturing-hero .lx-corporate-hero__certs { justify-content: center; } .lx-manufacturing-hero .lx-corporate-hero__copy > .lx-btn { align-self: center; } .lx-bomflex-page .lx-manufacturing-hero .lx-bomflex-hero__badges { margin-inline: auto; } /* BOMFLEX stats: keep the commitments in a separate content-width bar, like Manufacturing. */ .lx-bomflex-page .lx-stat-bar .lx-stat-grid { grid-template-columns: max-content minmax(32px, 1fr) max-content minmax(32px, 1fr) max-content; column-gap: 0; align-items: stretch; justify-content: space-between; } .lx-bomflex-page .lx-stat-bar .lx-stat-grid > div { width: auto; min-width: max-content; padding-inline: 0; border-right: 0; } .lx-bomflex-page .lx-stat-bar .lx-stat-divider { display: block; width: 1px; min-height: 56px; align-self: center; background: rgba(255, 255, 255, .22); } .lx-bomflex-page .lx-stat-bar > .container.lx-stat-grid { width: min(var(--lx-container-max), calc(100% - var(--lx-container-pad) * 2)); max-width: none; padding-inline: 0; margin-inline: auto; justify-items: center; } .lx-bomflex-page .lx-stat-bar { background: #606060; color: #fff; } .lx-bomflex-page .lx-stat-bar .lx-stat-grid, .lx-bomflex-page .lx-stat-bar .lx-stat-grid strong, .lx-bomflex-page .lx-stat-bar .lx-stat-grid span { color: #fff; font-family: var(--lx-font-heading); } .lx-bomflex-page .lx-stat-bar .lx-stat-grid > div { align-items: center; } @media (max-width: 767px) { .lx-bomflex-page .lx-stat-bar .lx-stat-grid { grid-template-columns: 1fr; row-gap: 0; } .lx-bomflex-page .lx-stat-bar .lx-stat-grid > div { width: 100%; min-width: 0; padding: 20px 0; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .2); } .lx-bomflex-page .lx-stat-bar .lx-stat-grid > div:last-child { border-bottom: 0; } .lx-bomflex-page .lx-stat-bar .lx-stat-divider { display: none; } } @media (max-width: 767px) { .lx-bomflex-page .lx-manufacturing-hero .container { padding-top: 56px; padding-bottom: 0; } .lx-bomflex-page .lx-bomflex-hero__actions { margin-top: 0; gap: 0; } .lx-bomflex-page .lx-section__head { gap: 20px; margin-bottom: 20px; } .lx-bomflex-page .lx-section__head h2 { margin-bottom: 0; } .lx-bomflex-page .lx-section__head--stack p { margin-top: 20px; } .lx-bomflex-page .lx-bomflex-pain-grid, .section-bomflex-scope .lx-bomflex-scope-grid, .section-bomflex-advantages .lx-feature-grid { gap: 20px; margin-top: 20px; } .section-bomflex-pain-points .lx-bomflex-pain-card { padding: 20px 20px 24px; } .section-bomflex-intro .lx-bomflex-intro__header { margin-bottom: 20px; } .section-bomflex-intro .lx-bomflex-intro__core { row-gap: 20px; } .section-bomflex-intro .lx-bomflex-intro__types { margin-top: 20px; } .section-bomflex-intro .lx-bomflex-intro__types .lx-bomflex-service-cards { gap: 20px; margin-top: 20px; } .section-bomflex-standards { background-attachment: scroll; } .section-bomflex-standards .lx-bomflex-standards__grid { display: flex; flex-direction: column; gap: 20px; } .section-bomflex-standards .lx-bomflex-table-wrap { order: 1; width: 100%; max-width: 100%; min-width: 0; -webkit-overflow-scrolling: touch; } .section-bomflex-standards .lx-bomflex-table { min-width: 560px; } .section-bomflex-standards .lx-bomflex-table th, .section-bomflex-standards .lx-bomflex-table td { padding: 10px 12px; } .section-bomflex-standards .lx-bomflex-standards__copy { order: 2; } .section-bomflex-standards .lx-bomflex-standards__copy h2 { margin-bottom: 20px; } .section-bomflex-standards .lx-bomflex-standards__copy > p { margin: 0 0 20px; } .section-bomflex-standards .lx-bomflex-standards__list { margin-top: 20px; } .section-bomflex-scope .lx-bomflex-scope-card, .section-bomflex-scope .lx-bomflex-scope-card .card__body, .section-bomflex-scope .lx-bomflex-scope-card--cta .card__body { height: auto; min-height: 0; } .section-bomflex-scope .lx-bomflex-scope-card--cta .lx-btn { margin-top: 20px; } .section-bomflex-process { padding-block: 0; } .section-bomflex-process > .container { width: 100% !important; max-width: 100% !important; padding-top: 0; padding-bottom: 40px; padding-left: 20px; padding-right: 20px; } .section-bomflex-process .lx-bomflex-process__grid { gap: 0; margin-top: 20px; border-top: 1px solid #bdbdbd; } .section-bomflex-process .lx-bomflex-process__step, .section-bomflex-process .lx-bomflex-process__step:hover, .section-bomflex-process .lx-bomflex-process__step:focus-visible, .section-bomflex-process .lx-bomflex-process__step.is-open { min-height: 0; padding: 20px 0 32px; border-top: 0; border-right: 0; border-bottom: 1px solid #bdbdbd; border-left: 0; cursor: pointer; } .section-bomflex-process .lx-bomflex-process__grid:not(:has(.lx-bomflex-process__step:hover, .lx-bomflex-process__step:focus-visible, .lx-bomflex-process__step.is-auto-active)) .lx-bomflex-process__step:first-child { padding-left: 0 !important; padding-right: 0 !important; } .section-bomflex-process .lx-bomflex-process__step:last-child { border-bottom: 0; } .section-bomflex-process .lx-bomflex-process__step::after { display: block; content: ""; position: absolute; top: 28px; right: 0; width: 10px; height: 10px; border-right: 2px solid #171717; border-bottom: 2px solid #171717; transform: rotate(45deg); transition: top 0.3s ease, transform 0.3s ease; } .section-bomflex-process .lx-bomflex-process__step.is-open::after { top: 32px; transform: rotate(-135deg); } .section-bomflex-process .lx-bomflex-process__number { margin: 0 0 12px; font-size: 40px; } .section-bomflex-faq .lx-faq__layout { gap: 20px; } .section-bomflex-process .lx-bomflex-process__copy { display: block; padding-right: 0; padding-bottom: 16px; } .section-bomflex-process .lx-bomflex-process__step:not(.is-open) .lx-bomflex-process__copy p, .section-bomflex-process .lx-bomflex-process__step:not(.is-open):hover .lx-bomflex-process__copy p, .section-bomflex-process .lx-bomflex-process__step:not(.is-open):focus-visible .lx-bomflex-process__copy p, .section-bomflex-process .lx-bomflex-process__step:not(.is-open).is-auto-active .lx-bomflex-process__copy p { max-height: 0 !important; margin-top: 0 !important; overflow: hidden; opacity: 0 !important; } .section-bomflex-process .lx-bomflex-process__step.is-open .lx-bomflex-process__copy p, .section-bomflex-process .lx-bomflex-process__step.is-open:hover .lx-bomflex-process__copy p, .section-bomflex-process .lx-bomflex-process__step.is-open:focus-visible .lx-bomflex-process__copy p { max-height: 260px !important; margin-top: 20px !important; overflow: visible; opacity: 1 !important; } } /* S08 OEM/ODM section: strengthen the top divider for clearer separation. */ .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) { border-top-color: #606060; } @media (min-width: 768px) { .lx-manufacturing-hero { min-height: 720px; } .lx-quality-control-section .lx-feature-grid { margin-top: 40px; } .lx-quality-control-section .lx-section__head--center p { max-width: 900px; } } /* Readability pass: keep each card on a clear top-to-bottom reading path. */ @media (min-width: 768px) { .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:first-child, .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:not(:first-child) { display: block; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:first-child h3, .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:not(:first-child) h3 { margin: 0 0 20px; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:first-child ul, .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:not(:first-child) ul { display: block; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:first-child li, .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:not(:first-child) li { margin-bottom: 12px; } } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:nth-child(2) { border-color: var(--lx-color-primary); border-top-width: 6px; border-right: 0; border-bottom: 0; border-left: 0; background: #fff; } @media (min-width: 768px) { .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:nth-child(2) { width: calc(100% + 32px); margin: 0 0 0 -16px; padding: 40px; position: relative; z-index: 1; } } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:nth-child(2) h3, .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:nth-child(2) li { color: #18181b; } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:nth-child(2) h3 .lx-card-keyword { color: var(--lx-color-primary); } .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:nth-child(2) li > i, .lx-manufacturing-page .section--dark.lx-corporate-section:has(.lx-dark-card) .lx-feature-grid > .lx-dark-card:nth-child(2) li > svg { color: #18181b; } /* About Us S07: editorial industry showcase with left copy and a single large image. */ .lx-about-page .lx-s07-section { background: #fff; border-top: 1px solid #b6b6b6; } .lx-about-page .lx-s07-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--lx-gap-32); align-items: stretch; } .lx-about-page .lx-s07-copy { display: flex; grid-column: span 5; min-height: clamp(560px, 42vw, 760px); flex-direction: column; justify-content: flex-start; } .lx-about-page .lx-s07-copy .lx-section__head { display: block; max-width: 560px; margin: 0; } .lx-about-page .lx-s07-copy .lx-section__head h2 { margin: 0 0 20px; } .lx-about-page .lx-s07-copy .lx-section__head p { margin: 0; max-width: 520px; } .lx-about-page .lx-s07-captions { position: relative; min-height: 126px; margin-top: auto; padding-top: 28px; border-top: 1px solid var(--lx-color-border, #e5e5e5); } .lx-about-page .lx-s07-caption { display: none; } .lx-about-page .lx-s07-caption.is-active { display: block; } .lx-about-page .lx-s07-caption h3 { margin: 0 0 12px; color: var(--lx-color-text-heading, #18181b); font-family: var(--lx-font-heading, Manrope, sans-serif); font-size: clamp(18px, 1.5vw, 22px); font-weight: 800; line-height: 1.2; letter-spacing: -.03em; } .lx-about-page .lx-s07-caption p { max-width: 560px; margin: 0; color: var(--lx-color-text-muted, #626776); font-size: 15px; line-height: 1.6; } .lx-about-page .lx-s07-controls { display: flex; align-items: center; gap: 10px; margin-top: 20px; } .lx-about-page .lx-s07-control { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: #f1f1f1; color: var(--lx-color-text-heading, #18181b); cursor: pointer; transition: background-color .25s ease, color .25s ease; } .lx-about-page .lx-s07-control--next { background: var(--lx-color-primary, #fcb604); color: var(--lx-color-bg-dark, #272727); } .lx-about-page .lx-s07-control:hover, .lx-about-page .lx-s07-control:focus-visible { background: var(--lx-color-primary, #fcb604); color: var(--lx-color-bg-dark, #272727); } .lx-about-page .lx-s07-control svg { width: 16px; height: 16px; } .lx-about-page .lx-s07-counter { margin-left: 10px; color: var(--lx-color-text-muted, #626776); font-family: var(--lx-font-heading, Manrope, sans-serif); font-size: 12px; font-weight: 700; letter-spacing: .08em; } .lx-about-page .lx-s07-media { position: relative; grid-column: span 7; min-height: clamp(560px, 42vw, 760px); overflow: hidden; } .lx-about-page .lx-s07-slide { position: absolute; inset: 0; margin: 0; opacity: 0; pointer-events: none; transition: opacity .35s ease; } .lx-about-page .lx-s07-slide.is-active { opacity: 1; pointer-events: auto; } .lx-about-page .lx-s07-slide img { display: block; width: 100%; height: 100%; border-radius: 0; object-fit: cover; } @media (max-width: 900px) { .lx-about-page .lx-s07-layout { grid-template-columns: 1fr; gap: var(--lx-mobile-element-gap, 20px); } .lx-about-page .lx-s07-copy, .lx-about-page .lx-s07-media { grid-column: 1 / -1; } } @media (max-width: 767px) { .lx-about-page .lx-s07-layout { grid-template-columns: 1fr; gap: var(--lx-mobile-element-gap, 20px); } .lx-about-page .lx-s07-copy, .lx-about-page .lx-s07-media { grid-column: 1 / -1; min-height: 0; } .lx-about-page .lx-s07-media { order: 1; } .lx-about-page .lx-s07-copy { order: 2; } .lx-about-page .lx-s07-copy .lx-section__head h2 { margin-bottom: 20px; } .lx-about-page .lx-s07-captions { min-height: 0; margin-top: 20px; } .lx-about-page .lx-s07-media { min-height: 0; aspect-ratio: 4 / 3; } } /* Manufacturing S02: scroll-led production story with a pinned visual panel. */ .lx-manufacturing-page .lx-process-section { padding: 0 !important; background: #fff; } .lx-manufacturing-page .lx-process-section > .container { display: grid !important; grid-template-columns: minmax(300px, .86fr) minmax(0, 1.14fr) !important; gap: 64px !important; align-items: start; min-height: 100vh; padding-top: 96px; } .lx-manufacturing-page .lx-process-story { grid-column: 1; display: flex; flex-direction: column; min-width: 0; } .lx-manufacturing-page .lx-process-story .lx-section__head { display: block; margin: 0 0 72px !important; text-align: left; } .lx-manufacturing-page .lx-process-story .lx-section__head h2, .lx-manufacturing-page .lx-process-story .lx-section__head p { text-align: left; } .lx-manufacturing-page .lx-process-story .lx-process-grid { position: relative; display: flex !important; grid-column: auto !important; grid-row: auto !important; flex-direction: column; gap: 0 !important; margin: 0 !important; padding: 0 0 0 56px !important; } .lx-manufacturing-page .lx-process-story .lx-process-grid::before { position: absolute; top: 18px; bottom: 64px; left: 17px; width: 1px; background: #dfe3e8; content: ''; } .lx-manufacturing-page .lx-process-story .lx-process-grid .card { position: relative; flex: 0 0 auto; min-height: 0; margin: 0 !important; padding: 0 0 52px !important; border: 0; border-radius: 0; background: transparent !important; box-shadow: none; opacity: .42; overflow: visible; transition: opacity .35s ease; } .lx-manufacturing-page .lx-process-story .lx-process-grid .card.is-complete { opacity: .62; } .lx-manufacturing-page .lx-process-story .lx-process-grid .card.is-active { opacity: 1; } .lx-manufacturing-page .lx-process-story .lx-process-grid .card h3 { margin: 0 0 12px !important; color: var(--lx-color-text-heading, #18181b); font-size: clamp(20px, 1.8vw, 26px); line-height: 1.15; } .lx-manufacturing-page .lx-process-story .lx-process-grid .card p { max-width: 520px; max-height: 0; margin: 0; color: var(--lx-color-text-muted, #626776); line-height: 1.7; opacity: 0; overflow: hidden; transition: max-height .45s ease, opacity .3s ease; } .lx-manufacturing-page .lx-process-story .lx-process-grid .card.is-active p { max-height: 180px; opacity: 1; } .lx-manufacturing-page .lx-process-story .lx-step-number { position: absolute; top: -1px; left: -56px; z-index: 1; display: flex !important; width: 36px; height: 36px; align-items: center; justify-content: center; padding: 0; border: 1px solid #dfe3e8; border-radius: 50%; background: #fff; color: #737983 !important; font-family: var(--lx-font-heading); font-size: 12px !important; font-weight: 800; line-height: 1; transition: border-color .35s ease, background-color .35s ease, color .35s ease; } .lx-manufacturing-page .lx-process-story .card.is-complete .lx-step-number, .lx-manufacturing-page .lx-process-story .card.is-active .lx-step-number { border-color: var(--lx-color-primary); background: var(--lx-color-primary); color: #18181b !important; } .lx-manufacturing-page .lx-process-story .lx-action-group { justify-content: flex-start; margin: 12px 0 0 !important; } .lx-manufacturing-page .lx-process-visual { position: sticky; top: 96px; grid-column: 2; grid-row: 1; align-self: start; width: 100%; height: calc(100vh - 96px); min-height: 640px; overflow: hidden; background: #e9edf2; } .lx-manufacturing-page .lx-process-visual__frame { position: relative; width: 100%; height: 100%; overflow: hidden; background: #e9edf2; } .lx-manufacturing-page .lx-process-visual__frame::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24, 24, 27, .04), rgba(24, 24, 27, .28)); content: ''; pointer-events: none; } .lx-manufacturing-page .lx-process-visual__frame img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.03); transition: opacity .55s ease, transform .8s ease; } .lx-manufacturing-page .lx-process-visual__frame img.is-active { opacity: 1; transform: scale(1); } .lx-manufacturing-page .lx-process-visual__index { position: absolute; right: 24px; bottom: 24px; z-index: 1; padding: 10px 14px; background: rgba(24, 24, 27, .76); color: #fff; font-family: var(--lx-font-heading); font-size: 12px; font-weight: 800; letter-spacing: .12em; } @media (max-width: 1024px) { .lx-manufacturing-page .lx-process-section > .container { display: flex !important; flex-direction: column; min-height: 0; padding-top: 64px; } .lx-manufacturing-page .lx-process-visual { position: relative; top: auto; order: 1; height: min(72vw, 560px); min-height: 320px; } .lx-manufacturing-page .lx-process-story { order: 2; width: 100%; } .lx-manufacturing-page .lx-process-story .lx-section__head { margin-bottom: 48px !important; } .lx-manufacturing-page .lx-process-story .lx-process-grid { padding-left: 56px !important; } } @media (max-width: 767px) { .lx-manufacturing-page .lx-process-section > .container { gap: 40px !important; padding-top: 40px; } .lx-manufacturing-page .lx-process-visual { height: 72vw; min-height: 260px; } .lx-manufacturing-page .lx-process-story .lx-section__head { margin-bottom: 40px !important; } .lx-manufacturing-page .lx-process-story .lx-process-grid .card { padding-bottom: 36px !important; opacity: 1; } .lx-manufacturing-page .lx-process-story .lx-process-grid .card p, .lx-manufacturing-page .lx-process-story .lx-process-grid .card.is-active p { max-height: none; opacity: 1; } .lx-manufacturing-page .lx-process-story .lx-process-grid::before { bottom: 36px; } .lx-manufacturing-page .lx-process-story .lx-action-group .lx-btn { width: 100%; } } /* S02: pin the complete step story while the page scrolls through all six stages. */ @media (min-width: 1025px) { .lx-manufacturing-page .lx-process-section { min-height: clamp(3800px, 520vh, 6200px); } .lx-manufacturing-page .lx-process-section > .container { position: sticky; top: 96px; height: calc(100vh - 96px); min-height: 560px; align-items: center; padding-top: 0; } .lx-manufacturing-page .lx-process-story { align-self: stretch; justify-content: center; min-height: 0; padding: 32px 0; } .lx-manufacturing-page .lx-process-story .lx-section__head { margin-bottom: 48px !important; } .lx-manufacturing-page .lx-process-story .lx-process-grid .card { cursor: pointer; padding-bottom: 30px !important; } .lx-manufacturing-page .lx-process-visual { position: relative; top: auto; align-self: center; height: clamp(420px, 58vh, 620px); min-height: 420px; } } @media (max-width: 1024px) { .lx-manufacturing-page .lx-process-section { min-height: 0 !important; } .lx-manufacturing-page .lx-process-section > .container { position: relative; top: auto; height: auto; min-height: 0; } .lx-manufacturing-page .lx-process-story .lx-process-grid .card { cursor: pointer; } .lx-manufacturing-page .lx-process-visual { height: min(58vw, 480px); min-height: 280px; } } /* S02 interaction tuning: quicker feedback and tighter, stronger step labels. */ .lx-manufacturing-page .lx-process-story .lx-process-grid .card h3 { display: flex; min-height: 36px; align-items: center; font-size: clamp(17px, 1.35vw, 21px); font-weight: 800; line-height: 1.2; } .lx-manufacturing-page .lx-process-story .lx-step-number { top: 0; } .lx-manufacturing-page .lx-process-story .lx-process-grid .card p { transform: translateY(-4px); transition: max-height .38s cubic-bezier(.22, 1, .36, 1), opacity .24s ease, transform .38s cubic-bezier(.22, 1, .36, 1); } .lx-manufacturing-page .lx-process-story .lx-process-grid .card.is-active p { transform: translateY(0); } .lx-manufacturing-page .lx-process-visual__frame img { backface-visibility: hidden; will-change: opacity, transform; transition: opacity .36s cubic-bezier(.22, 1, .36, 1), transform .52s cubic-bezier(.22, 1, .36, 1); } /* S02 visual ratio: enlarge the square production image while keeping it inside the stage. */ @media (min-width: 1025px) { .lx-manufacturing-page .lx-process-visual { width: min(100%, 560px); height: auto; min-height: 0; aspect-ratio: 1 / 1; justify-self: center; } } @media (max-width: 1024px) { .lx-manufacturing-page .lx-process-visual { width: min(100%, 480px); height: auto; min-height: 0; aspect-ratio: 1 / 1; align-self: center; } } @media (max-width: 767px) { .lx-manufacturing-page .lx-process-visual { width: min(100%, 340px); } } /* Manufacturing S03: static 3x2 process cards with complete content visible. */ .lx-manufacturing-page section:has(> .container > .lx-process-grid) > .container { display: block !important; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-section__head { margin: 0 auto; text-align: center; align-items: center; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-section__head h2, .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-section__head p { text-align: center; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 32px !important; margin: 40px 0 0 !important; padding: 0 !important; position: static !important; overflow: visible !important; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid .card, .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid .card:hover, .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid .card:focus-within, .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid .card.is-active, .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid .card.is-complete { display: flex; min-width: 0; min-height: 0; flex: none; flex-direction: column; margin: 0 !important; padding: 0 !important; border: 1px solid var(--lx-color-border, #e3e5e8) !important; border-radius: 0; background: #fff !important; box-shadow: none !important; color: inherit; opacity: 1 !important; overflow: hidden; transform: none !important; transition: none !important; cursor: default !important; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid > .card { grid-column: auto !important; } .lx-manufacturing-page .lx-process-card__media { width: 100%; aspect-ratio: 3 / 2; margin: 0; overflow: hidden; background: #edf0f2; } .lx-manufacturing-page .lx-process-card__media img, .lx-manufacturing-page .lx-process-card__media img:hover { display: block; width: 100%; height: 100%; object-fit: contain; background: #edf0f2; transform: none !important; filter: none !important; transition: none !important; } .lx-manufacturing-page .lx-process-card__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 24px; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-step-number, .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid .card:hover .lx-step-number, .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid .card:focus-within .lx-step-number, .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid .card.is-active .lx-step-number { position: static; display: inline-flex !important; width: 36px; height: 36px; flex: 0 0 36px; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: var(--lx-color-primary) !important; color: #18181b !important; font-family: var(--lx-font-heading); font-size: 12px !important; font-weight: 800; line-height: 1; visibility: visible; opacity: 1; transition: none !important; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid h3, .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid .card:hover h3, .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid .card:focus-within h3 { margin: 18px 0 10px !important; color: var(--lx-color-text-heading, #18181b) !important; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.2; opacity: 1 !important; transform: none !important; transition: none !important; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid p, .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid .card:hover p, .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid .card:focus-within p, .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid .card.is-active p { max-width: none; max-height: none !important; margin: 0; color: var(--lx-color-text-muted, #626776) !important; line-height: 1.65; opacity: 1 !important; overflow: visible; transform: none !important; transition: none !important; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid + .lx-action-group { justify-content: center; margin-top: 40px; } @media (max-width: 1024px) { .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 767px) { .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid { grid-template-columns: 1fr !important; gap: 20px !important; } .lx-manufacturing-page .lx-process-card__body { padding: 20px; } } /* Exit-intent modal: align the recovery prompt with the LX Cable design system. */ .lx-faq-page .lx-corporate-cta { position: relative; isolation: isolate; overflow: hidden; background-color: #272727; background-image: url('https://lx-cable.wxkntest.com/wp-content/uploads/2026/08/faq-technical-support-cta.png'); background-position: center; background-size: cover; color: #fff; } .lx-faq-page .lx-corporate-cta::before { position: absolute; z-index: -1; inset: 0; background: rgba(24, 24, 27, .46); content: ''; } .lx-faq-page .lx-corporate-cta > .container { position: relative; z-index: 1; } .lx-faq-page .lx-corporate-cta h2, .lx-faq-page .lx-corporate-cta p { color: #fff; } .lx-about-page .lx-mission-cards { align-items: start; } .lx-about-page .lx-mission-card { min-height: 0; height: auto; } @media (max-width: 767px) { .lx-about-page .lx-mission-card { min-height: 0; } } .lx-about-page .lx-corporate-cta { position: relative; isolation: isolate; overflow: hidden; background-color: #272727; background-image: url('https://lx-cable.wxkntest.com/wp-content/uploads/2026/08/source-directly-cable-manufacturer-cta.png'); background-position: center; background-size: cover; color: #fff; } .lx-about-page .lx-corporate-cta::before { position: absolute; z-index: -1; inset: 0; background: rgba(24, 24, 27, .42); content: ''; } .lx-about-page .lx-corporate-cta > .container { position: relative; z-index: 1; } .lx-about-page .lx-corporate-cta h2, .lx-about-page .lx-corporate-cta p { color: #fff; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-process-grid::before { display: none !important; content: none !important; } .lx-manufacturing-page .lx-corporate-cta .lx-action-group .lx-btn:first-child { border-color: var(--lx-color-primary); background: var(--lx-color-primary); color: #18181b; } .lx-manufacturing-page .lx-corporate-cta .lx-action-group .lx-btn:first-child:hover, .lx-manufacturing-page .lx-corporate-cta .lx-action-group .lx-btn:first-child:focus-visible { border-color: #ffffff; background: #ffffff; color: #18181b; transform: translateY(-2px); } .lx-manufacturing-page .lx-corporate-cta .lx-action-group .lx-btn:nth-child(2) { border-color: #fff; background: #fff; color: #18181b; } .lx-manufacturing-page .lx-corporate-cta .lx-action-group .lx-btn:nth-child(2):hover, .lx-manufacturing-page .lx-corporate-cta .lx-action-group .lx-btn:nth-child(2):focus-visible { border-color: #fff; background: transparent; color: #fff; transform: translateY(-2px); } @media (max-width: 767px) { .lx-manufacturing-hero .container { padding-top: 80px; padding-bottom: 20px; } .lx-manufacturing-hero .lx-corporate-hero__certs { gap: 12px; margin-block: 20px; } .lx-manufacturing-hero .lx-hero__cert-img { height: 32px; } .lx-manufacturing-page .lx-facilities-layout { gap: 20px; } .lx-quality-control-section .lx-feature-grid > .card { padding: 20px; } .lx-quality-control-section .lx-feature-grid > .card > h3 { margin-bottom: 16px; } .lx-quality-control-section .lx-feature-grid > .card > ul { display: flex; flex-direction: column; gap: 8px; } .lx-manufacturing-page .lx-cert-grid:not(.lx-cert-grid--hero) > * { min-height: 0; } .lx-manufacturing-page .lx-cert-grid:not(.lx-cert-grid--hero) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lx-manufacturing-page .lx-cert-grid:not(.lx-cert-grid--hero) > .lx-col-3 { grid-column: auto; } .lx-manufacturing-page section:has(> .container > .lx-process-grid) .lx-action-group .lx-btn, .lx-manufacturing-page .lx-quality-control-section .lx-action-group .lx-btn, .lx-manufacturing-page .lx-corporate-cta .lx-action-group .lx-btn { width: 100%; } .lx-manufacturing-page .lx-corporate-cta .lx-action-group { flex-direction: column; } } #wxkn-modal-exit { padding: 24px; } #wxkn-modal-exit .wxkn-modal__overlay { background: rgba(24, 24, 27, .78); backdrop-filter: blur(8px); } #wxkn-modal-exit .wxkn-modal__dialog { width: min(1040px, calc(100vw - 48px)); height: min(900px, calc(100vh - 32px)); max-height: min(900px, calc(100vh - 32px)); border-top: 4px solid var(--lx-color-primary); border-radius: 0; box-shadow: 0 28px 80px rgba(24, 24, 27, .3); transform: translateY(18px); transition: transform .42s cubic-bezier(.22, 1, .36, 1), opacity .3s ease; } #wxkn-modal-exit.is-open .wxkn-modal__dialog { transform: translateY(0); } #wxkn-modal-exit .wxkn-modal__close { top: 16px; right: 16px; width: 40px; height: 40px; border: 1px solid rgba(24, 24, 27, .1); border-radius: 0; background: var(--lx-color-primary); color: var(--lx-color-text-heading); font-size: 24px; font-weight: 400; line-height: 1; } #wxkn-modal-exit .wxkn-modal__close:hover, #wxkn-modal-exit .wxkn-modal__close:focus-visible { background: var(--lx-color-primary-dark); color: var(--lx-color-text-heading); transform: none; } #wxkn-modal-exit .wxkn-modal__left { min-height: 0; overflow-y: auto; padding: clamp(32px, 4vw, 48px); background: var(--lx-color-primary); color: var(--lx-color-text-heading); font-family: var(--lx-font-body); text-shadow: 0 1px 2px rgba(24, 24, 27, .24); } #wxkn-modal-exit .wxkn-modal__eyebrow { margin-bottom: 20px; color: #fff; font-family: var(--lx-font-heading); font-size: 11px; font-weight: 800; letter-spacing: .14em; } #wxkn-modal-exit .wxkn-modal__title { max-width: 420px; margin-bottom: 20px; color: #fff; font-family: var(--lx-font-heading); font-size: clamp(26px, 2.7vw, 36px); font-weight: 800; line-height: 1.08; } #wxkn-modal-exit .wxkn-modal__lede { max-width: 450px; margin-bottom: 28px; color: rgba(255, 255, 255, .84); line-height: 1.7; } #wxkn-modal-exit .wxkn-modal__list { gap: 14px; } #wxkn-modal-exit .wxkn-modal__list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; align-items: center; color: rgba(255, 255, 255, .92); font-size: 14px; font-weight: 800; line-height: 1.5; } #wxkn-modal-exit .wxkn-modal__list li::before { content: none; } #wxkn-modal-exit .wxkn-modal__list-icon { display: flex; grid-column: 1; align-items: center; justify-content: center; width: 24px; height: 24px; color: #fff; stroke-width: 2; } #wxkn-modal-exit .wxkn-modal__list strong { grid-column: 2; color: #fff; font-family: var(--lx-font-heading); font-weight: 800; } #wxkn-modal-exit .wxkn-modal__right { min-height: 0; overflow-y: auto; padding: clamp(40px, 5vw, 64px); background: #fff; } #wxkn-modal-exit .wxkn-modal__form-title { margin-bottom: 8px; color: var(--lx-color-text-heading); font-size: 26px; font-weight: 800; line-height: 1.15; } #wxkn-modal-exit .wxkn-modal__form-sub { margin-bottom: 28px; color: var(--lx-color-text-muted); line-height: 1.6; } @media (max-width: 768px) { #wxkn-modal-exit { padding: 12px; } #wxkn-modal-exit .wxkn-modal__dialog { width: 100%; max-height: calc(100vh - 24px); } #wxkn-modal-exit .wxkn-modal__right { padding: 56px 24px 28px; } } /* LDP quote modal: give landing pages an independent inquiry experience. */ #wxkn-modal-ldp { padding: 24px; } #wxkn-modal-ldp .wxkn-modal__overlay { background: rgba(24, 24, 27, .78); backdrop-filter: blur(8px); } #wxkn-modal-ldp .wxkn-modal__dialog { grid-template-columns: 1fr; width: min(720px, calc(100vw - 48px)); height: min(900px, calc(100vh - 32px)); max-height: min(900px, calc(100vh - 32px)); border-top: 4px solid var(--lx-color-primary); border-radius: 0; box-shadow: 0 28px 80px rgba(24, 24, 27, .3); transform: translateY(18px); transition: transform .42s cubic-bezier(.22, 1, .36, 1), opacity .3s ease; } #wxkn-modal-ldp.is-open .wxkn-modal__dialog { transform: translateY(0); } #wxkn-modal-ldp .wxkn-modal__close { top: 16px; right: 16px; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 0; background: var(--lx-color-primary); color: var(--lx-color-text-heading); font-size: 24px; font-weight: 400; line-height: 1; } #wxkn-modal-ldp .wxkn-modal__close:hover, #wxkn-modal-ldp .wxkn-modal__close:focus-visible { background: var(--lx-color-primary-dark); color: var(--lx-color-text-heading); transform: none; } #wxkn-modal-ldp .wxkn-modal__right { min-height: 0; overflow-y: auto; padding: clamp(40px, 5vw, 64px); background: #fff; } #wxkn-modal-ldp .wxkn-modal__form-title { margin-bottom: 8px; color: var(--lx-color-text-heading); font-size: 26px; font-weight: 800; line-height: 1.15; } #wxkn-modal-ldp .wxkn-modal__form-sub { margin-bottom: 28px; color: var(--lx-color-text-muted); line-height: 1.6; } #wxkn-modal-ldp form.infility-form textarea { min-height: 88px !important; height: 88px !important; resize: vertical; } @media (max-width: 768px) { #wxkn-modal-ldp { padding: 12px; } #wxkn-modal-ldp .wxkn-modal__dialog { width: 100%; max-height: calc(100vh - 24px); } #wxkn-modal-ldp .wxkn-modal__right { padding: 56px 24px 28px; } } /* Quote modal: align the inquiry experience with the LX Cable design system. */ #wxkn-modal-quote { padding: 24px; } #wxkn-modal-quote .wxkn-modal__overlay { background: rgba(24, 24, 27, .78); backdrop-filter: blur(8px); } #wxkn-modal-quote .wxkn-modal__dialog { width: min(1040px, calc(100vw - 48px)); height: min(900px, calc(100vh - 32px)); max-height: min(900px, calc(100vh - 32px)); border-top: 4px solid var(--lx-color-primary); border-radius: 0; box-shadow: 0 28px 80px rgba(24, 24, 27, .3); transform: translateY(18px); transition: transform .42s cubic-bezier(.22, 1, .36, 1), opacity .3s ease; } #wxkn-modal-quote.is-open .wxkn-modal__dialog { transform: translateY(0); } #wxkn-modal-quote .wxkn-modal__close { top: 16px; right: 16px; width: 40px; height: 40px; border: 1px solid rgba(24, 24, 27, .1); border-radius: 0; background: var(--lx-color-primary); color: var(--lx-color-text-heading); font-size: 24px; font-weight: 400; line-height: 1; } #wxkn-modal-quote .wxkn-modal__close:hover, #wxkn-modal-quote .wxkn-modal__close:focus-visible { background: var(--lx-color-primary-dark); color: var(--lx-color-text-heading); transform: none; } #wxkn-modal-quote .wxkn-modal__left { min-height: 0; overflow-y: auto; padding: clamp(32px, 4vw, 48px); background: var(--lx-color-primary); color: var(--lx-color-text-heading); font-family: var(--lx-font-body); text-shadow: 0 1px 2px rgba(24, 24, 27, .24); } #wxkn-modal-quote .wxkn-modal__eyebrow { margin-bottom: 20px; color: #fff; font-family: var(--lx-font-heading); font-size: 11px; font-weight: 800; letter-spacing: .14em; } #wxkn-modal-quote .wxkn-modal__title { max-width: 420px; margin-bottom: 20px; color: #fff; font-family: var(--lx-font-heading); font-size: clamp(26px, 2.7vw, 36px); font-weight: 800; line-height: 1.08; } #wxkn-modal-quote .wxkn-modal__lede { max-width: 450px; margin-bottom: 28px; color: rgba(255, 255, 255, .84); line-height: 1.7; } #wxkn-modal-quote .wxkn-modal__list { gap: 14px; } #wxkn-modal-quote .wxkn-modal__list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; row-gap: 3px; color: rgba(255, 255, 255, .92); font-size: 13px; line-height: 1.5; } #wxkn-modal-quote .wxkn-modal__list li::before { content: none; } #wxkn-modal-quote .wxkn-modal__list-icon { display: flex; grid-column: 1; grid-row: 1; align-items: center; justify-content: center; align-self: center; width: 24px; height: 24px; background: transparent; color: #fff; stroke-width: 2; } #wxkn-modal-quote .wxkn-modal__list strong { grid-column: 2; grid-row: 1; color: #fff; font-family: var(--lx-font-heading); font-weight: 800; } #wxkn-modal-quote .wxkn-modal__list span { grid-column: 2; grid-row: 2; color: rgba(255, 255, 255, .78); } #wxkn-modal-quote .wxkn-modal__right { min-height: 0; overflow-y: auto; padding: clamp(40px, 5vw, 64px); background: #fff; } #wxkn-modal-quote .wxkn-modal__form-title { margin-bottom: 8px; color: var(--lx-color-text-heading); font-size: 26px; font-weight: 800; line-height: 1.15; } #wxkn-modal-quote .wxkn-modal__form-sub { margin-bottom: 28px; color: var(--lx-color-text-muted); line-height: 1.6; } #wxkn-modal-quote form.infility-form textarea { min-height: 88px !important; height: 88px !important; resize: vertical; } @media (max-width: 768px) { #wxkn-modal-quote { padding: 12px; } #wxkn-modal-quote .wxkn-modal__dialog { width: 100%; max-height: calc(100vh - 24px); } #wxkn-modal-quote .wxkn-modal__right { padding: 56px 24px 28px; } } /* Contact page spacing pass: align the page with the shared spacing scale. */ .lx-contact-page .lx-corporate-section { padding-block: var(--lx-section-y); } .lx-contact-page .lx-contact-plant .lx-split { gap: var(--lx-gap-60); } .lx-contact-page .lx-contact-plant .lx-split > div > p { margin: var(--lx-gap-20, 20px) 0 0; } .lx-contact-page #contact-location-title { line-height: 1.08; } .lx-contact-page .lx-contact-method h3, .lx-contact-page .lx-contact-value { font-family: var(--lx-font-heading); } .lx-contact-page .lx-contact-methods { justify-content: flex-start; } .lx-contact-page .lx-contact-methods > .lx-section__head { margin-bottom: var(--lx-gap-20, 20px); } .lx-contact-page .lx-contact-hero .lx-corporate-breadcrumb { justify-content: center; } .lx-contact-page .lx-contact-hero .lx-corporate-hero__copy { max-width: 920px; margin-inline: auto; text-align: center; } .lx-contact-page .lx-contact-hero .lx-corporate-hero__copy > p:not(.lx-eyebrow) { margin-inline: auto; } .lx-contact-page .lx-contact-hero .lx-action-group { justify-content: center; } .lx-contact-page .lx-feature-grid > .lx-contact-route { padding: var(--lx-gap-24, 24px); } @media (max-width: 767px) { .lx-contact-page .lx-corporate-section { padding-block: var(--lx-section-y-mobile); } .lx-contact-page .lx-contact-touch { gap: var(--lx-gap-20, 20px); } } /* Page-level CSS migrated from page HTML so mobile spacing stays inside the shared system. */ .lx-contact-page .lx-contact-hero { background-image: url("https://lxelectrical.com/wp-content/uploads/2026/09/aerial-view-of-guangdong-lixun-wire-cable-factory.webp"); } .lx-contact-page .lx-contact-hero .lx-action-group { margin-top: 20px; } .lx-contact-page .lx-contact-touch { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.85fr); gap: 48px; align-items: stretch; margin-top: 20px; } .lx-contact-page .lx-contact-map { margin: 0; min-height: 440px; overflow: hidden; background: #e8e8ea; } .lx-contact-page .lx-contact-map iframe { display: block; width: 100%; height: 100%; min-height: 440px; border: 0; } .lx-contact-page .lx-contact-map figcaption { margin-top: 12px; color: var(--lx-color-text-muted); font-size: 14px; line-height: 1.6; } .lx-contact-page .lx-contact-methods { display: flex; flex-direction: column; justify-content: center; } .lx-contact-page .lx-contact-method { display: flex; gap: 16px; align-items: flex-start; padding: 28px 0; border-bottom: 1px solid var(--lx-color-border, #e8e8ea); text-decoration: none; color: inherit; } .lx-contact-page .lx-contact-method:first-child { padding-top: 0; } .lx-contact-page .lx-contact-method:last-child { border-bottom: 0; padding-bottom: 0; } .lx-contact-page .lx-contact-method:hover .lx-contact-value, .lx-contact-page .lx-contact-method:focus-visible .lx-contact-value { color: var(--lx-color-primary); } .lx-contact-page .lx-contact-method i, .lx-contact-page .lx-contact-method svg { flex-shrink: 0; width: 24px; height: 24px; margin-top: 4px; color: var(--lx-color-primary); } .lx-contact-page .lx-contact-method h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lx-color-text-muted); } .lx-contact-page .lx-contact-value { margin: 0; color: var(--lx-color-text, #18181b); font-size: 20px; font-weight: 700; line-height: 1.4; } .lx-contact-page .lx-contact-route > i, .lx-contact-page .lx-contact-route > svg { display: block; width: 28px; height: 28px; margin-bottom: 16px; color: var(--lx-color-primary); } .lx-contact-page .lx-contact-route .lx-btn { margin-top: 16px; } .lx-contact-page .lx-contact-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; margin: 20px 0 0; } .lx-contact-page .lx-contact-stats strong { font-size: clamp(24px, 2.2vw, 36px); } .lx-contact-page .lx-contact-plant .lx-action-group { margin-top: 20px; } @media (max-width: 1024px) { .lx-contact-page .lx-contact-touch { grid-template-columns: 1fr; gap: 32px; } .lx-contact-page .lx-contact-map, .lx-contact-page .lx-contact-map iframe { min-height: 320px; } } @media (max-width: 767px) { .lx-contact-page .lx-contact-hero { padding: 0 !important; } .lx-contact-page .lx-contact-hero .container { padding-block: 80px 40px; } .lx-contact-page .lx-contact-hero .lx-action-group .lx-btn { width: 100%; } .lx-contact-page .lx-feature-grid > .lx-col-6 { grid-column: 1 / -1; } .lx-contact-page .lx-contact-value { font-size: 18px; } .lx-contact-page .lx-contact-plant .lx-split { gap: 20px; } .lx-contact-page .lx-contact-plant .lx-action-group { flex-direction: column; align-items: stretch; gap: 20px; } .lx-contact-page .lx-contact-plant .lx-action-group .lx-btn { width: 100%; } } .lx-blog-page .lx-blog-hero { padding: 120px 0; background: var(--lx-gradient-primary); } .lx-blog-page .lx-blog-hero .lx-corporate-breadcrumb, .lx-blog-page .lx-blog-hero .lx-corporate-breadcrumb a, .lx-blog-page .lx-blog-hero .lx-corporate-breadcrumb [aria-current="page"], .lx-blog-page .lx-blog-hero h1, .lx-blog-page .lx-blog-hero p { color: #fff; } .lx-blog-page .lx-blog-hero .lx-corporate-breadcrumb { justify-content: center; text-shadow: 0 2px 4px rgba(122, 87, 0, 0.4); } .lx-blog-page .lx-blog-hero h1 { margin: 0 0 26px; text-shadow: 0 2px 8px rgba(122, 87, 0, 0.3), 0 1px 2px rgba(122, 87, 0, 0.2); } .lx-blog-page .lx-blog-hero p { text-shadow: 0 1px 4px rgba(122, 87, 0, 0.25); } .lx-blog-page .lx-blog-layout { position: relative; } .lx-blog-page .lx-blog-layout > .lx-col-9, .lx-blog-page #lx-blog-container { width: 100%; min-width: 0; } .lx-blog-page #lx-blog-container:has(.lx-blog-empty) { display: flex; justify-content: center; } .lx-blog-page .lx-blog-filter-toggle { display: none; } .lx-blog-page .lx-blog-filter { flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; margin-top: 20px; } .lx-blog-page .lx-blog-filter button, .lx-blog-page .lx-blog-filter button.is-active, .lx-blog-page .lx-blog-filter button:hover, .lx-blog-page .lx-blog-filter button:focus-visible { min-height: 0; padding: 8px 0; border: 0; border-radius: 0; background: transparent; color: var(--lx-color-text-muted); text-align: left; box-shadow: none; cursor: pointer; } .lx-blog-page .lx-blog-filter button.is-active, .lx-blog-page .lx-blog-filter button:hover, .lx-blog-page .lx-blog-filter button:focus-visible { color: var(--lx-color-primary); } .lx-blog-page .lx-blog-grid > .lx-blog-card { grid-column: span 4; } .lx-blog-page .lx-blog-card > img { aspect-ratio: 3 / 2; object-fit: cover; } .lx-blog-page .lx-blog-card { cursor: pointer; } .lx-blog-page .lx-blog-card:focus-visible { outline: 3px solid var(--lx-color-primary, #fcb604); outline-offset: 4px; } .lx-blog-page .lx-blog-card p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-height: calc(1.6em * 2); overflow: hidden; } .lx-blog-page .lx-blog-card time { color: var(--lx-color-primary); font-size: 12px; } .lx-blog-page .lx-blog-card .products-card__link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; color: var(--lx-color-primary); font-family: var(--lx-font-heading); font-size: 12px; font-weight: 900; letter-spacing: 0.1em; text-decoration: none; text-transform: uppercase; } .lx-blog-page .lx-blog-card .products-card__link span { transition: color 0.25s ease; } .lx-blog-page .lx-blog-card .products-card__link:hover, .lx-blog-page .lx-blog-card .products-card__link:focus-visible { color: var(--lx-color-primary-dark, #c48c00); } .lx-blog-page .lx-blog-card .products-card__link svg { width: 15px; height: 15px; transition: transform 0.25s ease; } .lx-blog-page .lx-blog-card:hover .products-card__link svg, .lx-blog-page .lx-blog-card .products-card__link:hover svg, .lx-blog-page .lx-blog-card .products-card__link:focus-visible svg { transform: translate(3px, -3px); } .lx-blog-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 40px 0 0; } .lx-blog-page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid #d1d5db; border-radius: 0; background: #fff; color: var(--lx-color-text, #3e392d); font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .lx-blog-page-btn:hover:not(:disabled):not(.is-active) { border-color: var(--lx-color-primary, #fcb604); color: var(--lx-color-primary, #fcb604); } .lx-blog-page-btn.is-active { background: var(--lx-color-primary, #fcb604); border-color: var(--lx-color-primary, #fcb604); color: #fff; font-weight: 700; } .lx-blog-page-btn:disabled { opacity: 0.4; cursor: not-allowed; } .lx-blog-empty { display: inline-block; width: auto; max-width: none; margin: 0; text-align: center; white-space: nowrap; padding: 60px 0; color: #999; } @media (max-width: 767px) { .lx-blog-page #lx-blog-container:has(.lx-blog-empty) { display: block; } .lx-blog-empty { display: block; max-width: 100%; margin: 0 auto; white-space: normal; } } @media (max-width: 767px) { .lx-blog-page .lx-blog-hero { padding: 80px 0 64px !important; } .lx-blog-page .lx-blog-layout > aside { display: flex; flex-direction: column; gap: 0; margin-bottom: 0; } .lx-blog-page .lx-blog-layout > aside .lx-section__head { margin-bottom: 0; } .lx-blog-page .lx-blog-filter-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; border: 0; background: transparent; color: var(--lx-color-text-heading); font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; } .lx-blog-page .lx-blog-filter-toggle__icon { color: var(--lx-color-primary); font-size: 24px; line-height: 1; } .lx-blog-page .lx-blog-filter { margin-top: 0 !important; margin-bottom: 0; } .lx-blog-page .lx-blog-filter:not(.is-open) { display: none; } .lx-blog-page .lx-blog-filter.is-open { display: flex; } .lx-blog-page .lx-blog-grid > .lx-blog-card { grid-column: 1 / -1; } } .lx-faq-page .lx-faq-hero { padding: 120px 0; background: var(--lx-gradient-primary, linear-gradient(135deg, #ffd359 0%, #fcb604 50%, #c48c00 100%)); } .lx-faq-page .lx-faq-hero .lx-corporate-breadcrumb, .lx-faq-page .lx-faq-hero .lx-corporate-breadcrumb a, .lx-faq-page .lx-faq-hero .lx-corporate-breadcrumb [aria-current="page"], .lx-faq-page .lx-faq-hero h1, .lx-faq-page .lx-faq-hero p { color: #fff; } .lx-faq-page .lx-faq-hero .lx-corporate-breadcrumb { justify-content: center; text-shadow: 0 2px 4px rgba(122, 87, 0, 0.4); } .lx-faq-page .lx-faq-hero h1 { margin: 0 0 26px; text-shadow: 0 2px 8px rgba(122, 87, 0, 0.3), 0 1px 2px rgba(122, 87, 0, 0.2); } .lx-faq-page .lx-faq-hero p { text-shadow: 0 1px 4px rgba(122, 87, 0, 0.25); } .lx-faq-page .lx-faq-hero .lx-action-group .lx-btn-primary, .lx-faq-page .lx-faq-hero .lx-action-group .lx-btn-primary:hover, .lx-faq-page .lx-faq-hero .lx-action-group .lx-btn-primary:focus-visible { border-color: #fff; background: #fff; color: var(--lx-color-text-heading, #18181b); } .lx-faq-page .lx-faq-directory { background: var(--lx-color-bg-soft, #f3f5f8); } .lx-faq-page .lx-faq-directory__layout { display: grid; grid-template-columns: minmax(190px, 240px) minmax(0, 1fr); gap: clamp(48px, 7vw, 96px); align-items: start; } .lx-faq-page .lx-faq-directory__sidebar { position: sticky; top: 112px; align-self: start; } .lx-faq-page .lx-faq-directory__sidebar h2 { margin: 0 0 24px; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.1; } .lx-faq-page .lx-faq-category-nav { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; margin: 0; } .lx-faq-page .lx-faq-category-nav a { min-height: 0; padding: 14px 0; border: 0; border-top: 1px solid var(--lx-color-border, #e8e8ea); border-radius: 0; background: transparent; color: var(--lx-color-text-heading, #18181b); font-size: 13px; font-weight: 700; line-height: 1.4; text-align: left; text-decoration: none; } .lx-faq-page .lx-faq-category-nav a:last-child { border-bottom: 1px solid var(--lx-color-border, #e8e8ea); } .lx-faq-page .lx-faq-category-nav a:hover, .lx-faq-page .lx-faq-category-nav a:focus-visible { border-color: var(--lx-color-border, #e8e8ea); background: transparent; color: var(--lx-color-primary-dark, #c48c00); padding-left: 8px; } .lx-faq-page .lx-faq-directory__content { min-width: 0; } .lx-faq-page .lx-faq-directory .lx-faq-group { margin: 0; padding: 0 !important; background: transparent; scroll-margin-top: 112px; } .lx-faq-page .lx-faq-directory .lx-faq-group + .lx-faq-group { margin-top: 72px; padding-top: 72px !important; border-top: 1px solid var(--lx-color-border, #e8e8ea); } .lx-faq-page .lx-faq-directory .lx-faq-group > .container { width: 100%; max-width: none; padding: 0; } .lx-faq-page .lx-faq-directory .lx-section__head { margin-bottom: 24px; text-align: left !important; } .lx-faq-page .lx-faq-directory .lx-section__head h2 { margin-bottom: 0; } .lx-faq-page .lx-faq-directory .lx-faq__list { max-width: none; margin: 0; } @media (max-width: 767px) { .lx-faq-page .lx-faq-hero { padding: 80px 0 64px !important; } .lx-faq-page .lx-faq-directory__layout { grid-template-columns: 1fr; gap: 20px; } .lx-faq-page .lx-faq-directory__sidebar { position: static; } .lx-faq-page .lx-faq-directory .lx-faq-group + .lx-faq-group { margin-top: 20px; padding-top: 20px !important; } .lx-faq-page .lx-faq-directory .lx-faq-group > .container { width: 100% !important; max-width: none !important; padding-inline: 0; } .lx-faq-page .lx-corporate-cta .lx-action-group { flex-direction: column; } .lx-faq-page .lx-corporate-cta .lx-action-group .lx-btn { width: 100%; } } .products-page, .products-page * { box-sizing: border-box; } .products-page { overflow-x: clip; color: var(--lx-color-text-body, #1a1a1a); font-family: var(--lx-font-body, Inter, Arial, sans-serif); background: var(--lx-color-bg-base, #f1f1f1); } .products-page a { color: inherit; } .products-page button, .products-page input, .products-page select, .products-page textarea { font: inherit; } .products-page button { cursor: pointer; } .products-page img { display: block; max-width: 100%; } .products-page .products-hero { position: relative; min-height: 480px; display: grid; align-items: end; background: var(--lx-color-bg-dark, #18181b); color: #fff; isolation: isolate; } .products-page .products-hero::before { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(24, 24, 27, 0.94) 0%, rgba(24, 24, 27, 0.78) 44%, rgba(24, 24, 27, 0.18) 100%), url('/wp-content/themes/generatepress-child/images/banner2.webp') center / cover; content: ""; } .products-page .products-hero__inner { width: 80%; margin: 0 auto; padding: 100px 0 72px; } .products-page .products-breadcrumb { display: flex; gap: 10px; margin: 0 0 28px; color: rgba(255, 255, 255, 0.62); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: none; } .products-page .products-breadcrumb a { text-decoration: none; } .products-page .products-breadcrumb a:hover { color: var(--lx-color-primary, #fcb604); } .products-page .products-hero h1 { max-width: 760px; margin: 0 0 22px; color: #fff; font-family: var(--lx-font-heading, Manrope, sans-serif); font-size: clamp(36px, calc(1.25rem + 2.85vw), 58px); font-weight: 700; line-height: 1.05; letter-spacing: -0.05em; } .products-page .products-hero p { max-width: 630px; margin: 0 0 32px; color: rgba(255, 255, 255, 0.78); font-size: 18px; line-height: 1.7; } .products-page .products-catalog { padding: 88px 0 104px; background: #fff; } .products-page .products-catalog__inner { width: min(1280px, calc(100% - 80px)); margin: 0 auto; } .products-page .products-section-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(260px, 3fr); gap: 32px; align-items: start; margin-bottom: 48px; } .products-page .products-section-head h2 { margin: 0; font-family: var(--lx-font-heading, Manrope, sans-serif); font-size: clamp(28px, 3.5vw, 44px); font-weight: 600; line-height: 0.98; letter-spacing: -0.055em; } .products-page .products-section-head p { margin: 0; color: var(--lx-color-text-muted, #6c6d73); font-size: 16px; line-height: 1.7; } .products-page .products-catalog__layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 52px; align-items: start; } .products-page .products-filters { position: sticky; top: 102px; padding: 24px 0; border-top: 2px solid var(--lx-color-bg-dark, #18181b); } .products-page .products-filter-toggle { display: none; } .products-page .products-filters__panel { display: block; } .products-page .products-filters__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 28px; } .products-page .products-filters h3 { margin: 0; font-family: var(--lx-font-heading, Manrope, sans-serif); font-size: 16px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .products-page .products-clear { padding: 0; border: 0; background: transparent; color: var(--lx-color-text-muted, #6c6d73); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .products-page .products-clear:hover { color: var(--lx-color-primary-dark, #c48c00); } .products-page .products-filter-group + .products-filter-group { margin-top: 32px; } .products-page .products-filter-group__title { margin: 0 0 14px; color: var(--lx-color-text-muted, #6c6d73); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .products-page .products-filter-option { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; color: rgba(24, 24, 27, 0.74); font-size: 13px; line-height: 1.35; cursor: pointer; } .products-page .products-filter-option input { width: 15px; height: 15px; margin: 1px 0 0; accent-color: var(--lx-color-primary, #fcb604); flex: 0 0 auto; } .products-page .products-filter-option:hover { color: var(--lx-color-bg-dark, #18181b); } .products-page .products-filter-option__count { margin-left: auto; color: #a0a0a5; font-size: 11px; } .products-page .products-results__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--lx-color-border, #e8e8ea); } .products-page .products-results__count { margin: 0; color: var(--lx-color-text-muted, #6c6d73); font-size: 13px; } .products-page .products-sort { min-width: 150px; padding: 10px 34px 10px 12px; border: 1px solid var(--lx-color-border, #e8e8ea); border-radius: 0; background: #fff; color: var(--lx-color-bg-dark, #18181b); font-size: 13px; } .products-page .products-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .products-page .products-grid[hidden] { display: none; } .products-page .products-card { min-width: 0; min-height: 100%; border: 1px solid var(--lx-color-border, #e8e8ea); border-radius: 0; background: #fff; box-shadow: none; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .products-page .products-card:hover { transform: translateY(-4px); border-color: var(--lx-color-primary, #fcb604); box-shadow: 0 12px 26px rgba(122, 87, 0, 0.1); } .products-page .products-card__visual { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 0.86; padding: 24px; background: var(--lx-color-bg-card, #fff); overflow: hidden; } .products-page .products-card__visual img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform 0.4s ease; } .products-page .products-card:hover .products-card__visual img { transform: scale(1.04); } .products-page .products-card__body { display: flex; min-height: 0; flex-direction: column; padding: 20px 20px 18px; } .products-page .products-card h3 { margin: 0; color: var(--lx-color-text-heading, #18181b); font-family: var(--lx-font-heading, Manrope, sans-serif); font-size: clamp(15px, 1.15vw, 16px); font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; } .products-page .products-card__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; color: var(--lx-color-primary, #fcb604); font-family: var(--lx-font-heading, Manrope, sans-serif); font-size: var(--lx-fs-xs, 12px); font-weight: 900; letter-spacing: 0.1em; text-decoration: none; text-transform: uppercase; } .products-page .products-card__link span { transition: color 0.25s ease; } .products-page .products-card__link svg { width: 15px; height: 15px; transition: transform 0.25s ease; } .products-page .products-card__link:hover, .products-page .products-card__link:focus-visible, .products-page .products-card:hover .products-card__link span { color: var(--lx-color-primary-dark, #c48c00); } .products-page .products-card:hover .products-card__link svg { transform: translate(3px, -3px); } .products-page .products-empty { grid-column: 1 / -1; padding: 48px 24px; border: 1px solid var(--lx-color-border, #e8e8ea); color: var(--lx-color-text-muted, #6c6d73); text-align: center; } .products-page .products-pagination { display: flex; justify-content: center; gap: var(--lx-gap-8, 8px); margin-top: var(--lx-gap-32, 32px); } .products-page .products-pagination__pages { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--lx-gap-8, 8px); } .products-page .products-pagination button { display: grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 1px solid var(--lx-color-border, #e8e8ea); border-radius: 0; background: var(--lx-color-bg-card, #fff); color: var(--lx-color-text-heading, #18181b); font-family: var(--lx-font-heading, Manrope, sans-serif); font-size: 14px; font-weight: 800; line-height: 1; transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; } .products-page .products-pagination button[aria-current="page"] { border-color: var(--lx-color-primary, #fcb604); background: var(--lx-color-primary, #fcb604); color: var(--lx-color-text-heading, #18181b); } .products-page .products-pagination button:hover:not(:disabled) { border-color: var(--lx-color-primary-dark, #c48c00); background: var(--lx-color-primary-light, #ffd359); color: var(--lx-color-text-heading, #18181b); } .products-page .products-pagination button:focus-visible { outline: 2px solid var(--lx-color-primary, #fcb604); outline-offset: 3px; } .products-page .products-pagination button:disabled { opacity: 0.55; color: var(--lx-color-text-muted, #6c6d73); cursor: not-allowed; } .products-page .products-pagination button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; } .products-page .products-bomflex { position: relative; isolation: isolate; overflow: hidden; padding: 0 0 104px; background: #ffffff; color: var(--lx-color-text-heading, #18181b); } .products-page .products-bomflex::before { display: none; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, transparent 0, transparent calc(50% - 1px), rgba(255, 255, 255, 0.045) 50%, transparent calc(50% + 1px)), linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 100% 100%, 100% 96px; content: ""; pointer-events: none; } .products-page .products-bomflex__inner { display: grid; grid-template-areas: "image copy"; grid-template-columns: minmax(0, 1.18fr) minmax(390px, 0.82fr); align-items: stretch; width: min(100% - 80px, 1280px); margin: 0 auto; } .products-page .products-bomflex__copy { position: relative; z-index: 2; grid-area: copy; display: flex; flex-direction: column; justify-content: center; min-height: 0; margin-left: 0; padding: 64px 56px; background: var(--lx-color-primary, #fcb604); color: var(--lx-color-bg-dark, #18181b); } .products-page .products-bomflex__copy::before { position: absolute; top: 0; left: 0; width: 88px; height: 8px; background: var(--lx-color-bg-dark, #18181b); content: ""; } .products-page .products-bomflex__copy h2 { max-width: 560px; margin: 0 0 24px; color: var(--lx-color-bg-dark, #18181b); font-family: var(--lx-font-heading, Manrope, sans-serif); font-size: clamp(32px, 4vw, 52px); font-weight: 600; line-height: 0.96; letter-spacing: -0.06em; } .products-page .products-bomflex__copy p { max-width: 560px; margin: 0 0 32px; color: rgba(24, 24, 27, 0.76); font-size: var(--lx-fs-body, 16px); line-height: 1.7; } .products-page .products-bomflex__actions { display: flex; flex-wrap: wrap; gap: 14px; } .products-page .products-bomflex__actions .lx-btn-dark, .products-page .products-bomflex__actions .lx-btn-dark:hover, .products-page .products-bomflex__actions .lx-btn-dark:focus { color: #ffffff; } .products-page .products-bomflex__image { position: relative; grid-area: image; min-height: 0; height: 100%; overflow: hidden; background: #26262a; } .products-page .products-bomflex__image::after { display: none; } .products-page .products-bomflex__image img { width: 100%; height: 100%; min-height: 0; object-fit: contain; object-position: center; } @media (max-width: 1180px) { .products-page .products-hero__inner { width: 80%; } .products-page .products-catalog__inner { width: min(100% - 48px, 960px); } .products-page .products-catalog__layout { grid-template-columns: 190px minmax(0, 1fr); gap: 32px; } .products-page .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .products-page .products-bomflex { padding: 0 0 80px; } .products-page .products-bomflex__inner { grid-template-columns: minmax(0, 1fr) minmax(360px, 0.78fr); width: calc(100% - 48px); } .products-page .products-bomflex__copy { min-height: 0; margin-left: 0; padding: 48px 40px; } .products-page .products-bomflex__image { min-height: 0; height: 100%; } } @media (max-width: 767px) { .products-page .products-hero__inner, .products-page .products-catalog__inner { width: calc(100% - 40px); } .products-page .products-hero { min-height: 540px; } .products-page .products-hero__inner { padding: 64px 0 40px; } .products-page .products-hero h1 { font-size: clamp(36px, 10vw, 48px); } .products-page .products-hero p { font-size: 16px; } .products-page .products-catalog { padding: 40px 0; } .products-page .products-section-head { display: block; margin-bottom: 20px; } .products-page .products-section-head h2 { margin-bottom: 16px; font-size: 36px; } .products-page .products-catalog__layout { display: block; } .products-page .products-filters { position: static; margin-bottom: 20px; padding: 20px 0 0; border-top-width: 1px; } .products-page .products-filter-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; border: 0; background: transparent; color: var(--lx-color-text-heading); font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-align: left; text-transform: uppercase; cursor: pointer; } .products-page .products-filter-toggle__icon { color: var(--lx-color-primary); font-size: 24px; line-height: 1; } .products-page .products-filters__panel { margin-top: 20px; } .products-page .products-filters__panel:not(.is-open) { display: none; } .products-page .products-filters__panel.is-open { display: block; } .products-page .products-filters__top { margin-bottom: 20px; } .products-page .products-filter-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; } .products-page .products-filter-group__title { grid-column: 1 / -1; } .products-page .products-filter-group + .products-filter-group { margin-top: 20px; } .products-page .products-results__toolbar { align-items: flex-start; flex-direction: column; gap: 14px; } .products-page .products-sort { width: 100%; } .products-page .products-grid { grid-template-columns: 1fr; } .products-page .products-bomflex { padding: 0; } .products-page .products-bomflex::before { display: none; } .products-page .products-bomflex__inner { display: flex; width: 100%; flex-direction: column; } .products-page .products-bomflex__copy { width: 100%; min-height: 0; margin: 0; padding: 40px 20px; box-shadow: none; } .products-page .products-bomflex__copy h2 { font-size: clamp(38px, 11vw, 52px); } .products-page .products-bomflex__image { width: 100%; height: 320px; min-height: 0; box-shadow: none; } } @media (prefers-reduced-motion: reduce) { .products-page *, .products-page *::before, .products-page *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* Global CTA background: softly layer the supplied factory image over the brand yellow. */ .lx-cta-left { background-color: var(--lx-color-primary); background-image: linear-gradient(rgba(252, 182, 4, .82), rgba(252, 182, 4, .82)), url('https://lx-cable.wxkntest.com/wp-content/uploads/2026/08/CTA-bw.webp'); background-position: center; background-size: cover; } /* Homepage linked cards */ body.home .lx-page-shell main [data-card-href] { cursor: pointer; } body.home .lx-page-shell main [data-card-href]:focus-visible { outline: 3px solid var(--lx-color-primary, #fcb604); outline-offset: 4px; } body.home .lx-page-shell main .lx-app-tab__arrow { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; margin-top: 16px; margin-right: 0; margin-left: 0; line-height: 0; background: transparent; color: var(--lx-color-bg-dark, #272727); transition: transform 0.25s ease, background-color 0.25s ease; } body.home .lx-page-shell main .lx-app-tab__arrow img { display: block; width: 28px; height: 28px; padding: 0; filter: brightness(0) invert(1); } body.home .lx-page-shell main .lx-app-tab__arrow:hover { background: transparent; transform: translateY(-2px); } body.home .lx-page-shell main .lx-app-tab:hover .lx-app-tab__arrow img { filter: brightness(0) saturate(100%) invert(76%) sepia(94%) saturate(1192%) hue-rotate(1deg) brightness(104%) contrast(103%); } body.home .lx-page-shell main .lx-bomflex-text-link { display: inline-flex; align-items: center; min-height: 56px; padding: 0; color: #fff; font-family: var(--lx-font-heading); font-size: 14px; font-weight: 900; letter-spacing: 0.1em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; transition: color 0.3s ease; } body.home .lx-page-shell main .lx-bomflex-text-link:hover, body.home .lx-page-shell main .lx-bomflex-text-link:focus-visible { color: var(--lx-color-primary); } body.home .lx-page-shell main section[aria-label="S07 Markets We Focus On"] { border-top: 1px solid var(--lx-color-border, #e8e8ea); } body.home .lx-page-shell main section[aria-label="S06 Who We Work With"] { padding-bottom: var(--lx-section-y); } @media (max-width: 767px) { body.home .lx-page-shell main section[aria-label="S06 Who We Work With"] { padding-bottom: var(--lx-section-y-mobile, 56px); } .section--cta { margin: 0; padding-top: 0 !important; padding-bottom: 0 !important; } .lx-category-template + .section--cta .lx-cta-left, .lx-category-template + .section--cta .lx-cta-right { padding-top: 0; padding-bottom: 1px; } } /* Keep article sidebar cards fully readable at tablet and mobile widths. */ .single-post-page .post-sidebar .sidebar-widget { min-height: 0; overflow: visible; flex: 0 0 auto; } @media (max-width: 1180px) { .single-post-page .single-post-grid { grid-template-columns: minmax(0, 1fr); min-width: 0; } .single-post-page .post-content, .single-post-page .post-sidebar { min-width: 0; width: 100%; } .single-post-page .post-sidebar { position: static; } .single-post-page .post-content .lx-post-author-card { grid-template-columns: 1fr; } .single-post-page .post-content .lx-post-author-card__media { justify-content: flex-start; } .single-post-page .post-content .lx-post-author-card__avatar { max-width: 120px; } } @media (max-width: 767px) { .single-post-page .post-content .lx-post-author-card { gap: 20px; padding: 24px 20px; } .single-post-page .post-content .lx-post-author-card__content { gap: 14px; } .single-post-page .post-content .lx-post-author-card__name { font-size: clamp(24px, 8vw, 32px); } .single-post-page .post-content .lx-post-author-card__description { font-size: 14px; line-height: 1.7; } .single-post-page .post-content .lx-post-author-card__note { font-size: 15px; line-height: 1.7; } .single-post-page .post-content .lx-post-author-card__actions { width: 100%; flex-direction: column; align-items: stretch; } .single-post-page .post-content .lx-post-author-card__actions .lx-btn { width: 100%; } .single-post-page .post-content .lx-post-author-card__social-link { width: 40px; height: 40px; } } /* Detail and archive breadcrumbs: reserve space for the fixed site header. */ .single-post-page > .wxkn-breadcrumb-wrapper, .lx-author-page > .wxkn-breadcrumb-wrapper { padding-top: calc(96px + var(--lx-gap-20, 20px)); padding-bottom: var(--lx-gap-20, 20px); background-color: var(--lx-color-primary); } .single-post-page > .wxkn-breadcrumb-wrapper .wxkn-breadcrumb, .single-post-page > .wxkn-breadcrumb-wrapper .wxkn-breadcrumb a, .single-post-page > .wxkn-breadcrumb-wrapper .wxkn-breadcrumb-current, .single-post-page > .wxkn-breadcrumb-wrapper .wxkn-breadcrumb-separator, .lx-author-page > .wxkn-breadcrumb-wrapper .wxkn-breadcrumb, .lx-author-page > .wxkn-breadcrumb-wrapper .wxkn-breadcrumb a, .lx-author-page > .wxkn-breadcrumb-wrapper .wxkn-breadcrumb-current, .lx-author-page > .wxkn-breadcrumb-wrapper .wxkn-breadcrumb-separator { color: #fff; } .single-post-page > .wxkn-breadcrumb-wrapper .wxkn-breadcrumb a:hover, .single-post-page > .wxkn-breadcrumb-wrapper .wxkn-breadcrumb a:focus-visible, .lx-author-page > .wxkn-breadcrumb-wrapper .wxkn-breadcrumb a:hover, .lx-author-page > .wxkn-breadcrumb-wrapper .wxkn-breadcrumb a:focus-visible { color: rgba(255, 255, 255, .78); } @media (max-width: 1180px) { .single-post-page > .wxkn-breadcrumb-wrapper, .lx-author-page > .wxkn-breadcrumb-wrapper { padding-top: calc(72px + var(--lx-gap-16, 16px)); } } /* S01 hero sections should render immediately without entrance animation. */ .lx-page-shell main > .lx-hero .lx-hero__copy > *, .lx-page-shell main > .lx-hero .lx-hero__support, .lx-page-shell main > .lx-corporate-hero .lx-corporate-hero__copy > *, .lx-page-shell main > .lx-utility-hero .lx-utility-hero__copy > *, .lx-page-shell main > .lx-category-template__hero .lx-category-template__hero-copy > *, .single-product-page .lx-product-detail-section--hero .reveal { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } .single-post-page .post-sidebar .sidebar-widget:first-child h4 { color: var(--lx-color-primary); font-weight: 700; } /* =================================== Author Archive =================================== */ .lx-author-page { background: var(--lx-color-bg-base); } .lx-author-hero-section { padding-top: var(--lx-section-y-sm); } .lx-author-hero { position: relative; overflow: hidden; padding: clamp(24px, 3vw, 48px); background: var(--lx-color-bg-card); border: 1px solid var(--lx-color-border); box-shadow: 0 10px 15px -3px var(--lx-shadow-md); } .lx-author-hero::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 4px; background: var(--lx-color-primary); } .lx-author-hero__grid { align-items: flex-start; } .lx-author-hero__grid > [class*="lx-col-"] { min-width: 0; } .lx-author-hero__media { display: flex; justify-content: center; } .lx-author-hero__avatar-wrap { width: min(100%, 240px); } .lx-author-hero__avatar { aspect-ratio: 1; background: var(--lx-color-bg-soft); border: 1px solid var(--lx-color-border); border-radius: 50%; overflow: hidden; } .lx-author-hero__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; } .lx-author-hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .lx-author-hero__name, .lx-author-posts-head__title, .lx-author-post-card__title, .lx-author-post-card__title a { margin: 0; } .lx-author-hero__role { margin: 0; color: var(--lx-color-primary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .lx-author-hero__desc { max-width: 760px; margin: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } .lx-author-hero__share { display: flex; flex-wrap: wrap; gap: 12px; } .lx-author-share-link { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--lx-color-border); background: var(--lx-color-bg-card); color: var(--lx-color-text-heading); text-decoration: none; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease; } .lx-author-share-link:hover, .lx-author-share-link:focus-visible { background: var(--lx-color-primary); border-color: var(--lx-color-primary); color: var(--lx-color-bg-dark); transform: translateY(-2px); } .lx-author-share-link__icon { width: 18px; height: 18px; fill: currentColor; } .lx-author-posts-section { padding-bottom: var(--lx-section-y); } .lx-author-posts-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 32px; padding: 16px 0; background: rgba(241, 241, 241, 0.95); border-bottom: 1px solid var(--lx-color-border); } .lx-author-posts-head__count { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; min-height: 48px; padding: 0 16px; background: var(--lx-color-bg-card); border: 1px solid var(--lx-color-border); color: var(--lx-color-text-heading); font-family: var(--lx-font-heading); font-size: 16px; font-weight: 800; } .lx-author-posts-grid { align-items: stretch; } .lx-author-post-card { min-width: 0; } .lx-author-post-card:hover, .lx-author-post-card:focus-within { border-color: var(--lx-color-primary); box-shadow: 0 10px 15px -3px var(--lx-shadow-md); transform: translateY(-5px); } .lx-author-post-card__thumb-link { display: block; text-decoration: none; } .lx-author-post-card__thumb { aspect-ratio: 16 / 10; overflow: hidden; background: var(--lx-color-bg-soft); border-bottom: 1px solid var(--lx-color-border); } .lx-author-post-card__thumb img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 0.4s ease; } .lx-author-post-card:hover .lx-author-post-card__thumb img, .lx-author-post-card:focus-within .lx-author-post-card__thumb img { transform: scale(1.04); } .lx-author-post-card__body { display: flex; flex: 1; flex-direction: column; gap: 16px; padding: 24px; } .lx-author-post-card__date, .lx-author-post-card__excerpt { margin: 0; } .lx-author-post-card__date { text-transform: uppercase; letter-spacing: 0.06em; } .lx-author-post-card__title a { color: inherit; text-decoration: none; transition: color 0.3s ease; } .lx-author-post-card__title a:hover, .lx-author-post-card__title a:focus-visible { color: var(--lx-color-primary); } .lx-author-post-card__excerpt { flex: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .lx-author-post-card__link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; color: var(--lx-color-primary); font-family: var(--lx-font-heading); font-size: 14px; font-weight: 800; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; } .lx-author-post-card__link i { transition: transform 0.3s ease; } .lx-author-post-card:hover .lx-author-post-card__link i, .lx-author-post-card:focus-within .lx-author-post-card__link i { transform: translateX(4px); } .lx-author-pagination { margin-top: 40px; text-align: center; } .lx-author-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; padding: 0 16px; margin: 0 4px 8px; border: 1px solid var(--lx-color-border); background: var(--lx-color-bg-card); color: var(--lx-color-text-heading); text-decoration: none; font-family: var(--lx-font-heading); font-size: 14px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; } .lx-author-pagination .page-numbers:hover, .lx-author-pagination .page-numbers:focus-visible { background: var(--lx-color-primary); border-color: var(--lx-color-primary); color: var(--lx-color-bg-dark); } .lx-author-pagination .page-numbers.current { background: var(--lx-color-bg-dark); border-color: var(--lx-color-bg-dark); color: #ffffff; } .lx-author-no-posts { margin: 0; padding: 40px 0 80px; text-align: center; } @media (max-width: 1180px) { .lx-author-hero-section { padding-top: var(--lx-section-y-sm-mobile); } .lx-author-hero__media, .lx-author-hero__content { grid-column: span 12; } } @media (max-width: 767px) { .lx-author-hero__content { min-width: 0; align-items: stretch; text-align: center; gap: 20px; } .lx-author-hero__name, .lx-author-hero__desc { width: 100%; max-width: 100%; min-width: 0; } .lx-author-hero__desc { font-size: 14px; line-height: 1.6; hyphens: none; overflow-wrap: break-word; word-break: normal; } .lx-author-hero__share { justify-content: center; } .lx-author-posts-head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 20px; } .lx-author-post-card__body { gap: 20px; padding: 20px; } .lx-author-no-posts { padding: 20px 0 40px; } } .lx-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .lx-thank-you-page { --lx-thank-you-header-height: 96px; background: linear-gradient(180deg, #f4f5f7 0%, #ffffff 100%); } .lx-thank-you-page::before { content: ""; display: block; height: calc(var(--lx-thank-you-header-height) * 2); background: var(--lx-color-primary); } .lx-thank-you-page__section { min-height: calc(100vh - (var(--lx-thank-you-header-height) * 2)); display: flex; align-items: center; padding: 24px 0 80px; } .lx-thank-you-page__section > .container { width: min(var(--lx-container-max), calc(100% - var(--lx-container-pad) * 2)); max-width: none; } .lx-thank-you-card { display: grid; grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); background: #ffffff; border: 1px solid var(--lx-color-border, #e8e8ea); box-shadow: 0 24px 60px rgba(24, 24, 27, 0.08); overflow: hidden; } .lx-thank-you-card__media { background: var(--lx-color-bg-dark, #18181b); } .lx-thank-you-card__image { display: block; width: 100%; height: 100%; min-height: 100%; object-fit: cover; } .lx-thank-you-card__content { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 64px; } .lx-thank-you-card__content .lx-text-eyebrow { margin: 0; } .lx-thank-you-card__content h1 { margin: 0; font-size: clamp(36px, 4vw, 56px); line-height: 1.08; } .lx-thank-you-card__lead { margin: 0; max-width: 680px; color: var(--lx-color-text-muted, #5f6368); font-size: 18px; line-height: 1.7; } .lx-thank-you-card__list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; } .lx-thank-you-card__list li { display: flex; align-items: flex-start; gap: 12px; color: var(--lx-color-text-body, #1a1a1a); line-height: 1.65; } .lx-thank-you-card__list i { margin-top: 3px; color: var(--lx-color-primary); font-size: 18px; } .lx-thank-you-card__actions { gap: 16px; } @media (max-width: 1024px) { .lx-thank-you-page { --lx-thank-you-header-height: 72px; } .lx-thank-you-page__section { min-height: 0; padding: 40px 0 64px; } .lx-thank-you-card { grid-template-columns: 1fr; } .lx-thank-you-card__image { height: auto; min-height: 0; aspect-ratio: 16 / 9; } .lx-thank-you-card__content { padding: 48px; } } @media (max-width: 767px) { .lx-thank-you-page__section { padding: 32px 0 40px !important; } .lx-thank-you-card__content { gap: 20px; padding: 32px 20px; } .lx-thank-you-card__content h1 { font-size: clamp(30px, 8vw, 38px); } .lx-thank-you-card__lead { font-size: 16px; line-height: 1.65; hyphens: none; overflow-wrap: break-word; word-break: normal; } .lx-thank-you-card__list { gap: 12px; } .lx-thank-you-card__actions { flex-direction: column; gap: 20px; } .lx-thank-you-card__actions .lx-btn { width: 100%; } } .lx-404-page { background: linear-gradient(180deg, #f4f5f7 0%, #ffffff 100%); } .lx-404-page__section { min-height: calc(100vh - 96px); display: flex; align-items: center; padding: 120px 0 80px; } .lx-404-page__section > .container { width: min(var(--lx-container-max), calc(100% - var(--lx-container-pad) * 2)); max-width: none; } .lx-404-page__card { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); background: #ffffff; border: 1px solid var(--lx-color-border, #e8e8ea); box-shadow: 0 24px 60px rgba(24, 24, 27, 0.08); overflow: hidden; } .lx-404-page__status { display: flex; align-items: center; justify-content: center; padding: 48px 32px; background: linear-gradient(180deg, rgba(252, 182, 4, 0.98) 0%, rgba(255, 211, 89, 0.9) 100%); color: var(--lx-color-bg-dark, #18181b); } .lx-404-page__status-inner { display: grid; gap: 12px; justify-items: center; text-align: center; } .lx-404-page__code { font-family: var(--lx-font-heading); font-size: clamp(88px, 12vw, 160px); font-weight: 900; line-height: 0.9; } .lx-404-page__status-label { font-family: var(--lx-font-heading); font-size: 14px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .lx-404-page__content { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 64px; } .lx-404-page__content .lx-text-eyebrow { margin: 0; } .lx-404-page__content h1 { margin: 0; font-size: clamp(36px, 4vw, 56px); line-height: 1.08; } .lx-404-page__lead { margin: 0; max-width: 680px; color: var(--lx-color-text-muted, #5f6368); font-size: 18px; line-height: 1.7; } .lx-404-page__list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; } .lx-404-page__list li { display: flex; align-items: flex-start; gap: 12px; color: var(--lx-color-text-body, #1a1a1a); line-height: 1.65; } .lx-404-page__list i { margin-top: 3px; color: var(--lx-color-primary); font-size: 18px; } .lx-404-page__actions { gap: 16px; } @media (max-width: 1024px) { .lx-404-page__section { min-height: 0; padding: 112px 0 64px; } .lx-404-page__card { grid-template-columns: 1fr; } .lx-404-page__status { padding: 40px 20px; } .lx-404-page__content { padding: 48px; } } @media (max-width: 767px) { .lx-404-page__section { padding: 80px 0 40px !important; } .lx-404-page__status { padding: 32px 20px; } .lx-404-page__content { gap: 20px; padding: 32px 20px; } .lx-404-page__content h1 { font-size: clamp(30px, 8vw, 38px); } .lx-404-page__lead { font-size: 16px; line-height: 1.65; hyphens: none; overflow-wrap: break-word; word-break: normal; } .lx-404-page__list { gap: 12px; } .lx-404-page__actions { flex-direction: column; gap: 20px; } .lx-404-page__actions .lx-btn { width: 100%; } }