/* ================================================
全局样式表 - Global CSS
项目：上海永慈康复医院官网（适配新版配色）
规范：2026 最新 CSS 标准 / 响应式 / 苹果风格动画
说明：此文件为全局基础样式，引入后各页面按需自定义
================================================ */
/* ---------- 字体引入说明 ---------- */
/*
思源黑体 CN 通过 Google Fonts 国内镜像加载，
请在 HTML 的 中添加以下代码（放在本CSS之前）：
字体加载失败时自动降级：思源黑体CN → 苹方 → 微软雅黑 → 系统默认
*/
/* ================================================
1. CSS 变量定义（设计令牌 / Design Tokens）
------------------------------------------------
使用方法：var(--变量名)
示例：color: var(--color-primary);
================================================ */
:root {
/* ---------- 颜色系统 ---------- */
/* 主色调 */
--color-primary: #fa7800; /* 主色 - 橙色（品牌色）*/
--color-primary-light: #ff9433; /* 主色-浅 */
--color-primary-dark: #e66a00; /* 主色-深 */
--color-primary-alpha: rgba(250, 120, 0, 0.1); /* 主色-透明 */
/* 辅助色系 */
--color-secondary: #005aaa; /* 辅助色 - 蓝色 */
--color-secondary-light: #1a7acc; /* 辅助色-浅 */
--color-secondary-dark: #004480; /* 辅助色-深 */
/* 按钮色（独立体系）*/
--color-btn-bg: #00c88c; /* 按钮背景 */
--color-btn-hover: #00996b; /* 按钮悬停 */
--color-btn-text: #f0f0f0; /* 按钮文字 */
--color-btn-active: #007a55; /* 按钮按下 */
/* 中性色 */
--color-black: #000; /* 纯黑 */
--color-text-title: #000; /* 主标题色 */
--color-text-regular: #1c1c1c; /* 常规文字色 */
--color-text-desc: #1d1d1d; /* 简介/描述文字色 */
--color-text-miaoshu: #777; /* 简介/描述文字色 */
--color-text-qita: #999; /* 简介/描述文字色 */
--color-text-muted: #b8bbbd; /* 次要/辅助文字色 */
--color-text-white: #fff; /* 高亮背景上的文字 */
--color-text-on-highlight: #fff; /* 高亮背景上的文字（同白色）*/
--color-border: #e5e5e5; /* 边框色 */
--color-border-light: #f0f0f0; /* 浅边框 */
/* 背景色 */
--color-bg: #ffffff; /* 网页主背景 */
--color-bg-section: #faf2ea; /* 板块/区块背景 */
--color-bg-footer: #003768; /* 底部公共区域背景 */
--color-bg-gray: #f5f5f5; /* 灰色背景 */
--color-bg-hover: #faf2ea; /* 悬停背景 */
--color-bg-doctor: #c8c8c8;
/* 遮罩/浮层 */
--color-overlay: rgba(0, 0, 0, 0.35); /* 透明浮层：黑 35% */
--color-overlay-light: rgba(0, 0, 0, 0.2);
--color-overlay-dark: rgba(0, 0, 0, 0.6);
/* 功能色 */
--color-success: #00c88c;
--color-warning: #fa7800;
--color-danger: #e53935;
--color-info: #005aaa;
/* ---------- 字体系统 ---------- */
/* 字体栈：Noto Sans SC（Google Fonts思源黑体）→ 思源黑体CN → 苹方 → 微软雅黑 → 系统默认 */
--font-family: "Noto Sans SC", "Source Han Sans CN", "PingFang SC",
"Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
Arial, sans-serif;
/* 字重 */
--font-weight-regular: 400; /* 细体 Regular */
--font-weight-medium: 500; /* 粗体 Medium */
--font-weight-bold: 700; /* 超粗 Bold */
/* 字号 */
--font-size-nav: 18px; /* 导航及子栏目 */
--font-size-title: 40px; /* 大标题 */
--font-size-subtitle: 18px; /* 副标题 / 英文 */
--font-size-article: 18px; /* 文章标题 */
--font-size-body: 14px; /* 正文 */
--font-size-small: 12px; /* 小字/辅助 */
--font-size-xs: 11px; /* 最小号 */
/* 行高 */
--line-height-tight: 1.2;
--line-height-normal: 1.5;
--line-height-relaxed: 1.8;
/* ---------- 间距系统（8px 基准）---------- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
/* ---------- 圆角 ---------- */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 20px;
--radius-full: 9999px;
/* ---------- 阴影（苹果风格多层柔和阴影）---------- */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.06);
--shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.08);
--shadow-primary: 0 6px 20px rgba(250, 120, 0, 0.25);
--shadow-btn: 0 4px 12px rgba(0, 200, 140, 0.3);
/* ---------- 动画曲线（苹果风格 - 柔和缓动）---------- */
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
--ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--duration-fast: 0.15s;
--duration-normal: 0.3s;
--duration-slow: 0.5s;
/* ---------- 布局 ---------- */
--container-max: 1200px; /* 最大内容宽度 */
--container-padding: 20px; /* 两侧内边距 */
--header-height: 80px; /* 顶部导航高度 */
/* ---------- z-index 层级 ---------- */
--z-dropdown: 100;
--z-sticky: 200;
--z-fixed: 300;
--z-modal-backdrop: 400;
--z-modal: 450;
--z-tooltip: 500;
--z-toast: 600;
}
/* 禁止背景滚动（弹窗打开时） */
body.modal-open {overflow: hidden;}
/* ================================================
2. CSS 重置 (Reset)
------------------------------------------------
统一各浏览器默认样式差异
================================================ */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 防止 iOS 横屏时字体自动放大 */
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
scroll-behavior: smooth; /* 平滑滚动 */
}
/* 基础文字设置 */
body {
font-family: var(--font-family);
font-size: var(--font-size-body);
font-weight: var(--font-weight-regular);
color: var(--color-text-regular);
background-color: var(--color-bg);
line-height: var(--line-height-normal);
-webkit-font-smoothing: antialiased; /* macOS/ iOS 字体抗锯齿 */
-moz-osx-font-smoothing: grayscale; /* Firefox 字体抗锯齿 */
-webkit-tap-highlight-color: transparent; /* 移除移动端点击高亮 */
text-rendering: optimizeLegibility; /* 优化文字渲染 */
}
/* 移除列表默认样式 */
ul,
ol {
list-style: none;
}
/* 链接重置 */
a {
color: inherit;
text-decoration: none;
transition: color var(--duration-fast) var(--ease-standard);
}
a:hover {
color: var(--color-primary); /* 悬停高亮为主色 */
}
/* 图片自适应 */
img {
display: block;
/* 防止图片拖拽 */
-webkit-user-drag: none;
user-select: none;
}
/* 表单元素重置 */
button,
input,
select,
textarea {
font-family: inherit;
font-size: inherit;
color: inherit;
border: none;
outline: none;
background: none;
}
button {
cursor: pointer;
-webkit-appearance: none;
}
input,
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
textarea {
resize: vertical;
}
/* 表格重置 */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* H5 新标签默认块级 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section,
summary {
display: block;
}
/* 选中文字颜色 */
::selection {
background: var(--color-primary);
color: var(--color-text-white);
}
::-moz-selection {
background: var(--color-primary);
color: var(--color-text-white);
}
/* 滚动条样式（webkit 内核）*/
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--color-bg-gray);
}
::-webkit-scrollbar-thumb {
background: var(--color-text-muted);
border-radius: var(--radius-full);
transition: background var(--duration-normal);
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-primary);
}
/* ================================================
3. 字体设置 - 思源黑体 CN
------------------------------------------------
使用方法：直接应用，已在 body 全局生效
字重：var(--font-weight-regular/medium/bold)
================================================ */
/*
思源黑体引入说明：
方式1（推荐）：使用 Google Fonts CDN，在 HTML 的 中加入：
方式2（本地部署）：下载字体文件到 fonts/ 目录，使用 @font-face 引入
（中文字体文件较大，建议用 CDN 或按需加载子集）
*/
/* 细体 */
.font-regular {
font-weight: var(--font-weight-regular);
}
/* 粗体 Medium */
.font-medium {
font-weight: var(--font-weight-medium);
}
/* 超粗 Bold */
.font-bold {
font-weight: var(--font-weight-bold);
}
/* ================================================
4. 通用布局工具类
------------------------------------------------
使用方法：直接给元素加 class 即可
示例：
================================================ */
/* ---------- 容器 ---------- */
.container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--container-padding);
}
.container-fluid {
width: 100%;
padding: 0 var(--container-padding);
}
/* ---------- Flex 布局 ---------- */
/*不换行对齐方式*/
.Left {display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:center; align-content:center;}
.Center {display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:center; align-items:center; align-content:center;}
.Right {display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-end; align-items:center; align-content:center;}
.Justify {display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-between; align-items:center; align-content:center;}
.Left_t {display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:flex-start; align-content:flex-start;}
.Center_t {display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:center; align-items:flex-start; align-content:flex-start;}
.Right_t {display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-end; align-items:flex-start; align-content:flex-start;}
.Justify_t {display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-between; align-items:flex-start; align-content:flex-start;}
/*换行对齐方式*/
.Left_h {display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; align-items:center; align-content:center;}
.Center_h {display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; align-content:center;}
.Right_h {display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-end; align-items:center; align-content:center;}
.Justify_h {display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-items:center; align-content:center;}
.Left_ht {display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; align-items:flex-start; align-content:flex-start;}
.Center_ht {display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:flex-start; align-content:flex-start;}
.Right_ht {display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-end; align-items:flex-start; align-content:flex-start;}
.Justify_ht {display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; align-content:flex-start;}
/* ---------- Grid 布局 ---------- */
.grid {
display: grid;
}
.grid-2 {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-6);
}
.grid-3 {
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
.grid-4 {
grid-template-columns: repeat(4, 1fr);
gap: var(--space-6);
}
/* ---------- 定位 ---------- */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.inset-0 { inset: 0; }
/* ---------- 文本 ---------- */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-white { color: var(--color-text-white); }
.text-title { color: var(--color-text-title); font-weight: var(--font-weight-bold); }
.text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.text-ellipsis-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.text-ellipsis-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 字号工具类 */
.text-nav { font-size: var(--font-size-nav); }
.text-title-lg { font-size: var(--font-size-title); font-weight: var(--font-weight-bold); }
.text-subtitle { font-size: var(--font-size-subtitle); }
.text-article { font-size: var(--font-size-article); }
/* ---------- 间距工具类 ---------- */
/* 外边距 */
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
/* 内边距 */
.p-2 { padding: var(--space-2); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20); }
/* ---------- 显示 ---------- */
.block { display: block; }
.inline-block { display: inline-block; }
.hidden { display: none; }
.overflow-hidden { overflow: hidden; }
/* ---------- 宽高 ---------- */
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }
/* ================================================
5. 按钮组件
------------------------------------------------
使用方法：
================================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 28px;
font-size: var(--font-size-body);
font-weight: var(--font-weight-medium);
border-radius: var(--radius-md);
border: 1px solid transparent;
cursor: pointer;
transition: all var(--duration-normal) var(--ease-standard);
white-space: nowrap;
user-select: none;
text-align: center;
line-height: 1.4;
/* 防止文字选中 */
-webkit-user-select: none;
}
/* 主按钮 - 绿色系 */
.btn-primary {
background-color: var(--color-btn-bg);
color: var(--color-btn-text);
border-color: var(--color-btn-bg);
}
.btn-primary:hover {
background-color: var(--color-btn-hover);
border-color: var(--color-btn-hover);
color: var(--color-btn-text);
transform: translateY(-2px);
box-shadow: var(--shadow-btn);
}
.btn-primary:active {
background-color: var(--color-btn-active);
border-color: var(--color-btn-active);
transform: translateY(0);
}
/* 主色按钮 - 橙色（强调按钮）*/
.btn-accent {
background-color: var(--color-primary);
color: var(--color-text-white);
border-color: var(--color-primary);
}
.btn-accent:hover {
background-color: var(--color-primary-dark);
border-color: var(--color-primary-dark);
color: var(--color-text-white);
transform: translateY(-2px);
box-shadow: var(--shadow-primary);
}
/* 描边按钮 */
.btn-outline {
background: transparent;
color: var(--color-text-regular);
border-color: var(--color-border);
}
.btn-outline:hover {
color: var(--color-primary);
border-color: var(--color-primary);
background-color: var(--color-primary-alpha);
}
/* 描边-主色 */
.btn-outline-primary {
background: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
}
.btn-outline-primary:hover {
background-color: var(--color-primary);
color: var(--color-text-white);
}
/* 文字按钮 */
.btn-text {
background: transparent;
color: var(--color-primary);
padding: 6px 12px;
}
.btn-text:hover {
color: var(--color-primary-dark);
background-color: var(--color-primary-alpha);
}
/* 按钮尺寸 */
.btn-lg {
padding: 14px 40px;
font-size: 16px;
border-radius: var(--radius-lg);
}
.btn-sm {
padding: 6px 16px;
font-size: 13px;
border-radius: var(--radius-sm);
}
.btn-round {
border-radius: var(--radius-full);
}
/* 禁用状态 */
.btn:disabled,
.btn.disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* 按钮图标 */
.btn-icon {
width: 40px;
height: 40px;
padding: 0;
border-radius: 50%;
}
/* ================================================
6. 图标样式
------------------------------------------------
使用方法：给 svg / i 标签加 .icon 类
颜色默认继承当前文字颜色，通过 color 调整
================================================ */
.icon {
width: 1em;
height: 1em;
color: var(--color-primary); /* 图标默认主色橙色 */
fill: currentColor; /* 填充色继承文字颜色 */
vertical-align: -0.15em;
overflow: hidden;
flex-shrink: 0;
transition: color var(--duration-fast) var(--ease-standard);
}
/* 图标尺寸 */
.icon-sm { width: 14px; height: 14px; font-size: 14px; }
.icon-md { width: 20px; height: 20px; font-size: 20px; }
.icon-lg { width: 28px; height: 28px; font-size: 28px; }
.icon-xl { width: 40px; height: 40px; font-size: 40px; }
/* 图标背景圆形 */
.icon-circle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--color-primary-alpha);
color: var(--color-primary);
}
.icon-circle:hover {
background: var(--color-primary);
color: var(--color-text-white);
}
/* ================================================
7. 导航菜单
------------------------------------------------
使用方法：
================================================ */
.nav {
display: flex;
align-items: center;
gap: 4px;
}
.nav-item {
position: relative;
padding: 0 16px;
font-size: var(--font-size-nav);
font-weight: var(--font-weight-medium);
color: var(--color-text-regular);
line-height: var(--header-height);
cursor: pointer;
transition: color var(--duration-fast) var(--ease-standard);
}
/* 悬停状态 */
.nav-item:hover {
color: var(--color-primary);
}
/* 激活/选中状态 */
.nav-item.active {
color: var(--color-primary);
}
.nav-item.active::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 32px;
height: 3px;
background: var(--color-primary);
border-radius: 2px;
}
/* 子菜单 */
.nav-item.has-child .nav-dropdown {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(10px);
min-width: 160px;
background: var(--color-bg);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: 8px 0;
opacity: 0;
visibility: hidden;
transition: all var(--duration-normal) var(--ease-standard);
z-index: var(--z-dropdown);
}
.nav-item.has-child:hover .nav-dropdown {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.nav-dropdown a {
display: block;
padding: 10px 20px;
font-size: 14px;
font-weight: var(--font-weight-regular);
color: var(--color-text-regular);
white-space: nowrap;
}
.nav-dropdown a:hover {
background: var(--color-bg-section);
color: var(--color-primary);
}
/* ================================================
8. 区块标题样式
------------------------------------------------
使用方法：
================================================ */
.section {
padding: var(--space-20) 0;
position: relative;
}
.section-bg {
background: var(--color-bg-section); /* 板块背景色 #faf2ea */
}
.section-title {
text-align: center;
margin-bottom: var(--space-12);
position: relative;
}
.section-title h2 {
font-size: var(--font-size-title);
font-weight: var(--font-weight-bold);
color: var(--color-text-title);
line-height: var(--line-height-tight);
margin-bottom: var(--space-3);
}
.section-title .subtitle {
display: block;
font-size: var(--font-size-subtitle);
font-weight: var(--font-weight-regular);
color: var(--color-text-muted);
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: var(--space-4);
}
.section-title .desc {
font-size: var(--font-size-body);
color: var(--color-text-desc);
max-width: 600px;
margin: 0 auto;
}
/* 标题装饰线（可选）*/
.section-title.has-line::after {
content: '';
display: block;
width: 60px;
height: 3px;
background: var(--color-primary);
margin: var(--space-4) auto 0;
border-radius: 2px;
}
/* 左对齐标题 */
.section-title-left {
text-align: left;
}
.section-title-left h2 { text-align: left; }
.section-title-left .subtitle { text-align: left; }
.section-title-left .desc { margin-left: 0; }
.section-title-left.has-line::after {
margin-left: 0;
margin-right: auto;
}
/* ================================================
9. 卡片组件
------------------------------------------------
使用方法：
================================================ */
.card {
background: var(--color-bg);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: all var(--duration-normal) var(--ease-standard);
}
.card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
}
.card-img {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 10;
}
.card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--duration-slow) var(--ease-decelerate);
}
.card:hover .card-img img {
transform: scale(1.05);
}
.card-body {
padding: var(--space-6);
}
.card-title {
font-size: var(--font-size-article);
font-weight: var(--font-weight-bold);
color: var(--color-text-title);
margin-bottom: var(--space-3);
transition: color var(--duration-fast);
}
.card:hover .card-title {
color: var(--color-primary);
}
.card-desc {
font-size: 13px;
color: var(--color-text-desc);
line-height: 1.6;
}
/* ================================================
10. 表单组件
------------------------------------------------
使用方法：
================================================ */
.form-group {
margin-bottom: var(--space-5);
}
.form-label {
display: block;
font-size: 14px;
font-weight: var(--font-weight-medium);
color: var(--color-text-regular);
margin-bottom: var(--space-2);
}
.form-input,
.form-select,
.form-textarea {
width: 100%;
padding: 10px 14px;
font-size: 14px;
color: var(--color-text-regular);
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
transition: all var(--duration-fast) var(--ease-standard);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-alpha);
}
.form-input::placeholder,
.form-textarea::placeholder {
color: var(--color-text-muted);
}
.form-textarea {
min-height: 100px;
resize: vertical;
}
.form-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-4);
}
.form-error {
color: var(--color-danger);
font-size: 12px;
margin-top: 4px;
}
/* ================================================
11. 标签 / 徽标
------------------------------------------------
使用方法：
热门
================================================ */
.tag {
display: inline-flex;
align-items: center;
padding: 3px 10px;
font-size: 12px;
font-weight: var(--font-weight-medium);
border-radius: var(--radius-sm);
line-height: 1.5;
}
.tag-primary {
background: var(--color-primary-alpha);
color: var(--color-primary);
}
.tag-secondary {
background: rgba(0, 90, 170, 0.1);
color: var(--color-secondary);
}
.tag-success {
background: rgba(0, 200, 140, 0.1);
color: var(--color-btn-bg);
}
.tag-muted {
background: var(--color-bg-gray);
color: var(--color-text-muted);
}
.tag-dot::before {
content: '';
width: 6px;
height: 6px;
background: currentColor;
border-radius: 50%;
margin-right: 6px;
}
/* ================================================
12. 遮罩 / 浮层
------------------------------------------------
使用方法：
或通过变量: background: var(--color-overlay);
================================================ */
.overlay {
position: absolute;
inset: 0;
background: var(--color-overlay);
pointer-events: none;
}
.overlay-gradient {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
transparent 0%,
rgba(0, 0, 0, 0.35) 100%
);
pointer-events: none;
}
/* ================================================
13. 动画效果（苹果风格）
------------------------------------------------
使用方法：给元素加 class 即可触发
- 渐入：fade-in
- 从下渐入：fade-up
- 从上渐入：fade-down
- 从左渐入：fade-left
- 从右渐入：fade-right
- 缩放进入：scale-in
- 脉冲效果：pulse
================================================ */
/* 渐入动画 */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in {
animation: fadeIn 0.6s var(--ease-decelerate) both;
}
/* 从下渐入 */
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-up {
animation: fadeUp 0.6s var(--ease-decelerate) both;
}
/* 从上渐入 */
@keyframes fadeDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-down {
animation: fadeDown 0.6s var(--ease-decelerate) both;
}
/* 从左渐入 */
@keyframes fadeLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.fade-left {
animation: fadeLeft 0.6s var(--ease-decelerate) both;
}
/* 从右渐入 */
@keyframes fadeRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.fade-right {
animation: fadeRight 0.6s var(--ease-decelerate) both;
}
/* 缩放进入（弹性效果）*/
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
.scale-in {
animation: scaleIn 0.5s var(--ease-spring) both;
}
/* 脉冲 */
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.pulse {
animation: pulse 2s var(--ease-standard) infinite;
}
/* 延迟动画（给不同元素设置延迟，形成错峰进入效果）*/
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
.delay-6 { animation-delay: 0.6s; }
/* 滚动触发动画配合 JS 使用：
给元素加 .scroll-animate 和 .fade-up 等类，
滚动到视口时添加 .is-visible 类触发动画 */
.scroll-animate {
opacity: 0;
will-change: opacity, transform;
}
.scroll-animate.is-visible {
opacity: 1;
animation-play-state: running;
}
/* ================================================
14. 分割线
================================================ */
.divider {
height: 1px;
background: var(--color-border);
margin: var(--space-6) 0;
border: none;
}
.divider-primary {
height: 2px;
background: var(--color-primary);
width: 40px;
border: none;
margin: var(--space-4) 0;
}
/* ================================================
15. 浮动 / 固定栏
================================================ */
/* 固定顶部导航 */
.header-fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: var(--z-fixed);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
transition: all var(--duration-normal) var(--ease-standard);
}
.header-fixed.scrolled {
box-shadow: var(--shadow-md);
}
/* 返回顶部按钮（给 JS 控制显示用）*/
.back-to-top {
position: fixed;
right: 30px;
bottom: 30px;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-primary);
color: var(--color-text-white);
border-radius: 50%;
cursor: pointer;
z-index: var(--z-tooltip);
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all var(--duration-normal) var(--ease-standard);
box-shadow: var(--shadow-primary);
}
.back-to-top.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:hover {
background: var(--color-primary-dark);
transform: translateY(-3px);
}
/* ================================================
16. 页脚（底部公共区域）
------------------------------------------------
背景色：#003768
================================================ */
.footer {
background: var(--color-bg-footer);
color: rgba(255, 255, 255, 0.8);
position: relative;
}
.footer::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
ellipse at 30% 0%,
rgba(250, 120, 0, 0.08),
transparent 50%
);
pointer-events: none;
}
.footer a {
color: rgba(255, 255, 255, 0.7);
transition: color var(--duration-fast);
}
.footer a:hover {
color: var(--color-primary);
}
.footer-title {
font-size: 16px;
font-weight: var(--font-weight-bold);
color: var(--color-text-white);
margin-bottom: var(--space-5);
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: var(--space-5) 0;
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
text-align: center;
position: relative;
}
/* ================================================
17. 响应式断点（移动优先）
------------------------------------------------
断点参考：
- 手机端：≤ 767px
- 平板端：768px ~ 1023px
- 桌面端：≥ 1024px
- 大屏：≥ 1440px
使用方法：在各组件中按需覆盖
================================================ */
/* ---------- 平板端（768px - 1023px）---------- */
@media (max-width: 1024px) {
:root {
--container-max: 100%;
--header-height: 70px;
--font-size-title: 32px;
--font-size-nav: 16px;
--space-20: 60px;
--space-16: 48px;
--space-12: 36px;
}
.grid-4 {
grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
grid-template-columns: repeat(2, 1fr);
}
/* 平板端导航隐藏菜单，显示汉堡按钮 */
.nav {
display: none;
}
.mobile-menu-btn {
display: flex;
}
}
/* ---------- 手机端（≤ 767px）---------- */
@media (max-width: 767px) {
:root {
--font-size-title: 26px;
--font-size-subtitle: 16px;
--font-size-article: 15px;
--font-size-body: 14px;
--font-size-nav: 16px;
--header-height: 60px;
--container-padding: 15px;
--space-20: 40px;
--space-16: 32px;
--space-12: 24px;
--space-8: 20px;
--space-6: 16px;
}
/* 栅格自适应单列 */
.grid-2,
.grid-3,
.grid-4 {
grid-template-columns: 1fr;
gap: var(--space-4);
}
.form-row {
grid-template-columns: 1fr;
}
/* 字号调整 */
.section-title h2 {
font-size: var(--font-size-title);
}
.section-title .subtitle {
font-size: 14px;
}
/* 按钮全宽（移动端体验更好）*/
.btn {
padding: 10px 20px;
}
.btn-lg {
padding: 12px 30px;
font-size: 15px;
}
/* 卡片间距 */
.card-body {
padding: var(--space-4);
}
/* 移动端隐藏元素 */
.hidden-mobile {
display: none !important;
}
.text-center-mobile {
text-align: center;
}
/* 返回顶部按钮缩小 */
.back-to-top {
width: 38px;
height: 38px;
right: 15px;
bottom: 20px;
}
}
/* ---------- 大屏优化（≥ 1440px）---------- */
@media (min-width: 1440px) {
:root {
--container-max: 1320px;
--font-size-title: 44px;
}
}
/* ---------- 暗色模式支持（可选，预留接口）---------- */
/*
@media (prefers-color-scheme: dark) {
:root {
--color-bg: #1a1a1a;
--color-text-regular: #e0e0e0;
--color-border: #333;
...暗色模式变量覆盖
}
}
*/
/* ---------- 减少动画偏好（辅助功能）---------- */
@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;
}
}
/* ================================================
18. 其他工具类
================================================ */
/* 清除浮动 */
.clearfix::after {
content: '';
display: table;
clear: both;
}
/* 文字选中效果覆盖（局部用）*/
.select-none {
user-select: none;
-webkit-user-select: none;
}
/* 可访问性：仅屏幕阅读器可见 */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* 打印样式 */
@media print {
.no-print {
display: none !important;
}
}