/* ==========================================================
base.css — 基础层 (Foundation)
------------------------------------------------------------
物理拆分原则: 不使用 CSS @import, 直接在 index.html
里 引入 (保证 file:// 协议下也能零错误运行)
完整加载顺序 (15 CSS, 由 index.html 引入,
后加载覆盖前加载, 不依赖 !important):
1. base.css ← 本文件 (基础层: 重置 + 变量 + 纸纹 + scrollbar)
2. scene.css (场景层: 海草 + 潜水员 + 标题 + 进场)
3. portfolio-layout.css (作品集骨架)
4. portfolio-grid.css (作品集卡片栅格)
5. resume.css (简历, 含 experience-tag 八边形化)
6. portfolio-preview.css (预览: Lightbox + PDF 模态框)
7. portfolio-x1-sidebar.css (X1 侧栏: Markdown + modal)
8. contact.css (联系表单 + 社交)
9. life-layout.css (兴趣卡骨架: 4 张核心卡 + 散落 Polaroid)
10. life-modal.css (通用 modal: 4 主题 + 流体特效 + 响应式)
11. life-marathon.css (Marathon 列表 + 节点 + 响应式) ← 原 lifeCollage.css 一部分
12. life-travel.css (Travel 地图 + 时间轴 + 响应式) ← 原 lifeCollage.css 一部分
13. life-photography.css (Photography 骨架位, Backlog #27 待实现)
14. life-finance.css (Finance 骨架位, Backlog #27 待实现)
15. responsive.css (全局响应兜底)
完整文件结构与职责归属见 [WORKFLOW.md §4](./WORKFLOW.md).
包含:
1. 通配符重置 (* / html)
2. 全局 CSS 变量 (--bg-deep / --accent-cyan / --accent-warm 等)
3. body 基础 (背景色 + 自定义光标 + 卡纸纹理叠加层)
4. 全局自定义滚动条 (::-webkit-scrollbar)
5. 页脚 (.site-footer) — Backlog #35 双语版权信息 (居中 + 纯留白分隔 + 4 响应式断点; 子项 35-A 移除硬质带)
========================================================== */
/* ==========================================================
1. 通配符重置 (Universal Reset)
========================================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
/* ==========================================================
2. 全局 CSS 变量 (深海滚动渐变 — 颜色锚点)
------------------------------------------------------------
双层设计 (Backlog #N):
--paper-bg : 固定米白卡纸色, body 背景专用 (不再随滚动变化)
--sea-bg : 深海 4 锚点滚动插值, dotmatrix.js 点阵颜色用
0% 松石绿 (Turquoise)
33% 伽马蓝 (Gamma Blue)
66% 深紫 (Deep Purple / Indigo)
100% 接近黑 (Near Black w/ faint indigo)
========================================================== */
:root {
--paper-bg: #e8e2d3; /* Backlog #N: 固定米白卡纸色 */
--paper-bg-rgb: 232, 226, 211;
--sea-bg: #00a896; /* 初始: 高饱和松石绿 (供 dotmatrix.js 读) */
--sea-bg-rgb: 0, 168, 150;
--sea-title-shadow: rgba(0, 3, 10, 0.85);
--sea-title-color: #0a1f24; /* Backlog #N: 固定深墨色, 米白底上始终可读 */
}
/* ==========================================================
3. body 基础样式 (Background + Cursor)
========================================================== */
body {
width: 100%;
height: auto;
min-height: 100vh;
overflow-x: hidden;
/* Backlog #N: 改用 --paper-bg 固定米白卡纸色,
body 不再承载滚动颜色渐变 — 颜色渐变现在由点阵 (dotmatrix.js) 实现.
与 ::before/::after 两层纸雕特种纸纹理完美叠加 */
background: var(--paper-bg, #e8e2d3);
cursor: none;
}
/* ==========================================================
4. 卡纸 / 纸雕特种纸纹理叠加层 (Real Paper Texture Overlay)
------------------------------------------------------------
思路: 双层叠加 = 亮纤维 + 暗纤维, 模拟真实纸雕受光
========================================================== */
/* 第 1 层: 反相后用 screen 提亮"白丝" (卡纸的纤维高光) */
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 99998;
pointer-events: none !important;
background-image: url('assets/paper_texture/paper_texture.jpg');
background-repeat: repeat;
background-size: 350px auto;
/* 关键滤镜链: 反相 + 大幅提亮 + 强化对比, 把微弱的灰丝推到接近纯白 */
filter: invert(1) brightness(2.2) contrast(1.8);
/* screen 滤色: 黑底 (深海) 不变, 白丝 (纤维) 发光 */
mix-blend-mode: screen;
opacity: 0.22;
}
/* 第 2 层: 原图用 overlay 加深"暗丝" (卡纸的纤维阴影 / 纹路) */
body::after {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 99999;
pointer-events: none !important;
background-image: url('assets/paper_texture/paper_texture.jpg');
background-repeat: repeat;
background-size: 350px auto;
/* 保持原图暗色纤维, 温和提亮, 暗丝既清晰又不污染画面 */
filter: brightness(1.4) contrast(1.1);
/* overlay 叠加: 纤维阴影自然"压入"深海颜色, 形成卡纸起伏触感 */
mix-blend-mode: overlay;
opacity: 0.25; /* 哑光高级灰调, "被高级纸张包裹"感 */
}
/* ==========================================================
5. 全局自定义滚动条 (卡纸化硬边风格)
------------------------------------------------------------
Backlog #N: 米白卡纸底上, 滚动条改为深墨色 (与点阵/海草同色系).
========================================================== */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: var(--paper-bg, #e8e2d3);
}
::-webkit-scrollbar-thumb {
background: rgba(10, 31, 36, 0.55);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(10, 31, 36, 0.85);
}
/* Firefox 兼容 */
* {
scrollbar-width: thin;
scrollbar-color: rgba(10, 31, 36, 0.55) var(--paper-bg, #e8e2d3);
}
/* ==========================================================
5. 页脚 (Site Footer) — Backlog #35 双语版权信息
------------------------------------------------------------
设计意图:
· 位置: 位于 contact section 之后, #content-wrapper 关闭之前
· 视觉: 居中双语版权, **纯排版/留白分隔** (无硬纸带 / 无 box-shadow 细线)
— Backlog #35 用户反馈"不要硬质带"后移除
· 颜色: 深海墨色 #0a1f24 在米白卡纸上, 纯实色 (铁律 #4 + #1)
· 硬边: 零 border-radius (铁律 #2 硬边 > 圆滑)
· 字体: CN 用 PingFang SC, EN 用 Cinzel (与 .contact-lead 一致)
· 物理投影: 零 text-shadow, 零 box-shadow 分隔线 (用户反馈)
· TD-3 软违规可接受范围: 副文字 rights 行用 rgba 营造"次级"视觉层次
HTML 结构:
========================================================== */
.site-footer {
width: 100%;
/* 上 56px = 与 contact section 保持 40~80vh 缓冲 (无硬纸带后, 增大留白补足视觉重量);
下 64px = 页脚自然结束 */
padding: 56px 0 64px;
/* 父级 #content-wrapper 是 pointer-events: none, 这里要恢复交互 (虽然不必要) */
pointer-events: auto;
position: relative;
}
.site-footer-inner {
/* 与 .content-section .container 视觉对齐: 86% 宽, max 1300px, 居中 */
width: 86%;
max-width: 1300px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
text-align: center;
/* 颜色与字体: 深海墨色 + Cinzel/PingFang 双语族 (与 .contact-lead 一致) */
color: #0a1f24;
font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif;
/* Backlog #35 用户反馈: 移除顶部硬纸带 + 底部 1px 细投影,
改用排版层次 (主文字 vs 副文字) + padding 留白做"软分隔" */
}
/* 主版权行: © 2026 Horace Zeng · 曾浩荣 */
.site-footer-copyright {
font-size: 13px;
font-weight: 500;
letter-spacing: 0.18em;
line-height: 1.4;
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
}
.site-footer-symbol {
/* © 符号略大, 与文字基线对齐 */
font-size: 16px;
line-height: 1;
}
.site-footer-year {
/* 数字等宽, 防止版权年份位置抖动 */
font-variant-numeric: tabular-nums;
}
.site-footer-author {
/* 作者名加粗强调 */
font-weight: 600;
}
/* 次级版权行: All Rights Reserved / 保留所有权利 */
.site-footer-rights {
font-size: 10.5px;
font-weight: 400;
letter-spacing: 0.22em;
text-transform: uppercase;
/* TD-3 软违规可接受范围: rgba α < 50% 用于"次级文字", 不强制纯化 */
color: rgba(10, 31, 36, 0.62);
line-height: 1.4;
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
.site-footer-rights-sep {
/* 分隔符 / 略低透明度, 不喧宾夺主 */
opacity: 0.55;
font-weight: 300;
}
/* ==========================================================
5.1 页脚响应式断点 (Site Footer Responsive)
------------------------------------------------------------
4 档断点 (与 contact.css / 全站响应式一致):
· 1024px: 主文字 12px, gap 收紧
· 768px: 主文字 11.5px, gap 收紧
· 480px: 主文字 10.5px, 副文字 9px, gap 进一步收紧
· 360px: 极窄屏全字段压缩, 单行布局
注: 移除顶部硬纸带后, 各断点不再有 border-top-width 调整,
视觉分隔完全靠 padding 留白 + 字号层次
========================================================== */
/* 1024px 及以下: 略缩 */
@media (max-width: 1024px) {
.site-footer { padding: 48px 0 56px; }
.site-footer-copyright { font-size: 12px; gap: 8px; }
.site-footer-rights { font-size: 10px; gap: 10px; }
}
/* 768px 及以下: 字号再缩 */
@media (max-width: 768px) {
.site-footer { padding: 40px 0 48px; }
.site-footer-inner { gap: 6px; }
.site-footer-copyright { font-size: 11.5px; letter-spacing: 0.14em; gap: 6px; }
.site-footer-rights { font-size: 9.5px; letter-spacing: 0.18em; gap: 8px; }
}
/* 480px 及以下: 字号紧凑 */
@media (max-width: 480px) {
.site-footer { padding: 32px 0 40px; }
.site-footer-inner { gap: 5px; }
.site-footer-copyright { font-size: 10.5px; letter-spacing: 0.12em; }
.site-footer-rights { font-size: 9px; letter-spacing: 0.14em; gap: 6px; }
}
/* 360px 及以下: 极窄屏 */
@media (max-width: 360px) {
.site-footer { padding: 28px 0 32px; }
.site-footer-copyright { font-size: 10px; gap: 5px; }
.site-footer-symbol { font-size: 13px; }
.site-footer-rights { font-size: 8.5px; letter-spacing: 0.12em; }
}