/* ============================================================
USA60.com 统一视觉系统 · Ken Huang + Eric Chen 双合伙人团队专用
Version: 2026.04.23
============================================================
使用方法：所有页面在 引入本文件
色彩哲学：深蓝(权威) + 金(高端) + 米白(质感)
字体哲学：衬线(经典沉稳) + 无衬线(现代清晰)
============================================================ */
/* ---------- Google Material Symbols 图标系统 ---------- */
/* 用法: chat 或带变体 .msi.msi-lg / .msi-sm
图标名查 https://fonts.google.com/icons
注意: 类名是 .msi (Material Symbols Icon), 不是 .icon —
.icon 已被国家页用于国旗显示 (compare-table 等), 不能复用 */
.msi, .material-symbols-rounded {
font-family: 'Material Symbols Rounded';
font-weight: 400;
font-style: normal;
font-size: 1.1em; /* 默认跟父字号匹配 */
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-flex; align-items: center; justify-content: center;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
vertical-align: -0.18em; /* 跟文字基线对齐 */
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
user-select: none;
}
.msi-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.msi-sm { font-size: 0.95em; }
.msi-lg { font-size: 1.4em; }
.msi-xl { font-size: 1.8em; }
/* ---------- CSS Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0; padding: 0;
font-family: 'Noto Sans SC', 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', sans-serif;
font-size: 16px; line-height: 1.75; color: var(--text-body);
background: var(--bg-light);
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
h1,h2,h3,h4,h5,h6 { font-family: 'Noto Serif SC', 'STSong', serif; font-weight: 700; line-height: 1.35; color: var(--primary); margin: 0 0 1rem; }
/* ---------- 设计令牌 ---------- */
:root {
--primary: #0A1F44; /* 深宝蓝 · 主色权威 */
--primary-deep: #061335; /* 更深宝蓝 · 渐变用 */
--accent: #C9A968; /* 古金色 · 高端点缀 */
--accent-light: #E0C890; /* 亮金 · hover */
--accent-deep: #A68B4E; /* 暗金 · pressed */
--bg-light: #FAF8F3; /* 米白 · 背景 */
--bg-cream: #F5F1E8; /* 奶油色 · 卡片背景 */
--text-body: #2C2C2C; /* 正文黑 */
--text-muted: #6B6B6B; /* 辅助灰 */
--text-light: #9A9A9A; /* 弱化灰 */
--border: #E8E3D6; /* 边框 */
--success: #2E7D5B; /* 成功绿 */
--danger: #B03A3A; /* 警示红 */
--shadow-sm: 0 2px 8px rgba(10,31,68,0.06);
--shadow-md: 0 6px 24px rgba(10,31,68,0.1);
--shadow-lg: 0 20px 60px rgba(10,31,68,0.15);
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--container: 1200px;
--container-narrow: 960px;
}
/* ---------- 通用容器 ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 24px; }
.section { padding: 80px 0; }
.section-tight { padding: 48px 0; }
/* ---------- 章节标题 ---------- */
.section-label {
display: inline-block;
font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
color: var(--accent); font-weight: 600;
margin-bottom: 16px;
position: relative; padding-left: 40px;
}
.section-label::before {
content: ""; position: absolute; left: 0; top: 50%;
width: 28px; height: 1px; background: var(--accent);
}
.section-title {
font-size: clamp(28px, 4vw, 42px);
font-weight: 700; line-height: 1.3;
margin-bottom: 20px;
}
.section-subtitle {
font-size: 17px; color: var(--text-muted);
max-width: 680px; line-height: 1.8;
margin: 0 auto 48px;
}
.text-center { text-align: center; }
/* ---------- 导航栏 ---------- */
.navbar {
position: sticky; top: 0; z-index: 100;
background: rgba(250,248,243,0.96); backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
}
/* navbar HTML 结构: > >
宽度由 .container (max-width 1200px, margin auto) 控制
.navbar-inner 只负责 flex 横向布局 */
.navbar > .container {
padding-top: 14px; padding-bottom: 14px;
}
.navbar-inner {
display: flex; align-items: center; justify-content: center;
gap: 80px; flex-wrap: nowrap;
}
/* 左侧: LOGO + 主导航 — 也并入水平流, 不再 flex:1 占满 */
.navbar-left {
display: flex; align-items: center; gap: 18px;
flex-wrap: nowrap;
}
.navbar-logo {
font-family: 'Playfair Display', 'Noto Serif SC', serif;
font-weight: 700; font-size: 24px;
color: var(--primary); letter-spacing: 1px;
display: flex; align-items: center; gap: 8px;
flex-shrink: 0;
}
.navbar-logo .dot { color: var(--accent); }
/* 主导航 — 紧凑间距, 不换行 */
.navbar-links {
display: flex; gap: 14px; align-items: center;
flex-wrap: nowrap; white-space: nowrap;
}
.navbar-links a {
font-size: 14.5px; color: var(--text-body); font-weight: 500;
position: relative; padding: 4px 0; transition: color .2s;
white-space: nowrap;
}
.navbar-links a:hover { color: var(--accent); }
.navbar-links a.active { color: var(--accent); }
.navbar-links a.active::after {
content: ""; position: absolute; left: 0; bottom: -6px;
width: 100%; height: 2px; background: var(--accent);
}
/* 右侧: 语言切换 + CTA — 居中布局下也并入水平流, 不换行 */
.navbar-right {
display: flex; align-items: center; gap: 14px;
flex-shrink: 0; flex-wrap: nowrap;
}
/* CTA 精致按钮 — 实心 + 气泡图标 + hover 微动效 */
.navbar-cta {
position: relative;
display: inline-flex; align-items: center; gap: 8px;
background: var(--accent); color: #fff !important;
padding: 10px 22px 10px 20px;
border-radius: 999px; /* 全圆角 pill, 高级感 */
font-weight: 600; font-size: 14px; letter-spacing: 0.3px;
text-decoration: none; white-space: nowrap;
box-shadow: 0 2px 8px rgba(217, 178, 100, 0.25);
transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
/* navbar CTA 内的 icon: 微调间距 + 略大 */
.navbar-cta .msi {
font-size: 18px;
margin-right: 2px;
vertical-align: -0.25em;
font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
/* 浮动按钮内的 icon: 居中, 无 baseline 偏移 */
.float-btn .msi {
vertical-align: middle;
font-size: 22px;
font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
/* footer creds / bio creds 里的 icon: 跟金色 accent 同色, 大小适中 */
.footer-creds .msi, .bio-creds .msi {
font-size: 16px;
color: var(--accent);
margin-right: 2px;
font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}
/* 底部条小图标 */
.footer-bottom-right .msi {
font-size: 15px;
vertical-align: -0.22em;
margin-right: 2px;
}
/* 按钮 (.btn) 里的 icon */
.btn .msi {
font-size: 18px;
margin-right: 4px;
vertical-align: -0.25em;
font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
/* 模态弹窗关闭按钮 */
.modal-close .msi {
font-size: 22px;
vertical-align: middle;
}
/* 作者署名条的 verified badge icon */
.pb-badge .msi {
font-size: 14px;
color: var(--accent);
font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
margin-right: 2px;
}
.navbar-cta:hover {
background: var(--accent-deep);
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(217, 178, 100, 0.4);
}
.navbar-cta:active { transform: translateY(0); }
.navbar-toggle { display: none; background: none; border: 0; font-size: 24px; color: var(--primary); }
/* 居中布局响应式 — 跨屏宽缩 gap 防止溢出 */
@media (max-width: 1200px) {
.navbar-inner { gap: 40px; }
.navbar-links { gap: 12px; }
.navbar-links a { font-size: 13.5px; }
.navbar-logo { font-size: 22px; }
.navbar-cta { padding: 9px 18px; font-size: 13.5px; }
}
@media (max-width: 1024px) {
.navbar-inner { gap: 24px; }
.navbar-links { gap: 10px; }
.navbar-links a { font-size: 13px; }
.navbar-cta { padding: 8px 14px; font-size: 13px; }
.lang-switch-link { padding: 6px 2px; font-size: 13px; }
}
/* ---------- 按钮 ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 14px 32px;
font-size: 15px; font-weight: 600;
border: 0; border-radius: var(--radius-sm); cursor: pointer;
transition: all .25s ease;
text-decoration: none;
white-space: nowrap;
}
.btn-primary {
background: var(--accent); color: white;
box-shadow: 0 4px 16px rgba(201,169,104,0.35);
}
.btn-primary:hover { background: var(--accent-deep); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(201,169,104,0.5); }
.btn-outline {
background: transparent; color: var(--primary);
border: 1.5px solid var(--primary);
}
.btn-outline:hover { background: var(--primary); color: white; }
.btn-ghost {
background: rgba(10,31,68,0.04); color: var(--primary);
}
.btn-ghost:hover { background: rgba(10,31,68,0.08); }
.btn-lg { padding: 18px 40px; font-size: 16px; }
.btn-sm { padding: 10px 20px; font-size: 14px; }
.btn-block { display: flex; width: 100%; }
/* ---------- Hero 通用 ---------- */
.hero {
position: relative;
background: linear-gradient(135deg, var(--primary-deep) 0%, var(--primary) 60%, #0F2A5A 100%);
color: white;
padding: 100px 0 120px;
overflow: hidden;
}
.hero::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(circle at 85% 20%, rgba(201,169,104,0.2) 0%, transparent 50%),
radial-gradient(circle at 10% 80%, rgba(201,169,104,0.1) 0%, transparent 50%);
pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero-badge {
display: inline-block;
padding: 6px 18px;
background: rgba(201,169,104,0.15);
border: 1px solid rgba(201,169,104,0.4);
border-radius: 40px;
color: var(--accent-light);
font-size: 13px; letter-spacing: 1.5px;
margin-bottom: 24px;
}
.hero h1 {
font-family: 'Noto Serif SC', serif;
font-size: clamp(32px, 5vw, 54px);
font-weight: 700; line-height: 1.25;
color: white; margin-bottom: 24px;
}
.hero h1 .gold { color: var(--accent-light); }
.hero-lead {
font-size: clamp(16px, 2vw, 19px);
line-height: 1.85; color: rgba(255,255,255,0.85);
max-width: 680px; margin-bottom: 36px;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
/* ---------- 信任条 ---------- */
.trust-bar {
background: white;
padding: 40px 0;
border-bottom: 1px solid var(--border);
}
.trust-stats {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
max-width: var(--container); margin: 0 auto; padding: 0 24px;
}
.trust-stat { text-align: center; }
.trust-stat .num {
font-family: 'Playfair Display', serif;
font-size: clamp(32px, 4vw, 44px);
color: var(--accent); font-weight: 700;
display: block; line-height: 1;
}
.trust-stat .label {
font-size: 13px; color: var(--text-muted); margin-top: 8px;
letter-spacing: 1px;
}
/* ---------- 卡片 ---------- */
.card {
background: white;
border-radius: var(--radius-md);
border: 1px solid var(--border);
padding: 32px;
box-shadow: var(--shadow-sm);
transition: transform .3s, box-shadow .3s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card-gold-accent { border-top: 3px solid var(--accent); }
/* ---------- 产品页核心表格 ---------- */
.info-table {
width: 100%; border-collapse: collapse;
background: white; border-radius: var(--radius-md);
overflow: hidden; box-shadow: var(--shadow-sm);
margin: 24px 0;
}
.info-table td, .info-table th {
padding: 16px 20px; border-bottom: 1px solid var(--border);
text-align: left; font-size: 15px;
}
.info-table th {
background: var(--bg-cream); color: var(--primary);
font-weight: 600; width: 32%;
}
.info-table tr:last-child td { border-bottom: 0; }
/* ---------- 对比表格 ---------- */
.compare-table {
width: 100%; border-collapse: collapse;
background: white; border-radius: var(--radius-md);
overflow: hidden; box-shadow: var(--shadow-md);
}
.compare-table th, .compare-table td {
padding: 14px 16px; border-bottom: 1px solid var(--border);
text-align: left; font-size: 14px;
}
.compare-table thead th {
background: var(--primary); color: white;
font-weight: 600; letter-spacing: 0.5px; font-size: 13px;
}
/* ---------- 官方授权徽章条 ---------- */
.trust-badges {
background: linear-gradient(135deg, #FFF9ED 0%, #FAF4E1 100%);
border-top: 1px solid var(--accent-light);
border-bottom: 1px solid var(--accent-light);
padding: 24px 20px;
}
.trust-badges-inner {
max-width: 1200px; margin: 0 auto;
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 16px 20px; align-items: center;
}
@media (max-width: 900px) {
.trust-badges-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.trust-badges-inner { grid-template-columns: 1fr; }
}
.trust-badge {
display: flex; align-items: center; gap: 12px;
padding: 8px 12px;
}
.trust-badge .icon {
font-size: 24px; flex-shrink: 0;
width: 40px; height: 40px;
background: rgba(201,169,104,0.15);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
}
.trust-badge .text {
font-size: 13px; line-height: 1.45; color: #6B4C1E;
}
.trust-badge .text strong { color: var(--primary); display: block; margin-bottom: 2px; font-size: 14px; }
/* ---------- 创始人卡片 ---------- */
.founders-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
max-width: 960px; margin: 0 auto;
}
/* 单人创始人：横向卡片（照片左 · 文案右） */
.founders-grid.solo {
grid-template-columns: 1fr; max-width: 860px;
}
.founders-grid.solo .founder-card {
display: grid; grid-template-columns: 220px 1fr;
gap: 32px; align-items: start;
padding: 40px 40px; text-align: left;
}
.founders-grid.solo .founder-photo {
width: 200px; height: 200px; margin: 0;
}
.founders-grid.solo .founder-name,
.founders-grid.solo .founder-title { text-align: left; }
.founder-card {
background: white; border-radius: var(--radius-lg);
padding: 32px 28px; box-shadow: var(--shadow-md);
border-top: 4px solid var(--accent);
text-align: center;
}
.founder-photo {
width: 140px; height: 140px; border-radius: 50%;
object-fit: cover; margin: 0 auto 20px;
border: 4px solid var(--bg-cream);
box-shadow: 0 6px 20px rgba(10,31,68,0.12);
}
.founder-name {
font-family: 'Noto Serif SC', serif;
font-size: 26px; font-weight: 700; color: var(--primary);
margin-bottom: 6px;
}
.founder-title {
color: var(--accent); font-weight: 600; font-size: 14px;
letter-spacing: 0.04em; margin-bottom: 14px;
}
.founder-bio {
color: var(--text-muted); font-size: 14px; line-height: 1.75;
text-align: left;
}
.founder-location {
display: inline-block; margin-top: 16px;
background: var(--bg-cream); padding: 6px 14px;
border-radius: 100px; font-size: 12px; color: var(--text);
font-weight: 500;
}
/* ---------- 案例卡（支持填图片 URL；未填则显示占位） ---------- */
.case-placeholder-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px; margin-top: 28px;
}
.case-placeholder {
background: white; border: 2px dashed var(--border);
border-radius: var(--radius-md); padding: 24px 24px;
text-align: center; transition: all 0.3s;
min-height: 220px; display: flex; flex-direction: column; justify-content: flex-start;
}
.case-placeholder:hover { border-color: var(--accent); background: var(--bg-cream); }
/* 图填好后：实线边框、去掉背景色；图片占大头 */
.case-placeholder.has-img {
border-style: solid; border-color: var(--border);
background: white; padding: 0 0 20px;
overflow: hidden;
}
.case-placeholder.has-img:hover { border-color: var(--accent); }
.case-photo {
width: 100%; aspect-ratio: 4/3; object-fit: cover;
border-radius: var(--radius-md) var(--radius-md) 0 0;
margin-bottom: 14px; display: none;
}
.case-placeholder.has-img .case-photo { display: block; }
.case-placeholder.has-img .case-title { padding: 0 18px; }
.case-placeholder.has-img .case-meta { padding: 0 18px; }
.case-placeholder .case-icon {
font-size: 32px; margin-bottom: 12px;
color: var(--accent);
}
.case-placeholder.has-img .case-icon { display: none; }
.case-placeholder .case-title {
font-weight: 700; color: var(--primary); font-size: 16px;
margin-bottom: 8px;
}
.case-placeholder .case-meta {
color: var(--text-muted); font-size: 13px; line-height: 1.65;
}
.case-placeholder .case-soon {
display: inline-block; margin-top: 12px;
background: var(--accent); color: white;
padding: 4px 14px; border-radius: 100px;
font-size: 11px; letter-spacing: 0.08em;
}
.case-placeholder.has-img .case-soon { display: none; }
@media (max-width: 720px) {
.founders-grid { grid-template-columns: 1fr; }
.founders-grid.solo .founder-card {
grid-template-columns: 1fr; gap: 20px;
padding: 32px 24px; text-align: center;
}
.founders-grid.solo .founder-photo { margin: 0 auto; }
.founders-grid.solo .founder-name,
.founders-grid.solo .founder-title { text-align: center; }
}
/* ---------- 文章页 (news/article) ---------- */
.article-breadcrumb {
max-width: 820px; margin: 0 auto; padding: 24px 24px 0;
font-size: 13px; color: var(--text-muted);
}
.article-breadcrumb a { color: var(--accent); text-decoration: none; }
.article-breadcrumb a:hover { text-decoration: underline; }
.article-breadcrumb .sep { margin: 0 8px; opacity: 0.5; }
.article-wrap { max-width: 780px; margin: 0 auto; padding: 24px; }
.article-header { padding: 20px 0 36px; border-bottom: 1px solid var(--border); margin-bottom: 40px; }
.article-tag {
display: inline-block;
font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
color: var(--accent); text-transform: uppercase;
margin-bottom: 14px;
}
.article-title {
font-family: 'Noto Serif SC', serif;
font-size: 36px; color: var(--primary);
line-height: 1.3; margin: 0 0 18px; font-weight: 700;
}
.article-lede {
font-size: 19px; color: var(--text);
line-height: 1.65; margin: 0 0 24px;
}
.article-byline {
display: flex; gap: 20px; align-items: center;
font-size: 14px; color: var(--text-muted);
flex-wrap: wrap;
}
.article-byline .author {
display: flex; align-items: center; gap: 10px;
color: var(--primary); font-weight: 600;
}
.article-byline .author img {
width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
border: 2px solid var(--bg-cream);
}
.article-body { font-size: 17px; line-height: 1.85; color: var(--text); }
.article-body h2 {
font-family: 'Noto Serif SC', serif;
font-size: 26px; color: var(--primary);
margin: 40px 0 14px; line-height: 1.35; font-weight: 700;
}
.article-body h3 {
font-size: 20px; color: var(--primary);
margin: 28px 0 10px; line-height: 1.4; font-weight: 600;
}
.article-body p { margin: 0 0 18px; }
.article-body ul, .article-body ol {
margin: 0 0 20px; padding-left: 22px;
}
.article-body li { margin-bottom: 8px; }
.article-body strong { color: var(--primary); }
.article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.article-body a:hover { color: var(--accent-dark, #8a6a14); }
.article-body blockquote {
border-left: 4px solid var(--accent);
padding: 8px 0 8px 22px;
margin: 24px 0;
font-style: italic; color: var(--text);
background: var(--bg-cream); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
padding: 16px 22px;
}
.article-body .callout {
background: var(--bg-cream); border-left: 4px solid var(--accent);
padding: 20px 24px; margin: 28px 0;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.article-body .callout.tip { border-color: var(--accent); }
.article-body .callout.warn {
border-color: #c8502d; background: #fff3ee;
}
.article-body .callout p:last-child { margin-bottom: 0; }
.article-footer {
margin-top: 60px; padding-top: 32px;
border-top: 1px solid var(--border);
}
.article-cta {
background: linear-gradient(135deg, var(--primary), #142E5C);
color: white; padding: 36px 32px;
border-radius: var(--radius-md); text-align: center;
margin: 40px 0;
}
.article-cta h3 {
font-family: 'Noto Serif SC', serif;
font-size: 22px; color: white;
margin: 0 0 10px;
}
.article-cta p {
color: rgba(255,255,255,0.85);
margin: 0 0 18px;
font-size: 15px;
}
.article-related {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 20px; margin-top: 40px;
}
.article-related a {
display: block; padding: 20px 22px;
background: white; border: 1px solid var(--border);
border-radius: var(--radius-sm); text-decoration: none;
transition: all .2s;
}
.article-related a:hover {
border-color: var(--accent); transform: translateY(-1px);
}
.article-related .rel-tag {
font-size: 11px; font-weight: 600; color: var(--accent);
letter-spacing: 0.1em; text-transform: uppercase;
margin-bottom: 6px;
}
.article-related .rel-title {
color: var(--primary); font-weight: 600; font-size: 15px;
line-height: 1.45;
}
@media (max-width: 720px) {
.article-title { font-size: 26px; }
.article-lede { font-size: 16px; }
.article-body { font-size: 16px; }
.article-body h2 { font-size: 22px; }
.article-related { grid-template-columns: 1fr; }
}
.compare-table tbody td { color: var(--text) !important; }
.compare-table tbody td:first-child { font-weight: 600; color: var(--primary) !important; }
.compare-table tbody tr:nth-child(odd) { background: white; }
.compare-table tbody tr:nth-child(even) { background: var(--bg-cream); }
.compare-table .highlight { background: #FFF7DF !important; }
.compare-table .highlight td { color: var(--text) !important; }
.compare-table .star { color: var(--accent) !important; font-weight: 600; }
/* ---------- 时间线流程 ---------- */
.timeline { position: relative; padding-left: 40px; }
.timeline::before {
content: ""; position: absolute; left: 16px; top: 8px; bottom: 8px;
width: 2px; background: var(--accent);
}
.timeline-item { position: relative; padding-bottom: 32px; }
.timeline-item::before {
content: ""; position: absolute; left: -32px; top: 4px;
width: 18px; height: 18px;
background: white; border: 3px solid var(--accent);
border-radius: 50%;
}
.timeline-item h4 { color: var(--primary); margin-bottom: 8px; font-size: 18px; }
.timeline-item p { color: var(--text-muted); margin: 0; }
/* ---------- 列表风格 ---------- */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
padding: 10px 0 10px 32px;
position: relative; line-height: 1.7;
}
.check-list li::before {
content: "✓"; position: absolute; left: 0; top: 10px;
width: 22px; height: 22px; line-height: 22px;
background: var(--accent); color: white;
border-radius: 50%; text-align: center;
font-size: 13px; font-weight: 700;
}
.cross-list { list-style: none; padding: 0; margin: 0; }
.cross-list li {
padding: 10px 0 10px 32px;
position: relative; line-height: 1.7;
}
.cross-list li::before {
content: "✕"; position: absolute; left: 0; top: 10px;
width: 22px; height: 22px; line-height: 22px;
background: var(--danger); color: white;
border-radius: 50%; text-align: center;
font-size: 13px; font-weight: 700;
}
/* ---------- FAQ 手风琴 ---------- */
.faq-item {
background: white;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
margin-bottom: 12px;
overflow: hidden;
transition: box-shadow .2s;
}
.faq-item[open] { box-shadow: var(--shadow-sm); border-color: var(--accent); }
.faq-item summary {
padding: 18px 56px 18px 24px;
font-weight: 600; font-size: 16px; color: var(--primary);
cursor: pointer; list-style: none;
position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: "+"; position: absolute; right: 20px; top: 50%;
transform: translateY(-50%);
font-size: 24px; color: var(--accent); font-weight: 400;
transition: transform .25s;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item-body {
padding: 0 24px 20px; color: var(--text-muted);
line-height: 1.85; font-size: 15px;
}
/* ---------- Pill / Tag ---------- */
.pill {
display: inline-block;
padding: 4px 12px; border-radius: 40px;
font-size: 12px; font-weight: 600;
background: var(--bg-cream); color: var(--primary);
margin: 2px;
}
.pill-gold { background: var(--accent); color: white; }
.pill-outline { background: transparent; border: 1px solid var(--accent); color: var(--accent); }
.pill-red { background: var(--danger); color: white; }
.pill-green { background: var(--success); color: white; }
/* ---------- Ken 专属（头像 + bio 组件） ---------- */
.ken-card {
display: grid;
grid-template-columns: 280px 1fr;
gap: 48px;
background: white;
padding: 40px;
border-radius: var(--radius-lg);
border: 1px solid var(--border);
box-shadow: var(--shadow-md);
align-items: center;
}
.ken-photo {
width: 100%; aspect-ratio: 4/5;
background: linear-gradient(135deg, var(--primary), var(--primary-deep));
border-radius: var(--radius-md);
overflow: hidden;
position: relative;
}
.ken-photo img { width: 100%; height: 100%; object-fit: cover; }
.ken-photo.placeholder::after {
content: "Ken\A照片"; white-space: pre;
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
color: var(--accent); font-size: 14px; letter-spacing: 2px;
text-align: center;
}
.ken-name { font-size: 26px; color: var(--primary); margin: 0 0 6px; }
.ken-title { color: var(--accent); font-weight: 600; font-size: 14px; letter-spacing: 1.5px; margin: 0 0 20px; }
.ken-bio p { margin-bottom: 12px; line-height: 1.8; color: var(--text-body); }
/* ---------- CTA 条 ---------- */
.cta-strip {
background: linear-gradient(135deg, var(--primary-deep), var(--primary));
color: white; padding: 72px 0;
text-align: center;
position: relative; overflow: hidden;
}
.cta-strip::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(circle at 80% 50%, rgba(201,169,104,0.15) 0%, transparent 50%);
}
.cta-strip .container { position: relative; z-index: 1; }
.cta-strip h2 { color: white; font-size: clamp(26px, 3.5vw, 38px); margin-bottom: 16px; }
.cta-strip p { font-size: 17px; color: rgba(255,255,255,0.8); margin-bottom: 32px; max-width: 680px; margin-left: auto; margin-right: auto; }
/* ---------- 页脚 ---------- */
.footer {
background: linear-gradient(180deg, var(--primary-deep) 0%, #04102C 100%);
color: rgba(255,255,255,0.72);
padding: 64px 0 0;
position: relative;
}
.footer::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--accent) 0%, var(--accent-light) 50%, var(--accent) 100%);
}
.footer a {
color: rgba(255,255,255,0.72); transition: color .2s, padding-left .2s;
text-decoration: none;
}
.footer a:hover { color: var(--accent-light); }
/* === 主体网格 — 列数随 DB 链接组数自适应 === */
.footer-grid {
display: grid;
/* 品牌块(2fr) + N 个 DB 链接组(每个 1fr,N 由 PHP 注入 --db-cols) + 联系块(1.4fr) */
grid-template-columns: 2fr repeat(var(--db-cols, 2), 1fr) 1.4fr;
gap: 50px;
padding-bottom: 48px;
}
/* ① 品牌列 */
.footer-brand-col .footer-brand {
font-family: 'Noto Serif SC', 'Playfair Display', serif;
font-size: 26px; font-weight: 700;
color: #fff; margin-bottom: 14px;
letter-spacing: 1px;
}
.footer-brand-col .footer-desc {
font-size: 14px; line-height: 1.85;
color: rgba(255,255,255,0.62);
margin: 0 0 20px;
max-width: 360px;
}
.footer-brand-col .footer-creds {
display: flex; flex-wrap: wrap; gap: 14px;
font-size: 12.5px; color: rgba(255,255,255,0.55);
padding: 14px 0;
border-top: 1px solid rgba(255,255,255,0.08);
border-bottom: 1px solid rgba(255,255,255,0.08);
margin-bottom: 20px;
}
.footer-brand-col .footer-cta .btn {
font-size: 13px; padding: 10px 20px;
}
/* ② / ③ 链接列 + 联系列 */
.footer-col h4,
.footer-brand-col h4 {
color: var(--accent-light);
font-size: 13px; font-weight: 600;
letter-spacing: 1.5px; text-transform: uppercase;
margin: 0 0 18px;
font-family: inherit;
position: relative; padding-bottom: 12px;
}
.footer-col h4::after {
content: ""; position: absolute; left: 0; bottom: 0;
width: 24px; height: 2px;
background: var(--accent);
}
.footer-col ul, .footer-brand-col ul {
list-style: none; padding: 0; margin: 0;
}
.footer-col ul li {
margin-bottom: 12px; font-size: 14px; line-height: 1.5;
}
.footer-col ul li a {
display: inline-block;
position: relative;
}
.footer-col ul li a:hover {
padding-left: 6px;
}
.footer-col ul li a::before {
content: "›"; position: absolute; left: -10px;
opacity: 0; transition: opacity .2s, left .2s;
color: var(--accent);
}
.footer-col ul li a:hover::before { opacity: 1; left: -4px; }
/* ③ 联系列 (key-value 排版) */
.footer-contact ul li {
display: flex; flex-direction: column; gap: 2px;
margin-bottom: 14px;
}
.footer-contact .ft-key {
font-size: 11.5px; letter-spacing: 1px;
color: rgba(255,255,255,0.45);
text-transform: uppercase;
}
.footer-contact .ft-val {
font-size: 14px; color: rgba(255,255,255,0.85);
font-weight: 500;
}
.footer-contact .ft-mail {
font-size: 13.5px; word-break: break-all;
}
/* === 底部条 === */
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.08);
padding: 22px 0;
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 12px;
font-size: 13px;
color: rgba(255,255,255,0.45);
}
.footer-bottom-right {
display: flex; align-items: center; gap: 10px;
}
.footer-bottom .ft-disclaimer {
color: rgba(255,255,255,0.35);
}
.footer-bottom .ft-sep { opacity: .3; }
.footer-bottom a {
color: rgba(255,255,255,0.55);
transition: color .2s;
}
.footer-bottom a:hover { color: var(--accent-light); }
/* === 响应式 === */
@media (max-width: 960px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 36px;
}
.footer-brand-col {
grid-column: 1 / -1;
}
}
@media (max-width: 600px) {
.footer { padding-top: 48px; }
.footer-grid { grid-template-columns: 1fr; gap: 32px; }
.footer-bottom {
flex-direction: column; text-align: center;
padding: 20px 0 24px;
}
}
/* ---------- 浮动按钮 ---------- */
.float-bar {
position: fixed; right: 24px; bottom: 24px; z-index: 99;
display: flex; flex-direction: column; gap: 12px;
}
.float-btn {
width: 52px; height: 52px; border-radius: 50%;
background: var(--accent); color: white;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 20px rgba(201,169,104,0.4);
transition: transform .2s;
font-size: 22px; border: 0;
}
.float-btn:hover { transform: scale(1.1); }
.float-btn.primary { background: var(--accent); }
.float-btn.tg { background: #229ED9; }
.float-btn.top { background: var(--primary); font-size: 18px; }
/* ---------- 弹窗 ---------- */
.modal {
display: none; position: fixed; inset: 0; z-index: 999;
background: rgba(10,31,68,0.6); backdrop-filter: blur(4px);
align-items: center; justify-content: center;
padding: 24px;
}
.modal.active { display: flex; }
.modal-inner {
background: white; border-radius: var(--radius-lg);
padding: 40px 32px; max-width: 400px; width: 100%;
text-align: center;
position: relative;
box-shadow: var(--shadow-lg);
}
.modal-close {
position: absolute; right: 16px; top: 16px;
background: none; border: 0; font-size: 24px; color: var(--text-muted);
line-height: 1; padding: 4px 8px;
}
.modal-inner h3 { margin-bottom: 12px; font-size: 22px; }
.modal-inner .qr-wrap {
width: 240px; height: 240px; margin: 20px auto;
background: var(--bg-cream); border-radius: var(--radius-sm);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.modal-inner .qr-wrap img { width: 100%; height: 100%; object-fit: contain; }
/* ---------- 图片画廊 ---------- */
.gallery-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
}
/* cases 页年份段内的 gallery 不居中 — 时间线靠左排版更整齐 */
/* cases 页年份段 — 严格 4 列网格,左对齐 */
.year-section .gallery-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
justify-content: stretch;
}
.year-section .gallery-item {
flex: none;
width: auto;
}
@media (max-width: 1024px) {
.year-section .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
.year-section .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.year-section .gallery-grid { grid-template-columns: 1fr; }
}
.gallery-item {
flex: 0 0 280px;
aspect-ratio: 4/3; border-radius: var(--radius-sm);
overflow: hidden; background: var(--bg-cream);
position: relative; cursor: pointer;
box-shadow: var(--shadow-sm);
transition: transform .3s;
}
@media (max-width: 720px) {
.gallery-item { flex-basis: calc(50% - 8px); }
}
@media (max-width: 480px) {
.gallery-item { flex-basis: 100%; }
}
.gallery-item:hover { transform: scale(1.03); box-shadow: var(--shadow-md); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-item .date-tag {
position: absolute; left: 8px; top: 8px;
background: rgba(10,31,68,0.85); color: var(--accent);
font-size: 11px; padding: 3px 8px; border-radius: 3px;
}
/* ---------- 响应式 ---------- */
@media (max-width: 960px) {
.section { padding: 56px 0; }
.trust-stats { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
.ken-card { grid-template-columns: 1fr; gap: 24px; padding: 28px; }
.ken-photo { max-width: 240px; margin: 0 auto; }
.info-table th { width: auto; }
}
@media (max-width: 720px) {
.navbar-links { display: none; position: absolute; top: 100%; left: 0; right: 0; background: white; flex-direction: column; padding: 20px; gap: 16px; box-shadow: var(--shadow-md); border-bottom: 1px solid var(--border); }
.navbar-links.open { display: flex; }
.navbar-toggle { display: block; }
.hero { padding: 60px 0 80px; }
.compare-table { font-size: 12px; }
.compare-table th, .compare-table td { padding: 8px 10px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.btn { padding: 12px 24px; }
.btn-lg { padding: 14px 28px; }
.footer-grid { grid-template-columns: 1fr; }
.float-bar { right: 14px; bottom: 14px; }
.float-btn { width: 46px; height: 46px; font-size: 18px; }
}
/* ---------- 动画 ---------- */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-in { animation: fadeInUp .6s ease-out both; }
/* ============================================
i18n · 中英文双语切换
============================================ */
/* 默认中文显示 · 英文隐藏 */
body [data-lang="en"],
body[data-lang-active="zh"] [data-lang="en"] { display: none !important; }
body[data-lang-active="en"] [data-lang="zh"] { display: none !important; }
body[data-lang-active="en"] [data-lang="en"] { display: revert !important; }
/* 某些 grid / flex 布局需要 display 值正确 */
body[data-lang-active="en"] section[data-lang="en"] { display: block !important; }
body[data-lang-active="en"] div[data-lang="en"].founders-grid,
body[data-lang-active="en"] div[data-lang="en"].trust-badges-inner,
body[data-lang-active="en"] div[data-lang="en"].flagship-grid,
body[data-lang-active="en"] div[data-lang="en"].passport-matrix,
body[data-lang-active="en"] div[data-lang="en"].case-placeholder-grid,
body[data-lang-active="en"] div[data-lang="en"].hero-actions { display: grid !important; }
/* === 语言切换链接 (跳转 /en/ 子目录) === */
/* 语言切换 — 低调的文字 + 图标链接, 不抢 CTA 戏 */
.lang-switch-link {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 4px;
position: relative;
background: transparent; color: var(--text-muted, #6b7280);
border: 0; /* 去掉边框 */
font-size: 13.5px; font-weight: 500; letter-spacing: 0.4px;
text-decoration: none;
transition: color .2s ease;
}
.lang-switch-link:hover { color: var(--accent); }
.lang-switch-link:hover .lang-icon { transform: rotate(15deg); }
.lang-switch-link .lang-icon {
flex-shrink: 0;
width: 16px; height: 16px;
stroke-width: 1.7;
opacity: 0.85;
transition: transform .3s ease, opacity .2s ease;
}
.lang-switch-link:hover .lang-icon { opacity: 1; }
/* 优雅的细竖线分隔: 用 ::after 在 lang-switch 和 CTA 中间加一条 */
.lang-switch-link::after {
content: "";
position: absolute;
right: -10px; top: 50%; transform: translateY(-50%);
width: 1px; height: 18px;
background: rgba(0, 0, 0, 0.1);
}
/* 语言切换按钮 (旧版, JS 切换 - 已被 lang-switch-link 替代) */
.lang-switch {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 14px; margin-left: 8px;
background: transparent; color: var(--accent);
border: 1.5px solid var(--accent); border-radius: 20px;
font-size: 13px; font-weight: 600; letter-spacing: 0.5px;
cursor: pointer; transition: all .2s; font-family: inherit;
}
.lang-switch:hover { background: var(--accent); color: white; }
.lang-switch .dot { font-size: 10px; opacity: .6; }
body[data-lang-active="en"] .lang-switch { color: var(--primary); border-color: var(--primary); }
body[data-lang-active="en"] .lang-switch:hover { background: var(--primary); color: white; }
/* navbar 语言按钮定位（悬浮在右上） */
.navbar-links .lang-switch { margin-left: 4px; }
@media (max-width: 860px) {
.lang-switch { padding: 5px 12px; font-size: 12px; }
}
/* (已废弃) 旧版 .navbar-links .navbar-cta 规则 —
CTA 现在在 .navbar-right 里, 样式由 .navbar-cta 自己管 */
/* ============================================================
修复: 圣基茨等深色背景 section 里的对比表格,
防止单元格文字被父 section 的白色继承覆盖
============================================================ */
.section .compare-table,
section .compare-table {
background: #fff !important;
color: var(--text) !important;
}
.section .compare-table tbody,
.section .compare-table tbody tr,
.section .compare-table tbody td,
.section .compare-table tbody th,
section .compare-table tbody,
section .compare-table tbody tr,
section .compare-table tbody td,
section .compare-table tbody th {
color: var(--text) !important;
}
.section .compare-table tbody td:first-child,
section .compare-table tbody td:first-child {
color: var(--primary) !important;
font-weight: 600;
}
.section .compare-table tbody td.star,
section .compare-table tbody td.star {
color: var(--accent) !important;
font-weight: 700;
}
.section .compare-table tbody td strong,
section .compare-table tbody td strong {
color: var(--primary) !important;
}
/* 表头保持深底白字 */
.section .compare-table thead th,
section .compare-table thead th {
background: var(--primary) !important;
color: #fff !important;
}
/* ============================================================
修复: 文章详情页 .article-cta 里的按钮看不见
把 CTA 内的按钮强制做成 白底 + 深色字 (与父深色背景形成强对比)
============================================================ */
.article-cta .btn,
.article-cta a.btn,
.article-cta .btn-primary,
.article-cta a.btn-primary {
background: #fff !important;
color: var(--primary) !important;
border: 2px solid #fff !important;
box-shadow: 0 4px 16px rgba(0,0,0,.18) !important;
}
.article-cta .btn:hover,
.article-cta a.btn:hover,
.article-cta .btn-primary:hover,
.article-cta a.btn-primary:hover {
background: var(--accent) !important;
color: #fff !important;
border-color: var(--accent) !important;
}
/* ============================================================
终极兜底: compare-table 强制 dark 文字
覆盖任何祖先元素(包括内联 style)的 color 继承
============================================================ */
table.compare-table tbody tr td,
table.compare-table tbody tr td * {
color: #2C3338 !important;
}
table.compare-table tbody tr td:first-child,
table.compare-table tbody tr td:first-child * {
color: #0A1F44 !important;
}
table.compare-table tbody tr td.star,
table.compare-table tbody tr td.star * {
color: #C9A968 !important;
}
table.compare-table thead tr th,
table.compare-table thead tr th * {
color: #FFFFFF !important;
}
/* 导航 logo 改成图片时的样式 */
.navbar-logo img {
height: 38px;
width: auto;
display: block;
max-width: 200px;
}
@media (max-width: 720px) {
.navbar-logo img { height: 32px; }
}
/* ============================================================
动效系统 · Motion System (2026.04.25)
============================================================ */
/* 1. 滚动浮现 — 默认隐藏，进入视口加 .animate-in 即触发 */
[data-animate] {
opacity: 0;
transform: translateY(24px);
transition: opacity .9s cubic-bezier(.21,.6,.35,1),
transform .9s cubic-bezier(.21,.6,.35,1);
will-change: opacity, transform;
}
[data-animate].animate-in {
opacity: 1;
transform: translateY(0);
}
/* 2. Hero 内部分级入场 (badge → 标题 → 副标题 → 按钮) */
.hero[data-animate] .hero-badge,
.hero[data-animate] h1,
.hero[data-animate] .hero-lead,
.hero[data-animate] .hero-actions {
opacity: 0;
transform: translateY(18px);
transition: opacity .85s ease, transform .85s ease;
}
.hero[data-animate].animate-in .hero-badge { opacity: 1; transform: none; transition-delay: .05s; }
.hero[data-animate].animate-in h1 { opacity: 1; transform: none; transition-delay: .18s; }
.hero[data-animate].animate-in .hero-lead { opacity: 1; transform: none; transition-delay: .32s; }
.hero[data-animate].animate-in .hero-actions { opacity: 1; transform: none; transition-delay: .48s; }
/* 3. trust-stat 数字渐变金色 + 错位入场 */
.trust-stat .num {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.trust-stat[data-animate]:nth-child(1).animate-in { transition-delay: .05s; }
.trust-stat[data-animate]:nth-child(2).animate-in { transition-delay: .18s; }
.trust-stat[data-animate]:nth-child(3).animate-in { transition-delay: .31s; }
.trust-stat[data-animate]:nth-child(4).animate-in { transition-delay: .44s; }
/* 4. 导航栏滚动后视觉强化 */
.navbar { transition: box-shadow .3s ease, background .3s ease; }
.navbar.scrolled {
box-shadow: 0 4px 20px rgba(10,31,68,0.08);
background: rgba(250,248,243,0.99);
}
/* 5. 卡片 hover 上浮 */
.card {
transition: transform .3s cubic-bezier(.21,.6,.35,1),
box-shadow .3s ease,
border-color .3s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
/* 6. 按钮微动 */
.btn {
position: relative;
transition: transform .2s ease, box-shadow .2s ease, background .25s ease, color .25s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
/* 7. Gallery 图片 hover 缩放 */
.gallery-item { cursor: zoom-in; }
.gallery-item img {
transition: transform .55s cubic-bezier(.21,.6,.35,1);
}
.gallery-item:hover img { transform: scale(1.06); }
/* 8. 官方对接 trust-badge */
.trust-badge {
transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.trust-badge:hover {
transform: translateY(-3px);
background: var(--bg-cream);
box-shadow: var(--shadow-sm);
}
/* 9. 浮动微信按钮 — 持续呼吸光环 */
@keyframes pulseRing {
0% { box-shadow: 0 0 0 0 rgba(201,169,104,0.6); }
70% { box-shadow: 0 0 0 16px rgba(201,169,104,0); }
100% { box-shadow: 0 0 0 0 rgba(201,169,104,0); }
}
.float-btn.primary { animation: pulseRing 2.6s infinite; }
.float-btn { transition: transform .2s ease; }
.float-btn:hover { transform: scale(1.1); }
/* 10. FAQ 折叠 */
.faq-item { transition: background .25s ease, border-color .25s ease; }
.faq-item summary { transition: color .2s ease; }
.faq-item[open] summary { color: var(--accent); }
/* 11. 页脚链接 hover 滑入下划线 */
.footer ul a {
background-image: linear-gradient(var(--accent), var(--accent));
background-size: 0 1px; background-repeat: no-repeat;
background-position: 0 100%;
transition: background-size .35s ease, color .25s ease;
padding-bottom: 1px;
}
.footer ul a:hover {
color: var(--accent);
background-size: 100% 1px;
}
/* 12. 图片灯箱 */
.lightbox {
position: fixed; inset: 0; z-index: 9999;
background: rgba(8,12,28,0.92);
display: none; align-items: center; justify-content: center;
padding: 40px;
cursor: zoom-out;
opacity: 0;
transition: opacity .25s ease;
}
.lightbox.active { display: flex; opacity: 1; }
.lightbox img {
max-width: 95%; max-height: 92vh;
object-fit: contain;
border-radius: 8px;
box-shadow: 0 24px 80px rgba(0,0,0,0.6);
animation: lightboxIn .35s cubic-bezier(.21,.6,.35,1);
}
.lightbox-close {
position: absolute; top: 20px; right: 24px;
width: 44px; height: 44px; border-radius: 50%;
background: rgba(255,255,255,0.14); color: #fff;
border: 0; font-size: 26px; line-height: 1;
display: flex; align-items: center; justify-content: center;
transition: background .2s ease, transform .2s ease;
}
.lightbox-close:hover { background: rgba(255,255,255,0.28); transform: rotate(90deg); }
@keyframes lightboxIn {
from { opacity: 0; transform: scale(.92); }
to { opacity: 1; transform: scale(1); }
}
/* 13. 微信弹窗淡入缩放 */
.modal { transition: opacity .25s ease; }
.modal.active .modal-inner {
animation: modalIn .4s cubic-bezier(.21,.6,.35,1);
}
@keyframes modalIn {
from { opacity: 0; transform: translateY(18px) scale(.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* 14. 章节标题左侧装饰线 — 进入视口后伸展 */
.section-label {
position: relative;
overflow: hidden;
}
.section-label::before {
transition: width .8s cubic-bezier(.21,.6,.35,1) .2s;
}
[data-animate] .section-label::before { width: 0; }
[data-animate].animate-in .section-label::before { width: 28px; }
/* ============================================================
完整产品线 · 9 本主流护照矩阵
============================================================ */
.passport-matrix {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 22px;
}
.passport-chip {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 28px 26px 24px;
text-decoration: none;
color: inherit;
position: relative;
overflow: hidden;
transition: transform .35s cubic-bezier(.21,.6,.35,1),
box-shadow .35s ease,
border-color .35s ease;
}
/* 顶部金色装饰条 - hover 时由左到右展开 */
.passport-chip::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent) 0%, var(--accent-light) 100%);
transform: scaleX(0);
transform-origin: left center;
transition: transform .45s cubic-bezier(.21,.6,.35,1);
}
.passport-chip:hover::before { transform: scaleX(1); }
.passport-chip:hover {
transform: translateY(-6px);
box-shadow: 0 14px 36px rgba(10,31,68,0.1);
border-color: rgba(201,169,104,0.55);
}
.passport-chip .flag {
font-size: 40px;
display: block;
margin-bottom: 14px;
line-height: 1;
filter: drop-shadow(0 2px 4px rgba(10,31,68,0.08));
}
.passport-chip h4 {
font-family: 'Noto Serif SC', 'STSong', serif;
font-size: 20px;
font-weight: 700;
color: var(--primary);
margin: 0 0 10px;
line-height: 1.35;
}
.passport-chip .meta {
font-size: 13.5px;
color: var(--text-muted);
line-height: 1.65;
margin: 0 0 18px;
flex: 1;
}
.passport-chip .price {
font-size: 17px;
font-weight: 700;
color: var(--primary);
margin: 0;
padding-top: 14px;
border-top: 1px dashed var(--border);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.passport-chip .price .arrow {
width: 30px; height: 30px;
border-radius: 50%;
background: var(--bg-cream);
color: var(--accent);
font-size: 16px; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center;
transition: background .3s ease, color .3s ease, transform .3s ease;
}
.passport-chip:hover .price .arrow {
background: var(--accent);
color: #fff;
transform: translateX(4px);
}
/* 9 张卡片错位入场 - 按行波浪式延迟 */
.passport-chip[data-animate]:nth-child(3n+1).animate-in { transition-delay: .05s; }
.passport-chip[data-animate]:nth-child(3n+2).animate-in { transition-delay: .15s; }
.passport-chip[data-animate]:nth-child(3n+3).animate-in { transition-delay: .25s; }
/* 2x2 优势卡片网格（圣卢西亚等单页用） */
.advantages-2x2 .card[data-animate]:nth-child(2n+1).animate-in { transition-delay: .05s; }
.advantages-2x2 .card[data-animate]:nth-child(2n+2).animate-in { transition-delay: .18s; }
@media (max-width: 720px) {
.advantages-2x2 { grid-template-columns: 1fr !important; }
}
@media (max-width: 960px) {
.passport-matrix { grid-template-columns: repeat(2, 1fr) !important; gap: 16px; }
}
@media (max-width: 540px) {
.passport-matrix { grid-template-columns: 1fr !important; }
.passport-chip { padding: 22px 20px 20px; }
}
/* ============================================================
GEO 组件 · Quick Answer / 作者 bio / 相关项目 / 面包屑 / FAQ
============================================================ */
/* === 作者署名条 — 通用基础样式 (浅底场景) === */
.page-byline .pb-inner {
display: flex; align-items: center; gap: 12px;
}
.page-byline .pb-avatar {
width: 38px; height: 38px;
border-radius: 50%; object-fit: cover;
border: 2px solid var(--accent-light);
flex-shrink: 0;
}
.page-byline .pb-text {
display: flex; flex-direction: column; gap: 1px;
font-size: 13.5px; line-height: 1.4;
}
.page-byline .pb-line1 { color: var(--text); }
.page-byline .pb-line1 strong { color: var(--primary); font-weight: 600; }
.page-byline .pb-loc { color: var(--text-muted); }
.page-byline .pb-line2 { color: var(--text-muted); font-size: 12px; }
.page-byline .pb-badge {
display: inline-block;
font-size: 11px; font-weight: 600;
color: var(--success);
background: rgba(46, 125, 91, 0.1);
padding: 1px 8px; border-radius: 10px;
}
.page-byline .pb-sep { margin: 0 6px; opacity: .5; }
.page-byline time { color: var(--primary); font-weight: 500; }
/* === Hero 内署名条 — 跟按钮在同一行,推到右边 === */
.hero-actions {
align-items: center;
flex-wrap: wrap;
}
.page-byline--hero {
margin-left: auto;
padding-left: 24px;
border-left: 1px dashed rgba(255,255,255,0.18);
}
.page-byline--hero .pb-line1 { color: rgba(255,255,255,0.92); }
.page-byline--hero .pb-line1 strong { color: #fff; }
.page-byline--hero .pb-loc { color: rgba(255,255,255,0.65); }
.page-byline--hero .pb-line2 { color: rgba(255,255,255,0.55); }
.page-byline--hero .pb-sep { color: rgba(255,255,255,0.4); }
.page-byline--hero time {
color: var(--accent-light); font-weight: 500;
}
.page-byline--hero .pb-badge {
color: var(--accent-light);
background: rgba(201,169,104,0.18);
}
.page-byline--hero .pb-avatar {
border-color: rgba(201,169,104,0.7);
}
@media (max-width: 960px) {
.page-byline--hero {
margin-left: 0;
padding-left: 0;
padding-top: 18px;
margin-top: 8px;
border-left: 0;
border-top: 1px dashed rgba(255,255,255,0.18);
width: 100%;
}
}
@media (max-width: 720px) {
.page-byline .pb-avatar { width: 34px; height: 34px; }
.page-byline .pb-text { font-size: 12.5px; }
.page-byline .pb-line2 { font-size: 11px; }
}
/* === 可视面包屑 === */
.breadcrumb-bar {
background: rgba(245,241,232,0.5);
border-bottom: 1px solid var(--border);
padding: 12px 0;
}
.breadcrumb-list {
display: flex; flex-wrap: wrap;
list-style: none; margin: 0; padding: 0;
font-size: 13px; color: var(--text-muted);
}
.breadcrumb-list li:not(:last-child)::after {
content: "›"; margin: 0 10px; opacity: .5;
}
.breadcrumb-list a {
color: var(--accent); text-decoration: none;
transition: color .2s;
}
.breadcrumb-list a:hover { color: var(--accent-deep); text-decoration: underline; }
.breadcrumb-list span[aria-current] {
color: var(--primary); font-weight: 500;
}
/* === FAQ 折叠列表 === */
.faq-list .faq-item {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
margin-bottom: 12px;
overflow: hidden;
}
.faq-list .faq-item summary {
padding: 18px 22px;
font-weight: 600; color: var(--primary);
font-size: 15.5px;
cursor: pointer;
display: flex; align-items: center; justify-content: space-between;
list-style: none;
transition: background .2s;
}
.faq-list .faq-item summary::-webkit-details-marker { display: none; }
.faq-list .faq-item summary::after {
content: "+";
font-size: 22px; font-weight: 400;
color: var(--accent);
transition: transform .25s;
margin-left: 12px;
}
.faq-list .faq-item[open] summary::after { content: "−"; }
.faq-list .faq-item summary:hover { background: var(--bg-cream); }
.faq-list .faq-item-body {
padding: 0 22px 20px;
color: var(--text); font-size: 14.5px; line-height: 1.85;
}
.faq-list .faq-item-body > div { color: inherit; }
/* === 作者 bio 卡片 === */
.author-bio-card {
display: grid;
grid-template-columns: 180px 1fr;
gap: 32px; align-items: center;
background: linear-gradient(135deg, #FFFFFF 0%, #FBF7EE 100%);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 32px;
box-shadow: var(--shadow-sm);
}
.author-bio-card .bio-photo {
width: 180px; height: 180px;
border-radius: 50%; object-fit: cover;
border: 4px solid var(--accent-light);
}
.author-bio-card .bio-tag {
font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
color: var(--accent); font-weight: 700;
margin: 0 0 8px;
}
.author-bio-card .bio-name {
font-family: 'Noto Serif SC', serif;
font-size: 28px; color: var(--primary);
margin: 0 0 6px;
}
.author-bio-card .bio-title {
color: var(--text-muted); font-size: 14px;
margin: 0 0 16px;
}
.author-bio-card .bio-desc {
font-size: 14.5px; line-height: 1.85; color: var(--text);
margin: 0 0 18px;
}
.author-bio-card .bio-creds {
display: flex; flex-wrap: wrap; gap: 16px;
font-size: 13px; color: var(--text-muted);
padding: 14px 0;
border-top: 1px dashed var(--border);
border-bottom: 1px dashed var(--border);
margin-bottom: 18px;
}
.author-bio-card .bio-cta { margin: 0; }
@media (max-width: 720px) {
.author-bio-card { grid-template-columns: 1fr; text-align: center; padding: 24px; }
.author-bio-card .bio-photo { width: 140px; height: 140px; margin: 0 auto; }
.author-bio-card .bio-creds { justify-content: center; }
}
/* === 相关项目内链网格 === */
.related-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.related-chip {
display: flex; align-items: center; gap: 16px;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 16px 20px;
text-decoration: none; color: inherit;
transition: transform .25s, border-color .25s, box-shadow .25s;
}
.related-chip:hover {
transform: translateY(-2px);
border-color: var(--accent);
box-shadow: var(--shadow-sm);
}
.related-chip .rc-flag {
font-size: 32px; line-height: 1;
filter: drop-shadow(0 2px 4px rgba(10,31,68,0.08));
}
.related-chip .rc-body {
flex: 1; min-width: 0;
display: flex; flex-direction: column; gap: 4px;
}
.related-chip .rc-name {
font-family: 'Noto Serif SC', serif;
font-size: 15px; color: var(--primary);
font-weight: 700; line-height: 1.3;
}
.related-chip .rc-meta {
font-size: 12.5px; color: var(--text-muted);
}
.related-chip .rc-arrow {
color: var(--accent); font-size: 18px;
transition: transform .25s;
}
.related-chip:hover .rc-arrow { transform: translateX(4px); }
@media (max-width: 720px) {
.related-grid { grid-template-columns: 1fr; }
}
/* === 紧凑作者署名 === */
.author-byline {
display: inline-flex; align-items: center; gap: 12px;
margin: 16px 0;
}
.author-byline img {
width: 44px; height: 44px;
border-radius: 50%; object-fit: cover;
border: 2px solid var(--accent-light);
}
.author-byline .byline-text {
display: flex; flex-direction: column;
font-size: 13.5px; line-height: 1.4;
}
.author-byline .byline-name { color: var(--text); }
.author-byline .byline-name strong { color: var(--primary); font-weight: 600; }
.author-byline .byline-meta { color: var(--text-muted); font-size: 12.5px; }
/* 15. 无障碍 — 尊重用户的"减少动效"偏好 */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
[data-animate] { opacity: 1 !important; transform: none !important; }
}