@charset "utf-8";
/* ==========================================================================
   ZENITH 全站排版统一  ——  typography.css
   生成日期：2026-09-14（2026-09-15 追加第 12 节：内页正文标题 + 对应响应式阶梯）
   加载顺序：bootstarp.css -> public.css -> style.css -> typography.css（本文件最后）
   --------------------------------------------------------------------------
   本文件修复 4 类排版问题（均基于对现有 CSS 的实际审计）：

   ① 字体不统一
      原站用 ArialMT(50处) / Arial-BoldMT(25处) / MicrosoftYaHei(6处) /
      Poppins-Regular / Poppins-SemiBold / AdobeHeitiStd-Regular / Impact，
      全站既无 @font-face 也无外链字体 —— 这些字体只有访客设备"恰好装了"才生效。
      ArialMT / Arial-BoldMT 是 macOS 专有；Poppins 任何系统都不预装。
      结果：Windows / Android / Linux 访客看到的字体与 Mac 访客完全不同。

   ② 标题没有粗细层级
      原站靠 "Arial-BoldMT" 这个"字体名"伪装粗体，而 font-weight 写的是 normal。
      设备没有该字体时回退成常规字重 —— 标题和正文一样粗，层级消失。

   ③ 完全没有响应式排版
      public.css + style.css 共 92 处 font-size，媒体查询里只有 1 处。
      手机上沿用桌面字号：banner 标题 47px、区块标题 38px、页脚标题 26px。

   ④ 文字颜色发散
      9 种灰（#777777 / #666666 / #7c7c7c / #808498 / #7b8095 / #969ba2 /
      #5e637d / #333333 / #999999）+ bootstrap 默认蓝链接 #007bff，
      与站点主色（深蓝 #161c5e + 橙 #f0581f）冲突。

   --------------------------------------------------------------------------
   ★ 重要说明：首页 hero 大标题是"图片"，不是文字 ★
     首页 .sybanner 在线上渲染结果为空 div（0 个子节点），实际画面来自
     style.css 的 background:url(../img/sy_banner.webp) + background-size:cover。
     也就是说 "Efficient and environmentally friendly production with large output"
     这句话是**烧进 JPG 里的像素**，不是 HTML 文本。
     => 它不受本文件任何字体/字号规则影响，手机端还会因 cover 裁剪而缺字
        （390px 下只看到 "…t and environmentally friendly production…"）。
     => 要修只能换图或改成真实文本覆盖层，属于素材/设计改动，不在本次排版范围内。
     另：.sybanner .syban_con 是 style.css 里遗留的旧结构，现模板已不渲染，
        本文件中相关规则为"预留"（若模板日后恢复该结构，移动端字号即已就位）。
   ========================================================================== */


/* ---------- 1. 设计变量 ---------- */
:root{
  --ff-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",
            Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --c-heading:#161c5e;      /* 标题  主题深蓝 */
  --c-text:#4b5563;         /* 正文  白底对比度 7.0:1（原 #777777 仅 4.48:1） */
  --c-muted:#7b8494;        /* 次要  日期 / 面包屑 / 小字 */
  --c-link:#f0581f;         /* 链接  主题橙（替代 bootstrap 蓝） */
  --c-link-hover:#c9450f;   /* 链接悬停 */
}


/* ---------- 2. 全站统一字体栈（核心） ---------- */
body,
body *:not(code):not(kbd):not(pre):not(samp){font-family:var(--ff-sans)!important}


