/* ==========================================================================
RUIBIT PATCH — 独立补丁文件（遮蔽保险）
2026-10-07 | energy
==========================================================================
为什么把补丁同时放进这个文件：
Publii 渲染时优先读 <主题>-override/ 里的同名文件。补丁原本只写在
style.css 里，一旦 override 里的 style.css 被还原成原始版，
补丁就会被整体遮蔽。
本文件**只存在于主题目录**，override 里没有同名文件，
因此无论 style.css 被如何覆盖，本文件都会生效。
它在 head.hbs 中排在 style.css 之后加载，靠源码顺序覆盖同特异度规则。
内容 = 以下补丁文件的顺序拼接：
- visual-refresh-energy.css
- mobile-fix-energy.css
- nav-dropdown-gap-fix.css
内容与追加在 style.css 末尾的补丁完全一致（同一份规则，重复应用无副作用）。
回退方式：删除本文件，并移除 head.hbs 里对应的 行。
========================================================================== */
/* ==========================================================================
VISUAL REFRESH — energy 专属（方案 D：保留品牌橙 #e67e22）
2026-10-07 | ruibitenergy | Ruibit Energy Theme | 纯 CSS，不改模板
==========================================================================
本补丁**只能用于 energy，不能用于 bess** —— 两站配色完全不同：
bess 标题 #3498db（亮蓝）· 深色导航 #2c3e50 · 按钮 #2980b9 · 强调 #1abc9c
energy 标题 #2a5c8b（深藏青）· 白色导航 #ffffff · 按钮 #e67e22（橙）· 强调 #27ae60
因此 bess 那份补丁里的两项对 energy 不适用，本补丁刻意不含：
- 「标题改近黑」：energy 标题 #2a5c8b 实测 6.99:1，本来就达标，
强行改近黑只会改变它本来的视觉
- 「页脚改浅色」：energy 的 .footer-col p 已写死 #d0d7e0，实测 7.57:1，
本来就达标
本补丁只修 energy 实测**不达标**的三处。
-------------------------------------------------------------------------- */
:root{
/* [1] 正文可读性
#7f8c8d 压白底 = 3.48:1（AA 需 4.5:1）
改 #5b6672 = 5.85:1
安全性核实：var(--gray) 在本主题中只被用于 color 属性（11 处），
无一处用于边框或背景，因此改令牌是安全的 */
--gray:#5b6672;
/* [2] 橙色 hover 底色
.btn:hover 原用 #d35400。方案 D 把按钮文字改成深色后，
深字压 #d35400 只有 3.73:1，反而不达标。
换成略深一档的 #db7720：深字压它 = 4.94:1，
且仍比品牌橙 #e67e22 更深，悬停有可见反馈。
该令牌同时被 .nav-list>li.nav-cta>a:hover 使用，一并生效。 */
--cta-hover:#db7720;
/* [3] 补齐三个被引用但从未定义的变量（与 bess 相同的既有缺陷）
实测：--border-radius(2 处) / --page-width(1 处) / --page-margin(1 处)
原声明全部整条失效。 */
--border-radius:6px;
--page-width:1200px;
--page-margin:20px;
}
/* --------------------------------------------------------------------------
[方案 D] 橙底保留品牌橙 #e67e22，文字由白色改为深色
实测 #1a252f 压 #e67e22 = 5.46:1（原白字 2.85:1）
为什么用 #1a252f 而不是主题自带的 --dark(#2c3e50)：后者压橙色只有 3.86:1。
逐个列出，因为 .product-info a.btn 的特异度(0,2,1)高于 .btn(0,1,0)，
只写 .btn 无法覆盖它。
-------------------------------------------------------------------------- */
.btn,
.product-info a.btn,
.btn-outline:hover,
.btn-view-all:hover,
.nav-list>li.nav-cta>a,
.news-date{
color:#1a252f;
}
/* 主按钮 hover 底色改用 --cta-hover（见上方 [2]） */
.btn:hover{
background-color:var(--cta-hover);
}
/* --------------------------------------------------------------------------
修正：次按钮 .btn-outline 的 idle 状态
它同时带 .btn 与 .btn-outline 两个类，而两个类的特异度相同(0,1,0)——
上面那条 .btn{color:#1a252f} 会一并命中它。
但它的 background-color 是 transparent，压在 Hero 的深色照片上，
深色字实测只有约 1.2–1.7:1，比原来的橙字更差。
因此这里改为「白底实心 + 深色字」，与 bess 的处理保持一致：
不依赖照片明暗，白底 #fff 配 #1a252f = 15.6:1。
-------------------------------------------------------------------------- */
.btn-outline{
background-color:#fff;
border:2px solid #fff;
color:#1a252f;
}
.btn-outline:hover{
background-color:#f2f2f2;
border-color:#f2f2f2;
color:#1a252f;
}
/* --------------------------------------------------------------------------
[方案 A] 橙色当作「文字色」的 3 处 → 换成深一档橙
橙色**底**完全不变（#e67e22 仍用于 .btn / .nav-cta / .news-date 等）
为什么不直接改 --secondary：它同时被用作 .btn 等元素的
background-color，改它会把橙色底一并改掉。所以新增独立令牌。
实测（原始 CSS 中共 13 条「橙色当 color」的规则，其中只有这 3 处是文字，
其余 .feature i / .advantage-icon / .global-stat i / .contact-detail i /
.info-row i / .video-features li i 等均为图标，logo 为品牌字标，按
「只为文字」的要求保持不动）：
.stat-number #e67e22 压白 2.85:1 → #c2410c 5.18:1 ✅
（.counter / .suffix 无自身 color 规则，继承即可）
.news-category #e67e22 压白 2.85:1 → #c2410c 5.18:1 ✅
.read-more #e67e22 压白 2.85:1 → #c2410c 5.18:1 ✅
（内部的 无 color 声明，随父级一起变深）
三者所在底色均已核实为纯白（.stats 与 .news-card 都是 --white）。
.read-more:hover 原为 var(--primary) #2a5c8b 6.99:1，本就达标，不动。
-------------------------------------------------------------------------- */
:root{
--orange-text:#c2410c;
}
.stat-number,
.news-category,
.read-more{
color:var(--orange-text);
}
/* --------------------------------------------------------------------------
页脚兜底
--gray 调深后，页脚中**不在 .footer-col 内**的 p / a 会继承它而变暗压深底。
（.footer-col p 已有 #d0d7e0 → 7.57:1，不受影响；这条只作用域外的元素）
-------------------------------------------------------------------------- */
.footer p,
.footer a{
color:#d0d7e0;
}
.footer a:hover{
color:#f0a04b; /* 压 #2c3e50 = 5.14:1（原橙色 3.86:1） */
}
/* ==========================================================================
本补丁**未包含**以下改动，因为它们依赖尚未核实的 energy 页面结构：
1. 移动端顶栏文字恢复（MOBILE FIX 的 [1]）
2. 移动端悬浮联系栏改为底部栏（MOBILE FIX 的 [2]）
3. Hero 背景 cover 与标题字号（MOBILE FIX 的 [3]）
这几项在 bess 上已验证；energy 的导航是白色、Hero 背景与 bess 不同，
直接套用需要先看 energy 的实际渲染效果再决定。
--------------------------------------------------------------------------
本轮本地渲染验证记录（1440×900，getComputedStyle + 像素采样）：
已修复并确认达标：
.hero-btns .btn（View Products） 白字 2.85:1 → 深字 5.46:1 ✅
.nav-list>li.nav-cta>a（Contact Us） 白字 2.85:1 → 深字 5.46:1 ✅
.btn:hover / .nav-cta:hover 底色 #d35400 → #db7720，深字 4.94:1 ✅
普通 p（正文） #7f8c8d 3.48:1 → #5b6672 5.85:1 ✅
页脚 .copyright p / .footer-sister-site p 3.16:1 → 7.57:1 ✅
.footer a:hover 3.86:1 → 5.14:1 ✅
橙色底 #e67e22 未被改动（确认保留品牌色）
低对比文字元素：before 69 处 → after 0 处（逐元素统计，
after 仅剩 Hero 上 2 处「透明底压照片」的假阳性，像素采样实测 8.53:1 / 7.42:1 均达标）
本轮验证发现并已修正的一处回归：
.hero-btns .btn-outline 的 idle 态曾被 .btn{color:#1a252f} 误命中，
变成深色字压深色 Hero 照片（约 1.2–1.7:1）。已改为白底实心 + 深色字。
注：自动化对比度扫描**无法发现**该问题——按钮背景是 background-image，
扫描会回退到 body 底色而算出假的好结果，只能靠像素采样或目视发现。
仍然存在（既有问题，补丁刻意未改）：
a) 橙色「图标」共约 6 类选择器：#e67e22 压白 2.85:1
（.feature i / .video-features li i / .advantage-icon /
.global-stat i / .contact-detail i / .info-row i）
WCAG 1.4.11 对有意义图形要求 3:1，2.85:1 略低。
按「只为文字用深一档橙」的决定，这些保持品牌橙不变。
关于 .logo：energy 站的导航 logo 是**位图**（media/website/logo4.png，
160×35，已实测像素构成：白色负空间约 68%、近黑字标「Dawnice」约 9.5%、
饱和橙图形标记约 9.9%）。navbar.hbs 中 .logo 只输出 ![]()
，
`.logo i` / `.logo span` 这两个选择器**在 energy 从未被使用**，
因此本次改动与它们无关（原 CSS 里那套声明属于未被命中的死规则）。
回退方式：删除本段全部内容即可。
========================================================================== */
/* ==========================================================================
MOBILE FIX — energy 适配版
2026-10-07 | ruibitenergy | Ruibit Energy Theme
==========================================================================
本文件是 bess 的 mobile-fix.css 的 energy 适配版。
为什么不能直接套用 bess 那份：energy 的 --nav-bg-color 是 #ffffff（白色导航），
而 bess 是 #2c3e50（深色导航）。bess 的底部栏直接用了 var(--nav-bg-color)，
套到 energy 会得到一个「白色底部栏」压在白色内容上，边界不清。
本文件把底部栏底色固定为 energy 自己的 --dark / 页脚色 #2c3e50，
与页面深色区块呼应，同时让四个彩色图标（WhatsApp 绿 / 电话蓝 /
微信绿 / 邮件红）有足够对比。
energy 实测存在的缺陷（已逐条渲染核实，375px 视口）：
[2] 悬浮联系栏压住 Hero 标题
.contact-sidebar{position:fixed;right:0;top:50%;transform:translateY(-50%)}
@media(max-width:480px){ .sidebar-content{width:55px} }
实测：sidebar-content 矩形 (320,307)-(375,537)，与 .hero .container
(0,264)-(375,703) 相交，重叠 55×230px。标题里的 "Storage" 被盖住。
修复后：sidebar-content 变为贴底横栏 (0,788)-(375,844)，重叠 0。
[3] Hero 背景离屏，标题上下出现深色空带
@media(max-width:768px){ .hero-custom-bg{background-size:100% auto!important} }
实测：背景图固有尺寸 1950×650，375px 宽下只渲染出约 125px 高的一条，
而 Hero 区块高 739px，其余是空底。修复后 cover，铺满 644.9px。
[4] Hero 标题字号规则永不生效
.hero h1{font-size:2.5rem} (特异度 0,1,1) 高于
@media(max-width:576px){h1{font-size:2.2rem}} (0,0,1)，所以后者无效。
实测：标题 40px/行高48px，折 4 行、块高 192px。
修复后：27.2px/32.64px，折 3 行、块高 97.92px。
关于 bess 的 [1]「顶栏文字被隐藏」——**energy 不适用**：
energy 的 theme.config.json 里 topbarEnable=false，首页根本没有顶栏
（preview/index.html 中 class="top-bar" 出现 0 次，bess 是 3 次）。
下面仍然保留了这段规则，因为它是无害的死代码——万一以后在 Publii 里
把「顶部工具条」打开，它就会立即生效。届时无需再改。
回退方式：删除本段全部内容即可。
========================================================================== */
/* energy 专属：底部栏配色（不依赖 --nav-bg-color，因为它是白色） */
:root{
--mob-bar-bg:#2c3e50;
}
@media (max-width:768px){
/* ---------- [1] 顶栏：保留文字，压缩间距 ---------- */
.top-bar{ font-size:12px; padding:7px 0; }
.top-bar-container{
gap:8px;
padding:0 12px;
max-width:100%;
flex-wrap:nowrap;
justify-content:center;
}
.top-bar-item{ gap:5px; font-size:12px; min-width:0; }
.top-bar-item i{ flex:none; font-size:14px; }
.top-bar-item .text{
display:inline;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.separator{ display:none; }
/* ---------- [2] 悬浮联系栏 → 底部横向栏 ---------- */
.contact-sidebar,
.contact-sidebar-left{
position:fixed;
top:auto;
bottom:0;
left:0;
right:0;
width:100%;
transform:none;
z-index:100;
}
.contact-sidebar .sidebar-content,
.contact-sidebar-left .sidebar-content{
width:100%;
display:block;
padding:6px 0;
border-radius:0;
background:var(--mob-bar-bg);
box-shadow:0 -4px 16px rgba(0,0,0,.35);
}
/* 原来的右侧绿色竖条改为底部栏顶部横条 */
.contact-sidebar .sidebar-border,
.contact-sidebar-left .sidebar-border{
top:0; left:0; right:auto;
width:100%; height:3px;
background:linear-gradient(to right,#25d366 0,rgba(37,211,102,.55) 50%,#25d366 100%);
box-shadow:none;
}
.contact-sidebar .icon-container,
.contact-sidebar-left .icon-container{
flex-direction:row;
justify-content:space-around;
gap:0;
width:100%;
}
.contact-sidebar .icon-btn,
.contact-sidebar-left .icon-btn{
width:44px; height:44px; font-size:18px;
border:none;
box-shadow:none;
}
.contact-tooltip{ display:none !important; }
/* 微信二维码：由右侧弹出改为底部栏上方居中弹出 */
.contact-sidebar .wechat-popup,
.contact-sidebar-left .wechat-popup,
.contact-sidebar .wechat-btn:hover .wechat-popup,
.contact-sidebar-left .wechat-btn:hover .wechat-popup{
top:auto; right:auto; left:50%; bottom:62px;
transform:translateX(-50%);
width:140px;
padding:12px;
}
.contact-sidebar .wechat-popup::after,
.contact-sidebar-left .wechat-popup::after{ display:none; }
/* 底部栏高度 = 6 + 44 + 6 = 56px，页面留出等量空间；返回顶部按钮上移 */
body{ padding-bottom:58px; }
.back-to-top-btn{ bottom:70px; right:14px; width:42px; height:42px; }
/* ---------- [3a] Hero 背景改为 cover，消除深色空带 ---------- */
.hero-custom-bg{
background-size:cover !important;
background-position:center !important;
background-repeat:no-repeat !important;
}
}
/* ---------- [4] 让移动端 Hero 标题字号真正生效 ---------- */
@media (max-width:576px){
.hero h1{ font-size:2rem; }
}
@media (max-width:480px){
.hero h1{ font-size:1.7rem; }
}
@media (max-width:380px){
.top-bar-item:last-child{ display:none; }
}
/* ==========================================================================
NAV DROPDOWN GAP FIX
2026-10-07 | bess + energy 两个站通用
==========================================================================
修复：移动端展开汉堡菜单后，菜单面板与页头之间出现一条空隙，
中间露出 Hero 背景（看起来像渲染错误）。
原因：原始 CSS 在 @media (max-width:768px) 里写的是
.main-nav{ position:absolute; top:140px; ... }
但 `header`（header.top-header）**从未设置 position**，是 static，
因此 .main-nav 的定位基准是「初始包含块」（整个页面），
top:140px 就是从页面顶端往下 140px 的固定位置。
而页头实际高度随「顶部工具条」开关而变：
bess topbarEnable=true → 顶栏 33px + 页头 84px = 117px
energy topbarEnable=false → 无顶栏， 84px
于是菜单面板顶边与页头底边之间：
bess 140 - 117 = 23px 空隙
energy 140 - 84 = 56px 空隙（实测确认，截图可见深色带）
即 140px 这个硬编码值与任何一个站的实际页头高度都不吻合，
而且顶栏一开关就会错位。
修复：把页头设为定位基准，让菜单贴着页头下沿，不再依赖硬编码高度。
header.top-header{ position:relative; }
.main-nav{ top:100%; }
top:100% = 页头高度的 100%，所以无论顶栏开或关都紧贴下沿。
为什么要把 header 的 position 限定在移动端：桌面端的 .main-nav 用
display:flex 排在同一行，不依赖绝对定位；只在移动端加，可避免桌面端
产生副作用（header 上原本有一条 z-index:1000，但因为是 static 而未生效，
一旦设为 relative 就会激活——这也是只在移动端加的原因之一）。
适用范围：两个站共用，本段内容一字不改地追加到两边 style.css 末尾。
回退方式：删除本段全部内容即可。
========================================================================== */
@media (max-width:768px){
/* 把页头变成 .main-nav 的定位基准 */
header.top-header{
position:relative;
}
/* 菜单面板紧贴页头下沿（100% = 页头高度，含顶栏与否都成立） */
.main-nav{
top:100%;
}
}