/* ================================================
* Corpsite - 设计系统
* 工伤预防行业官网
* ================================================ */
:root {
/* 颜色 */
--primary: #263D8F;
--primary-mid: #EE7C4F;
--primary-light: #F4946A;
/* Auxiliary color used as the secondary stop in gradients.
* Distinct from --primary-mid (#EE7C4F orange) which stays for hover
* states, button colors, borders — only the gradient aux is #008FD7. */
--gradient-aux: #008FD7;
--accent: #EE7C4F;
--accent-dark: #D56538;
--success: #00C2A0;
--warning: #FFB800;
--text: #1A2347;
--text-mid: #4A5578;
--text-dim: #6B7390;
--text-faint: #A0A8B8;
--bg: #FFFFFF;
--bg-soft: #F7F9FC;
--bg-card: #F0F4F9;
--border: #E0E8F5;
--shadow-sm: 0 2px 8px rgba(38,61,143,.06);
--shadow: 0 4px 20px rgba(38,61,143,.08);
--shadow-lg: 0 12px 40px rgba(38,61,143,.12);
/* 字号 */
--fs-12: 0.75rem;
--fs-14: 0.875rem;
--fs-16: 1rem;
--fs-18: 1.125rem;
--fs-20: 1.25rem;
--fs-24: 1.5rem;
--fs-28: 1.75rem;
--fs-32: 2rem;
--fs-40: 2.5rem;
--fs-48: 3rem;
--fs-56: 3.5rem;
--fs-64: 4rem;
/* 字体 */
--font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC",
"Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-mono: 'JetBrains Mono', Consolas, Monaco, monospace;
/* 缓动 */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
/* 容器 */
--container: 1280px;
--radius: 8px;
--radius-lg: 16px;
--radius-xl: 24px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-sans);
color: var(--text);
background: var(--bg);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img, svg { display: block; max-width: 100%; }
input, textarea, select { font-family: inherit; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
/* ================================================
* 移动端导航（重写）
* 设计：紧凑 + 大触摸区 + 清晰层级
* ================================================ */
/* ===== 顶部条 ===== */
/* ===== 顶部条（基础 + Logo + 桌面菜单 + 桌面 CTA） ===== */
/* ================================================
* 顶部导航条（共用，JS 动态注入）
* 干净版本：顶部条 + Logo + 桌面菜单 + 桌面电话 + 汉堡按钮
* ================================================ */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
/* 透明背景，让下面的 Hero 透出来 */
background: transparent;
border-bottom: 1px solid transparent;
transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s;
}
.nav-inner {
display: flex;
justify-content: space-between;
align-items: center;
height: 72px;
gap: 24px;
}
/* 滚出 Hero 后：白色背景 + 边框 + 阴影 */
.navbar.scrolled {
background: rgba(255, 255, 255, 0.92);
border-bottom-color: rgba(38, 61, 143, 0.08);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
box-shadow: 0 1px 0 rgba(38, 61, 143, 0.04), 0 8px 24px rgba(38, 61, 143, 0.05);
}
/* Logo */
.nav-logo {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
text-decoration: none;
color: inherit;
}
.nav-logo-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: #263D8F;
display: flex;
align-items: center;
justify-content: center;
color: white;
flex-shrink: 0;
}
.nav-logo-icon svg { width: 22px; height: 22px; }
/* settings-driven logo image variant — the source image is a
* two-panel composite: left half = brand-blue background,
* right half = white background. We display ONE half at a time and
* pick which half based on the navbar state:
*
* .navbar (transparent, sitting on hero) → right half (white bg)
* .navbar.scrolled (solid white, after scroll) → left half (blue bg)
/* settings-driven logo image variant — the source image is a
* two-panel composite: the LEFT half has a brand-blue background,
* the RIGHT half has a white background (each half carries the
* brand mark in the appropriate color for its background).
*
* Per spec, exactly ONE half is rendered at any time, picked by CSS:
*
* .navbar (transparent over .hero) → RIGHT half (white)
* .navbar.scrolled (solid white after scroll) → LEFT half (blue)
*
* All non-home pages render with .navbar.scrolled from the start
* (no .hero to anchor the transparent state) so the LEFT (blue)
* half is what users see everywhere except the home hero.
*
* Implementation: the ![]()
is rendered at its FULL natural width,
* but the .nav-logo-icon--image container clips to HALF that width
* with overflow:hidden. We shift the image horizontally with
* transform: translateX(-50%) to switch which half is visible.
*/
.nav-logo-icon--image {
/* Match .nav-logo-icon's default 40x40 size — this is the SVG-icon
* size the layout was designed around. The image fills this box
* via object-fit:cover on the ![]()
, with translateX showing only
* one panel at a time. */
width: 40px;
height: 40px;
border-radius: 6px;
background: transparent;
padding: 0;
overflow: hidden;
position: relative;
}
.nav-logo-icon--image img {
/* Scale the source 614x307 logo to fit the 40x40 viewport while
* keeping the original aspect ratio. Height = 40px, width scales
* proportionally to 80px. translateX shifts which half is visible.
*
* The source logo is composed as a 4:1 layout where the left 1/4
* has a brand-blue background and the right 3/4 has a white
* background. With image width 80 in a 40 viewport:
* translateX(20px) → viewport shows columns 0..40 (left half = blue)
* translateX(-20px) → viewport shows columns 40..80 (right half = white)
*/
width: 80px; /* height-scaled at 2:1 */
min-width: 80px;
max-width: none;
height: 40px;
flex-shrink: 0;
display: block;
/* Default (hero, transparent navbar) = LEFT (blue) panel visible. */
transform: translateX(-20px);
}
/* Scrolled (solid white navbar): shift the image RIGHT so the LEFT
* (blue) panel slides into view. */
.navbar.scrolled .nav-logo-icon--image img {
transform: translateX(20px);
}
.nav-logo-text {
display: flex;
flex-direction: column;
line-height: 1.2;
/* Reserve room for "易训|智能风险减量" so the nav doesn't reflow
* when applySettingsToDom() fills the placeholders in. Without
* this fixed width the text column collapses to 0 on first paint
* (settings still loading) and the rest of the nav row shifts
* right by ~66px once the name + tagline land. min-width matches
* the widest plausible Chinese site name + tagline (≈6 chars
* brand + 6 chars tagline at 17px) so the right-side nav-menu /
* nav-search / nav-cta never have to reflow. */
min-width: 132px;
}
.nav-logo-text .name {
font-size: 17px;
font-weight: 800;
color: var(--primary);
letter-spacing: -0.3px;
white-space: nowrap;
transition: color 0.3s;
}
/* 透明状态（在 Hero 上方）— 文字白色 */
.navbar:not(.scrolled) .nav-logo-text .name { color: white; }
.navbar:not(.scrolled) .nav-logo-text .tagline { color: rgba(255,255,255,0.7); }
.nav-logo-text .tagline {
font-size: 11px;
color: var(--text-dim);
margin-top: 2px;
white-space: nowrap;
font-weight: 500;
}
/* 桌面菜单 */
.nav-menu {
display: flex;
gap: 4px;
align-items: center;
flex: 1;
justify-content: center;
}
.nav-menu a {
position: relative;
padding: 10px 16px;
font-size: 14.5px;
font-weight: 500;
color: var(--text-mid);
border-radius: 8px;
text-decoration: none;
white-space: nowrap;
transition: color 0.3s, background 0.3s;
}
.nav-menu a:hover {
color: var(--primary);
background: rgba(238, 124, 79, 0.04);
}
.nav-menu a.active {
color: var(--primary);
font-weight: 700;
}
/* 透明态（Hero 上方）— 菜单白色 */
.navbar:not(.scrolled) .nav-menu a { color: rgba(255,255,255,0.85); }
.navbar:not(.scrolled) .nav-menu a:hover {
color: white;
background: rgba(255,255,255,0.12);
}
.navbar:not(.scrolled) .nav-menu a.active {
color: white;
background: rgba(255,255,255,0.12);
}
.nav-menu a.active::after {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
transform: translateX(-50%);
width: 22px;
height: 3px;
background: var(--accent);
border-radius: 2px;
}
/* 右侧 CTA */
.nav-cta {
display: flex;
align-items: center;
gap: 16px;
flex-shrink: 0;
}
.nav-phone {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 14px;
color: var(--primary);
font-weight: 600;
white-space: nowrap;
text-decoration: none;
padding: 9px 16px;
border-radius: 100px;
background: rgba(238, 124, 79, 0.04);
transition: background 0.3s, color 0.3s;
}
/* 透明态：白色背景胶囊 */
.navbar:not(.scrolled) .nav-phone {
background: rgba(255,255,255,0.18);
color: white;
backdrop-filter: blur(10px);
}
.navbar:not(.scrolled) .nav-phone:hover { background: rgba(255,255,255,0.28); }
.nav-phone:hover { background: rgba(238, 124, 79, 0.08); }
.nav-phone svg {
width: 14px;
height: 14px;
color: var(--accent);
flex-shrink: 0;
}
/* 搜索框（导航栏内） */
.nav-search {
display: flex;
align-items: center;
background: var(--bg-soft);
border-radius: 100px;
padding: 4px 4px 4px 16px;
gap: 4px;
flex-shrink: 0;
border: 1px solid transparent;
transition: border-color 0.2s, background 0.2s;
}
.nav-search:focus-within {
border-color: var(--primary);
background: #fff;
}
.navbar:not(.scrolled) .nav-search {
background: rgba(255,255,255,0.16);
backdrop-filter: blur(8px);
}
.navbar:not(.scrolled) .nav-search:focus-within {
background: rgba(255,255,255,0.96);
}
.nav-search-input {
border: 0;
background: transparent;
outline: 0;
font-size: 14px;
width: 200px;
color: inherit;
font-family: inherit;
}
.nav-search-input::placeholder { color: var(--text-dim); }
.nav-search-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 0;
border-radius: 100px;
background: var(--primary);
color: #fff;
cursor: pointer;
flex-shrink: 0;
padding: 0;
}
.nav-search-btn svg { width: 16px; height: 16px; }
.nav-search-btn:hover { background: #0055aa; }
/* 汉堡按钮（默认隐藏） */
.mobile-btn {
display: none;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
margin: 0;
/* 默认透明态：无边框 + 半透明白底 */
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 10px;
background: rgba(255, 255, 255, 0.15);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background 0.3s, border-color 0.3s;
}
/* 滚出后（scrolled 状态）：白底实心 + 浅灰边框 */
.navbar.scrolled .mobile-btn {
background: #FFFFFF;
border-color: rgba(38, 61, 143, 0.12);
}
.mobile-btn svg {
width: 22px;
height: 22px;
display: block;
}
.mobile-btn .line {
transform-origin: 12px 12px;
transition: transform 0.3s var(--ease-out), opacity 0.2s;
}
/* 激活态（菜单展开）：按钮外观完全不变，只靠线条 X 动画区分 */
.mobile-btn.active {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3);
}
.navbar.scrolled .mobile-btn.active {
background: #FFFFFF;
border-color: rgba(38, 61, 143, 0.12);
}
.mobile-btn.active .line-top { transform: translateY(5px) rotate(45deg); }
.mobile-btn.active .line-mid { opacity: 0; transform: scaleX(0); }
.mobile-btn.active .line-bot { transform: translateY(-5px) rotate(-45deg); }
/* ================================================
* 响应式：单一断点（避免冲突）
* ================================================ */
@media (max-width: 1024px) {
/* 桌面菜单隐藏 */
.nav-menu { display: none; }
/* 电话隐藏 */
.nav-phone { display: none; }
/* 搜索隐藏（移动端用全屏搜索入口） */
.nav-search { display: none; }
/* 汉堡按钮显示 */
.mobile-btn { display: flex; }
}
@media (max-width: 900px) {
/* 紧凑布局 */
.nav-inner { height: 60px; padding: 0 12px; gap: 0; }
.nav-logo-icon { width: 36px; height: 36px; }
.nav-logo-icon svg { width: 20px; height: 20px; }
.nav-logo-text .name { font-size: 16px; }
.nav-logo-text .tagline { font-size: 10px; }
/* Same anti-reflow reservation as desktop, sized for the smaller
* 16px brand and 10px tagline at the mobile viewport. */
.nav-logo-text { min-width: 96px; }
/* 抽屉菜单从 60px 开始（由 JS 设置） */
/* Logo image variant — keep the desktop half-switch logic but at
* the smaller 36x36 viewport: img is 72x36, translateX is ±18px
* (half of the new container width). */
.nav-logo-icon--image { width: 36px; height: 36px; }
.nav-logo-icon--image img {
width: 72px;
min-width: 72px;
height: 36px;
/* default: right (white) panel */
transform: translateX(-18px);
}
.navbar.scrolled .nav-logo-icon--image img {
transform: translateX(18px);
}
}
/* ================================================
* 移动端菜单（抽屉式）
* 结构：