@charset "utf-8";
/* ==========================================================================
人合车 RHCEV — V4 微调层 (v4-tune.css)
叠加在 static-fixes.css → v3-upgrade.css 之后。
目标：保持 V3 已确认的视觉方向不变，只做排版、层次、交互与可访问性的细部收敛，
并为 V4 新增的 SEO 模块（面包屑 / FAQ / 城市内链 / 关键词区块）提供样式。
========================================================================== */
:root {
--v4-ink: #0f1218;
--v4-ink-2: #454e5c;
--v4-muted: #6b7482;
--v4-hair: rgba(15, 18, 24, .08);
--v4-hair-2: rgba(15, 18, 24, .14);
--v4-orange: #ff6818;
--v4-orange-soft: rgba(255, 104, 24, .1);
--v4-lift: 0 18px 48px rgba(17, 19, 24, .09);
--v4-lift-hi: 0 26px 62px rgba(17, 19, 24, .14);
--v4-ease: cubic-bezier(.22, .68, .36, 1);
}
/* --------------------------------------------------------------------------
1 · 字体与正文排版收敛
-------------------------------------------------------------------------- */
body.v3-site {
font-family: "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC",
"Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body.v3-site h1, body.v3-site h2, body.v3-site h3 {
letter-spacing: -.012em;
}
body.v3-site p { line-height: 1.85; }
/* 数字与电话使用等宽表格数字，避免跳动 */
body.v3-site .nex_ft_tel,
body.v3-site .v3-hero-proof strong,
body.v3-site .v4-num {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* --------------------------------------------------------------------------
2 · 首屏标题节奏
-------------------------------------------------------------------------- */
body.v3-site .v3-hero-copy h1 {
font-size: clamp(2rem, 1.35rem + 2.1vw, 3.05rem);
line-height: 1.24;
letter-spacing: -.02em;
max-width: 15ch;
}
body.v3-site .v3-hero-copy > p {
max-width: 46ch;
line-height: 1.9;
color: rgba(255, 255, 255, .82);
}
/* 首屏三个卖点：等高、层次更清楚 */
body.v3-site .v3-hero-proof span {
align-content: start;
border: 1px solid rgba(255, 255, 255, .1);
transition: border-color .3s var(--v4-ease), background .3s var(--v4-ease),
transform .3s var(--v4-ease);
}
body.v3-site .v3-hero-proof span:hover {
border-color: rgba(255, 104, 24, .55);
background: rgba(255, 104, 24, .08);
transform: translateY(-2px);
}
body.v3-site .v3-hero-proof strong {
letter-spacing: .01em;
}
/* --------------------------------------------------------------------------
3 · 卡片与阴影：更轻的投影 + 一道发丝边界
-------------------------------------------------------------------------- */
body.v3-site .v3-product-panel,
body.v3-site .v3-fit-panel,
body.v3-site .v3-benefit-panel,
body.v3-site .v3-compare-card,
body.v3-site .v3-step-card,
body.v3-site .v3-support-card,
body.v3-site .v3-growth-card,
body.v3-site .v4-card {
border: 1px solid var(--v4-hair);
box-shadow: var(--v4-lift);
transition: transform .38s var(--v4-ease), box-shadow .38s var(--v4-ease),
border-color .38s var(--v4-ease);
}
body.v3-site .v3-compare-card:hover,
body.v3-site .v3-step-card:hover,
body.v3-site .v3-support-card:hover,
body.v3-site .v3-growth-card:hover,
body.v3-site .v4-card:hover {
transform: translateY(-4px);
box-shadow: var(--v4-lift-hi);
border-color: rgba(255, 104, 24, .32);
}
/* 当前方案卡片：顶部信号条 */
body.v3-site .v3-compare-card { position: relative; overflow: hidden; }
body.v3-site .v3-compare-card::before {
content: "";
position: absolute; inset: 0 0 auto 0; height: 3px;
background: var(--v4-orange);
transform: scaleX(0); transform-origin: left;
transition: transform .42s var(--v4-ease);
}
body.v3-site .v3-compare-card:hover::before,
body.v3-site .v3-compare-card.is-active::before { transform: scaleX(1); }
/* --------------------------------------------------------------------------
4 · 按钮微调
-------------------------------------------------------------------------- */
body.v3-site .v3-btn {
transition: transform .22s var(--v4-ease), box-shadow .3s var(--v4-ease),
background .3s var(--v4-ease), color .3s var(--v4-ease);
}
body.v3-site .v3-btn:active { transform: translateY(1px); }
body.v3-site .v3-btn-primary:hover {
box-shadow: 0 14px 34px -10px rgba(255, 104, 24, .78);
}
body.v3-site .v3-btn-secondary {
border: 1px solid var(--v4-hair-2);
}
/* --------------------------------------------------------------------------
5 · 可访问性：焦点可见 + 跳转链接
-------------------------------------------------------------------------- */
body.v3-site a:focus-visible,
body.v3-site button:focus-visible,
body.v3-site summary:focus-visible {
outline: 2px solid var(--v4-orange);
outline-offset: 3px;
border-radius: 4px;
}
.v4-skip {
position: absolute; left: -9999px; top: 0; z-index: 9999;
background: var(--v4-orange); color: #fff;
padding: .7rem 1.2rem; font-size: 14px; font-weight: 700;
}
.v4-skip:focus { left: 12px; top: 12px; }
/* --------------------------------------------------------------------------
6 · 面包屑（V4 新增，用于结构化导航与 SEO）
-------------------------------------------------------------------------- */
body.v3-site .v4-crumb {
width: min(1180px, calc(100% - 48px));
margin: 0 auto;
padding: 18px 0 0;
font-size: 13px;
color: var(--v4-muted);
}
body.v3-site .v4-crumb ol {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
list-style: none; margin: 0; padding: 0;
}
body.v3-site .v4-crumb li { display: flex; align-items: center; gap: 8px; }
body.v3-site .v4-crumb li + li::before { content: "/"; color: var(--v4-hair-2); }
body.v3-site .v4-crumb a { color: var(--v4-muted) !important; transition: color .24s var(--v4-ease); }
body.v3-site .v4-crumb a:hover { color: var(--v4-orange) !important; }
body.v3-site .v4-crumb [aria-current] { color: var(--v4-ink-2); }
/* --------------------------------------------------------------------------
7 · V4 通用区块（FAQ / 城市内链 / 关键词说明）
-------------------------------------------------------------------------- */
body.v3-site .v4-band { padding: clamp(48px, 3vw + 32px, 86px) 0; }
body.v3-site .v4-band--tint { background: #fff; }
body.v3-site .v4-shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
body.v3-site .v4-head { margin-bottom: clamp(26px, 2vw + 14px, 44px); max-width: 62ch; }
body.v3-site .v4-head .v4-kick {
display: inline-flex; align-items: center; gap: 8px;
font-size: 12px; font-weight: 700; letter-spacing: .16em;
text-transform: uppercase; color: var(--v4-orange);
margin-bottom: 14px;
}
body.v3-site .v4-head .v4-kick::before {
content: ""; width: 22px; height: 2px; background: var(--v4-orange); border-radius: 99px;
}
body.v3-site .v4-head h2 {
font-size: clamp(1.45rem, 1.1rem + 1.35vw, 2.1rem);
line-height: 1.35; color: var(--v4-ink); margin: 0 0 12px;
}
body.v3-site .v4-head p { color: var(--v4-muted); font-size: 15px; margin: 0; }
/* FAQ 折叠 */
body.v3-site .v4-faq {
border-top: 1px solid var(--v4-hair);
background: #fff;
border-radius: var(--v3-radius-md, 22px);
overflow: hidden;
box-shadow: var(--v4-lift);
}
body.v3-site .v4-faq details { border-bottom: 1px solid var(--v4-hair); }
body.v3-site .v4-faq details:last-child { border-bottom: 0; }
body.v3-site .v4-faq summary {
list-style: none; cursor: pointer;
padding: 20px 60px 20px 26px;
position: relative;
font-size: 16px; font-weight: 700; line-height: 1.6; color: var(--v4-ink);
transition: color .24s var(--v4-ease), background .24s var(--v4-ease);
}
body.v3-site .v4-faq summary::-webkit-details-marker { display: none; }
body.v3-site .v4-faq summary:hover { color: var(--v4-orange); background: var(--v4-orange-soft); }
body.v3-site .v4-faq summary::before,
body.v3-site .v4-faq summary::after {
content: ""; position: absolute; right: 26px; top: 50%;
background: var(--v4-orange); border-radius: 2px;
transition: transform .3s var(--v4-ease), opacity .3s var(--v4-ease);
}
body.v3-site .v4-faq summary::before { width: 14px; height: 2px; transform: translateY(-50%); }
body.v3-site .v4-faq summary::after { width: 2px; height: 14px; right: 32px; transform: translateY(-50%); }
body.v3-site .v4-faq details[open] summary::after { transform: translateY(-50%) rotate(90deg); opacity: 0; }
body.v3-site .v4-faq .v4-faq-a {
padding: 0 60px 22px 26px;
color: var(--v4-ink-2); font-size: 15px; line-height: 1.95;
}
/* 城市内链网格 */
body.v3-site .v4-cities {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
gap: 10px;
}
body.v3-site .v4-cities a {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 15px 18px;
background: #fff;
border: 1px solid var(--v4-hair);
border-radius: 14px;
color: var(--v4-ink) !important;
font-size: 15px; font-weight: 700;
transition: transform .28s var(--v4-ease), border-color .28s var(--v4-ease),
box-shadow .28s var(--v4-ease), color .28s var(--v4-ease);
}
body.v3-site .v4-cities a > span { white-space: nowrap; }
body.v3-site .v4-cities a em {
font-style: normal; font-size: 12px; font-weight: 400; color: var(--v4-muted);
letter-spacing: .08em; white-space: nowrap;
}
body.v3-site .v4-cities a:hover {
transform: translateY(-3px);
border-color: rgba(255, 104, 24, .42);
box-shadow: var(--v4-lift);
color: var(--v4-orange) !important;
}
body.v3-site .v4-cities a:hover em { color: var(--v4-orange); }
/* 通用卡片网格（城市页服务项 / 关键信息） */
body.v3-site .v4-grid { display: grid; gap: 16px; }
body.v3-site .v4-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
body.v3-site .v4-grid--3 { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
body.v3-site .v4-card {
background: #fff; border-radius: var(--v3-radius-md, 22px);
padding: 26px 24px;
}
body.v3-site .v4-card h3 { font-size: 17px; margin: 0 0 10px; color: var(--v4-ink); }
body.v3-site .v4-card p { font-size: 14.5px; color: var(--v4-ink-2); margin: 0; }
body.v3-site .v4-card ul { margin: 12px 0 0; padding: 0; list-style: none; }
body.v3-site .v4-card li {
position: relative; padding-left: 18px; margin-bottom: 8px;
font-size: 14.5px; color: var(--v4-ink-2); line-height: 1.8;
}
body.v3-site .v4-card li::before {
content: ""; position: absolute; left: 0; top: .78em;
width: 7px; height: 2px; background: var(--v4-orange); border-radius: 2px;
}
/* 门店信息定义列表 */
body.v3-site .v4-dl { margin: 0; }
body.v3-site .v4-dl > div {
display: grid; grid-template-columns: 62px minmax(0, 1fr);
gap: 12px; padding: 8px 0;
border-bottom: 1px dashed var(--v4-hair);
}
body.v3-site .v4-dl > div:last-child { border-bottom: 0; }
body.v3-site .v4-dl dt { color: var(--v4-muted); font-size: 13px; }
body.v3-site .v4-dl dd {
margin: 0; color: var(--v4-ink-2); font-size: 14.5px; line-height: 1.75;
}
body.v3-site .v4-dl dd a { color: var(--v4-orange) !important; font-weight: 700; }
/* 关键指标条 */
body.v3-site .v4-stats {
display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1px; background: var(--v4-hair);
border: 1px solid var(--v4-hair);
border-radius: var(--v3-radius-md, 22px);
overflow: hidden;
}
body.v3-site .v4-stats div { background: #fff; padding: 22px 24px; }
body.v3-site .v4-stats b {
display: block; font-size: 26px; line-height: 1.1; color: var(--v4-ink);
font-variant-numeric: tabular-nums; margin-bottom: 6px;
}
body.v3-site .v4-stats span { font-size: 13.5px; color: var(--v4-muted); }
/* --------------------------------------------------------------------------
8 · 页脚微调 + 城市链接列
-------------------------------------------------------------------------- */
body.v3-site .nexfooter a { transition: color .24s var(--v4-ease), padding-left .24s var(--v4-ease); }
body.v3-site .nex_ft_left ul li a:hover { padding-left: 4px; }
body.v3-site .v4-ft-cities {
border-top: 1px solid rgba(255, 255, 255, .09);
padding: 22px 0 4px;
margin-top: 26px;
}
body.v3-site .v4-ft-cities h3 {
font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
color: rgba(255, 255, 255, .58); margin: 0 0 12px;
}
body.v3-site .v4-ft-cities p { margin: 0; line-height: 2.2; }
body.v3-site .v4-ft-cities a {
display: inline-block;
color: rgba(255, 255, 255, .62) !important;
font-size: 13.5px; margin-right: 18px;
}
body.v3-site .v4-ft-cities a:hover { color: var(--v4-orange) !important; }
/* --------------------------------------------------------------------------
9 · 响应式收敛
-------------------------------------------------------------------------- */
@media (max-width: 900px) {
body.v3-site .v4-crumb,
body.v3-site .v4-shell { width: calc(100% - 32px); }
body.v3-site .v4-faq summary { padding: 17px 52px 17px 20px; font-size: 15px; }
body.v3-site .v4-faq summary::before { right: 20px; }
body.v3-site .v4-faq summary::after { right: 26px; }
body.v3-site .v4-faq .v4-faq-a { padding: 0 20px 18px; font-size: 14.5px; }
body.v3-site .v4-cities { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; }
body.v3-site .v4-cities a { padding: 13px 14px; font-size: 14px; }
body.v3-site .v3-hero-copy h1 { max-width: none; }
}
@media (max-width: 560px) {
body.v3-site .v4-cities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.v3-site .v4-cities a em { display: none; }
body.v3-site .v4-stats b { font-size: 22px; }
}
/* --------------------------------------------------------------------------
10 · 动效偏好与打印
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
body.v3-site *, body.v3-site *::before, body.v3-site *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
@media print {
body.v3-site .nex_sidetool_bar, body.v3-site #scrolltop, body.v3-site .v4-skip { display: none !important; }
body.v3-site { background: #fff; }
}
/* --------------------------------------------------------------------------
11 · 布局稳定性（CLS）
仅作用于 V4 主动标注了 width/height 的「宽度驱动」图片（首页品牌墙等）。
补齐内在尺寸后浏览器可在图片加载前预留空间，height:auto 保证不被属性拉伸变形。
CSS 已固定高度的图片（logo / service / adv / branches）不带该标记，不受影响。
-------------------------------------------------------------------------- */
body.v3-site img[data-v4-dim] { height: auto; max-width: 100%; }
/* 门店卡片标题内链 */
body.v3-site .nex_branches_intels h3 {
font-size: 18px; font-weight: 700; margin: 0 0 8px;
}
body.v3-site .nex_branches_intels h3 a {
color: inherit !important;
transition: color .24s var(--v4-ease);
}
body.v3-site .nex_branches_intels h3 a:hover { color: var(--v4-orange) !important; }
body.v3-site .nex_branches_intels em a { color: inherit !important; }
body.v3-site .nex_branches_intels em a:hover { color: var(--v4-orange) !important; }
/* --------------------------------------------------------------------------
12 · 统一入场动效（同时修复由动效引起的布局偏移）
V3 首屏混用了 animate.css 的 bounceInRight / fadeInUp / fadeInLeft / fadeIn，
动效语言不统一；其中 fadeInUp 的起始位移是元素自身高度的 100%，
会在动画期间把文档撑高再回弹，实测在移动端造成 CLS ≈ 0.19（Google 判定为「需要改进」）。
这里统一改为一个位移量固定、不撑高文档的轻量上浮动效。
-------------------------------------------------------------------------- */
@keyframes v4RiseIn {
from { opacity: 0; transform: translate3d(0, 22px, 0); }
to { opacity: 1; transform: none; }
}
body.v3-site .nexactions.animated,
body.v3-site .nexactions.fadeInUp,
body.v3-site .nexactions.fadeInLeft,
body.v3-site .nexactions.fadeIn,
body.v3-site .nexactions.bounceInRight {
animation-name: v4RiseIn !important;
animation-duration: .78s !important;
animation-timing-function: cubic-bezier(.22, .68, .36, 1) !important;
animation-fill-mode: both !important;
}
@media (prefers-reduced-motion: reduce) {
body.v3-site .nexactions.animated { animation: none !important; opacity: 1 !important; transform: none !important; }
}
/* --------------------------------------------------------------------------
13 · 顶部导航：改用真正的 CSS sticky
V4 已移除 nv.js（position:sticky 普及前的「导航固定」脚本）。该脚本会在首次滚动时
把 #nex_tour_header 切成 position:fixed，导致 #hds 高度从 158px 塌陷为 0、
整页上跳，并把 V3 的半透明毛玻璃头部覆盖成纯 #111。
移除后由 CSS sticky 接管：桌面端行为不变，移动端从「不吸顶」升级为「正常吸顶」，
服务热线在滚动中始终可见。
-------------------------------------------------------------------------- */
@media (max-width: 768px) {
body.v3-site #hds.nex_hd_common {
position: sticky;
top: 0;
z-index: 500;
}
}
/* --------------------------------------------------------------------------
14 · 头部「产品方案」二级菜单
原实现是 Discuz 的 showMenu() 弹层：菜单节点被放在 header 之外，靠 JS 算坐标，
实测偏到触发项左侧约 100px；样式沿用 Discuz 默认浅色弹窗（白底灰字 + 分隔线 +
首项残留橙框），与深色头部冲突。V4 已把菜单移进 ，这里用纯 CSS 定位与展开。
-------------------------------------------------------------------------- */
body.v3-site .nex_tour_nav ul li.v4-has-sub { position: relative; }
/* 触发项的下拉指示箭头 */
body.v3-site .v4-caret {
display: inline-block;
width: 6px; height: 6px;
margin-left: 7px;
border-right: 1.6px solid currentColor;
border-bottom: 1.6px solid currentColor;
transform: translateY(-2px) rotate(45deg);
opacity: .6;
transition: transform .28s var(--v4-ease), opacity .28s var(--v4-ease);
}
body.v3-site .v4-has-sub:hover .v4-caret,
body.v3-site .v4-has-sub:focus-within .v4-caret {
transform: translateY(0) rotate(225deg);
opacity: 1;
}
/* 二级菜单面板 —— 与触发项左对齐，宽度按内容 */
body.v3-site .nex_tour_nav ul li .v4-sub {
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -6px);
min-width: 232px;
margin: 0;
padding: 8px;
display: block;
background: rgba(18, 20, 26, .97);
-webkit-backdrop-filter: blur(18px) saturate(150%);
backdrop-filter: blur(18px) saturate(150%);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 14px;
box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .78);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .26s var(--v4-ease), transform .26s var(--v4-ease), visibility .26s;
z-index: 600;
}
body.v3-site .nex_tour_nav ul li.v4-has-sub:hover .v4-sub,
body.v3-site .nex_tour_nav ul li.v4-has-sub:focus-within .v4-sub {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(-50%, 0);
}
/* 触发项与面板之间留出的空隙不打断 hover */
body.v3-site .nex_tour_nav ul li.v4-has-sub::after {
content: "";
position: absolute;
top: 100%; left: 0; right: 0;
height: 12px;
}
body.v3-site .nex_tour_nav ul li .v4-sub li {
float: none !important;
display: block !important;
height: auto !important;
line-height: 1.5 !important;
margin: 0 !important;
padding: 0 !important;
text-align: left;
}
body.v3-site .nex_tour_nav ul li .v4-sub li a {
display: block !important;
height: auto !important;
line-height: 1.5 !important;
padding: 10px 14px !important;
border: 0 !important;
border-radius: 9px;
text-align: left !important;
color: rgba(255, 255, 255, .9) !important;
font-size: 14px !important;
font-weight: 600 !important;
white-space: nowrap;
transition: background .22s var(--v4-ease), color .22s var(--v4-ease);
}
/* 屏蔽一级导航的橙色下划线伪元素（::before 与 ::after 两条规则都有），
二级菜单用背景色表达 hover，不需要下划线 */
body.v3-site .nex_tour_nav ul li .v4-sub li a::after,
body.v3-site .nex_tour_nav ul li .v4-sub li a::before,
body.v3-site .nex_tour_nav ul li .v4-sub li a:hover::after,
body.v3-site .nex_tour_nav ul li .v4-sub li a:hover::before {
display: none !important; content: none !important; width: 0 !important;
}
body.v3-site .nex_tour_nav ul li .v4-sub li a strong {
display: block;
font-weight: 700;
}
body.v3-site .nex_tour_nav ul li .v4-sub li a em {
display: block;
margin-top: 2px;
font-style: normal;
font-size: 12px;
font-weight: 400;
letter-spacing: .01em;
color: rgba(255, 255, 255, .46);
transition: color .22s var(--v4-ease);
}
body.v3-site .nex_tour_nav ul li .v4-sub li a:hover {
background: rgba(255, 104, 24, .14);
color: #fff !important;
}
body.v3-site .nex_tour_nav ul li .v4-sub li a:hover em { color: rgba(255, 255, 255, .72); }
/* 移动端：导航是横向滚动条，绝对定位面板会被裁切；
此时隐藏二级菜单，「产品方案」直接跳转，产品页内部另有完整的方案导航条。 */
@media (max-width: 768px) {
body.v3-site .nex_tour_nav ul li .v4-sub,
body.v3-site .v4-caret { display: none !important; }
}
/* 桌面端放开导航容器的 overflow —— Discuz 基础样式里 .nex_tour_nav{overflow:hidden}
原本用于包住浮动子项；旧弹层挂在导航外部所以从未暴露，菜单移入 后会被裁切。
这里改为用 clearfix 承担包浮动的职责，overflow 放开。移动端仍保持横向滚动条不变。 */
@media (min-width: 769px) {
body.v3-site .nex_tour_nav { overflow: visible; }
body.v3-site .nex_tour_nav::after { content: ""; display: block; clear: both; }
}