/* * Theme Name: BN-Parts-Arabic * Theme URI: https://example.com/bn-parts-arabic * Description: B2B 工业 MRO 主题 —— 面向 Bently Nevada 备件供应商。现代标准阿拉伯语 RTL 布局、双语（阿/英）混排排版、工业级 SEO 与询盘转化优化。纯 CPT 询盘模式，不依赖 WooCommerce / 页面构建器。 * Version: 1.0 * Requires at least: 6.0 * Tested up to: 6.5 * Requires PHP: 7.4 * Author: BN Parts Engineering * Author URI: https://example.com * License: GNU GPL v2 or later * License URI: https://www.gnu.org/licenses/gpl-2.0.html * Text Domain: bn-parts * Domain Path: /languages * Tags: rtl-language-support, custom-post-type, industrial, b2b, seo, responsive * * 设计决策（与 SEO / 转化相关）： * 1. 所有型号、零件号、技术代码一律走 ，强制 unicode-bidi: embed + direction: ltr， * 避免阿拉伯语环境下数字/字母被反向渲染导致型号误读（如 3500/42M 不会被 RTL 翻转）。 * 2. UI 字体 Tajawal（数字字母辨识度高）；技术参数表使用等宽 IBM Plex Mono 保证列对齐。 * 3. 正文 ≥ 17px，型号 ≥ 16px 且加粗，降低相似型号（3500/42 vs 3500/44）视觉混淆。 * 4. 去除非必要过渡动画，工业用户偏好高效直接（性能优化诉求）。 */ /* ========================================================================== 0. CSS 变量系统（工业风 + RTL 友好） ========================================================================== */ :root { /* 品牌色：Bently Nevada 工业蓝 + 安全警示橙（用于 CTA / 关键动作） */ --bn-color-primary: #0a3d62; /* 深工业蓝 —— 主色、标题、品牌 */ --bn-color-primary-dark: #072a45; --bn-color-accent: #e67e22; /* 警示橙 —— 询价 CTA、价格/库存强调 */ --bn-color-accent-hover: #d35400; --bn-color-success: #1e8449; /* 认证/可用状态（绿） */ /* 中性色 */ --bn-color-bg: #ffffff; --bn-color-surface: #f4f6f8; /* 区块背景 */ --bn-color-border: #d9dee3; --bn-color-text: #1b2733; /* 主正文（深灰蓝，优于纯黑） */ --bn-color-text-muted: #5b6b7b; /* 次要文本 */ --bn-color-code-bg: #eef2f6; /* 型号代码底纹 */ /* 排版 */ --bn-font-ui: 'Tajawal', 'Segoe UI', Tahoma, sans-serif; --bn-font-mono: 'IBM Plex Mono', 'Courier New', monospace; /* 字号（满足正文 ≥17px / 型号 ≥16px 加粗） */ --bn-fs-body: 17px; --bn-fs-body-sm: 15px; --bn-fs-code: 16px; --bn-fs-h1: 30px; --bn-fs-h2: 24px; --bn-fs-h3: 20px; /* 间距与圆角 */ --bn-radius: 6px; --bn-gap: 1.25rem; --bn-container: 1200px; /* 触控最小目标（移动端 ≥48px） */ --bn-tap: 48px; } /* ========================================================================== 1. 基础重置 & RTL 根属性 ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { direction: rtl; /* lang="ar" 由 标签输出（见 header.php），这里兜底 */ line-height: 1.6; -webkit-text-size-adjust: 100%; font-size: 100%; } body { margin: 0; font-family: var(--bn-font-ui); font-size: var(--bn-fs-body); color: var(--bn-color-text); background: var(--bn-color-bg); line-height: 1.7; } img { max-width: 100%; height: auto; display: block; } a { color: var(--bn-color-primary); text-decoration: none; } a:hover, a:focus { color: var(--bn-color-accent); text-decoration: underline; } h1, h2, h3, h4 { color: var(--bn-color-primary); line-height: 1.3; margin: 0 0 0.6em; font-weight: 700; } h1 { font-size: var(--bn-fs-h1); } h2 { font-size: var(--bn-fs-h2); } h3 { font-size: var(--bn-fs-h3); } /* ========================================================================== 2. 双语混排核心：型号 / 零件号 / 技术代码 -------------------------------------------------------------------------- 阿拉伯语正文为 RTL，但所有型号、SKU、MPN、技术单元必须为 LTR。 统一用 包裹，并强制 embed + ltr。 ========================================================================== */ code.ltr-part, .ltr-part { direction: ltr; unicode-bidi: embed; font-family: var(--bn-font-mono); font-size: var(--bn-fs-code); font-weight: 700; color: var(--bn-color-primary-dark); background: var(--bn-color-code-bg); padding: 0.1em 0.45em; border-radius: 4px; white-space: nowrap; /* 型号不被换行打断 */ word-break: keep-all; display: inline-block; } /* 正文里内联出现的型号，略微缩小内边距以免打断阅读流 */ p code.ltr-part, li code.ltr-part { font-size: 0.95em; vertical-align: baseline; } /* ========================================================================== 3. 布局容器 ========================================================================== */ .bn-container { width: 100%; max-width: var(--bn-container); margin-inline: auto; /* RTL 下自动居中（逻辑属性） */ padding-inline: 1rem; } .bn-site-header { background: var(--bn-color-primary); color: #fff; } .bn-site-header a { color: #fff; } .bn-site-footer { background: var(--bn-color-primary-dark); color: #cdd9e3; padding: 2.5rem 0; margin-top: 3rem; font-size: var(--bn-fs-body-sm); } .bn-site-footer a { color: #cdd9e3; } /* ========================================================================== 4. 顶部全局搜索（型号模糊联想 + 零件号直达） ========================================================================== */ .bn-global-search { background: var(--bn-color-primary-dark); padding: 0.75rem 0; } .bn-global-search form { display: flex; gap: 0.5rem; align-items: center; max-width: var(--bn-container); margin-inline: auto; padding-inline: 1rem; } .bn-global-search input[type="search"] { flex: 1; min-height: var(--bn-tap); padding: 0 1rem; font-family: var(--bn-font-ui); font-size: var(--bn-fs-body); border: 2px solid var(--bn-color-accent); border-radius: var(--bn-radius); background: #fff; color: var(--bn-color-text); } .bn-global-search button { min-height: var(--bn-tap); min-width: var(--bn-tap); padding: 0 1.25rem; background: var(--bn-color-accent); color: #fff; border: none; border-radius: var(--bn-radius); font-weight: 700; cursor: pointer; font-family: var(--bn-font-ui); } .bn-global-search button:hover { background: var(--bn-color-accent-hover); } /* 搜索联想下拉（JS 增强，见 inc/search-suggest.js） */ .bn-suggest-list { position: absolute; inset-inline-start: 1rem; inset-inline-end: 1rem; top: 100%; background: #fff; border: 1px solid var(--bn-color-border); border-radius: var(--bn-radius); box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 50; max-height: 320px; overflow-y: auto; } .bn-suggest-item { padding: 0.6rem 1rem; border-bottom: 1px solid var(--bn-color-surface); cursor: pointer; color: var(--bn-color-text); } .bn-suggest-item:hover { background: var(--bn-color-surface); } .bn-suggest-item .bn-suggest-sku { color: var(--bn-color-primary); } /* ========================================================================== 5. 产品详情页布局（RTL：右→左 = 图 → 描述 → CTA） ========================================================================== */ .bn-product-layout { display: grid; grid-template-columns: 1fr; gap: var(--bn-gap); margin-top: 1.5rem; } @media (min-width: 992px) { .bn-product-layout { /* RTL 下：第一列在最右。顺序：图(右) | 描述(中) | CTA(左) */ grid-template-columns: 320px 1fr 300px; } } /* 5a. 右侧：产品图 + 认证标识 */ .bn-product-media img { background: #fff; border: 1px solid var(--bn-color-border); border-radius: var(--bn-radius); width: 100%; } .bn-cert-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; } .bn-cert-badge { font-size: 13px; font-weight: 700; color: var(--bn-color-success); border: 1px solid var(--bn-color-success); border-radius: 4px; padding: 0.2rem 0.5rem; background: rgba(30,132,73,0.06); } /* 5a-1. 产品相册：主图 + 缩略图条 */ .bn-gallery-main { margin-bottom: 0.75rem; } .bn-gallery-main img { background: #fff; border: 1px solid var(--bn-color-border); border-radius: var(--bn-radius); width: 100%; display: block; } .bn-gallery-thumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; } .bn-gallery-thumb { padding: 0; border: 2px solid transparent; border-radius: var(--bn-radius); background: #fff; cursor: pointer; line-height: 0; overflow: hidden; transition: border-color 0.15s ease; } .bn-gallery-thumb img { width: 72px; height: 72px; object-fit: cover; display: block; } .bn-gallery-thumb:hover { border-color: var(--bn-color-border); } .bn-gallery-thumb.is-active { border-color: var(--bn-color-primary); } /* 5b. 中间：阿拉伯语描述 + 技术规格表 */ .bn-product-desc { font-size: var(--bn-fs-body); } .bn-tech-specs { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: var(--bn-fs-body-sm); background: #fff; } .bn-tech-specs caption { text-align: start; /* RTL 下视为右对齐 */ font-weight: 700; color: var(--bn-color-primary); padding: 0.5rem 0; font-size: var(--bn-fs-h3); } .bn-tech-specs th, .bn-tech-specs td { border: 1px solid var(--bn-color-border); padding: 0.7rem 0.9rem; text-align: start; /* RTL 表头默认右对齐，符合阿拉伯阅读 */ vertical-align: top; } .bn-tech-specs th { background: var(--bn-color-surface); width: 38%; white-space: nowrap; } /* 数值单位保持 LTR（数值本身被 .ltr-part 强制 ltr，此处保证单元格方向稳定） */ .bn-tech-specs td .bn-unit { direction: ltr; unicode-bidi: embed; display: inline-block; } /* 5c. 左侧：悬浮 CTA + WhatsApp + PDF */ .bn-product-cta { display: flex; flex-direction: column; gap: 0.75rem; position: sticky; top: 1rem; } .bn-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: var(--bn-tap); /* 触控 ≥48px */ padding: 0 1rem; border-radius: var(--bn-radius); font-weight: 700; font-family: var(--bn-font-ui); font-size: var(--bn-fs-body); cursor: pointer; border: 2px solid transparent; text-decoration: none; } .bn-btn:hover { text-decoration: none; } .bn-btn--quote { background: var(--bn-color-accent); color: #fff; } .bn-btn--quote:hover { background: var(--bn-color-accent-hover); color: #fff; } .bn-btn--whatsapp { background: #25d366; color: #fff; } .bn-btn--whatsapp:hover { background: #1ebe5d; color: #fff; } .bn-btn--pdf { background: #fff; color: var(--bn-color-primary); border-color: var(--bn-color-primary); } .bn-btn--pdf:hover { background: var(--bn-color-surface); } /* 移动端：CTA 底部固定栏 */ .bn-mobile-cta { position: fixed; inset-inline: 0; bottom: 0; display: flex; gap: 0.5rem; padding: 0.5rem; background: #fff; border-top: 1px solid var(--bn-color-border); box-shadow: 0 -4px 16px rgba(0,0,0,0.08); z-index: 60; } .bn-mobile-cta .bn-btn { flex: 1; font-size: 15px; } @media (min-width: 992px) { .bn-mobile-cta { display: none; } } /* ========================================================================== 6. 交叉引用：Compatible With / Replaces ========================================================================== */ .bn-crossref { margin-top: 2rem; } .bn-crossref h3 { border-bottom: 2px solid var(--bn-color-surface); padding-bottom: 0.4rem; } .bn-crossref-list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0.75rem 0 0; } .bn-crossref-list li a { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid var(--bn-color-border); border-radius: 4px; padding: 0.4rem 0.7rem; font-size: var(--bn-fs-body-sm); } .bn-crossref-list li a:hover { border-color: var(--bn-color-accent); text-decoration: none; } /* ========================================================================== 7. 产品列表页 / 归档页 + 筛选器（RTL） ========================================================================== */ .bn-archive-layout { display: grid; grid-template-columns: 1fr; gap: var(--bn-gap); margin-top: 1.5rem; } @media (min-width: 992px) { .bn-archive-layout { grid-template-columns: 260px 1fr; } } .bn-filters { background: var(--bn-color-surface); border: 1px solid var(--bn-color-border); border-radius: var(--bn-radius); padding: 1rem; } .bn-filters h3 { font-size: var(--bn-fs-h3); margin-top: 0; } .bn-filters ul { list-style: none; padding: 0; margin: 0 0 1rem; } .bn-filters li { margin-bottom: 0.35rem; } .bn-filters a { font-size: var(--bn-fs-body-sm); } .bn-filter-group-title { font-weight: 700; color: var(--bn-color-primary-dark); margin: 0.8rem 0 0.4rem; } .bn-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; } .bn-product-card { border: 1px solid var(--bn-color-border); border-radius: var(--bn-radius); background: #fff; overflow: hidden; display: flex; flex-direction: column; transition: none; /* 禁用动画：工业高效 */ } .bn-product-card:hover { border-color: var(--bn-color-accent); } .bn-product-card .bn-card-media { background: var(--bn-color-surface); aspect-ratio: 1 / 1; } .bn-product-card .bn-card-body { padding: 0.9rem; flex: 1; display: flex; flex-direction: column; } .bn-product-card h3 { font-size: var(--bn-fs-body); margin: 0 0 0.4rem; } .bn-product-card .bn-card-sku { margin-top: auto; } /* ========================================================================== 8. 面包屑 ========================================================================== */ .bn-breadcrumb { font-size: var(--bn-fs-body-sm); color: var(--bn-color-text-muted); padding: 0.75rem 0; } .bn-breadcrumb a { color: var(--bn-color-text-muted); } .bn-breadcrumb .sep { margin: 0 0.4rem; opacity: 0.6; } /* ========================================================================== 9. 搜索结果页（高亮匹配 SKU / 型号） ========================================================================== */ .bn-search-result { border-bottom: 1px solid var(--bn-color-surface); padding: 1rem 0; } .bn-search-result .bn-result-sku { margin-top: 0.4rem; } .bn-search-hit { background: #fff3cd; /* 高亮命中关键词 */ font-weight: 700; padding: 0 0.15em; border-radius: 3px; } /* ========================================================================== 10. 信任元素区（授权徽章 / ISO / 本地服务点） ========================================================================== */ .bn-trust-bar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; background: var(--bn-color-surface); border: 1px solid var(--bn-color-border); border-radius: var(--bn-radius); padding: 1rem 1.25rem; margin: 1.5rem 0; } .bn-trust-bar .bn-trust-item { display: flex; align-items: center; gap: 0.5rem; font-size: var(--bn-fs-body-sm); } .bn-trust-bar .bn-trust-item strong { color: var(--bn-color-primary); } /* ========================================================================== 11. 无障碍 / 焦点可见 ========================================================================== */ a:focus, button:focus, input:focus, .bn-btn:focus { outline: 3px solid var(--bn-color-accent); outline-offset: 2px; } /* ========================================================================== 12. 图片懒加载占位（性能优化） ========================================================================== */ img.bn-lazy { background: var(--bn-color-surface); min-height: 120px; } /* ========================================================================== 13. 响应式断点微调 ========================================================================== */ @media (max-width: 600px) { :root { --bn-fs-h1: 24px; --bn-fs-h2: 20px; --bn-fs-h3: 18px; } .bn-global-search form { flex-wrap: wrap; } .bn-global-search input[type="search"] { width: 100%; } } /* 尊重用户的减少动画偏好 */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ===== 新闻/文章单页 (single.php) ===== */ .bn-article { max-width: 820px; margin-inline: auto; padding-block: 2rem; } .bn-article-header { margin-bottom: 1.25rem; border-bottom: 1px solid #eee; padding-bottom: 1rem; } .bn-article-title { font-size: 1.9rem; line-height: 1.4; margin: 0 0 .5rem; } .bn-article-meta { color: #777; font-size: .9rem; display: flex; gap: 1rem; flex-wrap: wrap; } .bn-article-thumb { margin: 1.5rem 0; } .bn-article-thumb img { max-width: 100%; height: auto; border-radius: 8px; } .bn-article-content { font-size: 1.05rem; line-height: 1.9; } .bn-article-content h2 { font-size: 1.4rem; margin: 2rem 0 1rem; } .bn-article-content p { margin: 0 0 1.1rem; } .bn-article-content img { max-width: 100%; height: auto; } /* ===== 新闻配图（脚本注入） ===== */ .kbap-news-figure { margin: 1.75rem 0; text-align: center; } .kbap-news-figure .kbap-news-img { max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,.08); } /* ========================================================================== 14. 首页（index.php）RTL 视觉组件 ========================================================================== */ .bn-hero { background: linear-gradient(135deg, var(--bn-color-primary), var(--bn-color-primary-dark)); color: #fff; padding: 3rem 0 2.5rem; } .bn-hero h1 { color: #fff; font-size: clamp(28px, 4vw, 42px); margin: 0 0 0.75rem; } .bn-hero-sub { color: #e3ecf3; max-width: 760px; font-size: var(--bn-fs-body); margin: 0 0 1.5rem; } .bn-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } .bn-hero .bn-btn--pdf { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.5); } .bn-hero .bn-btn--pdf:hover { background: rgba(255,255,255,0.22); } .bn-home-intro { margin: 2rem 0; } .bn-home-intro h2 { font-size: var(--bn-fs-h2); } .bn-home-intro p { font-size: var(--bn-fs-body); line-height: 1.9; max-width: 920px; } .bn-home-intro a { color: var(--bn-color-accent); font-weight: 700; } .bn-home-intro a:hover { text-decoration: underline; } .bn-home-section { margin: 2.5rem 0; } .bn-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-bottom: 2px solid var(--bn-color-surface); padding-bottom: 0.5rem; margin-bottom: 1.25rem; } .bn-section-head h2 { margin: 0; font-size: var(--bn-fs-h2); } .bn-link-more { color: var(--bn-color-accent); font-weight: 700; white-space: nowrap; } .bn-link-more:hover { color: var(--bn-color-accent-hover); text-decoration: underline; } .bn-home-cta-line { margin-top: 1rem; font-size: var(--bn-fs-body-sm); color: var(--bn-color-text-muted); } .bn-home-cta-line a { font-weight: 700; } /* Pillars（系列/类别/应用 快捷导航） */ .bn-home-pillars { margin: 2.5rem 0; background: var(--bn-color-surface); border: 1px solid var(--bn-color-border); border-radius: var(--bn-radius); padding: 1.25rem 1.5rem; } .bn-home-pillars h2 { font-size: var(--bn-fs-h2); margin-top: 0; } .bn-pillars-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; } .bn-pillar-col h3 { font-size: var(--bn-fs-h3); margin: 0 0 0.6rem; } .bn-pillar-col ul { list-style: none; padding: 0; margin: 0; } .bn-pillar-col li { margin-bottom: 0.4rem; } .bn-pillar-col a { font-size: var(--bn-fs-body-sm); color: var(--bn-color-primary); } .bn-pillar-col a:hover { color: var(--bn-color-accent); } /* 首页 CTA 引导区 */ .bn-home-cta-band { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; background: var(--bn-color-primary-dark); color: #fff; border-radius: var(--bn-radius); padding: 1.5rem 2rem; margin: 3rem 0 1rem; } .bn-home-cta-band h2 { color: #fff; margin: 0 0 0.4rem; font-size: var(--bn-fs-h2); } .bn-home-cta-band p { color: #cdd9e3; margin: 0; } /* ========================================================================== 15. 新闻卡片（首页 + 新闻列表） ========================================================================== */ .bn-news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; } .bn-news-card { border: 1px solid var(--bn-color-border); border-radius: var(--bn-radius); background: #fff; overflow: hidden; display: flex; flex-direction: column; } .bn-news-card-media { background: var(--bn-color-surface); aspect-ratio: 16 / 9; overflow: hidden; } .bn-news-card-media img { width: 100%; height: 100%; object-fit: cover; } .bn-news-card-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; } .bn-news-card-body h3 { font-size: var(--bn-fs-body); margin: 0; } .bn-news-card-body h3 a { color: var(--bn-color-primary); } .bn-news-card-meta { color: var(--bn-color-text-muted); font-size: 13px; } .bn-news-card-excerpt { color: var(--bn-color-text-muted); font-size: var(--bn-fs-body-sm); margin: 0; } /* 列表样式（新闻页主栏） */ .bn-news-grid--list { grid-template-columns: 1fr; } .bn-news-card--row { flex-direction: row; align-items: stretch; } .bn-news-card--row .bn-news-card-media { flex: 0 0 220px; aspect-ratio: auto; } .bn-news-card--row .bn-news-card-body { flex: 1; } @media (max-width: 600px) { .bn-news-card--row { flex-direction: column; } .bn-news-card--row .bn-news-card-media { flex: auto; aspect-ratio: 16 / 9; } } /* ========================================================================== 16. 新闻列表页布局（主栏 + 侧栏） ========================================================================== */ .bn-news-header { margin: 1.5rem 0 1rem; } .bn-news-header h1 { margin: 0 0 0.5rem; font-size: var(--bn-fs-h1); } .bn-news-header p { color: var(--bn-color-text-muted); max-width: 760px; } .bn-news-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 2rem; } @media (min-width: 992px) { .bn-news-layout { grid-template-columns: 1fr 300px; } } .bn-news-side { display: flex; flex-direction: column; gap: 1.5rem; } .bn-side-block { background: var(--bn-color-surface); border: 1px solid var(--bn-color-border); border-radius: var(--bn-radius); padding: 1rem 1.1rem; } .bn-side-block h3 { font-size: var(--bn-fs-h3); margin-top: 0; } .bn-side-news { list-style: none; padding: 0; margin: 0; } .bn-side-news li { padding: 0.5rem 0; border-bottom: 1px solid var(--bn-color-border); } .bn-side-news li:last-child { border-bottom: none; } .bn-side-news a { color: var(--bn-color-primary); font-size: var(--bn-fs-body-sm); font-weight: 500; } .bn-side-news-date { display: block; color: var(--bn-color-text-muted); font-size: 12px; margin-top: 0.2rem; } .bn-side-products { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; } .bn-side-product { display: flex; flex-direction: column; gap: 0.3rem; border: 1px solid var(--bn-color-border); border-radius: 4px; padding: 0.5rem; background: #fff; text-align: start; } .bn-side-product:hover { border-color: var(--bn-color-accent); text-decoration: none; } .bn-side-product img { width: 100%; height: 64px; object-fit: contain; background: var(--bn-color-surface); border-radius: 4px; } .bn-side-product-title { font-size: 13px; color: var(--bn-color-text); line-height: 1.3; } .bn-side-product-sku { font-size: 12px; } .bn-side-cta { margin: 0.75rem 0 0; text-align: start; } /* 新闻页上下文 chips */ .bn-news-context, .bn-product-context { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 1.5rem 0; padding-top: 1rem; border-top: 1px solid var(--bn-color-surface); } .bn-news-context-label { color: var(--bn-color-text-muted); font-size: var(--bn-fs-body-sm); margin-inline-end: 0.25rem; } .bn-chip { display: inline-flex; align-items: center; border: 1px solid var(--bn-color-border); border-radius: 999px; padding: 0.35rem 0.85rem; font-size: var(--bn-fs-body-sm); color: var(--bn-color-primary); background: #fff; } .bn-chip:hover { border-color: var(--bn-color-accent); color: var(--bn-color-accent); text-decoration: none; } /* ========================================================================== 17. 相关区块（新闻单页 / 产品详情页） ========================================================================== */ .bn-related { margin: 2.5rem 0 0; } .bn-related h2 { font-size: var(--bn-fs-h2); border-bottom: 2px solid var(--bn-color-surface); padding-bottom: 0.5rem; } .bn-related-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.75rem; } .bn-related-list li { border: 1px solid var(--bn-color-border); border-radius: var(--bn-radius); padding: 0.75rem 1rem; background: #fff; } .bn-related-list a { color: var(--bn-color-primary); font-weight: 500; } .bn-related-date { display: block; color: var(--bn-color-text-muted); font-size: 12px; margin-top: 0.3rem; } .bn-related-more { margin-top: 1rem; } .bn-related-products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-top: 1rem; } /* ========================================================================== 18. 全站联系信息（顶栏 + 页脚） ========================================================================== */ .bn-topbar { background: var(--bn-color-primary); color: #fff; font-size: 13px; } .bn-topbar-inner { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; padding-block: 0.4rem; } .bn-topbar-item { color: #eaf1f7; text-decoration: none; } .bn-topbar-item:hover { color: #fff; text-decoration: underline; } .bn-topbar-item span[dir="ltr"] { direction: ltr; unicode-bidi: embed; display: inline-block; } .bn-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; padding-block: 2rem; } .bn-footer-col h4 { color: #fff; margin: 0 0 0.85rem; font-size: 16px; } .bn-footer-contact p { margin: 0.35rem 0; color: #cdd9e3; line-height: 1.5; } .bn-footer-label { color: #fff; font-weight: 600; margin-inline-end: 0.35rem; } .bn-footer-contact a { color: #9ec5e8; text-decoration: none; } .bn-footer-contact a:hover { color: #fff; text-decoration: underline; } .bn-footer-wa { display: inline-block; margin-top: 0.4rem; background: #25d366; color: #fff; padding: 0.3rem 0.8rem; border-radius: 999px; font-weight: 600; } .bn-footer-wa:hover { color: #fff; filter: brightness(1.05); } .bn-footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-block: 1rem; color: #9fb0bf; font-size: 13px; } @media (max-width: 768px) { .bn-footer-grid { grid-template-columns: 1fr; gap: 1.25rem; } } /* ========================================================================== 19. 在线留言表单（产品详情页） ========================================================================== */ .bn-inquiry { background: var(--bn-color-surface); border: 1px solid var(--bn-color-border); border-radius: var(--bn-radius); padding: 1.5rem; } .bn-inquiry-intro { color: var(--bn-color-text-muted); margin: 0.25rem 0 1rem; } .bn-inquiry-form { display: grid; gap: 0.9rem; } .bn-inquiry-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; } .bn-inquiry-form label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 14px; font-weight: 600; color: var(--bn-color-text); } .bn-inquiry-form input, .bn-inquiry-form textarea { border: 1px solid var(--bn-color-border); border-radius: var(--bn-radius); padding: 0.65rem 0.8rem; font: inherit; background: #fff; color: var(--bn-color-text); width: 100%; box-sizing: border-box; } .bn-inquiry-form input:focus, .bn-inquiry-form textarea:focus { outline: none; border-color: var(--bn-color-primary); box-shadow: 0 0 0 3px rgba(18,52,86,.12); } .bn-inquiry-form input[readonly] { background: #f4f6f8; color: var(--bn-color-text-muted); } .bn-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .bn-inquiry-form .bn-btn--quote { justify-self: start; margin-top: 0.25rem; } .bn-inquiry-alert { padding: 0.75rem 1rem; border-radius: var(--bn-radius); margin-bottom: 1rem; font-weight: 600; } .bn-inquiry-alert--ok { background: #e6f6ec; color: #1c7a3e; border: 1px solid #b6e3c6; } .bn-inquiry-alert--err { background: #fdecec; color: #b42323; border: 1px solid #f3c2c2; } @media (max-width: 600px) { .bn-inquiry-row { grid-template-columns: 1fr; } } /* ========================================================================== 20. 新闻列表页增强（hero / 分类筛选） ========================================================================== */ .bn-news-header--hero { background: linear-gradient(135deg, var(--bn-color-primary), #0d2a47); color: #fff; border-radius: var(--bn-radius); padding: 2rem; margin-bottom: 1.25rem; } .bn-news-header--hero h1 { color: #fff; margin: 0 0 0.5rem; } .bn-news-header--hero p { color: #d6e2ec; margin: 0; max-width: 720px; } .bn-news-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; } .bn-news-filter .bn-chip.is-active { background: var(--bn-color-primary); color: #fff; border-color: var(--bn-color-primary); } /* ========================================================================== 21. 通用页面模板（page.php） ========================================================================== */ .bn-page-hero { background: linear-gradient(135deg, var(--bn-color-primary), var(--bn-color-primary-dark)); color: #fff; padding: 2rem 0 1.75rem; } .bn-page-hero .bn-breadcrumb { margin-bottom: 0.75rem; } .bn-page-hero .bn-breadcrumb, .bn-page-hero .bn-breadcrumb a { color: rgba(255,255,255,0.7); } .bn-page-hero .bn-breadcrumb a:hover { color: #fff; } .bn-page-hero .bn-breadcrumb-sep { margin: 0 0.5rem; opacity: 0.5; } .bn-page-hero h1 { color: #fff; font-size: clamp(24px, 3.5vw, 36px); margin: 0; line-height: 1.35; } .bn-page { max-width: 820px; margin-inline: auto; padding-block: 2rem; } .bn-page-thumb { margin-bottom: 1.5rem; } .bn-page-thumb img { border-radius: 8px; width: 100%; height: auto; } .bn-page-content { font-size: 1.05rem; line-height: 1.9; } .bn-page-content h2 { font-size: 1.4rem; margin: 2rem 0 1rem; color: var(--bn-color-primary); } .bn-page-content h3 { font-size: 1.2rem; margin: 1.5rem 0 0.75rem; } .bn-page-content p { margin: 0 0 1.1rem; } .bn-page-content img { max-width: 100%; height: auto; border-radius: 6px; } .bn-page-content ul, .bn-page-content ol { padding-inline-start: 1.5rem; margin-bottom: 1.1rem; } .bn-page-content li { margin-bottom: 0.4rem; }