/* ===================== style.css 主题信息 Theme header ===================== */ /* Theme Name: Systin Theme URI: https://www.systinwindows.com/ Author: Systin Rebuild Description: Custom WordPress theme faithfully replicating the SYSTIN aluminum windows & doors website . Includes product custom post type, product category taxonomy, blog, and full front page. Version: 1.0.0 Requires at least: 6.0 Tested up to: 7.1 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: systin Tags: business, custom-menu, custom-logo, featured-images, translation-ready */ /* main.css 编译后 */ /* ===================== main.css 主样式表 Main stylesheet ===================== */ /* main.css 全站基础 */ /* ---------- Design tokens 设计变量 ---------- */ :root { --gold: #006d3d; --gold-2: #0d7a48; --gold-3: #158253; --gold-dark: #00532f; --gold-deep: #004d2b; --gold-accent: #006036; --ink: #1a1a1a; --ink-2: #111111; --slate: #1e293b; --slate-2: #334155; --text: #444444; --muted: #6b7280; --bg: #ffffff; --bg-soft: #f5f5f5; --bg-warm: #f2f9f5; --bg-warm-2: #f7fbf9; --bg-cool: #f0f5fa; --line: #e6e3dd; --line-2: #d9d4c9; --radius: 6px; --radius-lg: 12px; --shadow: 0 10px 30px rgba(26, 26, 26, .08); --shadow-lg: 0 20px 50px rgba(26, 26, 26, .14); --font-head: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-body: 'Titillium Web', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --container: 1280px; --hdr-h: 90px; } /* ---------- /Design tokens 设计变量 ---------- */ /* ---------- Base 基础 ---------- */ *, *::before, *::after { box-sizing: border-box; } /* 不设原生 */ html { -webkit-text-size-adjust: 100%; } /* Lenis 平滑滚动 */ 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; } html { /* Clip 根级裁切 */ overflow-x: hidden; overflow-x: clip; } body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; /* No horizontal 首页一致 */ } img { max-width: 100%; height: auto; display: block; } a { color: var(--gold-dark); text-decoration: none; transition: color .2s; } a:hover { color: var(--gold-deep); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); color: var(--ink); margin: 0 0 .5em; line-height: 1.25; font-weight: 700; letter-spacing: -.2px; } h1 { font-size: 2.6rem; } h2 { font-size: 2.1rem; } h3 { font-size: 1.35rem; } h4 { font-size: 1.1rem; } p { margin: 0 0 1rem; } ul, ol { margin: 0 0 1rem; padding-left: 1.2rem; } blockquote { margin: 1.5rem 0; padding: 1rem 1.5rem; border-left: 4px solid var(--gold); background: var(--bg-warm-2); font-style: italic; } table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .95rem; } th, td { border: 1px solid var(--line); padding: .7rem .9rem; text-align: left; vertical-align: top; } th { background: var(--bg-warm); font-family: var(--font-head); color: var(--ink); font-weight: 600; } tr:nth-child(even) td { background: #faf9f7; } .WP_container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 16px; } .WP_content { overflow: hidden; } .screen-reader-text, .skip-link { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .skip-link:focus { position: fixed !important; top: 8px; left: 8px; width: auto; height: auto; clip: auto; background: var(--gold-dark); color: #fff; padding: 10px 16px; z-index: 9999; border-radius: 4px; } /* icons.css 基础规则 */ /* 布局辅助类Layout helpers (were inline style=""). */ .WP_sidebarPad { padding: 18px; } .WP_articlepad { padding: 10px 0 60px; } /* ---------- /Base 基础 ---------- */ /* ---------- Buttons 按钮 ---------- */ .WP_btn { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-head); font-weight: 600; font-size: .92rem; letter-spacing: .3px; text-transform: uppercase; padding: 13px 26px; border-radius: 4px; border: 2px solid transparent; cursor: pointer; transition: all .25s ease; line-height: 1; } .WP_btnGold { background: var(--gold); color: #fff; border-color: var(--gold); } .WP_btnGold:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(122, 92, 30, .25); } .WP_btnDark { background: var(--ink); color: #fff; border-color: var(--ink); } .WP_btnDark:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: #fff; } .WP_btnGhost { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); } .WP_btnGhost:hover { background: #fff; color: var(--ink); border-color: #fff; } .WP_btnOutline { background: transparent; color: var(--gold-dark); border-color: var(--gold); } .WP_btnOutline:hover { background: var(--gold); color: #fff; } .WP_btnLg { padding: 17px 38px; font-size: 1rem; } .WP_btnBlock { display: flex; justify-content: center; width: 100%; white-space: nowrap; } /* ---------- /Buttons 按钮 ---------- */ /* ---------- Section helpers 通用分节 ---------- */ .WP_section { padding: 84px 0; } .WP_sectionTight { padding: 60px 0; } .WP_sectionSoft { background: var(--bg-soft); } .WP_sectionWarm { background: var(--bg-warm); } .WP_sectionDark { background: var(--ink); color: #cfcfcf; } .WP_sectionDark h2, .WP_sectionDark h3 { color: #fff; } .WP_eyebrow { display: inline-block; font-family: var(--font-head); font-size: .8rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold-dark); margin-bottom: .7rem; } .WP_head { text-align: center; max-width: 780px; margin: 0 auto 48px; } .WP_head p { color: var(--muted); font-size: 1.05rem; margin: 0; } .WP_headLeft { text-align: left; margin-left: 0; } .WP_titleUnderline { position: relative; display: inline-block; padding-bottom: 14px; } .WP_titleUnderline::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 64px; height: 3px; background: var(--gold); } .WP_headLeft .WP_titleUnderline::after { left: 0; transform: none; } /* ---------- /Section helpers 版块辅助 ---------- */ /* Top bar 顶部信息条 */ .WP_topbar { background: #fff; border-bottom: 1px solid var(--line); color: #4a4a4a; font-size: .86rem; } .WP_topbarInner { display: flex; align-items: center; justify-content: space-between; min-height: 40px; gap: 18px; } .WP_topbarContact { display: flex; gap: 26px; flex-wrap: wrap; } .WP_topbar a { color: #4a4a4a; display: inline-flex; align-items: center; gap: 7px; } .WP_topbar a .WP_icon { color: var(--gold-dark); } .WP_topbar a:hover { color: var(--gold-dark); } .WP_topbarSearch { flex: 0 0 auto; } .WP_searchForm { display: flex; gap: 8px; } .WP_searchForm input { padding: 9px 14px; border: 1px solid var(--line-2); border-radius: 3px; font-family: var(--font-body); font-size: .88rem; min-width: 200px; background: #fff; } .WP_searchForm input:focus { outline: 0; border-color: var(--gold); } .WP_searchFormCompact input { min-width: 210px; padding: 6px 10px; font-size: .82rem; border-radius: 3px; } .WP_searchFormCompact button { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; background: transparent; color: #666; cursor: pointer; } .WP_searchFormCompact button .WP_icon { width: 16px; height: 16px; } .WP_searchFormCompact button:hover { color: var(--gold-dark); } .WP_brand { display: flex; align-items: center; align-self: center; flex: 0 0 auto; } .WP_brandLogo { display: block; line-height: 0; } /* Logo flex 固定高度、 */ .WP_brandLogo img { display: block; height: 70px; width: auto; max-width: none; } /* Logo Compact 抽屉头部 */ .WP_drawerHead .WP_brandLogoSm img { height: 36px; width: auto; } .WP_header { background: #fff; position: sticky; top: 0; z-index: 900; box-shadow: 0 2px 14px rgba(0,0,0,.06); } .WP_headerInner { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: var(--hdr-h); } /* main.js 头部未吸顶 */ .WP_header.WP_headerFixed { position: fixed; top: 0; left: 0; right: 0; } .WP_brandText { display: flex; flex-direction: column; line-height: 1; } .WP_brandName { font-family: var(--font-head); font-weight: 800; font-size: 1.9rem; color: var(--ink); letter-spacing: 1px; } .WP_brandTag { font-size: .72rem; letter-spacing: 3.5px; text-transform: uppercase; color: var(--gold-dark); margin-top: 4px; } .WP_brandTextLight .WP_brandName { color: #fff; } .custom-logo-link img { max-height: 54px; width: auto; } .WP_nav { margin-left: auto; flex: 1 1 auto; min-width: 0; } /* main.js 严格单行 */ .WP_menu { display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 2px; list-style: none; margin: 0; padding: 0; } .WP_menu > li { position: relative; } .WP_headerActions .WP_btn { text-transform: none; letter-spacing: .2px; border-radius: 20px; padding: 10px 18px; white-space: nowrap; } .WP_menu > li > a { display: block; padding: 12px 12px; font-family: var(--font-head); font-weight: 600; font-size: var(--navFs, .9rem); color: var(--ink); border-radius: 4px; white-space: nowrap; } .WP_menu > li > a:hover, .WP_menu > li.current-menu-item > a, .WP_menu > li.current_page_item > a { color: var(--gold-dark); background: transparent; } .WP_menu .sub-menu { position: absolute; top: 100%; left: 0; min-width: 210px; background: #fff; box-shadow: var(--shadow); border-top: 3px solid var(--gold); list-style: none; margin: 0; padding: 8px 0; border-radius: 0 0 6px 6px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all .22s; z-index: 50; } .WP_menu > li:hover > .sub-menu, .WP_menu > li.WP_hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .WP_menu .sub-menu a { display: block; padding: 9px 18px; font-size: .9rem; color: var(--slate); } .WP_menu .sub-menu a:hover { background: var(--bg-warm); color: var(--gold-dark); padding-left: 24px; } /* Active 子栏目激活 */ .WP_menu .sub-menu li.current-menu-item > a { color: var(--gold-dark); background: var(--bg-warm); font-weight: 600; box-shadow: inset 3px 0 0 var(--gold); } .WP_menu .menu-item-has-children > a::after { content: "▾"; font-size: .7em; margin-left: 6px; } .WP_headerActions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; } /* Logo 窄桌面头部 */ @media (max-width: 1366px) { .WP_menu { --navFs: .87rem; } .WP_menu > li > a { padding: 12px 10px; } } @media (max-width: 1240px) { .WP_menu { --navFs: .84rem; } .WP_menu > li > a { padding: 12px 8px; } } @media (max-width: 1150px) { .WP_menu > li > a { padding: 10px 8px; } } /* Logo CTA 小桌面 */ @media (max-width: 1100px) { .WP_header .WP_container { padding-left: 20px; padding-right: 20px; } .WP_brandLogo img { height: 56px; } .WP_headerActions { gap: 8px; } .WP_headerActions .WP_btn { padding: 9px 14px; font-size: .88rem; } .WP_menu > li > a { padding: 10px 6px; } } /* Tablet 平板横屏 */ @media (max-width: 1020px) { .WP_header .WP_container { padding-left: 16px; padding-right: 16px; } .WP_brandLogo img { height: 48px; } .WP_menu > li > a { padding: 10px 5px; } .WP_headerActions .WP_btn { padding: 8px 12px; font-size: .84rem; } } /* active X 汉堡按钮 */ .WP_burger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; background: #fff; border: 1px solid rgba(0, 109, 61, .28); border-radius: 12px; padding: 0; cursor: pointer; box-shadow: 0 2px 8px rgba(13, 60, 36, .08); transition: transform .18s ease, background .25s ease, box-shadow .25s ease; } .WP_burger:active { transform: scale(.88); box-shadow: 0 1px 3px rgba(13, 60, 36, .12); } .WP_burger span { display: block; width: 20px; height: 2.5px; border-radius: 2px; background: var(--gold); transition: transform .32s cubic-bezier(.6, .05, .28, .91), opacity .22s ease, background .25s ease; } /* header X 抽屉打开时 */ body.drawer-open .WP_header { z-index: 1002; } body.drawer-open .WP_drawerHead { display: none; } body.drawer-open .WP_drawerBody { padding-top: 84px; } .WP_burger.active { background: var(--gold); border-color: var(--gold); } .WP_burger.active span { background: #fff; } .WP_burger.active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .WP_burger.active span:nth-child(2) { opacity: 0; transform: scaleX(.2); } .WP_burger.active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } /* ---------- /Top bar、header 顶栏、头部 ---------- */ /* ---------- Drawer 抽屉 ---------- */ .WP_drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 86vw); /* Photo 背景图、 */ background: linear-gradient(rgba(255, 255, 255, .86), rgba(255, 255, 255, .86)), url("../../../../uploads/common/drawer-bg.webp") center / cover no-repeat, #fff; /* AVIF 优先，同上 */ background: linear-gradient(rgba(255, 255, 255, .86), rgba(255, 255, 255, .86)), image-set(url("../../../../uploads/common/drawer-bg.avif") type('image/avif'), url("../../../../uploads/common/drawer-bg.webp") type('image/webp')) center / cover no-repeat, #fff; /* Closed 未打开时纯白：背景图延到首次打开才下载，移动端每页省 45KB */ z-index: 1000; transform: translateX(100%); transition: transform .32s ease, visibility 0s .32s; visibility: hidden; /* Closed drawer 关闭抽屉 */ display: flex; flex-direction: column; box-shadow: -10px 0 40px rgba(0,0,0,.15); } .WP_drawer.open { transform: translateX(0); visibility: visible; transition: transform .32s ease; } /* Closed 关闭态不取背景图：省掉每页 45KB 的无效下载 */ .WP_drawer:not(.open) { background: #fff; } /* Phone 手机端打开时用 800w 副本（340px 宽 × DPR2 足够） */ @media (max-width: 767px) { .WP_drawer.open { background: linear-gradient(rgba(255, 255, 255, .86), rgba(255, 255, 255, .86)), image-set(url("../../../../uploads/common/drawer-bg-800x1029.avif") type('image/avif'), url("../../../../uploads/common/drawer-bg-800x1029.webp") type('image/webp')) center / cover no-repeat, #fff; } } /* open Desktop 桌面宽度 */ @media (min-width: 901px) { .WP_drawer, .WP_overlay { display: none !important; } } .WP_drawerHead { display: flex; justify-content: flex-end; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--line); } .WP_drawerClose { background: none; border: 0; font-size: 2rem; line-height: 1; cursor: pointer; color: var(--ink); } /* touch-action 合成层 */ .WP_drawerBody { flex: 1 1 auto; min-height: 0; padding: 20px 22px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: none; transform: translateZ(0); } .WP_drawerSearch { margin-bottom: 18px; } .WP_drawerSearch .WP_searchFormCompact input { min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 8px; font-size: .95rem; background: #fff; } .WP_drawerSearch .WP_searchFormCompact button { width: 46px; height: 44px; flex: 0 0 46px; display: grid; place-items: center; background: var(--gold); color: #fff; border: 0; border-radius: 8px; cursor: pointer; } .WP_drawerSearch .WP_searchFormCompact button .WP_icon { width: 18px; height: 18px; filter: brightness(0) invert(1); } .WP_drawerMenu { list-style: none; margin: 0 0 20px; padding: 0; } .WP_drawerMenu li { border-bottom: 1px solid var(--line); } .WP_drawerMenu a { display: block; padding: 13px 0; font-family: var(--font-head); font-weight: 600; color: var(--ink); } .WP_drawerMenu .sub-menu { list-style: none; margin: 0; padding: 0 0 0 16px; overflow: hidden; max-height: 0; transition: max-height .34s cubic-bezier(.4, 0, .2, 1), padding-bottom .34s cubic-bezier(.4, 0, .2, 1); } .WP_drawerMenu li.WP_subOpen > .sub-menu { padding-bottom: 8px; } .WP_drawerMenu .sub-menu a { padding: 8px 0; font-weight: 400; font-size: .92rem; } /* Active 子栏目激活 */ .WP_drawerMenu .sub-menu li.current-menu-item > a { color: var(--gold-dark); font-weight: 600; } /* Expand 父项右侧 */ .WP_drawerMenu li.menu-item-has-children { position: relative; } .WP_drawerMenu li.menu-item-has-children > a { padding-right: 48px; } .WP_drawerMenu .WP_subToggle { position: absolute; top: 1px; right: 0; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; background: none; border: 0; cursor: pointer; color: var(--ink); } .WP_drawerMenu .WP_subToggle .WP_subChev { width: 12px; height: 12px; display: block; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .3s ease; } .WP_drawerMenu li.WP_subOpen > .WP_subToggle .WP_subChev { transform: translateY(2px) rotate(-135deg); } .WP_drawerContact { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; font-size: .92rem; } .WP_drawerContact a { display: inline-flex; align-items: center; gap: 9px; } .WP_overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; transition: .3s; z-index: 950; } .WP_overlay.show { opacity: 1; visibility: visible; } /* ---------- /Drawer 抽屉菜单 ---------- */ /* ---------- Hero slider 首屏轮播 ---------- */ .WP_hero { position: relative; min-height: 78vh; display: flex; align-items: center; overflow: hidden; background: var(--ink); } .WP_heroSlides { position: absolute; inset: 0; } .WP_heroSlide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; background-size: cover; background-position: center; will-change: opacity, transform; } /* Ken Burns 激活背景图 */ .WP_heroSlide.WP_active { opacity: 1; animation: heroKenBurns 5.8s cubic-bezier(.25,.5,.35,1) both; } @keyframes heroKenBurns { from { transform: scale(1); } to { transform: scale(1.08); } } .WP_hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,12,12,.86) 0%, rgba(12,12,12,.62) 45%, rgba(12,12,12,.32) 100%); } .WP_heroInner2 { position: relative; z-index: 3; padding: 90px 0; max-width: 760px; } .WP_heroContent { display: none; } .WP_heroContent.WP_active { display: block; } /* Staggered 文案分层 */ .WP_heroContent.WP_active > * { opacity: 0; animation: heroItemIn .75s cubic-bezier(.22,.61,.36,1) forwards; } .WP_heroContent.WP_active > :nth-child(1) { animation-delay: .12s; } .WP_heroContent.WP_active > :nth-child(2) { animation-delay: .32s; } .WP_heroContent.WP_active > :nth-child(3) { animation-delay: .52s; } .WP_heroContent.WP_active > :nth-child(4) { animation-delay: .72s; } @keyframes heroItemIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .WP_heroSlide.WP_active { animation: none; transform: none; } .WP_heroContent.WP_active > * { animation: none; opacity: 1; } } .WP_heroEyebrow { color: var(--gold); font-family: var(--font-head); font-weight: 700; letter-spacing: 3px; text-transform: uppercase; font-size: .82rem; margin-bottom: 18px; } /* Brighter 首屏文案用 */ .WP_hero h1 { color: #5fd392; font-size: 3.35rem; line-height: 1.14; margin-bottom: 20px; } .WP_hero p { color: rgba(167, 230, 195, .95); font-size: 1.15rem; margin-bottom: 26px; max-width: 620px; } @media (max-width: 1024px) { .WP_hero h1, .WP_hero p { text-shadow: 0 1px 14px rgba(0, 40, 20, .45); } } .WP_heroBadges { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-bottom: 32px; } .WP_heroBadges span { color: #fff; font-size: .96rem; display: inline-flex; align-items: center; gap: 8px; } .WP_heroBadges .WP_icon { color: var(--gold); } .WP_heroCta { display: flex; flex-wrap: wrap; gap: 14px; } .WP_heroDots { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 4; } .WP_heroDots button { width: 11px; height: 11px; border-radius: 50%; border: 2px solid rgba(255,255,255,.75); background: transparent; cursor: pointer; padding: 0; } .WP_heroDots button.WP_active { background: var(--gold); border-color: var(--gold); } /* ---------- /Hero slider 首屏轮播 ---------- */ /* ---------- Feature strip 特性条 ---------- */ .WP_pillars { padding: 70px 0; background: var(--bg); } .WP_pillarsGrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; } .WP_pillar { text-align: center; padding: 30px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: all .28s; } .WP_pillar:hover { border-color: var(--gold); box-shadow: var(--shadow); transform: translateY(-6px); } .WP_pillarIco { width: 84px; height: 84px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-warm); color: var(--gold-dark); font-size: 1.6rem; overflow: hidden; } .WP_pillarIco img { width: 52px; height: 52px; object-fit: contain; } .WP_pillar h3 { font-size: 1rem; margin: 0; line-height: 1.4; } /* ---------- /Feature strip 卖点条 ---------- */ /* ---------- About 关于 ---------- */ .WP_about2 { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; } .WP_aboutMedia { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); } .WP_aboutMedia img { width: 100%; } .WP_aboutBody h2 { margin-bottom: 18px; } .WP_aboutBody p { color: var(--text); font-size: 1.03rem; } .WP_aboutPoints { list-style: none; padding: 0; margin: 22px 0 28px; display: grid; gap: 12px; } .WP_aboutPoints li { display: flex; gap: 12px; align-items: flex-start; color: var(--slate); } .WP_aboutPoints .WP_icon { color: var(--gold); font-size: 1.15rem; margin-top: 3px; } /* ---------- /About 关于我们 ---------- */ /* ---------- Stats 数据统计 ---------- */ .WP_stats { background: var(--ink); color: #fff; padding: 56px 0; } .WP_statsGrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; text-align: center; } .WP_statNum { font-family: var(--font-head); font-size: 2.5rem; font-weight: 800; color: var(--gold); line-height: 1; white-space: nowrap; } .WP_statNum span { font-size: inherit; } .WP_statNum em { font-style: normal; } .WP_statLabel { font-size: .95rem; color: #cfcfcf; margin-top: 8px; } /* ---------- /Stats 数据统计 ---------- */ /* ---------- Gallery 图库 ---------- */ .WP_galleryGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .WP_galleryGrid2 { grid-template-columns: repeat(2, 1fr); } .WP_galleryGrid2 .WP_galleryItem:nth-child(1) { grid-column: auto; grid-row: auto; aspect-ratio: 16/7; } .WP_reviewShot { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .WP_reviewShot img { width: 100%; } .WP_carouselTrackRevi > * { flex: 0 0 360px; } .WP_pillarImg { width: 34px; height: 34px; object-fit: contain; } .WP_headWithLink { position: relative; } .WP_galleryItem { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; background: var(--bg-soft); } .WP_galleryItem img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .WP_galleryItem:hover img { transform: scale(1.07); } .WP_galleryItem:nth-child(1) { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; } /* ---------- /Gallery 图集 ---------- */ /* ---------- Certifications 认证 ---------- */ .WP_certs { text-align: left; } .WP_certsEyebrow { text-align: center; } .WP_certsLogos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 26px; margin-top: 34px; } .WP_certsLogos img { max-height: 74px; width: auto; filter: grayscale(1); opacity: .8; transition: .3s; } .WP_certsLogos img:hover { filter: none; opacity: 1; } /* ---------- /Certifications 认证 ---------- */ /* ---------- Product carousel 产品轮播 ---------- */ .WP_carousel { position: relative; } .WP_carouselTrack { display: flex; gap: 22px; overflow-x: auto; scroll-behavior: smooth; padding: 6px 2px 22px; scroll-snap-type: x mandatory; scrollbar-width: none; } .WP_carouselTrack::-webkit-scrollbar { display: none; } .WP_carouselTrack > * { flex: 0 0 285px; scroll-snap-align: start; } .WP_carouselNav { display: flex; justify-content: center; gap: 12px; margin-top: 8px; } .WP_carouselNav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: .25s; } .WP_carouselNav button:hover { background: var(--gold); border-color: var(--gold); color: #fff; } /* ---------- /Product carousel 产品轮播 ---------- */ /* ---------- Cards 卡片 ---------- */ .WP_card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: all .28s; display: flex; flex-direction: column; height: 100%; } .WP_card:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); border-color: transparent; } .WP_cardMedia { display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--bg-soft); } .WP_cardMedia img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .WP_card:hover .WP_cardMedia img { transform: scale(1.08); } .WP_cardPh { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #efece6, #ddd8cf); } .WP_cardBody { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .WP_cardCat { font-size: .74rem; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold-dark); font-weight: 700; font-family: var(--font-head); } .WP_cardTitle { font-size: 1.12rem; margin: 0; } .WP_cardTitle a { color: var(--ink); } .WP_cardTitle a:hover { color: var(--gold-dark); } .WP_cardLink { margin-top: auto; font-family: var(--font-head); font-weight: 600; font-size: .86rem; text-transform: uppercase; letter-spacing: .5px; display: inline-flex; align-items: center; gap: 6px; } /* ---------- /Cards 卡片 ---------- */ /* Product 产品分类 */ .WP_catsLayout { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 26px; } .WP_catCol h3 { font-size: .92rem; text-transform: uppercase; letter-spacing: 1.6px; color: var(--gold-dark); padding-bottom: 10px; border-bottom: 2px solid var(--line-2); margin-bottom: 14px; } .WP_catCol ul { list-style: none; padding: 0; margin: 0; } .WP_catCol li { border-bottom: 1px dashed var(--line); } .WP_catCol a { display: block; padding: 9px 0; color: var(--slate); font-size: .95rem; transition: .2s; } .WP_catCol a:hover { color: var(--gold-dark); padding-left: 6px; } /* Product 产品分类 */ /* Team 团队 */ .WP_split2 { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; } .WP_splitMedia2 { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); } .WP_reviews { background: var(--bg-cool); } .WP_reviewCard { background: #fff; border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; height: 100%; } .WP_reviewCardStars { color: var(--gold); display: flex; gap: 3px; font-size: 1rem; } .WP_reviewCardText { color: var(--slate); font-style: italic; flex: 1; } .WP_reviewCardAuthor { display: flex; align-items: center; gap: 12px; } .WP_reviewCardAvatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: var(--bg-soft); } .WP_reviewCardName { font-family: var(--font-head); font-weight: 600; color: var(--ink); font-size: .95rem; } .WP_reviewCardRole { font-size: .82rem; color: var(--muted); } /* Team 团队 */ /* ---------- Steps 流程步骤 ---------- */ .WP_stepsGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; counter-reset: step; } .WP_step { position: relative; padding: 34px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); } .WP_step::before { counter-increment: step; content: "0" counter(step); font-family: var(--font-head); font-size: 2.4rem; font-weight: 800; color: var(--gold); opacity: .28; position: absolute; top: 14px; right: 20px; line-height: 1; } .WP_step h3 { font-size: 1.15rem; margin-bottom: 10px; } .WP_step p { margin: 0; font-size: .95rem; } /* ---------- /Steps 流程步骤 ---------- */ /* ---------- News / blog cards 新闻卡片 ---------- */ .WP_postsGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .WP_postCard2 { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: all .28s; } .WP_postCard2:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); } .WP_postCardMedia { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--bg-soft); } .WP_postCardMedia img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .WP_postCard2:hover .WP_postCardMedia img { transform: scale(1.07); } .WP_postCardBody { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; } .WP_postCardMeta { display: flex; gap: 12px; align-items: center; font-size: .8rem; color: var(--muted); margin-bottom: 10px; } .WP_postCardCat { color: var(--gold-dark); font-weight: 700; font-family: var(--font-head); text-transform: uppercase; letter-spacing: 1px; font-size: .72rem; } .WP_postCardTitle { font-size: 1.1rem; margin: 0 0 10px; } .WP_postCardTitle a { color: var(--ink); } .WP_postCardTitle a:hover { color: var(--gold-dark); } .WP_postCardExcerpt { font-size: .92rem; color: var(--muted); margin: 0 0 14px; } .WP_postCardLink { margin-top: auto; font-family: var(--font-head); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .5px; display: inline-flex; align-items: center; gap: 6px; } /* News blog 新闻 */ /* ---------- CTA band CTA 行动条 ---------- */ .WP_cta { background: linear-gradient(120deg, var(--gold-dark), var(--gold-accent)); color: #fff; padding: 60px 0; } .WP_ctaInner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; } .WP_cta h2 { color: #fff; margin: 0 0 8px; } .WP_cta p { margin: 0; color: rgba(255,255,255,.9); } /* ---------- /CTA band CTA 条 ---------- */ /* ---------- Product single 产品详情 ---------- */ .WP_breadcrumb { font-size: .85rem; color: var(--muted); padding: 16px 0; } .WP_breadcrumb a { color: var(--gold-dark); } .WP_breadcrumb .sep { margin: 0 8px; color: var(--pd-green, #08764D); } .WP_breadcrumb .cur { color: var(--muted); } /* 面包屑首项绿色房子图标 */ .WP_breadcrumb .WP_bcrumbIco { display: inline-block; width: 13px; height: 13px; margin-right: 5px; vertical-align: -1.5px; color: var(--pd-green, #08764D); } .WP_psingleHero { background: #fff; padding: 30px 0 46px; border-bottom: 1px solid var(--line); } .WP_psingleHeroGrid { display: grid; grid-template-columns: 1fr 1.08fr; gap: 48px; align-items: start; } .WP_psingleGallery { overflow: hidden; background: #fff; border: 1px solid var(--line); } .WP_psingleGallery img { width: 100%; display: block; } .WP_psingleInfo h1 { font-size: 2rem; margin: 6px 0 16px; } .WP_psingleIntro { font-size: 1rem; color: var(--text); line-height: 1.75; } .WP_psingleFeatures { list-style: disc; padding-left: 22px; margin: 20px 0 22px; display: grid; gap: 8px; } .WP_psingleFeatures li { color: var(--text); font-size: .97rem; } .WP_psingleFeatures li::marker { color: var(--slate); } .WP_share { display: flex; gap: 8px; margin: 4px 0 22px; } .WP_share a { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; } .WP_share a:hover { opacity: .85; } .WP_shareFb { background: #3b5998; } .WP_shareTw { background: #1da1f2; } .WP_shareLi { background: #0077b5; } .WP_sharePi { background: #bd081c; } .WP_shareWa { background: #25d366; } .WP_shareEm { background: #3b9dd4; } .WP_psingleActions { display: flex; justify-content: center; } .WP_psingleActions .WP_btn { border-radius: 999px; padding: 15px 46px; } .WP_psingleLayout { display: grid; grid-template-columns: 300px 1fr; gap: 46px; padding: 40px 0 60px; align-items: start; } .WP_sidebar { position: sticky; top: 100px; } .WP_sidebarBox { border: 1px solid #e8e8e8; border-radius: 4px; overflow: hidden; margin-bottom: 24px; background: #fff; } .WP_sidebarBox h3 { background: #fff; color: #222; margin: 0; padding: 14px 18px; font-size: 1.02rem; text-transform: none; letter-spacing: 0; border-left: 4px solid var(--gold); border-bottom: 1px solid var(--line); } .WP_sidebarBox ul { list-style: none; margin: 0; padding: 4px 0; } .WP_sidebarBox li { border-bottom: 1px solid var(--line); } .WP_sidebarBox li:last-child { border-bottom: 0; } .WP_sidebarBox li a { display: block; padding: 12px 20px; color: var(--slate); font-size: .93rem; display: flex; justify-content: space-between; align-items: center; } .WP_sidebarBox li a:hover, .WP_sidebarBox li a.active { background: var(--bg-warm); color: var(--gold-dark); font-weight: 600; } .WP_sidebarBoxForm { padding-bottom: 20px; } .WP_formSide { display: grid; gap: 10px; padding: 16px 18px 0; } .WP_formSide input[type="text"], .WP_formSide input[type="email"], .WP_formSide textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 3px; font-size: .92rem; font-family: inherit; color: var(--text); background: #fff; } .WP_formSide input:focus, .WP_formSide textarea:focus { outline: none; border-color: var(--gold); } .WP_formSide textarea { min-height: 92px; resize: vertical; } .WP_formUpload { display: inline-block; background: #6b6b6b; color: #fff; font-size: .88rem; padding: 9px 16px; border-radius: 3px; cursor: pointer; width: fit-content; } .WP_formUpload input[type="file"] { display: none; } .WP_formSide .WP_btn { justify-self: start; border-radius: 999px; padding: 11px 26px; } .WP_entry { color: var(--text); font-size: .98rem; } .WP_entry h2 { font-size: 1.7rem; margin-top: 1.8em; padding-bottom: .3em; border-bottom: 2px solid var(--bg-warm); } .WP_entry h2:first-child { margin-top: 0; } .WP_entry h3 { font-size: 1.28rem; margin-top: 1.5em; } .WP_entry img { border-radius: var(--radius); margin: 1.2rem 0; } .WP_entry a { color: var(--gold-dark); } .WP_entry ul { padding-left: 22px; } .WP_entry ul li::marker { color: var(--gold-dark); } .WP_entry table { width: 100%; border-collapse: collapse; background: #fff; margin: 1rem 0 1.6rem; border: 1px solid #e2e2e2; font-size: .93rem; } .WP_entry table td { border: 1px solid #e2e2e2; padding: 13px 15px; vertical-align: top; line-height: 1.6; } .WP_entry table td:first-child { width: 150px; color: #333; } /* Section 产品详情 */ .single-yt_product .WP_entry h2 { font-size: 1.18rem; margin: 1.9em 0 .8em; padding: 11px 16px; border-bottom: 0; background: #f5f5f5; border-left: 4px solid var(--gold); color: #222; line-height: 1.35; } .single-yt_product .WP_entry h2:first-child { margin-top: 0; } .WP_quoteCard { background: #f7f7f7; border-radius: 10px; padding: 36px 30px; margin: 34px 0; text-align: center; } .WP_quoteCard h3 { margin: 0 0 14px; font-size: 1.42rem; color: #222; } .WP_quoteCard p { margin: 0 0 6px; color: var(--muted); } .WP_quoteCard .WP_btn { margin-top: 18px; } .WP_faq { margin: 20px 0 10px; } .WP_faqItem { border: 1px solid #e5e5e5; border-radius: 4px; margin-bottom: 12px; background: #fff; overflow: hidden; } .WP_faqQ { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 15px 18px; background: #fff; border: 0; cursor: pointer; text-align: left; font-family: var(--font-head); font-weight: 700; font-size: .98rem; color: #222; } .WP_faqItem.WP_open .WP_faqQ { background: var(--gold-dark); color: #fff; } .WP_faqIc { position: relative; width: 14px; height: 14px; flex: 0 0 auto; } .WP_faqIc::before, .WP_faqIc::after { content: ""; position: absolute; background: currentColor; transition: transform .2s; } .WP_faqIc::before { left: 0; top: 6px; width: 14px; height: 2px; } .WP_faqIc::after { left: 6px; top: 0; width: 2px; height: 14px; } .WP_faqItem.WP_open .WP_faqIc::after { transform: scaleY(0); } .WP_faqA { display: none; padding: 16px 18px; border-top: 1px solid #eee; color: var(--text); } .WP_faqA p { margin: 0; } .WP_faqItem.WP_open .WP_faqA { display: block; } .WP_headLines { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 34px; } .WP_headLines h2 { margin: 0; border-bottom: 0; padding: 0; background: none; font-size: 1.5rem; color: #222; } .WP_headLines::before, .WP_headLines::after { content: ""; width: 82px; height: 3px; background: var(--gold); } .WP_related { padding: 60px 0; background: var(--bg-soft); } .WP_relatedGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } /* Simple column 简洁 */ .WP_prelgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; } /* One row 桌面单行 */ @media (min-width: 1081px) { .WP_prelgrid[style*="--prel-n"] { grid-template-columns: repeat(var(--prel-n, 5), minmax(0, 1fr)); } .WP_prelgrid[style*="--prel-n"] .WP_prelcardTitle { font-size: .92rem; } } .WP_prelcard { background: #fff; border: 1px solid #ececec; border-radius: 4px; overflow: hidden; transition: box-shadow .2s; } .WP_prelcard:hover { box-shadow: 0 8px 22px rgba(0,0,0,.09); } .WP_prelcardMedia { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #f2f2f2; } .WP_prelcardMedia img { width: 100%; height: 100%; object-fit: cover; display: block; } .WP_prelcardTitle { margin: 0; padding: 11px 12px; font-size: .88rem; font-weight: 600; text-align: center; } .WP_prelcardTitle a { color: #333; } /* Related 新闻两列 */ .WP_newsrelated { background: var(--bg-soft); } .WP_newsrow { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .WP_newsrowCard { display: flex; gap: 0; background: #fff; border: 1px solid #ececec; border-radius: 4px; overflow: hidden; transition: box-shadow .2s; } .WP_newsrowCard:hover { box-shadow: 0 8px 22px rgba(0,0,0,.09); } .WP_newsrowMedia { flex: 0 0 38%; display: block; } .WP_newsrowMedia img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 150px; } .WP_newsrowBody { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; } .WP_newsrowTitle { margin: 0; font-size: 1rem; line-height: 1.4; } .WP_newsrowTitle a { color: #222; } .WP_newsrowExcerpt { margin: 0; font-size: .87rem; color: var(--muted); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .WP_newsrowLink { margin-top: auto; font-size: .84rem; font-weight: 700; font-style: italic; color: var(--gold-dark); } /* Floating 右侧悬浮 */ .WP_stickyContacts { position: fixed; top: 50%; right: 14px; transform: translateY(-50%); z-index: 60; background: #fff; border: 1px solid #ececec; border-radius: 10px; padding: 8px 0; box-shadow: 0 6px 22px rgba(0,0,0,.12); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; } .WP_stickyContacts.WP_visible { opacity: 1; visibility: visible; } .WP_stickyContacts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .WP_stickyContacts a { width: 48px; height: 48px; display: grid; place-items: center; color: var(--gold); border-radius: 10px; } .WP_stickyContacts a:hover { background: #f0f7f3; } .WP_stickyContacts .WP_icon { color: var(--gold); width: 27px; height: 27px; } /* ---------- /Product single 产品详情 ---------- */ /* Blog archive 博客归档 */ .WP_archiveHero { background: var(--ink); color: #fff; padding: 66px 0 54px; text-align: center; } .WP_archiveHero h1 { color: #fff; margin: 0; } .WP_archiveHero p { color: rgba(255,255,255,.72); margin: 10px 0 0; } .WP_archiveLayout { display: grid; grid-template-columns: 1fr 300px; gap: 46px; padding: 56px 0; align-items: start; } .WP_archiveMain .WP_postsGrid { grid-template-columns: repeat(2, 1fr); } .WP_catList { list-style: none; margin: 0; padding: 8px 0; } .WP_catList li { border-bottom: 1px solid var(--line); } .WP_catList a { display: flex; justify-content: space-between; padding: 12px 20px; color: var(--slate); } .WP_catList a:hover, .WP_catList .current-cat > a { background: var(--bg-warm); color: var(--gold-dark); font-weight: 600; } .WP_catList .count { color: var(--muted); font-size: .85rem; } .WP_article { max-width: 860px; margin: 0 auto; } .WP_articleHead { text-align: center; margin-bottom: 30px; } .WP_articleMeta { display: flex; gap: 18px; justify-content: center; color: var(--muted); font-size: .88rem; margin-top: 14px; flex-wrap: wrap; } .WP_articleThumb { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 34px; } .WP_articleThumb img { width: 100%; } /* Blog archive 博客列表 */ /* ---------- Forms 表单 ---------- */ .WP_form2 { display: grid; gap: 16px; } .WP_form2col { grid-template-columns: 1fr 1fr; } .WP_form2 label { display: block; font-size: .88rem; font-weight: 600; color: var(--slate); margin-bottom: 6px; font-family: var(--font-head); } .WP_form2 input, .WP_form2 textarea, .WP_form2 select { width: 100%; padding: 12px 15px; border: 1px solid var(--line-2); border-radius: 4px; font-family: var(--font-body); font-size: .95rem; color: var(--ink); background: #fff; transition: .2s; } .WP_form2 input:focus, .WP_form2 textarea:focus, .WP_form2 select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,95,.16); } .WP_form2 textarea { min-height: 130px; resize: vertical; } .WP_formFull { grid-column: 1 / -1; } .WP_formNote { font-size: .82rem; color: var(--muted); } .WP_formMsg { padding: 12px 16px; border-radius: 4px; font-size: .92rem; display: none; } .WP_formMsg.ok { display: block; background: #eaf6ec; color: #1c6b2b; border: 1px solid #bfe3c6; } .WP_formMsg.err { display: block; background: #fdecec; color: #a12626; border: 1px solid #f2c3c3; } /* ---------- /Forms 表单 ---------- */ /* ---------- Contact page 联系页 ---------- */ .WP_contactGrid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 50px; align-items: start; } .WP_infoList2 { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; } .WP_infoList2 li { display: flex; gap: 16px; } .WP_infoList2 .WP_icon { width: 22px; height: 22px; box-shadow: 0 0 0 12px var(--bg-warm); border-radius: 50%; background-color: var(--gold-dark); color: var(--gold-dark); flex: 0 0 auto; } .WP_infoList2 h4 { margin: 0 0 3px; font-size: .82rem; text-transform: uppercase; letter-spacing: 1.4px; color: var(--gold-dark); } .WP_infoList2 p, .WP_infoList2 a { margin: 0; color: var(--slate); } /* ---------- /Contact page 联系页 ---------- */ /* ---------- Advantages 优势 ---------- */ .WP_advGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .WP_adv { border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; background: #fff; transition: all .28s; } .WP_adv:hover { border-color: var(--gold); box-shadow: var(--shadow); transform: translateY(-5px); } .WP_advIco { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-warm); color: var(--gold-dark); font-size: 1.3rem; margin-bottom: 16px; } .WP_adv h3 { font-size: 1.12rem; margin-bottom: 8px; } .WP_adv p { font-size: .94rem; margin: 0; color: var(--text); } .WP_contactFormWrap { background: var(--bg-warm-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px; } /* ---------- /Advantages 优势 ---------- */ /* ---------- Footer 页脚 ---------- */ /* Footer 页脚背景 */ .WP_footer { background: #111b21 url("../../../../uploads/common/footer-bg.jpg") center / cover no-repeat; color: rgba(255,255,255,.62); background-image: image-set(url("../../../../uploads/common/footer-bg.avif") type('image/avif'),url("../../../../uploads/common/footer-bg.jpg") type('image/webp'));} .WP_footerMain { padding: 64px 0 48px; } .WP_footerGrid { display: grid; grid-template-columns: 1.15fr 1fr 1fr 1.25fr; gap: 44px; } .WP_footerBrandcol { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 30px; } .WP_footerLogo { display: inline-block; border-radius: 10px; padding: 0; /* logo QR 二维码锁定 */ transform: translateY(-17px); } .WP_footerLogo img { height: 58px; width: auto; display: block; } /* WhatsApp 二维码 */ .WP_footerQrWrap { display: flex; flex-direction: column; align-items: center; gap: 6px; transform: translateY(-27.5px); } .WP_footerQr { display: block; width: 130px; height: auto; border-radius: 6px; } .WP_footerQrCap { font-size: 1rem; color: rgba(255,255,255,.75); letter-spacing: .5px; white-space: nowrap; } .WP_footerWaBtn { display: inline-flex; align-items: center; gap: 10px; background: #006d3d; color: #fff; font-weight: 700; font-size: 1.12rem; padding: 11px 22px; border-radius: 10px; letter-spacing: .3px; transition: transform .2s, box-shadow .2s, background .2s; } .WP_footerWaBtn .WP_icon { width: 26px; height: 26px; color: #fff; } .WP_footerWaBtn:hover { background: #005830; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,109,61,.4); color: #fff; } .WP_footer .WP_footerCol h3 { color: #fff; font-size: 1.05rem; font-weight: 600; margin-bottom: 22px; } .WP_footer .WP_footerCol a { color: rgba(255,255,255,.78); } .WP_footer .WP_footerCol a:hover { color: #006d3d; } .WP_footerCol ul { list-style: none; margin: 0; padding: 0; } .WP_footerCol li { margin-bottom: 14px; } .WP_footerCol a { color: rgba(255,255,255,.78); transition: color .15s; } .WP_footerCol a:hover { color: #006d3d; } .WP_footerColBrand p { font-size: .92rem; margin: 16px 0; } .WP_footerContact li { display: flex; gap: 10px; align-items: flex-start; font-size: .93rem; color: rgba(255,255,255,.78); } .WP_footer .WP_footerContact .WP_icon { color: rgba(255,255,255,.55); margin-top: 4px; width: 1.1em; height: 1.1em; font-size: 1.1rem; } .WP_footerSocial { display: flex; gap: 18px; } .WP_footerSocial a { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; color: #fff; border: 1.5px solid rgba(255,255,255,.55); background: transparent; transition: background .2s, border-color .2s; } .WP_footerSocial a .WP_icon { width: 26px; height: 26px; color: #fff; } .WP_footerSocial a:hover, .WP_footerSocial a:focus-visible, .WP_footerSocial a:active { border-color: #006d3d; } .WP_footerSocial a:hover .WP_icon, .WP_footerSocial a:focus-visible .WP_icon, .WP_footerSocial a:active .WP_icon { color: #006d3d; } .WP_footerBottom { border-top: 1px solid rgba(255,255,255,.12); padding: 26px 0; } /* Logo 底栏 */ .WP_footerBottomLogo { display: none; } .WP_footerBottomInner { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .WP_footerLegal { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .WP_footerLegal p { margin: 0; color: rgba(255,255,255,.6); font-size: .88rem; } .WP_footerLegalLinks { display: flex; gap: 22px; } .WP_footerLegalLinks a { color: rgba(255,255,255,.75); font-size: .88rem; white-space: nowrap; } .WP_footerBottom a { color: rgba(255,255,255,.75); } .WP_footerBottom a:hover { color: #006d3d; } /* Footer 页脚语言 */ .WP_footer .WP_langFooter .WP_langBtn { background: transparent; border: 0; padding: 0; height: auto; gap: 8px; color: #fff; font-size: 1rem; font-weight: 600; letter-spacing: 0; } .WP_footer .WP_langFooter .WP_langBtn:hover { background: transparent; color: #006d3d; } .WP_footer .WP_langFooter .WP_langNative { font-size: 1rem; } .WP_footer .WP_langFooter .WP_langCaret { border-top-color: currentColor; border-left-width: 5px; border-right-width: 5px; border-top-width: 6px; } .WP_footer .WP_langMenu { top: auto; bottom: calc(100% + 10px); min-width: 180px; background: #1d2d36; border-color: rgba(255,255,255,.15); } .WP_footer .WP_langMenu button { justify-content: flex-start; gap: 10px; color: rgba(255,255,255,.85); } .WP_footer .WP_langMenu button:hover { background: rgba(255,255,255,.08); color: #006d3d; } .WP_footer .WP_langMenu button.WP_active { background: #006d3d; color: #fff; } /* ---------- /Footer 页脚 ---------- */ /* ---------- Pagination / misc 分页与杂项 ---------- */ .WP_pagination { display: flex; justify-content: center; gap: 8px; margin: 40px 0 0; } .WP_pagination .page-numbers { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 4px; color: var(--slate); font-family: var(--font-head); font-weight: 600; } .WP_pagination .page-numbers.current, .WP_pagination .page-numbers:hover { background: var(--gold); border-color: var(--gold); color: #fff; } .WP_empty { text-align: center; padding: 60px 20px; color: var(--muted); } .WP_searchForm { display: flex; gap: 8px; } .WP_searchForm input { flex: 1; } /* ---------- /Pagination / misc 分页 / 其它 ---------- */ /* ---------- Responsive 响应式 ---------- */ @media (max-width: 1080px) { .WP_about2, .WP_split2, .WP_psingleHeroGrid, .WP_contactGrid { grid-template-columns: 1fr; gap: 34px; } .WP_catsLayout { grid-template-columns: repeat(2, 1fr); } .WP_stepsGrid, .WP_relatedGrid { grid-template-columns: repeat(2, 1fr); } .WP_advGrid { grid-template-columns: repeat(2, 1fr); } .WP_postsGrid { grid-template-columns: repeat(2, 1fr); } .WP_prelgrid { grid-template-columns: repeat(3, 1fr); } .WP_newsrow { grid-template-columns: 1fr; } .WP_footerGrid { grid-template-columns: 1fr 1fr; } .WP_archiveLayout { grid-template-columns: 1fr; } .WP_psingleLayout { grid-template-columns: 1fr; } .WP_sidebar { position: static; } } @media (max-width: 900px) { .WP_nav { display: none; } .WP_burger { display: flex; } .WP_headerActions .WP_btn { display: none; } .WP_hero h1 { font-size: 2.4rem; } .WP_pillarsGrid { grid-template-columns: repeat(2, 1fr); } .WP_statsGrid { grid-template-columns: repeat(2, 1fr); gap: 34px 20px; } .WP_galleryGrid { grid-template-columns: repeat(2, 1fr); } .WP_certsLogos img { max-height: 54px; } } @media (max-width: 640px) { .WP_section { padding: 56px 0; } h1 { font-size: 2rem; } h2 { font-size: 1.6rem; } .WP_topbarContact a span { display: none; } .WP_topbar { display: none; } /* px px 手机端头部 */ .WP_headerInner { min-height: 66px; } .WP_brandLogo img { height: 42px; width: auto; } .WP_headerActions { gap: 8px; } .WP_hero { min-height: 92vh; } /* Mobile hero 手机端首屏 */ .WP_hero::after { display: none; } .WP_heroEyebrow { display: none; } .WP_heroBadges { display: none; } .WP_heroCta .WP_btn:not(.WP_btnGhost) { display: inline-flex; background: transparent; border-color: rgba(255,255,255,.85); color: #fff; text-transform: none; letter-spacing: .2px; } .WP_heroCta .WP_btnGhost { display: none; } .WP_heroDots { display: none; } .WP_hero h1 { font-size: 2.35rem; line-height: 1.18; text-shadow: 0 1px 14px rgba(0,0,0,.35); } .WP_hero p { font-size: 1rem; } .WP_catsLayout, .WP_stepsGrid, .WP_relatedGrid, .WP_postsGrid, .WP_footerGrid, .WP_form2col, .WP_advGrid { grid-template-columns: 1fr; } /* Logo display 手机端页脚（深绿背景延伸到底导航下方，占位与安全区由页脚承担） */ .WP_footer { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 24px 0 calc(112px + env(safe-area-inset-bottom)); } .WP_footerMain, .WP_footerGrid, .WP_footerBottom, .WP_footerBottomInner { display: contents; } .WP_footerBrandcol, .WP_footerGrid > .WP_footerCol:not(:last-child), .WP_footerBottomInner .WP_footerLang { display: none; } .WP_footerBottomLogo { order: 1; display: block; line-height: 0; } .WP_footerBottomLogo img { display: block; height: 50px; width: auto; margin: 0 auto; } .WP_footerGrid > .WP_footerCol:last-child { order: 2; width: 100%; padding: 26px 22px; border-top: 1px solid rgba(255,255,255,.10); border-bottom: 1px solid rgba(255,255,255,.10); } .WP_footerGrid .WP_footerCol h3 { display: none; } .WP_footerContact { display: flex; flex-direction: column; gap: 10px; max-width: 21em; margin: 0 auto; } .WP_footerBottomInner .WP_footerLegal { display: contents; } .WP_footerBottomInner .WP_footerSocial { order: 3; gap: 10px; justify-content: center; } .WP_footerBottomInner .WP_footerSocial a { width: 44px; height: 44px; border-color: rgba(255,255,255,.26); background: rgba(255,255,255,.05); } .WP_footerBottomInner .WP_footerSocial a .WP_icon { width: 19px; height: 19px; } .WP_footerBottomInner .WP_footerLegalLinks { order: 4; justify-content: center; gap: 10px 22px; flex-wrap: wrap; } /* 长条款链接 */ .WP_footerBottomInner .WP_footerLegalLinks a { font-size: .84rem; color: rgba(255,255,255,.68); white-space: normal; text-align: center; } .WP_footerBottomInner .WP_footerLegal p { order: 5; text-align: center; font-size: .78rem; color: rgba(255,255,255,.42); max-width: 30em; } .WP_prelgrid { grid-template-columns: repeat(2, 1fr); } .WP_headLines::before, .WP_headLines::after { width: 44px; } .WP_stickyContacts { display: none; } .WP_quoteCard { padding: 26px 18px; } .WP_galleryGrid { grid-template-columns: 1fr; } .WP_galleryItem:nth-child(1) { grid-column: auto; grid-row: auto; aspect-ratio: 4/3; } .WP_ctaInner, .WP_footerCtaInner { flex-direction: column; text-align: center; align-items: center; } } /* ---------- /Responsive 响应式 ---------- */ /* ---------- News index 新闻列表页 ---------- */ .WP_newsBanner { background: linear-gradient(90deg, var(--gold-accent) 0%, var(--gold-deep) 100%); } .WP_newsBannerIn { width: min(1280px, 84vw); margin: 0 auto; padding: min(3.4vw, 50px) 0; text-align: center; } .WP_newsBannerTitle { margin: 0; font-size: clamp(24px, 2.25vw, 35px); font-weight: 700; color: #3d3d3d; line-height: 1.4; } .WP_newsMain { padding-bottom: 10px; } .WP_newsMainIn { width: min(1280px, 84vw); margin: 0 auto; padding: min(2.3vw, 43px) 0 min(6vw, 114px); } .WP_newsGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; } .WP_ncard { display: flex; flex-direction: column; } .WP_ncardMedia { display: block; height: 250px; border-radius: 7px; overflow: hidden; background: #fff; border: 1px solid #f1f1f1; } .WP_ncardMedia img { width: 100%; height: 250px; object-fit: cover; object-position: top; transition: transform .35s; } .WP_ncard:hover .WP_ncardMedia img { transform: scale(1.08); } .WP_ncardBody { flex: 1; display: flex; flex-direction: column; position: relative; margin: -30px 20px 0; padding: 17px; /* Frosted 毛玻璃 */ background: rgba(248, 248, 248, .6); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); border: 1px solid rgba(226, 226, 226, .5); border-radius: 7px; box-shadow: 0 7px 17px -7px rgba(0, 0, 0, .15); transition: border-color .25s; } .WP_ncard:hover .WP_ncardBody { border-color: var(--gold-dark); } .WP_ncardTitle { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.2; } .WP_ncardTitle a { color: #424242; } .WP_ncardTitle a:hover { color: var(--gold-dark); } .WP_ncardMeta { display: flex; align-items: center; gap: 7px; margin-top: 7px; color: #707070; font-size: 15px; } .WP_ncardMeta .WP_icon { width: 1em; height: 1em; } .WP_ncardText { margin: 7px 0 12px; color: #636363; font-size: 16px; line-height: 1.4; } .WP_ncardBtn { /* margin-top 每张卡按钮 */ margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 5px 15px; background: var(--gold-dark); color: #fff; border: 2px solid var(--gold-dark); border-radius: 0; font-size: 14px; font-weight: 600; line-height: 1.5; transition: background .25s, border-color .25s; } .WP_ncardBtn:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; } .WP_ncardBtn .WP_icon { width: 1em; height: 1em; } .WP_newsPager { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 60px; } /* ---------- /News index 新闻列表 ---------- */ /* ---------- Single post 文章详情 ---------- */ .WP_postHero { position: relative; min-height: 300px; display: flex; align-items: center; background-color: var(--gold-accent); background-position: 50%; background-repeat: no-repeat; background-size: cover; padding: 34px 0; } .WP_postHero::before { content: ""; position: absolute; inset: 0; background: #334155; opacity: .6; } .WP_postHeroIn { position: relative; width: min(1280px, 84vw); margin: 0 auto; } .WP_postHeroTitle { margin: 0 0 12px; font-size: clamp(24px, 2.4vw, 34px); font-weight: 700; line-height: 1.4; color: #3d3d3d; text-transform: capitalize; } .WP_postHeroMeta { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 16px; } .WP_postHeroMeta .WP_icon { width: 16px; height: 16px; } .WP_postWrap { padding: 54px 0 90px; } .WP_postLayout { width: min(1280px, 84vw); margin: 0 auto; display: grid; grid-template-columns: 260px minmax(0, 1fr) 280px; gap: 24px 20px; align-items: start; } .WP_postLayoutNotoc { grid-template-columns: minmax(0, 1fr) 280px; } /* ---------- /Single post 文章详情 ---------- */ /* ---------- Table of contents 目录 ---------- */ .WP_postToc { position: sticky; top: 96px; } .WP_toc { border: 1px solid #e2e2e2; background: #fff; border-radius: 4px; overflow: hidden; } .WP_tocHead { padding: 13px 16px; font-weight: 600; font-size: 16px; color: #3d3d3d; border-bottom: 1px solid #e2e2e2; } .WP_tocBody { max-height: 60vh; overflow: auto; padding: 8px 6px 10px 14px; } .WP_tocBody a { display: block; padding: 6px 8px 6px 10px; border-left: 2px solid transparent; font-size: 14.5px; line-height: 1.45; color: #424242; } .WP_tocBody a:hover { color: var(--gold-dark); border-left-color: var(--gold); } .WP_tocBody a.lv3 { padding-left: 24px; font-size: 13.5px; color: #636363; } /* ---------- /Table of contents 目录 ---------- */ /* Prev next 上一篇（极简分割式 Editorial：一行左右两列，PC/手机通用） */ .WP_postnav { display: flex; margin: 40px 0 0; padding: 0; border-top: 1px solid #E5EBE7; border-bottom: 1px solid #E5EBE7; background: transparent; } .WP_postnavItem { flex: 1 1 0; display: flex; align-items: center; gap: 14px; padding: 20px; color: inherit; min-width: 0; } .WP_postnavItem + .WP_postnavItem { border-left: 1px solid #E5EBE7; padding-left: 20px; } /* 单侧缺失：隐藏空占位，且不保留多余分割线 */ .WP_postnavGhost { display: none; } .WP_postnavGhost + .WP_postnavItem { border-left: 0; } /* 圆形箭头 */ .WP_postnavArrow { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: #E4F3E9; color: #007A4D; display: flex; align-items: center; justify-content: center; order: 0; transition: background-color .2s; } .WP_postnavArrow .WP_icon { width: 20px; height: 20px; } .WP_postnavPrev .WP_postnavArrow .WP_icon { transform: scaleX(-1); } .WP_postnavText { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; text-align: left; } .WP_postnavText small { text-transform: uppercase; letter-spacing: 1px; font-size: 11.5px; font-weight: 500; color: #8A9390; } .WP_postnavText strong { font-size: 15.5px; font-weight: 600; color: #263630; line-height: 1.45; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: color .2s; } /* 下一篇：文字在左、箭头靠右，标题左对齐 */ .WP_postnavNext { text-align: left; justify-content: flex-start; } .WP_postnavNext .WP_postnavText { order: 0; } .WP_postnavNext .WP_postnavArrow { order: 1; margin-left: auto; } /* 交互：整列可点（桌面 hover / 触屏轻微底色） */ a.WP_postnavItem:hover .WP_postnavText strong { color: #00834E; } a.WP_postnavItem:hover .WP_postnavArrow { background: #D6EBDD; } .WP_postnavItem:active { background: rgba(0, 122, 77, .04); } .WP_postnavItem { -webkit-tap-highlight-color: transparent; } @media (max-width: 767px) { .WP_postnav { margin: 28px 0 0; } .WP_postnavItem { gap: 10px; padding: 16px 12px; } .WP_postnavItem + .WP_postnavItem { padding-left: 12px; } .WP_postnavArrow { flex: 0 0 36px; width: 36px; height: 36px; } .WP_postnavArrow .WP_icon { width: 18px; height: 18px; } .WP_postnavText small { font-size: 10.5px; } .WP_postnavText strong { font-size: 14px; } } /* Prev next 上一篇 */ /* ---------- Author box 作者框 ---------- */ .WP_authorbox { display: flex; gap: 18px; align-items: flex-start; margin-top: 30px; padding: 22px; border: 1px solid #ececec; border-radius: 6px; background: #fff; } .WP_authorboxAvatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; } .WP_authorboxName { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: var(--gold-dark); } .WP_authorboxBio { font-size: 14.5px; line-height: 1.6; color: #5a5a5a; } /* ---------- /Author box 作者框 ---------- */ /* ---------- Share row 分享行 ---------- */ .WP_article .WP_share { display: flex; align-items: center; gap: 16px; margin-top: 26px; border: 1px solid #ececec; border-radius: 6px; padding: 14px 18px; background: #fff; } .WP_shareLabel { font-weight: 600; color: #3d3d3d; font-size: 15px; } .WP_shareIcons { display: flex; gap: 8px; } .WP_shareBtn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; } .WP_shareBtn .WP_icon { width: 18px; height: 18px; } .WP_shareBtnFb { background: #1877f2; } .WP_shareBtnTw { background: #1da1f2; } .WP_shareBtnIn { background: #0a66c2; } .WP_shareBtn:hover { opacity: .85; } /* ---------- /Share row 分享行 ---------- */ /* ---------- Sidebar boxes 侧边栏盒子 ---------- */ .WP_postSide { display: grid; gap: 16px; } .WP_sideBox { border: 1px solid #ececec; background: #fff; padding: 7px; } .WP_sideBoxTitle { margin: 0; padding: 11px 13px 11px 16px; font-size: 18px; font-weight: 700; color: #1f2937; border-left: 4px solid var(--gold-dark); background: var(--bg-cool); } .WP_sideBox > ul { list-style: none; margin: 0; padding: 6px 0 2px; } .WP_sideBox > ul li { border-bottom: 1px solid #f0f0f0; } .WP_sideBox > ul li:last-child { border-bottom: 0; } .WP_sideBox > ul li a { display: block; padding: 11px 13px; color: #424242; font-size: 15px; } .WP_sideBox > ul li a:hover { color: var(--gold-dark); } /* ---------- /Sidebar boxes 侧栏区块 ---------- */ /* Sidebar quote 侧边栏询盘 */ .WP_formStack { padding: 12px 10px 14px; display: grid; gap: 10px; } .WP_formStack input[type="text"], .WP_formStack input[type="email"], .WP_formStack textarea { width: 100%; padding: 11px 12px; border: 1px solid #d9d9d9; border-radius: 3px; font-family: var(--font-body); font-size: 14.5px; color: #333; background: #fff; } .WP_formStack textarea { resize: vertical; } .WP_formStack input:focus, .WP_formStack textarea:focus { outline: 0; border-color: var(--gold); } .WP_formUpload { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: #424242; } .WP_formUploadbtn { display: inline-flex; align-self: flex-start; padding: 10px 16px; cursor: pointer; background: #5b6770; color: #fff; border-radius: 3px; font-size: 14px; font-weight: 600; } .WP_formUploadbtn:hover { background: #454f57; } .WP_sideQuoteBtn { align-self: flex-start; padding: 9px 18px; font-size: 14px; border-radius: 3px; } /* Sidebar quote 侧栏询盘 */ /* ---------- Related products 相关产品 ---------- */ .WP_relprod, .WP_relnews { padding: 62px 0; } .WP_relprodIn, .WP_relnewsIn { width: min(1280px, 84vw); margin: 0 auto; } .WP_reltitle { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 0 0 40px; font-size: clamp(22px, 2vw, 28px); font-weight: 700; color: #3d3d3d; text-align: center; } .WP_reltitle::before, .WP_reltitle::after { content: ""; height: 2px; width: min(140px, 12vw); background: var(--gold-dark); flex: 0 1 auto; } .WP_relprodGrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } .WP_relprodCard { display: flex; flex-direction: column; border: 1px solid #ececec; background: #fff; transition: box-shadow .25s, transform .25s; } .WP_relprodCard:hover { box-shadow: 0 14px 30px rgba(0, 0, 0, .1); transform: translateY(-4px); } .WP_relprodMedia { display: block; aspect-ratio: 1/1; overflow: hidden; background: var(--bg-soft); } .WP_relprodMedia img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .WP_relprodCard:hover .WP_relprodMedia img { transform: scale(1.06); } .WP_relprodName { padding: 12px 10px 14px; text-align: center; font-size: 14.5px; line-height: 1.4; color: #424242; } .WP_relprodCard:hover .WP_relprodName { color: var(--gold-dark); } /* ---------- /Related products 相关产品 ---------- */ /* ---------- Related news 相关新闻 ---------- */ .WP_relnewsGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; } .WP_relnewsItem { display: flex; gap: 14px; border: 1px solid #ececec; background: #fff; padding: 10px; transition: box-shadow .25s; } .WP_relnewsItem:hover { box-shadow: 0 12px 26px rgba(0, 0, 0, .09); } .WP_relnewsMedia { flex: 0 0 150px; aspect-ratio: 4/3; overflow: hidden; background: var(--bg-soft); } .WP_relnewsMedia img { width: 100%; height: 100%; object-fit: cover; } .WP_relnewsText { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-top: 4px; } .WP_relnewsText strong { font-size: 16px; line-height: 1.35; color: #3d3d3d; } .WP_relnewsItem:hover .WP_relnewsText strong { color: var(--gold-dark); } .WP_relnewsText > span { font-size: 13.5px; line-height: 1.5; color: #6b6b6b; } /* ---------- /Related news 相关新闻 ---------- */ /* Responsive 新板块响应 */ @media (max-width: 1180px) { .WP_postLayout { grid-template-columns: 220px minmax(0, 1fr) 250px; } .WP_relprodGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 980px) { .WP_newsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .WP_postLayout, .WP_postLayoutNotoc { grid-template-columns: minmax(0, 1fr); } .WP_postToc { position: static; } .WP_postSide { order: 3; } .WP_relprodGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .WP_newsGrid { grid-template-columns: 1fr; } .WP_ncardBody { margin: -22px 12px 0; } .WP_authorbox { flex-direction: column; } .WP_article .WP_share { flex-direction: column; align-items: flex-start; } .WP_relprodGrid { grid-template-columns: 1fr; } .WP_relnewsGrid { grid-template-columns: 1fr; } } /* Responsive 新版块响应 */ /* ---------- Homepage v2 首页 v2 ---------- */ .WP_containerNarrow { max-width: min(1000px, 90vw); } .WP_containerCerts { max-width: min(860px, 90vw); } /* Split head 分节头 */ .WP_headSplit { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; text-align: left; max-width: none; margin: 0 auto 44px; } .WP_headSplit .WP_titleUnderline { margin: 0; } .WP_headSplit .WP_eyebrow { display: block; margin-bottom: 10px; } .WP_headSplit p { margin: 0; } .WP_headNote { color: var(--muted); font-size: 1rem; font-style: italic; } span.WP_headNote { font-style: normal; font-size: .95rem; } .WP_btnSm { padding: 10px 22px; font-size: .85rem; } /* 关于About — video、showroom. */ .WP_aboutv { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; } .WP_aboutvTitle { font-size: 2.6rem; margin: 0 0 22px; } .WP_aboutvText { text-align: center; color: var(--text); font-size: 1.05rem; line-height: 1.85; margin: 18px 0; } .WP_aboutvVideo { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: #000; margin-top: 26px; } .WP_aboutvVideo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Facade 视频封面 */ .WP_video { position: absolute; inset: 0; cursor: pointer; } .WP_videoPoster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .WP_video:hover .WP_videoPoster { transform: scale(1.03); } .WP_videoPlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 74px; height: 74px; border-radius: 50%; background: rgba(0, 0, 0, .55); border: 2px solid rgba(255, 255, 255, .9); display: flex; align-items: center; justify-content: center; transition: background .25s; } .WP_videoPlay::after { content: ""; display: block; margin-left: 5px; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #fff; } .WP_video:hover .WP_videoPlay { background: var(--gold); border-color: var(--gold); } .WP_video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .WP_aboutvMedia img { width: 100%; border-radius: var(--radius-lg); display: block; } /* 工厂轮播 Factory slider. */ .WP_facslider { position: relative; } .WP_facslider .WP_carouselTrack { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .WP_facslider .WP_carouselTrack::-webkit-scrollbar { display: none; } .WP_facsliderSlide { flex: 0 0 100%; scroll-snap-align: start; } .WP_facsliderSlide img { width: 100%; aspect-ratio: 1045 / 400; object-fit: cover; border-radius: var(--radius-lg); display: block; } .WP_facslider .WP_carouselNav { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; padding: 0 18px; pointer-events: none; } .WP_facslider .WP_carouselNav button { pointer-events: auto; width: 42px; height: 42px; border-radius: 50%; border: 0; background: #fff; color: var(--ink); font-size: 1.05rem; cursor: pointer; box-shadow: var(--shadow); } .WP_facsliderCaption { color: var(--text); font-size: .98rem; line-height: 1.75; max-width: 900px; margin: 22px auto 0; } /* 认证 Certifications. */ .WP_certsEyebrow { text-align: center; color: var(--gold-dark); letter-spacing: .28em; text-transform: uppercase; font-size: .82rem; font-weight: 700; margin-bottom: 22px; } .WP_certs .WP_titleUnderline { font-size: 2.5rem; margin: 0 0 34px; } .WP_certs .WP_titleUnderline::after { left: 0; transform: none; } .WP_certsFigure img { width: 100%; border-radius: 18px; display: block; } /* 深色 CTA 卡 CTA dark card. */ .WP_cta { padding: 30px 0 70px; background: transparent; } .WP_ctaCard { background: var(--slate); border-radius: 22px; padding: 64px 40px 58px; text-align: center; color: #fff; } .WP_ctaCard h2 { color: rgba(255,255,255,.35); font-size: 2.3rem; margin: 0 0 14px; } .WP_ctaCard p { color: #e5e7eb; margin: 0 0 30px; font-size: 1rem; } .WP_ctaCard .WP_btn { box-shadow: 0 10px 30px rgba(201,162,95,.35); } /* 团队 v2 Team v2. */ .WP_teamvTitle { font-size: 2.5rem; margin: 0 0 40px; } .WP_teamv { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; } .WP_teamvPhoto img { width: 100%; border-radius: var(--radius-lg); display: block; } .WP_teamvPhoto + .WP_teamvPhoto { margin-top: 18px; } .WP_teamvLead, .WP_teamvText { text-align: center; color: var(--text); line-height: 1.9; font-size: 1.02rem; margin: 20px 0; } /* Partners 合作横幅 */ .WP_partners { padding: 10px 0 60px; } .WP_partners img { width: 100%; border-radius: 14px; display: block; } /* 客户拼图 Customers mosaic. */ .WP_custgrid { display: grid; grid-template-columns: 1fr 1.25fr 1.25fr; grid-auto-rows: 230px; gap: 16px; } .WP_custgridItem { border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-soft); } .WP_custgridItem img { width: 100%; height: 100%; object-fit: cover; display: block; } .WP_custgridItem:nth-child(2) { grid-column: 1; grid-row: 2; } .WP_custgridItem:nth-child(3) { grid-column: 2; grid-row: 1 / 3; } .WP_custgridItem:nth-child(4) { grid-column: 3; grid-row: 1 / 3; } /* Categories 分类手风琴 */ .WP_catsv { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 26px; align-items: start; } .WP_catsvGroup + .WP_catsvGroup { margin-top: 20px; } .WP_catsvGtitle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 17px 24px; border: 0; border-radius: 10px 10px 0 0; background: #f5f5f5; color: var(--gold-dark); font-weight: 700; letter-spacing: .1em; font-size: .82rem; font-family: inherit; cursor: pointer; text-align: left; } .WP_catsvGtitle .WP_catsvArrow { position: relative; width: 14px; height: 14px; flex: 0 0 auto; } .WP_catsvGtitle .WP_catsvArrow::before, .WP_catsvGtitle .WP_catsvArrow::after { content: ""; position: absolute; background: currentColor; } .WP_catsvGtitle .WP_catsvArrow::before { left: 0; right: 0; top: 6px; height: 2px; } .WP_catsvGtitle .WP_catsvArrow::after { top: 0; bottom: 0; left: 6px; width: 2px; } .WP_catsvGroup.WP_open .WP_catsvGtitle { background: var(--gold); color: #fff; } .WP_catsvGroup.WP_open .WP_catsvGtitle .WP_catsvArrow::after { display: none; } .WP_catsvGroup:not(.WP_open) .WP_catsvList { display: none; } .WP_catsvGroup:not(.WP_open) .WP_catsvGtitle { border-radius: 10px; } .WP_catsvList { list-style: none; margin: 0; padding: 8px 0 12px; border: 0; border-radius: 0 0 10px 10px; background: #fff; } .WP_catsvTab { display: block; width: 100%; text-align: left; border: 0; border-left: 4px solid transparent; background: none; cursor: pointer; padding: 13px 16px 13px 26px; color: #555; font-size: 1.06rem; font-family: inherit; } .WP_catsvTab:hover { color: var(--gold-dark); } .WP_catsvTab.WP_active { border-left-color: var(--gold); background: rgba(0, 109, 61, .07); color: var(--ink); font-weight: 700; } .WP_catsvShowcase { display: grid; grid-template-columns: 1fr 1fr; background: #faf8f4; border-radius: 18px; overflow: hidden; min-height: 460px; } .WP_catsvMedia img { width: 100%; height: 100%; object-fit: cover; display: block; } .WP_catsvInfo { padding: 44px 38px; display: flex; flex-direction: column; justify-content: center; } .WP_catsvBadge { align-self: flex-start; background: #fff; border: 1px solid #eee7d8; color: var(--gold-dark); border-radius: 999px; padding: 7px 16px; font-size: .72rem; font-weight: 700; letter-spacing: .18em; } .WP_catsvInfo h3 { font-size: 2rem; margin: 18px 0 22px; } .WP_catsvRow { margin-bottom: 16px; } .WP_catsvK { display: block; color: var(--gold-dark); font-size: .72rem; font-weight: 700; letter-spacing: .2em; margin-bottom: 6px; } .WP_catsvRow p { margin: 0; color: var(--text); line-height: 1.7; } .WP_catsvActions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 22px; } @media (max-width: 980px) { .WP_aboutv, .WP_teamv { grid-template-columns: 1fr; gap: 30px; } .WP_custgrid { grid-template-columns: 1fr 1fr; grid-auto-rows: 190px; } .WP_custgridItem:nth-child(n) { grid-column: auto; grid-row: auto; } .WP_custgridItem:nth-child(3), .WP_custgridItem:nth-child(4) { grid-row: span 2; } .WP_catsv { grid-template-columns: 1fr; } .WP_headSplit { flex-direction: column; align-items: flex-start; } } @media (max-width: 640px) { .WP_catsvShowcase { grid-template-columns: 1fr; min-height: 0; } .WP_catsvMedia img { aspect-ratio: 4 / 3; } .WP_custgrid { grid-template-columns: 1fr; grid-auto-rows: 210px; } .WP_certs .WP_titleUnderline { font-size: 1.9rem; } .WP_aboutvTitle, .WP_teamvTitle { font-size: 1.9rem; } .WP_ctaCard { padding: 44px 22px; } .WP_ctaCard h2 { font-size: 1.6rem; } } /* Gold dots 金色圆点 */ .WP_dots { display: flex; gap: 7px; margin: 14px 0 18px; } .WP_dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); } .WP_head .WP_dots { justify-content: center; margin-top: 6px; } /* 产品归档 v2Product archive v2. */ .WP_parchiveHero { background: #fff; border-bottom: 1px solid var(--line); padding: 64px 0 40px; } .WP_parchiveHero h1 { color: var(--slate); font-size: 2.7rem; margin: 0 0 12px; } .WP_parchiveHeroSub { color: var(--text); font-size: .95rem; margin: 0; } .WP_parchive { padding-bottom: 48px; } .WP_pgrid2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: #fff; } .WP_pcard2 { background: #fff; border: 1px solid #ececec; margin: -1px 0 0 -1px; } .WP_pcard2Media { display: block; } .WP_pcard2Media img { width: 100%; aspect-ratio: 320 / 170; object-fit: cover; display: block; } .WP_pcard2Body { padding: 20px 22px 26px; } .WP_pcard2Title { margin: 0 0 10px; font-size: 1.4rem; line-height: 1.3; } .WP_pcard2Title a { color: #006d3d; } .WP_pcard2Title a:hover { color: var(--gold-dark); } .WP_pcard2Meta { font-size: .82rem; color: #3f7ad6; margin-bottom: 12px; } .WP_pcard2Meta a { color: #3f7ad6; } .WP_pcard2Meta .sep { margin: 0 7px; color: #9ca3af; } .WP_pcard2Meta .date { color: #6b7280; } .WP_pcard2Excerpt { color: var(--text); font-size: .93rem; line-height: 1.7; margin: 0; } @media (max-width: 980px) { .WP_pgrid2 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .WP_pgrid2 { grid-template-columns: 1fr; } .WP_parchiveHero h1 { font-size: 2rem; } } /* ---------- /Homepage v2 首页 V2 ---------- */ /* ---------- Scroll-to-top、404 回到顶部、404 ---------- */ /* Large solid 大实心圆 */ .WP_totop { position: fixed; right: 18px; bottom: 24px; z-index: 70; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #006d3d; color: #fff; box-shadow: 0 8px 22px rgba(0, 109, 61, .38), 0 2px 6px rgba(0, 0, 0, .14); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s, background .2s, transform .2s; } /* Bigger 圆内图标 */ .WP_totop .WP_icon { width: 26px; height: 26px; } .WP_totop.WP_visible { opacity: 1; visibility: visible; } .WP_totop:hover { background: #005a31; transform: translateY(-2px); } /* Hover active 点击 */ .WP_totop:active { background: #004726; } .WP_totop:hover, .WP_totop:active, .WP_totop:focus-visible { color: #fff; } .WP_totop:hover .WP_icon, .WP_totop:active .WP_icon, .WP_totop:focus-visible .WP_icon { color: #fff; } .WP_404 { padding: 96px 0 110px; text-align: center; } .WP_404 h1 { font-size: clamp(1.9rem, 3.6vw, 3rem); margin: 0 0 14px; color: var(--ink); } .WP_404 h3 { font-weight: 400; color: var(--muted); margin: 0 auto 26px; max-width: 640px; font-size: 1.05rem; } .WP_404Search { max-width: 420px; margin: 0 auto 30px; } .WP_404Actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* h3 Contact 联系页 */ .WP_infoList2 h3 { margin: 0 0 3px; font-size: .82rem; text-transform: uppercase; letter-spacing: 1.4px; color: var(--gold-dark); font-weight: 700; } .WP_contactFormTitle { margin: 0 0 16px; font-size: 1.15rem; } .WP_footerSocialLight a { box-shadow: 0 2px 8px rgba(0,0,0,.12); } /* Footer bottom 页脚底栏 */ @media (min-width: 1025px) { .WP_footerBottomInner { flex-wrap: nowrap; gap: 16px; } .WP_footerLegal { flex-wrap: nowrap; gap: 16px; min-width: 0; } .WP_footerLegal p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; } .WP_footerLegalLinks { gap: 14px; flex-wrap: nowrap; } .WP_footerLegalLinks a { white-space: nowrap; } .WP_footerBottomInner .WP_footerSocial { flex: 0 0 auto; gap: 12px; } .WP_footerBottomInner .WP_footerSocial a { width: 50px; height: 50px; } .WP_footerBottomInner .WP_footerSocial a .WP_icon { width: 21px; height: 21px; } .WP_footerBottomInner .WP_langFooter { flex: 0 0 auto; white-space: nowrap; } } @media (min-width: 1025px) and (max-width: 1280px) { .WP_footerBottomInner .WP_footerSocial { gap: 9px; } .WP_footerBottomInner .WP_footerSocial a { width: 44px; height: 44px; } .WP_footerBottomInner .WP_footerSocial a .WP_icon { width: 19px; height: 19px; } .WP_footerLegal { gap: 10px; } .WP_footerLegalLinks { gap: 10px; } .WP_footerLegal p, .WP_footerLegalLinks a { font-size: .8rem; } } /* 回顶按钮 */ /* ---------- Pagination 分页 ---------- */ .WP_pagination .page-numbers.prev, .WP_pagination .page-numbers.next, .WP_pagination .page-numbers.first, .WP_pagination .page-numbers.last { width: auto; } .WP_pagination .page-numbers.first, .WP_pagination .page-numbers.last, .WP_ppager .page-numbers.first, .WP_ppager .page-numbers.last { padding: 0 8px; letter-spacing: .5px; } .WP_pagerArrow.WP_icon { width: 20px; height: 20px; display: block; } .WP_pagination .page-numbers.dots, .WP_ppager .page-numbers.dots { background: none; border: 0; cursor: default; pointer-events: none; } .WP_pagination .page-numbers.dots { color: var(--slate); } .WP_ppager .page-numbers.dots { color: #00532f; } /* Disabled 分页禁用态 */ .WP_pagination .page-numbers.disabled, .WP_ppager .page-numbers.disabled { color: #b5b5b5; background: none; border: 0; cursor: default; pointer-events: none; } /* ---------- /Pagination 分页 ---------- */ /* Mobile bottom 手机端底部 */ .WP_mtabs, .WP_mfloat { display: none; } @media (max-width: 768px) { /* Leave room 固定底栏占位：改为页脚自身 padding（深绿延伸至文档末尾），body 不再留白避免白色断层 */ body { padding-bottom: 0; } /* px Mobile 回到顶部 */ .WP_totop { width: 46px; height: 46px; right: 22px; bottom: calc(116px + env(safe-area-inset-bottom)); } .WP_totop .WP_icon { width: 24px; height: 24px; } /* Floating pill nav 悬浮胶囊底导航（2026-11 像素级对齐设计稿：grid 五等列） */ /* Subtle light border 已按反馈移除（胶囊外侧不加描边） */ .WP_mtabs { --mtabs-h: 66px; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 1000; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; max-width: 520px; margin-inline: auto; height: var(--mtabs-h); box-sizing: border-box; padding: 0 8px; border-radius: 999px; transition: opacity .25s ease; } /* Hide while drawer open 菜单抽屉打开时隐藏底栏，避免遮挡菜单内容 */ body.drawer-open .WP_mtabs { opacity: 0; pointer-events: none; } /* Drawer bottom breathing 菜单打开时内容底部留白（安全区） */ body.drawer-open .WP_drawerBody { padding-bottom: calc(24px + env(safe-area-inset-bottom)); } /* Frosted glass layer 浅绿胶囊层：深绿页脚之上仍保持浅绿渐变（不透明底 + 轻毛玻璃） */ .WP_mtabsGlass { position: absolute; left: 0; right: 0; top: -40px; bottom: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(244,250,247,.97) 0%, rgba(231,243,236,.96) 52%, rgba(220,239,229,.95) 100%); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); /* Soft floating shadow 柔和悬浮阴影（随 mask 成形，两层叠加） */ filter: drop-shadow(0 6px 24px rgba(0, 45, 29, .10)) drop-shadow(0 2px 8px rgba(0, 45, 29, .06)); /* Bump layer: SVG path with tangent concave fillets (r12) bridging pill top edge and bump arc (r46) */ -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 46'%3E%3Cpath d='M0 40 L11.6 40 A12 12 0 0 0 21.6 34.6 A46 46 0 0 1 98.4 34.6 A12 12 0 0 0 108.4 40 L120 40 L120 46 L0 46 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000 0 0), radial-gradient(circle 33px at 33px 73px, #000 99%, transparent 100%), radial-gradient(circle 33px at calc(100% - 33px) 73px, #000 99%, transparent 100%); -webkit-mask-size: 120px 46px, calc(100% - 66px) 66px, auto, auto; -webkit-mask-position: center 0, center bottom, 0 0, 0 0; -webkit-mask-repeat: no-repeat; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 46'%3E%3Cpath d='M0 40 L11.6 40 A12 12 0 0 0 21.6 34.6 A46 46 0 0 1 98.4 34.6 A12 12 0 0 0 108.4 40 L120 40 L120 46 L0 46 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000 0 0), radial-gradient(circle 33px at 33px 73px, #000 99%, transparent 100%), radial-gradient(circle 33px at calc(100% - 33px) 73px, #000 99%, transparent 100%); mask-size: 120px 46px, calc(100% - 66px) 66px, auto, auto; mask-position: center 0, center bottom, 0 0, 0 0; mask-repeat: no-repeat; } /* Edge leaf accents 已随毛玻璃改版移除（2026-11-06） */ .WP_mtab { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 44px; height: 100%; gap: 4px; color: #42695C; font-size: 11.5px; font-weight: 500; line-height: 1; text-decoration: none; transition: color .2s; } /* Divider 分隔竖线（不到顶不到底；中央按钮两侧不画线） */ .WP_mtab + .WP_mtab { background: linear-gradient(#e8e8e8, #e8e8e8) left 50% / 1px 30px no-repeat; } .WP_mtab.WP_mtabWa, .WP_mtabWa + .WP_mtab { background: none; } .WP_mtab:not(.WP_mtabWa) > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .WP_mtab .WP_mIco { width: 24px; height: 24px; display: block; flex: none; background-color: currentColor; -webkit-mask: var(--mnav) center / contain no-repeat; mask: var(--mnav) center / contain no-repeat; } .WP_mIco-mnav-home { --mnav: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAKYklEQVR42u2da6wkRRXHf9Uz9y7qrq7g6kp8EHysSsDgWwkGs8YHhsSAisREfK0xKwkaUXyAGDEGjeCDQPyAgqJRIWoEo4FAIOALRZSsCK6EIEaWLLAurOzee+dRfuhTmUOlu7pnpnqmZ6Yr6ezdOz3dVed/6jz+p6ouNK1pTWva1JqZ4b4ncgFYoC//Nm1Cwp8LhTIz2F8j2n4U8CZgA3Ar8EuZAYl83rQKhN+Snz8LrInA3XUT8Cz5vNWIK77wndk5XwTeAVaAVbkscDewRe5rN2KLa+8N8B0R9ArQBXrqciDcD7y0ASGu8NcBPxUBr3qC15czSw8Cr2lAGK85O74BuE5pfq/gciDsBY5rQBhP+E8Hfh/Q/G6GKdIgPAa8tQFhuOYE9VxgR4Hw+4HPO/L5GnCiPHOpEW854b8EuKdAuE7D7y+4z/38nmYmlBP+y4BdAaG6aOdRYKvMlH8UgNCVzz/QgBAW/jHAwyKstYIo57Xq+4cCtxWYKzdrTlfvNI3oB8J/G7AvIHyn+fcBR6rvOod9MHBzSRA+14DweOG/QznNTobwVkRwdwKHZ5gRB8KTgGsKQHCz6Bz1XbPIwj9VBN/NEH4X2C8C+xPwzADX45K2ZeDKAhDcbLpAfXdhQDBK+Kcrk5Nldg7I5zcAG0sQbYnijS4tyJzdrLp4kUDQjOZnlIA6Sjt9AV0FPGEIllMTd99UAHczZoJ7x/cV1Z0sAqP5ZSX8bsDh/kAJPRkR6HMDIOh3XaFm5tyBoMuHFxfYZ6eVF2YAN6qp+7SisLsBc6RnWzJvjGYCXB4g1bRzPDdShKJB2C7P7haAcL0QgHNR2NF08s9kgAcKYvRPVhAeOhDeJxFXryDc/Z3kFTMNgo7Nry3B11hgW4UJkiPi3lWQc6yqsHfzrILgOnwI8JuA2dGM5bsnwNO4Zx8vRF5R1v134Zpmij9yHd1cwM+4jPQR4M0THKR7x+uBh0qAcA/wwlkBwXXwcNGeIuHvZlA6XJpCP4+mHPP6b49/qrXwjwT+VWJQ9wJHTHFQ7p1bgJ0l+rsbeHVdQXAdegXwQIlp/TfgsBoMxr37OcAdJWbsXuANdauuuUEcB+wJCN+FeLeQ1nrrEl24PmwC/lgChAPACXWZCa4DJzBgLUPCvxZ4cg1DO9eXjQxWYIRC5i5wyrRBcFPwnapjobj6SlKquK5pvk4af16yxLltWiC4F75fJTSdAK9zyZi8zjRpk6Lq2mmTrK5lcfmdHKrX2czzMwi5WSEOL1JJZCcwxk9NAgRN8Z5TwLM77ThrRst+eqaeF1iPqkH4QpVj1cI/r0D4zj5un/HCtx7zmTKmXgEIlZQ4tTZcGNAG3ZlT52T9jTa5H5EQtJNT4nTBxkUxQdAP+W5BjdVp/kPAE+esxuoU8M/K74VAuDRG0JEom/ajEkvDNQDPmINNgFnyuLUAAJ3z/HicEmdWTFy0NFwDsGkOAYC0RlAEgJ4JvxAZDgVC2UJKNweAPXMMwG0lAdAgXCOyLAVColLymwoKKTYHgP8uIADdghLnzQxKnEmRw92sptpKwdLwRZsBeU7YBmaGLnEG5ZKI07hRvrA/8LCvA1/0yLdFAMB3wh2l4aE9bG4m3CgcWpJn94/N0XydbHxb7j3Le6ED4OEFMkFOJr+Ssf4ksODMKe9WLfO2J6hnq+nkWl+uZeBLwNly/9KQxwgMm/jFBs+No4p2kMjsZNKNIx8SgfssQJ/BZnKjAeirKeZ+v6Z+XgY+RrrWcp3S+thHICRq3U5VsbyvYMO0vO+tKupiG2md+Wxlpowi+f6qZa4BSEhro58nXZnWVg//sGR3bQWWCWiaHUP4kJb9Xg48xft9ovqq+2C93/tC2026wnqH+p6tCNiWyHAv8DWVBwB8Bbhdj6ntCc6ImfkD6UEY+8W57JAHd0vwO2aEGeA69ErgWwxWSsRsPeAy4OOkO3FGASGkdHggXAD8FjgJWA/8GrhaHTaSSZZZueE6ubST7pXszLAAOOG/St65QZm/cey98WZIC/gg6WKA40WZGBIEWwIYlx8lpPXvW7z7bJHDdJ1ty5UMaZPNkPda0hXJl4nwV9S7R72WJUjQv0OevRU4I2CyRhmbyVECLcdWFoBJYLp21WboYR2VHdJ2vgV4sfib5ZzopV8ikvHvs97Mdj5su9ADvREUJmSCQnLsVREyjguAG9DrlJDIqD+3M7Q5L5Fse1qn35Ooba3PH2HG2qqK67EBGLYdEhDEnRIMOFO4BBxhILGPt/ePAP9UQu6Rbuo7NCNiShRBZuqwrmdSgs57RugMuBOBu5S/eBqw08JTFQ/TlhzmjZ5v+YSEgmuRlM3ETj6Tmp83Z1WRu+X5jdAOSf87WaCbiPLqT2MGxATAFNQnEiXYJEegVt2XqJkRs99mFkyQiTwT9ylCC7H1WRrX8e6DtIge04Ta2MBUAcAoXEs/MLBjSGsULhncKI7Y9x+bSA/wMMphb8lJlEYVmpkFAEbpkA0Ac3lOfG29c0SPJt1cl5cQEYlRrY0PYEI+oJtxX1bOkEUCmrrXJNoVHB8ck8vPE6CJRAJS8VHK1ZqgAJ1oI7OYeRU8/539wKq+GH00sXOidgUpr42siUslHX0rB5h+nc/abk+ZCyqjWWeQnpKVqCjoG6TLH/sqWbuLwQrltoSlbyfdydKJ5IhrFQVNyjlfQbpNFLVa76uKy3Ez7j+kRXG8s+ROyVGImGFofxpURMyKmA38f6Moyjr59+Cc5yeqFnCQ/Lx+QolYbxoAVGlbTYZJ869QXdaqylTeu2Y+EzYTSvEf8yiGfYF8waciViMph63KYtSFCwq175GuN3UZ7zoxLVaFmZb0L2pc5ZmFFyknXZYCH0Wh+qOOvYpEbJSKWCfwrGMDVITW0E0MNlBnFej9d3brEJ62K/ABozjhuwOfdUqC3yuRiLlZ8z8JbWP5smRU85tURMbZIUG8WmlqXoKlLxPYVKevJMNPJKTHku0iZ6XCTHAYkVJ8x1TeQbrieiln80eMqyP+41HSfb0xV8fZWa0J62WRZ0r8/tEKFe5e4L2kSzDL/rmrMkCZWS5JWmWbTyPdk3ayRDBLnhPVPFOWc7UZsX6PdJ3mDRJR7angb43ZOlERZoxBOPt8fcVmt1/ButOJh6G2gnpAXznZXmShm5xIiYjH3dhZZUOj8CoTfmYUc5xUlAknc3r2da0KMqbAlrcq2AgxsTWbBQSerbMT7kuk0YPm7zBP0gnrtf4/ZLBvShNmSYaJ8pcaGm+DRSujzGkzli76rKXNWM6YqPv895iMTR1ORu7nw3L2FdQmCrKSbZ40x9rfrwsdbVTE428J6kRaiUZNz8QmY/PHxAHY6U1nU7BsZB79gNuvcN+oSjZOYXo98Bfgecrez1Mr0mxnbnukW2pvn+SfU3dO6CjS5SB2Qa8HSc9NHTmnMhE4lQ2klagXyHQ0Ae3peavYWipC6Xual2T4mCz/YzN2wPdzYnibsa/XKHNiMkqM1iP/3LgfIN1Wu2uSmj+JZS3M6HlyU0sozII4XQpq001rWtOaNmvt/+gwPuj+Zzp1AAAAAElFTkSuQmCC"); } .WP_mIco-mnav-products{ --mnav: url("data:image/png;base64,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"); } .WP_mIco-mnav-cases { --mnav: url("data:image/png;base64,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"); } .WP_mIco-mnav-inquiry { --mnav: url("data:image/png;base64,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"); } /* Active underline 选中态：绿字 + 底部短横条（占位常驻防跳动） */ .WP_mtab::after { content: ""; width: 22px; height: 3px; border-radius: 999px; background: transparent; margin-top: 1px; transition: background-color .2s; } .WP_mtab.WP_on { color: #00834E; } .WP_mtab.WP_on::after { background: #00834E; } /* Center WhatsApp 中央凸起按钮（绿色圆悬浮于玻璃凸起上，整体下移；3px 白描边含在盒模型内） */ .WP_mtabWa { cursor: pointer; } .WP_mtabWaBtn { position: absolute; left: 50%; top: -19px; transform: translateX(-50%); z-index: 2; width: 70px; height: 70px; border-radius: 50%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: linear-gradient(145deg, #4BC95D 0%, #2DA84A 55%, #16883E 100%); border: 3px solid rgba(255, 255, 255, .9); box-shadow: 0 5px 16px rgba(19, 132, 58, .18); transition: transform .18s ease; } .WP_mtabWaIco { width: 32px; height: 32px; display: block; background-color: #fff; -webkit-mask: url("data:image/png;base64,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") center / contain no-repeat; mask: url("data:image/png;base64,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") center / contain no-repeat; } .WP_mtabWaTxt { color: #fff; font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: 0; } /* Breathing glow 呼吸灯：绿色光晕由内向外扩散循环（伪元素实现，不占布局） */ .WP_mtabWaBtn::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 0 rgba(43, 168, 74, .40); animation: WP_waBreath 2.6s ease-out infinite; } @keyframes WP_waBreath { 0% { box-shadow: 0 0 0 0 rgba(43, 168, 74, .40); } 70% { box-shadow: 0 0 0 14px rgba(43, 168, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(43, 168, 74, 0); } } /* Reduced motion 减弱动态偏好时关闭 */ @media (prefers-reduced-motion: reduce) { .WP_mtabWaBtn::after { animation: none; box-shadow: none; } } .WP_mtabWa:active .WP_mtabWaBtn { transform: translateX(-50%) scale(.96); } /* Legacy floating WhatsApp 旧悬浮胶囊由中央按钮取代 */ .WP_mfloat { display: none !important; } } /* Mobile bottom 手机底部 */ /* ===================== icons.css 图标 Icons ===================== */ /* icons.css CSS 图标样式 */ /* ---------- Icon base 图标基础 ---------- */ .WP_icon { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; background-color: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; } /* ---------- /Icon base 图标基础 ---------- */ /* ---------- Icon set 常用图标 ---------- */ .WP_icarrow { --i: url("../svg/icon-arrow.svg"); } .WP_iccalendar { --i: url("../svg/icon-calendar.svg"); } .WP_iccheck { --i: url("../svg/icon-check.svg"); } .WP_icchevron { --i: url("../svg/icon-chevron.svg"); } .WP_icfacebook { --i: url("../svg/icon-facebook.svg"); } .WP_icinstagram { --i: url("../svg/icon-instagram.svg"); } .WP_iclinkedin { --i: url("../svg/icon-linkedin.svg"); } .WP_icmail { --i: url("../svg/icon-mail.svg"); } .WP_icphone { --i: url("../svg/icon-phone.svg"); } .WP_icpin { --i: url("../svg/icon-pin.svg"); } .WP_icbookmark { --i: url("../svg/icon-bookmark.svg"); } .WP_iclink { --i: url("../svg/icon-link.svg"); } .WP_icclock { --i: url("../svg/icon-clock.svg"); } .WP_icquote { --i: url("../svg/icon-quote.svg"); } .WP_icsearch { --i: url("../svg/icon-search.svg"); } .WP_icstar { --i: url("../svg/icon-star.svg"); } .WP_icthreads { --i: url("../svg/icon-threads.svg"); } .WP_ictiktok { --i: url("../svg/icon-tiktok.svg"); } .WP_ictwitter { --i: url("../svg/icon-twitter.svg"); } .WP_icwhatsapp { --i: url("../svg/icon-whatsapp.svg"); } /* Plain 关闭 */ .WP_icx { --i: url("../svg/icon-close.svg"); } .WP_icxlogo { --i: url("../svg/icon-xlogo.svg"); } .WP_icyoutube { --i: url("../svg/icon-youtube.svg"); } .WP_icTop { --i: url("../svg/icon-top.svg"); } /* ---------- /Icon set 图标集 ---------- */ /* About feature 关于页特性 */ .WP_faico { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; background-color: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; } .WP_faTags { --i: url("../svg/fa-tags.svg"); } .WP_faChartline { --i: url("../svg/fa-chartline.svg"); } .WP_faUseredit { --i: url("../svg/fa-useredit.svg"); } .WP_faWarehouse { --i: url("../svg/fa-warehouse.svg"); } .WP_faThumbsup { --i: url("../svg/fa-thumbsup.svg"); } .WP_faBell { --i: url("../svg/fa-bell.svg"); } .WP_faUser { --i: url("../svg/fa-user.svg"); } /* About feature 关于页特性 */ /* Product share 产品分享 */ .WP_sico { display: block; width: 14px; height: 14px; background-color: #fff; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; } .WP_sicoFb { --i: url("../svg/icon-facebook.svg"); } .WP_sicoTw { --i: url("../svg/share-tw.svg"); } .WP_sicoLi { --i: url("../svg/share-li.svg"); } .WP_sicoPi { --i: url("../svg/share-pi.svg"); } .WP_sicoWa { --i: url("../svg/share-wa.svg"); } .WP_sicoEm { --i: url("../svg/share-em.svg"); } /* Product share 产品分享 */ /* Footer link 友情链接 */ .WP_icgoogle { --i: url("../svg/icon-google.svg"); } .WP_icwikipedia { --i: url("../svg/icon-wikipedia.svg"); } .WP_icamazon { --i: url("../svg/icon-amazon.svg"); } .WP_icglobe { --i: url("../svg/icon-globe.svg"); } .WP_icbaidu { --i: url("../svg/icon-baidu.svg"); } .WP_icsystinmark { --i: url("../../../../uploads/common/mark.png"); } /* Footer link 页脚站点 */ /* Mobile bottom 手机端底部 */ .WP_ichome { --i: url("../svg/icon-home.svg"); } .WP_icgrid { --i: url("../svg/icon-grid.svg"); } .WP_iccase { --i: url("../svg/icon-case.svg"); } .WP_icchat { --i: url("../svg/icon-chat.svg"); } /* Mobile bottom 手机底部 */ /* ---------- /Inline-SVG replacements 行内 SVG 外链化 ---------- */ .WP_ix-about-building { --i: url("../svg/about-building.svg"); } .WP_ix-about-gem { --i: url("../svg/about-gem.svg"); } .WP_ix-about-globe { --i: url("../svg/about-globe.svg"); } .WP_ix-about-shield { --i: url("../svg/about-shield.svg"); } .WP_ix-acc-door { --i: url("../svg/acc-door.svg"); } .WP_ix-acc-go { --i: url("../svg/acc-go.svg"); } .WP_ix-acc-smart { --i: url("../svg/acc-smart.svg"); } .WP_ix-acc-sunroom { --i: url("../svg/acc-sunroom.svg"); } .WP_ix-acc-window { --i: url("../svg/acc-window.svg"); } .WP_ix-arr-case-go { --i: url("../svg/arr-case-go.svg"); } .WP_ix-arr-contact { --i: url("../svg/arr-contact.svg"); } .WP_ix-arr-cta { --i: url("../svg/arr-cta.svg"); } .WP_ix-arr-fac-go { --i: url("../svg/arr-fac-go.svg"); } .WP_ix-arr-go { --i: url("../svg/arr-go.svg"); } .WP_ix-arr-long { --i: url("../svg/arr-long.svg"); } .WP_ix-arr-long-wa { --i: url("../svg/arr-long-wa.svg"); } .WP_ix-arr-map-tag { --i: url("../svg/arr-map-tag.svg"); } .WP_ix-arr-prod-trigger { --i: url("../svg/arr-prod-trigger.svg"); } .WP_ix-arr-submit { --i: url("../svg/arr-submit.svg"); } .WP_ix-bi-calendar { --i: url("../svg/bi-calendar.svg"); } .WP_ix-bi-card-arrow { --i: url("../svg/bi-card-arrow.svg"); } .WP_ix-bi-factory { --i: url("../svg/bi-factory.svg"); } .WP_ix-bi-nav-next { --i: url("../svg/bi-nav-next.svg"); } .WP_ix-bi-nav-prev { --i: url("../svg/bi-nav-prev.svg"); } .WP_ix-bi-users { --i: url("../svg/bi-users.svg"); } .WP_ix-case-stat-1 { --i: url("../svg/case-stat-1.svg"); } .WP_ix-cb-feat-1 { --i: url("../svg/cb-feat-1.svg"); } .WP_ix-cb-feat-2 { --i: url("../svg/cb-feat-2.svg"); } .WP_ix-cb-feat-3 { --i: url("../svg/cb-feat-3.svg"); } .WP_ix-cb-feat-4 { --i: url("../svg/cb-feat-4.svg"); } .WP_ix-cert-next { --i: url("../svg/cert-next.svg"); } .WP_ix-cert-prev { --i: url("../svg/cert-prev.svg"); } .WP_ix-cf-feat-1 { --i: url("../svg/cf-feat-1.svg"); } .WP_ix-cf-feat-2 { --i: url("../svg/cf-feat-2.svg"); } .WP_ix-cf-feat-3 { --i: url("../svg/cf-feat-3.svg"); } .WP_ix-cf-feat-4 { --i: url("../svg/cf-feat-4.svg"); } .WP_ix-chev-left { --i: url("../svg/chev-left.svg"); } .WP_ix-chev-right { --i: url("../svg/chev-right.svg"); } .WP_ix-contact-feat-mail { --i: url("../svg/contact-feat-mail.svg"); } .WP_ix-contact-feat-phone { --i: url("../svg/contact-feat-phone.svg"); } .WP_ix-contact-feat-whatsapp { --i: url("../svg/contact-feat-whatsapp.svg"); } .WP_ix-cult-atom { --i: url("../svg/cult-atom.svg"); } .WP_ix-cult-bulb { --i: url("../svg/cult-bulb.svg"); } .WP_ix-cult-heart { --i: url("../svg/cult-heart.svg"); } .WP_ix-cult-rocket { --i: url("../svg/cult-rocket.svg"); } .WP_ix-fac-factory { --i: url("../svg/fac-factory.svg"); } .WP_ix-feat-book { --i: url("../svg/feat-book.svg"); } .WP_ix-feat-bulb { --i: url("../svg/feat-bulb.svg"); } .WP_ix-feat-chart { --i: url("../svg/feat-chart.svg"); } .WP_ix-feat-door { --i: url("../svg/feat-door.svg"); } .WP_ix-feat-edit { --i: url("../svg/feat-edit.svg"); } .WP_ix-feat-globe { --i: url("../svg/feat-globe.svg"); } .WP_ix-feat-news { --i: url("../svg/feat-news.svg"); } .WP_ix-feat-window { --i: url("../svg/feat-window.svg"); } .WP_ix-process-1 { --i: url("../svg/process-1.svg"); } .WP_ix-process-2 { --i: url("../svg/process-2.svg"); } .WP_ix-process-3 { --i: url("../svg/process-3.svg"); } .WP_ix-process-4 { --i: url("../svg/process-4.svg"); } .WP_ix-process-5 { --i: url("../svg/process-5.svg"); } .WP_ix-process-6 { --i: url("../svg/process-6.svg"); } .WP_ix-prod-check { --i: url("../svg/prod-check.svg"); } .WP_ix-quote-mark { --i: url("../svg/quote-mark.svg"); } .WP_ix-shield-secure { --i: url("../svg/shield-secure.svg"); } .WP_ix-stat-arrow { --i: url("../svg/stat-arrow.svg"); } .WP_ix-stat-gem { --i: url("../svg/stat-gem.svg"); } .WP_ix-stat-globe { --i: url("../svg/stat-globe.svg"); } .WP_ix-stat-grid { --i: url("../svg/stat-grid.svg"); } .WP_ix-stat-shield { --i: url("../svg/stat-shield.svg"); } .WP_ix-stat-swap { --i: url("../svg/stat-swap.svg"); } .WP_ix-stat-wind { --i: url("../svg/stat-wind.svg"); } .WP_ix-tag-globe { --i: url("../svg/tag-globe.svg"); } .WP_ix-tag-leaf { --i: url("../svg/tag-leaf.svg"); } .WP_ix-tag-shield { --i: url("../svg/tag-shield.svg"); } .WP_ix-tag-team { --i: url("../svg/tag-team.svg"); } .WP_ix-val-1 { --i: url("../svg/val-1.svg"); } .WP_ix-val-2 { --i: url("../svg/val-2.svg"); } .WP_ix-val-3 { --i: url("../svg/val-3.svg"); } .WP_ix-val-4 { --i: url("../svg/val-4.svg"); } .WP_ix-x-close { --i: url("../svg/x-close.svg"); } /* Region 地区大陆 */ .WP_ix-cont-all { --i: url("../svg/cont-all.svg"); } .WP_ix-cont-asia { --i: url("../svg/cont-asia.svg"); } .WP_ix-cont-africa { --i: url("../svg/cont-africa.svg"); } .WP_ix-cont-europe { --i: url("../svg/cont-europe.svg"); } .WP_ix-cont-americas { --i: url("../svg/cont-americas.svg"); } .WP_ix-cont-oceania { --i: url("../svg/cont-oceania.svg"); } /* ===================== taxonomy.css 分类落地页 Category landing ===================== */ /* taxonomy.css 产品分类 */ /* ---------- Hero 首屏 ---------- */ .WP_cathero { background: #fff; border-bottom: 1px solid var(--line); padding: 70px 0 56px; } .WP_catheroInner { max-width: 940px; } .WP_catheroTitle { color: var(--slate); font-size: 2.5rem; line-height: 1.25; margin: 0 0 16px; } .WP_catheroSub { color: var(--gold-dark); font-family: var(--font-head); font-weight: 600; font-size: 1.2rem; line-height: 1.5; margin: 0 0 22px; } .WP_catheroPoints { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 12px; } .WP_catheroPoints li { position: relative; padding-left: 30px; color: var(--text); line-height: 1.6; } .WP_catheroPoints li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 12px; height: 7px; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg); } /* ---------- /Hero 页头 ---------- */ /* ---------- Body / sections 主体与分节 ---------- */ .WP_catbody { padding-bottom: 70px; } .WP_catsec { padding: 54px 0 8px; } .WP_catsecSoft { background: var(--bg-soft, #f8f7f4); border-radius: 12px; padding: 40px 38px 46px; margin-top: 34px; } .WP_catsecTitle { font-size: 1.22rem; margin: 0 0 22px; padding: 12px 18px; background: #f5f5f5; border-left: 4px solid var(--gold); color: #222; line-height: 1.4; } .WP_catsecSoft .WP_catsecTitle { background: #fff; } .WP_catsecSub { font-size: 1.35rem; color: #222; line-height: 1.4; margin: 0 0 14px; } .WP_catsecLead { color: var(--text); font-size: .98rem; line-height: 1.75; margin: 0 0 14px; } /* ---------- /Body / sections 正文版块 ---------- */ /* Why-choose 选择理由 */ .WP_catpoints { list-style: none; margin: 20px 0 26px; padding: 0; display: grid; gap: 14px; } .WP_catpoints li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.65; color: var(--text); } .WP_catpoints .WP_icon { flex: 0 0 auto; width: 20px; height: 20px; color: var(--gold); margin-top: 3px; } /* ---------- /Why-choose points 优势要点 ---------- */ /* Grid 应用场景 */ .WP_catapps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 20px; } .WP_catapp { position: relative; display: block; border-radius: 10px; overflow: hidden; background: var(--slate, #26303d); aspect-ratio: 4 / 3; } .WP_catappMedia { position: absolute; inset: 0; } .WP_catappImg { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .WP_catapp:hover .WP_catappImg { transform: scale(1.06); } .WP_catappLabel { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 14px 12px; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); color: #fff; font-family: var(--font-head); font-weight: 600; font-size: .95rem; } /* Grid 应用场景 */ /* ---------- Feature cards 特性卡片 ---------- */ .WP_catcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 22px; } .WP_catcard { background: #fff; border: 1px solid #ececec; border-radius: 10px; padding: 24px 22px; box-shadow: 0 2px 10px rgba(0, 0, 0, .03); } .WP_catcardMedia { margin: -4px 0 16px; } .WP_catcardImg { width: 100%; height: 150px; object-fit: cover; border-radius: 8px; display: block; } .WP_catcardT { margin: 0 0 10px; font-size: 1.06rem; color: #222; line-height: 1.35; } .WP_catcardX { margin: 0; color: var(--muted, #6b7280); font-size: .93rem; line-height: 1.65; } /* ---------- /Feature cards 特性卡片 ---------- */ /* Title text 标题、文字 */ .WP_catlist { margin-top: 18px; display: grid; gap: 18px; } .WP_catlistItem { border-left: 3px solid var(--gold); background: #fff; padding: 16px 20px; border-radius: 0 8px 8px 0; } .WP_catsecSoft .WP_catlistItem { background: #fff; } .WP_catlistT { margin: 0 0 8px; font-size: 1.04rem; color: #222; line-height: 1.4; } .WP_catlistX { margin: 0; color: var(--text); font-size: .95rem; line-height: 1.7; } /* Title text 标题、文字 */ /* ---------- FAQ 常见问题 ---------- */ .WP_catsec .WP_faq .WP_faqQ span:first-child { flex: 1; } /* ---------- /FAQ 常见问题 ---------- */ /* ---------- Bottom quote CTA 底部询盘 ---------- */ .WP_catcta { margin-top: 46px; padding: 46px 30px; text-align: center; background: var(--bg-soft, #f8f7f4); border-radius: 12px; } .WP_catctaTitle { margin: 0 0 12px; font-size: 1.5rem; color: #222; } .WP_catctaText { margin: 0 0 22px; color: var(--muted, #6b7280); } /* CTA 底部询盘 */ /* ---------- Responsive 响应式 ---------- */ @media (max-width: 900px) { .WP_catapps { grid-template-columns: repeat(2, 1fr); } .WP_catcards { grid-template-columns: repeat(2, 1fr); } .WP_catheroTitle { font-size: 2rem; } } @media (max-width: 600px) { .WP_catapps { grid-template-columns: 1fr; } .WP_catcards { grid-template-columns: 1fr; } .WP_catsecSoft { padding: 28px 20px 34px; } .WP_cathero { padding: 48px 0 40px; } .WP_catheroTitle { font-size: 1.7rem; } } /* ---------- /Responsive 响应式 ---------- */ /* ===================== article.css 文章详情 Article ===================== */ /* article.css 新闻文章页 */ /* ---------- Related products 相关产品 ---------- */ body.single-post .WP_related { padding: 56px 0; background: #fff; } body.single-post .WP_related .WP_headLines { margin-bottom: 26px; } /* ---------- /Related products 相关产品 ---------- */ /* ---------- V2 Editorial 文章详情：左 70% 正文 + 右 30% 资讯侧栏 ---------- */ /* Sticky 支撑：中间层 overflow:hidden 会杀死所有后代 sticky，改用 clip（视觉等价裁切） */ body.single-post .WP_content { overflow: clip; } /* Page backdrop 页面浅色底衬（衬托白卡片） */ body.single-post { background: #f4f8f5; } body.single-post .WP_related { background: transparent; } .WP_artWrap { --ab-green: #075b3c; --ab-green2: #0b8054; --ab-soft: #edf7f2; --ab-ink: #202522; --ab-mut: #777777; --ab-body: 'Titillium Web', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* Container 全站统一容器宽度 */ .WP_artWrap { width: min(1280px, 88vw); margin: 0 auto; padding: min(3vw, 46px) 0 70px; } /* Breadcrumb bar 文章页顶部面包屑栏（复用 .WP_artWrap 宽度，去掉大内边距） */ .WP_artCrumb { padding: 18px 0 0; font-family: var(--ab-body); } /* 长标题截断：保证面包屑与页签同一行（文章页横幅底栏） */ body.single-post .WP_heroCrumb .WP_breadcrumb .cur { display: inline-block; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } .WP_artLayout { display: grid; grid-template-columns: minmax(0, 70fr) minmax(0, 30fr); gap: 36px; align-items: start; font-family: var(--ab-body); } /* 左侧正文：白卡片承载 */ .WP_artMain { min-width: 0; background: #fff; border: 1px solid #e9f0eb; border-radius: 18px; box-shadow: 0 12px 34px rgba(16, 36, 28, .07); padding: 36px 42px 42px; } .WP_artSide { min-width: 0; } /* 标题 */ .WP_artTitle { margin: 0 0 18px; font-size: 34px; font-weight: 700; line-height: 1.3; color: var(--ab-ink); } /* 信息与功能栏 */ .WP_artBar2 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; justify-content: space-between; padding: 12px 0 22px; border-bottom: 1px solid #eef2ef; margin-bottom: 26px; } .WP_artMeta { display: flex; align-items: center; gap: 14px; } .WP_artMetaItem { display: inline-flex; align-items: center; gap: 7px; color: var(--ab-mut); font-size: 18px; } .WP_artMetaItem .WP_icon { width: 18px; height: 18px; } .WP_artDiv { width: 1px; height: 16px; background: #dfe7e2; } .WP_artFonts { display: flex; align-items: center; gap: 4px; } .WP_artFontBtn { border: 1px solid #e2e9e4; background: #fff; color: #42504a; min-width: 34px; height: 30px; padding: 0 8px; border-radius: 8px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .2s, color .2s, border-color .2s; } .WP_artFontBtn:hover { border-color: var(--ab-green2); color: var(--ab-green2); } .WP_artFontBtn.is-on { background: var(--ab-green); border-color: var(--ab-green); color: #fff; } .WP_artFontBtn.is-on:hover { background: var(--ab-green2); border-color: var(--ab-green2); color: #fff; } .WP_artFontReset { font-size: 15px; } .WP_artShare { display: flex; align-items: center; gap: 6px; } .WP_artShareBtn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 0; padding: 0; background: transparent; color: #5a6660; cursor: pointer; transition: background .2s, color .2s; } .WP_artShareBtn .WP_icon { width: 15px; height: 15px; } .WP_artShareBtn:hover { background: var(--ab-soft); color: var(--ab-green2); } .WP_artShareBtn.is-done { color: var(--ab-green2); background: var(--ab-soft); } /* 封面图 */ .WP_artCover { margin: 0 0 26px; border-radius: 12px; overflow: hidden; background: #f0f4f1; } .WP_artCover img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } /* Overview 摘要 */ .WP_artOverview { background: var(--ab-soft); border-radius: 12px; padding: 22px 24px; margin-bottom: 30px; } .WP_artOverviewHead { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; color: var(--ab-green); font-size: 17px; font-weight: 700; } .WP_artOverviewHead .WP_icon { width: 17px; height: 17px; } .WP_artOverview p { margin: 0; color: #3c4842; font-size: 15.5px; line-height: 1.8; } /* 正文排版（字号由 --art-fs 控制，全部 em 联动缩放） */ .WP_artEntry { font-size: var(--art-fs, 18px); color: #333b36; line-height: 1.78; transition: font-size .2s ease; } .WP_artEntry > p:first-of-type { font-size: 1.06em; color: #39443e; } .WP_artEntry p { margin: 0 0 1.15em; } .WP_artEntry h2 { margin: 1.7em 0 .65em; padding-left: 16px; position: relative; font-size: 1.62em; line-height: 1.3; font-weight: 700; color: var(--ab-ink); scroll-margin-top: 96px; } .WP_artEntry h2::before { content: ''; position: absolute; left: 0; top: .18em; bottom: .18em; width: 5px; border-radius: 3px; background: linear-gradient(180deg, var(--ab-green2), var(--ab-green)); } .WP_artEntry h3 { margin: 1.4em 0 .55em; font-size: 1.26em; line-height: 1.35; font-weight: 700; color: var(--ab-ink); scroll-margin-top: 96px; } .WP_artEntry h4, .WP_artEntry h5, .WP_artEntry h6 { margin: 1.2em 0 .5em; font-size: 1.08em; color: var(--ab-ink); scroll-margin-top: 96px; } .WP_artEntry a { color: var(--ab-green2); text-decoration: underline; text-underline-offset: 2px; } .WP_artEntry ul, .WP_artEntry ol { margin: 0 0 1.15em; padding-left: 1.5em; } .WP_artEntry li { margin-bottom: .45em; } .WP_artEntry li::marker { color: var(--ab-green2); } .WP_artEntry img { max-width: 100%; height: auto; border-radius: 12px; box-shadow: 0 6px 22px rgba(16, 36, 28, .10); } .WP_artEntry hr { border: 0; border-top: 1px solid #e4ebe6; margin: 2em 0; } .WP_artEntry blockquote { margin: 0 0 1.15em; padding: 14px 20px; border-left: 4px solid var(--ab-green2); border-radius: 0 10px 10px 0; background: var(--ab-soft); color: #3c4842; } .WP_artEntry blockquote p:last-child { margin-bottom: 0; } .WP_artEntry code { font-size: .88em; background: #f3f7f4; border: 1px solid #e2eae4; border-radius: 6px; padding: .12em .4em; color: #0a4d33; } .WP_artEntry pre { margin: 0 0 1.15em; padding: 16px 18px; border-radius: 10px; background: #0f231b; color: #d9efe4; overflow: auto; } .WP_artEntry pre code { background: transparent; border: 0; color: inherit; padding: 0; font-size: .85em; } .WP_artEntry table { width: 100%; border-collapse: collapse; font-size: .92em; margin-bottom: 1.15em; } /* 统一横向滚动包装（PHP 渲染时包 .WP_tblWrap，PC/移动端宽表都不溢出卡片） */ .WP_tblWrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1.15em; } .WP_tblWrap table { margin-bottom: 0; min-width: max-content; } .WP_mdTableWrap { overflow-x: auto; margin-bottom: 1.15em; border-radius: 10px; border: 1px solid #e0e9e3; } .WP_mdTableWrap table { margin-bottom: 0; } .WP_artEntry th, .WP_mdTableWrap td { padding: 10px 14px; text-align: left; } /* 表头：原生 thead th 与 Markdown 表（首行 td）都染绿 */ .WP_mdTableWrap thead th { background: var(--ab-green); color: #fff; font-weight: 700; border: 0; } .WP_mdTableWrap table:not(:has(thead)) tbody tr:first-child td { background: var(--ab-green); color: #fff; font-weight: 700; border: 0; } .WP_mdTableWrap tbody tr:nth-child(even) td { background: #f7fbf8; } .WP_mdTableWrap td { border-top: 1px solid #e7efe9; } .WP_mdTableWrap table:not(:has(thead)) tbody tr:first-child td { border-top: 0; } .WP_artEntry figcaption { color: var(--ab-mut); font-size: .82em; text-align: center; margin-top: 8px; } /* ---------- 侧栏（参照 theia-sticky-sidebar：随页面同速滚动，底部对齐视口后钉住；top 由 JS 按高度动态计算） ---------- */ .WP_artSide { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 96px; align-self: start; } .WP_artCard { background: #fff; border-radius: 16px; box-shadow: 0 8px 26px rgba(16, 36, 28, .08); overflow: hidden; } .WP_artCardHead { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 15px 20px; background: var(--ab-soft); border: 0; color: var(--ab-green); font-family: inherit; text-align: left; cursor: default; } .WP_artCardHead .WP_icon { width: 17px; height: 17px; flex: 0 0 auto; } .WP_artCardHead h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--ab-green); } /* 热门/最新资讯：tab 切换 + 大数字榜单 */ .WP_artTabHead { gap: 12px; flex-wrap: wrap; } .WP_artTabs { display: flex; gap: 6px; margin-left: auto; } .WP_artTab { border: 0; background: transparent; cursor: pointer; padding: 6px 13px; border-radius: 999px; font-family: inherit; font-size: 13.5px; font-weight: 700; color: #66726c; transition: background .2s, color .2s; } .WP_artTab:hover { color: var(--ab-green); background: rgba(255, 255, 255, .75); } .WP_artTab.is-on { background: var(--ab-green); color: #fff; } .WP_artRank { padding: 4px 18px 10px; } .WP_artRank.is-hidden { display: none; } .WP_rankRow { display: flex; align-items: center; gap: 13px; padding: 13px 0; } .WP_rankRow + .WP_rankRow { border-top: 1px solid #eff3f0; } .WP_rankNum { flex: 0 0 46px; width: 46px; text-align: center; font-family: var(--ab-body); font-size: 34px; font-weight: 800; line-height: 1; color: #c2d3c8; letter-spacing: -.02em; transition: color .2s; } .WP_rankRow:nth-child(-n+3) .WP_rankNum { color: var(--ab-green2); } .WP_rankRow:hover .WP_rankNum { color: var(--ab-green); } .WP_rankText { flex: 1; min-width: 0; } .WP_rankText h4 { margin: 0 0 5px; font-size: 13.5px; font-weight: 700; line-height: 1.42; color: var(--ab-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .WP_rankText h4 a { color: var(--ab-ink); transition: color .2s; } .WP_rankRow:hover .WP_rankText h4 a { color: var(--ab-green); } .WP_rankMeta { display: inline-flex; align-items: center; gap: 6px; color: var(--ab-mut); font-size: 12px; } .WP_rankMeta .WP_icon { width: 12px; height: 12px; } .WP_rankArr { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; color: var(--ab-green2); transition: transform .2s, color .2s; } .WP_rankArr .WP_icon { width: 14px; height: 14px; } .WP_rankRow:hover .WP_rankArr { transform: translateX(3px); color: var(--ab-green); } /* 目录（Markdown 层级列表风格） */ .WP_tocCard { /* 自然随流 */ } .WP_tocToggle { cursor: pointer; } .WP_tocChev { margin-left: auto; width: 9px; height: 9px; flex: 0 0 auto; border-right: 2px solid var(--ab-green); border-bottom: 2px solid var(--ab-green); transform: rotate(45deg) translateY(-2px); transition: transform .25s; } .WP_tocCard.is-closed .WP_tocChev { transform: rotate(-135deg) translateY(-2px); } .WP_tocNav { padding: 12px 14px 14px; /* 不限高，随页面自然滚动 */ } .WP_tocList { margin: 0; padding: 0; list-style: none; } .WP_tocList > li { margin: 0; } .WP_tocSub { margin: 2px 0 4px; padding: 0 0 0 18px; list-style: none; } .WP_tocLink { display: block; position: relative; padding: 7px 8px 7px 22px; border-radius: 8px; color: #4b564f; font-size: 13.5px; line-height: 1.45; text-decoration: none; transition: background .2s, color .2s; } .WP_tocLink::before { content: ''; position: absolute; left: 7px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: #b9cdc1; transition: background .2s; } .WP_tocSub .WP_tocLink { font-size: 12.5px; padding: 5px 8px 5px 20px; } .WP_tocSub .WP_tocLink::before { width: 4px; height: 4px; left: 6px; background: #d2dfd7; } .WP_tocLink:hover { background: #f4f9f6; color: var(--ab-green); } .WP_tocLink:hover::before { background: var(--ab-green2); } .WP_tocLink.on { background: var(--ab-soft); color: var(--ab-green); font-weight: 700; } .WP_tocLink.on::before { background: var(--ab-green2); } /* WhatsApp 按钮 */ .WP_artWa { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 76px; padding: 18px 22px; border-radius: 14px; background: linear-gradient(135deg, #0b8054 0%, #075b3c 100%); color: #fff; font-size: 16.5px; font-weight: 700; line-height: 1.3; box-shadow: 0 10px 26px rgba(7, 91, 60, .32); transition: transform .25s, box-shadow .25s, filter .25s; } .WP_artWa .WP_icon { width: 22px; height: 22px; flex: 0 0 auto; } .WP_artWa .WP_icarrow { width: 17px; height: 17px; transition: transform .25s; } .WP_artWa:hover { transform: translateY(-3px); box-shadow: 0 15px 32px rgba(7, 91, 60, .4); filter: brightness(1.06); } .WP_artWa:hover .WP_icarrow { transform: translateX(4px); } /* ---------- FAQ 折叠（正文 Q/A 自动抽取） ---------- */ .WP_faq { margin: 2.4em 0 .4em; } .WP_faqTitle { margin: 0 0 16px; font-size: 1.55em; font-weight: 700; line-height: 1.3; color: var(--ab-ink); display: flex; align-items: center; gap: 10px; } .WP_faqTitle::before { content: ''; flex: 0 0 auto; width: 5px; height: .95em; border-radius: 3px; background: linear-gradient(180deg, var(--ab-green2), var(--ab-green)); } .WP_faqItem { border: 1px solid #e3ece6; border-radius: 12px; background: #fbfdfc; margin-bottom: 12px; overflow: hidden; transition: border-color .2s, box-shadow .2s, background .2s; } .WP_faqItem[open] { border-color: #b7d6c6; background: #fff; box-shadow: 0 6px 18px rgba(16, 36, 28, .06); } .WP_faqItem summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 15px 18px; font-weight: 700; font-size: .98em; line-height: 1.5; color: var(--ab-ink); transition: color .2s; } .WP_faqItem summary::-webkit-details-marker { display: none; } .WP_faqItem summary:hover { color: var(--ab-green); } .WP_faqChev { margin-left: auto; flex: 0 0 auto; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid var(--ab-green2); border-bottom: 2px solid var(--ab-green2); transform: rotate(45deg); transition: transform .25s; } .WP_faqItem[open] .WP_faqChev { transform: rotate(225deg); margin-top: 4px; } .WP_faqA { display: block; padding: 0 18px 16px; color: #4b564f; font-size: .95em; line-height: 1.75; } .WP_faqA p { margin: 0 0 .6em; } .WP_faqA p:last-child { margin-bottom: 0; } /* ---------- 响应式 ---------- */ @media (max-width: 1080px) { .WP_artLayout { grid-template-columns: minmax(0, 1fr); gap: 34px; } .WP_artTitle { font-size: 29px; } .WP_artEntry h2 { font-size: 1.5em; } .WP_artMain { padding: 28px 30px 32px; } /* 平板/手机：侧栏恢复随流 */ .WP_artSide { position: static; max-height: none; overflow: visible; padding: 0; margin: 0; } .WP_tocCard { position: static; } } @media (max-width: 767px) { .WP_artWrap { width: auto; padding: 14px 16px 34px; } .WP_artCrumb { padding: 12px 0 0; font-size: 12px; } .WP_artCrumb .WP_breadcrumb .cur { display: inline-block; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } .WP_artMain { padding: 22px 18px 26px; border-radius: 14px; } .WP_artTitle { font-size: 23px; margin-bottom: 14px; } .WP_artBar2 { gap: 10px; padding-bottom: 16px; margin-bottom: 20px; justify-content: flex-start; } /* 手机端两行布局：第一行日期/阅读时长，第二行字号按钮 + 社交图标 */ .WP_artMeta { flex: 1 1 100%; gap: 12px; } .WP_artFonts { order: 2; } .WP_artShare { order: 3; margin-left: auto; } .WP_artMetaItem { font-size: 12.5px; } .WP_artFontBtn { min-width: 30px; height: 28px; font-size: 12px; } .WP_artShareBtn { width: 29px; height: 29px; } .WP_artOverview { padding: 16px 16px; } .WP_artOverviewHead { font-size: 15.5px; } .WP_artOverview p { font-size: 14px; } /* 窄屏表格：块级横向滚动，防止溢出卡片 */ .WP_artEntry table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: .85em; } /* 已有滚动容器的表格保持原布局 */ .WP_mdTableWrap table, .WP_tblWrap table { display: table; } .WP_artEntry th, .WP_mdTableWrap td, .WP_tblWrap td { padding: 8px 10px; white-space: nowrap; } .WP_mdTableWrap td { white-space: normal; } /* 目录默认折叠，点标题展开 */ .WP_tocCard .WP_tocNav { display: none; } .WP_tocCard.is-open .WP_tocNav { display: block; max-height: 300px; } .WP_artWa { font-size: 15px; min-height: 64px; } .WP_artTab { font-size: 12.5px; padding: 5px 10px; } .WP_rankNum { flex-basis: 34px; width: 34px; font-size: 27px; } } /* ---------- /V2 Editorial 文章详情 ---------- */ /* ---------- Instagram 分享复制提示 toast ---------- */ .WP_toast { position: fixed; left: 50%; bottom: 44px; z-index: 9999; transform: translate(-50%, 10px); padding: 11px 20px; border-radius: 999px; background: rgba(13, 32, 25, .92); color: #fff; font-size: 13.5px; line-height: 1; white-space: nowrap; max-width: 88vw; overflow: hidden; text-overflow: ellipsis; opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s ease; } .WP_toast.is-on { opacity: 1; transform: translate(-50%, 0); } /* ---------- 文章详情页：取消滚动入场（滑动淡入）动画（2026-11-08） ---------- 全局 reveal 规则见 v2-home.css（.WP_rvJs [data-rv]）。 仅取消 banner（.WP_aboutHero）以下的正文/侧栏/相关产品的 data-rv 滑动动画； banner 自身的 .WP_aboutHeroCopy 淡入是独立机制，不受影响。 */ .WP_rvJs body.single-post .WP_postWrap [data-rv], .WP_rvJs body.single-post .WP_postWrap [data-rv="fade-up"], .WP_rvJs body.single-post .WP_postWrap [data-rv].WP_rvIn, .WP_rvJs body.single-post .WP_related [data-rv], .WP_rvJs body.single-post .WP_related [data-rv="fade-up"], .WP_rvJs body.single-post .WP_related [data-rv].WP_rvIn { opacity: 1; transform: none; transition: none; } /* ===================== v2-home.css 首页 v2 Homepage v2 ===================== */ /* v2-home.css 首页样式 */ /* ---------- Global 全局 ---------- */ body.systin-front { overflow-x: hidden; overflow-x: clip; } /* clip position 保证 */ /* main.css 容器宽度 */ .systin-front .WP_section { padding: 48px 0; } /* Section 分节标题 */ .systin-front .WP_titleUnderline { padding-bottom: 0; } .systin-front .WP_titleUnderline::after { display: none; } .systin-front h1, .systin-front h2, .systin-front h3 { color: #1e293b; } /* Tahoma 风格分节 */ .systin-front .WP_section h2, .systin-front .WP_pillars h2 { font-family: Tahoma, "Segoe UI", sans-serif; font-weight: 700; font-size: 26px; line-height: 1.2; color: #1e293b; margin: 0; } /* 居中的 Titillium 标题Centred Titillium titles . */ .systin-front .WP_stepssecTitle, .systin-front .WP_newssecTitle { font-family: "Titillium Web", "Segoe UI", sans-serif; font-weight: 700; font-size: 24px; line-height: 1.25; text-align: center; color: #1a1a1a; margin: 0; } .systin-front .WP_head { text-align: left; max-width: none; margin: 0 0 32px; } .systin-front .WP_head p { font-family: Tahoma, "Segoe UI", sans-serif; font-weight: 500; font-size: 14px; line-height: 1.4; color: #555; margin: 16px 0 0; } /* 棕色 View All 按钮Brown View All button (source #0b5d3a). */ .systin-front .WP_btnBrown, .systin-front .WP_bestsell .WP_btnGold, .systin-front .WP_headSplit > .WP_btn { background: #0b5d3a; border-color: #0b5d3a; color: #fff; border-radius: 4px; padding: 12px 30px; font-family: "Segoe UI", Tahoma, sans-serif; font-weight: 600; font-size: 14px; } .systin-front .WP_btnBrown:hover, .systin-front .WP_bestsell .WP_btnGold:hover, .systin-front .WP_headSplit > .WP_btn:hover { background: #6d431f; border-color: #6d431f; color: #fff; transform: none; box-shadow: none; } /* Split head 分节头 */ .systin-front .WP_headSplit { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; } /* ---------- /Global 全局 ---------- */ /* ---------- Hero 首屏 ---------- */ /* Hero 首屏、头部 */ .systin-front .WP_hero { min-height: calc(100vh - 131px); align-items: stretch; background: #222; } .systin-front .WP_hero > .WP_container { display: flex; flex-direction: column; justify-content: flex-end; align-self: stretch; } .systin-front .WP_hero::after { /* Dark gradient 白色文字 */ background: linear-gradient(90deg, rgba(10, 10, 10, .60) 0%, rgba(10, 10, 10, .34) 45%, rgba(10, 10, 10, .10) 100%); } .systin-front .WP_heroInner2 { position: relative; z-index: 3; max-width: none; width: 100%; padding: 0 16px 88px; margin: 0; } /* Hero copy 首屏文案 */ .systin-front .WP_hero h1 { font-family: "Titillium Web", "Segoe UI", sans-serif; font-weight: 700; font-size: 28px; line-height: 1.2; color: #ffffff; margin: 0 0 18px; text-shadow: 0 2px 10px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .45); } .systin-front .WP_hero p { font-family: "Titillium Web", "Segoe UI", sans-serif; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .92); max-width: 640px; margin: 0 0 26px; text-shadow: 0 1px 7px rgba(0, 0, 0, .5); } /* px Match 同步深色 */ @media (max-width: 1024px) { .systin-front .WP_hero h1 { text-shadow: 0 2px 10px rgba(0, 0, 0, .6), 0 1px 3px rgba(0, 0, 0, .5); } .systin-front .WP_hero p { text-shadow: 0 1px 7px rgba(0, 0, 0, .55); } } /* hover 首屏按钮 */ .systin-front .WP_heroCta .WP_btnHero { display: inline-block; background: #fff; border: 1px solid #fff; border-radius: 8px; color: #006d3d; padding: 11px 26px; font-family: "Titillium Web", "Segoe UI", sans-serif; font-weight: 600; font-size: 13px; line-height: 1.4; text-decoration: none; } .systin-front .WP_heroCta .WP_btnHero:hover { background: rgba(255, 255, 255, .88); color: #00532f; } /* SVG hover 统一 */ .systin-front .WP_btnHero .WP_btnArrow { width: 17px; height: 10px; margin-left: 9px; vertical-align: -1px; transition: transform .3s ease; } .systin-front .WP_heroCta .WP_btnHero:hover .WP_btnArrow { transform: translateX(4px); } /* Hero side 首屏左右 */ .systin-front .WP_heroNav { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; align-items: center; padding: 0 8px; margin: 0; z-index: 4; pointer-events: none; } .systin-front .WP_heroArrow { pointer-events: auto; width: 42px; height: 56px; border: 0; border-radius: 6px; background: transparent; padding: 0; font-family: Arial, sans-serif; font-size: 30px; line-height: 56px; color: #fff; font-weight: 700; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); cursor: pointer; transition: background .2s; } .systin-front .WP_heroArrow:hover { background: rgba(255, 255, 255, .14); } /* Bottom dots 底部圆点 */ .systin-front .WP_heroDots { bottom: 22px; gap: 8px; } .systin-front .WP_heroDots button { width: 9px; height: 9px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .45); padding: 0; cursor: pointer; transition: background .2s, width .2s; } .systin-front .WP_heroDots button.WP_active { width: 24px; background: var(--gold); } /* Mobile keeps 手机端同样 */ @media (max-width: 900px) { .systin-front .WP_hero { min-height: calc(100vh - 131px); } .systin-front .WP_heroNav { display: none; } } @media (max-width: 640px) { .systin-front .WP_hero { min-height: calc(100vh - 67px); } .systin-front .WP_heroDots { display: flex; bottom: 16px; } } /* ---------- /Hero 页头 ---------- */ /* ---------- Pillars 卖点支柱 ---------- */ .systin-front .WP_pillars { padding: 28px 0 40px; background: linear-gradient(180deg, #e2f0e7 0%, #f7fbf8 55%, #ffffff 100%); } /* Merged 上方信赖 */ .systin-front .WP_pillars .WP_head { text-align: center; margin-bottom: 24px; } .systin-front .WP_pillarsGrid { justify-content: center; gap: 24px 0; } /* Recolour 图标棕色 */ .systin-front .WP_pillarIco img, .systin-front .WP_pillarImg { filter: brightness(0) saturate(100%) invert(24%) sepia(88%) saturate(1100%) hue-rotate(128deg) brightness(92%); } .systin-front .WP_pillars .WP_head { margin-bottom: 28px; } .systin-front .WP_pillarsGrid { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 24px 4%; } .systin-front .WP_pillar { width: 48%; box-sizing: border-box; background: none; border: 0; border-radius: 0; box-shadow: none; transform: none; padding: 8px 0; text-align: center; margin: 0 auto; } .systin-front .WP_pillar:hover { border: 0; box-shadow: none; transform: none; } .systin-front .WP_pillarIco { background: none; border-radius: 0; width: auto; height: auto; display: block; margin: 0 0 14px; } .systin-front .WP_pillarIco img, .systin-front .WP_pillarImg { width: 96px; height: 96px; object-fit: contain; display: inline-block; } .systin-front .WP_pillar h3 { font-family: Tahoma, "Segoe UI", sans-serif; font-weight: 500; font-size: 12px; line-height: 1.4; color: #333; margin: 0; max-width: 180px; margin-left: auto; margin-right: auto; } @media (min-width: 768px) { .systin-front .WP_section { padding: 110px 0; } .systin-front .WP_pillars { padding: 96px 0 40px; } .systin-front .WP_section h2, .systin-front .WP_pillars h2 { font-size: 42px; } .systin-front .WP_stepssecTitle, .systin-front .WP_newssecTitle { font-size: 34px; } .systin-front .WP_head { margin-bottom: 48px; } .systin-front .WP_head p { font-size: 16px; } .systin-front .WP_heroInner2 { padding: 0 70px 70px; max-width: 1100px; } .systin-front .WP_hero h1 { font-size: 68px; line-height: 80px; margin-bottom: 34px; } .systin-front .WP_hero p { font-size: 38px; line-height: 1.35; margin-bottom: 40px; } .systin-front .WP_heroCta .WP_btnHero { font-size: 17px; padding: 13px 34px; } .systin-front .WP_heroArrow { width: 54px; height: 72px; font-size: 40px; line-height: 72px; } .systin-front .WP_heroNav { padding: 0 14px; } .systin-front .WP_pillarsGrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; } .systin-front .WP_pillar { width: auto; padding: 20px 8px; } .systin-front .WP_pillarIco img, .systin-front .WP_pillarImg { width: 110px; height: 110px; } .systin-front .WP_pillar h3 { font-size: 15px; } } /* ---------- /Pillars 支柱 ---------- */ /* ---------- About、Stats 关于、数据 ---------- */ .systin-front .WP_aboutv { grid-template-columns: 1fr; gap: 8px; } .systin-front .WP_aboutvTitle { font-size: 26px; margin: 0 0 14px; } .systin-front .WP_aboutvText { font-family: Tahoma, "Segoe UI", sans-serif; font-weight: 500; font-size: 12px; line-height: 1.4; color: #444; text-align: center; margin: 14px 0; } .systin-front .WP_aboutvVideo { border-radius: 6px; margin-top: 12px; } .systin-front .WP_aboutvMedia { margin-top: 16px; } .systin-front .WP_aboutvMedia img { border-radius: 16px; } .systin-front .WP_statsGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 16px; margin: 44px 0 0; text-align: center; } .systin-front .WP_stat { background: #f5f5f5; border-radius: 10px; box-shadow: 10px 10px 0 0 #0d7a48; padding: 26px 12px 22px; } .systin-front .WP_statNum { font-family: "Titillium Web", "Segoe UI", sans-serif; font-weight: 700; font-size: 30px; line-height: 1.1; color: #00532f; white-space: nowrap; } .systin-front .WP_statLabel { font-family: Tahoma, "Segoe UI", sans-serif; font-weight: 500; font-size: 12px; color: #444; margin-top: 10px; text-transform: capitalize; } @media (min-width: 768px) { .systin-front .WP_aboutv { grid-template-columns: 1fr 1fr; gap: 64px; } .systin-front .WP_aboutvTitle { font-size: 42px; margin: 0 0 20px; } .systin-front .WP_aboutvText { font-size: 22px; line-height: 1.8; margin: 20px 0 40px; } .systin-front .WP_statsGrid { grid-template-columns: repeat(5, 1fr); gap: 28px; margin-top: 80px; } .systin-front .WP_stat { padding: 44px 18px 38px; } .systin-front .WP_statNum { font-size: 35px; } .systin-front .WP_statLabel { font-size: 14px; } } /* ---------- /About、Stats 关于、数据 ---------- */ /* ---------- Factory & Showroom 工厂与展厅 ---------- */ .systin-front .WP_sectionWarm.WP_facsec, .systin-front .WP_section.WP_sectionWarm:has(.WP_facslider) { background: #fff; } .systin-front .WP_facsliderSlide img { border-radius: 8px; } .systin-front .WP_facslider .WP_carouselNav button { width: 44px; height: 44px; background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); } .systin-front .WP_facsliderCaption { font-family: Tahoma, "Segoe UI", sans-serif; font-weight: 500; font-size: 12px; line-height: 1.4; color: #555; text-align: left; max-width: 1100px; margin: 24px 0 0; } @media (min-width: 768px) { .systin-front .WP_facsliderCaption { font-size: 16px; line-height: 1.8; } } /* ---------- /Factory & Showroom 工厂与展厅 ---------- */ /* ---------- Certifications 认证 ---------- */ .systin-front .WP_certs .WP_container { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 40px; } .systin-front .WP_certsEyebrow { order: 2; text-align: right; font-family: Tahoma, "Segoe UI", sans-serif; font-weight: 500; font-size: 12px; color: #555; text-transform: none; letter-spacing: normal; margin: 0 0 4px; } .systin-front .WP_certs .WP_titleUnderline { order: 1; flex: 1 1 100%; margin: 0 0 28px; } .systin-front .WP_certsFigure { order: 3; flex: 1 1 100%; } .systin-front .WP_certsFigure img { width: 100%; border-radius: 12px; display: block; } @media (min-width: 768px) { .systin-front .WP_certs .WP_titleUnderline { flex: 1 1 auto; margin-bottom: 0; } .systin-front .WP_certsEyebrow { font-size: 16px; margin-bottom: 8px; } } /* Widen 加宽偏窄 */ .systin-front .WP_containerNarrow { max-width: 1280px; } /* ---------- /Certifications 认证 ---------- */ /* ---------- Best-Selling 热销 ---------- */ .systin-front .WP_bestsell { background: #fff; } .systin-front .WP_bestsellHead { align-items: flex-end; margin-bottom: 28px; } .systin-front .WP_bestsellHead h2 { font-family: "DM Sans", Tahoma, "Segoe UI", sans-serif; } .systin-front .WP_bestsellText { font-family: Tahoma, "Segoe UI", sans-serif; font-weight: 500; font-size: 12px; line-height: 1.4; color: #555; max-width: 640px; margin: 14px 0 0; } .systin-front .WP_bslider { position: relative; } .systin-front .WP_bslider .WP_carouselTrack { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .systin-front .WP_bslider .WP_carouselTrack::-webkit-scrollbar { display: none; } .systin-front .WP_bslider .WP_carouselTrack > * { flex: 0 0 100%; scroll-snap-align: start; } .systin-front .WP_bsliderSlide { position: relative; } .systin-front .WP_bsliderSlide img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; border-radius: 4px; background: #f5f5f5; } .systin-front .WP_bsliderChip { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); background: #fff; color: #1a1a1a; font-family: "Segoe UI", Tahoma, sans-serif; font-weight: 600; font-size: 13px; line-height: 1; padding: 9px 16px; border-radius: 4px; white-space: nowrap; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); } .systin-front .WP_bslider .WP_carouselNav { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; padding: 0 12px; margin: 0; pointer-events: none; } .systin-front .WP_bslider .WP_carouselNav button { pointer-events: auto; width: 46px; height: 46px; border-radius: 50%; border: 0; background: #fff; color: #111; font-size: 20px; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .2); } @media (min-width: 768px) { .systin-front .WP_bestsellHead { margin-bottom: 44px; } .systin-front .WP_bestsellText { font-size: 15px; } .systin-front .WP_bsliderSlide img { aspect-ratio: 16 / 9; max-height: 640px; } .systin-front .WP_bslider .WP_carouselNav button { width: 54px; height: 54px; } .systin-front .WP_bsliderChip { font-size: 15px; padding: 11px 20px; bottom: 22px; } } /* ---------- /Best-Selling 热销 ---------- */ /* Project cases 工程案例 */ .systin-front .WP_galleryItem img { border-radius: 4px; } .systin-front .WP_reviews .WP_eyebrow { color: #555; text-transform: none; letter-spacing: normal; font-family: Tahoma, "Segoe UI", sans-serif; font-weight: 500; font-size: 12px; } .systin-front .WP_reviews .WP_head p { margin-top: 8px; } /* ---------- /Project cases ... headings 案例标题 ---------- */ /* ---------- Steps 流程步骤 ---------- */ .systin-front .WP_stepssec .WP_head { text-align: center; margin-bottom: 36px; } .systin-front .WP_stepssecTitle { display: inline-block; } /* ---------- /Steps 流程步骤 ---------- */ /* ---------- News 新闻 ---------- */ .systin-front .WP_newssec .WP_head { text-align: center; margin-bottom: 30px; } .systin-front .WP_newssecSub { display: flex; align-items: center; justify-content: center; gap: 18px; font-family: "Titillium Web", "Segoe UI", sans-serif; font-style: italic; font-size: 14px; color: #555; margin: 14px 0 0; } .systin-front .WP_newssecSub::before, .systin-front .WP_newssecSub::after { content: ""; height: 1px; background: #d8d3c8; flex: 0 0 56px; } .systin-front .WP_newsgrid { display: grid; grid-template-columns: 1fr; gap: 34px; } .systin-front .WP_newsgridList { display: flex; flex-direction: column; gap: 26px; } .systin-front .WP_newsgridFeature { position: relative; border-radius: 10px; overflow: hidden; background: #1a1a1a; } .systin-front .WP_newsgridFeatureMe { display: block; } .systin-front .WP_newsgridFeatureMe img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .systin-front .WP_newsgridDate { position: absolute; left: 18px; top: 0; text-align: center; color: #fff; font-family: "Segoe UI", Tahoma, sans-serif; line-height: 1; text-shadow: 0 1px 6px rgba(0, 0, 0, .55); } .systin-front .WP_newsgridDateDay { display: block; font-size: 30px; font-weight: 700; } .systin-front .WP_newsgridDateMonth { display: block; font-size: 13px; font-weight: 600; margin-top: 4px; } .systin-front .WP_newsgridFeatureBo { position: absolute; inset: auto 0 0 0; padding: 60px 20px 18px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .72) 60%); } .systin-front .WP_newsgridTitle { margin: 0 0 8px; font-size: 17px; line-height: 1.35; } .systin-front .WP_newsgridTitle a { color: #333; text-decoration: none; } .systin-front .WP_newsgridTitle a:hover { color: #00532f; } .systin-front .WP_newsgridFeature .WP_newsgridTitle a { color: #fff; } .systin-front .WP_newsgridExcerpt { font-family: Tahoma, "Segoe UI", sans-serif; font-size: 12px; line-height: 1.45; color: #555; margin: 0; } .systin-front .WP_newsgridFeature .WP_newsgridExcerpt { color: rgba(255, 255, 255, .88); } .systin-front .WP_newsgridMore { color: #fff; font-weight: 600; text-decoration: underline; margin-left: 6px; } .systin-front .WP_newsgridMeta { font-family: Tahoma, "Segoe UI", sans-serif; font-size: 12px; color: #888; margin-top: 2px; } .systin-front .WP_newssecMore { text-align: center; margin-top: 38px; } .systin-front .WP_newssecMore .WP_btn { border-radius: 4px; } @media (min-width: 768px) { .systin-front .WP_newssecSub { font-size: 16px; } .systin-front .WP_newssecSub::before, .systin-front .WP_newssecSub::after { flex: 1 1 90px; } .systin-front .WP_newsgrid { grid-template-columns: 1fr 1fr; gap: 44px; } .systin-front .WP_newsgridFeatureMe img { aspect-ratio: 16 / 11; } .systin-front .WP_newsgridDateDay { font-size: 32px; } .systin-front .WP_newsgridFeatureBo { padding: 80px 30px 24px; } .systin-front .WP_newsgridTitle { font-size: 22px; } .systin-front .WP_newsgridExcerpt { font-size: 14px; } } /* Short windows 矮窗口兜底 */ @media (min-width: 768px) and (max-height: 780px) { .systin-front .WP_hero h1 { font-size: 42px; line-height: 1.18; margin-bottom: 16px; } .systin-front .WP_hero p { font-size: 20px; line-height: 1.4; margin-bottom: 22px; } .systin-front .WP_heroInner2 { padding: 24px 70px 56px; } .systin-front .WP_heroDots { bottom: 14px; } } /* ---------- /News 新闻 ---------- */ /* Trusted 值得信赖 */ .WP_trust { --pt: 0; --pL: 0; --pR: 0; /* Pale-green 淡绿底、 */ background: #eef6f1 url("../../../../uploads/home/trust-bg.webp") center / cover no-repeat; background-image: image-set(url("../../../../uploads/home/trust-bg.avif") type('image/avif'),url("../../../../uploads/home/trust-bg.webp") type('image/webp')); padding: 76px 0 40px; overflow: hidden; } .WP_trustIn { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 56px; } .WP_trustTitle { color: #c7ddd0; font-size: 40px; line-height: 1.28; font-weight: 800; max-width: 480px; } /* Light title 标题底色 */ .systin-front .WP_trustTitle { color: #c7ddd0; } /* Title sweep 标题双色扫 */ .WP_trustLine { position: relative; display: inline-block; } .WP_trustFill { position: absolute; inset: 0; display: block; overflow: hidden; color: var(--gold); clip-path: inset(0 calc((1 - var(--pt)) * 100%) 0 0); } .WP_trustBrand { position: relative; margin-top: 24px; padding-left: 18px; color: var(--ink); font-weight: 700; font-size: 19px; } .WP_trustBrand::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--gold); } .WP_trustText { margin-top: 18px; max-width: 470px; color: var(--muted); line-height: 2; font-size: 15px; text-align: justify; } /* Copy 文案按钮 */ /* WhatsApp 按钮复用 */ .WP_btnWa { margin-top: 32px; } /* Solid brand 用户要求 */ .WP_trust .WP_btnWa { background: var(--brand-primary); -webkit-backdrop-filter: none; backdrop-filter: none; } .WP_trust .WP_btnWa:hover { background: #005a30; } /* main.js 滚动数字 */ .WP_trustStats { display: flex; align-items: flex-start; gap: 56px; margin-top: 30px; } .systin-front .WP_trustStats .WP_stat { background: none; border-radius: 0; box-shadow: none; padding: 0; text-align: left; } .systin-front .WP_trustStats .WP_statNum { display: block; font-size: 44px; font-weight: 800; line-height: 1; color: var(--brand-primary); white-space: nowrap; font-variant-numeric: tabular-nums; } /* lang.css 数字单位纯 */ html[lang] .systin-front .WP_trustStats .WP_statNum, html[lang] .systin-front .WP_trustStats .WP_statNum span, html[lang] .systin-front .WP_trustStats .WP_statNum em { font-family: var(--font-head); } .systin-front .WP_trustStats .WP_statNum em { font-style: normal; font-size: 20px; font-weight: 700; margin-left: 3px; } .systin-front .WP_trustStats .WP_statLabel { display: block; max-width: none; margin-top: 10px; font-size: 14px; color: var(--muted); text-transform: none; letter-spacing: 0; } /* px Narrower 左列收窄、 */ .WP_trustIn { grid-template-columns: 0.85fr 1.15fr; } /* logo S 右侧品牌 */ .WP_trustMedia { min-width: 0; } .WP_trustArt { position: relative; width: min(615px, 100%); aspect-ratio: 615 / 606; margin: 0 auto; } /* S S 照片层 */ .WP_trustPhotoL, .WP_trustPhotoR { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; -webkit-mask: url("../../../../uploads/home/mark-s-soft.svg") left 8% top 11% / 47.07% 78.06% no-repeat; mask: url("../../../../uploads/home/mark-s-soft.svg") left 8% top 11% / 47.07% 78.06% no-repeat; /* Blend 融入底图 */ filter: saturate(.95); opacity: var(--pL); transform: translateX(calc(-140px * (1 - var(--pL)))); } /* Soft-edge 融合处理 */ .WP_trustPhotoL::after, .WP_trustPhotoR::after { content: ""; position: absolute; inset: 0; display: block; background: linear-gradient(180deg, rgba(238, 246, 241, .50) 0%, rgba(238, 246, 241, .30) 25%, rgba(238, 246, 241, .12) 60%, rgba(238, 246, 241, .04) 100%); } /* S Right 右 */ .WP_trustPhotoR::after { background: linear-gradient(rgba(238, 246, 241, .06), rgba(238, 246, 241, .06)), linear-gradient(180deg, rgba(238, 246, 241, .50) 0%, rgba(238, 246, 241, .30) 25%, rgba(238, 246, 241, .12) 60%, rgba(238, 246, 241, .04) 100%); } .WP_trustPhotoL { background-image: url("../../../../uploads/home/trust-boy.webp"); background-image: image-set(url("../../../../uploads/home/trust-boy.avif") type('image/avif'),url("../../../../uploads/home/trust-boy.webp") type('image/webp'));} .WP_trustPhotoR { background-image: url("../../../../uploads/about/trust-girl.webp"); background-image: image-set(url("../../../../uploads/about/trust-girl.avif") type('image/avif'),url("../../../../uploads/about/trust-girl.webp") type('image/webp')); -webkit-mask-position: right 8% top 11%; mask-position: right 8% top 11%; opacity: var(--pR); transform: translateX(calc(140px * (1 - var(--pR)))); } /* Force 减弱 */ @media (prefers-reduced-motion: reduce) { .WP_trust { --pt: 1 !important; --pL: 1 !important; --pR: 1 !important; } .WP_trustFill { clip-path: none; } .WP_trustPhotoL, .WP_trustPhotoR { opacity: 1; transform: none; } } /* S s 手机端桌面 */ @media (max-width: 767px) { .WP_trustPhotoL { transform: translateX(calc(-64px * (1 - var(--pL)))) translateY(calc(82.8% - 158px)) scale(.84); } .WP_trustPhotoR { transform: translateX(calc(64px * (1 - var(--pR)))) translateY(calc(82.8% - 158px)) scale(.84); } } /* Desktop 沿用底图 */ @media (min-width: 1025px) { .WP_trust { background-image: url("../../../../uploads/home/trust-bg.webp"); background-position: center; background-image: image-set(url("../../../../uploads/home/trust-bg.avif") type('image/avif'),url("../../../../uploads/home/trust-bg.webp") type('image/webp'));} .WP_trustPhotoL { transform: translateX(calc(-140px * (1 - var(--pL)))) translateY(30px); } .WP_trustPhotoR { transform: translateX(calc(140px * (1 - var(--pR)))) translateY(30px); } .WP_btnWa { transform: translateY(-2px); } } @media (max-width: 1024px) { .WP_trust { padding: 56px 0 64px; } .WP_trustIn { gap: 40px; } .WP_trustTitle { font-size: 32px; } } @media (max-width: 767px) { .WP_trust { padding: 44px 0 52px; } .WP_trustIn { grid-template-columns: 1fr; gap: 32px; } .WP_trustTitle { font-size: 26px; max-width: none; } /* Spacing 间距补偿 */ /* px Dot 圆点行 */ .WP_trustBrand { font-size: min(16px, 4.1vw); margin-top: 15px; white-space: normal; text-align: justify; text-align-last: justify; } /* px Long 长翻译语言 */ html[lang="fr"] .WP_trustBrand { font-size: min(15px, 3.2vw); } html[lang="es"] .WP_trustBrand { font-size: min(15px, 3.45vw); } html[lang="pt"] .WP_trustBrand { font-size: min(15px, 3.48vw); } html[lang="zu"] .WP_trustBrand { font-size: min(15px, 3.5vw); } html[lang="bn"] .WP_trustBrand { font-size: min(15px, 3.95vw); } html[lang="th"] .WP_trustBrand { font-size: min(15px, 3.95vw); } /* justify 中文单行短 */ html[lang^="zh"] .WP_trustBrand { text-align-last: auto; letter-spacing: .5px; } /* px px 容器左右 */ .WP_trust .WP_container { padding-left: 10px; padding-right: 10px; } .WP_trustText { font-size: 11.5px; margin-top: 15px; line-height: 1.9; } .WP_trustStats { gap: 32px; margin-top: 21px; } .systin-front .WP_trustStats .WP_statNum { font-size: 32px; } .systin-front .WP_trustStats .WP_statNum em { font-size: 15px; } .systin-front .WP_trustStats .WP_statLabel { font-size: 12px; margin-top: 7px; } .WP_btnWa { margin-top: 21px; } .WP_trustArt { width: min(400px, 92%); margin-top: 8px; } } /* Trusted 可信赖 */ /* ---------- Customization flow 定制流程 ---------- */ .WP_cflow { position: relative; overflow: hidden; isolation: isolate; background: #183c3d; } .WP_cflowBg { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: url(/wp-content/uploads/home/process-city.webp) center 52% / cover no-repeat; background-image: image-set(url("/wp-content/uploads/home/process-city.avif") type('image/avif'),url("/wp-content/uploads/home/process-city.webp") type('image/webp'));} .WP_cflowBg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,35,37,.5), rgba(8,35,37,.12) 62%), linear-gradient(0deg, rgba(4,26,28,.62), rgba(14,38,40,.12) 75%); } .WP_cflowIn { position: relative; min-height: clamp(660px, 51vw, 850px); padding-top: clamp(56px, 5vw, 84px); padding-bottom: 62px; } .WP_cflowHead { position: relative; max-width: 450px; z-index: 2; } .WP_cflowHead h2 { margin: 12px 0 0; color: #fff; font-size: clamp(30px, 2.8vw, 46px); line-height: 1.18; font-weight: 700; letter-spacing: .01em; } .WP_cflowStage { position: absolute; inset: 155px 24px 68px; color: rgba(255,255,255,.57); } .WP_cflowPath { position: absolute; inset: 0; width: 100%; height: 100%; } .WP_cflowPath .WP_cflowPathM { display: none; } .WP_cflowPath path { animation: WP_cflowDash 5s linear infinite; } @keyframes WP_cflowDash { to { stroke-dashoffset: -22; } } .WP_cflowNodes { list-style: none; margin: 0; padding: 0; } .WP_cflowNode { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%,-50%); } .WP_cflowCard { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: clamp(112px, 9.6vw, 154px); height: clamp(112px, 9.6vw, 154px); padding: 14px; border-radius: 50%; background: #fff; color: #234336; text-align: center; box-shadow: 0 6px 22px rgba(6,28,27,.08); animation: WP_cflowCycle 18s linear calc(var(--i) * 3s) infinite; } .WP_cflowIco { display: block; flex: 0 0 auto; width: clamp(36px, 3.3vw, 52px); height: clamp(36px, 3.3vw, 52px); } .WP_cflowIco .WP_icon { display: block; width: 100%; height: 100%; } .WP_cflowLabel { display: block; width: 100%; min-height: 0; flex: 0 0 auto; font-size: clamp(12px, .95vw, 15px); font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; } .WP_cflow:not(.WP_in) .WP_cflowCard { animation-play-state: paused; } @keyframes WP_cflowCycle { 0%,13% { background: #087341; color: #fff; box-shadow: 0 0 0 13px rgba(63,156,104,.13); } 16.6%,100% { background: #fff; color: #234336; box-shadow: 0 6px 22px rgba(6,28,27,.08); } } /* Deco faint 装饰层 */ .WP_cflowIn::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 13px), radial-gradient(125% 88% at 50% 36%, rgba(0, 0, 0, 0) 46%, rgba(3, 22, 20, .40) 100%); } /* Deco 装饰层 */ .WP_cflowCard::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid rgba(8, 115, 65, .55); opacity: 0; pointer-events: none; animation: WP_cflowRing 18s linear calc(var(--i) * 3s) infinite; } @keyframes WP_cflowRing { 0% { opacity: .8; transform: scale(.98); } 5% { opacity: .45; transform: scale(1.14); } 13% { opacity: 0; transform: scale(1.38); } 100% { opacity: 0; transform: scale(1.38); } } .WP_cflow:not(.WP_in) .WP_cflowCard::after { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .WP_cflowCard::after { animation: none; opacity: 0; } } /* Flow dot 装饰层 */ .WP_cflowDot { filter: drop-shadow(0 0 6px rgba(126, 226, 176, .95)); } .WP_cflowAside { position: absolute; right: 24px; bottom: 62px; width: 32%; max-width: 390px; color: #fff; text-align: right; } .WP_cflowAside h3 { margin: 0; color: #fff; font-size: clamp(22px, 2vw, 30px); line-height: 1.3; font-weight: 500; } .WP_cflowAside p { margin: 20px 0 0; padding-top: 19px; border-top: 1px solid rgba(255,255,255,.3); color: #e0e9e5; font-size: 14px; line-height: 1.8; } .WP_cflowBtn { display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-width: 178px; margin-top: 24px; padding: 14px 28px; border-radius: 2px; background: #087341; color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; transition: background .2s; } .WP_cflowBtn:hover { background: #09834a; color: #fff; } @media (max-width: 1024px) and (min-width: 768px) { .WP_cflowCard { width: 102px; height: 102px; padding: 10px; } .WP_cflowStage { inset: 190px 38px 90px; } } @media (max-width: 767px) { .WP_cflowBg { background-position: 63% center; } .WP_cflowBg::after { background: linear-gradient(180deg,rgba(8,35,37,.48),rgba(8,35,37,.64)); } .WP_cflowIn { min-height: 0; padding: 44px 20px 40px; } .WP_cflowHead { max-width: 320px; } .WP_cflowHead h2 { font-size: 29px; } .WP_cflowStage { position: relative; inset: auto; margin: 32px 0; height: auto; } .WP_cflowPath { display: none; } .WP_cflowNodes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 18px; } .WP_cflowNode { position: relative; left: auto; top: auto; transform: none; display: flex; justify-content: center; } .WP_cflowCard { width: 128px; height: 128px; max-width: 100%; padding: 12px; gap: 7px; } .WP_cflowIco { width: 38px; height: 38px; } .WP_cflowLabel { font-size: 12px; } .WP_cflowAside { position: relative; right: auto; bottom: auto; width: 100%; max-width: none; text-align: left; } .WP_cflowAside h3 { font-size: 23px; } .WP_cflowAside p { margin-top: 15px; padding-top: 15px; font-size: 13px; } .WP_cflowBtn { margin-top: 20px; } } @media (prefers-reduced-motion: reduce) { .WP_cflowCard, .WP_cflowPath path { animation: none; } .WP_cflowBtn { transition: none; } } /* ---------- /Customization flow 定制流程 ---------- */ /* Homepage 首页编辑流 */ .WP_homeSection { padding: clamp(44px, 4.6vw, 72px) 0; } .WP_homeCases.WP_homeSection { padding-bottom: 34px; } .WP_homeSection h2 { margin: 15px 0 0; font-size: clamp(30px, 3.1vw, 48px); line-height: 1.15; letter-spacing: -.025em; color: #173e2d; } .WP_homeHeading { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; margin-bottom: 44px; } .WP_homeHeading > p { max-width: 310px; margin: 0; color: #758178; font-size: 15px; } .WP_homeLink { display: inline-flex; align-items: center; gap: 28px; padding: 12px 0; border-bottom: 1px solid #8da092; color: #164d32; font-size: 14px; font-weight: 600; text-decoration: none; } .WP_homeLink span { font-size: 22px; } .WP_homeLink:hover { color: #008450; border-color: currentColor; } /* Product 产品中心 */ .WP_prodAll { display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 24px; border-radius: 8px; background-color: #006d3d; color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color .3s; } .WP_prodAll span { font-size: 15px; line-height: 1; transition: transform .3s; } .WP_prodAll .WP_arrLong { width: 17px; height: 11px; flex: none; transition: transform .3s; } .WP_prodAll:hover { background-color: #00542f; color: #fff; } .WP_prodAll:hover span { transform: translate(3px, -3px); } .WP_prodAll:hover .WP_arrLong { transform: translateX(4px); } /* News 头部按钮 */ .WP_prodCircle { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border: 1.5px solid currentColor; border-radius: 50%; transition: background-color .3s; } .WP_prodCircle .WP_icon { width: 11px; height: 11px; transition: transform .3s; } .WP_prodGhost:hover .WP_prodCircle { background-color: rgba(255, 255, 255, .16); } .WP_prodGhost:hover .WP_prodCircle .WP_icon { transform: translate(1.5px, -1.5px); } /* Cases footer 案例尾部 */ .WP_caseCta { display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 30px; border: 1px solid #006d3d; border-radius: 50px; color: #006d3d; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color .3s, color .3s; } .WP_caseCta span { font-size: 18px; line-height: 1; } .WP_caseCta:hover { background-color: #006d3d; color: #fff; } .WP_homeAbout { background: #fff; } /* About copy 关于我们 */ .WP_homeAboutGrid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(40px, 6vw, 94px); align-items: center; max-width: 1432px; } .WP_homeAboutCopy { order: 1; } .WP_homeAboutPhoto { order: 2; } .WP_homeAboutPhoto { position: relative; aspect-ratio: 1.15; overflow: hidden; background: #e9efea; } .WP_homeAboutPhoto img { width: 100%; height: 100%; object-fit: cover; } .WP_homeAboutPhoto > span { position: absolute; bottom: 0; left: 0; background: #075e39; color: #fff; padding: 20px 26px; font-size: 11px; letter-spacing: .18em; } .WP_homeAboutCopy > p { color: #6a766d; font-size: 15px; line-height: 1.9; margin: 24px 0; } .WP_homeAboutCopy > .WP_homeLead { color: #284b37; font-size: clamp(20px, 1.7vw, 27px); line-height: 1.5; } .WP_homeValues { display: flex; flex-wrap: wrap; gap: 14px 24px; padding: 21px 0; margin-bottom: 14px; border-top: 1px solid #e1e8e2; color: #3a5e45; font-size: 13px; } .WP_homeValues span::before { content: '·'; margin-right: 10px; color: #008450; } /* gdluolan 产品中心 */ /* About eyebrow 产品中心 */ .WP_homeProducts { background: linear-gradient(180deg, #F5FAF7 0%, #F9FCFA 46%, #FFFFFF 100%); } .WP_homeProducts .WP_container { max-width: 1432px; } .WP_homeProducts .WP_homeHeading { align-items: center; margin-bottom: 40px; } .WP_homeProducts .WP_eyebrow { margin: 0 0 14px; } .WP_homeProducts h2 { margin: 0; font-size: clamp(32px, 3vw, 46px); line-height: 1.2; font-weight: 700; color: #103F30; } .WP_prodSub { margin: 12px 0 0; color: #64716B; font-size: 16.5px; line-height: 1.7; } .WP_homeAcc { display: flex; justify-content: flex-start; gap: 10px; max-width: 1432px; margin: 34px auto 0; height: 460px; overflow: hidden; padding: 0 clamp(16px, 2.6vw, 38px); } .WP_homeAccItem { position: relative; display: block; flex: 0 0 calc(19.333% - 5px); overflow: hidden; border-radius: 8px; text-decoration: none; cursor: pointer; transition: flex-basis .45s ease-in-out; } .WP_homeAccItem.WP_on { flex-basis: calc(42% - 15px); } .WP_homeAccItem > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; } .WP_homeAccItem:hover > img { transform: scale(1.03); } /* Inactive 未激活列 */ .WP_homeAccShade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .10) 0%, rgba(0, 0, 0, .20) 46%, rgba(0, 0, 0, .62) 100%); opacity: 1; transition: opacity .45s; pointer-events: none; } .WP_on .WP_homeAccShade { opacity: 0; visibility: hidden; } .WP_homeAccBase, .WP_homeAccPanel { display: flex; flex-direction: column; align-items: center; color: #fff; text-align: center; } /* px 未激活 */ .WP_homeAccBase { position: absolute; left: 0; right: 0; bottom: 50px; padding: 60px 14px 0; opacity: 1; transition: opacity .45s; } .WP_on .WP_homeAccBase { opacity: 0; visibility: hidden; pointer-events: none; } /* Active 激活 */ .WP_homeAccPanel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 254px; height: 340px; justify-content: center; padding: 0 16px; background-color: rgba(0, 109, 61, .75); opacity: 0; transition: opacity .45s; pointer-events: none; } .WP_on .WP_homeAccPanel { opacity: 1; pointer-events: auto; } .WP_homeAccIco .WP_icon, .WP_homeAccIco img { width: 50px; height: 50px; color: #fff; object-fit: contain; } .WP_homeAcc .WP_homeAccName { margin: 35px 0 0; color: #fff; font-size: clamp(20px, 2.1vw, 30px); line-height: 1.2; font-weight: 300; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .WP_homeAccPanel .WP_homeAccName { color: #fff; font-size: clamp(22px, 1.9vw, 30px); white-space: normal; overflow: visible; } .WP_homeAccEn { margin-top: 6px; font-size: clamp(13px, 1.1vw, 16px); line-height: 1.2; font-weight: 300; color: #fff; } .WP_homeAccGo { flex: none; width: 40px; height: 40px; margin-top: 35px; border: 1px solid #a5a5a5; border-radius: 50%; display: grid; place-items: center; transition: background-color .3s, border-color .3s; } .WP_homeAccGo .WP_icon { width: 16px; height: 16px; color: #fff; } .WP_homeAccPanel .WP_homeAccGo { background-color: #fff; border-color: #fff; } .WP_homeAccPanel .WP_homeAccGo .WP_icon { color: #006d3d; } /* 轮播分页 */ .WP_homeAccDots { display: none; } .WP_homeCases { background: linear-gradient(180deg, #FFFFFF 0%, #FAFCFB 34%, #F5FAF7 100%); } .WP_homeCases .WP_container { max-width: 1432px; } /* eyebrow 三版块统一 */ .WP_homeCases .WP_homeHeading, .WP_homeNews .WP_homeHeading { align-items: center; margin-bottom: 34px; } .WP_homeCases .WP_eyebrow, .WP_homeNews .WP_eyebrow { margin: 0 0 14px; } .WP_homeCases h2, .WP_homeNews h2 { margin: 0; font-size: clamp(32px, 3vw, 46px); line-height: 1.2; letter-spacing: -.01em; font-weight: 700; color: #103F30; } .WP_homeCases .WP_prodSub, .WP_homeNews .WP_prodSub { margin: 12px 0 0; } /* hover 描边按钮 */ .WP_prodGhost { height: 48px; padding: 0 24px; background-color: transparent; border: 1px solid #006d3d; color: #006d3d; } .WP_prodGhost:hover { background-color: #006d3d; color: #fff; } /* ========== Case center 案例中心（V4 非对称 Bento + 斜切遮罩） ========== */ /* Head 标题区：左标题 + 右简介与 CTA */ .WP_casesV4 { background: linear-gradient(180deg, #FFFFFF 0%, #FDFEFD 55%, #F5FAF7 100%); } .WP_casesV4 .WP_container { max-width: 1600px; } .WP_casesHead { display: flex; align-items: flex-end; justify-content: space-between; gap: 64px; margin-bottom: 30px; } .WP_casesHeadMain { min-width: 0; } .WP_casesV4 .WP_casesTitle { margin: 0; color: #0B3D2E; font-size: clamp(32px, 3vw, 46px); line-height: 1.2; font-weight: 700; letter-spacing: -.01em; } .WP_casesV4 .WP_casesTitle span { color: #0B3D2E; } .WP_casesLead { margin: 16px 0 0; max-width: 520px; color: #858C8B; font-size: 16px; line-height: 1.6; } .WP_casesHeadSide { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 40px; padding-bottom: 6px; } .WP_casesIntro { margin: 0; max-width: 330px; color: #858C8B; font-size: 13px; line-height: 1.7; } .WP_casesCta { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 26px; border: 1px solid #006B42; border-radius: 3px; background: #fff; color: #006B42; font-size: 14px; line-height: 1; font-weight: 600; text-decoration: none; transition: background-color .25s ease, color .25s ease; } .WP_casesCta:hover, .WP_casesCta:focus-visible { background-color: #006B42; color: #fff; } .WP_casesCtaArr { font-size: 15px; line-height: 1; transition: transform .25s ease; } .WP_casesCta:hover .WP_casesCtaArr { transform: translate(2px, -2px); } /* Grid 网格：Asia 左侧通高 + 右侧 2×2 */ .WP_casesGrid { display: grid; grid-template-columns: 38fr 31fr 31fr; grid-template-rows: repeat(2, clamp(272px, 20.5vw, 303px)); gap: 14px; } .WP_cCard { position: relative; display: block; overflow: hidden; min-width: 0; border-radius: 0; background-color: #FAFBFA; text-decoration: none; isolation: isolate; transition: box-shadow .3s ease; } .WP_cCard:hover { box-shadow: 0 18px 44px rgba(9, 47, 37, .09); } .WP_cCard:focus-visible { outline: 2px solid #006B42; outline-offset: 2px; } .WP_cCardFeat { grid-column: 1; grid-row: 1 / 3; } .WP_cCard-europe { grid-column: 2; grid-row: 1; } .WP_cCard-americas { grid-column: 3; grid-row: 1; } .WP_cCard-africa { grid-column: 2; grid-row: 2; } .WP_cCard-oceania { grid-column: 3; grid-row: 2; } /* Image 斜切图片 */ .WP_cImg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1), filter .3s ease; } .WP_cCard:hover .WP_cImg { transform: scale(1.04); filter: brightness(1.03); } /* 主卡白色楔形覆盖层：斜边利落、下缘白色渐隐过渡到图片 */ .WP_cCardFeat::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 45%, rgba(255, 255, 255, 0) 60%); clip-path: polygon(0 0, 27% 0, 38% 62%, 0 62%); pointer-events: none; } .WP_cSideA .WP_cImg { clip-path: polygon(0 0, 62% 0, 46% 100%, 0 100%); } .WP_cSideB .WP_cImg { clip-path: polygon(0 0, 50% 0, 58% 100%, 0 100%); } /* Shade 主卡图片底部渐变（保证引言可读） */ .WP_cShade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .45) 100%); pointer-events: none; } /* Info 文字区 */ .WP_cInfo { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; pointer-events: none; } .WP_cCardFeat .WP_cInfo { top: 0; left: 0; padding: 28px 32px; } .WP_cSide .WP_cInfo { top: 0; right: 0; bottom: 0; width: 44%; justify-content: center; padding: 16px 22px; } .WP_cSideB .WP_cInfo { width: 40%; } .WP_cNum { display: block; color: #D5DCDA; font-size: 72px; line-height: 1; font-weight: 200; } .WP_cNum::after { content: ''; display: block; width: 40px; height: 2px; margin-top: 12px; background: #BFD6CA; } .WP_cSide .WP_cNum { font-size: 64px; } .WP_cSide .WP_cNum::after { display: none; } .WP_cCardFeat .WP_cEyebrow { max-width: 110px; } .WP_cEyebrow { margin-top: 14px; color: #7C8A84; font-size: 11px; line-height: 1.5; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; } .WP_cSide .WP_cEyebrow { margin-top: 10px; } .WP_cName { margin-top: 12px; color: #0B3D2E; font-size: 58px; line-height: 1.05; font-weight: 700; letter-spacing: -.01em; } .WP_cSide .WP_cName { margin-top: 10px; font-size: 36px; line-height: 1.1; } .WP_cCountRow { display: flex; align-items: center; gap: 12px; margin-top: 14px; } .WP_cCount { color: #4A5852; font-size: 16px; line-height: 1.3; } .WP_cSide .WP_cCount { font-size: 14px; } .WP_cGo { width: 34px; height: 34px; border-radius: 50%; background-color: #006B42; color: #fff; display: grid; place-items: center; transition: transform .25s ease, background-color .25s ease; } .WP_cSide .WP_cGo { width: 34px; height: 34px; } .WP_cGo .WP_icon { width: 14px; height: 14px; } .WP_cCard:hover .WP_cGo { transform: translate(3px, -3px) scale(1.05); background-color: #00563A; } /* Quote 主卡图片上的引言 */ .WP_cQuote { position: absolute; left: 30px; bottom: 24px; z-index: 2; max-width: 46%; color: rgba(255, 255, 255, .92); font-size: 13px; line-height: 1.55; font-style: italic; text-shadow: 0 1px 12px rgba(0, 0, 0, .55); pointer-events: none; } /* Coming soon 无案例洲 */ .WP_cCardSoon { cursor: default; } .WP_cCardSoon .WP_cImg { filter: saturate(.8); opacity: .92; } .WP_cCardSoon .WP_cCount { color: #858C8B; } /* Stats 全球数据 */ .WP_casesStats { display: flex; align-items: stretch; margin-top: 30px; padding: 34px 0 26px; border-top: 1px solid #E4E9E6; } .WP_casesStat { display: flex; flex: 1; align-items: center; gap: 18px; min-width: 0; } .WP_casesStat + .WP_casesStat { padding-left: 56px; border-left: 1px solid #E4E9E6; } .WP_cStatIco { flex: none; width: 42px; height: 42px; color: #006B42; } .WP_cStatIco svg { display: block; width: 100%; height: 100%; } .WP_cStatTxt strong { display: block; color: #10241C; font-size: 28px; line-height: 1.1; font-weight: 700; letter-spacing: -.01em; } .WP_cStatTxt b { display: block; margin-top: 3px; color: #0B3D2E; font-size: 15px; line-height: 1.3; font-weight: 600; } .WP_cStatTxt b.WP_cStatSolo { margin-top: 0; color: #0B3D2E; font-size: 16px; } .WP_cStatTxt span { display: block; margin-top: 3px; color: #858C8B; font-size: 12.5px; line-height: 1.4; } /* Reduced motion 降低动效 */ @media (prefers-reduced-motion: reduce) { .WP_cImg, .WP_cGo, .WP_casesCta, .WP_cCard { transition: none; } .WP_cCard:hover .WP_cImg { transform: none; filter: none; } .WP_cCard:hover .WP_cGo { transform: none; } .WP_casesCta:hover .WP_casesCtaArr { transform: none; } } /* Mid desktop 中屏（1025-1439）：保留非对称结构，字号收紧 */ @media (max-width: 1439px) and (min-width: 1201px) { .WP_casesGrid { gap: 12px; } .WP_cCardFeat .WP_cName { font-size: 46px; } .WP_cCardFeat .WP_cNum { font-size: 60px; } .WP_cSide .WP_cName { font-size: 30px; } .WP_cSide .WP_cNum { font-size: 54px; } } /* News center 新闻中心 */ .WP_homeNews { padding-top: 34px; background: linear-gradient(180deg, #F5FAF7 0%, #FAFCFB 160px, #FFFFFF 100%); } .WP_homeNews .WP_container { max-width: 1432px; } /* All News 分类胶囊 */ .WP_newsPills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; } /* News pills in heading 新闻页签移入标题行：与 View All News 同行靠右 */ .WP_homeNews .WP_homeHeading .WP_newsPills { margin-left: auto; margin-bottom: 0; } .WP_newsPills a { display: inline-flex; align-items: center; height: 36px; padding: 0 20px; border: 1px solid #D7E5DD; border-radius: 999px; background-color: #fff; color: #4a5a50; font-size: 13.5px; line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color .3s, border-color .3s, color .3s; } .WP_newsPills a:hover { border-color: #006d3d; color: #006d3d; } .WP_newsPills a.WP_on { background-color: #006d3d; border-color: #006d3d; color: #fff; } /* Read More 四列等宽 */ .WP_newsCards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .WP_newsCard { display: flex; flex-direction: column; min-width: 0; border-radius: 10px; text-decoration: none; transition: box-shadow .3s ease; } /* Inset 文字缩进 */ .WP_newsCard .WP_newsMeta, .WP_newsCard h3, .WP_newsCard p, .WP_newsCard .WP_newsRead { padding-left: 14px; padding-right: 14px; } .WP_newsCard:hover { box-shadow: 0 14px 34px rgba(16, 63, 48, .10); } .WP_newsPic { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; background-color: #E5F3EC; } .WP_newsPic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; } .WP_newsCard:hover .WP_newsPic img { transform: scale(1.03); } /* 缺特色图 */ .WP_newsPh { position: absolute; inset: 0; display: grid; place-items: center; } .WP_newsPh img { width: 44%; height: auto; } .WP_newsMeta { display: flex; align-items: center; gap: 12px; margin-top: 16px; } .WP_newsMeta em { overflow: hidden; max-width: 60%; font-style: normal; color: #006D3D; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; } .WP_newsMeta time { flex: none; color: #8a948d; font-size: 12.5px; } .WP_newsCard h3 { margin: 10px 0 0; color: #172B22; font-size: 18px; line-height: 1.45; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color .3s; } .WP_newsCard:hover h3 { color: #006D3D; } .WP_newsCard p { margin: 8px 0 0; color: #64716B; font-size: 14px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .WP_newsRead { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px; font-style: normal; color: #006D3D; font-size: 13.5px; font-weight: 600; } .WP_newsRead .WP_arrLong { width: 15px; height: 10px; flex: none; transition: transform .3s; } .WP_newsCard:hover .WP_newsRead .WP_arrLong { transform: translateX(4px); } /* */ .WP_homeLightbox { border: 0; padding: 48px 20px 20px; max-width: min(1100px,94vw); max-height: 92vh; background: #102e23; color: #fff; } .WP_homeLightbox::backdrop { background: rgba(0,15,10,.85); } .WP_homeLightbox > img { display: block; max-width: 100%; max-height: 78vh; margin: auto; object-fit: contain; } .WP_homeLightboxClose { position: absolute; top: 0; right: 5px; width: 44px; height: 44px; background: transparent; border: 0; color: #fff; font-size: 30px; cursor: pointer; } @media(max-width: 1200px) { .WP_homeAcc { height: 420px; } .WP_homeAccPanel { width: 220px; height: 300px; } .WP_homeAccIco .WP_icon, .WP_homeAccIco img { width: 44px; height: 44px; } .WP_homeAccGo { width: 38px; height: 38px; } /* Tablet cases 平板（两列，保留斜切语言） */ .WP_casesHead { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 28px; } .WP_casesHeadSide { width: 100%; max-width: 560px; } .WP_casesGrid { grid-template-columns: 1fr 1fr; grid-template-rows: none; gap: 10px; } .WP_cCardFeat { grid-column: 1 / -1; grid-row: auto; height: 420px; } .WP_cCard-europe, .WP_cCard-americas, .WP_cCard-africa, .WP_cCard-oceania { grid-column: auto; grid-row: auto; height: 300px; } .WP_cCardFeat .WP_cInfo { padding: 22px; } .WP_casesStats { flex-wrap: wrap; gap: 20px 40px; } .WP_casesStat { flex: none; } .WP_casesStat + .WP_casesStat { padding-left: 40px; } /* Tablet news 平板 */ .WP_newsCards { grid-template-columns: 1fr 1fr; } } @media(max-width: 900px) { .WP_homeAboutGrid { grid-template-columns: 1fr 1fr; gap: 30px; } .WP_homeAcc { height: 380px; } .WP_homeAccPanel { width: 190px; height: 260px; } .WP_homeAccIco .WP_icon, .WP_homeAccIco img { width: 38px; height: 38px; } .WP_homeAccName { font-size: 22px; } .WP_homeAccEn { font-size: 14px; } .WP_homeAccGo { width: 34px; height: 34px; margin-top: 28px; } .WP_homeAccBase { bottom: 40px; padding-top: 40px; } } @media(max-width: 600px) { .WP_homeSection { padding: 40px 0; } /* Mobile 手机端标题 */ .WP_homeHeading, .WP_homeProducts .WP_homeHeading, .WP_homeCases .WP_homeHeading, .WP_homeNews .WP_homeHeading { align-items: flex-start; flex-direction: column; gap: 15px; margin-bottom: 28px; } /* Mobile 手机端按钮 */ .WP_prodAll { height: 42px; padding: 0 22px; font-size: 13px; border-radius: 5px; } .WP_prodAll span { font-size: 16px; } .WP_caseCta { width: 100%; justify-content: center; height: 44px; font-size: 13px; } .WP_homeAboutGrid { grid-template-columns: 1fr; gap: 30px; } .WP_homeAboutPhoto { aspect-ratio: 4/3; } /* Mobile 手机端 */ .WP_homeAcc { flex-direction: row; justify-content: flex-start; height: auto; margin-top: 30px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0; } .WP_homeAcc::-webkit-scrollbar { display: none; } .WP_homeAccItem, .WP_homeAccItem.WP_on { flex: 0 0 100%; height: 450px; scroll-snap-align: center; } .WP_homeAccBase { bottom: 50px; padding-top: 35px; } .WP_homeAccIco .WP_icon, .WP_homeAccIco img { width: 35px; height: 35px; } .WP_homeAccName { margin-top: 25px; font-size: 22px; font-weight: 400; } .WP_homeAccEn { font-size: 14px; } .WP_homeAccGo { width: 30px; height: 30px; margin-top: 22px; } .WP_homeAccPanel { width: 180px; height: 225px; padding: 0 12px; } .WP_homeAccPanel .WP_homeAccName { margin-top: 25px; font-size: 22px; } .WP_homeAccDots { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 22px; padding-bottom: 6px; } .WP_homeAccDot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 5px; background-color: #8fa396; cursor: pointer; transition: width .3s, background-color .3s; } .WP_homeAccDot.WP_on { width: 22px; background-color: #006d3d; } /* Mobile cases 手机端（纵向案例流） */ .WP_casesGrid { grid-template-columns: 1fr; } .WP_cCardFeat { height: 460px; } .WP_cCard-europe, .WP_cCard-americas, .WP_cCard-africa, .WP_cCard-oceania { height: 320px; } .WP_casesLead { font-size: 14px; } .WP_casesIntro { font-size: 14px; } .WP_casesCta { width: 100%; justify-content: center; height: 44px; font-size: 13.5px; } .WP_cCardFeat .WP_cInfo { padding: 18px; } .WP_cInfo { padding: 16px; } .WP_cName { margin-top: 10px; font-size: 40px; } .WP_cSide .WP_cName { font-size: 28px; } .WP_cNum { font-size: 52px; } .WP_cNum::after { margin-top: 8px; } .WP_cSide .WP_cNum { font-size: 44px; top: 12px; right: 16px; } .WP_cQuote { left: 18px; bottom: 16px; max-width: 72%; font-size: 12px; } .WP_casesStats { flex-direction: column; align-items: flex-start; gap: 22px; padding: 26px 0; } .WP_casesStat + .WP_casesStat { padding-left: 0; border-left: 0; } /* Mobile news 新闻手机端 */ .WP_newsPills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 22px; } /* Pills back under the button 手机端页签排到按钮下方（标题行已纵向堆叠） */ .WP_homeNews .WP_homeHeading .WP_newsPills { order: 2; margin-bottom: 0; } .WP_newsPills::-webkit-scrollbar { display: none; } .WP_newsPills a { height: 34px; padding: 0 16px; font-size: 13px; } .WP_newsCards { display: flex; flex-direction: column; gap: 10px; } .WP_homeAccDots[data-home-news-dots] { display: none; } /* 首条大图卡 */ .WP_newsLead { order: -1; position: relative; border-radius: 10px; overflow: hidden; } .WP_newsLead .WP_newsPic { aspect-ratio: 16 / 9; } .WP_newsLead .WP_newsPic::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 18, 13, 0) 42%, rgba(8, 18, 13, .72) 100%); } .WP_newsLead .WP_newsMeta { position: absolute; left: 0; right: 0; bottom: 66px; z-index: 1; margin: 0; padding: 0 16px; } .WP_newsLead .WP_newsMeta em { color: #CFF0DF; } .WP_newsLead .WP_newsMeta time { color: #fff; } .WP_newsLead h3 { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 1; margin: 0 16px; color: #fff; font-size: 16px; line-height: 1.45; -webkit-line-clamp: 2; text-shadow: 0 1px 6px rgba(0, 0, 0, .45); } .WP_newsLead p, .WP_newsLead .WP_newsRead { display: none; } /* not 其余三条 */ .WP_newsCard:not(.WP_newsLead) { padding: 14px 16px; background-color: #fff; border: 1px solid #E3EDE7; border-radius: 8px; } .WP_newsCard:not(.WP_newsLead) .WP_newsPic { display: none; } .WP_newsCard:not(.WP_newsLead) .WP_newsMeta { margin-top: 0; } .WP_newsCard:not(.WP_newsLead) .WP_newsMeta em { display: none; } .WP_newsCard:not(.WP_newsLead) h3 { margin-top: 6px; font-size: 15.5px; line-height: 1.5; -webkit-line-clamp: 2; } .WP_newsCard:not(.WP_newsLead) p { display: none; } .WP_newsCard:not(.WP_newsLead) .WP_newsRead { padding-top: 10px; } } @media(prefers-reduced-motion:reduce) { .WP_homeSection img { transition: none; } } /* Reveal 滚动显现 */ .WP_rvJs [data-rv] { opacity: 0; transition: opacity 1s ease, transform 1s ease; } .WP_rvJs [data-rv="fade-up"] { transform: translate3d(0, 100px, 0); } .WP_rvJs [data-rv="fade-right"] { transform: translate3d(-100px, 0, 0); } .WP_rvJs [data-rv="fade-left"] { transform: translate3d(100px, 0, 0); } .WP_rvJs [data-rv].WP_rvIn { opacity: 1; transform: translate3d(0, 0, 0); } @media(max-width: 600px) { .WP_rvJs [data-rv="fade-up"] { transform: translate3d(0, 48px, 0); } .WP_rvJs [data-rv="fade-right"] { transform: translate3d(-40px, 0, 0); } .WP_rvJs [data-rv="fade-left"] { transform: translate3d(40px, 0, 0); } } @media(prefers-reduced-motion:reduce) { .WP_rvJs [data-rv] { opacity: 1; transform: none; transition: none; } } /* Home side 首页两侧 */ .systin-front .WP_container { padding-left: clamp(16px, 2.6vw, 38px); padding-right: clamp(16px, 2.6vw, 38px); } /* Rebuild 三屏重构 */ .WP_brand, .WP_process, .WP_company { --brand: #006D3D; --brandDeep: #124B36; --titleGreen: #103F30; --mint: #D9F0E6; --mist: #F5FAF7; --bodyGray: #64716B; --procDark: #072A2C; --aboutBg: #F7FBF9; } /* English 英文装饰 */ .WP_eyebrow { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--brand, #006D3D); font-size: 12px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; } .WP_eyebrow span { width: 26px; height: 2px; background: var(--brand, #006D3D); flex: none; } .WP_eyebrowLight { color: #9FD8C0; } .WP_eyebrowLight span { background: #9FD8C0; } /* —— Wave transition (shared by two screens; the main wave fills the next background, the mint highlight is offset) 波浪过渡 —— */ .WP_wave { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; pointer-events: none; z-index: 2; } .WP_wave img { display: block; width: 100%; height: clamp(60px, 7vw, 100px); } .WP_waveHi { fill: rgba(217, 240, 230, .55); } .WP_waveMain { fill: var(--procDark); stroke: rgba(255, 255, 255, .5); stroke-width: 1.5; } .WP_wave2 img { height: clamp(56px, 6.5vw, 92px); } .WP_waveHi2 { fill: rgba(217, 240, 230, .35); } .WP_waveMain2 { fill: var(--aboutBg); stroke: rgba(255, 255, 255, .65); stroke-width: 1.5; } /* slide 第一屏 */ .WP_brand { position: relative; overflow: hidden; background: var(--mist); } /* Background 背景层 */ .WP_brandSlideBg { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s linear .8s; background-position: right center; background-size: cover; background-repeat: no-repeat; } .WP_brandSlideBg.WP_active { opacity: 1; visibility: visible; transition: opacity .8s ease, visibility 0s; } .WP_bgBrand { background-image: url(/wp-content/uploads/about/brand-hero-1.webp); background-image: image-set(url("/wp-content/uploads/about/brand-hero-1.avif") type('image/avif'),url("/wp-content/uploads/about/brand-hero-1.webp") type('image/webp'));} .WP_bgLift { background-image: url(/wp-content/uploads/about/lift-window.webp); background-image: image-set(url("/wp-content/uploads/about/lift-window.avif") type('image/avif'),url("/wp-content/uploads/about/lift-window.webp") type('image/webp'));} /* Band 斜向装饰带 */ .WP_bgBrand::before { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(217, 240, 230, 0) 20%, rgba(217, 240, 230, .5) 33%, rgba(217, 240, 230, 0) 46%); } .WP_bgBrand::after { content: ''; position: absolute; inset: 0; background: linear-gradient(93deg, rgba(245, 250, 247, .94) 0%, rgba(245, 250, 247, .72) 30%, rgba(245, 250, 247, .26) 54%, rgba(245, 250, 247, 0) 70%); } .WP_bgLift::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(247, 252, 249, .98) 0%, rgba(247, 252, 249, .82) 26%, rgba(247, 252, 249, .48) 42%, rgba(247, 252, 249, .14) 58%, rgba(247, 252, 249, 0) 70%); } .WP_brand .WP_container { position: relative; z-index: 1; } /* grid slide 文案舞台 */ .WP_brandStage { display: grid; } .WP_brandStage .WP_brandInner { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s linear .8s; } .WP_brandStage .WP_brandInner.WP_active { opacity: 1; visibility: visible; transition: opacity .8s ease, visibility 0s; } .WP_brandInner { max-width: 520px; padding: clamp(64px, 6.5vw, 92px) 0 clamp(100px, 10vw, 150px); } .WP_brandInner h1 { margin: 18px 0 0; color: var(--titleGreen); font-size: clamp(34px, 3.6vw, 50px); line-height: 1.22; font-weight: 600; letter-spacing: -.01em; } .WP_brandText { margin: 22px 0 0; color: var(--bodyGray); font-size: 15px; line-height: 1.8; } /* Slide 智能提升窗 */ /* systin-front 标题色第一 */ .WP_brandStage .WP_liftTitle { color: var(--titleGreen); } .WP_liftTitle { margin: 18px 0 0; max-width: 700px; color: var(--titleGreen); font-size: clamp(34px, 3.4vw, 48px); line-height: 1.18; font-weight: 700; letter-spacing: -.01em; } .WP_liftTitle span { display: block; } .WP_liftText { max-width: 600px; font-size: 18px; } .WP_liftStats .WP_liftName { display: block; color: var(--titleGreen); font-size: 18px; line-height: 1.2; font-weight: 700; } /* Advantages 优势约束 */ .WP_liftStats .WP_stat { flex: 1 1 0; min-width: 0; gap: 9px; padding: 0 12px; } .WP_liftStats .WP_stat:first-child { padding-left: 0; } .WP_liftStats .WP_statLabel { white-space: normal; line-height: 1.45; font-size: 12px; } /* Brand stats 品牌数据 */ .WP_brandStats { display: flex; margin-top: 36px; } .WP_brandStats .WP_stat { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 11px; padding: 0 26px; background: none; border-radius: 0; box-shadow: none; } .WP_brandStats .WP_stat:first-child { padding-left: 0; } .WP_brandStats .WP_stat + .WP_stat { border-left: 1px solid rgba(0, 109, 61, .22); } .WP_statIco { width: 24px; height: 24px; color: var(--brand); flex: none; } .WP_statNum { display: block; color: var(--titleGreen); font-size: 26px; line-height: 1.1; font-weight: 700; } .WP_statNum em { font-style: normal; font-size: 17px; margin-left: 1px; } .WP_statLabel { display: block; margin-top: 4px; color: var(--bodyGray); font-size: 12px; white-space: nowrap; } /* WhatsApp 实心按钮 */ .WP_brandWa { display: inline-flex; align-items: center; gap: 12px; margin-top: 40px; height: 50px; padding: 0 26px; border-radius: 10px; background-color: var(--brand); color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; transition: background-color .3s; } .WP_brandWa .WP_icon { font-size: 20px; background-color: #fff; } .WP_brandWaArr { width: 18px; height: 10px; transition: transform .3s; } .WP_brandWa:hover { background-color: #00552F; color: #fff; } .WP_brandWa:hover .WP_brandWaArr { transform: translateX(4px); } .WP_liftIco { width: 20px; height: 20px; flex: none; } /* Carousel 轮播控制 */ .WP_brandNav { position: absolute; left: 0; right: 0; bottom: clamp(20px, 3vw, 38px); z-index: 3; display: flex; align-items: center; justify-content: center; gap: 18px; } .WP_brandArrow { width: 34px; height: 34px; padding: 0; border: 1px solid rgba(0, 109, 61, .35); border-radius: 50%; background-color: rgba(255, 255, 255, .75); color: var(--brand); font-size: 19px; line-height: 1; cursor: pointer; transition: background-color .3s, color .3s; } .WP_brandArrow:hover { background-color: var(--brand); border-color: var(--brand); color: #fff; } .WP_brandDots { display: flex; align-items: center; gap: 9px; } .WP_brandDots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 5px; background-color: rgba(0, 109, 61, .3); cursor: pointer; transition: width .3s, background-color .3s; } .WP_brandDots button.WP_active { width: 24px; background-color: var(--brand); } /* Screen 第二屏 */ .WP_process { position: relative; overflow: hidden; background-color: var(--procDark); padding: clamp(70px, 7.5vw, 110px) 0 clamp(120px, 12vw, 175px); } .WP_processBg { position: absolute; inset: 0; background: url(/wp-content/uploads/about/customization-process.webp) no-repeat center; background-size: cover; background-image: image-set(url("/wp-content/uploads/about/customization-process.avif") type('image/avif'),url("/wp-content/uploads/about/customization-process.webp") type('image/webp'));} .WP_processBg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 38, 39, .82) 0%, rgba(5, 38, 39, .58) 42%, rgba(4, 43, 55, .26) 100%); } .WP_process .WP_container { position: relative; z-index: 1; } .WP_processHead h2 { margin: 16px 0 0; color: #fff; font-size: clamp(34px, 3.4vw, 48px); line-height: 1.2; font-weight: 600; } .WP_processSub { margin: 14px 0 0; color: rgba(255, 255, 255, .85); font-size: 15px; } .WP_processSteps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 34px; margin: 56px 0 0; padding: 0; list-style: none; } .WP_processStep { position: relative; text-align: center; } /* White 白色圆形 */ .WP_processRing { display: grid; place-items: center; width: 88px; height: 88px; margin: 0 auto; border-radius: 50%; background-color: #fff; color: var(--brand); box-shadow: 0 0 0 6px rgba(217, 240, 230, .22), 0 10px 24px rgba(0, 0, 0, .25); transition: transform .3s, box-shadow .3s; } .WP_processRing .WP_processIco { display: block; width: 42px; height: 42px; object-fit: contain; } .WP_processStep:hover .WP_processRing { transform: translateY(-4px); box-shadow: 0 0 0 8px rgba(0, 109, 61, .4), 0 14px 28px rgba(0, 0, 0, .3); } .WP_processNum { display: block; margin-top: 16px; color: #9FD8C0; font-size: 12px; font-weight: 700; letter-spacing: .18em; } /* Title 标题统一单行 + 说明统一两行高度 */ .WP_processStep h3 { margin: 8px 0 0; min-height: 22px; color: #fff; font-size: 15px; line-height: 1.45; font-weight: 600; } .WP_processStep p { margin: 8px 0 0; min-height: 41px; color: rgba(255, 255, 255, .72); font-size: 12px; line-height: 1.7; } /* Thin arrows 节点间细 */ .WP_processStep:not(:last-child)::after { content: ''; position: absolute; top: 35px; right: -27px; width: 18px; height: 18px; background-color: #9FD8C0; -webkit-mask: url("../svg/process-step-after.svg") center / contain no-repeat; mask: url("../svg/process-step-after.svg") center / contain no-repeat; } /* Auto cycle 自动轮播高亮（JS 加 .WP_on，01→06 循环） */ .WP_processNum { transition: color .3s; } .WP_processStep.WP_on .WP_processRing { transform: translateY(-6px) scale(1.05); box-shadow: 0 0 0 8px rgba(0, 109, 61, .45), 0 14px 30px rgba(0, 0, 0, .35); } .WP_processStep.WP_on .WP_processNum { color: #fff; } .WP_processStep.WP_on h3 { color: #CFF0DF; } .WP_processStep.WP_on:not(:last-child)::after { background-color: #fff; animation: WP_procArrow .8s ease-in-out infinite alternate; } @keyframes WP_procArrow { from { transform: translateX(0); opacity: .55; } to { transform: translateX(5px); opacity: 1; } } /* Screen 第三屏 */ .WP_company { position: relative; background-color: var(--aboutBg); overflow: hidden; } .WP_companyGrid { display: grid; grid-template-columns: 43% 57%; align-items: stretch; min-height: clamp(540px, 42vw, 640px); max-width: 1512px; margin: 0 auto; } .WP_companyCopy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(56px, 6vw, 90px) clamp(28px, 4vw, 72px) clamp(56px, 6vw, 90px) clamp(20px, 4vw, 64px); } .WP_companyCopy h2 { margin: 16px 0 0; color: var(--titleGreen); font-size: clamp(32px, 3vw, 46px); line-height: 1.2; font-weight: 700; } .WP_companyLead { margin: 14px 0 0; color: var(--brandDeep); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; font-weight: 600; } .WP_companyText { margin: 18px 0 0; max-width: 560px; color: var(--bodyGray); font-size: 15px; line-height: 1.8; } /* Divider 分割线 */ .WP_companyVals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; margin-top: 30px; padding-top: 26px; border-top: 1px solid #DCE8E0; color: var(--titleGreen); font-size: 13.5px; font-weight: 600; } /* flex 圆点 */ .WP_companyVals span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background-color: var(--brand); flex: none; } /* CTA hover 文字链接 */ .WP_companyCta { display: inline-flex; align-items: center; gap: 10px; margin-top: 34px; padding-bottom: 9px; border-bottom: 2px solid var(--brand); color: var(--titleGreen); font-size: 15px; font-weight: 700; text-decoration: none; } .WP_companyCta .WP_icon { width: 13px; height: 13px; color: var(--brand); transition: transform .3s; } .WP_companyCta:hover { color: var(--brand); } .WP_companyCta:hover .WP_icon { transform: translate(3px, -3px); } /* SYSTIN LOGO 右侧厂景 */ .WP_companyMedia { position: relative; background: url(/wp-content/uploads/about/about-factory.webp) no-repeat 80% 32%; background-size: cover; background-image: image-set(url("/wp-content/uploads/about/about-factory.avif") type('image/avif'),url("/wp-content/uploads/about/about-factory.webp") type('image/webp'));} .WP_companyMedia::before { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, var(--aboutBg) 0%, rgba(247, 251, 249, .6) 12%, rgba(247, 251, 249, 0) 34%); } .WP_companyMedia::after { content: ''; position: absolute; top: 0; bottom: 0; left: 5%; width: 110px; background: linear-gradient(115deg, rgba(0, 109, 61, 0) 0%, rgba(0, 109, 61, .15) 50%, rgba(0, 109, 61, 0) 100%); transform: skewX(-14deg); } .WP_companyPanel { position: absolute; left: clamp(16px, 3vw, 48px); bottom: clamp(28px, 4vw, 56px); z-index: 2; max-width: 250px; padding: 18px 20px 26px; background-color: #0B4A33; color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.8; } .WP_companyPanel::after { content: ''; position: absolute; left: 20px; right: 20px; bottom: 12px; height: 7px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .5) 0 12px, transparent 12px 20px); border-radius: 4px; } /* Product 底部柔和 */ .WP_company::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(80px, 8vw, 120px); background: linear-gradient(180deg, rgba(245, 250, 247, 0) 0%, #F5FAF7 100%); pointer-events: none; z-index: 1; } /* Keyword icons 关键词 */ .WP_companyVals span { display: flex; align-items: center; gap: 9px; } .WP_valIco { width: 18px; height: 18px; flex: none; color: var(--brand); } /* —— Responsive 响应式 —— */ @media(max-width: 1199px) { .WP_processSteps { grid-template-columns: repeat(3, 1fr); row-gap: 40px; } .WP_processStep:not(:last-child)::after { display: none; } } @media(max-width: 767px) { .WP_bgBrand { background-position: 74% center; } .WP_bgLift { background-position: 72% center; } .WP_bgBrand::after { background: linear-gradient(93deg, rgba(245, 250, 247, .92) 0%, rgba(245, 250, 247, .8) 55%, rgba(245, 250, 247, .48) 100%); } .WP_bgLift::after { background: linear-gradient(90deg, rgba(247, 252, 249, .96) 0%, rgba(247, 252, 249, .82) 50%, rgba(247, 252, 249, .5) 100%); } .WP_brandInner { max-width: none; padding: 60px 0 100px; } .WP_liftTitle { font-size: 32px; } .WP_liftText { font-size: 15px; } .WP_brandStats { margin-top: 30px; } .WP_brandStats .WP_stat { padding: 0 10px; gap: 8px; } .WP_statIco { width: 19px; height: 19px; } .WP_statNum { font-size: 20px; } .WP_statNum em { font-size: 13px; } .WP_statLabel { font-size: 10px; letter-spacing: 0; } .WP_wave img { height: 46px; } .WP_wave2 img { height: 42px; } .WP_process { padding: 64px 0 110px; } .WP_processSteps { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; margin-top: 38px; } .WP_processRing { width: 72px; height: 72px; box-shadow: 0 0 0 5px rgba(217, 240, 230, .22), 0 8px 18px rgba(0, 0, 0, .25); } .WP_processRing .WP_processIco { width: 34px; height: 34px; } .WP_companyGrid { grid-template-columns: 1fr; min-height: 0; } .WP_companyCopy { padding: 56px 20px 42px; } .WP_companyVals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; font-size: 12.5px; } .WP_companyVals span { gap: 7px; line-height: 1.3; } .WP_companyVals span::before { width: 5px; height: 5px; } .WP_companyVals .WP_valIco { width: 16px; height: 16px; } .WP_companyMedia { min-height: 0; aspect-ratio: 16 / 10; background-position: 86% 30%; } .WP_companyMedia::after { display: none; } .WP_companyPanel { display: none; } } @media(prefers-reduced-motion: reduce) { .WP_processRing, .WP_brandWaArr, .WP_companyCta .WP_icon { transition: none; } } /* ========== Case center 手机端（≤767：Asia 大卡 + 2×2 斜切矩阵 + 三栏统计，参考稿复刻） ========== */ @media (max-width: 767px) { .WP_casesGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 8px; } .WP_cCard { border-radius: 8px; transition: box-shadow .3s ease, transform .18s ease; } .WP_cCard:active { transform: scale(.985); } .WP_cCardFeat { grid-column: 1 / -1; grid-row: auto; height: 280px; } .WP_cCard-europe, .WP_cCard-americas, .WP_cCard-africa, .WP_cCard-oceania { grid-column: auto; grid-row: auto; height: 188px; } /* Asia 主卡：白色楔形下移，渐隐区间对齐文字高度（斜边利落、下缘柔和过渡） */ .WP_cCardFeat::before { background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 74%, rgba(255, 255, 255, 0) 88%); clip-path: polygon(0 0, 26% 0, 40% 88%, 0 88%); } .WP_cCardFeat .WP_cInfo { padding: 14px 18px; } .WP_cCardFeat .WP_cNum { font-size: 58px; } .WP_cNum::after { width: 32px; margin-top: 8px; } .WP_cCardFeat .WP_cEyebrow { margin-top: 10px; font-size: 9px; letter-spacing: 2.5px; max-width: 82px; } .WP_cCardFeat .WP_cName { margin-top: 6px; font-size: 34px; line-height: 1.1; letter-spacing: -.02em; } .WP_cCardFeat .WP_cCountRow { margin-top: 8px; } .WP_cCardFeat .WP_cCount { font-size: 13px; } .WP_cCardFeat .WP_cGo { width: 32px; height: 32px; } .WP_cQuote { left: 18px; bottom: 12px; max-width: 240px; font-size: 10px; line-height: 1.45; } /* 四小卡：图片整卡铺满 + 半透明白文案三角（无模糊无投影） 上排（Europe / North America）斜切朝左，下排（Africa / Oceania）镜像朝右 */ .WP_cSide .WP_cImg { clip-path: none; } .WP_cSide::before { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(255, 255, 255, .85); pointer-events: none; } .WP_cCard-europe::before { clip-path: polygon(0 42%, 100% 64%, 100% 100%, 0 100%); } .WP_cCard-americas::before { clip-path: polygon(0 26%, 100% 38%, 100% 100%, 0 100%); } .WP_cCard-africa::before, .WP_cCard-oceania::before { clip-path: polygon(0 64%, 100% 42%, 100% 100%, 0 100%); } .WP_cCard-europe, .WP_cCard-americas, .WP_cCard-africa, .WP_cCard-oceania { height: 200px; } .WP_cSide .WP_cInfo { display: grid; grid-template-columns: auto auto; align-items: end; justify-content: start; top: auto; left: 0; right: 0; bottom: 0; width: auto; padding: 0 13px 11px; } /* 下排：白三角在右下，文字栈镜像到右下 */ .WP_cCard-africa .WP_cInfo, .WP_cCard-oceania .WP_cInfo { justify-content: end; text-align: right; } .WP_cSide .WP_cCountRow { display: contents; } .WP_cSide .WP_cNum { grid-column: 1 / -1; font-size: 34px; color: #8F9C96; font-weight: 300; } .WP_cSide .WP_cEyebrow { grid-column: 1 / -1; margin-top: 4px; font-size: 8px; letter-spacing: 2px; } .WP_cSide .WP_cName { grid-column: 1; margin-top: 3px; font-size: 20px; line-height: 1.15; } .WP_cCard-americas .WP_cName { font-size: 18px; } .WP_cSide .WP_cGo { grid-column: 2; grid-row: 3; margin-left: 10px; align-self: center; width: 24px; height: 24px; } .WP_cSide .WP_cGo .WP_icon { width: 11px; height: 11px; } .WP_cSide .WP_cCount { grid-column: 1 / -1; margin-top: 4px; font-size: 10.5px; } /* 头部：隐藏长简介段（参考稿手机端无此段），按钮紧凑左对齐 */ .WP_casesIntro { display: none; } /* 三栏统计（横排三栏 + 竖分隔线，数据仍为真实计数） */ .WP_casesStats { flex-direction: row; flex-wrap: wrap; margin-top: 20px; padding: 18px 0 20px; } .WP_casesStat { flex: 1 1 0; gap: 9px; padding-right: 8px; } .WP_casesStat + .WP_casesStat { padding-left: 12px; border-left: 1px solid #E4E9E6; } .WP_cStatIco { width: 20px; height: 20px; } .WP_cStatTxt strong { font-size: 25px; line-height: 1.05; } .WP_cStatTxt b { margin-top: 2px; font-size: 10px; } .WP_cStatTxt b.WP_cStatSolo { font-size: 10.5px; line-height: 1.35; } .WP_cStatTxt span { margin-top: 2px; font-size: 9px; } /* 头部按钮：紧凑左对齐（参考稿约 210px 宽） */ .WP_casesCta { width: auto; align-self: flex-start; height: 40px; padding: 0 20px; font-size: 13px; } } /* 小屏（<360）：统计第三栏换行，避免拥挤 */ @media (max-width: 359px) { .WP_casesStat { flex: 1 1 100%; padding-right: 0; } .WP_casesStat + .WP_casesStat { padding-left: 0; border-left: 0; } } /* Phone 手机端背景降级：同构图 800w 变体，省 3/4 字节（桌面仍用原图） */ @media (max-width: 767px) { .WP_bgBrand { background-image: url(/wp-content/uploads/about/brand-hero-1-800x298.webp); background-image: image-set(url("/wp-content/uploads/about/brand-hero-1-800x298.avif") type('image/avif'),url("/wp-content/uploads/about/brand-hero-1-800x298.webp") type('image/webp'));} .WP_bgLift { background-image: url(/wp-content/uploads/about/lift-window-800x333.webp); background-image: image-set(url("/wp-content/uploads/about/lift-window-800x333.avif") type('image/avif'),url("/wp-content/uploads/about/lift-window-800x333.webp") type('image/webp'));} .WP_processBg { background-image: url(/wp-content/uploads/about/customization-process-800x298.webp); background-image: image-set(url("/wp-content/uploads/about/customization-process-800x298.avif") type('image/avif'),url("/wp-content/uploads/about/customization-process-800x298.webp") type('image/webp'));} .WP_companyMedia { background-image: url(/wp-content/uploads/about/about-factory-800x298.webp); background-image: image-set(url("/wp-content/uploads/about/about-factory-800x298.avif") type('image/avif'),url("/wp-content/uploads/about/about-factory-800x298.webp") type('image/webp'));} } /* Desktop tiers 桌面背景按视口分档：1280w / 1600w / 原图，避免小屏吃 1920w */ @media (min-width: 768px) and (max-width: 1439px) { .WP_bgBrand { background-image: url(/wp-content/uploads/about/brand-hero-1-1280x476.webp); background-image: image-set(url("/wp-content/uploads/about/brand-hero-1-1280x476.avif") type('image/avif'),url("/wp-content/uploads/about/brand-hero-1-1280x476.webp") type('image/webp'));} .WP_bgLift { background-image: url(/wp-content/uploads/about/lift-window-1280x533.webp); background-image: image-set(url("/wp-content/uploads/about/lift-window-1280x533.avif") type('image/avif'),url("/wp-content/uploads/about/lift-window-1280x533.webp") type('image/webp'));} .WP_processBg { background-image: url(/wp-content/uploads/about/customization-process-1280x476.webp); background-image: image-set(url("/wp-content/uploads/about/customization-process-1280x476.avif") type('image/avif'),url("/wp-content/uploads/about/customization-process-1280x476.webp") type('image/webp'));} .WP_companyMedia { background-image: url(/wp-content/uploads/about/about-factory-1280x476.webp); background-image: image-set(url("/wp-content/uploads/about/about-factory-1280x476.avif") type('image/avif'),url("/wp-content/uploads/about/about-factory-1280x476.webp") type('image/webp'));} } @media (min-width: 1440px) and (max-width: 1679px) { .WP_bgBrand { background-image: url(/wp-content/uploads/about/brand-hero-1-1600x595.webp); background-image: image-set(url("/wp-content/uploads/about/brand-hero-1-1600x595.avif") type('image/avif'),url("/wp-content/uploads/about/brand-hero-1-1600x595.webp") type('image/webp'));} .WP_bgLift { background-image: url(/wp-content/uploads/about/lift-window-1600x666.webp); background-image: image-set(url("/wp-content/uploads/about/lift-window-1600x666.avif") type('image/avif'),url("/wp-content/uploads/about/lift-window-1600x666.webp") type('image/webp'));} .WP_processBg { background-image: url(/wp-content/uploads/about/customization-process-1600x595.webp); background-image: image-set(url("/wp-content/uploads/about/customization-process-1600x595.avif") type('image/avif'),url("/wp-content/uploads/about/customization-process-1600x595.webp") type('image/webp'));} .WP_companyMedia { background-image: url(/wp-content/uploads/about/about-factory-1600x595.webp); background-image: image-set(url("/wp-content/uploads/about/about-factory-1600x595.avif") type('image/avif'),url("/wp-content/uploads/about/about-factory-1600x595.webp") type('image/webp'));} } /* ===================== v2-pages.css 内页 v2 Pages v2 ===================== */ /* v2-pages.css 关于我们 */ /* Brand tokens 品牌变量 */ :root { --brand-primary: #006d3d; --brand-dark: #003d2b; --text-secondary: #38554a; --text-muted: #829b8d; } .vp { --vp-gold: #00532f; --vp-gold-2: #004d2b; --vp-head: #3d3d3d; --vp-text: #444444; --vp-soft: #F5F5F5; --vp-overlay: #1e293b; --vp-font: 'Titillium Web', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-family: var(--vp-font); color: var(--vp-text); overflow-x: hidden; overflow-x: clip; /* clip position 保证 */ } .vp h1, .vp h2, .vp h3, .vp p, .vp a, .vp input, .vp textarea, .vp button { font-family: var(--vp-font); } /* ---------- About Hero 关于页横幅 ---------- */ .WP_aboutHero { /* Tokens 品牌变量 */ --brand-primary: #006d3d; --brand-dark: #003d2b; --text-secondary: #38554a; --text-muted: #829b8d; --hero-height: 445px; /* Same natural 所有页面 */ position: relative; display: flex; align-items: center; min-height: var(--hero-height); overflow: hidden; background: #e8eef2; } .WP_aboutHeroBg { position: absolute; inset: 0; background-size: cover; background-position: center center; } /* Phone-only 手机端专用 */ .WP_aboutHeroBgM { display: none; } /* Faint white 极淡白色 */ .WP_aboutHero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .42) 44%, rgba(255, 255, 255, 0) 70%); } .WP_aboutHeroIn { position: relative; z-index: 2; width: min(1440px, 92vw); margin: 0 auto; padding: 40px 16px 60px; /* Leave room 底部留出 */ } .WP_aboutHeroCopy { max-width: 650px; } .WP_aboutEyebrow { margin: 0; color: var(--text-muted); font-family: var(--font-head); font-size: 16px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; } /* 眉题下方绿色横条（对齐案例页 .WP_cbEyebrow::after） */ .WP_aboutEyebrow::after { content: ''; display: block; width: 50px; height: 2px; background: #006d3d; margin-top: 16px; } .WP_aboutHeroTitle { margin: 12px 0 0; color: var(--brand-dark); font-family: var(--font-head); font-size: 64px; font-weight: 700; line-height: 1.12; } .WP_aboutHeroSub { margin: 8px 0 0; color: var(--text-secondary); font-size: 21px; font-weight: 400; line-height: 1.45; } .WP_aboutHeroIntro { margin: 14px 0 0; color: #52675d; font-size: 15px; line-height: 1.6; } /* Icons 品牌图标 */ .WP_aboutFeats { list-style: none; margin: 30px 0 0; padding: 0; display: flex; align-items: stretch; } .WP_aboutFeats li { flex: 0 0 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 4px 0; text-align: left; } .WP_aboutFeats li + li { border-left: 1px solid rgba(0, 61, 43, .16); margin-left: 32px; padding-left: 32px; } .WP_aboutFeatIc { flex: 0 0 auto; width: 68px; height: 68px; border-radius: 50%; background: rgba(255, 255, 255, .74); color: var(--brand-primary); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0, 61, 43, .08); } .WP_aboutFeatIc .WP_icon { width: 38px; height: 38px; display: block; } .WP_aboutFeatTx { color: var(--text-secondary); font-size: 14px; font-weight: 600; line-height: 1.35; } /* 入场淡入Fade in once on entering the viewport. */ .WP_aboutHeroCopy > * { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; } .WP_aboutHeroCopy > :nth-child(2) { transition-delay: .08s; } .WP_aboutHeroCopy > :nth-child(3) { transition-delay: .16s; } .WP_aboutHeroCopy > :nth-child(4) { transition-delay: .24s; } .WP_aboutHeroCopy .WP_aboutFeats li { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; } .WP_aboutHeroCopy .WP_aboutFeats li:nth-child(1) { transition-delay: .38s; } .WP_aboutHeroCopy .WP_aboutFeats li:nth-child(2) { transition-delay: .46s; } .WP_aboutHeroCopy .WP_aboutFeats li:nth-child(3) { transition-delay: .54s; } .WP_aboutHeroCopy .WP_aboutFeats li:nth-child(4) { transition-delay: .62s; } .WP_aboutHeroCopy.WP_in > *, .WP_aboutHeroCopy.WP_in .WP_aboutFeats li { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .WP_aboutHeroCopy > *, .WP_aboutHeroCopy .WP_aboutFeats li { opacity: 1; transform: none; transition: none; } } @media (max-width: 1024px) { .WP_aboutHeroTitle { font-size: clamp(40px, 5.6vw, 56px); } .WP_aboutHeroSub { font-size: 19px; } } @media (max-width: 767px) { /* Hero Phone 手机端 */ .WP_aboutHero { min-height: 56.25vw; align-items: center; background: #eef1f4; } .WP_aboutHeroBg { display: none; } .WP_aboutHeroBgM { display: block; background-size: cover; background-position: center center; background-repeat: no-repeat; -webkit-mask-image: none; mask-image: none; } /* Faint white 图铺满后 */ .WP_aboutHero::before { display: block; background: linear-gradient(90deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .5) 46%, rgba(255, 255, 255, 0) 74%); } /* Smaller copy 文案缩小、 */ .WP_aboutHeroIn { width: 100%; padding: 0 18px 36px; } .WP_aboutHeroCopy { max-width: 72%; } .WP_aboutEyebrow { font-size: 8.5px; letter-spacing: 1.4px; } .WP_aboutEyebrow::after { margin-top: 12px; } .WP_aboutHeroTitle { font-size: 21px; margin-top: 6px; } .WP_aboutHeroSub { font-size: 11px; margin-top: 5px; line-height: 1.4; } .WP_aboutHeroIntro { display: none; } /* Keep 手机端 */ /* Icon row 手机端隐藏 */ .WP_aboutFeats { display: none; } } /* ---------- /About Hero 关于页头 ---------- */ /* ---------- Hero 通用横幅 ---------- */ .WP_hero2 { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 4%; color: #fff; } .WP_heroBg { position: absolute; inset: 0; background-position: center center; background-repeat: no-repeat; background-size: cover; } .WP_hero2::after { content: ""; position: absolute; inset: 0; background: var(--vp-overlay); opacity: .75; } .WP_heroInner { position: relative; z-index: 2; box-sizing: border-box; width: 100%; max-width: 1280px; margin: 0 auto; } /* Hero About 关于页 */ .WP_heroAbout .WP_heroInner { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } .WP_heroTitle { margin: 0; font-size: 21px; font-weight: 700; line-height: 1.2; color: var(--vp-head); } .WP_heroText { margin: 0; font-size: 14px; font-weight: 400; line-height: 1.886; color: #fff; } /* Gold capsule 金色胶囊 */ .WP_badge { display: inline-block; background: var(--vp-gold); color: var(--vp-head); font-size: 15px; font-weight: 700; font-style: italic; line-height: 1.4; padding: 10px; border-radius: 300px; } /* ---------- /Hero 页头 ---------- */ /* ---------- Button 按钮 ---------- */ .WP_btn2, .WP_formSubmit { display: inline-block; align-self: flex-start; background: var(--vp-gold); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.4; padding: 15px 25px; border: 0; border-radius: 300px; cursor: pointer; text-align: center; transition: background .2s; } .WP_btn2:hover, .WP_formSubmit:hover { background: var(--vp-gold-2); color: #fff; } .WP_heroAbout .WP_btn2 { align-self: center; } /* ---------- /Button 按钮 ---------- */ /* Dotted gold 金色点状 */ .WP_div { display: block; width: 100px; height: 7px; border-top: 7px dotted var(--vp-gold); margin: 5px 0; } .WP_divCenter { margin-left: auto; margin-right: auto; } /* Dotted gold 金色虚线 */ /* Split 左右分栏板 */ .WP_split { padding: 4%; } .WP_splitInner { box-sizing: border-box; width: 100%; max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 10px; } .WP_splitMedia { width: 100%; } .WP_splitMedia img { display: block; width: 100%; height: auto; border-radius: 160px 0 0 0; } .WP_splitMediaVideo { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; } .WP_splitMediaVideo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .WP_splitBody { width: 100%; } .WP_splitBody p { margin: 0 0 12px; font-size: 14px; font-weight: 400; line-height: 1.886; color: var(--vp-text); } .WP_splitBody .WP_btn2 { margin-top: 4px; } /* Soft 省钱方案 */ .WP_splitSoft { background: var(--vp-soft); } .WP_splitRev .WP_splitMedia { order: 2; } .WP_splitRev .WP_splitBody { order: 1; } /* ---------- /Split sections 左右分栏 ---------- */ /* ---------- Headings 标题 ---------- */ .WP_h2 { margin: 0; font-size: 21px; font-weight: 700; line-height: 1.2; color: var(--vp-head); } .WP_h2Center { text-align: center; } /* ---------- /Headings 标题 ---------- */ /* ---------- Why choose 为什么选择 ---------- */ .WP_why { padding: 4% 4% 8%; text-align: center; } .WP_whyInner { box-sizing: border-box; width: 100%; max-width: 1280px; margin: 0 auto; } .WP_why .WP_badge { margin-bottom: 10px; } .WP_cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; } .WP_card2 { background: var(--vp-soft); border-radius: 10px; padding: 8% 4%; text-align: center; transition: background .25s, transform .25s; } .WP_cardIco { width: 30px; height: 30px; margin: 0 auto 15px; color: var(--vp-gold-2); } .WP_cardIco .WP_faico { display: block; width: 100%; height: 100%; background-color: currentColor; } .WP_cardTitle2 { margin: 0 0 15px; font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--vp-text); } .WP_cardText { margin: 0; font-size: 14px; font-weight: 400; line-height: 1.886; color: var(--vp-text); } @media (hover: hover) { .WP_card2:hover { background: var(--vp-gold-2); transform: translateY(-7px); } .WP_card2:hover .WP_cardIco, .WP_card2:hover .WP_cardTitle2, .WP_card2:hover .WP_cardText { color: #fff; } } /* Why 选择我们 */ /* ---------- Contact page 联系页 ---------- */ .WP_heroContact .WP_heroInner { text-align: left; } .WP_heroContact::after { opacity: .35; } .WP_heroContact { padding: 4%; min-height: 120px; } .WP_heroContact .WP_heroTitle { color: #F0F5FA; font-size: 24px; } .WP_heroContact .WP_heroText { font-size: 14px; font-weight: 500; line-height: 1.65; color: #fff; margin-top: 6px; } .WP_contactMain { padding: 0 4% 8%; } .WP_contactMainInner { box-sizing: border-box; width: 100%; max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; } /* 世界地图上 */ .WP_info { background: rgba(255, 255, 255, .55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .7); border-radius: 18px; box-shadow: 0 14px 40px rgba(0, 83, 47, .10); padding: 15px; } .WP_infoTitle { margin: 0 0 18px; font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--vp-text); } .WP_infoList { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; } .WP_infoList li { display: flex; align-items: flex-start; gap: 12px; } .WP_infoIco { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--vp-gold); color: #fff; display: grid; place-items: center; } .WP_infoIco .WP_icon { width: 16px; height: 16px; } .WP_infoLabel { margin: 0 0 2px; font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--vp-text); } .WP_infoBody a, .WP_infoBody p { display: block; margin: 0; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--vp-text); } .WP_infoBody a:hover { color: var(--vp-gold-2); } .WP_social { margin-top: 24px; gap: 10px; } .WP_social a { width: 34px; height: 34px; } .WP_social .WP_icon { width: 16px; height: 16px; } /* 表单卡片 Form card. */ .WP_formcard { background: rgba(255, 255, 255, .55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .7); border-radius: 20px; box-shadow: 0 14px 40px rgba(0, 83, 47, .10); padding: 15px; } .WP_formcardTitle { margin: 0 0 16px; font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--vp-text); } .WP_form { display: grid; gap: 10px; } .WP_form input[type="text"], .WP_form input[type="email"], .WP_form textarea { width: 100%; padding: 12px 14px; font-size: 15px; font-weight: 500; color: var(--vp-text); background: #fff; border: 1px solid #d9d9d9; border-radius: 4px; } .WP_form input:focus, .WP_form textarea:focus { outline: 0; border-color: var(--vp-gold); box-shadow: 0 0 0 3px rgba(122, 92, 30, .12); } .WP_form textarea { min-height: 120px; resize: vertical; } .WP_upload { display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.4; color: var(--vp-text); } .WP_uploadBtn { display: inline-block; align-self: flex-start; background: #6b7280; color: #fff; font-weight: 500; padding: 10px 16px; cursor: pointer; } .WP_uploadBtn:hover { background: #565e6b; } .WP_uploadBtn input[type="file"] { display: none; } .WP_form .WP_formMsg { margin: 0; } .WP_formSubmit { justify-self: end; align-self: end; margin-top: 4px; } /* ---------- /Contact page 联系页 ---------- */ /* ---------- />= 768px tablet >= 768px 平板 ---------- */ @media (min-width: 768px) { .WP_badge { font-size: 17px; padding: 9px 20px; } .WP_heroTitle { font-size: clamp(21px, 2.25vw, 36px); } .WP_heroText { font-size: 16px; } .WP_h2 { font-size: 32px; } .WP_btn2, .WP_formSubmit { font-size: 16px; } .WP_split { padding: 4% 4%; } .WP_splitInner { flex-direction: row; align-items: center; gap: 0 20px; } .WP_splitMedia { width: 45%; } .WP_splitBody { width: 55%; } .WP_splitMedia img { border-radius: 170px 0 0 0; } .WP_splitRev .WP_splitInner { flex-direction: row-reverse; } .WP_splitRev .WP_splitMedia { order: 0; } .WP_splitRev .WP_splitBody { order: 0; } .WP_splitBody p { font-size: 16px; line-height: 1.65; } .WP_why { padding: 4% 4% 8%; } .WP_cards { gap: 20px; } .WP_card2 { padding: 8% 4%; } .WP_cardIco { width: 45px; height: 45px; } .WP_cardTitle2 { font-size: 22px; } .WP_cardText { font-size: 16px; line-height: 1.65; } .WP_heroContact { min-height: 200px; } .WP_contactMain { padding: 0 4% 8%; } .WP_contactMainInner { flex-direction: row; gap: 0; } .WP_info { width: 55%; padding: 20px; margin-top: -6%; } .WP_infoTitle { font-size: 24px; } .WP_formcard { width: 46%; padding: 20px; margin-top: -6%; } } /* ---------- />= 768px tablet ≥ 768px 平板 ---------- */ /* ---------- />= 1025px desktop >= 1025px 桌面 ---------- */ @media (min-width: 1025px) { .WP_hero2 { padding: 4% 8%; } .WP_split { padding: 4% 8%; } .WP_why { padding: 4% 8% 8%; } .WP_cards4 { grid-template-columns: repeat(4, 1fr); } .WP_cards3 { grid-template-columns: repeat(3, 1fr); padding: 0 7%; } .WP_heroContact { padding: 3% 8% 4%; min-height: 300px; } .WP_heroContact .WP_heroTitle { font-size: 32px; } .WP_contactMain { padding: 0 8% 8%; } .WP_info { width: 55%; padding: 3% 0 0; margin-top: -3%; } .WP_infoTitle { font-size: 28px; } .WP_formcard { width: 44%; padding: 2%; margin-top: -3%; } } /* ---------- />= 1025px desktop ≥ 1025px 桌面 ---------- */ /* ---------- /<= 480px small screens <= 480px 小屏 ---------- */ @media (max-width: 480px) { .WP_heroTitle { font-size: 21px; } } /* rem Tablet 平板档 */ @media (min-width: 481px) and (max-width: 768px) { .WP_heroTitle { font-size: 26px; } .WP_h2 { font-size: 26px; } } /* ---------- /<= 480px small screens ≤ 480px 小屏 ---------- */ /* ---------- Contact page tweaks 联系页微调 ---------- */ /* Submit button 提交按钮 */ .WP_form { text-align: left; } .WP_form .WP_formSubmit { display: block; margin: 6px auto 0; } /* Left info 左侧信息卡 */ @media (min-width: 768px) { .WP_contactMainInner { align-items: stretch; } .WP_info { width: 50%; box-sizing: border-box; } .WP_formcard { width: 50%; box-sizing: border-box; } } @media (min-width: 1025px) { .WP_info { width: 50%; padding: 2.4%; margin-top: -3%; } .WP_formcard { width: 50%; padding: 2.4%; margin-top: -3%; } } /* ---------- /Contact page tweaks 联系页微调 ---------- */ /* Contact page 联系页 */ /* HQ Two 整个联系 */ .WP_contactMain { position: relative; overflow: hidden; padding: 6% 4% 7%; } .WP_contactMainInner { position: relative; z-index: 2; align-items: center; flex-wrap: wrap; } /* Map kept 背景层 */ .WP_mapbg { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; pointer-events: none; } /* HQ 图钉放在 */ .WP_mapbgTop { z-index: 3; } .WP_mapbgStage { position: relative; width: min(1400px, 96%); aspect-ratio: 784.077 / 458.627; /* 与 SVG viewBox 比例一致 Matches the SVG viewBox ratio. */ } .WP_mapbgStage img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .16; } /* Bigger type 左侧联系 */ .WP_infoLabel { font-size: 19px; } .WP_infoBody a, .WP_infoBody p { font-size: 17px; } .WP_infoIco { width: 44px; height: 44px; } .WP_infoIco .WP_icon { width: 22px; height: 22px; } .WP_infoList li { align-items: center; } @media (min-width: 1025px) { .WP_infoLabel { font-size: 20px; } .WP_infoBody a, .WP_infoBody p { font-size: 18px; } } /* Cards 卡片垂直 */ @media (min-width: 768px) { .WP_info { margin-top: 0; padding: 2.6%; } .WP_formcard { margin-top: 0; padding: 2.6%; } /* Keep 两张 */ .WP_contactMainInner { gap: 24px; } .WP_info, .WP_formcard { width: calc(50% - 12px); } } @media (min-width: 1025px) { .WP_contactMain { padding: 7% 8%; } } @media (max-width: 767px) { .WP_mapbgStage { width: 100%; } } /* ---------- /Contact page 联系页 ---------- */ /* Mobile polish 联系页手机 */ @media (max-width: 767px) { .WP_contactMain { padding: 9% 6% 12%; } /* Same frosted 桌面同样 */ .WP_info, .WP_formcard { background: rgba(255, 255, 255, .35); } /* Map centred 地图居中且 */ .WP_mapbgStage { width: 150%; } .WP_mapbg { opacity: .8; } .WP_infoLabel { font-size: 17px; } .WP_infoBody a, .WP_infoBody p { font-size: 15.5px; } .WP_infoIco { width: 40px; height: 40px; } .WP_formcardTitle { font-size: 19px; } } /* Form card 手机端表单 */ @media (max-width: 767px) { .WP_formcard { aspect-ratio: 4 / 3; display: flex; flex-direction: column; overflow: hidden; padding: 12px; } .WP_formcardTitle { font-size: 18px; margin-bottom: 8px; } .WP_form { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr auto auto; gap: 5px; align-content: stretch; } .WP_form input { height: 34px; padding: 0 12px; font-size: 14px; } .WP_form textarea { grid-column: 1 / -1; grid-row: 3; min-height: 70px; resize: none; font-size: 14px; padding: 10px 12px; } .WP_form .WP_formMsg { grid-column: 1 / -1; grid-row: 4; margin: 0; } .WP_form .WP_formSubmit { grid-column: 1 / -1; grid-row: 5; width: 100%; text-align: center; white-space: nowrap; margin: 0; padding: 8px 16px; font-size: 15px; } } /* ---------- /Mobile polish 手机端细节 ---------- */ /* Brand Honors 关于我们 */ .WP_honor { position: relative; overflow: hidden; background: #ffffff; } .WP_honorHall { aspect-ratio: 1882 / 836; background: url(/wp-content/uploads/about/honor-stage.webp) center / 100% 100% no-repeat; background-image: image-set(url("/wp-content/uploads/about/honor-stage.avif") type('image/avif'),url("/wp-content/uploads/about/honor-stage.webp") type('image/webp')); } /* The page 设计稿页头 */ .WP_honorHall::before { content: none; } /* Section head 章节头 */ .WP_honorHall .WP_honorHead { position: absolute; z-index: 4; left: 0; right: 0; top: 1.2%; padding: 0; text-align: center; } .WP_honorHall .WP_numHead { justify-content: center; text-align: center; gap: clamp(12px, 1.5vw, 26px); } .WP_honorHall .WP_numNo { font-size: clamp(34px, 3.5vw, 68px); } .WP_honorHall .WP_numRule { align-self: center; height: clamp(38px, 3.6vw, 70px); } .WP_honorHall .WP_numTxt { align-items: center; gap: clamp(3px, .4vw, 8px); } .WP_honorHall .WP_numEyebrow { font-size: clamp(10px, .72vw, 14px); } .WP_honorHall .WP_numTxt h2 { font-size: clamp(24px, 2.9vw, 56px); } .WP_honorSub { margin: clamp(4px, .5vw, 10px) 0 0; color: #9AA5A0; font-size: clamp(12px, 1.25vw, 24px); letter-spacing: .01em; } /* ---- 展厅舞台 ---- */ /* Bottom nav 底部导航 */ .WP_honorHall .WP_honorFoot { position: absolute; z-index: 4; left: 7%; right: 7%; bottom: 4.6%; display: flex; align-items: center; gap: clamp(14px, 1.8vw, 28px); padding: 0; } .WP_honorChap { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 25px); flex: 0 0 auto; } .WP_honorChap span { position: relative; color: #8A968F; font-family: var(--font-head); font-size: clamp(10px, .68vw, 13px); letter-spacing: 2.5px; } .WP_honorChap span.WP_on { color: #006D3D; font-weight: 700; } .WP_honorLine { flex: 1 1 auto; height: 1px; background: rgba(0, 61, 43, .22); } .WP_honorTags { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; color: #6E7E76; font-family: var(--font-head); font-size: clamp(10px, .68vw, 13px); font-weight: 500; letter-spacing: 2.5px; white-space: nowrap; } .WP_honorTags span { opacity: .6; } /* Frame 证书相框 */ .WP_honorHall .WP_stage { position: absolute; inset: 0; z-index: 2; } .WP_certs { position: absolute; inset: 0; perspective: 1100px; } .WP_cert { position: absolute; margin: 0; bottom: 33.85%; --bw: clamp(7px, .55vw, 12px); /* 金属边框 */ --mat: clamp(5px, .35vw, 9px); /* 暖白内衬 */ transition: left .95s cubic-bezier(.45, 0, .18, 1), width .95s cubic-bezier(.45, 0, .18, 1), opacity .95s ease, transform .95s cubic-bezier(.45, 0, .18, 1); } /* left 三档位置 */ .WP_posL { left: 28.3%; width: 13.8%; z-index: 1; transform: translateX(-50%); } .WP_posC { left: 51.3%; width: 16.7%; z-index: 2; transform: translateX(-50%); } .WP_posR { left: 74.6%; width: 13.8%; z-index: 1; transform: translateX(-50%); } /* Hidden slots 轮换隐藏档 */ .WP_posOff { left: 51.3%; width: 16.7%; z-index: 0; opacity: 0; transform: translateX(-50%) scale(.82); pointer-events: none; } .WP_tilt { transform-style: preserve-3d; transition: transform .95s cubic-bezier(.45, 0, .18, 1); } .WP_posL .WP_tilt { transform: rotateY(-12deg); } .WP_posR .WP_tilt { transform: rotateY(12deg); } /* Soft contact 柔和接触 */ .WP_cert::after { content: ''; position: absolute; z-index: -1; left: 3%; right: 3%; bottom: -2.8%; height: 5.6%; background: radial-gradient(50% 50% at 50% 50%, rgba(24,34,27,.38) 0%, rgba(24,34,27,.14) 55%, rgba(24,34,27,0) 78%); filter: blur(4px); } /* Certificate 证书轮播 */ .WP_certNav { position: absolute; z-index: 6; top: 46%; width: clamp(38px, 2.6vw, 50px); height: clamp(38px, 2.6vw, 50px); display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .88); color: #35544A; box-shadow: 0 6px 18px rgba(22, 34, 28, .16), 0 1px 3px rgba(22, 34, 28, .12); cursor: pointer; -webkit-appearance: none; appearance: none; transition: background .25s ease, transform .25s ease, box-shadow .25s ease; } .WP_certNav .WP_icon { width: 46%; height: 46%; } .WP_certNav:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(22, 34, 28, .22), 0 2px 4px rgba(22, 34, 28, .14); } .WP_certNav:active { transform: translateY(0); } .WP_certNav:focus-visible { outline: 2px solid #006D3D; outline-offset: 2px; } .WP_certNav--prev { left: 12.5%; } .WP_certNav--next { right: 12.5%; } /* Caption 证书说明 */ .WP_honorInfo { position: absolute; inset: 0; z-index: 4; text-align: center; padding: 0 24px; pointer-events: none; } /* Follow 跟手入场 */ .WP_honorInfo.WP_scrub { --dist: 30px; } .WP_honorInfo .WP_certTitle, .WP_honorInfo .WP_certName, .WP_honorInfo .WP_certDesc { text-shadow: 0 1px 0 rgba(255,255,255,.85), 0 0 14px rgba(255,255,255,.75); } .WP_honorInfo .WP_certTitle { position: absolute; left: 24px; right: 24px; top: 71.4%; margin: 0; color: #0B3B2E; font-family: var(--font-head); font-weight: 700; line-height: 1.15; font-size: clamp(17px, 1.35vw, 26px); letter-spacing: .02em; } .WP_honorInfo .WP_certName { position: absolute; left: 24px; right: 24px; top: calc(71.4% + clamp(24px, 1.72vw, 35px)); margin: 0; color: #33463F; font-size: clamp(12px, .9vw, 18px); font-weight: 500; } .WP_honorInfo .WP_certDesc { position: absolute; left: 24px; right: 24px; top: calc(71.4% + clamp(24px, 1.72vw, 35px) + clamp(22px, 1.7vw, 33px)); margin: 0 auto; max-width: 680px; color: #7E8C85; font-size: clamp(11px, .78vw, 15px); line-height: 1.45; } .WP_certDots { position: absolute; left: 0; right: 0; top: calc(71.4% + clamp(24px, 1.72vw, 35px) + clamp(22px, 1.7vw, 33px) + clamp(26px, 2vw, 38px)); display: flex; justify-content: center; gap: 10px; pointer-events: auto; } .WP_dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 4px; background: #C6CFC9; cursor: pointer; -webkit-appearance: none; appearance: none; transition: width .3s ease, background .3s ease; } .WP_dot:hover { background: #9FB0A8; } .WP_dot.WP_on { width: 18px; background: #006D3D; } .WP_dot:focus-visible { outline: 2px solid #006D3D; outline-offset: 2px; } /* Caption 文案切换 */ .WP_honorInfo .WP_certTitle, .WP_honorInfo .WP_certName, .WP_honorInfo .WP_certDesc { transition: opacity .22s ease, transform .22s ease; } .WP_honorInfo.WP_fading .WP_certTitle, .WP_honorInfo.WP_fading .WP_certName, .WP_honorInfo.WP_fading .WP_certDesc { opacity: 0; transform: translateY(4px); } /* object-fit 金属边框 */ .WP_frame { position: relative; aspect-ratio: 40 / 49; background: /* Diagonal highlight . 斜向高光。 */ linear-gradient(105deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.08) 22%, rgba(255,255,255,0) 38%, rgba(255,255,255,0) 66%, rgba(255,255,255,.12) 80%, rgba(255,255,255,0) 92%), /* Brushed texture . 拉丝纹理。 */ repeating-linear-gradient(97deg, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,.025) 1px 2px, rgba(255,255,255,0) 2px 5px), /* 45° corner seams . 四角 45° 拼角缝。 */ linear-gradient(45deg, transparent calc(50% - .6px), rgba(96,66,22,.55) calc(50% - .6px) calc(50% + .6px), transparent calc(50% + .6px)) 0 0 / var(--bw) var(--bw) no-repeat, linear-gradient(135deg, transparent calc(50% - .6px), rgba(96,66,22,.55) calc(50% - .6px) calc(50% + .6px), transparent calc(50% + .6px)) 100% 0 / var(--bw) var(--bw) no-repeat, linear-gradient(45deg, transparent calc(50% - .6px), rgba(96,66,22,.55) calc(50% - .6px) calc(50% + .6px), transparent calc(50% + .6px)) 100% 100% / var(--bw) var(--bw) no-repeat, linear-gradient(135deg, transparent calc(50% - .6px), rgba(96,66,22,.55) calc(50% - .6px) calc(50% + .6px), transparent calc(50% + .6px)) 0 100% / var(--bw) var(--bw) no-repeat, /* Four tinted edges. 四条边分色。 */ linear-gradient(#EBD9A2, #EBD9A2) 0 0 / 100% var(--bw) no-repeat, linear-gradient(#D9BC77, #D9BC77) 0 0 / var(--bw) 100% no-repeat, linear-gradient(#BB984E, #BB984E) 100% 0 / var(--bw) 100% no-repeat, linear-gradient(#92713B, #92713B) 0 100% / 100% var(--bw) no-repeat, /* Fallback gradient. 兜底渐变。 */ linear-gradient(180deg, #D9BC77 0%, #C9A45C 45%, #92713B 100%); box-shadow: 0 16px 28px -12px rgba(22,32,26,.45), 0 4px 10px rgba(22,32,26,.2), inset 0 1px 1px rgba(255,255,255,.6), inset 0 -1px 1px rgba(96,66,22,.55); } /* Lining 内衬压线 */ .WP_mat { position: absolute; inset: var(--bw); z-index: 1; display: flex; align-items: center; justify-content: center; padding: var(--mat); background: linear-gradient(180deg, #FDFAF3, #F5EEDF); box-shadow: 0 0 0 1px rgba(146,113,59,.5), inset 0 1px 2px rgba(255,255,255,.8); } .WP_mat img { display: block; width: 100%; height: 100%; object-fit: contain; box-shadow: 0 0 0 1px rgba(146,113,59,.32), 0 1px 3px rgba(70,50,20,.22); } /* Glass layer 玻璃层 */ .WP_frame::after { content: ''; position: absolute; z-index: 2; inset: var(--bw); background: linear-gradient(112deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.07) 14%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 58%, rgba(255,255,255,.08) 72%, rgba(255,255,255,0) 88%); box-shadow: inset 0 2px 6px rgba(58,40,12,.26), inset 0 0 1px rgba(58,40,12,.3); pointer-events: none; } @media (prefers-reduced-motion: reduce) { .WP_cert, .WP_tilt { transition: none; } } /* Mobile back 手机端 */ @media (max-width: 767px) { .WP_honorHall { aspect-ratio: auto; background: none; } .WP_honorHall .WP_honorHead { position: static; padding: clamp(32px, 9vw, 52px) 20px 0; } .WP_honorHall .WP_numHead { gap: 14px; } .WP_honorHall .WP_numNo { font-size: 42px; } .WP_honorHall .WP_numRule { height: 44px; } .WP_honorHall .WP_numEyebrow { font-size: 11px; } .WP_honorHall .WP_numTxt h2 { font-size: 26px; } .WP_honorSub { margin-top: 8px; font-size: 13px; } /* Specific 对齐桌面 */ .WP_honorHall .WP_stage { position: relative; inset: auto; width: 150%; margin-left: -27.25%; margin-top: 8px; aspect-ratio: 1882 / 836; /* 手机端 150% 宽，800w 副本足够（原图 41KB -> 14KB） */ background: url(/wp-content/uploads/about/honor-stage-800x355.webp) center / 100% 100% no-repeat; background-image: image-set(url("/wp-content/uploads/about/honor-stage-800x355.avif") type('image/avif'),url("/wp-content/uploads/about/honor-stage-800x355.webp") type('image/webp')); } /* Mobile frame 手机端相框 */ .WP_cert { --bw: clamp(4px, 1.5vw, 7px); --mat: clamp(2px, .7vw, 4px); } .WP_cert::after { filter: blur(2px); } /* px 手机端箭头 */ .WP_certNav { top: auto; bottom: 7%; } .WP_certNav--prev { left: calc(18.17% + 8px); } .WP_certNav--next { right: calc(18.17% + 8px); } /* Mobile 手机端说明 */ .WP_honorInfo { position: static; padding: 18px 20px 0; pointer-events: auto; } .WP_honorInfo .WP_certTitle, .WP_honorInfo .WP_certName, .WP_honorInfo .WP_certDesc, .WP_certDots { position: static; } .WP_honorInfo .WP_certTitle { font-size: 20px; margin: 0; } .WP_honorInfo .WP_certName { font-size: 14px; margin: 3px 0 0; } .WP_honorInfo .WP_certDesc { font-size: 12px; margin: 6px auto 0; } .WP_certDots { margin-top: 12px; } .WP_honorHall .WP_honorFoot { position: static; padding: 18px 20px 26px; flex-wrap: wrap; gap: 10px 14px; } .WP_honorTags { flex: 1 1 100%; font-size: 10px; letter-spacing: 1.6px; gap: 6px; white-space: normal; } } /* ---------- /Brand Honors 品牌荣誉 ---------- */ /* Brand History 关于我们 */ .WP_hist { padding: 95px 0 75px; user-select: none; /* header Offset 锚点跳转时 */ scroll-margin-top: 90px; background: #ffffff; /* 纯白背景Plain white background. */ } .WP_histHead { text-align: center; } .WP_histHead h2 { margin: 0; color: var(--ink); font-size: 34px; line-height: 1.2; } .WP_histSub { display: block; margin-top: 8px; color: var(--muted); font-family: var(--font-head); font-size: 15px; letter-spacing: .06em; text-transform: uppercase; } /* max-width 横向滑动区 */ .WP_histSwiper { position: relative; max-width: 1070px; margin: 40px auto 0; overflow: hidden; } .WP_histTrack { display: flex; align-items: stretch; transition: transform .55s cubic-bezier(.4, 0, .2, 1); will-change: transform; } .WP_histSlide { position: relative; flex: 0 0 100%; min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; padding: 60px 0 40px; overflow: hidden; opacity: 0; transition: opacity .5s ease; pointer-events: none; } .WP_histSlide.WP_on { opacity: 1; pointer-events: auto; } /* px px 超大年份 */ .WP_histYearBg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--font-head); font-weight: 600; font-size: min(400px, 34vw); line-height: 1; letter-spacing: .085em; color: #666; opacity: .1; text-align: center; white-space: nowrap; pointer-events: none; z-index: 0; } .WP_histPic { --bw: clamp(6px, .5vw, 10px); --mat: clamp(8px, .75vw, 14px); position: relative; z-index: 1; display: block; width: 43%; padding-bottom: calc(25.7% + (var(--bw) + var(--mat)) * 0.8); overflow: hidden; /* Brand-green 品牌绿外框 */ background: linear-gradient(125deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 24%, rgba(3,44,25,.35) 52%, rgba(255,255,255,.38) 80%, rgba(255,255,255,0) 100%), linear-gradient(160deg, #4F9E71 0%, #006D3D 35%, #0A4A2A 70%, #1B7A4A 100%); box-shadow: inset 0 1px 1px rgba(255,255,255,.55), inset 0 -1px 1px rgba(3,44,25,.50), 0 18px 38px -16px rgba(31,54,44,.38); } .WP_histPic img { position: absolute; z-index: 1; left: calc(var(--bw) + var(--mat)); top: calc(var(--bw) + var(--mat)); /* img inset 替换元素 */ width: calc(100% - (var(--bw) + var(--mat)) * 2); height: calc(100% - (var(--bw) + var(--mat)) * 2); object-fit: cover; display: block; transition: transform .3s ease; } .WP_histPic:hover img { transform: scale(1.1); } /* img hover 暖白内衬环 */ .WP_histPic::after { content: ''; position: absolute; z-index: 2; inset: calc(var(--bw) + var(--mat)); box-shadow: 0 0 0 var(--mat) #F6F0E4; pointer-events: none; } .WP_histTxt { position: relative; z-index: 1; width: 44%; margin: 44px 30px 0 0; } .WP_histTxt h3 { margin: 0; color: #333; font-size: 24px; line-height: 1.2; font-weight: 700; } .WP_histTxt p { margin: 20px 0 0; color: #666; font-size: 14px; line-height: 25px; } /* Year ruler 年份刻度尺 */ .WP_histRulerWrap { margin-top: 0; padding: 105px 6.6% 0; } /* before Ruler 尺子宽度 */ .WP_histRuler { position: relative; display: flex; width: max-content; min-width: 100%; } .WP_histRuler::before { content: ''; position: absolute; left: 0; right: 0; top: 0; border-top: 2px dashed #c5cdc9; } .WP_histNum { position: relative; flex: 1 1 0; min-width: 0; border: 0; background: none; padding: 30px 0; cursor: pointer; text-align: center; } .WP_histNum::before { content: ''; position: absolute; left: 50%; top: -2px; margin-left: -1px; width: 2px; height: 11px; background: #c5cdc9; } .WP_histNum span { font-family: var(--font-head); font-size: 22px; line-height: 25px; color: #666; transition: color .3s ease, transform .3s ease; display: inline-block; } .WP_histNum:hover span { color: #333; } .WP_histNum.WP_on span { color: #333; font-weight: 600; transform: scale(1.14); } /* Active tick 激活三角 */ .WP_histNum::after { display: none; content: ''; } .WP_histNum.WP_on::before { top: -6px; height: 0; width: 0; margin-left: -6px; background: none; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--gold); } .WP_histNum.WP_on::after { display: block; position: absolute; left: 50%; bottom: 6px; margin-left: -6px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 8px solid var(--gold); } /* pxSame title 标题样式 */ @media (min-width: 768px) { .WP_histHead h2 { font-size: 40px; } .WP_cultHead h2 { font-size: 40px; } } @media (max-width: 767px) { .WP_hist { padding: 50px 0 30px; } .WP_histHead h2 { font-size: 24px; } .WP_histSwiper { margin-top: 25px; } .WP_histSlide { flex-direction: column; padding: 0; } .WP_histYearBg { display: none; } .WP_histPic { --bw: 4px; --mat: 7px; width: 100%; padding-bottom: calc(60% + (var(--bw) + var(--mat)) * 0.8); } .WP_histTxt { width: 100%; margin: 25px 0 0; } .WP_histTxt h3 { font-size: 20px; } .WP_histTxt p { font-size: 12px; line-height: 22px; margin-top: 12px; height: 66px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .WP_histRulerWrap { margin-top: 0; padding: 35px 0 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .WP_histRulerWrap::-webkit-scrollbar { display: none; } .WP_histNum { flex: 1 0 64px; padding: 12px 0; } .WP_histNum span { font-size: 14px; line-height: 22px; } } @media (prefers-reduced-motion: reduce) { .WP_histTrack, .WP_histSlide, .WP_histNum span, .WP_histPic img { transition: none; } } /* lang.css 数字 */ html[lang] .WP_histYearBg, html[lang] .WP_histNum span, html[lang] .WP_histSub { font-family: var(--font-head); } /* ---------- /Brand History 品牌历程 ---------- */ /* Brand Culture 关于我们 */ .WP_cult { position: relative; padding: clamp(140px, 13vw, 196px) 0 60px; /* S Reserve 顶部预留 */ /* S Left 浅色主题 */ background: #f6faf7; /* 图片移至 .WP_bgLayer--cultPhoto moved to .WP_bgLayer--cult for feathering and parallax. */ overflow: hidden; } .WP_cultHead { position: relative; z-index: 3; } .WP_cultHead h2 { margin: 0; color: var(--ink); text-align: left; } .WP_cultSub { display: block; margin-top: 6px; color: rgba(255, 255, 255, .78); font-family: var(--font-head); font-size: 15px; font-weight: 400; letter-spacing: .35em; text-transform: uppercase; } .WP_cultStage { position: relative; z-index: 3; display: flex; align-items: stretch; gap: clamp(36px, 3.4vw, 56px); margin-top: clamp(55px, 4.6vw, 70px); min-height: 400px; } /* px Vertical 左侧竖排 */ .WP_cultNav { flex: 0 0 180px; align-self: flex-start; display: flex; flex-direction: column; align-items: stretch; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(0, 109, 61, .12); border-radius: 24px; padding: 8px; width: 180px; box-shadow: 0 10px 30px rgba(0, 61, 43, .08); } .WP_cultNavView { overflow: hidden; } .WP_cultNavList { display: flex; flex-direction: column; } .WP_cultTab { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 2px 0; padding: 13px 6px; border: 0; background: none; cursor: pointer; border-radius: 16px; transition: background .3s ease; } .WP_cultIcon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; color: #006d3d; background: transparent; transition: background .3s ease, color .3s ease; } .WP_cultIcon .WP_icon { width: 30px; height: 30px; } .WP_cultTabTxt { max-width: 100%; color: #41584c; font-size: 14px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .WP_cultTab:hover { background: rgba(0, 109, 61, .06); } .WP_cultTab.WP_on { background: #EAF4EE; } .WP_cultTab.WP_on .WP_cultIcon { background: #004D32; color: #fff; box-shadow: 0 6px 16px rgba(0, 77, 50, .28); } .WP_cultTab.WP_on .WP_cultTabTxt { color: #004D32; font-weight: 700; } /* Panel grid 中央展示区 */ .WP_cultShow { position: relative; flex: 1 1 auto; } .WP_cultPanels { display: grid; } .WP_cultItem { grid-area: 1 / 1; opacity: 0; transform: translateY(26px); transition: opacity .55s ease, transform .55s ease; pointer-events: none; } .WP_cultItem.WP_on { opacity: 1; transform: none; pointer-events: auto; } .WP_cultQuote { position: relative; z-index: 2; max-width: 620px; padding: 6px 0 0; } .WP_cultQuote > .WP_icon { width: 52px; height: 38px; color: #BFDCCC; } .WP_cultName { margin: 22px 0 0; color: #183B30; font-size: clamp(30px, 2.8vw, 40px); line-height: 1.25; font-weight: 700; } .WP_cultName::after { content: ''; display: block; width: 56px; height: 3px; margin-top: 12px; border-radius: 2px; background: #006D3D; } .WP_cultSlogan { margin-top: 16px; color: #004D32; font-size: clamp(20px, 1.65vw, 24px); line-height: 1.5; font-weight: 600; } .WP_cultText { margin: 16px 0 0; max-width: 600px; color: #566B63; font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.8; font-weight: 400; } /* Four value 底部四项 */ .WP_cultTags { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(40px, 3.4vw, 56px) 0 0; } .WP_cultTag { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 2px 0 2px clamp(20px, 2.2vw, 34px); border-left: 1px solid #E4EBE7; transition: background .3s ease, transform .3s ease; } .WP_cultTag:first-child { border-left: 0; padding-left: 0; } .WP_cultTag:hover { /* Stacks 滚动跟手 */ --hover: -4px; } .WP_cultTagIcon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: #006D3D; } .WP_cultTagIcon .WP_icon { width: 32px; height: 32px; } .WP_cultTagBody { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .WP_cultTagName { color: #183B30; font-size: 16.5px; font-weight: 700; line-height: 1.3; } .WP_cultTagTxt { color: #84968E; font-size: 12.5px; line-height: 1.5; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; /* Keep 说明固定三行高，四列底部齐平 */ min-height: 4.5em; } /* Tighter 平板端 */ @media (max-width: 1199px) { .WP_cultStage { gap: 30px; } .WP_cultQuote { max-width: 520px; } .WP_cultName { font-size: 30px; } .WP_cultSlogan { font-size: 19px; } .WP_cultTags { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 0; } .WP_cultTag:nth-child(odd) { border-left: 0; padding-left: 0; } } /* Phone nav 手机端 */ @media (max-width: 767px) { /* Top padding 顶部留白 */ .WP_cult { padding: 72px 0 40px; } /* heading 标题区 */ .WP_cultHead .WP_numHead { justify-content: center; text-align: center; } .WP_cultHead .WP_numTxt { align-items: center; } .WP_cultHead h2 { text-align: center; } .WP_cult::before { height: clamp(64px, 15vw, 96px); background-size: 230% 100%; } .WP_cultStage { flex-direction: column; gap: 22px; min-height: 0; margin-top: 30px; } .WP_cultNav { flex: 0 0 auto; width: 100%; flex-direction: row; align-items: center; border-radius: 999px; padding: 4px 8px; } .WP_cultNavView { flex: 1 1 auto; min-width: 0; } .WP_cultNavList { flex-direction: row; justify-content: space-around; } .WP_cultTab { flex: 0 0 auto; flex-direction: row; gap: 6px; padding: 7px 9px; } .WP_cultIcon { width: 38px; height: 38px; } .WP_cultIcon .WP_icon { width: 24px; height: 24px; } .WP_cultTabTxt { display: none; } .WP_cultShow { min-height: 0; } .WP_cultQuote { padding: 12px 0 0 2px; max-width: 100%; } .WP_cultQuote > .WP_icon { width: 40px; height: 30px; } .WP_cultName { font-size: 22px; margin-top: 12px; } .WP_cultName::after { width: 44px; height: 2.5px; margin-top: 8px; } .WP_cultSlogan { font-size: 16px; margin-top: 10px; } .WP_cultText { font-size: 13.5px; } .WP_cultTags { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 10px; margin: 22px 0 0; } .WP_cultTag { border-left: 0; padding: 0; } .WP_cultTagIcon { width: 30px; height: 30px; } .WP_cultTagIcon .WP_icon { width: 27px; height: 27px; } .WP_cultTagName { font-size: 13px; } .WP_cultTagTxt { font-size: 9.5px; } } @media (prefers-reduced-motion: reduce) { .WP_cultItem, .WP_cultNavList, .WP_cultTag { transition: none; } } /* ---------- /Brand Culture 品牌文化 ---------- */ /* Scrub reveal 关于我们 */ .WP_scrub { --p: 1; --o: 1; --hover: 0px; --dist: 78px; opacity: var(--o); transform: translateY(calc((1 - var(--p)) * var(--dist) + var(--hover))); will-change: opacity, transform; } @media (max-width: 1199px) { .WP_scrub { --dist: 62px; } } @media (max-width: 767px) { .WP_scrub { --dist: 48px; } } @media (prefers-reduced-motion: reduce) { .WP_scrub { opacity: 1; transform: none; will-change: auto; } } /* Scrub 滚动擦除 */ /* ---------- News Hero 新闻横幅 ---------- */ /* Desktop crops 桌面端取 */ @media (min-width: 768px) { .WP_newsHero .WP_aboutHeroBg { background-position: 20% center; } } /* hover 前三个图标 */ .WP_aboutFeats a.WP_aboutFeatLink { display: flex; flex-direction: column; align-items: center; gap: 10px; color: inherit; text-decoration: none; } .WP_aboutFeats a.WP_aboutFeatLink .WP_aboutFeatTx { transition: color .25s ease; } .WP_aboutFeats a.WP_aboutFeatLink:hover .WP_aboutFeatIc { box-shadow: 0 8px 22px rgba(0, 61, 43, .18); } .WP_aboutFeats a.WP_aboutFeatLink:hover .WP_aboutFeatTx { color: var(--brand-primary); } /* Search Hero 搜索横幅：图标行为放大镜主题 SVG */ .WP_searchHero .WP_aboutFeatIc svg { width: 34px; height: 34px; display: block; color: var(--brand-primary); } .WP_searchHero .WP_aboutHeroBg { background-position: center center; } /* 手机端通用 */ /* ---------- /News Hero 新闻页头 ---------- */ /* ---------- Contact Hero 联系横幅 ---------- */ /* Desktop 桌面端背景 */ @media (min-width: 768px) { .WP_contactHero .WP_aboutHeroBg { background-position: center center; } } /* WhatsApp 官方 */ .WP_aboutFeatIcWa .WP_icon { width: 34px; height: 34px; } /* ---------- /Contact Hero 联系页头 ---------- */ /* Brand 关于我们 */ .WP_bi { background: #fff; padding: 0 0 clamp(56px, 6vw, 84px); } /* Section joins 进场动画 */ /* Banner slides 横幅图 */ .WP_biPic { transform: translateX(9%) scale(1.12); transition: transform 1.3s cubic-bezier(.22, .7, .25, 1); background-position: right calc(50% + var(--par, 0px)); } .WP_biHero.WP_in .WP_biPic { transform: none; } @media (prefers-reduced-motion: reduce) { .WP_biHead, .WP_biCopy, .WP_biStats, .WP_biCardsClip { opacity: 1; transform: none; transition: none; } .WP_biPic { transform: none; transition: none; } } /* Section head 章节头 */ .WP_biHead { position: absolute; top: clamp(16px, 1.8vw, 30px); left: 0; right: 0; z-index: 2; } .WP_biHead .WP_numHead { justify-content: flex-start; text-align: left; } .WP_biHead .WP_numTxt { align-items: flex-start; } /* Top copy 顶部 */ .WP_biHero { position: relative; margin-bottom: clamp(48px, 5vw, 72px); /* Height 高度背景图 */ min-height: clamp(320px, 33.3vw, 520px); display: flex; align-items: center; overflow: hidden; /* Clip 进场溢出 */ } .WP_biPic { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url(/wp-content/uploads/about/brand-hero-2.webp) right center / cover no-repeat; background-image: image-set(url("/wp-content/uploads/about/brand-hero-2.avif") type('image/avif'),url("/wp-content/uploads/about/brand-hero-2.webp") type('image/webp')); } .WP_biPic::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, .97) 22%, rgba(255, 255, 255, .93) 40%, rgba(255, 255, 255, .62) 56%, rgba(255, 255, 255, .12) 74%, rgba(255, 255, 255, 0) 82%), linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, 0) 74%, rgba(255, 255, 255, .85) 100%); } .WP_biHeroIn { position: relative; z-index: 1; width: 100%; padding-top: clamp(100px, 10vw, 148px); padding-bottom: clamp(36px, 4.5vw, 64px); } .WP_biCopy { max-width: 520px; } .WP_biKicker { display: block; color: var(--text-muted); font-family: var(--font-head); font-size: clamp(12px, .9vw, 14px); font-weight: 600; letter-spacing: .42em; text-transform: uppercase; } .WP_biTitle { margin: 14px 0 0; color: var(--ink); font-family: var(--font-head); font-weight: 800; text-transform: uppercase; font-size: clamp(30px, 3.4vw, 54px); line-height: 1.08; letter-spacing: .01em; } .WP_biTitle span { display: inline-block; margin-top: 2px; color: var(--brand-primary); } .WP_biLead { margin: 18px 0 0; max-width: 470px; color: var(--text-muted); font-size: clamp(13.5px, 1vw, 15.5px); line-height: 1.75; /* 左右对齐：两端齐平，靠断词避免词距被拉开 */ text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; hyphens: auto; -webkit-hyphenate-limit-chars: 6 3 3; hyphenate-limit-chars: 6 3 3; } .WP_biBtn { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 13px 26px; border-radius: 999px; background: var(--brand-primary); color: #fff; text-decoration: none; font-family: var(--font-head); font-size: 14px; font-weight: 600; letter-spacing: .04em; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; } .WP_biBtn .WP_icon { width: 18px; height: 18px; transition: transform .25s ease; } .WP_biBtn:hover { background: #0b5c38; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 109, 61, .28); } .WP_biBtn:hover .WP_icon { transform: translateX(3px); } /* Middle four 中部 */ .WP_biStatsWrap { position: relative; } /* Very light 极浅绿色 */ .WP_biStatsWrap::before { content: ''; position: absolute; inset: -36px -5% -32px; pointer-events: none; background: radial-gradient(120% 150% at 8% 0%, rgba(0, 109, 61, .055), rgba(0, 109, 61, 0) 62%), repeating-linear-gradient(112deg, rgba(0, 109, 61, .032) 0 1px, rgba(0, 109, 61, 0) 1px 92px); } .WP_biStats { position: relative; list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #E4EBE7; border-bottom: 1px solid #E4EBE7; } .WP_biStats li { display: flex; align-items: center; justify-content: center; gap: 16px; padding: clamp(34px, 3.4vw, 52px) 18px; } .WP_biStats li + li { border-left: 1px solid #E4EBE7; } .WP_biStatIc { flex: 0 0 auto; color: #006D3D; } .WP_biStatIc .WP_icon { width: clamp(36px, 2.6vw, 44px); height: clamp(36px, 2.6vw, 44px); } .WP_biStatTxt { display: flex; flex-direction: column; } .WP_biStatTxt strong { color: #006D3D; font-family: var(--font-head); font-weight: 700; font-size: clamp(38px, 3.5vw, 54px); line-height: 1.05; letter-spacing: -.01em; } .WP_biStatTxt span { margin-top: 6px; color: #68736D; font-size: 12.5px; line-height: 1.4; letter-spacing: 2px; text-transform: uppercase; } /* Stat 顿号样式 */ .WP_biStatTxt .WP_biSuffix, .WP_biStatTxt strong .WP_biSuffix { font-size: 1em; line-height: 1; vertical-align: baseline; margin: 0 0 0 1px; padding: 0; font-weight: 700; color: inherit; letter-spacing: normal; text-transform: none; } .WP_biStatRule { display: block; width: 26px; height: 2px; margin-top: 10px; background: #006D3D; } /* Capability 底部 */ .WP_biCarousel { position: relative; margin-top: clamp(36px, 4vw, 56px); } .WP_biCardsClip { overflow: hidden; padding: 8px 0 18px; } .WP_biCards { display: flex; gap: 24px; align-items: stretch; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .WP_biCards::-webkit-scrollbar { display: none; } .WP_biCards:focus-visible { outline: 2px solid #006D3D; outline-offset: 4px; } .WP_biCard { flex: 0 0 calc((100% - 72px) / 4); min-width: 0; scroll-snap-align: start; } .WP_biCardLink { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #fff; border-radius: 14px; text-decoration: none; box-shadow: 0 10px 28px rgba(16, 67, 51, .08); transition: transform .3s ease, box-shadow .3s ease; } .WP_biCard:hover .WP_biCardLink { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(16, 67, 51, .14); } .WP_biCardPic { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: #EEF3EF; } .WP_biCardPic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .WP_biCard:hover .WP_biCardPic img { transform: scale(1.035); } .WP_biCardPic::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8, 18, 13, .46) 0%, rgba(8, 18, 13, 0) 40%); } .WP_biCardTag { position: absolute; left: 18px; top: 16px; z-index: 1; max-width: 64%; color: #fff; font-family: var(--font-head); font-size: 12.5px; line-height: 1.35; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 1px 6px rgba(0, 0, 0, .4); } .WP_biCardBody { display: grid; grid-template-columns: auto 1px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 18px 18px 20px; flex: 1 1 auto; } .WP_biCardNo { color: #006D3D; font-family: var(--font-head); font-weight: 700; font-size: clamp(28px, 2.2vw, 36px); line-height: 1; letter-spacing: -.01em; } .WP_biCardRule { width: 1px; height: 44px; background: #D7E5DD; } .WP_biCardTxt { min-width: 0; } .WP_biCardTxt h3 { margin: 0; color: #202322; font-family: var(--font-head); font-size: clamp(15px, 1.05vw, 17px); line-height: 1.35; font-weight: 600; } .WP_biCardTxt p { margin: 7px 0 0; color: #68736D; font-size: 12.5px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .WP_biCardArrow { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid #006D3D; background: #fff; color: #006D3D; transition: background .25s ease, color .25s ease, border-color .25s ease; } .WP_biCardArrow .WP_icon { width: 17px; height: 17px; } .WP_biCard:hover .WP_biCardArrow { background: #006D3D; border-color: #006D3D; color: #fff; } /* Arrows 悬浮按钮 */ .WP_biNav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 70; width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: #fff; color: #006D3D; box-shadow: 0 8px 24px rgba(16, 67, 51, .18); transition: background .25s ease, color .25s ease, transform .25s ease; } .WP_biNavPrev { left: -27px; } .WP_biNavNext { right: -27px; } .WP_biNav:hover { background: #006D3D; color: #fff; transform: translateY(-50%) scale(1.05); } .WP_biNav[disabled] { opacity: .32; pointer-events: none; } .WP_biNav .WP_icon { width: 20px; height: 20px; display: block; } /* Pager short 分页器 */ .WP_biDots { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 20px; } .WP_biDots button { width: 34px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: #DFE5E2; cursor: pointer; transition: width .3s ease, background .3s ease; } .WP_biDots button.WP_on { width: 40px; background: #006D3D; } .WP_biDots button:focus-visible { outline: 2px solid #006D3D; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .WP_biCards { scroll-behavior: auto; } .WP_biCardLink, .WP_biCardPic img, .WP_biNav { transition: none; } .WP_biCard:hover .WP_biCardLink { transform: none; } .WP_biCard:hover .WP_biCardPic img { transform: none; } } @media (max-width: 1199px) { .WP_biCard { flex-basis: calc((100% - 24px) / 2); } .WP_biNav { width: 46px; height: 46px; } .WP_biNavPrev { left: -12px; } .WP_biNavNext { right: -12px; } } /* Tablet 平板：窄屏文字占位更长，遮罩加厚保证可读 */ @media (min-width: 768px) and (max-width: 1023px) { .WP_biPic::after { background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, .97) 30%, rgba(255, 255, 255, .93) 52%, rgba(255, 255, 255, .8) 66%, rgba(255, 255, 255, .3) 80%, rgba(255, 255, 255, 0) 90%), linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, 0) 74%, rgba(255, 255, 255, .85) 100%); } } @media (max-width: 1023px) { .WP_biStats { grid-template-columns: repeat(2, 1fr); } .WP_biStats li:nth-child(3) { border-left: 0; } .WP_biStats li:nth-child(n+3) { border-top: 1px solid #E4EBE7; } } /* Single page 单页时隐藏 */ .WP_biCarousel.WP_single .WP_biNav, .WP_biCarousel.WP_single .WP_biDots { display: none; } @media (max-width: 767px) { .WP_bi { padding: 96px 0 56px; } .WP_biHero { margin-bottom: 36px; min-height: 0; display: block; overflow: visible; } /* Phone title 手机端标题 */ .WP_biPic { position: relative; inset: auto; height: 52vw; transform: none; transition: none; background-position: 80% calc(40% + var(--par, 0px)); } .WP_biPic::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 58%, #ffffff 96%); } .WP_biHeroIn { position: static; padding-top: 0; padding-bottom: 0; margin-top: 22px; } /* Section head 章节头放到 */ .WP_biHead { top: -64px; } .WP_biHead .WP_numHead { background: none; backdrop-filter: none; border-radius: 0; padding: 0; justify-content: center; text-align: center; } .WP_biHead .WP_numTxt { align-items: center; } .WP_biCopy { max-width: none; } .WP_biLead { margin-top: 14px; } /* Mobile stats 手机端数据 */ .WP_biStats { grid-template-columns: repeat(2, 1fr); } .WP_biStats li { flex-direction: column; justify-content: center; text-align: center; gap: 8px; padding: 24px 10px; } .WP_biStats li:nth-child(3) { border-left: 0; } .WP_biStats li:nth-child(n+3) { border-top: 1px solid #E4EBE7; } .WP_biStatIc .WP_icon { width: 28px; height: 28px; } .WP_biStatTxt { align-items: center; } .WP_biStatTxt strong { font-size: clamp(28px, 8vw, 34px); } .WP_biStatTxt span { margin-top: 4px; font-size: 10.5px; letter-spacing: 1.2px; } .WP_biStatRule { margin: 8px auto 0; width: 22px; } /* Mobile cards 手机端卡片 */ .WP_biCarousel { margin-top: 30px; } .WP_biCardsClip { margin: 0 -16px; padding: 6px 0 14px; } .WP_biCards { gap: 12px; padding: 0 16px; } .WP_biCard { flex: 0 0 100%; } .WP_biNav { display: none; } .WP_biCardBody { padding: 16px 16px 18px; gap: 10px; } .WP_biCardNo { font-size: 28px; } .WP_biCardRule { height: 40px; } .WP_biCardTxt h3 { font-size: 15px; } .WP_biCardTxt p { font-size: 12.5px; -webkit-line-clamp: 2; } .WP_biCardArrow { width: 38px; height: 38px; } .WP_biCardArrow .WP_icon { width: 15px; height: 15px; } .WP_biDots { margin-top: 14px; } .WP_biDots button { width: 28px; height: 6px; } .WP_biDots button.WP_on { width: 34px; } } /* ---------- /01 Brand Introduction 01 品牌介绍 ---------- */ /* Soft seams 关于我们 */ :root { --seam-lg: clamp(96px, 9vw, 156px); /* Seam height 板块间 */ } /* S Tabs 页签 */ .WP_cult::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; z-index: 2; height: clamp(96px, 8.5vw, 148px); background: url("../svg/wave-soft-top.svg") center top / 100% 100% no-repeat; pointer-events: none; } /* S Brand 品牌文化 */ .WP_cult { padding-bottom: var(--seam-lg); } .WP_cult::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2; height: clamp(96px, 8.5vw, 148px); background: url("../svg/wave-soft-bottom.svg") center bottom / 100% 100% no-repeat; pointer-events: none; } /* Brand History 品牌历程 */ .WP_hist { position: relative; isolation: isolate; padding-top: var(--seam-lg); padding-bottom: clamp(48px, 4.5vw, 76px); } .WP_hist::before, .WP_hist::after { content: ''; position: absolute; left: 0; right: 0; z-index: -1; height: var(--seam-lg); pointer-events: none; } .WP_hist::before { top: 0; background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, .8) 34%, rgba(255, 255, 255, 0) 100%); } .WP_hist > .WP_container { position: relative; z-index: 1; } /* Brand Honors 品牌荣誉 */ .WP_honor::before { content: ''; position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: clamp(72px, 7vw, 116px); background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, .62) 40%, rgba(255, 255, 255, 0) 100%); pointer-events: none; } @media (max-width: 767px) { :root { --seam-lg: clamp(64px, 16vw, 96px); } .WP_cult { padding-bottom: var(--seam-lg); } .WP_cult::after { height: clamp(64px, 15vw, 96px); background-size: 230% 100%; } .WP_bgLayer--cult { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--bg-feather), #000 calc(100% - 170px), transparent calc(100% - 90px)); mask-image: linear-gradient(180deg, transparent 0, #000 var(--bg-feather), #000 calc(100% - 170px), transparent calc(100% - 90px)); } .WP_hist { padding-top: var(--seam-lg); padding-bottom: 40px; } /* px 底距收窄 */ .WP_honor::before { height: clamp(48px, 13vw, 76px); } } /* ---------- /Soft seams 柔和接缝 ---------- */ /* Background 关于我们 */ :root { --bg-feather: clamp(72px, 7vw, 120px); } .WP_cult, .WP_honor { isolation: isolate; } .WP_bgLayer { position: absolute; inset: 0; z-index: -1; background-position: center center; background-size: cover; background-repeat: no-repeat; transform: translate3d(0, var(--par, 0px), 0); will-change: transform; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--bg-feather), #000 calc(100% - var(--bg-feather)), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 var(--bg-feather), #000 calc(100% - var(--bg-feather)), transparent 100%); } .WP_bgLayer--cult { background-image: url(/wp-content/uploads/about/culture-hero.webp); background-image: image-set(url("/wp-content/uploads/about/culture-hero.avif") type('image/avif'),url("/wp-content/uploads/about/culture-hero.webp") type('image/webp')); /* cover Keep 保留右侧 */ background-position: right center; /* Fade 提前归零 */ -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--bg-feather), #000 calc(100% - 300px), transparent calc(100% - 150px)); mask-image: linear-gradient(180deg, transparent 0, #000 var(--bg-feather), #000 calc(100% - 300px), transparent calc(100% - 150px)); } @media (max-width: 1024px) { .WP_bgLayer--cult { background-position: 86% center; } } /* Brand History 历程区改 */ .WP_bgLayer--hist2 { background-image: url(/wp-content/uploads/about/history-road.webp); background-image: image-set(url("/wp-content/uploads/about/history-road.avif") type('image/avif'),url("/wp-content/uploads/about/history-road.webp") type('image/webp')); background-position: center 62%; opacity: .88; /* Slightly 轻微减淡 */ } @media (max-width: 767px) { :root { --bg-feather: clamp(48px, 14vw, 84px); } .WP_bgLayer { transform: none; will-change: auto; } } @media (prefers-reduced-motion: reduce) { .WP_bgLayer { transform: none; will-change: auto; } } /* ---------- /Background layers 背景图层 ---------- */ /* Numbered 关于我们 */ .WP_numHead { display: flex; align-items: center; gap: clamp(14px, 1.4vw, 22px); text-align: left; } .WP_numNo { flex: 0 0 auto; font-family: var(--font-head); font-weight: 700; line-height: .92; font-size: clamp(44px, 3.8vw, 64px); letter-spacing: .01em; color: var(--brand-primary); } .WP_numRule { width: 1px; align-self: stretch; background: rgba(0, 61, 43, .26); } .WP_numTxt { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .WP_numEyebrow { font-family: var(--font-head); font-size: clamp(11px, .85vw, 13px); font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--text-muted); } .WP_numTxt h2 { margin: 0; color: var(--ink); font-family: var(--font-head); font-weight: 700; font-size: clamp(26px, 2.3vw, 38px); line-height: 1.15; /* align-items 章节头文字 */ max-width: 100%; } .WP_numHead--onDark .WP_numNo { color: rgba(255, 255, 255, .95); } .WP_numHead--onDark .WP_numRule { background: rgba(255, 255, 255, .38); } .WP_numHead--onDark .WP_numEyebrow { color: rgba(255, 255, 255, .68); } .WP_numHead--onDark .WP_numTxt h2 { color: #fff; } /* px px 品牌文化 */ .WP_cultHead .WP_numNo { font-size: clamp(48px, 4.7vw, 68px); } .WP_cultHead .WP_numEyebrow { letter-spacing: .3em; font-size: 13px; } .WP_cultHead .WP_numTxt h2 { font-size: clamp(28px, 2.9vw, 42px); } /* Honors 荣誉区头部 */ .WP_honorHead { text-align: center; padding-top: clamp(40px, 3.6vw, 60px); } /* Sections 章节头整体 */ .WP_histHead .WP_numHead, .WP_honorHead .WP_numHead { justify-content: center; text-align: center; } .WP_histHead .WP_numTxt, .WP_honorHead .WP_numTxt { align-items: center; } @media (max-width: 767px) { .WP_numHead { gap: 12px; } .WP_honorHead { padding-top: 100px; } /* px 底距 */ /* JS fit 手机端长词 */ .WP_numTxt h2 { hyphens: auto; overflow-wrap: break-word; } .WP_numEyebrow { letter-spacing: .2em; hyphens: none; } } /* Numbered 编号版块 */ /* Brand film 全屏品牌 */ .WP_film.WP_filmFull { position: relative; isolation: isolate; overflow: hidden; width: 100%; height: 100svh; min-height: 650px; background: #EAF1EE; } .WP_filmPoster { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; } .WP_filmPoster--m { display: none; } /* Video 视频视口 */ .WP_filmView { position: absolute; inset: 0; z-index: 0; } /* WP_film 视口中央大 */ .WP_film .WP_filmPlay--stage { display: none; } /* Left dark 左侧局部 */ .WP_filmShade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(0, 25, 18, .48) 0%, rgba(0, 25, 18, .16) 46%, transparent 72%); } /* S Same 顶部白色 */ .WP_film.WP_filmFull::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; z-index: 2; height: clamp(72px, 6.5vw, 110px); background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, .55) 38%, rgba(255, 255, 255, 0) 100%); pointer-events: none; } /* Inline 内嵌播放：容器仅做定位，缓冲玻璃由 .WP_filmLoader 全覆盖提供（避免双层叠加过暗） */ .WP_filmInline { position: absolute; inset: 0; z-index: 2; } /* While playing 播放 */ .WP_film.WP_filmPlaying .WP_filmView { z-index: 5; } /* vw 桌面 */ .WP_filmBox { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* 桌面 contain 完整显示：视频完整不裁切；上下空带由播放态藏海报 + 区块深色底处理（见 .WP_filmPlaying 规则） */ .WP_filmInline--cover .WP_filmBox { height: min(56.25vw, 100svh); width: calc(min(56.25vw, 100svh) * 16 / 9); background: rgba(0, 22, 15, .42); overflow: hidden; } /* 播放态：藏海报与顶部白色渐变/底部扇形边，区块转深色底 → 空带干净无鬼影，视频完整可见 */ .WP_filmPoster { transition: opacity .45s ease; } .WP_film.WP_filmPlaying { background: #06170F; } .WP_film.WP_filmPlaying .WP_filmPoster { opacity: 0; } .WP_film.WP_filmPlaying::before, .WP_film.WP_filmPlaying::after { opacity: 0; transition: opacity .45s ease; } /* iframe YT 属性填充 */ .WP_filmBox iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; transition: opacity .45s ease; } /* section top 返回按钮 */ .WP_filmInlineClose { position: absolute; z-index: 6; top: 104px; right: 24px; display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, .45); border-radius: 50%; background: rgba(0, 20, 14, .55); color: #fff; cursor: pointer; transition: background .25s ease; } .WP_filmInlineClose .WP_icon { width: 20px; height: 20px; } .WP_filmInlineClose:hover { background: #006D3D; } .WP_film.WP_filmPlaying .WP_filmInlineClose { display: grid; } /* px YT 透明点击 */ .WP_filmTap { position: absolute; left: 0; right: 0; top: 0; bottom: 64px; z-index: 3; background: transparent; cursor: pointer; } /* S CLICK 底部白色 */ .WP_film.WP_filmFull::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2; height: 21px; background: /* Hairline 内金压线 */ linear-gradient(#C9A45C, #C9A45C) 0 calc(100% - 12px) / 100% 1.5px no-repeat, /* Scalloped 扇形圆齿 */ radial-gradient(circle 13.2px at 50% -2.2px, #ffffff 12.5px, rgba(255, 255, 255, 0) 13.2px) 0 100% / 26px 11px repeat-x, /* Very narrow white band (~9px). 极窄白带。 */ linear-gradient(#ffffff, #ffffff) 0 0 / 100% calc(100% - 12px) no-repeat; pointer-events: none; } /* Top-left 左上角栏目 */ .WP_filmHead { position: absolute; z-index: 3; left: 5%; top: 12%; display: flex; align-items: center; gap: 20px; } .WP_filmNo { flex: 0 0 auto; color: #006D3D; font-family: var(--font-head); font-size: 68px; font-weight: 700; line-height: .9; } .WP_filmRule { flex: 0 0 auto; width: 1px; height: 65px; background: rgba(0, 109, 61, .5); } .WP_filmHeadTxt { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .WP_filmEyebrow { color: rgba(255, 255, 255, .88); font-family: var(--font-head); font-size: 14px; font-weight: 500; letter-spacing: 4px; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0, 20, 14, .35); } .WP_filmHeadTxt h2 { margin: 0; color: #FFFFFF; font-family: var(--font-head); font-size: 38px; font-weight: 700; line-height: 1.15; text-shadow: 0 2px 14px rgba(0, 20, 14, .4); } /* ---- Left main copy 左侧主文案 ---- */ .WP_filmHero { position: absolute; z-index: 3; left: 9%; top: 34%; max-width: 640px; } /* 中部偏上 */ .WP_filmKicker { display: block; color: rgba(255, 255, 255, .88); font-family: var(--font-head); font-size: 13px; font-weight: 500; letter-spacing: 3.5px; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0, 20, 14, .4); } /* Ticks 装饰短线 */ .WP_filmLines { display: flex; align-items: center; margin-top: 14px; } .WP_filmLines i { display: block; width: 32px; height: 1px; background: #006D3D; } .WP_filmTitle { margin: 22px 0 0; max-width: 7.4em; /* 锁定两行：Where Quality / Takes Shape. */ color: #FFFFFF; font-family: var(--font-head); font-size: 64px; font-weight: 400; line-height: 1.05; letter-spacing: -1.5px; text-transform: capitalize; text-wrap: balance; text-shadow: 0 2px 16px rgba(0, 20, 14, .45); } .WP_filmIntro { margin: 18px 0 0; color: rgba(255, 255, 255, .92); font-size: 19px; line-height: 1.35; text-shadow: 0 1px 8px rgba(0, 20, 14, .4); } /* ---- 播放按钮、WATCH BRAND FILM ---- */ .WP_filmCta { display: flex; align-items: center; gap: 24px; margin-top: 34px; } .WP_filmPlay { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 82px; height: 82px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; transition: transform .25s ease, filter .25s ease; } /* SVG 渐变徽章 */ .WP_filmPlay img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 10px 24px rgba(0, 71, 46, .38)); } /* 呼吸波纹 */ .WP_filmPlay::before, .WP_filmPlay::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(0, 135, 90, .5); pointer-events: none; animation: WP_filmPulse 2.2s ease-out infinite; } .WP_filmPlay::after { animation-delay: 1.1s; } @keyframes WP_filmPulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } } .WP_filmPlay:hover { transform: scale(1.07); filter: brightness(1.08); } .WP_filmPlay:focus-visible { outline: 2px solid #00875A; outline-offset: 4px; } .WP_filmWatch { color: #FFFFFF; font-family: var(--font-head); font-size: 14px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0, 20, 14, .4); } .WP_filmError { margin: 18px 0 0; max-width: 440px; padding: 12px 16px; border-radius: 8px; background: rgba(255, 255, 255, .9); color: #244A3B; font-size: 14px; line-height: 1.6; box-shadow: 0 6px 20px rgba(0, 40, 25, .1); } .WP_filmError a { color: #006D3D; font-weight: 600; text-underline-offset: 3px; } /* iframe cover 全屏视频 */ .WP_filmModal { position: fixed; inset: 0; z-index: 9999; background: linear-gradient(165deg, rgba(0, 48, 31, .60) 0%, rgba(0, 26, 18, .68) 52%, rgba(0, 11, 7, .74) 100%); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10); } .WP_filmModal[hidden] { display: none; } .WP_filmFrame { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max(100vw, 177.78vh); /* cover 取宽高覆盖 */ height: max(56.25vw, 100vh); background: transparent; overflow: hidden; } .WP_filmFrame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; transition: opacity .45s ease; } /* Loader 缓冲玻璃层：全尺寸覆盖 iframe（YT 未加载时内部为纯黑），模糊透光，开始播放后整层隐藏 */ .WP_filmLoader { position: absolute; inset: 0; z-index: 4; pointer-events: none; display: grid; place-items: center; background: linear-gradient(165deg, rgba(0, 48, 31, .55) 0%, rgba(0, 26, 18, .62) 55%, rgba(0, 11, 7, .68) 100%); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10); } .WP_filmLoader[hidden] { display: none; } .WP_filmSpin { width: 48px; height: 48px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .16); border-top-color: #82B59D; animation: WP_filmSpin .9s linear infinite; } @keyframes WP_filmSpin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .WP_filmSpin { animation-duration: 2.4s; } } .WP_filmClose { position: absolute; z-index: 6; top: 96px; right: 24px; /* Offset 避开页头 */ display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, .45); border-radius: 50%; background: rgba(0, 20, 14, .5); color: #fff; cursor: pointer; transition: background .25s ease; } .WP_filmClose .WP_icon { width: 20px; height: 20px; } .WP_filmClose:hover { background: #006D3D; } /* 弹层打开时 */ html.WP_filmLock, html.WP_filmLock body { overflow: hidden; } /* WP_in 入场 */ .WP_filmHead, .WP_filmKicker, .WP_filmLines, .WP_filmTitle, .WP_filmIntro, .WP_filmCta { transition: none; } /* 内嵌播放中 */ .WP_film.WP_filmPlaying .WP_filmHead, .WP_film.WP_filmPlaying .WP_filmKicker, .WP_film.WP_filmPlaying .WP_filmLines, .WP_film.WP_filmPlaying .WP_filmTitle, .WP_film.WP_filmPlaying .WP_filmIntro, .WP_film.WP_filmPlaying .WP_filmCta, .WP_film.WP_filmPlaying .WP_filmShade { opacity: 0; pointer-events: none; transition: opacity .45s ease; } @media (max-width: 1199px) { .WP_filmTitle { font-size: 48px; letter-spacing: -1px; } .WP_filmHead { left: 6%; } .WP_filmHero { left: 6%; } } @media (max-width: 767px) { /* Mobile white 手机端 */ .WP_film.WP_filmFull { display: flex; flex-direction: column; align-items: center; height: auto; min-height: 0; padding: 88px 20px 28px; background: #fff; } /* Mobile 手机端白底 */ .WP_film.WP_filmFull::before, .WP_film.WP_filmFull::after { display: none; } /* 01 page head . 01 页头。 */ .WP_filmHead { position: static; order: 1; justify-content: center; gap: 12px; } .WP_filmNo { font-size: 42px; } .WP_filmRule { height: 44px; background: rgba(0, 61, 43, .26); } .WP_filmHeadTxt { align-items: center; gap: 4px; } .WP_filmEyebrow { color: #7C9187; font-size: 10px; letter-spacing: 3px; text-shadow: none; } .WP_filmHeadTxt h2 { color: #202525; font-size: 26px; text-shadow: none; } /* hero flex 标题文案 */ .WP_filmHero { display: contents; } .WP_filmKicker { order: 2; margin-top: 18px; color: #7C9187; font-size: 11px; letter-spacing: 3px; text-align: center; text-shadow: none; } .WP_filmLines { order: 3; justify-content: center; margin-top: 10px; } .WP_filmTitle { order: 4; margin-top: 14px; max-width: 9em; color: #202525; font-size: 32px; line-height: 1.12; letter-spacing: -.5px; text-align: center; text-shadow: none; } /* Mobile 视频视口 */ .WP_filmView { position: relative; inset: auto; order: 5; align-self: stretch; width: 100vw; margin-left: calc(50% - 50vw); height: 66.63vw; margin-top: 22px; overflow: hidden; background: #EAF1EE; } /* Inline 内嵌播放 */ .WP_filmInline { position: absolute; inset: 0; z-index: 2; } .WP_filmBox { width: 100vw; height: 56.25vw; } /* iframe 透明点击层 */ .WP_filmTap { bottom: calc((66.63vw - 56.25vw) / 2 + 56px); } /* 播放态视口收紧到正好 16:9：视频铺满，上下不再露出海报残影 */ .WP_film.WP_filmPlaying .WP_filmView { height: 56.25vw; } .WP_film.WP_filmPlaying .WP_filmTap { bottom: 56px; } /* Mobile 手机端返回 */ .WP_filmInlineClose { top: 12px; right: 12px; width: 40px; height: 40px; } .WP_filmInlineClose .WP_icon { width: 18px; height: 18px; } /* Mobile keeps 手机端文档 */ .WP_film.WP_filmPlaying .WP_filmHead, .WP_film.WP_filmPlaying .WP_filmKicker, .WP_film.WP_filmPlaying .WP_filmLines, .WP_film.WP_filmPlaying .WP_filmTitle, .WP_film.WP_filmPlaying .WP_filmIntro { opacity: 1; } .WP_filmInline iframe, .WP_filmView > iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; } .WP_filmPoster--d { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .WP_filmPoster--m { display: none; } .WP_filmShade { background: linear-gradient(180deg, rgba(0, 25, 18, .10) 0%, rgba(0, 25, 18, 0) 42%, rgba(0, 25, 18, .10) 100%); } .WP_film .WP_filmPlay--stage { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; z-index: 2; width: 96px; height: 96px; background: transparent; transition: opacity .4s ease; } /* Inline 按钮淡出 */ .WP_film.WP_filmPlaying .WP_filmPlay--stage { opacity: 0; pointer-events: none; } .WP_film .WP_filmPlay--stage img { filter: drop-shadow(0 14px 30px rgba(0, 71, 46, .45)); } .WP_film .WP_filmPlay--stage:hover { transform: translate(-50%, -50%) scale(1.05); } /* remaining 其余文案 */ .WP_filmIntro { order: 6; margin-top: 20px; color: #566B63; font-size: 15px; line-height: 1.65; text-align: center; text-shadow: none; } /* CTA 视口中央大 */ .WP_filmCta { display: none; } .WP_filmError { order: 8; } .WP_filmModal { padding: 0; } .WP_filmClose { top: calc(60px + env(safe-area-inset-top)); right: 16px; } } @media (prefers-reduced-motion: reduce) { .WP_filmHead, .WP_filmKicker, .WP_filmLines, .WP_filmTitle, .WP_filmIntro, .WP_filmCta { transition: none; opacity: 1; transform: none; } .WP_filmPlay { transition: none; } .WP_filmPlay::before, .WP_filmPlay::after { animation: none; opacity: 0; } } /* ---- Responsive sources (brand carousel) 品牌轮播图按视口分档 ---- */ /* 桌面/平板/手机各取匹配宽度的副本，避免 1920w 原图铺满小容器。 Breakpoints are exclusive so they never fight the ≤767 block above. */ @media (min-width: 1440px) and (max-width: 1679px) { .WP_biPic { background-image: image-set(url("/wp-content/uploads/about/brand-hero-2-1600x595.avif") type('image/avif'),url("/wp-content/uploads/about/brand-hero-2-1600x595.webp") type('image/webp')); } } @media (min-width: 768px) and (max-width: 1439px) { .WP_biPic { background-image: image-set(url("/wp-content/uploads/about/brand-hero-2-1280x476.avif") type('image/avif'),url("/wp-content/uploads/about/brand-hero-2-1280x476.webp") type('image/webp')); } } @media (max-width: 767px) { .WP_biPic { background-image: image-set(url("/wp-content/uploads/about/brand-hero-2-800x298.avif") type('image/avif'),url("/wp-content/uploads/about/brand-hero-2-800x298.webp") type('image/webp')); } } /* ===================== v2-product.css 产品 v2 Products v2 ===================== */ /* 产品模板 */ /* product 产品归档页 */ /* ---- Archive header 归档页头 ---- */ .WP_parchiveHero { background: #fff; border-bottom: 1px solid #d1d5db; margin: 0 0 32px; padding: 48px; } .WP_parchiveHero h1 { color: #1e293b; font-size: 28px; font-weight: 600; line-height: 1.4; margin: 0 0 10px; } .WP_parchiveHeroSub { color: #334155; font-size: 16px; font-weight: 600; margin: 0; } /* ---- /Archive header 归档页头 ---- */ /* ---- Product grid 产品网格 ---- */ .WP_pgrid2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; background: transparent; padding-bottom: 8px; } .WP_pcard2 { background: #fff; border: 1px solid #ececec; border-radius: 14px; overflow: hidden; margin: 0; min-width: 0; display: flex; flex-direction: column; box-shadow: 0 2px 10px rgba(15, 23, 42, .05); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .WP_pcard2:hover { transform: translateY(-5px); border-color: rgba(0, 109, 61, .35); box-shadow: 0 14px 30px rgba(15, 23, 42, .12); } .WP_pcard2Media { display: block; overflow: hidden; border-bottom: 1px solid #f1f1f1; } .WP_pcard2Media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .45s ease; } .WP_pcard2:hover .WP_pcard2Media img { transform: scale(1.06); } .WP_pcard2Body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1 1 auto; } .WP_pcard2Title { font-size: 19px; font-weight: 700; line-height: 1.35; margin: 0 0 10px; } .WP_pcard2Title a { color: #1e293b; transition: color .2s; } .WP_pcard2Title a:hover { color: var(--gold-dark, #00532f); } .WP_pcard2Excerpt { color: #5b6472; font-size: 15px; line-height: 1.65; margin: 0 0 18px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .WP_pcard2Foot { margin-top: auto; } .WP_pcard2More { display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px; border: 1.5px solid var(--gold, #006d3d); border-radius: 999px; color: var(--gold-dark, #00532f); font-size: .86rem; font-weight: 700; letter-spacing: .02em; transition: background .2s, color .2s; } .WP_pcard2More span { transition: transform .2s; } .WP_pcard2More:hover { background: var(--gold, #006d3d); color: #fff; } .WP_pcard2More:hover span { transform: translateX(3px); } /* ---- /Product grid 产品网格 ---- */ /* ---- Pagination 分页 ---- */ .WP_ppager { display: flex; flex-wrap: wrap; align-items: center; /* 垂直居中 */ justify-content: center; padding: 32px 0; margin: 0; text-align: center; } .WP_ppager .page-numbers { display: inline-grid; place-items: center; min-width: 39.8px; height: 39.8px; padding: 0 8px; margin: 0 2px; border: 0; border-radius: 0; background: none; color: #00532f; font-family: inherit; font-size: 17px; font-weight: 400; vertical-align: middle; } .WP_ppager .page-numbers.current, .WP_ppager .page-numbers:hover { background: var(--gold, #006d3d); color: #fff; } .WP_ppager .page-numbers.next, .WP_ppager .page-numbers.prev { padding: 0 12px; } /* ---- /Pagination 分页 ---- */ /* ---- Responsive 响应式 ---- */ @media (max-width: 920px) { .WP_pgrid2 { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media (max-width: 544px) { .WP_pgrid2 { gap: 16px; } .WP_parchiveHero { padding: 48px; } .WP_parchiveHero h1 { font-size: 28px; } .WP_pgrid2 { grid-template-columns: 1fr; } .WP_pcard2Title { font-size: 17.5px; margin: 0 0 10.5px; } .WP_pcard2Meta { font-size: 11.375px; margin: 22.7px 0 13.6px; } .WP_ppager .page-numbers { min-width: 33px; height: 33px; font-size: 14.5px; margin: 0 1px; } .WP_ppager .page-numbers.next, .WP_ppager .page-numbers.prev { padding: 0 6px; } .WP_ppager .page-numbers.first, .WP_ppager .page-numbers.last { padding: 0 5px; } .WP_pagerArrow { width: 15px; height: 15px; } } @media (min-width: 1025px) { .WP_parchiveHero { max-width: 1200px; margin: 32px auto; } .WP_parchiveHero h1 { font-size: 32px; } } /* ---- /Responsive 响应式 ---- */ /* v3 Products 产品页 */ /* Hero 裁剪定义 SVG 容器：不占位、不参与布局（原内联 style） */ .WP_pdDefs { position: absolute; overflow: hidden; } /* Detail hero banner 详情页横幅：仅手机端显示 */ @media (min-width: 768px) { .WP_prodHeroM { display: none; } } /* 手机端首屏内面包屑隐藏（顶部横幅 crumb 条已有），桌面端正常显示 */ @media (max-width: 767px) { .WP_pd .WP_pdInfo .WP_breadcrumb { display: none; } } /* Hero Desktop 桌面端取景 */ @media (min-width: 768px) { .WP_prodHero .WP_aboutHeroBg { background-position: 18% center; } } /* Category 分类筛选 */ .WP_pcatBar { padding: 44px 0 8px; } .WP_pcatCards { display: flex; gap: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 2px 12px; } .WP_pcatCards::-webkit-scrollbar { display: none; } .WP_pcatCard { flex: 1 0 auto; min-width: 225px; display: flex; align-items: center; gap: 13px; background: #fff; border: 1px solid #e5ece7; border-radius: 13px; padding: 15px 16px; text-decoration: none; color: #17352c; box-shadow: 0 6px 20px rgba(0, 50, 30, .05); transition: transform .3s ease-out, box-shadow .3s ease-out, background-color .3s ease-out, border-color .3s ease-out; } .WP_pcatCard:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0, 50, 30, .1); } .WP_pcatIc { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; background: #eaf4ee; color: #006d3d; display: flex; align-items: center; justify-content: center; transition: background-color .3s ease-out, color .3s ease-out; } .WP_pcatIc svg { width: 26px; height: 26px; display: block; } .WP_pcatBody { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .WP_pcatBody strong { font-size: 15.5px; font-weight: 700; line-height: 1.25; } .WP_pcatBody em { font-style: normal; font-size: 12.5px; color: #68756f; transition: color .3s ease-out; } .WP_pcatGo { flex: 0 0 auto; margin-left: auto; width: 30px; height: 30px; color: #006d3d; opacity: .75; display: flex; align-items: center; justify-content: center; transition: transform .3s ease-out, color .3s ease-out, opacity .3s ease-out; } .WP_pcatGo svg { width: 18px; height: 18px; } .WP_pcatCard.WP_on { background: #006d3d; border-color: #006d3d; color: #fff; box-shadow: 0 12px 28px rgba(0, 109, 61, .28); } .WP_pcatCard.WP_on .WP_pcatIc { background: rgba(255, 255, 255, .16); color: #fff; } .WP_pcatCard.WP_on .WP_pcatBody em { color: rgba(255, 255, 255, .75); } .WP_pcatCard.WP_on .WP_pcatGo { color: #fff; opacity: 1; } .WP_pcatCard.WP_on:hover { transform: none; } @media (min-width: 992px) { .WP_pcatCards { display: grid; grid-template-columns: repeat(5, 1fr); overflow: visible; } .WP_pcatCard { min-width: 0; padding: 16px 14px; } .WP_pcatBody strong { font-size: 14.5px; } } @media (min-width: 768px) and (max-width: 991px) { .WP_pcatCards { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; } } /* ---- /Category filter cards 分类筛选卡 ---- */ /* ---- Product gallery 产品网格 ---- */ .WP_pgal { padding: 40px 0 64px; } .WP_pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .WP_pcard { background: #fff; border: 1px solid #e5ece7; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 28px rgba(0, 50, 30, .06); transition: transform .3s ease-out, box-shadow .3s ease-out; display: flex; flex-direction: column; } .WP_pcard:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(0, 50, 30, .13); } .WP_pcard.WP_hide { display: none; } /* Fade-in 筛选 */ @keyframes WP_pcardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .WP_pcard.WP_in { animation: WP_pcardIn .45s ease-out both; } .WP_pcardMedia { display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #f2f7f4; } .WP_pcardMedia img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease-out; } .WP_pcard:hover .WP_pcardMedia img { transform: scale(1.04); } .WP_pcardBody { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px 22px 22px; } .WP_pcardIdx { font-family: var(--font-head, inherit); font-size: 12.5px; font-weight: 700; letter-spacing: 2px; color: #829b8d; } .WP_pcardTitle { margin: 6px 0 0; } .WP_pcardTitle a { color: #17352c; text-decoration: none; font-size: clamp(18px, 1.35vw, 21px); font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .3s ease-out; } .WP_pcardTitle a:hover { color: #006d3d; } .WP_pcardText { margin: 9px 0 0; color: #68756f; font-size: 15px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1 1 auto; } .WP_pcardMore { margin-top: 16px; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; color: #006d3d; text-decoration: none; font-size: 14.5px; font-weight: 650; } .WP_pcardMore span:first-child { border-bottom: 1px solid transparent; transition: border-color .3s ease-out; } .WP_pcardMore:hover span:first-child { border-color: #006d3d; } .WP_pcardArrow { width: 34px; height: 34px; border-radius: 50%; background: #eaf4ee; color: #006d3d; display: flex; align-items: center; justify-content: center; transition: transform .3s ease-out, background-color .3s ease-out, color .3s ease-out; } .WP_pcardArrow svg { width: 17px; height: 17px; } .WP_pcard:hover .WP_pcardArrow { transform: translateX(4px); background: #006d3d; color: #fff; } /* ---- /Product gallery 产品图集 ---- */ /* Empty state 空状态加载 */ .WP_pempty { margin: 30px auto 0; max-width: 560px; text-align: center; color: #68756f; font-size: 15.5px; line-height: 1.6; padding: 44px 24px; border: 1px dashed #dbe5de; border-radius: 14px; background: #f7f9f7; } .WP_pmoreWrap { display: flex; justify-content: center; margin-top: 40px; } .WP_pmoreBtn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 34px; border-radius: 999px; background: #fff; color: #006d3d; border: 1.5px solid #006d3d; font-size: 15px; font-weight: 700; cursor: pointer; transition: background-color .3s ease-out, color .3s ease-out, box-shadow .3s ease-out, transform .3s ease-out; } .WP_pmoreBtn svg { width: 18px; height: 18px; } .WP_pmoreBtn:hover { background: #006d3d; color: #fff; box-shadow: 0 12px 28px rgba(0, 109, 61, .28); transform: translateY(-2px); } .WP_pmoreBtn[disabled] { opacity: .6; cursor: default; transform: none; } /* Empty state 空状态加载 */ /* ---- Quote CTA 询盘转化 CTA ---- */ .WP_pcta { padding: 8px 0 72px; } .WP_pctaIn { position: relative; overflow: hidden; background: #004d32; border-radius: 20px; padding: 46px 56px; display: flex; align-items: center; justify-content: space-between; gap: 36px; } /* Faint 极淡建筑 */ .WP_pctaIn::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 62%, rgba(255, 255, 255, .05) 62.2%, rgba(255, 255, 255, .05) 62.6%, transparent 62.8%), linear-gradient(115deg, transparent 72%, rgba(255, 255, 255, .045) 72.2%, rgba(255, 255, 255, .045) 72.7%, transparent 72.9%), linear-gradient(115deg, transparent 82%, rgba(255, 255, 255, .04) 82.2%, rgba(255, 255, 255, .04) 82.8%, transparent 83%); } .WP_pctaCopy { position: relative; max-width: 720px; } .WP_pctaCopy h2 { margin: 0; color: #fff; font-size: clamp(24px, 2.2vw, 32px); font-weight: 700; line-height: 1.25; } .WP_pctaCopy p { margin: 12px 0 0; color: rgba(255, 255, 255, .78); font-size: 15.5px; line-height: 1.6; } .WP_pctaBtn { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; background: #fff; color: #004d32; padding: 15px 32px; border-radius: 999px; text-decoration: none; font-size: 15.5px; font-weight: 700; box-shadow: 0 10px 26px rgba(0, 30, 20, .25); transition: transform .3s ease-out, box-shadow .3s ease-out; } .WP_pctaBtn svg { width: 18px; height: 18px; } .WP_pctaBtn:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0, 30, 20, .35); } /* ---- /Quote CTA 询盘入口 ---- */ /* ---- Responsive 响应式 ---- */ @media (max-width: 1024px) { .WP_pgrid { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media (max-width: 767px) { .WP_pcatBar { padding: 30px 0 4px; } .WP_pgal { padding: 28px 0 52px; } .WP_pgrid { grid-template-columns: 1fr; gap: 16px; } .WP_pcardBody { padding: 16px 18px 18px; } .WP_pcardTitle a { font-size: 18.5px; } .WP_pcardText { font-size: 14px; } .WP_pcatCard { padding: 12px 14px; min-width: 210px; } .WP_pcta { padding: 4px 0 56px; } .WP_pctaIn { flex-direction: column; align-items: flex-start; padding: 34px 24px 36px; border-radius: 16px; } } /* Respect 克制动画 */ @media (prefers-reduced-motion: reduce) { .WP_pcard, .WP_pcardMedia img, .WP_pcardArrow, .WP_pcatCard, .WP_pcatIc, .WP_pmoreBtn, .WP_pctaBtn { transition: none !important; } .WP_pcard:hover { transform: none; } .WP_pcard.WP_in { animation: none; } } /* ---- /Responsive 响应式 ---- */ /* ===================== v2-blog.css 新闻 v2 Blog v2 ===================== */ /* v2-blog.css 归档页文章 — V4 三层编辑式布局：分屏主推 + 双精选 + 三栏卡片 */ /* ---------- Shared tokens 共用变量 ---------- */ .WP_newsBanner, .WP_newsMain, .WP_postWrap { --v2-gold: #00532f; --v2-gold-deep: #004d2b; --nb-green: #075b3c; --nb-green-2: #0b8054; --nb-ink: #202522; --nb-mut: #777777; --nb-line: #eaf0ec; --nb-body: 'Titillium Web', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* ---------- /Shared tokens 共用变量 ---------- */ /* ---------- /news/ banner 列表页横幅 ---------- */ .WP_newsBanner { background: linear-gradient(90deg, var(--gold-accent) 0%, var(--gold-deep) 100%); } .WP_newsBannerIn { padding: min(4vw, 58px) 0; } .WP_newsBannerTitle { margin: 0; font-family: var(--nb-body); font-size: 35px; font-weight: 700; line-height: 1.4; color: #3d3d3d; } /* ---------- //news/ banner 新闻页横幅 ---------- */ /* ---------- 主容器（1440 宽） ---------- */ .WP_newsMainIn { width: min(1440px, 92vw); padding: min(3vw, 46px) 0 60px; } /* margin Pager 分页：上下留白统一 30px（与案例页分页一致），容器底部归零避免叠加 */ .WP_newsPager { margin-top: 0; padding: 30px 0; } .WP_newsMainIn:has(.WP_newsPager) { padding-bottom: 0; } .WP_newsMain:has(.WP_newsPager) { padding-bottom: 0; } .WP_newsPager .page-numbers { font-family: var(--nb-body); } /* ---------- /主容器 ---------- */ /* ---------- Layer 1 精选轮播：左文右图，斜切过渡 ---------- */ .WP_nhero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-height: 400px; background: radial-gradient(420px 320px at 0% 108%, rgba(11, 128, 84, .06), transparent 68%), #fbfdfc; border: 1px solid var(--nb-line); border-radius: 20px; overflow: hidden; font-family: var(--nb-body); } /* 轮播页：同格叠放，透明度切换 */ .WP_nheroSlide { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; } .WP_nheroSlide.is-active { opacity: 1; visibility: visible; transition: opacity .7s ease; } /* 轮播圆点（图片区底部居中，透明背景） */ .WP_nheroNav { position: absolute; left: calc(38% + 31%); bottom: 18px; z-index: 4; display: flex; align-items: center; transform: translateX(-50%); } .WP_nheroDots { display: flex; align-items: center; gap: 8px; padding: 4px 2px; } .WP_nheroDots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: rgba(255, 255, 255, .55); box-shadow: 0 1px 4px rgba(8, 32, 22, .28); transition: width .3s, background .3s; } .WP_nheroDots button.on { width: 22px; background: var(--nb-green-2); } .WP_nheroDots button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* 斜切：图片容器 clip 成斜边（上窄下宽） */ .WP_nheroCopy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 34px 40px 34px 36px; position: relative; z-index: 2; } .WP_nheroTag { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--nb-green-2); font-size: 11.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; } .WP_nheroTag::before { content: ""; width: 26px; height: 2px; border-radius: 1px; background: var(--nb-green-2); } .WP_nheroTitle { margin: 0 0 12px; font-size: 30px; font-weight: 700; line-height: 1.25; color: var(--nb-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .WP_nheroTitle a { color: var(--nb-ink); transition: color .25s; } .WP_nheroTitle a:hover { color: var(--nb-green); } .WP_nheroEx { margin: 0 0 16px; font-size: 15px; line-height: 1.65; color: var(--nb-mut); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .WP_nheroMeta { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; color: #4a554f; font-size: 13.5px; } .WP_nheroMeta .WP_icon { width: 14px; height: 14px; opacity: .75; } .WP_nheroDate, .WP_nheroRead { display: inline-flex; align-items: center; gap: 7px; } .WP_nheroSep { width: 1px; height: 13px; background: #d7e2db; } /* 英文页隐藏前缀（8 min read），其他语言保留（閱讀約 8 分鐘） */ html[lang="en"] .WP_rtPre { display: none; } .WP_nheroBtn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 26px; background: var(--nb-green); color: #fff; border-radius: 30px; font-size: 14px; font-weight: 700; line-height: 1; box-shadow: 0 10px 24px rgba(7, 91, 60, .26); transition: background .25s, transform .25s, box-shadow .25s; } .WP_nheroBtn .WP_icon { width: 15px; height: 15px; transition: transform .25s; } .WP_nheroBtn:hover { background: var(--nb-green-2); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(11, 128, 84, .32); } .WP_nheroBtn:hover .WP_icon { transform: translateX(3px); } .WP_nheroMedia { position: relative; display: block; overflow: hidden; min-width: 0; background: #eef3f0; /* 图片矩形斜切：左边缘上窄下宽 */ clip-path: polygon(13% 0, 100% 0, 100% 100%, 0 100%); } .WP_nheroMedia img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.22, .61, .36, 1); } .WP_nhero:hover .WP_nheroMedia img { transform: scale(1.04); } .WP_nheroPh { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #0b8054 0%, #075b3c 100%); } /* ---------- /Layer 1 主推 ---------- */ /* ---------- Layer 3 三栏资讯卡 ---------- */ .WP_ngrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 26px; font-family: var(--nb-body); } .WP_ngcard { position: relative; display: flex; flex-direction: column; padding: 10px 10px 6px; background: #fff; border: 1px solid var(--nb-line); border-radius: 16px; box-shadow: 0 6px 20px rgba(16, 36, 28, .05); transition: transform .3s, box-shadow .3s; } .WP_ngcard:hover { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(16, 36, 28, .11); } .WP_ngcardMedia { display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #eef3f0; } .WP_ngcardMedia img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s cubic-bezier(.22, .61, .36, 1); } .WP_ngcard:hover .WP_ngcardMedia img { transform: scale(1.06); } .WP_ngcardPh { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #0b8054 0%, #075b3c 100%); } .WP_ngcardBody { flex: 1; display: flex; flex-direction: column; padding: 16px 10px 10px; } .WP_ngcardCat { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px; color: var(--nb-green-2); font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .WP_ngcardCat .WP_icon { width: 13px; height: 13px; flex: 0 0 auto; } .WP_ngcardTitle { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.45; color: var(--nb-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .WP_ngcardTitle a { color: var(--nb-ink); transition: color .25s; } .WP_ngcardTitle a:hover { color: var(--nb-green); } .WP_ngcardFoot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 16px; } .WP_ngcardDate { display: inline-flex; align-items: center; gap: 7px; color: var(--nb-mut); font-size: 13px; } .WP_ngcardDate .WP_icon { width: 13px; height: 13px; } .WP_ngcardArr { display: grid; place-items: center; width: 32px; height: 32px; color: var(--nb-green-2); transition: color .25s, transform .25s; } .WP_ngcardArr .WP_icon { width: 18px; height: 18px; } .WP_ngcardArr:hover { color: var(--nb-green); transform: translateX(3px); } /* ---------- /Layer 3 三栏卡 ---------- */ /* ---------- Tablet 平板 ---------- */ @media (max-width: 1024px) { .WP_nhero { min-height: 360px; } .WP_nheroCopy { padding: 26px 28px; } .WP_nheroTitle { font-size: 25px; } .WP_nheroEx { font-size: 14px; } .WP_nheroSlide { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); } .WP_ngrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .WP_ngcardTitle { font-size: 17px; } } /* ---------- /Tablet 平板 ---------- */ /* ---------- Phone 手机 ---------- */ @media (max-width: 767px) { .WP_newsBannerIn { width: auto; max-width: none; padding: 15px 16px; } .WP_newsBannerTitle { font-size: 21px; } .WP_newsMainIn { width: auto; max-width: none; padding: 16px 16px 30px; } .WP_newsPager { margin-top: 0; padding: 30px 0; } /* 与案例页分页一致：上下 30px */ /* Match 产品页分页 */ .WP_newsPager .page-numbers { min-width: 33px; width: auto; height: 33px; font-size: 14.5px; border-radius: 0; margin: 0 1px; } .WP_newsPager .page-numbers.prev, .WP_newsPager .page-numbers.next { padding: 0 6px; } .WP_newsPager .page-numbers.first, .WP_newsPager .page-numbers.last { padding: 0 5px; } .WP_pagerArrow { width: 15px; height: 15px; } /* 主推：横排（文左图右）。16:9 为最小高度，长语言文案可自然撑高，按钮绝不裁切 */ .WP_nhero { min-height: calc((100vw - 32px) * 9 / 16); } .WP_nheroSlide { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); } .WP_nheroMedia { min-height: 0; } .WP_nheroNav { display: none; } .WP_nheroCopy { padding: 10px 12px 12px 14px; justify-content: center; } .WP_nheroTag { margin-bottom: 4px; font-size: 9px; letter-spacing: .14em; gap: 6px; } .WP_nheroTag::before { width: 12px; } .WP_nheroTitle { font-size: 15px; line-height: 1.25; margin-bottom: 5px; -webkit-line-clamp: 2; } .WP_nheroEx { margin-bottom: 6px; font-size: 11px; line-height: 1.45; -webkit-line-clamp: 2; } .WP_nheroMeta { margin-bottom: 8px; font-size: 10px; gap: 3px 7px; flex-wrap: wrap; } .WP_nheroMeta .WP_icon { width: 10px; height: 10px; } .WP_nheroSep { height: 9px; } .WP_nheroBtn { height: 32px; padding: 0 13px; font-size: 11px; gap: 6px; } .WP_nheroBtn .WP_icon { width: 10px; height: 10px; } .WP_nheroNav { bottom: 12px; } .WP_nheroDots { gap: 6px; } .WP_nheroDots button { width: 7px; height: 7px; } .WP_nheroDots button.on { width: 18px; background: var(--nb-green-2); } .WP_ngrid { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; } .WP_ngcard { border-radius: 14px; padding: 8px 8px 4px; } .WP_ngcardMedia { border-radius: 10px; } .WP_ngcardBody { padding: 14px 8px 8px; } .WP_ngcardTitle { font-size: 16px; } } /* ---------- /Phone 手机 ---------- */ /* ---------- Scroll reveal 滚动入场（新闻页，与产品页同款节奏） ---------- */ .WP_rvJs .WP_newsMain [data-rv], .WP_rvJs .WP_postWrap [data-rv], .WP_rvJs .WP_related [data-rv] { transition-duration: .65s; } .WP_rvJs .WP_newsMain [data-rv="fade-up"], .WP_rvJs .WP_postWrap [data-rv="fade-up"], .WP_rvJs .WP_related [data-rv="fade-up"] { transform: translate3d(0, 32px, 0); } .WP_rvJs .WP_newsMain [data-rv].WP_rvIn, .WP_rvJs .WP_postWrap [data-rv].WP_rvIn, .WP_rvJs .WP_related [data-rv].WP_rvIn { transform: translate3d(0, 0, 0); } @media (max-width: 767px) { .WP_rvJs .WP_newsMain [data-rv], .WP_rvJs .WP_postWrap [data-rv], .WP_rvJs .WP_related [data-rv] { transition-duration: .55s; } .WP_rvJs .WP_newsMain [data-rv="fade-up"], .WP_rvJs .WP_postWrap [data-rv="fade-up"], .WP_rvJs .WP_related [data-rv="fade-up"] { transform: translate3d(0, 20px, 0); } } /* ===================== hero.css 内页横幅 Inner-page hero ===================== */ /* hero.css 内页横幅 */ /* Unified 统一横幅 */ .WP_hero2, .WP_newsBanner, .WP_parchiveHero, .WP_cathero, .WP_postHero, .WP_archiveHero { box-sizing: border-box; min-height: 340px; display: flex; align-items: center; } /* flex Keep 横幅变成 */ .WP_newsBanner .WP_newsBannerIn { width: min(1280px, 84vw); margin: 0 auto; } .WP_archiveHero > .WP_container { width: 100%; } .WP_parchiveHero { flex-direction: column; justify-content: center; text-align: center; } /* Unified 统一横幅 */ /* Image-backed 图片横幅 */ .WP_parchiveHero, .WP_cathero, .WP_newsBanner, .WP_archiveHero { position: relative; background-size: cover; background-position: center; color: #fff; border-bottom: none; } .WP_parchiveHero::before, .WP_cathero::before, .WP_newsBanner::before, .WP_archiveHero::before { content: ""; position: absolute; inset: 0; background: #123527; opacity: .62; } .WP_parchiveHero h1, .WP_parchiveHero .WP_parchiveHeroSub, .WP_newsBanner .WP_newsBannerIn, .WP_archiveHero h1, .WP_cathero .WP_catheroInner { position: relative; z-index: 2; } .WP_parchiveHero h1, .WP_cathero .WP_catheroTitle { color: #fff; } .WP_parchiveHero .WP_parchiveHeroSub, .WP_cathero .WP_catheroSub { color: rgba(255, 255, 255, .88); } .WP_cathero .WP_catheroPoints li { color: rgba(255, 255, 255, .92); } .WP_cathero .WP_catheroPoints li::before { border-color: #7fc79f; } .WP_newsBanner .WP_newsBannerTitle { color: #fff; } /* Hero titles 横幅文字落 */ .WP_hero2 .WP_heroTitle { color: #fff; } /* hero 覆盖旧版 */ @media (min-width: 1025px) { .WP_parchiveHero { max-width: none; margin: 0; } } /* px Category 分类横幅 */ .WP_cathero { padding: 8px 0; } .WP_cathero .WP_catheroTitle { font-size: 1.5rem; margin: 0 0 8px; } .WP_cathero .WP_catheroSub { font-size: .95rem; margin: 0 0 6px; } .WP_cathero .WP_catheroPoints { gap: 4px; margin: 0 0 10px; } .WP_cathero .WP_catheroPoints li { font-size: .85rem; line-height: 1.3; } /* Keep 避让面包屑 */ .WP_cathero { padding-top: 24px; padding-bottom: 56px; } /* ---------- /Image-backed banners 图片横幅 ---------- */ /* Banner copy 横幅文案 */ .WP_hero2 .WP_heroInner, .WP_newsBanner .WP_newsBannerIn, .WP_parchiveHero > h1, .WP_parchiveHero > .WP_parchiveHeroSub, .WP_cathero .WP_catheroInner, .WP_postHero .WP_postHeroIn, .WP_archiveHero > .WP_container { display: none; } /* ---------- /Banner copy on hold 横幅文案 ---------- */ /* ---------- Responsive 响应式 ---------- */ @media (max-width: 1024px) { .WP_hero2, .WP_newsBanner, .WP_parchiveHero, .WP_cathero, .WP_postHero, .WP_archiveHero { min-height: 300px; } } @media (max-width: 767px) { /* Fixed-height 手机端固定 */ .WP_hero2, .WP_newsBanner, .WP_parchiveHero, .WP_cathero, .WP_postHero, .WP_archiveHero { min-height: 280px; height: 280px; overflow: hidden; } /* About hero 关于页横幅 */ .WP_heroAbout .WP_heroTitle { font-size: 1.35rem; } .WP_heroAbout .WP_badge { display: none; } .WP_heroAbout .WP_heroInner { gap: 7px; } .WP_heroAbout .WP_heroText { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .92rem; } /* Drop 分类横幅 */ .WP_cathero .WP_catheroPoints { display: none; } .WP_cathero .WP_catheroTitle { font-size: 1.15rem; } .WP_cathero .WP_catheroSub { font-size: .85rem; } .WP_cathero .WP_catheroBtn { padding: 10px 18px; font-size: .9rem; } .WP_cathero { padding-bottom: 48px; } } /* ---------- /Responsive 响应式 ---------- */ /* Breadcrumb 横幅内 */ .WP_heroCrumb { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; background: rgba(255, 255, 255, .93); text-align: left; } .WP_heroCrumb .WP_breadcrumb { padding: 12px 16px; } .WP_heroCrumb .WP_breadcrumb a { color: #00532f; } .WP_heroCrumb .WP_breadcrumb .cur, .WP_heroCrumb .WP_breadcrumb { color: #4b5563; } .WP_breadcrumbWrap .WP_breadcrumb { padding: 10px 0; } /* Breadcrumb 横幅内 */ /* Title bar 横幅下方 */ .WP_titlebar { background: #fff; border-bottom: 1px solid var(--line, #e5e7eb); } .WP_titlebarIn { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 16px; padding-bottom: 16px; } .WP_titlebarTitle { margin: 0; font-size: 1.55rem; font-weight: 700; color: #00532f; } .WP_titlebarTabs { display: flex; gap: 10px; flex-wrap: wrap; } .WP_titlebarTabs a { padding: 9px 22px; border: 1px solid var(--line-2, #d1d5db); color: var(--text, #1f2937); font-size: .95rem; text-decoration: none; background: #fff; transition: all .2s ease; } .WP_titlebarTabs a:hover { border-color: #00532f; color: #00532f; } .WP_titlebarTabs a.on { background: #00532f; border-color: #00532f; color: #fff; } @media (max-width: 767px) { .WP_titlebarTitle { font-size: 1.2rem; } .WP_titlebarTabs a { padding: 7px 14px; font-size: .85rem; } } /* Title bar 横幅下方 */ /* About anchor 关于页页签 */ .WP_heroCrumb .WP_breadcrumbWrap { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; } .WP_heroCrumb .WP_breadcrumb { flex: 0 0 auto; } .WP_heroCrumb .WP_titlebarTabs { margin-left: auto; } .WP_heroCrumb .WP_titlebarTabs a { padding: 6px 16px; font-size: .88rem; white-space: nowrap; } @media (max-width: 767px) { /* 手机端与面包屑同一行：basis 0 强制同行，靠右收纳，溢出横向滑动 */ .WP_heroCrumb .WP_titlebarTabs { flex: 1 1 0; min-width: 0; gap: 6px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; } .WP_heroCrumb .WP_titlebarTabs::-webkit-scrollbar { display: none; } /* 有富余时页签组靠右；溢出时自动归零，不影响起点可滚达 */ .WP_heroCrumb .WP_titlebarTabs a:first-child { margin-left: auto; } .WP_heroCrumb .WP_titlebarTabs a { padding: 5px 10px; font-size: .8rem; white-space: nowrap; flex: 0 0 auto; } /* 手机端隐藏新闻横幅（新闻页/分类页/文章页）的三个分类页签 */ .WP_newsHero .WP_titlebarTabs { display: none; } } /* About anchor 关于页 */ /* ===================== lang.css 多语言 i18n ===================== */ /* lang.css RTL 多语言样式 */ /* Fonts Noto 字体栈 */ /* 正文Body text — digits use Titillium like English. */ html[lang="ar"] body, html[lang="ar"] :where(p,a,span,li,button,input,textarea,select,th,td,strong,em,figcaption,div) { font-family: "Titillium Web", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif; } html[lang="hi"] body, html[lang="hi"] :where(p,a,span,li,button,input,textarea,select,th,td,strong,em,figcaption,div) { font-family: "Titillium Web", "Noto Sans Devanagari", "Segoe UI", sans-serif; } html[lang="bn"] body, html[lang="bn"] :where(p,a,span,li,button,input,textarea,select,th,td,strong,em,figcaption,div) { font-family: "Titillium Web", "Noto Sans Bengali", "Segoe UI", sans-serif; } html[lang="ja"] body, html[lang="ja"] :where(p,a,span,li,button,input,textarea,select,th,td,strong,em,figcaption,div) { font-family: "Titillium Web", "Noto Sans JP", "Yu Gothic", "Microsoft YaHei", sans-serif; } /* fonts-latin.css 泰文走 */ html[lang="th"] body, html[lang="th"] :where(p,a,span,li,button,input,textarea,select,th,td,strong,em,figcaption,div) { font-family: "Titillium Web", "Noto Sans Thai", "Segoe UI", sans-serif; } /* CJK MB 繁体中文 */ html[lang="zh-hk"] body, html[lang="zh-hk"] :where(p,a,span,li,button,input,textarea,select,th,td,strong,em,figcaption,div) { font-family: "Titillium Web", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", sans-serif; } /* 标题Headings — digits use Montserrat like English. */ html[lang="ar"] :where(h1,h2,h3,h4,h5,h6) { font-family: "Montserrat", "Noto Sans Arabic", "Helvetica Neue", Helvetica, Arial, sans-serif; } html[lang="hi"] :where(h1,h2,h3,h4,h5,h6) { font-family: "Montserrat", "Noto Sans Devanagari", "Helvetica Neue", Helvetica, Arial, sans-serif; } html[lang="bn"] :where(h1,h2,h3,h4,h5,h6) { font-family: "Montserrat", "Noto Sans Bengali", "Helvetica Neue", Helvetica, Arial, sans-serif; } html[lang="ja"] :where(h1,h2,h3,h4,h5,h6) { font-family: "Montserrat", "Noto Sans JP", "Yu Gothic", "Microsoft YaHei", sans-serif; } html[lang="th"] :where(h1,h2,h3,h4,h5,h6) { font-family: "Montserrat", "Noto Sans Thai", "Helvetica Neue", Helvetica, Arial, sans-serif; } html[lang="zh-hk"] :where(h1,h2,h3,h4,h5,h6) { font-family: "Montserrat", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", sans-serif; } /* Montserrat 英文页用 */ html[lang="ar"] .WP_statNum, html[lang="hi"] .WP_statNum, html[lang="bn"] .WP_statNum, html[lang="ja"] .WP_statNum, html[lang="th"] .WP_statNum, html[lang="zh-hk"] .WP_statNum, html[lang="ar"] .WP_step::before, html[lang="hi"] .WP_step::before, html[lang="bn"] .WP_step::before, html[lang="ja"] .WP_step::before, html[lang="th"] .WP_step::before, html[lang="zh-hk"] .WP_step::before, html[lang="ar"] .WP_histYearBg, html[lang="hi"] .WP_histYearBg, html[lang="bn"] .WP_histYearBg, html[lang="ja"] .WP_histYearBg, html[lang="th"] .WP_histYearBg, html[lang="zh-hk"] .WP_histYearBg, html[lang="ar"] .WP_histNum span, html[lang="hi"] .WP_histNum span, html[lang="bn"] .WP_histNum span, html[lang="ja"] .WP_histNum span, html[lang="th"] .WP_histNum span, html[lang="zh-hk"] .WP_histNum span { font-family: var(--font-head); } /* CJK CJK 阿拉伯文 */ html[lang="ja"] .WP_titleUnderline, html[lang="ar"] .WP_titleUnderline, html[lang="hi"] .WP_titleUnderline, html[lang="bn"] .WP_titleUnderline, html[lang="th"] .WP_titleUnderline { line-height: 1.5; } html[lang="zh-hk"] .WP_titleUnderline { line-height: 1.5; } html[lang="ja"] body, html[lang="ar"] body { line-height: 1.85; } html[lang="zh-hk"] body { line-height: 1.85; } /* Thai stacked 泰文叠字符 */ html[lang="th"] body { line-height: 1.9; } html[lang="th"] h1, html[lang="th"] h2, html[lang="th"] h3, html[lang="th"] h4, html[lang="th"] h5, html[lang="th"] h6 { line-height: 1.5; } /* ---------- /Fonts 字体 ---------- */ /* Switcher 语言切换 */ .WP_lang { position: relative; } .WP_langBtn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border: 1px solid rgba(0, 0, 0, .12); border-radius: 10px; background: transparent; color: inherit; font: inherit; font-size: .9rem; font-weight: 700; letter-spacing: .05em; cursor: pointer; transition: background .2s, border-color .2s, color .2s, box-shadow .2s; white-space: nowrap; } .WP_langBtn:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); } /* White header 白色头部 */ .WP_header .WP_langBtn { background: #fff; border-color: rgba(0, 0, 0, .10); box-shadow: 0 2px 10px rgba(22, 40, 60, .08); color: #16283c; } .WP_header .WP_langBtn:hover { background: #f6fbf8; border-color: rgba(0, 109, 61, .45); box-shadow: 0 4px 14px rgba(0, 109, 61, .14); } .WP_header .WP_langBtn .WP_langCode { color: #006d3d; } .WP_header .WP_langBtn .WP_langCaret { border-top-color: #006d3d; } /* 闭合按钮里 */ .WP_langFlagCur { font-size: 1.45rem; line-height: 1; } .WP_langBtn .WP_langCode { font-weight: 700; letter-spacing: .08em; } /* CSS data-URI 国旗用 */ .WP_langFlag { width: 21px; height: 15px; display: inline-block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); flex: 0 0 auto; background: center / contain no-repeat; } .WP_langFlagCur { width: 24px; height: 17px; } .WP_langMenu .WP_langFlag { width: 22px; height: 16px; } .WP_langCaret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform .2s; } .WP_lang.WP_open .WP_langCaret { transform: rotate(180deg); } /* WP_header 头部按钮新 */ .WP_headerActions .WP_lang { margin-right: 12px; } /* RTL 头部不镜像 */ html[dir="rtl"] .WP_header .WP_headerInner, html[dir="rtl"] .WP_header .WP_headerActions, html[dir="rtl"] .WP_header .WP_nav { direction: ltr; } html[dir="rtl"] .WP_headerActions .WP_lang { margin-right: 0; margin-left: 12px; } /* Top bar 顶部信息条 */ .WP_topbar .WP_langBtn { height: 30px; font-size: .78rem; padding: 0 9px; border-color: rgba(0,0,0,.16); color: inherit; } .WP_topbar .WP_lang { margin-left: auto; margin-right: 16px; } .WP_topbar .WP_langMenu { top: calc(100% + 6px); } /* Dropdown 下拉菜单 */ .WP_langMenu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 120; min-width: 264px; /* Fixed 滚动兜底 */ max-height: 380px; max-height: min(380px, calc(100dvh - 120px)); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; margin: 0; padding: 10px; list-style: none; background: #fff; border: 1px solid #eceff1; border-radius: 16px; box-shadow: 0 24px 56px rgba(22, 40, 60, .18); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; } .WP_langMenu::-webkit-scrollbar { width: 6px; } .WP_langMenu::-webkit-scrollbar-track { background: transparent; } .WP_langMenu::-webkit-scrollbar-thumb { background: rgba(0, 109, 61, .35); border-radius: 3px; } .WP_langMenu::-webkit-scrollbar-thumb:hover { background: rgba(0, 109, 61, .55); } .WP_lang.WP_open .WP_langMenu { opacity: 1; visibility: visible; transform: translateY(0); } .WP_langMenu li { margin: 0; } /* Small screens 小屏 */ @media (max-width: 768px) { .WP_footer .WP_langMenu { left: 0; right: auto; } .WP_langMenu { max-width: calc(100vw - 24px); } } /* a role 菜单条目 */ .WP_langMenu a[role="menuitem"], .WP_langMenu button { display: flex; align-items: center; gap: 12px; width: 100%; white-space: nowrap; padding: 11px 14px; border: 0; border-radius: 10px; background: transparent; color: #23303c; font: inherit; font-size: .98rem; text-align: left; text-decoration: none; cursor: pointer; transition: background .15s, color .15s; } .WP_langMenu a[role="menuitem"]:hover, .WP_langMenu button:hover { background: #f2f7f4; color: #006d3d; } /* Active row 当前语言 */ .WP_langMenu a[role="menuitem"].WP_active, .WP_langMenu button.WP_active { background: #e9f4ee; color: #006d3d; font-weight: 600; } .WP_langMenu a[role="menuitem"].WP_active::after, .WP_langMenu button.WP_active::after { content: "\2713"; margin-left: auto; padding-left: 12px; color: #00834a; font-size: .95rem; font-weight: 700; } .WP_langFlag { flex: 0 0 auto; font-size: 1.05rem; line-height: 1; } .WP_langNative { flex: 0 1 auto; white-space: nowrap; } /* Slightly 菜单里国旗 */ .WP_langMenu .WP_langFlag { width: 24px; height: 17px; border-radius: 3px; } /* Deutsch-DE HK 中國香港 */ .WP_langCodeTag { margin-left: 2px; color: #9aa7b1; font-size: .76rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; } .WP_langCodeTag::before { content: "-"; } .WP_langMenu a[role="menuitem"].WP_active .WP_langCodeTag, .WP_langMenu button.WP_active .WP_langCodeTag { color: #4c8c6d; } /* Footer 页脚 */ .WP_langFooter { position: relative; } .WP_langFooter .WP_langNative { white-space: nowrap; } .WP_langFooter .WP_langMenu { background: #fff; border-color: #e6e6e6; box-shadow: 0 18px 40px rgba(0, 0, 0, .16); } .WP_langFooter .WP_langMenu button { color: #23303c; } .WP_langFooter .WP_langMenu button:hover { background: #f2f7f4; color: #006d3d; } .WP_langFooter .WP_langMenu button.WP_active { background: #e9f4ee; color: #006d3d; } /* a Footer 友情链接 */ .WP_langMenu a.WP_friendLink { display: flex; align-items: center; width: 100%; white-space: nowrap; padding: 9px 12px; border-radius: 7px; background: transparent; color: #2c2c2c; font: inherit; font-size: .9rem; text-align: left; text-decoration: none; transition: background .15s, color .15s; } .WP_langFooter .WP_langMenu a.WP_friendLink:hover { background: #f5f1e8; color: #006d3d; } /* hover 友情链接 */ .WP_footer .WP_langFriends .WP_langMenu { min-width: 0; padding: 8px; background: #1d2d36; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; box-shadow: 0 20px 48px rgba(0, 0, 0, .45); backdrop-filter: blur(8px); } .WP_footer .WP_langFriends .WP_langMenu a.WP_friendLink { justify-content: flex-start; gap: 10px; padding: 10px 16px; border-radius: 9px; color: rgba(255,255,255,.9); font-size: .92rem; letter-spacing: .2px; } .WP_footer .WP_langFriends .WP_langMenu a.WP_friendLink:hover { background: linear-gradient(135deg, #00834a, #006d3d); color: #fff; } /* Link icon 站点图标 */ .WP_friendLink .WP_icon { width: 18px; height: 18px; } .WP_fSystin { color: #0d7a48; } .WP_fBaidu { color: #2932e1; } .WP_fGoogle { color: #4285f4; } .WP_fWikipedia { color: #ffffff; } .WP_fYoutube { color: #ff0000; } .WP_fFacebook { color: #1877f2; } .WP_fAmazon { color: #ff9900; } /* ---------- /Switcher 切换器 ---------- */ /* ---------- Drawer 抽屉 ---------- */ .WP_drawerLang { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; } .WP_drawerLang button { flex: 0 0 auto; padding: 7px 12px; border: 1px solid #ddd; border-radius: 999px; background: #fff; color: #333; font: inherit; font-size: .82rem; cursor: pointer; } .WP_drawerLang button.WP_active { background: #006d3d; border-color: #006d3d; color: #fff; font-weight: 600; } /* ---------- /Drawer 抽屉 ---------- */ /* RTL 从右到左 */ html[dir="rtl"] body { direction: ltr; text-align: left; } html[dir="rtl"] .WP_header .WP_headerInner, html[dir="rtl"] .WP_header .WP_headerActions { direction: ltr; } html[dir="rtl"] .WP_headerActions .WP_lang { margin-right: 0; margin-left: 12px; } /* plaintext 文字块其他 */ html[dir="rtl"] p, html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6, html[dir="rtl"] blockquote, html[dir="rtl"] figcaption, html[dir="rtl"] .WP_btn, html[dir="rtl"] .WP_cardTitle a, html[dir="rtl"] .WP_cardExcerpt, html[dir="rtl"] .WP_faqQ, html[dir="rtl"] .WP_faqA, html[dir="rtl"] .WP_quoteCard, html[dir="rtl"] .WP_form2 label { direction: ltr; unicode-bidi: plaintext; text-align: left; } /* RTL bits 从右到左 */ /* Mobile 手机端 */ @media (max-width: 900px) { .WP_headerActions .WP_lang { display: inline-flex; margin-right: 2px; } .WP_headerActions .WP_langBtn { padding: 6px 10px; gap: 6px; height: 38px; border-radius: 9px; } .WP_headerActions .WP_langFlagCur { width: 21px; height: 16px; } .WP_headerActions .WP_langCode { font-size: .8rem; } .WP_headerActions .WP_langCaret { display: inline-block; margin-left: 1px; border-left-width: 3.5px; border-right-width: 3.5px; border-top-width: 4.5px; } /* 极简下拉 Minimal dropdown. */ .WP_langMenu { min-width: 232px; padding: 8px; border-radius: 14px; } .WP_langMenu .WP_langCodeTag { display: none; } .WP_langMenu a[role="menuitem"], .WP_langMenu button { gap: 12px; padding: 12px 14px; font-size: 1rem; } .WP_topbar .WP_lang { margin-right: 8px; } .WP_topbar .WP_langBtn span.WP_langLabel { display: none; } } @media (max-width: 640px) { .WP_topbar .WP_lang { display: inline-flex; margin-left: 0; margin-right: 4px; } .WP_topbarContact { flex-wrap: wrap; } } /* ---------- /Mobile 手机端 ---------- */ /* Flags 国旗图标 */ .WP_langFlag[data-flag="en"] { background-image: url("../svg/flag-en.svg"); } .WP_langFlag[data-flag="de"] { background-image: url("../svg/flag-de.svg"); } .WP_langFlag[data-flag="fr"] { background-image: url("../svg/flag-fr.svg"); } .WP_langFlag[data-flag="hi"] { background-image: url("../svg/flag-hi.svg"); } .WP_langFlag[data-flag="es"] { background-image: url("../svg/flag-es.svg"); } .WP_langFlag[data-flag="ar"] { background-image: url("../svg/flag-ar.svg"); } .WP_langFlag[data-flag="bn"] { background-image: url("../svg/flag-bn.svg"); } .WP_langFlag[data-flag="pt"] { background-image: url("../svg/flag-pt.svg"); } .WP_langFlag[data-flag="id"] { background-image: url("../svg/flag-id.svg"); } .WP_langFlag[data-flag="ja"] { background-image: url("../svg/flag-ja.svg"); } .WP_langFlag[data-flag="ms"] { background-image: url("../svg/flag-ms.svg"); } .WP_langFlag[data-flag="th"] { background-image: url("../svg/flag-th.svg"); } .WP_langFlag[data-flag="vi"] { background-image: url("../svg/flag-vi.svg"); } .WP_langFlag[data-flag="zu"] { background-image: url("../svg/flag-zu.svg"); } .WP_langFlag[data-flag="zh-hk"] { background-image: url("../svg/flag-zh-hk.svg"); } /* ---------- /Flags 国旗 ---------- */ /* ===================== vendor-intl-tel-input.css 第三方：intl-tel-input Vendor: intl-tel-input ===================== */ :root{--iti-hover-color:rgba(0, 0, 0, 0.05);--iti-border-color:#ccc;--iti-dialcode-color:#999;--iti-dropdown-bg:white;--iti-spacer-horizontal:8px;--iti-flag-height:12px;--iti-flag-width:16px;--iti-border-width:1px;--iti-arrow-height:4px;--iti-arrow-width:6px;--iti-triangle-border:calc(var(--iti-arrow-width) / 2);--iti-arrow-padding:6px;--iti-arrow-color:#555;--iti-path-flags-1x:url("../img/flags.webp");--iti-path-flags-2x:url("../img/flags@2x.webp");--iti-path-globe-1x:url("../img/globe.webp");--iti-path-globe-2x:url("../img/globe@2x.webp");--iti-flag-sprite-width:3904px;--iti-flag-sprite-height:12px;--iti-mobile-popup-margin:30px}.iti{position:relative;display:inline-block}.iti *{box-sizing:border-box}.iti__hide{display:none}.iti__v-hide{visibility:hidden}.iti__a11y-text{width:1px;height:1px;clip:rect(1px,1px,1px,1px);overflow:hidden;position:absolute}.iti input.iti__tel-input,.iti input.iti__tel-input[type=tel],.iti input.iti__tel-input[type=text]{position:relative;z-index:0;margin:0!important}.iti__country-container{position:absolute;top:0;bottom:0;padding:var(--iti-border-width)}.iti__selected-country{z-index:1;position:relative;display:flex;align-items:center;height:100%;background:0 0;border:0;margin:0;padding:0;font-family:inherit;font-size:inherit;color:inherit;border-radius:0;font-weight:inherit;line-height:inherit;text-decoration:none}.iti__selected-country-primary{display:flex;align-items:center;height:100%;padding:0 var(--iti-arrow-padding) 0 var(--iti-spacer-horizontal)}.iti__arrow{margin-left:var(--iti-arrow-padding);width:0;height:0;border-left:var(--iti-triangle-border) solid transparent;border-right:var(--iti-triangle-border) solid transparent;border-top:var(--iti-arrow-height) solid var(--iti-arrow-color)}[dir=rtl] .iti__arrow{margin-right:var(--iti-arrow-padding);margin-left:0}.iti__arrow--up{border-top:none;border-bottom:var(--iti-arrow-height) solid var(--iti-arrow-color)}.iti__dropdown-content{border-radius:3px;background-color:var(--iti-dropdown-bg)}.iti--inline-dropdown .iti__dropdown-content{position:absolute;z-index:2;margin-top:3px;margin-left:calc(var(--iti-border-width) * -1);border:var(--iti-border-width) solid var(--iti-border-color);box-shadow:1px 1px 4px rgba(0,0,0,.2)}.iti__search-input{width:100%;border-width:0;border-radius:3px}.iti__search-input+.iti__country-list{border-top:1px solid var(--iti-border-color)}.iti__country-list{list-style:none;padding:0;margin:0;overflow-y:scroll;-webkit-overflow-scrolling:touch}.iti--inline-dropdown .iti__country-list{max-height:185px}.iti--flexible-dropdown-width .iti__country-list{white-space:nowrap}@media (max-width:500px){.iti--flexible-dropdown-width .iti__country-list{white-space:normal}}.iti__country{display:flex;align-items:center;padding:8px var(--iti-spacer-horizontal);outline:0}.iti__dial-code{color:var(--iti-dialcode-color)}.iti__country.iti__highlight{background-color:var(--iti-hover-color)}.iti__country-list .iti__flag,.iti__country-name{margin-right:var(--iti-spacer-horizontal)}[dir=rtl] .iti__country-list .iti__flag,[dir=rtl] .iti__country-name{margin-right:0;margin-left:var(--iti-spacer-horizontal)}.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])):hover,.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])):hover button{cursor:pointer}.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country-primary:hover,.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country:has(+ .iti__dropdown-content:hover) .iti__selected-country-primary{background-color:var(--iti-hover-color)}.iti .iti__selected-dial-code{margin-left:4px}[dir=rtl] .iti .iti__selected-dial-code{margin-left:0;margin-right:4px}.iti--container{position:fixed;top:-1000px;left:-1000px;z-index:1060;padding:var(--iti-border-width)}.iti--container:hover{cursor:pointer}.iti--fullscreen-popup.iti--container{background-color:rgba(0,0,0,.5);top:0;bottom:0;left:0;right:0;position:fixed;padding:var(--iti-mobile-popup-margin);display:flex;flex-direction:column;justify-content:flex-start}.iti--fullscreen-popup .iti__dropdown-content{display:flex;flex-direction:column;max-height:100%;position:relative}.iti--fullscreen-popup .iti__country{padding:10px 10px;line-height:1.5em}.iti__flag{--iti-flag-offset:100px;height:var(--iti-flag-height);width:var(--iti-flag-width);border-radius:1px;box-shadow:0 0 1px 0 #888;background-image:var(--iti-path-flags-1x);background-repeat:no-repeat;background-position:var(--iti-flag-offset) 0;background-size:var(--iti-flag-sprite-width) var(--iti-flag-sprite-height)}.iti__ac{--iti-flag-offset:0px}.iti__ad{--iti-flag-offset:-16px}.iti__ae{--iti-flag-offset:-32px}.iti__af{--iti-flag-offset:-48px}.iti__ag{--iti-flag-offset:-64px}.iti__ai{--iti-flag-offset:-80px}.iti__al{--iti-flag-offset:-96px}.iti__am{--iti-flag-offset:-112px}.iti__ao{--iti-flag-offset:-128px}.iti__ar{--iti-flag-offset:-144px}.iti__as{--iti-flag-offset:-160px}.iti__at{--iti-flag-offset:-176px}.iti__au{--iti-flag-offset:-192px}.iti__aw{--iti-flag-offset:-208px}.iti__ax{--iti-flag-offset:-224px}.iti__az{--iti-flag-offset:-240px}.iti__ba{--iti-flag-offset:-256px}.iti__bb{--iti-flag-offset:-272px}.iti__bd{--iti-flag-offset:-288px}.iti__be{--iti-flag-offset:-304px}.iti__bf{--iti-flag-offset:-320px}.iti__bg{--iti-flag-offset:-336px}.iti__bh{--iti-flag-offset:-352px}.iti__bi{--iti-flag-offset:-368px}.iti__bj{--iti-flag-offset:-384px}.iti__bl{--iti-flag-offset:-400px}.iti__bm{--iti-flag-offset:-416px}.iti__bn{--iti-flag-offset:-432px}.iti__bo{--iti-flag-offset:-448px}.iti__bq{--iti-flag-offset:-464px}.iti__br{--iti-flag-offset:-480px}.iti__bs{--iti-flag-offset:-496px}.iti__bt{--iti-flag-offset:-512px}.iti__bw{--iti-flag-offset:-528px}.iti__by{--iti-flag-offset:-544px}.iti__bz{--iti-flag-offset:-560px}.iti__ca{--iti-flag-offset:-576px}.iti__cc{--iti-flag-offset:-592px}.iti__cd{--iti-flag-offset:-608px}.iti__cf{--iti-flag-offset:-624px}.iti__cg{--iti-flag-offset:-640px}.iti__ch{--iti-flag-offset:-656px}.iti__ci{--iti-flag-offset:-672px}.iti__ck{--iti-flag-offset:-688px}.iti__cl{--iti-flag-offset:-704px}.iti__cm{--iti-flag-offset:-720px}.iti__cn{--iti-flag-offset:-736px}.iti__co{--iti-flag-offset:-752px}.iti__cr{--iti-flag-offset:-768px}.iti__cu{--iti-flag-offset:-784px}.iti__cv{--iti-flag-offset:-800px}.iti__cw{--iti-flag-offset:-816px}.iti__cx{--iti-flag-offset:-832px}.iti__cy{--iti-flag-offset:-848px}.iti__cz{--iti-flag-offset:-864px}.iti__de{--iti-flag-offset:-880px}.iti__dj{--iti-flag-offset:-896px}.iti__dk{--iti-flag-offset:-912px}.iti__dm{--iti-flag-offset:-928px}.iti__do{--iti-flag-offset:-944px}.iti__dz{--iti-flag-offset:-960px}.iti__ec{--iti-flag-offset:-976px}.iti__ee{--iti-flag-offset:-992px}.iti__eg{--iti-flag-offset:-1008px}.iti__eh{--iti-flag-offset:-1024px}.iti__er{--iti-flag-offset:-1040px}.iti__es{--iti-flag-offset:-1056px}.iti__et{--iti-flag-offset:-1072px}.iti__fi{--iti-flag-offset:-1088px}.iti__fj{--iti-flag-offset:-1104px}.iti__fk{--iti-flag-offset:-1120px}.iti__fm{--iti-flag-offset:-1136px}.iti__fo{--iti-flag-offset:-1152px}.iti__fr{--iti-flag-offset:-1168px}.iti__ga{--iti-flag-offset:-1184px}.iti__gb{--iti-flag-offset:-1200px}.iti__gd{--iti-flag-offset:-1216px}.iti__ge{--iti-flag-offset:-1232px}.iti__gf{--iti-flag-offset:-1248px}.iti__gg{--iti-flag-offset:-1264px}.iti__gh{--iti-flag-offset:-1280px}.iti__gi{--iti-flag-offset:-1296px}.iti__gl{--iti-flag-offset:-1312px}.iti__gm{--iti-flag-offset:-1328px}.iti__gn{--iti-flag-offset:-1344px}.iti__gp{--iti-flag-offset:-1360px}.iti__gq{--iti-flag-offset:-1376px}.iti__gr{--iti-flag-offset:-1392px}.iti__gt{--iti-flag-offset:-1408px}.iti__gu{--iti-flag-offset:-1424px}.iti__gw{--iti-flag-offset:-1440px}.iti__gy{--iti-flag-offset:-1456px}.iti__hk{--iti-flag-offset:-1472px}.iti__hn{--iti-flag-offset:-1488px}.iti__hr{--iti-flag-offset:-1504px}.iti__ht{--iti-flag-offset:-1520px}.iti__hu{--iti-flag-offset:-1536px}.iti__id{--iti-flag-offset:-1552px}.iti__ie{--iti-flag-offset:-1568px}.iti__il{--iti-flag-offset:-1584px}.iti__im{--iti-flag-offset:-1600px}.iti__in{--iti-flag-offset:-1616px}.iti__io{--iti-flag-offset:-1632px}.iti__iq{--iti-flag-offset:-1648px}.iti__ir{--iti-flag-offset:-1664px}.iti__is{--iti-flag-offset:-1680px}.iti__it{--iti-flag-offset:-1696px}.iti__je{--iti-flag-offset:-1712px}.iti__jm{--iti-flag-offset:-1728px}.iti__jo{--iti-flag-offset:-1744px}.iti__jp{--iti-flag-offset:-1760px}.iti__ke{--iti-flag-offset:-1776px}.iti__kg{--iti-flag-offset:-1792px}.iti__kh{--iti-flag-offset:-1808px}.iti__ki{--iti-flag-offset:-1824px}.iti__km{--iti-flag-offset:-1840px}.iti__kn{--iti-flag-offset:-1856px}.iti__kp{--iti-flag-offset:-1872px}.iti__kr{--iti-flag-offset:-1888px}.iti__kw{--iti-flag-offset:-1904px}.iti__ky{--iti-flag-offset:-1920px}.iti__kz{--iti-flag-offset:-1936px}.iti__la{--iti-flag-offset:-1952px}.iti__lb{--iti-flag-offset:-1968px}.iti__lc{--iti-flag-offset:-1984px}.iti__li{--iti-flag-offset:-2000px}.iti__lk{--iti-flag-offset:-2016px}.iti__lr{--iti-flag-offset:-2032px}.iti__ls{--iti-flag-offset:-2048px}.iti__lt{--iti-flag-offset:-2064px}.iti__lu{--iti-flag-offset:-2080px}.iti__lv{--iti-flag-offset:-2096px}.iti__ly{--iti-flag-offset:-2112px}.iti__ma{--iti-flag-offset:-2128px}.iti__mc{--iti-flag-offset:-2144px}.iti__md{--iti-flag-offset:-2160px}.iti__me{--iti-flag-offset:-2176px}.iti__mf{--iti-flag-offset:-2192px}.iti__mg{--iti-flag-offset:-2208px}.iti__mh{--iti-flag-offset:-2224px}.iti__mk{--iti-flag-offset:-2240px}.iti__ml{--iti-flag-offset:-2256px}.iti__mm{--iti-flag-offset:-2272px}.iti__mn{--iti-flag-offset:-2288px}.iti__mo{--iti-flag-offset:-2304px}.iti__mp{--iti-flag-offset:-2320px}.iti__mq{--iti-flag-offset:-2336px}.iti__mr{--iti-flag-offset:-2352px}.iti__ms{--iti-flag-offset:-2368px}.iti__mt{--iti-flag-offset:-2384px}.iti__mu{--iti-flag-offset:-2400px}.iti__mv{--iti-flag-offset:-2416px}.iti__mw{--iti-flag-offset:-2432px}.iti__mx{--iti-flag-offset:-2448px}.iti__my{--iti-flag-offset:-2464px}.iti__mz{--iti-flag-offset:-2480px}.iti__na{--iti-flag-offset:-2496px}.iti__nc{--iti-flag-offset:-2512px}.iti__ne{--iti-flag-offset:-2528px}.iti__nf{--iti-flag-offset:-2544px}.iti__ng{--iti-flag-offset:-2560px}.iti__ni{--iti-flag-offset:-2576px}.iti__nl{--iti-flag-offset:-2592px}.iti__no{--iti-flag-offset:-2608px}.iti__np{--iti-flag-offset:-2624px}.iti__nr{--iti-flag-offset:-2640px}.iti__nu{--iti-flag-offset:-2656px}.iti__nz{--iti-flag-offset:-2672px}.iti__om{--iti-flag-offset:-2688px}.iti__pa{--iti-flag-offset:-2704px}.iti__pe{--iti-flag-offset:-2720px}.iti__pf{--iti-flag-offset:-2736px}.iti__pg{--iti-flag-offset:-2752px}.iti__ph{--iti-flag-offset:-2768px}.iti__pk{--iti-flag-offset:-2784px}.iti__pl{--iti-flag-offset:-2800px}.iti__pm{--iti-flag-offset:-2816px}.iti__pr{--iti-flag-offset:-2832px}.iti__ps{--iti-flag-offset:-2848px}.iti__pt{--iti-flag-offset:-2864px}.iti__pw{--iti-flag-offset:-2880px}.iti__py{--iti-flag-offset:-2896px}.iti__qa{--iti-flag-offset:-2912px}.iti__re{--iti-flag-offset:-2928px}.iti__ro{--iti-flag-offset:-2944px}.iti__rs{--iti-flag-offset:-2960px}.iti__ru{--iti-flag-offset:-2976px}.iti__rw{--iti-flag-offset:-2992px}.iti__sa{--iti-flag-offset:-3008px}.iti__sb{--iti-flag-offset:-3024px}.iti__sc{--iti-flag-offset:-3040px}.iti__sd{--iti-flag-offset:-3056px}.iti__se{--iti-flag-offset:-3072px}.iti__sg{--iti-flag-offset:-3088px}.iti__sh{--iti-flag-offset:-3104px}.iti__si{--iti-flag-offset:-3120px}.iti__sj{--iti-flag-offset:-3136px}.iti__sk{--iti-flag-offset:-3152px}.iti__sl{--iti-flag-offset:-3168px}.iti__sm{--iti-flag-offset:-3184px}.iti__sn{--iti-flag-offset:-3200px}.iti__so{--iti-flag-offset:-3216px}.iti__sr{--iti-flag-offset:-3232px}.iti__ss{--iti-flag-offset:-3248px}.iti__st{--iti-flag-offset:-3264px}.iti__sv{--iti-flag-offset:-3280px}.iti__sx{--iti-flag-offset:-3296px}.iti__sy{--iti-flag-offset:-3312px}.iti__sz{--iti-flag-offset:-3328px}.iti__tc{--iti-flag-offset:-3344px}.iti__td{--iti-flag-offset:-3360px}.iti__tg{--iti-flag-offset:-3376px}.iti__th{--iti-flag-offset:-3392px}.iti__tj{--iti-flag-offset:-3408px}.iti__tk{--iti-flag-offset:-3424px}.iti__tl{--iti-flag-offset:-3440px}.iti__tm{--iti-flag-offset:-3456px}.iti__tn{--iti-flag-offset:-3472px}.iti__to{--iti-flag-offset:-3488px}.iti__tr{--iti-flag-offset:-3504px}.iti__tt{--iti-flag-offset:-3520px}.iti__tv{--iti-flag-offset:-3536px}.iti__tw{--iti-flag-offset:-3552px}.iti__tz{--iti-flag-offset:-3568px}.iti__ua{--iti-flag-offset:-3584px}.iti__ug{--iti-flag-offset:-3600px}.iti__us{--iti-flag-offset:-3616px}.iti__uy{--iti-flag-offset:-3632px}.iti__uz{--iti-flag-offset:-3648px}.iti__va{--iti-flag-offset:-3664px}.iti__vc{--iti-flag-offset:-3680px}.iti__ve{--iti-flag-offset:-3696px}.iti__vg{--iti-flag-offset:-3712px}.iti__vi{--iti-flag-offset:-3728px}.iti__vn{--iti-flag-offset:-3744px}.iti__vu{--iti-flag-offset:-3760px}.iti__wf{--iti-flag-offset:-3776px}.iti__ws{--iti-flag-offset:-3792px}.iti__xk{--iti-flag-offset:-3808px}.iti__ye{--iti-flag-offset:-3824px}.iti__yt{--iti-flag-offset:-3840px}.iti__za{--iti-flag-offset:-3856px}.iti__zm{--iti-flag-offset:-3872px}.iti__zw{--iti-flag-offset:-3888px}.iti__globe{background-image:var(--iti-path-globe-1x);background-size:contain;background-position:right;box-shadow:none;height:19px}@media (min-resolution:2x){.iti__flag{background-image:var(--iti-path-flags-2x)}.iti__globe{background-image:var(--iti-path-globe-2x)}} /* ===================== v2-contact.css 联系页 v3 Contact v3 ===================== */ /* assets css 页面样式 */ /* Page skeleton 页面骨架 */ /* */ .WP_cfNew { position: relative; padding: 96px 0; background: var(--cf-bg, #FFFFFF); overflow: hidden; --cf-primary: #006D3D; --cf-primary-dark: #004D32; --cf-title: #172B25; --cf-body: #667770; --cf-bg: #FFFFFF; --cf-bg-soft: #F7F9F8; --cf-ico-bg: #EAF5EE; --cf-border: #E6ECE8; --cf-border-strong: #D8E3DC; --cf-shade: #E9EFEB; --cf-container: 1440px; --cf-content: 1360px; --cf-gutter: 32px; --cf-gap: 64px; --cf-input-h: 52px; --cf-radius: 12px; --cf-card-radius: 22px; --cf-motion: 180ms; } /* Hero 主视觉背景 */ .WP_cfNewBg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, #FFFFFF 0%, #F7F9F8 46%, #FFFFFF 100%); } .WP_cfNewBgImg { position: absolute; inset: 0; display: block; /* Translucent 半透明点阵 */ background-image: url('/wp-content/uploads/contact/worldmap.webp'); background-image: image-set(url('/wp-content/uploads/contact/worldmap.avif') type('image/avif'),url('/wp-content/uploads/contact/worldmap.webp') type('image/webp')); background-size: min(1500px, 94%) auto; background-position: center 44%; background-repeat: no-repeat; opacity: .10; } .WP_cfNewIn { position: relative; z-index: 1; box-sizing: border-box; width: 100%; max-width: var(--cf-container); margin: 0 auto; padding: 0 var(--cf-gutter); } .WP_cfNewGrid { display: grid; grid-template-columns: minmax(0, 43fr) minmax(0, 57fr); column-gap: var(--cf-gap); align-items: stretch; max-width: var(--cf-content); margin: 0 auto; } .WP_cfNewL { display: flex; flex-direction: column; gap: 40px; min-width: 0; } .WP_cfNewR { display: flex; flex-direction: column; min-width: 0; } /* Follow 入场跟手 */ .WP_cfNewTitle.WP_scrub { --dist: 54px; } .WP_cfNewContact.WP_scrub { --dist: 44px; } .WP_cfFac.WP_scrub { --dist: 40px; } .WP_cfFeats.WP_scrub { --dist: 36px; } .WP_cfCardNew.WP_scrub { --dist: 58px; } @media (max-width: 767px) { .WP_cfNewTitle.WP_scrub { --dist: 38px; } .WP_cfCardNew.WP_scrub { --dist: 40px; } } /* Left column 左列 */ .WP_cfBrand { display: inline-flex; align-items: center; gap: 8px; color: var(--cf-primary); } .WP_cfBrand .WP_icon { width: 26px; height: 26px; font-size: 26px; background: currentColor; } .WP_cfBrandTx { font-size: 15px; font-weight: 700; letter-spacing: .16em; color: var(--cf-title); } .WP_cfNewH2 { margin: 18px 0 0; font-size: clamp(34px, 4.4vw, 64px); font-weight: 700; line-height: 1.06; letter-spacing: -.02em; } .WP_cfNewH2a { color: var(--cf-title); } .WP_cfNewH2b { color: var(--cf-primary); } /* px thin 标题下 */ .WP_cfNewRule { display: block; width: 52px; height: 3px; margin-top: 18px; border-radius: 2px; background: var(--cf-primary); } .WP_cfNewSub { margin: 18px 0 0; font-size: clamp(17px, 1.5vw, 21px); font-weight: 600; line-height: 1.45; color: var(--cf-title); } .WP_cfNewLead { margin: 10px 0 0; max-width: 46ch; font-size: 15px; line-height: 1.7; color: var(--cf-body); } /* Left column 左列 */ .WP_cfNewContact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .WP_cfNewContactLink { display: flex; align-items: center; gap: 18px; padding: 18px 20px; background: var(--cf-bg); border: 1px solid var(--cf-border); border-radius: 16px; text-decoration: none; transition: background var(--cf-motion) ease, border-color var(--cf-motion) ease; } .WP_cfNewContactLink:hover, .WP_cfNewContactLink:focus-visible { background: var(--cf-bg-soft); border-color: var(--cf-border-strong); } .WP_cfNewContactLink:focus-visible { outline: 2px solid var(--cf-primary); outline-offset: 2px; } .WP_cfNewIco { flex: 0 0 52px; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--cf-ico-bg); color: var(--cf-primary); } .WP_cfNewIco .WP_icon { width: 24px; height: 24px; font-size: 24px; background: currentColor; } .WP_cfNewContactTx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .WP_cfNewContactLabel { font-size: 14px; font-weight: 500; color: var(--cf-body); } .WP_cfNewContactValue { font-size: 17px; font-weight: 600; line-height: 1.45; color: var(--cf-title); overflow-wrap: anywhere; direction: ltr; text-align: start; } .WP_cfNewArrow { flex: 0 0 20px; width: 20px; height: 20px; color: var(--cf-primary); opacity: .5; transition: opacity var(--cf-motion) ease, transform var(--cf-motion) ease; } .WP_cfNewContactLink:hover .WP_cfNewArrow { opacity: 1; transform: translateX(2px); } /* 左列 */ .WP_cfFac { display: flex; align-items: center; gap: 18px; padding: 20px 22px; background: var(--cf-bg-soft); border: 1px solid var(--cf-border); border-radius: 16px; text-decoration: none; transition: background var(--cf-motion) ease, border-color var(--cf-motion) ease; } .WP_cfFac:hover, .WP_cfFac:focus-visible { background: #F1F6F3; border-color: var(--cf-border-strong); } .WP_cfFac:focus-visible { outline: 2px solid var(--cf-primary); outline-offset: 2px; } .WP_cfFacIco { flex: 0 0 46px; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--cf-bg); border: 1px solid var(--cf-border); color: var(--cf-primary); } .WP_cfFacIco .WP_icon { width: 24px; height: 24px; } .WP_cfFacTx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; } /* Clamp title 标题 */ .WP_cfFacTitle { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--cf-title); } .WP_cfFacDesc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: 13.5px; line-height: 1.55; color: var(--cf-body); } /* 工厂照片 */ .WP_cfFacImg { flex: 0 0 120px; width: 120px; height: 78px; border-radius: 10px; background-color: var(--cf-shade); /* 120×78 的小卡位，用 480w 副本即可（原图 1920w 单张 87KB） */ background-image: url('/wp-content/uploads/about/brand-hero-2-480x179.webp'); background-image: image-set(url('/wp-content/uploads/about/brand-hero-2-480x179.avif') type('image/avif'),url('/wp-content/uploads/about/brand-hero-2-480x179.webp') type('image/webp')); background-size: cover; background-position: 78% center; background-repeat: no-repeat; } .WP_cfFacGo { flex: 0 0 36px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--cf-primary); color: #FFFFFF; transition: background var(--cf-motion) ease, transform var(--cf-motion) ease; } .WP_cfFacGo .WP_icon { width: 18px; height: 18px; } .WP_cfFac:hover .WP_cfFacGo { background: var(--cf-primary-dark); transform: translateX(2px); } /* Left column 左列 */ .WP_cfFeats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .WP_cfFeats > li { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-inline: 18px; border-inline-start: 1px solid var(--cf-border); min-width: 0; } .WP_cfFeats > li:first-child { padding-inline-start: 0; border-inline-start: 0; } .WP_cfFeats > li:last-child { padding-inline-end: 0; } .WP_cfFeatIco { width: 32px; height: 32px; color: var(--cf-primary); } .WP_cfFeatIco .WP_icon { width: 100%; height: 100%; display: block; } .WP_cfFeatTx { font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--cf-title); } /* Right column 右列 */ .WP_cfCardNew { box-sizing: border-box; flex: 1 1 auto; display: flex; flex-direction: column; background: var(--cf-bg); border: 1px solid var(--cf-border); border-radius: var(--cf-card-radius); padding: 40px; box-shadow: 0 18px 50px rgba(16, 42, 32, .07); } .WP_cfCardEye { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--cf-primary); } .WP_cfCardTitle { margin: 10px 0 0; font-size: clamp(24px, 2.2vw, 32px); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--cf-title); } .WP_cfCardLead { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--cf-body); } .WP_cfForm { margin: 28px 0 0; } /* Fields & rows. 字段与行。 */ .WP_cfRow { display: grid; gap: 16px; } .WP_cfRow2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .WP_cfField { min-width: 0; } .WP_cfForm > .WP_cfField + .WP_cfField, .WP_cfForm > .WP_cfRow + .WP_cfField, .WP_cfForm > .WP_cfRow + .WP_cfRow, .WP_cfForm > .WP_cfField + .WP_cfRow { margin-top: 18px; } .WP_cfLabelText { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--cf-title); } .WP_cfReq { color: var(--cf-primary); } .WP_cfInput, .WP_cfSelect { box-sizing: border-box; width: 100%; height: var(--cf-input-h); padding: 0 14px; font-family: inherit; font-size: 17px; color: var(--cf-title); background: var(--cf-bg); border: 1px solid var(--cf-border); border-radius: var(--cf-radius); transition: border-color var(--cf-motion) ease, box-shadow var(--cf-motion) ease; } .WP_cfInput::placeholder { color: #9AA8A1; } .WP_cfInput:focus, .WP_cfSelect:focus { outline: none; border-color: var(--cf-primary); box-shadow: 0 0 0 3px rgba(0, 109, 61, .12); } .WP_cfInput.is-error, .WP_cfSelect.is-error { border-color: #C0392B; } .WP_cfTextarea { height: 110px; padding: 12px 14px; font-size: 17px; line-height: 1.6; resize: vertical; } .WP_cfErr { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: #C0392B; min-height: 0; } /* Honeypot 蜜罐 */ .WP_cfHp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Product 产品多选 */ .WP_cfProdDrop { position: relative; } .WP_cfProdTrigger { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; height: var(--cf-input-h); padding: 0 14px; font-family: inherit; font-size: 17px; color: var(--cf-title); background: var(--cf-bg); border: 1px solid var(--cf-border); border-radius: var(--cf-radius); cursor: pointer; transition: border-color var(--cf-motion) ease, box-shadow var(--cf-motion) ease; } .WP_cfProdTrigger:hover { border-color: var(--cf-border-strong); } .WP_cfProdTrigger:focus-visible, .WP_cfProdTrigger.is-open { outline: none; border-color: var(--cf-primary); box-shadow: 0 0 0 3px rgba(0, 109, 61, .12); } .WP_cfProdTrigger.is-open .WP_cfProdTriggerArrow { transform: rotate(180deg); } .WP_cfProdTriggerText { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: start; } .WP_cfProdTriggerText.is-empty { color: #9AA8A1; } .WP_cfProdTriggerArrow { flex: 0 0 18px; width: 18px; height: 18px; color: var(--cf-body); transition: transform var(--cf-motion) ease; } .WP_cfProdList { position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: var(--cf-bg); border: 1px solid var(--cf-border); border-radius: var(--cf-radius); box-shadow: 0 14px 34px rgba(16, 42, 32, .12); display: none; max-height: 268px; overflow-y: auto; } .WP_cfProdList.is-open { display: block; } .WP_cfProdItem { padding: 2px 0; } .WP_cfProdItemLabel { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; transition: background var(--cf-motion) ease; } .WP_cfProdItemLabel:hover, .WP_cfProdItem[aria-selected="true"] .WP_cfProdItemLabel { background: var(--cf-bg-soft); } .WP_cfProdItemLabel:focus-within { background: #EAF5EE; } .WP_cfProdItemLabel input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .WP_cfProdItemCheck { flex: 0 0 20px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 5px; border: 1.5px solid var(--cf-border-strong); color: #FFFFFF; background: transparent; transition: background var(--cf-motion) ease, border-color var(--cf-motion) ease; } .WP_cfProdItemCheck .WP_icon { width: 12px; height: 12px; opacity: 0; } .WP_cfProdItemLabel input:checked + .WP_cfProdItemCheck { background: var(--cf-primary); border-color: var(--cf-primary); } .WP_cfProdItemLabel input:checked + .WP_cfProdItemCheck .WP_icon { opacity: 1; } .WP_cfProdItemName { flex: 1 1 auto; min-width: 0; font-size: 17px; color: var(--cf-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Submit area 提交区状态 */ .WP_cfActions { margin-top: 20px; } .WP_cfSubmit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 56px; padding: 0 20px; font-family: inherit; font-size: 16px; font-weight: 600; color: #FFFFFF; background: var(--cf-primary); border: 0; border-radius: var(--cf-radius); cursor: pointer; transition: background var(--cf-motion) ease; } .WP_cfSubmit:hover { background: var(--cf-primary-dark); } .WP_cfSubmit:focus-visible { outline: 2px solid var(--cf-primary-dark); outline-offset: 2px; } .WP_cfSubmit[disabled] { cursor: progress; opacity: .72; } .WP_cfArrow { width: 18px; height: 18px; flex: 0 0 18px; } .WP_cfSecure { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; font-size: 12.5px; color: var(--cf-body); } .WP_cfSecure .WP_icon { width: 15px; height: 15px; flex: 0 0 15px; color: var(--cf-primary); } /* Status 状态消息 */ .WP_cfMsg { display: none; margin: 16px 0 0; padding: 12px 14px; font-size: 14px; line-height: 1.55; border-radius: 10px; } .WP_cfMsg.is-visible { display: block; } .WP_cfMsg.is-ok { color: #0B5C33; background: #EAF7EF; border: 1px solid #BFE3CE; } .WP_cfMsg.is-err { color: #8C2B21; background: #FDEDEC; border: 1px solid #F3C9C4; } /* 国家下拉 */ .WP_cfCombo { position: relative; } /* JS emoji 输入框左侧 */ .WP_cfComboFlag { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); width: 22px; height: 16px; font-size: 16px; line-height: 16px; text-align: center; pointer-events: none; z-index: 2; } .WP_cfComboInput { padding-inline-start: 44px !important; } .WP_cfComboList { position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + 6px); max-height: 264px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: var(--cf-bg); border: 1px solid var(--cf-border); border-radius: var(--cf-radius); box-shadow: 0 14px 34px rgba(16, 42, 32, .12); display: none; } .WP_cfComboList.is-open { display: block; } .WP_cfComboList button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; font-family: inherit; font-size: 14.5px; text-align: start; color: var(--cf-title); background: none; border: 0; border-radius: 8px; cursor: pointer; } .WP_cfComboList button:hover, .WP_cfComboList button.is-active { background: var(--cf-bg-soft); } .WP_cfComboFlagInline { flex: 0 0 22px; width: 22px; font-size: 16px; line-height: 16px; text-align: center; } .WP_cfComboName { flex: 1 1 auto; min-width: 0; } .WP_cfComboDial { flex: 0 0 auto; font-size: 13px; color: var(--cf-body); direction: ltr; } .WP_cfComboEmpty { padding: 12px; font-size: 14px; color: var(--cf-body); text-align: center; } /* Email domain 邮箱域名 */ .WP_cfSuggestWrap { position: relative; } .WP_cfSuggest { position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: var(--cf-bg); border: 1px solid var(--cf-border); border-radius: var(--cf-radius); box-shadow: 0 12px 28px rgba(16, 42, 32, .12); display: none; max-height: 268px; overflow-y: auto; } .WP_cfSuggest.is-open { display: block; } .WP_cfSuggest button { display: block; width: 100%; padding: 8px 12px; font-family: inherit; font-size: 14.5px; text-align: start; color: var(--cf-title); background: none; border: 0; border-radius: 8px; cursor: pointer; direction: ltr; } .WP_cfSuggest button:hover, .WP_cfSuggest button.is-active { background: var(--cf-bg-soft); } /* 国际电话 */ .WP_cfPhone { width: 100%; position: relative; z-index: 1; } /* LTR RTL 电话号码 */ .WP_cfPhone .iti { width: 100%; display: block; direction: ltr; } .WP_cfPhone input { box-sizing: border-box; width: 100%; height: var(--cf-input-h); padding: 0 14px; font-family: inherit; font-size: 15px; color: var(--cf-title); background: var(--cf-bg); border: 1px solid var(--cf-border); border-radius: var(--cf-radius); transition: border-color var(--cf-motion) ease, box-shadow var(--cf-motion) ease; } .WP_cfPhone input:focus { outline: none; border-color: var(--cf-primary); box-shadow: 0 0 0 3px rgba(0, 109, 61, .12); } /* RTL 区号块固定 */ .WP_cfPhone input { padding-left: 130px !important; padding-right: 14px !important; } /* px overflow 区号区 */ .WP_cfPhone .iti__country-container { left: 0; right: auto; /* vendor left 未写 */ width: 124px; min-width: 124px; border-inline-end: 1px solid var(--cf-border); border-radius: var(--cf-radius) 0 0 var(--cf-radius); background: var(--cf-bg); } .WP_cfPhone .iti__selected-country { width: 100%; padding: 0; overflow: hidden; border-radius: var(--cf-radius) 0 0 var(--cf-radius); } .WP_cfPhone .iti__selected-country-primary { width: 100%; justify-content: center; } .WP_cfPhone .iti__selected-dial-code { color: var(--cf-title); font-size: 17px; } .WP_cfPhone .iti__country-name { font-size: 17px; } .WP_cfPhone .iti__dropdown-content { z-index: 50; border-radius: var(--cf-radius); border-color: var(--cf-border); box-shadow: 0 14px 34px rgba(16, 42, 32, .12); } .WP_cfPhone .iti__country-list { border-radius: var(--cf-radius); border-color: var(--cf-border); max-height: 200px; } .WP_cfPhone .iti__country { padding: 9px 12px; } .WP_cfPhone .iti__country.iti__highlight { background: var(--cf-bg-soft); } .WP_cfPhone .iti__selected-flag:focus-visible { outline: 2px solid var(--cf-primary); outline-offset: -2px; } .WP_cfPhone .iti__search-input { height: 40px; margin: 0; padding: 0 12px; font-size: 17px; border: 1px solid var(--cf-border); border-radius: 8px; } /* Responsive 响应式 */ /* Tablet 平板横屏 */ @media (max-width: 1199px) { .WP_cfNew { --cf-gap: 40px; --cf-gutter: 28px; padding: 88px 0; } .WP_cfCardNew { padding: 32px; } .WP_cfFacImg { flex: 0 0 96px; width: 96px; height: 68px; } } /* px DOM 平板竖屏 */ @media (max-width: 1023px) { .WP_cfNewGrid { display: flex; flex-direction: column; } /* flex order 左右两列 */ .WP_cfNewL, .WP_cfNewR { display: contents; } .WP_cfNewTitle, .WP_cfNewContact, .WP_cfCardNew, .WP_cfFac, .WP_cfFeats { margin-bottom: 28px; } .WP_cfFeats { margin-bottom: 0; } /* Mobile order 移动端顺序 */ .WP_cfNewTitle { order: 1; } .WP_cfNewContact { order: 2; } .WP_cfCardNew { order: 3; } .WP_cfFac { order: 4; } .WP_cfFeats { order: 5; } .WP_cfNewL > * { min-width: 0; } .WP_cfCardNew { max-width: 760px; width: 100%; } .WP_cfNewLead { max-width: none; } .WP_cfFeats { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Phone single 手机 */ @media (max-width: 767px) { .WP_cfNew { --cf-gutter: 20px; --cf-input-h: 50px; padding: 56px 0 64px; } /* Phone zoom 手机端放大 */ .WP_cfNewBgImg { background-size: 220% auto; background-position: 62% 18%; opacity: .12; } .WP_cfNewH2 { font-size: clamp(34px, 9vw, 38px); } .WP_cfNewSub { font-size: 17px; } .WP_cfNewLead { font-size: 14.5px; } .WP_cfCardNew { padding: 24px 20px; border-radius: 18px; box-shadow: 0 12px 30px rgba(16, 42, 32, .06); } .WP_cfCardTitle { font-size: 24px; } /* Name 姓名国家 */ .WP_cfRow2 { grid-template-columns: minmax(0, 1fr); gap: 16px; } /* Advantages 服务优势 */ .WP_cfFeats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; } .WP_cfFeats > li { padding-inline: 0; border-inline-start: 0; flex-direction: row; align-items: center; gap: 10px; } .WP_cfFeatIco { flex: 0 0 26px; width: 26px; height: 26px; } .WP_cfFeatTx { font-size: 13px; } /* Factory card 工厂卡片 */ .WP_cfFac { gap: 14px; padding: 16px; } .WP_cfFacIco { flex: 0 0 40px; width: 40px; height: 40px; } .WP_cfFacIco .WP_icon { width: 21px; height: 21px; } .WP_cfFacImg { flex: 0 0 72px; width: 72px; height: 56px; } .WP_cfFacGo { flex: 0 0 32px; width: 32px; height: 32px; } .WP_cfFacGo .WP_icon { width: 16px; height: 16px; } .WP_cfFacTitle { font-size: 16px; } .WP_cfFacDesc { font-size: 13px; } /* Contact 联系方式 */ .WP_cfNewContactLink { padding: 14px; gap: 12px; } .WP_cfNewIco { flex: 0 0 44px; width: 44px; height: 44px; } .WP_cfNewIco .WP_icon { width: 20px; height: 20px; font-size: 20px; } .WP_cfNewContactLabel { font-size: 13px; } .WP_cfNewContactValue { font-size: 15px; } .WP_cfSubmit { height: 54px; } .WP_cfTextarea { height: 110px; } /* Narrower 手机上区号 */ .WP_cfPhone .iti__country-container { width: 112px; min-width: 112px; } .WP_cfPhone input { padding-left: 118px !important; } } /* Narrow screens 320–360 fallback. 窄屏 320–360 兜底。 */ @media (max-width: 360px) { .WP_cfNew { --cf-gutter: 16px; } .WP_cfCardNew { padding: 20px 16px; } .WP_cfPhone .iti__country-container { width: 104px; min-width: 104px; } .WP_cfPhone input { padding-left: 110px !important; } .WP_cfFacImg { flex: 0 0 60px; width: 60px; height: 50px; } } /* Motion 降低动效 */ @media (prefers-reduced-motion: reduce) { .WP_cfNew, .WP_cfNew *, .WP_cfNew *::before, .WP_cfNew *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } /* ===================== cases.css 案例中心 Case Studies ===================== */ /* cases.css 案例中心 */ /* ---------- 页面容器 Page shell ---------- */ .WP_casePage { padding: 8px 0 64px; } /* Banner HTML 左侧文案层 */ .WP_caseBanner { position: relative; overflow: hidden; /* Height 高度关于 */ min-height: 445px; background: linear-gradient(90deg, rgba(247, 247, 243, .55) 0%, rgba(247, 247, 243, .25) 30%, rgba(247, 247, 243, 0) 42%), url(/wp-content/uploads/cases/banner.webp) center 32% / cover no-repeat, #f7f7f3; /* AVIF 优先：保留上面一条做兜底，支持 image-set 的浏览器取小图 */ background: linear-gradient(90deg, rgba(247, 247, 243, .55) 0%, rgba(247, 247, 243, .25) 30%, rgba(247, 247, 243, 0) 42%), image-set(url(/wp-content/uploads/cases/banner.avif) type('image/avif'), url(/wp-content/uploads/cases/banner.webp) type('image/webp')) center 32% / cover no-repeat, #f7f7f3; } .WP_caseBannerIn { /* 同规格 */ display: flex; align-items: center; width: min(1440px, 92vw); margin: 0 auto; padding: 40px 16px 64px; } .WP_caseBannerCopy { /* The blank 背景图左侧 */ width: min(36%, 504px); flex: 0 0 auto; } .WP_caseBannerCopy .WP_breadcrumb { display: none; /* Crumb 面包屑 */ } /* Eyebrow short 英文眉题、 */ .WP_cbEyebrow { margin: 0; font-family: var(--font-head); font-size: 16px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--text-muted, #829b8d); } .WP_cbEyebrow::after { content: ''; display: block; width: 50px; height: 2px; background: #006d3d; margin-top: 16px; } /* 2. 主标题 H1 Headline（规格对齐其他页面 .WP_aboutHeroTitle） */ .WP_cbTitle { margin: 12px 0 0; font-family: var(--font-head); /* 主标题颜色 */ font-size: 64px; font-weight: 700; line-height: 1.12; color: var(--brand-dark, #003d2b); text-wrap: balance; } .WP_cbTitle .WP_cbT1, .WP_cbTitle .WP_cbT2 { color: inherit; } /* 3. 副标题 Tagline（规格对齐 .WP_aboutHeroSub） */ .WP_cbSub { margin: 8px 0 0; font-size: 21px; font-weight: 400; line-height: 1.45; color: var(--text-secondary, #38554a); } /* Feature icons 四个案例 */ .WP_cbFeats { list-style: none; margin: 40px 0 0; padding: 0; display: flex; align-items: stretch; justify-content: flex-start; } .WP_cbFeat { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 2px 0; text-align: left; } .WP_cbFeat + .WP_cbFeat { border-left: 1px solid #d6dfda; margin-left: 14px; padding-left: 14px; } .WP_cbFeatIc { display: flex; align-items: center; justify-content: center; width: clamp(56px, 3.8vw, 72px); height: clamp(56px, 3.8vw, 72px); border-radius: 50%; background: #fff; color: var(--brand-primary, #006d3d); box-shadow: 0 6px 18px rgba(0, 61, 43, .08); } .WP_cbFeatIc .WP_icon { width: clamp(24px, 1.6vw, 30px); height: clamp(24px, 1.6vw, 30px); display: block; } .WP_cbFeatTx { max-width: 100%; font-size: clamp(11px, .68vw, 13px); font-weight: 600; line-height: 1.35; color: var(--text-secondary, #38554a); /* 德语长 */ overflow-wrap: break-word; hyphens: auto; } /* Hero Same 入场动画 */ .WP_caseBannerCopy > * { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; } .WP_caseBannerCopy > :nth-child(2) { transition-delay: .08s; } .WP_caseBannerCopy > :nth-child(3) { transition-delay: .16s; } .WP_caseBannerCopy > :nth-child(4) { transition-delay: .24s; } .WP_caseBannerCopy .WP_cbFeat { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; } .WP_caseBannerCopy .WP_cbFeat:nth-child(1) { transition-delay: .38s; } .WP_caseBannerCopy .WP_cbFeat:nth-child(2) { transition-delay: .46s; } .WP_caseBannerCopy .WP_cbFeat:nth-child(3) { transition-delay: .54s; } .WP_caseBannerCopy .WP_cbFeat:nth-child(4) { transition-delay: .62s; } .WP_caseBannerCopy.WP_in > *, .WP_caseBannerCopy.WP_in .WP_cbFeat { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .WP_caseBannerCopy > *, .WP_caseBannerCopy .WP_cbFeat { opacity: 1; transform: none; transition: none; } } /* Region nav 五大洲分类 */ .WP_caseNav { display: flex; flex-wrap: wrap; gap: 12px; padding: 28px 0 30px; } .WP_caseNavBtn { display: inline-flex; align-items: center; gap: 9px; height: 50px; padding: 0 24px; background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; color: #111827; font-size: 15px; font-weight: 600; text-decoration: none; transition: background .25s ease, color .25s ease, border-color .25s ease; } .WP_caseNavIc { display: inline-flex; width: 22px; height: 22px; color: #006d3d; } .WP_caseNavIc .WP_icon { width: 100%; height: 100%; } .WP_caseNavBtn:hover { background: #eaf4ee; color: #006d3d; border-color: #cfe3d6; } .WP_caseNavBtn.on { background: #006d3d; border-color: #006d3d; color: #fff; } .WP_caseNavBtn.on .WP_caseNavIc { color: #fff; } /* In crumb bar 面包屑条内嵌（地区页，样式对齐其他页 .WP_titlebarTabs） */ .WP_heroCrumb .WP_caseNav { gap: 10px; padding: 0; margin-left: auto; /* Bleed right 出血贴视口右缘（>1280px 视口抵消容器居中边距，与横幅右缘对齐） */ margin-right: max(min(0px, calc((var(--container, 1280px) - 100vw) / 2 - 16px)), -160px); } .WP_heroCrumb .WP_caseNavBtn { height: auto; padding: 6px 16px; font-size: .88rem; font-weight: 400; border-radius: 0; border-color: var(--line-2, #d1d5db); } .WP_heroCrumb .WP_caseNavIc { width: 17px; height: 17px; } .WP_heroCrumb .WP_caseNavIc .WP_icon { width: 100%; height: 100%; } .WP_heroCrumb .WP_caseNavBtn:hover { background: #fff; color: #00532f; border-color: #00532f; } .WP_heroCrumb .WP_caseNavBtn.on { background: #00532f; border-color: #00532f; color: #fff; } .WP_heroCrumb .WP_caseNavBtn.on .WP_caseNavIc { color: #fff; } /* Index page 汇总页专用 */ .WP_caseNavHub { display: none; } /* V2 Natural 世界地图 */ .WP_caseMapModule { display: grid; grid-template-columns: 34fr 66fr; align-items: center; gap: 10px; max-width: 1600px; margin: 0 auto; padding: 60px 0 48px; } .WP_caseMapCopy { max-width: 470px; } .WP_mapEyebrow { position: relative; margin: 0; padding-left: 40px; font-size: 12.5px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: #64748b; } .WP_mapEyebrow::before { content: ''; position: absolute; left: 0; top: 50%; width: 28px; height: 2px; margin-top: -1px; background: #006d3d; } .WP_mapTitle { margin: 18px 0 0; font-family: var(--font-head); font-size: clamp(34px, 2.75vw, 52px); font-weight: 700; line-height: 1.12; letter-spacing: -1px; color: #17212b; text-wrap: balance; } .WP_mapT1, .WP_mapT2 { display: block; } .WP_mapTGreen { color: #006d3d; } .WP_mapTDark { color: #17212b; } .WP_mapIntro { margin: 18px 0 0; max-width: 420px; font-size: 16px; line-height: 1.7; color: #71849a; } /* Dynamic 动态地区 */ .WP_rcards { position: relative; display: grid; margin-top: 34px; } .WP_rcard { grid-area: 1 / 1; display: grid; /* Landscape 横板 图42文58 */ grid-template-columns: 42fr 58fr; align-items: stretch; background: #fff; border: 1px solid #e7edea; border-radius: 15px; box-shadow: 0 14px 34px rgba(23, 33, 43, .08); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s; } .WP_rcard.on { opacity: 1; visibility: visible; transform: none; transition: opacity .28s ease, transform .28s ease, visibility 0s; } .WP_rcardImg { position: relative; min-height: 0; background: #eef3f0; } .WP_rcardImg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .WP_rcardBody { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 20px; min-width: 0; } .WP_rcardEyebrow { margin: 0; font-size: 10.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #8aa396; } .WP_rcardName { margin: 0; font-family: var(--font-head); font-size: 23px; font-weight: 700; line-height: 1.15; letter-spacing: -.4px; color: #17212b; } .WP_rcardTag { display: inline-flex; align-items: center; height: 24px; padding: 0 11px; border-radius: 999px; background: rgba(0, 109, 61, .09); color: #006d3d; font-size: 12px; font-weight: 600; line-height: 1; } .WP_rcardTag.isSoon { background: #f1f5f3; color: #71849a; font-weight: 500; } .WP_rcardDesc { margin: 0; font-size: 13px; line-height: 1.6; color: #71849a; } .WP_rcardGo { display: inline-flex; align-items: center; gap: 8px; margin-top: 3px; color: #006d3d; font-size: 13.5px; font-weight: 600; text-decoration: none; } .WP_rcardGo .WP_icon { width: 15px; height: 15px; transition: transform .25s ease; } .WP_rcardGo:hover { text-decoration: underline; } .WP_rcardGo:hover .WP_icon { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .WP_rcard { transition: none; } } /* Map canvas 地图画布 */ .WP_caseMapArea { position: relative; /* Bleed left 地图左移 */ margin-left: -106px; /* Bleed right 地图向右出血 */ margin-right: max(calc((var(--container) - 100vw) / 2 - 16px), -140px); } .WP_caseMapCanvas { position: relative; width: 100%; aspect-ratio: 1.6 / 1; } .WP_caseMapCanvas .WP_icon, .WP_mapSvg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; } .WP_mapLink { outline: none; } .WP_mapReg { fill: #dce7e2; stroke: #fff; stroke-width: .6; transition: fill .28s ease; cursor: pointer; } .WP_mapReg.WP_has { fill: #d3e2da; } /* 悬停 */ .WP_mapReg.WP_mapHov, .WP_mapLink:hover .WP_mapReg, .WP_mapLink:focus-visible .WP_mapReg { fill: #9cc4af; } .WP_mapReg.WP_mapSel, .WP_mapLink:hover .WP_mapReg.WP_mapSel, .WP_mapLink:focus-visible .WP_mapReg.WP_mapSel { fill: #75af95; } .WP_mapLink:focus-visible { outline: none; } .WP_mapReg:focus { outline: none; } .WP_mapLink:focus-visible .WP_mapReg { stroke: #17212b; stroke-width: 1.2; } /* Radar 选中光环 */ .WP_mapRadar { position: absolute; width: 0; height: 0; opacity: 0; transition: opacity .3s ease; pointer-events: none; } .WP_mapRadar.on { opacity: 1; } .WP_mapRadar span { position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(0, 109, 61, .16); } .WP_mapRadar span:nth-child(1) { width: 130px; height: 130px; } .WP_mapRadar span:nth-child(2) { width: 230px; height: 230px; border-color: rgba(0, 109, 61, .11); } .WP_mapRadar span:nth-child(3) { width: 330px; height: 330px; border-color: rgba(0, 109, 61, .07); background: radial-gradient(circle, rgba(0, 109, 61, .07) 0%, rgba(0, 109, 61, 0) 62%); } .WP_mapRadar.on span:nth-child(1) { animation: WP_mapPulse 2.8s ease-in-out infinite; } @keyframes WP_mapPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 109, 61, .10); } 50% { box-shadow: 0 0 0 14px rgba(0, 109, 61, 0); } } @media (prefers-reduced-motion: reduce) { .WP_mapRadar.on span:nth-child(1) { animation: none; } } /* Region labels 地区浮层：圆点 + 连线 + 标签盒 */ .WP_mapTag { position: absolute; /* tag-shift JS 碰撞消解 */ transform: translate(0, calc(-50% + var(--tag-shift, 0px))); display: inline-flex; align-items: center; gap: 10px; background: none; text-decoration: none; white-space: nowrap; } .WP_mapTag.WP_mapTagFlip { flex-direction: row-reverse; transform: translate(-100%, calc(-50% + var(--tag-shift, 0px))); } .WP_mapTagPin { display: inline-flex; width: 13px; height: 13px; flex: 0 0 auto; border-radius: 50%; background: #006d3d; border: 2.5px solid #fff; box-shadow: 0 1px 5px rgba(23, 33, 43, .28); transition: transform .28s ease, box-shadow .28s ease; } .WP_mapTagLine { width: 24px; height: 1.5px; flex: 0 0 auto; background: linear-gradient(90deg, #b9cfc2, #d7e3db); transition: background .28s ease; } .WP_mapTagFlip .WP_mapTagLine { background: linear-gradient(270deg, #b9cfc2, #d7e3db); } .WP_mapTagBox { display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: #fff; border: 1px solid rgba(23, 33, 43, .05); box-shadow: 0 4px 18px rgba(0, 0, 0, .08); transition: background .28s ease, box-shadow .28s ease, transform .28s ease; } .WP_mapTag:hover .WP_mapTagBox, .WP_mapTag.WP_mapOn .WP_mapTagBox { box-shadow: 0 8px 26px rgba(0, 109, 61, .18); } .WP_mapTag.WP_mapOn .WP_mapTagPin { transform: scale(1.25); box-shadow: 0 0 0 5px rgba(0, 109, 61, .15); } .WP_mapTag.WP_mapSel { z-index: 2; } .WP_mapTag.WP_mapSel .WP_mapTagBox { background: #006d3d; border-color: #006d3d; box-shadow: 0 10px 30px rgba(0, 109, 61, .32); } .WP_mapTag.WP_mapSel .WP_mapTagPin { transform: scale(1.2); box-shadow: 0 0 0 5px rgba(0, 109, 61, .22); } .WP_mapTagB { display: flex; flex-direction: column; gap: 2px; } .WP_mapTag b { font-size: 14px; font-weight: 600; line-height: 1.2; color: #17212b; transition: color .28s ease; } .WP_mapTag i { font-style: normal; font-size: 12px; line-height: 1.3; color: #71849a; transition: color .28s ease; } .WP_mapTag.WP_mapSel b { color: #fff; } .WP_mapTag.WP_mapSel i { color: rgba(255, 255, 255, .78); } .WP_mapTagGo { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #006d3d; color: #fff; flex: 0 0 auto; transition: background .28s ease, color .28s ease; } .WP_mapTag.WP_mapSel .WP_mapTagGo { background: #fff; color: #006d3d; } .WP_mapTagGo .WP_icon { width: 15px; height: 15px; } /* Global 全球业务 */ .WP_caseStats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; max-width: 1600px; margin: 8px auto 64px; background: #fff; border: 1px solid #e2e9e5; border-radius: 14px; box-shadow: 0 6px 24px rgba(23, 33, 43, .05); overflow: hidden; } .WP_caseStat { display: flex; align-items: center; gap: 13px; padding: 22px 30px; min-width: 0; } .WP_caseStat + .WP_caseStat { border-left: 1px solid #e9efeb; } .WP_caseStatIc { display: inline-flex; flex: 0 0 auto; width: 27px; height: 27px; color: #006d3d; } .WP_caseStatIc .WP_icon { width: 100%; height: 100%; } .WP_caseStatTx { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .WP_caseStatNum { font-family: var(--font-head); font-size: clamp(21px, 1.5vw, 25px); font-weight: 700; line-height: 1.1; letter-spacing: -.3px; color: var(--brand-dark, #003d2b); } .WP_caseStatLb { font-size: 12.5px; line-height: 1.35; color: #64748b; overflow-wrap: break-word; } /* Regional head 地区页标题 */ .WP_caseRHead { background: #fff; padding: 34px 0 6px; } .WP_caseRHead .WP_breadcrumb { font-size: 13px; color: #94a3b8; margin-bottom: 12px; } .WP_caseRTitle { margin: 0 0 8px; font-size: 40px; font-weight: 700; letter-spacing: -.5px; color: #111827; } .WP_caseRTitle::after { content: ''; display: block; width: 46px; height: 3px; border-radius: 2px; background: #006d3d; margin-top: 12px; } .WP_caseRSub { margin: 0; font-size: 17px; color: #64748b; } /* ---------- 筛选 Real filters ---------- */ .WP_caseFilters { display: flex; flex-direction: column; gap: 10px; padding: 28px 0 4px; } .WP_caseFilter { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .WP_caseFilterLb { flex: 0 0 88px; font-size: 13px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .4px; } .WP_caseFilterOpts { display: flex; flex-wrap: wrap; gap: 8px; } .WP_caseFilterOpts a { display: inline-block; padding: 7px 16px; border: 1px solid #e5e7eb; border-radius: 999px; background: #fff; color: #374151; font-size: 14px; text-decoration: none; transition: all .2s ease; } .WP_caseFilterOpts a:hover { border-color: #006d3d; color: #006d3d; } .WP_caseFilterOpts a.on { background: #006d3d; border-color: #006d3d; color: #fff; } /* Case list 案例列表 */ .WP_caseList { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-top: 22px; } .WP_caseItem { background: #fff; border: 1px solid #e8edea; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .3s ease; } .WP_caseItem:hover { box-shadow: 0 14px 32px -18px rgba(0, 50, 30, .35); } .WP_caseItemPic { display: block; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #f2f6f4; } .WP_caseItemPic img { width: 100%; height: 100%; object-fit: cover; display: block; } .WP_caseItemBody { padding: 18px; display: flex; flex-direction: column; flex: 1; } .WP_caseItemTitle { margin: 0 0 6px; font-size: 19px; font-weight: 700; line-height: 1.35; color: #111827; } .WP_caseItemLoc { margin: 0 0 8px; font-size: 14px; color: #64748b; } .WP_caseItemRow { margin: 0 0 4px; font-size: 14px; color: #374151; } .WP_caseItemRow span { color: #64748b; } /* ---------- 空状态 Empty ---------- */ .WP_caseEmpty { padding: 64px 24px; text-align: center; color: #64748b; font-size: 16px; background: #f8faf9; border: 1px dashed #d6e3db; border-radius: 10px; margin-top: 22px; } .WP_caseEmpty p { margin: 0; } /* ---------- 分页 Pager ---------- */ /* .WP_ppager 基类自带 padding: 32px 0，这里统一为上下 30px；容器底部留白归零避免叠加 */ .WP_casePager { padding: 30px 0; } .WP_casePage:has(.WP_casePager) { padding-bottom: 0; } /* ---------- 详情页 Single fallback ---------- */ .WP_caseSHead { background: #fff; padding: 34px 0 10px; } .WP_caseSHead .WP_breadcrumb { font-size: 13px; color: #94a3b8; margin-bottom: 10px; } .WP_caseSTitle { margin: 0 0 8px; font-size: 36px; font-weight: 700; color: #111827; letter-spacing: -.5px; } .WP_caseSMeta { margin: 0; color: #64748b; font-size: 15px; } .WP_caseSBody { padding: 10px 40px 60px; max-width: 1600px; } .WP_caseSPic { margin: 18px 0 0; border-radius: 10px; overflow: hidden; } .WP_caseSPic img { width: 100%; height: auto; display: block; max-height: 560px; object-fit: cover; } .WP_caseSInfo { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 20px 0 0; padding: 16px 20px; background: #f6f9f7; border-radius: 8px; font-size: 15px; color: #374151; } .WP_caseSInfo p { margin: 0; } .WP_caseSInfo span { color: #64748b; } .WP_caseSInfo a { color: #006d3d; text-decoration: none; } .WP_caseSContent { margin-top: 24px; max-width: 860px; font-size: 16px; line-height: 1.8; color: #374151; } .WP_caseSBack { display: inline-block; margin-top: 28px; } /* ---------- 响应式 Responsive ---------- */ @media (max-width: 1199px) { /* Tablet same 平板 */ .WP_caseBanner { min-height: 445px; } .WP_caseBannerCopy { width: min(40%, 430px); } .WP_cbTitle { font-size: clamp(40px, 5.6vw, 56px); } .WP_cbSub { font-size: 19px; } .WP_cbFeatIc { width: 60px; height: 60px; } .WP_cbFeatIc .WP_icon { width: 26px; height: 26px; } .WP_cbFeatTx { font-size: 11.5px; } .WP_cbFeats { margin-top: 30px; } .WP_cbFeat + .WP_cbFeat { margin-left: 16px; padding-left: 16px; } .WP_caseRTitle { font-size: 34px; } /* Tablet map 平板 */ .WP_caseMapModule { grid-template-columns: 34fr 66fr; padding: 48px 0 32px; gap: 10px; } .WP_mapTitle { font-size: clamp(28px, 3vw, 40px); } .WP_rcardImg { min-height: 0; } .WP_mapTagBox { padding: 10px 13px; gap: 9px; } .WP_mapTagLine { width: 16px; } .WP_mapRadar span:nth-child(1) { width: 90px; height: 90px; } .WP_mapRadar span:nth-child(2) { width: 160px; height: 160px; } .WP_mapRadar span:nth-child(3) { width: 230px; height: 230px; } .WP_mapTag b { font-size: 13.5px; } .WP_mapTagGo { width: 24px; height: 24px; } } @media (max-width: 991px) { .WP_caseList { grid-template-columns: repeat(2, 1fr); } .WP_caseMapModule { grid-template-columns: 31fr 69fr; gap: 14px; } .WP_mapTagBox { padding: 8px 11px; gap: 8px; } .WP_mapTagLine { width: 12px; } .WP_mapTag i { font-size: 11px; } } @media (max-width: 767px) { /* Banner Phone 手机端 */ .WP_caseBanner { min-height: 0; background: radial-gradient(560px 320px at -8% -10%, rgba(122, 156, 108, .16), rgba(122, 156, 108, 0) 68%), linear-gradient(115deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 34%), linear-gradient(180deg, #f7f7f3 0%, #f2f1ea 100%); } /* Banner Phone 手机端：与 PC 同图同裁剪，改用 800w 副本（原图 71KB -> 23KB） */ .WP_caseBanner { min-height: 56.25vw; background: linear-gradient(90deg, rgba(247, 247, 243, .72) 0%, rgba(247, 247, 243, .38) 34%, rgba(247, 247, 243, 0) 58%), url(/wp-content/uploads/cases/banner-800x300.webp) center 32% / cover no-repeat, #f7f7f3; /* AVIF 优先，同上 */ background: linear-gradient(90deg, rgba(247, 247, 243, .72) 0%, rgba(247, 247, 243, .38) 34%, rgba(247, 247, 243, 0) 58%), image-set(url(/wp-content/uploads/cases/banner-800x300.avif) type('image/avif'), url(/wp-content/uploads/cases/banner-800x300.webp) type('image/webp')) center 32% / cover no-repeat, #f7f7f3; } .WP_caseBanner::after { content: none; } .WP_caseBannerIn { min-height: 0; display: block; width: 100%; padding: 32px 18px 58px; } .WP_caseBannerCopy { width: 36%; } /* 文案限制在左侧浅色区，不压到右侧图片；收窄让副标题多换行 */ .WP_caseBannerCopy .WP_breadcrumb { margin-bottom: 12px; } /* Four icons 四图标：手机端隐藏，布局对齐关于页 */ .WP_cbFeats { display: none; } .WP_cbEyebrow { font-size: 8.5px; letter-spacing: 1.4px; white-space: nowrap; } .WP_cbEyebrow::after { margin-top: 12px; } .WP_cbTitle { margin-top: 6px; font-size: 21px; } .WP_cbSub { margin-top: 5px; font-size: 11px; line-height: 1.4; } /* Phone copy 手机端 */ .WP_caseMapModule { grid-template-columns: 1fr; gap: 18px; padding: 30px 0 6px; } .WP_caseMapCopy { max-width: none; } .WP_mapEyebrow { font-size: 11px; letter-spacing: 2px; padding-left: 36px; } .WP_mapTitle { margin-top: 12px; font-size: clamp(30px, 8.6vw, 34px); } .WP_mapIntro { margin-top: 12px; font-size: 14px; line-height: 1.6; } .WP_rcards { margin-top: 18px; } /* Region card 地区卡片 */ .WP_rcard { grid-template-columns: 1fr; } .WP_rcardImg { min-height: 0; aspect-ratio: 16 / 9; } .WP_rcardBody { padding: 16px 16px 18px; gap: 8px; } .WP_rcardName { font-size: 20px; } .WP_rcardDesc { font-size: 13px; } /* Region 地区快捷：胶囊容器样式（对齐关于页设计稿：白底圆角胶囊、选中深绿填充、横向滑动） */ .WP_caseNavHub { display: block; background: #fff; border-radius: 999px; padding: 6px; box-shadow: 0 6px 18px rgba(0, 61, 43, .08); } /* Map keeps 地图保持 */ .WP_caseMapArea { margin: 6px 0 0; } .WP_mapTag { display: none; } .WP_mapTag.WP_mapTagShow { display: inline-flex; } /* Mobile tag 手机端仅标签盒居中 */ .WP_mapTag.WP_mapTagShow { transform: translate(-50%, calc(-50% + var(--tag-shift, 0px))); } .WP_mapTag.WP_mapTagShow .WP_mapTagPin, .WP_mapTag.WP_mapTagShow .WP_mapTagLine { display: none; } .WP_mapRadar span:nth-child(1) { width: 64px; height: 64px; } .WP_mapRadar span:nth-child(2) { width: 110px; height: 110px; } .WP_mapRadar span:nth-child(3) { width: 156px; height: 156px; } .WP_mapReg { stroke-width: .8; } /* Metrics cards 数据卡 */ .WP_caseStats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 16px 0 40px; border-radius: 12px; } .WP_caseStat { padding: 14px 16px; gap: 10px; } .WP_caseStat:nth-child(even) { border-left: 1px solid #e9efeb; } .WP_caseStat:nth-child(n+3) { border-top: 1px solid #e9efeb; } .WP_caseStatIc { width: 21px; height: 21px; } .WP_caseStatNum { font-size: clamp(20px, 5.6vw, 23px); } .WP_caseStatLb { font-size: 11.5px; } .WP_caseNav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 22px 0 8px; } .WP_caseNav::-webkit-scrollbar { display: none; } .WP_caseNavBtn { flex: 0 0 auto; height: 44px; padding: 0 16px; font-size: 14px; } /* Hub 胶囊条内页签：无边框透明底，选中深绿圆角填充 */ .WP_caseNavHub .WP_caseNav { gap: 4px; padding: 0; } .WP_caseNavHub .WP_caseNavBtn { height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: #111827; } .WP_caseNavHub .WP_caseNavBtn:hover { background: #eaf4ee; border-color: transparent; } .WP_caseNavHub .WP_caseNavBtn.on { background: #006d3d; border-color: transparent; color: #fff; } /* Crumb bar pills 面包屑条内页签（地区页，对齐 titlebarTabs） */ .WP_heroCrumb .WP_caseNav { gap: 8px; padding: 4px 0 10px; } .WP_heroCrumb .WP_caseNavBtn { height: auto; padding: 4px 12px; font-size: 13px; } .WP_heroCrumb .WP_caseNavIc { width: 15px; height: 15px; } /* 地区页手机端：地区导航与面包屑同一行靠右（flex:1 1 0 强制同行），溢出横向滑动；当前页名（如 Europe Cases）去除 */ .systin-case-region .WP_heroCrumb .WP_caseNav { flex: 1 1 0; min-width: 0; max-width: 100%; padding: 4px 0 10px; } .systin-case-region .WP_breadcrumb .cur, .systin-case-region .WP_breadcrumb .sep:nth-last-of-type(2) { display: none; } .WP_caseRTitle { font-size: 28px; } .WP_caseRSub { font-size: 15px; } /* 筛选项一行横滑 */ .WP_caseFilterOpts { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .WP_caseFilterOpts::-webkit-scrollbar { display: none; } .WP_caseFilterOpts a { flex: 0 0 auto; white-space: nowrap; } .WP_caseFilterLb { flex-basis: 100%; } .WP_caseList { grid-template-columns: 1fr; gap: 16px; } .WP_caseItemTitle { font-size: 17px; } .WP_caseSBody { padding-left: 20px; padding-right: 20px; } .WP_caseSTitle { font-size: 26px; } } /* ---------- Scroll reveal 滚动入场（案例页，与产品页同款节奏） ---------- */ .WP_rvJs .WP_casePage [data-rv], .WP_rvJs .WP_caseSingle [data-rv] { transition-duration: .65s; } .WP_rvJs .WP_casePage [data-rv="fade-up"], .WP_rvJs .WP_caseSingle [data-rv="fade-up"] { transform: translate3d(0, 32px, 0); } .WP_rvJs .WP_casePage [data-rv].WP_rvIn, .WP_rvJs .WP_caseSingle [data-rv].WP_rvIn { transform: translate3d(0, 0, 0); } @media (max-width: 767px) { .WP_rvJs .WP_casePage [data-rv], .WP_rvJs .WP_caseSingle [data-rv] { transition-duration: .55s; } .WP_rvJs .WP_casePage [data-rv="fade-up"], .WP_rvJs .WP_caseSingle [data-rv="fade-up"] { transform: translate3d(0, 20px, 0); } } /* ===================== shop.css 产品中心 v2 列表 Product shop v2 ===================== */ /* shop.css V2.0 产品中心 */ /* Page head 页头 */ .WP_shopHead { background: #fff; border-bottom: 1px solid #edf0ed; padding: 0 0 28px; } .WP_shopHead .WP_breadcrumb { padding: 18px 0 0; } .WP_shopHeadRow { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 16px; } .WP_shopHeadCopy { min-width: 0; } .WP_shopTitle { font-family: var(--font-head); font-size: clamp(26px, 3.1vw, 40px); font-weight: 700; line-height: 1.18; letter-spacing: -.01em; color: var(--ink); margin: 0 0 8px; } .WP_shopSub { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 46ch; } .WP_shopCount { margin: 0; font-size: 13px; color: var(--muted); white-space: nowrap; letter-spacing: .02em; } .WP_shopCount b { font-family: var(--font-head); font-size: 24px; font-weight: 700; color: var(--gold); margin-right: 4px; } /* Page header 页头 */ /* Layout 页面骨架 */ .WP_shop { background: #f7f9f8; padding: 30px 0 76px; } /* 重置选项 */ .WP_shopBusy .WP_shopMain { opacity: .55; pointer-events: none; transition: opacity .18s ease; } .WP_shopMain { transition: opacity .18s ease; } .WP_shopBody { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 34px; align-items: start; } .WP_shopMain { min-width: 0; } .WP_shopTrigger { display: none; } .WP_shopVeil { display: none; } /* Page skeleton 页面骨架 */ /* Filter rail 左筛选栏 */ .WP_shopSide { position: sticky; top: calc(var(--hdr-h) + 16px); align-self: start; } .WP_shopSideIn { background: #fff; border: 1px solid #e9ece9; border-radius: 14px; padding: 4px 20px 20px; } .WP_shopSideTop { display: none; } .WP_shopBlock { padding: 18px 0 4px; border-bottom: 1px solid #f0f2f0; } .WP_shopBlock:last-of-type { border-bottom: 0; } /* Mobile 手机端筛选 */ .WP_shopSortPills, .WP_shopActions { display: none; } .WP_shopBlockTitle { margin: 0 0 10px; font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8b938e; } .WP_shopCats, .WP_shopFeats { list-style: none; margin: 0; padding: 0; } .WP_shopCats li + li, .WP_shopFeats li + li { margin-top: 2px; } .WP_shopCats a, .WP_shopFeats a { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; text-decoration: none; font-size: 14px; color: #33403a; transition: background .2s ease, color .2s ease; } .WP_shopCats a:hover, .WP_shopFeats a:hover { background: #f3f8f5; color: var(--gold); } .WP_shopCats a span { flex: 1 1 auto; min-width: 0; } .WP_shopCats a i, .WP_shopFeats a b { font-style: normal; font-size: 12px; font-weight: 600; color: #9aa39d; background: #f4f6f4; border-radius: 999px; padding: 1px 7px; min-width: 24px; text-align: center; transition: background .2s ease, color .2s ease; } .WP_shopCats a.on, .WP_shopFeats a.on { background: rgba(0, 109, 61, .07); color: var(--gold); font-weight: 600; } /* 计数 */ .WP_shopDimRow { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; font-size: 14px; color: #a9b2ac; opacity: .62; } .WP_shopDimRow b { font-style: normal; font-size: 12px; font-weight: 600; color: #9aa39d; background: #f4f6f4; border-radius: 999px; padding: 1px 7px; min-width: 24px; text-align: center; } .WP_shopCats a.on i, .WP_shopFeats a.on b { background: var(--gold); color: #fff; } .WP_shopFeats a span { flex: 1 1 auto; min-width: 0; } .WP_shopFeats a .WP_sfi { opacity: .75; } .WP_shopFeats a.on .WP_sfi, .WP_shopFeats a:hover .WP_sfi { opacity: 1; } .WP_shopPromo { margin-top: 18px; padding: 18px 16px; border-radius: 12px; background: linear-gradient(160deg, rgba(0, 109, 61, .96) 0%, rgba(4, 62, 37, .98) 100%); color: #fff; } .WP_shopPromoTitle { margin: 0 0 6px; font-family: var(--font-head); font-size: 15px; font-weight: 700; line-height: 1.35; } .WP_shopPromoText { margin: 0 0 14px; font-size: 12.5px; line-height: 1.55; color: rgba(255, 255, 255, .78); } .WP_shopPromoBtn { display: inline-block; padding: 8px 16px; border-radius: 999px; background: #fff; color: var(--gold); font-size: 12.5px; font-weight: 700; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; } .WP_shopPromoBtn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0, 0, 0, .18); } /* Left filter 左筛选栏 */ /* Toolbar 工具栏 */ .WP_shopBar { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #e9ece9; border-radius: 12px; padding: 10px 12px; } .WP_shopSearch { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; border: 1px solid #e4e8e4; border-radius: 8px; background: #fbfcfb; transition: border-color .2s ease, background .2s ease; } .WP_shopSearch:focus-within { border-color: rgba(0, 109, 61, .45); background: #fff; } .WP_shopSearch input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: 10px 4px 10px 13px; font-family: inherit; font-size: 14px; color: var(--ink); outline: none; } .WP_shopSearch input::placeholder { color: #a6aeaa; } .WP_shopSearchBtn { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: transparent; color: var(--gold); cursor: pointer; border-radius: 8px; transition: background .2s ease; } .WP_shopSearchBtn:hover { background: rgba(0, 109, 61, .08); } .WP_shopSearchBtn .WP_icon { width: 17px; height: 17px; } .WP_shopSort { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .WP_shopSortLabel { font-size: 13px; color: var(--muted); white-space: nowrap; } .WP_shopSort select { appearance: none; -webkit-appearance: none; border: 1px solid #e4e8e4; border-radius: 8px; padding: 9px 32px 9px 12px; font-family: inherit; font-size: 13.5px; color: var(--ink); background: #fff url("../svg/shop-sort.svg") no-repeat right 9px center / 13px auto; cursor: pointer; outline: none; } .WP_shopSort select:focus { border-color: rgba(0, 109, 61, .45); } .WP_shopViews { display: flex; gap: 4px; flex: 0 0 auto; border-left: 1px solid #eef0ee; padding-left: 10px; } .WP_shopView { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #9aa39d; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; } .WP_shopView .WP_icon { width: 16px; height: 16px; } .WP_shopView:hover { color: var(--gold); background: #f3f8f5; } .WP_shopView.on { color: var(--gold); background: rgba(0, 109, 61, .08); border-color: rgba(0, 109, 61, .2); } /* Result count 结果数、 */ .WP_shopStatus { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; margin: 16px 0 16px; } .WP_shopResult { margin: 0; font-size: 13.5px; color: var(--muted); } .WP_shopChips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .WP_shopChip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #fff; border: 1px solid rgba(0, 109, 61, .25); color: var(--gold); font-size: 12.5px; text-decoration: none; transition: background .2s ease, border-color .2s ease; } .WP_shopChip:hover { background: rgba(0, 109, 61, .07); border-color: var(--gold); } .WP_shopChip .WP_icon { width: 10px; height: 10px; } .WP_shopClear { font-size: 12.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; } .WP_shopClear:hover { color: var(--gold); } /* Toolbar 工具栏 */ /* Product cards 产品卡片 */ .WP_shopGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .WP_shopCard { display: flex; flex-direction: column; background: #fff; border: 1px solid #e9ece9; border-radius: 14px; overflow: hidden; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; } .WP_shopCard:hover { transform: translateY(-4px); border-color: rgba(0, 109, 61, .35); box-shadow: 0 20px 40px -22px rgba(9, 44, 29, .42); } .WP_shopCardMedia { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #eef2ef; } .WP_shopCardMedia img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s cubic-bezier(.2, .6, .2, 1); } .WP_shopCard:hover .WP_shopCardMedia img { transform: scale(1.055); } .WP_shopCardPh { display: block; width: 100%; height: 100%; background: #eef2ef; } .WP_shopCardTag { position: absolute; left: 12px; top: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--gold); font-family: var(--font-head); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 2px 8px rgba(9, 44, 29, .12); } .WP_shopCardBody { display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px 18px 16px; } .WP_shopCardTitle { margin: 0 0 8px; font-family: var(--font-head); font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--ink); } .WP_shopCardTitle a { color: inherit; text-decoration: none; transition: color .2s ease; } .WP_shopCardTitle a:hover { color: var(--gold); } .WP_shopCardText { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: #6b7280; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .WP_shopCardFeats { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 7px 10px; } .WP_shopCardFeats li { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 1.35; color: #40514a; } .WP_shopCardFeats li span { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .WP_shopCardMetrics { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 7px 10px; } .WP_shopCardMetrics li { display: flex; align-items: flex-start; gap: 6px; min-width: 0; } .WP_shopCardMetrics li .WP_sfi { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; color: #08764d; } .WP_shopCardMetricTx { display: flex; flex-direction: column; min-width: 0; font-size: 11.5px; line-height: 1.35; } .WP_shopCardMetricTx strong { font-weight: 700; color: #23312b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .WP_shopCardMetricTx em { font-style: normal; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .WP_shopCardBtn { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid #f1f3f1; font-family: var(--font-head); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--gold); text-decoration: none; } .WP_shopCardBtn .WP_icon { width: 15px; height: 15px; transition: transform .25s ease; } .WP_shopCardBtn:hover .WP_icon { transform: translateX(4px); } /* ---- 列表视图 List view ---- */ .WP_shopGrid[data-view="list"] { grid-template-columns: minmax(0, 1fr); gap: 16px; } .WP_shopGrid[data-view="list"] .WP_shopCard { flex-direction: row; } .WP_shopGrid[data-view="list"] .WP_shopCardMedia { flex: 0 0 300px; width: 300px; height: 232px; aspect-ratio: auto; min-height: 0; } .WP_shopGrid[data-view="list"] .WP_shopCardBody { flex: 1 1 auto; padding: 20px 22px; } .WP_shopGrid[data-view="list"] .WP_shopCardText { -webkit-line-clamp: 2; line-clamp: 2; } .WP_shopGrid[data-view="list"] .WP_shopCardFeats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .WP_shopGrid[data-view="list"] .WP_shopCardMetrics { grid-template-columns: repeat(4, minmax(0, 1fr)); } .WP_shopGrid[data-view="list"] .WP_shopCardBtn { border-top: 0; padding-top: 0; justify-content: flex-start; gap: 6px; } .WP_shopGrid[data-view="list"] .WP_shopCardBtn span { text-decoration: underline; text-underline-offset: 4px; } /* Product cards 产品卡片 */ /* Empty state 空结果 */ .WP_shopEmpty { background: #fff; border: 1px dashed #d8ded9; border-radius: 14px; padding: 64px 24px; text-align: center; } .WP_shopEmpty .WP_icon { width: 30px; height: 30px; color: #c3ccc6; } .WP_shopEmpty p { margin: 14px 0 18px; font-size: 15px; color: var(--muted); } .WP_shopEmptyBtn { display: inline-block; padding: 9px 20px; border-radius: 999px; background: var(--gold); color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; } .WP_shopEmptyBtn:hover { background: var(--gold-dark); } /* 分页：上下留白统一 30px（覆盖 .WP_ppager 基类的 32px），容器底部归零避免叠加 */ .WP_shopPager { margin-top: 0; padding: 30px 0; display: flex; flex-wrap: wrap; justify-content: center; } .WP_shop:has(.WP_shopPager) { padding-bottom: 0; } /* Empty results 空结果 */ /* Feature icons 卖点图标 */ .WP_sfi { display: inline-block; width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; background-color: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; } .WP_sfi-thermal { --i: url("../svg/sfi-thermal.svg"); } .WP_sfi-sound { --i: url("../svg/sfi-sound.svg"); } .WP_sfi-secur { --i: url("../svg/sfi-secur.svg"); } .WP_sfi-weather { --i: url("../svg/sfi-weather.svg"); } .WP_sfi-light { --i: url("../svg/sfi-light.svg"); } .WP_sfi-space { --i: url("../svg/sfi-space.svg"); } .WP_sfi-custom { --i: url("../svg/sfi-custom.svg"); } .WP_sfi-operat { --i: url("../svg/sfi-operat.svg"); } .WP_sfi-durable { --i: url("../svg/sfi-durable.svg"); } .WP_sfi-design { --i: url("../svg/sfi-design.svg"); } .WP_sfi-energy { --i: url("../svg/sfi-energy.svg"); } .WP_sfi-casement { --i: url("../svg/sfi-casement.svg"); } .WP_sfi-slidewin { --i: url("../svg/sfi-slidewin.svg"); } .WP_sfi-tiltturn { --i: url("../svg/sfi-tiltturn.svg"); } .WP_sfi-fixedwin { --i: url("../svg/sfi-fixedwin.svg"); } .WP_sfi-liftslide { --i: url("../svg/sfi-liftslide.svg"); } .WP_sfi-slidedoor { --i: url("../svg/sfi-slidedoor.svg"); } .WP_sfi-folding { --i: url("../svg/sfi-folding.svg"); } .WP_sfi-swing { --i: url("../svg/sfi-swing.svg"); } .WP_sfi-tree { --i: url("../svg/sfi-tree.svg"); } .WP_sfi-balcony { --i: url("../svg/sfi-balcony.svg"); } .WP_sfi-sofa { --i: url("../svg/sfi-sofa.svg"); } .WP_sfi-bed { --i: url("../svg/sfi-bed.svg"); } .WP_sfi-bath { --i: url("../svg/sfi-bath.svg"); } .WP_sfi-sunroom { --i: url("../svg/sfi-sunroom.svg"); } .WP_sfi-umbrella { --i: url("../svg/sfi-umbrella.svg"); } .WP_sfi-chip { --i: url("../svg/sfi-chip.svg"); } .WP_sfi-check { --i: url("../svg/sfi-check.svg"); } /* Toolbar 工具栏 */ .WP_icfilter { --i: url("../svg/icon-filter.svg"); } .WP_iclist { --i: url("../svg/icon-list.svg"); } /* Feature icons 卖点图标 */ /* Responsive 响应式 */ /* two-column 卡片两列 */ @media (max-width: 1200px) { .WP_shopBody { grid-template-columns: 252px minmax(0, 1fr); gap: 26px; } .WP_shopGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .WP_shopGrid[data-view="list"] .WP_shopCardMedia { flex-basis: 250px; width: 250px; } .WP_shopGrid[data-view="list"] .WP_shopCardFeats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Filter rail 筛选栏改为 */ @media (max-width: 991px) { .WP_shop { padding-top: 20px; padding-bottom: 32px; } .WP_shopBody { grid-template-columns: minmax(0, 1fr); gap: 16px; } .WP_shopTrigger { display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex: 0 0 74px; height: 40px; padding: 0 6px; border: 1px solid #e4e8e4; border-radius: 8px; background: #fff; color: var(--ink); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; } .WP_shopTrigger > span { overflow: hidden; text-overflow: ellipsis; } .WP_shopTrigger .WP_icon { width: 13px; height: 13px; color: var(--gold); } .WP_shopTriggerN { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--gold); color: #fff; font-size: 11px; font-weight: 700; } .WP_shopSide { position: fixed; left: 0; right: 0; top: auto; bottom: 0; /* dvh 底部弹层 */ height: auto; max-height: 82vh; max-height: 82dvh; width: 100%; z-index: 1000; transform: translateY(104%); transition: transform .34s cubic-bezier(.4, 0, .2, 1); background: #fff; border-radius: 18px 18px 0 0; box-shadow: 0 -18px 50px -24px rgba(9, 44, 29, .5); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .WP_shopSide.is-open { transform: none; } /* 底部安全区：iPhone Home 指示条不压 CTA 按钮 */ .WP_shopSideIn { border: 0; border-radius: 0; padding: 0 18px calc(18px + env(safe-area-inset-bottom)); min-height: 0; } .WP_shopSideTop { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: #fff; padding: 16px 0 14px; border-bottom: 1px solid #f0f2f0; z-index: 1; } .WP_shopSideTitle { font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--ink); } .WP_shopSideClose { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 8px; background: #f4f6f4; color: #4b5852; cursor: pointer; } .WP_shopSideClose .WP_icon { width: 12px; height: 12px; } /* pills Facet 筛选 */ .WP_shopSide .WP_shopFeats { display: flex; flex-wrap: wrap; gap: 9px; } .WP_shopSide .WP_shopFeats li, .WP_shopSide .WP_shopFeats li + li { margin: 0; } .WP_shopSide .WP_shopFeats a, .WP_shopSide .WP_shopDimRow { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1px solid #e3e8e4; border-radius: 999px; background: #f6f9f7; font-size: 13.5px; color: #33403a; } .WP_shopSide .WP_shopFeats a .WP_sfi { width: 14px; height: 14px; margin: 0; } .WP_shopSide .WP_shopFeats a:hover { background: #edf4f0; color: var(--gold); } .WP_shopSide .WP_shopFeats a.on { background: rgba(0, 109, 61, .09); border-color: var(--gold); color: var(--gold); font-weight: 600; } .WP_shopSide .WP_shopFeats a b { background: transparent; padding: 0; min-width: 0; margin-left: 2px; color: #9aa39d; font-weight: 500; } .WP_shopSide .WP_shopDimRow { opacity: .55; border-style: dashed; } .WP_shopSide .WP_shopDimRow b { background: transparent; padding: 0; min-width: 0; } .WP_shopSide .WP_shopBlock { padding: 16px 0 6px; } /* Sort-by pills 排序药丸组 */ .WP_shopSortPills { display: block; } .WP_shopSortPills .WP_shopBlockTitle { margin-bottom: 4px; } /* Bottom action 底部操作行 */ .WP_shopActions { display: flex; gap: 10px; margin-top: 20px; padding: 10px 0 2px; position: sticky; bottom: 0; background: #fff; } .WP_shopActionGhost, .WP_shopActionCta { flex: 1 1 50%; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; } .WP_shopActionGhost { border: 1px solid #dfe5e1; background: #fff; color: #33403a; } .WP_shopActionCta { border: 0; background: var(--gold); color: #fff; } .WP_shopActionCta:active { background: #00542f; } .WP_shopVeil { display: block; position: fixed; inset: 0; z-index: 999; background: rgba(8, 24, 16, .45); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; } .WP_shopVeil.is-open { opacity: 1; visibility: visible; } body.WP_shopLock { overflow: hidden; } /* 抽屉打开时隐藏底部导航，避免压在弹层上 */ body.WP_shopLock .WP_mtabs { display: none; } /* 工具栏一行：搜索（占满剩余）+ Filters + 排序（两控件等宽等高同描边） */ .WP_shopBar { flex-wrap: nowrap; gap: 8px; padding: 8px; } .WP_shopSearch { flex: 1 1 auto; min-width: 0; } .WP_shopSort { flex: 0 0 74px; } .WP_shopSortLabel { display: none; } .WP_shopSort select { width: 100%; max-width: none; height: 40px; text-overflow: ellipsis; padding: 0 20px 0 8px; font-size: 12.5px; } .WP_shopSearch input { padding: 9px 4px 9px 11px; } .WP_shopSearchBtn { width: 36px; height: 38px; } .WP_shopViews { display: none; } .WP_shopStatus { margin-top: 12px; } .WP_shopGrid[data-view="list"] .WP_shopCard { flex-direction: column; } .WP_shopGrid[data-view="list"] .WP_shopCardMedia { flex: 0 0 auto; width: 100%; aspect-ratio: 4 / 3; min-height: 0; } .WP_shopGrid[data-view="list"] .WP_shopCardBody { padding: 16px 18px; } } /* 单列卡片 */ @media (max-width: 767px) { .WP_shopHead { padding-bottom: 22px; } .WP_shopHeadRow { flex-direction: column; align-items: flex-start; gap: 10px; } .WP_shopTitle { font-size: 26px; } .WP_shopSub { font-size: 14px; } .WP_shopCount b { font-size: 19px; } .WP_shopGrid { grid-template-columns: minmax(0, 1fr); gap: 16px; } .WP_shopCardFeats { grid-template-columns: 1fr 1fr; } .WP_shopGrid[data-view="list"] .WP_shopCardFeats { grid-template-columns: 1fr 1fr; } .WP_shopViews { display: none; } .WP_shopResult { font-size: 12.5px; } .WP_shopSortLabel { display: none; } .WP_shopPager { margin-top: 0; padding: 30px 0; } } /* ---- ≤420: tighten for very small screens ≤420：极小屏收紧 ---- */ @media (max-width: 420px) { .WP_shopCardBody { padding: 14px 15px; } .WP_shopCardFeats { gap: 6px 8px; } .WP_shopCardFeats li { font-size: 11.5px; } } /* Responsive 响应式 */ /* ---- Scroll reveal 滚动入场：位移更轻，节奏接近关于页 ---- */ .WP_rvJs .WP_shop [data-rv] { transition-duration: .65s; } .WP_rvJs .WP_shop [data-rv="fade-up"] { transform: translate3d(0, 32px, 0); } .WP_rvJs .WP_shop [data-rv].WP_rvIn { transform: translate3d(0, 0, 0); } @media (max-width: 767px) { .WP_rvJs .WP_shop [data-rv="fade-up"] { transform: translate3d(0, 20px, 0); } } /* ===================== product.css ===================== */ /* product.css 产品详情页 V5 — 欧洲高端极简（1:1 还原设计稿） */ /* 整页背景：与首屏同色，通篇统一 */ body.systin-product-page { background: #F8F7F4; } .WP_pd { --pd-green: #08764D; --pd-green-d: #07563A; --pd-ink: #172831; --pd-text: #46535C; --pd-mut: #73808A; --pd-soft: #F5F6F3; --pd-line: #E3E7E4; --pd-gutter: max(16px, calc((100vw - var(--container, 1200px)) / 2)); font-size: 16px; color: var(--pd-text); } /* ---------- Hero 首屏：左文右图斜切 ---------- */ .WP_pdHero { background: #F8F7F4; overflow: hidden; } .WP_pdHeroIn { display: grid; grid-template-columns: 37fr 63fr; /* 图列加宽：40/60 → 37/63 */ gap: 24px 56px; align-items: stretch; /* 行高由 16:9 主图决定；左列拉伸后 CTA 贴底与图片对齐 */ padding-top: 24px; padding-bottom: 24px; } .WP_pdInfo { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; min-width: 0; } .WP_pd .WP_breadcrumb { font-size: 12px; color: var(--pd-mut); margin: 0 0 16px; } .WP_pd .WP_breadcrumb a { color: var(--pd-mut); } .WP_pd .WP_breadcrumb a:hover { color: var(--pd-green); } .WP_pd .WP_breadcrumb .cur { color: var(--pd-text); } .WP_pd .WP_breadcrumb .sep { margin: 0 6px; } .WP_pdCat { margin: 0 0 10px; font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--pd-mut); } .WP_pdTitle { margin: 0; font-size: clamp(30px, 2.8vw, 44px); font-weight: 700; line-height: 1.18; color: var(--pd-ink); font-family: var(--font-head, inherit); } .WP_pdRule { display: block; width: 44px; height: 3px; margin: 18px 0 20px; background: var(--pd-green); border-radius: 2px; } .WP_pdIntro { margin: 0 0 16px; font-size: 15.5px; line-height: 1.85; color: var(--pd-mut); max-width: 44ch; } /* Hero 卖点图标：2 列 × 2 行 */ .WP_pdAdv { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; } .WP_pdAdv li { display: flex; flex-direction: row; align-items: center; gap: 7px; } .WP_pdAdv .WP_sfi { width: 20px; height: 20px; color: var(--pd-green); } .WP_pdAdv span { font-size: 12.5px; line-height: 1.4; font-weight: 600; color: var(--pd-text); /* 允许换行：德语等长文案不再横向溢出（两列等高后纵向有富余） */ } /* Hero 按钮：主绿 + 白底描边（贴左栏底部，与右图底缘对齐） */ .WP_pdCtas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: auto; padding-top: 16px; } .WP_pdBtn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 30px; border-radius: 6px; font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none; transition: background .25s, color .25s, border-color .25s, box-shadow .25s; } .WP_pdBtnP { background: var(--pd-green-d); color: #fff; } .WP_pdBtnP:hover { background: var(--pd-green); color: #fff; box-shadow: 0 10px 24px rgba(8, 118, 77, .25); } .WP_pdBtnW { background: #fff; color: var(--pd-green-d); border: 1px solid var(--pd-green); } .WP_pdBtnW:hover { background: var(--pd-green-t, #E7F2EC); color: var(--pd-green-d); } .WP_pdBtnW .WP_icwhatsapp { width: 20px; height: 20px; } .WP_pdBtnWl { border-color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .08); color: #fff; } .WP_pdBtnWl:hover { background: rgba(255, 255, 255, .18); color: #fff; } /* CTA 区 WhatsApp 绿色实底 + 报价白底描边 */ .WP_pdBtnPl { background: var(--pd-green); border-color: var(--pd-green); color: #fff; } .WP_pdBtnPl:hover { background: var(--pd-green-d); border-color: var(--pd-green-d); color: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, .22); } /* Mobile-first extras 手机端首屏附加块（默认隐藏，≤991 显示） */ .WP_pdMFirst { display: none; } /* Hero 图：斜切左缘（顶部尖角圆弧过渡），通栏贴右 */ .WP_pdHeroFig { margin: 0; min-width: 0; align-self: end; /* 行高由左列决定时图片仍贴底对齐 */ margin-right: calc(-1 * var(--pd-gutter)); aspect-ratio: 16 / 9; /* 产品主图 16:9 */ height: auto; /* 斜切左缘 + 顶角圆弧：SVG objectBoundingBox 贝塞尔（平滑），polygon 为旧浏览器兜底 */ clip-path: polygon(19% 0, 16.9% 0.7%, 15.2% 2.9%, 14.2% 5.8%, 13.8% 8%, 12.75% 15%, 10.5% 30%, 8.25% 45%, 6% 60%, 3% 80%, 0 100%, 100% 100%, 100% 0); clip-path: url(#pdHeroArc); overflow: hidden; background: var(--pd-soft); } .WP_pdHeroFig img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---------- 长文案语言排版压缩：图片保持 16:9 基准高度（与 zh-hk 一致），左列收紧以贴合图高 ---------- 仅 zh-hk 保持上方原尺寸；其余 14 语言（含 ja）用以下压缩值。 */ html[data-lang]:not([data-lang="zh-hk"]) .WP_pd .WP_breadcrumb { margin-bottom: 10px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } html[data-lang]:not([data-lang="zh-hk"]) .WP_pdCat { margin-bottom: 6px; font-size: 12px; } html[data-lang]:not([data-lang="zh-hk"]) .WP_pdTitle { font-size: clamp(24px, 2vw, 30px); line-height: 1.25; } html[data-lang]:not([data-lang="zh-hk"]) .WP_pdRule { margin: 12px 0 14px; } html[data-lang]:not([data-lang="zh-hk"]) .WP_pdIntro { font-size: 13.5px; line-height: 1.65; margin-bottom: 12px; max-width: 52ch; } html[data-lang]:not([data-lang="zh-hk"]) .WP_pdAdv { gap: 8px 14px; margin-bottom: 14px; } html[data-lang]:not([data-lang="zh-hk"]) .WP_pdAdv .WP_sfi { width: 16px; height: 16px; } html[data-lang]:not([data-lang="zh-hk"]) .WP_pdAdv span { font-size: 11.5px; line-height: 1.35; } html[data-lang]:not([data-lang="zh-hk"]) .WP_pdCtas { gap: 10px; } html[data-lang]:not([data-lang="zh-hk"]) .WP_pdBtn { height: 42px; padding: 0 22px; font-size: 13.5px; } /* ---------- Metrics 性能指标条：圆角边框卡片（内缩，与设计稿一致） ---------- */ .WP_pdMetrics { background: #F8F7F4; /* 与首屏主背景同色，向下延续 */ padding: 0 0 26px; /* 顶部间距由 hero 的 24px 统一提供 */ } .WP_pdMetricRow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--pd-line); border-radius: 10px; background: #fff; overflow: hidden; } .WP_pdMetricRow-n3 { grid-template-columns: repeat(3, 1fr); } .WP_pdMetricRow-n2 { grid-template-columns: repeat(2, 1fr); } .WP_pdMetricRow-n1 { grid-template-columns: 1fr; } .WP_pdMetric { display: flex; align-items: center; gap: 14px; padding: 18px 24px; border-left: 1px solid var(--pd-line); min-width: 0; } .WP_pdMetric:first-child { border-left: 0; padding-left: 0; } .WP_pdMetric .WP_sfi { width: 30px; height: 30px; color: var(--pd-green); flex: 0 0 auto; } .WP_pdMetricTx { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .WP_pdMetricTx strong { font-size: 15px; font-weight: 700; color: var(--pd-ink); line-height: 1.3; } .WP_pdMetricTx em { font-style: normal; font-size: 12.5px; color: var(--pd-mut); line-height: 1.45; } /* ---------- Anchor Nav 吸附导航（居中） ---------- */ .WP_pdNav-bar { position: sticky; top: 64px; z-index: 880; background: #fff; } /* 底边内凹（凹槽）线：与分节标题衔接线同款质感 */ .WP_pdNav-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(23, 40, 49, .13); /* 凹槽上沿阴影 */ box-shadow: 0 1px 0 rgba(255, 255, 255, .92); /* 下沿高光 */ } .WP_pdNavList { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 44px; overflow-x: auto; scrollbar-width: none; } .WP_pdNavList::-webkit-scrollbar { display: none; } .WP_pdNav-bar a { display: block; position: relative; z-index: 1; padding: 13px 0 11px; font-size: 14px; font-weight: 600; color: var(--pd-mut); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .25s, border-color .25s; } .WP_pdNav-bar a:hover { color: var(--pd-green); } .WP_pdNav-bar a.on { color: var(--pd-green); border-color: var(--pd-green); } /* ---------- 通用分节与区块头 ---------- */ .WP_pdSec { padding: 52px 0 6px; } .WP_pdHead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 0 0 26px; position: relative; } /* 衔接细线：紧贴绿条右缘，同一水平线向右延伸到行尾；内凹（凹槽）质感 */ .WP_pdHead::after { content: ""; position: absolute; left: 34px; /* 紧贴绿色短条右缘，无缝衔接 */ right: 0; bottom: 1px; height: 1px; background: rgba(23, 40, 49, .13); /* 凹槽上沿：略深的阴影线 */ box-shadow: 0 1px 0 rgba(255, 255, 255, .92); /* 下沿高光：形成刻入感 */ } .WP_pdHeadL { min-width: 0; } .WP_pdH2 { margin: 0; font-size: clamp(24px, 2.1vw, 32px); font-weight: 700; line-height: 1.25; color: var(--pd-ink); font-family: var(--font-head, inherit); } .WP_pdHeadEn { font-family: var(--font-body, inherit); font-size: 12px; font-weight: 500; letter-spacing: .08em; color: var(--pd-mut); margin-left: 12px; white-space: nowrap; } .WP_pdHeadRule { display: block; width: 34px; height: 3px; margin-top: 14px; background: var(--pd-green); border-radius: 2px; } .WP_pdHeadNote { margin: 0; font-size: 13px; line-height: 1.7; color: var(--pd-mut); text-align: right; max-width: 34ch; } /* Overview 概述 */ .WP_pdOvText { font-size: 15px; line-height: 2; color: var(--pd-text); max-width: 900px; } .WP_pdOvText p { margin: 0 0 16px; } .WP_pdOvText p:last-child { margin-bottom: 0; } /* ---------- Core Advantages 核心优势：两列图文（与整页同底色） ---------- */ .WP_pdAdvSec { background: #F8F7F4; margin: 0 calc(-1 * var(--pd-gutter)) 0; padding-left: var(--pd-gutter); padding-right: var(--pd-gutter); padding-bottom: 56px; } .WP_pdAdvGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 38px; /* 设计稿：行距收紧、卡片整体放大 */ } .WP_pdAdvCard { display: grid; grid-template-columns: 46fr 54fr; gap: 18px; align-items: stretch; /* 文案区拉伸至图片高度 */ min-width: 0; } .WP_pdAdvImg { margin: 0; border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 10; background: #E9ECE8; } .WP_pdAdvImg img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; } .WP_pdAdvImgPh { background: linear-gradient(135deg, #eef1ee 0%, #f7f8f6 55%, #eef1ee 100%); } .WP_pdAdvCard:hover .WP_pdAdvImg img { transform: scale(1.04); } .WP_pdAdvBody { position: relative; min-width: 0; } /* 裁剪层：文案区高度恒等于图片高度，任何语言超长都在层内截断，绝不撑高卡片 */ .WP_pdAdvBodyIn { position: absolute; inset: 0; overflow: hidden; } .WP_pdAdvBody h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--pd-ink); } .WP_pdAdvBody p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.6; color: var(--pd-mut); } .WP_pdAdvRule { display: block; width: 26px; height: 2px; background: var(--pd-green); border-radius: 1px; } /* 中窄桌面（两列保持但图片更矮）：字号同步降档，正文尽量不触裁剪 */ @media (max-width: 1180px) { .WP_pdAdvBody h3 { font-size: 16px; } .WP_pdAdvBody p { font-size: 12.5px; line-height: 1.55; } } /* ---------- Technical Specification 技术规格：左表右图 ---------- */ .WP_pdSpecGrid { display: grid; grid-template-columns: 45fr 55fr; gap: 40px; align-items: stretch; /* 左表与右图列等高，底部对齐 */ } /* Spec 区：衔接细线只延伸到左列表格右缘（45fr 列 + 40px 间隙的右列份额），后面剪断 */ .WP_pdSpecSec .WP_pdHead::after { right: calc(55% + 18px); } .WP_pdTable { background: #fff; border: 1px solid var(--pd-line); border-radius: 8px; overflow: hidden; } /* Spec 区左表填满列高：行高均分拉伸，底缘与右侧图片底对齐 */ .WP_pdSpecTable { display: flex; flex-direction: column; } .WP_pdSpecTable table { flex: 1; height: 100%; } .WP_pdTable table { width: 100%; border-collapse: collapse; margin: 0; font-size: 13px; line-height: 1.55; } .WP_pdTable td { padding: 8px 14px; border-top: 1px solid var(--pd-line); vertical-align: top; color: var(--pd-text); } .WP_pdTable tr:first-child td { border-top: 0; } .WP_pdTable td:first-child { width: 36%; font-weight: 700; color: var(--pd-ink); white-space: nowrap; } /* 标签列强制单行 */ .WP_pdTable tr:nth-child(odd) td { background: #FAFBF9; } .WP_pdTable table p { margin: 0; } /* 参数值单行显示（溢出省略，悬停 title 显示全文，避免表格被长描述撑爆） */ .WP_pdTable .WP_pdSpecVal { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .WP_pdSpecSide { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .WP_pdChipRow { list-style: none; margin: -56px 0 0; /* 上提：4 卡垂直居中骑在标题衔接线上（线上 28px + 线下 28px） */ padding: 0; position: relative; z-index: 1; /* 白卡盖住身后的细线，形成骑线效果 */ display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .WP_pdChip { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--pd-line); border-radius: 6px; padding: 10px 12px; min-width: 0; min-height: 56px; /* 统一卡高：一行值 + 一行标签，任何语言不撑高 */ } .WP_pdChip .WP_sfi { width: 24px; height: 24px; color: var(--pd-green); flex: 0 0 auto; } .WP_pdChipTx { display: flex; flex-direction: column; gap: 2px; min-width: 0; } /* 上下各锁一行：超长省略号，保证所有语言/产品卡片等大 */ .WP_pdChipTx strong, .WP_pdChipTx em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .WP_pdChipTx strong { font-size: 13.5px; font-weight: 700; color: var(--pd-ink); line-height: 1.3; } .WP_pdChipTx em { font-style: normal; font-size: 11.5px; color: var(--pd-mut); line-height: 1.4; } .WP_pdSpecFigs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; /* 右列被左表撑高时，图片区弹性填满，底缘保持对齐 */ flex: 1; align-items: stretch; } .WP_pdSpecFig { margin: 0; border-radius: 8px; overflow: hidden; background: #fff; border: 1px solid var(--pd-line); display: flex; flex-direction: column; } .WP_pdSpecFig img { width: 100%; aspect-ratio: 4 / 3; flex: 1; min-height: 0; object-fit: cover; display: block; background: #fff; } .WP_pdSpecFig figcaption { padding: 9px 12px; font-size: 12px; color: var(--pd-mut); text-align: center; border-top: 1px solid var(--pd-line); } .WP_pdSpecsExtra { font-size: 14px; line-height: 1.8; color: var(--pd-mut); } .WP_pdSpecsExtra p { margin: 0 0 10px; } /* ---------- Application Scenarios 应用场景：四列卡片 ---------- */ .WP_pdAppGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .WP_pdAppCard { margin: 0; background: #F7F8F6; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; } /* Link variant 带链接的场景卡 */ a.WP_pdAppCard { text-decoration: none; color: inherit; } a.WP_pdAppCard:hover { text-decoration: none; color: inherit; } a.WP_pdAppCard:hover h3 { color: var(--pd-green); } .WP_pdAppMedia { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--pd-soft); } .WP_pdAppMedia img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .WP_pdAppCard:hover .WP_pdAppMedia img { transform: scale(1.05); } .WP_pdAppBody { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 16px; } .WP_pdAppTx { min-width: 0; } .WP_pdAppTx h3 { margin: 0 0 3px; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--pd-ink); } .WP_pdAppTx p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--pd-mut); } .WP_pdAppGo { flex: 0 0 auto; width: 16px; height: 16px; color: var(--pd-text); transition: transform .3s ease, color .3s ease; } .WP_pdAppCard:hover .WP_pdAppGo { transform: translateX(4px); color: var(--pd-green); } /* ---------- FAQ 常见问题：极简手风琴（全宽行 + 展开浅灰底，与设计稿一致） ---------- */ .WP_pdFaq { background: transparent; border: 0; border-radius: 0; padding: 0; } .WP_pdFaq .hi-faq { margin: 0; } .WP_pdFaq .hi-faq__item { border-bottom: 1px solid var(--pd-line); padding: 0 22px; transition: background .25s ease; } .WP_pdFaq .hi-faq__item:last-child { border-bottom: 0; } .WP_pdFaq .is-open { background: var(--pd-soft); } .WP_pdFaq .is-open + .hi-faq__item { border-top-color: transparent; } .WP_pdFaq .hi-faq__q { width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 16px; padding: 14px 0; background: none; border: 0; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--pd-ink); text-align: left; } .WP_pdFaq .hi-faq__ic { margin-left: auto; } .WP_pdFaq .is-open .hi-faq__q::before { content: ""; flex: 0 0 auto; width: 0; height: 0; margin-right: 2px; border-left: 8px solid var(--pd-green); border-top: 5px solid transparent; border-bottom: 5px solid transparent; } .WP_pdFaq .hi-faq__ic { flex: 0 0 auto; width: 12px; height: 12px; position: relative; } .WP_pdFaq .hi-faq__ic::before, .WP_pdFaq .hi-faq__ic::after { content: ""; position: absolute; background: var(--pd-green); transition: transform .25s; } .WP_pdFaq .hi-faq__ic::before { left: 0; right: 0; top: 5px; height: 2px; } .WP_pdFaq .hi-faq__ic::after { top: 0; bottom: 0; left: 5px; width: 2px; } .WP_pdFaq .is-open .hi-faq__ic::after { transform: scaleY(0); } .WP_pdFaq .hi-faq__a { overflow: hidden; max-height: 0; transition: max-height .35s ease; } .WP_pdFaq .is-open .hi-faq__a { padding-bottom: 14px; } .WP_pdFaq .hi-faq__a p { margin: 0; padding: 2px 0 0; font-size: 14px; line-height: 1.85; color: var(--pd-mut); } .WP_pdFaq .hi-faq__a p:last-child { margin-bottom: 0; } /* ---------- Procurement & Service 采购与服务：图标左置四列 ---------- */ .WP_pdServCol { display: grid; grid-template-columns: 30px 1fr; column-gap: 14px; align-items: start; min-width: 0; } .WP_pdServIc { grid-row: 1 / span 2; } .WP_pdServRow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); } .WP_pdServRow-n3 { grid-template-columns: repeat(3, 1fr); } .WP_pdServRow-n2 { grid-template-columns: repeat(2, 1fr); } .WP_pdServRow-n1 { grid-template-columns: 1fr; } .WP_pdServCol { padding: 4px 28px; border-left: 1px solid var(--pd-line); min-width: 0; } .WP_pdServCol:first-child { border-left: 0; padding-left: 0; } .WP_pdServIc { display: block; width: 30px; height: 30px; color: var(--pd-green); margin: 2px 0 0; } .WP_pdServIc svg { width: 100%; height: 100%; display: block; } .WP_pdServT { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--pd-ink); } .WP_pdServD { font-size: 13px; line-height: 1.8; color: var(--pd-mut); } /* Info 分节原样（正文遗留） */ .WP_pdExtra { margin-bottom: 30px; } .WP_pdExtra .WP_pdH2 { font-size: 22px; margin-bottom: 14px; } .WP_pdExtra ul, .WP_pdExtra ol { margin: 0 0 14px; padding-left: 20px; color: var(--pd-text); } .WP_pdExtra li { margin-bottom: 6px; line-height: 1.7; } .WP_pdExtra p { font-size: 15px; line-height: 1.85; color: var(--pd-text); margin: 0 0 14px; } /* ---------- Inquiry CTA 通栏询盘（规范：55/45 双栏 · 左白字衬线文案 + 右白卡带 Label 表单 · 暖灰渐变遮罩） ---------- */ .WP_pdCta { position: relative; margin: 52px 0 0; overflow: hidden; display: flex; align-items: center; } .WP_pdCtaBg { position: absolute; inset: 0; } .WP_pdCtaBg img { width: 100%; height: 100%; object-fit: cover; display: block; } .WP_pdCtaBg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(31, 40, 39, .48) 0%, rgba(61, 65, 60, .34) 48%, rgba(80, 75, 69, .12) 100%); } .WP_pdCtaIn { position: relative; z-index: 1; display: grid; grid-template-columns: 36fr 64fr; gap: 32px; align-items: stretch; width: 100%; padding-top: 30px; padding-bottom: 30px; } .WP_pdCtaText { display: flex; flex-direction: column; justify-content: center; /* 文案整体成块、垂直居中，与右侧卡片视觉平衡 */ min-width: 0; } .WP_pdCtaTitle { margin: 0; color: #fff; font-size: clamp(30px, 3.2vw, 46px); font-weight: 600; line-height: 1.28; letter-spacing: .01em; font-family: Georgia, 'Times New Roman', 'Noto Serif TC', 'Songti TC', 'STSong', 'SimSun', serif; max-width: 520px; white-space: pre-line; } .WP_pdCtaDesc { margin: 22px 0 0; color: rgba(255, 255, 255, .88); font-size: 16px; font-weight: 400; line-height: 1.9; max-width: 500px; } .WP_pdCtaActs { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 34px; } .WP_pdBtnArr { font-size: 1.05em; line-height: 1; } .WP_pdCtaActs .WP_pdBtn { height: 46px; padding: 0 26px; border-radius: 5px; font-size: 14.5px; } .WP_pdCtaActs .WP_pdBtnPl { background: #08764D; border-color: #08764D; } .WP_pdCtaActs .WP_pdBtnPl:hover { background: #075C3D; border-color: #075C3D; } .WP_pdCtaActs .WP_pdBtnWl { background: #fff; border-color: #fff; color: #172831; } .WP_pdCtaActs .WP_pdBtnWl:hover { background: #EDF0EC; border-color: #EDF0EC; color: #172831; } .WP_pdFormCard { background: rgba(255, 255, 255, .95); border-radius: 8px; padding: 12px 20px; box-shadow: 0 18px 44px rgba(20, 28, 20, .18); min-width: 0; width: calc(100% - 80px); /* 左右各内缩 40px */ justify-self: center; position: relative; left: 40px; /* 整卡右移 40px */ aspect-ratio: 1.594; /* 698×438：宽度再收、高度维持 438px */ display: flex; flex-direction: column; justify-content: center; /* Form tokens 表单变量（v2-contact 只在 .WP_cfNew 上定义，产品页需自带） */ --cf-primary: #08764D; --cf-primary-dark: #07563A; --cf-title: #172831; --cf-body: #46535C; --cf-bg: #FFFFFF; --cf-border: #E3E7E4; --cf-border-strong: #D3DAD4; --cf-input-h: 40px; --cf-radius: 4px; --cf-motion: 200ms; } /* Compact 紧凑化：覆盖 v2-contact 的 form 28px 上距与行距，满足卡片 16:9 */ .WP_pdFormCard form { display: flex; flex-direction: column; flex: 1; margin-top: 0; } .WP_pdFormCard .WP_cfRow { margin-top: 0; } .WP_pdFormEye { margin: 0 0 4px; display: flex; align-items: baseline; gap: 10px; } .WP_pdFormEye strong { font-size: 15px; font-weight: 700; color: #172831; } .WP_pdFormEyeEn { font-size: 11.5px; color: #96A0A5; } /* Field label 外置 Label + 必填星号（规范：不依赖 placeholder 识别字段） */ .WP_pdFLabel { display: block; margin: 0 0 2px; font-size: 12px; font-weight: 600; color: #172831; line-height: 1.35; } .WP_pdFLabel em { font-style: normal; color: #08764D; margin-left: 1px; } .WP_pdFormCard .WP_cfRow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; } .WP_pdFormCard .WP_cfField { margin: 0 0 4px; min-width: 0; } .WP_pdFormCard .WP_cfInput { height: 38px; font-size: 13.5px; color: #172831; padding: 0 12px; background: #fff; border: 1px solid #E3E7E4; border-radius: 4px; transition: border-color 200ms ease, box-shadow 200ms ease; } .WP_pdFormCard .WP_cfInput::placeholder { color: #96A0A5; opacity: 1; } .WP_pdFormCard .WP_cfInput:focus { outline: none; border-color: #08764D; box-shadow: 0 0 0 3px rgba(8, 118, 77, .16); } .WP_pdFormCard .WP_cfPhone .WP_cfInput { width: 100%; } .WP_pdFormCard .WP_cfTextarea { height: 52px; min-height: 48px; padding: 6px 12px; resize: vertical; } .WP_pdFormCard .WP_cfErr { font-size: 11.5px; margin-top: 2px; } /* Country combo 国家/地区下拉（右侧箭头） */ .WP_pdFormCard .WP_cfCombo { position: relative; } .WP_pdFormCard .WP_cfComboChev { position: absolute; right: 13px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-right: 1.6px solid #6B7A70; border-bottom: 1.6px solid #6B7A70; transform: rotate(45deg); pointer-events: none; } .WP_pdFormCard .WP_cfComboInput { padding-right: 34px; } /* ProjectType select 项目类型下拉 */ .WP_pdFormCard .WP_cfSelect { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236B7A70' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; } .WP_pdFormCard .WP_cfSelect.is-empty { color: #96A0A5; } .WP_pdFormCard .WP_cfSelect option { color: #172831; } /* Submit 通栏提交（#075C3D 全宽，flex 布局下吸底） */ .WP_pdFormCard .WP_cfMsg { margin: 0; padding: 3px 0; } .WP_cfActionsPd { display: block; margin-top: auto; padding-top: 8px; } .WP_pdFormCard .WP_cfSubmit { display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; padding: 0 30px; font-size: 13.5px; font-weight: 600; letter-spacing: .04em; background: #075C3D; border-radius: 4px; transition: background 200ms ease; } .WP_pdFormCard .WP_cfSubmit:hover { background: #064A32; } .WP_pdFormCard .WP_cfSubmit[disabled] { opacity: .65; cursor: not-allowed; } /* ---------- /Related products 相关产品 ---------- */ /* Related 6 卡单行（产品页专属，不影新闻页共用栅格） */ .WP_pdRel { padding: 52px 0 8px; } .WP_pdRel .WP_prelgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; } .WP_pdRel .WP_prelcardTitle { font-size: .92rem; } @media (max-width: 1080px) { .WP_pdRel .WP_prelgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .WP_pdRel .WP_prelgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 窄屏一行两列：左图右文；图片统一固定比例（所有卡片等大），文案超长省略号 */ .WP_pdAdvCard { gap: 12px; } .WP_pdAdvBody { position: static; } .WP_pdAdvBodyIn { position: static; inset: auto; overflow: visible; } .WP_pdAdvImg { aspect-ratio: 1 / 1; height: auto; min-height: 0; } .WP_pdAdvBody { align-self: center; } .WP_pdAdvBody h3 { font-size: 16px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .WP_pdAdvBody p { font-size: 12.5px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } } /* Lightbox 灯箱（保留） */ .WP_pdLbClose { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; display: grid; place-items: center; } .WP_pdLbClose:hover { background: rgba(255, 255, 255, .28); } .WP_pdLbClose .WP_icon { transform: rotate(45deg); } .WP_pdLbPrev, .WP_pdLbNext { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; display: grid; place-items: center; } .WP_pdLbPrev { left: 14px; } .WP_pdLbNext { right: 14px; } .WP_pdLbPrev .WP_icon { transform: rotate(180deg); } .WP_pdLbNext .WP_icon { transform: rotate(-90deg); } .WP_pdLbPrev:hover, .WP_pdLbNext:hover { background: rgba(255, 255, 255, .28); } /* ---------- Mobile 移动端 ---------- */ @media (max-width: 991px) { .WP_pdHeroIn { display: flex; flex-direction: column; align-items: stretch; padding-top: 18px; padding-bottom: 28px; gap: 0; } .WP_pdHero .WP_breadcrumb { margin-bottom: 8px; } .WP_pdHero .WP_pdTitle { font-size: 27px; } .WP_pdHero .WP_pdRule { display: none; } /* 设计稿眉标：绿色大写小标 */ .WP_pdHero .WP_pdCat { color: var(--pd-green); font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .WP_pdHeroFig { order: 3; margin: 12px 0 0; min-height: 0; max-height: none; clip-path: none; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; height: auto; } .WP_pdIntro { order: 2; margin-top: 10px; margin-bottom: 0; font-size: 15px; } .WP_pdAdv { display: none; } .WP_pdCtas { display: none; } /* 手机首屏附加块：2×2 指标卡 + 双按钮 */ .WP_pdMFirst { display: block; order: 4; } .WP_pdMChips { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .WP_pdMChip { background: #fff; border-radius: 12px; padding: 12px 14px; box-shadow: 0 2px 12px rgba(15, 40, 35, .07); display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 68px; /* 统一卡高：与桌面胶囊同策略，单行值 + 单行标签 */ } .WP_pdMChipHead { display: flex; align-items: center; gap: 7px; min-width: 0; } .WP_pdMChipHead .WP_sfi { width: 16px; height: 16px; color: var(--pd-green); flex: 0 0 auto; } .WP_pdMChipHead em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--pd-mut); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .WP_pdMChip strong { font-size: 16.5px; font-weight: 700; color: var(--pd-ink); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .WP_pdMActs { display: flex; gap: 12px; margin-top: 16px; } .WP_pdMActs .WP_pdBtn { flex: 1 1 0; min-width: 0; height: 50px; border-radius: 10px; font-size: 15px; padding: 0 12px; } .WP_pdMActs .WP_pdBtn svg { width: 19px; height: 19px; flex: 0 0 auto; } /* 指标条与规格区胶囊已并入首屏卡片，避免重复 */ .WP_pdMetrics { display: none; } .WP_pdSpecSide .WP_pdChipRow { display: none; } .WP_pdMetrics { padding: 14px 0 10px; } .WP_pdMetricRow, .WP_pdMetricRow-n3, .WP_pdMetricRow-n2 { grid-template-columns: 1fr 1fr; } .WP_pdMetric { border-left: 0; border-top: 1px solid var(--pd-line); padding: 14px 16px; } .WP_pdMetricRow .WP_pdMetric:nth-child(-n+2) { border-top: 0; } .WP_pdChipRow { grid-template-columns: 1fr 1fr; margin-top: 0; } /* 吸附导航：左右与内容对齐，圆角卡片条（与下方图片区块同款 6px 圆角/投影） */ .WP_pdNav-bar { margin: 0 var(--pd-gutter); border-radius: 6px; overflow: hidden; box-shadow: 0 2px 12px rgba(15, 40, 35, .07); } .WP_pdNav-bar::after { display: none; } /* 圆角卡片条去掉通栏凹槽线 */ .WP_pdNavList { justify-content: flex-start; gap: 26px; } .WP_pdSec { padding: 44px 0 6px; } /* WP_pdSec 简写会把全出血背景节的左右 padding 清零，这里恢复与首屏对齐 */ .WP_pdAdvSec { padding-left: var(--pd-gutter); padding-right: var(--pd-gutter); } .WP_pdHead { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 24px; } .WP_pdHeadNote { display: none; } /* 移动端删除副文案，head 底缘回到绿条 → 凹槽线自动与绿线对齐 */ .WP_pdAdvGrid { grid-template-columns: 1fr; gap: 32px; } .WP_pdSpecGrid { grid-template-columns: 1fr; gap: 28px; } .WP_pdSpecSec .WP_pdHead::after { right: 0; } /* 移动端单列，细线恢复整行 */ /* Application Scenarios：横排左右滑动（卡片 ~72% 宽 + 滑动吸附） */ .WP_pdAppGrid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .WP_pdAppGrid::-webkit-scrollbar { display: none; } .WP_pdAppCard { flex: 0 0 72%; scroll-snap-align: start; } .WP_pdServRow, .WP_pdServRow-n3, .WP_pdServRow-n2 { grid-template-columns: 1fr 1fr; } .WP_pdServCol { border-left: 0; border-top: 1px solid var(--pd-line); padding: 18px 0 4px; } .WP_pdServRow .WP_pdServCol:nth-child(-n+2) { border-top: 0; padding-top: 4px; } .WP_pdCtaIn { grid-template-columns: 1fr; gap: 30px; padding-top: 40px; padding-bottom: 40px; } .WP_pdCtaText { padding: 0; } .WP_pdFormCard { aspect-ratio: auto; padding: 20px 18px; } .WP_pdCtaBg::after { background: linear-gradient(90deg, rgba(31, 40, 39, .62) 0%, rgba(61, 65, 60, .48) 48%, rgba(80, 75, 69, .30) 100%); } .WP_pdCtaTitle { font-size: clamp(28px, 7.6vw, 34px); max-width: none; } .WP_pdCtaDesc { font-size: 14.5px; max-width: none; } .WP_pdCtaActs .WP_pdBtn { flex: 1 1 auto; } .WP_pdFormCard { padding: 22px 20px 20px; max-width: none; justify-self: stretch; width: auto; position: static; left: auto; } .WP_pdFormCard .WP_cfRow2 { grid-template-columns: 1fr; } } /* Application Scenarios 圆点指示器（移动端横滑，桌面隐藏） */ .WP_pdAppDots { display: none; } @media (max-width: 991px) { .WP_pdAppDots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; } .WP_pdAppDots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(15, 40, 35, .18); cursor: pointer; transition: width .25s ease, background .25s ease; } .WP_pdAppDots button.on { width: 22px; background: var(--pd-green); } } @media (max-width: 544px) { .WP_pdAdv { gap: 12px 10px; } .WP_pdMetricRow, .WP_pdMetricRow-n3 { grid-template-columns: 1fr 1fr; } .WP_pdFormCard .WP_cfRow2 { grid-template-columns: 1fr; } } /* Motion 减少动画 */ @media (prefers-reduced-motion: reduce) { .WP_pd * { transition: none !important; } .WP_pdAdvCard:hover .WP_pdAdvImg img, .WP_pdAppCard:hover .WP_pdAppMedia img { transform: none; } } /* 键盘焦点 Keyboard focus. */ .WP_pd a:focus-visible, .WP_pd button:focus-visible { outline: 2px solid var(--pd-green); outline-offset: 2px; } /* ---------- Scroll reveal 滚动入场（与关于我们 / 产品列表页同款节奏） ---------- */ .WP_rvJs .WP_pd [data-rv] { transition-duration: .65s; } .WP_rvJs .WP_pd [data-rv="fade-up"] { transform: translate3d(0, 32px, 0); } .WP_rvJs .WP_pd [data-rv].WP_rvIn { transform: translate3d(0, 0, 0); } @media (max-width: 767px) { .WP_rvJs .WP_pd [data-rv="fade-up"] { transform: translate3d(0, 20px, 0); } .WP_rvJs .WP_pd [data-rv] { transition-duration: .55s; } } /* 窄屏应用场景为横向轮播：第 3 张起在视口外，观察器不会触发，直接呈现 */ @media (max-width: 991px) { .WP_rvJs .WP_pd .WP_pdAppCard:nth-child(n+3)[data-rv] { opacity: 1; transform: none; } } /* ===================== privacy.css 隐私政策页 Privacy policy ===================== */ /* privacy.css 隐私政策页：深绿横幅 + 侧边目录 + 编辑式正文 */ /* ---------- 局部设计变量 ---------- */ .WP_priv { --pp-green: #075c42; --pp-green-deep: #103b30; --pp-green-active: #08784f; --pp-text: #202a2a; --pp-body: #424b48; --pp-text-2: #66716d; --pp-line: #e7ece9; --pp-soft: #f7f8f6; --pp-panel: #f1f6f3; --pp-hdr: var(--hdr-h, 90px); color: var(--pp-text); font-family: var(--font-body, 'Titillium Web', -apple-system, 'Segoe UI', Roboto, sans-serif); } /* 侧栏 sticky 需要祖先不裁切（主题全局 .WP_content 是 overflow:hidden） */ .WP_privPage .WP_content { overflow: visible; } .WP_priv a:focus-visible, .WP_priv button:focus-visible { outline: 2px solid var(--pp-green-active); outline-offset: 3px; border-radius: 2px; } /* ---------- Hero 横幅（高度与版式对齐关于页 About hero） ---------- */ .WP_privHero { position: relative; display: flex; align-items: center; min-height: 445px; /* Same 与关于页一致 */ overflow: hidden; background: var(--pp-green-deep); color: #fff; } .WP_privHeroBg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; } .WP_privHeroBgM { display: none; } .WP_privHero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16, 59, 48, .86) 0%, rgba(16, 59, 48, .58) 44%, rgba(16, 59, 48, .16) 72%); } .WP_privHeroIn { position: relative; z-index: 2; width: 100%; max-width: 1200px; margin: 0 auto; padding: 40px 20px 62px; /* 底部留出面包屑条 */ } .WP_privHeroCopy { max-width: 650px; } .WP_privEyebrow { margin: 0; font-family: var(--font-head, Montserrat, sans-serif); font-size: 16px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: rgba(255, 255, 255, .72); } /* 眉题下横条（对齐关于页 .WP_aboutEyebrow::after） */ .WP_privEyebrow::after { content: ""; display: block; width: 50px; height: 2px; margin-top: 16px; background: #5ec094; } .WP_privHeroTitle { margin: 12px 0 0; font-family: var(--font-head, Montserrat, sans-serif); font-size: 64px; font-weight: 700; line-height: 1.12; letter-spacing: -.01em; color: #fff; } /* 面包屑条：贴横幅底边，与关于页 .WP_heroCrumb 同款 */ .WP_privCrumbBar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; background: rgba(255, 255, 255, .93); } .WP_privCrumbBar .WP_breadcrumb { padding: 10px 0; } .WP_privCrumbBar .WP_breadcrumb a { color: #00532f; } .WP_privCrumbBar .WP_breadcrumb .cur, .WP_privCrumbBar .WP_breadcrumb { color: #4b5563; } /* ---------- 两栏布局 ---------- */ .WP_privWrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .WP_privGrid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 45px; align-items: start; padding: 52px 0 76px; } /* ---------- 侧边目录 ---------- */ .WP_privAside { position: sticky; top: calc(var(--pp-hdr) + 24px); align-self: start; } .WP_privToc { background: var(--pp-soft); border-radius: 4px; padding: 20px; } .WP_privTocTitle { margin: 0 0 14px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6b7671; } .WP_privTocList { margin: 0; padding: 0; list-style: none; } .WP_privTocLink { position: relative; display: flex; gap: 8px; padding: 7px 10px 7px 12px; border-radius: 3px; font-size: 13.5px; line-height: 1.45; color: #3f4a47; text-decoration: none; transition: color .18s ease, background-color .18s ease; } .WP_privTocLink::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: transparent; transition: background-color .18s ease; } .WP_privTocLink:hover { color: var(--pp-green); } .WP_privTocLink.is-active { background: #e8f0eb; color: var(--pp-green); font-weight: 600; } .WP_privTocLink.is-active::before { background: var(--pp-green); } .WP_privTocNum { flex: 0 0 18px; font-size: 12px; line-height: 1.6; color: #77827d; font-variant-numeric: tabular-nums; } .WP_privTocLink.is-active .WP_privTocNum { color: var(--pp-green-active); } .WP_privTocLabel { min-width: 0; } /* ---------- 正文抬头 ---------- */ .WP_privMain { min-width: 0; } .WP_privHead { padding-bottom: 35px; } .WP_privDocTitle { margin: 0 0 10px; font-family: var(--font-head, Montserrat, sans-serif); font-size: 38px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--pp-text); } .WP_privUpdated { margin: 0 0 22px; font-size: 15px; line-height: 1.5; color: var(--pp-text-2); } .WP_privIntro { margin: 0; max-width: 850px; font-size: 17px; line-height: 1.8; color: var(--pp-body); } /* ---------- 章节 ---------- */ .WP_privSec { padding-top: 34px; margin-top: 34px; border-top: 1px solid var(--pp-line); scroll-margin-top: calc(var(--pp-hdr) + 24px); } .WP_privSec:first-child { margin-top: 36px; padding-top: 0; border-top: 0; } .WP_privSecTitle { margin: 0 0 18px; font-family: var(--font-head, Montserrat, sans-serif); font-size: 27px; font-weight: 700; line-height: 1.3; letter-spacing: -.005em; color: var(--pp-green); scroll-margin-top: calc(var(--pp-hdr) + 24px); } .WP_privBody { font-size: 16px; line-height: 1.85; color: var(--pp-body); max-width: 850px; } .WP_privBody p { margin: 0 0 16px; } .WP_privBody p:last-child { margin-bottom: 0; } .WP_privBody strong { font-weight: 700; color: var(--pp-text); } .WP_privBody a { color: var(--pp-green); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .WP_privBody a:hover { color: var(--pp-green-active); } .WP_privBody ul { margin: 0 0 18px; padding: 0; list-style: none; } .WP_privBody ul li { position: relative; padding-left: 20px; margin-bottom: 10px; } .WP_privBody ul li:last-child { margin-bottom: 0; } .WP_privBody ul li::before { content: ""; position: absolute; left: 2px; top: .74em; width: 4px; height: 4px; border-radius: 50%; background: var(--pp-green); } /* 信息面板 */ .WP_privNote { margin: 20px 0 4px; padding: 16px 20px; background: var(--pp-panel); border-left: 3px solid #cfe2d7; border-radius: 6px; } .WP_privNote p { margin: 0; font-size: 15.5px; line-height: 1.75; color: #3c4a45; } /* 联系方式表 */ .WP_privBody ul.WP_privContact { margin: 20px 0 18px; display: grid; gap: 0; } .WP_privBody ul.WP_privContact li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; padding: 11px 0; margin: 0; border-bottom: 1px solid var(--pp-line); } .WP_privBody ul.WP_privContact li::before { display: none; } .WP_privContactK { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pp-text-2); padding-top: 3px; } .WP_privContact a { word-break: break-word; } .WP_privInlineLink { display: inline-block; font-weight: 600; text-decoration: none !important; } .WP_privInlineLink:hover { text-decoration: underline !important; } /* ---------- 底部 CTA ---------- */ .WP_privCta { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 56px; padding: 32px 34px; background: var(--pp-panel); border-radius: 6px; } .WP_privCtaCopy { min-width: 0; } .WP_privCtaTitle { margin: 0 0 8px; font-family: var(--font-head, Montserrat, sans-serif); font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--pp-text); } .WP_privCtaText { margin: 0; max-width: 56ch; font-size: 15.5px; line-height: 1.7; color: #55605c; } .WP_privCtaBtn { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; padding: 14px 26px; border-radius: 4px; background: var(--pp-green); color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color .2s ease; } .WP_privCtaBtn:hover { background: var(--pp-green-active); } /* ---------- 手机端折叠目录 ---------- */ .WP_privMtoc { display: none; } /* ---------- 平板 ---------- */ @media (max-width: 1023px) { .WP_privGrid { grid-template-columns: 210px minmax(0, 1fr); gap: 28px; padding: 40px 0 60px; } .WP_privToc { padding: 16px; } .WP_privTocLink { font-size: 13px; padding: 6px 8px 6px 10px; } .WP_privDocTitle { font-size: 34px; } .WP_privSecTitle { font-size: 25px; } .WP_privHeroTitle { font-size: clamp(40px, 5.6vw, 56px); } .WP_privHeroIn { padding: 34px 20px 58px; } } /* ---------- 手机 ---------- */ @media (max-width: 767px) { /* 与关于页手机端一致：56.25vw 高 */ .WP_privHero { min-height: 56.25vw; height: auto; } .WP_privHeroBg { display: none; } .WP_privHeroBgM { display: block; } .WP_privHeroIn { padding: 0 18px 48px; } .WP_privHeroCopy { max-width: 78%; } .WP_privEyebrow { font-size: 9px; letter-spacing: 1.4px; } .WP_privEyebrow::after { margin-top: 12px; width: 36px; } .WP_privHeroTitle { font-size: 26px; margin-top: 8px; } .WP_privCrumbBar .WP_breadcrumb { padding: 8px 0; font-size: 12.5px; } .WP_privWrap { padding: 0 20px; } .WP_privGrid { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 24px 0 56px; } .WP_privAside { display: none; } .WP_privMtoc { display: block; margin: 0 0 26px; } .WP_privMtocBtn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 16px; background: #fff; border: 1px solid #e2e7e4; border-radius: 6px; font: inherit; color: var(--pp-text); cursor: pointer; -webkit-tap-highlight-color: transparent; } .WP_privMtocLabel { font-size: 15px; font-weight: 700; } .WP_privMtocMeta { margin-left: auto; font-size: 13px; color: #6b7671; } .WP_privMtocIc { width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid #6f7a76; border-bottom: 2px solid #6f7a76; transform: rotate(45deg); transition: transform .2s ease, margin-top .2s ease; } .WP_privMtocBtn[aria-expanded="true"] .WP_privMtocIc { transform: rotate(-135deg); margin-top: 2px; } .WP_privMtocBtn[aria-expanded="true"] { border-radius: 6px 6px 0 0; } .WP_privMtocPanel { background: #fff; border: 1px solid #e2e7e4; border-top: 0; border-radius: 0 0 6px 6px; padding: 4px 0 6px; } .WP_privMtocList { margin: 0; padding: 0; list-style: none; } .WP_privMtocList a { display: flex; gap: 10px; align-items: baseline; padding: 13px 16px; min-height: 46px; box-sizing: border-box; font-size: 15px; line-height: 1.4; color: #3f4a47; text-decoration: none; border-bottom: 1px solid #f0f3f1; } .WP_privMtocList li:last-child a { border-bottom: 0; } .WP_privMtocList a.is-active { color: var(--pp-green); font-weight: 600; background: #f4f8f5; } .WP_privDocTitle { font-size: 28px; margin-bottom: 8px; } .WP_privHead { padding-bottom: 26px; } .WP_privUpdated { font-size: 14px; margin-bottom: 18px; } .WP_privIntro { font-size: 16.5px; line-height: 1.75; } .WP_privSec { padding-top: 28px; margin-top: 28px; } .WP_privSec:first-child { margin-top: 30px; } .WP_privSecTitle { font-size: 22px; margin-bottom: 14px; } .WP_privBody { font-size: 16px; line-height: 1.8; } .WP_privNote { padding: 14px 16px; } .WP_privNote p { font-size: 15px; } .WP_privBody ul.WP_privContact li { grid-template-columns: 1fr; gap: 2px; padding: 10px 0; } .WP_privContactK { padding-top: 0; } .WP_privCta { flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 40px; padding: 24px 22px; } .WP_privCtaTitle { font-size: 20px; } .WP_privCtaText { font-size: 15px; } .WP_privCtaBtn { width: 100%; justify-content: center; } } /* ---------- 动效偏好 ---------- */ @media (prefers-reduced-motion: reduce) { .WP_privTocLink, .WP_privMtocIc, .WP_privCtaBtn { transition: none; } }