/* ============================================================
YOLOSPARK 官网样式表（全站共用）
文件：css/style.css
阅读方式：
- 每个区块用 "===== xxx =====" 样式的注释分隔，方便快速定位
- 注意：CSS 注释不能嵌套，注释内部不要再出现 星号+斜杠 的组合
- 常用可调属性：font-size(字号) / color(颜色) / padding(内边距) /
margin(外边距) / gap(间距) / border-radius(圆角) / max-width(最大宽度)
目录：
A. 字体与全局基础
B. 通用容器
C. 顶部导航栏
D. 首页轮播 Banner
E. 产品卡片
F. 关于我们 / 联系区块（通用）
G. WhatsApp 悬浮按钮 & 弹窗
H. 子页面公共样式（页头横幅、内容区）
I. 关于页专用
J. 联系页专用（卡片 + 表单）
K. 首页额外样式
L. 手机端适配（屏幕宽度 ≤ 900px）
============================================================ */
/* ===== A. 字体与全局基础 ===== */
/* 鸿蒙字体 HarmonyOS Sans SC（华为官方字体）
字体在各 HTML 页面的 里用 标签引入（性能更好，不阻塞渲染）：
Regular(400) / Medium(500) / Bold(700) 三个字重
如需离线使用：把字体下载到本地 fonts/ 目录，并在各页面改 link 的 href 路径 */
/* 全局重置：清除浏览器默认边距，统一字体 */
* { /* 星号 = 选中页面上所有元素 */
margin: 0; /* 外边距清零：去掉浏览器默认留白 */
padding: 0; /* 内边距清零：去掉浏览器默认内边距 */
box-sizing: border-box; /* 盒模型：宽高包含边框和内边距，算尺寸更直观 */
/* 全站字体栈：优先鸿蒙字体，后面几个是加载失败时的备用字体 */
font-family: 'HarmonyOS Sans SC', 'Inter', 'Segoe UI', Arial, Helvetica, sans-serif; /* 依次尝试：鸿蒙→Inter→系统字体 */
}
/* 去掉链接默认下划线和蓝色 */
a { /* 所有超链接 */
text-decoration: none; /* 去掉默认下划线 */
color: inherit; /* 颜色继承父元素，不再用浏览器默认蓝色 */
}
/* 固定滚动条占位：保证所有页面（无论内容长短）都有相同的可视宽度，
这样固定导航栏在各页面跳转时文字位置完全一致，不会左右偏移 */
html { /* 页面根元素 */
scrollbar-gutter: stable; /* 始终给滚动条预留位置，跨页面导航不偏移 */
}
/* ===== A2. 全站设计变量（子页面与首页视觉对齐的统一基准） ===== */
:root { /* 色板/圆角/阴影统一令牌 */
--brand: #ed2624; /* 品牌红（强调、点缀、大字号） */
--brand-cta: #d21f1d; /* 按钮红（白字对比度达标 WCAG AA） */
--brand-cta-hover: #b71c1a; /* 按钮悬停深红 */
--ink: #1d1b18; /* 正文深黑 */
--muted: #6b675f; /* 次级文字暖灰 */
--line: #ececea; /* 分隔线 */
--radius: 16px; /* 卡片统一圆角 */
--pd-inset: 18px; /* 产品详情主图四周留白（等边距离） */
--shadow-card: 0 10px 30px rgba(29, 27, 24, 0.08), 0 2px 6px rgba(29, 27, 24, 0.04); /* 卡片悬浮阴影 */
--shadow-card-hover: 0 16px 36px rgba(29, 27, 24, 0.13), 0 3px 8px rgba(29, 27, 24, 0.05); /* 悬停加深 */
}
/* 全站正文颜色与字体渲染：深黑 + 抗锯齿，与首页排版观感一致 */
body { /* 全局正文基调 */
background: #FFFFFF; /* 页面大底色：纯白 */
color: var(--ink); /* 深黑正文 */
-webkit-font-smoothing: antialiased; /* WebKit 抗锯齿 */
-moz-osx-font-smoothing: grayscale; /* Firefox 抗锯齿 */
}
/* ===== B. 通用容器（控制全站内容宽度） ===== */
/* 所有页面内容都包在 .container 里
max-width: 1500px → 大屏最多 1500px 宽（想更宽改这里）
width: 80% → 小屏时占屏宽的 80%
margin: 0 auto → 水平居中 */
.container { /* 全站内容统一外框 */
width: 80%; /* 宽度占屏幕 80% */
max-width: 1800px; /* 最大不超过 1800px */
margin: 0 auto; /* 上下外边距 0，左右自动 → 水平居中 */
}
/* ===== C. 顶部导航栏 ===== */
/* 导航栏整体：固定吸顶（position: fixed），滚动时不跟着走 */
.header { /* 导航栏容器（所有页面共用） */
position: fixed; /* 固定定位：钉在屏幕上，不随页面滚动 */
top: 0; /* 贴住屏幕顶部 */
left: 0; /* 贴住屏幕左边 */
width: 100%; /* 占满整行宽度 */
z-index: 100; /* 层级 100：盖在普通内容之上 */
padding: 20px 0; /* 上下内边距＝导航栏高度，想更高改这里 */
background: transparent; /* 页面最上方：完全透明（不遮挡 Hero 大图） */
transition: background .3s, padding .3s, box-shadow .3s; /* 背景/内边距/阴影变化时 0.3 秒平滑过渡 */
}
/* 首次加载（html.preload 存在期间）禁用导航栏相关过渡：
避免刷新时"先白字、再 0.3 秒渐变成黑字"的闪动。
preload 类由各页面 head 里的内联脚本加上，main.js 首绘后立即移除。 */
html.preload .header,
html.preload .header .logo,
html.preload .header .logo span,
html.preload .header .main-nav a,
html.preload .header .nav-icons,
html.preload .header .nav-icons * {
transition: none !important; /* 首绘不做颜色/背景过渡，直接呈现正确状态 */
}
/* 滚动后分两种状态（由 main.js 判断并加类）：
① 默认 .scrolled：压在浅色内容区上 → 浅白磨砂玻璃 + 深黑文字
② .scrolled.on-dark：仍压在深色大图上 → 与 ISO 玻璃面板同款深灰玻璃 + 白色文字 */
.header.scrolled { /* 状态①：浅色区 */
background: rgba(255, 255, 255, 0.22); /* 几乎无色的浅白磨砂 */
backdrop-filter: blur(14px) saturate(110%); /* 磨砂：模糊背后内容 */
-webkit-backdrop-filter: blur(14px) saturate(110%); /* Safari 兼容 */
box-shadow: 0 1px 0 rgba(29, 27, 24, 0.06); /* 底部极浅分割线 */
}
.header.scrolled.on-dark { /* 状态②：深色大图上，与 ISO 面板同款 */
background: rgba(80, 80, 80, 0.3); /* 深灰 30% 半透明 */
backdrop-filter: blur(10px); /* 模糊 10px */
-webkit-backdrop-filter: blur(10px); /* Safari 兼容 */
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12); /* 底边极淡白线 */
}
/* 状态①浅玻璃：文字/图标深黑 */
.header.scrolled .logo { color: var(--ink) !important; } /* LOGO YOLO 变深黑 */
.header.scrolled .logo span { color: var(--brand) !important; } /* SPARK 保持品牌红 */
.header.scrolled .main-nav a { color: var(--ink); } /* 菜单文字深黑 */
.header.scrolled .main-nav a.active { color: var(--brand); } /* 当前页品牌红 */
.header.scrolled .main-nav a:hover { /* 悬停：浅灰底 + 品牌红字 */
background: rgba(29, 27, 24, 0.08);
color: #e5302c;
}
.header.scrolled .nav-icons { color: var(--ink); } /* 右侧图标深黑 */
/* 状态②深玻璃（on-dark）：LOGO/菜单/图标保持白色（SPARK 与当前页保持品牌红）
!important 用于覆盖 LOGO 内联颜色 */
.header.scrolled.on-dark .logo { color: #fff !important; } /* LOGO YOLO 白色 */
.header.scrolled.on-dark .logo span { color: var(--brand) !important; } /* SPARK 品牌红 */
.header.scrolled.on-dark .main-nav a { color: #fff; } /* 菜单文字白色 */
.header.scrolled.on-dark .main-nav a.active { color: var(--brand); } /* 当前页品牌红 */
.header.scrolled.on-dark .main-nav a:hover { /* 悬停：淡白底 + 品牌红字 */
background: rgba(255, 255, 255, 0.14);
color: #e5302c;
}
.header.scrolled.on-dark .nav-icons { color: #fff; } /* 右侧图标白色 */
/* 深色模式：永远是深色玻璃 + 白字（无需区分 on-dark） */
html.dark .header.scrolled {
background: rgba(80, 80, 80, 0.3); /* 与 hero 内玻璃卡（ISO 面板）同款：深灰 30% */
backdrop-filter: blur(10px); /* 模糊 10px，与玻璃卡一致 */
-webkit-backdrop-filter: blur(10px); /* Safari 兼容 */
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}
html.dark .header.scrolled .logo,
html.dark .header.scrolled .main-nav a,
html.dark .header.scrolled .nav-icons { color: #fff !important; }
html.dark .header.scrolled .main-nav a.active { color: var(--brand) !important; }
html.dark .header.scrolled .main-nav a:hover { background: rgba(255, 255, 255, 0.15); color: #e5302c; }
/* 导航内部横向布局：左 LOGO，中间菜单，右图标 */
.nav-wrap { /* 导航内部的三段式容器 */
display: flex; /* 弹性布局：子元素横排 */
align-items: center; /* 垂直方向居中对齐 */
justify-content: space-between; /* 两端对齐：LOGO 靠左，图标靠右，菜单在中间 */
}
/* LOGO 文字： 里的部分显示红色 */
.logo { /* LOGO 链接 */
display: inline-block; /* 转为块级：让 transform 缩放生效 */
font-size: 25px; /* 字号 25px */
font-weight: 700; /* 粗体（与后台默认设置 700 一致，避免设置应用后跳动） */
color: #fff; /* 白色（YOLO 部分） */
letter-spacing: 0.5px; /* 字间距 0.5px */
transition: transform .3s ease; /* 缩放变化 0.3 秒平滑过渡 */
transform-origin: center; /* 缩放基准点=中心：悬停放大时文字位置不偏移 */
}
.logo:hover { /* 鼠标移上 LOGO 时 */
transform: scale(1.12); /* 放大到 1.12 倍，想更明显就调大 */
}
.logo span { /* LOGO 里的 span（SPARK 部分） */
color: #e5302c; /* 品牌红 */
}
/* 导航菜单容器 */
.main-nav { /* 菜单组 */
display: flex; /* 菜单项横排 */
gap: 12px; /* 菜单项之间的间距（悬停圆角矩形本身自带 16px 左右内边距） */
}
/* 单个菜单项 */
.main-nav a { /* 每个菜单链接 */
color: #fff; /* 白色文字 */
font-size: 15px; /* 字号 15px */
font-weight: 700; /* 粗体 */
padding: 14px 16px; /* 内边距：撑起悬停时的圆角矩形背景（上下14=更高） */
border-radius: 8px; /* 圆角矩形 */
transition: background .3s, color .3s; /* 背景色/文字色变化 0.3 秒过渡 */
}
/* 鼠标移上菜单项：显示半透明圆角矩形背景 */
.main-nav a:hover { /* 悬停状态：圆角矩形底 + 文字变品牌红 */
background: rgba(255, 255, 255, 0.15); /* 白色 15% 半透明底 */
color: #e5302c; /* 文字变品牌红 */
}
/* 当前所在页面的菜单项显示红色 */
.main-nav a.active { /* HTML 里标了 class="active" 的那一项 */
color: #e5302c; /* 品牌红高亮 */
}
/* 右侧图标区（搜索、购物车） */
.nav-icons { /* 图标容器 */
display: flex; /* 图标横排 */
align-items: center; /* 垂直对齐 */
gap: 20px; /* 图标间距 20px */
color: #fff; /* 白色：SVG 用 currentColor 继承 */
transition: color .3s; /* 滚动后变黑时平滑过渡 */
}
.nav-icons .icon-svg { /* 纯色 SVG 图标（放大镜/购物车） */
width: 25px; /* 图标宽 25px */
height: 25px; /* 图标高 25px */
display: block; /* 消除基线空隙 */
}
/* 主题明暗切换单图标（JS 注入到 .nav-icons 末尾，排在搜索、购物车之后）
线性风格、无背景；颜色继承 .nav-icons：顶部白、滚动后深黑、深色模式白自动跟随 */
.theme-toggle { /* 切换按钮 */
background: transparent;
border: none;
padding: 0;
cursor: pointer;
color: inherit; /* 跟随导航图标颜色 */
display: flex;
align-items: center;
}
.theme-toggle svg { /* 与搜索/购物车 icon-svg 同尺寸 */
width: 25px;
height: 25px;
display: block;
}
/* 按钮内同时写死太阳+月牙两个 SVG，由 html.dark 控制显示哪一个——
首绘即渲染正确图标，JS 无需替换 innerHTML，加载时零闪烁 */
.theme-toggle .ico-moon { display: none; } /* 亮色模式：隐藏月牙 */
html.dark .theme-toggle .ico-sun { display: none; } /* 深色模式：隐藏太阳 */
html.dark .theme-toggle .ico-moon { display: block; } /* 深色模式：显示月牙 */
/* ===== D. 首页轮播 Banner ===== */
/* 轮播外框：占满整个屏幕高度 */
.hero-slider { /* 轮播区块 */
height: 100vh; /* 高度=屏幕高度；想矮一点可改成 90vh / 800px */
position: relative; /* 相对定位：作为内部绝对定位元素的定位基准 */
overflow: hidden; /* 超出部分裁掉：隐藏未显示的屏 */
}
/* 每一屏：绝对定位叠在一起，默认透明，加 .active 才显示 */
.slide { /* 每一屏 */
position: absolute; /* 绝对定位：所有屏叠在同一位置 */
top: 0; /* 从顶部开始 */
left: 0; /* 从左边开始 */
width: 100%; /* 占满宽度 */
height: 100%; /* 占满轮播高度 */
background-size: cover; /* 背景图铺满并按比例裁切 */
background-position: center; /* 背景图居中显示 */
display: flex; /* 内部内容用弹性布局 */
align-items: stretch; /* 内容区拉伸到整屏高度（让 TRUSTED BY 能贴底） */
opacity: 0; /* 默认完全透明（看不见） */
transition: opacity 1s ease; /* 透明度 1 秒渐变：切换时有淡入淡出效果 */
}
.slide.active { opacity: 1; } /* 当前屏：完全不透明（可见） */
/* 左侧压暗渐变遮罩（伪元素叠加在图片上，右侧透明不影响画面）
90deg = 从左到右；0.6/0.3/0 是黑色透明度，可自行调整 */
.slide::before { /* 每屏自带的遮罩层（不用加 HTML） */
content: ""; /* 伪元素必须有 content 才会渲染 */
position: absolute; /* 铺满整屏 */
inset: 0; /* top/right/bottom/left 全为 0 = 铺满父元素 */
background: linear-gradient(90deg, /* 线性渐变：从左到右 */
rgba(0, 0, 0, 0.6) 0%, /* 最左边：60% 黑（文字区更清晰） */
rgba(0, 0, 0, 0.3) 45%, /* 中间：30% 黑 */
rgba(0, 0, 0, 0) 70%); /* 70% 之后：全透明，图片原样 */
pointer-events: none; /* 不响应鼠标：不挡住下面按钮的点击 */
}
/* Banner 文字内容区（z-index 保证在遮罩之上） */
.slide-content { /* 每屏的文字容器（同时也是 .container 限宽） */
color: #fff; /* 文字白色 */
position: relative; /* 相对定位：配合 z-index */
z-index: 1; /* 层级 1：显示在遮罩上面 */
height: 100%; /* 占满整屏高度 */
display: flex; /* 弹性布局 */
flex-direction: column; /* 子元素纵向排列 */
justify-content: center; /* 主内容块垂直居中 */
}
/* 小标题（副标题） */
.subhead { /* 大标题上方的小字 */
font-size: 22px; /* 字号 22px（参考图按 1920 视口换算） */
opacity: 0.9; /* 透明度 90%：稍微柔和 */
margin-bottom: 24px; /* 与大标题的间距 24px */
}
/* 大标题 */
.slide h1 { /* Banner 主标题 */
font-size: 70px; /* 字号 70px（参考图按 1920 视口换算） */
line-height: 1.15; /* 行高：两行紧凑排列 */
font-weight: 700; /* 粗体 */
margin-bottom: 36px; /* 与下方徽章的间距 36px */
max-width: 900px; /* 限制宽度：控制自动换行位置 */
}
/* 徽章 + 视频按钮所在的一行 */
.badge-row { /* 毛玻璃面板所在行 */
display: flex; /* 横排 */
align-items: center; /* 垂直居中 */
gap: 16px; /* 各元素间距 16px */
margin-bottom: 30px; /* 与下方按钮行的距离 30px */
flex-wrap: wrap; /* 空间不够时自动换行 */
}
/* 信息徽章＝整块玻璃面板：小图 + 两行文字 + Watch Video 按钮（与顶部导航栏玻璃样式一致） */
.info-badge { /* 玻璃面板 */
width: 530px; /* 固定宽度（参考图换算），三屏保持一致 */
max-width: 100%; /* 屏幕太窄时不超过容器，防止溢出 */
background: rgba(80, 80, 80, 0.3); /* 与导航栏一致：深灰 30% 半透明底 */
backdrop-filter: blur(10px); /* 与导航栏一致：模糊 10px */
-webkit-backdrop-filter: blur(10px); /* Safari 兼容 */
border: 1px solid rgba(255, 255, 255, 0.25); /* 细细的白线描边 */
border-radius: 20px; /* 圆角矩形 20px（仅徽章恢复圆角，其他保持一致） */
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* 与导航栏一致：投影 */
padding: 16px 20px 16px 16px; /* 内边距：上下16，右侧留出贴按钮 */
position: relative; /* 相对定位：作为播放按钮绝对定位的基准 */
display: flex; /* 内部横排 */
align-items: center; /* 垂直居中 */
gap: 20px; /* 图片与文字的间距 20px */
font-size: 16px; /* 面板文字字号（缩小一点保证第二行不换行也放得下） */
line-height: 1.4; /* 行高：两行文字舒适 */
}
/* 徽章第一行文字：加粗 */
.info-badge > div > div:first-child { /* 文字分组里的第一行 */
font-weight: 700; /* 粗体（对应鸿蒙 Bold 字重） */
}
/* 徽章两行文字都强制单行显示，不自动换行 */
.info-badge > div > div { /* 文字分组的每一行 */
white-space: nowrap; /* 禁止换行：超出也不折行 */
}
/* 徽章里的工厂小图 */
.badge-thumb { /* 面板左侧小图 */
width: 78px; /* 宽 78px */
height: 78px; /* 高 78px（正方形） */
border-radius: 8px; /* 小圆角 */
object-fit: cover; /* 裁切填满，图片不变形 */
}
/* 文字分组：右侧预留固定空间，避免长文字顶到播放按钮 */
.info-badge > div { /* 徽章的文字分组 */
padding-right: 185px; /* 预留播放按钮+Watch Video 的宽度，三屏一致 */
}
/* Watch Video 按钮：绝对定位钉在面板右侧，三屏位置完全一致，不随文字长短变动 */
.video-btn { /* 播放按钮（在面板里） */
position: absolute; /* 绝对定位：固定在面板右侧 */
right: 20px; /* 距面板右缘 20px（与内边距一致） */
top: 50%; /* 从面板垂直中点开始 */
transform: translateY(-50%); /* 再上移自身一半：实现垂直居中 */
background: transparent; /* 透明背景：靠外面的面板提供玻璃 */
border: none; /* 无边框 */
color: #fff; /* 白色文字 */
padding: 0; /* 无内边距 */
cursor: pointer; /* 鼠标移上变小手 */
font-size: 18px; /* 文字字号 */
white-space: nowrap; /* 强制 Watch Video 一行显示，不自动换行 */
display: flex; /* 播放键和文字横排 */
align-items: center; /* 垂直对齐 */
gap: 10px; /* 播放键与文字间距 10px */
}
/* 红色圆形播放键 */
.play-circle { /* 红色圆 */
width: 46px; /* 直径 46px */
height: 46px; /* 高 46px */
border-radius: 50%; /* 圆形 */
background: #ed2624; /* 品牌红 */
display: inline-flex; /* 内部弹性布局 */
align-items: center; /* 垂直居中三角 */
justify-content: center; /* 水平居中三角 */
flex-shrink: 0; /* 防止被压缩变形 */
}
/* 纯白色三角形（CSS 边框画法，不依赖字符/emoji，无任何其他效果） */
.play-circle::before { /* 三角形伪元素 */
content: ""; /* 伪元素必须有 content */
display: block; /* 块级：配合边框画三角 */
width: 0; /* 无宽高，纯靠边框撑出形状 */
height: 0;
border-top: 7px solid transparent; /* 上边框透明：三角的上斜边 */
border-bottom: 7px solid transparent; /* 下边框透明：三角的下斜边 */
border-left: 11px solid #fff; /* 左边框纯白：三角形的竖边在左侧，尖角朝右 */
margin-left: 3px; /* 视觉微调：让三角在圆里看起来居中 */
}
/* 两个主要按钮所在的行 */
.btn-row { /* 按钮行 */
display: flex; /* 横排 */
gap: 20px; /* 两个按钮间距 20px */
width: 530px; /* 与上方徽章面板同宽：左侧对齐文字，右侧对齐徽章右边缘 */
max-width: 100%; /* 窄屏时不溢出 */
margin-bottom: 0; /* 参考图中内容块整体居中，底部不加外边距 */
flex-wrap: wrap; /* 不够宽时换行 */
}
/* 按钮行内的按钮：平分整行宽度，使右边缘与徽章对齐（仅首页 Banner，不影响其他页面按钮） */
.btn-row .btn { /* 行内按钮 */
flex: 1; /* 拉伸平分按钮行宽度 */
justify-content: center; /* 文字在按钮内水平居中 */
padding: 18px 30px; /* 内边距：按钮总高约 60px */
font-size: 20px; /* 按钮文字 20px */
gap: 10px; /* 文字与箭头间距 */
white-space: nowrap; /* 强制文字一行显示，不自动换行 */
}
.btn-row .btn-arrow { /* 行内按钮的箭头圆同步放大 */
width: 32px; /* 直径 32px */
height: 32px; /* 高 32px */
font-size: 16px; /* 箭头符号 */
}
/* 通用按钮基础样式 */
.btn { /* 所有胶囊按钮的公共样式（其他页面共用） */
padding: 14px 26px; /* 内边距：上下14（决定按钮高度）左右26 */
border-radius: 99px; /* 超大圆角 = 胶囊形状 */
font-size: 16px; /* 文字字号 */
font-weight: 600; /* 半粗 */
border: none; /* 无边框 */
cursor: pointer; /* 鼠标变小手 */
display: inline-flex; /* 内部横排 */
align-items: center; /* 垂直对齐 */
gap: 8px; /* 文字与箭头的间距 8px */
}
/* 红色主按钮 */
.btn-red { /* Request a Quote */
background: #e5302c; /* 红色底 */
color: #fff; /* 白字 */
}
/* 半透明按钮（View Products / 次级按钮）——与顶部导航栏玻璃样式一致 */
.btn-gray { /* View Products */
background: rgba(80, 80, 80, 0.3); /* 与导航栏一致：深灰 30% 半透明底 */
backdrop-filter: blur(10px); /* 与导航栏一致：模糊 10px */
-webkit-backdrop-filter: blur(10px); /* Safari 兼容 */
border: 1px solid rgba(255, 255, 255, 0.25); /* 细细的白线描边 */
border-radius: 99px; /* 与左侧红色按钮一致：胶囊圆角 */
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* 与导航栏一致：投影 */
color: #fff; /* 白字 */
}
/* 按钮里的小圆形箭头 */
.btn-arrow { /* 按钮末尾的 → 圆 */
width: 20px; /* 直径 20px */
height: 20px; /* 高 20px */
border-radius: 50%; /* 圆形 */
background: rgba(255, 255, 255, 0.22); /* 白色 22% 透明底 */
display: inline-flex; /* 内部居中 */
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
font-size: 11px; /* 箭头符号大小 */
}
/* TRUSTED BY 品牌行 */
.brand-trust { /* 底部品牌行 */
display: flex; /* 横排 */
gap: 34px; /* 各品牌之间的间距 34px */
opacity: 0.85; /* 整行统一透明度（与右侧品牌色一致） */
font-size: 18px; /* 字号 18px（参考图换算） */
font-weight: 700; /* 粗体 */
align-items: center; /* 垂直居中 */
flex-wrap: wrap; /* 太窄时换行 */
position: absolute; /* 绝对定位：固定到轮播屏最底部 */
bottom: 90px; /* 距离底部 90px（参考图位置） */
left: 0; /* 与容器左边对齐 */
}
/* 每个品牌名：与 LOGO 一致的悬停动效（变白 + 放大） */
.brand-trust span { /* 行内每个文字 */
display: inline-block; /* 转为块级：让 transform 缩放生效 */
transition: transform .3s ease, color .3s ease; /* 缩放/颜色 0.3 秒平滑过渡 */
cursor: default; /* 鼠标移上显示默认箭头 */
}
.brand-trust span:hover { /* 鼠标悬停时 */
color: #fff; /* 文字变纯白 */
transform: scale(1.12); /* 放大到 1.12 倍，与 LOGO 动效一致 */
}
/* 轮播指示点容器（水平居中在底部） */
.slider-dots { /* 指示点组 */
position: absolute; /* 绝对定位 */
bottom: 30px; /* 距离底部 30px */
left: 50%; /* 左边在正中 */
transform: translateX(-50%); /* 再向左移自身一半宽度：实现水平居中 */
display: flex; /* 横排 */
gap: 8px; /* 点间距 8px */
align-items: center; /* 垂直对齐 */
}
/* 单个指示点：默认是小白点 */
.dot { /* 每个点 */
width: 6px; /* 宽 6px */
height: 6px; /* 高 6px */
border-radius: 99px; /* 圆角（胶囊形，便于 active 时拉长） */
background: rgba(255, 255, 255, 0.5); /* 半透明白 */
cursor: pointer; /* 可点击 */
transition: all .3s; /* 宽度/颜色变化 0.3 秒过渡 */
}
/* 当前屏的指示点：变成白色长条 */
.dot.active { /* 当前屏对应的点 */
width: 22px; /* 拉长到 22px = 长条 */
background: #fff; /* 纯白 */
}
/* ===== E. 产品卡片 ===== */
/* 产品区块外框（浅灰背景） */
.products-section { /* 产品区（首页精选 & 产品页列表共用） */
padding: 80px 0; /* 上下留白 80px */
background: #FFFFFF; /* 页面大底色：纯白 */ /* 纯白背景 */
}
/* 产品页：横幅正下方紧跟排序工具条，把顶部留白收窄（只影响带工具条的页面） */
.products-section--toolbar {
padding-top: 26px; /* 与横幅底部 28px 相加 ≈ 54px 的舒适间距 */
}
/* 全站子页面统一：横幅正下方的第一个内容区块，顶部留白与产品页工具条对齐（26px）
这样 About / Contact / Products 三页内容起始高度完全一致 */
.page-banner + section {
padding-top: 26px;
}
/* 区块标题 */
.products-section h2 { /* 区块大标题 */
text-align: center; /* 居中 */
font-size: 36px; /* 字号 36px */
font-weight: 700; /* 加粗 */
color: var(--ink); /* 深黑 */
margin-bottom: 44px; /* 与卡片的间距 */
}
.products-section h2::after { /* 标题下品牌红短装饰线（与 center-title 一致） */
content: "";
display: block;
width: 44px;
height: 3px;
border-radius: 2px;
background: var(--brand);
margin: 16px auto 0;
}
/* 产品网格：桌面固定一行 5 个卡片（更窄的屏幕逐级降到 4/3/2/1 列）
卡片宽度 = (容器宽 - 4×间距) / 5，图片按 1:1 自动跟随宽度 */
.product-grid { /* 卡片网格 */
display: grid; /* 网格布局 */
grid-template-columns: repeat(5, minmax(0, 1fr)); /* 一行 5 列，等宽平分 */
gap: 22px; /* 卡片间距 22px（5 列时更紧凑） */
}
@media (max-width: 1280px) { /* 中小屏：4 列 */
.product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1024px) { /* 平板横屏：3 列 */
.product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) { /* 平板竖屏：2 列 */
.product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 480px) { /* 手机：单列 */
.product-grid { grid-template-columns: 1fr; }
}
/* ---- 排序 / 筛选 / 视图切换 工具条（滚动时吸附在导航栏下方） ----
整条铺满页面宽度（不套 .container），吸附成毛玻璃时左右才能通到屏幕边缘，
和全宽导航栏连成一整片；内容由内层 .container 对齐页面网格。 */
.prod-toolbar { /* 工具条外框：全宽 + 吸顶 */
position: sticky; /* 滚动到导航栏下方时吸附 */
top: var(--header-h, 74px); /* 距顶部 = 导航栏高度（JS 实时测量写入） */
z-index: 40; /* 盖住卡片，但在导航栏（100）之下 */
padding: 10px 0 26px; /* 上内距补偿视觉位置，下内距＝与卡片的间距 */
margin: -10px 0 0; /* 抵消上内距，保持未吸附时的原始排版 */
background: #fff; /* 未吸附：白底，与页面同色不显眼 */
transition: background .3s, box-shadow .3s;
}
.prod-toolbar > .container { /* 工具条内容行：视图切换贴右 */
display: flex;
align-items: center; /* 三者垂直居中对齐（同一高度） */
justify-content: space-between;
gap: 16px;
flex-wrap: wrap; /* 窄屏自动换行 */
}
/* 用户点了图钉关闭吸附：工具条退回普通文档流，随页面一起滚动，不再固定在导航栏下方 */
html.toolbar-unpinned .prod-toolbar {
position: static;
}
html.toolbar-unpinned .nav-glass-cover { opacity: 0; } /* 同一块玻璃也不显形 */
/* 已吸附：导航栏和工具条不再各自画背景，改由下面 .nav-glass-cover 这一整块玻璃统一负责。
原因：两块各自做 backdrop-filter 时，交界处模糊各自截止，必然出现一道 1~2px 的色差线；
只留一层玻璃铺满「导航栏 + 工具条」的总高度，中间就完全没有任何接缝。 */
html.toolbar-stuck .header,
html.toolbar-stuck .prod-toolbar {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
transition: none !important; /* 瞬切，避免中间态露出半透明白 */
}
.nav-glass-cover { /* 覆盖「导航栏 + 吸顶工具条」的一整块玻璃 */
position: fixed; /* 固定在最上方，不随页面滚动 */
top: 0;
left: 0;
width: 100%;
height: 0; /* 高度由 JS 按导航栏 + 工具条实测写入 */
z-index: 30; /* 压在卡片之上；导航栏(100)、工具条(40) 在它之上 */
pointer-events: none; /* 不挡点击 */
opacity: 0; /* 未吸附时完全不可见 */
background: rgba(255, 255, 255, 0.22); /* 与导航栏原来的浅白磨砂同色 */
backdrop-filter: blur(14px) saturate(110%);
-webkit-backdrop-filter: blur(14px) saturate(110%);
box-shadow: 0 1px 0 rgba(29, 27, 24, 0.06); /* 整块玻璃只在最下沿留一条极淡分割线 */
}
html.toolbar-stuck .nav-glass-cover { opacity: 1; } /* 吸附时这块玻璃才显形 */
html.dark .nav-glass-cover { /* 暗色：与暗色导航栏同款深灰玻璃 */
background: rgba(80, 80, 80, 0.3);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* ---- 左侧：排序下拉 + 结构筛选胶囊 ---- */
.toolbar-left { /* 排序与筛选同一行 */
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap; /* 窄屏自动折行 */
min-width: 0;
}
.pill { /* 胶囊按钮：与右侧视图切换同高（44px） */
display: inline-flex;
align-items: center;
justify-content: center;
height: 44px;
padding: 0 16px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 11px; /* 与 .view-switch 同款圆角 */
background: #fff;
color: #6f6f6f;
font-family: inherit;
font-size: 13px;
line-height: 1;
white-space: nowrap; /* 文字不折行 */
cursor: pointer;
transition: background .2s, color .2s, border-color .2s;
}
.pill:hover { color: var(--ink); border-color: rgba(0, 0, 0, 0.22); }
.pill.is-active { /* 选中：深墨蓝底白字，与视图切换选中态一致 */
background: #0f1b2b;
border-color: #0f1b2b;
color: #fff;
}
.filter-group { /* 筛选胶囊组 */
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.select-pill { /* 排序：把原生 select 藏进胶囊里 */
position: relative;
padding: 0; /* 内距交给内部 select，保证整块可点 */
overflow: hidden;
}
.select-pill select {
appearance: none; /* 去掉系统箭头，改用自绘 caret */
-webkit-appearance: none;
height: 100%;
padding: 0 34px 0 16px; /* 右侧给箭头留位 */
border: none;
background: transparent;
font-family: inherit;
font-size: 13px;
color: inherit; /* 跟随胶囊文字色 */
cursor: pointer;
outline: none;
}
.select-pill select option { color: #333; background: #fff; } /* 下拉面板用深字 */
.pill-caret { /* 自绘下拉箭头 */
position: absolute;
right: 12px;
top: 50%;
width: 13px;
height: 13px;
transform: translateY(-50%);
pointer-events: none; /* 不挡点击 */
color: currentColor;
opacity: .6;
}
.prod-empty { /* 筛选后无结果 */
margin: 40px 0 10px;
text-align: center;
font-size: 14px;
color: var(--muted, #8a8a8a);
}
.view-bar { /* 视图切换容器：贴右对齐 */
display: flex;
align-items: center; /* 与图钉按钮垂直居中对齐 */
gap: 8px; /* 视图切换与图钉之间的间距 */
justify-content: flex-end; /* 按钮组靠右 */
flex: none;
margin-left: auto; /* 保证始终贴最右 */
}
.view-switch { /* 胶囊分段控件：两格并排 */
display: inline-flex;
padding: 3px; /* 内描边留白，选中块不贴边 */
gap: 2px;
border: 1px solid rgba(0, 0, 0, 0.1); /* 细边框 */
border-radius: 11px;
background: #fff; /* 白底 */
}
.view-btn { /* 单个图标按钮（正方形） */
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: none;
border-radius: 9px;
background: transparent;
color: #8a8a8a; /* 未选中：中灰图标 */
cursor: pointer;
transition: background .2s, color .2s;
}
.view-btn svg { width: 17px; height: 17px; }
.view-btn:hover { color: var(--ink); } /* 悬停图标加深 */
.view-btn.is-active { /* 选中：深墨蓝底 + 白图标（参考图配色） */
background: #0f1b2b;
color: #fff;
}
/* ---- 吸附开关（图钉按钮）：正方形，高度与左侧视图切换外框一致 ----
开 = 实心图钉 + 深墨蓝底；关 = 带斜线的图钉 + 白底灰图（两个不同图标） */
.pin-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 11px; /* 与 .view-switch 同款圆角 */
background: #fff;
color: #8a8a8a;
cursor: pointer;
flex: none;
transition: background .2s, color .2s, border-color .2s;
}
.pin-btn:hover { color: var(--ink); } /* 悬停图标加深 */
.pin-btn.is-pinned { /* 已固定：实心深底白图标，一眼能看出是开启状态 */
background: #0f1b2b;
border-color: #0f1b2b;
color: #fff;
}
.pin-icon { /* 两个图标叠在同一位置，用显隐切换 */
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 18px;
transform: translate(-50%, -50%);
}
.pin-btn.is-pinned .pin-off { display: none; } /* 已固定 → 只显示实心图钉 */
.pin-btn:not(.is-pinned) .pin-on { display: none; } /* 未固定 → 只显示带斜线的图钉 */
/* ---- 一行一个（列表视图）：卡片横向排版，左图右文 ---- */
.product-grid.is-list { /* 列表模式覆盖网格列数 */
grid-template-columns: 1fr;
gap: 16px;
}
.product-grid.is-list .product-card { /* 横向卡片 */
display: flex;
align-items: stretch;
}
.product-grid.is-list .product-card img { /* 左侧正方形封面 */
width: 200px;
height: 200px;
flex: none;
aspect-ratio: 1 / 1; /* 仍保持 1:1 */
}
.product-grid.is-list .product-info { /* 右侧文字区：垂直居中 */
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 20px 26px;
}
.product-grid.is-list .product-info h3 { font-size: 19px; margin-bottom: 8px; }
.product-grid.is-list .product-info p { font-size: 14px; white-space: normal; }
.product-grid.is-list .add-cart { /* 列表视角：按钮不拉通整行，固定合适宽度 */
width: auto;
min-width: 200px;
margin-top: 14px;
padding: 11px 30px;
font-size: 13.5px;
}
@media (max-width: 760px) { /* 手机上列表视图封面缩小成 120px */
.product-grid.is-list .product-card img { width: 120px; height: 120px; }
.product-grid.is-list .product-info { padding: 14px 16px; }
.product-grid.is-list .product-info h3 { font-size: 16px; }
.product-grid.is-list .product-info p { font-size: 12.5px; }
.product-grid.is-list .add-cart { min-width: 0; margin-top: 10px; padding: 10px 20px; font-size: 12.5px; }
}
html.dark .view-switch { border-color: rgba(255, 255, 255, 0.14); background: #161616; }
html.dark .pill { border-color: rgba(255, 255, 255, 0.14); background: #161616; color: #9a9a9a; }
html.dark .pill:hover { color: #f2f2f2; border-color: rgba(255, 255, 255, 0.3); }
html.dark .pill.is-active { background: #f2f2f2; border-color: #f2f2f2; color: #0f1b2b; }
html.dark .select-pill select option { color: #eee; background: #1d1d1d; }
html.dark .prod-empty { color: #8a8a8a; }
html.dark .view-btn { color: #9a9a9a; }
html.dark .view-btn.is-active { background: #f2f2f2; color: #0f1b2b; }
html.dark .pin-btn { border-color: rgba(255, 255, 255, 0.14); background: #161616; color: #9a9a9a; }
html.dark .pin-btn.is-pinned { background: #2c2c2c; border-color: rgba(255, 255, 255, 0.22); color: #fff; }
html.dark .prod-toolbar { background: #0d0d0d; } /* 暗色：吸顶条底色与页面一致（吸附时被 .nav-glass-cover 顶掉） */
/* 单张产品卡片：轻毛玻璃磨砂悬浮卡（全站统一材质） */
.product-card { /* 一张卡片 */
background: linear-gradient(165deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.6)); /* 白色半透明 */
backdrop-filter: blur(12px) saturate(120%); /* 磨砂 */
-webkit-backdrop-filter: blur(12px) saturate(120%);
border: 1px solid rgba(255, 255, 255, 0.75); /* 细白边提亮 */
border-radius: var(--radius); /* 统一圆角 16px */
overflow: hidden; /* 裁掉超界部分：图片圆角贴合卡片 */
box-shadow: var(--shadow-card); /* 悬浮阴影 */
transition: transform .25s ease, box-shadow .25s ease; /* 平滑悬停动效 */
}
.product-card:hover { /* 悬停微微上浮 */
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
}
/* 卡片图片 */
.product-card img { /* 卡片顶部封面图（统一 1:1 正方形） */
width: 100%; /* 占满卡片宽度 */
aspect-ratio: 1 / 1; /* 正方形：宽高始终相等 */
height: auto; /* 高度由正方形比例自动算出 */
object-fit: cover; /* 裁切填满，不变形 */
display: block;
}
/* 卡片文字区域（5 列时卡片较窄，内距与字号同步收小一档） */
.product-info { /* 图片下面的文字区 */
padding: 16px; /* 内边距 16px */
}
.product-info h3 { /* 产品名：与首页卡片标题观感一致 */
font-size: 15px; /* 字号（5 列卡片适配） */
font-weight: 700; /* 加粗 */
color: var(--ink); /* 深黑 */
margin-bottom: 6px; /* 与规格行间距 */
line-height: 1.4;
}
.product-info p { /* 规格/材质/MOQ 行 */
font-size: 13px; /* 字号 */
color: var(--muted); /* 次级暖灰 */
line-height: 1.5; /* 行高 */
white-space: nowrap; /* 单行不折行，卡片高度统一 */
overflow: hidden;
text-overflow: ellipsis; /* 超长自动省略号 */
}
/* “加入询价车”按钮：品牌红（与全站主 CTA 一致，白字对比度达标） */
.add-cart { /* 卡片主按钮：白底 + 深色细描边（View Details） */
display: flex; /* 弹性布局：文字水平垂直居中 */
align-items: center;
justify-content: center;
width: 100%; /* 撑满卡片文字区宽度 */
margin-top: 14px; /* 与上方产品名间距 */
padding: 11px 14px; /* 上下 11 / 左右 14：接近参考图比例 */
background: #fff; /* 白底 */
color: var(--ink); /* 深色文字 */
border: 1.5px solid var(--ink); /* 1.5px 深色细边框 */
border-radius: 8px; /* 圆角 8px */
font-size: 13px; /* 字号：窄卡片下 View Details 仍一行 */
font-weight: 700; /* 加粗，接近参考图字重 */
letter-spacing: .2px; /* 轻微字距 */
line-height: 1.2;
white-space: nowrap; /* 不折行 */
text-decoration: none; /* 作为链接时不带下划线 */
cursor: pointer; /* 小手 */
transition: background .18s, color .18s, border-color .18s; /* 悬停平滑 */
}
.add-cart:hover { /* 悬停：反白（深底白字） */
background: var(--ink);
color: #fff;
}
/* ===== F. 关于我们 / 联系区块（首页使用） ===== */
/* ===== G. WhatsApp 悬浮按钮 & 询价车弹窗 ===== */
/* 右下角固定圆形按钮 */
.wa-float { /* WhatsApp 悬浮球 */
position: fixed; /* 固定：滚动时不动 */
right: 30px; /* 距右边 30px */
bottom: 30px; /* 距底部 30px */
width: 54px; /* 直径 54px */
height: 54px; /* 高 54px */
border-radius: 50%; /* 圆形 */
background: #25D366; /* WhatsApp 绿 */
color: #fff; /* 白色 LOGO（SVG 用 currentColor 继承） */
display: flex; /* 弹性布局 */
align-items: center; /* LOGO 垂直居中 */
justify-content: center; /* LOGO 水平居中 */
z-index: 99; /* 层级 99：盖住内容，低于弹窗 */
}
.wa-float svg { /* WhatsApp 官方 LOGO */
width: 30px; /* 与原 emoji 视觉大小一致 */
height: 30px;
display: block;
}
/* 弹窗遮罩层（默认隐藏，JS 改成 display:flex 才显示） */
.modal { /* 弹窗遮罩 */
display: none; /* 默认隐藏 */
position: fixed; /* 固定全屏 */
top: 0; /* 从顶部 */
left: 0; /* 从左边 */
width: 100%; /* 占满宽 */
height: 100%; /* 占满高 */
background: rgba(0, 0, 0, 0.6); /* 黑色 60% 半透明遮罩 */
z-index: 200; /* 层级最高：盖住一切 */
align-items: center; /* 内容垂直居中 */
justify-content: center; /* 内容水平居中 */
}
/* 弹窗白色面板 */
.modal-content { /* 弹窗本体 */
background: #fff; /* 白底 */
padding: 30px; /* 内边距 30px */
border-radius: var(--radius); /* 统一圆角 */
width: 90%; /* 宽占屏 90% */
max-width: 520px; /* 最大 520px */
}
/* 弹窗右上角关闭 × */
.close { /* × 按钮 */
float: right; /* 浮动到右侧 */
font-size: 28px; /* × 大小 */
cursor: pointer; /* 小手 */
}
/* ===== H. 子页面公共样式 ===== */
/* 子页面导航：与白色横幅同底色（浅白磨砂），文字用 --ink 自动适配深浅模式 */
.header-solid { /* 子页面导航（白色横幅上的浅白磨砂） */
background: rgba(255, 255, 255, 0.92); /* 近白半透明底 */
backdrop-filter: blur(14px) saturate(110%); /* 磨砂 */
-webkit-backdrop-filter: blur(14px) saturate(110%); /* Safari 兼容 */
box-shadow: 0 1px 0 rgba(29, 27, 24, 0.06); /* 底部极浅分割线 */
transition: background .3s, padding .3s, box-shadow .3s; /* 平滑过渡 */
}
.header-solid .logo { color: var(--ink) !important; } /* LOGO 深色（暗色模式自动变浅） */
.header-solid .logo span { color: var(--brand) !important; } /* SPARK 品牌红 */
.header-solid .main-nav a { color: var(--ink); }
.header-solid .main-nav a.active { color: var(--brand); }
.header-solid .main-nav a:hover { background: rgba(29, 27, 24, 0.08); color: #e5302c; }
.header-solid .nav-icons { color: var(--ink); }
html.dark .header-solid { /* 深色模式：深灰玻璃 + 浅色字 */
background: rgba(80, 80, 80, 0.3);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}
.header-solid.scrolled { /* 子页面滚动：浅色区 → 浅白磨砂 */
background: rgba(255, 255, 255, 0.22); /* 几乎无色 */
backdrop-filter: blur(14px) saturate(110%); /* 磨砂 */
-webkit-backdrop-filter: blur(14px) saturate(110%); /* Safari 兼容 */
box-shadow: 0 1px 0 rgba(29, 27, 24, 0.06); /* 底部极浅分割线 */
}
.header-solid.scrolled.on-dark { /* 仍压在深色横幅上 → 与 ISO 面板同款深灰玻璃 */
background: rgba(80, 80, 80, 0.3); /* 深灰 30% */
backdrop-filter: blur(10px); /* 模糊 10px */
-webkit-backdrop-filter: blur(10px); /* Safari 兼容 */
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12);
}
html.dark .header-solid.scrolled { /* 深色模式：与玻璃卡同款深灰玻璃 */
background: rgba(80, 80, 80, 0.3);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* 子页面顶部的标题横幅（纯白、紧凑）
注意 padding-top 要大于导航高度，避免标题被固定导航遮住 */
.page-banner { /* 子页顶部横幅 */
background: #fff; /* 纯白背景 */
color: var(--ink); /* 深色文字（暗色模式自动变浅） */
padding: 110px 0 28px; /* 上 110（避开固定导航）下 28：整体更紧凑 */
}
.page-banner h1 { /* 横幅标题 */
font-size: 36px; /* 字号 36px（比原先 42 更紧凑） */
font-weight: 800; /* 加粗，与首页 Hero 观感一致 */
letter-spacing: 0.2px; /* 微调字距 */
margin-bottom: 8px; /* 与副标题间距 8px */
}
.page-banner p { /* 横幅副标题 */
font-size: 16px; /* 字号 16px */
color: var(--muted); /* 次级灰 */
}
html.dark .page-banner { background: #0d0d0d; } /* 暗色模式：跟随页面底色 */
/* 通用内容区块 */
.content-section { /* 通用区块 */
padding: 80px 0; /* 上下留白 80px */
}
/* 浅灰底版本（用于相邻区块交替换色） */
.content-section.alt { /* 带 alt 类的区块 */
background: #FFFFFF; /* 页面大底色：纯白 */ /* 纯白底 */
}
/* 居中区块标题 */
.center-title { /* 居中标题 */
text-align: center; /* 文字居中 */
font-size: 36px; /* 字号 36px */
font-weight: 700; /* 加粗 */
margin-bottom: 18px; /* 与装饰线间距 */
color: var(--ink); /* 深黑 */
}
.center-title::after { /* 标题下品牌红短装饰线 */
content: "";
display: block;
width: 44px;
height: 3px;
border-radius: 2px;
background: var(--brand);
margin: 16px auto 0; /* 居中红短线 */
}
/* ===== I. 关于页专用 ===== */
/* 左文右数据卡的两栏布局：1.2fr 是左栏比例，1fr 是右栏 */
.about-layout { /* 关于页两栏容器 */
display: grid; /* 网格布局 */
grid-template-columns: 1.2fr 1fr; /* 左栏 1.2 份，右栏 1 份 */
gap: 50px; /* 两栏间距 50px */
align-items: start; /* 顶对齐 */
}
/* 关于页左栏文字（正文深黑统一） */
.about-text h2 { /* 左栏标题 */
font-size: 32px; /* 字号 32px */
font-weight: 700; /* 加粗 */
color: var(--ink); /* 深黑 */
margin-bottom: 20px; /* 与正文间距 */
}
.about-text p { /* 左栏段落 */
font-size: 17px; /* 字号 17px */
line-height: 1.8; /* 行高 1.8：阅读舒适 */
color: var(--muted); /* 次级暖灰 */
margin-bottom: 16px; /* 段落间距 */
}
/* 右侧数据卡片：2 列 2 行 */
.about-facts { /* 数据卡网格 */
display: grid; /* 网格 */
grid-template-columns: 1fr 1fr; /* 两列平分 */
gap: 20px; /* 卡片间距 20px */
}
.fact-card { /* 单个数据卡：轻毛玻璃材质 */
background: linear-gradient(165deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.6));
backdrop-filter: blur(12px) saturate(120%);
-webkit-backdrop-filter: blur(12px) saturate(120%);
border: 1px solid rgba(255, 255, 255, 0.75);
border-radius: var(--radius); /* 统一圆角 */
box-shadow: var(--shadow-card); /* 悬浮阴影 */
padding: 30px 20px; /* 内边距 */
text-align: center; /* 文字居中 */
transition: transform .25s ease, box-shadow .25s ease;
}
.fact-card:hover { /* 悬停上浮 */
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
}
/* 大数字（红色） */
.fact-num { /* 数据卡大字 */
font-size: 30px; /* 字号 30px */
font-weight: bold; /* 加粗 */
color: #ed2624; /* 红色 */
margin-bottom: 6px; /* 与小字间距 */
}
/* 下方说明小字 */
.fact-label { /* 数据卡说明 */
font-size: 14px; /* 字号 14px */
color: var(--muted); /* 中灰（深色模式自动变浅） */
}
/* 四大优势卡片网格 */
.feature-grid { /* 优势卡网格 */
display: grid; /* 网格 */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* 自动列数：每列最窄 250px */
gap: 30px; /* 间距 30px */
}
.feature-card { /* 单张优势卡：轻毛玻璃材质 */
background: linear-gradient(165deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.6));
backdrop-filter: blur(12px) saturate(120%);
-webkit-backdrop-filter: blur(12px) saturate(120%);
border: 1px solid rgba(255, 255, 255, 0.75);
border-radius: var(--radius); /* 统一圆角 */
padding: 32px 24px; /* 内边距 */
box-shadow: var(--shadow-card); /* 悬浮阴影 */
transition: transform .25s ease, box-shadow .25s ease;
}
.feature-card:hover { /* 悬停上浮 */
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
}
/* 卡片图标（emoji 或图片）：淡红圆底，去花哨但有品牌感 */
.feature-icon { /* 卡片顶部图标 */
width: 58px; /* 圆底尺寸 */
height: 58px;
display: flex; /* emoji 居中 */
align-items: center;
justify-content: center;
font-size: 28px; /* emoji 大小 */
background: rgba(237, 38, 36, 0.08); /* 品牌红 8% 淡底 */
border-radius: 14px; /* 圆角方块 */
margin-bottom: 16px; /* 与标题间距 */
}
.feature-card h3 { /* 卡片标题 */
font-size: 19px; /* 字号 19px */
font-weight: 700; /* 加粗 */
color: var(--ink); /* 深黑 */
margin-bottom: 10px; /* 与描述间距 */
}
.feature-card p { /* 卡片描述 */
font-size: 15px; /* 字号 15px */
line-height: 1.7; /* 行高 */
color: var(--muted); /* 次级暖灰 */
}
/* ===== J. 联系页专用 ===== */
/* 三张联系方式卡片 */
.contact-cards { /* 联系卡网格 */
display: grid; /* 网格 */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* 自动列数 */
gap: 30px; /* 间距 */
}
.contact-card { /* 单张联系卡：轻毛玻璃材质 */
background: linear-gradient(165deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.6));
backdrop-filter: blur(12px) saturate(120%);
-webkit-backdrop-filter: blur(12px) saturate(120%);
border: 1px solid rgba(255, 255, 255, 0.75);
border-radius: var(--radius); /* 统一圆角 */
padding: 36px 26px; /* 内边距 */
text-align: center; /* 居中 */
box-shadow: var(--shadow-card); /* 悬浮阴影 */
transition: transform .25s ease, box-shadow .25s ease;
}
.contact-card:hover { /* 悬停上浮 */
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
}
.contact-card .feature-icon { /* 联系卡图标：居中圆底 */
margin-left: auto;
margin-right: auto;
}
.contact-card .feature-icon svg { /* 卡内 WhatsApp LOGO 尺寸 */
width: 28px;
height: 28px;
display: block;
}
.contact-card h3 { /* 卡片标题 */
font-weight: 700; /* 加粗 */
color: var(--ink); /* 深黑 */
margin-bottom: 10px; /* 卡片标题与内容间距 */
}
.contact-card p { /* 卡片内容 */
color: var(--muted); /* 次级暖灰 */
font-size: 16px; /* 字号 */
line-height: 1.6; /* 行高 */
}
/* 卡片内链接为红色 */
.contact-card a { color: #ed2624; } /* 邮箱/号码链接红色 */
/* 询价表单外框：轻毛玻璃悬浮面板 */
.inquiry-form { /* 表单容器 */
max-width: 820px; /* 最大宽 820px */
margin: 0 auto; /* 水平居中 */
background: linear-gradient(165deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.65)); /* 半透明白底 */
backdrop-filter: blur(12px) saturate(120%); /* 磨砂 */
-webkit-backdrop-filter: blur(12px) saturate(120%);
border: 1px solid rgba(255, 255, 255, 0.75); /* 细白边 */
padding: 40px; /* 内边距 40px */
border-radius: var(--radius); /* 统一圆角 */
box-shadow: var(--shadow-card); /* 悬浮阴影 */
}
/* 一行放两个字段 */
.form-row { /* 表单行 */
display: flex; /* 两个字段横排 */
gap: 24px; /* 字段间距 24px */
}
/* 单个字段组（标签 + 输入框） */
.form-group { /* 一个字段 */
flex: 1; /* 平分一行宽度 */
margin-bottom: 22px; /* 与下一字段间距 */
display: flex; /* 纵向排标签和输入框 */
flex-direction: column; /* 从上到下 */
}
/* 字段标签 */
.form-group label { /* 输入框上方文字 */
font-size: 14px; /* 字号 14px */
font-weight: 600; /* 半粗 */
color: var(--ink); /* 深黑 */
margin-bottom: 8px; /* 与输入框间距 */
}
/* 输入框和文本域 */
.form-group input, /* 单行输入框 */
.form-group textarea { /* 多行文本框 */
padding: 12px 14px; /* 内边距 */
border: 1px solid #ddd; /* 浅灰边框 */
background: rgba(255, 255, 255, 0.8); /* 半透明白底融入玻璃面板 */
border-radius: 10px; /* 圆角 */
font-size: 15px; /* 字号 */
font-family: inherit; /* 继承全站鸿蒙字体 */
transition: border-color .2s; /* 边框过渡 */
}
/* 聚焦时边框变红 */
.form-group input:focus, /* 输入框获得焦点时 */
.form-group textarea:focus { /* 文本框获得焦点时 */
outline: none; /* 去掉浏览器默认外框 */
border-color: #ed2624; /* 边框变品牌红 */
}
/* ===== K. 首页额外样式 ===== */
/* ===== K2. 首页第二屏（Explore 产品精选区） ===== */
/* 第二屏最外层：左右两栏布局的容器 */
.explore-section { /* 整个第二屏区块 */
padding: 110px 0; /* 上下留白，让区块有呼吸感 */
background: #FFFFFF; /* 页面大底色：纯白 */ /* 白色背景 */
overflow: hidden; /* 隐藏超出部分（跑马灯卡片在容器外不可见） */
}
/* 左右布局：左边文字 + 右边卡片跑马灯 */
.explore-layout { /* 第二屏内部横向排列容器 */
display: flex; /* 启用弹性布局，左右两栏 */
align-items: center; /* 垂直居中对齐 */
gap: 70px; /* 左右两栏之间间距 70px */
}
/* 左侧文字栏：固定宽度不伸缩 */
.explore-text { /* 大标题、介绍、按钮、箭头所在栏 */
flex: 0 0 320px; /* 固定 320px 宽，不随内容伸缩 */
flex-shrink: 0; /* 防止被右侧卡片挤压 */
}
/* 左侧大标题 */
.explore-text h2 { /* "Explore Our Product Range" 标题 */
font-size: 42px; /* 大标题字号 */
line-height: 1.15; /* 行高略紧凑，两行更整体 */
margin: 0 0 22px; /* 与下方介绍文字间距 22px */
color: var(--ink); /* 深色文字（深色模式自动变浅） */
}
/* 左侧介绍文字 */
.explore-text p { /* 标题下的说明文字 */
font-size: 15px; /* 正文字号 */
line-height: 1.8; /* 行高 1.8 更易读 */
color: var(--muted); /* 灰色次要文字（深色模式自动变浅） */
margin: 0 0 30px; /* 与按钮间距 30px */
}
/* 左侧 Learn More 按钮 */
.btn-learn { /* "Learn More" 按钮 */
display: inline-block; /* 行内块，可设置内边距 */
padding: 14px 38px; /* 内边距控制按钮大小 */
background: #222; /* 深灰底 */
color: #fff; /* 白字 */
text-decoration: none; /* 去掉链接下划线 */
font-size: 14px; /* 按钮文字大小 */
letter-spacing: 0.5px; /* 字间距微调 */
transition: background 0.3s; /* 背景色渐变过渡 */
}
.btn-learn:hover { /* 鼠标悬停时 */
background: #ed2624; /* 变为品牌红 */
}
/* 左右箭头按钮容器 */
.explore-arrows { /* 两个圆形箭头的容器 */
display: flex; /* 横向排列 */
gap: 14px; /* 两个箭头间距 14px */
margin-top: 44px; /* 与 Learn More 按钮间距 44px */
}
/* 圆形箭头按钮 */
.arrow-btn { /* 单个箭头按钮 */
width: 46px; /* 固定宽 46px */
height: 46px; /* 固定高 46px（正圆） */
border-radius: 50%; /* 圆形 */
border: 1px solid #ddd; /* 浅灰描边 */
background: transparent; /* 透明底 */
font-size: 22px; /* 箭头符号大小 */
color: var(--ink); /* 箭头颜色（深色模式自动变浅） */
cursor: pointer; /* 鼠标变手型 */
line-height: 1; /* 符号垂直居中 */
transition: all 0.3s; /* 所有属性渐变过渡 */
}
.arrow-btn:hover { /* 鼠标悬停时 */
background: #ed2624; /* 底变红 */
border-color: #ed2624; /* 描边变红 */
color: #fff; /* 箭头变白 */
}
/* 右侧跑马灯视口：只显示窗口内的卡片 */
.explore-viewport { /* 卡片滚动窗口（超出部分裁切） */
flex: 1; /* 占据剩余宽度 */
overflow: hidden; /* 关键：裁切窗口外卡片，形成跑马灯 */
}
/* 卡片轨道：由 JS 控制 translateX 左右平移 */
.explore-track { /* 所有卡片所在的横向轨道 */
display: flex; /* 卡片横向排开 */
gap: 24px; /* 卡片间距 24px */
will-change: transform; /* 提示浏览器优化 transform 动画性能 */
}
/* 单张产品卡片：300 × 450，约 2:3 竖版比例 */
.explore-card { /* 单个产品卡片 */
flex: 0 0 300px; /* 固定宽 300px，不伸缩 */
width: 300px; /* 宽 300px */
height: 450px; /* 高 450px（3:2 竖着的比例） */
position: relative; /* 作为遮罩层定位的参照 */
border-radius: 12px; /* 圆角 */
overflow: hidden; /* 裁切内部超出部分 */
cursor: pointer; /* 鼠标变手型 */
perspective: 1000px; /* 3D 透视，供子元素翻转动效使用 */
transform: scale(1); /* 初始缩放 1 倍 */
transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 悬停缩放弹性过渡 */
}
.explore-card:hover { /* 鼠标悬停整卡时 */
transform: scale(1.05); /* 放大到 1.05 倍 */
}
.explore-card img { /* 卡片产品图 */
width: 100%; /* 图铺满卡片宽度 */
height: 100%; /* 图铺满卡片高度 */
object-fit: cover; /* 等比裁切填充，不留白边 */
display: block; /* 去掉图片底部空隙 */
}
/* 悬停时从底部翻出的信息遮罩层：轻毛玻璃 */
.card-overlay { /* 卡片底部信息层 */
position: absolute; /* 绝对定位铺满卡片 */
left: 0; right: 0; top: 0; bottom: 0; /* 四边贴合 = 铺满 */
background: rgba(255, 255, 255, 0.78); /* 白色半透明底 */
backdrop-filter: blur(14px) saturate(120%); /* 磨砂 */
-webkit-backdrop-filter: blur(14px) saturate(120%);
transform: rotateX(-90deg); /* 初始绕 X 轴翻转 90 度（不可见） */
transform-origin: bottom; /* 以底边为轴翻转，形成"掀开"效果 */
opacity: 0; /* 初始完全透明 */
transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
opacity 0.4s ease; /* 翻转 + 透明度双过渡 */
display: flex; /* 内部纵向排布 */
flex-direction: column; /* 竖排 */
justify-content: center; /* 垂直居中 */
padding: 30px; /* 内边距 30px */
}
.explore-card:hover .card-overlay { /* 悬停时遮罩层翻出 */
transform: rotateX(0); /* 转正显示 */
opacity: 1; /* 完全显示 */
}
/* 遮罩层内文字样式 */
.card-overlay h3 { /* 产品名 */
font-size: 22px; /* 标题字号 */
margin: 0 0 14px; /* 与内容间距 */
color: #111; /* 深色 */
}
.card-overlay p { /* 说明 / 参数行 */
font-size: 14px; /* 正文字号 */
line-height: 1.7; /* 行高 */
color: #555; /* 灰色 */
margin: 0 0 8px; /* 行间距 */
}
/* 遮罩层内 "View Details" 链接 */
.card-view { /* 查看详情按钮（与产品卡片按钮同款） */
display: flex; /* 弹性：文字居中 */
align-items: center;
justify-content: center;
align-self: stretch; /* 撑满遮罩层内容宽度 */
margin-top: 22px;
padding: 11px 18px;
background: #fff;
color: var(--ink);
border: 1.5px solid var(--ink);
border-radius: 8px;
font-size: 14px;
font-weight: 700;
letter-spacing: .2px;
text-decoration: none;
transition: background .18s, color .18s, border-color .18s;
}
.card-view:hover { background: var(--ink); color: #fff; }
/* ===== L. 手机端适配（屏幕宽度 ≤ 900px 时生效） ===== */
@media(max-width:900px) { /* 屏幕小于等于 900px 时应用下面的覆盖样式 */
/* 导航间距缩小 */
.main-nav { gap: 6px; } /* 菜单间距手机端更小，防止挤爆 */
/* Banner 大标题字号减小 */
.slide h1 { font-size: 34px; } /* 大标题 47→34px */
/* 小标题字号微调 */
.subhead { font-size: 13px; } /* 小标题 14→13px */
/* 徽章行、按钮行改为竖排左对齐 */
.badge-row, /* 徽章行 */
.btn-row { /* 按钮行 */
flex-direction: column; /* 改为纵向排列 */
align-items: flex-start; /* 左对齐 */
}
/* 手机端徽章面板宽度跟随屏幕 */
.info-badge { width: 100%; } /* 固定 490px 在手机上太宽，改为占满容器 */
/* 表单两列变一列 */
.form-row {
flex-direction: column; /* 两个字段上下排 */
gap: 0; /* 行内不需要间距 */
}
/* 关于页两栏变单栏 */
.about-layout { grid-template-columns: 1fr; } /* 只剩一列，上下堆叠 */
/* 子页面横幅标题缩小 */
.page-banner h1 { font-size: 32px; } /* 横幅标题 44→32px */
/* 第二屏改为上下堆叠 */
.explore-layout { /* 左右两栏改竖排 */
flex-direction: column; /* 文字在上，卡片在下 */
gap: 40px; /* 上下间距 40px */
align-items: flex-start; /* 左对齐 */
}
/* 手机端左侧文字栏占满宽度 */
.explore-text { flex: none; } /* 取消固定 320px 宽 */
/* 手机端大标题缩小 */
.explore-text h2 { font-size: 32px; } /* 大标题 42→32px */
/* 手机端卡片缩小 */
.explore-card { /* 单个产品卡片 */
flex: 0 0 240px; /* 固定宽 240px */
width: 240px; /* 宽 240px */
height: 360px; /* 高 360px，保持 2:3 竖版比例 */
}
}
/* ================================================================
★ 新增模块公共样式（Value Prop / Social Proof / Factory / Cases
/ Testimonials / FAQ / CTA / Footer）—— 由后台模块管理驱动
================================================================ */
/* ---- 模块通用 ---- */
.mod-section { /* 每个新增板块的外壳 */
padding: 90px 0; /* 上下留白 */
background: #FFFFFF; /* 页面大底色：纯白 */ /* 纯白底 */
}
.mod-section:nth-of-type(even) { background: #FFFFFF; /* 页面大底色：纯白 */ } /* 相邻板块同色，页面大背景统一纯白 */
.mod-head { margin-bottom: 48px; } /* 标题区与内容的间距 */
.mod-sub { /* 副标题（小字） */
font-size: 14px;
color: #ed2624; /* 品牌红小标题 */
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 12px;
}
.mod-title { /* 板块主标题 */
font-size: 40px;
font-weight: 700;
color: var(--ink); /* 深色模式自动变浅白 */
line-height: 1.2;
}
/* ---- 统一轻毛玻璃卡片：纯白底上的轻盈磨砂悬浮卡（与全站卡片材质一致）
模糊/圆角仍由后台「毛玻璃参数」经 JS 写入 --g-blur / --g-radius 控制 ---- */
.g-card {
--g-op: 0.3; /* 保留变量兼容后台（底色已改为白，不再使用） */
--g-blur: 10px; /* 模糊强度 */
--g-radius: 16px; /* 圆角 */
background: linear-gradient(165deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.62)); /* 白色半透明 */
backdrop-filter: blur(var(--g-blur)) saturate(120%); /* 毛玻璃 */
-webkit-backdrop-filter: blur(var(--g-blur)) saturate(120%);
border: 1px solid rgba(255, 255, 255, 0.8); /* 细白描边提亮边缘 */
border-radius: var(--g-radius); /* 圆角 */
box-shadow: var(--shadow-card); /* 柔和悬浮投影 */
color: var(--ink); /* 卡内默认深黑正文（可读性优先） */
}
/* ---- 3. 价值主张 Value Prop ---- */
.vp-grid { /* 4 列卡片网格 */
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.vp-card { padding: 34px 26px; } /* 卡片内边距 */
.vp-icon { /* 顶部图标圆 */
width: 52px; height: 52px;
border-radius: 14px;
background: rgba(237, 38, 36, 0.16); /* 淡红底 */
display: flex; align-items: center; justify-content: center;
margin-bottom: 20px;
}
.vp-icon svg { width: 26px; height: 26px; color: #ed2624; } /* 红色线条图标 */
.vp-icon img { width: 26px; height: 26px; object-fit: contain; } /* 后台上传的图标 */
.vp-card h3 { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.vp-card p { font-size: 14px; line-height: 1.65; color: var(--muted); }
/* ---- 4. 客户信任 Social Proof ---- */
.sp-marquee { /* LOGO 跑马灯视口 */
overflow: hidden;
padding: 26px 0;
border-top: 1px solid var(--line); /* 上下细分割线 */
border-bottom: 1px solid var(--line);
margin-bottom: 36px;
}
.sp-track { /* 滚动轨道：内容由 JS 复制一份实现无缝循环 */
display: flex;
align-items: center;
gap: 80px;
width: max-content;
animation: spMarquee 28s linear infinite; /* 28 秒一圈匀速滚动 */
}
.sp-marquee:hover .sp-track { animation-play-state: paused; } /* 悬停暂停 */
@keyframes spMarquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); } /* 移动一半宽度 = 复制份的开头，正好无缝 */
}
.sp-logo { /* 单个客户 LOGO（文字版） */
font-size: 26px;
font-weight: 700;
color: #b3afa6;
white-space: nowrap;
letter-spacing: 0.5px;
}
.sp-logo img { max-height: 34px; display: block; } /* 图片 LOGO */
.sp-certs { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
.sp-cert { /* 证书缩略卡 */
min-width: 220px;
padding: 26px 30px;
text-align: center;
}
.sp-cert strong { display: block; font-size: 22px; color: var(--ink); margin-bottom: 6px; }
.sp-cert em { font-style: normal; font-size: 13px; color: var(--muted); }
.sp-cert img { max-width: 100%; max-height: 120px; object-fit: contain; }
/* ---- 6. 工厂实力 Factory Strength ---- */
.fac-layout { /* 左图右文 */
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 48px;
align-items: center;
}
.fac-media { /* 左侧媒体容器 */
border-radius: 20px;
overflow: hidden;
min-height: 380px;
background: #FFFFFF center/cover no-repeat;
border: 1px solid var(--line);
box-shadow: var(--shadow-card);
}
.fac-media img, .fac-media iframe { width: 100%; height: 100%; min-height: 380px; object-fit: cover; display: block; border: 0; }
.fac-item { /* 右侧单条实力 */
display: flex;
gap: 18px;
padding: 20px 0;
border-bottom: 1px solid var(--line);
}
.fac-item:last-child { border-bottom: none; }
.fac-ico {
width: 46px; height: 46px; flex-shrink: 0;
border-radius: 12px;
background: rgba(237, 38, 36, 0.12);
display: flex; align-items: center; justify-content: center;
}
.fac-ico svg { width: 22px; height: 22px; color: #ed2624; }
.fac-ico img { width: 22px; height: 22px; object-fit: contain; }
.fac-item h3 { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.fac-item p { font-size: 14px; color: var(--muted); line-height: 1.6; }
/* ---- 7. 客户案例 Case Study ---- */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.case-card { padding: 24px; }
.case-brand { /* 顶部品牌 LOGO 位（文字或图片） */
font-size: 20px; font-weight: 700;
padding: 14px 18px;
background: rgba(29, 27, 24, 0.04);
border-radius: 12px;
margin-bottom: 18px;
text-align: center;
color: var(--ink);
}
.case-brand img { max-height: 36px; max-width: 140px; object-fit: contain; }
.case-img { /* 样品实拍位 */
height: 210px;
border-radius: 12px;
background: rgba(29, 27, 24, 0.045) center/cover no-repeat;
display: flex; align-items: center; justify-content: center;
margin-bottom: 18px;
font-size: 13px; color: rgba(29, 27, 24, 0.45);
}
.case-card h3 { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.case-card p { font-size: 14px; line-height: 1.65; color: var(--muted); }
/* ---- 8. 客户评价 Testimonials ---- */
.tst-wrap { position: relative; }
.tst-viewport { overflow: hidden; }
.tst-track { /* 轨道：JS 控制 transform 轮播 */
display: flex;
transition: transform 0.5s ease;
}
.tst-card {
flex: 0 0 calc((100% - 48px) / 3); /* 一屏 3 张，间距 24px */
margin-right: 24px;
padding: 30px 28px;
display: flex; flex-direction: column; justify-content: space-between;
}
.tst-text { font-size: 15px; line-height: 1.7; color: #3f3c37; margin-bottom: 22px; }
.tst-user { display: flex; align-items: center; gap: 12px; }
.tst-avatar { /* 头像圆（字母或图片） */
width: 46px; height: 46px; flex-shrink: 0;
border-radius: 50%;
background: linear-gradient(135deg, #ed2624, #f2884b);
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 18px; color: #fff;
overflow: hidden;
}
.tst-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tst-user strong { display: block; font-size: 15px; color: var(--ink); }
.tst-user em { font-style: normal; font-size: 13px; color: var(--muted); }
.tst-arrows { display: flex; gap: 12px; justify-content: center; margin-top: 28px; }
.tst-arrows .arrow-btn { /* 复用首页箭头按钮样式，换深色 */
width: 44px; height: 44px;
border-radius: 50%;
border: 1px solid #d8d4ca;
background: #fff;
color: #1d1b18;
font-size: 20px;
cursor: pointer;
transition: all .25s;
}
.tst-arrows .arrow-btn:hover { background: #1d1b18; color: #fff; border-color: #1d1b18; }
/* ---- 9. FAQ ---- */
.faq-container { max-width: 860px; } /* FAQ 用窄容器更好读 */
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item { overflow: hidden; }
.faq-q { /* 问题行（按钮） */
width: 100%;
display: flex; justify-content: space-between; align-items: center;
padding: 20px 26px;
background: transparent; border: none;
color: var(--ink); font-size: 16px; font-weight: 600;
font-family: inherit;
text-align: left;
cursor: pointer;
}
.faq-x { font-size: 22px; font-weight: 400; transition: transform .3s; } /* 加号 */
.faq-item.open .faq-x { transform: rotate(45deg); } /* 展开时加号变叉 */
.faq-a { /* 答案：默认收起 */
max-height: 0;
overflow: hidden;
transition: max-height .35s ease;
}
.faq-a p { padding: 0 26px 22px; font-size: 14.5px; line-height: 1.7; color: var(--muted); }
/* ---- 10. 底部 CTA 询盘区 ---- */
.cta-section { /* 底部询盘区：纯白浅色底（与整页一致） */
background: #FFFFFF; /* 页面大底色：纯白 */
padding: 110px 0;
}
.cta-panel { /* 居中毛玻璃面板 */
max-width: 860px;
margin: 0 auto;
padding: 70px 50px;
text-align: center;
}
.cta-panel h2 { font-size: 38px; font-weight: 700; line-height: 1.25; margin-bottom: 14px; }
.cta-panel > p { font-size: 17px; color: var(--muted); margin-bottom: 36px; }
.cta-btns { display: flex; gap: 18px; justify-content: center; align-items: center; flex-wrap: wrap; }
.cta-wa { /* WhatsApp 快捷询盘入口（浅色面板上用品牌红） */
color: var(--brand-cta);
font-size: 15px;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 4px;
}
.cta-wa:hover { color: var(--brand-cta-hover); }
/* ---- 11. 页脚 Footer ---- */
.site-footer { /* 页脚：纯白浅色底 */
background: #FFFFFF; /* 页面大底色：纯白 */
color: var(--muted);
padding: 70px 0 0;
}
.footer-grid { /* 4 列 */
display: grid;
grid-template-columns: 1.4fr 1fr 1.2fr 1fr;
gap: 40px;
padding-bottom: 50px;
}
.foot-logo { font-size: 24px; margin-bottom: 14px; display: inline-block; color: var(--ink); font-weight: 800; }
/* 页脚 LOGO：YOLO 深黑 + SPARK 品牌红（!important 覆盖 HTML 内联颜色；深色模式 YOLO 转白） */
.foot-logo span { color: var(--brand) !important; }
.site-footer .logo span:first-child { color: var(--ink) !important; }
html.dark .site-footer .logo span:first-child { color: #fff !important; }
.foot-brand p { font-size: 14px; line-height: 1.7; max-width: 300px; }
.foot-col h4 {
color: var(--ink); font-size: 15px; font-weight: 700;
margin-bottom: 16px; letter-spacing: 0.5px;
}
.foot-col a, .foot-col span {
display: block;
font-size: 14px;
color: var(--muted);
text-decoration: none;
margin-bottom: 10px;
}
.foot-col a:hover { color: var(--ink); }
.foot-bottom { /* 底条：版权 + 隐私 */
border-top: 1px solid var(--line);
padding: 20px 0;
display: flex; justify-content: space-between; align-items: center;
font-size: 13px;
color: var(--muted);
}
.foot-bottom a { color: var(--muted); text-decoration: none; }
.foot-bottom a:hover { color: var(--ink); }
/* ---- 响应式：PC 多列 → 移动端单列 ---- */
@media (max-width: 1024px) {
.vp-grid { grid-template-columns: repeat(2, 1fr); } /* 平板 2 列 */
.case-grid { grid-template-columns: repeat(2, 1fr); }
.tst-card { flex: 0 0 calc((100% - 24px) / 2); } /* 一屏 2 张 */
.footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
.mod-section { padding: 64px 0; }
.mod-title { font-size: 30px; }
.fac-layout { grid-template-columns: 1fr; gap: 30px; } /* 工厂板块上下排 */
.fac-media { min-height: 260px; }
.fac-media img, .fac-media iframe { min-height: 260px; }
}
@media (max-width: 640px) {
.vp-grid { grid-template-columns: 1fr; } /* 手机全部单列 */
.case-grid { grid-template-columns: 1fr; }
.tst-card { flex: 0 0 100%; } /* 一屏 1 张 */
.footer-grid { grid-template-columns: 1fr; gap: 28px; }
.foot-bottom { flex-direction: column; gap: 8px; }
.cta-panel { padding: 50px 26px; }
.cta-panel h2 { font-size: 28px; }
.sp-track { gap: 44px; }
}
/* ===== M. 产品详情页（Products/ 目录下的页面使用） ===== */
/* ---- 主体两栏：左图库+规格表 / 右购买信息 ---- */
.pd-wrap { /* 详情主体容器 */
display: grid;
grid-template-columns: 1.05fr 1fr; /* 左右两栏，左略宽 */
gap: 48px;
padding: 130px 0 80px; /* 顶部留出固定导航高度（原面包屑条已移除）+ 底部留白 */
align-items: start;
background: #FFFFFF; /* 页面大底色：纯白 */
}
/* ---- 左栏：图库（整块圆角卡片：缩略图列 + 主图同框） ---- */
.pd-gallery { /* 圆角矩形背景框：包住缩略图 + 主图 */
position: relative; /* 作为悬停放大面板的定位基准 */
display: flex;
align-items: stretch; /* 两栏等高 */
gap: 14px;
padding: var(--pd-inset); /* 图片与卡片四边等距（改 --pd-inset 一处即可） */
border: 1px solid var(--line);
border-radius: var(--radius); /* 统一圆角 */
background: #f5f5f5; /* 卡片衬底（浅灰） */
box-shadow: var(--shadow-card); /* 悬浮阴影，与全站卡片一致 */
}
.pd-thumbs { /* 左侧缩略图列（滚动区 + 上下箭头浮层） */
position: relative; /* 作为箭头浮层的定位基准 */
width: 168px; /* 两列缩略图总宽（JS 会按实际尺寸微调） */
flex: none;
display: flex;
flex-direction: column;
min-height: 0;
}
.pd-thumbs-scroll { /* 缩略图滚动可视区：最多 6 行，超出隐藏 */
flex: 1; /* 撑满整列高度（与主图等高） */
min-height: 0;
overflow-y: auto;
scrollbar-width: none; /* 隐藏原生滚动条（用按钮代替） */
border-radius: 10px;
scroll-behavior: smooth;
max-height: 524px; /* 兜底值（JS 会按实际宽度算出精确 6 行高度） */
}
.pd-thumbs-scroll::-webkit-scrollbar { display: none; }
.pd-thumbs-inner { /* 两列正方形缩略图网格 */
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.pd-thumb { /* 单张缩略图（强制 1:1 正方形） */
width: 100%;
aspect-ratio: 1 / 1; /* 固定正方形，不随原图比例变化 */
object-fit: cover; /* 非正方形原图居中裁切，不变形 */
border: 2px solid #e6e6e6;
border-radius: 10px;
cursor: pointer;
transition: border-color .2s;
display: block;
}
.pd-thumb.active { border-color: var(--brand); } /* 选中红框 */
.pd-more { /* 缩略图列上/下浮层箭头（毛玻璃通栏） */
position: absolute; /* 浮在缩略图上，不占布局空间 */
left: 0;
right: 0; /* 左右与缩略图列边缘对齐 */
bottom: 0; /* 默认贴底（压在倒数第一行上） */
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 34px;
border: none;
border-radius: 10px;
background: rgba(80, 80, 80, 0.3); /* 与首页导航栏 / 首屏玻璃面板同款：深灰 30% */
backdrop-filter: blur(10px); /* 与导航栏一致：模糊 10px */
-webkit-backdrop-filter: blur(10px); /* Safari 兼容 */
border: 1px solid rgba(255, 255, 255, 0.25); /* 与导航栏一致：极淡白描边 */
color: #fff;
cursor: pointer;
transition: background .2s;
}
.pd-more.up { top: 0; bottom: auto; } /* 滚动后出现在顶端 */
.pd-more.up svg { transform: rotate(180deg); } /* 顶部箭头朝上 */
.pd-more svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); } /* 玻璃较透时保证箭头清晰 */
.pd-more:hover { background: rgba(80, 80, 80, 0.42); } /* 悬停略加深，仍保持透明感 */
.pd-more[hidden] { display: none; } /* 无剩余图片时不显示 */
.pd-main { /* 主图容器（卡片内的图片框） */
position: relative; /* 放大镜取景框的定位基准 */
flex: 1;
min-width: 0;
aspect-ratio: 1 / 1; /* 图少时保持正方形 */
overflow: hidden;
border-radius: 12px;
background: #fff;
}
.pd-main img { /* 主图 */
width: 100%;
height: 100%;
object-fit: cover; /* 卡片被缩略图撑高时自动铺满 */
display: block;
}
/* ---- 主图悬停放大：取景框跟随鼠标 + 右侧放大面板 ---- */
.pd-zoom-lens { /* 取景框（画在主图上，随鼠标移动） */
position: absolute;
display: none;
border: 1px solid var(--brand);
border-radius: 6px;
background: rgba(237, 38, 36, 0.16); /* 半透明红，和品牌色一致 */
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55) inset;
pointer-events: none; /* 不挡住鼠标事件 */
z-index: 3;
}
.pd-zoom { /* 放大面板（浮在主图右侧） */
position: absolute;
display: none;
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden; /* 放大图按圆角裁切 */
background-color: #fff;
background-repeat: no-repeat;
background-position: 0 0;
box-shadow: var(--shadow-card-hover);
pointer-events: none;
z-index: 20;
}
.pd-gallery.zooming .pd-zoom,
.pd-gallery.zooming .pd-zoom-lens { display: block; }
/* ---- 左栏：规格参数表 ---- */
.pd-specs { /* 规格表：两列字段（整块统一浅灰底） */
margin-top: 28px;
display: grid;
grid-template-columns: 1fr 1fr;
border-radius: 10px;
overflow: hidden;
background: #f7f7f7; /* 整块统一浅灰底（不再逐行交替） */
}
.pd-specs > div { /* 每个格子 */
display: flex;
justify-content: space-between;
gap: 12px;
padding: 13px 16px;
font-size: 13px;
border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* 仅用极淡细线分隔，透出统一底色 */
}
.pd-specs:empty { display: none; } /* 没有产品信息时不占一块灰底 */
.pd-specs.swap { animation: pdSpecsIn .24s ease; } /* 切换容量时轻微淡入 */
@keyframes pdSpecsIn {
from { opacity: .25; transform: translateY(4px); }
to { opacity: 1; transform: none; }
}
.pd-specs span { color: #888; } /* 字段名灰 */
.pd-specs b { color: #1d1b18; font-weight: 600; text-align: right; } /* 字段值深色右对齐 */
/* ---- 左栏：客户评价横幅 ---- */
.pd-review { /* 浅黄评价条 */
margin-top: 22px;
background: #fdf8e3;
border: 1px solid #f5ecbe;
border-radius: 10px;
padding: 12px 16px;
font-size: 13px;
color: #6b6449;
}
.pd-review .stars { color: #f5a623; letter-spacing: 2px; } /* 金色星星 */
.pd-review q { font-style: italic; } /* 引号内容斜体 */
/* ---- 右栏：购买信息 ---- */
.pd-title { /* 产品大标题 */
font-size: 30px;
font-weight: 700;
color: var(--ink); /* 深黑 */
line-height: 1.25;
margin-bottom: 16px;
}
.pd-desc { /* 描述段落 */
font-size: 14px;
color: var(--muted); /* 次要文字（深色模式自动变浅） */
line-height: 1.7;
margin-bottom: 18px;
}
.pd-banner { /* 浅绿购买提示条 */
background: #eef9ee;
border: 1px solid #d4eed4;
color: #3f8f4f;
border-radius: 8px;
padding: 10px 14px;
font-size: 13px;
margin-bottom: 26px;
}
.pd-label-row { /* 「Colors / Capacity」标题行 */
display: flex;
justify-content: space-between;
align-items: baseline;
margin: 22px 0 12px;
}
.pd-label-row h3 { font-size: 17px; font-weight: 700; color: #1d1b18; }
.pd-label-row small { font-size: 11px; color: #aaa; }
.pd-colors { /* 颜色网格：按可用宽度自动 3~4 列 */
display: grid;
grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
gap: 10px;
}
.pd-color { /* 单个颜色按钮（左图右名） */
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border: 1px solid #e3e3e3;
border-radius: 8px;
background: #fff;
font-size: 12.5px;
line-height: 1.3;
color: #444;
text-align: left;
cursor: pointer;
transition: border-color .15s, background .15s;
}
.pd-color:hover { border-color: #bbb; }
.pd-color.active { /* 选中态：红框淡红底 */
border-color: #ed2624;
background: #fdf1f0;
}
.pd-chip { /* 颜色 SKU 缩略图（放大） */
width: 46px;
height: 46px;
border-radius: 9px;
border: 1px solid rgba(0,0,0,.12);
flex: none;
}
.pd-chip-img { /* 颜色图片圆片：后台传了图就用图片代替色值 */
overflow: hidden;
padding: 0;
}
.pd-chip-img img { /* 图片铺满小圆片 */
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pd-caps { /* 容量列表 */
display: flex;
flex-direction: column;
gap: 10px;
}
.pd-cap { /* 单个容量行 */
display: flex;
justify-content: space-between;
align-items: center;
text-align: left;
padding: 13px 16px;
border: 1px solid #e3e3e3;
border-radius: 8px;
background: #fff;
cursor: pointer;
transition: border-color .15s, background .15s;
}
.pd-cap:hover { border-color: #bbb; }
.pd-cap.active { /* 选中态 */
border-color: #ed2624;
background: #fdf1f0;
}
.pd-cap-l b { display: block; font-size: 15px; color: #1d1b18; }
.pd-cap-l small { font-size: 12px; color: #999; }
.pd-cap-p { font-size: 15px; font-weight: 700; color: #ed2624; }
.pd-qty { /* 数量步进器 */
display: flex;
align-items: center;
gap: 10px;
margin-top: 6px;
}
.pd-qty button { /* +/- 按钮 */
width: 38px;
height: 38px;
border: 1px solid #ddd;
border-radius: 8px;
background: #fff;
font-size: 18px;
cursor: pointer;
color: #444;
}
.pd-qty button:hover { border-color: #999; }
.pd-qty input { /* 数量输入框 */
width: 90px;
height: 38px;
text-align: center;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 14px;
}
.pd-qty .unit { font-size: 13px; color: #888; }
.pd-total-row { /* 估价行 */
margin-top: 18px;
background: #f7f7f7;
border-radius: 8px;
padding: 14px 16px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
color: #555;
}
.pd-total-row b { font-size: 20px; color: #ed2624; } /* 总价红色大字 */
.pd-color-note { /* 颜色价差小注：Purple +$0.80 */
margin-left: 8px;
font-size: 12px;
color: #8a8a8a;
white-space: nowrap;
}
.pd-note { /* 估价说明小字 */
margin-top: 10px;
font-size: 12px;
color: #999;
}
.pd-add { /* Add to Cart 大红按钮（与全站 CTA 一致，对比度达标） */
margin-top: 18px;
width: 100%;
height: 50px;
border: none;
border-radius: 10px;
background: var(--brand-cta);
color: #fff;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background .2s;
}
.pd-add:hover { background: var(--brand-cta-hover); }
.pd-tip { /* 加购成功提示条 */
display: none;
margin-top: 12px;
font-size: 13px;
color: #3f8f4f;
background: #eef9ee;
border-radius: 8px;
padding: 10px 14px;
}
.pd-tip a { color: #2f7f3f; font-weight: 600; text-decoration: underline; }
/* ---- 详情页响应式 ---- */
@media (max-width: 1024px) {
.pd-wrap { grid-template-columns: 1fr; gap: 32px; } /* 窄屏改单列 */
.pd-title { font-size: 24px; }
.pd-zoom, .pd-zoom-lens { display: none !important; } /* 单列布局无处放放大面板，直接关闭 */
}
@media (max-width: 640px) {
.pd-wrap { padding-top: 110px; } /* 手机端导航更矮，顶部留白同步收紧 */
.pd-gallery { gap: 10px; padding: 12px; } /* 手机上卡片内边距收紧 */
.pd-colors { grid-template-columns: repeat(2, 1fr); } /* 手机颜色 2 列 */
.pd-specs { grid-template-columns: 1fr; } /* 规格表单列（底色仍统一） */
}
/* ===== N. 亮色/深色模式切换 ===== */
/* ---- 深色模式（html.dark，由 JS 依据手动选择或系统偏好切换） ---- */
html.dark { /* 覆盖设计令牌：正文变浅、线条变暗 */
color-scheme: dark;
--ink: #f2f2f2; /* 正文浅暖白 */
--muted: #9e9e9e; /* 次级文字 */
--line: #262626; /* 分隔线 */
--shadow-card: 0 10px 30px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
--shadow-card-hover: 0 16px 36px rgba(0, 0, 0, 0.55), 0 3px 8px rgba(0, 0, 0, 0.35);
}
html.dark body { background: #0d0d0d; } /* 页面大背景：暖黑 */
/* 页面级大背景统一暖黑 */
html.dark .explore-section,
html.dark .products-section,
html.dark .content-section,
html.dark .content-section.alt,
html.dark .mod-section,
html.dark .pd-wrap { background: #0d0d0d; }
/* 玻璃悬浮卡 → 暖黑玻璃（材质逻辑与亮色一致） */
html.dark .g-card,
html.dark .product-card,
html.dark .fact-card,
html.dark .feature-card,
html.dark .contact-card,
html.dark .inquiry-form,
html.dark .modal-content {
background: linear-gradient(165deg, rgba(40, 40, 40, 0.85), rgba(30, 30, 30, 0.7));
border-color: rgba(255, 255, 255, 0.09);
}
/* 表单控件 */
html.dark .form-group input,
html.dark .form-group textarea {
background: rgba(255, 255, 255, 0.06);
border-color: #333333;
color: var(--ink);
}
/* 组件细节翻色 */
html.dark .card-overlay { background: rgba(22, 20, 18, 0.82); } /* 卡片遮罩 */
html.dark .card-overlay h3 { color: var(--ink); }
html.dark .card-overlay p { color: var(--muted); }
html.dark .add-cart,
html.dark .card-view { background: transparent; border-color: rgba(255, 255, 255, 0.66); color: #f2f2f2; } /* 暗色：透明底 + 浅描边 */
html.dark .add-cart:hover,
html.dark .card-view:hover { background: #f2f2f2; border-color: #f2f2f2; color: #0f1b2b; }
html.dark .case-brand { background: rgba(255, 255, 255, 0.06); } /* 案例品牌位 */
html.dark .case-img { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.4); }
html.dark .fac-media { background-color: #161616; } /* 工厂图占位 */
html.dark .tst-text { color: #d6d6d6; } /* 评价正文 */
html.dark .tst-arrows .arrow-btn { background: #1d1d1d; border-color: #333333; color: var(--ink); }
html.dark .arrow-btn { border-color: #333333; } /* 其余圆形箭头：深色下描边可见，文字色由 --ink 自动变浅 */
html.dark .sp-marquee { border-color: var(--line); }
/* 产品详情页 */
html.dark .pd-thumb { border-color: #333333; }
html.dark .pd-gallery { background: #141414; border-color: #262626; } /* 卡片衬底跟随暗色 */
html.dark .pd-main { background: #1a1a1a; }
html.dark .pd-main img { background: #1a1a1a; }
html.dark .pd-zoom { background-color: #1a1a1a; border-color: #262626; } /* 放大面板跟随暗色 */
html.dark .pd-specs { background: #1a1a1a; } /* 暗色：整块统一深灰底 */
html.dark .pd-specs > div { border-color: rgba(255, 255, 255, 0.07); }
html.dark .pd-specs span { color: #9a9a9a; }
html.dark .pd-specs b { color: var(--ink); }
html.dark .pd-color,
html.dark .pd-cap,
html.dark .pd-qty button { background: #1d1d1d; border-color: #333333; color: var(--ink); }
html.dark .pd-chip { border-color: rgba(255, 255, 255, 0.16); } /* 暗色下色块/图片描边仍可见 */
html.dark .pd-cap.active { background: rgba(237, 38, 36, 0.14); }
html.dark .pd-cap-l b { color: var(--ink); }
html.dark .pd-cap-l small { color: #9a9a9a; }
/* 切换胶囊在深色下的外观 */
/* ---- 深色模式：底部询盘区与页脚（中性黑） ---- */
html.dark .cta-section { background: #0a0a0a; }
html.dark .site-footer { background: #0a0a0a; color: rgba(255, 255, 255, 0.72); }
html.dark .foot-logo { color: #fff; }
html.dark .foot-logo span { color: var(--brand); }
html.dark .foot-col h4 { color: #fff; }
html.dark .foot-col a, html.dark .foot-col span { color: rgba(255, 255, 255, 0.66); }
html.dark .foot-col a:hover { color: #fff; }
html.dark .foot-bottom { border-top-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.5); }
html.dark .foot-bottom a { color: rgba(255, 255, 255, 0.5); }
html.dark .foot-bottom a:hover { color: #fff; }