/* ========================================================================== WINTOUCH — 首页 9 区块 + 页脚 -------------------------------------------------------------------------- 版式规格来自 docs/reference/html/en.html 抓下来的运行时分段 （scripts/_ref_out/section_0N.txt + footer.txt，参照站 wintouchtech.com/en/）。 文件职责：只放首页 + 页脚的类。全站共用组件（header / mega / 产品卡 / 表单 / 图标 …）仍在 site.css，改那两处别互相污染。 base.html 里 home.css 排在 site.css 之后，同名选择器这里生效。 ★ 全站容器统一用 .container（1280）而不是参照站的 container-wide（1440）， 因为头部 header-row 也是 .container —— 只在首页换成 wide 会让正文比 导航宽一截，两条线对不齐。 ★ 每个 hm-* 区块都必须带 padding-block:var(--space-section)（intro 用 3rem 的 space-section-sm）—— 参照站每块是 py-[var(--space-section)]，1440 下 = 120px 上下。漏掉这个全站会矮 1680px，区块挤在一起，就是"板块摆放不对"的观感。 加新区块时连 padding 一起抄，别只抄背景色。 ★ 参照站深底区块写的是 bg-[var(--color-ink-strong)]（直接指 navy）， 这里同样写 raw 值而不是 var(--color-stage) —— 后者是 var(--color-brand-navy) 的别名，在 .stage 作用域里会被重映射，语义不同，别混用。 ========================================================================== */ /* -------------------------------------------------------------------------- 通用按钮（参照站 h-12 / px-7 / radius-pill / font-display 一族） -------------------------------------------------------------------------- */ .hw-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; height:3rem; padding-inline:1.75rem; border-radius:var(--radius-pill); border:1px solid transparent; font-family:var(--font-display); font-size:.95rem; font-weight:600; line-height:1.15; white-space:nowrap; text-decoration:none; color:var(--color-ink-strong); transition:transform var(--duration-fast) var(--ease-out-soft), background-color var(--duration-fast) var(--ease-out-soft), border-color var(--duration-fast) var(--ease-out-soft), color var(--duration-fast) var(--ease-out-soft), box-shadow var(--duration-fast) var(--ease-out-soft); } .hw-btn .arr{ font-size:1.1em; line-height:0; transition:transform var(--duration-fast) var(--ease-out-soft) } .hw-btn:hover .arr{ transform:translateX(.125rem) } .hw-btn .icon{ width:1em; height:1em; flex:none } .hw-btn-lg{ height:3.5rem; padding-inline:2rem; font-size:1rem } .hw-btn-ink{ background:var(--color-ink-strong); color:var(--color-brand-white); box-shadow:var(--shadow-card) } .hw-btn-ink:hover{ background:var(--color-accent); color:var(--color-accent-ink); box-shadow:var(--shadow-lift); transform:translateY(-.125rem) } .hw-btn-ghost{ border-color:var(--color-ink-strong); color:var(--color-ink-strong) } .hw-btn-ghost:hover{ background:var(--color-ink-strong); color:var(--color-brand-white) } .hw-btn-inv-ghost{ border-color:rgba(255,255,255,.4); background:transparent; color:var(--color-brand-white) } .hw-btn-inv-ghost:hover{ background:var(--color-brand-white); color:var(--color-ink-strong) } .hw-btn-accent{ background:var(--color-accent); color:var(--color-accent-ink); box-shadow:var(--shadow-card) } .hw-btn-accent:hover{ background:var(--color-accent-hover); box-shadow:var(--shadow-lift); transform:translateY(-.125rem) } .hw-btn-link{ background:none; border:0; box-shadow:none; color:var(--color-ink-strong); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px } .hw-btn-link:hover{ color:var(--color-accent-strong); background:none } /* -------------------------------------------------------------------------- 标题 / 眉签 -------------------------------------------------------------------------- */ /* 参照站 t-mega：clamp(2.25rem, 1rem + 3.2vw, 4rem) */ .hm-h2{ font-family:var(--font-display); font-weight:600; line-height:1.08; letter-spacing:-.02em; color:var(--color-ink-strong); font-size:clamp(2.25rem, 1rem + 3.2vw, 4rem); } /* 产品卡区块那一档更大：clamp(2.25rem, 1rem + 3.4vw, 4.25rem), lh 1.05, 700 */ .hm-h2-strong{ font-size:clamp(2.25rem, 1rem + 3.4vw, 4.25rem); line-height:1.05; font-weight:700 } .hm-h2-white{ color:var(--color-brand-white) } /* 参照站 t-eyebrow：0.6875rem / 600 / uppercase / ls .16em */ .hm-eyebrow{ display:flex; align-items:center; gap:.75rem; font-family:var(--font-mono); font-size:var(--text-mono-xs); font-weight:600; letter-spacing:.16em; text-transform:uppercase; line-height:1.4; color:rgba(255,255,255,.7); } .hm-eyebrow-amber{ color:var(--color-accent) } .hm-eyebrow-white{ color:rgba(255,255,255,.55) } .hm-eyebrow-strong{ color:var(--color-accent-strong) } /* 浅色区块用的眉签（参照站的 accent-strong 小写标题） */ .hm-eyebrow-light{ font-family:var(--font-display); font-size:.875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; line-height:1.4; color:var(--color-accent-strong); } /* -------------------------------------------------------------------------- 区块纵向留白 —— 参照站每个
都是 py-[var(--space-section)] （intro 那条用 space-section-sm,3rem，单独写在 .hm-intro 里）。 漏掉这一组整页会矮 1680px、区块挤在一起，看着就是"板块摆放不对"。 新增区块时要么带 .hm-sec-pad，要么把它加进这个列表。 -------------------------------------------------------------------------- */ .hm-claim, .hm-families, .hm-scenarios, .hm-plant, .hm-tour, .hm-certs, .hm-quote{ padding-block:var(--space-section) } /* ========================================================================== 02 · Intro（paper，底部一根 hairline） ========================================================================== */ /* 参照站 section_02：py-[var(--space-section-sm,3rem)] + 内层 py-4 */ .hm-intro{ padding-block:3rem; border-bottom:1px solid var(--color-rule); background:var(--color-brand-white); } .hm-intro-grid{ display:flex; flex-direction:column; gap:2rem; padding-block:1rem; } @media (min-width:1024px){ .hm-intro-grid{ flex-direction:row; align-items:flex-end; justify-content:space-between } } .hm-intro-lead{ font-family:var(--font-display); font-weight:600; line-height:1.25; font-size:1.5rem; color:var(--color-ink-strong); max-width:42rem; } @media (min-width:768px){ .hm-intro-lead{ font-size:2rem } } .hm-intro-sub{ margin-top:1rem; max-width:36rem; font-size:1rem; color:var(--color-ink-muted) } .hm-accent-txt{ color:var(--color-accent) } .hm-muted{ color:var(--color-ink-muted) } .hm-intro-aside{ flex:none } @media (min-width:1024px){ .hm-intro-aside{ text-align:right } } .hm-intro-cta{ display:flex; flex-wrap:wrap; gap:.75rem } @media (min-width:1024px){ .hm-intro-cta{ justify-content:flex-end } } .hm-follow{ margin-top:1rem; display:flex; flex-wrap:wrap; align-items:center; gap:.75rem } @media (min-width:1024px){ .hm-follow{ justify-content:flex-end } } .hm-follow-label{ font-family:var(--font-mono); font-size:var(--text-mono-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--color-ink-muted); } .hm-follow-links{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:.5rem } .hm-follow-links a{ display:inline-flex; align-items:center; gap:.5rem; height:2.5rem; padding-inline:1rem; border-radius:var(--radius-pill); border:1px solid var(--color-rule); background:var(--color-brand-white); color:var(--color-ink-strong); font-family:var(--font-display); font-size:.875rem; text-decoration:none; transition:border-color var(--duration-fast) var(--ease-out-soft), background-color var(--duration-fast) var(--ease-out-soft), transform var(--duration-fast) var(--ease-out-soft); } .hm-follow-links a:hover{ border-color:var(--color-accent); background:var(--color-accent-soft); transform:translateY(-.125rem); } .hm-follow-links a .icon{ width:1rem; height:1rem; flex:none } .hm-follow-links a .arr{ width:1.25rem; height:1.25rem; display:grid; place-items:center } .hm-follow-links a:hover .arr{ transform:translate(.125rem,-.125rem) } /* ========================================================================== 02 · Hero（navy 通栏大图 + chips + 指标带 + 认证行） ========================================================================== */ .hm-hero{ position:relative; overflow:hidden; background:var(--color-ink-strong) } .hm-hero-media{ position:relative; isolation:isolate } /* 参照站 aspect 阶梯：16/10 → sm 2/1 → lg 21/9 */ .hm-hero-img{ display:block; width:100%; height:auto; object-fit:cover; aspect-ratio:16/10; } @media (min-width:640px){ .hm-hero-img{ aspect-ratio:2/1 } } @media (min-width:1024px){ .hm-hero-img{ aspect-ratio:21/9 } } .hm-hero-scrim{ position:absolute; pointer-events:none; display:block } .hm-hero-scrim-top{ inset-inline:0; top:0; height:6rem; background:linear-gradient(180deg, color-mix(in oklab, var(--color-ink-strong) 75%, transparent), transparent); } .hm-hero-scrim-bottom{ inset-inline:0; bottom:0; height:33.333%; background:linear-gradient(0deg, var(--color-ink-strong), color-mix(in oklab, var(--color-ink-strong) 70%, transparent) 60%, transparent); } @media (min-width:1024px){ .hm-hero-scrim-bottom{ height:66.666% } } .hm-hero-scrim-left{ inset-block:0; left:0; width:66.666%; display:none; background:linear-gradient(90deg, color-mix(in oklab, var(--color-ink-strong) 88%, transparent), color-mix(in oklab, var(--color-ink-strong) 25%, transparent) 70%, transparent); } @media (min-width:1024px){ .hm-hero-scrim-left{ display:block } } .hm-hero-inner{ position:relative; z-index:1; padding-top:1.75rem; padding-bottom:2.25rem } @media (min-width:1024px){ .hm-hero-inner{ position:absolute; inset:0; display:flex; align-items:flex-end; padding-top:0; padding-bottom:3.5rem } } .hm-hero-body{ max-width:42rem } .hm-hero-title{ margin-top:1.25rem; font-family:var(--font-display); font-weight:600; line-height:1.05; letter-spacing:-.025em; color:var(--color-brand-white); font-size:clamp(1.9rem, 1rem + 3.4vw, 4rem); } .hm-hero-italic{ font-style:italic; font-weight:400; color:rgba(255,255,255,.65) } .hm-chips{ margin-top:1.5rem; display:flex; flex-wrap:wrap; gap:.5rem } .hm-chip{ position:relative; display:inline-flex; align-items:center; gap:.375rem; padding:.375rem .75rem; border-radius:var(--radius-pill); border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.07); color:rgba(255,255,255,.85); font-family:var(--font-mono); font-size:var(--text-mono-xs); font-weight:600; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); transition:border-color var(--duration-fast) var(--ease-out-soft), background-color var(--duration-fast) var(--ease-out-soft), color var(--duration-fast) var(--ease-out-soft); } .hm-chip::before{ content:""; width:.25rem; height:.25rem; border-radius:50%; background:var(--color-accent); flex:none; transition:transform var(--duration-fast) var(--ease-out-soft); } .hm-chip:hover{ border-color:var(--color-accent); background:color-mix(in oklab, var(--color-accent) 18%, transparent); color:var(--color-brand-white); } .hm-chip:hover::before{ transform:scale(1.75) } .hm-hero-actions{ margin-top:2rem; display:flex; flex-wrap:wrap; align-items:center; gap:.75rem } /* 指标带 + 认证行：压在图下方的 navy 区 */ .hm-hero-stats{ border-top:1px solid rgba(255,255,255,.1) } .hm-metrics{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap-y:1.5rem; padding-top:1.75rem; padding-bottom:1.5rem; } @media (min-width:768px){ .hm-metrics{ grid-template-columns:repeat(4,minmax(0,1fr)); gap-x:3rem } } .hm-metric{ display:flex; flex-direction:column; gap:.375rem } .hm-metric dt{ font-family:var(--font-mono); font-size:.75rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.65); } .hm-metric dd{ font-family:var(--font-display); font-weight:600; line-height:1; letter-spacing:-.01em; color:var(--color-brand-white); font-size:clamp(1.75rem, 1.45rem + 1vw, 2.25rem); } .hm-cert-strip{ display:flex; flex-direction:column; gap:.5rem; border-top:1px solid rgba(255,255,255,.1); padding-block:1rem; font-family:var(--font-mono); font-size:.75rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; } @media (min-width:640px){ .hm-cert-strip{ flex-direction:row; align-items:center; justify-content:space-between } } .hm-cert-strip-tag{ display:inline-flex; align-items:center; gap:.5rem; color:rgba(255,255,255,.65) } .hm-cert-strip-tag > span{ width:.375rem; height:.375rem; border-radius:50%; background:var(--color-accent); flex:none; } .hm-cert-strip-list{ color:rgba(255,255,255,.75); line-height:1.8; } /* ========================================================================== 03 · Claim + 大图（paper-2，居中） ========================================================================== */ .hm-claim{ background:#f5f6f7 } .hm-claim-head{ max-width:48rem; margin-inline:auto; text-align:center } .hm-claim-head .hm-h2{ display:block } .hm-claim-head > p{ margin-top:1.25rem; max-width:36rem; margin-inline:auto; color:var(--color-ink-muted) } /* 两处都套 .hm-claim-head，但副标题宽度不同：claim 是 max-w-xl(36rem)， scenarios 是 max-w-2xl(42rem) —— 参照站原文如此 */ .hm-scenarios .hm-claim-head > p{ max-width:42rem } .hm-claim-figure{ margin-top:3rem; aspect-ratio:300/169; overflow:hidden; border-radius:var(--radius-2xl); box-shadow:var(--shadow-card); } .hm-claim-figure img{ width:100%; height:100%; object-fit:cover; display:block } .hm-claim-cta{ margin-top:2.5rem; display:flex; justify-content:center } /* ========================================================================== 04 · 产品家族卡（paper，3 列；文字在上、方图在下） ========================================================================== */ /* 参照站 families 的 h2 是 max-w-4xl(56rem)，比 claim 的 max-w-3xl 宽一档 */ .hm-families .hm-h2{ max-width:56rem; margin-inline:auto; text-align:center } .hm-fgrid{ margin-top:3.5rem; display:grid; grid-template-columns:1fr; gap:1.25rem } @media (min-width:640px){ .hm-fgrid{ grid-template-columns:repeat(2,minmax(0,1fr)) } } @media (min-width:1024px){ .hm-fgrid{ grid-template-columns:repeat(3,minmax(0,1fr)) } } .hm-fcard{ position:relative; display:flex; flex-direction:column; overflow:hidden; border-radius:var(--radius-2xl); background:#f5f6f7; text-decoration:none; transition:transform var(--duration-normal) var(--ease-out-soft), box-shadow var(--duration-normal) var(--ease-out-soft); } .hm-fcard:hover{ transform:translateY(-.25rem); box-shadow:var(--shadow-lift) } .hm-fcard-body{ padding:1.75rem } @media (min-width:1024px){ .hm-fcard-body{ padding:2rem } } .hm-fcard h3{ font-family:var(--font-display); font-weight:700; line-height:1.2; font-size:1.5rem; color:var(--color-ink-strong); } @media (min-width:1024px){ .hm-fcard h3{ font-size:1.6rem } } .hm-fcard p{ margin-top:.75rem; color:var(--color-ink-muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .hm-fcard-learn{ margin-top:1.25rem; display:inline-flex; align-items:center; gap:.375rem; font-family:var(--font-display); font-weight:600; color:var(--color-ink-strong); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; transition:color var(--duration-fast) var(--ease-out-soft); } .hm-fcard:hover .hm-fcard-learn{ color:var(--color-accent-strong) } .hm-fcard-learn .arr{ transition:transform var(--duration-fast) var(--ease-out-soft) } .hm-fcard:hover .hm-fcard-learn .arr{ transform:translateX(.125rem) } .hm-fcard-media{ position:relative; margin-top:auto; aspect-ratio:1/1; width:100%; overflow:hidden; background:var(--color-brand-white); } /* 参照站 object-contain + p-1 + scale-1.14，hover 到 1.18 */ .hm-fcard-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:.25rem; transform:scale(1.14); transition:transform var(--duration-slow) var(--ease-out-soft); } .hm-fcard:hover .hm-fcard-media img{ transform:scale(1.18) } .hm-fcard-badge{ position:absolute; top:1rem; right:1rem; border-radius:var(--radius-pill); background:rgba(7,27,44,.85); color:var(--color-brand-white); padding:.25rem .75rem; font-family:var(--font-display); font-size:.75rem; font-weight:600; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); } /* ========================================================================== 05 · 应用场景（paper，2 列图卡，底部压渐变） ========================================================================== */ .hm-sgrid{ margin-top:3.5rem; display:grid; grid-template-columns:1fr; gap:1.25rem } @media (min-width:640px){ .hm-sgrid{ grid-template-columns:repeat(2,minmax(0,1fr)) } } .hm-scard{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; aspect-ratio:16/10; overflow:hidden; border-radius:var(--radius-2xl); box-shadow:var(--shadow-card); text-decoration:none; transition:transform var(--duration-normal) var(--ease-out-soft), box-shadow var(--duration-normal) var(--ease-out-soft); } .hm-scard:hover{ transform:translateY(-.25rem); box-shadow:var(--shadow-lift) } .hm-scard > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform var(--duration-slow) var(--ease-out-soft); } .hm-scard:hover > img{ transform:scale(1.05) } .hm-scard-scrim{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.25) 55%, transparent 100%); } .hm-scard-label{ position:relative; padding:1.5rem } @media (min-width:1024px){ .hm-scard-label{ padding:2rem } } .hm-scard-kicker{ display:block; font-family:var(--font-display); font-size:.75rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.7); } .hm-scard-title{ margin-top:.375rem; display:flex; align-items:center; gap:.5rem; font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:var(--color-brand-white); line-height:1.2; } .hm-scard-title .arr{ transition:transform var(--duration-fast) var(--ease-out-soft) } .hm-scard:hover .hm-scard-title .arr{ transform:translateX(.25rem) } /* ========================================================================== 06 · 工厂（paper-2，12 栅格：4 列文案 / 8 列视频） ========================================================================== */ .hm-plant{ background:#f5f6f7 } .hm-plant-grid{ display:grid; gap:2.5rem } @media (min-width:1024px){ .hm-plant-grid{ grid-template-columns:repeat(12,minmax(0,1fr)); gap:4rem } } @media (min-width:1024px){ .hm-plant-aside{ grid-column:span 4 } .hm-plant-media{ grid-column:span 8 } } .hm-plant-title{ margin-top:1rem; font-family:var(--font-display); line-height:1.08; letter-spacing:-.02em; font-size:var(--text-display); font-weight:600; color:var(--color-ink-strong); } .hm-plant-lede{ margin-top:1.25rem; color:var(--color-ink-muted) } .hm-stat-grid{ margin-top:2rem; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem } .hm-stat{ border-radius:var(--radius-lg); background:var(--color-brand-white); padding:1rem; box-shadow:0 0 0 1px var(--color-rule); } .hm-stat dt{ font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--color-ink-muted); } .hm-stat dd{ margin-top:.375rem; font-family:var(--font-display); font-size:1.125rem; font-weight:700; line-height:1.2; color:var(--color-ink-strong); } .hm-stat > span{ display:block; margin-top:.625rem; height:.25rem; width:2rem; border-radius:999px; background:var(--color-accent); } .hm-plant-cta{ margin-top:2rem; display:flex; flex-wrap:wrap; gap:.75rem } .hm-video{ position:relative; overflow:hidden; border-radius:var(--radius-2xl); box-shadow:var(--shadow-card); background:var(--color-paper-3); aspect-ratio:1280/720; } .hm-video button{ position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer; background:rgba(7,27,44,.1); border:0; transition:background-color var(--duration-fast) var(--ease-out-soft); } .hm-video button:hover{ background:rgba(7,27,44,.3) } .hm-video button > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; } .hm-play{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:4rem; height:4rem; border-radius:50%; border:1px solid rgba(255,255,255,.4); background:rgba(7,27,44,.55); color:var(--color-brand-white); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); transition:transform var(--duration-fast) var(--ease-out-soft); } @media (min-width:640px){ .hm-play{ width:5rem; height:5rem } } .hm-video button:hover .hm-play{ transform:scale(1.1) } .hm-play .icon{ width:1.75rem; height:1.75rem; margin-left:.25rem; fill:currentColor } @media (min-width:640px){ .hm-play .icon{ width:2rem; height:2rem } } .hm-video figcaption{ position:absolute; inset-inline:0; bottom:0; z-index:1; padding:1rem 1.25rem; font-size:.875rem; color:var(--color-brand-white); background:linear-gradient(0deg, rgba(7,27,44,.85), transparent); } /* ========================================================================== 07 · 360° 全景 banner（paper 底 + 通栏深色卡片） ========================================================================== */ .hm-tour-card{ position:relative; display:block; overflow:hidden; border-radius:var(--radius-2xl); box-shadow:var(--shadow-card); text-decoration:none; transition:transform var(--duration-normal) var(--ease-out-soft), box-shadow var(--duration-normal) var(--ease-out-soft); } .hm-tour-card:hover{ transform:translateY(-.25rem); box-shadow:var(--shadow-lift) } .hm-tour-media{ position:relative; aspect-ratio:4/5; width:100% } @media (min-width:640px){ .hm-tour-media{ aspect-ratio:16/10 } } @media (min-width:1024px){ .hm-tour-media{ aspect-ratio:21/9 } } .hm-tour-media > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform var(--duration-slow) var(--ease-out-soft); } .hm-tour-card:hover .hm-tour-media > img{ transform:scale(1.04) } .hm-tour-scrim{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.85), rgba(0,0,0,.45) 55%, rgba(0,0,0,.1)); } .hm-tour-tag{ position:absolute; top:1.25rem; right:1.25rem; border-radius:var(--radius-pill); background:rgba(255,255,255,.15); padding:.375rem .75rem; font-family:var(--font-display); font-size:.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--color-brand-white); box-shadow:0 0 0 1px rgba(255,255,255,.25); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); } .hm-tour-body{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding:2rem; } @media (min-width:640px){ .hm-tour-body{ padding:3rem } } @media (min-width:1024px){ .hm-tour-body{ padding:4rem } } /* 参照站把这堆内容包在
(36rem) 里，h2 才不会被拉满 */ .hm-tour-inner{ max-width:36rem } .hm-tour-body > *, .hm-tour-inner > *{ position:relative } .hm-tour-body .hm-eyebrow{ display:block } .hm-tour-body h2{ margin-top:1rem; font-size:clamp(2rem, 1rem + 2.8vw, 3.5rem) } .hm-tour-body > p{ margin-top:1.25rem; max-width:28rem; color:rgba(255,255,255,.75) } .hm-tour-btn{ /* body 是 flex 列，inline-flex 子元素默认会被拉到整行宽 —— 必须顶住 */ align-self:flex-start; margin-top:2rem; display:inline-flex; align-items:center; gap:.5rem; height:3rem; padding-inline:1.75rem; border-radius:var(--radius-pill); background:var(--color-brand-white); color:var(--color-ink-strong); font-family:var(--font-display); font-size:.95rem; font-weight:600; box-shadow:var(--shadow-card); transition:background-color var(--duration-fast) var(--ease-out-soft), color var(--duration-fast) var(--ease-out-soft); } .hm-tour-card:hover .hm-tour-btn{ background:var(--color-accent); color:var(--color-brand-white) } .hm-tour-btn .icon{ width:1rem; height:1rem; flex:none } .hm-tour-btn .arr{ transition:transform var(--duration-fast) var(--ease-out-soft) } .hm-tour-card:hover .hm-tour-btn .arr{ transform:translateX(.125rem) } /* ========================================================================== 08 · 报价（navy） ========================================================================== */ .hm-quote{ background:var(--color-ink-strong) } .hm-quote-grid{ display:grid; align-items:center; gap:3rem } @media (min-width:1024px){ .hm-quote-grid{ grid-template-columns:1.05fr 1fr; gap:4rem } } .hm-quote .hm-h2{ margin-top:1.25rem } .hm-quote-lede{ margin-top:1.5rem; max-width:36rem; color:rgba(255,255,255,.7) } .hm-reply{ margin-top:2.5rem; max-width:28rem; border-radius:var(--radius-md); background:rgba(255,255,255,.06); padding:1.25rem 1.5rem; box-shadow:0 0 0 1px rgba(255,255,255,.1); } .hm-reply-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem } .hm-reply-row > span{ font-size:.75rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.7); } .hm-reply-row strong{ font-family:var(--font-display); font-size:.875rem; font-weight:700; color:var(--color-brand-white) } .hm-reply-note{ margin-top:.75rem; padding-top:.75rem; border-top:1px solid rgba(255,255,255,.15); font-size:.875rem; color:rgba(255,255,255,.7); } .hm-quote-cta{ margin-top:2rem; display:flex; flex-wrap:wrap; align-items:center; gap:1rem } .hm-ali-btn{ display:inline-flex; align-items:center; gap:.625rem; height:3rem; padding-inline:1.25rem; border-radius:var(--radius-sm); background:var(--color-accent); color:var(--color-accent-ink); font-family:var(--font-mono); font-size:.75rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; transition:background-color var(--duration-fast) var(--ease-out-soft); } .hm-ali-btn:hover{ background:var(--color-accent-hover) } .hm-ali-badge{ display:grid; place-items:center; width:1.25rem; height:1.25rem; border-radius:50%; background:rgba(255,255,255,.25); font-size:.625rem; font-weight:700; letter-spacing:0; } .hm-ali-btn .arr{ width:1rem; height:1rem; display:grid; place-items:center } .hm-ali-btn .arr .icon{ width:1rem; height:1rem } .hm-quote-cta-ghost{ border-color:rgba(255,255,255,.4); background:transparent; color:var(--color-brand-white) } .hm-quote-cta-ghost:hover{ background:var(--color-brand-white); color:var(--color-ink-strong); border-color:var(--color-brand-white) } .hm-quote-card{ border-radius:var(--radius-2xl); background:var(--color-brand-white); padding:1.5rem; box-shadow:var(--shadow-pop); } @media (min-width:640px){ .hm-quote-card{ padding:2rem } } .hm-quote-card h3{ font-family:var(--font-display); font-size:var(--text-title); font-weight:600; color:var(--color-ink-strong) } .hm-quote-card > p{ margin-top:.375rem; font-size:.875rem; color:var(--color-ink-muted) } .hm-quote-card form{ margin-top:1.5rem } /* 报价卡里表单收紧一档，别让 8 个字段把卡片撑得没头没尾 */ .hm-quote-card .form-grid{ gap:.75rem } .hm-quote-card .field label{ font-size:.75rem } .hm-quote-card .field input, .hm-quote-card .field select, .hm-quote-card .field textarea{ font-size:.875rem } .hm-quote-card .form-foot{ margin-top:1rem } /* ========================================================================== 09 · 证书档案（paper-2） ========================================================================== */ .hm-certs{ overflow:hidden; background:#f5f6f7 } .hm-certs-head{ border-top:1px solid var(--color-ink-strong); padding-top:2rem } .hm-certs-grid{ display:grid; gap:2.5rem } @media (min-width:1024px){ .hm-certs-grid{ grid-template-columns:repeat(12,minmax(0,1fr)); align-items:flex-end } } @media (min-width:1024px){ .hm-certs-title-wrap{ grid-column:span 7 } .hm-certs-note{ grid-column:span 5; padding-bottom:.25rem } } .hm-certs-title{ margin-top:1.25rem; max-width:48rem; font-family:var(--font-display); font-weight:600; line-height:1.06; letter-spacing:-.02em; color:var(--color-ink-strong); font-size:clamp(2.5rem, 1.4rem + 3vw, 4.75rem); } .hm-certs-note p{ max-width:36rem; color:var(--color-ink-muted); text-wrap:pretty } .hm-certs-note .hw-btn{ margin-top:1.5rem } .hm-certs-dl{ margin-top:3rem; display:grid; border-top:1px solid var(--color-rule); border-bottom:1px solid var(--color-rule); } @media (min-width:640px){ .hm-certs-dl{ grid-template-columns:repeat(3,minmax(0,1fr)) } } .hm-certs-dl > div{ padding-block:1.25rem } @media (min-width:640px){ .hm-certs-dl > div + div{ border-left:1px solid var(--color-rule); padding-inline:1.5rem } .hm-certs-dl > div:first-child{ padding-left:0 } .hm-certs-dl > div:last-child{ padding-right:0 } } .hm-certs-dl dt{ font-size:.875rem; color:var(--color-ink-muted) } .hm-certs-dl dd{ margin-top:.25rem; font-family:var(--font-display); font-size:1.25rem; font-weight:600; color:var(--color-ink-strong); line-height:1.3; } /* 参照站这里是
…
<轨道/>
， 标题行和横滑轨道之间隔 mb-5 */ .hm-certs-rail-head{ margin-top:3rem; margin-bottom:1.25rem; display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; } .hm-certs-rail-title{ font-size:.875rem; font-weight:500; color:var(--color-ink-strong) } .hm-certs-rail-sub{ margin-top:.25rem; font-size:.875rem; color:var(--color-ink-muted) } .hm-certs-nav{ display:none; gap:.5rem } @media (min-width:768px){ .hm-certs-nav{ display:flex } } .hm-certs-nav button{ display:grid; place-items:center; width:2.75rem; height:2.75rem; border-radius:50%; border:1px solid var(--color-rule); background:var(--color-brand-white); color:var(--color-ink-strong); cursor:pointer; transition:background-color var(--duration-fast) var(--ease-out-soft), border-color var(--duration-fast) var(--ease-out-soft), color var(--duration-fast) var(--ease-out-soft); } .hm-certs-nav button:hover{ border-color:var(--color-ink-strong); background:var(--color-ink-strong); color:var(--color-brand-white) } .hm-certs-nav button .icon{ width:1rem; height:1rem } /* 横滑轨道：snap-x + 负 margin 出血 */ .hm-certs-rail{ margin-inline:-1rem; display:flex; gap:1.25rem; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:0 1rem; scroll-padding-inline-start:1rem; padding-bottom:1.25rem; scrollbar-width:thin; scrollbar-color:var(--color-rule) transparent; } .hm-certs-rail::-webkit-scrollbar{ height:6px } .hm-certs-rail::-webkit-scrollbar-thumb{ background:var(--color-rule); border-radius:999px } .hm-ccard{ flex:none; width:14.75rem; scroll-snap-align:start; display:flex; flex-direction:column; text-align:left; text-decoration:none; } @media (min-width:640px){ .hm-ccard{ width:16.25rem } } @media (min-width:1024px){ .hm-ccard{ width:17.5rem } } .hm-ccard-media{ position:relative; display:block; aspect-ratio:3/4; overflow:hidden; border-radius:var(--radius-md); background:var(--color-brand-white); box-shadow:var(--shadow-card); box-shadow:0 0 0 1px var(--color-rule), var(--shadow-card); transition:box-shadow var(--duration-normal) var(--ease-out-soft), transform var(--duration-normal) var(--ease-out-soft); } .hm-ccard:hover .hm-ccard-media{ transform:translateY(-.25rem); box-shadow:0 0 0 1px var(--color-ink-strong), var(--shadow-lift); } .hm-ccard-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:.75rem } .hm-ccard-meta{ margin-top:1rem; display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; } .hm-ccard-cat{ font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--color-accent-strong); } .hm-ccard-year{ font-size:.75rem; color:var(--color-ink-muted) } .hm-ccard-title{ margin-top:.375rem; font-family:var(--font-display); font-size:1rem; font-weight:600; line-height:1.375; color:var(--color-ink-strong); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .hm-ccard-issuer{ margin-top:.25rem; font-size:.75rem; color:var(--color-ink-muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* ========================================================================== 页脚（浅色，3px accent 顶边） -------------------------------------------------------------------------- 参照站