/* ========================================================================== 宁波祥荣再生资源有限公司 · 主样式表 - 设计令牌（:root）→ 基础重置 → 布局 → 组件 → 页面 → 响应式 - 断点：1200 / 992 / 768 / 576 ========================================================================== */ /* ---------- 1. 设计令牌 ---------- */ :root { /* 品牌色：锈橙（工业质感） */ --brand: #2e6f96; --brand-dark: #235775; --brand-light: #4b8fb6; --brand-tint: #e7eff5; --blue: #2b3540; --blue-tint: #eef1f4; --accent: #2e6f96; --accent-dark: #235775; /* 高级点缀：香槟金 */ --gold: #cfd8de; --gold-light: #b6c6d1; /* 黑金体系（2026-09-15 强化）：金箔三阶 + 浅底用金 + 金上墨字 */ --gold-foil-1: #e9eff3; --gold-foil-2: #bccbd6; --gold-foil-3: #90a6b4; --gold-ink: #16212a; --gold-deep: #5e7787; --gold-line: #90a6b4; /* 中性色（暖调） */ --ink: #14191e; --ink-2: #3c464e; --ink-3: #68747d; --line: #e2e7eb; --line-2: #ced7dd; --bg: #f8fafb; --bg-soft: #edf1f4; --bg-deep: #1e2831; --navy: #111a21; --navy-2: #1b242c; /* 语义色 */ --ok: #5f7a3a; --warn: #b5563a; --danger: #b03a2a; /* 排版 */ --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* 标题衬线（2026-09-17 模板 B：「抄参考站的视觉气质」）。只给标题用，正文 --font 不动。 汉字衬线优先系统自带 → 下载 0 KB；西文回落到 Times/Georgia 衬线，与宋体骨架同族， 避免标题里中西文两种骨架打架。落点实测：macOS → STSong，Windows → SimSun。 */ --font-serif: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif SC", "Noto Serif CJK SC", "SimSun", "Times New Roman", Georgia, serif; /* 2026-09-25：首屏蒙版六个令牌已随整屏蒙版一并移除（说明见 .hero::before 处）。 */ --fs-h1: clamp(2rem, 1.35rem + 2.8vw, 3.3rem); --fs-h2: clamp(1.6rem, 1.2rem + 1.7vw, 2.4rem); --fs-h3: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); --fs-body: 1rem; --fs-sm: 0.9rem; --fs-xs: 0.8125rem; --lh: 1.75; /* 间距与圆角 */ --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-5: 3.25rem; --sp-6: 5rem; --r-sm: 10px; --r: 16px; --r-lg: 20px; --r-pill: 999px; /* 阴影（暖调柔和） */ --sh-1: 0 1px 2px rgba(23,25,27,0.05); --sh-2: 0 8px 28px rgba(23,25,27,0.09); --sh-3: 0 20px 56px rgba(23,25,27,0.14); /* 布局 */ /* 2026-09-17 版心提档 1500→1320：1500px 容器配 24px 边距， 在任意 ≤1548px 屏幕上首屏文字都会贴着左缘（实测 1440 下仅 24px） */ --maxw: 1320px; --header-h: 78px; } /* ---------- 2. 基础重置 ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4, h5 { margin: 0 0 var(--sp-2); /* 2026-09-17 模板 B：全站标题换衬线（正文仍是 --font 无衬线），令牌见 :root --font-serif */ font-family: var(--font-serif); line-height: 1.3; font-weight: 600; letter-spacing: 0.005em; color: var(--ink); } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-size: 1.075rem; } p { margin: 0 0 var(--sp-2); } p:last-child { margin-bottom: 0; } a { color: var(--brand); text-decoration: none; transition: color 0.2s; } a:hover { color: var(--brand-dark); } img, svg, video { max-width: 100%; height: auto; display: block; } img { background: var(--bg-soft); } ul, ol { margin: 0 0 var(--sp-2); padding-left: 1.4em; } li { margin-bottom: 0.4em; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } table { width: 100%; border-collapse: collapse; } th, td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); text-align: left; } :focus-visible { outline: 3px solid var(--brand-light); outline-offset: 2px; border-radius: 4px; } .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; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--gold-foil-2); color: var(--gold-ink); padding: 0.75rem 1.25rem; border-radius: 0 0 var(--r) 0; } .skip-link:focus { left: 0; } /* ---------- 3. 布局 ---------- */ .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-3); } .container-wide { max-width: 1320px; } .section { padding: var(--sp-6) 0; } .section-soft { background: var(--bg-soft); } .section-tight { padding: var(--sp-5) 0; } .grid { display: grid; gap: var(--sp-3); } .g-2 { grid-template-columns: repeat(2, 1fr); } .g-3 { grid-template-columns: repeat(3, 1fr); } .g-4 { grid-template-columns: repeat(4, 1fr); } .g-6 { grid-template-columns: repeat(6, 1fr); } .row { display: flex; gap: var(--sp-3); } .row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; } .row-center { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } .section-head { max-width: 780px; margin: 0 auto var(--sp-4); text-align: center; } .section-head.left { margin-left: 0; text-align: left; } .section-head p { color: var(--ink-2); font-size: 1.05rem; } .section-head h2 { position: relative; padding-bottom: var(--sp-3); } .section-head h2::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 56px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--gold), var(--brand)); } .section-head.left h2::after { left: 0; transform: none; } .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand); background: var(--brand-tint); padding: 0.35rem 0.85rem; border-radius: var(--r-pill); margin-bottom: var(--sp-2); } .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); } /* ---------- 4. 顶部导航 ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(247,249,251,0.92); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); transition: box-shadow 0.25s; } .site-header.is-stuck { box-shadow: var(--sh-2); } .site-header .container { max-width: var(--maxw); } .header-inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); } .logo { display: flex; align-items: center; gap: 0.95rem; flex-shrink: 0; } .logo-mark { width: 60px; height: 60px; flex-shrink: 0; display: grid; place-items: center; color: var(--ink); } .logo-mark svg { width: 100%; height: 100%; display: block; } .logo-text { display: flex; flex-direction: column; justify-content: center; line-height: 1.32; } .logo-name { font-weight: 800; font-size: 1.24rem; color: var(--ink); white-space: nowrap; letter-spacing: 0.04em; } .logo-slogan { font-size: 0.85rem; color: var(--ink-3); letter-spacing: 0.1em; white-space: nowrap; } .main-nav { margin-left: 3.2rem; } .main-nav ul { display: flex; align-items: center; gap: 0.9rem; margin: 0; padding: 0; list-style: none; } .main-nav a { display: block; padding: 0.6rem 1.15rem; border-radius: var(--r-pill); font-size: 1.08rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; letter-spacing: 0.03em; } .main-nav a:hover, .main-nav a.is-active { color: var(--gold-ink); background: linear-gradient(135deg, var(--gold-foil-1) 0%, var(--gold-foil-2) 100%); box-shadow: inset 0 0 0 1px rgba(120, 145, 165, 0.5); } .header-actions { display: flex; align-items: center; gap: var(--sp-2); } .header-tel { display: flex; align-items: center; gap: 0.45rem; font-weight: 800; color: var(--ink); font-size: 1.14rem; white-space: nowrap; letter-spacing: 0.02em; } .header-tel svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--gold-deep); } .nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line-2); background: #fff; border-radius: var(--r-sm); padding: 0; place-items: center; } .nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 3px auto; transition: 0.25s; } /* ---------- 5. 按钮 ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.8rem 1.6rem; border-radius: var(--r-pill); border: 1px solid transparent; font-weight: 600; font-size: 0.95rem; text-align: center; cursor: pointer; transition: transform 0.15s, box-shadow 0.2s, background 0.2s, color 0.2s; white-space: nowrap; } .btn:hover { transform: translateY(-2px); } /* 主行动按钮：金箔（渐变光泽 + 内高光 + 暖金外阴影），墨字 13.5:1 */ .btn-primary, .btn-accent { background: linear-gradient(135deg, var(--gold-foil-1) 0%, var(--gold-foil-2) 48%, var(--gold-foil-3) 100%); color: var(--gold-ink); font-weight: 700; letter-spacing: 0.01em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 6px 18px rgba(121, 125, 129, 0.24); } .btn-primary:hover, .btn-accent:hover { background: linear-gradient(135deg, #e3ebf2 0%, #c3cad0 48%, #a8aeb3 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 10px 26px rgba(121, 125, 129, 0.34); } /* 次行动按钮：雾金浮雕（哑光实底 + 上下内阴影，无外发光） */ .btn-outline { background: linear-gradient(180deg, #ccd4da 0%, #cfd8de 58%, #a9afb5 100%); border-color: var(--gold-line); color: var(--gold-ink); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(89, 92, 95, 0.26); } .btn-outline:hover { background: linear-gradient(180deg, #dbe3ea 0%, #c4cbd1 58%, #b1b8bd 100%); border-color: #81868a; color: var(--gold-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(89, 92, 95, 0.3), 0 6px 16px rgba(121, 125, 129, 0.22); } /* 深色区幽灵按钮：金边金字，hover 透金光 */ .btn-ghost-light { border-color: rgba(180, 198, 210, 0.5); color: #fff; } .btn-ghost-light:hover { background: rgba(180, 198, 210, 0.16); border-color: rgba(180, 198, 210, 0.78); color: var(--gold-foil-1); } .btn-sm { padding: 0.55rem 1.1rem; font-size: var(--fs-sm); } .btn-lg { padding: 1rem 2rem; font-size: 1.05rem; } .btn-block { width: 100%; } /* ---------- 5b. 首屏主按钮：透明底 + 白描边 + 光标涟漪（2026-09-18 模板 B 第 3 条） ---------- 对标 v6-1q97r.globalso.site 的 btn-bg-color="none" + btn-ani-wave。 作用域限定 .hero-actions：页头 CTA / 底部横幅的 .btn-accent 仍是金箔实底（「只动首页 hero」）。 涟漪用 transform: scale 驱动（只动合成层，不触发重排）；圆心取 --wave-x/--wave-y， 由 main.js 的 initHeroWave() 写入；脚本未生效时缺省 50% → 退化为从按钮中心扩散。 文字色在涟漪铺到之前切墨色：铺满后为「墨字压金」6.2:1；金色实底上留白字只有 2.6:1，会糊。 */ .hero-actions .btn-accent { position: relative; z-index: 0; overflow: hidden; isolation: isolate; background: none; color: #fff; border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: none; transition: transform 0.15s, border-color 0.2s, color 0.18s 0.1s, box-shadow 0.2s; } .hero-actions .btn-accent::before { content: ""; position: absolute; left: var(--wave-x, 50%); top: var(--wave-y, 50%); width: 340%; aspect-ratio: 1 / 1; border-radius: 50%; z-index: -1; pointer-events: none; background: linear-gradient(135deg, var(--gold-foil-1) 0%, var(--gold-foil-2) 48%, var(--gold-foil-3) 100%); transform: translate(-50%, -50%) scale(0); transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); } .hero-actions .btn-accent:hover, .hero-actions .btn-accent:focus-visible { background: none; color: var(--gold-ink); border-color: var(--gold-foil-1); box-shadow: 0 10px 26px rgba(6, 14, 20, 0.35); } .hero-actions .btn-accent:hover::before, .hero-actions .btn-accent:focus-visible::before { transform: translate(-50%, -50%) scale(1); } /* ---------- 6. 首屏 Hero ---------- */ .hero { position: relative; overflow: hidden; color: #fff; /* 首屏实景底图：厂区天际线 + 三堆物料（粉煤灰 / 脱硫石膏 / 炉渣灰）。 2026-09-17 模板 B：底图下移到 .hero::before（与蒙版同一层）—— .hero 里装着正文，直接给 .hero 加 scale 动效会把文字一起放大，底图必须单独一层。 */ background-color: #20262c; background-image: none; } .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; /* 2026-09-25 取消整屏蒙版层（客户裁定：让 UI 适应 banner，而不是用蒙版压 banner）。 原三层压暗渐变（均匀层 / 100deg 斜向层 / 180deg 垂直层）与暖色光晕全部移除； 首屏底图回归 （index.html），Ken Burns 动画一并迁到该 img； 文字可读性改由 .hero-copy::before 的柔和暗衬承担（下方），照片主体不再被遮挡。 ⚠ 教训：此前两条素材换代注释嵌套导致本块 background-image 整体解析失败被丢弃， 蒙版与底图同时消失（字节一致 + alt 正确都挡不住），故此处直接 display:none。 */ display: none; } /* 首屏底图缓慢推近：2.5s 走完一次即停（不循环 —— 循环会一直动，B2B 站显轻浮）。 无障碍不必另写：文件里已有的 @media (prefers-reduced-motion: reduce) 会把 全站 animation-duration 压到 0.01ms，本条动画随之定格在末帧。 */ @keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.06); } } .hero::after { content: ""; position: absolute; inset: 0; opacity: 0.16; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1.4px); background-size: 22px 22px; mask-image: radial-gradient(circle at 68% 38%, #000, transparent 72%); -webkit-mask-image: radial-gradient(circle at 68% 38%, #000, transparent 72%); } /* 左右留白与全站栅格一致（此前 padding 的横向被写成 0，导致首屏内容顶到视口边缘） */ .hero-inner { position: relative; z-index: 2; padding: clamp(3rem, 2rem + 5vw, 6rem) var(--sp-3); } .hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); align-items: center; } /* 2026-09-17 加宽：原 780px 是「左文字+右表单卡」两栏时左栏的宽度， 白卡改弹窗后右栏空出，文字块显得单薄、重心全偏左 */ .hero-copy { position: relative; max-width: 880px; } /* 2026-09-25 文字区柔和暗衬：取消整屏蒙版后，用贴文字的径向渐变保证可读， 向右渐隐 → 右侧筒仓主体完全不被遮挡。实测（1440×900 真渲染）： 主标题 9.40 / 副题金 6.87 / 正文 9.42 / 按钮 13.15 / 卖点行 11.44，全部 ≥4.5。 —— 同日补修「硬切边」：径向椭圆的横半径 132%（纵 152%）超出本元素矩形， 于是上/下/右三条边界被硬裁成直线（实测台阶 上 -78 / 下 +9 / 右 +14 灰阶， 而照片自身边缘的基线是 0，肉眼就是一条刀切线）。径向渐变的 stop 只有一维， 无法让四周同时归零（上下边对应 t≈0.32、右边对应 t≈0.71，归零会连带削掉文字区底衬） ⇒ 正解是不动渐变本体，只给元素加**双轴 mask 羽化**。 羽化宽度刻意用 px 而非 %：元素尺寸随断点变化，px 才能保证任何视口下羽化都不侵入 文字区（本元素四侧留白 = 上 64 / 右 208 / 下 80 / 左 96 px，羽化 56/168/56/56 全部留足）。 判据（7 断点 1440→390 真渲染）：文字区逐像素差 ≤2 灰阶、四边界台阶 ≤2、 五带对比度 5.99~14.18 且与未加 mask 时**逐条一致**（渐变本体未动）。 */ .hero-copy::before { content: ""; position: absolute; z-index: -1; inset: -4rem -13rem -5rem -6rem; background: radial-gradient(132% 152% at 6% 48%, rgba(10, 16, 22, 0.82) 0%, rgba(10, 16, 22, 0.70) 30%, rgba(10, 16, 22, 0.44) 55%, rgba(10, 16, 22, 0.17) 76%, rgba(10, 16, 22, 0) 93%); /* 双轴 mask 羽化（见上）：上/下/左/右四条边界各自收到 0，杜绝硬裁直线。 多值 mask 默认按 source-over 叠加，纯叠加也能消掉四条边；intersect 语义更准确。 本文件既有 mask-image 用法（装饰纹样）是「标准在前、webkit 在后」，此处对齐该约定。 */ mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, #000 56px, #000 calc(100% - 168px), rgba(0, 0, 0, 0) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000 56px, #000 calc(100% - 56px), rgba(0, 0, 0, 0) 100%); -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, #000 56px, #000 calc(100% - 168px), rgba(0, 0, 0, 0) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000 56px, #000 calc(100% - 56px), rgba(0, 0, 0, 0) 100%); mask-composite: intersect; -webkit-mask-composite: source-in; } .hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; /* 2026-09-17 提亮：蒙版减轻后深色胶囊在暖亮底图上发闷，改为金箔实底 + 墨字（13.9:1） */ background: linear-gradient(135deg, var(--gold-foil-1) 0%, var(--gold-foil-2) 100%); border: 1px solid rgba(255, 255, 255, 0.55); color: var(--gold-ink); box-shadow: 0 6px 18px rgba(10, 18, 24, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.6); padding: 0.4rem 1rem; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 700; margin-bottom: var(--sp-3); } .hero h1 { color: #fff; margin-bottom: var(--sp-3); text-shadow: 0 2px 20px rgba(6, 14, 20, 0.40), 0 1px 3px rgba(6, 14, 20, 0.48); } .hero h1 .hl { color: #a0cfe8; text-shadow: 0 2px 20px rgba(6, 14, 20, 0.48), 0 1px 3px rgba(6, 14, 20, 0.55); } /* 2026-09-25 手机端首屏提亮（客户反馈：「手机端怎么 banner 这么暗」）。 根因不是底图暗，是柔光暗衬在窄屏铺满了整个视口： · 暗化均值 桌面 24.8 灰阶 → 手机 50.3（翻倍）；被压暗 >40 灰阶的面积 26.5% → 53.2% · 而底图本身手机端更亮（无柔光时 141.8 vs 桌面 134.7） 缘由：径向椭圆的横半径 132% 是为「向右渐隐、把右侧留给照片」设计的， 窄屏文字块横跨整屏，这个前提不成立 ⇒ 整个视口都落在 0.82 / 0.70 的高 alpha 区。 窄屏改用**纵向线性**（上浓下淡）：文字密集区与底图亮部（天空）都在上部； 下部底图本身已是暗部（无柔光时 44~79 灰阶），不需要重压。 同时加强副题 .hl 的阴影 —— 副题是浅青 #a0cfe8，手机端文字区包含桌面端不含的 亮天空（无柔光时 225 灰阶），副题在其上天然对比吃紧，是本项的瓶颈 （实测：只降暗化而不加阴影，副题只有 3.9~4.33 < 4.5）。 实测（768/480/390/360 真渲染）：亮度 91.5 → 111.6（桌面 109.9）、 强压暗面积 53.2% → 29.7%、最低对比度 5.04~5.38 全 ≥4.5； 桌面 1440 的亮度与五带对比度与改前**逐项一致**（本媒体查询之外零影响）。 ⚠ 本块必须位于 .hero h1 .hl 主规则**之后**：同特异性下后声明胜出，放前面会被覆盖。 */ @media (max-width: 768px) { .hero-copy::before { background: linear-gradient(to bottom, rgba(10, 16, 22, 0.60) 0%, rgba(10, 16, 22, 0.34) 46%, rgba(10, 16, 22, 0.30) 100%); } .hero h1 .hl { text-shadow: 0 1px 12px rgba(6, 14, 20, 0.92), 0 1px 3px rgba(6, 14, 20, 0.98), 0 0 26px rgba(6, 14, 20, 0.70); } } .hero-lead { font-size: clamp(1rem, 0.95rem + 0.35vw, 1.2rem); color: rgba(255, 255, 255, 0.95); margin-bottom: var(--sp-4); max-width: 800px; text-shadow: 0 1px 14px rgba(6, 14, 20, 0.55), 0 1px 3px rgba(6, 14, 20, 0.42); } .hero-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); } .hero-points { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: 0; padding: 0; list-style: none; } .hero-points li { display: flex; align-items: center; gap: 0.45rem; font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.95); text-shadow: 0 1px 10px rgba(6, 14, 20, 0.55); } .hero-points li::before { content: "✓"; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--brand-light); color: #fff; font-size: 0.7rem; font-weight: 700; flex-shrink: 0; } /* Hero 数据条 */ .hero-stats { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255, 255, 255, 0.28); border-top: 1px solid rgba(206, 213, 220, 0.5); } /* 2026-09-17 提亮：原为 --navy 纯黑实底的一整条黑板，改暖调半透明 + 背景模糊，让实景透出来 */ .hero-stats .stat { background: rgba(21, 22, 23, 0.44); -webkit-backdrop-filter: blur(8px) saturate(130%); backdrop-filter: blur(8px) saturate(130%); padding: var(--sp-3) var(--sp-2); text-align: center; } .hero-stats .num { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); font-weight: 800; color: #fff; line-height: 1.2; text-shadow: 0 1px 10px rgba(6, 14, 20, 0.5); } .hero-stats .num .unit { font-size: 0.55em; margin-left: 2px; color: #cad1d8; } .hero-stats .label { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.88); } /* 需求询价弹窗（2026-09-16：原首屏白卡改弹出式，消除与深色 hero 的违和） */ .modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: var(--sp-3); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.22s ease, visibility 0.22s ease; } .modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .modal-backdrop { position: absolute; inset: 0; background: rgba(13,15,17,0.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .modal-dialog { position: relative; z-index: 1; width: 100%; max-width: 460px; max-height: calc(100dvh - 2 * var(--sp-3)); overflow-y: auto; background: #fff; color: var(--ink); border-radius: var(--r-lg); box-shadow: var(--sh-3); border-top: 3px solid var(--brand); padding: var(--sp-4); transform: translateY(16px) scale(0.98); transition: transform 0.24s ease; } .modal.is-open .modal-dialog { transform: none; } .modal-close { position: absolute; top: 0.9rem; right: 0.9rem; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--bg-soft); color: var(--ink-3); cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s; } .modal-close:hover { color: var(--brand); border-color: var(--brand); background: #fff; } .modal-close svg { width: 16px; height: 16px; } .modal-head { margin-bottom: var(--sp-3); padding-right: 2.5rem; } .modal-eyebrow { display: inline-block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; color: var(--brand); margin-bottom: 0.4rem; } .modal-head h3 { font-size: 1.3rem; margin-bottom: 0.35rem; } .modal-head .sub { font-size: var(--fs-sm); color: var(--ink-3); } .modal .form-row { margin-bottom: var(--sp-2); } .modal .form-note { font-size: var(--fs-xs); color: var(--ink-3); margin-top: var(--sp-2); text-align: center; } body.no-scroll { overflow: hidden; } /* ---------- 7. 卡片通用 ---------- */ .card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: var(--sp-3); transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; height: 100%; } .card-hover:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--line-2); } /* 深墨金边卡：替代原锈橙实底卡（首页行业卡 + about/contact/resources/resource-article 侧栏卡） */ .card.is-dark, .sidebar-card.is-dark { background: radial-gradient(circle at 88% 6%, rgba(180, 198, 210, 0.16), transparent 46%), linear-gradient(152deg, #1d2023 0%, #111a21 58%, #0a0c0d 100%); border-color: rgba(180, 198, 210, 0.26); color: #dfe7ec; box-shadow: inset 0 1px 0 rgba(180, 198, 210, 0.12), 0 10px 28px rgba(12, 20, 26, 0.16); } .card.is-dark h3, .sidebar-card.is-dark h3 { color: #e0e8ef; } .card.is-dark p, .sidebar-card.is-dark p { color: rgba(217, 225, 231, 0.74); } .card.is-dark.card-hover:hover { border-color: rgba(180, 198, 210, 0.46); box-shadow: inset 0 1px 0 rgba(180, 198, 210, 0.16), 0 16px 38px rgba(12, 20, 26, 0.26); } .sidebar-card.is-dark li { border-bottom-color: rgba(180, 198, 210, 0.18); } /* 图标块 */ .icon-box { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); margin-bottom: var(--sp-2); flex-shrink: 0; } .icon-box svg { width: 26px; height: 26px; } .icon-box.blue { background: var(--blue-tint); color: var(--blue); } .icon-box.accent { background: #e7eff5; color: var(--accent); } .icon-box.sm { width: 40px; height: 40px; border-radius: 10px; } .icon-box.sm svg { width: 20px; height: 20px; } /* 三大综合利用专区 */ .materials-section { background: linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%); } /* 三大综合利用 · Banner 卡（整张卡为深色底图 + 白字压图） */ .materials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } .material-card { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 540px; color: #fff; background-color: var(--navy); background-size: cover; background-position: center; border: 1px solid rgba(255, 255, 255, 0.10); border-radius: var(--r-lg); box-shadow: var(--sh-2); transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; } .material-card:hover { transform: translateY(-8px); box-shadow: var(--sh-3); border-color: rgba(167, 173, 178, 0.45); } /* 压暗层 + 暖色渐晕：保证白字在底图上依然可读 */ .material-card::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: /* 竖向：顶轻底重 —— 2026-09-17 二次提亮（0.22/0.38/0.72 → 0.10/0.20/0.50） */ linear-gradient(180deg, rgba(15, 16, 16, 0.10) 0%, rgba(15, 16, 16, 0.20) 48%, rgba(15, 16, 16, 0.50) 100%), /* 横向：左压右透（0.44/0.28/0.03 → 0.40/0.22/0.06） */ linear-gradient(92deg, rgba(15, 16, 16, 0.40) 0%, rgba(15, 16, 16, 0.22) 44%, rgba(15, 16, 16, 0.06) 100%), radial-gradient(circle at 88% 4%, rgba(127, 132, 136, 0.26), transparent 56%); } /* 颗粒质感 */ .material-card::after { content: ""; position: absolute; inset: 0; z-index: 1; opacity: 0.18; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1.4px); background-size: 20px 20px; mask-image: radial-gradient(circle at 72% 10%, #000, transparent 74%); -webkit-mask-image: radial-gradient(circle at 72% 10%, #000, transparent 74%); } /* 三张卡各自的实景底图：均为品类对应的物料实拍视角，主体在右、文字压在左侧暗部。 2026-09-23：三张底图均换为客户提供的真实物料堆场实拍（原为 AI 生成图）。 */ .material-card.m1 { background-image: url("../img/flyash-banner.jpg?v=2026092303"); background-position: center; } .material-card.m2 { background-image: url("../img/fgd-gypsum-banner.jpg?v=2026092303"); background-position: center; } .material-card.m3 { background-image: url("../img/bottom-ash-banner.jpg?v=2026092303"); background-position: center; } .material-idx { position: absolute; right: 1.1rem; top: 0.5rem; z-index: 2; font-size: 3.2rem; font-weight: 800; line-height: 1; color: rgba(255, 255, 255, 0.26); letter-spacing: -0.02em; text-shadow: 0 0 3px rgba(13, 14, 14, 0.90), 0 2px 10px rgba(12,14,16,0.60); } .material-banner { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; gap: 0.7rem; padding: 1.9rem 1.6rem 1.7rem; /* 底图提亮后，靠零偏移辉光把字形从照片里拎出来（text-shadow 可继承到所有子元素） */ text-shadow: 0 0 3px rgba(13, 14, 14, 0.90), 0 1px 2px rgba(13, 14, 14, 0.85), 0 2px 10px rgba(13, 14, 14, 0.55); } .material-tag { align-self: flex-start; font-size: var(--fs-xs); font-weight: 700; /* 亮图上白底半透明会糊成一片 → 改深底 + 金箔字 */ color: #cfd7dd; background: rgba(15, 16, 16, 0.51); border: 1px solid rgba(255, 255, 255, 0.41); padding: 0.22rem 0.75rem; border-radius: var(--r-pill); } .material-name { font-size: 1.35rem; margin: 0; color: #fff; } .material-sub { align-self: flex-start; margin: 0; font-size: var(--fs-sm); font-weight: 600; /* 金色小字压亮图必然不达标 → 浅香槟字 + 深色带 + 金箔左标，保住金色识别度 */ color: #d7dee5; background: rgba(15, 16, 16, 0.44); border-left: 3px solid var(--gold-light); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 0.3rem 0.75rem 0.3rem 0.6rem; } .material-desc { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.96); margin: 0; } .material-specs { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; } .material-specs li { font-size: var(--fs-xs); font-weight: 600; color: #fff; background: rgba(15, 16, 16, 0.51); border: 1px solid rgba(255, 255, 255, 0.39); border-radius: var(--r-sm); padding: 0.18rem 0.6rem; } .material-apps { display: flex; flex-wrap: wrap; gap: 0.4rem; } .material-apps span { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.92); background: rgba(15, 16, 16, 0.31); border: 1px dashed rgba(255, 255, 255, 0.39); border-radius: var(--r-sm); padding: 0.18rem 0.6rem; } .material-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem 0.9rem; list-style: none; margin: 0.15rem 0 0; padding: 0.85rem 0.9rem 0.9rem; /* 指标带：给纯白 16px 粗体一个确定性的底，避免被亮图顶穿（原 border-top → 整条深带） */ background: rgba(15, 16, 16, 0.26); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--r-sm); } .material-stats li { margin: 0; } .material-stats b { display: block; font-size: 0.98rem; font-weight: 800; color: #fff; letter-spacing: 0.01em; } .material-stats span { font-size: 0.72rem; color: rgba(255, 255, 255, 0.94); } .material-actions { display: flex; gap: 0.55rem; flex-wrap: wrap; margin-top: auto; padding-top: 0.6rem; } .material-actions .btn { padding: 0.6rem 1.1rem; font-size: 0.85rem; text-shadow: none; } /* 业务卡 */ .service-card { display: flex; flex-direction: column; } .service-card h3 { font-size: 1.15rem; margin-bottom: 0.5rem; } .service-card p { color: var(--ink-2); font-size: var(--fs-sm); } .service-card ul { margin: var(--sp-2) 0 0; padding-left: 1.1em; font-size: var(--fs-sm); color: var(--ink-2); } .service-card ul li { margin-bottom: 0.3em; } /* 产品卡 */ .product-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; } .product-thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(135deg, var(--brand-tint), #dfe7ee); display: grid; place-items: center; } .product-thumb svg { width: 46%; height: 46%; color: var(--brand); opacity: 0.85; } /* 产品卡头图：有 banner 时覆盖在图标之上；图片加载失败会被 JS 移除，自动露出图标兜底 */ .product-thumb .product-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); } /* 顶部渐变遮罩：保证左上角 tag 在浅色物料图上仍清晰可读 */ .product-thumb .thumb-shade { position: absolute; left: 0; top: 0; width: 100%; height: 52%; background: linear-gradient(180deg, rgba(15,18,20,0.42), rgba(15,18,20,0)); z-index: 2; pointer-events: none; } .product-card:hover .product-thumb .product-img { transform: scale(1.05); } .product-thumb .tag { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 3; background: rgba(255, 255, 255, 0.94); color: var(--brand); font-size: var(--fs-xs); font-weight: 700; padding: 0.25rem 0.6rem; border-radius: var(--r-pill); } .product-body { padding: var(--sp-3); display: flex; flex-direction: column; flex: 1; gap: 0.5rem; } .product-body h3 { font-size: 1.08rem; margin: 0; } .product-meta { font-size: var(--fs-sm); color: var(--ink-3); } .product-spec { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; } .product-spec li { font-size: var(--fs-xs); background: var(--bg-soft); border: 1px solid var(--line); padding: 0.15rem 0.55rem; border-radius: var(--r-sm); color: var(--ink-2); } .product-body .btn { margin-top: auto; } /* 行业卡 */ .industry-card { position: relative; overflow: hidden; padding: var(--sp-4); display: flex; flex-direction: column; } .industry-card .idx { position: absolute; right: 1rem; top: 0.5rem; font-size: 3.5rem; font-weight: 800; color: var(--brand); opacity: 0.07; line-height: 1; } .industry-card h3 { font-size: 1.25rem; } .industry-card .waste-list { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: var(--sp-2) 0 var(--sp-3); padding: 0; } .industry-card .waste-list li { font-size: var(--fs-xs); background: var(--brand-tint); color: var(--brand-dark); padding: 0.2rem 0.6rem; border-radius: var(--r-sm); font-weight: 600; } .industry-card .btn { margin-top: auto; align-self: flex-start; } /* 优势条目 */ .adv-item { display: flex; gap: var(--sp-2); } .adv-item h4 { margin-bottom: 0.25rem; font-size: 1.05rem; } .adv-item p { font-size: var(--fs-sm); color: var(--ink-2); margin: 0; } /* 流程步骤 */ .flow { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-2); counter-reset: flow; } .flow-step { position: relative; text-align: center; } .flow-step .dot { /* 2026-09-17 三改：近黑实心球在暖白底上过重（客户「与网站风格违和」）→ 改金箔浅底圆， 与站内 .icon-box 的「浅暖底 + 深色符号」同语汇；数字用古铜 #525557，圆最深端 5.1:1。 */ width: 48px; height: 48px; margin: 0 auto var(--sp-2); border-radius: 50%; background: linear-gradient(155deg, #f4fdff 0%, #e3ebf2 46%, #d0d7de 100%); color: #525557; display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 0 0 1px rgba(120, 145, 165, 0.42), 0 3px 10px rgba(108, 112, 115, 0.14); } .flow-step:not(:last-child)::after { content: ""; position: absolute; top: 24px; left: calc(50% + 32px); right: calc(-50% + 32px); height: 1px; background: repeating-linear-gradient(90deg, rgba(120, 145, 165, 0.55) 0 5px, transparent 5px 11px); } .flow-step h4 { font-size: 0.95rem; margin-bottom: 0.25rem; } .flow-step p { font-size: var(--fs-xs); color: var(--ink-3); margin: 0; } /* 数据展示 */ .stat-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: var(--sp-3); text-align: center; } .stat-card .num { font-size: 2rem; font-weight: 800; color: var(--brand); line-height: 1.2; } .stat-card .num .unit { font-size: 0.5em; margin-left: 2px; color: var(--gold); } .stat-card .label { font-size: var(--fs-sm); color: var(--ink-2); } /* 客户/案例 */ .case-card { padding: var(--sp-3); } .case-quote { font-size: var(--fs-sm); color: var(--ink-2); font-style: italic; margin-bottom: var(--sp-2); } .case-meta { display: flex; align-items: center; gap: 0.75rem; } .case-avatar { /* 2026-09-17 三改：与 .flow-step .dot 统一为金箔浅底圆（客户「与网站风格违和」）。 */ width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(155deg, #f4fdff 0%, #e3ebf2 46%, #d0d7de 100%); color: #525557; display: grid; place-items: center; font-weight: 800; flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 0 0 1px rgba(120, 145, 165, 0.42), 0 3px 10px rgba(108, 112, 115, 0.14); } .case-meta .who { font-weight: 700; font-size: var(--fs-sm); line-height: 1.3; } .case-meta .what { font-size: var(--fs-xs); color: var(--ink-3); } /* 新闻卡 */ .post-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; } .post-thumb { aspect-ratio: 16 / 9; background: linear-gradient(135deg, #dfe7ee, #eaf2f9); display: grid; place-items: center; } .post-thumb svg { width: 34%; color: var(--brand); opacity: 0.6; } .post-body { padding: var(--sp-3); display: flex; flex-direction: column; gap: 0.5rem; flex: 1; } .post-cat { align-self: flex-start; font-size: var(--fs-xs); font-weight: 700; color: var(--brand); background: var(--brand-tint); padding: 0.15rem 0.6rem; border-radius: var(--r-sm); } .post-body h3 { font-size: 1.05rem; margin: 0; line-height: 1.45; } .post-body h3 a { color: var(--ink); } .post-body h3 a:hover { color: var(--brand); } .post-excerpt { font-size: var(--fs-sm); color: var(--ink-2); margin: 0; } .post-foot { margin-top: auto; font-size: var(--fs-xs); color: var(--ink-3); display: flex; gap: var(--sp-2); } /* FAQ */ .faq-list { max-width: 880px; margin: 0 auto; } .faq-item { border: 1px solid var(--line); border-radius: var(--r); margin-bottom: var(--sp-2); background: #fff; overflow: hidden; } .faq-q { width: 100%; text-align: left; background: none; border: 0; padding: var(--sp-2) var(--sp-3); font-weight: 700; font-size: 1rem; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); } .faq-q::after { content: "+"; font-size: 1.4rem; color: var(--brand); font-weight: 400; line-height: 1; flex-shrink: 0; } .faq-item.open .faq-q::after { content: "−"; } .faq-a { padding: 0 var(--sp-3); max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; } .faq-item.open .faq-a { padding: 0 var(--sp-3) var(--sp-3); max-height: 1200px; } .faq-a p { color: var(--ink-2); font-size: var(--fs-sm); } /* ---------- 8. 表单 ---------- */ .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); } .field { display: flex; flex-direction: column; gap: 0.35rem; } .field-full { grid-column: 1 / -1; } .field label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); } .field label .req { color: var(--danger); } .field input, .field select, .field textarea { width: 100%; padding: 0.7rem 0.85rem; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: #fff; transition: border-color 0.2s, box-shadow 0.2s; font-size: 0.95rem; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(47, 121, 191, 0.14); } .field textarea { min-height: 120px; resize: vertical; } .field .err { font-size: var(--fs-xs); color: var(--danger); display: none; } .field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--danger); } .field.invalid .err { display: block; } .form-note { font-size: var(--fs-xs); color: var(--ink-3); } .form-success { display: none; background: var(--brand-tint); border: 1px solid var(--brand-light); color: var(--brand-dark); padding: var(--sp-2) var(--sp-3); border-radius: var(--r); font-size: var(--fs-sm); font-weight: 600; } .form-success.show { display: block; } /* ---------- 9. 面包屑 / 页头 ---------- */ .breadcrumb { padding: var(--sp-2) 0; background: var(--bg-soft); border-bottom: 1px solid var(--line); } .breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; font-size: var(--fs-xs); color: var(--ink-3); } .breadcrumb li + li::before { content: "/"; margin-right: 0.4rem; color: var(--line-2); } .breadcrumb a { color: var(--ink-3); } .breadcrumb a:hover { color: var(--brand); } /* 2026-09-17 提亮：原为 #111a21→#1b242c 近黑，是全站内页「一进来就发闷」的主因，改暖金米色浅底 */ .page-head { background: radial-gradient(circle at 88% 14%, rgba(180, 198, 210, 0.34), transparent 58%), linear-gradient(135deg, #f7fafc 0%, #eaf0f4 58%, #dde6ec 100%); color: var(--ink); padding: clamp(2.5rem, 2rem + 3vw, 4rem) 0; position: relative; overflow: hidden; border-bottom: 1px solid rgba(120, 145, 165, 0.42); } .page-head::after { content: ""; position: absolute; inset: 0; opacity: 0.55; pointer-events: none; background-image: linear-gradient(rgba(120,145,165,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(120,145,165,.16) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(115deg, transparent 26%, #000 94%); -webkit-mask-image: linear-gradient(115deg, transparent 26%, #000 94%); } .page-head .container { position: relative; z-index: 2; } .page-head h1 { color: var(--ink); margin-bottom: 0.5rem; } .page-head p { color: var(--ink-2); max-width: 720px; margin: 0; } /* ---------- 10. 内容排版（文章 / 详情） ---------- */ .prose { max-width: 780px; } .prose h2 { margin-top: var(--sp-4); font-size: 1.5rem; } .prose h3 { margin-top: var(--sp-3); font-size: 1.2rem; } .prose p, .prose li { color: var(--ink-2); } .prose ul li::marker { color: var(--brand-light); } .prose blockquote { margin: var(--sp-3) 0; padding: var(--sp-2) var(--sp-3); border-left: 4px solid var(--brand-light); background: var(--bg-soft); border-radius: 0 var(--r) var(--r) 0; color: var(--ink-2); } .prose table { margin: var(--sp-3) 0; font-size: var(--fs-sm); } .prose th { background: var(--bg-soft); font-weight: 700; } .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* TL;DR 摘要块（GEO 友好） */ .tldr { background: var(--brand-tint); border: 1px solid #c3d9ee; border-left: 4px solid var(--brand); border-radius: var(--r); padding: var(--sp-3); margin-bottom: var(--sp-4); } .tldr h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand-dark); margin-bottom: 0.5rem; } .tldr p, .tldr li { font-size: var(--fs-sm); color: var(--ink-2); } /* ---------- 文章 E-EAT 组件 ---------- */ /* 作者署名卡：Expertise + Authoritativeness */ .author-card { display: flex; align-items: flex-start; gap: 0.9rem; padding: var(--sp-2) 0; margin-bottom: var(--sp-3); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .author-avatar { /* 2026-09-17 三改：与 .flow-step .dot / .case-avatar 统一为金箔浅底圆（同语汇，冷黑白球是孤例）。 */ flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(155deg, #f4fdff 0%, #e3ebf2 46%, #d0d7de 100%); color: #525557; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 0 0 1px rgba(120, 145, 165, 0.42), 0 3px 10px rgba(108, 112, 115, 0.14); } .author-meta { min-width: 0; } .author-name { font-weight: 700; font-size: var(--fs-sm); color: var(--ink); } .author-title { font-size: var(--fs-xs); color: var(--ink-2); margin-top: 2px; } .author-dates { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin-top: 0.4rem; font-size: var(--fs-xs); color: var(--ink-3); } /* 一线经验依据：Experience */ .exp-note { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0.75rem var(--sp-2); font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: var(--sp-3); } .exp-label { display: inline-block; margin-right: 0.5rem; padding: 1px 0.5rem; background: linear-gradient(135deg, var(--gold-foil-1) 0%, var(--gold-foil-2) 48%, var(--gold-foil-3) 100%); color: var(--gold-ink); border-radius: 4px; font-size: var(--fs-xs); font-weight: 700; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); } /* 关键词标签 */ .kw-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: var(--sp-3) 0; } .kw-label { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 700; } .kw-tag { display: inline-block; padding: 0.25rem 0.7rem; border: 1px solid var(--line-2); border-radius: 999px; font-size: var(--fs-xs); color: var(--ink-2); background: #fff; transition: all 0.2s; } .kw-tag:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); } /* 内链锚文本块（相关产品 / 相关文章） */ .rel-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: var(--sp-3) 0; } .rel-label { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 700; } .rel-link { display: inline-block; padding: 0.35rem 0.85rem; border: 1px solid var(--line-2); border-radius: 999px; font-size: var(--fs-sm); color: var(--ink-2); background: #fff; transition: all 0.2s; } .rel-link:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-tint); } /* 文章区块 */ .art-block { margin-top: var(--sp-4); } .art-block > h2 { font-size: 1.25rem; margin-bottom: var(--sp-2); padding-left: 0.75rem; border-left: 3px solid var(--brand); } /* 参考依据：Trustworthiness */ .art-refs ol { padding-left: 1.4rem; margin: 0; } .art-refs li { font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: 0.5rem; } .ref-title { font-weight: 600; } .ref-src { display: inline-block; margin-left: 0.5rem; font-size: var(--fs-xs); color: var(--ink-3); } /* FAQ 折叠 */ .art-faq .faq-item { border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 0.6rem; overflow: hidden; } .art-faq .faq-q { cursor: pointer; padding: 0.9rem var(--sp-2); font-weight: 600; font-size: var(--fs-sm); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .art-faq .faq-q::-webkit-details-marker { display: none; } .art-faq .faq-q::after { content: "+"; color: var(--brand); font-size: 1.2rem; line-height: 1; } .art-faq .faq-item[open] .faq-q::after { content: "−"; } .art-faq .faq-item[open] .faq-q { color: var(--brand-dark); } .art-faq .faq-a { padding: 0 var(--sp-2) var(--sp-2); font-size: var(--fs-sm); color: var(--ink-2); max-height: none; overflow: visible; } .art-faq .faq-a p { font-size: var(--fs-sm); color: var(--ink-2); } /* 免责声明 */ .art-disclaimer { margin-top: var(--sp-4); padding: 0.75rem var(--sp-2); background: var(--bg-soft); border-left: 3px solid var(--line-2); font-size: var(--fs-xs); color: var(--ink-3); } /* 侧栏 */ .sidebar-card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r); padding: var(--sp-3); margin-bottom: var(--sp-3); } .sidebar-card h3 { font-size: 1rem; margin-bottom: var(--sp-2); } .sidebar-card ul { list-style: none; padding: 0; margin: 0; font-size: var(--fs-sm); } .sidebar-card li { border-bottom: 1px dashed var(--line-2); padding: 0.5rem 0; } .sidebar-card li:last-child { border-bottom: 0; } .layout-sidebar { display: grid; grid-template-columns: 1fr 320px; gap: var(--sp-4); align-items: start; } /* 目录 */ .toc { position: sticky; top: calc(var(--header-h) + 1rem); } .toc a { display: block; font-size: var(--fs-sm); color: var(--ink-2); padding: 0.3rem 0 0.3rem 0.75rem; border-left: 2px solid var(--line); } .toc a:hover, .toc a.active { color: var(--brand); border-left-color: var(--brand); } /* 规格表 */ .spec-table { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .spec-table th { width: 160px; background: var(--bg-soft); font-weight: 600; color: var(--ink-2); } .spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; } /* 标签筛选 */ .filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--sp-4); } .filter-btn { padding: 0.45rem 1rem; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: #fff; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); } .filter-btn:hover { border-color: var(--gold-line); color: var(--gold-deep); } .filter-btn.is-active { background: linear-gradient(135deg, var(--gold-foil-1) 0%, var(--gold-foil-2) 100%); border-color: var(--gold-line); color: var(--gold-ink); font-weight: 700; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); } /* 时间线 */ .timeline { list-style: none; margin: 0; padding: 0 0 0 2rem; position: relative; } .timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--line-2); } .timeline li { position: relative; margin-bottom: var(--sp-3); } .timeline li::before { content: ""; position: absolute; left: -2rem; top: 8px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--brand-light); } .timeline .year { font-weight: 800; color: var(--brand); font-size: 1.05rem; } .timeline .txt { font-size: var(--fs-sm); color: var(--ink-2); } /* 联系信息 */ .contact-card { display: flex; gap: var(--sp-2); align-items: flex-start; } .contact-card .txt { font-size: var(--fs-sm); } .contact-card .txt strong { display: block; font-size: 0.95rem; margin-bottom: 0.15rem; } .contact-card .txt span { color: var(--ink-2); } /* 资质徽章 */ .cert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-2); } .cert-item { border: 1px dashed var(--line-2); border-radius: var(--r); padding: var(--sp-2); text-align: center; font-size: var(--fs-sm); color: var(--ink-2); background: #fff; } .cert-item strong { display: block; color: var(--ink); } /* ---------- 11. CTA 横幅 ---------- */ .cta-banner { /* 2026-09-17 三改：暖琥珀/黄铜端过亮（客户「太亮，缺乏高级感」）→ 压深为深胡桃棕， 并加 1px 金箔内边。高级感来自深底与金的对比，不是整块都亮。白字 10.6:1。 */ background: linear-gradient(135deg, #202122 0%, #2c2e2f 52%, #3c3e40 100%); color: #fff; border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-4); text-align: center; position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(180, 198, 210, 0.20), inset 0 1px 0 rgba(218, 225, 232, 0.10), var(--sh-2); } .cta-banner::after { content: ""; position: absolute; inset: 0; opacity: 0.9; pointer-events: none; background-image: radial-gradient(circle at 86% 6%, rgba(180, 198, 210, 0.21), transparent 46%), radial-gradient(circle at 8% 98%, rgba(120, 145, 165, 0.12), transparent 50%); } .cta-banner > * { position: relative; z-index: 2; } .cta-banner h2 { color: #fff; } .cta-banner p { color: rgba(255, 255, 255, 0.92); max-width: 640px; margin: 0 auto var(--sp-3); } .cta-actions { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; } /* ---------- 12. 页脚 ---------- */ .site-footer { background: var(--bg-deep); color: rgba(255, 255, 255, 0.80); padding: var(--sp-5) 0 0; margin-top: var(--sp-6); } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--sp-4); padding-bottom: var(--sp-4); } .site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: var(--sp-2); } .site-footer ul { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); } .site-footer li { margin-bottom: 0.5rem; } .site-footer a { color: rgba(255, 255, 255, 0.80); } .site-footer a:hover { color: #fff; } .footer-about p { font-size: var(--fs-sm); margin-bottom: var(--sp-2); } .footer-contact li { display: flex; gap: 0.5rem; } .footer-contact strong { color: #fff; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); padding: var(--sp-2) 0; font-size: var(--fs-xs); display: flex; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; } /* ---------- 13. 移动端浮动条 ---------- */ .mobile-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(15, 35, 60, 0.08); padding: 0.5rem; padding-bottom: calc(0.5rem + env(safe-area-inset-bottom)); } .mobile-bar .inner { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; } .mobile-bar a { display: flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.7rem 0.5rem; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 700; } .mobile-bar .m-tel { background: linear-gradient(180deg, #ccd4da 0%, #cfd8de 58%, #a9afb5 100%); color: var(--gold-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); } .mobile-bar .m-quote { background: linear-gradient(135deg, var(--gold-foil-1) 0%, var(--gold-foil-2) 48%, var(--gold-foil-3) 100%); color: var(--gold-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55); } .mobile-bar .m-top { background: var(--bg-soft); color: var(--ink-2); } /* ---------- 14. 滚动动画 ---------- */ [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; } [data-reveal].is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } [data-reveal] { opacity: 1; transform: none; transition: none; } * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ---------- 14b. 厂区实景图组（about.html「公司简介」下方实拍） ---------- */ .site-gallery { display: grid; gap: var(--sp-3); grid-template-columns: repeat(3, 1fr); margin-top: var(--sp-3); } .site-gallery figure { margin: 0; } .site-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg-soft); } .site-gallery figcaption { margin-top: 0.6rem; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.65; } /* ---------- 15. 响应式 ---------- */ /* 2026-09-18：阈值 1520 → 1700。原来只覆盖到 1520，但页头一行的 max-content 在**任意** >1520 的视口都超过 1320 容器（页头与首屏共用 --maxw）， 只是被页边距吃掉而已 —— 页边距 = (视口 − 1320)/2，要盖住约 172px 的超出量 需要 ≥1664px；1600 视口实测文档被撑宽 11px（index/about 两页）。 抬到 1700 后 1600 复查为 0（_c8_probe.txt）。 */ @media (max-width: 1700px) { /* 电话与副标语始终可见，仅收紧导航与操作区，确保与导航同行不溢出 */ .main-nav { margin-left: 1.4rem; } .main-nav ul { gap: 0.35rem; } .main-nav a { padding: 0.55rem 0.75rem; font-size: 1.02rem; } .header-tel { font-size: 1.02rem; } .header-actions { gap: 0.6rem; } .header-actions .btn { padding: 0.7rem 1rem; font-size: 0.9rem; } } @media (max-width: 1400px) { .logo-name { font-size: 1.14rem; letter-spacing: 0.02em; } .main-nav { margin-left: 1.5rem; } .main-nav ul { gap: 0.3rem; } .main-nav a { padding: 0.5rem 0.7rem; font-size: 1rem; letter-spacing: 0.01em; } .header-tel { font-size: 1rem; } .header-actions { gap: 0.6rem; } } @media (max-width: 1200px) { /* 模板 B 第 4 条：本断点蒙版由逐视口实测反解（_c5.py），非估计值 */ .flow { grid-template-columns: repeat(4, 1fr); } /* 4 列 2 行：第 4 个是第 1 行行末，右边没有下一个圆点，但基础规则 `.flow-step:not(:last-child)::after` 照样给它连线，右端落在 「步宽 ×1.5 − 32px」，比 .flow 内容右缘多出 0.5×列宽 − 32px （834/900/992/1080/1200 实测 60/68/80/91/106px，减去容器 24px 右内边距 正是文档被撑宽的 36/45/56/67/82px）。行末一律不画。 nth-child(4n) 对任意条目数都成立；最后一个由基础规则的 :not(:last-child) 排除。原来的 -n+4 是多余的，n+5 还会把第 2 行 5→6、6→7 的连线一起误杀。 */ .flow-step:nth-child(4n)::after { display: none; } /* 1081–1200：导航还是横排，但 1200 视口容器只有 1152px，页头一行 max-content ≈1173 → 文档被撑宽 18px（about.html 实测）。 ≤1080 会收成汉堡菜单，所以只有这一段露出来；按「1520→1400」既有的 渐进收紧思路再收一档。 */ .main-nav { margin-left: 0.9rem; } .main-nav ul { gap: 0.3rem; } .main-nav a { padding: 0.5rem 0.62rem; font-size: 0.97rem; } .header-tel { font-size: 0.96rem; } .header-actions { gap: 0.5rem; } .header-actions .btn { padding: 0.62rem 0.85rem; font-size: 0.86rem; } } @media (max-width: 992px) { /* 模板 B 第 4 条：本断点蒙版由逐视口实测反解（_c5.py），非估计值 */ .materials-grid { grid-template-columns: 1fr; } .material-card { min-height: auto; } } @media (max-width: 1080px) { .nav-toggle { display: grid; } .main-nav { /* margin-left 必须归零：≤1520/≤1400 两档给它设过 1.4rem/1.5rem， 而 position:fixed + left:0 + right:0 时 margin-left 会「右移 + 等量减宽」 → 抽屉变成「左留 24px、右留 0px」（375/768/1080 实测 x=24、宽=视口−24、 右缘=视口）。见 _c9_menu.txt。 */ position: fixed; inset: var(--header-h) 0 auto 0; background: #fff; margin-left: 0; border-bottom: 1px solid var(--line); box-shadow: var(--sh-2); max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .main-nav.is-open { max-height: calc(100dvh - var(--header-h)); overflow-y: auto; } .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: var(--sp-2); } .main-nav a { padding: 0.9rem 1rem; border-bottom: 1px solid var(--line); font-size: 1.05rem; letter-spacing: 0.02em; } .main-nav li:last-child a { border-bottom: 0; } .hero-grid { grid-template-columns: 1fr; gap: var(--sp-4); } .g-4 { grid-template-columns: repeat(2, 1fr); } .g-3 { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: repeat(2, 1fr); } .layout-sidebar { grid-template-columns: 1fr; } .toc { position: static; } .mobile-bar { display: block; } body { padding-bottom: 68px; } } @media (max-width: 768px) { /* 模板 B 第 4 条：本断点蒙版由逐视口实测反解（_c5.py），非估计值 */ :root { --sp-6: 3rem; --sp-5: 2.25rem; } .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } .flow { grid-template-columns: repeat(2, 1fr); } .flow-step::after { display: none !important; } .hero-stats { grid-template-columns: repeat(2, 1fr); } .form-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .site-gallery { grid-template-columns: repeat(2, 1fr); } .section-head p { font-size: 1rem; } .header-tel { display: none; } } @media (max-width: 576px) { /* 模板 B 第 4 条：本断点蒙版由逐视口实测反解（_c5.py），非估计值 */ .container { padding: 0 var(--sp-2); } .logo { gap: 0.6rem; } .logo-mark { width: 52px; height: 52px; } .logo-name { font-size: 1.02rem; letter-spacing: 0; } /* 320/360/375：`.logo{flex-shrink:0}` + 公司名/标语 nowrap → logo 块 max-content 306.4px 永不收缩，页头一行 = 306.4 + 24(gap) + 44(汉堡) = 374.4px， 而这三档可用宽只有 288/328/343px → 文档被撑宽 70/30/15px （反推：320+70 = 360+30 = 375+15 = 390 = 16(容器左内边距) + 374 ✓）。 改「允许收缩 + 中文名换行」：320 下公司名拿到 ~158px、15 字排成 2 行， 品牌块总高 ≈39px < --header-h: 78px，不挤压、不省略。 标语另需隐去：它 0.85rem + nowrap ≈241px，是 .logo-text 的 min-content 来源， 只让它换行会变成「名字 2 行 + 标语 2 行」≈75px 顶到 78px 的头高。 */ .logo { flex-shrink: 1; min-width: 0; } .logo-text { min-width: 0; } .logo-name { white-space: normal; line-height: 1.2; } .logo-slogan { display: none; } .header-actions .btn { display: none; } .hero-actions .btn { width: 100%; } .btn { padding: 0.75rem 1.2rem; } .modal { padding: var(--sp-2); } .modal-dialog { padding: var(--sp-3); } .cta-banner { padding: var(--sp-4) var(--sp-3); } .site-gallery { grid-template-columns: 1fr; } } /* ---------- 16. 打印 ---------- */ @media print { .site-header, .site-footer, .mobile-bar, .cta-banner { display: none !important; } body { padding: 0; } a::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; } } /* ===== 模板 A：首页模块重排（对标 nbymoutdoor 架构，只动首页） ===== */ .stats-section { padding-top: var(--sp-5); padding-bottom: var(--sp-5); } .stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } .stats-bar .stat { text-align: center; } .stats-bar .num { font-family: var(--font-serif); font-size: clamp(2rem, 3vw, 3rem); font-weight: 600; color: var(--ink); } .stats-bar .label { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 6px; } /* 产品卡 7 张：≥1201 每行 4 张（4+3 两行排满）；≤1200 转 3 列；≤576 2 列 */ .product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); } .pcard { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; color: #fff; background-size: cover; background-position: center; text-decoration: none; isolation: isolate; min-width: 0; } .pcard::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(18, 19, 19,0.05) 40%, rgba(18, 19, 19,0.72) 100%); } .pcard-tag { position: absolute; top: 12px; left: 12px; z-index: 1; font-size: 11px; color: #fff; background: rgba(0,0,0,0.35); padding: 3px 9px; border-radius: 999px; } .pcard-body { position: relative; z-index: 1; padding: 14px; } .pcard-body b { display: block; font-size: 1.05rem; font-weight: 600; } .pcard-body em { display: block; font-style: normal; font-size: 12px; opacity: 0.85; margin-top: 3px; } .pc-flyash { background-image: url("../img/products/fly-ash.jpg?v=2026092303"); } .pc-fgdgypsum { background-image: url("../img/products/fgd-gypsum.jpg?v=2026092303"); } .pc-slagpowder { background-image: url("../img/products/slag-powder.jpg?v=2026092303"); } .pc-bottomash { background-image: url("../img/products/bottom-ash.jpg?v=2026092303"); } .pc-coalgangue { background-image: url("../img/products/coal-gangue.jpg?v=2026092303"); } .pc-recycledaggregate { background-image: url("../img/products/recycled-aggregate.jpg?v=2026092303"); } .pc-sludgetreatment { background-image: url("../img/products/sludge-treatment.jpg?v=2026092303"); } .pc-scrapmetal { background-image: url("../img/products/scrap-metal.jpg?v=2026092303"); } .pc-wasteplastic { background-image: url("../img/products/waste-plastic.jpg?v=2026092303"); } .pc-wastepaper { background-image: url("../img/products/waste-paper.jpg?v=2026092303"); } .factory-section { padding-top: var(--sp-6); padding-bottom: var(--sp-6); } .factory-panel { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sp-5); align-items: center; } .factory-copy .eyebrow { color: var(--accent); } .factory-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-top: var(--sp-4); } .factory-stats .stat { text-align: left; } .factory-stats .num { font-family: var(--font-serif); font-size: 1.9rem; font-weight: 600; color: var(--ink); } .factory-stats .label { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 4px; } .cases-section { padding-top: var(--sp-6); padding-bottom: var(--sp-6); } .case-carousel { display: flex; gap: var(--sp-3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--sp-2); -webkit-overflow-scrolling: touch; } .case-slide { flex: 0 0 300px; scroll-snap-align: start; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg); } .case-thumb { aspect-ratio: 16 / 9; background: linear-gradient(135deg, #e5edf4 0%, #d0d7de 100%); display: flex; align-items: center; justify-content: center; } .case-thumb span { font-family: var(--font-serif); font-size: 2.4rem; color: var(--accent); opacity: 0.55; } .case-info { padding: var(--sp-3); } .case-tag { font-size: 11px; color: var(--accent); } .case-info h3 { font-size: 1.02rem; margin: 6px 0; } .case-info p { font-size: var(--fs-sm); color: var(--ink-2); margin: 0; } @media (max-width: 1200px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 992px) { .factory-panel { grid-template-columns: 1fr; } .stats-bar { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-4); } } @media (max-width: 576px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .factory-stats { grid-template-columns: repeat(2, 1fr); } .case-slide { flex-basis: 260px; } } /* ===== 模板 C：内页转化 / 信任（对标 YM / GS 内页） ===== */ .quote-guide { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; background: var(--bg-soft, #edf1f4); border: 1px solid var(--line, #e2e7eb); border-left: 3px solid var(--accent, #2e6f96); border-radius: 4px; padding: 14px 18px; margin-bottom: var(--sp-3, 16px); } .quote-guide strong { color: var(--ink, #14191e); font-size: 1rem; font-weight: 600; } .quote-guide span { font-size: var(--fs-sm, 0.875rem); color: var(--ink-2, #3c464e); } .delivery-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3, 16px); counter-reset: step; } .delivery-steps li { position: relative; padding-top: 18px; border-top: 2px solid var(--accent, #2e6f96); } .delivery-steps li::before { counter-increment: step; content: counter(step); position: absolute; top: -15px; left: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--accent, #2e6f96); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; } .delivery-steps b { display: block; font-size: 1rem; color: var(--ink, #14191e); } .delivery-steps span { font-size: var(--fs-sm, 0.875rem); color: var(--ink-2, #3c464e); } .related-products .blk-title, .order-delivery .blk-title { margin-bottom: var(--sp-3, 16px); } @media (max-width: 992px) { .delivery-steps { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-4, 24px); } } @media (max-width: 576px) { .delivery-steps { grid-template-columns: 1fr; } } /* ===== 模板 C · 服务全程卡（关于页「从询价到长期合作」） ===== 原来复用 .card，与上方「我们的原则」完全同款，无层次；这里给阶段卡专属语汇： 序号 + 右上巨号衬线水印 + 顶部品牌渐变线（悬停展开）+ 悬停上浮。 */ .svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3, 16px); } .svc-card { position: relative; overflow: hidden; padding: 26px 22px 22px; background: #fff; border: 1px solid var(--line, #e2e7eb); border-radius: var(--r, 4px); box-shadow: 0 1px 2px rgba(23,25,27,0.04); transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s; } .svc-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--brand, #2e6f96) 0%, var(--gold-light, #b6c6d1) 46%, var(--gold, #cfd8de) 100%); /* 整条常在（只画 30% 静态看像渲染瑕疵）；悬停时渐变从香槟金滑到品牌锈橙 */ background-size: 220% 100%; background-position: 100% 0; transition: background-position 0.45s ease; } .svc-card:hover::before { background-position: 0 0; } .svc-card::after { content: attr(data-step); position: absolute; top: 4px; right: 14px; font-family: var(--font-serif, serif); font-size: 4.2rem; line-height: 1; font-weight: 700; color: var(--brand, #2e6f96); opacity: 0.075; pointer-events: none; } .svc-no { display: block; font-family: var(--font-serif, serif); font-size: 0.82rem; letter-spacing: 0.16em; color: var(--brand, #2e6f96); margin-bottom: 6px; } .svc-card h4 { font-size: 1.32rem; line-height: 1.35; margin: 0 0 10px; color: var(--ink, #14191e); } .svc-card p { font-size: var(--fs-sm, 0.875rem); line-height: 1.9; color: var(--ink-2, #3c464e); margin: 0; } .svc-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2, 0 6px 18px rgba(23,25,27,0.08)); border-color: var(--line-2, #ced7dd); } /* 候选 B：墨金深色（与站内 .card.is-dark 同材质，作整页的视觉锚点） */ .svc-grid.is-dark .svc-card { background: radial-gradient(circle at 88% 6%, rgba(180, 198, 210, 0.16), transparent 46%), linear-gradient(152deg, #1d2023 0%, #111a21 58%, #0a0c0d 100%); border-color: rgba(180, 198, 210, 0.26); color: #dfe7ec; box-shadow: inset 0 1px 0 rgba(180, 198, 210, 0.12), 0 10px 28px rgba(12, 20, 26, 0.16); } .svc-grid.is-dark .svc-card::before { background: linear-gradient(90deg, var(--gold-foil-3, #90a6b4), var(--gold-foil-1, #e9eff3) 50%, var(--gold-foil-3, #90a6b4)); } .svc-grid.is-dark .svc-card::after { color: var(--gold-foil-2, #cfd8de); opacity: 0.17; } .svc-grid.is-dark .svc-no { color: var(--gold-foil-2, #cfd8de); } .svc-grid.is-dark .svc-card h4 { color: #e0e8ef; } .svc-grid.is-dark .svc-card p { color: rgba(217, 225, 231, 0.78); } .svc-grid.is-dark .svc-card:hover { border-color: rgba(180, 198, 210, 0.46); box-shadow: inset 0 1px 0 rgba(180, 198, 210, 0.16), 0 16px 38px rgba(12, 20, 26, 0.26); } /* ≤1200 一律单列「序号在左」：这一区间正文栏只有 700–944px。 ① 993–1200 是「正文栏 + 右侧栏」双栏期，1100 时三列只剩 217px（≈12 字/行）； ② ≤992 右栏虽已收起，但 768 时三列仍是 224px。 站内原 .g-3 在 ≤992→2 列、≤768→1 列，.svc-grid 不继承，必须自己降列。 单调规则：≥1201（正文栏 ≥880px）才回三列。 */ @media (max-width: 1200px) { .svc-grid { grid-template-columns: 1fr; } .svc-card { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; grid-template-areas: "no title" "no text"; align-items: start; padding: 20px 24px; } .svc-no { grid-area: no; margin: 7px 0 0; } .svc-card h4 { grid-area: title; margin: 0 0 6px; } .svc-card p { grid-area: text; max-width: 34em; } } /* ≤640：回到「序号在上」的竖版卡，与桌面卡同构 */ @media (max-width: 640px) { .svc-card { grid-template-columns: 1fr; grid-template-areas: "no" "title" "text"; padding: 24px 20px 20px; } .svc-no { margin: 0 0 6px; } } /* ===== 模板 D：模块重划（产品中心 = 再生建材原料 / 固废处置服务 = 处置能力）2026-09-18 ===== */ .guide-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-4); align-items: center; padding: 32px 34px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh-1); } .guide-entry .eyebrow { display: block; font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-dark); } .guide-entry h2 { margin: 6px 0 10px; } .guide-entry p { margin: 0 0 14px; color: var(--ink-2); max-width: 34em; } .guide-points { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } .guide-points li { position: relative; padding-left: 20px; font-size: var(--fs-sm); color: var(--ink-2); } .guide-points li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--gold-light)); } .guide-actions { display: flex; flex-direction: column; gap: 12px; min-width: 210px; } .cap-related { margin: var(--sp-2) 0 var(--sp-2); padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 26px; } .cap-related li { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-soft); } .cap-related li a { font-weight: 600; color: var(--ink); } .cap-related li a:hover { color: var(--brand); } .cap-related li span { display: block; margin-top: 4px; font-size: var(--fs-xs); line-height: 1.7; color: var(--ink-2); } /* 1081–1200 是唯一「导航仍横排 + 电话仍显示」的窄带：logo + 8 项导航 + 电话 + 报价按钮 的自然宽度 ≈1200px，超过视口 → 页头把整页撑出横向滚动条（改前 68px、导航改名后 100px）。 此档位隐藏页头电话，只留「获取报价」；电话仍在页脚与手机吸底条上。 */ @media (min-width: 1081px) and (max-width: 1280px) { .header-tel { display: none; } } @media (max-width: 992px) { .guide-entry { grid-template-columns: 1fr; } .guide-actions { flex-direction: row; flex-wrap: wrap; min-width: 0; } } @media (max-width: 768px) { .cap-related { grid-template-columns: 1fr; } } /* ---------- 页头排版（2026-09-19 定稿 · c3 全宽·上限 1920）---------- 诊断：页头一行「真实需求宽度」≈1483px（三块裸宽 1383.3 + 2×24 gap + .main-nav 的 margin-left 51.2），而 .site-header .container 继承正文 的 --maxw:1320 → 内容区只有 1272px。于是宽视口整行右溢（1888/2528 实测 溢出 210.5px），观感「logo 和公司名不够靠左、免费获取方案不够靠右」。 根因是**容器装不下**（不是元素位置写错），所以先让容器装得下。 本段只做三件事，仅作用于 >1080px 的横排页头；≤1080 的汉堡抽屉一字未动； 字号一个都没改（保留「正文放大一档」）： 1) 页头容器与正文解耦：全宽，两侧 padding 用 clamp(24px,2vw,64px) 自适应； 上限 1920 —— 超宽屏不再让三段继续拉开（不限上限时 2528 下间距会到 554.6px）。 2) 清零 .main-nav 的 margin-left（基础样式 3.2rem，各断点 1.4/1.5/0.9rem）。 留着它，「logo→导航」永远比「导航→CTA」大一个 margin-left；清零后由 flex 均分，实测两间距完全相等。 3) >1700 档把导航项 padding/gap 收一档。只在 >1700 收 —— ≤1700 各断点本来 就收过，再套一遍会把导航改宽（1408 实测溢出 10px）。 实测位移（相对改前，真 CSS 真视口 + DOM 实测）： 1408：logo 左缘 68.0 → 28.2（左移 39.8）｜ CTA 右缘 1354.1 → 1379.8（右移 25.7） 1888：logo 左缘 308.0 → 37.8（左移 270.2）｜ CTA 右缘 1790.5 → 1850.3（右移 59.8） 2528：logo 左缘 628.0 → 354.5（左移 273.5）｜ CTA 右缘 2110.5 → 2173.5（右移 63.0） 左右留白对称（28.2 / 37.8 / 354.5），两个间距始终相等（68.0 / 247.4 / 250.6）。 */ @media (min-width: 1081px) { .site-header .container { max-width: 1920px; padding-left: clamp(24px, 2vw, 64px); padding-right: clamp(24px, 2vw, 64px); } .main-nav { margin-left: 0; } } @media (min-width: 1701px) { .main-nav ul { gap: 0.6rem; } .main-nav a { padding: 0.6rem 0.95rem; } .header-actions { gap: 0.8rem; } } /* ---------- 内页页头质感（2026-09-19 定稿 · 乙「香槟金」）---------- 客户原话：「这一块颜色太淡，网格明显，缺乏高级感」。逐像素量化后三条都成立： 整块底 233 灰阶（255 = 纯白）—— 底几乎是白的 纹理纹波 12.3~13.0 灰阶 48px 工程方格网 ::after 铺的，同一条线上连续 16~23 条等距暗竖线 修法（四套候选，本档为「乙」）： ① 底从"米白"改成真正有色的香槟金渐变（左下象牙 #d3dbe2 → 右上香槟铜 #969ba0） —— 整块底 233 → 193 灰阶 ② 干掉方格网（::after → display:none）。⚠️ 网格**不能靠调淡解决**： 试过换成更淡的规则纹理，结果反而更明显 —— 规则图案只要铺在空白上， 永远读作「坐标纸」。高级感只能靠**光泽**（非周期），不能靠**图案**（周期）： 顶部 1px 内高光 + 一条 112° 斜向柔光带 + 收窄的径向（76%×118%，原 120%×142%） + 底边 1px 金箔发丝线（::before，两端淡出） —— 纹理纹波 13.0 → 4.2 灰阶，方格网 0 条 ③ 原来那团很宽的径向高光（峰值 0.78 白）是在往反方向拉 —— 把主色冲淡， 所以底看起来始终"没颜色"。故一并收窄降强。 ④ 字色同步压深（h1 #14191e / p #3c464e），把对比度拉回安全线： h1 7.07:1（原 12.49）、p 6.22:1（原 7.69）—— 都仍在线上（大字 3:1 / 正文 4.5:1） ⚠️ 「再深一档」有算术边界：近黑正文要过 4.5:1，底色任一点不得低于 ≈121 灰阶 （约 L 0.20）。所以中深档最多到 ~150 灰阶；想更深必须整体翻成浅色字。 本档 193 灰阶，离该红线很远，属于安全区。 ⚠️ 实现方式：**层叠覆盖**，不是原地删改。旧 `.page-head` 规则留在原处 （它同时管着 padding / position / overflow），本段以相同特异性写在更后面取胜。 回滚 = 删掉本段 + 版本号回退一位。 影响面：`class="page-head"` 出现在 5 个正式内页（about / contact / industries / news / products），首页 index 没有该区块；自包含演示单页里另有 5 处。 本段只改外观（底色/伪元素/字色），不动 padding、不动字号、不动布局。 实测（真 CSS 真视口，1440 / 1920 / 390 三档共 15 组可读性全达标）。 */ /* ---------- 页头香槟金 · 提淡一档（2026-09-19 第二版）---------- 客户原话：「香槟金颜色再淡一点」。上一版底 193 灰阶，本版把主渐变 3 个色标 整体往白混 32%（#d3dbe2→#dfe7ee / #b2b8be→#c7cfd5 / #969ba0→#b4bbc0）， 底边金箔线 alpha 同步 ×0.808（0.50→0.404 / 0.95→0.768）—— 底变浅后同一条线的相对反差会变大，不减弱就会显跳。 整块底 193 → 212 灰阶（+19） 纹理纹波 4.2 → 4.3 灰阶（没有变化：仍是光泽，不是图案） 48px 方格网 0 条（保持关闭） 对比度 标题 7.07 → 9.53:1　副标题 6.22 → 8.08:1（底只变浅 → 只升不降） ⚠️ 字色（h1 #14191e / p #3c464e）、字号、内边距、光泽图层（顶部内高光 / 112° 斜光 / 径向）**一律未动**。三视口 12/12 组对比度全达标。 ⚠️ 再淡有上限：客户最初抱怨的就是 233 灰阶「太淡」，可用区间约 195~222。 本档 212 居中；222（混白 49%）已接近原值，不建议再往上调。 ⚠️ 回滚 = 把这 4 个色值改回上一版（#d3dbe2 / #b2b8be / #969ba0 / 0.50 / 0.95）。 证据与对照图见 页头质感-20260919/淡色对照/。 */ .page-head { background: linear-gradient(180deg, rgba(244, 253, 255, 0.42) 0%, rgba(244, 253, 255, 0) 20%), linear-gradient(112deg, rgba(243, 252, 255, 0) 24%, rgba(243, 252, 255, 0.44) 41%, rgba(243, 252, 255, 0) 57%), radial-gradient(76% 118% at 100% 0%, rgba(240, 248, 255, 0.40), rgba(240, 248, 255, 0) 62%), linear-gradient(122deg, #dfe7ee 0%, #c7cfd5 42%, #b4bbc0 100%); color: var(--ink); border-bottom: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42); } .page-head::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 3; pointer-events: none; background: linear-gradient(90deg, transparent 0%, rgba(106, 110, 114, 0.404) 16%, rgba(120, 145, 165, 0.768) 50%, rgba(106, 110, 114, 0.404) 84%, transparent 100%); } .page-head::after { display: none; } .page-head h1 { color: #14191e; } .page-head p { color: #3c464e; } /* ---------- 页脚 5 栏（拆「再生建材原料」+「处置服务能力」两栏，全站生效） ---------- 规则必须放在文件末尾：.footer-grid 基础规则在 980 行、≤1080 的两栏规则在 1111 行， 这里再写一遍基础规则会覆盖旧媒体查询 → 所以媒体查询必须一并重写、按宽度降序排。 */ .footer-grid { grid-template-columns: 1.5fr 0.85fr 1fr 1.05fr 1.1fr; } @media (max-width: 1200px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1080px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; } } /* ========================================================================== 第 8 批 · 「深墨金边卡」浅色化（.card.is-dark / .sidebar-card.is-dark） 2026-09-20 · 洪先生拍板 候选 A：暖白瓷底 + 顶部金饰线 -------------------------------------------------------------------------- 放在文件末尾的理由：上游 480~494 行已定义同名规则（近黑渐变 #1d2023 → #0a0c0d）。这里用**同选择器 + 文件末尾**层叠覆盖，不改上游本体； 日后若要回滚，只删本段即可恢复深色，零风险。 覆盖面：该 class 共 4 处载体，改这一处 CSS 全站同时生效，不碰 HTML。 index.html 行业区第 4 张 CTA 卡（.card.card-hover.is-dark） about.html 侧栏卡「需要处置方案？」 contact.html 侧栏卡「急单 / 检修窗口」 news-article.html 侧栏卡「需要针对性建议？」 ⚠️ 三个必须守住的点 1) 文字色必须连卡体 / h3 / p 一起覆盖。上游卡体 color 是 #dfe7ec、h3 是 #e0e8ef、p 是 rgba(217, 225, 231,.74) —— 只改背景不改文字 = 浅底浅字。 2) 顶部金饰线**必须写成背景层**（linear-gradient + `left top / 100% 2px no-repeat`）。 首页那张是普通 .card（overflow:visible，全站只有 .industry-card 带 overflow:hidden）， 用绝对定位 ::before 会在 16px 圆角处外溢；背景层会被 border-radius 正常裁掉。 3) 卡内按钮是站内统一的 .btn-accent 金箔渐变：它在近黑卡上 9.31:1，但在**白卡上本来 就只有 1.87:1**（靠外阴影 + 内高光 + 深墨字立起来，全站一直这个水平）。 本方案实测卡底 vs 金按钮 = 1.67:1，与站内白卡基准同级 → 不掉档。 色值全部取自既有令牌（--gold #cfd8de / --gold-line #90a6b4 / --gold-deep #5e7787）， 未引入新色相。 ========================================================================== */ .card.is-dark, .sidebar-card.is-dark { background: linear-gradient(90deg, rgba(180, 198, 210, 0) 0%, rgba(180, 198, 210, 0.85) 14%, rgba(120, 145, 165, 0.98) 50%, rgba(180, 198, 210, 0.85) 86%, rgba(180, 198, 210, 0) 100%) left top / 100% 2px no-repeat, radial-gradient(circle at 6% 0%, rgba(180, 198, 210, 0.30), transparent 46%), linear-gradient(160deg, #fafdff 0%, #edf6fd 100%); border-color: rgba(120, 145, 165, 0.48); color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(180, 198, 210, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 8px 22px rgba(106, 110, 114, 0.10); } .card.is-dark h3, .sidebar-card.is-dark h3 { color: var(--ink); } .card.is-dark p, .sidebar-card.is-dark p { color: var(--ink-2); } .card.is-dark.card-hover:hover { border-color: rgba(120, 145, 165, 0.72); box-shadow: inset 0 0 0 1px rgba(180, 198, 210, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 14px 30px rgba(106, 110, 114, 0.17); } .sidebar-card.is-dark li { border-bottom-color: rgba(120, 145, 165, 0.26); } /* ========================================================================== 第 9 批 · FAQ「画框」统一（候选 1：金箔画框） 2026-09-21 · 洪先生拍板 候选 1 -------------------------------------------------------------------------- 背景：本批先按「候选 2（墨金细描 + 金色序号）」上线，同日改判为**候选 1**， 所以这一段是候选 2 的替换版（不是叠加）—— 文件末尾只有这一段，回滚 = 删本段。 站上 FAQ 一共有**三种**互不相干的结构，本段把它们统一到同一副「画框」上。 放在文件末尾的理由：B / C 两种各自页面里还带一段内联