/* ============================================================ tokens.css — 设计变量（深色 + 浅色） 改配色/字体只动这里。颜色体系：两种墨色(RGB) + 透明度阶梯。 深→浅自动镜像（只换两种墨色），仅个别淡色档为过 WCAG AA 单独微调。 ============================================================ */ /* ---- 自托管 Inter：仅作 SF Pro Display 在非苹果设备的回退；unicode-range 限拉丁，中文绝不命中 ---- */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/inter-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/inter-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* DM Sans：Sider 动态封面标语(600) + 智能助手轮播图标题(600)/输入(400)。自托管拉丁子集，中文不命中 */ @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/dm-sans-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/dm-sans-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* ============================ 深色（默认） ============================ */ :root, [data-theme="dark"] { --bg: #0A0A0B; --bg-fade: rgba(10, 10, 11, 0); /* = --bg 的 0 透明度版（改 --bg 时同步改）；供右缘渐变蒙层用 */ /* 两种墨色（RGB，供透明度阶梯使用） */ --ink-warm: 244, 242, 237; /* #F4F2ED 暖白：标题/名字/导航/时间轴职位 */ --ink-pure: 255, 255, 255; /* #FFFFFF 纯白：正文，走透明阶梯 */ --ink-muted: #6A6A66; /* 仅邮箱一行 */ /* 文本透明度阶梯（层次核心，勿拍平） */ --text-display: rgb(var(--ink-warm)); /* 标题 100% */ --text-name: rgb(var(--ink-warm)); /* 名字 100% */ --text-role: rgb(var(--ink-warm)); /* 时间轴职位 100% */ --text-nav: rgb(var(--ink-warm)); /* 导航激活 100% */ --text-nav-dim: rgba(var(--ink-warm), .60); /* 导航非激活 60% */ --text-strong: rgb(var(--ink-pure)); /* 卡标题/·2026 100% */ --text-body: rgba(var(--ink-pure), .84); /* 正文/描述/标签 84% */ --text-contact: rgba(var(--ink-pure), .70); /* Contact me 70% */ --text-subtle: rgba(var(--ink-pure), .50); /* 副标题/经历/年份 50% */ --text-email: var(--ink-muted); /* 线 / 胶囊 / 占位 */ --border: rgba(var(--ink-warm), .08); /* 卡片/slide 描边、时间轴 hairline */ --chip-bg: rgba(var(--ink-pure), .09); /* 标签胶囊底（幽灵 chip） */ --chip-text: rgba(var(--ink-pure), .84); --placeholder: #D9D9D9; /* 关于我右列照片位 */ /* 轮播切换按钮（实心圆，标题行右下角；深色态深灰底白箭头） */ --arrow-btn-bg: #202021; --arrow-btn-bg-hover: #2C2C2E; --arrow-btn-fg: rgb(var(--ink-pure)); /* 白 */ /* 侧栏毛玻璃面板（满出血大图从底下滑过；随主题各自 bg 调透明度） */ --glass-bg: color-mix(in srgb, var(--bg) 80%, transparent); /* 详情弹窗（底部上滑 Sheet） */ --scrim: rgba(10, 10, 11, .5); /* 蒙层：压暗背景页 */ --surface: #222224; /* Sheet 面板底（比页面 bg 略亮一档） */ --detail-tag-border: rgba(var(--ink-pure), .5); /* 描边标签：白@50%（单值，自动镜像） */ /* 全站滚动条（细、悬浮、克制；单值靠 --ink-pure 自动镜像深浅） */ --scrollbar-thumb: rgba(var(--ink-pure), .22); --scrollbar-thumb-hover: rgba(var(--ink-pure), .42); /* 蓝色点缀（仅光标气泡用；AI 面板已改单色） */ --accent: #2563EB; --cursor-bubble-bg: var(--accent); } /* ============================ 浅色（暖纸白展签，3 方案评审融合） ============================ */ [data-theme="light"] { --bg: #FAF8F3; /* 暖纸白底，非纯白 */ --bg-fade: rgba(250, 248, 243, 0); /* = --bg 的 0 透明度版（改 --bg 时同步改） */ --ink-warm: 42, 38, 32; /* #2A2620 暖墨：标题/名字/导航 */ --ink-pure: 26, 25, 22; /* #1A1916 最深暖墨：正文基色 */ --ink-muted: #6E6C63; /* 暖中灰，对底 4.96:1 过 AA */ /* 两个淡档在亮底上小字会跌破 AA，单独提透明度（其余阶梯自动镜像） */ --text-nav-dim: rgba(var(--ink-warm), .66); /* 导航非激活：16px 需 ≥4.5:1 */ --text-subtle: rgba(var(--ink-pure), .64); /* 副标题/经历/年份：小字需 ≥4.5:1 */ /* 线/胶囊/交互改用墨色基（亮底叠墨增益强，alpha 下调） */ --border: rgba(var(--ink-pure), .10); --chip-bg: rgba(var(--ink-pure), .06); --placeholder: #E5E2DB; --arrow-btn-bg: #ECEAE4; /* 浅暖灰表面 */ --arrow-btn-bg-hover: #E1DED7; --arrow-btn-fg: rgb(var(--ink-warm)); /* 暗墨 */ /* 详情弹窗：scrim 仍压暗页面；Sheet 用悬浮白（tag 边框/hover 靠 ink-pure 自动镜像） */ --scrim: rgba(10, 10, 11, .45); --surface: #FFFFFF; } /* AI 面板「挤推」：把 --ai-w 注册为可动画长度，开合时内容平滑让位（不支持的浏览器退化为瞬切，功能不变） */ @property --ai-w { syntax: ""; inherits: true; initial-value: 0px; } /* ============================ 字体栈 + 字号 ============================ */ :root { --font-display: "SF Pro Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-cjk: -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; /* 字号（展示字流体 clamp，小字固定；与稿一致的 PC 上限） */ --fs-hero: clamp(40px, 8vw, 96px); /* Portfolio */ --fs-h2: clamp(24px, 3.4vw, 32px); /* Before 2024 / 关于我 */ --fs-body: clamp(16px, 1.4vw, 18px); /* pitch / 关于我正文 / 特色描述 */ --fs-name: 20px; --fs-nav: 16px; --fs-card-title: 18px; --fs-card-desc: 14px; --fs-sub: 14px; /* 副标题 */ --fs-mark: 16px; /* ·2026 */ --fs-sm: 13px; /* Contact / 邮箱 / 时间轴年份 */ --fs-xs: 12px; /* 经历 */ --fs-role: 15px; /* 时间轴职位 */ /* Sider 封面静态兜底底（= WebGL 渐变同色；封面元素临时不在槽位时垫底，避免露灰；深浅通用） */ --cover-fallback: linear-gradient(125deg, #94b3e6 0%, #a088e2 38%, #5b59c9 70%, #5342d7 100%); /* 布局尺度 */ --ai-panel-w: 400px; /* AI 面板宽度（桌面挤推用） */ --vw: calc(100vw - var(--ai-w)); /* 内容可用视口宽：AI 开时收窄（--ai-w 由 .ai-open 驱动、可动画） */ --sidebar-w: 240px; --content-w: 1180px; --main-pad-x: 48px; /* 主区左右内边距（响应式下调） */ --content-left: calc(var(--sidebar-w) + var(--main-pad-x) + max(0px, (var(--vw) - var(--sidebar-w) - 2 * var(--main-pad-x) - var(--content-w)) / 2)); /* 正文实际左缘（含宽屏居中偏移）：首图与正文左对齐 */ --gap-section: 150px; /* 区块间距；响应式按断点下调 */ /* 重点项轮播：单张图宽 = 内容栏实际宽（min(最大宽, 可用宽)）；16:9，铺满内容栏 */ --fc-slide-w: min(var(--content-w), var(--vw) - var(--sidebar-w) - 2 * var(--main-pad-x)); /* 重点项轮播右缘渐变（可手动调；配 .fade-tuner.html 实时拖动） */ --fade-w: min(200px, max(0px, calc(var(--vw) - var(--content-left) - var(--fc-slide-w)))); /* 宽度：≤200px 且不超露边区——宽屏=200px，屏幕缩小跟露边一起变窄、始终贴右、永不盖到大图 */ --fade-soft: 0%; /* 柔度：透明起点。0=整段渐变最柔；越大→露边保留越多、淡出越挤在最右 */ --fade-start-alpha: 0%; /* 起始底色浓度：0=起始全透明（图清晰）；越大→起始就盖一层底色，更含蓄 */ --fade-end-alpha: 80%; /* 终点底色浓度：80=最右盖到 80% 底色、留一点透明（不死板）；100=纯底色 */ } /* 主题切换过渡：仅在首帧后挂 .theme-ready，保证首屏不动画 */ /* html(.theme-ready 本身)额外过渡 --ai-w：否则被这条主题过渡覆盖，AI 挤推时内容会瞬切 */ .theme-ready { transition: background-color .3s ease, color .3s ease, border-color .3s ease, fill .3s ease, --ai-w .42s cubic-bezier(.22, .61, .36, 1); } .theme-ready *, .theme-ready *::before, .theme-ready *::after { transition: background-color .3s ease, color .3s ease, border-color .3s ease, fill .3s ease; } @media (prefers-reduced-motion: reduce) { .theme-ready, .theme-ready *, .theme-ready *::before, .theme-ready *::after { transition: none; } }