/* ---------- 3. 渲染质量与断行 ---------- */
html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-size:16px;
  line-height:1.75;
  color:var(--c-text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
/* 长型号 / 长英文单词在窄屏不撑破容器 */
body,p,li,dt,dd,td,th,h1,h2,h3,h4,h5,h6,a,span,div,strong,em{
  overflow-wrap:break-word;word-break:break-word;
}


/* ---------- 4. 标题：颜色 / 行高 / 字距统一 ---------- */
h1,h2,h3,h4,h5,h6{
  color:var(--c-heading);
  line-height:1.3;
  letter-spacing:-.01em;
}


/* ---------- 5. 真粗体还原 ----------
   以下元素原本靠 "Arial-BoldMT" / "Poppins-SemiBold" / "Impact" 字体名伪装粗体，
   换用统一字体栈后必须显式给 700，否则会掉成常规字重。 */
.header .header_bot .navbar .sy_tit ul .nav-link .header_xzys,
.footer .footer_top .footer_lr .footert_l h4,
.sy_pro .sypro_tit h1,
.sycase .sycase_nr h2,
.sycase .sycasenr .sycasenr1 .sycxxnr1 h3,
.sycase .sycasenr .sycasenr1 .sycxxnr1 span,
.synews h2,
.syaboutbk .syabout .syabnr h2,
.syaboutbk .syabout .syabnr span,
.about_comp h2,
.case .sycasenr .sycasenr1 .sycxxnr1 h3,
.case .sycasenr .sycasenr1 .sycxxnr1 span,
.news_top .newstnr1 .newstn_xn h2,
.news_bot .newsb_nr .news_time h3,
.contact_top .contt_tit h2,
.contact_bot .contbot_l h2,
.contact_bot .contbot_l .cont_tj .tijiaob,
.proin_top .proint_nr .prointr_lx .pintrlx_sp p,
.proinxxcs_tit a,
.proinxcs_over h2,
.proinrel_case .sycasenr .sycasenr1 .sycxxnr1 h3,
.proinrel_case .sycasenr .sycasenr1 .sycxxnr1 span,
.caseint_p p span,
.newsin_top .newsinr_nr .newsinrpre h2,
.contact_bot button,
.proinrel_case h2,
.proinrel_pro h2,
.sybanner .syban_con h2{
  font-weight:700!important;
}


/* ---------- 6. 链接颜色：替换 bootstrap 蓝 #007bff ---------- */
a{color:var(--c-link);-webkit-transition:color .2s ease;transition:color .2s ease}
a:hover,
a:focus{color:var(--c-link-hover)}


/* ---------- 7. 正文颜色收敛：9 种灰 -> 1 种 ---------- */
.header .header_top .nav .headtop_emdz span,
.sy_pro .sypro_nr .syprocp1 .sycpnr1 p,
.sycase .sycasenr .sycasenr1 .sycxxnr1 p,
.synews .synews_snr .synewsnr1 p,
.synews .synews_snr .synewsnr1 span,
.pro_bot .sypro_nr .syprocp1 .sycpnr1 p,
.case .sycasenr .sycasenr1 .sycxxnr1 p,
.news_bot .newsb_nr .news_xxnr p,
.contact_top .contt_tit p,
.proin_top .proint_nr .prointr_lx .pintrlx_sp span,
.proin_top .proint_nr .prointr_lx .pintrlx_sp p,
.proinxcs_over p,
.proinrel_case .sycasenr .sycasenr1 .sycxxnr1 p,
.proinrel_pro .sypro_nr .syprocp1 .sycpnr1 p,
.caseint_p p,
.casein_p,
.newsin_top .newsin_nr p,
.newsin_top .newsinr_nr .newsinrpre .newsinnrpimg span,
.about_coop p,
.news_top .newstnr1 .newstn_xn p,
.about_comp p,
.contact_top .contt_nr p,
.synews .synews_bignr .synxnrcol .synewsbn_xxnr p,
.synews .synews_bignr .synxnrcol .synewsbn_xxnr span,
.contact_bot .row .dx p{
  color:var(--c-text)!important;
}


/* ---------- 8. 次要文字颜色收敛 ---------- */
.about_banner .aboban_con .daohant span,
.proin_top .proint_nr .prointr_email span,
.newsin_top .newsint_tit p,
.pro_bot .pro_fy button,
.case .pro_fy button,
.news_bot .pro_fy button{
  color:var(--c-muted)!important;
}


/* ---------- 9. 标题行高修正（原 20px 字号配 35px 行高 = 1.75，过松） ---------- */
.sy_pro .sypro_nr .syprocp1 .sycpnr1 h2,
.pro_bot .sypro_nr .syprocp1 .sycpnr1 h2,
.proin_top .proint_nr h2,
.proinrel_case h2,
.proinrel_pro h2,
.proinrel_pro .sypro_nr .syprocp1 .sycpnr1 h2,
.casein_top .proint_nr h2{
  line-height:1.3!important;
}


/* ---------- 10. 正文行高修正（原 16px 字号配 32px 行高 = 2.0，过松） ---------- */
.synews .synews_snr .synewsnr1 p,
.about_comp p,
.about_coop p,
.news_bot .newsb_nr .news_xxnr p,
.proinxcs_over p,
.caseint_p p,
.casein_p,
.newsin_top .newsint_tit p,
.newsin_top .newsin_nr p,
.contact_top .contt_nr p{
  line-height:1.75!important;
}


/* ---------- 12. 内页正文标题（新闻/案例/产品详情页里编辑器写的各级小标题） ----------
   审计发现下面这几类标题此前一条规则都没有，完全停在 bootstrap 默认状态，
   既与全站「深蓝 #161c5e + 700 字重」的标题体系脱节，手机端也一律不缩小：

     标题                                 桌面实测           手机实测
     .newsin_nr h2   新闻正文小标题       32px w500          32px w500  ← 比文章标题(30px)还大
     .proinxcs_over h2  产品 Overview/…   32px w700          32px w700
     .proin_top .proint_nr h2  产品主标题 28px w400          28px w400
     .casein_top .proint_nr h2 案例主标题 24px w400 lh45px   24px w400 lh45px
     裸 h3（案例页 Project Overview…）    28px w500 #212529  28px w500  ← bootstrap 灰，非品牌色
     .proinrel_pro / .proinrel_case h2    24px               24px
     .newsinrpre h2  上一篇 / 下一篇      24px               24px

   ★ 案例页容器是 class="proin_top casein_top"，上面两个选择器都会命中，
     所以 .casein_top 的规则必须写在 .proin_top 之后（同优先级靠先后取胜）。
   ★ 案例页那两个裸 h3 已在模板里加 class="casein_h3"，
     避免使用 .container > h3 这种会波及全站的宽泛选择器。 */
.newsin_top .newsin_nr h2,
.newsin_top .newsin_nr h3,
.caseint_p h2,
.caseint_p h3,
#tupian h2,
#tupian h3,
.casein_h3,
.proinxcs_over h2,
.proinxcs_over h3{
  color:var(--c-heading)!important;
  font-weight:700!important;
  line-height:1.35!important;
}
.newsin_top .newsin_nr h2,
.caseint_p h2,
#tupian h2,
.proinxcs_over h2{font-size:26px!important}
.newsin_top .newsin_nr h3,
.caseint_p h3,
#tupian h3,
.casein_h3,
.proinxcs_over h3{font-size:20px!important}


/* ---------- 11. 响应式字号阶梯 ----------
   原站媒体查询里只有 1 处 font-size，等于没有做移动端排版。
   下面按断点把"桌面字号"降下来，正文保持 16px（低于 16px 会触发 iOS 聚焦缩放）。 */
@media (max-width:991px){
  /* 首页 banner 主标题 47px -> 30px */
  .sybanner .syban_con h2{font-size:30px!important;line-height:1.25!important}
  .sybanner .syban_con p{font-size:16px!important;line-height:1.7!important}
  /* 各区块大标题 38px -> 26px */
  .sy_pro .sypro_tit h1,
  .sycase .sycase_nr h2,
  .synews h2,
  .syaboutbk .syabout .syabnr h2{font-size:26px!important;line-height:1.3!important}
  /* 联系页 / 新闻详情大标题 */
  .contact_bot h2{font-size:26px!important}
  .newsin_top .newsint_tit h2{font-size:24px!important;line-height:1.35!important}
  .about_comp h2,
  .contact_bot .contbot_l h2{font-size:22px!important}
  /* 页脚 */
  .footer .footer_top .footer_lr .footert_l h4{font-size:20px!important;line-height:1.35!important}
  .footer .footer_top .footer_lr .footert_l p{font-size:15px!important;line-height:1.7!important}
  .footer .footer_top .footer_lr .footert_r span{font-size:17px!important}
  /* 卡片标题与描述 */
  .sy_pro .sypro_nr .syprocp1 .sycpnr1 h2,
  .pro_bot .sypro_nr .syprocp1 .sycpnr1 h2,
  .proinrel_pro .sypro_nr .syprocp1 .sycpnr1 h2,
  .sycase .sycasenr .sycasenr1 .sycxxnr1 h3,
  .case .sycasenr .sycasenr1 .sycxxnr1 h3,
  .proinrel_case .sycasenr .sycasenr1 .sycxxnr1 h3{font-size:18px!important}
  .sy_pro .sypro_nr .syprocp1 .sycpnr1 p,
  .pro_bot .sypro_nr .syprocp1 .sycpnr1 p,
  .proinrel_pro .sypro_nr .syprocp1 .sycpnr1 p,
  .sycase .sycasenr .sycasenr1 .sycxxnr1 p,
  .case .sycasenr .sycasenr1 .sycxxnr1 p,
  .proinrel_case .sycasenr .sycasenr1 .sycxxnr1 p{font-size:15px!important;line-height:1.7!important}
  /* 新闻列表 */
  .synews .synews_bignr .synxnrcol .synewsbn_xxnr h3{font-size:18px!important}
  .synews .synews_bignr .synxnrcol .synewsbn_xxnr p,
  .synews .synews_snr .synewsnr1 p{font-size:15px!important;line-height:1.7!important}
  /* 页面小 banner */
  .about_banner .aboban_con h4{font-size:16px!important;line-height:1.5!important}
  .about_banner .aboban_con .daohant span{font-size:13px!important;line-height:1.5!important}
  /* 文章正文：行距略收，段落间距拉开更好读 */
  .newsin_top .newsin_nr p,
  .proinxcs_over p,
  .casein_p,
  .caseint_p p{font-size:16px!important;line-height:1.8!important}
  /* 装饰性伪元素必须跟着标题一起缩。
     它们原本是按 38px 桌面标题定的固定像素：HOT PRODUCTS 的渐变块 150x41、
     Cases/News/About 的竖条 4x32。标题降到 26px 后若不动，
     伪元素会高出文字 8~12px，看着像"标题顶着一块色板"。 */
  .sy_pro .sypro_tit h1::before{width:104px;height:28px}
  .sycase .sycase_nr h2::before,
  .syaboutbk .syabout .syabnr h2::before{height:22px;bottom:3px}
  .synews h2::before{height:22px;bottom:4px}

  /* 内页正文标题 26 / 20 -> 22 / 18 */
  .newsin_top .newsin_nr h2,
  .caseint_p h2,
  #tupian h2,
  .proinxcs_over h2{font-size:22px!important}
  .newsin_top .newsin_nr h3,
  .caseint_p h3,
  #tupian h3,
  .casein_h3,
  .proinxcs_over h3{font-size:18px!important}
  /* 详情页主标题（.casein_top 必须排在 .proin_top 之后） */
  .proin_top .proint_nr h2{font-size:24px!important}
  .casein_top .proint_nr h2{font-size:21px!important}
  /* 相关区块标题 Related Products / Lasted Cases */
  .proinrel_pro h2,
  .proinrel_case h2{font-size:21px!important}
  /* 上一篇 / 下一篇 */
  .newsin_top .newsinr_nr .newsinrpre h2{font-size:20px!important}
}

@media (max-width:575px){
  .sybanner .syban_con h2{font-size:25px!important}
  .sy_pro .sypro_tit h1,
  .sycase .sycase_nr h2,
  .synews h2,
  .syaboutbk .syabout .syabnr h2{font-size:22px!important}
  .contact_bot h2{font-size:22px!important}
  .newsin_top .newsint_tit h2{font-size:21px!important}
  .footer .footer_top .footer_lr .footert_l h4{font-size:18px!important}
  .proinxcs_over p,
  .casein_p,
  .caseint_p p,
  .newsin_top .newsin_nr p{line-height:1.85!important}
  /* 装饰伪元素再降一档，对应 22px 标题 */
  .sy_pro .sypro_tit h1::before{width:88px;height:24px}
  .sycase .sycase_nr h2::before,
  .synews h2::before,
  .syaboutbk .syabout .syabnr h2::before{height:19px;bottom:3px}

  /* 内页正文标题再降一档 22 / 18 -> 20 / 17 */
  .newsin_top .newsin_nr h2,
  .caseint_p h2,
  #tupian h2,
  .proinxcs_over h2{font-size:20px!important}
  .newsin_top .newsin_nr h3,
  .caseint_p h3,
  #tupian h3,
  .casein_h3,
  .proinxcs_over h3{font-size:17px!important}
  .proin_top .proint_nr h2{font-size:21px!important}
  .casein_top .proint_nr h2{font-size:19px!important}
  .proinrel_pro h2,
  .proinrel_case h2{font-size:19px!important}
  .newsin_top .newsinr_nr .newsinrpre h2{font-size:18px!important}
}