/**
* SNNP V8 — v8-main.css
* 所有前端CSS唯一来源
* 结构：
* §0 设计令牌（:root CSS变量）
* §1 Reset + 全局基础
* §2 公共组件（按钮/容器/卡片/面包屑/分页/无障碍）
* §3 公共动画
* §4 Header（模块01） ← R05填充
* §5 Footer（模块02） ← R06填充
* §6 Plan A（模块04） ← R07填充
* §7 Plan B（模块05） ← R08填充
* §8 Modal（模块06） ← R09填充
* §9 Chatbox（模块03） ← R10填充
* §10 ROI / FAQ / Hotmap ← R13填充
* §11 Comparison（模块13） ← R14填充
* §12 Social Proof（模块17） ← R15填充
* §13 H1 隔离（模块15） ← R15填充
* §14 Trust Wall / Topic Hub ← R15填充
* §15 文章/归档/分类模板 ← R16填充
*/
/* ═══════════════════════════════════════════════════════════════
§0 设计令牌
═══════════════════════════════════════════════════════════════ */
:root {
/* 品牌色 — Morandi 色系 */
--v8-primary: #7a8fa6;
--v8-accent: #9b8fa0;
/* R23 P0-10: CTA 对比度修复 — 旧 #6b8f71 + 白字 = 3.4:1 (低于 WCAG AA 4.5:1)
新 #4a6b53 + 白字 = 5.8:1 ✅ AA 合规，照顾欧美 45+ 采购决策者视力 */
--v8-cta: #4a6b53;
--v8-cta-hover: #3a5441;
/* 背景 / 表面 */
--v8-bg: #f8f7f5;
--v8-surface: #ffffff;
--v8-dark: #1c2433;
/* 文字 — R20.5: 同色相 224° 灰阶系统（Apple HIG / MD3 哲学）
text → muted → light 三档明度跨度 L21 → L53 → L66，与 Body Text 形成清晰退后感
与 bg/border 色温对齐，达到 Hermès / Loro Piana 视觉基线 */
--v8-text: #2c3240;
--v8-muted: #7a8295; /* R20.5: 与 Primary 同色相 224°，明度跨度更专业 */
--v8-light: #9ba5b0; /* R20.5: 与 muted 同 224° 色相系列，三档分层 */
/* 边框 / 链接 — R20.5: link 折中你的色相 213° + R20 的 AAA 对比度
#456b95 对比度 6.5:1（远超 WCAG AA 4.5:1，照顾 45+ 决策者老花眼） */
--v8-border: #e6e4e0;
--v8-placeholder:#b8b8b0;
--v8-link: #456b95;
--v8-link-hover: #2a4f76;
/* 形态 */
--v8-radius: 6px;
--v8-radius-lg: 12px;
/* 阴影 — R20: 多层弥散，模拟精密制造业灯光逻辑（Stripe / Linear 同款）
双层叠加：外圈极淡环境光 + 近圈微 tint 落地阴影，alpha 全部降至 .04-.07 */
--v8-shadow-sm: 0 1px 2px rgba(28,36,51,.04), 0 1px 3px rgba(28,36,51,.06);
--v8-shadow-md: 0 2px 4px rgba(28,36,51,.04), 0 4px 12px rgba(28,36,51,.06);
--v8-shadow-lg: 0 4px 8px rgba(28,36,51,.04), 0 16px 36px rgba(28,36,51,.07);
/* 过渡 */
--v8-transition: .2s ease;
/* 字体 — R20: 全平台顶级回退栈
DM Sans 加载失败时：Mac→SF, Win→Segoe UI, Android→Roboto, 旧 Mac→Helvetica Neue
额外注入 emoji 字体确保 Apple/Win 表情符号渲染一致 */
--v8-font: "DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
/* Z-index 层级（锁定） */
--v8-z-topbar: 1000;
--v8-z-header: 1100;
--v8-z-megamenu: 1200;
--v8-z-chatbox: 1300;
--v8-z-planb: 1400;
--v8-z-modal: 1500;
--v8-z-plana: 1600;
/* 按钮尺寸（可被后台覆盖） */
--v8-btn-min-h: 44px;
/* Plan B 颜色（后台动态注入覆盖） */
--v8-planb-left: #1c2433;
/* R23 P0-10: 与 --v8-cta 同步对比度提升 */
--v8-planb-right: #4a6b53;
/* Hero 渐变 — R20.5: Navy → Steel
色相一致 220°，仅明度变化（L15 → L25），制造金属切面感
业务契合：传递重工业 / 集装箱港口 / 货船的潜意识联想 */
--v8-hero-grad-start: #1c2433;
--v8-hero-grad-end: #2c3f55;
--v8-hero-gradient: linear-gradient(135deg, #1c2433 0%, #2c3f55 100%);
/* WhatsApp 品牌色 — R20.5: 官方 Brand Exact 独立 token
消除全站 rgba(37,211,102,...) 散落硬编码，便于全局调用与未来品牌升级 */
--v8-wa-brand: #25d366;
--v8-wa-brand-hover: #1ebe5a;
/* Typography Scale — R25 Stage10 P2-04: 8 档字号 token 体系
替换全站 51 个 hardcode font-size 值（共 ~276 处），±2px 容差合并
消费者：所有 .v8-* 组件 / template-*.php / inc/v8-*.php
变更影响：移动端字体阶梯规范化（32/24/18/16/14/12 = 2xl/xl/md/base/sm/xs） */
--v8-fs-xs: 0.6875rem; /* 11px — captions / 标签 / micro labels */
--v8-fs-sm: 0.8125rem; /* 13px — small body / help text / footer copy */
--v8-fs-base: 0.9375rem; /* 15px — body / 段落 / form input */
--v8-fs-md: 1.0625rem; /* 17px — card titles / emphasis / section subhead */
--v8-fs-lg: 1.25rem; /* 20px — section headings / pricing / stats */
--v8-fs-xl: 1.5rem; /* 24px — page titles / module headings */
--v8-fs-2xl: 2rem; /* 32px — hero headings / key CTAs */
--v8-fs-3xl: 2.5rem; /* 40px — landing hero / 404 显示字 */
}
/* ═══════════════════════════════════════════════════════════════
§1 Reset + 全局基础
═══════════════════════════════════════════════════════════════ */
/* Box-sizing 全局 */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* 根基 */
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
font-family: var(--v8-font);
font-size: var(--v8-fs-base);
line-height: 1.65;
color: var(--v8-text);
background: var(--v8-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* V8引擎激活时：为固定 header 留空间
注：完整规则（含 admin-bar + safe-area-inset-top）见后文 §"Body offset"
此处保留语义入口，规则定义统一在 §Body offset，避免重复覆盖 */
/* 图片 / 媒体 — R20: 默认 aspect-ratio 防 CLS（仅作用于未显式声明尺寸的图）*/
img,
video,
svg {
display: block;
max-width: 100%;
height: auto;
}
/* R20: 未显式声明尺寸的图片给一个极淡背景色作为加载时的视觉占位
不强制 aspect-ratio（attr() typed parsing 兼容率仅 62%，回退会破坏布局）
真正的 CLS 防护应在 HTML 层通过 ![]()
或 loading="lazy" 实现 */
img:not([width]):not([height]):not([style*="aspect-ratio"]):not([style*="height"]) {
background-color: var(--v8-bg);
}
/* 链接 — R20: 焦点环带 transform 微动画，键盘 Tab 巡视时光标"在移动"的物理反馈 */
a {
color: var(--v8-link);
text-decoration: none;
transition: color var(--v8-transition);
}
a:hover {
color: var(--v8-link-hover);
}
a:focus-visible {
outline: 2px solid var(--v8-primary);
outline-offset: 3px;
border-radius: 3px;
transition: outline-offset .15s ease, outline-color .15s ease;
}
a:focus-visible:active {
outline-offset: 1px;
}
/* 标题 */
h1, h2, h3, h4, h5, h6 {
margin: 0 0 .6em;
font-weight: 700;
line-height: 1.25;
color: var(--v8-text);
}
h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.375rem, 3vw, 1.875rem); }
h3 { font-size: clamp(1.125rem, 2.5vw, 1.375rem); }
h4 { font-size: var(--v8-fs-md); }
h5 { font-size: var(--v8-fs-base); }
h6 { font-size: var(--v8-fs-sm); }
/* 段落 / 列表 */
p {
margin: 0 0 1em;
}
ul, ol {
margin: 0 0 1em;
padding-left: 1.5em;
}
li {
margin-bottom: .25em;
}
/* 表单元素基础 */
input,
textarea,
select,
button {
font-family: var(--v8-font);
font-size: inherit;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="password"],
textarea,
select {
width: 100%;
padding: 10px 14px;
border: 1.5px solid var(--v8-border);
border-radius: var(--v8-radius);
background: var(--v8-surface);
color: var(--v8-text);
transition: border-color var(--v8-transition), box-shadow var(--v8-transition);
appearance: none;
-webkit-appearance: none;
}
input:focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--v8-primary);
box-shadow: 0 0 0 3px rgba(122,143,166,.18);
}
/* R20: 全局 placeholder 规则 — 统一 Chrome/Safari/Firefox 显示色到 Morandi placeholder 灰
消除浏览器默认色不一致（Chrome 偏黑 / Safari 偏灰 / Firefox 半透明）*/
input::placeholder,
textarea::placeholder {
color: var(--v8-placeholder);
opacity: 1; /* Firefox 默认 .54 → 强制实色 */
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: var(--v8-placeholder);
}
textarea {
resize: vertical;
min-height: 80px;
}
/* 表格 */
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 10px 12px;
border-bottom: 1px solid var(--v8-border);
text-align: left;
font-size: var(--v8-fs-sm);
}
th {
font-weight: 700;
background: var(--v8-bg);
color: var(--v8-muted);
font-size: var(--v8-fs-xs);
text-transform: uppercase;
letter-spacing: .05em;
}
/* 水平线 */
hr {
border: none;
border-top: 1px solid var(--v8-border);
margin: 1.5em 0;
}
/* 代码 */
code, pre {
font-family: "JetBrains Mono","Fira Code",monospace;
font-size: .875em;
background: rgba(122,143,166,.1);
border-radius: 4px;
}
code {
padding: 2px 6px;
}
pre {
padding: 16px;
overflow-x: auto;
}
/* ═══════════════════════════════════════════════════════════════
§2 公共组件
═══════════════════════════════════════════════════════════════ */
/* ── 容器 — R20: 分级 max-width 4K 屏自适应 ────────────────
- .v8-container（默认） → 1200px 阅读型/标准卡片网格
- .v8-container-wide → 1440px 扩展卡片网格 / 数据表格
- .v8-container-full → 1680px Hero / Footer 满铺
- .v8-container-prose → 720px 纯阅读容器（行长 ≤75 字符）
4K (3840px) / 5K (5120px) 显示器下不再两侧大量留白 */
.v8-container {
max-width: 1200px;
margin-inline: auto;
padding-inline: clamp(16px, 4vw, 40px);
}
.v8-container-wide {
max-width: 1440px;
margin-inline: auto;
padding-inline: clamp(16px, 4vw, 48px);
}
.v8-container-full {
max-width: 1680px;
margin-inline: auto;
padding-inline: clamp(16px, 4vw, 56px);
}
.v8-container-prose {
max-width: 720px;
margin-inline: auto;
padding-inline: clamp(16px, 4vw, 32px);
}
/* ── 主内容区 ── */
.v8-main {
min-height: 60vh;
}
/* ── 按钮 ── */
.v8-btn,
.v8-btn-primary,
.v8-btn-outline,
.v8-btn-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: var(--v8-btn-min-h);
padding: 10px 24px;
border: none;
border-radius: var(--v8-radius);
font-weight: 700;
font-size: var(--v8-fs-sm);
letter-spacing: .02em;
cursor: pointer;
text-decoration: none;
transition: background var(--v8-transition),
color var(--v8-transition),
transform var(--v8-transition),
box-shadow var(--v8-transition);
white-space: nowrap;
user-select: none;
/* R20: position:relative 为 Primary CTA ::after 微反光层提供锚点 */
position: relative;
overflow: hidden;
}
.v8-btn-primary {
background: var(--v8-cta);
color: #fff;
}
.v8-btn-primary:hover {
background: var(--v8-cta-hover);
color: #fff;
transform: translateY(-1px);
box-shadow: var(--v8-shadow-sm);
}
/* R20 FIX-11: Primary CTA 顶部 1px 微反光层 — 精度签名（Stripe/Vercel/Figma 同款）
人眼无法明确指出，但潜意识感知按钮"有材质"，工业设计中"精密制造"的视觉契约
仅作用于 .v8-btn-primary，保持视觉权重克制 */
.v8-btn-primary::after {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(255,255,255,.25) 50%,
transparent 100%);
pointer-events: none;
}
.v8-btn-outline {
background: transparent;
color: var(--v8-primary);
border: 1.5px solid var(--v8-primary);
}
.v8-btn-outline:hover {
background: var(--v8-primary);
color: #fff;
}
.v8-btn-ghost {
background: transparent;
color: var(--v8-muted);
}
.v8-btn-ghost:hover {
background: var(--v8-border);
color: var(--v8-text);
}
/* R20 FIX-9: 物理震荡反馈 — 点击瞬间 translateY(1px) + scale(.98)
.98 缩放不破坏文字可读性，制造"段落感"而非"缩放感"，模拟实体按键按压
关键的转化漏斗信号：让客户确信"我点了"，避免重复提交 */
.v8-btn:active,
.v8-btn-primary:active,
.v8-btn-outline:active,
.v8-btn-ghost:active {
transform: translateY(1px) scale(.98);
box-shadow: none;
transition: transform .08s ease, box-shadow .08s ease;
}
.v8-btn:disabled,
.v8-btn-primary:disabled {
opacity: .55;
cursor: not-allowed;
transform: none;
}
.v8-btn-primary:disabled::after {
display: none; /* R20: 禁用态隐藏微反光，强化"不可点"信号 */
}
/* ── 卡片 ── */
.v8-card {
background: var(--v8-surface);
border: 1px solid var(--v8-border);
border-radius: var(--v8-radius-lg);
box-shadow: var(--v8-shadow-sm);
overflow: hidden;
}
/* ── 文章卡片（archive / search / 相关推荐）── */
.v8-post-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 32px;
}
.v8-post-card {
background: var(--v8-surface);
border: 1px solid var(--v8-border);
border-radius: var(--v8-radius-lg);
overflow: hidden;
transition: box-shadow var(--v8-transition), transform var(--v8-transition);
}
.v8-post-card:hover {
box-shadow: var(--v8-shadow-md);
transform: translateY(-2px);
}
.v8-card-thumb img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
}
.v8-card-body {
padding: 20px;
}
.v8-card-title {
font-size: var(--v8-fs-base);
font-weight: 700;
margin-bottom: 8px;
}
.v8-card-title a {
color: var(--v8-text);
}
.v8-card-title a:hover {
color: var(--v8-primary);
}
.v8-card-excerpt {
font-size: var(--v8-fs-sm);
color: var(--v8-muted);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ── 面包屑 ── */
.v8-breadcrumbs {
font-size: var(--v8-fs-sm);
color: var(--v8-muted);
margin-bottom: 24px;
}
.v8-breadcrumbs ol {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
}
.v8-breadcrumbs li + li::before {
content: "›";
margin-right: 4px;
color: var(--v8-light);
}
.v8-breadcrumbs a {
color: var(--v8-muted);
}
.v8-breadcrumbs a:hover {
color: var(--v8-primary);
}
/* ── 分页 ── */
.v8-pagination,
.nav-links {
display: flex;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 48px;
padding-bottom: 48px;
}
.v8-pagination a,
.v8-pagination span,
.nav-links a,
.nav-links span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 38px;
padding: 0 12px;
border: 1px solid var(--v8-border);
border-radius: var(--v8-radius);
font-size: var(--v8-fs-sm);
font-weight: 600;
color: var(--v8-text);
transition: background var(--v8-transition), border-color var(--v8-transition);
}
.v8-pagination a:hover,
.nav-links a:hover {
background: var(--v8-primary);
border-color: var(--v8-primary);
color: #fff;
}
.v8-pagination .current,
.nav-links .current {
background: var(--v8-primary);
border-color: var(--v8-primary);
color: #fff;
}
/* ── Widget ── */
.v8-widget {
background: var(--v8-surface);
border: 1px solid var(--v8-border);
border-radius: var(--v8-radius-lg);
padding: 20px;
margin-bottom: 24px;
}
.v8-widget-title {
font-size: var(--v8-fs-sm);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--v8-muted);
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid var(--v8-border);
}
/* ── 辅助功能 — Skip link ── */
.v8-skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--v8-dark);
color: #fff;
padding: 8px 16px;
border-radius: 0 0 6px 0;
font-size: var(--v8-fs-sm);
font-weight: 600;
z-index: 9999;
transition: top .2s;
}
.v8-skip-link:focus {
top: 0;
}
/* ── 屏幕阅读器专用 ── */
.v8-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* ── Badge / Tag ── */
.v8-badge {
display: inline-flex;
align-items: center;
padding: 2px 10px;
border-radius: 20px;
font-size: var(--v8-fs-xs);
font-weight: 700;
letter-spacing: .04em;
background: rgba(122,143,166,.12);
color: var(--v8-primary);
}
.v8-badge-cta {
background: rgba(107,143,113,.12);
color: var(--v8-cta);
}
/* ── 搜索结果 ── */
.v8-search-title {
font-size: var(--v8-fs-md);
margin-bottom: 24px;
color: var(--v8-muted);
font-weight: 400;
}
.v8-search-title strong {
color: var(--v8-text);
font-weight: 700;
}
.v8-search-result {
padding: 20px 0;
border-bottom: 1px solid var(--v8-border);
}
.v8-search-result h2 {
font-size: var(--v8-fs-md);
margin-bottom: 8px;
}
.v8-no-posts {
grid-column: 1 / -1;
color: var(--v8-muted);
padding: 48px 20px;
text-align: center;
}
/* ── 归档 header ── */
.v8-archive-header,
.v8-tax-header {
margin-bottom: 32px;
padding-bottom: 24px;
border-bottom: 1px solid var(--v8-border);
}
.v8-archive-desc,
.v8-tax-desc {
color: var(--v8-muted);
font-size: var(--v8-fs-base);
margin-top: 8px;
}
/* ── Hero Section — R20.6: Navy → Steel 工业渐变
按需使用：模板层添加 .v8-hero-section 类即可启用，零侵入现有 archive/tax 风格
业务契合：传递重工业 / 集装箱港口 / 货船的潜意识联想（Sourcing Partner 视觉契约） */
.v8-hero-section {
background: var(--v8-hero-gradient);
color: #fff;
padding: clamp(48px, 8vw, 96px) clamp(20px, 5vw, 48px);
border-radius: var(--v8-radius-lg);
position: relative;
overflow: hidden;
}
.v8-hero-section h1,
.v8-hero-section h2,
.v8-hero-section .v8-hero-title {
color: #fff;
margin-bottom: 16px;
}
.v8-hero-section .v8-hero-subtitle,
.v8-hero-section .v8-hero-desc {
color: rgba(255,255,255,.85);
font-size: var(--v8-fs-md);
max-width: 640px;
line-height: 1.6;
}
.v8-hero-section.v8-hero-fullbleed {
border-radius: 0;
margin-inline: calc(50% - 50vw);
padding-inline: max(20px, calc((100vw - 1200px) / 2));
}
/* ── 单篇文章 ── */
.v8-article {
max-width: 800px;
margin-inline: auto;
}
.v8-article-header {
margin-bottom: 32px;
padding-bottom: 24px;
border-bottom: 1px solid var(--v8-border);
}
.v8-article-title {
font-size: clamp(1.5rem, 4vw, 2.25rem);
line-height: 1.25;
margin-bottom: 12px;
}
.v8-article-content {
font-size: var(--v8-fs-base);
line-height: 1.8;
}
.v8-article-content h2 {
margin-top: 2em;
margin-bottom: .6em;
font-size: var(--v8-fs-lg);
}
.v8-article-content h3 {
margin-top: 2em;
margin-bottom: .6em;
font-size: var(--v8-fs-md);
}
.v8-article-content p {
margin-bottom: 1.2em;
}
.v8-article-content img {
max-width: 100%;
border-radius: var(--v8-radius);
margin: 1.5em 0;
}
.v8-article-content blockquote {
border-left: 3px solid var(--v8-primary);
margin: 1.5em 0;
padding: 12px 20px;
background: rgba(122,143,166,.06);
border-radius: 0 var(--v8-radius) var(--v8-radius) 0;
color: var(--v8-muted);
font-style: italic;
}
/* ─── 案例 / Landing ── */
.v8-case-header,
.v8-page-header {
margin-bottom: 32px;
padding-bottom: 24px;
border-bottom: 1px solid var(--v8-border);
}
/* ═══════════════════════════════════════════════════════════════
§3 公共动画 keyframes
═══════════════════════════════════════════════════════════════ */
/* 淡入向上 */
@keyframes v8FadeUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.v8-fade-up {
animation: v8FadeUp .4s ease both;
}
/* Skeleton shimmer（TopicHub加载占位） */
@keyframes v8Shimmer {
0% { background-position: -600px 0; }
100% { background-position: 600px 0; }
}
.v8-skeleton {
background: linear-gradient(90deg, #ece9e4 25%, #f5f3f0 50%, #ece9e4 75%);
background-size: 600px 100%;
animation: v8Shimmer 1.6s infinite linear;
border-radius: 4px;
}
/* Trust Wall 无限滚动 */
@keyframes v8TrustScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ═══════════════════════════════════════════════════════════════
§4 Header（模块01）
═══════════════════════════════════════════════════════════════ */
/* ── Body offset ──
R24 P1-13: iOS Dynamic Island / 刘海屏适配
- 普通 iOS Safari：env(safe-area-inset-top)=0，padding-top 保持 60/72px 不变
- PWA / standalone 模式：env(safe-area-inset-top) 自动为 status bar / Dynamic Island 高度
- WP admin-bar 与 safe-area 通常不共存（admin-bar 仅 PC/平板登录态），
但保险起见用 calc 叠加，避免极端场景重叠 */
body.v8-engine-active {
padding-top: calc(72px + env(safe-area-inset-top, 0px));
}
body.v8-engine-active.admin-bar {
padding-top: calc(72px + 32px + env(safe-area-inset-top, 0px));
}
@media (max-width: 1024px) {
body.v8-engine-active {
padding-top: calc(60px + env(safe-area-inset-top, 0px));
}
body.v8-engine-active.admin-bar {
padding-top: calc(60px + 46px + env(safe-area-inset-top, 0px));
}
}
/* ── Header shell ── */
.v8-header {
position: fixed;
top: 0;
left: 0;
right: 0;
/* R24 P1-13: iOS Dynamic Island / 刘海屏适配
- height 改为 min-height + padding-top 双层补偿
- PWA standalone 模式下，env(safe-area-inset-top) 自动为状态栏/Dynamic Island 高度
- 普通浏览器 safe-area-inset-top=0 → 行为与原 height:72px 完全一致
- logo / nav / 按钮居中在视觉 header 区（safe-area 之下），不被 Dynamic Island 遮挡 */
min-height: 72px;
padding-top: env(safe-area-inset-top, 0px);
z-index: var(--v8-z-header);
background: rgba(255,255,255,.96);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid transparent;
transition: min-height var(--v8-transition), box-shadow var(--v8-transition), transform var(--v8-transition), border-color var(--v8-transition);
}
.v8-header.header-scrolled {
min-height: 60px;
box-shadow: var(--v8-shadow-sm);
border-bottom-color: var(--v8-border);
}
.v8-header.v8-hidden {
/* R24 P1-13: 隐藏时位移量需包含 safe-area 高度，否则 header 顶部 padding 仍露出 */
transform: translateY(calc(-100% - env(safe-area-inset-top, 0px)));
}
/* ────────────────────────────────────────────
R24 第三阶段 P1-02b：Topbar 永久遮挡修复（让位方案）
- 启用 topbar 时 PHP 端给 加 .v8-has-topbar
- header.top 下移 36px，body padding-top 再 +36px
- z-index 不动：保持 mega menu (1200) > header (1100) > topbar (1000)
- admin-bar 组合：桌面 admin-bar=32px、≤1024px admin-bar=46px
- safe-area 叠加用 calc(env(...)) 与既有 R24 P1-13 规则一致
──────────────────────────────────────────── */
body.v8-engine-active.v8-has-topbar {
padding-top: calc(72px + 36px + env(safe-area-inset-top, 0px));
}
body.v8-engine-active.v8-has-topbar.admin-bar {
padding-top: calc(72px + 36px + 32px + env(safe-area-inset-top, 0px));
}
body.v8-has-topbar .v8-header {
top: 36px;
}
body.v8-has-topbar.admin-bar .v8-header {
/* 桌面 admin-bar 32px + topbar 36px = 68px */
top: 68px;
}
@media (max-width: 1024px) {
body.v8-engine-active.v8-has-topbar {
padding-top: calc(60px + 36px + env(safe-area-inset-top, 0px));
}
body.v8-engine-active.v8-has-topbar.admin-bar {
padding-top: calc(60px + 36px + 46px + env(safe-area-inset-top, 0px));
}
body.v8-has-topbar.admin-bar .v8-header {
/* ≤1024px admin-bar 46px + topbar 36px = 82px */
top: 82px;
}
}
.v8-header-inner {
max-width: 1200px;
margin-inline: auto;
padding-inline: clamp(16px, 4vw, 40px);
height: 100%;
display: flex;
align-items: center;
gap: 24px;
}
/* ── Logo ── */
.v8-logo {
display: flex;
align-items: center;
flex-shrink: 0;
text-decoration: none;
}
.v8-logo img {
height: 38px;
width: auto;
display: block;
}
.v8-logo svg {
height: 38px;
width: auto;
}
.v8-logo-text {
font-size: var(--v8-fs-lg);
font-weight: 700;
color: var(--v8-dark);
letter-spacing: -.02em;
}
/* ── Primary Nav ── */
.v8-nav {
flex: 1;
display: flex;
align-items: center;
}
.v8-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 0;
align-items: center;
height: 100%;
}
.v8-menu > li {
position: relative;
flex-shrink: 0;
height: 100%;
display: flex;
align-items: center;
}
/* Bridge 伪元素：消除 hover 断层 */
.v8-menu > li.v8-has-mega::before,
.v8-menu > li.v8-has-dropdown::before {
content: '';
position: absolute;
bottom: -12px;
left: 0;
right: 0;
height: 12px;
}
/* ── Nav links ── */
.v8-nav-link {
display: flex;
align-items: center;
gap: 4px;
padding: 8px 14px;
font-size: var(--v8-fs-sm);
font-weight: 600;
color: var(--v8-text);
text-decoration: none;
white-space: nowrap;
transition: color var(--v8-transition);
}
.v8-nav-link:hover {
color: var(--v8-primary);
}
.v8-menu > li.v8-active > .v8-nav-link {
color: var(--v8-primary);
}
.v8-nav-arrow {
transition: transform var(--v8-transition);
flex-shrink: 0;
}
.v8-menu > li:hover > a > .v8-nav-arrow,
.v8-menu > li.v8-menu-open > a > .v8-nav-arrow {
transform: rotate(180deg);
}
/* ── CTA button ── */
.v8-nav-cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 20px;
background: var(--v8-cta);
color: #fff;
font-size: var(--v8-fs-sm);
font-weight: 600;
border-radius: var(--v8-radius);
text-decoration: none;
min-height: 44px;
white-space: nowrap;
transition: background var(--v8-transition), transform var(--v8-transition);
flex-shrink: 0;
}
.v8-nav-cta:hover {
background: var(--v8-cta-hover);
color: #fff;
}
/* ── WA icon link ── */
.v8-header-wa {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: var(--v8-primary);
border-radius: 50%;
transition: color var(--v8-transition), background var(--v8-transition);
flex-shrink: 0;
}
.v8-header-wa:hover {
color: var(--v8-wa-brand);
background: rgba(37,211,102,.08);
}
/* ── Header actions ── */
.v8-header-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* ── Mega Panel ── */
.v8-mega-panel,
.v8-dropdown-panel {
position: absolute;
top: calc(100% + 12px);
left: 0;
background: var(--v8-surface);
border: 1px solid var(--v8-border);
border-radius: var(--v8-radius-lg);
box-shadow: var(--v8-shadow-lg);
opacity: 0;
visibility: hidden;
clip-path: inset(0 0 100% 0 round 12px);
transition: opacity .2s ease, visibility .2s ease, clip-path .25s ease;
z-index: var(--v8-z-megamenu);
padding: 24px;
}
.v8-menu > li:hover > .v8-mega-panel,
.v8-menu > li.v8-menu-open > .v8-mega-panel,
.v8-menu > li:hover > .v8-dropdown-panel,
.v8-menu > li.v8-menu-open > .v8-dropdown-panel {
opacity: 1;
visibility: visible;
clip-path: inset(0 0 0% 0 round 12px);
}
/* 防止最后两个li的panel溢出视口右侧 */
.v8-menu > li:nth-last-child(-n+2) > .v8-mega-panel,
.v8-menu > li:nth-last-child(-n+2) > .v8-dropdown-panel {
left: auto;
right: 0;
}
/* Mega panel 宽度 */
.v8-mega-panel.v8-mp-3col { width: 680px; }
.v8-mega-panel.v8-mp-5col { width: 860px; }
.v8-mega-panel.v8-mp-dual { width: 580px; }
.v8-dropdown-panel { min-width: 220px; }
/* ── Mega inner layout ── */
.v8-mega-inner {
display: flex;
gap: 24px;
align-items: flex-start;
}
.v8-mega-links {
flex: 1;
min-width: 0;
}
.v8-mega-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
list-style: none;
margin: 0;
padding: 0;
}
.v8-mp-5col .v8-mega-list {
grid-template-columns: repeat(5, 1fr);
gap: 6px;
}
.v8-mega-list li {
position: relative;
}
.v8-mega-list .v8-nav-link {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 10px 12px;
border-radius: var(--v8-radius);
font-size: var(--v8-fs-sm);
line-height: 1.3;
gap: 2px;
transition: background var(--v8-transition), color var(--v8-transition);
}
.v8-mega-list .v8-nav-link:hover {
background: rgba(122,143,166,.08);
}
.v8-nav-desc {
display: block;
font-size: var(--v8-fs-xs);
font-weight: 400;
color: var(--v8-muted);
margin-top: 2px;
}
.v8-hot-tag {
display: inline-block;
font-size: var(--v8-fs-xs);
font-weight: 600;
background: rgba(107,143,113,.12);
color: var(--v8-cta);
border-radius: 20px;
padding: 2px 8px;
margin-top: 3px;
}
/* Dropdown (plain) */
.v8-sub-menu {
list-style: none;
margin: 0;
padding: 0;
}
.v8-sub-menu li + li {
border-top: 1px solid var(--v8-border);
}
.v8-sub-menu .v8-nav-link {
padding: 10px 8px;
font-weight: 500;
}
/* ── 3col right: Process card ── */
.v8-nav-process-card {
flex: 0 0 200px;
background: var(--v8-bg);
border-radius: 10px;
padding: 20px 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.v8-process-icon {
width: 48px;
height: 48px;
background: rgba(122,143,166,.1);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.v8-process-content {
display: flex;
flex-direction: column;
gap: 6px;
}
.v8-process-content strong {
font-size: var(--v8-fs-sm);
color: var(--v8-dark);
}
.v8-process-content p {
font-size: var(--v8-fs-sm);
color: var(--v8-muted);
margin: 0;
line-height: 1.4;
}
.v8-process-link {
font-size: var(--v8-fs-sm);
font-weight: 600;
color: var(--v8-primary);
text-decoration: none;
}
.v8-process-link:hover {
color: var(--v8-link-hover);
}
/* ── 5col right: Nav footer hook ── */
.v8-nav-footer-hook {
flex: 0 0 180px;
background: var(--v8-bg);
border-radius: 10px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
align-self: stretch;
justify-content: center;
}
.v8-nav-footer-hook p {
font-size: var(--v8-fs-sm);
color: var(--v8-muted);
margin: 0;
line-height: 1.4;
}
/* ── dual right: Case studies ── */
.v8-mega-right {
flex: 0 0 200px;
display: flex;
flex-direction: column;
gap: 10px;
}
.v8-mega-right-title {
font-size: var(--v8-fs-sm);
font-weight: 700;
color: var(--v8-muted);
text-transform: uppercase;
letter-spacing: .06em;
margin: 0 0 4px;
}
.v8-mega-case-link {
display: block;
text-decoration: none;
padding: 10px 12px;
background: var(--v8-bg);
border-radius: var(--v8-radius);
transition: background var(--v8-transition);
}
.v8-mega-case-link:hover {
background: rgba(122,143,166,.12);
}
.v8-mega-case-title {
font-size: var(--v8-fs-sm);
font-weight: 600;
color: var(--v8-text);
display: block;
}
/* ── Hamburger ── */
.v8-hamburger {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 40px;
height: 40px;
padding: 0;
background: none;
border: none;
cursor: pointer;
border-radius: var(--v8-radius);
transition: background var(--v8-transition);
}
.v8-hamburger:hover {
background: rgba(122,143,166,.1);
}
.v8-hamburger span {
display: block;
width: 22px;
height: 2px;
background: var(--v8-dark);
border-radius: 2px;
transition: transform .25s ease, opacity .2s ease;
transform-origin: center;
}
.v8-hamburger.v8-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.v8-hamburger.v8-open span:nth-child(2) { opacity: 0; }
.v8-hamburger.v8-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ── Mobile menu ── */
.v8-mobile-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--v8-surface);
border-top: 1px solid var(--v8-border);
box-shadow: var(--v8-shadow-md);
/* R24 P1-13: 减去 header 实际高度（60px 视觉高度 + safe-area-inset-top 刘海让位）
避免 PWA standalone 模式下菜单底部被挤出视口 */
max-height: calc(100vh - 60px - env(safe-area-inset-top, 0px));
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.v8-mobile-menu.v8-open {
display: block;
}
.v8-mobile-nav {
list-style: none;
margin: 0;
padding: 8px 0 16px;
}
.v8-mobile-nav li {
border-bottom: 1px solid var(--v8-border);
}
.v8-mobile-nav li:last-child {
border-bottom: none;
}
.v8-mobile-nav .v8-nav-link {
padding: 14px 20px;
font-size: var(--v8-fs-base);
}
.v8-mobile-nav ul.v8-sub-list {
list-style: none;
margin: 0;
padding: 0 0 8px 20px;
}
.v8-mobile-nav ul.v8-sub-list .v8-nav-link {
padding: 10px 20px;
font-size: var(--v8-fs-sm);
font-weight: 500;
color: var(--v8-muted);
}
/* ── Responsive ── */
@media (max-width: 1024px) {
.v8-header {
/* R24 P1-13: 移动端 header 同样用 min-height（safe-area-inset-top 已在主规则继承） */
min-height: 60px;
}
.v8-nav {
display: none;
}
.v8-hamburger {
display: flex;
}
/* R19 P3: 默认仍隐藏 .v8-header-wa,但开启 mobile-on class 后恢复显示 */
.v8-header-wa {
display: none;
}
.v8-header-wa.v8-header-wa-mobile-on {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
min-height: var(--v8-btn-min-h, 44px);
min-width: var(--v8-btn-min-h, 44px);
border-radius: 50%;
background: var(--v8-wa-brand, #25d366);
color: #fff;
margin-right: 8px;
transition: filter var(--v8-transition, .2s);
}
.v8-header-wa.v8-header-wa-mobile-on:hover,
.v8-header-wa.v8-header-wa-mobile-on:active {
background: var(--v8-wa-brand-hover, #1ebe5a);
color: #fff;
}
.v8-header-wa.v8-header-wa-mobile-on svg {
width: 18px;
height: 18px;
}
}
@media (max-width: 640px) {
.v8-nav-cta {
font-size: var(--v8-fs-sm);
padding: 8px 14px;
}
}
/* ═══════════════════════════════════════════════════════════════
§5 Footer（模块02）
═══════════════════════════════════════════════════════════════ */
.v8-footer {
background: #f2f1ef;
border-top: 2px solid rgba(122,143,166,.2);
margin-top: auto;
}
.v8-footer-top {
padding: 64px 0 52px;
}
.v8-footer-grid {
display: grid;
grid-template-columns: 1.25fr 1fr 1fr 1.1fr;
gap: 0 48px;
align-items: start;
}
/* ── Col headings ── */
.v8-footer-heading {
font-size: var(--v8-fs-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--v8-muted);
padding-bottom: 10px;
margin: 0 0 16px;
border-bottom: 1px solid var(--v8-border);
position: relative;
}
.v8-footer-heading::before {
content: '';
position: absolute;
left: 0;
bottom: -1px;
width: 3px;
height: 12px;
background: var(--v8-primary);
border-radius: 2px;
transform: translateY(50%);
}
/* ── Col1: Brand ── */
.v8-footer-brand {
display: flex;
flex-direction: column;
gap: 16px;
}
.v8-footer-logo {
display: inline-flex;
align-items: center;
text-decoration: none;
}
.v8-footer-logo img,
.v8-footer-logo svg {
height: 36px;
width: auto;
}
.v8-footer-logo-text {
font-size: var(--v8-fs-lg);
font-weight: 700;
color: var(--v8-dark);
}
.v8-footer-brand-text {
display: flex;
flex-direction: column;
gap: 8px;
}
.v8-footer-slogan {
font-size: var(--v8-fs-base);
font-weight: 700;
color: var(--v8-dark);
margin: 0;
line-height: 1.4;
}
.v8-footer-tagline {
font-size: var(--v8-fs-sm);
color: var(--v8-muted);
margin: 0;
line-height: 1.5;
}
.v8-footer-socials {
display: flex;
gap: 8px;
margin-top: 8px;
flex-wrap: wrap;
}
.v8-social-icon {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
background: rgba(122,143,166,.1);
border-radius: 7px;
color: var(--v8-muted);
text-decoration: none;
transition: color var(--v8-transition), background var(--v8-transition), transform var(--v8-transition);
}
.v8-social-icon:hover {
color: var(--v8-primary);
background: rgba(122,143,166,.2);
transform: translateY(-2px);
}
/* ── Footer links base ── */
.v8-footer-links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
/* ── Col2: Service links with icon ── */
.v8-footer-svc-link {
display: flex;
align-items: center;
gap: 9px;
padding: 6px 4px;
font-size: var(--v8-fs-sm);
color: var(--v8-text);
text-decoration: none;
border-radius: var(--v8-radius);
transition: color var(--v8-transition), transform var(--v8-transition);
}
.v8-footer-svc-link:hover {
color: var(--v8-primary);
transform: translateX(5px);
}
.v8-footer-svc-icon {
display: flex;
align-items: center;
color: var(--v8-primary);
flex-shrink: 0;
}
/* ── Col3: Plain links ── */
.v8-footer-plain-link {
display: block;
padding: 6px 4px;
font-size: var(--v8-fs-sm);
color: var(--v8-text);
text-decoration: none;
transition: color var(--v8-transition), transform var(--v8-transition);
}
.v8-footer-plain-link:hover {
color: var(--v8-primary);
transform: translateX(5px);
}
/* ── Col4 ── */
.v8-footer-trust {
display: flex;
flex-direction: column;
gap: 12px;
}
.v8-footer-promise {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--v8-fs-sm);
font-weight: 600;
color: var(--v8-cta);
}
.v8-pulse-dot {
display: inline-block;
width: 9px;
height: 9px;
background: var(--v8-cta);
border-radius: 50%;
animation: v8PulseDot 1.8s ease-in-out infinite;
flex-shrink: 0;
vertical-align: middle;
}
@keyframes v8PulseDot {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.5); opacity: .6; }
}
.v8-footer-contact-link,
.v8-footer-wa-link {
display: flex;
align-items: center;
gap: 7px;
font-size: var(--v8-fs-sm);
color: var(--v8-text);
text-decoration: none;
padding: 4px 0;
transition: color var(--v8-transition);
}
.v8-footer-contact-link:hover { color: var(--v8-primary); }
.v8-footer-wa-link:hover { color: var(--v8-wa-brand); }
.v8-col4-divider {
border: none;
border-top: 1px solid var(--v8-border);
margin: 4px 0;
}
.v8-footer-subheading {
font-size: var(--v8-fs-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--v8-muted);
margin: 0;
}
.v8-footer-tool-link {
display: block;
padding: 5px 4px;
font-size: var(--v8-fs-sm);
color: var(--v8-text);
text-decoration: none;
transition: color var(--v8-transition);
position: relative;
padding-left: 14px;
}
.v8-footer-tool-link::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 4px;
background: var(--v8-primary);
border-radius: 50%;
}
.v8-footer-tool-link:hover { color: var(--v8-primary); }
/* Quote CTA button */
.v8-footer-quote-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 12px 16px;
background: var(--v8-cta);
color: #fff;
font-size: var(--v8-fs-sm);
font-weight: 600;
border-radius: var(--v8-radius);
text-decoration: none;
min-height: 44px;
transition: background var(--v8-transition);
margin-top: 4px;
}
.v8-footer-quote-btn:hover {
background: var(--v8-cta-hover);
color: #fff;
}
/* Partners */
.v8-footer-partners {
margin-top: 4px;
}
.v8-partners-label {
font-size: var(--v8-fs-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--v8-muted);
margin: 0 0 8px;
}
.v8-partners-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
}
.v8-partner-logo {
display: flex;
align-items: center;
justify-content: center;
height: 32px;
border: 1px solid var(--v8-border);
border-radius: var(--v8-radius);
cursor: default;
filter: grayscale(1);
opacity: .35;
transition: filter .25s ease, opacity .25s ease, background .25s ease, border-color .25s ease;
}
.v8-partner-logo:hover {
filter: none;
opacity: 1;
}
.v8-partner-abbr {
font-size: var(--v8-fs-xs);
font-weight: 800;
letter-spacing: .02em;
color: var(--v8-muted);
transition: color .25s ease;
}
/* R23 P0-02: 上传 logo 图片渲染 — R25 P5-04: aspect-ratio 兜底防 CLS */
.v8-partner-logo img {
max-width: 100%;
max-height: 22px;
width: auto;
height: auto;
aspect-ratio: auto 80 / 22;
object-fit: contain;
display: block;
}
/* ── Footer bottom ── */
.v8-footer-bottom {
background: #e9e8e4;
padding: 14px 0;
border-top: 1px solid rgba(0,0,0,.06);
}
.v8-footer-bottom-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
font-size: var(--v8-fs-sm);
color: var(--v8-muted);
}
.v8-footer-legal {
display: flex;
align-items: center;
gap: 20px;
}
.v8-footer-legal a {
color: var(--v8-muted);
text-decoration: none;
transition: color var(--v8-transition);
}
.v8-footer-legal a:hover { color: var(--v8-primary); }
/* ── Responsive ── */
@media (max-width: 1024px) {
.v8-footer-grid {
grid-template-columns: 1fr 1fr;
gap: 40px 32px;
}
.v8-footer-brand {
grid-column: 1 / -1;
}
}
@media (max-width: 640px) {
.v8-footer-top {
padding: 40px 0 32px;
}
.v8-footer-grid {
grid-template-columns: 1fr;
gap: 32px;
}
.v8-footer-brand {
grid-column: auto;
}
.v8-footer-bottom-inner {
flex-direction: column;
text-align: center;
gap: 8px;
}
.v8-footer-legal {
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
.v8-partners-grid {
grid-template-columns: repeat(4, 1fr);
}
/* ────────────────────────────────────────────
R24 第三阶段 P1-11：Footer 移动端 accordion（仅 ≤640px）
- Col1 v8-footer-brand 不参与 accordion，永远展开（公司信息默认展开）
- Col2/3/4 的 .v8-footer-collapsible 通过 button[aria-expanded] 控制折叠
- aria-expanded=true → 显示后续兄弟（ul.v8-footer-links 或 div.v8-footer-acc-content）
- 折叠节省纵向空间约 60%，touch target ≥48px 满足 WCAG 2.5.5
──────────────────────────────────────────── */
.v8-footer-collapsible {
border-bottom: 1px solid rgba(255,255,255,.08);
padding-bottom: 12px;
}
.v8-footer-collapsible .v8-footer-heading {
margin: 0;
padding: 0;
}
.v8-footer-collapsible .v8-footer-heading::before {
/* 关闭桌面端 ::before 装饰条（避免与 button 交互冲突） */
content: none;
}
.v8-footer-acc-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 48px;
padding: 4px 0;
background: transparent;
border: 0;
cursor: pointer;
color: inherit;
font: inherit;
font-weight: 700;
letter-spacing: inherit;
text-align: left;
}
.v8-footer-acc-label {
flex: 1;
}
.v8-footer-acc-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
flex-shrink: 0;
font-size: var(--v8-fs-lg);
line-height: 1;
transition: transform var(--v8-transition);
}
.v8-footer-acc-toggle[aria-expanded="true"] .v8-footer-acc-icon {
transform: rotate(45deg);
}
/* 折叠态：隐藏内容（兼容 ul 和 div 两种容器形态） */
.v8-footer-collapsible .v8-footer-acc-toggle[aria-expanded="false"] ~ .v8-footer-links,
.v8-footer-collapsible .v8-footer-acc-toggle[aria-expanded="false"] ~ .v8-footer-acc-content {
display: none;
}
/* 在 .v8-footer-heading 内部，button 作为唯一交互区，外部 nav/div 标签的 aria-expanded 由内部 button 控制 */
.v8-footer-collapsible .v8-footer-heading:has(.v8-footer-acc-toggle[aria-expanded="false"]) + .v8-footer-links,
.v8-footer-collapsible .v8-footer-heading:has(.v8-footer-acc-toggle[aria-expanded="false"]) + .v8-footer-acc-content {
display: none;
}
}
/* ≥641px：button 视觉退化为普通 h4，关闭交互 */
@media (min-width: 641px) {
.v8-footer-acc-toggle {
background: transparent;
border: 0;
padding: 0;
width: 100%;
text-align: left;
color: inherit;
font: inherit;
font-weight: inherit;
letter-spacing: inherit;
cursor: default;
pointer-events: none;
}
.v8-footer-acc-icon {
display: none;
}
}
/* ═══════════════════════════════════════════════════════════════
§6 Plan A（模块04）
═══════════════════════════════════════════════════════════════ */
/* Root wrapper — always in DOM but hidden */
.v8-plana-root {
display: none;
position: fixed;
inset: 0;
z-index: var(--v8-z-plana);
}
/* Close button — floats above stacking contexts */
.v8-plana-close-btn {
position: fixed;
top: 16px;
right: 16px;
z-index: calc(var(--v8-z-plana) + 100);
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,.95);
border: 1px solid var(--v8-border);
border-radius: 50%;
cursor: pointer;
color: var(--v8-muted);
transition: color var(--v8-transition), background var(--v8-transition), transform var(--v8-transition);
padding: 0;
}
.v8-plana-close-btn:hover {
color: var(--v8-dark);
background: #fff;
transform: scale(1.1);
}
/* Overlay */
.v8-plana-overlay {
position: fixed;
inset: 0;
z-index: var(--v8-z-plana);
background: rgba(22,30,44,.75);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
/* Modal card */
.v8-plana-modal {
background: var(--v8-surface);
border-radius: 14px;
max-width: 460px;
width: 100%;
box-shadow: var(--v8-shadow-lg);
overflow: hidden;
}
/* Brand header */
.v8-plana-brand {
/* R23 P0-10: 渐变两端同步降明度，承载白字 CTA 文案 */
background: linear-gradient(135deg, #3d5945, #4a6b53);
padding: 22px 28px 18px;
display: flex;
flex-direction: column;
gap: 6px;
}
.v8-plana-logo {
width: 180px;
height: auto;
display: block;
}
.v8-plana-brand-tagline {
font-size: var(--v8-fs-sm);
color: rgba(255,255,255,.82);
margin: 0;
font-weight: 500;
letter-spacing: .04em;
}
/* Body */
.v8-plana-body {
padding: 26px 28px 22px;
}
.v8-plana-title {
font-size: var(--v8-fs-lg);
font-weight: 700;
color: var(--v8-dark);
margin: 0 0 8px;
line-height: 1.3;
}
.v8-plana-subtitle {
font-size: var(--v8-fs-sm);
color: var(--v8-muted);
margin: 0 0 18px;
line-height: 1.5;
}
/* Form */
.v8-plana-form {
display: flex;
flex-direction: column;
gap: 10px;
}
.v8-plana-input {
width: 100%;
padding: 11px 14px;
border: 1.5px solid var(--v8-border);
border-radius: var(--v8-radius);
font-size: var(--v8-fs-base);
font-family: var(--v8-font);
color: var(--v8-text);
background: #fff;
transition: border-color var(--v8-transition), box-shadow var(--v8-transition);
box-sizing: border-box;
}
.v8-plana-input:focus {
outline: none;
border-color: var(--v8-primary);
box-shadow: 0 0 0 3px rgba(122,143,166,.15);
}
.v8-plana-textarea {
resize: vertical;
min-height: 68px;
}
.v8-plana-submit {
width: 100%;
padding: 13px 20px;
background: var(--v8-cta);
color: #fff;
font-size: var(--v8-fs-base);
font-weight: 700;
font-family: var(--v8-font);
border: none;
border-radius: var(--v8-radius);
cursor: pointer;
min-height: 48px;
transition: background var(--v8-transition), transform var(--v8-transition);
letter-spacing: .02em;
}
.v8-plana-submit:hover:not(:disabled) {
background: var(--v8-cta-hover);
transform: translateY(-1px);
}
.v8-plana-submit:disabled {
opacity: .7;
cursor: not-allowed;
}
.v8-plana-trust {
display: flex;
align-items: center;
gap: 6px;
font-size: var(--v8-fs-xs);
color: var(--v8-muted);
justify-content: center;
}
/* Success state */
.v8-plana-success {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
text-align: center;
padding: 20px 0 8px;
}
.v8-plana-success-icon {
animation: v8CheckIn .4s ease forwards;
}
@keyframes v8CheckIn {
from { transform: scale(.6); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.v8-plana-success-title {
font-size: var(--v8-fs-lg);
font-weight: 700;
color: var(--v8-dark);
margin: 0;
}
.v8-plana-success-msg {
font-size: var(--v8-fs-sm);
color: var(--v8-muted);
margin: 0;
line-height: 1.5;
}
/* ───────────────────────────────────────────────────────────────
R24 P0-01: Plan A 移动端形态
- 默认仍隐藏（兜底，admin 未开启时不渲染触发器）
- data-mobile-enabled="1" 时切换为 bottom-sheet 半屏
- 断点：≤1024px 进入移动端形态，≤640px 强化触屏体验
─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.v8-plana-root { display: none !important; }
.v8-plana-root[data-mobile-enabled="1"] { display: none; }
.v8-plana-root[data-mobile-enabled="1"][aria-hidden="false"] { display: block !important; }
/* 半屏 bottom-sheet：从底部上滑，不全屏覆盖 */
.v8-plana-root[data-mobile-enabled="1"] .v8-plana-overlay {
align-items: flex-end;
padding: 0;
}
.v8-plana-root[data-mobile-enabled="1"] .v8-plana-modal {
max-width: 100%;
width: 100%;
max-height: 75vh;
border-radius: 16px 16px 0 0;
margin: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
animation: v8-plana-slideup 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.v8-plana-root[data-mobile-enabled="1"] .v8-plana-brand {
padding: 16px 20px 12px;
}
.v8-plana-root[data-mobile-enabled="1"] .v8-plana-body {
padding: 16px 20px 24px;
}
.v8-plana-root[data-mobile-enabled="1"] .v8-plana-close-btn {
top: 8px;
right: 12px;
}
/* 拖把（视觉提示可下滑关闭） */
.v8-plana-root[data-mobile-enabled="1"] .v8-plana-modal::before {
content: '';
display: block;
width: 36px;
height: 4px;
background: rgba(255,255,255,0.35);
border-radius: 2px;
margin: 8px auto 0;
}
}
@keyframes v8-plana-slideup {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
@media (max-width: 640px) {
.v8-plana-root[data-mobile-enabled="1"] .v8-plana-input {
min-height: 48px; /* 触屏达标 */
font-size: var(--v8-fs-base); /* iOS 防自动缩放 */
}
.v8-plana-root[data-mobile-enabled="1"] .v8-plana-submit {
min-height: 48px;
font-size: var(--v8-fs-base);
}
}
/* ═══════════════════════════════════════════════════════════════
§7 Plan B（模块05）
═══════════════════════════════════════════════════════════════ */
.v8-planb-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 56px;
display: flex;
align-items: stretch;
z-index: var(--v8-z-planb);
/* safe-area for iOS notch */
padding-bottom: env(safe-area-inset-bottom, 0px);
/* R20: 顶部边框微光 — 营造悬浮感与下层内容的层级分离 */
border-top: 1px solid rgba(255,255,255,.08);
/* R25 P1-04: 触发模式动画基础 — 默认无 transition（always 模式立即显示，零成本） */
transition: transform .35s ease-out, opacity .25s ease-out;
}
/* R25 P1-04: data-pending 状态 — Trigger Mode 非 always 时初始隐藏，由 V8App.planB 移除 attr 触发滑入 */
.v8-planb-bar[data-pending="true"] {
transform: translateY(110%);
opacity: 0;
pointer-events: none;
}
/* R25 P1-04: 尊重用户 prefers-reduced-motion — 关闭滑入动画但保留显示/隐藏 */
@media (prefers-reduced-motion: reduce) {
.v8-planb-bar { transition: none; }
}
.v8-planb-wa,
.v8-planb-cta {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: var(--v8-fs-base);
font-weight: 700;
color: #fff;
text-decoration: none;
transition: filter var(--v8-transition);
letter-spacing: .02em;
}
/* R20: Fallback — 不支持 backdrop-filter 的浏览器（旧 Android WebView / UC / 私密模式）
保持 V7 原版不透明背景，CTA 文字始终可见，零兼容死角 */
.v8-planb-wa {
background: var(--v8-planb-left, #1c2433);
}
.v8-planb-cta {
background: var(--v8-planb-right, #4a6b53);
}
/* R20: 渐进增强 — 仅现代浏览器启用玻璃拟态（Apple Big Sur 同款 saturate(1.4) 补偿） */
@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
.v8-planb-wa {
background: color-mix(in srgb, var(--v8-planb-left, #1c2433) 78%, transparent);
-webkit-backdrop-filter: blur(10px) saturate(1.4);
backdrop-filter: blur(10px) saturate(1.4);
}
.v8-planb-cta {
background: color-mix(in srgb, var(--v8-planb-right, #4a6b53) 82%, transparent);
-webkit-backdrop-filter: blur(10px) saturate(1.4);
backdrop-filter: blur(10px) saturate(1.4);
}
}
.v8-planb-wa:hover,
.v8-planb-cta:hover {
filter: brightness(1.1);
color: #fff;
}
.v8-planb-divider {
width: 1px;
background: rgba(255,255,255,.2);
flex-shrink: 0;
align-self: stretch;
}
/* Footer clearance when Plan B visible
R22 P0-11: 与 v8-plan-b.php inline 同源 calc，消除 80/100 双值冲突 */
body.v8-has-planb .v8-footer {
padding-bottom: calc(56px + env(safe-area-inset-bottom) + 8px);
}
/* Desktop: bar hidden by default unless show_desktop=true */
body.v8-planb-on:not(.v8-mobile) .v8-planb-bar {
display: none;
}
body.v8-planb-on:not(.v8-mobile) .v8-planb-bar.v8-planb-visible {
display: flex;
}
/* Mobile: always show bar when planb on */
@media (max-width: 1024px) {
body.v8-engine-active {
padding-bottom: 56px;
}
/* Chatbox降级：planb展开时 */
body.v8-cx-expanded .v8-planb-bar {
z-index: 1290 !important;
}
}
/* Landscape thin screens: hide bar */
@media (orientation: landscape) and (max-height: 500px) {
.v8-planb-bar {
display: none !important;
}
}
/* Desktop toggle button (show_desktop=false fallback) */
.v8-planb-toggle {
position: fixed;
bottom: 20px;
right: 20px;
z-index: calc(var(--v8-z-planb) - 1);
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: var(--v8-cta);
color: #fff;
border: none;
border-radius: 50%;
cursor: pointer;
box-shadow: var(--v8-shadow-md);
transition: background var(--v8-transition), transform var(--v8-transition);
padding: 0;
}
.v8-planb-toggle:hover {
background: var(--v8-cta-hover);
transform: scale(1.08);
}
/* Hide toggle on mobile (bar is always visible there) */
@media (max-width: 1024px) {
.v8-planb-toggle {
display: none;
}
}
/* ═══════════════════════════════════════════════════════════════
§8 Modal（模块06）
═══════════════════════════════════════════════════════════════ */
/* Overlay */
.v8-modal-overlay {
position: fixed;
inset: 0;
z-index: var(--v8-z-modal);
background: rgba(22,30,44,.72);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
visibility: hidden;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transition: opacity .25s ease, visibility .25s ease;
}
.v8-modal-overlay.v8-active {
opacity: 1;
visibility: visible;
}
/* Box */
.v8-modal-box {
background: var(--v8-surface);
border-radius: var(--v8-radius-lg);
box-shadow: var(--v8-shadow-lg);
max-width: 90vw;
max-height: 90vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transform: translateY(12px);
transition: transform .25s ease;
position: relative;
}
.v8-modal-overlay.v8-active .v8-modal-box {
transform: translateY(0);
}
/* Inner content wrapper */
.v8-modal-inner {
padding: 28px 24px;
min-width: 320px;
max-width: 560px;
}
.v8-modal-title {
font-size: var(--v8-fs-md);
font-weight: 700;
color: var(--v8-dark);
margin: 0 0 20px;
}
/* Close button inside modal */
.v8-modal-close {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
cursor: pointer;
color: var(--v8-muted);
border-radius: 50%;
transition: color var(--v8-transition), background var(--v8-transition);
padding: 0;
}
.v8-modal-close:hover {
color: var(--v8-dark);
background: rgba(0,0,0,.06);
}
/* CF7 inside modal — unified field styles */
.v8-modal-box .wpcf7-form input[type="text"],
.v8-modal-box .wpcf7-form input[type="email"],
.v8-modal-box .wpcf7-form input[type="tel"],
.v8-modal-box .wpcf7-form input[type="url"],
.v8-modal-box .wpcf7-form select,
.v8-modal-box .wpcf7-form textarea {
width: 100%;
padding: 10px 14px;
border: 1.5px solid var(--v8-border);
border-radius: var(--v8-radius);
font-size: var(--v8-fs-base);
font-family: var(--v8-font);
color: var(--v8-text);
background: #fff;
transition: border-color var(--v8-transition), box-shadow var(--v8-transition);
box-sizing: border-box;
margin-bottom: 10px;
}
.v8-modal-box .wpcf7-form input:focus,
.v8-modal-box .wpcf7-form select:focus,
.v8-modal-box .wpcf7-form textarea:focus {
outline: none;
border-color: var(--v8-primary);
box-shadow: 0 0 0 3px rgba(122,143,166,.15);
}
.v8-modal-box .wpcf7-form input[type="submit"],
.v8-modal-box .wpcf7-form .wpcf7-submit {
width: 100%;
padding: 12px 20px;
background: var(--v8-cta);
color: #fff;
font-size: var(--v8-fs-base);
font-weight: 700;
font-family: var(--v8-font);
border: none;
border-radius: var(--v8-radius);
cursor: pointer;
min-height: 44px;
transition: background var(--v8-transition);
margin-top: 4px;
}
.v8-modal-box .wpcf7-form input[type="submit"]:hover,
.v8-modal-box .wpcf7-form .wpcf7-submit:hover {
background: var(--v8-cta-hover);
}
/* Modal success/error states */
.v8-modal-success,
.v8-modal-error {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
text-align: center;
padding: 32px 24px;
}
.v8-modal-success-icon { color: var(--v8-cta); }
.v8-modal-error-icon { color: #ef4444; }
/* Maintenance modal */
.v8-maintenance-modal .v8-modal-box {
max-width: 400px;
}
/* ─────────────────────────────────────────────────────────────
R24 P0-06: 移动端 Modal Fullscreen + 键盘适配
核心问题修复：
1. 旧 bottom-sheet（半屏）在键盘弹起时，submit 被推到视口外
2. 字段数 ≥4 时，下半屏空间不足以容纳所有字段 + 提交按钮
3. 横屏小屏（如 iPhone 12 横屏 844×390）半屏几乎不可用
方案：
- ≤640px：100dvw × 100dvh fullscreen，flex column 布局
- .v8-modal-inner 作为可滚动 form-body（overflow-y:auto）
- 提交按钮 position:sticky bottom:0，键盘弹起时仍可见
- safe-area-inset-bottom 兼容刘海屏 home indicator
───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
.v8-modal-overlay {
align-items: stretch;
justify-content: stretch;
padding: 0;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.v8-modal-box {
max-width: 100vw;
width: 100vw;
/* dvh 兼容（动态视口高度，键盘弹起自动收缩）；vh fallback */
max-height: 100vh;
max-height: 100dvh;
height: 100vh;
height: 100dvh;
border-radius: 0;
align-self: stretch;
margin: 0;
/* 改为 flex column 容器，inner 滚动，submit sticky */
display: flex;
flex-direction: column;
overflow: hidden; /* 滚动交给 inner */
transform: translateY(20px);
}
.v8-modal-inner {
min-width: 0;
max-width: 100%;
flex: 1 1 auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
/* 顶部留出 close 按钮空间，底部预留 submit sticky 空间 + safe-area */
padding: 24px 16px calc(16px + env(safe-area-inset-bottom));
/* 顶部安全区（刘海屏） */
padding-top: calc(24px + env(safe-area-inset-top));
}
/* close 按钮在 fullscreen 下贴顶 + 安全区 */
.v8-modal-close {
top: calc(8px + env(safe-area-inset-top));
right: 8px;
width: 44px;
height: 44px; /* 触屏命中区达标 */
background: rgba(255,255,255,.92);
box-shadow: 0 1px 3px rgba(0,0,0,.08);
z-index: 2;
}
.v8-modal-title {
/* 给 close 按钮让位 */
padding-right: 48px;
margin-bottom: 16px;
}
/* CF7 提交按钮 sticky 钉在 inner 底部，键盘弹起时仍在视口内 */
.v8-modal-box .wpcf7-form input[type="submit"],
.v8-modal-box .wpcf7-form .wpcf7-submit {
position: sticky;
bottom: 0;
z-index: 3;
margin-top: 16px;
/* 自身留 safe-area，避免被 home indicator 盖住 */
margin-bottom: env(safe-area-inset-bottom);
/* 下方阴影暗示其上方内容仍可滚动 */
box-shadow: 0 -8px 16px -8px rgba(0,0,0,.12);
}
/* maintenance / success modal 在 fullscreen 下垂直居中（无表单字段） */
.v8-maintenance-modal .v8-modal-inner,
.v8-modal-box .v8-modal-success,
.v8-modal-box .v8-modal-error {
justify-content: center;
min-height: 100%;
}
/* comparison modal 重置 sticky（无 CF7 form） */
.v8-comp-modal .v8-modal-box .wpcf7-form input[type="submit"] {
position: static;
box-shadow: none;
}
}
/* R24 P0-06: 横屏小屏（高度 ≤500px）— 强制 fullscreen + 紧凑间距
覆盖：iPhone 横屏、平板分屏、笔记本浏览器窗口缩到很矮 */
@media (max-height: 500px) {
.v8-modal-overlay {
align-items: stretch;
padding: 0;
}
.v8-modal-box {
max-height: 100vh;
max-height: 100dvh;
height: 100vh;
height: 100dvh;
max-width: 100vw;
width: 100vw;
border-radius: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.v8-modal-inner {
flex: 1 1 auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 16px 20px;
/* 横屏单列纵向（避免双列挤压） */
max-width: 100%;
}
.v8-modal-title {
font-size: var(--v8-fs-base);
margin-bottom: 12px;
}
.v8-modal-box .wpcf7-form input[type="submit"],
.v8-modal-box .wpcf7-form .wpcf7-submit {
position: sticky;
bottom: 0;
z-index: 3;
box-shadow: 0 -8px 16px -8px rgba(0,0,0,.12);
}
}
/* ═══════════════════════════════════════════════════════════════
§9 Chatbox（模块03）
═══════════════════════════════════════════════════════════════ */
/* Root wrapper */
.v8-chatbox {
position: fixed;
right: 24px;
bottom: 80px;
z-index: var(--v8-z-chatbox);
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12px;
}
/* Mobile: hidden by default unless admin sets cx_mobile_visibility=show
* R24 第三阶段 P1-10：用 :not(.v8-chatbox-mobile-show) 替代无条件 display:none，
* 修复 admin 'show' 选项原本被 CSS 永久覆盖的 bug；hide 模式行为保持不变（向后兼容） */
@media (max-width: 1024px) {
.v8-chatbox:not(.v8-chatbox-mobile-show) {
display: none !important;
}
/* P1-10：移动端 chatbox 显示时，若 Plan B 同时启用，FAB 上移让位
* Plan B 高 56px + safe-area-inset-bottom + 16px 视觉间距，与 v8-plan-b inline 同源 calc 对齐 */
body.v8-has-planb .v8-chatbox.v8-chatbox-mobile-show {
bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 16px);
}
}
/* ── FAB Bubble ── */
.v8-cx-bubble {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, var(--v8-primary), var(--v8-accent));
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
overflow: hidden;
box-shadow: var(--v8-shadow-md);
transition: transform var(--v8-transition), box-shadow var(--v8-transition);
color: #fff;
flex-shrink: 0;
}
.v8-cx-bubble img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.v8-cx-bubble:hover {
transform: scale(1.08);
box-shadow: var(--v8-shadow-lg);
}
/* Badge */
.v8-cx-badge {
position: absolute;
top: -3px;
right: -3px;
width: 20px;
height: 20px;
background: #ef4444;
color: #fff;
font-size: var(--v8-fs-xs);
font-weight: 700;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
line-height: 1;
}
/* ── Peek bubble ── */
.v8-cx-peek {
position: absolute;
right: 72px;
bottom: 8px;
background: #fff;
border: 1px solid var(--v8-border);
border-radius: 12px 12px 0 12px;
padding: 10px 14px;
font-size: var(--v8-fs-sm);
font-weight: 500;
color: var(--v8-text);
white-space: nowrap;
box-shadow: var(--v8-shadow-sm);
opacity: 0;
transform: translateX(8px);
transition: opacity .3s ease, transform .3s ease;
pointer-events: none;
}
.v8-cx-peek::after {
content: '';
position: absolute;
right: -8px;
bottom: 0;
border: 8px solid transparent;
border-left-color: #fff;
border-bottom-color: #fff;
border-right: none;
border-top: none;
}
.v8-cx-peek.v8-cx-peek-visible {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}
/* ── Chat window ── */
.v8-cx-window {
position: absolute;
bottom: 80px;
right: 0;
width: 300px;
background: var(--v8-surface);
border-radius: 14px;
box-shadow: var(--v8-shadow-lg);
border: 1px solid var(--v8-border);
overflow: hidden;
opacity: 0;
visibility: hidden;
transform: translateY(16px) scale(.96);
transform-origin: bottom right;
transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
}
.v8-cx-window.v8cx-open {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
/* Window header */
.v8-cx-header {
background: linear-gradient(135deg, #2c3240, #4a3f5c);
padding: 16px;
display: flex;
align-items: center;
gap: 12px;
color: #fff;
}
.v8-cx-avatar {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
border: 2px solid rgba(255,255,255,.3);
}
.v8-cx-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.v8-cx-avatar-default {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,.2);
font-size: var(--v8-fs-md);
font-weight: 700;
color: #fff;
}
.v8-cx-info {
flex: 1;
min-width: 0;
}
.v8-cx-name {
font-size: var(--v8-fs-base);
font-weight: 700;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.v8-cx-status {
display: flex;
align-items: center;
gap: 5px;
font-size: var(--v8-fs-xs);
color: rgba(255,255,255,.75);
margin-top: 2px;
}
.v8-cx-status-dot {
width: 7px;
height: 7px;
background: #4ade80;
border-radius: 50%;
flex-shrink: 0;
animation: v8PulseDot 1.8s ease-in-out infinite;
}
.v8-cx-close {
background: none;
border: none;
color: rgba(255,255,255,.7);
cursor: pointer;
padding: 4px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: color var(--v8-transition), background var(--v8-transition);
flex-shrink: 0;
}
.v8-cx-close:hover {
color: #fff;
background: rgba(255,255,255,.15);
}
/* Window body */
.v8-cx-body {
padding: 16px;
background: #f8f7f5;
min-height: 70px;
}
.v8-cx-msg-bubble {
background: #fff;
border: 1px solid var(--v8-border);
border-radius: 10px 10px 10px 0;
padding: 12px 14px;
font-size: var(--v8-fs-sm);
color: var(--v8-text);
line-height: 1.5;
box-shadow: var(--v8-shadow-sm);
}
/* Buttons */
.v8-cx-btns {
display: flex;
flex-direction: column;
gap: 8px;
padding: 14px 16px;
background: var(--v8-surface);
border-top: 1px solid var(--v8-border);
}
.v8-cx-wa-btn,
.v8-cx-inq-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 16px;
border-radius: var(--v8-radius);
font-size: var(--v8-fs-sm);
font-weight: 600;
text-decoration: none;
min-height: 44px;
transition: filter var(--v8-transition), background var(--v8-transition);
}
.v8-cx-wa-btn {
background: var(--v8-wa-brand);
color: #fff;
}
.v8-cx-wa-btn:hover {
filter: brightness(1.08);
color: #fff;
}
.v8-cx-inq-btn {
border: 1.5px solid var(--v8-primary);
color: var(--v8-primary);
background: transparent;
}
.v8-cx-inq-btn:hover {
background: rgba(122,143,166,.08);
color: var(--v8-primary);
}
/* Plan B z-index降级（chatbox展开时已在§7处理）*/
/* ═══════════════════════════════════════════════════════════════
§10 ROI / FAQ / Hotmap / Gated Download（模块09-12）
═══════════════════════════════════════════════════════════════ */
/* ── ROI Calculator ── */
.v8-roi-wrap {
background: var(--v8-surface);
border: 1px solid var(--v8-border);
border-radius: var(--v8-radius-lg);
padding: 32px 28px;
max-width: 520px;
margin: 0 auto;
box-shadow: var(--v8-shadow-sm);
}
.v8-roi-title {
font-size: var(--v8-fs-lg);
font-weight: 700;
color: var(--v8-dark);
margin: 0 0 6px;
}
.v8-roi-sub {
font-size: var(--v8-fs-sm);
color: var(--v8-muted);
margin: 0 0 20px;
}
.v8-roi-label {
display: block;
font-size: var(--v8-fs-sm);
font-weight: 600;
color: var(--v8-text);
margin-bottom: 6px;
}
.v8-roi-label-sm {
font-size: var(--v8-fs-xs);
color: var(--v8-muted);
text-transform: uppercase;
letter-spacing: .06em;
margin-bottom: 4px;
}
.v8-roi-input {
width: 100%;
padding: 11px 14px;
border: 1.5px solid var(--v8-border);
border-radius: var(--v8-radius);
font-size: var(--v8-fs-base);
font-family: var(--v8-font);
color: var(--v8-text);
margin-bottom: 12px;
box-sizing: border-box;
transition: border-color var(--v8-transition);
}
.v8-roi-input:focus {
outline: none;
border-color: var(--v8-primary);
box-shadow: 0 0 0 3px rgba(122,143,166,.18); /* R20: 与全局 input :focus 统一 */
}
.v8-roi-btn {
width: 100%;
padding: 12px;
background: var(--v8-primary);
color: #fff;
font-size: var(--v8-fs-base);
font-weight: 700;
font-family: var(--v8-font);
border: none;
border-radius: var(--v8-radius);
cursor: pointer;
min-height: 44px;
transition: background var(--v8-transition);
}
.v8-roi-btn:hover { background: #6a7e93; }
.v8-roi-result {
display: none;
margin-top: 20px;
padding: 20px;
background: linear-gradient(135deg, rgba(107,143,113,.08), rgba(122,143,166,.08));
border-radius: var(--v8-radius);
border: 1px solid rgba(107,143,113,.2);
text-align: center;
}
.v8-roi-result.v8-active { display: block; }
.v8-roi-savings {
font-size: var(--v8-fs-3xl);
font-weight: 800;
color: var(--v8-cta);
line-height: 1.1;
margin-bottom: 10px;
}
.v8-roi-breakdown {
font-size: var(--v8-fs-sm);
color: var(--v8-muted);
margin-bottom: 16px;
line-height: 1.6;
}
.v8-roi-cta {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 20px;
background: var(--v8-cta);
color: #fff;
font-weight: 700;
font-family: var(--v8-font);
border: none;
border-radius: var(--v8-radius);
cursor: pointer;
font-size: var(--v8-fs-sm);
transition: background var(--v8-transition);
}
.v8-roi-cta:hover { background: var(--v8-cta-hover); }
/* ── FAQ ── */
.v8-topic-faq { margin-top: 32px; }
.v8-topic-faq-title {
font-size: var(--v8-fs-md);
font-weight: 700;
color: var(--v8-dark);
margin: 0 0 16px;
}
.v8-faq-item {
border: 1px solid var(--v8-border);
border-radius: var(--v8-radius);
margin-bottom: 8px;
overflow: hidden;
}
.v8-faq-q {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
/* R24 P0-05: 触屏达标——强制 ≥48px 命中区，单行短问题也满足 WCAG 2.5.5 */
min-height: 48px;
background: none;
border: none;
font-size: var(--v8-fs-base);
font-weight: 600;
font-family: var(--v8-font);
color: var(--v8-text);
text-align: left;
cursor: pointer;
transition: background var(--v8-transition);
/* R24 P0-05: 移除 iOS 默认蓝色高亮，自定义 :active 反馈接管 */
-webkit-tap-highlight-color: transparent;
user-select: none;
-webkit-user-select: none;
}
.v8-faq-q:hover { background: rgba(122,143,166,.05); }
/* R24 P0-05: 触屏按下反馈——立即视觉响应（避免感知延迟） */
.v8-faq-q:active {
background: rgba(122,143,166,.12);
transition: background 0s;
}
.v8-faq-q:focus-visible {
outline: 2px solid var(--v8-primary);
outline-offset: -2px;
}
.v8-faq-icon {
flex-shrink: 0;
transition: transform var(--v8-transition);
color: var(--v8-muted);
}
.v8-faq-q.v8-faq-open .v8-faq-icon { transform: rotate(180deg); }
.v8-faq-a {
max-height: 0;
overflow: hidden;
transition: max-height .3s ease, padding .3s ease;
font-size: var(--v8-fs-base);
color: var(--v8-muted);
line-height: 1.6;
padding: 0 16px;
}
.v8-faq-a.v8-faq-a-open {
max-height: 800px;
padding: 0 16px 16px;
}
/* ── Topic Hub Skeleton ── */
.v8-hub-skeleton { padding: 20px 0; }
.v8-sk-banner {
height: 180px;
border-radius: var(--v8-radius);
margin-bottom: 16px;
}
.v8-sk-line {
height: 14px;
border-radius: 7px;
margin-bottom: 10px;
}
.v8-sk-w80 { width: 80%; }
.v8-sk-w60 { width: 60%; }
.v8-sk-w70 { width: 70%; }
.v8-sk-faq { margin-top: 20px; }
.v8-sk-faq-item {
height: 48px;
border-radius: var(--v8-radius);
margin-bottom: 8px;
}
.v8-sk-pulse {
background: linear-gradient(90deg, #e8e6e3 25%, #f2f1ef 50%, #e8e6e3 75%);
background-size: 200% 100%;
animation: v8SkPulse 1.4s ease-in-out infinite;
}
@keyframes v8SkPulse {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ── Hotmap tag ── */
.v8-hot-dot {
display: inline-block;
width: 6px;
height: 6px;
background: var(--v8-cta);
border-radius: 50%;
margin-right: 4px;
animation: v8PulseDot 1.8s ease-in-out infinite;
}
/* ── Gated Download ── */
.v8-gated-wrap {
background: var(--v8-surface);
border: 1px solid var(--v8-border);
border-radius: var(--v8-radius-lg);
padding: 24px;
max-width: 440px;
box-shadow: var(--v8-shadow-sm);
}
.v8-gated-title {
font-size: var(--v8-fs-base);
font-weight: 700;
color: var(--v8-dark);
margin-bottom: 4px;
}
.v8-gated-meta {
font-size: var(--v8-fs-sm);
color: var(--v8-muted);
margin-bottom: 14px;
}
.v8-gated-input {
width: 100%;
padding: 10px 14px;
border: 1.5px solid var(--v8-border);
border-radius: var(--v8-radius);
font-size: var(--v8-fs-base);
font-family: var(--v8-font);
margin-bottom: 10px;
box-sizing: border-box;
transition: border-color var(--v8-transition);
}
.v8-gated-input:focus {
outline: none;
border-color: var(--v8-primary);
box-shadow: 0 0 0 3px rgba(122,143,166,.18); /* R20: 与全局 input :focus 统一 */
}
.v8-gated-btn {
width: 100%;
padding: 11px;
background: var(--v8-cta);
color: #fff;
font-weight: 700;
font-family: var(--v8-font);
border: none;
border-radius: var(--v8-radius);
cursor: pointer;
min-height: 44px;
transition: background var(--v8-transition);
}
.v8-gated-btn:hover { background: var(--v8-cta-hover); }
.v8-gated-success {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-align: center;
padding: 16px 0;
}
.v8-gated-success p { color: var(--v8-dark); font-weight: 600; margin: 0; }
.v8-gated-success a {
color: var(--v8-primary);
font-weight: 600;
font-size: var(--v8-fs-base);
}
/* ── Logic Stepper ── */
.v8-stepper { max-width: 480px; }
.v8-step { display: none; }
.v8-step.v8-step-active { display: block; }
.v8-step-q {
font-size: var(--v8-fs-base);
font-weight: 600;
color: var(--v8-dark);
margin-bottom: 12px;
}
.v8-step-opts {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.v8-step-opt {
padding: 8px 16px;
border: 1.5px solid var(--v8-border);
border-radius: 20px;
font-size: var(--v8-fs-sm);
font-family: var(--v8-font);
color: var(--v8-text);
background: none;
cursor: pointer;
transition: all var(--v8-transition);
}
.v8-step-opt:hover,
.v8-step-opt.v8-selected {
border-color: var(--v8-primary);
background: rgba(122,143,166,.1);
color: var(--v8-primary);
}
.v8-step-done { text-align: center; padding: 20px 0; }
/* ────────────────────────────────────────────
R24 第三阶段 P1-12：Stepper A 移动端 vertical 模式（仅 ≤640px）
- 桌面/平板：保留 chip 横向 wrap 形态（max-width:480px 内紧凑）
- 手机 ≤640px：每选项独占一行，全宽，touch target ≥48px 满足 WCAG 2.5.5
- 选中态保留视觉反馈，新增右侧箭头辅助识别"可点击"
- 字号 1rem (vs 桌面 .875rem)：拇指操作区域文字提升可读性
──────────────────────────────────────────── */
@media (max-width: 640px) {
.v8-stepper {
max-width: 100%;
}
.v8-step-q {
font-size: var(--v8-fs-md);
margin-bottom: 16px;
}
.v8-step-opts {
flex-direction: column;
gap: 10px;
}
.v8-step-opt {
width: 100%;
min-height: 48px;
padding: 12px 16px;
border-radius: 10px;
font-size: var(--v8-fs-base);
text-align: left;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
line-height: 1.4;
}
/* 视觉提示：右侧箭头标识可点击；选中后变对勾 */
.v8-step-opt::after {
content: "›";
flex-shrink: 0;
font-size: var(--v8-fs-lg);
line-height: 1;
color: var(--v8-text-muted, #94a3b8);
transition: transform var(--v8-transition), color var(--v8-transition);
}
.v8-step-opt:hover::after,
.v8-step-opt.v8-selected::after {
color: var(--v8-primary);
transform: translateX(2px);
}
}
/* ── Logistics Pulse ── */
.v8-logistics-pulse {
display: flex;
flex-direction: column;
gap: 10px;
}
.v8-logistics-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: var(--v8-surface);
border: 1px solid var(--v8-border);
border-radius: var(--v8-radius);
}
.v8-logistics-label {
flex: 1;
font-weight: 600;
font-size: var(--v8-fs-base);
color: var(--v8-text);
}
.v8-logistics-time {
font-size: var(--v8-fs-sm);
color: var(--v8-muted);
}
/* R24 第三阶段 P1-02：Logistics Pulse 末尾的 Last Updated 时效徽章
- 视觉低调（B2B 公信力锚点，不抢主信息）
- 紧贴最后一条 row 之下，留 4px 微距 */
.v8-logistics-meta {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 0 0;
font-size: var(--v8-fs-sm);
color: var(--v8-muted, #94a3b8);
align-self: flex-end;
}
.v8-logistics-meta svg {
flex-shrink: 0;
opacity: .7;
}
/* ── Vendor Archive ── */
/* R23 P0-04: 完整字段卡片样式 */
.v8-vendor-archive {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 14px;
}
.v8-vendor-card {
border: 1px solid var(--v8-border);
border-radius: var(--v8-radius);
background: #fff;
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow .25s ease, transform .25s ease;
}
.v8-vendor-card:hover {
box-shadow: 0 6px 18px rgba(0,0,0,.08);
transform: translateY(-2px);
}
.v8-vendor-img-wrap {
width: 100%;
aspect-ratio: 16/10;
overflow: hidden;
background: #f1f5f9;
}
.v8-vendor-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.v8-vendor-body {
padding: 14px;
display: flex;
flex-direction: column;
gap: 6px;
}
.v8-vendor-name { font-size: var(--v8-fs-base); color: var(--v8-dark); font-weight: 700; }
.v8-vendor-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--v8-fs-xs); color: var(--v8-muted); }
.v8-vendor-cat { font-weight: 600; }
.v8-vendor-region { font-size: var(--v8-fs-xs); }
.v8-vendor-specs {
display: flex;
flex-wrap: wrap;
gap: 10px;
font-size: var(--v8-fs-sm);
color: var(--v8-dark);
padding-top: 6px;
border-top: 1px dashed var(--v8-border);
}
.v8-vendor-specs em { color: var(--v8-muted); font-style: normal; font-size: var(--v8-fs-xs); text-transform: uppercase; letter-spacing: .04em; margin-right: 3px; }
.v8-vendor-cert {
font-size: var(--v8-fs-xs);
color: #15803d;
background: #f0fdf4;
padding: 4px 8px;
border-radius: 4px;
margin-top: 4px;
}
@media (max-width: 640px) {
.v8-roi-wrap, .v8-gated-wrap { padding: 20px 16px; }
.v8-roi-savings { font-size: var(--v8-fs-2xl); }
.v8-vendor-archive { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════════════════
§11 Comparison（模块13）+ Intent Card（模块14）
═══════════════════════════════════════════════════════════════ */
/* ── Compare floating bar ── */
.v8-compare-bar {
position: fixed;
bottom: 64px;
left: 50%;
transform: translateX(-50%) translateY(120px);
z-index: calc(var(--v8-z-planb) - 10);
background: var(--v8-dark);
color: #fff;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
border-radius: 40px;
box-shadow: var(--v8-shadow-lg);
transition: transform .3s cubic-bezier(.34,1.56,.64,1);
white-space: nowrap;
}
.v8-compare-bar.v8-compare-bar-visible {
transform: translateX(-50%) translateY(0);
}
.v8-compare-bar-count {
font-size: var(--v8-fs-sm);
font-weight: 600;
opacity: .85;
}
.v8-compare-go {
padding: 8px 16px;
background: var(--v8-cta);
color: #fff;
border: none;
border-radius: 20px;
font-size: var(--v8-fs-sm);
font-weight: 700;
font-family: var(--v8-font);
cursor: pointer;
transition: background var(--v8-transition);
}
.v8-compare-go:hover { background: var(--v8-cta-hover); }
.v8-compare-clear {
padding: 8px 14px;
background: rgba(255,255,255,.12);
color: #fff;
border: none;
border-radius: 20px;
font-size: var(--v8-fs-sm);
font-family: var(--v8-font);
cursor: pointer;
transition: background var(--v8-transition);
}
.v8-compare-clear:hover { background: rgba(255,255,255,.2); }
/* ── Compare button ── */
.v8-compare-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
border: 1.5px solid var(--v8-border);
border-radius: 20px;
font-size: var(--v8-fs-sm);
font-weight: 600;
font-family: var(--v8-font);
color: var(--v8-muted);
background: none;
cursor: pointer;
transition: all var(--v8-transition);
}
.v8-compare-btn:hover {
border-color: var(--v8-primary);
color: var(--v8-primary);
}
.v8-compare-btn.v8-compare-selected {
background: var(--v8-primary);
border-color: var(--v8-primary);
color: #fff;
}
.v8-compare-btn:disabled {
opacity: .4;
cursor: not-allowed;
}
/* ── Compare Modal table ── */
.v8-comp-modal .v8-modal-box { max-width: 860px; }
.v8-comp-modal-inner { min-width: min(860px, 90vw); }
.v8-comp-scroll { overflow-x: auto; }
.v8-comp-cta-row { margin-top: 20px; text-align: center; }
.v8-comp-table {
width: 100%;
border-collapse: collapse;
font-size: var(--v8-fs-sm);
}
.v8-comp-table th,
.v8-comp-table td {
padding: 10px 14px;
border: 1px solid var(--v8-border);
text-align: left;
vertical-align: top;
}
.v8-comp-table th {
background: var(--v8-bg);
font-weight: 700;
color: var(--v8-dark);
}
.v8-comp-table tr.v8-highlight-diff td {
background: rgba(255,237,180,.35);
}
.v8-comp-table tr.v8-highlight-diff td:first-child {
border-left: 3px solid #f59e0b;
}
/* ───────────────────────────────────────────────────────────────
R24 P0-03: ≤640px Comparison Tool — stacked card layout
- 桌面端保留传统 grid table（可读性 + 可对比性）
- 移动端切换为"每行一张卡片"，每个 cell 标注 data-label
- 横向溢出彻底消除，无横滑
─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
.v8-comp-modal-inner { min-width: 0; }
.v8-comp-scroll { overflow-x: visible; }
.v8-comp-table,
.v8-comp-table thead,
.v8-comp-table tbody,
.v8-comp-table tr,
.v8-comp-table th,
.v8-comp-table td {
display: block;
width: 100%;
box-sizing: border-box;
}
.v8-comp-table thead {
/* 表头藏起来，行内 data-label 替代 */
position: absolute;
left: -9999px;
top: -9999px;
}
.v8-comp-table tr {
border: 1px solid var(--v8-border);
border-radius: 10px;
margin-bottom: 12px;
padding: 4px 0;
background: #fff;
overflow: hidden;
}
.v8-comp-table tr.v8-highlight-diff {
border-left: 3px solid #f59e0b;
background: rgba(255,237,180,.18);
}
.v8-comp-table td {
border: none;
border-bottom: 1px solid var(--v8-border);
padding: 10px 14px 10px 44%;
position: relative;
text-align: right;
min-height: 44px;
line-height: 1.45;
}
.v8-comp-table td:last-child { border-bottom: none; }
.v8-comp-table td::before {
content: attr(data-label);
position: absolute;
left: 14px;
top: 10px;
width: 38%;
font-weight: 600;
color: var(--v8-dark);
text-align: left;
text-transform: none;
white-space: normal;
line-height: 1.45;
}
/* "Feature" 行作为卡片标题：占一整行，左对齐，强调 */
.v8-comp-table td.v8-comp-row-label {
background: var(--v8-bg);
padding: 10px 14px;
text-align: left;
font-size: var(--v8-fs-base);
}
.v8-comp-table td.v8-comp-row-label::before { display: none; }
.v8-comp-table tr.v8-highlight-diff td { background: transparent; }
.v8-comp-table tr.v8-highlight-diff td.v8-comp-row-label {
background: rgba(255,237,180,.45);
}
}
/* ── Intent Card ── */
.v8-intent-card {
margin-top: 32px;
border: 1px solid rgba(107,143,113,.3);
border-radius: var(--v8-radius-lg);
background: linear-gradient(135deg, rgba(107,143,113,.06), rgba(122,143,166,.06));
overflow: hidden;
}
.v8-intent-card-inner {
display: flex;
gap: 16px;
padding: 24px;
align-items: flex-start;
}
.v8-intent-icon {
flex-shrink: 0;
width: 52px;
height: 52px;
background: rgba(107,143,113,.12);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.v8-intent-body { flex: 1; min-width: 0; }
.v8-intent-title {
font-size: var(--v8-fs-base);
font-weight: 700;
color: var(--v8-dark);
margin: 0 0 6px;
}
.v8-intent-desc {
font-size: var(--v8-fs-sm);
color: var(--v8-muted);
margin: 0 0 14px;
line-height: 1.5;
}
.v8-intent-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.v8-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 16px;
border-radius: var(--v8-radius);
font-size: var(--v8-fs-sm);
font-weight: 600;
font-family: var(--v8-font);
text-decoration: none;
min-height: 40px;
border: none;
cursor: pointer;
transition: background var(--v8-transition), filter var(--v8-transition);
}
.v8-btn-primary {
background: var(--v8-cta);
color: #fff;
}
.v8-btn-primary:hover {
background: var(--v8-cta-hover);
color: #fff;
}
.v8-btn-wa {
background: var(--v8-wa-brand);
color: #fff;
}
.v8-btn-wa:hover {
filter: brightness(1.08);
color: #fff;
}
/* ── Dynamic sidebar related ── */
.v8-dynamic-sidebar-widget {
margin-bottom: 24px;
}
.v8-related-card {
display: flex;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid var(--v8-border);
align-items: flex-start;
}
.v8-related-card img {
width: 64px;
height: 48px;
object-fit: cover;
border-radius: var(--v8-radius);
flex-shrink: 0;
}
.v8-related-card-title {
font-size: var(--v8-fs-sm);
font-weight: 600;
color: var(--v8-text);
text-decoration: none;
line-height: 1.4;
transition: color var(--v8-transition);
}
.v8-related-card-title:hover { color: var(--v8-primary); }
@media (max-width: 640px) {
.v8-compare-bar {
width: calc(100% - 32px);
border-radius: var(--v8-radius-lg);
bottom: 72px;
}
.v8-intent-card-inner {
flex-direction: column;
gap: 12px;
}
}
/* ═══════════════════════════════════════════════════════════════
§12 Social Proof（模块17）
═══════════════════════════════════════════════════════════════ */
/* Toast通知 */
.v8-notif-toast {
position: fixed;
bottom: 80px;
left: 20px;
z-index: var(--v8-z-chatbox);
background: var(--v8-surface);
border: 1px solid var(--v8-border);
border-radius: 10px;
padding: 12px 16px;
font-size: var(--v8-fs-sm);
color: var(--v8-text);
max-width: 280px;
box-shadow: var(--v8-shadow-md);
opacity: 0;
transform: translateY(20px);
transition: opacity .35s ease, transform .35s ease;
pointer-events: none;
}
.v8-notif-toast.v8-notif-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* PC WA Card */
.v8-wa-card {
position: fixed;
right: 20px;
bottom: 80px;
z-index: var(--v8-z-chatbox);
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
.v8-wa-card-toggle {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--v8-wa-brand);
color: #fff;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--v8-shadow-md);
transition: transform var(--v8-transition);
}
.v8-wa-card-toggle:hover { transform: scale(1.08); }
.v8-wa-card-panel {
background: var(--v8-surface);
border: 1px solid var(--v8-border);
border-radius: var(--v8-radius-lg);
padding: 16px;
width: 240px;
box-shadow: var(--v8-shadow-lg);
display: flex;
flex-direction: column;
gap: 10px;
}
.v8-wa-card-avatar {
position: relative;
width: 44px;
}
.v8-avatar-circle {
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, var(--v8-primary), var(--v8-accent));
color: #fff;
font-size: var(--v8-fs-lg);
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.v8-online-dot {
position: absolute;
bottom: 1px;
right: 1px;
width: 10px;
height: 10px;
background: #4ade80;
border: 2px solid #fff;
border-radius: 50%;
}
.v8-wa-card-info strong {
display: block;
font-size: var(--v8-fs-base);
color: var(--v8-dark);
}
.v8-online-label {
font-size: var(--v8-fs-xs);
color: #4ade80;
font-style: normal;
}
.v8-wa-card-info p {
font-size: var(--v8-fs-sm);
color: var(--v8-muted);
margin: 4px 0 0;
line-height: 1.4;
}
.v8-wa-card-cta {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
background: var(--v8-wa-brand);
color: #fff;
font-weight: 700;
font-size: var(--v8-fs-sm);
border-radius: var(--v8-radius);
text-decoration: none;
transition: filter var(--v8-transition);
}
.v8-wa-card-cta:hover { filter: brightness(1.08); color: #fff; }
/* UX-06: Trust Wall 量化 headline */
.v8-trust-wall-headline {
text-align: center;
font-size: clamp(1rem, 1.6vw, 1.15rem);
font-weight: 600;
color: var(--v8-dark);
margin: 0 0 16px;
letter-spacing: -.01em;
}
/* Trust Wall */
.v8-trust-wall {
overflow: hidden;
width: 100%;
}
.v8-trust-track {
display: flex;
gap: 24px;
animation: v8TrustScroll 30s linear infinite;
width: max-content;
}
.v8-trust-wall:hover .v8-trust-track { animation-play-state: paused; }
.v8-trust-logo {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
height: 48px;
filter: grayscale(1);
opacity: .5;
transition: filter .25s ease, opacity .25s ease;
}
.v8-trust-logo:hover { filter: none; opacity: 1; }
.v8-trust-logo img { height: 100%; width: auto; object-fit: contain; }
/* R24 第三阶段 P1-07：文字徽章 fallback 样式
- 复用 .v8-trust-track 的 marquee 滚动机制（无需新增动画）
- 视觉：胶囊形 outline + 对勾图标，B2B 公信力质感（区别于 chip 形态）
- 选择器优先级：.v8-trust-wall-badges 容器 + 内部 badge 项 */
.v8-trust-badge {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 16px;
border: 1.5px solid var(--v8-border);
border-radius: 999px;
font-size: var(--v8-fs-base);
font-weight: 600;
color: var(--v8-text);
background: rgba(255,255,255,.6);
white-space: nowrap;
transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.v8-trust-badge-icon {
flex-shrink: 0;
color: var(--v8-cta, #4a6b53);
}
.v8-trust-wall-badges:hover .v8-trust-badge {
/* hover 时整组提亮（marquee 已暂停） */
border-color: color-mix(in srgb, var(--v8-primary) 40%, var(--v8-border));
}
.v8-trust-badge:hover {
border-color: var(--v8-primary);
color: var(--v8-primary);
}
@media (max-width: 1024px) {
.v8-wa-card { display: none !important; }
.v8-notif-toast { bottom: 70px; }
}
/* ═══════════════════════════════════════════════════════════════
§13 H1 隔离（模块15）
═══════════════════════════════════════════════════════════════ */
/* ob_start未生效时的CSS保底 */
.v8-h1-removed h1 { display: none !important; }
.v8-h1-removed .entry-header { display: none !important; }
.v8-h1-removed .page-header { display: none !important; }
.v8-h1-removed .entry-content { margin-top: 0; padding-top: 0; }
/* CTA按钮短代码 */
.v8-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
background: var(--v8-cta);
color: #fff;
font-size: var(--v8-fs-base);
font-weight: 700;
font-family: var(--v8-font);
border: none;
border-radius: var(--v8-radius);
text-decoration: none;
min-height: 44px;
cursor: pointer;
transition: background var(--v8-transition), transform var(--v8-transition);
}
.v8-cta-btn:hover {
background: var(--v8-cta-hover);
color: #fff;
transform: translateY(-1px);
}
/* ═══════════════════════════════════════════════════════════════
§14 Trust Wall / Topic Hub（补充）
═══════════════════════════════════════════════════════════════ */
/* Topic Hub container */
.v8-topic-hub-wrap { position: relative; min-height: 120px; }
.v8-topic-hub { padding: 8px 0; }
.v8-topic-longtext {
font-size: var(--v8-fs-base);
line-height: 1.7;
color: var(--v8-text);
}
.v8-topic-longtext p { margin-bottom: 1em; }
/* Soft-pulse animation (shared) */
@keyframes v8SoftPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(107,143,113,.4); }
50% { box-shadow: 0 0 0 8px rgba(107,143,113,0); }
}
.v8-soft-pulse { animation: v8SoftPulse 2.4s ease-in-out infinite; }
/* ═══════════════════════════════════════════════════════════════
§15 文章 / 归档 / 分类模板（R16 补全）
═══════════════════════════════════════════════════════════════ */
/* ── Topbar（GlobalWork 控制，header.php 直接输出）── */
.v8-topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 36px;
z-index: var(--v8-z-topbar);
font-size: var(--v8-fs-xs);
font-weight: 500;
}
.v8-topbar-inner {
max-width: 1200px;
margin-inline: auto;
padding-inline: clamp(16px, 4vw, 40px);
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.v8-topbar-text {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.v8-topbar-contacts {
display: flex;
align-items: center;
gap: 16px;
flex-shrink: 0;
}
/* UX-01: Language switcher placeholder — content injected via do_action('v8_language_switcher') */
.v8-topbar-lang {
display: flex;
align-items: center;
flex-shrink: 0;
gap: 8px;
font-size: var(--v8-fs-xs);
}
.v8-topbar-lang:empty { display: none; }
.v8-topbar-link {
display: flex;
align-items: center;
gap: 5px;
color: inherit;
opacity: .85;
transition: opacity var(--v8-transition);
text-decoration: none;
}
.v8-topbar-link:hover {
opacity: 1;
color: inherit;
}
/* Topbar存在时 body padding-top 增加 */
body.v8-engine-active.admin-bar .v8-topbar { top: 32px; }
@media (max-width: 1024px) {
body.v8-engine-active.admin-bar .v8-topbar { top: 46px; }
}
/* 单篇文章布局 */
.v8-single-layout {
display: grid;
grid-template-columns: 1fr 280px;
gap: 40px;
align-items: start;
}
.v8-single-primary {
min-width: 0;
}
.v8-article-cats {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.v8-article-meta {
display: flex;
align-items: center;
gap: 16px;
color: var(--v8-muted);
font-size: var(--v8-fs-sm);
margin-top: 12px;
}
.v8-meta-date,
.v8-meta-read {
display: flex;
align-items: center;
gap: 5px;
}
.v8-article-thumb {
margin: 24px 0;
border-radius: var(--v8-radius-lg);
overflow: hidden;
}
.v8-hero-img {
width: 100%;
aspect-ratio: 16/7;
object-fit: cover;
}
.v8-article-footer {
margin-top: 40px;
padding-top: 24px;
border-top: 1px solid var(--v8-border);
}
.v8-article-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 24px;
}
.v8-tag-link {
font-size: var(--v8-fs-sm);
color: var(--v8-muted);
padding: 3px 10px;
border: 1px solid var(--v8-border);
border-radius: 20px;
transition: all var(--v8-transition);
}
.v8-tag-link:hover {
border-color: var(--v8-primary);
color: var(--v8-primary);
}
/* CONV-04: 文章末尾转化 CTA */
.v8-article-cta {
margin: 36px 0;
padding: 32px 36px;
background: linear-gradient(135deg, var(--v8-primary) 0%, #1a56db 100%);
border-radius: var(--v8-radius-lg, 12px);
color: #fff;
}
.v8-article-cta-inner {
max-width: 640px;
}
.v8-article-cta-title {
font-size: clamp(1.2rem, 2.2vw, 1.5rem);
font-weight: 700;
margin: 0 0 10px;
color: #fff;
}
.v8-article-cta-desc {
font-size: var(--v8-fs-base);
color: rgba(255,255,255,.88);
margin: 0 0 20px;
line-height: 1.55;
}
.v8-article-cta-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
/* post-navigation */
.post-navigation {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.nav-previous, .nav-next {
padding: 16px;
border: 1px solid var(--v8-border);
border-radius: var(--v8-radius);
transition: border-color var(--v8-transition);
}
.nav-previous:hover, .nav-next:hover {
border-color: var(--v8-primary);
}
.v8-nav-label {
display: block;
font-size: var(--v8-fs-xs);
color: var(--v8-muted);
text-transform: uppercase;
letter-spacing: .06em;
margin-bottom: 4px;
}
.v8-nav-title {
display: block;
font-size: var(--v8-fs-base);
font-weight: 600;
color: var(--v8-text);
}
/* 相关文章 */
.v8-related-posts {
margin-top: 48px;
padding-top: 40px;
border-top: 1px solid var(--v8-border);
}
.v8-related-title {
font-size: var(--v8-fs-md);
margin-bottom: 20px;
}
/* 卡片 read more */
.v8-card-meta {
font-size: var(--v8-fs-xs);
color: var(--v8-muted);
margin-bottom: 6px;
}
.v8-card-read-more {
display: inline-block;
margin-top: 10px;
font-size: var(--v8-fs-sm);
font-weight: 600;
color: var(--v8-primary);
}
/* 404 */
.v8-404-wrap {
text-align: center;
padding: 80px 20px;
max-width: 560px;
margin-inline: auto;
}
.v8-404-number {
font-size: clamp(5rem, 18vw, 9rem);
font-weight: 800;
color: var(--v8-border);
line-height: 1;
margin-bottom: 16px;
}
.v8-404-title {
font-size: clamp(1.5rem, 4vw, 2rem);
margin-bottom: 12px;
}
.v8-404-desc {
color: var(--v8-muted);
margin-bottom: 28px;
}
.v8-404-actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 28px;
}
/* no results */
.v8-no-results {
text-align: center;
padding: 60px 20px;
color: var(--v8-muted);
}
@media (max-width: 1024px) {
.v8-single-layout {
grid-template-columns: 1fr;
}
/* ───────────────────────────────────────────────────────────────
R24 P0-02: Topbar 移动端 icon-only 模式（替代 R23 全屏蔽）
- 文字标签隐藏，icon 保留为高密度 tap-to-call / tap-to-email
- 子开关 data-mobile-phone / data-mobile-email 控制单独显隐
─────────────────────────────────────────────────────────────── */
.v8-topbar-contacts { gap: 14px; }
.v8-topbar-link-text { display: none; }
.v8-topbar-link {
min-width: 36px;
min-height: 36px;
padding: 6px 8px;
justify-content: center;
}
.v8-topbar-link svg { width: 16px; height: 16px; }
/* 单字段子开关 */
.v8-topbar[data-mobile-phone="0"] .v8-topbar-phone { display: none; }
.v8-topbar[data-mobile-email="0"] .v8-topbar-email { display: none; }
/* 双关闭兜底——若 phone & email 都关，整个容器不占空间 */
.v8-topbar[data-mobile-phone="0"][data-mobile-email="0"] .v8-topbar-contacts { display: none; }
}
/* R24 P0-02: ≤640px——announcement 文字让位给 contacts（icon 优先级更高） */
@media (max-width: 640px) {
.v8-topbar-inner { gap: 8px; padding-inline: 12px; }
.v8-topbar-text { max-width: 50%; font-size: var(--v8-fs-xs); }
.v8-topbar-contacts { gap: 10px; }
}
@media (max-width: 640px) {
.v8-post-grid {
grid-template-columns: 1fr;
}
.post-navigation {
grid-template-columns: 1fr;
}
.v8-404-actions {
flex-direction: column;
align-items: center;
}
}
/* ── §15 补充：架构清洁 utility（R16）── */
/* 替代 font-style:normal inline → v8-footer.php */
.v8-footer-address {
font-style: normal;
}
/* 替代 display:none inline → v8-tracking.php CF7 hidden fields */
.v8-hidden {
display: none !important;
}
/* Topic Hub 内容态（loaded） → v8-interactions.php */
.v8-hub-content {
opacity: 0;
transition: opacity .4s;
}
.v8-hub-content--loaded {
opacity: 1;
}
/* industry archive */
.v8-industry-archive .v8-tax-header {
border-bottom: 1px solid var(--v8-border);
padding-bottom: 24px;
}
@media (max-width: 1024px) {
.v8-post-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.v8-post-grid {
grid-template-columns: 1fr;
}
.v8-archive-header,
.v8-tax-header {
margin-bottom: 20px;
}
}
/* ── Topbar 动态颜色（修复③：从CSS变量读取，替代 inline style）── */
.v8-topbar {
background: var(--v8-topbar-bg, #1c2433);
color: var(--v8-topbar-color, #ffffff);
}
.v8-topbar-link {
color: var(--v8-topbar-color, #ffffff);
}
/* ═══════════════════════════════════════════════════════════════
§R19 P2 — reCAPTCHA badge 视觉避让
默认 google badge 在右下与 Chatbox FAB / Plan B 重叠
═══════════════════════════════════════════════════════════════ */
.grecaptcha-badge {
z-index: calc(var(--v8-z-chatbox, 1300) - 100) !important;
bottom: 90px !important;
}
@media (max-width: 1024px) {
.grecaptcha-badge {
/* 移动端 Plan B 占据 56px 底部,badge 再上移 */
bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 90px) !important;
}
}
/* Honeypot 字段防御性补强(若内联 style 被某些插件 strip) */
.v8-hp-wrap,
.v8-hp-wrap input {
position: absolute !important;
left: -9999px !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
/* ═══════════════════════════════════════════════════════════════
§R19 P3 — 移动端 Mega Walker 适配 + Hotmap 标签恢复
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
/* 移动端禁用 mega panel 的 desktop 复杂结构 */
.v8-mobile-menu .v8-mega-panel,
.v8-mobile-menu .v8-dropdown-panel {
position: static !important;
width: auto !important;
background: transparent !important;
box-shadow: none !important;
border: none !important;
padding: 0 !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
.v8-mobile-menu .v8-mega-inner {
display: block !important;
padding: 0 0 8px 20px !important;
}
.v8-mobile-menu .v8-mega-list,
.v8-mobile-menu .v8-sub-menu {
list-style: none;
margin: 0;
padding: 0;
}
/* 移动端隐藏 mega 右侧装饰区(process card / case 双栏) */
.v8-mobile-menu .v8-mega-right,
.v8-mobile-menu .v8-nav-process-card,
.v8-mobile-menu .v8-nav-footer-hook {
display: none !important;
}
/* Hotmap 标签在移动端可见(走通用样式即可,这里调小尺寸适配窄屏) */
.v8-mobile-menu .v8-hot-tag {
font-size: var(--v8-fs-xs);
padding: 2px 6px;
margin-left: 6px;
vertical-align: middle;
}
}
/* ═══════════════════════════════════════════════════════════════
§16 Marketing Skeleton (R23 P0-12)
- Hero / Service Grid / Process Steps / Trust / Bottom CTA / Case Study
- 移动端断点仅 1024px / 640px (CR 全局规约)
═══════════════════════════════════════════════════════════════ */
/* ── Hero inner ── (复用 .v8-hero-section 已有渐变背景) */
.v8-hero-inner {
max-width: 760px;
display: flex;
flex-direction: column;
gap: 18px;
}
.v8-hero-title {
font-size: clamp(1.75rem, 4vw, 2.75rem);
font-weight: 800;
letter-spacing: -.02em;
line-height: 1.15;
color: #fff;
margin: 0;
}
.v8-hero-sub {
font-size: clamp(1rem, 1.6vw, 1.125rem);
color: rgba(255,255,255,.86);
line-height: 1.55;
margin: 0;
max-width: 620px;
}
.v8-hero-cta {
align-self: flex-start;
font-size: var(--v8-fs-base);
padding: 14px 28px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
}
.v8-hero-trust-row {
list-style: none;
margin: 12px 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 16px 24px;
font-size: var(--v8-fs-sm);
color: rgba(255,255,255,.78);
}
.v8-hero-trust-row li {
display: inline-flex;
align-items: center;
gap: 6px;
}
/* CONV-03: Hero WA 并联入口 */
.v8-hero-wa-link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 10px;
font-size: var(--v8-fs-sm);
color: rgba(255,255,255,.85);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: rgba(255,255,255,.45);
transition: color .2s, text-decoration-color .2s;
}
.v8-hero-wa-link:hover,
.v8-hero-wa-link:focus-visible {
color: #fff;
text-decoration-color: rgba(255,255,255,.9);
}
/* ── Section header (shared across Service / Process / Trust) ── */
.v8-section-head {
text-align: center;
margin: 0 auto 36px;
max-width: 720px;
}
.v8-section-title {
font-size: clamp(1.5rem, 2.8vw, 2rem);
font-weight: 700;
color: var(--v8-dark);
margin: 0 0 10px;
letter-spacing: -.015em;
}
.v8-section-sub {
font-size: var(--v8-fs-base);
color: var(--v8-muted);
line-height: 1.55;
margin: 0;
}
/* ── Service Grid (6 cards, 3-col → 2-col → 1-col) ── */
.v8-service-grid-section {
padding: clamp(48px, 7vw, 88px) 0;
background: var(--v8-bg);
}
.v8-service-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.v8-service-card {
background: var(--v8-surface);
border: 1px solid var(--v8-border);
border-radius: var(--v8-radius-lg);
padding: 28px 24px;
display: flex;
flex-direction: column;
gap: 10px;
transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.v8-service-card:hover {
box-shadow: var(--v8-shadow-md);
border-color: rgba(74,107,83,.3); /* CTA 色淡边 */
transform: translateY(-2px);
}
.v8-service-icon {
font-size: var(--v8-fs-2xl);
line-height: 1;
}
.v8-service-title {
font-size: var(--v8-fs-md);
font-weight: 700;
color: var(--v8-dark);
margin: 0;
}
.v8-service-desc {
font-size: var(--v8-fs-base);
color: var(--v8-text);
line-height: 1.6;
margin: 0;
}
/* ── Process Steps (vertical timeline, 7 steps) ── */
.v8-process-section {
padding: clamp(48px, 7vw, 88px) 0;
background: var(--v8-surface);
}
.v8-process-steps {
list-style: none;
margin: 0 auto;
padding: 0;
max-width: 760px;
display: flex;
flex-direction: column;
gap: 0;
}
.v8-process-step {
display: flex;
gap: 20px;
position: relative;
padding: 0 0 32px;
}
.v8-process-step:not(:last-child)::before {
content: '';
position: absolute;
left: 19px;
top: 44px;
bottom: 0;
width: 2px;
background: linear-gradient(to bottom, var(--v8-border) 0%, var(--v8-border) 50%, transparent 100%);
}
.v8-step-num {
flex: 0 0 40px;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--v8-cta);
color: #fff;
font-weight: 800;
font-size: var(--v8-fs-base);
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
box-shadow: 0 0 0 4px var(--v8-surface), 0 0 0 5px rgba(74,107,83,.15);
}
.v8-step-body {
flex: 1;
padding-top: 6px;
}
.v8-step-title {
font-size: var(--v8-fs-md);
font-weight: 700;
color: var(--v8-dark);
margin: 0 0 6px;
}
.v8-step-desc {
font-size: var(--v8-fs-base);
color: var(--v8-text);
line-height: 1.6;
margin: 0;
}
/* UX-03: Process steps compact mode + expand button */
.v8-process-expand { display: none; }
.v8-process-section.is-compact .v8-process-step:nth-child(n+5) { display: none; }
.v8-process-section.is-compact .v8-process-expand {
display: flex;
justify-content: center;
margin-top: 24px;
}
.v8-process-expand-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 24px;
border: 2px solid var(--v8-primary);
border-radius: var(--v8-radius, 6px);
background: transparent;
color: var(--v8-primary);
font-size: var(--v8-fs-base);
font-weight: 600;
cursor: pointer;
transition: background var(--v8-transition), color var(--v8-transition);
}
.v8-process-expand-btn:hover,
.v8-process-expand-btn:focus-visible {
background: var(--v8-primary);
color: #fff;
}
/* Mobile: auto-compact any process section unless already expanded */
@media (max-width: 640px) {
.v8-process-section:not(.is-expanded) .v8-process-step:nth-child(n+5) { display: none; }
.v8-process-section:not(.is-expanded) .v8-process-expand {
display: flex;
justify-content: center;
margin-top: 24px;
}
}
/* ── Trust Section wrapper (existing .v8-trust-wall stays unchanged) ── */
.v8-trust-section {
padding: clamp(40px, 5vw, 64px) 0;
background: var(--v8-bg);
border-top: 1px solid var(--v8-border);
}
/* ── Bottom CTA card ── */
.v8-bottom-cta-section {
padding: clamp(40px, 6vw, 80px) 0;
background: var(--v8-surface);
}
.v8-bottom-cta-card {
background: var(--v8-hero-gradient);
color: #fff;
text-align: center;
padding: clamp(36px, 5vw, 56px) clamp(24px, 5vw, 48px);
border-radius: var(--v8-radius-lg);
max-width: 880px;
margin: 0 auto;
}
.v8-bottom-cta-card h2 {
color: #fff;
font-size: clamp(1.375rem, 2.4vw, 1.75rem);
margin: 0 0 12px;
font-weight: 700;
}
.v8-bottom-cta-card p {
color: rgba(255,255,255,.85);
font-size: var(--v8-fs-base);
margin: 0 0 24px;
line-height: 1.55;
}
.v8-bottom-cta-card .v8-btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
}
/* ── Landing body ── */
.v8-landing-body {
padding: clamp(40px, 6vw, 72px) 0;
background: var(--v8-surface);
}
/* ── Case Study ── */
.v8-case-article {
padding: clamp(32px, 5vw, 64px) 0;
background: var(--v8-surface);
}
.v8-case-header { margin-bottom: 28px; }
.v8-case-title {
font-size: clamp(1.625rem, 3.2vw, 2.25rem);
font-weight: 800;
color: var(--v8-dark);
margin: 0 0 12px;
letter-spacing: -.02em;
}
.v8-case-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
}
.v8-case-tag {
font-size: var(--v8-fs-xs);
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
background: var(--v8-bg);
color: var(--v8-text);
border: 1px solid var(--v8-border);
}
.v8-case-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin: 28px 0;
padding: 24px;
background: var(--v8-bg);
border-radius: var(--v8-radius-lg);
border: 1px solid var(--v8-border);
}
.v8-case-stat {
display: flex;
flex-direction: column;
gap: 4px;
text-align: center;
}
.v8-case-stat-label {
font-size: var(--v8-fs-xs);
text-transform: uppercase;
letter-spacing: .08em;
color: var(--v8-muted);
}
.v8-case-stat-value {
font-size: clamp(1.25rem, 2.4vw, 1.75rem);
font-weight: 800;
color: var(--v8-cta); /* P0-10 修复后 5.97:1 AA */
letter-spacing: -.01em;
}
.v8-case-csr {
display: flex;
flex-direction: column;
gap: 24px;
margin: 36px 0;
}
.v8-case-block h2 {
font-size: var(--v8-fs-md);
font-weight: 700;
color: var(--v8-cta);
margin: 0 0 8px;
text-transform: uppercase;
letter-spacing: .06em;
}
.v8-case-block p {
font-size: var(--v8-fs-base);
line-height: 1.7;
color: var(--v8-text);
margin: 0;
}
.v8-case-content {
margin: 32px 0;
font-size: var(--v8-fs-base);
line-height: 1.7;
color: var(--v8-text);
}
.v8-case-cta {
margin-top: 40px;
padding: 32px;
text-align: center;
background: var(--v8-bg);
border-radius: var(--v8-radius-lg);
border: 1px solid var(--v8-border);
}
.v8-case-cta h3 {
font-size: var(--v8-fs-lg);
font-weight: 700;
margin: 0 0 16px;
color: var(--v8-dark);
}
/* ── Tablet 1024 ── */
@media (max-width: 1024px) {
.v8-service-grid { grid-template-columns: repeat(2, 1fr); }
.v8-case-stats { grid-template-columns: repeat(3, 1fr); }
}
/* ── Mobile 640 ── */
@media (max-width: 640px) {
.v8-service-grid { grid-template-columns: 1fr; gap: 14px; }
.v8-service-card { padding: 22px 18px; }
.v8-section-head { margin-bottom: 28px; }
.v8-process-step { padding-bottom: 24px; gap: 14px; }
.v8-step-num { flex-basis: 34px; width: 34px; height: 34px; font-size: var(--v8-fs-base); }
.v8-process-step:not(:last-child)::before { left: 16px; top: 38px; }
.v8-case-stats { grid-template-columns: 1fr; padding: 18px; }
.v8-bottom-cta-card { padding: 28px 20px; }
.v8-hero-trust-row { gap: 8px 16px; font-size: var(--v8-fs-sm); }
}
/* ═══════════════════════════════════════════════════════════════
§27 R24 P0-07: 移动端搜索入口（图标按钮 + 全屏 overlay）
行业基准：JingSourcing / NicheSources 顶部固定搜索框
- 桌面（>1024px）：搜索按钮隐藏（PC 端依赖 mega menu 导航）
- 移动（≤1024px）：搜索按钮显示在 hamburger 左侧
- 触屏命中区：≥44px（WCAG 2.5.5 AA）
- overlay：全屏（100dvh），输入框自动 focus，搜索词建议 chips
═══════════════════════════════════════════════════════════════ */
/* 搜索按钮（默认隐藏，≤1024px 显示） */
.v8-mobile-search-toggle {
display: none;
width: 44px;
height: 44px;
padding: 0;
background: none;
border: none;
cursor: pointer;
border-radius: var(--v8-radius);
color: var(--v8-dark);
align-items: center;
justify-content: center;
transition: background var(--v8-transition);
-webkit-tap-highlight-color: transparent;
}
.v8-mobile-search-toggle:hover {
background: rgba(122,143,166,.1);
}
.v8-mobile-search-toggle:active {
background: rgba(122,143,166,.18);
transition: background 0s;
}
.v8-mobile-search-toggle:focus-visible {
outline: 2px solid var(--v8-primary);
outline-offset: 2px;
}
/* Overlay（默认隐藏） */
.v8-mobile-search-overlay {
display: none;
position: fixed;
inset: 0;
z-index: var(--v8-z-modal);
background: var(--v8-surface);
/* dvh 兼容键盘弹起；vh fallback */
min-height: 100vh;
min-height: 100dvh;
opacity: 0;
transition: opacity .2s ease;
}
.v8-mobile-search-overlay.v8-active {
display: block;
opacity: 1;
}
.v8-mobile-search-inner {
padding: calc(16px + env(safe-area-inset-top)) 16px 16px;
max-width: 720px;
margin: 0 auto;
}
.v8-mobile-search-form {
display: block;
}
.v8-mobile-search-row {
display: flex;
align-items: center;
gap: 8px;
background: var(--v8-bg);
border: 1.5px solid var(--v8-border);
border-radius: var(--v8-radius);
padding: 6px 8px 6px 14px;
transition: border-color var(--v8-transition), box-shadow var(--v8-transition);
}
.v8-mobile-search-row:focus-within {
border-color: var(--v8-primary);
box-shadow: 0 0 0 3px rgba(122,143,166,.15);
}
.v8-mobile-search-icon {
flex-shrink: 0;
color: var(--v8-muted);
}
.v8-mobile-search-input {
flex: 1 1 auto;
border: none;
background: transparent;
padding: 12px 0;
font-size: var(--v8-fs-base); /* 防 iOS auto-zoom */
font-family: var(--v8-font);
color: var(--v8-text);
min-width: 0;
outline: none;
}
.v8-mobile-search-input::placeholder {
color: var(--v8-muted);
}
.v8-mobile-search-close {
flex-shrink: 0;
width: 40px;
height: 40px;
padding: 0;
background: none;
border: none;
cursor: pointer;
color: var(--v8-muted);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: color var(--v8-transition), background var(--v8-transition);
-webkit-tap-highlight-color: transparent;
}
.v8-mobile-search-close:hover,
.v8-mobile-search-close:focus-visible {
color: var(--v8-dark);
background: rgba(0,0,0,.06);
outline: none;
}
/* 搜索词建议 chips（行业关键词：MOQ/BSCI/FBA） */
.v8-mobile-search-hints {
margin-top: 16px;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.v8-mobile-search-hint-label {
font-size: var(--v8-fs-sm);
color: var(--v8-muted);
font-weight: 500;
}
.v8-mobile-search-chip {
background: var(--v8-bg);
border: 1px solid var(--v8-border);
border-radius: 999px;
padding: 6px 14px;
font-size: var(--v8-fs-sm);
font-family: var(--v8-font);
color: var(--v8-text);
cursor: pointer;
transition: background var(--v8-transition), border-color var(--v8-transition);
-webkit-tap-highlight-color: transparent;
/* 触屏达标 */
min-height: 32px;
}
.v8-mobile-search-chip:hover,
.v8-mobile-search-chip:focus-visible {
background: var(--v8-surface);
border-color: var(--v8-primary);
outline: none;
}
.v8-mobile-search-chip:active {
background: rgba(122,143,166,.15);
transition: background 0s;
}
/* 显隐响应式：≤1024px 显示搜索按钮（与 hamburger 同断点） */
@media (max-width: 1024px) {
.v8-mobile-search-toggle {
display: inline-flex;
}
/* 缩窄 CTA 文字让出空间（极小屏） */
}
/* >1024px 强制隐藏 overlay（防止桌面误触 toggle） */
@media (min-width: 1025px) {
.v8-mobile-search-overlay {
display: none !important;
}
}
/* 极小屏（≤380px）：CTA 按钮收缩 padding，避免行溢出 */
@media (max-width: 380px) {
.v8-header-actions .v8-nav-cta {
padding-left: 12px;
padding-right: 12px;
font-size: var(--v8-fs-sm);
}
}
/* body lock：overlay 打开时锁背景滚动（JS 加 v8-search-lock class） */
body.v8-header-lock,
body.v8-search-lock {
overflow: hidden;
touch-action: none;
}
/* ═══════════════════════════════════════════════════════════════
§28 R24 P0-07 补丁: 搜索结果页空结果行业化兜底
- 三层结构：标题 + 类目 grid + RFQ CTA + retry details
- 桌面：类目 2 列；移动 ≤640px：单列
═══════════════════════════════════════════════════════════════ */
.v8-search-empty {
max-width: 720px;
margin: 40px auto 60px;
padding: 32px 28px;
background: var(--v8-surface);
border: 1px solid var(--v8-border);
border-radius: var(--v8-radius-lg);
text-align: center;
}
.v8-search-empty-icon {
display: inline-flex;
width: 80px;
height: 80px;
margin: 0 auto 16px;
align-items: center;
justify-content: center;
background: var(--v8-bg);
border-radius: 50%;
color: var(--v8-muted);
}
.v8-search-empty-title {
font-size: var(--v8-fs-lg);
font-weight: 700;
color: var(--v8-dark);
margin: 0 0 8px;
line-height: 1.4;
}
.v8-search-empty-title strong {
color: var(--v8-primary);
word-break: break-word;
}
.v8-search-empty-lead {
font-size: var(--v8-fs-base);
color: var(--v8-muted);
line-height: 1.6;
margin: 0 0 28px;
}
.v8-search-empty-cats {
text-align: left;
margin: 0 0 28px;
padding: 20px;
background: var(--v8-bg);
border-radius: var(--v8-radius);
}
.v8-search-empty-subtitle {
font-size: var(--v8-fs-sm);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--v8-muted);
margin: 0 0 14px;
}
.v8-search-empty-cat-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.v8-search-empty-cat-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 12px 14px;
background: var(--v8-surface);
border: 1px solid var(--v8-border);
border-radius: var(--v8-radius);
color: var(--v8-text);
font-size: var(--v8-fs-base);
font-weight: 500;
text-decoration: none;
/* 触屏达标 */
min-height: 44px;
transition: border-color var(--v8-transition), color var(--v8-transition), transform var(--v8-transition);
}
.v8-search-empty-cat-link:hover,
.v8-search-empty-cat-link:focus-visible {
border-color: var(--v8-primary);
color: var(--v8-primary);
transform: translateX(2px);
outline: none;
}
.v8-search-empty-cat-link svg {
flex-shrink: 0;
color: var(--v8-muted);
transition: color var(--v8-transition);
}
.v8-search-empty-cat-link:hover svg,
.v8-search-empty-cat-link:focus-visible svg {
color: var(--v8-primary);
}
.v8-search-empty-rfq {
margin: 0 0 24px;
}
.v8-search-empty-rfq .v8-btn-cta {
/* 与 P0-10 CTA 对比度配色一致：#4a6b53 / 5.97:1 AA */
background: var(--v8-cta);
color: #fff;
padding: 14px 32px;
font-size: var(--v8-fs-base);
font-weight: 700;
border-radius: var(--v8-radius);
display: inline-block;
text-decoration: none;
min-height: 48px;
line-height: 1.2;
transition: background var(--v8-transition), transform var(--v8-transition);
}
.v8-search-empty-rfq .v8-btn-cta:hover {
background: var(--v8-cta-hover);
transform: translateY(-1px);
}
.v8-search-empty-rfq-note {
margin: 12px 0 0;
font-size: var(--v8-fs-sm);
color: var(--v8-muted);
line-height: 1.5;
}
.v8-search-empty-retry {
margin-top: 16px;
padding-top: 20px;
border-top: 1px solid var(--v8-border);
font-size: var(--v8-fs-sm);
}
.v8-search-empty-retry summary {
cursor: pointer;
color: var(--v8-muted);
padding: 4px;
transition: color var(--v8-transition);
display: inline-block;
}
.v8-search-empty-retry summary:hover {
color: var(--v8-primary);
}
.v8-search-empty-retry[open] summary {
margin-bottom: 12px;
}
@media (max-width: 640px) {
.v8-search-empty {
margin: 24px 12px 40px;
padding: 24px 18px;
}
.v8-search-empty-cat-list {
grid-template-columns: 1fr;
}
.v8-search-empty-title {
font-size: var(--v8-fs-md);
}
.v8-search-empty-rfq .v8-btn-cta {
width: 100%;
box-sizing: border-box;
}
}
/* ═══════════════════════════════════════════════════════════════
§29 R24 P1-06: Hot-tag 移动端独立隐藏开关
admin 勾选 hide_mobile → PHP 输出 .v8-hot-tag-hide-mobile modifier class
- 桌面（>1024px）：modifier 不生效（hot-tag 正常显示）
- 移动（≤1024px）：modifier 命中 → display:none（mega menu 折叠列表更整洁）
断点 1024px 与 hamburger / mobile-search-toggle 同步
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
.v8-hot-tag.v8-hot-tag-hide-mobile {
display: none !important;
}
}
/* ═══════════════════════════════════════════════════════════════
R25 P2-01: RFQ Builder 一键采购需求向导
- .v8-rfq-root：触发卡片容器
- .v8-rfq-overlay + .v8-rfq-sheet：wizard 弹窗
- 桌面：modal 居中 / 移动端：bottom-sheet 100dvh
- 横屏 max-height:500px 兜底
═══════════════════════════════════════════════════════════════ */
/* ── 触发卡片 ──────────────────────────────────────────────── */
.v8-rfq-root {
margin: 24px 0;
}
.v8-rfq-trigger-card {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 24px;
text-align: center;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.v8-rfq-title {
margin: 0 0 8px;
font-size: var(--v8-fs-xl);
color: var(--v8-dark, #1c2433);
font-weight: 700;
}
.v8-rfq-desc {
margin: 0 0 20px;
color: #64748b;
font-size: var(--v8-fs-base);
line-height: 1.5;
}
.v8-rfq-trigger {
display: inline-block;
padding: 14px 28px;
font-size: var(--v8-fs-base);
font-weight: 600;
background: var(--v8-cta, #4a6b53);
color: #fff;
border: none;
border-radius: var(--v8-radius, 6px);
cursor: pointer;
min-height: 48px;
transition: background 0.2s, transform 0.1s;
}
.v8-rfq-trigger:hover {
background: var(--v8-dark, #1c2433);
}
.v8-rfq-trigger:active {
transform: scale(0.98);
}
.v8-rfq-bullets {
list-style: none;
padding: 16px 0 0;
margin: 16px 0 0;
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
border-top: 1px solid #f1f5f9;
font-size: var(--v8-fs-sm);
color: #475569;
}
.v8-rfq-bullets li {
margin: 0;
}
/* 双端都禁用时的降级 */
.v8-rfq-disabled {
text-align: center;
padding: 24px;
}
.v8-rfq-noscript {
background: #fef3c7;
border: 1px solid #fde68a;
padding: 12px;
border-radius: 6px;
color: #92400e;
font-size: var(--v8-fs-sm);
}
/* ── Overlay + Sheet (桌面 modal 居中) ──────────────────────── */
.v8-rfq-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.6);
z-index: 9000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.v8-rfq-overlay[hidden] {
display: none !important;
}
.v8-rfq-sheet {
background: #fff;
border-radius: 12px;
width: 100%;
max-width: 640px;
max-height: calc(100vh - 48px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 24px;
position: relative;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
body.v8-rfq-body-lock {
overflow: hidden;
}
/* ── 关闭按钮 ─────────────────────────────────────────────── */
.v8-rfq-close {
position: absolute;
top: 12px;
right: 12px;
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
border: none;
background: transparent;
font-size: var(--v8-fs-lg);
cursor: pointer;
color: #64748b;
border-radius: 50%;
z-index: 2;
}
.v8-rfq-close:hover {
background: #f1f5f9;
color: #0f172a;
}
/* ── 进度条 ──────────────────────────────────────────────── */
.v8-rfq-progress {
display: flex;
align-items: center;
margin: 8px 0 24px;
padding-right: 32px; /* 给 close 按钮留空间 */
}
.v8-rfq-step-dot {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.v8-rfq-step-num {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #e2e8f0;
color: #64748b;
font-weight: 700;
font-size: var(--v8-fs-sm);
transition: background 0.3s, color 0.3s;
}
.v8-rfq-step-dot.is-active .v8-rfq-step-num {
background: var(--v8-cta, #4a6b53);
color: #fff;
}
.v8-rfq-step-dot.is-complete .v8-rfq-step-num {
background: var(--v8-cta, #4a6b53);
color: #fff;
}
.v8-rfq-step-dot.is-complete .v8-rfq-step-num::after {
content: '✓';
}
.v8-rfq-step-dot.is-complete .v8-rfq-step-num {
font-size: 0;
}
.v8-rfq-step-dot.is-complete .v8-rfq-step-num::after {
font-size: var(--v8-fs-base);
}
.v8-rfq-step-label {
font-size: var(--v8-fs-xs);
color: #64748b;
text-align: center;
white-space: nowrap;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
}
.v8-rfq-step-dot.is-active .v8-rfq-step-label {
color: var(--v8-dark, #1c2433);
font-weight: 600;
}
.v8-rfq-step-line {
flex: 1;
height: 2px;
background: #e2e8f0;
margin: 0 8px;
margin-top: -16px;
}
/* ── 表单 ──────────────────────────────────────────────── */
.v8-rfq-form {
display: flex;
flex-direction: column;
}
.v8-rfq-step-title {
margin: 0 0 4px;
font-size: var(--v8-fs-lg);
color: var(--v8-dark, #1c2433);
font-weight: 700;
}
.v8-rfq-step-desc {
margin: 0 0 20px;
color: #64748b;
font-size: var(--v8-fs-sm);
}
.v8-rfq-field {
margin-bottom: 16px;
}
.v8-rfq-label {
display: block;
font-weight: 600;
font-size: var(--v8-fs-sm);
color: #334155;
margin-bottom: 6px;
}
.v8-rfq-req {
color: #dc2626;
}
.v8-rfq-input {
width: 100%;
box-sizing: border-box;
padding: 12px 14px;
font-size: var(--v8-fs-base); /* >= 16px 防 iOS 缩放 */
border: 1px solid #cbd5e1;
border-radius: var(--v8-radius, 6px);
background: #fff;
font-family: inherit;
min-height: 48px;
transition: border-color 0.15s, box-shadow 0.15s;
}
.v8-rfq-input:focus {
outline: none;
border-color: var(--v8-cta, #4a6b53);
box-shadow: 0 0 0 3px rgba(74, 107, 83, 0.15);
}
.v8-rfq-input.is-invalid {
border-color: #dc2626;
}
textarea.v8-rfq-input {
resize: vertical;
min-height: 100px;
}
select.v8-rfq-input {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
}
.v8-rfq-err {
font-size: var(--v8-fs-sm);
color: #dc2626;
margin-top: 4px;
min-height: 1em;
}
/* ── Checkbox 多选组 ───────────────────────────────────── */
.v8-rfq-checkgroup {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.v8-rfq-check {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border: 1px solid #e2e8f0;
border-radius: var(--v8-radius, 6px);
cursor: pointer;
font-size: var(--v8-fs-sm);
min-height: 44px;
transition: background 0.15s, border-color 0.15s;
}
.v8-rfq-check:hover {
background: #f8fafc;
}
.v8-rfq-check input[type="checkbox"] {
width: 18px;
height: 18px;
margin: 0;
flex-shrink: 0;
accent-color: var(--v8-cta, #4a6b53);
}
.v8-rfq-check input[type="checkbox"]:checked + span {
font-weight: 600;
color: var(--v8-cta, #4a6b53);
}
/* ── 文件上传区 ────────────────────────────────────────── */
.v8-rfq-file-zone {
border: 2px dashed #cbd5e1;
border-radius: var(--v8-radius, 6px);
padding: 16px;
text-align: center;
background: #f8fafc;
transition: border-color 0.15s, background 0.15s;
}
.v8-rfq-file-zone:hover {
border-color: var(--v8-cta, #4a6b53);
background: #f0fdf4;
}
.v8-rfq-file-input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
overflow: hidden;
}
.v8-rfq-file-label {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 8px;
min-height: 60px;
justify-content: center;
}
.v8-rfq-file-icon {
font-size: var(--v8-fs-2xl);
}
.v8-rfq-file-cta {
font-weight: 600;
color: #475569;
}
.v8-rfq-hint {
margin: 8px 0 0;
font-size: var(--v8-fs-xs);
color: #94a3b8;
}
.v8-rfq-file-list {
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 6px;
}
.v8-rfq-file-chip {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: var(--v8-radius, 6px);
font-size: var(--v8-fs-sm);
}
.v8-rfq-file-chip-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
}
.v8-rfq-file-chip-size {
color: #94a3b8;
font-size: var(--v8-fs-xs);
flex-shrink: 0;
}
.v8-rfq-file-remove {
width: 28px;
height: 28px;
border: none;
background: transparent;
cursor: pointer;
color: #94a3b8;
font-size: var(--v8-fs-base);
border-radius: 50%;
flex-shrink: 0;
}
.v8-rfq-file-remove:hover {
background: #fee2e2;
color: #dc2626;
}
/* ── 操作栏 ──────────────────────────────────────────── */
.v8-rfq-actions {
display: flex;
align-items: center;
gap: 12px;
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid #f1f5f9;
}
.v8-rfq-actions-spacer {
flex: 1;
}
.v8-rfq-btn {
padding: 12px 24px;
font-size: var(--v8-fs-base);
font-weight: 600;
border: 1px solid transparent;
border-radius: var(--v8-radius, 6px);
cursor: pointer;
min-height: 48px;
transition: background 0.15s, border-color 0.15s;
}
.v8-rfq-btn-back {
background: #fff;
border-color: #cbd5e1;
color: #475569;
}
.v8-rfq-btn-back:hover {
background: #f1f5f9;
border-color: #94a3b8;
}
.v8-rfq-btn-next,
.v8-rfq-btn-submit {
background: var(--v8-cta, #4a6b53);
color: #fff;
}
.v8-rfq-btn-next:hover,
.v8-rfq-btn-submit:hover {
background: var(--v8-dark, #1c2433);
}
.v8-rfq-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.v8-rfq-global-err {
margin: 12px 0 0;
color: #dc2626;
font-size: var(--v8-fs-sm);
min-height: 1em;
}
/* ── 成功页 ────────────────────────────────────────── */
.v8-rfq-success {
text-align: center;
padding: 32px 16px;
}
.v8-rfq-success-icon {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--v8-cta, #4a6b53);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--v8-fs-2xl);
font-weight: 700;
margin-bottom: 16px;
}
.v8-rfq-success-title {
margin: 0 0 8px;
font-size: var(--v8-fs-xl);
color: var(--v8-dark, #1c2433);
}
.v8-rfq-success-msg {
margin: 0;
color: #475569;
font-size: var(--v8-fs-base);
line-height: 1.6;
}
/* ═══════════════════════════════════════════════════════════
移动端：bottom-sheet 100dvh
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
.v8-rfq-overlay {
align-items: flex-end;
padding: 0;
}
.v8-rfq-sheet {
max-width: 100%;
width: 100%;
height: 100dvh;
max-height: 100dvh;
border-radius: 0;
padding: 20px 16px;
/* iOS safe-area-inset 兜底 */
padding-top: max(20px, env(safe-area-inset-top));
padding-bottom: max(20px, env(safe-area-inset-bottom));
}
.v8-rfq-progress {
margin-top: 0;
}
.v8-rfq-step-label {
max-width: 70px;
font-size: var(--v8-fs-xs);
}
.v8-rfq-checkgroup {
grid-template-columns: 1fr;
}
.v8-rfq-actions {
/* 移动端按钮置底 */
position: sticky;
bottom: 0;
background: #fff;
margin-left: -16px;
margin-right: -16px;
padding: 16px;
border-top: 1px solid #e2e8f0;
margin-top: auto;
}
.v8-rfq-bullets {
flex-direction: column;
gap: 8px;
}
}
/* 横屏兜底：max-height:500px 防止小屏 landscape 内容溢出 */
@media (max-width: 1024px) and (orientation: landscape) and (max-height: 500px) {
.v8-rfq-sheet {
height: 100dvh;
max-height: 100dvh;
padding-top: max(8px, env(safe-area-inset-top));
padding-bottom: max(8px, env(safe-area-inset-bottom));
}
.v8-rfq-progress {
margin-bottom: 16px;
}
.v8-rfq-step-title {
font-size: var(--v8-fs-md);
margin-bottom: 0;
}
.v8-rfq-step-desc {
font-size: var(--v8-fs-sm);
margin-bottom: 12px;
}
}
/* 桌面端 ≤640px 兜底（防极窄分辨率） */
@media (max-width: 640px) {
.v8-rfq-trigger-card {
padding: 16px;
}
.v8-rfq-title {
font-size: var(--v8-fs-lg);
}
}
/* ═══════════════════════════════════════════════════════════════
R25 P2-02: Vendor Filter 供应商筛选器
- 桌面：左侧 sticky sidebar / 右侧 vendor grid
- 移动 ≤1024px：底部抽屉 + trigger 按钮
═══════════════════════════════════════════════════════════════ */
/* ── 配对布局：archive + filter 同一父容器时使用 sidebar 布局 ── */
.v8-vfilter {
display: block;
}
/* 桌面端：filter 是 sticky sidebar */
@media (min-width: 1025px) {
/* 让 filter 与 archive 在同父容器内并排（依赖父级 grid 或 flex；下方提供推荐布局） */
.v8-vfilter-trigger {
display: none; /* 桌面端无需 trigger 按钮 */
}
.v8-vfilter-panel {
position: sticky;
top: 24px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: var(--v8-radius, 6px);
padding: 20px;
max-height: calc(100vh - 48px);
overflow-y: auto;
}
.v8-vfilter-close {
display: none;
}
.v8-vfilter-actions {
display: flex;
gap: 8px;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid #f1f5f9;
}
.v8-vfilter-apply {
display: none; /* 桌面端无需 apply（change 即时筛选） */
}
.v8-vfilter-backdrop {
display: none;
}
}
/* ── 推荐 CSS 布局：父容器 .v8-vendor-layout 包裹 filter + archive ── */
.v8-vendor-layout {
display: grid;
gap: 24px;
}
@media (min-width: 1025px) {
.v8-vendor-layout {
grid-template-columns: 240px 1fr;
align-items: start;
}
}
/* ── 通用样式 ────────────────────────────────────────────── */
.v8-vfilter-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.v8-vfilter-title {
margin: 0;
font-size: var(--v8-fs-base);
font-weight: 700;
color: var(--v8-dark, #1c2433);
}
.v8-vfilter-close {
width: 36px;
height: 36px;
border: none;
background: transparent;
font-size: var(--v8-fs-base);
color: #64748b;
cursor: pointer;
border-radius: 50%;
}
.v8-vfilter-close:hover {
background: #f1f5f9;
color: #0f172a;
}
.v8-vfilter-group {
border: none;
padding: 0;
margin: 0 0 18px;
display: flex;
flex-direction: column;
gap: 6px;
}
.v8-vfilter-legend {
font-size: var(--v8-fs-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #475569;
padding: 0;
margin-bottom: 4px;
}
.v8-vfilter-check,
.v8-vfilter-radio {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: var(--v8-radius, 6px);
cursor: pointer;
font-size: var(--v8-fs-sm);
color: #334155;
min-height: 40px;
transition: background 0.15s;
}
.v8-vfilter-check:hover,
.v8-vfilter-radio:hover {
background: #f8fafc;
}
.v8-vfilter-check input,
.v8-vfilter-radio input {
width: 18px;
height: 18px;
margin: 0;
flex-shrink: 0;
accent-color: var(--v8-cta, #4a6b53);
}
.v8-vfilter-check input:checked + span,
.v8-vfilter-radio input:checked + span {
font-weight: 600;
color: var(--v8-cta, #4a6b53);
}
.v8-vfilter-clear {
flex: 1;
padding: 10px 16px;
font-size: var(--v8-fs-sm);
font-weight: 500;
border: 1px solid #cbd5e1;
background: #fff;
color: #475569;
border-radius: var(--v8-radius, 6px);
cursor: pointer;
min-height: 40px;
transition: background 0.15s;
}
.v8-vfilter-clear:hover {
background: #f8fafc;
}
/* ── results-bar (archive 顶部) ────────────────────────── */
.v8-vendor-results-bar {
margin-bottom: 16px;
font-size: var(--v8-fs-sm);
color: #64748b;
padding: 8px 0;
border-bottom: 1px solid #f1f5f9;
}
.v8-vendor-empty-state {
padding: 32px 16px;
text-align: center;
color: #64748b;
background: #f8fafc;
border: 1px dashed #cbd5e1;
border-radius: var(--v8-radius, 6px);
}
.v8-vendor-clear-link {
border: none;
background: transparent;
color: var(--v8-cta, #4a6b53);
font-weight: 600;
cursor: pointer;
padding: 0;
font-size: inherit;
text-decoration: underline;
}
.v8-vendor-clear-link:hover {
color: var(--v8-dark, #1c2433);
}
/* archive 内部 grid（结构调整：将原 .v8-vendor-archive 拆为 wrapper + .v8-vendor-grid） */
.v8-vendor-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 14px;
}
@media (max-width: 640px) {
.v8-vendor-grid {
grid-template-columns: 1fr;
}
}
/* ═══════════════════════════════════════════════════════════
移动端 ≤1024px：底部抽屉
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
.v8-vfilter-trigger {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
padding: 12px 16px;
background: #fff;
border: 1px solid #cbd5e1;
border-radius: var(--v8-radius, 6px);
font-size: var(--v8-fs-base);
font-weight: 600;
color: var(--v8-dark, #1c2433);
cursor: pointer;
min-height: 48px;
margin-bottom: 16px;
transition: border-color 0.15s, background 0.15s;
}
.v8-vfilter-trigger:hover {
border-color: var(--v8-cta, #4a6b53);
background: #f8fafc;
}
.v8-vfilter-active-count {
background: var(--v8-cta, #4a6b53);
color: #fff;
font-size: var(--v8-fs-xs);
font-weight: 700;
padding: 2px 8px;
border-radius: 10px;
min-width: 22px;
text-align: center;
}
.v8-vfilter-panel {
position: fixed;
inset: auto 0 0 0;
background: #fff;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
padding: 20px 16px;
padding-bottom: max(20px, env(safe-area-inset-bottom));
z-index: 9001;
max-height: 85dvh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transform: translateY(100%);
transition: transform 0.25s ease;
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15);
}
.v8-vfilter-panel.is-open {
transform: translateY(0);
}
.v8-vfilter-backdrop {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.5);
z-index: 9000;
}
.v8-vfilter-actions {
display: flex;
gap: 8px;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid #f1f5f9;
/* 移动端 sticky 在抽屉底部 */
position: sticky;
bottom: 0;
background: #fff;
margin-left: -16px;
margin-right: -16px;
padding-left: 16px;
padding-right: 16px;
}
.v8-vfilter-apply {
flex: 2;
padding: 12px 16px;
font-size: var(--v8-fs-base);
font-weight: 600;
border: none;
background: var(--v8-cta, #4a6b53);
color: #fff;
border-radius: var(--v8-radius, 6px);
cursor: pointer;
min-height: 48px;
}
.v8-vfilter-apply:hover {
background: var(--v8-dark, #1c2433);
}
body.v8-vfilter-body-lock {
overflow: hidden;
}
/* 移动端 1 列布局 */
.v8-vendor-layout {
grid-template-columns: 1fr;
}
}
/* 横屏兜底 */
@media (max-width: 1024px) and (orientation: landscape) and (max-height: 500px) {
.v8-vfilter-panel {
max-height: 95dvh;
}
}
/* ═══════════════════════════════════════════════════════════════
R25 P2-03: Order Tracking 订单进度查询
- .v8-tracking-card：表单 + 结果容器
- .v8-tracking-step.is-{done,active,upcoming}：复用 .v8-process-step 状态修饰
- 移动端复用现有 .v8-process-steps 垂直时间线断点
═══════════════════════════════════════════════════════════════ */
/* ── 容器卡片 ─────────────────────────────────────────── */
.v8-tracking-root {
margin: 24px auto;
max-width: 760px;
}
.v8-tracking-card {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 28px 24px;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.v8-tracking-header {
text-align: center;
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid #f1f5f9;
}
.v8-tracking-title {
margin: 0 0 8px;
font-size: var(--v8-fs-xl);
font-weight: 700;
color: var(--v8-dark, #1c2433);
}
.v8-tracking-desc {
margin: 0;
color: #64748b;
font-size: var(--v8-fs-base);
line-height: 1.5;
}
/* ── 表单 ───────────────────────────────────────────── */
.v8-tracking-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.v8-tracking-field {
display: flex;
flex-direction: column;
}
.v8-tracking-label {
font-weight: 600;
font-size: var(--v8-fs-sm);
color: #334155;
margin-bottom: 6px;
}
.v8-tracking-req {
color: #dc2626;
}
.v8-tracking-input {
width: 100%;
box-sizing: border-box;
padding: 12px 14px;
font-size: var(--v8-fs-base); /* 防 iOS 缩放 */
border: 1px solid #cbd5e1;
border-radius: var(--v8-radius, 6px);
background: #fff;
font-family: inherit;
min-height: 48px;
transition: border-color 0.15s, box-shadow 0.15s;
}
.v8-tracking-input:focus {
outline: none;
border-color: var(--v8-cta, #4a6b53);
box-shadow: 0 0 0 3px rgba(74, 107, 83, 0.15);
}
.v8-tracking-input.is-invalid {
border-color: #dc2626;
}
.v8-tracking-submit {
margin-top: 8px;
padding: 14px 24px;
font-size: var(--v8-fs-base);
font-weight: 600;
background: var(--v8-cta, #4a6b53);
color: #fff;
border: none;
border-radius: var(--v8-radius, 6px);
cursor: pointer;
min-height: 48px;
transition: background 0.15s, transform 0.1s;
}
.v8-tracking-submit:hover {
background: var(--v8-dark, #1c2433);
}
.v8-tracking-submit:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.v8-tracking-error {
margin: 0;
padding: 12px 16px;
background: #fef2f2;
border-left: 3px solid #dc2626;
color: #991b1b;
font-size: var(--v8-fs-sm);
border-radius: 4px;
}
/* ── 结果区头部 ───────────────────────────────────── */
.v8-tracking-result {
margin-top: 8px;
}
.v8-tracking-result-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid #f1f5f9;
flex-wrap: wrap;
}
.v8-tracking-result-title {
margin: 0 0 4px;
font-size: var(--v8-fs-md);
color: var(--v8-dark, #1c2433);
font-weight: 700;
font-family: var(--v8-font-mono, ui-monospace, "SF Mono", Menlo, monospace);
}
.v8-tracking-result-id {
display: inline-block;
}
.v8-tracking-result-customer {
color: #64748b;
font-weight: 400;
font-family: inherit;
font-size: var(--v8-fs-sm);
}
.v8-tracking-result-eta {
margin: 0;
color: #475569;
font-size: var(--v8-fs-sm);
}
.v8-tracking-eta-label {
color: #64748b;
}
.v8-tracking-result-eta strong {
color: var(--v8-cta, #4a6b53);
font-weight: 700;
margin-left: 4px;
}
.v8-tracking-back {
background: transparent;
border: 1px solid #cbd5e1;
color: #475569;
padding: 8px 14px;
font-size: var(--v8-fs-sm);
font-weight: 500;
border-radius: var(--v8-radius, 6px);
cursor: pointer;
min-height: 40px;
transition: background 0.15s, border-color 0.15s;
}
.v8-tracking-back:hover {
background: #f1f5f9;
border-color: #94a3b8;
}
/* ── 物流信息块 ──────────────────────────────────── */
.v8-tracking-shipping {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
padding: 16px 20px;
background: #eff6ff;
border: 1px solid #bfdbfe;
border-radius: 8px;
}
.v8-tracking-shipping-icon {
font-size: var(--v8-fs-2xl);
flex-shrink: 0;
line-height: 1;
}
.v8-tracking-shipping-body {
flex: 1;
}
.v8-tracking-shipping-label {
font-size: var(--v8-fs-xs);
text-transform: uppercase;
letter-spacing: 0.04em;
color: #1e40af;
font-weight: 700;
margin-bottom: 4px;
}
.v8-tracking-carrier {
font-weight: 600;
color: var(--v8-dark, #1c2433);
}
.v8-tracking-carrier:not(:empty)::after {
content: ' · ';
color: #94a3b8;
}
.v8-tracking-number {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: var(--v8-fs-base);
color: var(--v8-dark, #1c2433);
background: rgba(255, 255, 255, 0.6);
padding: 2px 8px;
border-radius: 4px;
user-select: all; /* 移动端长按全选复制 */
}
/* ── 时间线 7 步状态修饰（基于现有 .v8-process-step） ── */
.v8-tracking-timeline {
margin: 0 auto;
}
.v8-tracking-step {
/* 继承 .v8-process-step 的 flex/gap/position */
}
/* upcoming：未到达 — 灰显 */
.v8-tracking-step.is-upcoming .v8-tracking-step-num {
background: #e2e8f0;
color: #94a3b8;
}
.v8-tracking-step.is-upcoming .v8-tracking-step-title {
color: #64748b;
}
.v8-tracking-step.is-upcoming .v8-tracking-step-desc {
color: #94a3b8;
}
/* upcoming 之间的连接线灰显 */
.v8-tracking-step.is-upcoming:not(:last-child)::before {
background: #e2e8f0;
}
/* done：已完成 — CTA 色 + ✓ */
.v8-tracking-step.is-done .v8-tracking-step-num {
background: var(--v8-cta, #4a6b53);
color: #fff;
font-size: var(--v8-fs-md);
}
.v8-tracking-step.is-done .v8-tracking-step-title {
color: var(--v8-dark, #1c2433);
}
/* active：当前步骤 — 高亮脉冲 */
.v8-tracking-step.is-active .v8-tracking-step-num {
background: var(--v8-cta, #4a6b53);
color: #fff;
box-shadow: 0 0 0 4px rgba(74, 107, 83, 0.2);
animation: v8-tracking-pulse 2s ease-in-out infinite;
}
.v8-tracking-step.is-active .v8-tracking-step-title {
color: var(--v8-cta, #4a6b53);
font-weight: 800;
}
.v8-tracking-step-badge {
display: inline-block;
padding: 2px 8px;
background: var(--v8-cta, #4a6b53);
color: #fff;
font-size: var(--v8-fs-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
border-radius: 10px;
vertical-align: middle;
margin-left: 4px;
}
@keyframes v8-tracking-pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(74, 107, 83, 0.2); }
50% { box-shadow: 0 0 0 8px rgba(74, 107, 83, 0.05); }
}
/* 用户 prefers-reduced-motion 时禁用脉冲 */
@media (prefers-reduced-motion: reduce) {
.v8-tracking-step.is-active .v8-tracking-step-num {
animation: none;
}
}
/* ── 客户级备注 ────────────────────────────────── */
.v8-tracking-note {
margin-top: 16px;
padding: 12px 16px;
background: #fffbeb;
border-left: 3px solid #f59e0b;
border-radius: 4px;
font-size: var(--v8-fs-sm);
color: #78350f;
line-height: 1.6;
}
.v8-tracking-note strong {
color: #92400e;
margin-right: 4px;
}
/* ── Support footer ─────────────────────────────── */
.v8-tracking-support {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid #f1f5f9;
text-align: center;
}
.v8-tracking-support-text {
margin: 0 0 8px;
font-size: var(--v8-fs-sm);
color: #64748b;
}
.v8-tracking-support-link {
display: inline-block;
color: var(--v8-cta, #4a6b53);
font-weight: 600;
text-decoration: none;
font-size: var(--v8-fs-base);
padding: 6px 12px;
}
.v8-tracking-support-link:hover {
text-decoration: underline;
}
.v8-tracking-noscript {
background: #fef3c7;
border: 1px solid #fde68a;
padding: 12px;
border-radius: 6px;
color: #92400e;
font-size: var(--v8-fs-sm);
margin-top: 16px;
}
/* ═══════════════════════════════════════════════════════════
移动端 ≤640px
═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
.v8-tracking-card {
padding: 20px 16px;
}
.v8-tracking-title {
font-size: var(--v8-fs-lg);
}
.v8-tracking-result-head {
flex-direction: column;
align-items: stretch;
}
.v8-tracking-back {
align-self: flex-start;
}
.v8-tracking-shipping {
padding: 12px 16px;
gap: 12px;
}
.v8-tracking-shipping-icon {
font-size: var(--v8-fs-xl);
}
.v8-tracking-number {
word-break: break-all; /* 长 tracking 单号换行 */
}
}
/* ≤1024px 但 >640px 平板兜底（沿用 .v8-process-step 移动端断点 768px 之外的过渡区） */
@media (max-width: 1024px) and (min-width: 641px) {
.v8-tracking-result-head {
align-items: center;
}
}
/* 横屏兜底：避免脉冲在小高度横屏时溢出 */
@media (max-width: 1024px) and (orientation: landscape) and (max-height: 500px) {
.v8-tracking-step.is-active .v8-tracking-step-num {
box-shadow: 0 0 0 2px rgba(74, 107, 83, 0.2);
animation: none;
}
}
/* R25 P2-03: template-tracking.php 头部包装 */
.v8-tracking-template {
padding: 32px 0 64px;
}
.v8-tracking-template-head {
max-width: 760px;
margin: 0 auto 24px;
text-align: center;
}
.v8-tracking-template-title {
margin: 0 0 12px;
font-size: var(--v8-fs-2xl);
color: var(--v8-dark, #1c2433);
font-weight: 800;
}
.v8-tracking-template-intro {
color: #475569;
font-size: var(--v8-fs-base);
line-height: 1.7;
}
@media (max-width: 640px) {
.v8-tracking-template {
padding: 20px 0 40px;
}
.v8-tracking-template-title {
font-size: var(--v8-fs-xl);
}
}
/* ═══════════════════════════════════════════════════════════════
R25 P2-04: Vendor Card 结构化信任徽章
- 4 类徽章：cert (✓ 主信任) / region / moq / lead
- 顶部 hero 区视觉，与 P2-02 筛选数据语义一致（cert tokens 拆分）
═══════════════════════════════════════════════════════════════ */
/* 徽章组容器 */
.v8-vendor-badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 8px 0 10px;
padding-top: 8px;
border-top: 1px dashed var(--v8-border, #e2e8f0);
}
/* 无 cert 时次级样式：去除上分隔线（不显得"缺主信任"突兀） */
.v8-vendor-badges-nocert {
border-top: none;
padding-top: 4px;
}
/* 通用徽章基底 */
.v8-vendor-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
font-size: var(--v8-fs-xs);
font-weight: 500;
border-radius: 4px;
line-height: 1.3;
white-space: nowrap;
border: 1px solid transparent;
background: #f8fafc;
color: #334155;
}
.v8-vendor-badge-icon {
flex-shrink: 0;
font-size: var(--v8-fs-sm);
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.v8-vendor-badge-text {
font-size: var(--v8-fs-xs);
}
.v8-vendor-badge-text em {
font-style: normal;
font-weight: 700;
color: #64748b;
font-size: var(--v8-fs-xs);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-right: 3px;
}
/* ── Cert 徽章：CTA 色（主信任标识） ── */
.v8-vendor-badge-cert {
background: #f0fdf4;
border-color: #bbf7d0;
color: #166534;
font-weight: 600;
}
.v8-vendor-badge-cert .v8-vendor-badge-icon {
color: #15803d;
font-weight: 700;
}
/* ── Region 徽章：中性灰蓝 ── */
.v8-vendor-badge-region {
background: #eff6ff;
border-color: #dbeafe;
color: #1e40af;
}
/* ── MOQ 徽章：暖色（数字属性强调） ── */
.v8-vendor-badge-moq {
background: #fffbeb;
border-color: #fef3c7;
color: #92400e;
}
.v8-vendor-badge-moq .v8-vendor-badge-text em {
color: #b45309;
}
/* ── Lead Time 徽章：紫色（时间属性） ── */
.v8-vendor-badge-lead {
background: #faf5ff;
border-color: #e9d5ff;
color: #6b21a8;
}
.v8-vendor-badge-lead .v8-vendor-badge-text em {
color: #7e22ce;
}
/* ═══════════════════════════════════════════════════════════
移动端 ≤640px：徽章压缩
═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
.v8-vendor-badges {
gap: 4px;
margin: 6px 0 8px;
}
.v8-vendor-badge {
padding: 3px 6px;
font-size: var(--v8-fs-xs);
}
.v8-vendor-badge-icon {
font-size: var(--v8-fs-xs);
}
.v8-vendor-badge-text {
font-size: var(--v8-fs-xs);
}
}
/* ═══════════════════════════════════════════════════════════════
R25 P2-05: Metrics Badges 实时运营数据徽章
- 桌面：3 列横排
- 移动 ≤640px：单列竖排
- is-vendor / is-inquiry / is-response 三类主题色（参考 P2-04 vendor badges 配色体系）
═══════════════════════════════════════════════════════════════ */
.v8-metrics {
margin: 32px auto;
max-width: 960px;
}
.v8-metrics-title {
margin: 0 0 16px;
font-size: var(--v8-fs-lg);
font-weight: 700;
color: var(--v8-dark, #1c2433);
text-align: center;
}
.v8-metrics-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.v8-metrics-card {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 20px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
transition: transform 0.15s, box-shadow 0.15s;
position: relative;
}
.v8-metrics-card:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.v8-metrics-icon {
flex-shrink: 0;
font-size: var(--v8-fs-2xl);
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
line-height: 1;
}
.v8-metrics-body {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.v8-metrics-value {
font-size: var(--v8-fs-2xl);
font-weight: 800;
color: var(--v8-dark, #1c2433);
line-height: 1.1;
letter-spacing: -0.02em;
}
.v8-metrics-fallback {
font-size: var(--v8-fs-base);
font-weight: 600;
color: #64748b;
font-style: italic;
line-height: 1.3;
}
.v8-metrics-label {
font-size: var(--v8-fs-sm);
color: #64748b;
margin-top: 2px;
font-weight: 500;
}
/* ── 主题色：is-vendor (CTA 绿) ── */
.v8-metrics-card.is-vendor .v8-metrics-icon {
background: #f0fdf4;
}
.v8-metrics-card.is-vendor:not(.is-fallback) .v8-metrics-value {
color: #166534;
}
/* ── 主题色：is-inquiry (蓝) ── */
.v8-metrics-card.is-inquiry .v8-metrics-icon {
background: #eff6ff;
}
.v8-metrics-card.is-inquiry:not(.is-fallback) .v8-metrics-value {
color: #1e40af;
}
/* ── 主题色：is-response (琥珀) ── */
.v8-metrics-card.is-response .v8-metrics-icon {
background: #fffbeb;
}
.v8-metrics-card.is-response .v8-metrics-value {
font-size: var(--v8-fs-md);
font-weight: 700;
color: #92400e;
line-height: 1.3;
letter-spacing: 0;
}
/* ── fallback 状态：低饱和 ── */
.v8-metrics-card.is-fallback {
background: #f8fafc;
border-style: dashed;
}
.v8-metrics-card.is-fallback .v8-metrics-icon {
opacity: 0.5;
}
/* ── 移动端 ≤640px：单列 ── */
@media (max-width: 640px) {
.v8-metrics-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.v8-metrics-card {
padding: 14px 16px;
gap: 12px;
}
.v8-metrics-icon {
font-size: var(--v8-fs-xl);
width: 40px;
height: 40px;
}
.v8-metrics-value {
font-size: var(--v8-fs-xl);
}
.v8-metrics-card.is-response .v8-metrics-value {
font-size: var(--v8-fs-base);
}
}
/* ── 平板端 641-1024px：保持 3 列但缩小 padding ── */
@media (max-width: 1024px) and (min-width: 641px) {
.v8-metrics-card {
padding: 14px 16px;
gap: 12px;
}
.v8-metrics-icon {
font-size: 1.625rem;
width: 44px;
height: 44px;
}
.v8-metrics-value {
font-size: var(--v8-fs-xl);
}
}
/* ═══════════════════════════════════════════════════════════════
R25 P2-06: Comparison Tool — SNNP Advantage 卡片行
- 位置：table 后、CTA 前
- 桌面：4 列 grid；移动 ≤640px：单列竖排
═══════════════════════════════════════════════════════════════ */
.v8-comp-advantages {
margin: 24px 0 16px;
padding: 20px;
background: linear-gradient(135deg, #f0fdf4 0%, #ecfeff 100%);
border: 1px solid #bbf7d0;
border-radius: 10px;
}
.v8-comp-adv-heading {
font-size: var(--v8-fs-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #15803d;
margin-bottom: 12px;
text-align: center;
}
.v8-comp-adv-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.v8-comp-adv-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 14px 10px;
background: #fff;
border: 1px solid #bbf7d0;
border-radius: 8px;
transition: transform 0.15s, box-shadow 0.15s;
}
.v8-comp-adv-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(34, 197, 94, 0.1);
}
.v8-comp-adv-icon {
font-size: 1.75rem;
line-height: 1;
margin-bottom: 8px;
}
.v8-comp-adv-title {
font-size: var(--v8-fs-sm);
font-weight: 700;
color: #14532d;
line-height: 1.3;
margin-bottom: 4px;
}
.v8-comp-adv-desc {
font-size: var(--v8-fs-xs);
color: #166534;
line-height: 1.4;
}
/* ── 6+ items：5/6 列 ── */
.v8-comp-adv-grid:has(> .v8-comp-adv-card:nth-child(5)) {
grid-template-columns: repeat(5, 1fr);
}
.v8-comp-adv-grid:has(> .v8-comp-adv-card:nth-child(7)) {
grid-template-columns: repeat(4, 1fr);
}
/* ── 平板 641-1024px：2 列 ── */
@media (max-width: 1024px) and (min-width: 641px) {
.v8-comp-adv-grid,
.v8-comp-adv-grid:has(> .v8-comp-adv-card:nth-child(5)),
.v8-comp-adv-grid:has(> .v8-comp-adv-card:nth-child(7)) {
grid-template-columns: repeat(2, 1fr);
}
}
/* ── 移动 ≤640px：单列 ── */
@media (max-width: 640px) {
.v8-comp-advantages {
padding: 14px;
margin: 16px 0 12px;
}
.v8-comp-adv-grid,
.v8-comp-adv-grid:has(> .v8-comp-adv-card:nth-child(5)),
.v8-comp-adv-grid:has(> .v8-comp-adv-card:nth-child(7)) {
grid-template-columns: 1fr;
gap: 8px;
}
.v8-comp-adv-card {
flex-direction: row;
align-items: center;
text-align: left;
padding: 12px;
gap: 12px;
}
.v8-comp-adv-icon {
margin-bottom: 0;
font-size: var(--v8-fs-xl);
flex-shrink: 0;
}
.v8-comp-adv-body {
flex: 1;
}
}
/* ═══════════════════════════════════════════════════════════════
R25 P2-07: Technology Showcase
- 4 模块 grid（桌面 4 列 / 平板 2 列 / 移动 1 列）
- 主题色复用 P2-05 metrics 配色：vendor 绿 / inquiry 蓝 / response 琥珀 / security 紫
═══════════════════════════════════════════════════════════════ */
.v8-tech-showcase {
margin: 48px auto;
max-width: 1200px;
padding: 0 16px;
}
.v8-tech-header {
text-align: center;
margin-bottom: 32px;
}
.v8-tech-title {
margin: 0 0 12px;
font-size: var(--v8-fs-2xl);
font-weight: 800;
color: var(--v8-dark, #1c2433);
letter-spacing: -0.02em;
}
.v8-tech-subtitle {
margin: 0 auto;
max-width: 720px;
font-size: var(--v8-fs-base);
color: #475569;
line-height: 1.6;
}
.v8-tech-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.v8-tech-card {
display: flex;
flex-direction: column;
padding: 22px 20px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
transition: transform 0.15s, box-shadow 0.15s;
border-top: 3px solid #cbd5e1;
}
.v8-tech-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}
.v8-tech-card-head {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 10px;
}
.v8-tech-icon {
font-size: var(--v8-fs-2xl);
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
line-height: 1;
margin-bottom: 4px;
}
.v8-tech-card-title {
margin: 0;
font-size: var(--v8-fs-md);
font-weight: 700;
color: var(--v8-dark, #1c2433);
line-height: 1.3;
}
.v8-tech-metric {
align-self: flex-start;
font-size: var(--v8-fs-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 3px 8px;
border-radius: 4px;
background: #f1f5f9;
color: #475569;
}
.v8-tech-desc {
margin: 0 0 12px;
font-size: var(--v8-fs-sm);
color: #475569;
line-height: 1.5;
}
.v8-tech-bullets {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid #f1f5f9;
padding-top: 12px;
}
.v8-tech-bullets li {
position: relative;
padding: 6px 0 6px 22px;
font-size: var(--v8-fs-sm);
color: #334155;
line-height: 1.5;
}
.v8-tech-bullets li::before {
content: '✓';
position: absolute;
left: 0;
top: 6px;
font-weight: 700;
color: #94a3b8;
}
/* ── 主题色：vendor 绿 ── */
.v8-tech-theme-vendor {
border-top-color: #4a6b53;
}
.v8-tech-theme-vendor .v8-tech-icon {
background: #f0fdf4;
}
.v8-tech-theme-vendor .v8-tech-metric {
background: #f0fdf4;
color: #166534;
}
.v8-tech-theme-vendor .v8-tech-bullets li::before {
color: #4a6b53;
}
/* ── 主题色：inquiry 蓝 ── */
.v8-tech-theme-inquiry {
border-top-color: #1e40af;
}
.v8-tech-theme-inquiry .v8-tech-icon {
background: #eff6ff;
}
.v8-tech-theme-inquiry .v8-tech-metric {
background: #eff6ff;
color: #1e40af;
}
.v8-tech-theme-inquiry .v8-tech-bullets li::before {
color: #2563eb;
}
/* ── 主题色：response 琥珀 ── */
.v8-tech-theme-response {
border-top-color: #b45309;
}
.v8-tech-theme-response .v8-tech-icon {
background: #fffbeb;
}
.v8-tech-theme-response .v8-tech-metric {
background: #fffbeb;
color: #92400e;
}
.v8-tech-theme-response .v8-tech-bullets li::before {
color: #d97706;
}
/* ── 主题色：security 紫 ── */
.v8-tech-theme-security {
border-top-color: #6b21a8;
}
.v8-tech-theme-security .v8-tech-icon {
background: #faf5ff;
}
.v8-tech-theme-security .v8-tech-metric {
background: #faf5ff;
color: #6b21a8;
}
.v8-tech-theme-security .v8-tech-bullets li::before {
color: #7e22ce;
}
/* ── compact 模式（嵌入其他页面时无 hero 标题） ── */
.v8-tech-showcase.is-compact {
margin: 24px auto;
}
/* ── 平板 641-1024px：2 列 ── */
@media (max-width: 1024px) and (min-width: 641px) {
.v8-tech-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ── 移动 ≤640px：单列 ── */
@media (max-width: 640px) {
.v8-tech-showcase {
margin: 32px auto;
}
.v8-tech-title {
font-size: var(--v8-fs-xl);
}
.v8-tech-subtitle {
font-size: var(--v8-fs-base);
}
.v8-tech-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.v8-tech-card {
padding: 18px 16px;
}
.v8-tech-icon {
font-size: 1.625rem;
width: 44px;
height: 44px;
}
.v8-tech-card-title {
font-size: var(--v8-fs-base);
}
}
/* R25 P2-07: template-technology.php 头部包装 */
.v8-tech-template {
padding: 32px 0 64px;
}
.v8-tech-template-head {
max-width: 760px;
margin: 0 auto 24px;
text-align: center;
padding: 0 16px;
}
.v8-tech-template-title {
margin: 0 0 12px;
font-size: var(--v8-fs-2xl);
color: var(--v8-dark, #1c2433);
font-weight: 800;
letter-spacing: -0.02em;
}
.v8-tech-template-intro {
color: #475569;
font-size: var(--v8-fs-base);
line-height: 1.7;
}
@media (max-width: 640px) {
.v8-tech-template {
padding: 20px 0 40px;
}
.v8-tech-template-title {
font-size: var(--v8-fs-xl);
}
}
/* ═══════════════════════════════════════════════════════════
R25 P2-08: Mobile Quick RFQ FAB + Mini-Sheet
─────────────────────────────────────────────────────────
架构:
- FAB: bottom:144px right:20px（Chatbox FAB 在 80px，错开 64px）
- Sheet: 100dvh 底部滑入，z-index --v8-z-modal（盖过 Plan A 1600 不需要,
因 Plan A 为 1600 但 quick_rfq 与 plan_a 在 mobile 互斥使用,
这里取 1500 modal 层与 RFQ Builder 一致即可）
- 移动端断点: ≤1024px 显示 FAB，>1024px display:none
- 横屏兜底: max-height:500px 时减少 padding
═══════════════════════════════════════════════════════════ */
/* ── FAB 默认隐藏（桌面端不可见） ── */
.v8-qrfq-fab {
display: none;
position: fixed;
bottom: 144px;
right: 20px;
z-index: var(--v8-z-chatbox, 1300);
align-items: center;
gap: 6px;
height: 48px;
min-width: 48px;
padding: 0 14px 0 12px;
border: 0;
border-radius: 24px;
background: var(--v8-cta, #4a6b53);
color: #fff;
font-family: var(--v8-font);
font-size: var(--v8-fs-sm);
font-weight: 600;
letter-spacing: 0.01em;
box-shadow: 0 6px 20px rgba(74, 107, 83, 0.35), 0 2px 4px rgba(0, 0, 0, 0.08);
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
-webkit-tap-highlight-color: transparent;
}
.v8-qrfq-fab:hover,
.v8-qrfq-fab:focus {
background: var(--v8-cta-hover, #3a5441);
box-shadow: 0 8px 24px rgba(74, 107, 83, 0.42), 0 2px 6px rgba(0, 0, 0, 0.1);
outline: none;
}
.v8-qrfq-fab:active {
transform: scale(0.96);
}
.v8-qrfq-fab-icon {
font-size: var(--v8-fs-md);
line-height: 1;
}
.v8-qrfq-fab-label {
white-space: nowrap;
}
/* ── 移动端 ≤1024px 才显示 ── */
@media (max-width: 1024px) {
.v8-qrfq-fab {
display: inline-flex;
}
}
/* ── Mini-Sheet（底部滑入，100dvh 全屏覆盖） ── */
.v8-qrfq-sheet {
position: fixed;
inset: 0;
width: 100dvw;
height: 100dvh;
z-index: var(--v8-z-modal, 1500);
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
display: flex;
align-items: flex-end;
justify-content: stretch;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.v8-qrfq-sheet[hidden] {
display: none;
}
body.v8-qrfq-open .v8-qrfq-sheet {
opacity: 1;
pointer-events: auto;
}
body.v8-qrfq-open {
overflow: hidden;
}
.v8-qrfq-sheet-inner {
width: 100%;
max-height: 100dvh;
overflow-y: auto;
background: #fff;
border-radius: 16px 16px 0 0;
padding-bottom: env(safe-area-inset-bottom, 0);
transform: translateY(100%);
transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.18);
}
body.v8-qrfq-open .v8-qrfq-sheet-inner {
transform: translateY(0);
}
/* ── Sheet Header ── */
.v8-qrfq-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 16px 8px 20px;
border-bottom: 1px solid #f1f5f9;
}
.v8-qrfq-title {
margin: 0;
font-family: var(--v8-font);
font-size: var(--v8-fs-md);
font-weight: 700;
color: #1f2937;
letter-spacing: -0.01em;
}
.v8-qrfq-close {
width: 36px;
height: 36px;
border: 0;
background: transparent;
font-size: 28px;
line-height: 1;
color: #64748b;
cursor: pointer;
border-radius: 50%;
-webkit-tap-highlight-color: transparent;
}
.v8-qrfq-close:hover,
.v8-qrfq-close:focus {
background: #f1f5f9;
color: #1f2937;
outline: none;
}
/* ── Form ── */
.v8-qrfq-form {
display: flex;
flex-direction: column;
gap: 16px;
padding: 20px 16px 24px 16px;
}
.v8-qrfq-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.v8-qrfq-label {
font-family: var(--v8-font);
font-size: var(--v8-fs-sm);
font-weight: 600;
color: #334155;
letter-spacing: 0.01em;
}
.v8-qrfq-optional {
color: #94a3b8;
font-weight: 400;
font-size: var(--v8-fs-xs);
}
.v8-qrfq-input,
.v8-qrfq-textarea {
width: 100%;
min-height: 48px;
padding: 12px 14px;
border: 1.5px solid #cbd5e1;
border-radius: 10px;
background: #fff;
font-family: var(--v8-font);
font-size: var(--v8-fs-base); /* 16px 防止 iOS Safari 自动缩放 */
color: #0f172a;
line-height: 1.45;
-webkit-appearance: none;
appearance: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.v8-qrfq-textarea {
min-height: 88px;
resize: vertical;
}
.v8-qrfq-input:focus,
.v8-qrfq-textarea:focus {
border-color: var(--v8-primary, #7a8fa6);
box-shadow: 0 0 0 3px rgba(122, 143, 166, 0.18);
outline: none;
}
/* ── 拍照按钮（伪造 file input UI） ── */
.v8-qrfq-file-btn {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 48px;
padding: 12px 16px;
border: 1.5px dashed #cbd5e1;
border-radius: 10px;
background: #f8fafc;
font-family: var(--v8-font);
font-size: var(--v8-fs-sm);
font-weight: 500;
color: #475569;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.v8-qrfq-file-btn:hover,
.v8-qrfq-file-btn:active,
.v8-qrfq-file-btn:focus-within {
border-color: var(--v8-primary, #7a8fa6);
background: #f1f5f9;
color: #1f2937;
}
.v8-qrfq-file-icon {
font-size: var(--v8-fs-md);
line-height: 1;
}
/* ── 已选文件 chip ── */
.v8-qrfq-file-list {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 4px;
}
.v8-qrfq-file-list[hidden] {
display: none;
}
.v8-qrfq-chip {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: #ecfdf5;
border: 1px solid #a7f3d0;
border-radius: 8px;
font-size: var(--v8-fs-sm);
color: #065f46;
}
.v8-qrfq-chip-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.v8-qrfq-chip-size {
color: #047857;
font-size: var(--v8-fs-xs);
font-weight: 500;
}
.v8-qrfq-chip-remove {
width: 24px;
height: 24px;
border: 0;
background: transparent;
color: #047857;
font-size: var(--v8-fs-md);
line-height: 1;
cursor: pointer;
border-radius: 50%;
-webkit-tap-highlight-color: transparent;
}
.v8-qrfq-chip-remove:hover,
.v8-qrfq-chip-remove:focus {
background: #d1fae5;
outline: none;
}
/* ── Submit 按钮 ── */
.v8-qrfq-submit {
margin-top: 4px;
min-height: 52px;
border: 0;
border-radius: 12px;
background: var(--v8-cta, #4a6b53);
color: #fff;
font-family: var(--v8-font);
font-size: var(--v8-fs-base);
font-weight: 700;
letter-spacing: 0.01em;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s ease, transform 0.12s ease;
}
.v8-qrfq-submit:hover,
.v8-qrfq-submit:focus {
background: var(--v8-cta-hover, #3a5441);
outline: none;
}
.v8-qrfq-submit:active {
transform: scale(0.98);
}
.v8-qrfq-submit:disabled,
.v8-qrfq-submit.is-busy {
background: #94a3b8;
cursor: wait;
transform: none;
}
/* ── 反馈提示区 ── */
.v8-qrfq-feedback {
margin-top: 4px;
padding: 10px 14px;
border-radius: 8px;
font-size: var(--v8-fs-sm);
font-weight: 500;
line-height: 1.45;
}
.v8-qrfq-feedback[hidden] {
display: none;
}
.v8-qrfq-feedback.is-success {
background: #ecfdf5;
border: 1px solid #a7f3d0;
color: #065f46;
}
.v8-qrfq-feedback.is-error {
background: #fef2f2;
border: 1px solid #fecaca;
color: #991b1b;
}
/* ── 横屏 max-height:500px 兜底 ── */
@media (max-width: 1024px) and (max-height: 500px) {
.v8-qrfq-form {
padding: 12px 16px 16px 16px;
gap: 10px;
}
.v8-qrfq-header {
padding: 10px 16px 6px 20px;
}
.v8-qrfq-textarea {
min-height: 56px;
}
}