）会贴在一起，标题像被正文咬住了。 */
h2 + .lede, h2 + .lead,
h3 + .lede, h3 + .lead { margin-top: 18px; }
.section--paper .lede { color: var(--text-soft); }
.muted { color: var(--muted); }
.serif { font-family: var(--cn); }
.mono { font-family: var(--en); letter-spacing: .04em; }
/* ---------------- 顶栏（内页与首页共用） ---------------- */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
/* 顶栏底色走 --header-bg：改造前这里写死 #15171a，换底色后顶栏还是石墨黑，
和整页的新底色对不上 —— 这就是「换了个颜色，其它板块不协调」最明显的一处。 */
background: linear-gradient(var(--header-bg), transparent);
padding: 6px 0;
transition: background .3s;
}
.site-header.scrolled {
background: var(--header-bg);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--line);
}
.site-header.menu-open { background: var(--header-bg); }
.nav { display: flex; align-items: center; height: 78px; }
.brand {
display: flex;
align-items: center;
gap: 14px;
margin-right: auto;
/* 顶栏是一行 flex，手机上搜索/汉堡/询盘一起抢宽度时会把品牌挤成两行
（「河南合信」变成「河南合 / 信」）。品牌是固定内容，不参与收缩。 */
flex-shrink: 0;
}
/* 品牌名两行：中文主标 + 英文副标。中文用真字体排版，缩到 40px 高也不会糊；
英文那行只作装饰，字号小、字距拉开，跟随中文块的宽度。 */
.brand-text { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; }
.brand-text b {
font-family: var(--cn);
font-weight: 700;
font-size: 17px;
line-height: 1;
letter-spacing: .14em;
white-space: nowrap;
color: var(--text-strong);
}
.brand-text i {
font-family: var(--en);
font-style: normal;
font-weight: 500;
font-size: 8px;
line-height: 1;
letter-spacing: .26em;
white-space: nowrap;
color: var(--text-soft);
opacity: .85;
}
/* logo 雾面底板：新标是红 + 黑两色，底板要比旧版的深灰更亮，
否则黑色斜块陷进底板里，只剩一道红。 */
.logo-chip {
background: linear-gradient(135deg, #f6f2ea, #ded7ca);
border: 1px solid #ffffff26;
border-radius: 8px;
padding: 3px;
display: flex;
box-shadow: 0 10px 28px #0008, inset 0 1px 0 #ffffff55;
}
.logo-chip img { width: 40px; height: 40px; object-fit: contain; }
.nav .item {
font-size: 14.5px;
color: var(--text);
opacity: .75;
margin-left: clamp(18px, 2.2vw, 34px);
letter-spacing: .12em;
white-space: nowrap;
transition: color .22s, opacity .22s;
}
.nav .item:hover,
.nav .item:focus-visible,
.nav .item.is-current { opacity: 1; color: var(--copper-hi); outline: none; }
.nav a.nav-cta {
margin-left: clamp(20px, 2.6vw, 40px);
color: var(--copper-hi);
border: 1px solid var(--copper);
padding: 10px 24px;
font-size: 14.5px;
letter-spacing: .14em;
white-space: nowrap;
transition: background .2s, color .2s;
}
.nav a.nav-cta:hover { background: var(--copper); color: var(--accent-ink); }
/* ---------------- 一级项外框 + 二级下拉 ----------------
后台「导航管理」里给一级项挂了二级项之后，模板会给它多包一层 .nav-item，
下拉面板是这一层的子元素 —— 所以鼠标从一级项移到面板上时，:hover 仍然挂在
同一个父节点上，不会「一挪鼠标菜单就没了」。
.nav-item 撑满整个导航条高度（78px），是为了让下拉面板紧贴顶栏下沿出现：
否则 top:100% 会落在文字底部，中间空出 20 多像素，鼠标穿过去时菜单就收起了。 */
.nav-item {
position: relative;
display: flex;
align-items: center;
height: 78px;
}
/* 下拉指示的小三角。用 border 画而不是字符：字符在不同系统里字重、居中都不一样 */
.nav-item__caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 7px;
border-left: 3.5px solid transparent;
border-right: 3.5px solid transparent;
border-top: 4px solid currentColor;
opacity: .55;
transition: transform .18s;
}
.nav-item--sub:hover .nav-item__caret,
.nav-item--sub:focus-within .nav-item__caret { transform: rotate(180deg); }
.nav-sub {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
min-width: 172px;
padding: 8px;
background: var(--panel);
border: 1px solid var(--line);
box-shadow: 0 22px 48px rgba(0, 0, 0, .5);
/* 用 visibility + opacity 而不是 display:none：display 切换会让面板里的链接
不可聚焦，键盘用户永远打不开二级菜单。 */
opacity: 0;
visibility: hidden;
translate: 0 -6px;
transition: opacity .16s ease, translate .16s ease, visibility .16s;
z-index: 55;
}
.nav-item--sub:hover .nav-sub,
.nav-item--sub:focus-within .nav-sub {
opacity: 1;
visibility: visible;
translate: 0 0;
}
.nav-sub__link {
display: block;
padding: 10px 14px;
font-size: 14px;
letter-spacing: .06em;
color: var(--text);
opacity: .82;
white-space: nowrap;
transition: color .16s, background .16s, opacity .16s;
}
.nav-sub__link:hover,
.nav-sub__link:focus-visible,
.nav-sub__link.is-current {
color: var(--copper-hi);
background: rgba(var(--copper-rgb), .1);
opacity: 1;
outline: none;
}
/* ---------------- 导航互动：提示动效 + 悬停放大 ----------------
开关落在 / 上（后台「外观与配色 → 导航互动」）。
关掉时这些选择器一条都命中不了，站点回到原来的静态导航 —— 不需要另写一份「关闭样式」，
也不会因为残留规则让导航抖一下。
三种提示都用「不占 transform 的属性」动：流光动 background-position、呼吸动 text-shadow、
跳动用 translate 而不是 transform。这样它们可以和悬停放大（transform: scale）叠加，
否则无限循环的动画会盖住 :hover 的 transform，鼠标放上去反而不放大。
本文件这份和 admin.css 的 .ap-navdemo 是同一套效果：后台样例框必须能就地预览，
但没法把整份 site.css 引进后台，所以两边各写一份，改动时请一起改。 */
html[data-nav-zoom]:not([data-nav-zoom="off"]) .nav .item,
html[data-nav-zoom]:not([data-nav-zoom="off"]) .nav a.nav-cta {
transition: color .22s, opacity .22s, transform .18s ease;
transform-origin: 50% 50%;
}
html[data-nav-zoom="soft"] .nav .item:hover,
html[data-nav-zoom="soft"] .nav .item:focus-visible { transform: scale(1.04); }
html[data-nav-zoom="standard"] .nav .item:hover,
html[data-nav-zoom="standard"] .nav .item:focus-visible { transform: scale(1.08); }
html[data-nav-zoom="strong"] .nav .item:hover,
html[data-nav-zoom="strong"] .nav .item:focus-visible { transform: scale(1.12); }
html[data-nav-zoom="soft"] .nav a.nav-cta:hover,
html[data-nav-zoom="soft"] .nav a.nav-cta:focus-visible { transform: scale(1.02); }
html[data-nav-zoom="standard"] .nav a.nav-cta:hover,
html[data-nav-zoom="standard"] .nav a.nav-cta:focus-visible { transform: scale(1.04); }
html[data-nav-zoom="strong"] .nav a.nav-cta:hover,
html[data-nav-zoom="strong"] .nav a.nav-cta:focus-visible { transform: scale(1.06); }
/* 系统开了「减少动态效果」的访客只看静态导航：提示是他自己关掉的，不是站点坏了 */
@media (prefers-reduced-motion: no-preference) {
/* 跑马灯 = 依次亮起：每一项轮到自己时亮一下（底色泛光 + 文字暖光），
再配上 0.18s 的错开，看上去就是一盏灯从「产品中心」跑到「询盘」。
不用滤镜、不用位移，所以既不影响排版，也能和悬停放大叠在一起。 */
html[data-nav-attn="sweep"] .nav .item {
border-radius: 3px;
animation: navSweep 3.6s ease-in-out infinite;
}
html[data-nav-attn="pulse"] .nav .item {
animation: navPulse 2.8s ease-in-out infinite;
}
html[data-nav-attn="bounce"] .nav .item {
animation: navBounce 2.4s ease-in-out infinite;
}
/* 依次错开 0.28s —— 必须比「每项亮起时长」更长，否则相邻两项会同时亮，
整排一起亮就变成块状高亮，不像跑马灯了。
一级项外面多了一层 .nav-item（为了挂下拉），所以延迟按 .nav 的直接子元素算，
再作用到里面的 .item 上；直接用 .item:nth-child 会永远命中第 1 个。 */
html[data-nav-attn]:not([data-nav-attn="off"]) .nav > :nth-child(2) .item { animation-delay: 0s; }
html[data-nav-attn]:not([data-nav-attn="off"]) .nav > :nth-child(3) .item { animation-delay: .28s; }
html[data-nav-attn]:not([data-nav-attn="off"]) .nav > :nth-child(4) .item { animation-delay: .56s; }
html[data-nav-attn]:not([data-nav-attn="off"]) .nav > :nth-child(5) .item { animation-delay: .84s; }
html[data-nav-attn]:not([data-nav-attn="off"]) .nav > :nth-child(6) .item { animation-delay: 1.12s; }
html[data-nav-attn]:not([data-nav-attn="off"]) .nav > :nth-child(7) .item { animation-delay: 1.4s; }
html[data-nav-attn]:not([data-nav-attn="off"]) .nav > :nth-child(8) .item { animation-delay: 1.68s; }
html[data-nav-attn]:not([data-nav-attn="off"]) .nav > :nth-child(9) .item { animation-delay: 1.96s; }
html[data-nav-attn]:not([data-nav-attn="off"]) .nav > :nth-child(10) .item { animation-delay: 2.24s; }
}
@keyframes navSweep {
/* 每项只亮 0.3 秒左右：亮得太久会和下一项叠在一起，看上去就是「整排一起亮」，
那已经不是跑马灯了。峰值在 8%，14% 收回。 */
0%, 3% { background-color: transparent; text-shadow: none; }
8% { background-color: rgba(var(--copper-rgb), .24); text-shadow: 0 0 11px rgba(var(--copper-rgb), .5); }
14%, 100% { background-color: transparent; text-shadow: none; }
}
@keyframes navPulse {
0%, 100% { text-shadow: 0 0 0 rgba(var(--copper-rgb), 0); }
50% { text-shadow: 0 0 13px rgba(var(--copper-rgb), .55); }
}
@keyframes navBounce {
0%, 100% { translate: 0 0; }
50% { translate: 0 -3px; }
}
/* 移动端汉堡菜单（默认隐藏，仅小屏显示） */
.nav-toggle {
display: none;
margin-left: auto;
background: none;
border: 1px solid var(--line);
color: var(--text);
width: 44px;
min-width: 44px;
height: 44px;
/* 顶栏是 flex 行：logo + 询盘按钮挤在一起时，汉堡会被压缩到 41px，
正好掉出 44×44 的触控标准。这里禁止它收缩。 */
flex: 0 0 44px;
font-size: 20px;
cursor: pointer;
}
.mobile-menu { display: none; }
.menu-open .mobile-menu {
display: block;
max-height: calc(100svh - 90px);
overflow-y: auto;
border-top: 1px solid var(--line);
background: var(--header-bg);
}
.mobile-menu a {
display: block;
padding: 16px var(--pad-x);
border-bottom: 1px solid var(--line);
font-size: 16px;
color: var(--text);
}
.mobile-menu a.is-current { color: var(--copper-hi); }
/* 手机菜单里的二级项：缩进 + 压暗，不折叠（触屏上多一层交互只会让人找不到） */
.mobile-menu .mobile-menu__sub {
padding-left: calc(var(--pad-x) + 26px);
font-size: 15px;
color: var(--body-ink);
}
.mobile-menu .mobile-menu__sub span { color: var(--muted); margin-right: 2px; }
/* ---------------- 序章：全幅影像 + 暗角 + 缓慢推移 ---------------- */
.prologue {
position: relative;
min-height: 100vh;
display: flex;
align-items: flex-end;
overflow: hidden;
background: #000;
}
.prologue__bg {
position: absolute;
inset: -4%;
/* 背景图可在后台「外观与配色」一键更换：换图通过 --hero-image 变量注入（ThemeService），
未配置时回落到默认的井下影像。变量没有写进 :root 默认值，是为了让没换过图的老站
渲染结果与改造前一个像素都不差。 */
background: var(--hero-image, url("../assets/hero-miner.jpg")) center 40% / cover no-repeat;
filter: brightness(.82) contrast(1.04);
animation: kenburns 30s ease-in-out infinite alternate;
will-change: transform;
}
.prologue::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background:
radial-gradient(110% 80% at 50% 45%, transparent 30%, rgba(var(--ink-rgb), .53) 80%, var(--ink) 100%),
linear-gradient(180deg, rgba(var(--ink-rgb), .33), transparent 30%, rgba(var(--ink-rgb), .93) 92%);
}
.prologue__inner {
position: relative;
z-index: 2;
width: 100%;
padding-bottom: 96px;
text-align: left;
}
.prologue__line1 {
font-size: clamp(15px, 1.3vw, 19px);
color: var(--text-soft);
letter-spacing: .32em;
margin-bottom: 26px;
}
.prologue h1 {
margin: 0 0 4px;
color: var(--text-strong);
text-wrap: balance;
/* 限制版宽让标题在逗号处断成两行，与叙事节奏一致 */
max-width: 15em;
}
.prologue__line3 {
margin-top: 30px;
font-family: var(--en);
font-size: 13px;
letter-spacing: .42em;
color: var(--copper-hi);
text-transform: uppercase;
margin-bottom: 0;
}
.scroll-cue {
position: absolute;
left: 50%;
bottom: 28px;
transform: translateX(-50%);
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
font-family: var(--en);
font-size: 10px;
letter-spacing: .28em;
color: var(--credit);
text-transform: uppercase;
}
.scroll-cue i {
display: block;
width: 1px;
height: 44px;
background: linear-gradient(var(--copper), transparent);
animation: cue 2.2s ease-in-out infinite;
}
/* ---------------- 幕间：两行字，缓慢浮起 ---------------- */
.interlude {
padding: clamp(84px, 13vh, 152px) 0;
background: var(--ink);
border-bottom: 1px solid var(--line);
}
.interlude__inner { max-width: 860px; }
.interlude__mark {
display: block;
width: 42px;
height: 1px;
background: var(--copper);
margin-bottom: 34px;
}
.interlude__text {
font-size: clamp(21px, 2.35vw, 34px);
line-height: 1.68;
color: var(--text-strong);
letter-spacing: .03em;
margin: 0;
}
.interlude__text b { color: var(--copper-hi); font-weight: 700; }
.type-line { display: block; }
.type-line + .type-line { margin-top: .18em; }
/* ---------------- 章节节奏 ---------------- */
.section {
padding: clamp(72px, 11vh, 132px) 0;
position: relative;
border-bottom: 1px solid var(--line);
}
.section--paper { background: var(--steel); color: var(--text); }
.section--paper .kicker { color: var(--copper-hi); }
.section--tight { padding: clamp(48px, 7vh, 78px) 0; }
.split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(28px, 5vw, 72px);
align-items: start;
}
.split--center { align-items: center; }
.section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.section-head h2 { font-size: clamp(26px, 2.8vw, 40px); }
.link-more {
font-family: var(--en);
font-size: 12px;
letter-spacing: .14em;
color: var(--copper-hi);
white-space: nowrap;
border-bottom: 1px solid rgba(var(--copper-hi-rgb), .35);
padding-bottom: 3px;
}
.link-more:hover { color: var(--accent-hover); border-bottom-color: var(--copper-hi); }
/* 文末 CTA 带：读完内容的落点。左侧文案、右侧按钮，窄屏自动上下排。 */
.cta-band {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 48px);
border: 1px solid var(--line);
border-left: 3px solid var(--copper);
background: linear-gradient(180deg, var(--grad-a), var(--grad-b));
}
.cta-band__text { flex: 1 1 340px; min-width: 0; }
.cta-band__kicker {
font-family: var(--en);
font-size: 11px;
letter-spacing: .2em;
color: var(--copper-hi);
margin-bottom: 10px;
}
.cta-band__title { font-size: clamp(20px, 2.4vw, 28px); margin-bottom: 10px; }
.cta-band__lead { color: var(--muted); font-size: 14px; line-height: 1.8; margin: 0; }
.cta-band__actions { display: flex; gap: 12px; flex-wrap: wrap; }
/* ---------------- 第一章：漏液证据墙 ---------------- */
.leak-wall {
margin: 0;
display: grid;
grid-template-columns: 1.15fr .85fr;
grid-template-rows: auto auto;
gap: 10px;
min-width: 0;
}
.leak-wall__main { grid-row: span 2; }
.leak-wall__stack { display: grid; gap: 10px; min-width: 0; }
.leak-tile {
position: relative;
overflow: hidden;
background: var(--deep);
border: 1px solid rgba(255, 255, 255, .08);
margin: 0;
min-height: 0;
}
.leak-tile::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 42%;
background: linear-gradient(transparent, rgba(var(--deep-rgb), .88));
z-index: 1;
pointer-events: none;
}
.leak-tile img,
.leak-tile video {
width: 100%;
height: 100%;
min-height: 180px;
object-fit: cover;
object-position: center;
filter: brightness(.82) contrast(1.08) saturate(.82) sepia(.08);
}
.leak-wall__main img { object-position: center 54%; min-height: 420px; }
.leak-tile--video img,
.leak-tile--video video {
object-position: center 38%;
filter: sepia(.12) saturate(1.02) hue-rotate(-8deg) brightness(.9) contrast(1.12);
}
.leak-tile--video {
border-color: rgba(var(--copper-rgb), .41);
box-shadow: inset 0 0 0 1px rgba(var(--copper-rgb), .16), 0 28px 80px -52px var(--copper-hi);
}
.leak-label {
position: absolute;
left: 12px;
bottom: 12px;
z-index: 2;
font-family: var(--en);
font-size: 10.5px;
letter-spacing: .16em;
color: var(--text-mid);
text-transform: uppercase;
}
.leak-tile--video .leak-label {
top: 10px;
bottom: auto;
left: 10px;
padding: 5px 8px;
background: rgba(var(--ink-rgb), .85);
border-left: 2px solid var(--copper);
color: var(--copper-hi);
letter-spacing: .18em;
}
.entry-list {
display: grid;
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
margin-top: 8px;
}
.entry {
background: var(--ink);
padding: 22px 24px;
display: grid;
grid-template-columns: 44px 1fr;
gap: 16px;
align-items: start;
}
.entry__no { font-family: var(--en); font-size: 12px; color: var(--copper); padding-top: 4px; letter-spacing: .1em; }
.entry h4 { font-size: 17px; margin-bottom: 4px; color: var(--text-strong); }
.entry p { margin: 0; font-size: 13.5px; color: var(--muted); }
.section--paper .entry-list { background: var(--line); border-color: var(--line); }
.section--paper .entry { background: var(--steel); }
.section--paper .entry p { color: var(--muted); }
.stat-big {
font-family: var(--disp);
font-weight: 600;
font-size: clamp(64px, 10vw, 140px);
line-height: .9;
color: var(--copper-hi);
letter-spacing: -.01em;
}
.stat-big small {
font-size: .18em;
letter-spacing: .16em;
color: var(--muted);
font-family: var(--cn);
margin-left: 12px;
vertical-align: middle;
}
.bronze-panel {
border: 1px solid var(--line);
background:
linear-gradient(135deg, rgba(var(--copper-rgb), .14), rgba(var(--ink-rgb), .25)),
repeating-linear-gradient(115deg, rgba(230, 201, 164, .045) 0 2px, transparent 2px 9px);
padding: clamp(26px, 4vw, 44px);
}
.bronze-panel__text { margin: 18px 0 0; font-size: 16px; line-height: 1.85; color: var(--text-soft); }
/* ---------------- 第二章：剑 ---------------- */
.ph-frame {
position: relative;
margin: 0;
border: 1px solid var(--line);
background: var(--deep);
overflow: hidden;
}
/* 配图位放图也放视频：同一套尺寸，换的是内容不是版式。 */
.ph-frame img,
.ph-frame video {
width: 100%;
height: min(42vh, 420px);
object-fit: cover;
object-position: center;
box-shadow: 0 40px 100px -30px #000;
}
.ph-frame__cap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: linear-gradient(90deg, var(--ink), rgba(var(--ink-rgb), .55));
padding: 12px 18px;
font-family: var(--en);
font-size: 11.5px;
letter-spacing: .16em;
color: var(--chrome);
border-top: 1px solid var(--line);
}
.ph-frame__cap em { font-style: normal; color: var(--copper-hi); }
.band {
margin-top: clamp(20px, 3.6vh, 40px);
width: 100%;
height: min(24vh, 200px);
object-fit: cover;
object-position: center;
background: var(--deep);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--copper);
filter: brightness(.9) contrast(1.03);
}
/* ---------------- 第三章：整幅视频带 ---------------- */
.craft-video {
position: relative;
min-height: 92vh;
display: flex;
align-items: flex-end;
overflow: hidden;
padding: 0;
background: var(--steel);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
/* 背景图是老站的实拍图放大后铺满整幅，原图只有 800–900px 宽，
直接铺会糊，而且图上常带电话号码与标语水印。
轻模糊 + 压暗之后它退成质感底纹，文字信息交给前面的标题与正文。 */
.craft-video__media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.04);
filter: blur(6px) sepia(.1) saturate(.9) hue-rotate(-8deg) brightness(.55) contrast(1.06);
}
.craft-video::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(var(--ink-rgb), .85) 0%, rgba(var(--ink-rgb), .56) 42%, rgba(var(--ink-rgb), .1) 72%, rgba(var(--ink-rgb), .76) 100%),
linear-gradient(180deg, rgba(var(--ink-rgb), .44) 0%, transparent 42%, rgba(var(--ink-rgb), .8) 92%);
pointer-events: none;
}
.craft-video__inner {
position: relative;
z-index: 2;
width: 100%;
padding-top: 150px;
padding-bottom: 92px;
}
.craft-video__panel {
max-width: 820px;
margin-top: 44px;
background: rgba(var(--ink-rgb), .66);
border: 1px solid rgba(255, 255, 255, .09);
padding: 4px 26px;
backdrop-filter: blur(2px);
}
.craft-video h2 { color: var(--text-strong); }
/* ---------------- 第四章：八道工序 ---------------- */
.tech-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
margin-top: 38px;
}
.tech-card {
border: 1px solid var(--line);
padding: 26px 24px;
background: linear-gradient(180deg, rgba(var(--steel-rgb), .72), rgba(var(--ink-rgb), .42));
}
.tech-card__metric {
font-family: var(--disp);
font-weight: 600;
font-size: 34px;
line-height: 1.1;
color: var(--copper-hi);
letter-spacing: .01em;
}
.tech-card__metric small {
font-size: 12px;
color: var(--muted);
margin-left: 6px;
letter-spacing: .1em;
font-family: var(--en);
}
.tech-card h4 { margin: 12px 0 8px; font-size: 18px; color: var(--text-strong); }
.tech-card p { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.8; }
.process {
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
margin-top: 40px;
counter-reset: step;
}
.process__item { background: var(--ink); padding: 20px 16px; position: relative; }
.process__item::before {
counter-increment: step;
content: "0" counter(step);
font-family: var(--en);
font-size: 10px;
color: var(--copper);
letter-spacing: .1em;
display: block;
margin-bottom: 10px;
}
.process__item b { display: block; font-size: 14px; font-weight: 500; letter-spacing: .04em; color: var(--text-strong); }
.process__item span { display: block; margin-top: 8px; font-size: 11px; color: var(--muted); }
.trace-note { font-size: 11px; letter-spacing: .18em; color: var(--credit); margin-top: 18px; text-transform: uppercase; }
/* ---------------- 第五章：案例证据卡 ---------------- */
.case-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
margin-top: 44px;
}
.case-card {
border: 1px solid var(--line);
background: var(--steel);
display: flex;
flex-direction: column;
overflow: hidden;
transition: border-color .25s ease, transform .25s ease;
}
.case-card:hover { border-color: rgba(var(--copper-rgb), .55); transform: translateY(-3px); }
.case-card__media {
aspect-ratio: 4 / 3;
overflow: hidden;
border-bottom: 1px solid var(--line);
background: var(--media);
}
.case-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(.88) contrast(1.04) saturate(.92);
transition: transform .6s cubic-bezier(.22, .61, .36, 1), filter .4s ease;
}
.case-card:hover .case-card__media img { transform: scale(1.04); filter: brightness(.95) contrast(1.04) saturate(1); }
.case-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.case-card__years {
font-family: var(--disp);
font-weight: 600;
font-size: clamp(40px, 4.4vw, 58px);
line-height: .95;
color: var(--copper-hi);
letter-spacing: .01em;
}
/* 案例卡的字号跟上「同类同号」：卡片标题 20px、摘要 14px、元信息 12px。
这几条原来分别是 18 / 13.2 / 11.5，案例为空时没人发现，填上内容才和新闻列表差一档。 */
.case-card h4 { font-size: var(--fs-card-title); margin: 16px 0 10px; line-height: 1.45; color: var(--text-strong); }
.case-card p { font-size: var(--fs-card-text); color: var(--muted); margin-bottom: 18px; line-height: 1.7; }
.case-card__link {
margin-top: auto;
font-family: var(--en);
font-size: var(--fs-meta);
letter-spacing: .12em;
color: var(--copper-hi);
text-transform: uppercase;
}
/* ---------------- 第六章：成本对照 ---------------- */
.compare-table { width: 100%; border-collapse: collapse; margin-top: 40px; font-size: 14px; }
.compare-table th, .compare-table td {
text-align: left;
padding: 18px 16px;
border-bottom: 1px solid var(--line);
vertical-align: top;
}
.compare-table thead th {
font-family: var(--en);
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--muted);
font-weight: 400;
}
.compare-table td:first-child { color: var(--muted); width: 26%; }
.compare-table .is-good { color: var(--copper-hi); font-weight: 600; }
.compare-table tbody tr:last-child td { border-bottom: none; }
/* ---------------- 产品 ---------------- */
.product-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
margin-top: 40px;
}
.product-card {
border: 1px solid var(--line);
padding: 28px 26px;
background: var(--steel);
display: flex;
flex-direction: column;
min-height: 240px;
transition: border-color .22s ease, background .22s ease;
}
.product-card:hover { border-color: rgba(var(--copper-rgb), .55); background: var(--hover-bg); }
.product-card__cat { font-family: var(--en); font-size: var(--fs-meta); letter-spacing: .2em; color: var(--copper); text-transform: uppercase; }
.product-card h4 { font-size: var(--fs-card-title); margin: 14px 0 10px; color: var(--text-strong); }
.product-card p { font-size: var(--fs-card-text); color: var(--muted); margin-bottom: 20px; line-height: 1.75; }
.product-card__model { margin-top: auto; font-family: var(--en); font-size: var(--fs-meta); color: var(--muted); letter-spacing: .1em; }
.product-card__img { margin: -6px 0 18px; border: 1px solid var(--line); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.chip {
padding: 8px 16px;
border: 1px solid var(--line);
font-size: var(--fs-chip);
color: var(--text-quiet);
transition: all .18s ease;
}
.chip:hover { border-color: var(--copper); color: var(--copper-hi); }
.chip.is-active { background: var(--copper); color: var(--accent-ink); border-color: var(--copper); }
/* 产品分类筛选条：数字用等宽字体右对齐，切换分类时宽度不会跳 */
.chip { display: inline-flex; align-items: baseline; gap: 7px; }
.chip__label { white-space: nowrap; }
.chip__n { font-family: var(--en); font-size: var(--fs-meta); letter-spacing: .06em; opacity: .6; }
.chip.is-active .chip__n { opacity: .78; }
.chip--empty { opacity: .36; cursor: not-allowed; }
.chip--empty:hover { border-color: var(--line); color: var(--text-quiet); }
.chips--filter { margin-top: 0; margin-bottom: 34px; }
/* ---------------- 资质：横向跑马灯 ---------------- */
.qual-track-wrap {
position: relative;
margin-top: 40px;
overflow: hidden;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 22px 0;
}
.qual-track-wrap::before,
.qual-track-wrap::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 90px;
z-index: 2;
pointer-events: none;
}
.qual-track-wrap::before { left: 0; background: linear-gradient(90deg, var(--ink), transparent); }
.qual-track-wrap::after { right: 0; background: linear-gradient(270deg, var(--ink), transparent); }
.section--paper .qual-track-wrap::before { background: linear-gradient(90deg, var(--steel), transparent); }
.section--paper .qual-track-wrap::after { background: linear-gradient(270deg, var(--steel), transparent); }
.qual-track {
display: flex;
gap: 16px;
width: max-content;
animation: qualMove 64s linear infinite;
}
.qual-track-wrap:hover .qual-track { animation-play-state: paused; }
.qual-item {
width: 176px;
height: 118px;
flex: none;
object-fit: contain;
background: var(--qual);
padding: 5px;
border: 1px solid rgba(255, 255, 255, .14);
filter: brightness(.94) saturate(.9);
box-shadow: 0 18px 40px -30px #000;
margin: 0;
}
/* 兜底：无扫描件时以文字牌展示 */
.qual-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
.qual {
border: 1px solid var(--line);
padding: 22px 18px;
min-height: 122px;
display: flex;
flex-direction: column;
justify-content: space-between;
background: rgba(255, 255, 255, .03);
}
.qual__mark { font-family: var(--en); font-size: 10px; letter-spacing: .18em; color: var(--copper); }
.qual__title { font-size: 13.5px; line-height: 1.6; color: var(--text-mid); }
.qual img { max-height: 84px; object-fit: contain; margin-bottom: 10px; }
.qual-note { font-size: 12.5px; max-width: 30ch; margin: 0; }
/* ---------------- 收尾影像带 ---------------- */
.coda {
position: relative;
overflow: hidden;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: var(--steel);
min-height: 86vh;
display: flex;
align-items: flex-end;
padding: 0;
}
.coda__media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.03);
filter: blur(2.5px) brightness(.38) saturate(.86) contrast(1.04);
}
.coda::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(var(--ink-rgb), .95) 0%, rgba(var(--ink-rgb), .72) 45%, rgba(var(--ink-rgb), .5) 100%),
linear-gradient(180deg, rgba(var(--ink-rgb), .53) 0%, transparent 42%, rgba(var(--ink-rgb), .94) 100%);
pointer-events: none;
}
.coda__inner { position: relative; z-index: 2; width: 100%; padding-top: var(--sp-16); padding-bottom: 90px; }
/* ---------------- CTA ---------------- */
.cta-band {
background: linear-gradient(120deg, var(--warm-top), var(--ink) 62%);
border-top: 1px solid var(--line);
}
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta-band h2 { font-size: clamp(24px, 3vw, 36px); margin-bottom: 10px; }
.cta-band p { margin: 0; }
/* ---------------- 按钮 ---------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 15px 28px;
font-size: 14px;
letter-spacing: .07em;
border: 1px solid transparent;
cursor: pointer;
transition: all .2s ease;
font-family: var(--cn);
}
.btn--primary { background: var(--copper); color: var(--accent-ink); border-color: var(--copper); }
.btn--primary:hover { background: var(--copper-hi); border-color: var(--copper-hi); }
.btn--ghost { border-color: rgba(230, 225, 218, .26); color: var(--text); }
.btn--ghost:hover { border-color: var(--copper); color: var(--copper-hi); }
.btn--block { width: 100%; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero__meta {
border-top: 1px solid var(--line);
padding-top: 22px;
display: flex;
gap: 34px;
flex-wrap: wrap;
margin-top: 44px;
}
.hero__meta div { min-width: 92px; }
.hero__meta b { display: block; font-family: var(--disp); font-weight: 600; font-size: 22px; color: var(--text-strong); letter-spacing: .02em; }
.hero__meta span { font-size: 12px; color: var(--muted); letter-spacing: .08em; }
.hero__note { font-family: var(--en); font-size: 11px; color: var(--credit); letter-spacing: .14em; margin-top: 26px; }
/* 兼容：内页若延用 hero 结构 */
.hero {
position: relative;
overflow: hidden;
padding: clamp(64px, 11vw, 140px) 0 clamp(40px, 6vw, 72px);
background:
radial-gradient(1200px 520px at 78% 8%, rgba(var(--copper-rgb), .16), transparent 62%),
radial-gradient(760px 420px at 12% 88%, rgba(120, 130, 122, .12), transparent 65%),
linear-gradient(180deg, var(--ink) 0%, var(--grad-a) 100%);
border-bottom: 1px solid var(--line);
}
.hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
gap: clamp(32px, 5vw, 72px);
align-items: end;
}
.hero h1 { font-size: clamp(38px, 5.2vw, 76px); line-height: 1.22; margin: 0 0 26px; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--copper-hi); }
.hero__lead { font-size: clamp(16px, 1.4vw, 19px); color: var(--text-soft); max-width: 40ch; margin-bottom: 34px; }
/* 腐蚀入口示意（纯 CSS 图形） */
.probe {
border: 1px solid var(--line);
background: linear-gradient(160deg, rgba(var(--steel-rgb), .92), rgba(var(--ink-rgb), .92));
padding: 26px;
}
.probe__title { font-family: var(--en); font-size: 10.5px; letter-spacing: .24em; color: var(--muted); margin-bottom: 18px; text-transform: uppercase; }
.probe__bar { position: relative; height: 128px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 64px 64px 4px 4px; overflow: hidden; }
.probe__wall { position: absolute; inset: 0; background: linear-gradient(90deg, var(--panel) 0 14%, var(--wall-b) 14% 20%, var(--steel) 20% 80%, var(--wall-b) 80% 86%, var(--panel) 86% 100%); }
.probe__water { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(180deg, rgba(120, 160, 150, .2), rgba(60, 90, 84, .3)); }
.probe__point { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--copper-hi); box-shadow: 0 0 0 4px rgba(var(--copper-hi-rgb), .16), 0 0 18px rgba(var(--copper-hi-rgb), .5); }
.probe__point--a { top: 26%; left: 15%; }
.probe__point--b { top: 54%; left: 17%; }
.probe__point--c { top: 74%; right: 15%; }
.probe__legend { display: flex; justify-content: space-between; margin-top: 14px; font-size: 11px; color: var(--muted); letter-spacing: .06em; }
.probe__value { margin-top: 18px; display: flex; align-items: baseline; gap: 10px; }
.probe__value b { font-family: var(--disp); font-weight: 600; font-size: 32px; color: var(--copper-hi); }
.probe__value span { font-size: 12px; color: var(--muted); letter-spacing: .06em; }
/* ---------------- 页脚 ---------------- */
.site-footer { border-top: 1px solid var(--line); padding: 64px 0 48px; background: var(--footer-bg); }
.f-row { display: flex; flex-wrap: wrap; gap: 28px 64px; align-items: baseline; }
.f-row .ci { font-size: 15px; color: var(--text-mid); }
.f-row .ci b { font-family: var(--en); color: var(--text-strong); font-weight: 500; letter-spacing: .04em; }
.f-row .ci b a { color: inherit; border-bottom: 1px solid transparent; transition: border-color .2s, color .2s; }
.f-row .ci b a:hover { color: var(--copper-hi); border-bottom-color: var(--copper); }
.f-row .ci span { color: var(--muted); font-size: 12.5px; letter-spacing: .2em; margin-right: 10px; }
/* 接听电话的经理：跟在号码后面单独一档，不写成「177 0383 0783（郭经理）」——
那串在手机底栏只有半个屏宽，折成两行会把固定条顶高。 */
.f-row .ci .f-who {
font-style: normal;
font-size: 12.5px;
letter-spacing: .08em;
color: var(--muted);
margin-left: 8px;
}
/* 页脚「手机」一栏：四位接听经理。
默认是一个单行窗口，号码在里面轮流出现（脚本见 site.js）；
点「全部 4 位」展开成名单，四条都是可拨的 tel:。
所有号码同时占同一个 grid 单元：窗口宽度等于最长那一行，
轮播时不会因为「郭经理」比「宋经理」宽就把后面的字挤来挤去。 */
.f-row .ci--phones { min-width: 0; }
.phones {
display: inline-grid;
grid-template-columns: max-content max-content;
align-items: start;
gap: 2px 14px;
}
.phones__stage { grid-column: 1; display: grid; min-width: 0; }
.phones__line {
grid-area: 1 / 1;
display: inline-flex;
align-items: baseline;
gap: 8px;
opacity: 0;
transform: translateY(.5em);
transition: opacity .4s ease, transform .4s ease;
pointer-events: none;
}
.phones__line.is-live { opacity: 1; transform: none; pointer-events: auto; }
.phones__line .phones__num {
border-bottom: 1px solid transparent;
transition: color .2s, border-color .2s;
/* 四位经理的号码都是 3-4-4。Saira 没有等宽数字（tnum 无效），
「177」比「181」窄几个像素，右面的姓名就一行一个位置。
给号码定一个够放下最长一串的宽度，四行姓名才会齐头。 */
min-width: 7.8em;
font-variant-numeric: tabular-nums;
}
.phones__line:hover .phones__num { color: var(--copper-hi); border-bottom-color: var(--copper); }
.phones__who {
font-style: normal;
font-size: 12.5px;
letter-spacing: .08em;
color: var(--muted);
}
.phones__toggle {
grid-column: 2;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 9px;
border: 1px solid rgba(var(--copper-rgb), .28);
border-radius: 999px;
background: rgba(var(--copper-rgb), .07);
color: var(--copper-hi);
font: inherit;
font-size: 11.5px;
letter-spacing: .06em;
line-height: 1.6;
cursor: pointer;
transition: background .2s, border-color .2s;
}
/* 通用规则 .f-row .ci span 会把字号压到 12.5px、给每个 span 加右外边距，
按钮里的这一段要按自己的规格来，不然「全部 4 位」会被拆得松松垮垮。 */
.f-row .ci .phones__toggle span { margin: 0; font-size: inherit; letter-spacing: inherit; color: inherit; }
.phones__toggle:hover { background: rgba(var(--copper-rgb), .16); border-color: rgba(var(--copper-rgb), .5); }
.phones__caret {
width: 0;
height: 0;
border-left: 3.5px solid transparent;
border-right: 3.5px solid transparent;
border-top: 4px solid currentColor;
transition: transform .2s;
}
/* 展开：窗口变成纵向名单。名单里四行都在同一列，
与收起状态的宽度对齐，视觉上只是「长高」不是「弹出一个浮层」。 */
.phones.is-open .phones__stage { display: block; }
.phones.is-open .phones__line {
display: flex;
grid-area: auto;
opacity: 1;
transform: none;
pointer-events: auto;
padding: 3px 0;
}
.phones.is-open .phones__line + .phones__line { border-top: 1px solid var(--line); }
.phones.is-open .phones__caret { transform: rotate(180deg); }
/* 没有 JS：轮播不会跑，按钮也点不动 —— 直接把四条平铺出来，
比留一个「全部 4 位」的假按钮诚实。 */
html:not(.js) .phones { display: block; }
html:not(.js) .phones__stage { display: block; }
html:not(.js) .phones__line {
display: flex;
grid-area: auto;
opacity: 1;
transform: none;
pointer-events: auto;
padding: 3px 0;
}
html:not(.js) .phones__line + .phones__line { border-top: 1px solid var(--line); }
html:not(.js) .phones__toggle { display: none; }
@media (prefers-reduced-motion: reduce) {
.phones__line { transition: none; transform: none; }
}
.legal {
margin-top: 44px;
padding-top: 24px;
border-top: 1px solid var(--line);
display: flex;
justify-content: space-between;
color: var(--credit);
font-size: 13px;
flex-wrap: wrap;
gap: 10px;
}
.legal-links { display: flex; gap: 18px; }
.legal-links a { color: var(--credit); transition: color .2s; }
.legal-links a:hover { color: var(--copper-hi); }
/* 页脚「来源」行：当前页面完整网址，供搜索引擎识别内容出处 */
.source {
margin-top: 14px;
font-size: 12px;
color: var(--credit);
word-break: break-all;
}
.source a { color: inherit; text-decoration: none; }
.source a:hover { color: var(--copper-hi); }
/* 移动端底部双按钮条（询盘 / 电话）：桌面隐藏，窄屏才出现 */
.mobile-bar { display: none; }
/* 错误页底部的「常见去处」：一排小链接，把迷路的人分流到四个主干入口 */
.err-links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 18px;
margin-top: 34px;
font-size: 13px;
color: var(--muted);
}
.err-links span {
font-family: var(--en);
font-size: 10px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--copper-hi);
}
.err-links a { color: var(--text-mid); border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.err-links a:hover { color: var(--copper-hi); border-bottom-color: var(--copper-hi); }
/* ---------------- 面包屑 ---------------- */
.crumbs {
/* 顶栏是 position:fixed，面包屑又是页面第一个元素 —— 不给够上边距就会被压在
导航底下（实测顶栏桌面 90px、手机 78px）。--header-h 由 site.js 实测写入，
取不到时退回 96px，保证「至少不重叠」。 */
padding-top: var(--header-h, 96px);
border-bottom: 1px solid var(--line);
background: var(--ink);
}
.crumbs__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
list-style: none;
margin: 0;
padding: 14px 0;
font-family: var(--en);
font-size: 11px;
letter-spacing: .16em;
color: var(--muted);
text-transform: uppercase;
}
.crumbs__item { display: flex; align-items: center; gap: 8px; }
/* 分隔符用 li 的伪元素，比在 HTML 里插 "›" 更省事，也不会被读屏念出来 */
.crumbs__item + .crumbs__item::before {
content: "›";
color: #6f6a63;
letter-spacing: 0;
}
.crumbs__item a { color: var(--muted); transition: color .2s; }
.crumbs__item a:hover { color: var(--copper-hi); }
.crumbs__item span { color: var(--text-mid); }
/* 面包屑已经替下面的页头顶掉了「固定导航的空白」，
页头再留一次 clamp(56px,…,104px) 就会变成一大片空地。
紧跟面包屑时把上边距收回来，只留呼吸感。 */
.crumbs + .page-hero,
.crumbs + .page-head {
padding-top: clamp(30px, 3.6vw, 52px);
}
/* 长标题（案例名常常十几个字）在窄屏上截断，别让它把面包屑挤成三行 */
.crumbs__item:last-child span {
max-width: 46vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ---------------- 内页 ---------------- */
.page-head {
padding: clamp(56px, 8vw, 104px) 0 clamp(36px, 4.6vw, 58px);
border-bottom: 1px solid var(--line);
background: linear-gradient(180deg, var(--grad-a), var(--ink));
}
/* 两套页头的主标题同一号：以前 .page-head 是 52px、.page-hero 落到基础 h1 的 66px，
新闻页与产品页并排看就是「一个内页、一个落地页」。 */
.page-head h1,
.page-hero h1 {
font-size: var(--fs-page-title);
line-height: 1.32;
letter-spacing: .035em;
margin-bottom: 18px;
}
.page-head .lede { margin-bottom: 0; }
.article { max-width: 760px; margin: 0 auto; }
/* 产品详情页没有参数表时，正文落在图右侧的窄栏里：不居中、也不受 760px 限制，
否则窄栏里再套一个 max-width 居中的块，左右留白会忽宽忽窄。 */
.article--compact { max-width: none; margin: 0; }
.article--compact > :first-child { margin-top: 0; }
/* 参数表下方的询价按钮：紧跟参数，不再让访客滚到页底 */
.param-cta {
margin-top: 30px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 16px;
}
.param-cta__hint { font-size: 13px; color: var(--muted); line-height: 1.7; }
.article h2 { font-size: clamp(22px, 2.4vw, 30px); margin: 44px 0 16px; }
.article h3 { font-size: 20px; margin: 32px 0 12px; }
.article p { font-size: 16px; line-height: 1.95; color: var(--body-ink); }
.section--paper .article p { color: var(--body-ink); }
.article ul, .article ol { padding-left: 22px; margin: 0 0 1.2em; }
.article li { font-size: 16px; line-height: 1.9; color: var(--body-ink); margin-bottom: 6px; }
.article blockquote {
margin: 28px 0;
padding: 22px 26px;
border-left: 2px solid var(--copper);
background: rgba(var(--copper-rgb), .07);
}
.article blockquote p { margin: 0; font-size: 18px; color: var(--copper-soft); }
.article code { font-family: var(--en); font-size: .9em; background: rgba(230, 225, 218, .08); padding: 2px 6px; }
.article a { color: var(--copper-hi); border-bottom: 1px solid rgba(var(--copper-hi-rgb), .4); }
.article__lead {
font-size: var(--fs-lead);
line-height: 1.9;
color: var(--copper-soft);
padding-bottom: 22px;
border-bottom: 1px solid var(--line);
margin-bottom: 30px;
}
.article__cover { margin: 0 0 32px; border: 1px solid var(--line); }
.article--case { max-width: 760px; }
/* 案例全部下架时的兜底：一片空白比一句话更让人以为是坏了 */
.case-empty {
margin-top: 40px;
padding: 40px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
color: var(--text-quiet);
font-size: 14px;
line-height: 1.9;
}
.case-empty a { color: var(--copper-hi); border-bottom: 1px solid rgba(var(--copper-hi-rgb), .4); }
/* 案例网格下面那句脱敏说明，和网格之间留一口气 */
.case-grid + .source-note { margin-top: 30px; }
/* 详情页「其他案例」固定取两条：铺成两列，别在三列网格里空出第三个格子。
用双类提高权重，免得被后面的 .case-grid 三列规则按顺序盖掉。 */
.case-grid.case-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) {
.case-grid.case-grid--two { grid-template-columns: 1fr; }
}
/* ---------------- 富文本编排块（后台编辑器模板的输出样式） ----------------
这些 class 由后台模板与工具栏产生，也是 HtmlSanitizer 的白名单来源。
格式一律用 class 表达（颜色 rt-c-*、字号 rt-s-*）：站点 CSP 不允许行内 style，
写 style 属性在浏览器里会被直接拦掉，看上去「设置了但没生效」。
选择器前面补一层 .article 是为了压过 .article p 的字号规则。 */
.rt-c-copper, .article .rt-c-copper { color: var(--copper-hi); }
.rt-c-white, .article .rt-c-white { color: var(--text); }
.rt-c-muted, .article .rt-c-muted { color: var(--muted); }
.rt-c-amber, .article .rt-c-amber { color: #e0b062; }
.rt-c-teal, .article .rt-c-teal { color: #8fd3c4; }
.rt-c-red, .article .rt-c-red { color: #e08a76; }
.rt-c-dim, .article .rt-c-dim { color: var(--steel-dim); }
.rt-hl, .article .rt-hl {
background: rgba(var(--copper-rgb), .22);
color: var(--accent-hl);
padding: 0 3px;
border-radius: 2px;
}
.rt-s-sm, .article .rt-s-sm { font-size: 14px; }
.rt-s-md, .article .rt-s-md { font-size: 18px; }
.rt-s-lg, .article .rt-s-lg { font-size: 22px; line-height: 1.65; }
.rt-s-xl, .article .rt-s-xl { font-size: 28px; line-height: 1.45; }
.rt-s-2xl, .article .rt-s-2xl { font-size: 36px; line-height: 1.3; }
.rt-center, .article .rt-center { text-align: center; }
.rt-small, .article .rt-small { font-size: 13px; }
.rt-nowrap { white-space: nowrap; }
/* 导语：文章开头那句结论 */
.rt-lead, .article .rt-lead {
font-size: 18px;
line-height: 1.85;
color: var(--copper-soft);
border-left: 2px solid var(--copper);
padding-left: 20px;
margin: 0 0 30px;
}
/* 小标题（带序号感） */
.rt-kicker, .article .rt-kicker {
font-family: var(--en);
font-size: 12.5px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--copper);
margin: 34px 0 10px;
}
/* 三种提示框：信息 / 注意 / 建议 */
.rt-note, .article .rt-note {
margin: 26px 0;
padding: 16px 20px;
border-left: 3px solid var(--line);
background: rgba(255, 255, 255, .025);
border-radius: 2px;
}
.rt-note p, .article .rt-note p { margin: 0; font-size: 15px; line-height: 1.85; color: var(--body-ink); }
.rt-note strong { color: var(--text); font-weight: 600; }
.rt-note--info { border-left-color: var(--chrome); background: rgba(201, 205, 210, .05); }
.rt-note--warn { border-left-color: #e0b062; background: rgba(224, 176, 98, .08); }
.rt-note--warn strong { color: #e6bd79; }
.rt-note--tip { border-left-color: #8fd3c4; background: rgba(143, 211, 196, .07); }
.rt-note--tip strong { color: #a8ded1; }
/* 引用 / 金句 */
.rt-quote, .article .rt-quote {
margin: 32px 0;
padding: 4px 0 4px 26px;
border-left: 2px solid var(--copper);
background: none;
}
.rt-quote p, .article .rt-quote p {
font-size: 20px;
line-height: 1.75;
color: var(--copper-soft);
margin: 0;
}
.rt-quote .rt-quote__by, .article .rt-quote .rt-quote__by {
margin-top: 12px;
font-size: 13px;
letter-spacing: .04em;
color: var(--muted);
}
/* 三栏特性卡 */
.rt-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 30px 0; }
.rt-card {
border: 1px solid var(--line);
background: rgba(255, 255, 255, .02);
padding: 20px 18px;
}
.rt-card { margin: 0; }
.rt-card__k, .article .rt-card__k {
font-family: var(--en);
font-size: 19px;
letter-spacing: .03em;
color: var(--copper-hi);
margin: 0 0 6px;
}
.rt-card__t, .article .rt-card__t { font-size: 15px; font-weight: 600; color: var(--text); margin: 0 0 8px; }
.rt-card__d, .article .rt-card__d { font-size: 13.5px; line-height: 1.75; color: var(--muted); margin: 0; }
/* 编号步骤 */
.rt-steps { list-style: none; padding: 0; margin: 30px 0; counter-reset: rt-step; }
.rt-step, .article .rt-step {
position: relative;
padding-left: 46px;
margin: 0 0 20px;
font-size: 15.5px;
line-height: 1.85;
color: var(--body-ink);
counter-increment: rt-step;
}
.rt-step::before {
content: counter(rt-step, decimal-leading-zero);
position: absolute;
left: 0;
top: 1px;
font-family: var(--en);
font-size: 13px;
letter-spacing: .06em;
color: var(--copper);
border: 1px solid rgba(var(--copper-rgb), .35);
padding: 2px 7px;
}
.rt-step strong { color: var(--text); font-weight: 600; }
/* 图片 + 图注 */
.rt-figure { margin: 32px 0; border: 1px solid var(--line); }
.rt-figure img { width: 100%; display: block; }
.rt-figure__cap, .article .rt-figure__cap {
padding: 10px 14px;
font-size: 12.5px;
line-height: 1.7;
letter-spacing: .02em;
color: var(--muted);
border-top: 1px solid var(--line);
background: rgba(0, 0, 0, .18);
margin: 0;
}
/* 图文双栏 */
.rt-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: center; margin: 34px 0; }
.rt-split__text h3, .article .rt-split__text h3 { margin-top: 0; }
.rt-split__media { margin: 0; border: 1px solid var(--line); }
.rt-split__media img { width: 100%; display: block; }
/* 参数表 */
/* 老站搬来的配套清单常有 5–6 列（序号/名称/型号/数量/单位），
窄屏再怎么压也放不进 390px。外面套一层可横向滚动的容器，
比让整页出现横向滚动条好——后者会让所有正文段落一起跟着漂。 */
.rt-table-wrap {
margin: 28px 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--line);
border-radius: 4px;
}
.rt-table-wrap .rt-table { margin: 0; border: 0; }
.rt-table, .article .rt-table {
width: 100%;
border-collapse: collapse;
margin: 28px 0;
font-size: 14px;
}
.rt-table th, .article .rt-table th {
text-align: left;
padding: 12px 14px;
font-weight: 600;
font-size: 13px;
letter-spacing: .04em;
color: var(--text);
background: rgba(255, 255, 255, .04);
border-bottom: 1px solid rgba(var(--copper-rgb), .35);
}
.rt-table td, .article .rt-table td {
padding: 12px 14px;
color: var(--body-ink);
border-bottom: 1px solid var(--line);
line-height: 1.7;
}
@media (max-width: 720px) {
.rt-table, .article .rt-table { font-size: 12.5px; }
.rt-table th, .article .rt-table th,
.rt-table td, .article .rt-table td { padding: 8px 9px; }
.rt-table-wrap { margin: 20px -2px; }
}
/* 行动条 */
.rt-cta {
margin: 36px 0 12px;
padding: 26px 24px;
border: 1px solid rgba(var(--copper-rgb), .32);
background: linear-gradient(180deg, rgba(var(--copper-rgb), .1), rgba(var(--copper-rgb), .035));
}
.rt-cta__t, .article .rt-cta__t { font-size: 20px; font-weight: 600; color: var(--text); margin: 0 0 8px; }
.rt-cta__d, .article .rt-cta__d { font-size: 14px; color: var(--muted); margin: 0 0 18px; }
.rt-cta a, .article .rt-cta a {
display: inline-block;
padding: 10px 22px;
border: 1px solid var(--copper);
color: var(--copper-hi);
font-size: 13.5px;
letter-spacing: .04em;
transition: background .2s, color .2s;
}
.rt-cta a:hover { background: var(--copper); color: var(--text-strong); }
.rt-divider { border: 0; border-top: 1px solid var(--line); margin: 44px 0; }
.rt-grid { display: grid; gap: 16px; }
.rt-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rt-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) {
.rt-cards, .rt-grid--2, .rt-grid--3 { grid-template-columns: minmax(0, 1fr); }
.rt-split { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.rt-lead { font-size: 17px; }
.rt-quote p { font-size: 18px; }
.rt-table { font-size: 13px; }
.rt-table th, .rt-table td { padding: 10px; }
}
/* ---------------- 富文本编排块结束 ---------------- */
.spec-table { width: 100%; border-collapse: collapse; margin: 28px 0; border-top: 1px solid var(--line); }
.spec-table tr { border-bottom: 1px solid var(--line); }
.spec-table th { text-align: left; padding: 14px 0; font-weight: 400; font-size: 13px; color: var(--muted); width: 38%; letter-spacing: .06em; }
.spec-table td { padding: 14px 0; font-family: var(--en); font-size: 13.5px; color: var(--text); }
.section--paper .spec-table { border-color: var(--line); }
.section--paper .spec-table tr { border-color: var(--line); }
.section--paper .spec-table td { color: var(--text); }
.list-item {
display: grid;
grid-template-columns: 120px 1fr auto;
gap: 24px;
padding: 26px 0;
border-bottom: 1px solid var(--line);
align-items: baseline;
}
.list-item:hover h3 { color: var(--copper-hi); }
.list-item time { font-family: var(--en); font-size: var(--fs-meta); color: var(--credit); letter-spacing: .06em; }
.list-item h3 { font-size: var(--fs-card-title); margin-bottom: 6px; transition: color .18s ease; color: var(--text-strong); }
.list-item p { margin: 0; font-size: var(--fs-card-text); color: var(--muted); }
.list-item__tag { font-family: var(--en); font-size: var(--fs-meta); color: var(--copper); letter-spacing: .1em; text-transform: uppercase; }
.pager { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 44px; }
/* 页码也是拿来点的：40px 高（与导航、底部条同一档），手机上不至于点偏 */
.pager a, .pager span {
display: inline-flex;
align-items: center;
min-height: 40px;
padding: 0 16px;
border: 1px solid var(--line);
font-size: 13px;
color: var(--text-quiet);
}
.pager a:hover { border-color: var(--copper); color: var(--copper-hi); }
.pager .is-current { background: var(--copper); color: var(--accent-ink); border-color: var(--copper); }
.pager .pager__step { color: var(--copper-hi); }
/* 省略号：不可点的占位，去掉边框和左右内距，免得看起来像个很宽的页码 */
.pager .pager__gap { border-color: transparent; padding: 0 4px; color: #6f6a63; }
/* ---------------- 表单 ---------------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 12.5px; letter-spacing: .08em; color: var(--text-quiet); }
.field label .req { color: var(--copper); }
.field input, .field select, .field textarea {
background: rgba(230, 225, 218, .04);
border: 1px solid var(--line);
color: var(--text);
padding: 12px 14px;
font-size: 14px;
font-family: var(--cn);
transition: border-color .18s ease, background .18s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
outline: none;
border-color: var(--copper);
background: rgba(var(--copper-rgb), .07);
}
.field textarea { min-height: 120px; resize: vertical; }
.field select option { background: var(--steel); color: var(--text); }
.field__err { color: #e8ae9f; font-size: 12px; }
.field__err:empty { display: none; }
/* 框架在校验通过时输出的占位元素，无需可见 */
.field-validation-valid { display: none; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.checkbox { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--muted); }
.checkbox input { margin-top: 3px; accent-color: var(--copper); }
.alert { padding: 14px 18px; border: 1px solid; font-size: 13.5px; margin-bottom: 22px; }
.alert--ok { border-color: rgba(79, 125, 92, .6); background: rgba(79, 125, 92, .12); color: #a8d4b5; }
.alert--err { border-color: rgba(180, 68, 47, .55); background: rgba(180, 68, 47, .12); color: #e8ae9f; }
.alert ul { margin: 6px 0 0; padding-left: 18px; }
/* ---------------- 语义化修饰类（替代内联 style） ---------------- */
.unit { font-family: var(--cn); font-size: 12px; letter-spacing: .06em; color: var(--muted); margin-left: 2px; }
.lede--spaced { margin-top: 24px; }
.lede--flush { margin: 0; }
.note { font-size: 12px; letter-spacing: .1em; color: var(--muted); }
.caption { font-size: 11.5px; letter-spacing: .14em; color: var(--credit); }
.caption--spaced { margin-top: 14px; }
.kicker--spaced { margin-top: 34px; }
.tech-grid--tight { margin-top: 36px; }
.tech-card--paper { background: rgba(255, 255, 255, .03); border-color: var(--line); }
.tech-card--paper .tech-card__metric { color: var(--copper-hi); }
.tech-card--paper h4 { color: var(--text-strong); }
.tech-card--paper p { color: var(--muted); }
.case-meta {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
/* 与正文同宽并居中：三格原来会撑满 1200px 的 wrap，右下角那格离正文差了 300px */
max-width: 760px;
margin: 0 auto 48px;
background: var(--line);
border: 1px solid var(--line);
}
.case-meta > div { background: var(--steel); padding: 20px 22px; }
.case-meta span { display: block; font-family: var(--en); font-size: 10px; letter-spacing: .2em; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; }
.case-meta b { font-weight: 500; font-size: 15px; color: var(--text-strong); }
.side-cta { margin-top: 36px; border: 1px solid var(--line); padding: 24px; background: linear-gradient(180deg, rgba(var(--copper-rgb), .1), transparent); }
.side-cta__text { font-size: 13.5px; color: var(--muted); margin-bottom: 18px; }
.side-cta__phone { display: block; margin-top: 14px; font-family: var(--disp); font-weight: 600; font-size: 18px; color: var(--copper-hi); text-align: center; letter-spacing: .04em; }
.contact-phone { font-family: var(--disp); font-weight: 600; font-size: clamp(26px, 3.2vw, 40px); margin: 0 0 24px; letter-spacing: .02em; }
.contact-phone a { color: var(--copper-hi); }
.prep-list { padding-left: 18px; color: var(--muted); font-size: 13.5px; }
.prep-list li { margin-bottom: 8px; }
.contact-form { border: 1px solid var(--line); padding: clamp(22px, 3vw, 34px); background: rgba(230, 225, 218, .02); }
.form-submit { margin-top: 22px; }
.form-hint { font-size: 11.5px; color: var(--credit); margin: 12px 0 0; text-align: center; }
.news-list { border-top: 1px solid var(--line); }
.news-list--paper .list-item { border-color: var(--line); }
.news-list--paper .list-item h3 { color: var(--text-strong); }
.news-list--paper .list-item p { color: var(--muted); }
.news-list--paper time { color: var(--credit); }
.product-card--paper { background: rgba(255, 255, 255, .03); border-color: var(--line); }
.product-card--paper h4 { color: var(--text-strong); }
.product-card--paper p { color: var(--muted); }
.product-card--paper .product-card__model { color: var(--muted); }
.case-card--paper { background: var(--steel); border-color: var(--line); }
.case-card--paper h4 { color: var(--text-strong); }
.case-card--paper p { color: var(--muted); }
.case-card--paper .case-card__link { color: var(--copper-hi); }
.process--detail .process__item { padding: 24px 16px; }
.compare-table--single td:first-child { width: auto; }
.client-list { font-size: 14px; line-height: 2; color: var(--text-soft); }
.empty-note { margin-top: 40px; }
.request-id { margin-top: 32px; font-size: 11px; letter-spacing: .04em; color: var(--credit); }
/* ---------------- 无障碍 ---------------- */
.skip {
position: absolute;
left: -9999px;
top: 0;
background: var(--copper);
color: var(--accent-ink);
padding: 10px 16px;
z-index: 100;
font-size: 13px;
}
.skip:focus { left: 12px; top: 12px; }
/* 视觉上隐藏但屏幕阅读器可读：询盘表单只有 placeholder 没有可见标签，
标签必须存在，否则读屏只会念出一串输入框。 */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* 系统开启「减少动态效果」时，把动画与过渡压到不可见时长。
不是直接 display:none —— 那会让依赖过渡终态的进场元素永远不出现。 */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}
/* ---------------- 进场动画 ---------------- */
@keyframes kenburns {
from { transform: scale(1); }
to { transform: scale(1.08); }
}
@keyframes cue {
0%, 100% { opacity: .25; transform: scaleY(.55); }
50% { opacity: 1; transform: scaleY(1); }
}
@keyframes qualMove {
/* 双份列表各占一半宽度，接缝处还差半个 gap，补上才无缝 */
from { transform: translateX(0); }
to { transform: translateX(calc(-50% - 8px)); }
}
@keyframes fadeup {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.js [data-reveal] {
opacity: 0;
transform: translateY(22px);
transition: opacity .9s cubic-bezier(.22, .61, .36, 1), transform .9s cubic-bezier(.22, .61, .36, 1);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* 首屏三行的入场时序。
原来是 .6 / 1.4 / 2.4 秒 —— 主标题要等 1.4 秒才开始显形，2.6 秒才完全可读。
装修感是够了，但访客在手机上看两秒黑屏，很可能直接划走；
而 h1 是这一页唯一必须在第一眼说清「我们是干什么的」的元素。
压到 .15 / .45 / 1.2 秒：节奏还在，空白没了。 */
.js .prologue__line1 { opacity: 0; animation: fadeup .9s ease .15s forwards; }
.js .prologue h1 { opacity: 0; animation: fadeup .9s ease .45s forwards; }
.js .prologue__line3 { opacity: 0; animation: fadeup .9s ease 1.2s forwards; }
.js .scroll-cue { opacity: 0; animation: fadeup 1.2s ease 3.2s forwards; }
.js .type-line { opacity: 0; transform: translateY(8px); }
.js .interlude.is-in .type-line:nth-child(1) { animation: fadeup 1s ease .1s forwards; }
.js .interlude.is-in .type-line:nth-child(2) { animation: fadeup 1s ease 1.15s forwards; }
/* ---------------- 响应式：1023 / 900 / 720 / 600 ---------------- */
@media (max-width: 1023px) {
.hero__grid, .split, .leak-wall { grid-template-columns: 1fr; }
.leak-wall__main { grid-row: auto; }
.leak-wall__main img { min-height: 300px; }
.leak-wall__stack { grid-template-columns: 1fr 1fr; }
.tech-grid, .case-grid, .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.process { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.qual-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.footer__grid { grid-template-columns: 1fr 1fr; }
.nav { gap: 18px; }
.prologue__inner { padding-bottom: 76px; }
}
@media (max-width: 900px) {
h1 { font-size: clamp(32px, 5.2vw, 46px); }
.craft-video__inner { padding-top: 110px; padding-bottom: 74px; }
.coda__inner { padding-top: 110px; padding-bottom: 74px; }
.craft-video__panel { margin-top: 28px; padding: 2px 18px; }
.ph-frame img,
.ph-frame video { height: min(34vh, 300px); }
.band { height: min(20vh, 160px); }
}
@media (max-width: 720px) {
body { font-size: 15px; line-height: 1.8; }
/* 注：旧顶栏的 .nav 折叠规则已移除。现在的 .nav 是页头 flex 容器，
隐藏它会连同 logo 和汉堡按钮一起消失。折叠改由 .mobile-menu 承担。 */
.tech-grid, .case-grid, .product-grid, .form-grid, .qual-grid { grid-template-columns: 1fr; }
.process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer__grid { grid-template-columns: 1fr; gap: 28px; }
.list-item { grid-template-columns: 1fr; gap: 8px; }
.hero__meta { gap: 22px; }
.compare-table th, .compare-table td { padding: 14px 8px; font-size: 13px; }
.compare-table td:first-child { width: 34%; }
.scroll-cue { display: none; }
.prologue { min-height: 92vh; }
.craft-video { min-height: 78vh; }
.coda { min-height: 70vh; }
.case-meta { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
h1 { font-size: 30px; line-height: 1.4; }
h2 { font-size: clamp(23px, 6.4vw, 30px); }
.prologue__line1 { letter-spacing: .18em; font-size: 14px; }
.prologue__line3 { letter-spacing: .24em; font-size: 11.5px; }
.prologue__inner { padding-bottom: 64px; }
.interlude__text { font-size: 19px; }
.leak-wall__stack { grid-template-columns: 1fr; }
.leak-tile--video { order: -1; }
.craft-video { min-height: 70vh; }
.craft-video__inner { padding-top: 88px; padding-bottom: 56px; }
.coda__inner { padding-top: 88px; padding-bottom: 56px; }
.qual-item { width: 138px; height: 92px; }
.stat-big { font-size: clamp(54px, 16vw, 84px); }
.compare { font-size: 12.5px; }
.btn { padding: 13px 22px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation: none !important;
transition: none !important;
}
.js [data-reveal],
.js .prologue__line1,
.js .prologue h1,
.js .prologue__line3,
.js .scroll-cue,
.js .type-line { opacity: 1 !important; transform: none !important; }
.qual-track { animation: none !important; flex-wrap: wrap; width: auto; }
}
/* ==========================================================================
内页版式
与首页共用同一套令牌；这里只补内页专有组件。
命名对齐参考站点（page-hero / tlist / compare / gates / notice-*），
便于以后同步样式时逐条比对。
========================================================================== */
/* 内页区块基线：无 class 的 ，也兼容
*/
.band {
position: relative;
display: block;
margin-top: clamp(20px, 3.6vh, 40px);
background: var(--deep);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
overflow: hidden;
}
img.band { margin: 0; }
.band img,
img.band {
width: 100%;
height: clamp(180px, 26vh, 330px);
object-fit: cover;
object-position: center;
display: block;
}
.band .cap {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 8px 24px;
padding: 14px 20px;
background: linear-gradient(0deg, #15171ae6, #15171a00);
font-size: 12px;
color: var(--muted);
letter-spacing: .06em;
}
.band .cap b { color: var(--text-strong); font-weight: 600; }
/* ---------------- 卡片组 ---------------- */
.cards-row {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin-top: 64px;
}
.card-dark {
background: rgba(var(--ink-rgb), .85);
border: 1px solid var(--line);
padding: 24px 26px;
}
.card-dark h4 { font-size: 16.5px; color: var(--text-strong); font-weight: 600; margin-bottom: 8px; }
.card-dark p { font-size: 13px; color: var(--muted); line-height: 1.7; margin: 0; }
.card-dark::before {
content: "";
display: block;
width: 30px;
height: 2px;
background: var(--copper);
margin-bottom: 16px;
}
/* 产品卡：列表页六宫格 */
.cards-row.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 0; }
.product-card {
border: 1px solid var(--line);
background: rgba(var(--ink-rgb), .8);
display: flex;
flex-direction: column;
transition: border-color .25s, transform .25s, background .25s;
}
.product-card:hover { border-color: rgba(var(--copper-rgb), .55); transform: translateY(-3px); background: var(--ink-2); }
.product-card figure { margin: 0; overflow: hidden; }
.product-card figure img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
filter: brightness(.86) saturate(.92);
transition: transform .5s ease, filter .35s ease;
}
.product-card:hover figure img { transform: scale(1.03); filter: brightness(.94) saturate(1); }
.product-card .body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.product-card h2 { font-size: var(--fs-card-title); color: var(--text-strong); margin-bottom: 8px; line-height: 1.35; }
.product-card .spec {
font-family: var(--en);
font-size: var(--fs-meta);
letter-spacing: .18em;
color: var(--copper-hi);
margin-bottom: 12px;
text-transform: uppercase;
}
.product-card p { font-size: var(--fs-card-text); color: var(--muted); line-height: 1.8; margin: 0 0 18px; }
.product-card .text-link { margin-top: auto; }
/* ---------------- 参数表 ---------------- */
.tlist { margin-top: 30px; border-top: 1px solid var(--line); }
.ti {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 24px;
padding: 17px 0;
border-bottom: 1px solid var(--line);
}
.ti:last-child { border-bottom: none; }
.ti .k { font-size: 15px; color: var(--text-mid); }
.ti .v {
font-family: var(--disp);
font-size: 22px;
color: var(--copper-hi);
white-space: nowrap;
letter-spacing: .05em;
}
/* ---------------- 实证数字 ---------------- */
.proof-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 72px;
margin-top: 56px;
}
.pf .n {
font-family: var(--disp);
font-weight: 700;
font-size: clamp(72px, 7vw, 120px);
line-height: .95;
color: var(--text-strong);
}
.pf .n i { font-style: normal; font-size: .34em; color: var(--copper); letter-spacing: .05em; margin-left: 6px; }
.pf .bar { width: 56px; height: 2px; background: var(--copper); margin: 22px 0 16px; }
.pf h4 { font-size: 17px; color: var(--text-strong); font-weight: 600; margin-bottom: 8px; }
.pf p { font-size: 14.5px; color: var(--muted); margin: 0; line-height: 1.8; }
/* ---------------- 两栏对比（标配 / 高配、行业常规 / 合信控制） ---------------- */
.compare {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-top: 34px;
}
.compare .box {
border: 1px solid var(--line);
background: rgba(var(--ink-rgb), .8);
padding: 26px;
}
.compare .box h3 { font-size: 18px; color: var(--text-strong); margin-bottom: 12px; }
.compare .box p { font-size: 14.5px; color: var(--muted); line-height: 1.8; margin: 0; }
/* ---------------- 案例卡 ---------------- */
.case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 38px; }
.case { border: 1px solid var(--line); background: var(--steel); padding: 24px; }
.case .n { font-family: var(--disp); font-size: 34px; color: var(--chrome); line-height: 1; }
.case h3 { font-size: var(--fs-card-title); color: var(--text-strong); margin: 12px 0 6px; }
.case p { font-size: var(--fs-card-text); color: var(--muted); line-height: 1.7; margin: 0; }
/* ---------------- 质量门 / 工序链 ---------------- */
.gates {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
margin-top: 44px;
}
.gate { border-left: 1px solid var(--line); padding: 4px 0 4px 20px; }
.gate h4 { font-size: 16.5px; color: var(--text-strong); margin-bottom: 8px; font-weight: 600; }
.gate p { font-size: 13px; color: var(--muted); line-height: 1.7; margin: 0; }
.chain {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 10px;
margin-top: 44px;
padding-top: 26px;
border-top: 1px solid var(--line);
}
.chain .c {
font-family: var(--en);
font-size: 13px;
letter-spacing: .08em;
color: var(--text);
border: 1px solid var(--line);
padding: 8px 14px;
}
.chain .sep { color: var(--copper); }
.chain .tail { margin-left: auto; font-size: 12px; color: var(--credit); letter-spacing: .16em; }
/* ---------------- 产线卡 ---------------- */
.line-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 48px; }
.line-card {
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid var(--line);
background: rgba(var(--ink-rgb), .8);
min-height: 280px;
overflow: hidden;
}
.line-card figure { margin: 0; overflow: hidden; }
.line-card figure img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(.82) saturate(.9);
transition: transform .5s ease;
}
.line-card:hover figure img { transform: scale(1.03); }
.line-card .body { padding: 28px; display: flex; flex-direction: column; justify-content: center; }
.line-card h3 { font-size: var(--fs-card-title); color: var(--text-strong); margin-bottom: 12px; }
.line-card p { font-size: var(--fs-card-text); color: var(--muted); line-height: 1.8; margin: 0; }
/* ---------------- 标签条 ---------------- */
.sys-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
.sys {
font-family: var(--en);
font-size: 13px;
border: 1px solid var(--line);
padding: 8px 16px;
color: var(--text);
letter-spacing: .04em;
line-height: 1.7;
}
.sys b { color: var(--copper-hi); font-weight: 600; }
/* ---------------- 厂区尺度 ---------------- */
.scale { position: relative; overflow: hidden; padding: 0; background: var(--scale); }
.scale .bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center 60%;
filter: brightness(.5) saturate(.85);
}
.scale::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, var(--ink) 0%, transparent 36%, rgba(var(--ink-rgb),.92) 88%);
}
/* 只覆盖上下：左右留白由 .wrap 提供，写成 padding 简写会把版心内边距清零，
桌面版心宽看不出来，窄屏就贴到屏幕边缘 */
.scale .inner { position: relative; z-index: 2; width: 100%; padding-top: 150px; padding-bottom: 64px; }
.scale-grid { display: flex; gap: 64px; flex-wrap: wrap; align-items: flex-end; }
.scale h2 { max-width: 420px; }
.scale .facts { display: flex; gap: 56px; flex-wrap: wrap; margin-left: auto; }
.scale .f .n { font-family: var(--disp); font-weight: 600; font-size: 44px; color: var(--text-strong); line-height: 1; }
.scale .f .n i { font-style: normal; color: var(--copper-hi); font-size: .5em; }
.scale .f .l { font-size: 13px; color: var(--text-soft); letter-spacing: .15em; margin-top: 8px; }
/* ---------------- 时间轴 ---------------- */
.timeline { border-left: 1px solid var(--line); margin-top: 42px; }
.time-item { position: relative; padding: 0 0 34px 34px; }
.time-item::before {
content: "";
position: absolute;
left: -5px;
top: 12px;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--copper);
}
.time-item .year { font-family: var(--disp); font-size: 34px; color: var(--chrome); line-height: 1; }
.time-item p { font-size: 15px; color: var(--muted); margin-top: 6px; line-height: 1.85; }
/* ---------------- 资质墙 ---------------- */
.qual-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.qual-card { background: var(--card); border: 1px solid var(--line); padding: 14px; }
.qual-card img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: contain;
background: var(--media);
}
.qual-card span {
display: block;
margin-top: 10px;
font-size: 12.5px;
color: var(--muted);
text-align: center;
letter-spacing: .08em;
}
/* ---------------- 要点列表 ---------------- */
.bullet-list { list-style: none; display: grid; gap: 12px; margin: 24px 0 0; padding: 0; }
.bullet-list li {
font-size: 14.5px;
color: var(--muted);
line-height: 1.85;
border-bottom: 1px solid var(--line);
padding-bottom: 12px;
}
.bullet-list li:last-child { border-bottom: none; }
.bullet-list b { color: var(--chrome); font-weight: 600; }
.text-link {
display: inline-flex;
margin-top: 22px;
color: var(--copper-hi);
font-size: 14px;
letter-spacing: .12em;
transition: color .2s;
}
.text-link:hover { color: var(--text-strong); }
/* ---------------- 视频带 ---------------- */
.video-band { position: relative; overflow: hidden; padding: 0; background: var(--deep); }
.video-band video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(.55) saturate(.9);
}
.video-band::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, #15171ae8 0%, #15171a99 52%, #15171a33 100%);
}
.video-band .inner { position: relative; z-index: 2; width: 100%; padding-top: 150px; padding-bottom: 92px; }
.video-band h2 { max-width: 620px; }
.video-band .lead { max-width: 560px; }
/* ---------------- 询盘区 ---------------- */
/* 内页正文段与询盘段交替使用两种深色，靠这一层把「下一个章节」区分出来 */
.section-steel { background: var(--steel); }
.inquiry {
background: var(--steel);
border-top: 1px solid var(--line);
}
.inquiry-grid {
display: grid;
grid-template-columns: minmax(0, .92fr) minmax(400px, 1fr);
gap: 48px;
align-items: stretch;
margin: 54px 0 0;
}
.contact {
background: var(--steel);
border: 1px solid var(--line);
padding: 30px 36px;
box-shadow: 0 36px 90px -58px #000;
display: flex;
flex-direction: column;
justify-content: center;
}
.contact .ci {
display: flex;
gap: 18px;
padding: 16px 0;
border-bottom: 1px solid var(--line);
align-items: baseline;
}
.contact .ci:last-child { border-bottom: none; }
.contact .ci .k {
font-size: 13px;
letter-spacing: .2em;
color: var(--muted);
width: 88px;
flex: none;
}
.contact .ci .v {
font-family: var(--en);
font-size: 17px;
color: var(--text-strong);
font-weight: 500;
letter-spacing: .04em;
overflow-wrap: anywhere;
}
.contact .ci .v.cnv { font-family: var(--cn); font-size: 15.5px; font-weight: 400; }
.contact .ci .v a { color: var(--copper-hi); border-bottom: 1px solid transparent; transition: border-color .2s; }
.contact .ci .v a:hover { border-bottom-color: var(--copper); }
form.form {
background: var(--steel);
border: 1px solid var(--line);
padding: 36px;
align-self: stretch;
box-shadow: 0 36px 90px -58px #000;
}
.form h3 { color: var(--text-strong); font-size: 20px; margin: 0 0 24px; font-weight: 600; }
.form input,
.form select,
.form textarea {
width: 100%;
background: rgba(230, 225, 218, .04);
border: 1px solid var(--line);
color: var(--text);
padding: 12px 14px;
margin-bottom: 14px;
font-size: 14px;
font-family: var(--cn);
transition: border-color .18s ease, background .18s ease;
}
.form input::placeholder,
.form textarea::placeholder { color: #7c776f; }
.form input:focus,
.form select:focus,
.form textarea:focus {
outline: none;
border-color: var(--copper);
background: rgba(var(--copper-rgb), .07);
}
.form select option { background: var(--steel); color: var(--text); }
.form textarea { min-height: 108px; resize: vertical; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form .hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.form button[type=submit] {
width: 100%;
background: var(--copper);
color: var(--accent-ink);
border: 1px solid var(--copper);
padding: 15px;
font-size: 14px;
font-weight: 700;
letter-spacing: .12em;
cursor: pointer;
font-family: var(--cn);
transition: background .2s, color .2s;
}
.form button[type=submit]:hover { background: var(--copper-hi); border-color: var(--copper-hi); }
.form button[type=submit]:disabled { opacity: .6; cursor: progress; }
.form .hint { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; }
/* 验证码一行：输入框 + 图片 + 换一张。
图片写死宽高，避免加载完成时把下面的按钮顶下去（CLS）。 */
.form .captcha-row { display: flex; align-items: center; gap: 10px; margin: 4px 0 6px; flex-wrap: wrap; }
.form .captcha-row input { flex: 1 1 120px; width: auto; margin-bottom: 0; letter-spacing: .18em; text-transform: uppercase; }
.form .captcha-row img {
width: 132px;
height: 44px;
border: 1px solid var(--line);
background: #eef0f0;
flex: 0 0 auto;
}
.form .captcha-row__swap {
background: none;
border: 0;
/* 17px 的行高在手机上是「点不中」的典型：文字贴着验证码图片，
手指一偏就点空。给到 44px 触控高度（与左侧验证码图片同高），
正好和图片垂直居中；40px 在平板档下会卡在体检阈值边缘。 */
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 10px;
color: var(--copper-hi);
font-size: 12.5px;
font-family: var(--cn);
cursor: pointer;
text-decoration: underline;
}
.form .captcha-row__swap:hover { color: var(--copper); }
/* 第三方验证码的挂载位：先把高度占住，避免组件加载完成后表单整体下跳 */
.captcha-remote { min-height: 70px; display: flex; align-items: center; margin: 4px 0 6px; }
.captcha-remote iframe { border: 0; max-width: 100%; }
.captcha-remote__noscript { font-size: 12.5px; color: var(--danger, #a33); margin: 0; line-height: 1.7; }
.form .consent {
display: flex;
gap: 10px;
align-items: flex-start;
font-size: 12.5px;
color: var(--muted);
line-height: 1.7;
margin: 2px 0 18px;
}
.form .consent input { width: auto; margin: 3px 0 0; accent-color: var(--copper); flex: none; }
.form__ok {
border-left: 2px solid var(--copper);
background: rgba(var(--copper-rgb), .09);
padding: 14px 18px;
margin: 0 0 20px;
font-size: 14px;
color: var(--text-strong);
line-height: 1.75;
}
.form__err {
border-left: 2px solid var(--danger);
background: rgba(180, 68, 47, .12);
padding: 14px 18px;
margin: 0 0 20px;
font-size: 13px;
color: #e8ae9f;
line-height: 1.75;
}
.form__err strong { display: block; margin-bottom: 6px; color: #f0c4b8; }
.form__err ul { margin: 0; padding-left: 18px; }
/* ---------------- 地图 ---------------- */
.map-shot { display: block; border: 1px solid var(--line); position: relative; overflow: hidden; }
.map-shot img { width: 100%; filter: brightness(.75) saturate(.85); transition: filter .3s; }
.map-shot:hover img { filter: brightness(.88) saturate(1); }
.map-shot span {
position: absolute;
left: 24px;
bottom: 20px;
background: rgba(var(--ink-rgb), .93);
border-top: 1px solid var(--copper);
padding: 12px 18px;
color: var(--text-strong);
font-size: 14px;
}
/* ---------------- 环保公示 ---------------- */
.notice-list { display: grid; gap: 22px; margin-top: 0; }
.notice-card {
display: grid;
grid-template-columns: minmax(150px, .28fr) minmax(0, 1fr);
gap: 34px;
background: var(--steel);
border: 1px solid var(--line);
padding: 32px 36px;
}
.notice-card .notice-meta {
font-family: var(--en);
font-size: 12px;
line-height: 1.8;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--copper-hi);
}
.notice-card h2 { font-size: clamp(22px, 2.3vw, 32px); margin-bottom: 14px; line-height: 1.35; }
.notice-card p { color: var(--text-mid); max-width: 820px; margin: 0; line-height: 1.85; }
.notice-title-link { color: var(--text-strong); transition: color .18s; }
.notice-title-link:hover { color: var(--copper-hi); }
.notice-read {
display: inline-flex;
align-items: center;
margin-top: 22px;
color: var(--copper-hi);
font-size: 14px;
letter-spacing: .08em;
}
.notice-read:hover { color: var(--text-strong); }
.notice-empty-note { margin-top: 24px; color: var(--text-quiet); font-size: 13px; }
#noticeArchive { padding-top: 56px; }
.notice-back {
display: inline-flex;
align-items: center;
min-height: 46px;
margin-bottom: 30px;
padding: 10px 18px;
border: 1px solid var(--copper);
color: var(--copper-hi);
font-size: 15px;
letter-spacing: .06em;
transition: background .18s, color .18s;
}
.notice-back:hover { background: var(--copper); color: var(--accent-ink); }
#expansion { padding-top: 56px; }
.notice-document { max-width: 900px; }
.notice-document .notice-intro p { font-size: 16px; line-height: 2; }
.notice-document h3 { margin: 34px 0 14px; color: var(--text-strong); font-size: 20px; font-weight: 600; }
.notice-document p { max-width: none; margin: 0 0 14px; line-height: 2; color: var(--text-mid); }
.notice-document strong { color: var(--text-strong); }
.notice-facts {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
gap: 10px 20px;
margin: 18px 0 22px;
}
.notice-facts dt { color: var(--text-strong); font-weight: 600; }
.notice-facts dd { margin: 0; color: var(--text-mid); line-height: 1.8; }
.notice-date { margin-top: 30px; text-align: right; color: var(--text-strong); }
.notice-period {
margin-top: 22px;
padding: 14px 18px;
border-left: 2px solid var(--copper);
background: rgba(var(--copper-rgb), .06);
color: var(--text-strong);
}
.empty-note { color: var(--muted); font-size: 14px; }
/* ==========================================================================
内页响应式：1023 / 900 / 720 / 600 四档
========================================================================== */
@media (max-width: 1023px) {
/* 只隐藏 .item（a 标签）不够：外面那层 .nav-item 是 flex 子元素，
虽然里面空了，仍会各自吃一个 18px 的 gap —— 六项就是 100 多像素，
正好把搜索框和汉堡挤出屏幕。整层一起隐藏。 */
.nav .item, .nav a.nav-cta, .nav > .nav-item { display: none; }
.nav-toggle { display: block; }
.story-grid { gap: 56px; }
.cards-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards-row.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qual-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.inquiry-grid { grid-template-columns: 1fr; gap: 28px; margin-top: 42px; }
.proof-grid { gap: 48px; }
.legal { justify-content: flex-start; gap: 10px 26px; }
}
@media (max-width: 900px) {
main > section { padding: 68px 0; }
.page-hero { padding: 136px 0 70px; }
.story-grid { grid-template-columns: 1fr; gap: 48px; margin-top: 0; }
.cards-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.proof-grid { grid-template-columns: 1fr; gap: 40px; margin-top: 40px; }
.gates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qual-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scale-grid { gap: 32px; }
.scale .facts { margin-left: 0; gap: 32px; }
.scale .inner { padding-top: 110px; padding-bottom: 56px; }
.video-band .inner { padding-top: 110px; padding-bottom: 74px; }
.line-grid, .compare, .case-grid { grid-template-columns: 1fr; gap: 18px; }
.case-grid { gap: 14px; }
.notice-card { grid-template-columns: 1fr; padding: 24px; gap: 14px; }
.notice-document .notice-facts { grid-template-columns: 1fr; gap: 4px; }
.notice-document .notice-facts dd { margin-bottom: 10px; }
.notice-date { text-align: left; }
}
@media (max-width: 720px) {
.nav { height: 66px; }
.site-footer { padding: 48px 0 76px; }
.f-row { gap: 16px 28px; }
.f-row .ci { font-size: 14px; }
/* 触屏上「全部 4 位」是唯一能换人的入口，按 40px 起（手指不是鼠标）
给足命中面积；展开后的每一行同样放宽，避免点错行拨错人。
具体尺寸统一写在上面 (max-width:1023px), (pointer:coarse) 一段里。 */
.phones { gap: 4px 10px; }
.phones__toggle { font-size: 12px; }
.cards-row, .cards-row.products { grid-template-columns: 1fr; }
.line-card { grid-template-columns: 1fr; min-height: 0; }
.line-card figure img { height: 220px; }
.gates { grid-template-columns: 1fr; }
.qual-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form .row2 { grid-template-columns: 1fr; gap: 0; }
form.form { padding: 24px 22px; }
.contact { padding: 24px 22px; }
.contact .ci { gap: 12px; }
.contact .ci .k { width: 74px; font-size: 12px; }
.contact .ci .v { font-size: 15px; }
.band .cap { font-size: 11px; padding: 10px 14px; }
/* 底部双按钮：左边询盘、右边电话。
以前只有一整条电话，等于默认「访客只打电话」；而在井下现场用手机的往往
是设备科的人，他更想先把参数发过去留个凭证。两个入口并排，谁也不用猜。 */
.mobile-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 60;
display: grid;
grid-template-columns: 1fr 1.15fr;
border-top: 1px solid var(--edge);
background: var(--grad-b);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mobile-bar a {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 14px 10px;
font-size: 14px;
font-weight: 700;
letter-spacing: .08em;
}
.mobile-bar__quote { background: var(--copper); color: var(--accent-ink); }
.mobile-bar__call { color: var(--copper-hi); font-size: 13px; white-space: nowrap; }
/* 固定条会压住页脚最后一行法务信息，用页脚内边距把它顶上去 */
.site-footer { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
.crumbs__list { padding: 12px 0; font-size: 10px; letter-spacing: .12em; }
.crumbs__item:last-child span { max-width: 56vw; }
.legal-links { display: none; }
}
@media (max-width: 600px) {
.qual-wall { grid-template-columns: 1fr; }
.ti { display: block; }
.ti .v { display: block; margin-top: 4px; }
.pf .n { font-size: 64px; }
.page-hero--center h1 { font-size: 26px; }
.notice-read { min-height: 44px; }
}
/* ---------------- 滚动进场（克制：仅淡入上移 12px） ---------------- */
.js .reveal {
opacity: 0;
transform: translateY(12px);
transition: opacity .8s ease, transform .8s ease;
}
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.js .reveal { opacity: 1; transform: none; transition: none; }
.prologue__bg { animation: none; }
html { scroll-behavior: auto; }
}
/* ---------------- 触屏设备的表单可点性 ----------------
iOS Safari 在表单控件字号 < 16px 时，聚焦会自动放大整页。窄屏不是唯一条件：
iPad 竖屏 768、横屏 1024 同样会触发，所以这里用「视口宽度」或「粗指针」双条件，
触屏设备一律抬到 16px，鼠标端保持 14px 的紧凑排版。 */
@media (max-width: 1023px), (pointer: coarse) {
.form input, .form select, .form textarea,
.field input, .field select, .field textarea {
font-size: 16px;
padding: 13px 14px;
}
.form input, .form select, .form textarea { min-height: 46px; }
.form textarea { min-height: 124px; }
.form button[type=submit] { min-height: 50px; }
/* 卡片内的文字链接（进入详情 / 阅读公示）原本只有 25px 高，
触屏上偏难点，撑到 44px 但保持文字左对齐与下划线语义不变 */
.text-link, .notice-read { min-height: 44px; align-items: center; }
/* 页脚「全部 4 位」与展开后的每一行：触屏上都是要点的，
平板 768 不在 720 断点内，只按宽度写会漏掉这一类设备。 */
.phones__toggle { min-height: 40px; padding: 8px 12px; }
.phones__line { min-height: 40px; align-items: center; }
.phones.is-open .phones__line { padding: 6px 0; }
}
/* ---------------- 移动端细节 ---------------- */
@media (max-width: 720px) {
.form .consent { align-items: flex-start; }
.form .consent input { width: 20px; height: 20px; margin-top: 2px; }
.form .consent label { font-size: 13.5px; line-height: 1.7; }
/* 底部固定呼叫条约 44px，页脚多留出这段高度，避免压住最后一行 */
.site-footer { padding-bottom: 88px; }
}
/* ==========================================================================
前台公告：顶部条 + 弹窗
石墨底 + 铜色强调，与全站同一套语言：无圆角、无阴影、1px 描边。
两条都只在后台「前台公告」启用时出现；关闭状态记在 localStorage，
不经过服务端，所以给静态页加公告也不会把 HTML 变成因人而异。
========================================================================== */
.ann-bar {
position: relative;
z-index: 60;
display: flex;
align-items: center;
gap: 12px;
padding: 11px var(--pad-x);
font-size: 13.5px;
line-height: 1.5;
color: var(--text);
background: var(--steel);
border-bottom: 1px solid var(--line);
border-left: 3px solid var(--copper);
}
.ann-bar__dot {
width: 6px;
height: 6px;
flex: none;
background: var(--copper);
border-radius: 50%;
}
.ann-bar__text {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ann-bar__link {
flex: none;
color: var(--copper-hi);
border-bottom: 1px solid rgba(var(--copper-hi-rgb), .4);
white-space: nowrap;
}
.ann-bar__link:hover { color: var(--text); border-bottom-color: var(--text); }
.ann-bar__close {
flex: none;
width: 26px;
height: 26px;
display: grid;
place-items: center;
background: transparent;
border: 1px solid transparent;
color: var(--muted);
font-size: 17px;
line-height: 1;
cursor: pointer;
}
.ann-bar__close:hover { color: var(--text); border-color: var(--line); }
/* 推广：整条铜色，文字用深色保证对比度 */
.ann-bar--promo {
background: var(--copper);
border-left-color: var(--copper-hi);
border-bottom-color: var(--copper);
color: var(--accent-ink);
}
.ann-bar--promo .ann-bar__dot { background: var(--accent-ink); }
.ann-bar--promo .ann-bar__link { color: var(--accent-ink); border-bottom-color: rgba(var(--accent-ink-rgb), .45); }
.ann-bar--promo .ann-bar__close { color: rgba(var(--accent-ink-rgb), .7); }
.ann-bar--promo .ann-bar__close:hover { color: var(--accent-ink); border-color: rgba(var(--accent-ink-rgb), .4); }
/* 提醒：暗琥珀，比铜色更"要注意" */
.ann-bar--warn {
background: #2a2113;
border-left-color: #d09a3a;
border-bottom-color: #4a3a1c;
color: var(--text-strong);
}
.ann-bar--warn .ann-bar__dot { background: #d09a3a; }
.ann-bar--warn .ann-bar__link { color: #e8c07a; border-bottom-color: rgba(232, 192, 122, .4); }
.ann-bar:not([hidden]) { animation: annBarIn .26s ease both; }
@keyframes annBarIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
/* ---------------- 弹窗 ---------------- */
.ann-modal {
width: calc(100% - 40px);
max-width: 430px;
padding: 0;
border: none;
background: transparent;
color: var(--text);
}
.ann-modal::backdrop {
background: rgba(8, 9, 10, .74);
backdrop-filter: blur(2px);
}
.ann-modal__inner {
background: var(--steel);
border: 1px solid var(--line);
border-top: 2px solid var(--copper);
padding: 28px 28px 20px;
animation: annModalIn .3s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes annModalIn {
from { opacity: 0; transform: translateY(14px) scale(.985); }
to { opacity: 1; transform: none; }
}
.ann-modal__eyebrow {
display: block;
font-family: var(--en);
font-size: 10.5px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--copper);
margin-bottom: 10px;
}
.ann-modal__title {
margin: 0;
font-size: 21px;
line-height: 1.4;
font-weight: 600;
letter-spacing: -.01em;
color: var(--text);
}
.ann-modal__body {
margin-top: 12px;
font-size: 14px;
line-height: 1.8;
color: var(--muted);
}
.ann-modal__body p { margin: 0 0 8px; }
.ann-modal__body p:last-child { margin-bottom: 0; }
.ann-modal__foot {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--line);
}
.ann-modal__go {
padding: 11px 22px;
font-size: 13px;
letter-spacing: .06em;
background: var(--copper);
color: var(--accent-ink);
border: 1px solid var(--copper);
transition: background .2s ease, border-color .2s ease;
}
.ann-modal__go:hover { background: var(--copper-hi); border-color: var(--copper-hi); }
.ann-modal__close {
padding: 11px 20px;
font-size: 13px;
letter-spacing: .06em;
background: transparent;
color: var(--muted);
border: 1px solid var(--line);
cursor: pointer;
transition: color .2s ease, border-color .2s ease;
}
.ann-modal__close:hover { color: var(--text); border-color: var(--muted); }
@media (max-width: 640px) {
.ann-bar { padding: 9px 16px; font-size: 13px; gap: 9px; }
.ann-bar__text { white-space: normal; }
.ann-modal__inner { padding: 22px 18px 16px; }
.ann-modal__title { font-size: 18px; }
.ann-modal__foot { flex-direction: column-reverse; align-items: stretch; }
.ann-modal__go, .ann-modal__close { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
.ann-bar:not([hidden]),
.ann-modal__inner { animation: none; }
}
/* ---------------- 引流弹窗：停留若干秒后出现 ----------------
为什么是右下角的小卡片，而不是居中大弹窗：访客正读到一半被整屏遮罩打断，
第一反应是找关闭按钮，而不是打电话。这里用