/* * 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; } .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); } /* 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; } }