/* ==========================================================================
保嘉达国际物流 (BAOJIADA LOGISTICS) — 官方设计系统与样式表
Design System Standard: WCAG 2.1 AA | Grid Disciplined | Tabular Figures
========================================================================== */
/* 字体层由各页面 里的 直接加载。
这里不用 @import：@import 会让浏览器先下完 style.css、解析到这一行才去取
fonts.css，多一个串行往返，字体开始下载的时间被推迟，4G 下首屏会先闪一次
回退字体再跳字。DESIGN.md 要求移动端 4G LCP ≤2.5s。 */
/* --------------------------------------------------------------------------
1. Design Tokens (CSS Variables)
-------------------------------------------------------------------------- */
:root {
/* Color Palette (WCAG Certified) */
--color-primary: #071b3b; /* Deep Navy Maritime (Structure / Trust) */
--color-primary-variant: #0b2559; /* Secondary Deep Navy */
--color-primary-surface: #102a5c; /* Elevated Navy Card */
--color-action: #0052cc; /* Ocean Blue (Primary Action, 6.82:1 on white) */
--color-action-hover: #003fa6;
--color-action-active: #002e7a;
--color-action-dark: #1d68f2; /* Button & Link on Navy background (4.87:1 on dark) */
--color-action-dark-hover: #3b82f6;
--color-accent-gold: #f59e0b; /* Accent Gold (STRICTLY for dark bg only, 7.96:1) */
--color-accent-amber: #b45309; /* Deep Amber for light bg text (5.02:1 on white) */
--color-danger: #d32f2f; /* DG Cargo, Errors, Warnings (4.98:1 on white) */
--color-success: #15803d; /* Success State (5.02:1 on white) */
--color-warning-bg: #fffbeb;
--color-warning-border: #fde68a;
--color-text-main: #1e293b; /* High Contrast Slate Text (14.63:1) */
--color-text-secondary: #475569; /* Secondary Slate Text (7.58:1) */
--color-text-muted: #64748b; /* Muted Labels */
--color-text-on-dark: #ffffff;
--color-text-on-dark-sub: #cbd5e1;
--color-bg-page: #f8fafc;
--color-bg-white: #ffffff;
--color-bg-card-alt: #f1f5f9;
--color-border: #cbd5e1;
--color-border-subtle: #e2e8f0;
--color-border-dark: rgba(255, 255, 255, 0.12);
/* Spacing Scale (4px Base Grid) */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 64px;
--space-4xl: 96px;
/* ---- Typography Scale ----------------------------------------------------
命名空间说明: 字号一律用 --text-*，字体族一律用 --font-*（见 fonts.css）。
两者绝不共用同一个名字。
流体字号在 375px → 1280px 之间线性插值，clamp 两端封顶。
插值项用 rem 而非 px，用户在浏览器里放大字号时文字仍会跟着放大
（WCAG 2.1 AA — 1.4.4 Resize Text）。
------------------------------------------------------------------------ */
--text-hero: clamp(3rem, calc(2.1713rem + 3.536vw), 5rem); /* 48 → 80 大数字 */
--text-display: clamp(2.125rem, calc(1.7625rem + 1.547vw), 3rem); /* 34 → 48 看板数字 */
--text-h1: clamp(1.75rem, calc(1.3875rem + 1.547vw), 2.625rem); /* 28 → 42 */
--text-h2: clamp(1.5rem, calc(1.2931rem + 0.884vw), 2rem); /* 24 → 32 */
--text-h3: clamp(1.125rem, calc(1.0731rem + 0.221vw), 1.25rem); /* 18 → 20 */
--text-lg: clamp(1.0625rem, calc(1.0369rem + 0.110vw), 1.125rem); /* 17 → 18 */
--text-body: 1rem; /* 16 — 手机端不得低于此值 */
--text-md: 0.9375rem; /* 15 — 卡片内正文 */
--text-sm: 0.875rem; /* 14 — 辅助文字下限 (DESIGN.md) */
--text-label: 0.8125rem; /* 13 — 徽章/标签/eyebrow，仅限短文本 */
--text-wordmark: 0.6875rem; /* 11 — 全大写英文字标 */
--text-input: 1rem; /* 16 — 表单控件下限，低于此值 iOS Safari 聚焦时会缩放页面 */
/* ---- Line Height --------------------------------------------------------
中文字面率高于拉丁字母，同字号下需要更大行距才不显拥挤。
DESIGN.md: 标题 1.2 / 正文 1.6–1.75。
------------------------------------------------------------------------ */
--leading-hero: 0.95; /* 超大数字 */
--leading-tight: 1.25; /* 标题 */
--leading-snug: 1.45; /* 副标题、卡片标题 */
--leading-normal: 1.7; /* UI 文本 */
--leading-relaxed: 1.75; /* 中文段落 */
/* Border Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-pill: 9999px;
/* Shadows */
--shadow-card: 0 1px 3px rgba(7, 27, 59, 0.06), 0 1px 2px rgba(7, 27, 59, 0.04);
--shadow-card-hover: 0 12px 24px -4px rgba(7, 27, 59, 0.10), 0 6px 12px -2px rgba(7, 27, 59, 0.05);
--shadow-hero: 0 32px 64px -12px rgba(7, 27, 59, 0.35);
--shadow-modal: 0 25px 50px -12px rgba(7, 27, 59, 0.25);
/* Motion Timing */
--ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
--ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--duration-fast: 100ms;
--duration-normal: 200ms;
--duration-medium: 300ms;
--duration-slow: 600ms;
}
/* --------------------------------------------------------------------------
2. Reset & Global Base
-------------------------------------------------------------------------- */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 100%; /* 尊重用户在浏览器里设置的字号，不写死 16px */
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* iOS Safari 横竖屏切换时会自作主张放大文字，这里锁死 */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--leading-relaxed);
color: var(--color-text-main);
background-color: var(--color-bg-page);
overflow-x: hidden;
/* 中英混排时不要给汉字加字距，否则字间出现空洞 */
letter-spacing: 0;
}
/* Accessible Focus States */
:focus-visible {
outline: 2px solid var(--color-action);
outline-offset: 2px;
}
/* Tabular Numerics for Dashboard Data */
.tabular-nums {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
/* 吸顶头部 72px，锚点跳转必须留出这段高度，
否则点导航后区块标题被压在头部底下（抽屉里的 7 个链接全是锚点）。 */
section[id],
header[id] {
scroll-margin-top: 80px;
}
/* Common Container & Grid */
.container {
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: var(--space-lg);
padding-right: var(--space-lg);
}
.section-padding {
padding-top: var(--space-4xl);
padding-bottom: var(--space-4xl);
}
.section-padding-sm {
padding-top: var(--space-2xl);
padding-bottom: var(--space-2xl);
}
/* Headings */
h1, h2, h3, h4, h5, h6 {
color: var(--color-primary);
font-weight: 700;
line-height: var(--leading-tight);
/* 中文标题不加负字距：汉字本就满格，收紧会糊在一起 */
letter-spacing: 0;
/* 支持的浏览器会自动均衡各行长度，避免末行只剩一两个字 */
text-wrap: pretty;
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
p {
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
/* 窄屏上长英文单号/URL 不撑破容器 */
overflow-wrap: break-word;
}
a {
color: var(--color-action);
text-decoration: none;
transition: color var(--duration-fast) var(--ease-enter);
}
a:hover {
color: var(--color-action-hover);
}
img, svg {
display: block;
max-width: 100%;
height: auto;
}
/* --------------------------------------------------------------------------
3. Buttons & Interactive Controls
-------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: 12px 24px;
font-family: var(--font-body);
font-size: var(--text-body);
font-weight: 600;
border-radius: var(--radius-md);
border: 1px solid transparent;
cursor: pointer;
min-height: 44px; /* Accessible Touch Target */
text-decoration: none;
/* 按钮文案不允许逐字折行。此前顶部「获取运价」在 375px 下被 flex 压成
52×98px 的一列四字，就是缺这两行。 */
white-space: nowrap;
flex-shrink: 0;
line-height: var(--leading-tight);
transition: background-color var(--duration-normal) var(--ease-enter),
border-color var(--duration-normal) var(--ease-enter),
transform var(--duration-fast) var(--ease-enter),
box-shadow var(--duration-normal) var(--ease-enter);
}
.btn-primary {
background-color: var(--color-action);
color: #ffffff;
border-color: var(--color-action);
}
.btn-primary:hover {
background-color: var(--color-action-hover);
border-color: var(--color-action-hover);
color: #ffffff;
transform: translateY(-1px);
}
.btn-primary:active {
transform: translateY(0);
}
.btn-primary-dark {
background-color: var(--color-action-dark);
color: #ffffff;
border-color: var(--color-action-dark);
}
.btn-primary-dark:hover {
background-color: var(--color-action-dark-hover);
border-color: var(--color-action-dark-hover);
color: #ffffff;
transform: translateY(-1px);
}
.btn-secondary {
background-color: #ffffff;
color: var(--color-action);
border-color: var(--color-border);
}
.btn-secondary:hover {
background-color: var(--color-bg-page);
border-color: var(--color-action);
color: var(--color-action);
}
.btn-secondary-dark {
background-color: rgba(255, 255, 255, 0.08);
color: #ffffff;
border-color: rgba(255, 255, 255, 0.25);
}
.btn-secondary-dark:hover {
background-color: rgba(255, 255, 255, 0.16);
border-color: #ffffff;
color: #ffffff;
}
.btn-outline-gold {
background-color: transparent;
color: var(--color-accent-gold);
border-color: var(--color-accent-gold);
}
.btn-outline-gold:hover {
background-color: rgba(245, 158, 11, 0.12);
color: #ffffff;
border-color: #ffffff;
}
.btn-sm {
padding: 8px 16px;
font-size: var(--text-sm);
min-height: 36px;
}
.btn-lg {
padding: 16px 32px;
font-size: var(--text-lg);
min-height: 52px;
}
/* Badges & Tags */
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
font-size: var(--text-label);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em; /* 含中文，字距收窄 */
border-radius: var(--radius-pill);
}
.badge-gold {
background-color: rgba(245, 158, 11, 0.18);
color: var(--color-accent-gold);
border: 1px solid rgba(245, 158, 11, 0.35);
}
.badge-amber-light {
background-color: var(--color-warning-bg);
color: var(--color-accent-amber);
border: 1px solid var(--color-warning-border);
}
.badge-blue {
background-color: #ebf5ff;
color: var(--color-action);
border: 1px solid #bfdbfe;
}
.badge-danger {
background-color: #fef2f2;
color: var(--color-danger);
border: 1px solid #fecaca;
}
.badge-success {
background-color: #f0fdf4;
color: var(--color-success);
border: 1px solid #bbf7d0;
}
.badge-demo {
background-color: #fff7ed;
color: #c2410c;
border: 1px solid #fed7aa;
font-family: var(--font-mono);
}
/* --------------------------------------------------------------------------
4. Header & Navigation (Fixed / Sticky)
-------------------------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background-color: rgba(7, 27, 59, 0.96);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--color-border-dark);
transition: background-color var(--duration-normal) var(--ease-enter);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
height: 72px;
}
.brand-logo {
display: flex;
align-items: center;
gap: var(--space-md);
text-decoration: none;
min-width: 0; /* 允许品牌区在窄屏上让位，而不是把右侧按钮挤成一列 */
}
.brand-logo img,
.brand-logo svg {
width: 44px;
height: 44px;
flex-shrink: 0;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.brand-text-wrap {
display: flex;
flex-direction: column;
min-width: 0;
}
.brand-name-zh {
font-family: var(--font-body);
font-size: var(--text-lg);
font-weight: 800;
color: #ffffff;
/* 汉字字距收到 0.02em：0.05em 在 7 字商号上会多撑出 6px 并诱发折行 */
letter-spacing: 0.02em;
line-height: 1.15;
white-space: nowrap; /* 「保嘉达国际物流」不允许断成两行 */
}
.brand-name-en {
font-family: var(--font-display);
font-size: var(--text-wordmark);
font-weight: 700;
color: var(--color-text-on-dark-sub);
letter-spacing: 0.12em;
line-height: 1.2;
margin-top: 2px;
white-space: nowrap;
}
.nav-desktop {
display: flex;
align-items: center;
gap: var(--space-xl);
list-style: none;
}
.nav-link {
font-size: var(--text-md);
font-weight: 500;
color: var(--color-text-on-dark-sub);
transition: color var(--duration-fast) var(--ease-enter);
padding: 8px 0;
}
.nav-link:hover,
.nav-link.active {
color: #ffffff;
}
.header-actions {
display: flex;
align-items: center;
gap: var(--space-md);
flex-shrink: 0;
}
.lang-switch {
display: inline-flex;
align-items: center;
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid var(--color-border-dark);
border-radius: var(--radius-pill);
padding: 3px;
flex-shrink: 0;
}
.lang-btn {
display: inline-flex;
align-items: center;
justify-content: center;
/* 44px 触控高度靠 min-height 保证，视觉高度仍由 padding 控制 */
min-height: 38px;
padding: 4px 12px;
font-size: var(--text-label);
font-weight: 700;
color: var(--color-text-on-dark-sub);
border-radius: var(--radius-pill);
text-decoration: none;
white-space: nowrap;
transition: color var(--duration-fast) var(--ease-enter),
background-color var(--duration-fast) var(--ease-enter);
}
.lang-btn.active {
background-color: var(--color-action-dark);
color: #ffffff;
}
.lang-btn:hover:not(.active) {
color: #ffffff;
}
.mobile-menu-toggle {
display: none;
/* 图标 24px，触控区补到 44×44（WCAG 2.5.5） */
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: none;
border: none;
color: #ffffff;
cursor: pointer;
padding: 0;
border-radius: var(--radius-md);
}
.mobile-menu-toggle svg {
pointer-events: none;
}
/* --------------------------------------------------------------------------
4b. 移动端导航抽屉
js/main.js 一直在查找 #mobileNavDrawer，但这个元素此前从未存在，
所以 ≤768px 下汉堡按钮点了没反应、整站没有导航。此处补齐样式。
-------------------------------------------------------------------------- */
.mobile-nav-drawer {
display: none;
position: fixed;
top: 72px;
left: 0;
right: 0;
/* 铺满头部以下的整屏：只放 7 个条目也占满，
底部留一块纯深蓝，比露出半行正文干净。 */
min-height: calc(100dvh - 72px);
max-height: calc(100dvh - 72px);
overflow-y: auto;
z-index: 999;
background-color: var(--color-primary);
border-top: 1px solid var(--color-border-dark);
box-shadow: var(--shadow-hero);
padding: var(--space-lg) var(--space-lg) var(--space-2xl);
/* 抽屉从上方滑入。
关键：收起状态必须同时给 visibility: hidden 和 pointer-events: none。
只写 opacity: 0 的话，这块占满整屏的固定层依然会截获点击，
手机端头部以下的整个页面（CTA、测算器、表单）会全部点不动。 */
transform: translateY(-8px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: transform var(--duration-medium) var(--ease-enter),
opacity var(--duration-medium) var(--ease-enter),
visibility var(--duration-medium) var(--ease-enter);
}
.mobile-nav-drawer.active {
transform: translateY(0);
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* 抽屉展开时锁住背景滚动，否则固定定位的抽屉会浮在滚动的内容上 */
body.nav-open {
overflow: hidden;
}
.mobile-nav-list {
list-style: none;
display: flex;
flex-direction: column;
}
.mobile-nav-link {
display: flex;
align-items: center;
min-height: 52px; /* 触控目标，中文导航项手指能稳稳点到 */
font-size: var(--text-lg);
font-weight: 500;
color: var(--color-text-on-dark-sub);
border-bottom: 1px solid var(--color-border-dark);
text-decoration: none;
}
.mobile-nav-link:hover,
.mobile-nav-link.active {
color: #ffffff;
}
.mobile-nav-footer {
display: flex;
flex-direction: column;
gap: var(--space-md);
margin-top: var(--space-lg);
}
.mobile-nav-lang {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: var(--text-sm);
color: var(--color-text-on-dark-sub);
}
/* --------------------------------------------------------------------------
5. Hero Section (60% / 40% Asymmetric Poster)
-------------------------------------------------------------------------- */
.hero-section {
position: relative;
background-color: var(--color-primary);
background-image:
radial-gradient(circle at 85% 30%, rgba(11, 37, 89, 0.95) 0%, rgba(7, 27, 59, 0.98) 70%),
linear-gradient(135deg, rgba(7, 27, 59, 1) 0%, rgba(11, 37, 89, 0.85) 100%);
color: #ffffff;
padding-top: var(--space-4xl);
padding-bottom: var(--space-3xl);
overflow: hidden;
border-bottom: 1px solid var(--color-border-dark);
}
.hero-bg-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.12;
pointer-events: none;
background-size: cover;
background-position: center right;
mix-blend-mode: luminosity;
}
.hero-grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: var(--space-3xl);
align-items: center;
position: relative;
z-index: 2;
}
/* Hero Left: 60% Value Proposition */
.hero-content {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.hero-proposition-badge {
margin-bottom: var(--space-md);
}
.hero-title {
font-family: var(--font-body);
font-size: var(--text-h1);
font-weight: 800;
/* 中文标题行高给到 1.3：1.2 在 28px 两行标题上行间几乎贴住 */
line-height: 1.3;
color: #ffffff;
margin-bottom: var(--space-md);
/* 负字距只适合拉丁字母，汉字满格，收紧会糊 */
letter-spacing: 0;
text-wrap: pretty;
}
.hero-title .highlight-gold {
color: var(--color-accent-gold);
}
.hero-subtitle {
font-size: var(--text-lg);
line-height: 1.6;
color: var(--color-text-on-dark-sub);
margin-bottom: var(--space-2xl);
max-width: 580px;
}
.hero-actions-group {
display: flex;
align-items: center;
gap: var(--space-lg);
flex-wrap: wrap;
margin-bottom: var(--space-xl);
}
.hero-link-secondary {
display: inline-flex;
align-items: center;
gap: 6px;
color: #ffffff;
font-size: var(--text-body);
font-weight: 600;
border-bottom: 1px dashed rgba(255,255,255,0.4);
padding-bottom: 2px;
transition: all var(--duration-fast) var(--ease-enter);
}
.hero-link-secondary:hover {
color: var(--color-accent-gold);
border-bottom-color: var(--color-accent-gold);
}
.hero-commitments-row {
display: flex;
align-items: center;
gap: var(--space-xl);
padding-top: var(--space-lg);
border-top: 1px solid var(--color-border-dark);
width: 100%;
}
.commitment-item {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: var(--text-sm);
color: var(--color-text-on-dark-sub);
}
.commitment-item svg {
color: var(--color-action-dark);
flex-shrink: 0;
}
/* Hero Right: 40% Large 13-Day Number Poster */
.hero-stat-card {
background: linear-gradient(145deg, rgba(16, 42, 92, 0.8) 0%, rgba(7, 27, 59, 0.95) 100%);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: var(--radius-xl);
padding: var(--space-2xl) var(--space-xl);
text-align: center;
box-shadow: var(--shadow-hero);
position: relative;
overflow: hidden;
}
.hero-stat-card::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(245, 158, 11, 0.12) 0%, transparent 60%);
pointer-events: none;
}
.hero-number-hero {
font-family: var(--font-display);
font-size: var(--text-hero);
font-weight: 800;
line-height: 0.95;
color: var(--color-accent-gold);
display: block;
letter-spacing: -0.04em;
margin-bottom: var(--space-sm);
}
.hero-number-label {
font-size: var(--text-h3);
font-weight: 700;
color: #ffffff;
letter-spacing: 0.02em; /* 含中文，字距收窄 */
margin-bottom: var(--space-xs);
}
.hero-number-sub {
font-size: var(--text-sm);
color: var(--color-text-on-dark-sub);
margin-bottom: var(--space-lg);
}
.hero-stat-pills {
display: flex;
justify-content: center;
gap: var(--space-sm);
flex-wrap: wrap;
}
.hero-stat-pill {
background-color: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-pill);
padding: 4px 12px;
font-size: var(--text-label);
color: #ffffff;
}
/* --------------------------------------------------------------------------
6. Marquee / Credibility Bar (Hover Pause)
-------------------------------------------------------------------------- */
.marquee-bar-container {
background-color: #051329;
border-bottom: 1px solid var(--color-border-dark);
padding: 14px 0;
overflow: hidden;
}
.marquee-track {
display: flex;
gap: var(--space-3xl);
width: max-content;
animation: marquee-scroll 45s linear infinite;
}
.marquee-track:hover {
animation-play-state: paused;
}
.marquee-item {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-text-on-dark-sub);
white-space: nowrap;
}
.marquee-item .dot {
width: 6px;
height: 6px;
background-color: var(--color-accent-gold);
border-radius: 50%;
}
@keyframes marquee-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* --------------------------------------------------------------------------
7. Core Strengths Numbers Grid (By the Numbers)
-------------------------------------------------------------------------- */
.numbers-section {
background-color: var(--color-bg-white);
border-bottom: 1px solid var(--color-border-subtle);
}
.section-header {
text-align: center;
max-width: 680px;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--space-3xl);
}
.section-tag {
color: var(--color-action);
font-weight: 700;
font-size: var(--text-label);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: var(--space-xs);
display: block;
}
.section-title {
font-size: var(--text-h2);
font-weight: 800;
color: var(--color-primary);
margin-bottom: var(--space-sm);
}
.section-desc {
font-size: var(--text-body);
color: var(--color-text-secondary);
}
.numbers-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-lg);
}
.number-card {
background-color: var(--color-bg-page);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-lg);
padding: var(--space-xl) var(--space-lg);
text-align: center;
transition: transform var(--duration-normal) var(--ease-enter),
box-shadow var(--duration-normal) var(--ease-enter),
border-color var(--duration-normal) var(--ease-enter);
}
.number-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-card-hover);
border-color: var(--color-border);
}
.number-val {
font-family: var(--font-display);
font-size: var(--text-display);
font-weight: 800;
color: var(--color-primary);
line-height: 1;
margin-bottom: var(--space-xs);
}
.number-val .unit {
font-size: var(--text-h3);
font-weight: 700;
color: var(--color-action);
margin-left: 2px;
}
.number-title {
font-size: var(--text-lg);
font-weight: 700;
color: var(--color-primary);
margin-bottom: var(--space-xs);
}
.number-desc {
font-size: var(--text-md);
color: var(--color-text-secondary);
line-height: 1.5;
}
.disclaimer-note {
margin-top: var(--space-xl);
text-align: center;
font-size: var(--text-label);
color: var(--color-text-muted);
}
/* --------------------------------------------------------------------------
8. Core Services Grid (海运/空运/危险品/特种柜/海外仓)
-------------------------------------------------------------------------- */
.services-section {
background-color: var(--color-bg-page);
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-xl);
}
.service-card {
background-color: var(--color-bg-white);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-xl);
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: var(--shadow-card);
transition: transform var(--duration-normal) var(--ease-enter),
box-shadow var(--duration-normal) var(--ease-enter),
border-color var(--duration-normal) var(--ease-enter);
}
.service-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
border-color: var(--color-border);
}
.service-card-header {
padding: var(--space-xl);
padding-bottom: var(--space-md);
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.service-icon-box {
width: 48px;
height: 48px;
border-radius: var(--radius-lg);
background-color: #ebf5ff;
color: var(--color-action);
display: flex;
align-items: center;
justify-content: center;
}
.service-icon-box.icon-danger {
background-color: #fef2f2;
color: var(--color-danger);
}
.service-icon-box.icon-amber {
background-color: var(--color-warning-bg);
color: var(--color-accent-amber);
}
.service-card-body {
padding: 0 var(--space-xl) var(--space-xl);
flex-grow: 1;
display: flex;
flex-direction: column;
}
.service-title {
font-size: var(--text-h3);
font-weight: 700;
margin-bottom: var(--space-xs);
}
.service-summary {
font-size: var(--text-md);
color: var(--color-text-secondary);
line-height: 1.6;
margin-bottom: var(--space-md);
}
.service-features-list {
list-style: none;
margin-bottom: var(--space-lg);
flex-grow: 1;
}
.service-features-list li {
font-size: var(--text-md);
color: var(--color-text-main);
padding: 4px 0;
display: flex;
align-items: center;
gap: var(--space-sm);
}
.service-features-list li svg {
color: var(--color-action);
flex-shrink: 0;
}
.service-card-footer {
padding-top: var(--space-md);
border-top: 1px solid var(--color-border-subtle);
display: flex;
align-items: center;
justify-content: space-between;
}
.service-sla-tag {
font-size: var(--text-label);
font-weight: 600;
color: var(--color-action);
background-color: #f0f7ff;
padding: 3px 8px;
border-radius: var(--radius-sm);
}
/* --------------------------------------------------------------------------
9. Interactive Tools (Calculator & Tracking Hub)
-------------------------------------------------------------------------- */
.tools-section {
background-color: var(--color-bg-white);
border-top: 1px solid var(--color-border-subtle);
border-bottom: 1px solid var(--color-border-subtle);
}
.tools-tab-nav {
display: flex;
justify-content: center;
gap: var(--space-md);
margin-bottom: var(--space-2xl);
}
.tool-tab-btn {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
padding: 12px 28px;
font-size: var(--text-body);
font-weight: 700;
color: var(--color-text-secondary);
background-color: var(--color-bg-page);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-pill);
cursor: pointer;
transition: all var(--duration-normal) var(--ease-enter);
}
.tool-tab-btn.active {
background-color: var(--color-primary);
color: #ffffff;
border-color: var(--color-primary);
}
.tool-panel {
display: none;
}
.tool-panel.active {
display: block;
}
/* Freight Calculator Layout */
.calculator-box {
background-color: var(--color-bg-page);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: var(--space-2xl);
box-shadow: var(--shadow-card);
}
.calculator-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: var(--space-2xl);
}
.calc-form-group {
margin-bottom: var(--space-md);
}
.calc-form-group label {
display: block;
font-size: var(--text-sm);
font-weight: 700;
color: var(--color-primary);
margin-bottom: 6px;
}
.form-control {
width: 100%;
padding: 10px 14px;
font-family: var(--font-body);
font-size: var(--text-input);
color: var(--color-text-main);
background-color: #ffffff;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
transition: border-color var(--duration-fast) var(--ease-enter);
}
.form-control:focus {
border-color: var(--color-action);
outline: none;
}
.calc-dim-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-sm);
}
.calc-result-pane {
background-color: #ffffff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-xl);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.calc-result-header {
border-bottom: 1px solid var(--color-border-subtle);
padding-bottom: var(--space-md);
margin-bottom: var(--space-md);
}
.calc-price-display {
font-family: var(--font-display);
font-size: var(--text-display);
font-weight: 800;
color: var(--color-action);
line-height: 1.1;
margin: var(--space-xs) 0;
}
.calc-breakdown-list {
list-style: none;
font-size: var(--text-sm);
color: var(--color-text-secondary);
margin-bottom: var(--space-md);
}
.calc-breakdown-list li {
padding: 4px 0;
border-bottom: 1px dashed var(--color-border-subtle);
}
.calc-disclaimer {
font-size: var(--text-label);
color: var(--color-text-muted);
line-height: 1.4;
}
/* Tracking Tool Layout */
.tracking-box {
background-color: var(--color-bg-page);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: var(--space-2xl);
box-shadow: var(--shadow-card);
}
.tracking-input-bar {
display: flex;
gap: var(--space-sm);
margin-bottom: var(--space-md);
}
.tracking-demo-chips {
display: flex;
align-items: center;
gap: var(--space-sm);
flex-wrap: wrap;
margin-bottom: var(--space-xl);
font-size: var(--text-sm);
color: var(--color-text-secondary);
}
.demo-chip-btn {
background-color: #ffffff;
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
padding: 4px 12px;
font-size: var(--text-label);
font-family: var(--font-mono);
color: var(--color-action);
cursor: pointer;
transition: all var(--duration-fast) var(--ease-enter);
}
.demo-chip-btn:hover {
background-color: #ebf5ff;
border-color: var(--color-action);
}
/* Timeline Components */
.tracking-timeline {
background-color: #ffffff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-xl);
}
.timeline-meta-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: var(--space-md);
border-bottom: 1px solid var(--color-border-subtle);
margin-bottom: var(--space-xl);
flex-wrap: wrap;
gap: var(--space-sm);
}
.timeline-items-wrap {
position: relative;
padding-left: var(--space-2xl);
}
.timeline-items-wrap::before {
content: '';
position: absolute;
top: 8px;
bottom: 8px;
left: 7px;
width: 2px;
background-color: var(--color-border-subtle);
}
.timeline-item {
position: relative;
margin-bottom: var(--space-xl);
}
.timeline-item:last-child {
margin-bottom: 0;
}
.timeline-dot {
position: absolute;
left: calc(-1 * var(--space-2xl) + 2px);
top: 4px;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: var(--color-border);
border: 2px solid #ffffff;
box-shadow: 0 0 0 2px var(--color-border);
}
.timeline-item.active .timeline-dot {
background-color: var(--color-action);
box-shadow: 0 0 0 2px var(--color-action);
}
.timeline-item.success .timeline-dot {
background-color: var(--color-success);
box-shadow: 0 0 0 2px var(--color-success);
}
.timeline-time {
font-family: var(--font-mono);
font-size: var(--text-label);
color: var(--color-text-muted);
margin-bottom: 2px;
}
.timeline-title {
font-size: var(--text-body);
font-weight: 700;
color: var(--color-primary);
margin-bottom: 4px;
}
.timeline-desc {
font-size: var(--text-sm);
color: var(--color-text-secondary);
}
/* --------------------------------------------------------------------------
10. Overseas Warehouses Map & Capability
-------------------------------------------------------------------------- */
.warehouse-section {
background-color: var(--color-primary);
color: #ffffff;
}
.wh-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-xl);
}
.wh-card {
background: rgba(16, 42, 92, 0.6);
border: 1px solid var(--color-border-dark);
border-radius: var(--radius-xl);
padding: var(--space-xl);
transition: transform var(--duration-normal) var(--ease-enter),
border-color var(--duration-normal) var(--ease-enter);
}
.wh-card:hover {
transform: translateY(-3px);
border-color: rgba(255, 255, 255, 0.3);
}
.wh-location-title {
font-size: var(--text-h3);
font-weight: 700;
color: #ffffff;
margin-bottom: var(--space-xs);
display: flex;
align-items: center;
gap: var(--space-sm);
}
.wh-specs-list {
list-style: none;
margin: var(--space-md) 0;
font-size: var(--text-sm);
color: var(--color-text-on-dark-sub);
}
.wh-specs-list li {
padding: 4px 0;
}
/* --------------------------------------------------------------------------
11. Partners & Ecosystem (Carriers vs Platforms Split)
-------------------------------------------------------------------------- */
.partners-section {
background-color: var(--color-bg-white);
}
.partners-category-title {
font-size: var(--text-sm);
font-weight: 700;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em; /* 含中文，字距收窄 */
margin-bottom: var(--space-md);
text-align: center;
}
.partners-logos-row {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-xl);
flex-wrap: wrap;
margin-bottom: var(--space-3xl);
}
.partner-logo-pill {
padding: 8px 16px;
background-color: var(--color-bg-page);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-md);
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: 700;
color: var(--color-primary);
display: inline-flex;
align-items: center;
gap: 8px;
}
/* --------------------------------------------------------------------------
12. Footer & Compliance System
-------------------------------------------------------------------------- */
.site-footer {
background-color: #041024;
color: var(--color-text-on-dark-sub);
border-top: 1px solid var(--color-border-dark);
padding-top: var(--space-4xl);
padding-bottom: var(--space-2xl);
font-size: var(--text-md);
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
gap: var(--space-3xl);
margin-bottom: var(--space-4xl);
}
.footer-brand-desc {
font-size: var(--text-sm);
line-height: 1.7;
color: var(--color-text-on-dark-sub);
margin-top: var(--space-md);
max-width: 320px;
}
.footer-col-title {
font-size: var(--text-body);
font-weight: 700;
color: #ffffff;
margin-bottom: var(--space-lg);
}
.footer-links-list {
list-style: none;
}
.footer-links-list li {
margin-bottom: var(--space-sm);
}
.footer-links-list a {
color: var(--color-text-on-dark-sub);
font-size: var(--text-sm);
transition: color var(--duration-fast) var(--ease-enter);
}
.footer-links-list a:hover {
color: #ffffff;
}
.footer-branch-item {
margin-bottom: var(--space-md);
font-size: var(--text-sm);
}
.footer-branch-item strong {
color: #ffffff;
display: block;
}
.footer-compliance-bar {
padding-top: var(--space-xl);
border-top: 1px solid var(--color-border-dark);
display: flex;
align-items: center;
justify-content: space-between;
font-size: var(--text-label);
color: #64748b;
flex-wrap: wrap;
gap: var(--space-md);
}
.compliance-links {
display: flex;
gap: var(--space-md);
}
.compliance-links a {
color: #64748b;
}
.compliance-links a:hover {
color: #94a3b8;
}
/* --------------------------------------------------------------------------
13. Modals & Lead Gen Overlays
-------------------------------------------------------------------------- */
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
height: 100dvh;
background-color: rgba(7, 27, 59, 0.75);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-md);
opacity: 0;
visibility: hidden;
transition: opacity var(--duration-medium) var(--ease-enter),
visibility var(--duration-medium) var(--ease-enter);
}
.modal-backdrop.active {
opacity: 1;
visibility: visible;
}
.modal-card {
background-color: #ffffff;
border-radius: var(--radius-xl);
width: 100%;
max-width: 540px;
max-height: calc(100vh - (var(--space-md) * 2));
max-height: calc(100dvh - (var(--space-md) * 2));
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding: var(--space-2xl);
box-shadow: var(--shadow-modal);
position: relative;
transform: translateY(20px);
transition: transform var(--duration-medium) var(--ease-enter);
}
.modal-backdrop.active .modal-card {
transform: translateY(0);
}
.modal-close-btn {
position: absolute;
top: var(--space-lg);
right: var(--space-lg);
background: none;
border: none;
font-size: 24px;
color: var(--color-text-muted);
cursor: pointer;
padding: 4px;
}
/* WeChat QR code card (real, optimized image) */
.wechat-qr-figure {
margin: 0 0 var(--space-md);
}
.wechat-qr-img {
display: block;
width: 100%;
max-width: 320px;
height: auto;
margin: 0 auto;
background: #ffffff;
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
/* 手机端：收紧内边距、缩小二维码卡片，确保弹窗在竖屏内完整可见 */
@media (max-width: 768px) {
.modal-card {
padding: var(--space-lg);
}
.wechat-qr-img {
max-width: 260px;
}
}
/* --------------------------------------------------------------------------
14. Responsive Breakpoints (375px / 768px / 1280px)
-------------------------------------------------------------------------- */
@media (max-width: 1024px) {
.hero-grid {
grid-template-columns: 1fr;
gap: var(--space-2xl);
}
.numbers-grid {
grid-template-columns: repeat(2, 1fr);
}
.services-grid {
grid-template-columns: repeat(2, 1fr);
}
.wh-grid {
grid-template-columns: repeat(2, 1fr);
}
.calculator-grid {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
:root {
/* 字号不在这里改：--text-* 已经是 clamp 流体值，会自己缩。
这里只收区块留白（DESIGN.md: 手机 48）。 */
--space-4xl: 48px;
--space-3xl: 40px;
}
.nav-desktop {
display: none;
}
.mobile-menu-toggle {
display: inline-flex;
}
.mobile-nav-drawer {
display: block;
}
/* 窄屏 gutter 收到 16px（DESIGN.md: 手机 gutter 16） */
.container {
padding-left: var(--space-md);
padding-right: var(--space-md);
}
.numbers-grid,
.services-grid,
.wh-grid,
.footer-grid {
grid-template-columns: 1fr;
}
.calc-dim-row {
grid-template-columns: repeat(2, 1fr);
}
.btn-lg {
width: 100%;
}
/* 顶部只留品牌 + 汉堡。询价 CTA 与语言切换都已进抽屉，
再挤进 72px 高的头部会把品牌名压到语言按钮底下。
375px 实测：品牌 190 + 语言 96 + 汉堡 44 + 间距 = 362 > 可用 343。 */
.header-actions > .btn,
.header-actions > .lang-switch {
display: none;
}
/* 资信条纵向排列：三条各约 10 个汉字，343px 宽横排必然断行 */
.hero-commitments-row {
flex-direction: column;
align-items: flex-start;
gap: var(--space-md);
}
}
/* 375px 及以下：正文字号绝不下调。
此前这里把 --font-body 压到 15px，方向是错的 —— 手机上正文只能等于
或大于桌面，不能更小。只处理真正会挤爆的元素。 */
@media (max-width: 375px) {
.brand-name-zh {
font-size: var(--text-body); /* 商号退到 16px，给右侧按钮让出宽度 */
}
.hero-stat-pill {
width: 100%;
}
}
/* --------------------------------------------------------------------------
14b. 触控目标 (WCAG 2.1 AA — 2.5.5 Target Size)
两个条件取并集：
- max-width: 768px 覆盖手机与竖屏窄视口
- pointer: coarse 覆盖手指操作的平板（宽度够但仍需 44px）
-------------------------------------------------------------------------- */
@media (max-width: 768px), (pointer: coarse) {
.btn-sm {
min-height: 44px;
padding: 10px 18px;
}
.lang-btn {
min-height: 44px;
padding: 4px 16px;
}
/* 文字链靠上内边距把点击区撑到 44px，虚线下划线仍贴着文字 */
.hero-link-secondary {
padding: 12px 0 4px;
}
.footer-links-list a,
.footer-branch-item a,
.footer-compliance-bar a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.demo-chip-btn {
min-height: 44px;
padding: 8px 16px;
}
.modal-close-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
}
.tool-tab-btn {
min-height: 44px;
}
}
@media (max-width: 768px) {
/* 页签在窄屏上改为整行堆叠：并排时每个只有约 165px，
中文「运费即时测算器」要断两行，英文 "Instant Freight Calculator"
更长会直接溢出。整行排列对中英文都只占一行。 */
.tools-tab-nav {
flex-direction: column;
align-items: stretch;
}
.tool-tab-btn {
width: 100%;
justify-content: center;
padding: 12px 16px;
}
}
/* --------------------------------------------------------------------------
15. Accessibility: Prefers Reduced Motion
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.marquee-track {
animation: none !important;
}
}
/* --------------------------------------------------------------------------
16. 「关于我们」区块
此前整块用行内样式写死：grid-template-columns: 1.2fr 0.8fr 没有任何断点
覆盖，375px 下右侧 CTA 栏只剩 89px，按钮文案「立即与业务顾问沟通」
撑出 45px 横向溢出。行内样式还绕过了 --text-* 字号体系。
-------------------------------------------------------------------------- */
.about-card {
background: var(--color-bg-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: var(--space-3xl);
}
.about-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: var(--space-3xl);
align-items: center;
}
.about-cta-box {
background: var(--color-bg-page);
border: 1px dashed var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-xl);
text-align: center;
}
.about-cta-title {
font-family: var(--font-display);
font-size: var(--text-h3);
font-weight: 700;
color: var(--color-primary);
margin-bottom: var(--space-sm);
}
.about-badges-row {
display: flex;
gap: var(--space-md);
flex-wrap: wrap;
}
@media (max-width: 1024px) {
.about-grid {
grid-template-columns: 1fr;
gap: var(--space-xl);
}
}
@media (max-width: 768px) {
.about-card {
padding: var(--space-lg);
}
}
/* --------------------------------------------------------------------------
17. 表单同意栏
法务文案在手机上要看得清：字号提到 14px、行距放到 1.75。
复选框本体放大到 22px；点击区靠