/* ============================================================= 河南双曜智程有限公司 — Wire Harness & Cable Assembly Design system v1.0 Base : white (dominant) Accent: Southeast-Asia mainstream colours green #00A96E (Grab / Tokopedia family) → brand / CTA coral #FF5A1F (Shopee / Lazada promo) → highlight blue #1B6EF3 (Traveloka / Lazada) → links / info ------------------------------------------------------------- 想整体换色，只改下面第 1 节 :root 里的变量即可。 ============================================================= */ /* ------------------------------------------------------------- 1. Design tokens ------------------------------------------------------------- */ /* hidden 属性一律生效：联系方式留空时靠它把整块藏起来， 免得 display:flex / inline-flex 的组件把 hidden 顶掉。 */ [hidden] { display: none !important; } :root { /* --- surfaces (white first) --- */ --bg: #ffffff; --bg-soft: #f5f8fb; --bg-mute: #eef2f7; --line: #e3e9f0; --line-soft: #eef2f7; /* --- ink --- */ --ink: #0e1b2c; --ink-2: #41536a; /* 小字灰原来 #7a8a9e，对白底只有 3.53:1，达不到 WCAG AA 的 4.5:1。 压深到 #5f6f84（白底 5.13:1 / 软底 4.81:1），色相不变。 */ --ink-3: #5f6f84; --ink-invert: #ffffff; /* --- brand: SEA green --- */ --brand: #00a96e; --brand-600: #00915e; --brand-700: #00734a; --brand-soft: #e7f7f0; --brand-ring: rgba(0, 169, 110, .22); /* 按钮专用：白字压在 #00a96e 上只有 3.04:1，压深到 4.55:1。 --brand 仍然留给图标、描边、选中态这些装饰性填充。 */ --brand-cta: #00875a; --brand-cta-600: #00794b; /* --- accent: coral --- */ --accent: #ff5a1f; --accent-600: #e94812; --accent-700: #c2410c; /* 白字 5.18:1，也用于浅底上的橙色文字 */ --accent-800: #9a3412; --accent-soft: #fff0e9; /* --- info: bright blue --- */ --info: #1b6ef3; --info-700: #1560d8; /* 链接文字：软底上 5.33:1 */ --info-soft: #eaf1fe; /* --- pink / amber（深底上用的亮色保持原样） --- */ --pink-700: #c40063; /* --- extra accents --- */ --pink: #f5007a; --amber: #ffb020; /* --- dark band --- */ --ink-band: #0e1b2c; --ink-band-2: #14273d; /* --- effects --- */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, .05); --shadow-sm: 0 2px 10px rgba(0, 0, 0, .06); --shadow: 0 8px 28px rgba(0, 0, 0, .08); --shadow-lg: 0 20px 52px rgba(0, 0, 0, .14); /* --- shape --- */ --radius-xs: 8px; --radius-sm: 12px; --radius: 16px; --radius-lg: 24px; --pill: 999px; /* --- layout --- */ --container: 1240px; --header-h: 78px; --gutter: 24px; /* --- 首页分块版式（.tiles / .tile，只用在首页） --- */ --tile-gap: 12px; --tile-radius: 28px; /* --- 标题字距 --- 拉丁字母（en / id / ms / vi / fil）的大标题用紧一点的负字距（apple.com 那种）； 中文 / 泰 / 老 / 缅 / 高棉 / 泰米尔这些文字是等宽方块字， 负字距会把字挤在一起，换成微正字距更透气。 两档的值挂在 上，见下面 2. Reset 那一段。 */ --track-head: -.015em; --track-hero: -.032em; /* 首页大标题的行距（上下间距）。拉丁字母两行贴紧一点才像 apple.com； 方块字两行贴太紧会糊成一块，给到 1.3。同样按 data-lang 分档。 */ --lead-hero: 1.06; /* --- type --- 不用网络字体：站点要能双击本地打开（file://），引 Google Fonts 会直接失效， 而且 11 种文字（含泰/老挝/缅甸/高棉/泰米尔）靠一个 webfont 也盖不全。 原来的 "Inter" 只是写在栈里、从来没加载过 —— 有装 Inter 的人看到的是另一套字。 这里去掉它，改用系统字体栈，并把东南亚各文种的系统字体补齐。 */ --font: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans", "Microsoft YaHei", "Leelawadee UI", "Noto Sans Thai", "Noto Sans Lao", "Noto Sans Myanmar", "Noto Sans Khmer", "Nirmala UI", "Noto Sans Tamil", sans-serif; } /* ------------------------------------------------------------- 2. Reset / base ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink-2); font-family: var(--font); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; display: block; } img { height: auto; } /* 触摸反馈：去掉双击缩放的 300ms 延迟；点按高亮用品牌色而不是系统灰 */ a, button, [role="button"], input, select, textarea, label { touch-action: manipulation; } html { -webkit-tap-highlight-color: rgba(0, 169, 110, .16); scroll-padding-top: calc(var(--header-h) + 18px); } /* 键盘用户跳过导航直达正文（平时藏起来，Tab 到时才出现） */ .skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; padding: 12px 20px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: var(--ink); color: #fff; font-size: .875rem; font-weight: 700; transition: top .18s ease; } .skip-link:focus { top: 0; color: #fff; } /* :not(.btn)：不然 a:hover 会盖掉按钮自己的文字色 （.btn--ghost 的规格是 0,1,0，a:hover 是 0,1,1，深底上的幽灵按钮就会变成深绿字） */ a { color: var(--info-700); text-decoration: none; transition: color .18s ease; } a:not(.btn):hover { color: var(--brand-700); } :is(.hero, .section--ink, .cta-band) a:not(.btn):hover { color: #8ef0c4; } h1, h2, h3, h4, h5 { margin: 0 0 .5em; color: var(--ink); font-weight: 800; line-height: 1.22; letter-spacing: var(--track-head); text-wrap: balance; /* 标题不再出现"最后一个字掉到第二行" */ } /* 方块字语言：标题字距从紧改松（客户 2026-09-30 反馈"字间距稍微大一点"）。 data-lang 由页面 里的引导脚本写在 上，没有 JS 时退回默认（紧）。 只影响标题（--track-head / --track-hero），正文、按钮、页脚不动。 */ html[data-lang="zh"], html[data-lang="th"], html[data-lang="lo"], html[data-lang="my"], html[data-lang="km"], html[data-lang="ta"] { --track-head: .012em; --track-hero: .022em; --lead-hero: 1.3; } /* 中文首页大标题：两行**两端对齐**（客户 2026-09-30："上下没有对齐"）。 中文大标题的常规做法 —— 短的那行用字距补齐到和长的那行一样宽， 于是两行的左边、右边都对齐，读起来才是一个整齐的方块。 实现要点： · width: fit-content 让标题盒子 = 最长那行的宽度，再用 margin-inline:auto 居中； · text-align-last: justify 让"最后一行"也参与两端对齐 （两行各自在一个 里，所以两行都会被撑满）； · max-width: 100% 兜底 —— 窄屏上万一最长那行超过容器宽度， 盒子不会撑破，退回普通换行。 只对中文做：泰 / 老 / 缅 / 高棉 / 泰米尔不靠字距补白， 强行 justify 会把字拉开得很难看；英文等拉丁语言两行等宽反倒不自然。 */ /* 只在宽屏做：≥700px 时两句各自一行，justify 出来才是整齐的方块。 窄屏（手机）上标题会折行，逐行 justify 会把每个字拉开成"散排"，所以关掉。 */ @media (min-width: 700px) { html[data-lang="zh"] .hx-hero__title { width: fit-content; max-width: 100%; margin-inline: auto; text-align: justify; text-align-last: justify; } } h1 { font-size: clamp(2rem, 4.2vw, 3.25rem); } h2 { font-size: clamp(1.5rem, 2.6vw, 2.15rem); } h3 { font-size: 1.125rem; } h4 { font-size: 1rem; } p { margin: 0 0 1em; } ul, ol { margin: 0 0 1em; padding-left: 1.15em; } li { margin-bottom: .35em; } hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; } ::selection { background: var(--brand); color: #fff; } /* 非英文语言在替换文案前先隐藏，避免闪一下英文。 引导脚本里带 2 秒兜底，即使 JS 出错也不会白屏。 */ html.i18n-wait body { visibility: hidden; } :focus-visible { outline: 2px solid var(--brand-700); outline-offset: 3px; border-radius: 4px; } /* 深色区块上换成亮薄荷，保证焦点框在深底上也有 3:1 */ :is(.hero, .section--ink, .cta-band) :focus-visible, :is(.hero, .section--ink, .cta-band):focus-visible { outline-color: #8ef0c4; } /* ------------------------------------------------------------- 3. Layout helpers ------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } /* ------------------------------------------------------------- 大屏适配 ------------------------------------------------------------- 容器原来锁死 1240px：在 2560 / 3840 的屏幕上一行只占中间 32%–48%， 两侧全空，看起来"整页缩小了"。这里让容器跟着屏幕分档变宽， 并在超宽屏把根字号抬一点，避免 4K 上正文还是 16px 显得更小。 （注意：如果看到的页面整体被缩小、两侧留白极大，先 Ctrl+0 复位浏览器缩放。） ------------------------------------------------------------- */ /* 平滑加宽，不设台阶：1400px 起每宽 1px 容器宽 0.5px，上限 1880px。 这样 1599 和 1601 之间不会突然跳一截。 */ @media (min-width: 1400px) { :root { --container: min(calc(1240px + (100vw - 1400px) * 0.5), 1880px); } } /* 超宽屏把根字号抬一点（其余尺寸都是 rem，会跟着一起放大） */ @media (min-width: 2400px) { html { font-size: 17px; } } @media (min-width: 3200px) { html { font-size: 18px; } } .container--narrow { max-width: 900px; } .section { padding: 84px 0; } .section--tight { padding: 56px 0; } .section--soft { background: var(--bg-soft); } .section--mute { background: var(--bg-mute); } .section--ink { background: var(--ink-band); color: rgba(255, 255, 255, .78); } .section--ink h1, .section--ink h2, .section--ink h3 { color: #fff; } .section-head { max-width: 720px; margin: 0 auto 48px; text-align: center; } .section-head--left { margin-inline: 0; text-align: left; } .section-head p { color: var(--ink-3); margin: 0; } .eyebrow { display: inline-flex; align-items: center; gap: .5em; margin-bottom: .75rem; color: var(--accent-700); font-size: .8125rem; font-weight: 800; letter-spacing: .04em; } .eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; } .eyebrow--brand { color: var(--brand-700); } .eyebrow--info { color: var(--info-700); } .eyebrow--center::before { display: none; } .text-center { text-align: center; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .lead { font-size: 1.0625rem; color: var(--ink-2); } /* ------------------------------------------------------------- 4. Buttons ------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 48px; padding: 0 30px; border: 1px solid transparent; border-radius: var(--pill); font: inherit; font-size: .9375rem; font-weight: 700; letter-spacing: .02em; line-height: 1; text-align: center; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease; } .btn:active { transform: translateY(1px); } .btn svg { width: 17px; height: 17px; flex: none; } .btn--brand { background: var(--brand-cta); color: #fff; /* 中性投影，不用彩色光晕：彩色 glow 是最典型的"生成感"按钮 */ box-shadow: 0 1px 2px rgba(0, 0, 0, .12); } .btn--brand:hover { background: var(--brand-cta-600); color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .16); } .btn--accent { background: var(--accent-700); color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); } .btn--accent:hover { background: var(--accent-800); color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .16); } .btn--ink { background: var(--ink); color: #fff; } .btn--ink:hover { background: #1d3149; color: #fff; } .btn--outline { background: #fff; border-color: var(--line); color: var(--ink); } .btn--outline:hover { border-color: var(--brand); color: var(--brand-700); background: var(--brand-soft); } .btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .38); color: #fff; } /* 深色区块里的按钮不投影：深色阴影压在深色底上既看不见又显得脏 */ :is(.hero, .section--ink, .cta-band) .btn { box-shadow: none; } .btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; } .btn--light { background: #fff; color: var(--ink); } .btn--light:hover { background: #fff; color: var(--brand-700); } .btn--sm { min-height: 40px; padding: 0 20px; font-size: .875rem; } .btn--lg { min-height: 54px; padding: 0 38px; font-size: 1rem; } .btn--block { width: 100%; } .link-arrow { display: inline-flex; align-items: center; gap: .4em; color: var(--brand-700); font-weight: 700; font-size: .9375rem; } .link-arrow::after { content: "→"; transition: transform .18s ease; } .link-arrow:hover::after { transform: translateX(4px); } /* ------------------------------------------------------------- 5. 语言切换（放在页头左侧，原来是 logo 的位置） ------------------------------------------------------------- */ .lang { position: relative; flex: none; } .lang__button { display: inline-flex; align-items: center; gap: .45em; min-height: 40px; padding: 0 18px; border: 1px solid var(--line); border-radius: var(--pill); background: #fff; color: var(--ink); font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; transition: background-color, border-color, color, box-shadow, transform, opacity .18s ease; } .lang__button:hover { border-color: var(--brand); color: var(--brand-700); background: var(--brand-soft); } .lang__button svg { width: 12px; height: 12px; flex: none; opacity: .55; } .lang__menu { position: absolute; top: calc(100% + 8px); left: 0; /* 按钮在页头左侧，菜单往右展开 */ right: auto; min-width: 160px; /* 语言多（目前 11 种）时最多一屏放下，超出则内部滚动 */ max-height: min(calc(100vh - 110px), 520px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); /* 原来 1px 描边 + 52px 大范围虚影同时上，二者选一即可：留描边，投影收小 */ box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: background-color, border-color, color, box-shadow, transform, opacity .18s ease; z-index: 60; } .lang__menu::-webkit-scrollbar { width: 6px; } .lang__menu::-webkit-scrollbar-thumb { background: #d3dce6; border-radius: 3px; } .lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: none; } .lang__menu a { display: block; padding: 9px 12px; border-radius: var(--radius-xs); color: var(--ink-2); font-size: .875rem; font-weight: 600; white-space: nowrap; } .lang__menu a:hover { background: var(--bg-soft); color: var(--ink); } /* ------------------------------------------------------------- 6. Header ------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; /* 背景 + 毛玻璃交给 ::before —— 见下方注释，不能直接写在本元素上 */ background: transparent; border-bottom: 1px solid var(--line-soft); transition: box-shadow .2s ease; } .site-header.is-stuck { box-shadow: var(--shadow-sm); } /* ------------------------------------------------------------- 半透明毛玻璃页头（Apple 那种） ------------------------------------------------------------- ⚠️ 必须做在 ::before 上，不能直接写在 .site-header 上： `backdrop-filter`（和 filter / transform 一样）会给**后代**建立包含块， 而手机端抽屉菜单 .nav 是 position: fixed、靠 inset:0 撑满整屏的 —— 一旦页头成了它的包含块，抽屉会被压成"页头那么高"（实测只有 128px）， 菜单直接废掉。放到伪元素上就只影响这一层背景，不会牵连导航。 ------------------------------------------------------------- */ .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; /* 压在页头内容之下、页面内容之上 */ background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); } /* --- 页头搜索面板（点放大镜展开，跟着 sticky 页头一起停住） --- */ .site-search { position: relative; border-top: 1px solid var(--line-soft); background: #fff; box-shadow: 0 18px 40px rgba(0, 0, 0, .1); } .site-search[hidden] { display: none; } .site-search__inner { padding-block: 18px 22px; } .site-search__box { display: flex; align-items: center; gap: 12px; padding: 0 16px; border: 2px solid var(--brand-cta); border-radius: var(--pill); background: #fff; } .site-search__box:focus-within { box-shadow: 0 0 0 4px rgba(0, 135, 90, .25); } .site-search__icon { width: 19px; height: 19px; color: var(--ink-3); flex: none; } .site-search__input { flex: 1; min-width: 0; padding: 15px 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 1rem; } .site-search__input:focus { outline: none; } .site-search__input::placeholder { color: var(--ink-3); } /* 关掉浏览器自带的清除按钮，右边我们自己放了一个 ×（不然会出现两个叉） */ .site-search__input::-webkit-search-cancel-button, .site-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } .site-search__close { display: grid; place-items: center; width: 40px; height: 40px; margin-right: -8px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; } .site-search__close:hover { background: var(--bg-mute); } .site-search__close svg { width: 19px; height: 19px; } .site-search__list { display: grid; gap: 8px; max-height: 46vh; margin: 16px 0 0; padding: 2px; list-style: none; overflow-y: auto; overscroll-behavior: contain; } .site-search__list li { margin: 0; } .site-search__hit { display: grid; gap: 3px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: inherit; transition: background-color, border-color, color, box-shadow .16s ease; } .site-search__hit:hover { border-color: var(--brand); background: var(--brand-soft); color: inherit; } .site-search__hit-title { color: var(--ink); font-size: .9375rem; font-weight: 800; } .site-search__hit-meta { color: var(--ink-3); font-size: .8125rem; line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .site-search__tag { justify-self: start; padding: 2px 9px; border-radius: var(--pill); background: var(--brand-cta); color: #fff; font-size: .625rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .site-search__empty { padding: 14px 16px; color: var(--ink-3); font-size: .875rem; } @media (max-width: 620px) { .site-search__inner { padding-block: 14px 18px; } .site-search__input { padding: 12px 0; font-size: .9375rem; } } .site-header__inner { display: flex; align-items: center; gap: 28px; min-height: var(--header-h); } .brand { display: inline-flex; align-items: center; gap: 11px; flex: none; color: var(--ink); font-weight: 800; letter-spacing: -.02em; } .brand:hover { color: var(--ink); } .brand__mark { width: 42px; height: 42px; flex: none; } .brand__text { display: flex; flex-direction: column; line-height: 1.05; } .brand__name { font-size: 1.375rem; font-weight: 900; letter-spacing: .01em; } .brand__tag { font-size: .5625rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); } /* nav */ .nav { margin-left: auto; } .nav__list { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; } .nav__list li { margin: 0; position: relative; } .nav__link { display: inline-flex; align-items: center; gap: .35em; padding: 10px 14px; border-radius: var(--radius-xs); color: var(--ink); font-size: .875rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .nav__link:hover { color: var(--brand-700); background: var(--brand-soft); } .nav__link[aria-current="page"] { color: var(--brand-700); } .nav__link[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--brand); } .nav__caret { width: 11px; height: 11px; opacity: .55; } .nav__panel { position: absolute; top: calc(100% + 10px); left: 0; min-width: 262px; margin: 0; padding: 10px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: background-color, border-color, color, box-shadow, transform, opacity .2s ease; z-index: 55; } .nav__list li:hover > .nav__panel, .nav__list li:focus-within > .nav__panel { opacity: 1; visibility: visible; transform: none; } .nav__panel a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-xs); color: var(--ink-2); font-size: .875rem; font-weight: 600; } .nav__panel a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); opacity: .35; flex: none; } .nav__panel a:hover { background: var(--bg-soft); color: var(--ink); } .nav__panel a:hover::before { opacity: 1; } /* 产品下拉：两个大类分组 + 各自的小类 */ .nav__panel--products { min-width: 322px; } .nav__panel .nav__group { margin-top: 8px; padding: 10px 12px 6px; border-top: 1px solid var(--line-soft); } .nav__panel .nav__group:first-child { margin-top: 0; padding-top: 4px; border-top: 0; } .nav__panel .nav__group > a { padding: 0; color: var(--ink); font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .nav__panel .nav__group > a::before { display: none; } .nav__panel .nav__group > a:hover { background: transparent; color: var(--brand-700); } .nav__panel .nav__group + li a { padding-left: 24px; } .header__tools { display: flex; align-items: center; gap: 8px; flex: none; } .icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; transition: background-color, border-color, color, box-shadow, transform, opacity .18s ease; } .icon-btn:hover { border-color: var(--brand); color: var(--brand-700); background: var(--brand-soft); } .icon-btn svg { width: 18px; height: 18px; } .nav-toggle { display: none; width: 44px; height: 44px; flex: none; /* 防止被 flex 压缩导致三条杠宽度变成 0 */ border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; cursor: pointer; padding: 11px; } .nav-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: background-color, border-color, color, box-shadow, transform, opacity .22s ease; } .nav-toggle span + span { margin-top: 4px; } /* ------------------------------------------------------------- 7. Hero slider ------------------------------------------------------------- */ .hero { position: relative; /* 固定首屏高度：三张 slide 内容长短不一，定高之后轮播时下面的内容不会跳 */ min-height: 580px; overflow: hidden; background: var(--ink-band); } .hero__slides { position: relative; display: grid; min-height: 580px; } .hero { touch-action: pan-y; } /* 三张 slide 叠在同一个网格格里：横幅高度由最高的那张决定，内容自然垂直居中。 （原来是 position:absolute，定高之后内容会全部贴在顶端，下面留一大块空） */ .hero__slide { position: relative; grid-area: 1 / 1; display: flex; align-items: center; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s ease; } .hero__slide.is-active { opacity: 1; visibility: visible; } .hero__bg { position: absolute; inset: 0; overflow: hidden; } .hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10, 20, 34, .92) 0%, rgba(10, 20, 34, .78) 42%, rgba(10, 20, 34, .42) 72%, rgba(10, 20, 34, .30) 100%); } /* 注意：这里只能用 padding-block，写成 padding:90px 0 会把 .container 的左右内边距覆盖掉 */ /* 首屏尺寸不变（大横幅），只把文案改短 —— 精简文字，不是删元素 */ .hero__body { position: relative; z-index: 2; padding-block: 90px; } /* 放宽到 820px：中文标题刚好一行放得下，不会出现最后一个字单独掉到第二行 */ .hero__inner { max-width: 820px; } /* 桌面端：文字块居中摆，避免大片空白全压在右边 */ @media (min-width: 821px) { .hero__inner { margin-inline: auto; text-align: center; } /* 两条卖点整组居中，组内左对齐 —— 不然两行的勾会对不齐 */ .hero__points { width: fit-content; margin-inline: auto; justify-items: start; } .hero__points li { justify-content: flex-start; } .hero__actions { justify-content: center; } } .hero__title { margin-bottom: .5em; color: #fff; font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 900; line-height: 1.16; } .hero__title em { font-style: normal; color: #6ee7b7; } .hero__title strong { color: var(--accent); font-weight: 900; } .hero__text { margin-bottom: 1.35rem; color: rgba(255, 255, 255, .84); font-size: 1.0625rem; max-width: 620px; } .hero__points { margin: 0 0 1.8rem; padding: 0; list-style: none; display: grid; gap: 6px; } .hero__points li { display: flex; align-items: flex-start; gap: .6em; margin: 0; color: rgba(255, 255, 255, .88); font-size: .9375rem; } .hero__points svg { width: 17px; height: 17px; margin-top: 5px; color: var(--brand); flex: none; } .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; } .hero__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer; backdrop-filter: blur(6px); transition: background-color, border-color, color, box-shadow, transform, opacity .2s ease; } .hero__nav:hover { background: var(--brand); } .hero__nav--prev { left: 22px; } .hero__nav--next { right: 22px; } .hero__nav svg { width: 20px; height: 20px; } /* ------------------------------------------------------------- 8. Quick value strip ------------------------------------------------------------- */ .value-strip { position: relative; z-index: 5; margin-top: -46px; } .value-strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; overflow: hidden; background: var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .value-card { display: flex; gap: 14px; padding: 26px 24px; background: #fff; } .value-card__icon { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px; background: var(--brand-soft); color: var(--brand-700); } .value-card:nth-child(2) .value-card__icon { background: var(--accent-soft); color: var(--accent-700); } .value-card:nth-child(3) .value-card__icon { background: var(--info-soft); color: var(--info-700); } .value-card:nth-child(4) .value-card__icon { background: #fdeaf4; color: var(--pink-700); } .value-card__icon svg { width: 22px; height: 22px; } .value-card h3 { margin-bottom: .2em; font-size: 1rem; } .value-card p { margin: 0; font-size: .875rem; color: var(--ink-3); line-height: 1.6; } /* ------------------------------------------------------------- 9. Split (image / text) blocks ------------------------------------------------------------- */ .split { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 64px; } .split--reverse .split__media { order: 2; } .split__body h2 { margin-bottom: .6em; } .feature-list { margin: 1.5rem 0 2rem; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 26px; } .feature-list li { display: flex; align-items: flex-start; gap: .65em; margin: 0; font-size: .9375rem; color: var(--ink-2); } .feature-list svg { width: 19px; height: 19px; margin-top: 4px; color: var(--brand); flex: none; } .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--line); } .stat__num { display: block; color: var(--ink); font-size: 2rem; font-variant-numeric: tabular-nums; /* 数字等宽，几组数字对得齐 */ font-weight: 900; line-height: 1; letter-spacing: -.02em; white-space: nowrap; /* 防止 "4,000㎡" 这类被拆行 */ } .stat__num b { color: var(--brand-700); } .stat__label { font-size: .8125rem; color: var(--ink-3); letter-spacing: .04em; } /* ------------------------------------------------------------- 10. Image placeholder system ← 产品图 / 场景图占位 ------------------------------------------------------------- */ .media { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--bg-mute); } .media img { width: 100%; height: 100%; object-fit: cover; } /* 视频位：和图片同规格铺满 16:9 容器 */ .media video { display: block; width: 100%; height: 100%; object-fit: cover; background: #0c1520; } .solution__caption { margin: 12px 0 0; color: rgba(255, 255, 255, .62); font-size: .8125rem; } .ph { position: relative; display: grid; place-items: center; width: 100%; /* 原来那层斜条纹是典型"生成感"底纹，换成干净的浅灰渐变 */ background: linear-gradient(160deg, #f8fafc 0%, #eef2f7 100%); color: var(--ink-3); text-align: center; } .ph::after { content: ""; position: absolute; inset: 12px; border: 1.5px dashed #c9d5e2; border-radius: calc(var(--radius) - 2px); pointer-events: none; } .ph__inner { position: relative; z-index: 2; display: grid; justify-items: center; gap: 8px; padding: 20px; max-width: 240px; } .ph__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #fff; border: 1px solid var(--line); color: var(--ink-3); box-shadow: var(--shadow-xs); } .ph__icon svg { width: 22px; height: 22px; } .ph__title { color: var(--ink-2); font-size: .8125rem; font-weight: 800; letter-spacing: .02em; } .ph__meta { color: var(--ink-3); font-size: .6875rem; line-height: 1.5; letter-spacing: .02em; } .ph__badge { position: absolute; top: 14px; left: 14px; z-index: 3; padding: 4px 10px; border-radius: var(--pill); background: var(--brand-cta); color: #fff; font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } /* placeholder ratio helpers */ .ph--1x1 { aspect-ratio: 1 / 1; } .ph--4x3 { aspect-ratio: 4 / 3; } .ph--3x2 { aspect-ratio: 3 / 2; } .ph--16x9 { aspect-ratio: 16 / 9; } .ph--3x4 { aspect-ratio: 3 / 4; } .ph--tall { aspect-ratio: 4 / 5; } /* ------------------------------------------------------------- 11. Catalog —— 大类横幅大图 + 下方横向滑动的产品条 ------------------------------------------------------------- */ .ph--21x9 { aspect-ratio: 21 / 9; } .cat-band { padding-bottom: 20px; } .cat-band + .cat-band { margin-top: 78px; padding-top: 78px; border-top: 1px solid var(--line); } /* --- 大类横幅：大图 + 文字压在图底部 --- */ .cat-band__banner { position: relative; min-height: 280px; overflow: hidden; border-radius: var(--radius-lg); background: var(--bg-mute); } .cat-band__banner img { width: 100%; height: 100%; object-fit: cover; } .cat-band__caption { position: absolute; inset: auto 0 0 0; z-index: 3; padding: 40px 40px 32px; /* .ph 占位块自带 text-align:center，这里必须显式改回左对齐 */ text-align: left; background: linear-gradient(to top, rgba(7, 16, 27, .93) 0%, rgba(7, 16, 27, .74) 42%, rgba(7, 16, 27, 0) 100%); color: #fff; } .cat-band__caption h2 { margin: 0 0 .4em; color: #fff; max-width: 820px; } .cat-band__caption p { margin: 0; max-width: 760px; color: rgba(255, 255, 255, .84); font-size: .9375rem; } .cat-band__num { display: inline-grid; place-items: center; min-width: 42px; height: 42px; margin-bottom: 16px; padding: 0 12px; border-radius: 13px; background: var(--brand); color: #fff; font-size: 1.0625rem; font-weight: 900; } .cat-band:nth-of-type(even) .cat-band__num { background: var(--accent); } /* 没放图时：横幅用深色底 + 浅色占位提示，保证文字可读 */ .cat-band__banner.ph { background: linear-gradient(145deg, #14283c 0%, #0d1b2a 58%, #102336 100%); } .cat-band__banner.ph { place-items: start center; } .cat-band__banner.ph .ph__inner { padding-top: 46px; } .cat-band__banner.ph::after { inset: 16px; border-color: rgba(255, 255, 255, .18); } .cat-band__banner.ph .ph__icon { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #fff; } .cat-band__banner.ph .ph__title { color: rgba(255, 255, 255, .8); } .cat-band__banner.ph .ph__meta { color: rgba(255, 255, 255, .48); } /* --- 横向滑动条 --- */ .rail-wrap { position: relative; margin-top: 26px; } .rail { display: flex; gap: 20px; margin: 0; padding: 4px 0 10px; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; /* 必须是 auto：滑动过渡已改为 JS 逐帧缓动， 这里再开 smooth 会互相打断，看起来就是"没有动画" */ scroll-behavior: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .rail::-webkit-scrollbar { display: none; } /* 鼠标拖动时关掉平滑滚动，否则跟手感很差 */ .rail.is-dragging { scroll-behavior: auto; scroll-snap-type: none; } /* 注意：这里不要给 .tile 加 pointer-events:none。 拖动是从 pointerdown 开始的，一旦在按下瞬间改掉命中测试， 同一次点击的 mouseup 就会落到
  • 上，click 目标变成
  • ， 链接就永远点不动了。拖动后的误点击改由 JS 里的 moved 标志拦。 */ /* 自己缓动期间先关掉吸附，避免浏览器在动画中途抢着对齐 */ .rail.is-sliding { scroll-snap-type: none; } .rail__item { flex: 0 0 calc((100% - 40px) / 3); margin: 0; scroll-snap-align: start; } .rail__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; } .rail__hint { color: var(--ink-3); font-size: .75rem; letter-spacing: .02em; } /* --- 产品卡 --- */ .tile { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); color: inherit; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .tile:hover { transform: translateY(-4px); border-color: var(--brand); box-shadow: var(--shadow); } .tile__media { flex: none; aspect-ratio: 1 / 1; border-radius: 0; } .tile__body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; } .tile__name { color: var(--ink); font-size: 1rem; font-weight: 800; line-height: 1.45; overflow-wrap: anywhere; } .tile:hover .tile__name { color: var(--brand-700); } .tile__spec { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 8px; color: var(--ink-3); font-size: .8125rem; line-height: 1.6; overflow-wrap: anywhere; } .tile__more { margin-top: auto; padding-top: 16px; color: var(--brand-700); font-size: .8125rem; font-weight: 700; } .tile__more::after { content: " →"; } /* --- 详情页图集：主画面 + 一排格子（第 1 格 3D，后面是不同位置的细节放大图）--- */ .pdp__gallery { display: grid; gap: 14px; align-content: start; } .pdp__media { position: relative; } .pdp__stage { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); } /* 下层：3D 组件。永远挂在 DOM 里，只有上面那层图片在动 */ .pdp__stage model-viewer { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; --poster-color: transparent; --progress-bar-color: var(--brand); } /* 上层：当前选中的图（细节放大图 / 占位块） */ .pdp__stage-shot { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: #fff; } .pdp__stage-shot[hidden] { display: none; } .pdp__stage-shot > img { width: 100%; height: 100%; object-fit: contain; } .pdp__stage.is-empty { background: linear-gradient(160deg, #f8fafc 0%, #eef2f7 100%); } .pdp__stage.is-empty::after { content: ""; position: absolute; inset: 12px; z-index: 3; border: 1.5px dashed #c9d5e2; border-radius: calc(var(--radius) - 2px); pointer-events: none; } .pdp__spinner { position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border-radius: var(--pill); background: rgba(255, 255, 255, .94); box-shadow: var(--shadow-sm); color: var(--ink-2); font-size: .8125rem; font-weight: 700; } .pdp__spinner::before { content: ""; width: 17px; height: 17px; border: 2px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: pdp-spin .8s linear infinite; } @keyframes pdp-spin { to { transform: rotate(360deg); } } .pdp__hint { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px; border-radius: var(--pill); background: rgba(14, 27, 44, .84); color: #fff; font-size: .75rem; font-weight: 700; white-space: nowrap; pointer-events: none; backdrop-filter: blur(6px); } .pdp__hint svg { width: 15px; height: 15px; } .pdp__hint[hidden] { display: none; } .pdp__shots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } .shot { display: grid; gap: 7px; padding: 7px 7px 8px; border: 2px solid var(--line); border-radius: var(--radius); background: #fff; font: inherit; color: inherit; text-align: center; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .shot:hover { border-color: #b9e3d2; transform: translateY(-2px); } .shot.is-active { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .shot__media { display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden; border-radius: calc(var(--radius) - 6px); background: #fff; color: var(--brand); } .shot__media img { width: 100%; height: 100%; object-fit: contain; } .shot__media--3d { background: linear-gradient(160deg, var(--brand-soft), #f4fbf8); } .shot__media--3d svg { width: 40%; height: 40%; max-width: 34px; max-height: 34px; } .shot__label { color: var(--ink-3); font-size: .6875rem; font-weight: 800; line-height: 1.3; } .shot.is-active .shot__label { color: var(--brand-700); } .shot__empty { width: 58%; height: 58%; border-radius: 8px; background: var(--bg-mute); } /* --- 产品页大类导航 / 详情页规格块 --- */ .catalog-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 46px; padding: 16px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-xs); } .catalog-nav a { display: inline-flex; align-items: center; gap: .5em; padding: 10px 18px; border: 1px solid var(--line); border-radius: var(--pill); color: var(--ink-2); font-size: .875rem; font-weight: 700; transition: background-color, border-color, color, box-shadow, transform, opacity .18s ease; } .catalog-nav a:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-700); } .catalog-nav b { color: var(--brand); font-weight: 900; } .item-specs { display: grid; gap: 18px; margin: 0 0 26px; } .item-spec { min-width: 0; padding: 22px 24px; background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: var(--radius); } .item-spec dt { margin-bottom: .5em; color: var(--brand-700); font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .item-spec dd { margin: 0; color: var(--ink-2); line-height: 1.7; overflow-wrap: anywhere; } /* ------------------------------------------------------------- 11b. 工厂 / 团队展示图 —— Coverflow 封面流 中间最大正面朝前，两侧绕 Y 轴旋转后退，像翻专辑 ------------------------------------------------------------- */ .cf-wrap { padding: 10px 0; } .cf { position: relative; perspective: 1500px; overflow: hidden; /* 两侧卡片在边缘被裁掉，和参考图一致 */ padding: 44px 0; /* 上下留白，避免底部阴影被裁 */ --cf-card-w: 57%; touch-action: pan-y; /* 横向滑动归我们，纵向留给页面 */ cursor: grab; } .cf.is-dragging { cursor: grabbing; } .cf__stage { position: relative; height: 0; padding-bottom: 47%; /* 卡片 4:3、宽 57% → 高 42.75%，再留一点余量放阴影 */ transform-style: preserve-3d; } .cf__card { position: absolute; margin: 0; /*
    自带 1em 40px 的默认外边距，必须清掉 */ left: 50%; top: 50%; /* 全部竖直居中，平放不旋转 */ width: var(--cf-card-w); aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--bg-mute); transform-origin: center center; backface-visibility: hidden; transition: transform .62s cubic-bezier(.22, .61, .36, 1), opacity .45s ease, box-shadow .45s ease; will-change: transform; /* 底阴影分三层：贴边一层给接触感，中间一层给体积，最外一层给落地感 */ box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 12px -6px rgba(0, 0, 0, .16), 0 16px 28px -16px rgba(0, 0, 0, .22); } .cf__card img { width: 100%; height: 100%; object-fit: cover; display: block; } /* 中间那张投影更重、更贴地；两侧轻一些，层次就出来了 */ .cf__card[data-offset="0"] { box-shadow: 0 1px 2px rgba(0, 0, 0, .07), 0 8px 14px -6px rgba(0, 0, 0, .20), 0 24px 38px -20px rgba(0, 0, 0, .30), 0 46px 66px -42px rgba(0, 0, 0, .30); } .cf__card[data-offset="1"], .cf__card[data-offset="-1"] { box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 5px 10px -6px rgba(0, 0, 0, .13), 0 14px 24px -14px rgba(0, 0, 0, .18); } .cf__card.ph::after { inset: 10px; } .cf__card.ph .ph__inner { padding: 16px; gap: 5px; } .cf__card.ph .ph__icon { width: 38px; height: 38px; border-radius: 12px; } .cf__card.ph .ph__icon svg { width: 19px; height: 19px; } .cf__card.ph .ph__title { font-size: .75rem; } .cf-wrap + * { margin-top: 0; } /* ------------------------------------------------------------- 11c. Category grid（旧版带图卡片，仍保留给需要时使用） ------------------------------------------------------------- */ .cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .cat-card { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); transition: background-color, border-color, color, box-shadow, transform, opacity .22s ease; } .cat-card:hover { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-4px); } .cat-card__media { border-radius: 0; } .cat-card__body { padding: 18px 20px 22px; } .cat-card__body h3 { margin-bottom: .3em; font-size: 1rem; } .cat-card__body p { margin: 0; font-size: .8125rem; color: var(--ink-3); line-height: 1.6; } .cat-card__count { display: inline-block; margin-top: 12px; color: var(--brand-700); font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } /* ------------------------------------------------------------- 12. Product grid + product slot ------------------------------------------------------------- */ .prod-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } .prod-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .prod-card { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); transition: background-color, border-color, color, box-shadow, transform, opacity .22s ease; } .prod-card:hover { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-4px); } .prod-card__media { position: relative; border-radius: 0; } .prod-card__tag { position: absolute; top: 14px; right: 14px; z-index: 3; padding: 4px 11px; border-radius: var(--pill); background: var(--accent); color: #fff; font-size: .625rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .prod-card__body { display: flex; flex-direction: column; flex: 1; padding: 20px 20px 22px; text-align: center; } .prod-card__cat { margin-bottom: .5em; color: var(--ink-3); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .prod-card__title { margin: 0 0 .75em; font-size: .9375rem; font-weight: 800; line-height: 1.45; color: var(--ink); } .prod-card:hover .prod-card__title { color: var(--brand-700); } .prod-card__meta { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--ink-3); font-size: .75rem; } .grid-actions { margin-top: 44px; text-align: center; } /* ------------------------------------------------------------- 13. Dark solution band ------------------------------------------------------------- */ .solution { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .solution__media .media { box-shadow: 0 12px 30px rgba(0, 0, 0, .35); } .solution__media .ph__icon { box-shadow: none; } .solution__media .ph { background: linear-gradient(160deg, #1a2b41 0%, #101d2e 100%); color: rgba(255, 255, 255, .55); } .solution__media .ph::after { border-color: rgba(255, 255, 255, .18); } .solution__media .ph__icon { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #fff; } .solution__media .ph__title { color: rgba(255, 255, 255, .78); } .solution__list { margin: 1.6rem 0 2rem; padding: 0; list-style: none; display: grid; gap: 12px; } .solution__list li { display: flex; align-items: flex-start; gap: .65em; margin: 0; font-size: .9375rem; color: rgba(255, 255, 255, .8); } .solution__list svg { width: 19px; height: 19px; margin-top: 4px; color: var(--brand); flex: none; } /* ------------------------------------------------------------- 14. Testimonials ------------------------------------------------------------- */ .review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .review-card { display: flex; flex-direction: column; padding: 30px 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); } .stars { display: flex; gap: 3px; margin-bottom: 16px; color: var(--amber); } .stars svg { width: 17px; height: 17px; } .review-card p { flex: 1; margin-bottom: 22px; color: var(--ink-2); font-size: .9375rem; } .review-card__author { display: flex; align-items: center; gap: 13px; padding-top: 20px; border-top: 1px solid var(--line-soft); } .review-card__avatar { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--brand-soft); color: var(--brand-700); font-weight: 800; font-size: .875rem; } .review-card__author strong { display: block; color: var(--ink); font-size: .9375rem; } .review-card__author span { font-size: .8125rem; color: var(--ink-3); } /* ------------------------------------------------------------- 15. News ------------------------------------------------------------- */ .news-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .news-grid--3 { grid-template-columns: repeat(3, 1fr); } .news-card { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); transition: background-color, border-color, color, box-shadow, transform, opacity .22s ease; } .news-card:hover { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-4px); } .news-card__media { border-radius: 0; } .news-card__body { display: flex; flex-direction: column; flex: 1; padding: 20px; } .news-card__date { display: inline-flex; align-items: center; gap: .45em; margin-bottom: .7em; color: var(--ink-3); font-size: .75rem; font-weight: 700; } .news-card__date svg { width: 14px; height: 14px; color: var(--brand); } .news-card h3 { margin: 0 0 .7em; font-size: 1rem; line-height: 1.45; } .news-card:hover h3 { color: var(--brand-700); } .news-card p { margin: 0 0 1rem; font-size: .8125rem; color: var(--ink-3); line-height: 1.65; } .news-card .link-arrow { margin-top: auto; font-size: .8125rem; } /* ------------------------------------------------------------- 16. CTA band ------------------------------------------------------------- */ .cta-band { position: relative; overflow: hidden; padding: 66px 0; /* 三个色标都保证白字 ≥4.5:1（原来是亮绿，白字只有 3.04:1） */ background: linear-gradient(120deg, #00553a 0%, var(--brand-cta) 54%, var(--brand-cta-600) 100%); color: #fff; } .cta-band::before, .cta-band::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .1); } .cta-band::before { width: 320px; height: 320px; top: -150px; right: 8%; } .cta-band::after { width: 200px; height: 200px; bottom: -120px; right: 32%; background: rgba(255, 90, 31, .3); } .cta-band__inner { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; } .cta-band h2 { margin-bottom: .25em; color: #fff; } .cta-band p { margin: 0; color: rgba(255, 255, 255, .88); max-width: 560px; } .cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; } /* ------------------------------------------------------------- 17. Inner page hero + breadcrumb ------------------------------------------------------------- */ .page-hero { position: relative; padding: 76px 0 66px; background: radial-gradient(1000px 340px at 88% -20%, rgba(0, 169, 110, .1), transparent 62%), radial-gradient(760px 320px at 6% 120%, rgba(255, 90, 31, .09), transparent 60%), var(--bg-soft); border-bottom: 1px solid var(--line); } .page-hero h1 { margin-bottom: .4em; } .page-hero p { max-width: 680px; margin: 0; color: var(--ink-3); font-size: 1.0625rem; } .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; margin: 0 0 1.1rem; padding: 0; list-style: none; font-size: .8125rem; color: var(--ink-3); } .breadcrumb li { margin: 0; display: inline-flex; align-items: center; gap: .5em; } .breadcrumb li + li::before { content: "/"; color: #c3cedb; } .breadcrumb a { color: var(--ink-3); } .breadcrumb a:hover { color: var(--brand-700); } .breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 700; } /* ------------------------------------------------------------- 18. Filter bar (products page) ------------------------------------------------------------- */ .filter-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 36px; padding: 16px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-xs); } .chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; list-style: none; } .chip { display: inline-flex; align-items: center; padding: 9px 18px; border: 1px solid var(--line); border-radius: var(--pill); background: #fff; color: var(--ink-2); font-size: .8125rem; font-weight: 700; cursor: pointer; transition: background-color, border-color, color, box-shadow, transform, opacity .18s ease; } .chip:hover { border-color: var(--brand); color: var(--brand-700); background: var(--brand-soft); } .chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; } .result-count { color: var(--ink-3); font-size: .8125rem; } .result-count b { color: var(--ink); } select.field, input.field, textarea.field { width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--ink); font: inherit; font-size: .9375rem; transition: background-color, border-color, color, box-shadow, transform, opacity .18s ease; } select.field { cursor: pointer; } textarea.field { min-height: 140px; resize: vertical; } .field:focus { outline: none; border-color: var(--brand); /* 原来 2px 边框 + 22% 透明环太弱，键盘用户几乎看不出来 */ box-shadow: 0 0 0 4px rgba(0, 135, 90, .35); } /* 原来的 #a8b4c2 对白底只有 2.11:1，占位符也得能看清 */ .field::placeholder { color: var(--ink-3); opacity: 1; } label.label { display: block; margin-bottom: .4rem; color: var(--ink); font-size: .875rem; font-weight: 700; } .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .field-group { margin-bottom: 18px; } /* ------------------------------------------------------------- 19. Product detail ------------------------------------------------------------- */ .pdp { display: grid; grid-template-columns: 1.08fr 1fr; gap: 56px; align-items: start; } .pdp__title { margin-bottom: .35em; font-size: clamp(1.6rem, 2.6vw, 2.1rem); } .pdp__cat { display: inline-block; margin-bottom: 1rem; padding: 5px 13px; border-radius: var(--pill); background: var(--brand-soft); color: var(--brand-700); font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .pdp__desc { color: var(--ink-2); } .pdp__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 30px; } .pdp__note { display: flex; gap: 10px; margin-top: 20px; padding: 16px 18px; border-radius: var(--radius-sm); background: var(--accent-soft); color: #8a3a15; font-size: .875rem; } .pdp__note svg { width: 19px; height: 19px; flex: none; margin-top: 3px; color: var(--accent); } .spec-table { width: 100%; border-collapse: collapse; font-size: .9375rem; } .spec-table caption { margin-bottom: 14px; color: var(--ink); font-size: 1.0625rem; font-weight: 800; text-align: left; } .spec-table th, .spec-table td { padding: 14px 18px; border: 1px solid var(--line); text-align: left; vertical-align: top; } .spec-table th { width: 34%; background: var(--bg-soft); color: var(--ink); font-weight: 700; } .spec-table td { color: var(--ink-2); } /* tabs */ .tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 26px; border-bottom: 1px solid var(--line); } .tab { padding: 13px 22px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ink-3); font: inherit; font-size: .9375rem; font-weight: 800; cursor: pointer; transition: background-color, border-color, color, box-shadow, transform, opacity .18s ease; } .tab:hover { color: var(--brand-700); } .tab.is-active { color: var(--brand-700); border-bottom-color: var(--brand); } .tab-panel { display: none; } .tab-panel.is-active { display: block; } /* ------------------------------------------------------------- 20. Accordion (FAQ) ------------------------------------------------------------- */ /* ------------------------------------------------------------- 19b. 3D 展示 —— 图集第一格的 model-viewer （主画面样式在 .pdp__stage，这里只有 AR 按钮） ------------------------------------------------------------- */ .model-ar-btn { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); min-height: 48px; padding: 0 28px; border: 0; border-radius: var(--pill); background: var(--brand); color: #fff; font: inherit; font-size: .9375rem; font-weight: 700; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); } .model-ar-btn:hover { background: var(--brand-600); } .accordion { border-top: 1px solid var(--line); } .acc-item { border-bottom: 1px solid var(--line); } .acc-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: 22px 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 1.0625rem; font-weight: 800; text-align: left; cursor: pointer; } .acc-head:hover { color: var(--brand-700); } .acc-head__icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--bg-soft); color: var(--ink-2); transition: background-color, border-color, color, box-shadow, transform, opacity .22s ease; } .acc-head__icon svg { width: 16px; height: 16px; transition: transform .22s ease; } .acc-item.is-open .acc-head__icon { background: var(--brand); color: #fff; } .acc-item.is-open .acc-head__icon svg { transform: rotate(45deg); } .acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; } .acc-item.is-open .acc-panel { grid-template-rows: 1fr; } .acc-panel > div { overflow: hidden; } .acc-panel p { padding-bottom: 24px; margin: 0; color: var(--ink-2); max-width: 820px; } /* ------------------------------------------------------------- 21. Info cards / contact ------------------------------------------------------------- */ .info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .info-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .info-card { /* 图标改成和标题并排：图标方块压在标题上方是最模板化的那种卡片 */ display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 14px; padding: 30px 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); text-align: left; transition: background-color, border-color, color, box-shadow, transform, opacity .22s ease; } .info-card:hover { border-color: var(--brand); box-shadow: var(--shadow); } .info-card__icon { display: grid; place-items: center; width: 54px; height: 54px; margin: 0; border-radius: 16px; background: var(--brand-soft); color: var(--brand-700); } .info-card:nth-child(2) .info-card__icon { background: var(--accent-soft); color: var(--accent-700); } .info-card:nth-child(3) .info-card__icon { background: var(--info-soft); color: var(--info-700); } .info-card__icon svg { width: 24px; height: 24px; } .info-card h3 { margin: 0; font-size: 1.0625rem; } .info-card p { grid-column: 1 / -1; margin: 12px 0 0; color: var(--ink-3); font-size: .9375rem; } .info-card a { color: var(--ink); font-weight: 700; } .info-card a:hover { color: var(--brand-700); } .form-card { padding: 38px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .form-note { margin: 16px 0 0; color: var(--ink-3); font-size: .8125rem; } .form-status { display: none; margin-top: 16px; padding: 13px 16px; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand-700); font-size: .875rem; font-weight: 600; } .form-status.is-visible { display: block; } .form-status.is-error { background: #fdeceb; color: #a3261a; } /* 附件上传 */ .file-field { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1.5px dashed #c9d5e2; border-radius: var(--radius-sm); background: var(--bg-soft); cursor: pointer; transition: background-color, border-color, color, box-shadow, transform, opacity .18s ease; } .file-field:hover { border-color: var(--brand); background: var(--brand-soft); } .file-field__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .file-field__icon { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; background: #fff; border: 1px solid var(--line); color: var(--brand-700); } .file-field__icon svg { width: 20px; height: 20px; } .file-field__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .file-field__text strong { color: var(--ink); font-size: .9375rem; } .field-hint { color: var(--ink-3); font-size: .75rem; line-height: 1.5; } .file-name { display: block; margin-top: 8px; color: var(--brand-700); font-size: .8125rem; font-weight: 600; word-break: break-all; } .file-name:empty { display: none; } /* 反垃圾蜜罐：真人不可见 */ .hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* ------------------------------------------------------------- 22. Article (news detail) ------------------------------------------------------------- */ .article { max-width: 820px; margin-inline: auto; } .article__meta { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: .875rem; } .article__meta span { display: inline-flex; align-items: center; gap: .5em; } .article__meta svg { width: 15px; height: 15px; color: var(--brand); } .article h2 { margin-top: 2.2em; font-size: 1.5rem; } .article h3 { margin-top: 1.8em; font-size: 1.15rem; } .article p, .article li { color: var(--ink-2); } .article blockquote { margin: 2rem 0; padding: 22px 26px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--bg-soft); color: var(--ink); font-size: 1.0625rem; font-weight: 600; } /* pagination */ .pagination { display: flex; justify-content: center; gap: 8px; margin-top: 44px; } .pagination a, .pagination span { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink-2); font-size: .875rem; font-weight: 700; } .pagination a:hover { border-color: var(--brand); color: var(--brand-700); background: var(--brand-soft); } .pagination .is-current { background: var(--brand); border-color: var(--brand); color: #fff; } /* ------------------------------------------------------------- 23. Footer ------------------------------------------------------------- */ .site-footer { background: var(--bg-soft); border-top: 1px solid var(--line); } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: 46px; padding: 68px 0 52px; } .footer-col h2, .footer-col h3 { position: relative; margin-bottom: 1.5em; padding-bottom: .6em; font-size: .9375rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } .footer-col h2::after, .footer-col h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 30px; height: 3px; border-radius: 3px; background: var(--accent); } .footer-col p { color: var(--ink-3); font-size: .875rem; } .footer-list { margin: 0; padding: 0; list-style: none; } .footer-list li { margin-bottom: .7em; } .footer-list a { color: var(--ink-2); font-size: .875rem; } .footer-list a:hover { color: var(--brand-700); } .footer-contact { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; } .footer-contact li { display: flex; align-items: flex-start; gap: 12px; margin: 0; color: var(--ink-2); font-size: .875rem; } .footer-contact svg { width: 17px; height: 17px; margin-top: 4px; color: var(--brand); flex: none; } .footer-contact a { color: var(--ink-2); font-weight: 600; } .footer-contact a:hover { color: var(--brand-700); } .footer-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; } .footer-brand .brand__name { font-size: 1.25rem; } .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 0 30px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: .8125rem; } .social { display: flex; gap: 9px; margin: 0; padding: 0; list-style: none; } .social li { margin: 0; } .social a { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink-2); transition: background-color, border-color, color, box-shadow, transform, opacity .18s ease; } .social a svg { width: 18px; height: 18px; } .social a:hover { border-color: var(--ch, var(--brand)); background: var(--ch, var(--brand)); color: #fff; transform: translateY(-2px); } /* ------------------------------------------------------------- 24. Floating actions / back to top ------------------------------------------------------------- */ .float-actions { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 45; display: block; } .float-actions__stack { display: grid; gap: 8px; } .float-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-sm); color: #fff; box-shadow: var(--shadow-sm); transition: background-color, border-color, color, box-shadow, transform, opacity .18s ease; } .float-btn:hover { transform: translateX(-3px); color: #fff; } .float-btn svg { width: 20px; height: 20px; } .float-btn--phone { background: var(--accent); } .float-btn--mail { background: var(--pink); } .float-btn--whatsapp { background: #25d366; } .float-btn--chat { background: var(--info); } /* 手机端：只显示一个"一键直联"大按钮，不再堆一排图标 */ .float-actions__primary { display: none; } .float-primary { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 20px; border-radius: var(--pill); background: var(--ch, var(--brand)); color: #fff; font-size: 1rem; font-weight: 800; letter-spacing: .01em; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); } .float-primary:hover { color: #fff; filter: brightness(1.04); } .float-primary svg { width: 23px; height: 23px; flex: none; } .float-primary small { font-size: .8125rem; font-weight: 600; opacity: .82; } /* ------------------------------------------------------------- 24b. 联系渠道卡片（联系页） 颜色由 data/contact.js 里的品牌色通过 --ch 传进来 ------------------------------------------------------------- */ .channel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 18px; } .channel-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 30px 20px 26px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); text-align: center; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .channel-card:hover { transform: translateY(-4px); border-color: var(--ch, var(--brand)); box-shadow: 0 16px 38px rgba(0, 0, 0, .13); } .channel-card__icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 17px; color: #fff; box-shadow: 0 8px 18px rgba(0, 0, 0, .16); } .channel-card__icon svg { width: 31px; height: 31px; } .channel-card__name { color: var(--ink); font-size: 1rem; font-weight: 800; } .channel-card__action { display: inline-flex; align-items: center; padding: 7px 16px; border-radius: var(--pill); background: var(--bg-soft); color: var(--ink-2); font-size: .8125rem; font-weight: 700; transition: background-color, border-color, color, box-shadow, transform, opacity .2s ease; } .channel-card:hover .channel-card__action { background: var(--ch, var(--brand)); color: #fff; } .channel-card__id { padding: 5px 12px; border-radius: var(--pill); background: var(--bg-soft); color: var(--ink-2); font-size: .75rem; font-weight: 700; letter-spacing: .02em; word-break: break-all; } .channel-card__qr img { width: 128px; height: 128px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; } .channel-card__note { margin: 0; color: var(--ink-3); font-size: .6875rem; line-height: 1.5; } .to-top { position: fixed; right: 20px; bottom: 26px; z-index: 45; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--radius-sm); background: var(--ink); color: #fff; cursor: pointer; opacity: 0; visibility: hidden; transition: background-color, border-color, color, box-shadow, transform, opacity .22s ease; } .to-top.is-visible { opacity: 1; visibility: visible; } .to-top:hover { background: var(--brand); } .to-top svg { width: 20px; height: 20px; } /* ------------------------------------------------------------- 25. Reveal animation ------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } .hero__slide { transition: none; } .factory-view__link, .factory-view__link img { transition: none; } .factory-view__link:hover img { transform: none; } } /* ------------------------------------------------------------- 26. Responsive ------------------------------------------------------------- */ @media (max-width: 1180px) { .nav__link { padding: 10px 10px; font-size: .8125rem; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 36px; } .cat-grid, .prod-grid, .news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rail__item { flex: 0 0 calc((100% - 20px) / 2); } } @media (max-width: 1024px) { .value-strip__grid { grid-template-columns: repeat(2, 1fr); } .solution { grid-template-columns: 1fr; gap: 40px; } .pdp { grid-template-columns: 1fr; gap: 40px; } .split { grid-template-columns: 1fr; gap: 40px; } .split--reverse .split__media { order: 0; } } @media (max-width: 940px) { :root { --header-h: 68px; } .nav-toggle { display: block; margin-left: auto; } /* ----------------------------------------------------------- 手机端抽屉菜单 —— 2026-09-30 重做外层 ----------------------------------------------------------- 原来 .nav 自己就是那张"滑出来的白抽屉"（width 360 + translateX(102%)）。 问题：抽屉的盒子落在视口右侧之外，会把**手机端的布局视口**撑宽 （实测 390 的机器上 window.innerWidth 变成 732），于是 `position: fixed; left:0; right:0` 的底部一键直联条被撑成 732 宽， 里面居中的 WhatsApp 按钮跟着往右跑、被切掉一半 —— 客户报的"位置偏移"。 改法：.nav 变成一块**刚好一屏、overflow:hidden、不吃点击**的透明外壳， 真正滑动的白抽屉下沉到 .nav__list。被裁掉的抽屉不再产生横向溢出， 布局视口就不会被撑宽，底部那条也就回到正常宽度了。 ----------------------------------------------------------- */ .nav { position: fixed; inset: 0; width: auto; margin: 0; padding: 0; background: transparent; box-shadow: none; overflow: hidden; /* 裁掉滑到屏外的抽屉，避免撑宽视口 */ pointer-events: none; /* 空白处让点击穿到遮罩层，点遮罩仍能关闭 */ visibility: hidden; transition: visibility 0s linear .28s; z-index: 70; } .nav.is-open { visibility: visible; transition-delay: 0s; } .nav__list { position: absolute; inset: 0 0 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: min(360px, 86vw); margin: 0; padding: 88px 22px 40px; background: #fff; box-shadow: var(--shadow-lg); overflow-y: auto; overscroll-behavior: contain; transform: translateX(102%); transition: transform .28s ease; pointer-events: auto; } .nav.is-open .nav__list { transform: none; } .nav__link { justify-content: space-between; padding: 14px 12px; font-size: .9375rem; } .nav__link[aria-current="page"]::after { display: none; } .nav__panel { position: static; min-width: 0; padding: 4px 10px 10px 12px; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; display: none; } .nav__list li.is-expanded > .nav__panel { display: block; } .nav-backdrop { position: fixed; inset: 0; background: rgba(10, 20, 34, .45); opacity: 0; visibility: hidden; transition: background-color, border-color, color, box-shadow, transform, opacity .25s ease; /* 必须低于 .site-header(50)：header 建立了层叠上下文，nav 是它的子元素， 遮罩若高于 header 会把整个抽屉一起压暗。 */ z-index: 45; } .nav-backdrop.is-visible { opacity: 1; visibility: visible; } .header__tools .icon-btn { display: none; } .header__tools .btn { min-height: 42px; padding: 0 18px; font-size: .8125rem; } .review-grid, .info-grid, .news-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 820px) { .section { padding: 60px 0; } .cat-grid, .prod-grid, .prod-grid--3, .news-grid, .news-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 手机上把"卡片一条长龙"改成横向滑动，页面短一大截 */ .review-grid, .cat-grid { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 10px; } .review-grid::-webkit-scrollbar, .cat-grid::-webkit-scrollbar { display: none; } .review-grid > *, .cat-grid > * { flex: 0 0 78%; scroll-snap-align: start; } .rail__item { flex: 0 0 74%; } .cat-band + .cat-band { margin-top: 56px; padding-top: 56px; } .cat-band__banner { min-height: 250px; } .cat-band__caption { padding: 28px 24px 24px; } /* 小屏时横幅变矮，占位内容会和标题叠在一起，整块藏掉 —— 标题本身已经说明是哪个大类 */ .cat-band__banner.ph .ph__inner { display: none; } .cat-band__banner.ph::after { inset: 10px; } .hero__nav { display: none; } .hero, .hero__slides { min-height: 480px; } .hero__body { padding-block: 64px; } .value-strip { margin-top: -30px; } .footer-grid { grid-template-columns: 1fr; gap: 34px; } /* 移动端：底部只留一个"一键直联"按钮，避免图标堆叠显得臃肿 */ body { padding-bottom: 78px; } .float-actions { top: auto; bottom: 0; left: 0; right: 0; transform: none; display: block; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 22px rgba(0, 0, 0, .1); } .float-actions__stack { display: none; } .float-actions__primary { display: flex; } .to-top { bottom: 88px; } } @media (max-width: 620px) { :root { --gutter: 18px; } body { font-size: 15px; } .rail { gap: 14px; } .cat-band__caption { padding: 22px 18px 18px; } .cat-band__num { min-width: 36px; height: 36px; margin-bottom: 12px; font-size: .9375rem; } .cat-band__caption h2 { font-size: 1.3rem; } .cat-band__caption p { font-size: .8125rem; } .cat-band + .cat-band { margin-top: 44px; padding-top: 44px; } .item-spec { padding: 18px 18px; } /* ---- 手机端瘦身 ---- */ .section { padding: 40px 0; } /* 原来是 52px */ .section--tight { padding: 32px 0; } .section-head { margin-bottom: 32px; } .hero, .hero__slides { min-height: 430px; } .hero__body { padding-block: 52px; } /* 优势条：4 张卡收成 2×2，卡片本身也压缩 */ .value-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .value-card { flex-direction: column; gap: 8px; padding: 16px 14px; } .value-card__icon { width: 36px; height: 36px; border-radius: 11px; } .value-card__icon svg { width: 18px; height: 18px; } .value-card h3 { font-size: .875rem; margin-bottom: .15em; } .value-card p { font-size: .75rem; line-height: 1.5; } /* 产品条：卡片窄一点，一屏能看到下一张 */ .rail__item { flex: 0 0 70%; } .rail__hint { font-size: .6875rem; } .tile__body { padding: 14px 16px 16px; } .tile__name { font-size: .9375rem; } .tile__spec { -webkit-line-clamp: 2; } /* 大类横幅压矮 */ .cat-band__banner { min-height: 176px; } .cat-band + .cat-band { margin-top: 36px; padding-top: 36px; } /* 工厂展示更紧凑 */ .cf { padding: 30px 0; } /* 深色工厂区：列表行距收一收 */ .solution__list { gap: 9px; margin: 1.2rem 0 1.6rem; } .solution__list li { font-size: .875rem; } /* 评价卡 / 能力卡在横向滑动里也压扁一点 */ .review-card { padding: 22px 20px; } .review-grid > *, .cat-grid > * { flex: 0 0 76%; } /* ---- 第二轮收紧 ---- */ h2 { font-size: 1.35rem; } .section-head { margin-bottom: 26px; } .section-head p { font-size: .875rem; } .hero__title { font-size: 1.7rem; } .hero__text { font-size: .9375rem; margin-bottom: 1.1rem; } .hero__points { margin-bottom: 1.2rem; } .hero__points li { font-size: .875rem; } .hero__actions { gap: 10px; } .hero__actions .btn { min-height: 46px; } /* 四条卖点排两列，省掉一半高度 */ .feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 1.1rem 0 1.5rem; } .feature-list li { font-size: .8125rem; } .feature-list svg { width: 16px; height: 16px; margin-top: 3px; } /* 三个数据并排，不再竖着占三行 */ .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px; padding-top: 20px; } .stat__num { font-size: 1.5rem; } .stat__label { font-size: .6875rem; } /* 产品卡再窄一点，一屏能露出下一张更多 */ .rail__item { flex: 0 0 64%; } .cat-band__banner { min-height: 150px; } .cat-band__caption h2 { font-size: 1.15rem; } .cat-band__caption p { font-size: .75rem; } .cat-band__num { min-width: 32px; height: 32px; font-size: .875rem; margin-bottom: 10px; } /* ---- 第三轮：间距再收紧 ---- */ .cat-band + .cat-band { margin-top: 26px; padding-top: 26px; } .split { gap: 26px; } .page-hero { padding: 46px 0 42px; } .page-hero p { font-size: .9375rem; } .cf { padding: 22px 0; } .breadcrumb { margin-bottom: .9rem; } .grid-actions { margin-top: 30px; } .cta-band { padding: 46px 0; } .cta-band h2 { font-size: 1.35rem; } .cta-band p { font-size: .875rem; } .info-grid { gap: 14px; } .info-card { padding: 22px 20px; } .channel-grid { gap: 10px; } .channel-card { padding: 18px 12px 16px; gap: 8px; } .value-strip { margin-top: -18px; } /* 小屏页头压缩，避免 brand + 汉堡 + 按钮 撑出横向滚动 */ .site-header__inner { gap: 12px; } .brand__mark { width: 36px; height: 36px; } .brand__name { font-size: 1.125rem; } .brand__tag { display: none; } .header__tools { gap: 6px; } .header__tools .btn { min-height: 40px; padding: 0 15px; font-size: .8125rem; } .section { padding: 52px 0; } .cat-grid, .prod-grid, .prod-grid--3, .news-grid, .news-grid--3, .review-grid, .info-grid { grid-template-columns: 1fr; } .field-row { grid-template-columns: 1fr; } .cta-band__actions { width: 100%; } .cta-band__actions .btn { flex: 1; } .form-card { padding: 26px 20px; } .channel-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .channel-card { padding: 22px 14px 20px; } .channel-card__icon { width: 50px; height: 50px; border-radius: 15px; } .channel-card__icon svg { width: 27px; height: 27px; } .to-top { right: 12px; bottom: 88px; } .hero, .hero__slides { min-height: 430px; } /* 图集格子改成一条可横滑的小条，不占竖向空间 */ .pdp__shots { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .pdp__shots::-webkit-scrollbar { display: none; } .shot { scroll-snap-align: start; padding: 6px 6px 7px; gap: 6px; } .pdp__hint { bottom: 12px; padding: 6px 12px; } /* ------------------------------------------------------------- 手机端字号下限（2026-09-30） ------------------------------------------------------------- 实测手机上出现过 10 / 11 / 12px 的小字：图集格子标签只有 10px， 统计标签、角标、提示都是 11px，正文说明 13px —— 在 390px 宽的手机上 这些都偏小。统一抬到：**功能性小字 ≥ 12px，正文 ≥ 14px**。 ------------------------------------------------------------- */ .shot__label { font-size: .75rem; } /* 10 → 12：图集格子标签 */ .stat__label { font-size: .75rem; } /* 11 → 12：20+ / 4,000㎡ 下面的字 */ .ph__badge { font-size: .75rem; } /* 11 → 12：Custom 角标 */ .rail__hint { font-size: .75rem; } /* 11 → 12：左右滑动查看更多 */ .pdp__hint { font-size: .75rem; } /* 11 → 12：拖动旋转提示 */ .channel-card__id, .field-hint, .form-note { font-size: .8125rem; } /* 12 → 13：微信号 / 表单说明 */ .feature-list li { font-size: .875rem; } /* 13 → 14：卖点清单 */ .tile__spec { font-size: .875rem; } /* 13 → 14：产品卡规格 */ .tile__more { font-size: .875rem; } /* 13 → 14：查看详情 */ .cat-card__body p { font-size: .875rem; } /* 13 → 14：产能卡说明 */ .solution__caption { font-size: .875rem; } /* 13 → 14：视频说明 */ /* ------------------------------------------------------------- 手机端页脚瘦身 ------------------------------------------------------------- 页脚原来 4 栏竖排，实测高度 994px —— 全站最占地的一块，而且是纯小字。 改成「品牌一行 + 两组链接并排 + 联系方式」，并把那段公司介绍删掉 （首页和关于我们页已经讲过了）。 ------------------------------------------------------------- */ .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; } .footer-col:first-child { grid-column: 1 / -1; } .footer-col:first-child p { display: none; } .footer-brand { margin-bottom: 0; } .footer-col h2 { margin-bottom: 1em; } .footer-list li { margin-bottom: .5em; } .footer-bottom { padding: 16px 0 22px; gap: 12px; } } /* ------------------------------------------------------------- 27. Print ------------------------------------------------------------- */ @media print { .site-header, .float-actions, .to-top { display: none; } .section { padding: 24px 0; } body { color: #000; } } /* ------------------------------------------------------------- 28. 首页 —— Apple 式分块版式 (2026-09-30) ------------------------------------------------------------- 只有 index.html 用这一套类名（.tiles / .tile / .hx-*）， 其它 5 个页面完全不受影响。 版式规则（参考 apple.com 首页）： · 整页是几张圆角"瓷砖"竖着排，瓷砖之间留 --tile-gap（12px）缝隙， 缝隙露出的就是页面白底 —— 和 Apple 一样，只有深浅不同的两块之间 才看得出来缝。 · 每张瓷砖内部仍然是 .container（宽度、左右留白和全站一致）， 所以版式变了、栅格没变，大屏适配那套（1400px 起容器加宽）照旧生效。 · 首屏是"大标题 + 一句话 + 两个入口"，把两个主张一起说出来； 下面两块各展开一条，深浅交替。 想换成实拍大图：把 .hx-media 的 换成自己的图即可（建议 4:3）。 ------------------------------------------------------------- */ /* --- 瓷砖容器 --- */ .tiles { display: grid; gap: var(--tile-gap); padding: var(--tile-gap); } .tile { position: relative; isolation: isolate; /* 让 ::before 的光晕只待在本块里 */ border-radius: var(--tile-radius); overflow: hidden; /* 圆角裁掉内部溢出的光晕和图片 */ } /* 白瓷砖：一层极淡的品牌绿 + 信息蓝，避免大块纯白显得"空" */ .tile--hero { background: radial-gradient(900px 420px at 12% -12%, rgba(0, 169, 110, .10), transparent 60%), radial-gradient(760px 380px at 92% 6%, rgba(27, 110, 243, .09), transparent 62%), linear-gradient(180deg, #ffffff 0%, #f6faf9 100%); } .tile--plain { background: #fff; } .tile--soft { background: var(--bg-soft); } /* 瓷砖内的一段内容（产品中心 / 自有产能 / 车间视频用）， 上下留白对齐 .hx-split，保证每块瓷砖的呼吸感一致 */ .hx-band { padding-block: clamp(52px, 6.4vw, 92px); } /* 深瓷砖：近黑底 + 右上角一点冷绿光，避免大块死黑 */ .tile--ink { background: #0b1220; color: rgba(255, 255, 255, .78); } .tile--ink::before { content: ""; position: absolute; top: -34%; right: -12%; width: 760px; height: 520px; background: radial-gradient(closest-side, rgba(0, 169, 110, .30), transparent 72%); pointer-events: none; z-index: -1; } .tile--ink h2 { color: #fff; } .hx-eyebrow--light { color: #8ef0c4; } /* --- 1. 首屏 --- */ .hx-hero { padding-block: clamp(56px, 8vw, 112px) clamp(64px, 9vw, 124px); text-align: center; } .hx-hero__title { margin: 0 0 .42em; font-size: clamp(2.35rem, 6.1vw, 4.9rem); font-weight: 900; line-height: var(--lead-hero); letter-spacing: var(--track-hero); } .hx-hero__title span { display: block; } /* 第二行做渐变字：Apple 首页标志性的做法。 三个色标对白底分别是 5.9 / 4.6 / 5.3 : 1，大号字也留了余量。 */ .hx-hero__title .hx-grad { background: linear-gradient(96deg, #00734a 0%, #0d7d76 44%, #1560d8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .hx-hero__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; } /* --- 2 / 3. 左右分栏（文字 + 图 / 规格表） --- */ .hx-split { display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 60px; padding-block: clamp(52px, 6.4vw, 92px); } /* --- 大数字（良品率） --- */ .hx-stat { display: flex; flex-direction: column; margin: 0 0 1.15rem; line-height: 1; } .hx-stat__pre { margin-bottom: .55rem; color: #8ef0c4; font-size: .8125rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; } .hx-stat__num { font-size: clamp(4rem, 8.6vw, 7rem); font-weight: 900; /* 这里现在放的是词（能 / 完美 / Perfect…），不再是「99%」这种数字： · line-height 从 .92 提到 1.04 —— 满格的中文/泰文字形原本会被 background-clip: text 的绘制区切掉底下一截； · 负字距会把两个中文字挤在一起，改成 0； · 再加一点上下 padding 撑开渐变绘制区（用负 margin 抵消回原位置）， descender 和字脚都不会被切。 */ line-height: 1.04; letter-spacing: 0; padding-block: .06em .1em; margin-block: -.06em -.1em; font-variant-numeric: tabular-nums; background: linear-gradient(104deg, #8ef0c4 0%, #4ade9f 46%, #7dd3fc 100%); -webkit-background-clip: text; background-clip: text; color: #8ef0c4; -webkit-text-fill-color: transparent; } .hx-stat__cap { margin-top: .4rem; color: #fff; font-size: clamp(1.05rem, 1.9vw, 1.5rem); font-weight: 800; letter-spacing: var(--track-head); } .tile--ink .hx-split__body > p { color: rgba(255, 255, 255, .78); } /* --- 配图（深底上一圈细描边，图不会"飘"在暗色里） --- */ .hx-media { margin: 0; } .hx-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid rgba(255, 255, 255, .14); border-radius: 22px; } /* --- 首页第 0 块：厂区外貌（左文右图，图片裁成 4:3 撑满） --- 版式直接复用 .hx-split / .hx-media，这里只把图片描边换成浅色， 因为这一块是白底（默认那圈白描边是给深色块用的）。 */ .factory-view__figure img { border-color: var(--line); } /* --- 车间视频（第 6 块）：深底上同样加一圈细描边，标题居中 --- */ .hx-video .section-head { margin-bottom: 40px; } .hx-video .section-head .eyebrow { justify-content: center; } .hx-video .media { border: 1px solid rgba(255, 255, 255, .14); } /* --- 规格表：一行一项，细分割线（Apple 技术规格表的样子） --- */ .hx-specs { margin: 0; padding: 0; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-xs); } .hx-specs li { display: grid; grid-template-columns: minmax(104px, .62fr) 1.38fr; gap: 4px 22px; margin: 0; padding: 16px 24px; border-top: 1px solid var(--line-soft); } .hx-specs li:first-child { border-top: 0; } .hx-specs b { color: var(--ink); font-size: .875rem; font-weight: 800; letter-spacing: .01em; } .hx-specs span { color: var(--ink-2); font-size: .9375rem; line-height: 1.55; } /* --- 三个产品入口（胶囊小链接） --- */ .hx-links { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 1.6rem 0 1.9rem; padding: 0; list-style: none; } .hx-links li { margin: 0; } .hx-links a { display: inline-flex; align-items: center; gap: .4em; padding: 9px 16px; border: 1px solid var(--line); border-radius: var(--pill); background: #fff; color: var(--ink); font-size: .875rem; font-weight: 700; } .hx-links a::after { content: "›"; color: var(--ink-3); } .hx-links a:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-700); } /* --- 首页专用小屏适配 --- */ @media (max-width: 1024px) { .hx-split { grid-template-columns: 1fr; gap: 38px; } /* 单栏排布时配图会横跨整幅，4:3 会变成一大块；压成 16:9 并封顶高度 */ .hx-media img { aspect-ratio: 16 / 9; max-height: 520px; } } @media (max-width: 620px) { :root { --tile-gap: 8px; --tile-radius: 20px; } .hx-hero { padding-block: 42px 52px; } .hx-hero__title { font-size: clamp(2.05rem, 9vw, 2.9rem); } .hx-hero__actions { gap: 12px 18px; } .hx-hero__actions .btn { width: 100%; } .hx-split { padding-block: 40px 44px; gap: 30px; } .hx-specs li { grid-template-columns: 1fr; gap: 2px; padding: 14px 18px; } .hx-specs span { font-size: .875rem; } .hx-media img { border-radius: 16px; } }