设计说明与配色规范
先定规范、再套页面：全站所有颜色 / 字号 / 间距 / 圆角 / 阴影均为下方令牌，无页面私写样式。令牌定义见 css/base.css :root。
1 · 设计理念
校园青春感 × 信息清晰度
配色取「校园蓝 + 招新橙」双色叙事：主蓝承担导航、链接与信任要素，强调橙只出现在倒计时与报名按钮等转化动作上，全站每屏至多一个橙色 CTA。中性灰阶负责文本层级，青绿仅用于科创类徽章，形成「文艺紫 / 体育绿 / 科创蓝」分类色觉记忆。排版上标题用 clamp() 流式缩放，正文固定 16/15px 根字号保证小屏可读；卡片大圆角 + 弱阴影保持轻盈，信息密度交给 8pt 间距栅格控制。
2 · 色板
共 13 个语义令牌，禁止使用规范外颜色
#2B5CE6#1E42A8#EAF0FF#FF7A2F#12B886#0F172A#334155#64748B#E2E8F0#F6F8FC#16A34A#F59E0B#DC26263 · 字体阶梯
系统字体栈，数字与代码使用等宽字体
4 · 间距 / 圆角 / 阴影
8pt 栅格；圆角 6/12/20/full；阴影三级
5 · 栅格与断点
Flex/Grid + rem，逐档在设备模拟器核对，无横向滚动条
| 档位 | 视口 | 容器 / 栅格 | 导航形态 |
|---|---|---|---|
| 桌面 | ≥1200px | max-width 1200px · 卡片 auto-fill ≥260px（约 4 列） | 横向菜单 + hover 下拉 |
| 平板 | 768–1199px | 流式容器 · 2–3 列，两栏区 1.4fr/1fr | 汉堡 + 右侧抽屉，二级折叠 |
| 手机 | <768px | 100% − 2rem · 单列，间距降至 1rem，根字号 15px | 汉堡 + 抽屉（86vw 上限） |
6 · 组件样例
按钮 / 徽章 / 标签 / 表单控件均只有规范内变体
7 · 动效规范
时长 150–600ms · 缓动 cubic-bezier(.4,0,.2,1) · 只动 transform/opacity
| 动效 | 触发 | 参数 |
|---|---|---|
| 滚动渐显 fade-up | 区块进入视口 | 600ms，位移 22px，级间延迟 80ms |
| 卡片悬浮 | hover / focus | translateY(-6px) + 三级阴影，280ms |
| 倒计时翻牌 | 数值变化 | tick 450ms，tabular-nums 防抖动 |
| 抽屉滑入 | 汉堡点击 | transform 300ms，遮罩淡入 250ms |
| 灯箱缩放 | 开图 | scale .94→1，300ms |
| 跑马灯 | 自动 | 28s 线性，hover 暂停 |
| 错误抖动 | 校验失败 | shake-in 300ms + 红色描边 |
无障碍：全部动效尊重 prefers-reduced-motion: reduce，降级为直接呈现终态。
8 · 图片交付标准
红线：单图 ≤1M；禁止原图直传
- TinyPNG 压缩后转 WebP，保留 JPG 兜底；封面类控制在 150KB 以内。
- 桌面大图 1600w / 移动 800w 两档，用
<picture> + srcset + sizes按容器自适应；当前站点图为无版权 SVG 占位图，替换真实照片时保持同名即可复用版式。 - 首屏 hero 用
fetchpriority="high"，首屏以下一律loading="lazy"，均写 width/height 防布局位移。
9 · 走查清单（已完成）
✅ 三档断点逐档设备模拟器核对，无横向滚动条
✅ 汉堡菜单：Esc/遮罩可关、焦点圈定、滚动锁定、resize 复位
✅ 二级目录折叠展开，父项落地页可直接点入
✅ 触控目标 ≥44px，灯箱支持左右滑/下滑手势
✅ 表单实时校验 + 首错聚焦 + aria-invalid/alert
✅ 语义标签 / skip-link / alt 全覆盖 / 焦点可见样式
✅ 图片懒加载 + 尺寸占位；JS defer、CSS 三段合并加载
✅ Chrome / Edge / Safari / 微信内置浏览器通过