/* ======================================== 张千羽 Andy Zhang — Personal Site Themes: copper / indigo (dark) · frost / mist (light) — 切换见 [data-palette] ======================================== */ /* ===================================================== THEME TOKENS —— 语义变量。四套配色只改这些，其余样式全部引用别名 ===================================================== */ :root { /* 深色底 · 回退用。站点默认主题是 [data-palette="frost"]（霜 · 象牙纸）， 写在 标签上；此处的 :root 值仅在属性缺失时兜底。 */ --bg-rgb: 10, 14, 12; --bg-0: #0a0e0c; --bg-1: #0f1512; --bg-2: #141c18; --bg-3: #1b2520; --bg-4: #26322c; --accent-rgb: 216, 162, 122; --accent: #d8a27a; --accent-bright: #f0c39c; --accent-dim: #9a6f4e; --second-rgb: 143, 196, 168; --second: #8fc4a8; --fg-rgb: 240, 236, 228; --fg: #f0ece4; --fg-muted: #b3ada2; --fg-dim: #77716a; --shadow-rgb: 0, 0, 0; --mesh-1: rgba(216, 162, 122, 0.22); --mesh-2: rgba(143, 196, 168, 0.14); --mesh-3: rgba(120, 90, 200, 0.10); /* ---- 别名：兼容原有样式 ---- */ --ink-900: var(--bg-0); --ink-850: var(--bg-1); --ink-800: var(--bg-2); --ink-700: var(--bg-3); --ink-600: var(--bg-4); --gold: var(--accent); --gold-bright: var(--accent-bright); --gold-dim: var(--accent-dim); --gold-glow: rgba(var(--accent-rgb), 0.13); --mint: var(--second); --mint-glow: rgba(var(--second-rgb), 0.12); --bone: var(--fg); --bone-muted: var(--fg-muted); --bone-dim: var(--fg-dim); --border: rgba(var(--fg-rgb), 0.09); --border-strong: rgba(var(--fg-rgb), 0.18); --font-sans: 'Inter', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif; --font-serif: 'Noto Serif SC', Georgia, serif; --font-mono: 'JetBrains Mono', 'SF Mono', monospace; --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --max-w: 1240px; } /* 靛 · 石墨：冷调科技感，靛蓝紫 + 珊瑚点缀 */ [data-palette="indigo"] { --bg-rgb: 9, 10, 15; --bg-0: #090a0f; --bg-1: #0e1017; --bg-2: #13161f; --bg-3: #1a1e2a; --bg-4: #252a38; --accent-rgb: 139, 140, 255; --accent: #8b8cff; --accent-bright: #b4b5ff; --accent-dim: #5d5ec4; --second-rgb: 255, 138, 112; --second: #ff8a70; --fg-rgb: 236, 238, 245; --fg: #eceef5; --fg-muted: #a9adbb; --fg-dim: #6d7182; --mesh-1: rgba(139, 140, 255, 0.24); --mesh-2: rgba(255, 138, 112, 0.12); --mesh-3: rgba(60, 200, 220, 0.10); } /* 雾 · 青灰：冷调浅色，克莱因蓝 + 琥珀点缀 */ [data-palette="mist"] { --bg-rgb: 240, 243, 247; --bg-0: #f0f3f7; --bg-1: #e8ecf3; --bg-2: #dfe5ee; --bg-3: #d2dae6; --bg-4: #bfc9d9; --accent-rgb: 37, 78, 214; --accent: #254ed6; --accent-bright: #4a70ee; --accent-dim: #1b3a9e; --second-rgb: 200, 116, 26; --second: #c8741a; --fg-rgb: 16, 22, 33; --fg: #101621; --fg-muted: #454f60; --fg-dim: #7c8698; --shadow-rgb: 20, 32, 56; --mesh-1: rgba(37, 78, 214, 0.13); --mesh-2: rgba(200, 116, 26, 0.10); --mesh-3: rgba(90, 200, 220, 0.14); } /* 霜 · 象牙纸：浅色编辑风，墨黑 + 朱红 */ [data-palette="frost"] { --bg-rgb: 245, 242, 235; --bg-0: #f5f2eb; --bg-1: #efebe2; --bg-2: #e8e3d8; --bg-3: #ded8cb; --bg-4: #d0c9ba; --accent-rgb: 217, 72, 28; --accent: #d9481c; --accent-bright: #ef6a3c; --accent-dim: #a8391a; --second-rgb: 15, 118, 110; --second: #0f766e; --fg-rgb: 20, 18, 16; --fg: #141210; --fg-muted: #4d4843; --fg-dim: #857e76; --shadow-rgb: 40, 30, 20; --mesh-1: rgba(217, 72, 28, 0.14); --mesh-2: rgba(15, 118, 110, 0.10); --mesh-3: rgba(255, 200, 80, 0.16); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--ink-900); color: var(--bone); font-family: var(--font-sans); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } ::selection { background: var(--gold); color: var(--ink-900); } a { color: inherit; text-decoration: none; } /* ===== 环境层：噪点 + 暖光 ===== */ .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); } .glow { position: fixed; border-radius: 50%; filter: blur(130px); pointer-events: none; z-index: 0; } .glow-1 { width: 620px; height: 620px; top: -220px; right: -160px; background: radial-gradient(circle, rgba(var(--accent-rgb),0.12), transparent 68%); } .glow-2 { width: 540px; height: 540px; bottom: 8%; left: -200px; background: radial-gradient(circle, rgba(var(--second-rgb),0.07), transparent 68%); } /* ===== NAV ===== */ #nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 1.25rem clamp(1.25rem, 5vw, 4rem); backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8); background: rgba(var(--bg-rgb), 0.75); border-bottom: 1px solid transparent; transition: all 0.4s var(--ease); } #nav.scrolled { border-bottom-color: var(--border-strong); padding-top: 0.875rem; padding-bottom: 0.875rem; background: rgba(var(--bg-rgb), 0.92); box-shadow: 0 4px 32px rgba(var(--shadow-rgb),0.24), 0 2px 8px rgba(var(--shadow-rgb),0.16); } .nav-logo { font-family: var(--font-serif); font-size: 1.125rem; font-weight: 700; letter-spacing: 0.06em; } .nav-logo::after { content: ''; display: block; height: 2px; width: 0; background: var(--gold); transition: width 0.35s var(--ease); } .nav-logo:hover::after { width: 100%; } .nav-links { display: flex; gap: 2rem; font-size: 0.875rem; color: var(--bone-muted); } .nav-links a { position: relative; transition: color 0.25s; } .nav-links a::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: var(--gold); transition: width 0.3s var(--ease); } .nav-links a:hover { color: var(--bone); } .nav-links a:hover::after { width: 100%; } .nav-links a.active { color: var(--gold); } .lang-toggle { font-family: var(--font-mono); font-size: 0.75rem; background: transparent; color: var(--bone-muted); border: 1px solid var(--border-strong); padding: 0.375rem 0.75rem; border-radius: 5px; cursor: pointer; letter-spacing: 0.08em; transition: all 0.25s var(--ease); } .lang-toggle:hover { color: var(--ink-900); background: var(--gold); border-color: var(--gold); } /* ===== LAYOUT ===== */ main { position: relative; z-index: 2; } .section { max-width: var(--max-w); margin: 0 auto; padding: clamp(5rem, 11vw, 9rem) clamp(1.25rem, 5vw, 4rem); } .section-head { margin-bottom: 3.5rem; } .section-num { display: block; font-family: var(--font-mono); font-size: 0.75rem; color: var(--gold); letter-spacing: 0.22em; margin-bottom: 0.875rem; } .section-head h2 { font-family: var(--font-serif); font-size: clamp(1.875rem, 4.5vw, 3rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; } .section-sub { margin-top: 1rem; max-width: 62ch; color: var(--bone-muted); font-size: 1.0625rem; } /* ===== HERO ===== */ .hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; max-width: var(--max-w); margin: 0 auto; padding: 7rem clamp(1.25rem, 5vw, 4rem) 4rem; position: relative; } /* Hero 视差层 —— 滚动时轻微位移 */ .hero > * { transform: translateY(0); transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .hero-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--gold); letter-spacing: 0.1em; margin-bottom: 1.75rem; padding: 0.4375rem 0.875rem; border: 1px solid var(--gold-dim); border-radius: 100px; background: var(--gold-glow); width: fit-content; } .hero-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 0 var(--mint); animation: pulse 2.4s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--second-rgb),0.55); } 70% { box-shadow: 0 0 0 9px rgba(var(--second-rgb),0); } 100% { box-shadow: 0 0 0 0 rgba(var(--second-rgb),0); } } .hero-name { font-family: var(--font-serif); line-height: 1; letter-spacing: -0.03em; margin-bottom: 2rem; display: flex; flex-direction: column; } .hero-name-zh { display: block; font-size: clamp(3.75rem, 13vw, 9rem); line-height: 0.94; font-weight: 700; background: linear-gradient(135deg, var(--bone) 20%, var(--gold-bright) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero-name-en { display: inline-flex; align-items: center; gap: 1rem; font-family: var(--font-sans); font-size: clamp(0.9375rem, 2.4vw, 1.5rem); font-weight: 300; letter-spacing: 0.32em; line-height: 1.2; color: var(--bone-muted); margin-top: 1.25rem; text-transform: uppercase; } .hero-name-en::before { content: ''; width: 2.5rem; height: 1px; background: var(--gold); flex: none; } .hero-tagline { font-size: clamp(1.0625rem, 2.2vw, 1.5rem); color: var(--bone-muted); max-width: 40ch; line-height: 1.55; margin-bottom: 2rem; } .hero-tagline strong { color: var(--bone); font-weight: 600; } .hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; font-size: 0.9375rem; color: var(--bone-dim); margin-bottom: 2.75rem; } .hero-meta .dot { color: var(--gold-dim); } .hero-cta { display: flex; flex-wrap: wrap; gap: 0.875rem; } .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8125rem 1.5rem; border-radius: 8px; font-size: 0.9375rem; font-weight: 500; transition: all 0.35s var(--ease); border: 1px solid transparent; position: relative; overflow: hidden; } .btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(var(--fg-rgb),0.1), transparent); opacity: 0; transition: opacity 0.35s var(--ease); } .btn:hover::before { opacity: 1; } .btn svg { width: 15px; height: 15px; transition: transform 0.35s var(--ease); } .btn-primary { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%); color: var(--ink-900); font-weight: 600; box-shadow: 0 2px 8px rgba(var(--accent-rgb),0.15); } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(var(--accent-rgb),0.32), 0 4px 12px rgba(var(--accent-rgb),0.18); } .btn-primary:active { transform: translateY(-1px); } .btn-primary:hover svg { transform: translateX(5px); } .btn-ghost { border-color: var(--border-strong); color: var(--bone-muted); backdrop-filter: blur(8px); } .btn-ghost:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-glow); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(var(--accent-rgb),0.12); } .hero-scroll { position: absolute; bottom: 2.5rem; left: clamp(1.25rem, 5vw, 4rem); display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--bone-dim); letter-spacing: 0.16em; text-transform: uppercase; } .scroll-line { width: 52px; height: 1px; background: var(--border-strong); position: relative; overflow: hidden; } .scroll-line::after { content: ''; position: absolute; inset: 0; background: var(--gold); animation: slide 2.1s var(--ease) infinite; } @keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* ===== STATS (bento) ===== */ .stats { max-width: var(--max-w); margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 4rem); } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } .stat { background: var(--ink-850); padding: 2rem 1.75rem; transition: background 0.3s var(--ease); position: relative; } .stat:hover { background: var(--ink-800); } .stat::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); } .stat:hover::after { transform: scaleX(1); } .stat-num { font-family: var(--font-mono); font-size: clamp(1.875rem, 4vw, 2.75rem); font-weight: 500; line-height: 1; color: var(--gold-bright); margin-bottom: 0.625rem; letter-spacing: -0.02em; } .stat-label { font-size: 0.8125rem; color: var(--bone-dim); line-height: 1.45; } /* ===== RAILROAD TIMELINE ===== */ .timeline { position: relative; padding-left: 2.25rem; } .timeline::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dim) 35%, var(--border) 100%); } .timeline-item { position: relative; padding-bottom: 3rem; } .timeline-item:last-child { padding-bottom: 0; } /* 铁轨枕木 —— 节点 */ .timeline-item::before { content: ''; position: absolute; left: -2.25rem; top: 0.5rem; width: 16px; height: 16px; border-radius: 50%; background: var(--ink-900); border: 2px solid var(--gold-dim); transition: all 0.32s var(--ease); z-index: 2; } .timeline-item:hover::before { border-color: var(--gold); box-shadow: 0 0 0 5px var(--gold-glow); transform: scale(1.15); } .timeline-item.current::before { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 5px var(--gold-glow); } .timeline-period { font-family: var(--font-mono); font-size: 0.75rem; color: var(--gold); letter-spacing: 0.08em; margin-bottom: 0.5rem; } .timeline-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.625rem; margin-bottom: 0.375rem; } .timeline-company { font-family: var(--font-serif); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; } a.timeline-company.clickable { color: inherit; text-decoration: none; border-bottom: 1px solid var(--gold-dim); padding-bottom: 1px; transition: color .2s ease, border-color .2s ease; } a.timeline-company.clickable::after { content: '↗'; font-family: var(--font-mono); font-size: .75em; margin-left: .3em; color: var(--gold-dim); vertical-align: super; transition: color .2s ease; } a.timeline-company.clickable:hover, a.timeline-company.clickable:hover::after { color: var(--gold); } a.timeline-company.clickable:hover { border-color: var(--gold); } .timeline-role { font-size: 0.9375rem; color: var(--bone-muted); } .timeline-role::before { content: '/ '; color: var(--gold-dim); } .timeline-loc { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--bone-dim); letter-spacing: 0.06em; margin-bottom: 0.875rem; } .timeline-highlights { list-style: none; } .timeline-highlights li { position: relative; padding-left: 1.125rem; font-size: 0.9375rem; color: var(--bone-muted); line-height: 1.7; margin-bottom: 0.4375rem; } .timeline-highlights li::before { content: ''; position: absolute; left: 0; top: 0.7em; width: 5px; height: 1px; background: var(--gold-dim); } .timeline-highlights li strong { color: var(--mint); font-weight: 600; font-family: var(--font-mono); font-size: 0.9em; } /* ===== PROJECTS ===== */ .project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1.5rem; } .project-card { background: var(--ink-850); border: 1px solid var(--border); border-radius: 14px; padding: 1.875rem; position: relative; overflow: hidden; transition: all 0.34s var(--ease); display: flex; flex-direction: column; } .project-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 88% 6%, var(--gold-glow), transparent 62%); opacity: 0; transition: opacity 0.34s var(--ease); } .project-card:hover { border-color: var(--gold-dim); transform: translateY(-5px); box-shadow: 0 16px 40px rgba(var(--shadow-rgb),0.45); } .project-card:hover::before { opacity: 1; } .project-card.featured { grid-column: span 2; background: linear-gradient(135deg, var(--ink-800), var(--ink-850)); border-color: var(--border-strong); } @media (max-width: 780px) { .project-card.featured { grid-column: span 1; } } .project-card-inner { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; } .project-tags { display: flex; flex-wrap: wrap; gap: 0.4375rem; margin-bottom: 1rem; } .project-tag { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--gold); background: var(--gold-glow); border: 1px solid rgba(var(--accent-rgb),0.22); padding: 0.1875rem 0.5625rem; border-radius: 4px; letter-spacing: 0.05em; } .project-name { font-family: var(--font-serif); font-size: 1.3125rem; font-weight: 700; margin-bottom: 0.375rem; line-height: 1.3; } .project-company { font-family: var(--font-mono); font-size: 0.75rem; color: var(--bone-dim); margin-bottom: 0.875rem; letter-spacing: 0.05em; } .project-desc { font-size: 0.9375rem; color: var(--bone-muted); line-height: 1.68; margin-bottom: 1.375rem; flex-grow: 1; } /* ===== CASE STUDY (featured 卡内嵌) ===== */ .case { display: grid; gap: 1.5rem; padding: 1.5rem 0 0.25rem; margin-bottom: 0.5rem; border-top: 1px solid var(--border); } @media (min-width: 900px) { .case { grid-template-columns: 1fr 1.35fr 1fr; gap: 2rem; } } .case-label { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--gold); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0.625rem; padding-bottom: 0.4375rem; border-bottom: 1px solid var(--border); } .case-text { font-size: 0.875rem; color: var(--bone-muted); line-height: 1.7; } .case-text strong, .case-list strong { color: var(--mint); font-family: var(--font-mono); font-size: 0.94em; font-weight: 500; } .case-list { list-style: none; } .case-list li { position: relative; padding-left: 1.375rem; font-size: 0.875rem; color: var(--bone-muted); line-height: 1.65; margin-bottom: 0.75rem; counter-increment: caseitem; } .case-list { counter-reset: caseitem; } .case-list li::before { content: counter(caseitem); position: absolute; left: 0; top: 0.15em; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--gold-dim); width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--border-strong); display: grid; place-items: center; } /* 占位卡 —— 明确标出"框架已就位" */ .project-card.placeholder { border-style: dashed; border-color: var(--border-strong); background: transparent; } .project-card.placeholder .project-name { color: var(--bone-dim); } .project-card.placeholder:hover { border-color: var(--gold-dim); transform: translateY(-3px); box-shadow: none; } .project-metrics { display: flex; flex-wrap: wrap; gap: 1.25rem; padding-top: 1.125rem; margin-bottom: 1.25rem; border-top: 1px solid var(--border); } .project-metric { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--mint); } .project-links { display: flex; gap: 1.125rem; } .project-link { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 500; color: var(--gold); transition: gap 0.25s var(--ease); } .project-link svg { width: 14px; height: 14px; } .project-link:hover { gap: 0.625rem; color: var(--gold-bright); } .project-link.muted { color: var(--bone-dim); } .project-link.muted:hover { color: var(--bone-muted); } .project-soon { font-family: var(--font-mono); font-size: 0.75rem; color: var(--bone-dim); letter-spacing: 0.06em; } /* ===== AWARDS ===== */ .award-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; } .award-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1.375rem 1.5rem; background: var(--ink-850); border: 1px solid var(--border); border-left: 2px solid var(--gold-dim); border-radius: 10px; transition: all 0.3s var(--ease); } .award-item:hover { border-left-color: var(--gold); background: var(--ink-800); transform: translateX(4px); } .award-icon { font-size: 1.25rem; line-height: 1.2; } .award-name { font-weight: 600; font-size: 0.9375rem; margin-bottom: 0.25rem; } .award-meta { font-family: var(--font-mono); font-size: 0.75rem; color: var(--bone-dim); } /* ===== SKILLS ===== */ .skill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; } .skill-category { background: var(--ink-850); border: 1px solid var(--border); border-radius: 12px; padding: 1.625rem; transition: border-color 0.3s var(--ease); } .skill-category:hover { border-color: var(--gold-dim); } .skill-cat-name { font-family: var(--font-mono); font-size: 0.75rem; color: var(--gold); letter-spacing: 0.13em; margin-bottom: 1.125rem; text-transform: uppercase; } .skill-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; } .skill-tag { font-size: 0.8125rem; color: var(--bone-muted); background: var(--ink-700); padding: 0.375rem 0.75rem; border-radius: 5px; border: 1px solid transparent; transition: all 0.25s var(--ease); } .skill-tag:hover { color: var(--bone); border-color: var(--gold-dim); transform: translateY(-2px); } /* ===== CONTACT ===== */ .contact { text-align: center; padding-bottom: clamp(6rem, 12vw, 10rem); } .contact .section-num { text-align: center; } .contact-title { font-family: var(--font-serif); font-size: clamp(2.25rem, 7vw, 4.5rem); font-weight: 700; line-height: 1.05; margin-bottom: 1.25rem; background: linear-gradient(135deg, var(--bone), var(--gold-bright)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .contact-sub { color: var(--bone-muted); font-size: 1.0625rem; max-width: 46ch; margin: 0 auto 3rem; } .contact-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; } .contact-item { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.5rem; background: var(--ink-850); border: 1px solid var(--border); border-radius: 10px; transition: all 0.3s var(--ease); cursor: pointer; } .contact-item:hover { border-color: var(--gold); background: var(--gold-glow); transform: translateY(-3px); } .contact-icon { font-size: 1.125rem; } .contact-label { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--bone-dim); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.1875rem; } .contact-value { font-size: 0.9375rem; font-weight: 500; font-family: var(--font-mono); } .contact-text { text-align: left; } .copy-hint { font-family: var(--font-mono); font-size: 0.625rem; color: var(--mint); opacity: 0; transition: opacity 0.25s; } .contact-item.copied .copy-hint { opacity: 1; } /* ===== FOOTER ===== */ footer { position: relative; z-index: 2; max-width: var(--max-w); margin: 0 auto; padding: 2.25rem clamp(1.25rem, 5vw, 4rem); border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; font-size: 0.8125rem; color: var(--bone-dim); } .footer-note { font-family: var(--font-mono); font-size: 0.75rem; } /* ===== REVEAL ANIMATION ===== */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out); } .reveal.visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition-duration: 0.01ms !important; } .reveal { opacity: 1; transform: none; } } /* ===== RESPONSIVE ===== */ @media (max-width: 720px) { .nav-links { display: none; } .hero-meta { font-size: 0.875rem; gap: 0.5rem; } .hero-scroll { display: none; } .timeline { padding-left: 1.75rem; } .timeline-item::before { left: -1.75rem; width: 13px; height: 13px; } .timeline::before { left: 6px; } .project-grid, .skill-grid { grid-template-columns: 1fr; } .contact-grid { flex-direction: column; } .contact-item { justify-content: flex-start; } } /* ===================================================== POLISH LAYER v3 —— 动效与细节打磨 ===================================================== */ /* --- 顶部滚动进度条 --- */ .scroll-progress { position: fixed; top: 0; left: 0; z-index: 101; height: 2px; width: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold), var(--gold-bright)); transform-origin: left; transform: scaleX(var(--progress, 0)); pointer-events: none; } /* --- 鼠标聚光灯 --- */ .spotlight { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 30%), rgba(var(--accent-rgb),0.07), transparent 55%); transition: opacity 0.6s var(--ease); } @media (hover: none) { .spotlight { display: none; } } /* --- Hero 入场：逐行上滑 --- */ .hero-inner { will-change: transform, opacity; } .hero .reveal { transition-duration: 1s; } .hero-name.reveal:not(.visible) { transform: translateY(40px); } .hero-name-zh { background-size: 200% 200%; animation: goldShift 9s ease-in-out infinite; } @keyframes goldShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* --- 公司跑马灯 --- */ .marquee { max-width: var(--max-w); margin: 3rem auto 2rem; padding: 0 clamp(1.25rem, 5vw, 4rem); } .marquee-track { position: relative; overflow: hidden; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 1.125rem 0; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .marquee-inner { display: flex; gap: 3.5rem; width: max-content; animation: marquee 38s linear infinite; } .marquee-track:hover .marquee-inner { animation-play-state: paused; } .marquee-item { display: inline-flex; align-items: center; gap: 3.5rem; font-family: var(--font-serif); font-size: 1.125rem; font-weight: 600; color: var(--bone-dim); letter-spacing: 0.04em; white-space: nowrap; transition: color 0.3s var(--ease); } .marquee-item::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-dim); flex: none; } .marquee-item:hover { color: var(--gold); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* --- 章节编号：巨大水印 --- */ .section-head { position: relative; } .section-head::before { content: attr(data-num); position: absolute; right: 0; top: -1.5rem; font-family: var(--font-serif); font-weight: 700; font-size: clamp(6rem, 14vw, 11rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(var(--fg-rgb),0.06); pointer-events: none; user-select: none; letter-spacing: -0.04em; } /* --- 时间线条目 hover --- */ .timeline-item { transition: transform 0.4s var(--ease); } .timeline-item:hover { transform: translateX(6px); } .timeline-item:hover .timeline-company { color: var(--gold); } .timeline-company { transition: color 0.3s var(--ease); } /* --- 项目卡：鼠标追踪边缘高光 + 3D 倾斜 --- */ .project-grid { perspective: 1400px; } .project-card { transform-style: preserve-3d; transition: transform 0.18s ease-out, border-color 0.34s var(--ease), box-shadow 0.34s var(--ease); } .project-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: radial-gradient(380px circle at var(--cx, 50%) var(--cy, 50%), rgba(var(--accent-rgb),0.55), transparent 45%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.34s var(--ease); } .project-card:hover::after { opacity: 1; } .project-card::before { background: radial-gradient(420px circle at var(--cx, 88%) var(--cy, 6%), rgba(var(--accent-rgb),0.10), transparent 60%); } .project-card.placeholder::after { display: none; } /* --- 项目卡内部：结果指标脉冲下划线 --- */ .project-metric { position: relative; } .project-metric::after { content: ''; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px; background: var(--mint); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); } .project-card:hover .project-metric::after { transform: scaleX(1); } /* --- Stat 数字 tabular，避免跳动 --- */ .stat-num { font-variant-numeric: tabular-nums; } .stat { overflow: hidden; } .stat::before { content: ''; position: absolute; inset: 0; background: radial-gradient(300px circle at var(--cx, 50%) var(--cy, 50%), rgba(var(--accent-rgb),0.08), transparent 55%); opacity: 0; transition: opacity 0.3s var(--ease); pointer-events: none; } .stat:hover::before { opacity: 1; } /* --- 联系区：大标题描边动画 --- */ .contact-title { position: relative; display: inline-block; } .contact-title::after { content: ''; position: absolute; left: 0; bottom: 0.08em; width: 100%; height: 0.12em; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease) 0.25s; opacity: 0.85; z-index: -1; } .reveal.visible .contact-title::after { transform: scaleX(1); } /* --- 页脚顶部渐变分隔 --- */ footer { position: relative; } footer::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(60%, 520px); height: 1px; background: linear-gradient(90deg, transparent, var(--gold-dim), transparent); } /* --- reduce motion --- */ @media (prefers-reduced-motion: reduce) { .marquee-inner, .hero-name-zh { animation: none !important; } .spotlight { display: none; } .project-card { transform: none !important; } } /* ===================================================== LAYER v4 —— 主题系统 / 首屏 mesh / 双轨跑马灯 / 可展开时间线 ===================================================== */ /* --- 主题过渡：切换配色时全站平滑 --- */ html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: background-color 0.5s var(--ease), color 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease) !important; } /* --- 首屏：动态 mesh 渐变，向下滚动时淡出并让位给纯底色 --- */ .hero-mesh { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; opacity: calc(1 - var(--hero-fade, 0)); transform: translateY(calc(var(--hero-fade, 0) * -80px)); will-change: opacity, transform; } .hero-mesh::before, .hero-mesh::after, .hero-mesh .mesh-c { content: ''; position: absolute; border-radius: 50%; filter: blur(90px); mix-blend-mode: screen; animation: meshDrift 22s ease-in-out infinite alternate; } [data-palette="frost"] .hero-mesh::before, [data-palette="mist"] .hero-mesh::before, [data-palette="frost"] .hero-mesh::after, [data-palette="mist"] .hero-mesh::after, [data-palette="frost"] .hero-mesh .mesh-c { mix-blend-mode: multiply; } [data-palette="mist"] .hero-mesh .mesh-c { mix-blend-mode: multiply; } .hero-mesh::before { width: 62vw; height: 62vw; max-width: 900px; max-height: 900px; top: -18vw; right: -14vw; background: radial-gradient(circle, var(--mesh-1), transparent 62%); } .hero-mesh::after { width: 48vw; height: 48vw; max-width: 720px; max-height: 720px; bottom: -10vw; left: -10vw; background: radial-gradient(circle, var(--mesh-2), transparent 62%); animation-delay: -8s; animation-duration: 28s; } .hero-mesh .mesh-c { width: 36vw; height: 36vw; max-width: 560px; max-height: 560px; top: 30%; left: 38%; background: radial-gradient(circle, var(--mesh-3), transparent 62%); animation-delay: -15s; animation-duration: 34s; } @keyframes meshDrift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-4%, 5%, 0) scale(1.08); } 100% { transform: translate3d(5%, -3%, 0) scale(0.96); } } /* 首屏底部到正文：一层从透明到底色的渐变，让 mesh 「沉」进页面 */ .hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 38vh; background: linear-gradient(180deg, transparent, var(--bg-0)); pointer-events: none; z-index: -1; } /* 细网格：极淡，给首屏一点结构感 */ .hero-grid { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(var(--fg-rgb), 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--fg-rgb), 0.035) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 100%); opacity: calc(1 - var(--hero-fade, 0)); } /* 名字：从主题 fg 到 accent-bright 的渐变 */ .hero-name-zh { background: linear-gradient(135deg, var(--fg) 15%, var(--accent-bright) 70%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 200%; } [data-palette="frost"] .hero-name-zh, [data-palette="mist"] .hero-name-zh { background: linear-gradient(135deg, var(--fg) 30%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 200%; } /* --- 双轨跑马灯 --- */ .marquee { margin: 3.5rem auto 2.5rem; } .marquee-track { padding: 0.875rem 0; } .marquee-track-a { border-bottom: none; } .marquee-track-b { border-top: 1px dashed var(--border); } .marquee-inner { gap: 3rem; animation-duration: 42s; } .marquee-inner-rev { animation: marqueeRev 56s linear infinite; } @keyframes marqueeRev { from { transform: translateX(-50%); } to { transform: translateX(0); } } .marquee-item { gap: 0.75rem; letter-spacing: 0.02em; } .marquee-item::after { margin-left: 2.25rem; } .marquee-main { font-family: var(--font-serif); font-size: 1.125rem; font-weight: 600; color: var(--fg-muted); transition: color .3s var(--ease); } .marquee-meta { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--fg-dim); padding: 0.2rem 0.5rem; border: 1px solid var(--border); border-radius: 100px; transition: all .3s var(--ease); } .marquee-item:hover .marquee-main { color: var(--accent); } .marquee-item:hover .marquee-meta { color: var(--accent); border-color: var(--accent-dim); } .marquee-item-sm { font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 500; color: var(--fg-dim); letter-spacing: 0.06em; text-transform: uppercase; } .marquee-item-sm::after { width: 3px; height: 3px; background: var(--fg-dim); opacity: .6; } .marquee-item-sm:hover { color: var(--second); } /* --- 时间线：可点击展开 --- */ .timeline-head { background: none; border: 0; padding: 0; text-align: left; color: inherit; font: inherit; cursor: default; width: 100%; } .timeline-toggle { cursor: pointer; } .timeline-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; } .timeline-expand-hint { display: inline-flex; align-items: center; gap: 0.375rem; margin-left: auto; align-self: center; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; color: var(--fg-dim); padding: 0.3rem 0.625rem; border: 1px solid var(--border); border-radius: 100px; transition: all .3s var(--ease); white-space: nowrap; } .timeline-expand-hint svg { width: 12px; height: 12px; transition: transform .35s var(--ease); } .timeline-item.expandable:hover .timeline-expand-hint { color: var(--accent); border-color: var(--accent-dim); } .timeline-item.open .timeline-expand-hint { color: var(--bg-0); background: var(--accent); border-color: var(--accent); } .timeline-item.open .timeline-expand-hint svg { transform: rotate(180deg); } .timeline-item.open::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 5px var(--gold-glow); } .timeline-works { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--ease); } .timeline-item.open .timeline-works { grid-template-rows: 1fr; } .timeline-works-inner { overflow: hidden; min-height: 0; opacity: 0; transform: translateY(-6px); transition: opacity .4s var(--ease) .1s, transform .5s var(--ease) .1s; } .timeline-item.open .timeline-works-inner { opacity: 1; transform: none; } .works-label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 1.25rem 0 0.875rem; display: flex; align-items: center; gap: 0.75rem; } .works-label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--accent-dim), transparent); } .works-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.875rem; padding-bottom: 0.5rem; } .work-card { position: relative; background: var(--bg-1); border: 1px solid var(--border); border-radius: 12px; padding: 1.125rem 1.25rem; transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease); animation: workIn .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms + 120ms); } .timeline-item:not(.open) .work-card { animation: none; } @keyframes workIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .work-card:hover { transform: translateY(-3px); border-color: var(--accent-dim); background: var(--bg-2); } .work-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.625rem; } .work-tag { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.06em; color: var(--second); padding: 0.15rem 0.5rem; border: 1px solid rgba(var(--second-rgb), 0.35); border-radius: 100px; } .work-name { font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 700; color: var(--fg); margin-bottom: 0.5rem; letter-spacing: -0.01em; } .work-desc { font-size: 0.875rem; line-height: 1.7; color: var(--fg-muted); } .work-desc strong { color: var(--second); font-weight: 600; font-family: var(--font-mono); font-size: 0.9em; } .work-link { display: inline-block; margin-top: 0.75rem; font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent); border-bottom: 1px solid var(--accent-dim); padding-bottom: 1px; } /* 展开态下不要整条右移，避免卡片跟着漂 */ .timeline-item.open:hover { transform: none; } /* --- 主题切换器（右下角） --- */ .palette-switch { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 102; display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem; background: rgba(var(--bg-rgb), 0.72); backdrop-filter: blur(16px) saturate(1.6); -webkit-backdrop-filter: blur(16px) saturate(1.6); border: 1px solid var(--border-strong); border-radius: 100px; box-shadow: 0 8px 30px rgba(var(--shadow-rgb), 0.25); } .palette-switch .ps-label { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.1em; color: var(--fg-dim); padding: 0 0.5rem 0 0.625rem; text-transform: uppercase; } .ps-btn { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; position: relative; background: linear-gradient(135deg, var(--sw-bg) 50%, var(--sw-accent) 50%); transition: transform .25s var(--ease), border-color .25s var(--ease); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); } .ps-btn:hover { transform: scale(1.12); } .ps-btn.active { border-color: var(--fg); transform: scale(1.08); } .ps-btn::after { content: attr(data-name); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px); font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em; white-space: nowrap; color: var(--fg); background: var(--bg-2); border: 1px solid var(--border-strong); padding: 0.25rem 0.5rem; border-radius: 6px; opacity: 0; pointer-events: none; transition: all .25s var(--ease); } .ps-btn:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); } @media (max-width: 640px) { .palette-switch .ps-label { display: none; } .palette-switch { right: 0.75rem; bottom: 0.75rem; } } /* --- 浅色主题微调：网格 / nav / 卡片阴影 --- */ [data-palette="frost"] .grain { opacity: 0.05; } [data-palette="mist"] .grain { opacity: 0.05; } [data-palette="frost"] .spotlight { background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 30%), rgba(var(--accent-rgb),0.06), transparent 55%); } [data-palette="mist"] .spotlight { background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 30%), rgba(var(--accent-rgb),0.06), transparent 55%); } [data-palette="frost"] .project-card:hover { box-shadow: 0 16px 40px rgba(var(--shadow-rgb),0.12); } [data-palette="mist"] .project-card:hover { box-shadow: 0 16px 40px rgba(var(--shadow-rgb),0.12); } [data-palette="frost"] #nav.scrolled { box-shadow: 0 4px 24px rgba(var(--shadow-rgb),0.08); } [data-palette="mist"] #nav.scrolled { box-shadow: 0 4px 24px rgba(var(--shadow-rgb),0.08); } [data-palette="frost"] .section-head::before { -webkit-text-stroke: 1px rgba(var(--fg-rgb), 0.08); } [data-palette="mist"] .section-head::before { -webkit-text-stroke: 1px rgba(var(--fg-rgb), 0.08); } [data-palette="frost"] ::selection { background: var(--accent); color: #fff; } [data-palette="mist"] ::selection { background: var(--accent); color: #fff; } [data-palette="frost"] .btn-primary { color: #fff; } [data-palette="mist"] .btn-primary { color: #fff; } @media (prefers-reduced-motion: reduce) { .hero-mesh::before, .hero-mesh::after, .hero-mesh .mesh-c { animation: none; } .marquee-inner-rev { animation: none !important; } }