/* ==========================================================
resume-toolkit.css — 简历样式: Toolkit / 技能组层 (§13-§13.6) — Backlog #151
------------------------------------------------------------
加载序: CSS 第 12 / 37 (index.html 第 12 个 ; 后加载的覆盖先加载的)
★ 全站 37 个 CSS 的完整加载序 + 职责表见 index.html 头注释「📂 文件结构速查」
(单一事实源 —— 旧版 19 个文件各抄一份清单, 且停在 25/26/28/31 四个旧版本;
加一个 CSS 要改 19 处, 编号还是"分组号"而非真实加载位, 现已收敛)
[Backlog #151 · 2026-10-01] **resume.css 按分节职责再拆一层。**
#147 已把 8 个顶层 @media 迁到 resume-responsive.css; 本轮继续
按**分节职责**把基础层切开, 从 1 个文件变成 4 个基础层 + 1 个响应式层:
resume.css 第 1 §1-§3.5 布局 / 容器 / 模块预览
resume-cards.css 第 2 §4-§12 卡片本体 / 头体 / 时间轴 / 标签 / 触发器 / 折叠
resume-toolkit.css 第 3 §13-§13.6 技能组 / 双语排版 / Toolkit 双模块
resume-experience.css 第 4 §13.7 经历分组 + 字体基线 + §14 Award + §15 翻转
resume-responsive.css 第 5 最后 8 个 @media 响应式 + 覆盖节 (#147 已拆出, 本轮不动)
★ CORS 铁律: **禁 @import**。file:// 下 Origin=null, @import 会
**静默失败、整段样式丢失**(不报错, 只是不生效)。必须多个独立
靠标签顺序保证「基础 → 卡片 → Toolkit → 经历分组 → 响应式」。
(禁 @import 的原因见 PROJECT_NOTES.md §13.1 零构建原则)
★ 加载顺序: 上面 5 层**全部按所标次序**排。resume-responsive.css 是
纯覆盖层, 必须**最后** —— 靠标签顺序拿到"后写胜出"; 若被排到某个
基础层之前, 同等特异度的属性会被基础规则反覆盖。
★ 顺序无关性: 本轮按**分节边界**切线, 迁出块**逐字搬运**, 行数守恒;
已用属性级 + !important 级判据逐对验证 4 组共 6 对组合, **无冲突**,
故相对顺序的改变不会影响任何属性的计算值。
(order 只在 important 相同 **且** 特异性相同时才起作用)
本文件: Toolkit / 技能组层 (§13-§13.6)
持有 .skill-group / .skills-grid / .tool-level / .tool-name{,-cn} /
.toolkit-* / .resume-cn / .resume-modal-section-title 等。
同样在 里, 需先 open('skills')。
========================================================== */
.skills-grid {
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.skill-group {
font-family: var(--font-sans);
font-size:var(--type-body-sm);
color: rgba(0, 0, 0, 0.7);
letter-spacing: 0.02em;
line-height: 2;
margin: var(--space-4) 0;
white-space: normal;
}
.skill-group strong,
.skill-group b {
color: #000000 !important;
font-size:var(--type-body-sm);
font-weight: 600;
letter-spacing: 0.05em;
}
/* ==========================================================
13.5 双语排版 (Bilingual) + Toolkit 双模块 + 熟练度徽章
------------------------------------------------------------
[Backlog #109 · 2026-09-30] 用户原话: "把我 resume 部分改成英中双语,
英语在前, 中文其次. 注意修改 experiences, awards, toolkit 三个板块."
设计:
· 英文在上 (原内容), 中文在下 (新增) — 用 .resume-cn 承载中文行
· 中文行比英文略小 / 略浅 / 非斜体, 形成主次层次 (英文为主语言)
· 中英对照不做行内 (/), 而是纵向两行 — 移动端窄屏更易读,
且避免长英文句子 + 长中文句子同行挤压换行
========================================================== */
/* 中文副行: 跟主行同左对齐, 略小略浅非斜体 */
.resume-cn {
display: block;
margin-top: 3px;
font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', -apple-system, sans-serif;
font-size: 0.86em;
font-style: normal; /* 覆盖 .item-sub 的 italic */
color: rgba(0, 0, 0, 0.55); /* 比英文浅一档, 视觉次要 */
letter-spacing: 0.03em;
line-height: 1.7;
font-weight: 400;
}
/* 条目内 bullet 的中文行: 稍紧凑, 避免卡片过长 */
.item-bullet-list .resume-cn {
margin-top: var(--space-1);
font-size: 0.84em;
color: rgba(0, 0, 0, 0.5);
line-height: 1.65;
}
/* 模态 section 标题双语: "02 / Experiences / 经历" */
.resume-modal-section-title .resume-cn {
display: inline;
margin-left: var(--space-4);
font-size: 0.78em;
color: rgba(0, 0, 0, 0.45);
letter-spacing: 0.08em;
}
/* ==========================================================
13.6 Toolkit 双模块布局 (Architecture / General)
------------------------------------------------------------
[Backlog #109] 用户原话: "需要分模块, 建筑设计相关的是一个模块,
通用的是一个模块. 并且每一个给一个熟练度属性."
层级:
.toolkit-module 模块容器 (带 8 角切角 + 顶部色带)
.toolkit-module-head 模块头 (EN 大写 + CN 小字)
.toolkit-cat 分类行 (Design / Simulation / ...)
.toolkit-cat-label 分类名 (EN + CN)
.toolkit-items 工具 chip 流
.tool-chip 单个工具 + 熟练度徽章
.tool-name 工具名
.tool-level 熟练度徽章 (data-level 属性驱动配色)
========================================================== */
.toolkit-modules {
display: flex;
flex-direction: column;
gap: 18px;
}
.toolkit-module {
position: relative;
padding: 18px var(--space-8) var(--space-7) var(--space-8);
background: rgba(255, 252, 240, 0.55);
border: 1px solid rgba(0, 80, 100, 0.18);
/* 8 角切角 (跟全站纸雕铁律一致) */
clip-path: polygon(
10px 0%, calc(100% - 10px) 0%, 100% 10px,
100% calc(100% - 10px), calc(100% - 10px) 100%,
10px 100%, 0% calc(100% - 10px), 0% 10px
);
box-shadow: 2px 3px 0 rgba(10, 31, 36, 0.06);
}
/* 顶部色带: 建筑模块深 teal, 通用模块紫 (跟 portfolio AI Lab accent 同色系) */
.toolkit-module::before {
content: "";
position: absolute;
top: 0;
left: 10px;
right: 10px;
height: 3px;
background: rgba(0, 80, 100, 0.55);
}
.toolkit-module--general::before {
background: rgba(127, 60, 161, 0.5);
}
.toolkit-module-head {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: var(--space-4);
margin-bottom: 14px;
padding-bottom: var(--space-4);
border-bottom: 1px solid rgba(0, 80, 100, 0.15);
}
.toolkit-module--general .toolkit-module-head {
border-bottom-color: rgba(127, 60, 161, 0.18);
}
.toolkit-module-en {
font-family: var(--font-serif);
font-size: var(--type-body-sm);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--role-sea);
}
.toolkit-module--general .toolkit-module-en {
color: #7f3ca1;
}
.toolkit-module-cn {
font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
font-size: var(--type-caption);
color: rgba(0, 0, 0, 0.5);
letter-spacing: 0.06em;
}
/* 分类行 */
.toolkit-cat {
display: flex;
align-items: flex-start;
gap: var(--space-5);
margin-bottom: var(--space-5);
}
.toolkit-cat:last-child {
margin-bottom: 0;
}
.toolkit-cat-label {
flex: 0 0 96px;
font-family: var(--font-serif);
font-size: var(--type-caption-sm);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(0, 80, 100, 0.8);
line-height: 1.9;
padding-top: var(--space-1);
}
.toolkit-cat-label .toolkit-cat-cn {
display: block;
font-family: 'PingFang SC', 'Hiragino Sans GB', sans-serif;
font-size: var(--type-caption-sm);
font-weight: 400;
letter-spacing: 0.04em;
text-transform: none;
color: rgba(0, 0, 0, 0.45);
}
.toolkit-module--general .toolkit-cat-label {
color: rgba(127, 60, 161, 0.8);
}
/* 工具 chip 流 */
.toolkit-items {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
flex: 1;
align-content: flex-start;
}
.tool-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px var(--space-4) 3px 9px;
background: rgba(255, 252, 240, 0.9);
border: 1px solid rgba(0, 80, 100, 0.22);
border-radius: 2px;
font-family: var(--font-sans-latin);
font-size: var(--type-caption-sm);
line-height: 1.5;
color: rgba(10, 31, 36, 0.9);
white-space: nowrap;
}
.toolkit-module--general .tool-chip {
border-color: rgba(127, 60, 161, 0.25);
}
.tool-name {
font-weight: 500;
letter-spacing: 0.02em;
}
/* 语言名后的中文别名 (Backlog #111): "Chinese Mandarin（普通话）"
跟在英文名同行, 但字号缩一档 + 颜色浅一档, 保持"英文为主、中文为辅"的层级 */
.tool-name-cn {
font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
font-size: 0.84em;
font-weight: 400;
color: rgba(0, 0, 0, 0.5);
letter-spacing: 0.02em;
}
/* 熟练度徽章: 极小字号 + 短标签, 3 档配色区分
[Backlog #111 · 2026-09-30] 徽章文案改为纯英文 (Proficient / Intermediate /
Beginner / Native / Enthusiast), 所以字体栈改成拉丁字体优先, 只保留 CJK 兜底
(徽章本身已无中文, 兜底仅为防御) */
.tool-level {
font-size: var(--type-micro);
font-family: var(--font-sans);
font-weight: 600;
letter-spacing: 0.04em;
padding: 1px var(--space-2);
border-radius: 2px;
line-height: 1.4;
white-space: nowrap;
}
/* 熟练 (深 teal 实底) */
.tool-level[data-level="proficient"] {
background: rgba(0, 80, 100, 0.9);
color: #fffdf5;
}
/* 中等 (浅 teal 描边) */
.tool-level[data-level="intermediate"] {
background: rgba(0, 80, 100, 0.14);
color: rgba(0, 80, 100, 0.95);
border: 1px solid rgba(0, 80, 100, 0.4);
}
/* 入门 (浅灰描边, 最弱) */
.tool-level[data-level="beginner"] {
background: rgba(0, 0, 0, 0.05);
color: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(0, 0, 0, 0.18);
}
/* 熟练但偏工程/专业 (蓝灰, 用于 Building Simulation 等) */
.tool-level[data-level="advanced"] {
background: rgba(31, 122, 106, 0.88);
color: #fffdf5;
}
/* 母语 (深色实底) */
.tool-level[data-level="native"] {
background: rgba(10, 31, 36, 0.88);
color: #fffdf5;
}
/* 证书成绩 (Backlog #111): 英语不再标熟练度档位, 改挂 IELTS / CET-6 分数.
用 General 模块的紫色实边, 跟其余 5 档熟练度配色明确区分开. */
.tool-level[data-level="certified"] {
background: rgba(127, 60, 161, 0.12);
color: rgba(98, 42, 128, 0.95);
border: 1px solid rgba(127, 60, 161, 0.45);
letter-spacing: 0.02em;
}
/* 业余爱好者 (浅暖灰) */
.tool-level[data-level="amateur"] {
background: rgba(184, 115, 51, 0.16);
color: rgba(150, 90, 30, 0.95);
border: 1px solid rgba(184, 115, 51, 0.4);
}
/* ==========================================================