/* ==================== 语言切换按钮 ==================== */ .lang-toggle { position: fixed; bottom: 18px; right: 18px; z-index: 120; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; color: rgba(255, 255, 255, 0.30); background: transparent; border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 4px; cursor: pointer; -webkit-user-select: none; user-select: none; transition: border-color 0.2s, color 0.2s, background 0.2s; } .lang-toggle svg { width: 15px; height: 15px; display: block; } .lang-toggle:hover { border-color: rgba(255, 255, 255, 0.30); color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.03); } html.light .lang-toggle { color: rgba(0, 0, 0, 0.35); background: transparent; border-color: rgba(0, 0, 0, 0.10); } html.light .lang-toggle:hover { border-color: rgba(0, 0, 0, 0.30); color: rgba(0, 0, 0, 0.85); background: rgba(0, 0, 0, 0.03); } @media (max-width: 1299px) { .lang-toggle { bottom: 12px; right: 12px; } } /* ==================== 主题切换按钮 (放 lang-toggle 左侧) ==================== */ .theme-toggle { position: fixed; bottom: 18px; /* right 由 alignToggle JS 算 — 紧贴 lang-toggle 左侧 + 8px gap */ z-index: 120; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; color: rgba(255, 255, 255, 0.30); background: transparent; border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 4px; cursor: pointer; -webkit-user-select: none; user-select: none; transition: border-color 0.2s, color 0.2s, background 0.2s; } .theme-toggle svg { width: 15px; height: 15px; display: block; } .theme-toggle:hover { border-color: rgba(255, 255, 255, 0.30); color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.03); } html.light .theme-toggle { color: rgba(0, 0, 0, 0.35); background: transparent; border-color: rgba(0, 0, 0, 0.10); } html.light .theme-toggle:hover { border-color: rgba(0, 0, 0, 0.30); color: rgba(0, 0, 0, 0.85); background: rgba(0, 0, 0, 0.03); } /* dark 模式显示 sun (点了切 light); light 模式显示 moon (点了切 dark) */ .theme-toggle .theme-moon { display: none; } html.light .theme-toggle .theme-sun { display: none; } html.light .theme-toggle .theme-moon { display: block; } @media (max-width: 1299px) { .theme-toggle { bottom: 12px; } } /* 英文版: tag-en / tab-en 保留两行布局, 数据走 data-en (改成编号 / 类别短码, 跟 tag-cn 完整名互补不重复) (历史: 之前隐藏避免 "Branding / BRAND" 重复, 现已用 data-en 改成 "01 / Branding" 类型, 不需要隐藏) */ /* ==================== User-Select Guard ==================== */ * { -webkit-user-select: none; -moz-user-select: none; user-select: none; } /* 仅联系方式的值可以被选中复制 */ .ci-value { -webkit-user-select: text; -moz-user-select: text; user-select: text; cursor: text; } /* 联系方式里的 tel/mailto 链接 — 保留可点(打电话/发邮件), 但不要 iOS 默认的蓝色; 跟随正文颜色 */ .ci-value a { color: inherit; text-decoration: none; cursor: pointer; } .ci-value a:hover { text-decoration: underline; text-underline-offset: 3px; opacity: 0.85; } /* ==================== Design Tokens ==================== */ :root { /* Background */ --bg: #000000; --bg-card: #141414; /* 模块背景 #0a0a0a → #141414, 亮度 ×2 */ --grid: rgba(255, 255, 255, 0.03); /* Text — strict hierarchy from user spec */ --text-white: #ffffff; --text-200: #e5e7eb; /* gray-200, 副标题 */ --text-d4: #d4d4d4; /* 正文 */ --text-a3: #a3a3a3; /* 次要信息 */ --text-737: #737373; /* 辅助、时间 */ --text-525: #525252; /* 列表符号 */ --text-400: #99a1af; /* gray-400 说明 */ --text-500: #6b7280; /* gray-500 描述 */ --text-300: #d1d5db; /* gray-300 默认 */ /* Accent — section colors from user spec */ --gold: #c9a063; --cyan: #7dd3fc; --violet: #a5b4fc; --rose: #fb7185; --amber: #fcd34d; --border: #1f1f1f; /* Tailwind-equivalent font sizes */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ /* Tracking (letter-spacing) */ --tracking-tight: -0.025em; --tracking-name: -0.03em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; --tracking-case: 0.24em; /* Line height */ --leading-tight: 1.25; --leading-relaxed: 1.625; } /* ==================== Light Mode ==================== */ html.light { --bg: #f0f0f0; --bg-card: #fafafa; --grid: rgba(0,0,0,0.045); --text-white: #0d0d0d; --text-200: #1a1a1a; --text-d4: #2d2d2d; --text-a3: #555555; --text-737: #888888; --text-525: #b0b0b0; --text-400: #6b7280; --text-500: #9ca3af; --text-300: #374151; --border: #e2e2e2; } html.light body { background: var(--bg); } html.light body::before { background-image: url("data:image/svg+xml;utf8,"); } html.light body::after { background-image: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0,0,0,0.012) 2px, rgba(0,0,0,0.012) 3px ); } html.light .job-body { border-left-color: #d0d0d0; } html.light .project-thumb { background: #eeeeee; } /* light mode 下 sub-heading 仍保持琥珀色 (与 .past-tab 一致), 不覆写 */ html.light .chip { background: #e8e8e8; color: #555; border-color: #d0d0d0; } html.light .project-title { color: #1a1a1a; } html.light .project-desc { color: #666; } html.light .stat-num { color: #111; } html.light .stat-label { color: #888; } /* 亮模式 rest 边框统一中性色 — 跟暗模式视觉感(单一色调)一致, 不再 cyan/violet/rose/amber 四色 */ html.light .section.cyan::before, html.light .section.violet::before, html.light .section.rose::before, html.light .section.amber::before { border-color: rgba(60, 50, 30, 0.15); } /* ---- Modal light mode ---- */ html.light .modal { background: #fafafa; background-image: linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px); background-size: 80px 80px; border-color: rgba(252,211,77,0.4); } html.light .modal-bar { background: rgba(245,245,245,0.96); border-bottom-color: #e0e0e0; } html.light .modal-bar-left .mbl-title { color: #111; } html.light .modal-bar-left .mbl-sub { color: #aaa; } html.light .modal-close { border-color: #888; color: #444; } html.light .modal-close:hover { border-color: var(--amber); color: var(--amber); } html.light .modal-hero-right { border-left-color: #e0e0e0; } html.light .modal-eyebrow { color: var(--amber); } html.light .modal-tag { background: #e8e8e8; color: #555; border-color: #d0d0d0; } @media (max-width: 640px) { html.light .modal-hero-right { border-top-color: #e0e0e0; } } * { box-sizing: border-box; margin: 0; padding: 0; } /* ==================== Base ==================== */ html, body { background: var(--bg); color: var(--text-d4); font-family: 'Manrope', 'MiSans', 'Noto Sans SC', -apple-system, system-ui, sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 1.5; font-feature-settings: 'ss01', 'ss02', 'cv11', 'tnum'; font-variant-numeric: tabular-nums; /* 禁掉 Chrome/Safari 两指横扫后退手势 (overscroll-behavior-x: none). 同时 contain 纵向, 避免容器滚到顶/底后冒泡触发浏览器全局 pull-to-refresh / 弹性边界 */ overscroll-behavior-x: none; overscroll-behavior-y: contain; } body { position: relative; overflow-x: hidden; min-height: 100vh; padding: 80px 60px; } /* ==================== Background atmosphere ==================== */ /* 网格层 — 方案 10 虚线网格 Dashed: 80px 间距, dasharray 3-4 草图感 */ body::before { content: ""; position: fixed; inset: 0; background-image: url("data:image/svg+xml;utf8,"); background-size: 80px 80px; background-position: 0 0; pointer-events: none; z-index: 1; mask-image: linear-gradient(to bottom, transparent, black 200px, black calc(100% - 200px), transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, black 200px, black calc(100% - 200px), transparent); } /* 横向扫描线纹理层 */ body::after { content: ""; position: fixed; inset: 0; background-image: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(255,255,255,0.015) 2px, rgba(255,255,255,0.015) 3px ); pointer-events: none; z-index: 2; } /* ==================== 鼠标光斑 ==================== */ /* 跟随鼠标的径向光晕 — 平滑 lerp 跟随 + 按 section 颜色染色, 用 screen 混合叠加 --mx / --my : 鼠标位置 (JS 用 RAF lerp 平滑过渡) --spotlight-color : RGB 三元组, JS 按当前 section 切换 (默认白色) */ body { --mx: 50%; --my: -300px; --spotlight-color: 255, 255, 255; } @property --bx1 { syntax: ''; inherits: false; initial-value: -120px; } @property --by1 { syntax: ''; inherits: false; initial-value: 60px; } @property --bx2 { syntax: ''; inherits: false; initial-value: 140px; } @property --by2 { syntax: ''; inherits: false; initial-value: -80px; } @property --bx3 { syntax: ''; inherits: false; initial-value: -40px; } @property --by3 { syntax: ''; inherits: false; initial-value: -140px; } @keyframes blob-shift { 0% { --bx1: -120px; --by1: 60px; --bx2: 140px; --by2: -80px; --bx3: -40px; --by3: -140px; } 25% { --bx1: 100px; --by1: 120px; --bx2: -160px; --by2: 40px; --bx3: 80px; --by3: 100px; } 50% { --bx1: -60px; --by1:-100px; --bx2: 80px; --by2: 140px; --bx3:-120px; --by3: 40px; } 75% { --bx1: 140px; --by1: -40px; --bx2: -100px; --by2:-120px; --bx3: 60px; --by3: -80px; } 100% { --bx1: -120px; --by1: 60px; --bx2: 140px; --by2: -80px; --bx3: -40px; --by3: -140px; } } .mouse-spotlight { position: fixed; inset: 0; pointer-events: none; z-index: 3; --bx1: -120px; --by1: 60px; --bx2: 140px; --by2: -80px; --bx3: -40px; --by3: -140px; background: radial-gradient(ellipse 1040px 840px at calc(var(--mx) + var(--bx1)) calc(var(--my) + var(--by1)), rgba(var(--spotlight-color), 0.033), transparent 70%), radial-gradient(ellipse 880px 1160px at calc(var(--mx) + var(--bx2)) calc(var(--my) + var(--by2)), rgba(var(--spotlight-color), 0.033), transparent 68%), radial-gradient(ellipse 720px 640px at calc(var(--mx) + var(--bx3)) calc(var(--my) + var(--by3)), rgba(var(--spotlight-color), 0.027), transparent 65%), radial-gradient(ellipse 560px 600px at var(--mx) var(--my), rgba(var(--spotlight-color), 0.04), transparent 55%); /* filter: blur(12px) 已移除 — 4 层渐变本身已自带柔光, GPU 大幅减负 */ mix-blend-mode: screen; opacity: 1; transition: opacity .55s ease; animation: blob-shift 8s ease-in-out infinite; } .mouse-spotlight.idle { opacity: 0; animation-play-state: paused; } /* light mode 下 spotlight 改成柔和的暗化, 用 multiply 让网格点更突出 */ html.light .mouse-spotlight { background: radial-gradient(ellipse 520px 420px at calc(var(--mx) + var(--bx1)) calc(var(--my) + var(--by1)), rgba(var(--spotlight-color), 0.05), transparent 70%), radial-gradient(ellipse 440px 580px at calc(var(--mx) + var(--bx2)) calc(var(--my) + var(--by2)), rgba(var(--spotlight-color), 0.04), transparent 68%), radial-gradient(ellipse 280px 300px at var(--mx) var(--my), rgba(var(--spotlight-color), 0.06), transparent 55%); mix-blend-mode: multiply; } /* ==================== 全局噪点层 ==================== */ /* 相机感光元件颗粒: 384px webp 平铺, Gaussian 亮度噪 σ≈35 + 轻量色噪 σ≈12 - YUV 4:2:0 带轻微色斑(粉/绿/蓝), 类似中高 ISO 数码噪点 - 闪动(非位移): 每帧 background-position 跳到大跨度无规律 offset, 每个屏幕像素采到的是 tile 内 完全无关联的像素 → 视觉读成"逐帧噪点变化", 不是"图层在漂" - 6fps · 6 帧, Safari 合成开销可控 */ .noise-layer { position: fixed; inset: 0; pointer-events: none; z-index: 9999; background: url("noise.webp") repeat; background-size: 384px 384px; opacity: 0.067; animation: noise-flicker 1s steps(6, end) infinite; /* 不能加 transform: translateZ(0) — Chrome 会把 background 整张 raster 到 compositor cache, background-position 变化的 invalidation 路径被跳过, 闪动失效. modal 滚动稳定靠 modal-backdrop 实色 + modal-body 合成层即可, 不需要 noise-layer 自己提层. */ } html.light .noise-layer { opacity: 0.067; } @keyframes noise-flicker { 0% { background-position: 0 0; } 17% { background-position: 137px -211px; } 33% { background-position: -89px 167px; } 50% { background-position: 251px -73px; } 67% { background-position: -163px -241px; } 83% { background-position: 91px 89px; } } /* 用户开启了"减少动效"系统设置时, 关掉闪动避免不适 */ @media (prefers-reduced-motion: reduce) { .noise-layer { animation: none; } } .page { position: relative; z-index: 5; max-width: 1180px; margin: 0 auto; /* 用 flex column 启用 order, 窄屏视觉顺序仍然 profile → experience → ai → past → contact */ display: flex; flex-direction: column; } .col-left { display: contents; } .page > .col-left > #profile { order: 1; } .page > .col-left > #experience { order: 2; } .page > .col-left > #contact { order: 5; } .page > #ai { order: 3; } .page > #past { order: 4; } /* ==================== 宽屏布局 ==================== >= 1700px: 左列 profile/experience/contact 保持 1180px 宽; AI + 往期项目 浮在 profile+experience 右侧, 高度从 profile 顶到 experience 底, 不挡 contact; 往期项目内部 3 个子分类横向铺开 < 1700px: 保持原来单列堆叠 (上面 .page flex 列) */ @media (min-width: 1700px) { /* 宽屏下 body 弹性居中 .page; .page 用 92% 视口宽度 (col1=600 / col2=300 固定, col3 跟着加宽) */ body { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 12px 0; overflow: hidden; } .page { max-width: 92%; width: 92%; margin: 0 auto; display: grid; /* 列宽硬锁: col1=600 (丁旭杭 + 工作经历, +1/4) / col2=300 (AI 研究, -1/4) / col3=剩余 (往期项目) */ grid-template-columns: 600px 300px minmax(0, 1fr); /* page 锁死 88vh, 整页一屏可见, 不触发 window 滚动 */ height: 88vh; margin: 0 auto; padding: 6px; /* 让 section 角点 (-3.5px) 落进 padding 内, 不被 overflow:hidden 裁掉 */ overflow: hidden; /* profile / contact 按内容贴底, experience 占剩余, 让 3 段工作经历完整撑开 */ grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 12px; /* 横向同步竖向 row-gap */ row-gap: 12px; align-items: stretch; } /* profile / experience / contact 不内部滚动, 完整显示内容; 不要在 section 上加 overflow:hidden, 否则 -3.5px 偏移的角点小方块会被裁掉 */ .col-left > #experience { min-height: 0; } /* AI 跨 row 1-2; section 本身不裁(保留角点), 改在内部 .grid-3 上裁内容 */ .page > #ai { min-height: 0; padding: 88px 28px 22px; } #ai .grid-3 { overflow: visible; padding-right: 3px; padding-bottom: 3px; } /* —— 横屏专属紧凑度调整 —— profile 没有 .tag, 自由压缩; experience / contact 有 .tag (绝对定位, ~50px 高), 必须保留 padding-top 留位置, 否则 tag 会盖住正文 */ /* col1 现在 600, profile 整段高度 +1/3, padding 上下进一步加大 */ .col-left > #profile { padding: 44px 24px 24px; } /* experience: flex column flex-start, 三段按自然间距排; padding-top +40 让内容整体往下挪 */ .col-left > #experience { padding: 0; display: flex; flex-direction: column; } /* exp-inner 承载全部内边距和内容, overflow:hidden 裁掉超出外框的部分; corners 留在 section 层, 不受裁剪影响 */ .col-left > #experience .exp-inner { flex: 1; min-height: 0; overflow: hidden; padding: 116px 24px 14px; display: flex; flex-direction: column; } /* 联系方式: 高度比上一版 +1/4, padding/字号/gap 同步上调 */ .col-left > #contact { padding: 80px 24px 22px; } /* col1 = 600, profile 各行字号 / margin 全面上调, 整段高度 +1/3 */ .col-left > #profile .meta-label { margin-bottom: 18px; } /* name 字号沿用竖排默认 clamp(2.4rem, 7.5vw, 3.75rem), 仅设置 margin-bottom */ .col-left > #profile .name { margin-bottom: 16px; } .col-left > #profile .role { margin-bottom: 20px; font-size: var(--text-lg); } .col-left > #profile .bio { font-size: var(--text-base); line-height: 1.7; max-width: none; } /* —— 工作经历: 内部间距完全沿用竖排默认值, 横向只收紧 job-name 字号 —— */ /* 不覆写 job / job-head / job-role 的 margin / padding-bottom, 完全用 .job 默认 (padding-bottom: 22; .job-head margin-bottom: 4; .job-role margin-bottom: 14) */ .col-left > #experience .job-name { font-size: var(--text-xl); } /* 列表保持竖排默认: font-size sm, line-height 1.625 (.job-list li 默认值) — 不覆写 */ /* 联系方式: 单行 4 列, 字号 / 行距上调一档让整段更舒展 (高度 +1/4) */ .col-left > #contact .contact-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 22px; margin-top: 8px; } .col-left > #contact .contact-item .ci-label { margin-bottom: 8px; font-size: var(--text-base); } .col-left > #contact .contact-item .ci-value { font-size: var(--text-lg); } .col-left { display: contents; } .col-left > #profile { grid-column: 1 / 3; grid-row: 1; margin: 0; order: 0; } .col-left > #experience { grid-column: 1; grid-row: 2; margin: 0; order: 0; } /* 联系方式横跨 col 1 + col 2, 右边对齐 AI 的右边 */ .col-left > #contact { grid-column: 1 / 3; grid-row: 3; margin: 0; order: 0; } /* AI 跨 row 1-2, 底部对齐工作经历底部 */ .page > #ai { grid-column: 2; grid-row: 2; margin: 0; order: 0; align-self: stretch; } /* 往期项目跨全部 3 行, 一直延到联系方式底部 */ .page > #past { grid-column: 3; grid-row: 1 / 4; margin: 0; order: 0; align-self: stretch; } /* AI 内部: section 转 flex 列, grid-3 占满剩余高度, 3 张卡均分 row 1-2 高度 */ #ai { display: flex; flex-direction: column; } #ai .grid-3 { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; flex: 1; } /* AI 卡片缩略图改为弹性高度 — 自动适配 (col2 / 3 行) 剩余空间, 不再用 75% 固定比例 这样 col2 加宽后, 三张卡片仍刚好填满 AI 外框, 不会溢出也不会留白 */ #ai .grid-3 .thumb-frame { flex: 1; min-height: 0; margin-bottom: 0; /* 取消间距, 让 thumb 与 title 区无缝, 靠 mask 渐变过渡 */ } #ai .grid-3 .project-thumb { padding-bottom: 0; height: 100%; background: transparent; overflow: visible; /* mask 让 canvas 底部 30% 渐变淡入 .project 暗底, 视觉上动态内容"延伸"到 title/desc 区, 不再被 thumb 边界硬切; canvas 顶部完全显示, 底部与文字区无缝融合 */ -webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%); mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%); } /* 往期项目: section 转 flex 列, 三个分类按文档流上下排列, 整体 overflow-y: auto 内部滚动浏览. 不再用 absolute panel-stack + tab 切换, .past-tabs 隐藏, .sub-heading 显示作分类分隔 */ #past { display: flex; flex-direction: column; width: 100%; min-width: 0; } #past .past-subs { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; /* 滚到顶/底时不冒泡到 body, body overflow:hidden 会吞事件 */ width: 100%; scrollbar-width: none; /* Firefox: 隐藏滚动条 (仍可滚) */ -ms-overflow-style: none; /* IE / 老 Edge */ } #past .past-subs::-webkit-scrollbar { width: 0; height: 0; display: none; } #past .past-sub { display: block; } #past .past-sub .sub-heading { display: block; margin-top: 24px; } #past .past-sub:first-of-type .sub-heading { margin-top: 0; } #past .past-tabs { display: none; } } /* ==================== 往期项目 — 标签页(自动 4s 切换 + 悬停暂停) ==================== */ .past-tabs { display: flex; align-items: center; gap: 36px; margin: 0 0 20px 4px; padding: 0; flex-wrap: wrap; } .past-tab { position: relative; display: inline-flex; flex-direction: column; gap: 3px; padding: 6px 0 6px 16px; /* 左 16px 给竖线让位 */ background: transparent; border: 0; cursor: pointer; color: var(--text-737); font-family: 'Manrope', 'MiSans', 'Noto Sans SC', sans-serif; line-height: 1.05; -webkit-font-smoothing: antialiased; transition: color .35s ease; } .past-tab .tab-en { font-size: 11px; letter-spacing: 0.18em; opacity: 0.55; text-align: left; align-self: flex-start; /* 不被 stretch 撑到 CN 宽, 保持自然左对齐 */ transition: opacity .3s ease, color .3s ease; } .past-tab .tab-cn { font-size: 20px; letter-spacing: 0.06em; align-self: flex-start; /* CN 也按内容宽度左对齐 */ font-weight: 600; /* MiSans 实重代替原假粗 */ } /* EN 模式: 大字 tab-cn → UPPERCASE, 小字 tab-en → lowercase. 跟同款 sub-heading::after 同步 */ html.lang-en .past-tab .tab-cn, html.lang-en .sub-heading { text-transform: uppercase; letter-spacing: 0.08em; /* uppercase 需要更宽字距 */ } html.lang-en .past-tab .tab-en, html.lang-en .sub-heading::after { text-transform: lowercase; letter-spacing: 0.12em; } /* 左侧竖线小提示 — 默认隐藏, active 时琥珀色淡入 + 上下展开 */ .past-tab .tab-line { position: absolute; left: 0; top: 50%; width: 2px; height: 18px; background: var(--text-white); box-shadow: none; transform: translateY(-50%) scaleY(0); transform-origin: 50% 50%; opacity: 0; transition: transform .45s cubic-bezier(.4, 0, .2, 1), opacity .35s ease, background .3s ease, box-shadow .3s ease; } .past-tab.active .tab-line { transform: translateY(-50%) scaleY(1); opacity: 1; } .section.amber:hover .past-tab .tab-line { background: var(--amber); box-shadow: 0 0 6px var(--amber); } .past-tab.active { color: var(--text-white); transition: color .3s ease; } .past-tab.active .tab-en { opacity: 0.75; } .past-tab:hover { color: var(--text-d4); } .past-tab.active:hover { color: var(--text-white); } .section.amber:hover .past-tab.active { color: var(--amber); } .section.amber:hover .past-tab.active:hover { color: var(--amber); } /* past 改成上下滚动模式后, 三个 sub 默认全显示, sub-heading 作分类分隔 */ /* past 区底部"继续滚动"提示条: absolute 底部, amber 色发光文字 + 大箭头, 渐变 fade 区让"内容被遮住一点"更明显. pointer-events:none 不影响滚动. 滚到底由 JS 加 .past-scrolled-bottom class fade out */ #past .past-scroll-hint { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 28px; /* 原 80px 顶部 padding 配合渐变, 现统一去掉渐变, 留正常 padding */ background: none; /* 去掉渐变阴影 (暗/亮模式统一) */ color: var(--amber); font-family: 'JetBrains Mono', 'MiSans', 'Noto Sans SC', monospace; font-size: 12px; font-weight: 600; letter-spacing: 0.28em; text-align: center; text-shadow: 0 0 12px rgba(252, 211, 77, 0.55); pointer-events: none; opacity: 1; transition: opacity 0.3s ease; z-index: 2; } #past .past-scroll-arrow { display: inline-block; margin-right: 10px; font-size: 16px; animation: past-hint-bob 1.2s ease-in-out infinite; } @keyframes past-hint-bob { 0%, 100% { transform: translateY(0); opacity: 0.65; } 50% { transform: translateY(5px); opacity: 1; } } #past.past-scrolled-bottom .past-scroll-hint { opacity: 0; } /* —— 所有 past 卡片严格同尺寸 (参照 TOKYO 2020 ON CLOUD 那张) —— 单行 title + 单行 desc + 单行 chips, 卡片高度只由列宽决定, 三个 tab 切换时卡尺寸完全一致 */ #past .grid-4 .project-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #past .grid-4 .chips { flex-wrap: nowrap; overflow: hidden; height: 24px; align-items: center; } /* 卡片宽度由 grid-4 列宽 (1fr) 统一, 高度 = 75%pb 缩略图 + 单行内容(确定值); 三个 tab 切换时所有卡严格同尺寸, 即 TOKYO 那种 */ /* 窄屏退化: 标签页隐藏, 所有分类正常展开(回到上下滚动浏览) */ @media (max-width: 1699px) { .past-tabs { display: none; } #past .past-sub { display: block; opacity: 1; animation: none; } #past .past-sub .sub-heading { display: block; } /* 工作经历模块高度 +1/4 — padding-top 不覆写, 走 .section:has(.tag) 默认 110px (与 #ai / #contact / #past 一致, 标题与内容间隔参考 AI 研究); 只加 padding-bottom + 内部各段间距, 让模块整体撑高 */ #experience { padding-bottom: 56px; } /* 默认 40 × 1.4 */ #experience .job { padding-bottom: 28px; } /* 默认 22 × 1.27 */ #experience .job-role { margin-bottom: 18px; } /* 默认 14 × 1.29 */ } .dot { width: 8px; height: 8px; border-radius: 0; display: inline-block; } .dot.cyan { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); } .dot.violet { background: var(--violet); box-shadow: 0 0 8px var(--violet); } .dot.rose { background: #fb923c; box-shadow: 0 0 8px #fb923c; } .dot.amber { background: var(--amber); box-shadow: 0 0 8px var(--amber); } .dot.gold { background: var(--gold); box-shadow: 0 0 8px var(--gold); } /* ==================== Section Card ==================== */ /* 实色卡片底 + 内置光照层 — 放弃 backdrop-filter, 改两层组合: ① background: var(--bg-card) — 实色挡住网格 / 扫描线, 杜绝 Chrome backdrop-filter 在 80px 虚线网格上的拍频 banding; ② .section::after — 卡片内部跟随鼠标的极淡光照层, mix-blend-mode: screen 与 实色底 blend, 让卡片表面"接收" spotlight 染色, 但网格不透. viewport 锚定靠 background-attachment: fixed (与 .section 自身 transform 解耦), stacking 用 z-index: -1 让光照沉在文字之下, isolation: isolate 锁死 blend 范围. */ .section { position: relative; background: #0d0d0d; /* dark: var(--bg-card) #141414 × 2/3, 卡片更沉 */ padding: 40px 44px; margin-bottom: 36px; isolation: isolate; } html.light .section { background: var(--bg-card); } /* 卡片表面光照层 — 跟随 --mx / --my, 颜色取 --spotlight-color (按 section 切色) gradient 中心 = (mx - sec-x, my - sec-y), 把 viewport 坐标换算成 .section 自身坐标系. 等价于"全局只有一束光", 鼠标不在某卡片上时, 该卡片光斑中心在 box 之外, 衰减后不可见. 不能用 background-attachment: fixed — .section 有入场 transform, fixed 会退化为 按 .section 自身坐标渲染, 导致每张卡片中心都画一个光点. */ .section::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; /* 沉到 .section background 之上、子元素之下 */ background: radial-gradient( ellipse 720px 560px at calc((var(--mx) - var(--sec-x, 0px)) / var(--page-scale, 1)) calc((var(--my) - var(--sec-y, 0px)) / var(--page-scale, 1)), rgba(var(--spotlight-color), 0.04), transparent 70% ); mix-blend-mode: screen; /* 暗底 #141414 上 screen → 染色明显但不刺眼 */ opacity: 0; transition: opacity .5s ease; } /* 只在鼠标 hover 当前卡时点亮内置光照 — 减少非聚焦卡片每帧 mix-blend-mode + radial-gradient 重绘 */ .section.visible:hover::after { opacity: 1; } /* light mode: 卡片底亮 #fafafa, screen 看不见 → 改 multiply 暗化染色 */ html.light .section::after { background: radial-gradient( ellipse 600px 480px at calc((var(--mx) - var(--sec-x, 0px)) / var(--page-scale, 1)) calc((var(--my) - var(--sec-y, 0px)) / var(--page-scale, 1)), rgba(var(--spotlight-color), 0.047), transparent 70% ); mix-blend-mode: multiply; } .section::before { content: ''; position: absolute; inset: 0; border: 1px solid; pointer-events: none; z-index: 2; /* 高于内容 (modal-img-block 等 z-auto), 但低于 corners (z:3), 边框可见不被遮 */ } /* 暗模式 rest 边框统一一个浅白 — 不再 cyan/violet/rose/amber 四色 */ .section.cyan::before, .section.violet::before, .section.rose::before, .section.amber::before { border-color: rgba(255, 255, 255, 0.15); } /* corner blocks (方块版) */ .section .corner { position: absolute; width: 7px; height: 7px; border-radius: 0; z-index: 3; /* 高于 .past-scroll-hint (z:2), 不被底部 hint 渐变覆盖 */ } .corner.tl { top: -3.5px; left: -3.5px; } .corner.tr { top: -3.5px; right: -3.5px; } .corner.bl { bottom: -3.5px; left: -3.5px; } .corner.br { bottom: -3.5px; right: -3.5px; } .section.cyan .corner { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); } .section.violet .corner { background: var(--violet); box-shadow: 0 0 6px var(--violet); } .section.rose .corner { background: #fb923c; box-shadow: 0 0 6px #fb923c; } .section.amber .corner { background: var(--amber); box-shadow: 0 0 6px var(--amber); } /* ---- 默认灰色 + hover 点亮 ---- */ .dot.cyan, .dot.violet, .dot.rose, .dot.amber { background: #383838; box-shadow: none; transition: background .3s ease, box-shadow .3s ease; } .section.cyan::before, .section.violet::before, .section.rose::before, .section.amber::before { border-color: rgba(80, 80, 80, 0.35); transition: border-color .4s ease; } /* hover 时 section 边框统一: dark 模式浅白, light 模式深棕弱 (跟角点 hover 风格一致) */ .section.cyan:hover::before, .section.violet:hover::before, .section.rose:hover::before, .section.amber:hover::before { border-color: rgba(255, 255, 255, 0.35); } /* 亮模式 hover 边框统一深棕 (跟暗模式 hover 用白色同套统一化逻辑) */ html.light .section.cyan:hover::before, html.light .section.violet:hover::before, html.light .section.rose:hover::before, html.light .section.amber:hover::before { border-color: rgba(60, 50, 30, 0.35); } .section.cyan .corner, .section.violet .corner, .section.rose .corner, .section.amber .corner { background: #383838; box-shadow: none; transition: background .3s ease, box-shadow .3s ease; } /* hover 时所有 section 的 4 角点统一: dark 模式白色发光 / light 模式深棕无光 */ .section.cyan:hover .corner, .section.violet:hover .corner, .section.rose:hover .corner, .section.amber:hover .corner { background: #ffffff; box-shadow: 0 0 6px rgba(255, 255, 255, 0.6); } html.light .section.cyan:hover .corner, html.light .section.violet:hover .corner, html.light .section.rose:hover .corner, html.light .section.amber:hover .corner { background: var(--ink); box-shadow: none; } .tag.cyan, .tag.violet, .tag.rose, .tag.amber { color: var(--text-white); transition: color .3s ease; } /* hover .tag 颜色统一 — 不再 cyan/violet/rose/amber 4 色, 跟正文色一致 (dark→白 / light→深棕) */ .section.cyan:hover .tag.cyan, .section.violet:hover .tag.violet, .section.rose:hover .tag.rose, .section.amber:hover .tag.amber { color: var(--text-white); } /* 标题灰色默认 + hover 点亮 */ .section.cyan .name, .section.violet .job-name, .section.rose .project-title, .section.amber .project-title { color: var(--text-white); transition: color .3s ease; } .section.cyan:hover .name { color: var(--text-white); } .section.violet:hover .job-name { color: var(--text-white); } .section.rose:hover .project-title { color: var(--text-white); } .section.amber:hover .project-title { color: var(--text-white); } /* 字体: 中文 MiSans (小米) + 拉丁 Manrope, @font-face 在 fonts/local-fonts.css 本地加载 * (原 ZPix 点阵方案已弃用; MiSans-VF.woff2 为子集化变体字, 缺字回退 Noto Sans SC) */ /* section tag — 双行 (英小 + 中大), 放在 section 内框左上, 不再跨边框 */ .tag { position: absolute; top: 24px; left: 28px; display: inline-flex; flex-direction: column; align-items: flex-start; /* EN/CN 按内容宽度左对齐, 不再 stretch */ gap: 4px; padding: 0; background: transparent; font-family: 'Manrope', 'MiSans', 'Noto Sans SC', sans-serif; line-height: 1.05; z-index: 4; -webkit-font-smoothing: antialiased; } .tag .tag-en { font-size: 14px; letter-spacing: 0; opacity: 0.55; white-space: nowrap; display: block; /* EN 行宽对齐 CN 行: 字号 14px 让 EN 自然窄于 CN, JS 用脚本测 CN 宽度后给 EN 计算 letter-spacing, 只调字母间隔, 不拉空格, 视觉更均匀 */ } .tag .tag-cn { font-size: 32px; letter-spacing: 0.05em; white-space: nowrap; font-weight: 600; } /* tag 颜色由 hover 块统一控制，此处不再设色 */ /* 给带 tag 的 section 头部留位置, 让正文从 tag 下方开始 — 用后代 .tag 而非直接子 > .tag, 因为 #experience 把 tag 包在 .exp-inner 里 (非直接子) */ .section:has(.tag) { padding-top: 110px; } /* ==================== Personal Info ==================== */ /* hero 三件 (meta-label / name / role) 共用 MiSans, 正常抗锯齿 */ .meta-label, .name, .role { font-family: 'Manrope', 'MiSans', 'Noto Sans SC', sans-serif; -webkit-font-smoothing: antialiased; } .meta-label { font-size: var(--text-xs); /* xs - 副标题 */ letter-spacing: var(--tracking-case); /* 超宽 */ color: var(--text-737); margin-bottom: 18px; font-weight: 600; } .name { font-size: clamp(2.4rem, 7.5vw, var(--text-6xl)); /* 自适应:窄屏 38px → 宽屏 60px */ font-weight: 700; /* bold - 姓名 (MiSans 实重) */ letter-spacing: var(--tracking-name); /* -0.03em 略紧 */ color: var(--text-white); margin-bottom: 10px; line-height: var(--leading-tight); } .role { font-size: var(--text-xl); /* xl */ color: var(--text-a3); /* 次要信息 */ margin-bottom: 28px; letter-spacing: var(--tracking-wider); } .bio { font-size: var(--text-base); /* base */ color: var(--text-d4); /* 正文 */ line-height: var(--leading-relaxed); max-width: 740px; } /* ==================== Work Experience ==================== */ .job { position: relative; padding: 0 0 22px 20px; /* 左侧 20px 给装饰线让位 */ border-left: 1px solid #3a3a3a; /* 装饰线现在覆盖整块 (含标题) */ } .job:last-of-type { padding-bottom: 4px; } .job-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; } /* 职位行 + 列表区域 — 不再单独挂线 */ .job-body { position: relative; } .job-name { font-size: var(--text-2xl); /* 2xl - 公司名称 */ font-weight: 700; color: var(--text-white); letter-spacing: var(--tracking-wider); } .job-date { font-size: var(--text-sm); /* sm - 时间段 */ color: var(--text-737); letter-spacing: var(--tracking-wider); } .job-role { font-size: var(--text-sm); color: var(--text-a3); margin-bottom: 14px; } .job-list { list-style: none; padding-left: 0; } .job-list li { position: relative; padding-left: 18px; font-size: var(--text-sm); /* sm - 工作内容 */ line-height: var(--leading-relaxed); color: var(--text-d4); } .job-list li::before { content: ''; position: absolute; left: 0; top: 11px; width: 8px; height: 1px; background: var(--text-525); /* 列表符号 */ } /* ==================== Project Grid ==================== */ /* minmax(0,1fr) 防止 nowrap 文本撑开列宽,使三列严格等宽 */ .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 6px; align-items: stretch; } .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 6px; align-items: stretch; } .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 6px; align-items: stretch; } /* 项目网格细线分格 — 每张卡画 right + bottom 边线, 第一列加 left, 第一行加 top. 共享边只画一次, 粗细均匀; 没有卡片的格子完全不渲染, 不会有"空格漏色"问题. */ /* 卡片之间留 12px 间距, 每张卡独立成块, 不再连在一起 */ .section.amber .grid-3, .section.amber .grid-4, .section.rose .grid-3, .section.rose .grid-4 { gap: 12px; } .section.amber .grid-3 > .project, .section.amber .grid-4 > .project, .section.rose .grid-4 > .project { background: #1a1a1a; padding: 14px 14px 16px; box-shadow: 3px 3px 2px #000; transition: transform .25s ease, box-shadow .25s ease; } .section.amber .grid-3 > .project:hover, .section.amber .grid-4 > .project:hover, .section.rose .grid-4 > .project:hover { box-shadow: 3px 6px 2px #000; } /* AI 卡片: 整张 .project 暗底 (#0f0f0f, 与原 thumb 同色), thumb-frame 透明融入, 文字坐在延伸下来的暗底上. 无 visible border, 视觉边界靠暗底与 .section 底色对比. */ #ai .grid-3 > .project { background: #0f0f0f; padding: 10px 10px 12px; } #ai .grid-3 .chips { display: none; } /* GIF 左右不裁剪: contain 完整显示, 上下留出 .project 暗底. mix-blend-mode: screen 让 GIF 黑色背景透明融入 .project 暗底, 只剩亮的内容显出. 若 GIF 实际是白底, 把 screen 改成 multiply (让白色变透明). */ #ai .grid-3 .project-thumb > img { object-fit: contain; mix-blend-mode: multiply; } .project { cursor: pointer; transition: transform .25s ease; /* flex column + min-width:0 让卡片严格遵守网格列宽,且让 chips 可以被推到底部 */ display: flex; flex-direction: column; min-width: 0; height: 100%; } .project:hover { transform: translateY(-3px); } /* 角标包裹层 — 贴合图像外框 */ .thumb-frame { position: relative; margin-bottom: 14px; } /* 直角 L 形角标装饰已废弃 */ .thumb-frame .br-corner { display: none; } .project-thumb { position: relative; width: 100%; padding-bottom: 75%; /* 4:3 比例 hack, 老牌 + 100% 兼容 */ height: 0; background: #0f0f0f; overflow: hidden; } .project-thumb > * { /* 所有子元素绝对填满 */ position: absolute; inset: 0; } .section.amber .project-thumb::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.3) 100%); pointer-events: none; z-index: 1; opacity: 1; transition: opacity .3s ease; } .section.amber .project:hover .project-thumb::after { opacity: 0; } .project-thumb > img { width: 100%; height: 100%; object-fit: cover; display: block; } .project-thumb > svg.placeholder { /* 居中显示固定 64×64 注意:inset:auto 必须先写,否则会重置后面的 top/left */ inset: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; opacity: 0.55; } /* Procedural shader canvas (WebGL2 fragment shaders, locked to dark/inverted palette). Placed inside .project-thumb on AI cards (#homelabCard rings, #aigcCard raymarch silhouette). Inherits absolute fill from `.project-thumb > *`. Background matches the shaders' bg color (#1a1a1a) so there is no flash before WebGL initializes; pointer-events disabled so card hover/click still routes to the .has-detail handler. The actual shader is picked by the canvas's data-shader attribute. */ .procedural-shader { width: 100%; height: 100%; display: block; background: #1a1a1a; pointer-events: none; } /* Wireframe canvas (Three.js LineSegments2 + Line2). Used on #homelabCard (radial scene) and #aigcCard (analyze conveyor). Background #161616 matches the scene clear color. Three.js script + Line2 examples are lazy-loaded by the inline IIFE in resume.html when the canvas first scrolls into view. The IIFE skips init entirely on touch / narrow viewports to avoid iOS Safari OOM crashes. */ .wireframe-shader { width: 100%; height: 100%; display: block; background: #161616; pointer-events: none; } /* Mobile fallback GIF — sits next to the canvas inside .project-thumb which absolutely positions all children to fill. Hidden by default (display:none = no network fetch); shown only when the canvas is hidden on touch devices / narrow viewports. Override the AI section's `object-fit: contain` + `mix-blend-mode: multiply` (set above for older light-bg GIFs) — the wireframe GIFs are dark-bg with light strokes, so they need plain `cover` and NO blend mode (multiply would make the light strokes vanish into the dark card background). */ #ai .grid-3 .project-thumb > img.wireframe-fallback { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; display: none; pointer-events: none; } /* iOS pinch-zoom 期间临时禁用装饰层 — 缩放峰值 Safari 同时持有 3x GPU 内存, iPad 平常不崩但缩放 spike 会爆. JS 监听 visualViewport.scale > 1.05 加 .zooming class, 缩放结束 150ms 后自动 remove. 平常浏览体验完全不变. */ html.zooming .mouse-spotlight, html.zooming .noise-layer, html.zooming body::before, html.zooming body::after, html.zooming .section::after { display: none !important; } html.zooming .section { isolation: auto !important; } /* iPhone 竖屏 OOM 修复 — 仅命中小屏 (max-width 600px ≈ iPhone 竖屏 390px), iPad 竖屏 (~820) / iPad 横屏 (~1180) / 横屏 iPhone (~852) / 桌面 都看全功能. 早先用 (hover: none) and (pointer: coarse) 误伤所有触屏设备 (含 iPad). */ @media (max-width: 600px) { .wireframe-shader { display: none; } #ai .grid-3 .project-thumb > img.wireframe-fallback { display: block; } /* 竖屏 iPhone tab GPU ~150 MB 上限,fixed 全屏装饰层 + section isolation + mix-blend-mode 光照 + .visible transition 累积合成 → "a problem repeatedly occurred". */ .mouse-spotlight, .noise-layer { display: none !important; } body::before, body::after { display: none !important; } .section::after { display: none !important; } .section { isolation: auto !important; transform: none !important; opacity: 1 !important; transition: none !important; } .section.visible { transform: none !important; opacity: 1 !important; transition: none !important; } } .project-title { font-size: var(--text-base); /* base */ font-weight: 500; color: var(--text-white); margin-bottom: 5px; letter-spacing: var(--tracking-wider); } .project-desc { font-size: var(--text-sm); color: var(--text-400); /* 说明文字 */ margin-bottom: 12px; line-height: 1.5; white-space: nowrap; /* 强制单行 */ overflow: hidden; text-overflow: ellipsis; } /* margin-top:auto 把 chips 推到卡片底部,实现三列 chips 横向对齐 */ .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; } /* 卡片 tag 统一只显示前 2 个 — 不影响 modal 详情页的 .toolset .chip (那不在 .project 内) */ .project .chips .chip:nth-child(n+3) { display: none; } .chip { background: #111111; color: var(--text-a3); font-size: var(--text-xs); /* xs - 标签 */ padding: 3px 9px; border: 1px solid var(--border); } /* sub-headings inside section — 视觉与横排 .past-tab 完全一致: 琥珀色 / 左侧竖线 / CN 上 EN 下 双行点阵 */ .sub-heading { position: relative; display: block; padding: 6px 0 6px 16px; /* 左 16 给竖线让位, 与 .past-tab 一致 */ margin: 32px 0 18px; font-size: 20px; /* 与 .past-tab .tab-cn 一致 */ font-weight: 500; line-height: 1.05; letter-spacing: 0.06em; color: var(--amber); font-family: 'Manrope', 'MiSans', 'Noto Sans SC', sans-serif; -webkit-font-smoothing: antialiased; } .sub-heading::before { /* 左侧琥珀竖线小提示 — 跟横排 .past-tab.active .tab-line 同款 */ content: ''; position: absolute; left: 0; top: 50%; width: 2px; height: 28px; background: var(--amber); box-shadow: 0 0 6px var(--amber); transform: translateY(-50%); } .sub-heading::after { /* 中文下方的英文小字 — 跟横排 .past-tab .tab-en 同款 */ display: block; margin-top: 4px; font-size: 11px; font-weight: 500; letter-spacing: 0.18em; opacity: 0.55; text-shadow: none; } /* 三个分类对应的英文 (用 :nth-of-type 注入, 不需要改 HTML) */ .past-sub:nth-of-type(1) .sub-heading::after { content: 'BRAND'; } .past-sub:nth-of-type(2) .sub-heading::after { content: 'CAMPAIGN'; } .past-sub:nth-of-type(3) .sub-heading::after { content: 'PACKAGING'; } /* 英文模式下小字跟 tab-en data-en 同步 (IDENTITY / ADS / PRODUCT) — 不再跟大字重复 */ html.lang-en .past-sub:nth-of-type(1) .sub-heading::after { content: 'IDENTITY'; } html.lang-en .past-sub:nth-of-type(2) .sub-heading::after { content: 'ADS'; } html.lang-en .past-sub:nth-of-type(3) .sub-heading::after { content: 'PRODUCT'; } .sub-heading:first-of-type { margin-top: 8px; } /* ==================== Contact ==================== */ .contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 8px; } .contact-item .ci-label { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--text-a3); margin-bottom: 8px; } .ci-emoji { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0; } .ci-emoji svg { width: 14px; height: 14px; color: var(--text-a3); flex-shrink: 0; } .contact-item .ci-value { font-size: var(--text-base); /* base - 联系方式值 */ color: var(--text-white); letter-spacing: var(--tracking-wider); } /* fade-in on scroll */ .section { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; } /* visible 后 transform: none (而非 translateY(0)), 让 .section 不再是 transform-induced stacking context — 改由 isolation: isolate 提供 stacking, 与 AI-Pipeline 对齐. Chrome 在 transform-induced 父级内对 mix-blend-mode 子元素有 paint jitter, 这是 resume 卡片背景在鼠标运动下闪动而 AI-Pipeline 不闪的根源. translateY(20px) → none 的 transition 插值 spec 支持, 视觉上仍是上滑入场. */ .section.visible { opacity: 1; transform: none; } /* ==================== Detail Page Transition ==================== */ /* 当 .page 进入 detail 状态:所有 section 直接淡出消失,无横向位移 注: 用后代选择器 (空格) 而非直接子选择器 (>), 因为 #profile/#experience/#contact 嵌套在 .col-left 内, #ai/#past 才直接在 .page 下。改成后代选择器后所有 section 一起淡出 */ .page.detail-out .section { transition: opacity .2s ease-out; opacity: 0 !important; pointer-events: none; transition-delay: 0s; } /* .col-left 自身也淡出, 保持视觉整洁 (避免左列容器残留) */ .page.detail-out > .col-left { transition: opacity .2s ease-out; opacity: 0 !important; pointer-events: none; } /* hover indicator removed per user request — keep only cursor change */ .project.has-detail { position: relative; cursor: pointer; } /* ==================== Detail Page (AIGC 设计师简历) ==================== */ .detail-page { position: fixed; inset: 0; background: #111111; /* 详情页里面纯色底, 不再画背景网格 */ z-index: 200; overflow-y: auto; opacity: 0; transform: translateX(80px); pointer-events: none; transition: opacity .55s cubic-bezier(.4, 0, .2, 1) .15s, transform .55s cubic-bezier(.4, 0, .2, 1) .15s; } .detail-page.open { opacity: 1; transform: translateX(0); pointer-events: auto; } .detail-inner { max-width: 980px; margin: 0 auto; padding: 36px 28px 80px; } .detail-back { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid var(--rose); color: var(--rose); padding: 8px 14px; font-family: 'JetBrains Mono', 'Pixelify Sans', 'MiSans', 'Noto Sans SC', monospace; font-size: var(--text-xs); letter-spacing: var(--tracking-case); cursor: pointer; margin-bottom: 32px; transition: background .2s, color .2s; } .detail-back:hover { background: var(--rose); color: #000; } .detail-hero { position: relative; background: var(--bg-card); border: 1px solid rgba(251, 113, 133, 0.4); padding: 56px 48px 48px; margin-bottom: 28px; } .detail-hero .corner { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 6px var(--rose); } .detail-meta { font-size: var(--text-xs); letter-spacing: var(--tracking-case); color: var(--rose); margin-bottom: 22px; } .detail-title { font-size: clamp(2.2rem, 6.8vw, var(--text-6xl)); font-weight: 300; letter-spacing: var(--tracking-name); color: var(--text-white); margin-bottom: 14px; line-height: var(--leading-tight); } .detail-subtitle { font-size: var(--text-xl); color: var(--text-a3); letter-spacing: var(--tracking-wider); margin-bottom: 26px; } .detail-lede { font-size: var(--text-base); color: var(--text-d4); line-height: var(--leading-relaxed); max-width: 760px; } .detail-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 28px; } .detail-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 28px; } .detail-card { background: var(--bg-card); border: 1px solid var(--border); padding: 28px 26px; position: relative; } .detail-card .ix { font-family: 'JetBrains Mono', 'MiSans', 'Noto Sans SC', monospace; font-size: 10px; color: var(--rose); letter-spacing: var(--tracking-case); margin-bottom: 14px; } .detail-card h4 { font-size: var(--text-lg); font-weight: 500; color: var(--text-white); margin-bottom: 10px; letter-spacing: var(--tracking-wider); } .detail-card p { font-size: var(--text-sm); color: var(--text-a3); line-height: var(--leading-relaxed); } .detail-section-title { font-size: var(--text-xl); font-weight: 500; color: var(--text-white); letter-spacing: var(--tracking-widest); margin: 36px 0 18px; display: flex; align-items: center; gap: 10px; } .detail-section-title::before { content: ''; width: 18px; height: 1px; background: var(--rose); } .pipeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; background: var(--bg-card); border: 1px solid var(--border); margin-bottom: 28px; } .pipeline-step { padding: 22px 18px; border-right: 1px dashed #1f1f1f; position: relative; } .pipeline-step:last-child { border-right: 0; } .pipeline-step .pn { font-family: 'JetBrains Mono', 'MiSans', 'Noto Sans SC', monospace; font-size: 10px; color: var(--rose); letter-spacing: 0.15em; margin-bottom: 10px; } .pipeline-step .pt { font-size: var(--text-base); color: var(--text-white); font-weight: 500; margin-bottom: 6px; } .pipeline-step .pd { font-size: var(--text-xs); color: var(--text-737); line-height: 1.6; } .toolset { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; } .toolset .chip { background: #141414; border-color: rgba(251,113,133,0.25); color: var(--text-d4); padding: 6px 12px; } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-bottom: 28px; } .stat { border-left: 1px solid var(--rose); padding: 6px 0 6px 16px; } .stat .stat-num { font-size: var(--text-5xl); font-weight: 300; color: var(--text-white); letter-spacing: var(--tracking-tight); line-height: 1; margin-bottom: 8px; } .stat .stat-label { font-size: var(--text-xs); color: var(--text-737); letter-spacing: var(--tracking-case); } @media (max-width: 720px) { .detail-inner { padding: 20px 14px 60px; } .detail-hero { padding: 32px 22px; } /* .detail-title 字号已由 clamp() 接管 */ .detail-grid-2, .detail-grid-3, .pipeline, .stats { grid-template-columns: 1fr; } .pipeline-step { border-right: 0; border-bottom: 1px dashed #1f1f1f; } .pipeline-step:last-child { border-bottom: 0; } } /* ==================== Mobile ==================== */ @media (max-width: 720px) { body { padding: 40px 30px; background-size: 40px 40px; } .section { padding: 28px 22px; } /* .name 字号已由 clamp() 接管 */ .role { font-size: var(--text-base); } .job-name { font-size: var(--text-lg); } .contact-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } .job-head { flex-direction: column; gap: 2px; } } /* ==================== Project Modal ==================== */ /* hover indicator removed per user request — keep only cursor change */ .project.has-detail-amber { position: relative; cursor: pointer; } /* backdrop — 放弃 backdrop-filter blur 改实色高 alpha: 原 blur(6px) 每帧抓后面的 mouse-spotlight (8s 持续 animation) + 虚线网格做高斯模糊, Chrome 在虚线网格 + 动态 spotlight 上的 backdrop-filter 有 paint jitter, 与 modal 内 scroll paint 互相 invalidate → 视觉闪烁. 改 0.88 alpha 后视觉同样"压住"背景, 零 jitter. */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.88); z-index: 300; opacity: 0; pointer-events: none; transition: opacity .4s ease; } .modal-backdrop.open { opacity: 1; pointer-events: auto; } /* modal panel — centered lightbox; 详情页里面不再画网格, 干净纯色底 */ .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -48%) scale(0.96); width: min(900px, 92vw); max-height: 88vh; background: #111111; z-index: 301; display: flex; flex-direction: column; border: 1px solid rgba(252,211,77,0.3); border-radius: 4px; opacity: 0; pointer-events: none; transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .35s ease; overflow: hidden; } .modal.open { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; } /* modal topbar */ .modal-bar { display: flex; align-items: center; justify-content: space-between; /* X 在左 (order:-1), 标题推到最右 */ gap: 16px; padding: 14px 28px; border-bottom: 1px solid #1f1f1f; background: rgba(17,17,17,0.92); backdrop-filter: blur(8px); flex-shrink: 0; position: relative; z-index: 2; } .modal-close { order: -1; } /* X 排到 bar 最左 */ /* 顶 bar 整个去掉 (modal-bar 含项目名 + X). 关闭走 Escape 键 / backdrop 点击 / spawn 自带 .spawn-header X */ .modal-bar { display: none !important; } /* modal-eyebrow (类似 "广告营销 / 互动装置" 的小帽子文字, 在 modal-title 上方一行) — 用户要求去掉 */ .modal-eyebrow { display: none !important; } .modal-bar-left .mbl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px var(--amber); animation: blink-amber 2s infinite; } @keyframes blink-amber { 0%,80%{opacity:1} 40%{opacity:0.3} } @keyframes video-fade-loop { 0% { opacity: 0; } 16% { opacity: 1; } 84% { opacity: 1; } 100% { opacity: 0; } } .freshmart-fade { animation: video-fade-loop 2.998s linear infinite; } /* freshmart 02 — 两态交叉淡入淡出, 取代会闪黑的 video loop */ .freshmart-cf .cf-top { position: absolute; inset: 0; width: 100%; height: 100%; animation: freshmart-cf 6s ease-in-out infinite; } @keyframes freshmart-cf { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } } /* freshmart 03 — 招牌 日/夜 两态: 各停留 1s, 过渡 0.5s, 周期 3s. 底图常驻 opacity 1, 上层只在切换时变化, 透明叠加期间永远不会露出 #000 modal 背景. */ .freshmart-cf-03 .cf-top { position: absolute; inset: 0; width: 100%; height: 100%; animation: freshmart-cf-03 3s ease-in-out infinite; } @keyframes freshmart-cf-03 { 0%, 33% { opacity: 0; } 50%, 83% { opacity: 1; } 100% { opacity: 0; } } .modal-bar-left .mbl-title { color: #fff; } .modal-bar-left .mbl-sub { color: #555; } .modal-close { background: transparent; border: 1px solid #555; color: #bbb; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-family: 'JetBrains Mono', 'MiSans', 'Noto Sans SC', monospace; font-size: 16px; transition: border-color .2s, color .2s, background .2s; flex-shrink: 0; } .modal-close:hover { border-color: var(--amber); color: var(--amber); background: rgba(252,211,77,0.08); } /* scrollable body */ .modal-body { overflow-y: auto; flex: 1; padding: 0 0 32px; /* GPU 合成层稳定滚动, 让内部 video poster + image 在 scroll 时不与外层 (mouse-spotlight animation, .noise-layer flicker) paint 串扰 */ transform: translateZ(0); contain: paint; } /* 统一滚动条配色 — 浅灰, 暗亮模式共用 */ /* 隐藏滚动条 (仍可滚) — 详情页 + spawn + past 统一无条 */ .modal-body, .spawn-body { scrollbar-width: none; -ms-overflow-style: none; } .modal-body::-webkit-scrollbar, .spawn-body::-webkit-scrollbar { width: 0; height: 0; display: none; } /* hero block */ .modal-hero { padding: 40px 36px 36px; border-bottom: 1px solid #141414; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; align-items: start; } /* Left column: eyebrow + title */ .modal-hero-left {} .modal-eyebrow { font-family: 'JetBrains Mono', 'MiSans', 'Noto Sans SC', monospace; font-size: 10px; letter-spacing: 0.22em; color: var(--amber); text-transform: uppercase; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; } .modal-eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--amber); } .modal-title { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 300; letter-spacing: -0.025em; color: #fff; line-height: 1.1; margin-bottom: 28px; } .modal-meta { display: flex; flex-wrap: wrap; gap: 20px; font-family: 'JetBrains Mono', 'MiSans', 'Noto Sans SC', monospace; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 20px; } .modal-meta-item { display: flex; flex-direction: column; gap: 5px; } .modal-meta-item .mk { color: #3a3a3a; } .modal-meta-item .mv { color: #aaa; } .modal-tag-row { display: flex; gap: 6px; flex-wrap: wrap; } .modal-tag { background: transparent; border: 1px solid #2a2a2a; color: #555; font-size: 10px; padding: 3px 8px; font-family: 'JetBrains Mono', 'MiSans', 'Noto Sans SC', monospace; letter-spacing: 0.12em; } /* Right column: description */ .modal-hero-right { padding-top: 32px; border-left: 1px solid #1e1e1e; padding-left: 36px; } .modal-desc { font-size: var(--text-sm); line-height: 1.9; color: var(--text-a3); font-weight: 400; letter-spacing: 0.02em; } /* image sequence */ .modal-images { padding: 0 36px; } .modal-img-block { margin-top: 28px; position: relative; } .modal-img-block img, .modal-img-block video { width: 100%; display: block; } /* 网格布局 */ .modal-grid-4, .modal-grid-3, .modal-grid-2 { display: grid; gap: 12px; padding: 0 36px; margin-top: 28px; } .modal-grid-4 { grid-template-columns: repeat(4, 1fr); } .modal-grid-3 { grid-template-columns: repeat(3, 1fr); } .modal-grid-2 { grid-template-columns: repeat(2, 1fr); } .modal-grid-4 .modal-img-block, .modal-grid-3 .modal-img-block, .modal-grid-2 .modal-img-block { margin-top: 0; aspect-ratio: 1 / 1; overflow: hidden; } .modal-grid-4 .modal-img-block img, .modal-grid-4 .modal-img-block video, .modal-grid-3 .modal-img-block img, .modal-grid-3 .modal-img-block video, .modal-grid-2 .modal-img-block img, .modal-grid-2 .modal-img-block video { height: 100%; object-fit: cover; } /* divider inside modal */ .modal-divider { margin: 36px 36px 0; height: 1px; background: #141414; position: relative; } .modal-divider::before { content:''; position:absolute; left:0; top:0; height:100%; width:40px; background: var(--amber); } /* NONO 弹窗专用:顶栏 title 右对齐(关闭按钮已 order:-1 在最左,此处 space-between 把 title 推到最右) */ #nonoModal .modal-bar { justify-content: space-between; } /* 不对称双列:左大右小,等高,允许裁切 (用于 NONO 玻璃钢雕塑) */ .modal-grid-asym { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; padding: 0 36px; margin-top: 28px; align-items: stretch; /* 让两个 cell 同高 */ } .modal-grid-asym .modal-img-block { margin-top: 0; aspect-ratio: 4 / 3; /* 左侧定义行高,右侧 stretch 跟随 */ overflow: hidden; background: #111111; border-radius: 6px; } .modal-grid-asym .modal-img-block:nth-child(2) { aspect-ratio: auto; /* 右侧不再限制比例,自动撑满左侧高度 */ } .modal-grid-asym .modal-img-block img, .modal-grid-asym .modal-img-block video { width: 100%; height: 100%; object-fit: cover; /* 允许裁切以填满 */ display: block; } html.light .modal-grid-asym .modal-img-block { background: #f5f5f5; } @media (max-width: 720px) { .modal-grid-asym { grid-template-columns: 1fr; padding: 0 18px; } .modal-grid-asym .modal-img-block, .modal-grid-asym .modal-img-block:nth-child(2) { aspect-ratio: 4 / 3; } } /* in-modal section heading (章节分隔: 编号 + 标题 + 长线) */ .modal-section-head { margin: 56px 36px 0; display: flex; align-items: center; gap: 14px; font-family: 'JetBrains Mono', 'MiSans', 'Noto Sans SC', monospace; } .modal-section-head .num { font-size: 11px; letter-spacing: 0.22em; color: var(--amber); font-weight: 500; } .modal-section-head .title { font-family: 'Manrope', 'Noto Sans SC', sans-serif; font-size: 15px; letter-spacing: 0.05em; color: #e5e5e5; font-weight: 500; } .modal-section-head .line { flex: 1; height: 1px; background: #1e1e1e; } html.light .modal-section-head .title { color: #1a1a1a; } html.light .modal-section-head .line { background: #e2e2e2; } @media (max-width: 720px) { .modal-section-head { margin-left: 18px; margin-right: 18px; } } @media (max-width: 720px) { .modal { width: 96vw; max-height: 92vh; } .modal-hero { grid-template-columns: 1fr; padding: 24px 18px 24px; } .modal-hero-right { border-left: none; padding-left: 0; padding-top: 20px; border-top: 1px solid #1e1e1e; } .modal-images, .modal-divider { padding-left: 18px; padding-right: 18px; } .modal-title { font-size: 1.6rem; } .modal-meta { gap: 14px; } .modal-grid-4 { grid-template-columns: repeat(2, 1fr); padding: 0 18px; } .modal-grid-3 { grid-template-columns: 1fr; padding: 0 18px; } .modal-grid-2 { grid-template-columns: 1fr; padding: 0 18px; } } /* ==================== 12 星座 横向无缝滚动 ==================== */ .zodiac-marquee { margin-top: 28px; padding: 32px 0 36px; overflow: hidden; /* bg 跟 section 同色族 (--bg-card 暗 #141414), 不再用写死的近黑 #050505 */ background: var(--bg-card, #141414); position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .zodiac-track { display: flex; gap: 24px; width: max-content; animation: zodiac-scroll 80s linear infinite; padding: 0 12px; } /* 第二行反向滚动 */ .zodiac-track.reverse { animation: zodiac-scroll-rev 80s linear infinite; margin-top: 24px; } .zodiac-marquee:hover .zodiac-track { animation-play-state: paused; } .zodiac-item { width: 300px; flex-shrink: 0; text-align: center; cursor: pointer; } .zodiac-item .pic { width: 100%; aspect-ratio: 1 / 1; background: #111111; border-radius: 18px; overflow: hidden; border: 1px solid #1f1f1f; transition: border-color 0.3s ease, transform 0.3s ease; } .zodiac-item:hover .pic { border-color: var(--amber); transform: translateY(-4px); } .zodiac-item .pic img { width: 100%; height: 100%; object-fit: cover; display: block; } .zodiac-item .name { margin-top: 16px; font-size: 16px; color: #e5e7eb; letter-spacing: 1.5px; font-weight: 600; } .zodiac-item .name .en { display: block; margin-top: 6px; font-size: 11px; color: #737373; letter-spacing: 2px; font-family: "JetBrains Mono", "MiSans", "Noto Sans SC", monospace; text-transform: uppercase; font-weight: 400; } @keyframes zodiac-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 12px)); } } @keyframes zodiac-scroll-rev { from { transform: translateX(calc(-50% - 12px)); } to { transform: translateX(0); } } @media (max-width: 720px) { .zodiac-item { width: 200px; } .zodiac-track { gap: 14px; } .zodiac-track.reverse { margin-top: 14px; } .zodiac-item .name { font-size: 14px; } @keyframes zodiac-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 7px)); } } @keyframes zodiac-scroll-rev { from { transform: translateX(calc(-50% - 7px)); } to { transform: translateX(0); } } } html.light .zodiac-marquee { /* 跟 section 同色族 (--bg-card-2 米卡) — 不用 #f5f5f5 那种泛灰白 */ background: var(--bg-card-2); } html.light .zodiac-item .pic { background: var(--bg-card); border-color: var(--line); } html.light .zodiac-item .name { color: var(--ink); } html.light .zodiac-item .name .en { color: var(--ink-soft); } /* ==================== 海报竖图栅格（不裁剪 1:1） ==================== */ .modal-grid-3.posters .modal-img-block, .modal-grid-2.posters .modal-img-block, .modal-grid-4.posters .modal-img-block { aspect-ratio: auto; background: #111111; border-radius: 6px; overflow: hidden; } .modal-grid-3.posters .modal-img-block img, .modal-grid-2.posters .modal-img-block img, .modal-grid-4.posters .modal-img-block img, .modal-grid-3.posters .modal-img-block video, .modal-grid-2.posters .modal-img-block video, .modal-grid-4.posters .modal-img-block video { height: auto; object-fit: contain; } html.light .modal-grid-3.posters .modal-img-block, html.light .modal-grid-2.posters .modal-img-block, html.light .modal-grid-4.posters .modal-img-block { background: #f5f5f5; } /* 加 .aligned 用于强制两个视频高度一致 — 按 disney (720:1372) 锁比例, 另一个 cover 微裁两侧 */ .modal-grid-2.posters.aligned .modal-img-block { aspect-ratio: 720 / 1372; height: auto; } .modal-grid-2.posters.aligned .modal-img-block video, .modal-grid-2.posters.aligned .modal-img-block img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* ==================== 壁纸图 + 视频 紧贴叠放 4 列 ==================== */ .wallpaper-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 0 36px; margin-top: 28px; } .wp-cell { background: #111111; border-radius: 10px; overflow: hidden; border: 1px solid #1f1f1f; position: relative; line-height: 0; /* 消除 inline 元素之间的缝隙 */ } .wp-cell img, .wp-cell video { width: 100%; height: auto; display: block; margin: 0; background: #000; } .wp-cell .wp-label { position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(0,0,0,0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 3px; padding: 5px 12px; border-radius: 16px; line-height: 1.4; border: 1px solid rgba(255,255,255,0.1); } @media (max-width: 720px) { .wallpaper-grid { grid-template-columns: repeat(2, 1fr); padding: 0 18px; gap: 10px; } } html.light .wp-cell { background: #f5f5f5; border-color: #e2e2e2; } html.light .wp-cell img, html.light .wp-cell video { background: #fff; } html.light .wp-cell .wp-label { background: rgba(0,0,0,0.7); border-color: rgba(255,255,255,0.15); } /* ==================== LEGO · 元素 双排交错滚动 ==================== */ .lego-marquee-section { margin-top: 28px; padding: 26px 0 30px; /* bg 跟 section 同色族, 不再用写死的近黑 */ background: var(--bg-card, #141414); overflow: hidden; } .lego-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .lego-marquee + .lego-marquee { margin-top: 16px; } .lego-track { display: flex; gap: 18px; width: max-content; padding: 4px 9px; animation: lego-scroll 40s linear infinite; } .lego-track.reverse { animation: lego-scroll-rev 45s linear infinite; } .lego-marquee:hover .lego-track { animation-play-state: paused; } .lego-item { width: 170px; height: 170px; flex-shrink: 0; background: #101010; border: 1px solid #1f1f1f; border-radius: 14px; display: flex; align-items: center; justify-content: center; padding: 18px; transition: border-color .25s, transform .25s; } .lego-item:hover { border-color: var(--amber); transform: translateY(-4px); } .lego-item img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; } @keyframes lego-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 9px)); } } @keyframes lego-scroll-rev { from { transform: translateX(calc(-50% - 9px)); } to { transform: translateX(0); } } @media (max-width: 720px) { .lego-item { width: 130px; height: 130px; padding: 14px; } } html.light .lego-marquee-section { background: var(--bg-card-2); } html.light .lego-item { background: var(--bg-card); border-color: var(--line); } /* ==================== LEGO · 7:3 等高双图 (左大图上下裁切, 右小视频自然比例) ==================== */ .lego-hero-row { display: flex; gap: 16px; padding: 0 36px; margin-top: 28px; align-items: stretch; /* 关键: 两边等高 */ } .lego-hero-row .lh-cell { background: #111111; border-radius: 8px; overflow: hidden; line-height: 0; } /* 右: 视频驱动整行高度 (自然比例完整展示) */ .lego-hero-row .lh-right { flex: 0 0 calc(30% - 8px); } .lego-hero-row .lh-right video { width: 100%; height: auto; display: block; } /* 左: 占剩余 70%, 用 absolute 让 img 填满, 上下裁切对齐 */ .lego-hero-row .lh-left { flex: 1; position: relative; } .lego-hero-row .lh-left img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* 等高时上下裁切 */ display: block; } @media (max-width: 720px) { .lego-hero-row { flex-direction: column; padding: 0 18px; } .lego-hero-row .lh-right { flex: 0 0 auto; max-width: 60%; align-self: center; } .lego-hero-row .lh-left { aspect-ratio: 7 / 5; } } html.light .lego-hero-row .lh-cell { background: var(--bg-card-2); } /* ==================== TOKYO · 19+28 等高并排 (按宽高比分配宽度) ==================== */ .tokyo-pair { display: flex; gap: 14px; padding: 0 36px; margin-top: 28px; } .tokyo-pair .t-cell { background: #111111; border-radius: 6px; overflow: hidden; line-height: 0; min-width: 0; /* 允许 flex 项缩到合适宽度 */ } .tokyo-pair .t-cell video { width: 100%; height: auto; display: block; } /* tokyo_19 是 1200x390 (aspect 3.08), tokyo_28 是 400x400 (aspect 1.0) → 想等高: 19 占 3.08/4.08 ≈ 75.5%, 28 占 24.5% */ .tokyo-pair .t-19 { flex: 3.08; } .tokyo-pair .t-28 { flex: 1; } @media (max-width: 720px) { .tokyo-pair { flex-direction: column; padding: 0 18px; } .tokyo-pair .t-cell { flex: none; } } html.light .tokyo-pair .t-cell { background: #f5f5f5; } /* ==================== 错落布局 (Stagger) — 不同对齐+不同宽度，画刊感 ==================== */ .stagger-row { display: flex; gap: 14px; padding: 0 36px; margin-top: 28px; } .sr-left { justify-content: flex-start; } .sr-right { justify-content: flex-end; } .sr-center { justify-content: center; } .stagger-row > .si { line-height: 0; background: #111111; border-radius: 6px; overflow: hidden; } .stagger-row > .si img, .stagger-row > .si video { width: 100%; height: auto; display: block; } .si-35 { width: 35%; } .si-40 { width: 40%; } .si-45 { width: 45%; } .si-50 { width: 50%; } .si-55 { width: 55%; } .si-58 { width: 58%; } .si-60 { width: 60%; } .si-65 { width: 65%; } .si-70 { width: 70%; } .si-75 { width: 75%; } @media (max-width: 720px) { .stagger-row { padding: 0 18px; flex-direction: column; gap: 10px; } .stagger-row > .si { width: 100% !important; } } html.light .stagger-row > .si { background: #f5f5f5; } /* ==================== LEGO · 细节卡片 ==================== */ .lego-section-head { padding: 36px 36px 0; margin-top: 14px; } .lego-section-head .eyebrow { font-size: 10px; letter-spacing: 3px; color: var(--amber); font-weight: 700; margin-bottom: 10px; font-family: "JetBrains Mono", "MiSans", "Noto Sans SC", monospace; } .lego-section-head h3 { font-size: 18px; color: #e5e7eb; font-weight: 700; letter-spacing: 1.5px; margin-bottom: 8px; } .lego-section-head p { font-size: 13px; color: #888; line-height: 1.7; max-width: 560px; } .lego-details-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 0 36px; margin-top: 22px; } .detail-card { background: #0d0d0d; border: 1px solid #1a1a1a; border-radius: 14px; overflow: hidden; transition: border-color .25s, transform .25s; position: relative; } .detail-card:hover { border-color: var(--amber); transform: translateY(-3px); } .detail-card .pic { aspect-ratio: 5 / 4; /* 略矮 + 略宽，整体卡更紧凑 */ overflow: hidden; background: #111111; position: relative; } .detail-card .pic img { width: 100%; height: 100%; object-fit: cover; /* 撑满 */ display: block; } /* 数字徽章: 浮在图片下边缘正中 */ .detail-card .badge { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); width: 32px; height: 32px; border-radius: 50%; background: var(--amber); color: #1a1228; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; letter-spacing: 0.5px; font-family: "JetBrains Mono", "MiSans", "Noto Sans SC", monospace; box-shadow: 0 4px 10px rgba(0,0,0,0.45), 0 0 0 3px #0d0d0d; z-index: 2; } .detail-card .meta { padding: 22px 10px 14px; /* 收紧 padding */ text-align: center; } .detail-card .meta .title { font-size: 14px; color: #e5e7eb; font-weight: 700; margin-bottom: 4px; letter-spacing: 1px; white-space: nowrap; /* 标题不换行 */ } .detail-card .meta .desc { font-size: 11px; color: #888; line-height: 1.55; white-space: nowrap; /* 文案不换行 */ } @media (max-width: 720px) { .lego-details-grid { grid-template-columns: repeat(2, 1fr); padding: 0 18px; } .lego-section-head { padding: 28px 18px 0; } } html.light .lego-section-head h3 { color: #1a1a1a; } html.light .lego-section-head p { color: #555; } html.light .detail-card { background: #fafafa; border-color: #e2e2e2; } html.light .detail-card .pic { background: #f0f0f0; } html.light .detail-card .badge { box-shadow: 0 4px 12px rgba(0,0,0,0.15), 0 0 0 4px #fafafa; } html.light .detail-card .meta .title { color: #1a1a1a; } html.light .detail-card .meta .desc { color: #888; } /* ==================== 像素头像彩蛋 (canvas 渲染) ==================== 75×75 源图绘到 canvas, 每像素 = canvas fillRect, JS per-pixel 控制 alpha / offset 实现独立动画. data-fx="A/B/C" 切换出现方案. */ .pixel-avatar { position: absolute; top: 60px; right: 32px; width: 150px; height: 150px; pointer-events: none; z-index: 3; image-rendering: pixelated; /* canvas scale 时保持像素硬边 */ filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4)); } .name { cursor: pointer; user-select: none; } /* 出现后 1px 上移微抖动 (头像入场结束触发, 模拟"信号锁定"细节) */ @keyframes pa-settle-jitter { 0% { transform: translateY(0); } 35% { transform: translateY(-2px); } /* 1 source px × SCALE 2 = 2 display px = "上移 1 像素" */ 100% { transform: translateY(0); } } .pixel-avatar.jitter { animation: pa-settle-jitter 0.22s ease-out; } /* ==================== Lock-wide 布局 ==================== JS 在 viewport >= BREAKPOINT (1300px) 时给 加 .lock-wide + 写 --page-scale. 由于 file:// 协议下 stylesheet 是 cross-origin, JS 改不了 mediaText, 所以这里用 CSS Nesting 把 @media (min-width: 1700px) 内全部横屏规则镜像到 html.lock-wide 作用域, specificity 比 @media (max-width: 1699px) 内规则高一级 (多了 .lock-wide), 强制覆盖 退化样式. 然后在镜像块外覆盖 body/.page 的 lock-wide 专属属性 (fixed 居中 + scale). */ html.lock-wide { /* 宽屏下 body 弹性居中 .page; .page 用 92% 视口宽度 (col1=600 / col2=300 固定, col3 跟着加宽) */ body { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 12px 0; overflow: hidden; } .page { max-width: 92%; width: 92%; margin: 0 auto; display: grid; /* 列宽硬锁: col1=600 (丁旭杭 + 工作经历, +1/4) / col2=300 (AI 研究, -1/4) / col3=剩余 (往期项目) */ grid-template-columns: 600px 300px minmax(0, 1fr); /* page 锁死 88vh, 整页一屏可见, 不触发 window 滚动 */ height: 88vh; margin: 0 auto; padding: 6px; /* 让 section 角点 (-3.5px) 落进 padding 内, 不被 overflow:hidden 裁掉 */ overflow: hidden; /* profile / contact 按内容贴底, experience 占剩余, 让 3 段工作经历完整撑开 */ grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 12px; /* 横向同步竖向 row-gap */ row-gap: 12px; align-items: stretch; } /* profile / experience / contact 不内部滚动, 完整显示内容; 不要在 section 上加 overflow:hidden, 否则 -3.5px 偏移的角点小方块会被裁掉 */ .col-left > #experience { min-height: 0; } /* AI 跨 row 1-2; section 本身不裁(保留角点), 改在内部 .grid-3 上裁内容 */ .page > #ai { min-height: 0; padding: 88px 28px 22px; } #ai .grid-3 { overflow: visible; padding-right: 3px; padding-bottom: 3px; } /* —— 横屏专属紧凑度调整 —— profile 没有 .tag, 自由压缩; experience / contact 有 .tag (绝对定位, ~50px 高), 必须保留 padding-top 留位置, 否则 tag 会盖住正文 */ /* col1 现在 600, profile 整段高度 +1/3, padding 上下进一步加大 */ .col-left > #profile { padding: 44px 24px 24px; } /* experience: flex column flex-start, 三段按自然间距排; padding-top +40 让内容整体往下挪 */ .col-left > #experience { padding: 0; display: flex; flex-direction: column; } /* exp-inner 承载全部内边距和内容, overflow:hidden 裁掉超出外框的部分; corners 留在 section 层, 不受裁剪影响 */ .col-left > #experience .exp-inner { flex: 1; min-height: 0; overflow: hidden; padding: 116px 24px 14px; display: flex; flex-direction: column; } /* 联系方式: 高度比上一版 +1/4, padding/字号/gap 同步上调 */ .col-left > #contact { padding: 80px 24px 22px; } /* col1 = 600, profile 各行字号 / margin 全面上调, 整段高度 +1/3 */ .col-left > #profile .meta-label { margin-bottom: 18px; } /* name 字号沿用竖排默认 clamp(2.4rem, 7.5vw, 3.75rem), 仅设置 margin-bottom */ .col-left > #profile .name { margin-bottom: 16px; } .col-left > #profile .role { margin-bottom: 20px; font-size: var(--text-lg); } .col-left > #profile .bio { font-size: var(--text-base); line-height: 1.7; max-width: none; } /* —— 工作经历: 内部间距完全沿用竖排默认值, 横向只收紧 job-name 字号 —— */ /* 不覆写 job / job-head / job-role 的 margin / padding-bottom, 完全用 .job 默认 (padding-bottom: 22; .job-head margin-bottom: 4; .job-role margin-bottom: 14) */ .col-left > #experience .job-name { font-size: var(--text-xl); } /* 列表保持竖排默认: font-size sm, line-height 1.625 (.job-list li 默认值) — 不覆写 */ /* 联系方式: 单行 4 列, 字号 / 行距上调一档让整段更舒展 (高度 +1/4) */ .col-left > #contact .contact-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 22px; margin-top: 8px; } .col-left > #contact .contact-item .ci-label { margin-bottom: 8px; font-size: var(--text-base); } .col-left > #contact .contact-item .ci-value { font-size: var(--text-lg); } /* 字号放大: 补偿 lock-wide scale 缩放后正文可读性 */ .project-title { font-size: var(--text-lg); } .project-desc { font-size: var(--text-base); } .col-left > #experience .job-role { font-size: var(--text-base); } .col-left > #experience .job-list li { font-size: var(--text-base); } .col-left { display: contents; } .col-left > #profile { grid-column: 1 / 3; grid-row: 1; margin: 0; order: 0; } .col-left > #experience { grid-column: 1; grid-row: 2; margin: 0; order: 0; } /* 联系方式横跨 col 1 + col 2, 右边对齐 AI 的右边 */ .col-left > #contact { grid-column: 1 / 3; grid-row: 3; margin: 0; order: 0; } /* AI 跨 row 1-2, 底部对齐工作经历底部 */ .page > #ai { grid-column: 2; grid-row: 2; margin: 0; order: 0; align-self: stretch; } /* 往期项目跨全部 3 行, 一直延到联系方式底部 */ .page > #past { grid-column: 3; grid-row: 1 / 4; margin: 0; order: 0; align-self: stretch; } /* AI 内部: section 转 flex 列, grid-3 占满剩余高度, 3 张卡均分 row 1-2 高度 */ #ai { display: flex; flex-direction: column; } #ai .grid-3 { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; flex: 1; } /* AI 卡片缩略图改为弹性高度 — 自动适配 (col2 / 3 行) 剩余空间, 不再用 75% 固定比例 这样 col2 加宽后, 三张卡片仍刚好填满 AI 外框, 不会溢出也不会留白 */ #ai .grid-3 .thumb-frame { flex: 1; min-height: 0; margin-bottom: 0; /* 取消间距, 让 thumb 与 title 区无缝, 靠 mask 渐变过渡 */ } #ai .grid-3 .project-thumb { padding-bottom: 0; height: 100%; background: transparent; overflow: visible; /* mask 让 canvas 底部 30% 渐变淡入 .project 暗底, 视觉上动态内容"延伸"到 title/desc 区, 不再被 thumb 边界硬切; canvas 顶部完全显示, 底部与文字区无缝融合 */ -webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%); mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%); } /* 往期项目: section 转 flex 列, 三个分类按文档流上下排列, 整体 overflow-y: auto 内部滚动浏览. 不再用 absolute panel-stack + tab 切换, .past-tabs 隐藏, .sub-heading 显示作分类分隔 */ #past { display: flex; flex-direction: column; width: 100%; min-width: 0; } #past .past-subs { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; /* 滚到顶/底时不冒泡到 body, body overflow:hidden 会吞事件 */ width: 100%; scrollbar-width: none; /* Firefox: 隐藏滚动条 (仍可滚) */ -ms-overflow-style: none; /* IE / 老 Edge */ } #past .past-subs::-webkit-scrollbar { width: 0; height: 0; display: none; } #past .past-sub { display: block; } #past .past-sub .sub-heading { display: block; margin-top: 24px; } #past .past-sub:first-of-type .sub-heading { margin-top: 0; } #past .past-tabs { display: none; } } /* lock-wide 专属覆盖: 整页 transform: scale 等比缩放, fixed 居中 viewport */ html.lock-wide body { min-height: 100vh; padding: 0; overflow: hidden; } html.lock-wide .page { position: fixed; top: 50%; left: 50%; width: 2200px; max-width: 2200px; height: 1267px; margin: 0; transform: translate(-50%, -50%) scale(var(--page-scale, 1)); transform-origin: center center; } /* (旧 .hover-preview 浮窗版样式已删 — 新版 hover 视频改在卡片 .project-thumb 内播放, 样式由 JS 内联 (card-hover-video class), CSS 无需独立规则) */ /* ============================================================ * == 日间模式 v2 — 暖纸感色板 (覆盖上面的 v1 light 规则) == * 灵感: 工作室纸张 / 印刷品 / 建筑模型背板. 不用 #fff / #000, 全部 oklch 暖中性 * Three.js wireframe canvas 走 JS 适配 (检测 html.light 切 clearColor / lineColor) * ============================================================ */ html.light { --bg: #e8e3d8; /* 暖米灰底, 像纸张桌面 */ --bg-card: #faf6ec; /* 卡片明显更亮 (纸卡叠在桌上的感觉, 高反差) */ --bg-card-2: #f4efe2; /* 二级 (thumb / AI 卡子区 / past 项目卡) */ --ink: #2a2823; /* 主文 — 暖深棕, 不死黑 */ --ink-mid: #5c5852; --ink-soft: #8a857d; --line: #cbc4b5; --paper-shadow: rgba(60, 50, 30, 0.05); } html.light body { background: var(--bg); color: var(--ink); } /* 卡片 — 覆盖 .section 写死 #0d0d0d, 去 1px 彩色边 (.section::before) */ html.light .section { background: var(--bg-card); box-shadow: none; } /* (原 transparent !important 已删 — 亮模式 rest 边框跟暗模式一样, 也用 section class 染色) 已有的 html.light .section.cyan/violet/rose/amber::before 规则 (resume.css 上面) 接管 rest 颜色 */ /* 项目卡 (past amber/rose + AI grid-3) — 原写死 #1a1a1a / #0f0f0f */ html.light .section.amber .grid-3 > .project, html.light .section.amber .grid-4 > .project, html.light .section.rose .grid-4 > .project, html.light #ai .grid-3 .project { background: var(--bg-card-2); box-shadow: 2px 2px 0 rgba(60, 50, 30, 0.05); } html.light .section.amber .grid-3 > .project:hover, html.light .section.amber .grid-4 > .project:hover, html.light .section.rose .grid-4 > .project:hover { box-shadow: 2px 4px 0 rgba(60, 50, 30, 0.08); } html.light .project-thumb { background: var(--bg-card-2); } /* past 卡四角压暗 radial 渐变 — 亮模式不要 */ html.light .section.amber .project-thumb::after { background: none; } /* modal 详情子卡 */ html.light .detail-card { background: var(--bg-card); border-color: var(--line); } html.light .detail-card:hover { border-color: var(--amber); } /* past 滚动 hint 阴影 — 亮模式彻底去掉渐变, 只保留赭红文字 */ html.light #past .past-scroll-hint { padding-top: 18px; background: none; color: #8a5a1e; text-shadow: none; } html.light #past .past-scroll-arrow { opacity: 0.65; } /* 鼠标光斑 + section::after 表面光照 — 亮模式纸感不需要探照灯效果, 直接关 */ html.light .mouse-spotlight { display: none !important; } html.light .section::after { display: none !important; } /* 噪点层 — 极弱 + multiply, 否则像脏污 */ html.light .noise-layer { opacity: 0.045; mix-blend-mode: multiply; } /* body::before 虚线网格 — 暗模式浅白, 亮模式深色弱化 */ html.light body::before { background-image: url("data:image/svg+xml;utf8,"); } /* body::after 扫描线 — 亮模式暖弱化 */ html.light body::after { background-image: repeating-linear-gradient(0deg, transparent 0 2px, rgba(60,50,30,0.018) 2px 3px); } /* wireframe canvas + fallback img — clearColor 由 JS 适配, 这里只管 CSS 兜底 bg fallback img 用 data-light/data-dark 切真实亮模式 webp (applyTheme 在 head 早期就 swap), 不靠 filter */ html.light .wireframe-fallback { background: var(--bg-card-2); } html.light .wireframe-shader { background: var(--bg-card-2); } /* 文字色 — 从纯黑改成暖深棕系 */ html.light .meta-label { color: var(--ink-soft); } html.light .name { color: var(--ink); } html.light .role { color: var(--ink-mid); } html.light .tag .tag-en { color: var(--ink-mid); } html.light .tag .tag-cn { color: var(--ink); } html.light .ci-label { color: var(--ink-soft); } html.light .ci-value { color: var(--ink); } html.light .job-name, html.light .exp-title { color: var(--ink); } html.light .job-org, html.light .job-time { color: var(--ink-soft); } html.light .project-title { color: var(--ink); } html.light .project-desc { color: var(--ink-mid); } html.light .sub-heading { color: var(--ink); } /* corner 4 色点 — 亮底降饱和 + 去 glow */ html.light .section .corner { box-shadow: none; opacity: 0.78; } /* chip (卡片底部 "品牌设计" 等) — 暖暗灰底 + 深棕字, 与卡片米色形成 3 层明度差 */ html.light .chip { background: #dcd6c7; color: var(--ink); border-color: transparent; font-weight: 500; } /* spawn 窗口 (点击 past 卡弹出的) */ html.light .section.spawned { background: var(--bg-card); } html.light .section.spawned .spawn-header { background: var(--bg-card-2); border-bottom: 1px solid var(--line); color: var(--ink); } html.light .section.spawned .spawn-close { color: var(--ink-soft); border-color: var(--line); } html.light .section.spawned .spawn-close:hover { color: #8a5a1e; border-color: var(--amber); } /* modal 详情页文字 (resume.css 已有部分 light, 这里覆盖 + 补漏) */ html.light .modal-title { color: var(--ink); font-weight: 400; } html.light .modal-meta-item .mk { color: var(--ink-soft); } html.light .modal-meta-item .mv { color: var(--ink); } html.light .modal-desc { color: var(--ink-mid); } html.light .modal-bar-left .mbl-title { color: var(--ink); } html.light .modal-bar-left .mbl-sub { color: var(--ink-soft); } html.light .modal-section-head .title { color: var(--ink); } html.light .modal-section-head .num { color: var(--ink-soft); } html.light .modal-section-head .line { background: var(--line); } html.light .modal-eyebrow { color: #8a5a1e; } html.light .modal-eyebrow::before { background: #8a5a1e; } html.light .modal-tag { background: var(--bg-card); color: var(--ink-mid); border-color: var(--line); } html.light .modal-hero { border-bottom-color: var(--line); } html.light .modal-hero-right { border-left-color: var(--line); border-top-color: var(--line); } html.light .modal-close { color: var(--ink-mid); border-color: var(--line); } /* 各种漏的写死浅色 (亮模式下浅字 + 浅底 = 隐形) */ html.light .zodiac-item .name { color: var(--ink); } html.light .zodiac-item .name .en { color: var(--ink-soft); } html.light .wp-cell .wp-label { color: var(--ink); background: rgba(255,255,255,0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } html.light .lego-section-head h3 { color: var(--ink); } html.light .lego-section-head p { color: var(--ink-mid); } html.light .detail-card .meta .title { color: var(--ink); } html.light .detail-card .meta .desc { color: var(--ink-mid); } html.light .section.amber:hover .past-tab.active { color: #8a5a1e; } /* 入场拖拽十字 — amber 在亮底 OK, glow 缩小 */ html.light .entrance-drag-cursor::before, html.light .entrance-drag-cursor::after { box-shadow: 0 0 4px rgba(160, 110, 30, 0.4); } /* lock-wide 拖拽 section 阴影 — 跟项目卡片 hover 阴影同款 (硬边 offset, 无 blur, 暖灰). ⚠ html 不能是 html 的后代, 之前写 "html.light html.lock-wide" 死规则不生效; 用 html.light.lock-wide (同一元素双 class) 或单独 html.light 即可 */ html.light .section.dragging { box-shadow: 2px 4px 0 rgba(60, 50, 30, 0.08) !important; } /* ============================================================ * 主题切换过渡 — PIXELATE 方案 * 流程: 加 theme-transitioning + pixelating → blur 升起 → 280ms 翻 html.light → 300ms 移除 pixelating → * blur 退回 0; 期间 body + 所有子元素的 bg/color/border/fill/stroke 都缓动 0.55s * 整页 blur 包住黑白色变化, 没有硬切感 * ============================================================ */ body.theme-transitioning { transition: filter 0.55s ease, transform 0.55s ease, background 0.55s ease, color 0.55s ease; } body.theme-transitioning *, body.theme-transitioning *::before, body.theme-transitioning *::after { transition: background-color 0.55s ease, background 0.55s ease, color 0.55s ease, border-color 0.55s ease, fill 0.55s ease, stroke 0.55s ease, box-shadow 0.55s ease !important; } body.theme-transitioning.pixelating { filter: blur(10px) saturate(0.55) contrast(0.82); transform: scale(1.015); }