/* Theme Name: HW Solar Theme URI: https://hw-solar.com/ Description: HW Solar 品牌子主题。继承 Sunpal 主题（父主题）的全部视觉样式，但把 Logo、导航、 公司信息、页脚联系方式、首页文案与数字全部改为「后台可编辑」，不再硬编码。 Author: HW Solar Author URI: https://hw-solar.com/ Template: sunpal Version: 1.3.2 Requires at least: 6.0 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: hw-solar Tags: business, custom-logo, custom-menu, translation-ready */ /* ========================================================================== 子主题自带样式：只放「父主题没有、但 HW Solar 需要」的东西。 父主题的 static/css/*.css 与 style.css 由父主题自己加载，此处不重复。 ========================================================================== */ /* 文字版 Logo（未在后台上传 Logo 图片时显示） */ .logo .hw-logo-text { display: flex; align-items: center; gap: 8px; line-height: 1; white-space: nowrap; } .logo .hw-logo-text .hw-logo-mark { display: inline-block; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #0f7a3d 0%, #35b25c 55%, #8ed46a 100%); flex: 0 0 auto; } .logo .hw-logo-text .hw-logo-words { display: flex; flex-direction: column; } .logo .hw-logo-text .hw-logo-words b { font-size: 24px; font-weight: 700; letter-spacing: .5px; color: #0f7a3d; } .logo .hw-logo-text .hw-logo-words em { font-size: 11px; font-style: normal; letter-spacing: 1.6px; text-transform: uppercase; color: #666; } /* 自定义 Logo：父主题 .logo a{height:60%} 配 .logo img{max-height:100%}， 图片又自带 width/height 属性，结果是「高度被压扁、宽度还是原图的 631px」， 方形徽标被拉成一根横条。这里把高度定死、宽度交回浏览器按比例算。 */ .logo a, .logo .custom-logo-link { height: auto; } .logo img, .logo .custom-logo, .logo img.hw-logo-img { width: auto; /* 46px × 1.2：头部 Logo 整体放大约 20%。 后面那个 min() 是保险：头部栏高度 0.7rem 是按视口宽度缩放的 （sunpal 的 rem.js），窄一些的笔记本上头部栏会变矮， 让 Logo 最多占头部高度的 92%，不至于顶到上下边框。 */ height: min(55px, calc(var(--header_height) * .92)); max-width: 360px; /* 300px × 1.2：宽度一起放大，宽扁的 Logo 才不会被压扁 */ max-height: 55px; object-fit: contain; } /* -------------------------------------------------------------------------- 首页首屏 父主题的 .banner .swiper-slide 高度靠 padding-bottom:37% 撑，宽度完全交给 Swiper 的 JS 去写。JS 一不执行（本站就被插件坑过一次）slide 宽度就是 0， 首屏整块空白。所以按「有几张图」分三种形态，全部不依赖脚本： .hw-banner-text 0 张图 → 纯 CSS 文字首屏 .hw-banner-single 1 张图 → CSS 给满宽度 （2 张以上才用 Swiper 轮播，脚本在 assets/js/hw-banner.js） -------------------------------------------------------------------------- */ /* 轮播/单图都先给宽度兜底；Swiper 会用自己的行内样式覆盖它 */ .banner .swiper-slide { width: 100%; } /* 文字首屏 */ .banner .hw-hero-text { position: relative; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 90px 6%; min-height: 530px; background: linear-gradient(120deg, #0a5330 0%, #0f7a3d 55%, #24a05b 100%); overflow: hidden; } /* 用细网格暗示光伏板，避免一大块纯色显得空 */ .banner .hw-hero-text::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 72px 72px; pointer-events: none; } .banner.hw-banner-text .hw-hero-text > * { position: relative; z-index: 1; } /* 文字首屏：slide 不再靠 padding 撑高，交给 .hw-hero-text 自己撑 */ .banner.hw-banner-text .swiper-wrapper { display: block; } .banner.hw-banner-text .swiper-slide { display: block; padding-bottom: 0; } /* 单图：不初始化 Swiper，用 CSS 摆平 */ .banner.hw-banner-single .swiper-wrapper, .banner.hw-banner-single .swiper-slide { display: block; } /* 没有轮播时不要留没用的箭头和圆点 */ .banner.hw-banner-text .banner-pagination, .banner.hw-banner-text .banner-button-prev, .banner.hw-banner-text .banner-button-next, .banner.hw-banner-single .banner-pagination, .banner.hw-banner-single .banner-button-prev, .banner.hw-banner-single .banner-button-next { display: none; } @media (max-width: 1024px) { .banner .hw-hero-text { min-height: 440px; padding: 70px 6%; } } .banner .hw-hero-text h1 { color: #fff; font-size: 44px; font-weight: 700; line-height: 1.25; max-width: 1000px; } /* 仅供屏幕阅读器与搜索引擎识别的主标题 */ .hw-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .banner .hw-hero-text p { color: rgba(255, 255, 255, .92); font-size: 17px; line-height: 1.8; margin-top: 18px; max-width: 820px; } .banner .hw-hero-text .hw-hero-btns { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } .banner .hw-hero-text .hw-hero-btns a { display: inline-block; padding: 13px 30px; border-radius: 4px; font-size: 15px; background: #fff; color: #0b5c2e; font-weight: 600; } .banner .hw-hero-text .hw-hero-btns a.ghost { background: transparent; border: 1px solid rgba(255, 255, 255, .75); color: #fff; } @media (max-width: 767px) { .banner .hw-hero-text h1 { font-size: 26px; } .banner .hw-hero-text p { font-size: 14px; } .banner .hw-hero-text { min-height: 380px; padding: 56px 6%; } .logo .hw-logo-text .hw-logo-words b { font-size: 19px; } .logo img, .logo .custom-logo, .logo img.hw-logo-img { height: 46px; max-height: 46px; } /* 38px × 1.2 */ /* 产品卡在小屏两列 */ .h_products .h_product_list ul li, .h_products .h_product_list .active_our { width: 48% !important; min-height: 120px; } } @media (max-width: 480px) { /* 手机上产品卡一行一个，标题才不会被挤断 */ .h_products .h_product_list ul li, .h_products .h_product_list .active_our { width: 100% !important; } } /* 产品卡片：没有缩略图时不要留空框 */ .h_product_list li .img.is-empty, .h_product_list li .i_tit.is-empty { display: none; } /* 服务卡片：没有上传图标时用色块占位，避免布局塌陷 */ .service_list li .hw-svc-placeholder { width: 72px; height: 72px; margin: 0 auto; border-radius: 50%; background: linear-gradient(135deg, #0f7a3d, #8ed46a); } /* 页脚联系信息的链接颜色跟随父主题，仅修正换行 */ .footer .hw-footer-contact .hw-contact-line { word-break: break-word; } /* 内页 H1（父主题内页原本没有 H1） */ .hw-page-title { padding: 120px 0 30px; } /* 内页 hero：父主题用 .in_banner .tit h3，全站没有 H1。 这里把标题换成 h1 并补一条同值规则，外观不变。 同时给没有特色图的页面一个可见的底色——父主题没给 .in_banner 背景， 白底白字时页面标题实际是看不见的。 */ .in_banner { background: linear-gradient(120deg, #0b5c2e 0%, #12854a 100%); min-height: 300px; } .in_banner .tit h1 { color: #fff; font-size: .5rem; font-weight: bold; line-height: 1.2; } /* 统计数字：父主题用 ::after 自动补 "+"，对「2023」这类数值是错的。 改为由「单位/后缀」字段自己控制。 */ .h_about_list h3::after { content: none; } /* 售后段落没有背景图时用绿色色块，避免白字落在白底上看不见。 */ .h_after_service.hw-band { background: linear-gradient(120deg, #0b5c2e 0%, #12854a 100%); min-height: 300px; padding: 64px 0; box-sizing: border-box; } /* 产品区没有设背景图时的底色 */ .h_products.hw-plain { background: #f6f8f7; } /* 产品卡：父主题假设每张卡里都有一张大图，于是把「当前」那张放大到 35% 宽， 并在它背后压一块灰底（.active_our::before）。我们的产品页还没有照片， 那个效果只剩一块难看的灰。这里统一成等宽卡片网格，四张卡排成一行。 （后台给某个产品页设了特色图，图片会自动出现在卡里。） */ .h_products .h_product_list ul.active { flex-wrap: wrap; justify-content: center; gap: 2% 2%; } .h_products .h_product_list ul li, .h_products .h_product_list .active_our { width: calc( ( 100% - 4% ) / 3 ) !important; min-height: 150px; display: flex; align-items: center; justify-content: center; text-align: center; /* 原来是 2.4% 2%：百分比内边距按「包含块（整个 ul）宽度」解析，不是按卡片自己。 宽屏下 ul 有 1660px，上下各 40px 空白，卡片越高越显空。改成固定像素。 */ padding: 22px 18px; border: 1px solid rgba(0, 0, 0, .06); box-sizing: border-box; } .h_products .h_product_list ul li.active_our::before { content: none; } .h_products .h_product_list ul li:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0, 0, 0, .08); } .h_products .h_product_list ul h4 { border-bottom: 0; padding-bottom: 0; justify-content: center; font-size: .2rem; transition: color .3s ease; } .h_products .h_product_list ul li:hover h4 { color: var(--i_color2); } .h_products .h_product_list ul li .i_tit { width: 100%; } /* 页脚背景：父主题用的是参考站的浅色背景图，页脚文字写死成黑色。 这里换成同色系的浅灰绿（保持「浅底 + 黑字」的组合，对比度才够）， 底部版权条仍是品牌绿底白字。想改成深色页脚就换下面这一行， 同时把 .f_tit / .f_contact_list a 等文字颜色改成 #fff。 */ footer { background: linear-gradient(180deg, #ffffff 0%, #f1f6f2 100%); border-top: 1px solid rgba(0, 0, 0, .06); } /* 页脚 Logo 是白底方形图片，放在浅色页脚上比放在深绿底上自然 */ .f_logo img { max-height: 80px; width: auto; max-width: 100%; } /* 新闻列表：文章少于 3 篇时居中，不要挤在左边 */ .h_news ul { justify-content: center; } /* 文章没有特色图时，用一块浅绿占位，别留一个塌掉的空框 */ .h_news ul li .img.hw-news-noimg { background: linear-gradient(135deg, #e8f3ec, #d3e8dc); } /* 新闻卡片 */ .h_news ul li .i_tit h4 a { color: inherit; } .h_news ul li .date { display: block; margin-top: 8px; font-size: .13rem; color: #888; } .h_news ul li .category { font-size: .13rem; color: #0f7a3d; } .hw-page-title h1 { font-size: 36px; line-height: 1.3; font-weight: 700; } @media (max-width: 767px) { .hw-page-title { padding: 90px 0 20px; } .hw-page-title h1 { font-size: 24px; } } .hw-page-content { padding-bottom: 80px; } /* 面包屑 */ .hw-breadcrumb { font-size: 13px; color: #777; padding: 10px 0 0; } .hw-breadcrumb a { color: #0f7a3d; } /* -------------------------------------------------------------------------- WPForms 表单（页脚询盘 / 右侧弹层 / 联系页） 父主题把样式写死在 #wpforms-60、#wpforms-65 这种「表单 ID」上， 一旦后台换了表单（ID 变了）样式就整块失效。这里改成按容器定位， 换表单不用改 CSS；标签也不再隐藏——本主题的表单没有 placeholder， 把 label 藏起来用户就不知道每个框该填什么。 -------------------------------------------------------------------------- */ .f_form .wpforms-container, #aside_sc_from .wpforms-container, .hw-page-content .wpforms-container { width: 100%; margin: 0; } .f_form div.wpforms-container-full .wpforms-form .wpforms-field, #aside_sc_from div.wpforms-container-full .wpforms-form .wpforms-field, .hw-page-content div.wpforms-container-full .wpforms-form .wpforms-field { position: relative; padding: 0; margin: 0 0 14px; } .f_form div.wpforms-container-full .wpforms-form .wpforms-field-label, #aside_sc_from div.wpforms-container-full .wpforms-form .wpforms-field-label, .hw-page-content div.wpforms-container-full .wpforms-form .wpforms-field-label { display: block; font-size: 13px; line-height: 1.4; color: #444; margin-bottom: 6px; } .f_form div.wpforms-container-full .wpforms-form .wpforms-required-label, #aside_sc_from div.wpforms-container-full .wpforms-form .wpforms-required-label, .hw-page-content div.wpforms-container-full .wpforms-form .wpforms-required-label { color: #d63638; font-size: 13px; } .f_form div.wpforms-container-full .wpforms-form .wpforms-field-sublabel, #aside_sc_from div.wpforms-container-full .wpforms-form .wpforms-field-sublabel, .hw-page-content div.wpforms-container-full .wpforms-form .wpforms-field-sublabel { display: none !important; } .f_form div.wpforms-container-full .wpforms-form input[type="text"], .f_form div.wpforms-container-full .wpforms-form input[type="email"], .f_form div.wpforms-container-full .wpforms-form input[type="tel"], .f_form div.wpforms-container-full .wpforms-form textarea, #aside_sc_from div.wpforms-container-full .wpforms-form input[type="text"], #aside_sc_from div.wpforms-container-full .wpforms-form input[type="email"], #aside_sc_from div.wpforms-container-full .wpforms-form input[type="tel"], #aside_sc_from div.wpforms-container-full .wpforms-form textarea, .hw-page-content div.wpforms-container-full .wpforms-form input[type="text"], .hw-page-content div.wpforms-container-full .wpforms-form input[type="email"], .hw-page-content div.wpforms-container-full .wpforms-form input[type="tel"], .hw-page-content div.wpforms-container-full .wpforms-form textarea { width: 100%; max-width: 100%; box-sizing: border-box; height: 46px; line-height: 46px; padding: 0 14px; font-size: 15px; color: #222; background: #fff; border: 1px solid rgba(0, 0, 0, .14); border-radius: 4px; transition: border-color .3s ease; } .f_form div.wpforms-container-full .wpforms-form textarea, #aside_sc_from div.wpforms-container-full .wpforms-form textarea, .hw-page-content div.wpforms-container-full .wpforms-form textarea { height: 110px; line-height: 22px; padding: 12px 14px; resize: vertical; } .f_form div.wpforms-container-full .wpforms-form input:focus, .f_form div.wpforms-container-full .wpforms-form textarea:focus, #aside_sc_from div.wpforms-container-full .wpforms-form input:focus, #aside_sc_from div.wpforms-container-full .wpforms-form textarea:focus { outline: none; border-color: #0f7a3d; } .f_form div.wpforms-container-full .wpforms-form .wpforms-field-row, #aside_sc_from div.wpforms-container-full .wpforms-form .wpforms-field-row, .hw-page-content div.wpforms-container-full .wpforms-form .wpforms-field-row { width: 100%; max-width: 100%; } .f_form div.wpforms-container-full .wpforms-form .wpforms-field-row-block, #aside_sc_from div.wpforms-container-full .wpforms-form .wpforms-field-row-block, .hw-page-content div.wpforms-container-full .wpforms-form .wpforms-field-row-block { width: calc(50% - 6px); float: left; padding: 0; } .f_form div.wpforms-container-full .wpforms-form .wpforms-field-row-block:last-child, #aside_sc_from div.wpforms-container-full .wpforms-form .wpforms-field-row-block:last-child, .hw-page-content div.wpforms-container-full .wpforms-form .wpforms-field-row-block:last-child { margin-left: 12px; } .f_form div.wpforms-container-full .wpforms-form .wpforms-submit-container, #aside_sc_from div.wpforms-container-full .wpforms-form .wpforms-submit-container, .hw-page-content div.wpforms-container-full .wpforms-form .wpforms-submit-container { text-align: left; padding: 0; margin: 4px 0 0; } .f_form div.wpforms-container-full .wpforms-form button[type="submit"], .f_form div.wpforms-container-full .wpforms-form input[type="submit"], #aside_sc_from div.wpforms-container-full .wpforms-form button[type="submit"], .hw-page-content div.wpforms-container-full .wpforms-form button[type="submit"], .f_form .wpforms-submit, #aside_sc_from .wpforms-submit, .hw-page-content .wpforms-submit { display: inline-block !important; width: auto !important; min-width: 190px; height: 48px !important; line-height: 46px !important; padding: 0 30px !important; margin: 0 !important; font-size: 15px !important; font-weight: 700; letter-spacing: .3px; color: #fff !important; background: #0f7a3d !important; border: 1px solid #0f7a3d !important; border-radius: 4px; text-transform: none; cursor: pointer; transition: background .3s ease, border-color .3s ease; } .f_form div.wpforms-container-full .wpforms-form button[type="submit"]:hover, #aside_sc_from div.wpforms-container-full .wpforms-form button[type="submit"]:hover, .hw-page-content div.wpforms-container-full .wpforms-form button[type="submit"]:hover, .f_form .wpforms-submit:hover, #aside_sc_from .wpforms-submit:hover, .hw-page-content .wpforms-submit:hover { color: #fff !important; background: #0b5c2e !important; border-color: #0b5c2e !important; } .wpforms-error { font-size: 12px; color: #d63638; } /* 表单第一行（First / Last）要在小屏改成上下排 */ @media (max-width: 560px) { .f_form div.wpforms-container-full .wpforms-form .wpforms-field-row-block, #aside_sc_from div.wpforms-container-full .wpforms-form .wpforms-field-row-block, .hw-page-content div.wpforms-container-full .wpforms-form .wpforms-field-row-block { width: 100%; float: none; } .f_form div.wpforms-container-full .wpforms-form .wpforms-field-row-block:last-child, #aside_sc_from div.wpforms-container-full .wpforms-form .wpforms-field-row-block:last-child, .hw-page-content div.wpforms-container-full .wpforms-form .wpforms-field-row-block:last-child { margin-left: 0; margin-top: 14px; } } /* -------------------------------------------------------------------------- 电话栏：国旗 + 国际区号（.hw-phone-field，脚本 assets/js/hw-phone.js） 选择器和输入框并排、边框拼在一起，看着像一个控件。 -------------------------------------------------------------------------- */ .f_form div.wpforms-container-full .wpforms-form .hw-phone-input-wrap, #aside_sc_from div.wpforms-container-full .wpforms-form .hw-phone-input-wrap, .hw-page-content div.wpforms-container-full .wpforms-form .hw-phone-input-wrap { display: flex; align-items: stretch; width: 100%; max-width: 100%; } .f_form div.wpforms-container-full .wpforms-form .hw-phone-input-wrap .hw-phone-country, #aside_sc_from div.wpforms-container-full .wpforms-form .hw-phone-input-wrap .hw-phone-country, .hw-page-content div.wpforms-container-full .wpforms-form .hw-phone-input-wrap .hw-phone-country { flex: 0 0 auto; width: auto; max-width: 138px; height: 46px; line-height: 44px; margin: 0; padding: 0 4px 0 10px; font-size: 14px; color: #222; background: #f6f7f6; border: 1px solid rgba(0, 0, 0, .14); border-right: 0; border-radius: 4px 0 0 4px; box-sizing: border-box; cursor: pointer; } .f_form div.wpforms-container-full .wpforms-form .hw-phone-input-wrap .hw-phone-country:focus, #aside_sc_from div.wpforms-container-full .wpforms-form .hw-phone-input-wrap .hw-phone-country:focus, .hw-page-content div.wpforms-container-full .wpforms-form .hw-phone-input-wrap .hw-phone-country:focus { outline: none; border-color: #0f7a3d; } .f_form div.wpforms-container-full .wpforms-form .hw-phone-input-wrap input[type="tel"], .f_form div.wpforms-container-full .wpforms-form .hw-phone-input-wrap input[type="text"], #aside_sc_from div.wpforms-container-full .wpforms-form .hw-phone-input-wrap input[type="tel"], #aside_sc_from div.wpforms-container-full .wpforms-form .hw-phone-input-wrap input[type="text"], .hw-page-content div.wpforms-container-full .wpforms-form .hw-phone-input-wrap input[type="tel"], .hw-page-content div.wpforms-container-full .wpforms-form .hw-phone-input-wrap input[type="text"] { flex: 1 1 auto; width: auto; min-width: 0; border-radius: 0 4px 4px 0; } @media (max-width: 560px) { .f_form div.wpforms-container-full .wpforms-form .hw-phone-input-wrap .hw-phone-country, #aside_sc_from div.wpforms-container-full .wpforms-form .hw-phone-input-wrap .hw-phone-country, .hw-page-content div.wpforms-container-full .wpforms-form .hw-phone-input-wrap .hw-phone-country { max-width: 116px; font-size: 13px; padding-left: 8px; } } /* -------------------------------------------------------------------------- 页脚二维码（微信 / WhatsApp） 位置：footer.php 里放在 .f_contact 的地址
  • 之后 —— 也就是页脚左侧那一列的 最下面（父主题 .f_box 是 flex-direction:row-reverse，.f_contact 在 DOM 里靠后， 视觉上就落在最左边）。 换图：外观 → 自定义 → 页脚二维码，从媒体库重新选一张即可，不用改代码。 尺寸用 rem：父主题的根字号随视口在 90~120px 之间变（不是常规的 16px）， 所以 1rem ≈ 一个二维码的宽度，写 px 反而会跟版心脱节。 ------------------------------------------------------------------------ */ .hw-qr { display: flex; flex-wrap: wrap; gap: .12rem; margin-top: .24rem; } .hw-qr-item { margin: 0; width: 1.7rem; max-width: calc(50% - .06rem); text-align: center; } /* 二维码本身多数是白底或透明底，统一给个白底卡片， 这样在页脚浅灰绿的渐变背景上边界清楚，也更好扫。 */ .hw-qr-item img { display: block; width: 100%; /* height:auto 不能省： 上的 height 属性会当成表现提示（presentational hint） 参与层叠，只写 aspect-ratio 的话高度会直接用属性值（例如 638px），方框就撑爆了。 */ height: auto; /* 两张码强制同尺寸方框 + contain： 源图长宽比不一样时（微信 550x554、WhatsApp 543x559）， 靠 height:auto 会出现「一张比另一张高一点」； 方框 + contain 让两张码永远渲染成一样大。 配合 tools\optimize-qr.ps1 归一化过的正方形源图， 码本体在两张图里占的比例也一致。 */ aspect-ratio: 1 / 1; object-fit: contain; background: #fff; border: 1px solid rgba(0, 0, 0, .08); border-radius: 6px; padding: 4px; box-sizing: border-box; } .hw-qr-tip { margin-top: .07rem; font-size: .16rem; line-height: 1.2; color: var(--i_color); text-transform: uppercase; } /* 父主题把社交图标绝对定位在页脚左下角（bottom:.7rem; left:0）， 正好压在二维码这一块上。填了社交链接时给 .f_box 补上底部留白， 把两样东西错开（手机端 .f_media 会变成普通文档流，不需要这个）。 */ @media (min-width: 768px) { .f_box.has-socials { padding-bottom: 1.15rem; } } /* ========================================================================== 关于我们（page 49） · 联系我们（page 60） -------------------------------------------------------------------------- 参考站中间内容： https://www.sunpal-energy.com/about-sunpal https://www.sunpal-energy.com/contact-us 页头和页脚不动，正文换成参考站那几段的结构，class 全部沿用父主题本来就有 .in_about / .salesmap / .salesmap_cont / .salesmap_num / .salesmap_pic / .value_list / .contact_form / .contact_way / .i_tit / .i_more / .wrap / .p60 / .p100 / .mb30。 这里只补父主题补不了的几条： A. 正文段落标题用 h3（h2 是页面模板给的页面标题），父主题 .i_tit 只给 h4 定过字号，所以把同一套字号（含各断点）交给 .hw-tit； B. 内页正文默认卡在 .privacy_cont.wrap（92vw / 最大 1660px）里， 参考站第二段深色统计带是通栏的 —— 只让关于我们这一页放开容器宽度， 每一段内部再用自己的 .wrap 收住内容宽度； C. 父主题的 .salesmap_num 和 .value_list 都是 ul > li， 而 Gutenberg 的列表项里不能嵌区块 —— 数字格和卡片改用 group， 再把父主题给 li 的尺寸补到 group 上； D. 统计带的世界地图用公版 Natural Earth 数据自绘 （tools\build-world-map.ps1），不走第三方地图素材的署名/传染授权； 渐变底色按本站品牌绿改过 —— 想换回参考站的蓝，只改 .salesmap 那一行。 ========================================================================== */ /* -------------------------------------------------------------------------- A. 正文段落标题的字号 -------------------------------------------------------------------------- */ .privacy_cont article .hw-tit { font-size: .24rem; line-height: 1.35; color: var(--i_color); margin: 4% 0; } @media screen and (max-width: 1200px) { .privacy_cont article .hw-tit { font-size: .22rem; } } @media screen and (max-width: 1024px) { .privacy_cont article .hw-tit { font-size: .2rem; } } @media screen and (max-width: 768px) { .privacy_cont article .hw-tit { font-size: .18rem; } } @media screen and (max-width: 560px) { .privacy_cont article .hw-tit { font-size: .16rem; } } /* -------------------------------------------------------------------------- B. 关于我们：正文容器通栏（内容宽度仍由每段内部的 .wrap 控制） -------------------------------------------------------------------------- */ .page-id-23 .privacy_cont.wrap { width: 100%; max-width: none; } /* 区块版的 group 渲染时，WordPress 会在里面再套一层 .wp-block-group__inner-container（老式 group 结构）。 多出来的这一层会让父主题那些「父 > 子」的规则全部落空： .in_about .wrap{display:flex}、.salesmap_num{display:flex}…… 这里只在自己搭的这几层容器上把这一层「取消掉」（display:contents）， 子块重新变成外层的直接子元素，父主题的布局规则就能正常命中。 不动区块 47（RFQ 带）里那一层，避免影响它自己的排布。 */ .page-id-23 .in_about .wrap > .wp-block-group__inner-container, .page-id-23 .salesmap_num > .wp-block-group__inner-container, .page-id-23 .hw-values-row > .wp-block-group__inner-container, .page-id-23 .hw-value-card > .wp-block-group__inner-container, .page-id-23 .hw-value-card .img > .wp-block-group__inner-container, .page-id-24 .hw-contact-way > .wp-block-group__inner-container,.page-id-60 .hw-contact-way > .wp-block-group__inner-container { display: contents; } /* 横排（flex）里的子块不要再被区块默认 gap 顶出上下错位 */ .page-id-23 .in_about .wrap > .wp-block-group__inner-container > *, .page-id-23 .salesmap_num > .wp-block-group__inner-container > *, .page-id-23 .hw-values-row > .wp-block-group__inner-container > *, .page-id-24 .hw-contact-way > .wp-block-group__inner-container > *,.page-id-60 .hw-contact-way > .wp-block-group__inner-container > * { margin-block-start: 0; } /* -------------------------------------------------------------------------- C. 关于我们 · 第一段：左图 + 右文（父主题 .in_about） -------------------------------------------------------------------------- */ /* core/image 输出的 figure 带 block-library 的默认下边距， 高度继续由父主题 .in_about .img::before 的 60% 撑起来。 */ .page-id-23 .in_about .img { margin-bottom: 0; } /* 公司名小标题：父主题只给 .in_about .i_tit h4 定过品牌绿 + 加粗， 这里用的是 h3，补上同一条（参考站这一段标题就是绿色加粗体）。 */ .page-id-23 .in_about .i_tit h3 { color: var(--i_color2); font-weight: bold; } /* Contact Us 按钮：父主题 .i_more 是照 写的， 区块编辑器输出的是 .wp-block-button > .wp-block-button__link。 */ .page-id-23 .in_about .wp-block-buttons, .page-id-23 .in_about .wp-block-button { margin-bottom: 0; } .page-id-23 .in_about .wp-block-button.i_more .wp-block-button__link { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; color: var(--i_color); font-size: .18rem; line-height: 1.2; text-decoration: none; } .page-id-23 .in_about .wp-block-button.i_more:hover .wp-block-button__link { color: #fff; } /* -------------------------------------------------------------------------- D. 关于我们 · 第二段：统计带（父主题 .salesmap） 参考站底色是蓝色渐变（#0856a1 → #6faceb），这里按本站品牌改成绿色。 -------------------------------------------------------------------------- */ .page-id-23 .salesmap { background: linear-gradient(to bottom, #04592f, #0e9c58); } /* 世界地图：公版数据自绘的 SVG，父主题已把它绝对定位在右下角 */ .page-id-23 .salesmap_pic { background: url(static/images/world-map.svg) no-repeat center bottom / contain; aspect-ratio: 1200 / 473; height: auto; opacity: .22; max-width: 70%; } /* 统计带里的小标题：父主题只给 .salesmap_cont .i_tit h4 / p 定过白色， 这里用的是 h3，得自己补 —— 否则会落到 .privacy_cont article * 的黑色上， 在深绿底上几乎看不见。 */ .page-id-23 .salesmap_cont .i_tit h3 { color: #fff; } /* 数字格：补上父主题 .salesmap_num li 的宽度。 注意必须用后代选择器 —— 区块版的 group 中间套了一层 .wp-block-group__inner-container，直接子元素选择器命中不到。 */ .page-id-23 .salesmap_num .hw-salesmap-item { width: 40%; } /* 数字：父主题只给 .salesmap_num b / i 定过字号，这里给 h3 同一套 */ .page-id-23 .hw-salesmap-num { font-size: .6rem; line-height: 1.1; color: #fff; font-weight: bold; font-style: italic; margin: 0; } @media screen and (max-width: 1440px) { .page-id-23 .hw-salesmap-num { font-size: .52rem; } } @media screen and (max-width: 1366px) { .page-id-23 .hw-salesmap-num { font-size: .46rem; } } @media screen and (max-width: 1024px) { .page-id-23 .hw-salesmap-num { font-size: .36rem; } } @media screen and (max-width: 768px) { .page-id-23 .hw-salesmap-num { font-size: .3rem; } } @media screen and (max-width: 560px) { .page-id-23 .hw-salesmap-num { font-size: .24rem; } } @media screen and (max-width: 460px) { .page-id-23 .hw-salesmap-num { font-size: .2rem; } } /* -------------------------------------------------------------------------- E. 关于我们 · 第三段：三张卡片（父主题 .value_list） 参考站底图是一张大横图（本站没有合适的图），这里用浅绿渐变代替， 白卡压在浅绿底上才看得清。 -------------------------------------------------------------------------- */ .page-id-23 .value_list { background: linear-gradient(180deg, #f3f8f5 0%, #e2efe8 100%); padding: 3% 0; margin-top: 1rem; } .page-id-23 .hw-values-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 3% 0; } .page-id-23 .hw-value-card { width: 28%; min-height: 240px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 3% 2%; text-align: center; background: rgba(255, 255, 255, .94); border-radius: 5px; box-shadow: 0 8px 28px rgba(4, 60, 35, .07); } /* 圆形图标位：父主题 .value_list li .img 是给 写的， 这里放的是 iconify-icon（页脚、服务卡、banner 箭头用的同一个组件）。 */ .page-id-23 .hw-value-card .img { width: 90px; height: 90px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(0, 132, 72, .1); transition: all .5s ease; } .page-id-23 .hw-value-card .img iconify-icon { font-size: .5rem; color: var(--i_color2); transition: all .5s ease; } .page-id-23 .hw-value-card:hover .img { background: var(--i_color2); } .page-id-23 .hw-value-card:hover .img iconify-icon { color: #fff; } .page-id-23 .hw-value-card:hover .hw-tit { color: var(--i_color2); } /* 断点跟父主题 .value_list li 保持一致（≤959px 竖排） */ @media screen and (max-width: 959px) { .page-id-23 .hw-value-card { width: 100%; margin: 10px auto; } } /* -------------------------------------------------------------------------- F. 联系我们（page 60） 表单大标题直接用父主题 .i_tit h3 的大字号（和参考站一样）， 所以这一页的标题不加 .hw-tit。 -------------------------------------------------------------------------- */ .page-id-24 .hw-contact-way,.page-id-60 .hw-contact-way { display: flex; flex-wrap: wrap; gap: 0 2%; } /* 父主题把这条写在 .contact_way ul li 上，这里卡片是 group */ .page-id-24 .hw-contact-way .hw-contact-item,.page-id-60 .hw-contact-way .hw-contact-item { width: 31.8%; box-sizing: border-box; border: 1px solid #eaeaea; text-align: center; padding: 2% 0; margin-bottom: 3%; } .page-id-24 .hw-contact-way .hw-contact-item iconify-icon,.page-id-60 .hw-contact-way .hw-contact-item iconify-icon { font-size: .8rem; color: var(--i_color2); } .page-id-24 .hw-contact-way .i_tit h4,.page-id-60 .hw-contact-way .i_tit h4 { margin-top: 5%; padding: 0 2%; font-weight: bold; } .page-id-24 .hw-contact-way .i_tit p,.page-id-60 .hw-contact-way .i_tit p { margin: 2% 0; padding: 0 2%; } /* 父主题的通用规则把 article 里的文字压成 14px/#666，链接要单独放开 */ .page-id-24 .hw-contact-way .i_tit a,.page-id-60 .hw-contact-way .i_tit a { color: var(--i_color2); font-size: inherit; } @media screen and (max-width: 767px) { .page-id-24 .hw-contact-way .hw-contact-item, .page-id-60 .hw-contact-way .hw-contact-item { width: 100%; } } /* -------------------------------------------------------------------------- G. 两页里的图标 Vision / Mission / Values 和联系卡片的圆形图标，用的是 core/image 引 iconify 的 SVG 直链（本站页脚、服务卡、banner 箭头本来就走 iconify）。 -------------------------------------------------------------------------- */ .page-id-23 .hw-value-card .img .wp-block-image { margin: 0; } .page-id-23 .hw-value-card .img img { width: .42rem; height: .42rem; object-fit: contain; } /* 悬停时图标跟着圆圈一起变白（SVG 本身是品牌绿，用 filter 反白） */ .page-id-23 .hw-value-card:hover .img img { filter: brightness(0) invert(1); } .page-id-60 .contact_form .i_tit { text-align: center; } .page-id-24 .hw-contact-way .hw-contact-item .wp-block-image,.page-id-60 .hw-contact-way .hw-contact-item .wp-block-image { margin: 0 auto; } .page-id-24 .hw-contact-way .hw-contact-item img,.page-id-60 .hw-contact-way .hw-contact-item img { width: .8rem; height: .8rem; object-fit: contain; } /* 图标跟着父主题 .contact_way ul li iconify-icon 的那套阶梯缩 */ @media screen and (max-width: 1200px) { .page-id-24 .hw-contact-way .hw-contact-item img, .page-id-60 .hw-contact-way .hw-contact-item img { width: .6rem; height: .6rem; } } @media screen and (max-width: 960px) { .page-id-24 .hw-contact-way .hw-contact-item img, .page-id-60 .hw-contact-way .hw-contact-item img { width: .55rem; height: .55rem; } } @media screen and (max-width: 767px) { .page-id-24 .hw-contact-way .hw-contact-item img, .page-id-60 .hw-contact-way .hw-contact-item img { width: .5rem; height: .5rem; } } /* 参考站的提交按钮居中（表单本身和首页共用同一个 WPForms 表单， 所以只在本页居中，不动表单配置）。 注意：本文件前面有一条 .hw-page-content div.wpforms-container-full … .wpforms-submit-container{text-align:left} 是给首页表单用的， 它比这里的选择器权重高，所以这里带上表单 id 把它压过去。 */ .page-id-60 .contact_form #wpforms-6 .wpforms-submit-container { text-align: center; } /* -------------------------------------------------------------------------- H. 产品详情页（66QL6-BDV）与“精选产品”同步区块 父主题把所有内页正文压成 14px / #666 / 24px，产品页需要一套可读的 标题、参数表和 CTA，所以在 .hw-product-detail / .hw-featured-product 范围内重新定字号。样式统一放在子主题，页面正文只保留原生 Gutenberg 区块。 -------------------------------------------------------------------------- */ /* 产品页：页面模板会在正文上方再输出一次页面标题，详情页只保留 banner 的 H1。 */ .hw-product-detail-page .privacy_cont.wrap > .tit { display: none; } /* 产品详情页以前靠这条把"特色图当 banner"藏掉（否则绿色 banner 会被拉成一张产品长图）。 2026-10-23 源头已经改好：hw_in_banner() 不再取特色图，一律用后台「内页顶部 · 背景图」， 所以这里放开，让详情页和其他内页显示同一张 banner。 */ .hw-product-detail-page .privacy_cont.wrap { margin-top: .35rem; } .privacy_cont article .hw-product-detail { color: #3d4843; } .privacy_cont article .hw-product-detail p, .privacy_cont article .hw-product-detail li, .privacy_cont article .hw-product-detail td, .privacy_cont article .hw-product-detail th, .privacy_cont article .hw-product-detail figcaption { color: #46524c; font-size: 16px; line-height: 1.75; } .privacy_cont article .hw-product-detail h2 { color: #111; font-size: 32px; line-height: 1.25; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid #e3eae6; } .privacy_cont article .hw-product-detail h3 { color: #0b5c2e; font-size: 22px; line-height: 1.35; margin: 30px 0 12px; } /* 首屏：产品图 + 型号 + 四个关键参数 + CTA */ .hw-product-hero { background: #f6f9f7; border: 1px solid #e3ebe6; border-radius: 6px; padding: 3%; margin-bottom: .5rem; } .hw-product-hero .wp-block-columns { align-items: center; gap: 5%; margin-bottom: 0; } .hw-product-hero .hw-product-media { background: #fff; border: 1px solid #edf1ef; border-radius: 4px; margin: 0; padding: 2%; text-align: center; } .hw-product-hero .hw-product-media img { display: block; width: 100%; max-width: 480px !important; height: auto !important; max-height: none; margin: 0 auto; object-fit: initial; } .privacy_cont article .hw-product-detail .hw-product-eyebrow { color: var(--i_color2); font-size: 13px; font-weight: 700; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; margin: 0 0 12px; } .privacy_cont article .hw-product-detail .hw-product-hero h2 { border: 0; font-size: 40px; line-height: 1.18; margin: 0 0 12px; padding: 0; } .privacy_cont article .hw-product-detail .hw-product-model { color: #69766f; font-size: 15px; line-height: 1.6; margin: 0 0 18px; } .privacy_cont article .hw-product-detail .hw-product-model strong { color: #1b2620; font-weight: 700; } .privacy_cont article .hw-product-detail .hw-product-intro { font-size: 16px; line-height: 1.8; margin-bottom: 24px; } .hw-product-hero .hw-product-facts { flex-wrap: nowrap !important; gap: 0 3%; margin: 22px 0 26px; } .hw-product-hero .hw-product-facts .wp-block-column { box-sizing: border-box; border-left: 3px solid var(--i_color2); padding-left: 14px; } .privacy_cont article .hw-product-detail .hw-product-fact-value { color: var(--i_color2); font-size: 24px; font-weight: 700; line-height: 1.15; margin: 0; white-space: nowrap; } .privacy_cont article .hw-product-detail .hw-product-fact-label { color: #66736c; font-size: 12px; line-height: 1.4; margin: 5px 0 0; } .hw-product-actions { gap: 12px; margin-bottom: 0; } .hw-product-actions .wp-block-button__link { background: var(--i_color2); border: 1px solid var(--i_color2); border-radius: 0; color: #fff; font-size: 15px; font-weight: 600; line-height: 1.2; padding: 15px 26px; } .hw-product-actions .wp-block-button__link:hover { background: #006c3a; border-color: #006c3a; color: #fff; } .hw-product-actions .hw-btn-outline .wp-block-button__link { background: transparent; color: var(--i_color2); } .hw-product-actions .hw-btn-outline .wp-block-button__link:hover { background: var(--i_color2); color: #fff; } /* 正文段落 */ .hw-product-section { margin-top: .55rem; } .hw-product-detail .hw-product-feature-list { columns: 2; column-gap: 6%; margin: 18px 0 0; padding-left: 1.1em; } .hw-product-detail .hw-product-feature-list li { break-inside: avoid; margin: 0 0 12px; padding-left: 2px; } /* 参数表：桌面自适应；窄屏保留表格语义并允许横向滚动，不截断数据。 */ .hw-product-detail .hw-spec-table { margin: 14px 0 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .hw-product-detail .hw-spec-table table { width: 100%; border: 1px solid #dfe7e2; border-collapse: collapse; font-size: 14px; line-height: 1.55; } .hw-product-detail .hw-spec-table--wide table { min-width: 760px; } .hw-product-detail .hw-spec-table th { background: #edf6f1; border: 1px solid #dfe7e2; color: #0b5c2e; font-size: 13px; font-weight: 700; line-height: 1.45; padding: 11px 12px; text-align: left; vertical-align: bottom; } .hw-product-detail .hw-spec-table td { border: 1px solid #e4ebe7; color: #3f4b45; font-size: 14px; line-height: 1.55; padding: 10px 12px; vertical-align: top; } .hw-product-detail .hw-spec-table tbody tr:nth-child(even) td { background: #fafcfb; } .hw-product-detail .hw-spec-table td:first-child, .hw-product-detail .hw-spec-table th:first-child { font-weight: 600; width: 34%; } .hw-product-detail .hw-spec-table--wide td:not(:first-child), .hw-product-detail .hw-spec-table--wide th:not(:first-child) { text-align: center; white-space: nowrap; } .hw-product-detail .hw-spec-table figcaption { color: #748079; font-size: 12px; line-height: 1.6; margin-top: 7px; } @media screen and (max-width: 767px) { .hw-product-detail .hw-spec-table--wide::before { content: "Swipe the table sideways to view all power classes."; display: block; color: #6c7972; font-size: 12px; line-height: 1.5; margin: 0 0 8px; } } /* 下载 / 询盘条 */ .hw-product-download { background: #fff; border: 1px solid #e3ebe6; padding: 22px 26px; margin: 26px 0 0; } .hw-product-download p { margin: 0 0 14px; } .hw-product-download .wp-block-button__link { background: var(--i_color2); border: 1px solid var(--i_color2); border-radius: 0; color: #fff; font-size: 14px; font-weight: 600; padding: 12px 22px; } .hw-product-download .wp-block-button__link:hover { background: #006c3a; border-color: #006c3a; color: #fff; } .hw-product-cta { background: linear-gradient(120deg, #0b5c2e 0%, #12854a 100%); color: #fff; padding: 42px 5%; margin-top: .55rem; } .privacy_cont article .hw-product-detail .hw-product-cta h2, .privacy_cont article .hw-product-detail .hw-product-cta p { border: 0; color: #fff; margin-left: 0; margin-right: 0; padding: 0; } .privacy_cont article .hw-product-detail .hw-product-cta h2 { font-size: 30px; margin-bottom: 12px; } .privacy_cont article .hw-product-detail .hw-product-cta p { font-size: 16px; max-width: 760px; margin-left: 0 !important; margin-right: auto !important; margin-bottom: 22px; } .hw-product-cta .wp-block-button__link { background: #fff; border: 1px solid #fff; border-radius: 0; color: #0b5c2e; font-size: 15px; font-weight: 700; padding: 15px 28px; } .hw-product-cta .wp-block-button__link:hover { background: transparent; color: #fff; } /* “精选产品”同步区块：产品列表页、太阳能板分类页共用。 */ .hw-featured-product { background: #f5f9f7; border: 1px solid #e1ebe5; padding: 24px 28px; margin: 0 0 36px; } .hw-featured-product .wp-block-columns { align-items: center; gap: 4%; margin-bottom: 0; } .hw-featured-product .wp-block-image { background: #fff; border: 1px solid #e7eeea; margin: 0; padding: 12px; } .hw-featured-product .wp-block-image img { display: block; width: 100%; max-height: 280px; margin: 0 auto; object-fit: contain; } .privacy_cont article .hw-featured-product .hw-featured-eyebrow { color: var(--i_color2); font-size: 12px; font-weight: 700; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; margin: 0 0 8px; } .privacy_cont article .hw-featured-product h2 { border: 0; color: #111; font-size: 28px; line-height: 1.28; margin: 0 0 10px; padding: 0; } .privacy_cont article .hw-featured-product p { font-size: 15px; line-height: 1.7; margin: 0 0 16px; } .hw-featured-product .wp-block-button__link { background: var(--i_color2); border-radius: 0; color: #fff; font-size: 14px; font-weight: 600; padding: 12px 22px; } /* 产品目录顶部的四款组件卡片。 */ .hw-featured-grid { display: block !important; margin: 0 0 40px; } .hw-featured-grid > .wp-block-group__inner-container { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .hw-featured-grid .hw-featured-card, .hw-featured-grid .hw-featured-card > .wp-block-group__inner-container { display: flex; flex-direction: column; height: 100%; } .hw-featured-grid .hw-featured-card { background: #fff; border: 1px solid #e1ebe5; border-radius: 4px; box-sizing: border-box; padding: 18px; } .hw-featured-grid .hw-featured-card .wp-block-image { background: #f6f9f7; border: 1px solid #e7eeea; border-radius: 3px; margin: 0 0 16px; padding: 10px; } .hw-featured-grid .hw-featured-card .wp-block-image img { display: block; width: 100%; height: 190px; margin: 0 auto; object-fit: contain; } .privacy_cont article .hw-featured-grid .hw-featured-eyebrow { color: var(--i_color2); font-size: 11px; font-weight: 700; letter-spacing: .1em; line-height: 1.4; margin: 0 0 7px; text-transform: uppercase; } .privacy_cont article .hw-featured-grid h3 { border: 0; color: #111; font-size: 20px; line-height: 1.3; margin: 0 0 8px; padding: 0; } .privacy_cont article .hw-featured-grid .hw-featured-model { color: #65736b; font-size: 13px; line-height: 1.55; margin: 0 0 12px; } .privacy_cont article .hw-featured-grid p { font-size: 14px; line-height: 1.65; margin: 0 0 16px; } .hw-featured-grid .wp-block-buttons { margin-top: auto; } .hw-featured-grid .wp-block-button__link { background: var(--i_color2); border-radius: 0; color: #fff; display: block; font-size: 13px; font-weight: 600; line-height: 1.3; padding: 12px 14px; text-align: center; width: 100%; } @media screen and (max-width: 1200px) { .privacy_cont article .hw-product-detail .hw-product-hero h2 { font-size: 34px; } .privacy_cont article .hw-product-detail h2 { font-size: 28px; } .privacy_cont article .hw-product-detail .hw-product-fact-value { font-size: 23px; } .hw-featured-grid > .wp-block-group__inner-container { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media screen and (max-width: 1024px) { .hw-product-hero { padding: 5%; } .hw-product-hero .wp-block-columns { gap: 28px; } .hw-product-hero .hw-product-facts { flex-wrap: wrap !important; gap: 0 3%; } .hw-product-hero .hw-product-facts .wp-block-column { flex: 0 0 46% !important; max-width: 46%; margin-bottom: 16px; } .privacy_cont article .hw-product-detail .hw-product-hero h2 { font-size: 30px; } .privacy_cont article .hw-product-detail h2 { font-size: 26px; } } @media screen and (max-width: 767px) { .hw-product-hero { padding: 7% 6%; } .privacy_cont article .hw-product-detail .hw-product-hero h2 { font-size: 26px; } .privacy_cont article .hw-product-detail h2 { font-size: 23px; } .privacy_cont article .hw-product-detail h3 { font-size: 19px; } .hw-product-detail-page .in_banner .tit1 { width: 90%; } .hw-product-detail-page .in_banner .tit h1 { font-size: .36rem; } .hw-product-detail .hw-product-feature-list { columns: 1; } .hw-product-actions .wp-block-button, .hw-product-actions .wp-block-button__link { width: 100%; } .hw-product-actions .wp-block-button__link { text-align: center; } .hw-featured-product { padding: 20px; } .privacy_cont article .hw-featured-product h2 { font-size: 22px; } .hw-featured-grid > .wp-block-group__inner-container { grid-template-columns: 1fr; gap: 14px; } .hw-featured-grid .hw-featured-card .wp-block-image img { height: 220px; } .privacy_cont article .hw-product-detail .hw-product-cta h2 { font-size: 24px; } .hw-product-cta { padding: 32px 7%; } } /* -------------------------------------------------------------------------- I. Products 页的分类卡片（同步区块 43） 该区块来自区块主题，使用了 --wp--preset--spacing--50/70 等预设间距。 切到当前经典主题后这些变量变成了 135px / 304px，卡片只剩 62px 文字宽。 这里只在 Products 页把间距收回到正常卡片尺寸，并让内层群组不再按 min-content 收缩。 -------------------------------------------------------------------------- */ .page-id-50 .privacy_cont article .wp-block-group[style*="--wp--preset--spacing--70"] { padding-top: 0 !important; padding-bottom: 0 !important; } .page-id-50 .privacy_cont article .wp-block-columns { align-items: stretch; gap: 2%; margin-top: 36px !important; } .page-id-50 .privacy_cont article .wp-block-column { flex: 1 1 0; min-width: 0; } .page-id-50 .privacy_cont article .has-extra-tertiary-background-color { min-height: 230px; box-sizing: border-box; padding: 28px !important; margin-top: 18px !important; background: #f8fbf9 !important; border-color: #e1e9e4 !important; border-radius: 5px !important; } .page-id-50 .privacy_cont article .has-extra-tertiary-background-color > .wp-block-group__inner-container { display: contents; } .page-id-50 .privacy_cont article .has-extra-tertiary-background-color h3, .page-id-50 .privacy_cont article .has-extra-tertiary-background-color h3 a { color: #111 !important; font-size: 20px !important; line-height: 1.35 !important; margin-top: 0 !important; } .page-id-50 .privacy_cont article .has-extra-tertiary-background-color p, .page-id-50 .privacy_cont article .has-extra-tertiary-background-color p a { color: #4b5650 !important; font-size: 15px !important; line-height: 1.65 !important; } .page-id-50 .privacy_cont article .has-extra-tertiary-background-color p:last-child a { color: var(--i_color2) !important; font-weight: 600 !important; } @media screen and (max-width: 1024px) { .page-id-50 .privacy_cont article .has-extra-tertiary-background-color { padding: 22px !important; } } @media screen and (max-width: 767px) { .page-id-50 .privacy_cont article .wp-block-columns { gap: 0; } .page-id-50 .privacy_cont article .has-extra-tertiary-background-color { min-height: 0; } } /* Single-product category spotlight: image left, copy right. */ .privacy_cont article .hw-featured-section h2 { font-size: 26px; line-height: 1.3; margin: 0 0 18px; } .hw-featured-grid--single > .wp-block-group__inner-container { grid-template-columns: minmax(0, 1fr); } /* Solution 索引卡（/solution/ 页里的方案列表）。 复用 .hw-featured-grid 的卡片外观，只把固定的 4 列换成自适应列： auto-fit 会收起空轨道，所以只有 1 个方案时卡片是一条正常宽度，不会缩成 1/4； 上限 420px 保证方案少的时候不会被拉成整行宽。 */ .hw-featured-grid.hw-solution-grid > .wp-block-group__inner-container { grid-template-columns: repeat(auto-fit, minmax(300px, 420px)); /* 列宽上限 420px，容器 1660px 时只排得下 3 列共 1260px， 默认会靠左堆、右边空 400px，整块看着偏左。补这条让轨道整体居中。 */ justify-content: center; } /* 卡片内容居中： eyebrow / 标题 / 摘要都是 text-align: start，按钮容器也要真的居中 （.wp-block-buttons 是 flex，只改 text-align 对它无效）。 */ .hw-featured-grid.hw-solution-grid .hw-featured-card { text-align: center; } .hw-featured-grid.hw-solution-grid .wp-block-buttons { justify-content: center; } /* 6 个方案详情页（Solution 的子页，body 上有 parent-pageid-51）里的两张图。 原来 figure 占满正文宽度（1440 视口下 1325px），缩到一半并居中； 手机端 50% 太小，恢复整宽。 */ .parent-pageid-51 .privacy_cont article figure.wp-block-image { width: 50%; max-width: 100%; margin-left: auto; margin-right: auto; } .parent-pageid-51 .privacy_cont article figure.wp-block-image img { display: block; width: 100%; height: auto; } @media screen and (max-width: 767px) { .parent-pageid-51 .privacy_cont article figure.wp-block-image { width: 100%; } } /* -------------------------------------------------------------------------- 方案页正文排版（.hw-solution-body 只包在 6 个 Solution 子页的正文外层， 不覆盖后面追加的 .hw-faq 区块）。 取值来自 sunpal-energy.com 那篇 BESS 选型文章正文在 1440px 下的实测： 段落 20px / 400 / #333 / 左对齐 / margin 20px 0，H2 24px 700，H3 20px 700， 行高都是 normal。注意这是「文章版式」，左对齐；之前按 /utility-scale 做的 居中大标题版式已按本条替换。 -------------------------------------------------------------------------- */ .hw-solution-body p { color: #333; font-size: 20px; line-height: normal; margin: 20px 0; text-align: left; } .hw-solution-body h2 { color: #333; font-size: 24px; font-weight: 700; line-height: normal; margin: 20px 0; text-align: left; } .hw-solution-body h3 { color: #333; font-size: 20px; font-weight: 700; line-height: normal; margin: 20px 0; text-align: left; } .hw-solution-body > .wp-block-group__inner-container > *:first-child, .hw-solution-body p:first-child { margin-top: 0; } .hw-solution-body p:last-child { margin-bottom: 0; } @media screen and (max-width: 767px) { .hw-solution-body p { font-size: 17px; margin: 16px 0; } .hw-solution-body h2 { font-size: 21px; } .hw-solution-body h3 { font-size: 18px; } } /* -------------------------------------------------------------------------- /cases/ 案例网格：版式照 sunpal-energy.com/category/case 实测值 1:1 复刻 （2026-10-22 他点名"样式设置成一模一样"）。参考站实测： 列表 display:flex; flex-wrap:wrap; gap:0 1% 卡片 width:32.66%; 背景 #fff; 无描边无圆角; margin-bottom:2%; transition:.5s 悬停 margin-top:-10px（整卡上移，不是阴影） 图框 .img::before padding-bottom:55%（≈1.82:1），img 绝对定位居中 + object-fit:cover 文字块 padding:3% 4%；标题 font-weight:bold、两行截断（-webkit-line-clamp:2） 我们比参考站多一行"地点 · 容量"，所以标题下方留了一行副标题的间距。 -------------------------------------------------------------------------- */ .hw-case-grid { background: #f9f9f9; padding: 30px 0 10px; } .hw-case-grid > .wp-block-group__inner-container { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 1%; } /* 卡片和它里面的 group 都是 constrained 布局，WordPress 会给内层容器加 max-width， 结果卡片只占列宽的一小半。这里强制撑满，宽度由卡片自己决定。 */ .hw-case-grid .hw-case-card > .wp-block-group__inner-container { max-width: none; width: 100%; } .hw-case-grid .hw-case-ph, .hw-case-grid .hw-case-ph > .wp-block-group__inner-container { max-width: none; width: 100%; } .hw-case-grid .hw-case-card { background: #fff; border: 0; border-radius: 0; box-shadow: none; box-sizing: border-box; display: block; height: auto; margin: 0 0 2%; padding: 0; text-align: left; transition: .5s; width: 32.66%; } .hw-case-grid .hw-case-card:hover { box-shadow: none; margin-top: -10px; transform: none; } /* 图框：padding-bottom:55% 撑出比例，图片绝对定位居中裁切，和参考站同一套做法。 height 必须带 !important，才能压过父主题 public.css 的 article img { height: initial !important }。 */ .hw-case-grid figure.wp-block-image { display: block; height: 0; margin: 0; overflow: hidden; padding-bottom: 55%; position: relative; width: 100%; } .hw-case-grid figure.wp-block-image img { display: block; height: 100% !important; left: 50%; object-fit: cover; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 100%; } /* 占位卡（案例不满一页时才出现）：撑成和真实图框一样的 55% 盒子 */ .hw-case-grid .hw-case-ph { height: 0; margin: 0; overflow: hidden; padding-bottom: 55%; position: relative; } .hw-case-grid .hw-case-ph p { color: #9aa8a0; font-size: 13px; left: 50%; margin: 0; position: absolute; top: 50%; transform: translate(-50%, -50%); } /* 文字块：参考站 .i_tit { padding: 3% 4% } + h4 { margin: 1rem 0 } 合成这里的间距 */ .hw-case-grid .hw-case-card h3 { -webkit-box-orient: vertical; color: #000; display: -webkit-box; font-size: 21.6px; font-weight: 700; -webkit-line-clamp: 2; line-height: 1.16; margin: 0; overflow: hidden; padding: 29px 17px 0; text-align: left; text-overflow: ellipsis; } .hw-case-grid .hw-case-meta { color: #333; font-size: 16px; line-height: 1.5; margin: 0; padding: 8px 17px 29px; text-align: left; } .hw-case-pager { align-items: center; display: flex; gap: 8px; justify-content: center; margin-top: 30px; } .hw-case-pager .hw-case-page, .hw-case-pager a.hw-case-page { border: 1px solid #dfe7e2; color: #333; display: inline-block; font-size: 14px; line-height: 1; min-width: 34px; padding: 9px 12px; text-align: center; text-decoration: none; } .hw-case-pager .hw-case-page.is-current { background: var(--i_color2, #12854a); border-color: var(--i_color2, #12854a); color: #fff; } @media screen and (max-width: 1024px) { .hw-case-grid .hw-case-card { width: 49%; } } /* 参考站在 767px 以下就是一列满宽（.case ul { display:block } / li { width:100% }），跟它一致 */ @media screen and (max-width: 767px) { .hw-case-grid .hw-case-card { width: 100%; } .hw-case-grid .hw-case-card:hover { margin-top: 0; } } .hw-featured-grid.hw-solution-grid .wp-block-post-title a, .hw-featured-grid.hw-solution-grid .hw-featured-card h3 a { color: inherit; text-decoration: none; } .hw-featured-grid--single .hw-featured-card--spotlight { padding: 26px; } .hw-featured-grid--single .hw-featured-card--spotlight > .wp-block-group__inner-container { align-items: start; align-content: center; column-gap: 38px; display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); grid-template-rows: auto auto auto auto auto; height: 100%; } .hw-featured-grid--single .hw-featured-card--spotlight .wp-block-image { align-items: center; display: flex; grid-column: 1; grid-row: 1 / -1; justify-content: center; margin: 0; padding: 0; } .hw-featured-grid--single .hw-featured-card--spotlight .wp-block-image img { height: 340px; width: 100%; } .hw-featured-grid--single .hw-featured-card--spotlight h3, .hw-featured-grid--single .hw-featured-card--spotlight p, .hw-featured-grid--single .hw-featured-card--spotlight .wp-block-buttons { grid-column: 2; justify-self: stretch; max-width: none; margin-left: 0 !important; margin-right: 0 !important; width: 100%; } .hw-featured-grid--single .hw-featured-card--spotlight .wp-block-buttons { justify-content: flex-start; margin-top: 22px; width: auto; } .hw-featured-grid--single .hw-featured-card--spotlight .wp-block-button__link { padding-left: 28px; padding-right: 28px; width: auto; } .privacy_cont article .hw-featured-grid--single .hw-featured-card--spotlight h3 { font-size: 30px; line-height: 1.22; margin: 0 0 10px; } .privacy_cont article .hw-featured-grid--single .hw-featured-card--spotlight p { font-size: 15px; line-height: 1.7; } @media screen and (max-width: 767px) { .hw-featured-grid--single .hw-featured-card--spotlight { padding: 18px; } .hw-featured-grid--single .hw-featured-card--spotlight > .wp-block-group__inner-container { display: flex; flex-direction: column; } .hw-featured-grid--single .hw-featured-card--spotlight .wp-block-image { display: block; margin: 0 0 16px; width: 100%; } .hw-featured-grid--single .hw-featured-card--spotlight .wp-block-image img { height: 240px; } .privacy_cont article .hw-featured-grid--single .hw-featured-card--spotlight h3 { font-size: 22px; } } /* Inverter directory: four columns on desktop, two on tablet. */ .hw-featured-grid--inverters > .wp-block-group__inner-container { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media screen and (max-width: 1200px) { .hw-featured-grid--inverters > .wp-block-group__inner-container { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media screen and (max-width: 767px) { .hw-featured-grid--inverters > .wp-block-group__inner-container { grid-template-columns: 1fr; } } /* Inverter directory pagination: 16 product cards per page. */ .hw-featured-grid--inverters .hw-featured-card[hidden] { display: none !important; } body:not(.page-id-53) .hw-inverter-pagination { display: none !important; } .hw-inverter-pagination { border-top: 1px solid #e1ebe5; margin-top: 10px; padding: 18px 0 4px; } .hw-inverter-pagination__inner { align-items: center; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; } .hw-inverter-pagination__summary { color: #65736b; font-size: 14px; line-height: 1.5; } .hw-inverter-pagination__pages { display: flex; gap: 8px; } .hw-inverter-pagination__button { background: #fff; border: 1px solid #cbdad1; border-radius: 3px; color: #0b5c2e; cursor: pointer; font-size: 14px; font-weight: 700; height: 42px; min-width: 42px; padding: 0 12px; } .hw-inverter-pagination__button:hover, .hw-inverter-pagination__button:focus { border-color: #0b5c2e; } .hw-inverter-pagination__button.is-current { background: #0b5c2e; border-color: #0b5c2e; color: #fff; } @media screen and (max-width: 767px) { .hw-inverter-pagination__inner { align-items: flex-start; flex-direction: column; gap: 10px; } .hw-inverter-pagination__pages { width: 100%; } .hw-inverter-pagination__button { flex: 1 1 42px; } } /* -------------------------------------------------------------------------- J. Products 总览：完整产品目录 产品总览页按产品系列依次调用已有的同步产品区块。顶部提供分类跳转， 下方每个系列保持独立区块，后台仍可单独编辑。这里只处理跳转面板、 锚点间距和系列之间的留白。 -------------------------------------------------------------------------- */ .hw-catalog-jump { background: #f5f9f7; border: 1px solid #dfeae3; border-radius: 6px; box-sizing: border-box; margin: 0 0 46px; padding: 30px 34px; } .privacy_cont article .hw-catalog-jump .hw-catalog-kicker { color: var(--i_color2); font-size: 12px; font-weight: 700; letter-spacing: .12em; line-height: 1.4; margin: 0 0 8px; text-transform: uppercase; } .privacy_cont article .hw-catalog-jump h2 { border: 0; color: #111; font-size: 28px; line-height: 1.3; margin: 0 0 10px; padding: 0; } .privacy_cont article .hw-catalog-jump p { color: #4b5650; font-size: 15px; line-height: 1.7; margin: 0 !important; max-width: 880px; } .hw-catalog-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .hw-catalog-nav .wp-block-button { margin: 0; } .hw-catalog-nav .wp-block-button__link { background: #fff; border: 1px solid #cfe0d5; border-radius: 4px; color: #0b5c2e; font-size: 14px; font-weight: 600; line-height: 1.3; padding: 11px 17px; } .hw-catalog-nav .wp-block-button__link:hover, .hw-catalog-nav .wp-block-button__link:focus { background: #0f7a3d; border-color: #0f7a3d; color: #fff; } .hw-catalog-section { margin: 0 0 54px; scroll-margin-top: 118px; } .hw-catalog-section:last-child { margin-bottom: 0; } .hw-catalog-section .hw-featured-grid { margin-bottom: 0; } /* 总览页每个品类只展示 4 张产品卡；完整清单仍在分类页。 */ .page-id-50 .hw-catalog-section .hw-featured-grid > .wp-block-group__inner-container > .hw-featured-card:nth-child(n+5) { display: none !important; } @media screen and (min-width: 1201px) { .page-id-50 #inverters .hw-featured-grid--inverters > .wp-block-group__inner-container { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .hw-catalog-more { margin-top: 22px; } .hw-catalog-more .wp-block-button__link { background: transparent; border: 1px solid var(--i_color2); border-radius: 4px; color: var(--i_color2); font-size: 14px; font-weight: 600; line-height: 1.3; padding: 11px 20px; } .hw-catalog-more .wp-block-button__link:hover, .hw-catalog-more .wp-block-button__link:focus { background: var(--i_color2); border-color: var(--i_color2); color: #fff; } @media screen and (max-width: 767px) { .hw-catalog-jump { padding: 24px 20px; } .privacy_cont article .hw-catalog-jump h2 { font-size: 23px; } .hw-catalog-nav { gap: 8px; } .hw-catalog-nav .wp-block-button { flex: 1 1 calc(50% - 8px); } .hw-catalog-nav .wp-block-button__link { display: block; padding: 12px 10px; text-align: center; width: 100%; } .hw-catalog-section { margin-bottom: 40px; scroll-margin-top: 96px; } .hw-catalog-more .wp-block-button__link { padding: 12px 18px; } } /* -------------------------------------------------------------------------- K. 太阳能板详情页主图（父分类 Solar Panels，page ID 52） 4 个太阳能板详情页的主图统一为 500px 高，宽度按原图比例自适应， .parent-pageid-52 只命中太阳能板子页面，不影响逆变器/BESS/充电桩。 -------------------------------------------------------------------------- */ .parent-pageid-52 .hw-product-hero .hw-product-media img { height: 500px !important; width: auto !important; max-width: 100% !important; object-fit: contain; } /* DQAC-7000 产品主图：固定 600px 高，保持图片原始比例 */ .page-id-479 .hw-product-hero .hw-product-media img { height: 600px !important; width: auto; max-width: 100% !important; object-fit: contain; } /* -------------------------------------------------------------------------- L. 首页 Products 分类卡片缩略图 6 个分类卡片（同步区块 43）各配一张缩略图，统一 150px 高的图框， object-fit: contain 保证 1.2:1 产品图和 1:1 充电桩图都不会变形。 -------------------------------------------------------------------------- */ .hw-range-card .hw-range-thumb { margin: 0 0 14px; } .hw-range-card .hw-range-thumb img { display: block; width: 100%; height: 150px !important; max-width: 100%; margin: 0 auto; object-fit: contain; } @media screen and (max-width: 767px) { .hw-range-card .hw-range-thumb img { height: 130px !important; } } /* 首页 Products 区：分类页特色图作为卡片缩略图。 原来写死 height:150px + width:100% + contain：卡片内宽在宽屏有 322px， 而特色图都是 1.2:1 的画布，contain 后只画到 180×150，四周一大片白， 图相对卡片显得很小。改成让图框按 6:5 走满卡片宽度——和 1.2:1 的画布同比例， 于是三张 1.2:1 的图正好铺满，1:1 的充电桩图左右各留一点边，四张卡仍然等高。 产品本身的视觉大小差异是图片自带白边造成的，要再统一得重做这四张特色图。 */ .h_products .h_product_list li > a { align-items: center; display: flex; flex-direction: column; width: 100%; } .h_products .h_product_list li .img { margin: 0 0 12px; width: 100%; } .h_products .h_product_list li .img img { display: block; width: 100%; height: auto; aspect-ratio: 6 / 5; margin: 0 auto; object-fit: contain; } .h_products .h_product_list ul.active { display: flex; } @media screen and (max-width: 767px) { /* 两列布局：仍然按 6:5 走满卡宽，只给个上限，免得卡片被撑得太高 */ .h_products .h_product_list li .img img { max-height: 210px; } .h_products .h_product_list ul li, .h_products .h_product_list .active_our { width: 48% !important; padding: 18px 14px; } } @media screen and (max-width: 480px) { .h_products .h_product_list ul li, .h_products .h_product_list .active_our { width: 100% !important; } .h_products .h_product_list li .img img { max-height: 260px; } } /* * 首页公司简介右侧配图。 * 父主题给 .h_about .video 设了 width:45% + padding-bottom:60%（1.667:1）， * 1000×600 的世界地图刚好同比例；这里让图片绝对定位铺满容器， * object-fit:contain 保证地图边缘不会被裁掉。 */ .h_about .video.hw-about-picture { background: #fff; } .h_about .video.hw-about-picture img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: contain; } /* * FAQ 手风琴（同步区块「HV — FAQ」）。 * 版式对照 https://www.sunpal-energy.com/commercial 的 FAQs： * 灰底问题条 + 绿色 Q/A 标签 + 右侧加减号 + 浅灰答案区，一次只展开一条。 * 内容仍是原生 core/details，后台可逐条编辑。 */ .hw-faq { padding: 81px 0; } .hw-faq .hw-faq-title { margin: 0 0 35px; color: #000; font-size: 36px; font-weight: 700; line-height: 1.3; } .hw-faq .hw-faq-list { box-sizing: border-box; padding: 6px 0; background: #fff; } .hw-faq details { margin: 0 0 2px; background: #f0f2f5; font-size: 0; } .hw-faq details:last-child { margin-bottom: 0; } .hw-faq details summary { position: relative; display: flex; align-items: center; gap: 9px; box-sizing: border-box; min-height: 50px; margin: 0; padding: 9px 50px 9px 18px; color: #000; font-size: 14.4px; line-height: 1.45; cursor: pointer; list-style: none; } .hw-faq details summary::-webkit-details-marker { display: none; } .hw-faq details summary::marker { content: ""; } .hw-faq details summary::before { content: "Q :"; flex: 0 0 auto; color: var(--i_color2); font-size: 19.8px; font-weight: 700; line-height: 1.2; } .hw-faq details summary::after { content: ""; position: absolute; top: 50%; right: 18px; width: 14px; height: 14px; transform: translateY(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%23333333' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; } .hw-faq details[open] summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1 7h12' stroke='%23333333' stroke-width='1.6'/%3E%3C/svg%3E"); } .hw-faq details summary:focus-visible { outline: 2px solid var(--i_color2); outline-offset: -2px; } .hw-faq details > .wp-block-paragraph { display: flex; align-items: flex-start; gap: 9px; box-sizing: border-box; margin: 0; padding: 9px 18px; background: #f5f6f8; color: #333; font-size: 14.4px; line-height: 1.45; } .hw-faq details > .wp-block-paragraph::before { content: "A :"; flex: 0 0 auto; color: var(--i_color2); font-size: 19.8px; font-weight: 700; line-height: 1.2; } @media screen and (max-width: 767px) { .hw-faq { padding: 56px 0; } .hw-faq .hw-faq-title { margin-bottom: 24px; font-size: 30px; } .hw-faq .hw-faq-list { padding: 0; } .hw-faq details summary { min-height: 0; gap: 6px; padding: 13px 44px 13px 14px; font-size: 13.5px; } .hw-faq details summary::before, .hw-faq details > .wp-block-paragraph::before { font-size: 17px; } .hw-faq details summary::after { right: 14px; } .hw-faq details > .wp-block-paragraph { gap: 6px; padding: 11px 14px; font-size: 13.5px; } } /* 首屏「For …」适配行：比正文大 2px 并加粗 */ .privacy_cont article .hw-product-detail .hw-product-intro { font-size: 18px; font-weight: 700; } /* ------------------------------------------------------------------ * 页脚地址：多行 = 多个块 * 「外观 → 自定义 → 品牌与联系方式」的地址框里，一行 = 一个块； * 冒号前的词（Factory / Office）提成小标题单独一行。 * 只动 .hw-contact-line，不改父主题的页脚三列宽度（.f_contact 仍是 28%）。 * ------------------------------------------------------------------ */ .f_contact_list li.hw-contact-line { align-items: flex-start; } .f_contact_list li.hw-contact-line iconify-icon, .f_contact_list li.hw-contact-line .hw-contact-gap { flex: 0 0 auto; width: .2rem; margin-right: 10px; } .f_contact_list li.hw-contact-line iconify-icon { font-size: .2rem; margin-top: .03rem; } .hw-contact-addr { flex: 1 1 auto; min-width: 0; } .hw-contact-label { display: block; font-size: .18rem; line-height: 150%; color: var(--i_color2); } .hw-contact-addr p { margin-bottom: 0; line-height: 150%; word-break: break-word; } .f_contact_list li.hw-contact-next { margin-top: .12rem; } /* ------------------------------------------------------------------ * 产品列表页卡片墙 v2：一行 3 个、每个分类最多 12 张（4 行）。 * 2026-10-27 他要：产品名加粗；「For …」那行大一号并加粗；类目名大两号并加粗。 * 父主题把正文里所有 压成 14px / 400 / #666，而卡片标题和类目名都是链接， * 所以字号字重必须直接写给 a，只改 h2 / h3 不生效。 * ------------------------------------------------------------------ */ .hw-featured-grid > .wp-block-group__inner-container { grid-template-columns: repeat(3, minmax(0, 1fr)); } .privacy_cont article .hw-featured-grid h3, .privacy_cont article .hw-featured-grid h3 a { color: #111; font-size: 20px; font-weight: 700; line-height: 1.3; } .privacy_cont article .hw-featured-grid .hw-featured-model, .privacy_cont article .hw-featured-grid .hw-featured-model a { color: #3d4d45; font-size: 14px; font-weight: 700; } .privacy_cont article > h2.wp-block-heading, .privacy_cont article > h2.wp-block-heading a { color: #111; font-size: 16px; font-weight: 700; letter-spacing: .02em; } .privacy_cont article p.hw-view-all { margin: -18px 0 44px; font-size: 14px; font-weight: 600; } .privacy_cont article p.hw-view-all a { color: var(--i_color2); font-size: 14px; font-weight: 600; } @media screen and (max-width: 1200px) { .hw-featured-grid > .wp-block-group__inner-container { grid-template-columns: repeat(2, minmax(0, 1fr)); } .privacy_cont article .hw-featured-grid h3, .privacy_cont article .hw-featured-grid h3 a { font-size: 18px; } } @media screen and (max-width: 640px) { .hw-featured-grid > .wp-block-group__inner-container { grid-template-columns: minmax(0, 1fr); } .privacy_cont article .hw-featured-grid h3, .privacy_cont article .hw-featured-grid h3 a { font-size: 17px; } .privacy_cont article p.hw-view-all { margin-top: -4px; } } /* 关于我们（页 23）：内页容器最宽 1660px，五段纯文字铺满一行实测 237 个字符， 没法读。只给这一页的正文收一个阅读宽度并居中——不动 .privacy_cont 容器、 不影响其它内页；以后这页加图片/列表也一起收在这个宽度里。 */ /* 860px 阅读宽度已撤：About 改走参考站版式，通栏带要铺满，宽度由每段里的 .wrap 控制 */ /* 这一页正文原来是 14px，太小（他要求放大）。段落 +3px = 17px，行高跟着走 1.7， 否则 17px 的字配 24px 行高会挤。 必须直接命中 p：父主题给 p 定过 font-size，写在 article 上会被自己的规则盖掉。 */ .page-id-23 .privacy_cont article p { font-size: 17px; line-height: 1.7; } /* -------------------------------------------------------------------------- 首页 Products 区顶部的「全部产品类目」按钮（红框那个位置，替掉父主题写死的 Product Range 标签）。类目数量由 hw_home_category_buttons() 现算，以后加子分类 不用改这里。 注意选择器要带 .h_products 前缀：style.css 上面另有一套 .privacy_cont article .hw-cat-nav a 的规则，是给产品线页正文顶部那排按钮用的，两个组件同名但不同位置， 不写作用域就会互相污染。 -------------------------------------------------------------------------- */ .h_products .hw-cat-nav { display: grid; /* 等宽格子而不是居中 flex：每行第一枚贴左、最后一枚贴右，跟下面的产品卡同宽 */ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 26px auto 0; /* 父主题给「所有