/* ========================================================== about-me.css — 关于我 (About Me) 模块 ------------------------------------------------------------ 新增于 Backlog #38, 物理拆分层, 不使用 CSS @import, 在 file:// 协议下零跨域错误。 在 index.html 中按顺序引入 (后加载覆盖前加载, 16 CSS): 1. base.css (基础层: 重置 + 变量 + 纸纹 + scrollbar) 2. scene.css (场景层: 海草 + 潜水员 + 标题 + 进场) 3. portfolio-layout.css (作品集骨架) 4. portfolio-grid.css (作品集卡片栅格) 5. resume.css (简历, 含 experience-tag 八边形化) 6. portfolio-preview.css (预览: Lightbox + PDF 模态框) 7. portfolio-x1-sidebar.css (X1 侧栏: Markdown + modal) 8. contact.css (联系表单 + 社交) 9. life-layout.css (兴趣骨架 + 4 张核心卡 + 散落扑克牌) 10. life-modal.css (通用 modal: 4 主题 + 流体特效 + 模态响应式) 11. life-marathon.css (Marathon 列表 + 节点 + 响应式) 12. life-travel.css (Travel 地图 + 时间轴 + 响应式) 13. life-photography.css (Photography 骨架位, Backlog #27) 14. life-finance.css (Finance 骨架位, Backlog #27) 15. about-me.css ← 本文件 (Backlog #38 + #39 + #40 迭代) 16. responsive.css (全局响应兜底) 完整文件结构与职责归属见 [WORKFLOW.md §4](./WORKFLOW.md). 包含: 1. .about-me-section / .about-me-layout (左→右 flex row 双栏, justify-content: center) 2. .about-me-card (八角形大卡 360x500, 轻微倾斜 -3deg, 与照片 0deg "歪卡正照") 3. .about-me-photo (八角形照片 200x280, flex 左栏, 摆正 0deg) 4. .about-me-photo-wrap:hover — 照片抬升 -3px (维持摆正) 5. .about-me-card-content (EN/CN 标题 + 精简 tagline + CTA, 无 tag) 6. .about-me-modal-body / .about-me-modal-content (中英对照正文) 7. .about-me-modal-en / -cn 段 (Cinzel 英文 / PingFang 中文) 8. 流体波纹兼容 (复用 portfolioCardRipple keyframes) 9. 响应式 (1024 / 768 / 480 / 360) — 1024 双栏继续, 768 切竖排 10. Reduced Motion / 触屏适配 【深海纸雕铁律】 - 不透明: 卡背景 #fbf8f5 莫兰迪浅色, 照片 luminosity 混合 - 硬边: 八角形 12px 切角 (与 collage-card / project-card 完全一致) - 物理投影: 卡 3px 4px 0 + 0 8px 20px + inset 0 1px 0; 照片 3px 4px 0 + 0 8px 18px + inset 0 1px 0 - 纸带厚度 3.5px: .about-me-card::before 顶部描边 (紫色) ========================================================== */ /* ========================================================== 1. Section 骨架 + Layout (左→右: 照片 → 卡片) ------------------------------------------------------------ Backlog #38 (2026-06-24): 重构为左→右两栏并排, 取代之前"照片叠在卡左缘外露 30%"的伪交错排版. 新结构: flex row (gap 32-56px) + justify-content: center · 左侧 .about-me-photo-wrap (八角形照片, 200x280, 静止 + hover 微探身) · 右侧 .about-me-card (八角形大卡, 360x500, 主交互层) 响应式: 1024/768/480/360 四档 (768 以下竖排 照片→卡) ========================================================== */ #section-about-me.content-section { /* 由 .content-section + .section-right 的 base 规则接管布局 这里只追加层级变量, 不动 padding, 避免破坏 section-right */ z-index: 5; --about-me-accent: rgba(120, 90, 200, 0.7); /* 紫调 — 与 architecture/AI 跨界气质呼应 */ --about-me-gap: 56px; /* 桌面端左右间距 */ } .about-me-layout { display: flex; flex-direction: row; align-items: center; /* 垂直居中对齐 */ justify-content: center; /* 整组水平居中 */ gap: var(--about-me-gap); max-width: 1200px; margin: 0 auto; padding: 60px 24px; position: relative; min-height: 580px; } /* ========================================================== 2. 八角形大卡 (About Me Card) — 轻微倾斜 -3deg ------------------------------------------------------------ 与 .collage-card--interactive 同一家族: · 12px 八角形切角 · 顶部 3.5px 描边纸带 (紫色高光) · 双层物理硬投影 · 4 顶点 clip-path 描边 (切面细线) · Backlog #40: 卡改为轻微倾斜 -3deg (照片摆正 0deg), 形成"歪卡正照"对比 hover 时维持 -3deg + 抬升 -4px ========================================================== */ .about-me-card { position: relative; width: 360px; height: 500px; background: #fbf8f5; /* 莫兰迪浅色卡纸 */ border: none !important; border-radius: 0 !important; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 36px 50px; cursor: pointer !important; flex-shrink: 0; /* 防止 flex 容器挤压卡 */ z-index: 2; /* Backlog #38: 不再需高于照片, 与照片同层 */ transform: rotate(-3deg); /* Backlog #40: 轻微倾斜 -3deg, 与照片 0deg 形成对比 */ -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; -webkit-tap-highlight-color: transparent !important; /* 八角形 12px 切角 (与 collage-card / project-card 完全一致) */ clip-path: polygon( 12px 0%, calc(100% - 12px) 0%, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0% calc(100% - 12px), 0% 12px ); /* 双层物理硬投影 */ box-shadow: 3px 4px 0px rgba(0, 3, 10, 0.18), 0 8px 20px rgba(0, 3, 10, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6); transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1); will-change: transform; } /* 顶部描边高光 (纸带 3.5px, 紫色) */ .about-me-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--about-me-accent) 0px, var(--about-me-accent) 3.5px, transparent 3.5px, transparent 100% ); clip-path: polygon( 0 12px, 12px 0, calc(100% - 12px) 0, 100% 12px ); z-index: 3; } /* 切面细线 (clip-path 后重描) */ .about-me-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: transparent; border: 1px solid rgba(0, 3, 10, 0.12); clip-path: inherit; z-index: 2; } /* Hover — 维持 -3deg 倾斜 + 抬升, 阴影加深, 提示"可点击" Backlog #40: translateY 必须紧跟 rotate(-3deg), 否则旋转角会丢失 */ .about-me-card:hover { transform: rotate(-3deg) translateY(-4px); box-shadow: 4px 6px 0px rgba(0, 3, 10, 0.22), 0 14px 28px rgba(0, 3, 10, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7); } .about-me-card:active { transform: rotate(-3deg) translateY(1px); box-shadow: 2px 3px 0px rgba(0, 3, 10, 0.22), 0 4px 10px rgba(0, 3, 10, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.5); } /* ========================================================== 3. 卡内文字 (EN / CN 标题 + 精简 tagline + CTA) ------------------------------------------------------------ Backlog #40: 删除 "00 / IDENTITY" tag, 简化 philosophy 为 1 行 tagline. 结构: title (About Me) → subtitle (关于我) → divider → tagline (Observer. Builder. Runner.) → CTA ========================================================== */ .about-me-card-content { position: relative; z-index: 1; /* 在 ::after 切面线上 */ text-align: center; pointer-events: none; /* 整卡都可点, 内容不抢 hit-area */ } /* ~~.about-me-card-tag 已废弃~~ (Backlog #40: 用户要求删除 00/IDENTITY tag) 本类保留为 no-op 占位, 防止未来误用同名类时无声生效. ------------------------------------------------------------ */ .about-me-card-tag { /* no-op: 旧 "00 / IDENTITY" tag 已删除, 本类仅保留占位 */ display: none; } .about-me-card-title { font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 1.85rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(10, 31, 36, 0.92); margin: 0 0 0.5rem; line-height: 1.2; } .about-me-card-subtitle { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, Arial, sans-serif; font-size: 1.05rem; font-weight: 400; letter-spacing: 0.4em; color: rgba(10, 31, 36, 0.55); margin: 0 0 2rem; padding-left: 0.4em; /* 视觉对齐 letter-spacing 末位空白 */ } .about-me-card-divider { width: 48px; height: 2px; background: rgba(120, 90, 200, 0.45); margin: 0 auto 1.5rem; border-radius: 0; } .about-me-card-philosophy { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, Arial, sans-serif; font-size: 0.95rem; /* Backlog #40: 字号略放大, 配合精简后的 1 行 tagline */ line-height: 1.6; color: rgba(10, 31, 36, 0.7); max-width: 280px; margin: 0 auto 1.8rem; letter-spacing: 0.06em; text-align: center; } .about-me-card-philosophy strong { font-weight: 600; color: rgba(10, 31, 36, 0.88); margin-right: 4px; /* Backlog #40: 三个 strong 之间加间距 */ } .about-me-card-philosophy strong:last-child { margin-right: 0; } .about-me-card-cta { font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 0.65rem; font-weight: 400; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(120, 90, 200, 0.75); display: inline-flex; align-items: center; gap: 8px; transition: gap 0.3s cubic-bezier(0.25, 1, 0.5, 1); } .about-me-card:hover .about-me-card-cta { gap: 12px; } .about-me-card-cta::after { content: "→"; font-family: inherit; font-size: 0.85rem; } /* ========================================================== 4. 八角形照片 (Octagonal Profile Photo) — 布局左栏 ------------------------------------------------------------ Backlog #38: 改为静态 flex 子项, 取代"绝对定位 + 卡左缘外露". Backlog #40: 照片摆正 0deg (之前 -6deg), 卡改为轻微倾斜 -3deg, 形成"歪卡正照"对比 · 尺寸: 200x280 (与原 resume 头像 128x192 相比放大, 作为 About Me 主装饰) · 初始旋转: 0deg (摆正) · Hover: 维持 0deg + 整体轻微上抬 -3px (filter 增强对比度) · 八角形 12px 切角 + mix-blend-mode: luminosity (与原 resume 头像同款) ========================================================== */ .about-me-photo-wrap { flex-shrink: 0; width: 200px; height: 280px; position: relative; transform: rotate(0deg); /* Backlog #40: 摆正 0deg */ transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.6s cubic-bezier(0.25, 1, 0.5, 1); will-change: transform; cursor: default; } .about-me-photo { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none !important; -webkit-user-drag: none !important; /* 八角形 12px 切角 (与 collage-card / project-card 完全一致) */ clip-path: polygon( 12px 0%, calc(100% - 12px) 0%, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0% calc(100% - 12px), 0% 12px ); box-shadow: 3px 4px 0px rgba(0, 3, 10, 0.22), 0 8px 18px rgba(0, 3, 10, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.6); filter: contrast(110%) brightness(96%); mix-blend-mode: luminosity; transition: filter 0.6s cubic-bezier(0.25, 1, 0.5, 1); } /* Hover — 维持摆正 0deg + 抬升 -3px (Backlog #40: 不再扶正, 维持正照姿态) */ .about-me-photo-wrap:hover { transform: translateY(-3px); } .about-me-photo-wrap:hover .about-me-photo { filter: contrast(120%) brightness(105%) saturate(108%); } /* ========================================================== 5. ~~旧 .about-me-card-wrap 已废弃~~ ------------------------------------------------------------ Backlog #39: 改为 flex row 直接并排, 不再需要外层 wrap, 本类保留为 no-op 占位 (防止 JS 旧选择器失效). ========================================================== */ .about-me-card-wrap { /* no-op: 旧外层 wrap, 现在 flex 子项直接挂在 .about-me-layout 下 */ display: contents; } /* ========================================================== 6. About Me 模态专属主题色 + 中英对照内容 ------------------------------------------------------------ 复用 .collage-modal-overlay / -container (life-modal.css), 这里只追加 about-me 专属的 #about-me-modal 主题色 + 字体排版 ========================================================== */ #about-me-modal .collage-modal-container { --card-accent: rgba(120, 90, 200, 0.7) !important; /* 紫色, 与卡同色 */ } /* About Me 模态内"卡片头部" (覆盖默认 .collage-modal-icon / -title / -subtitle 排版) */ #about-me-modal .collage-modal-icon { font-size: 26px; margin-right: 12px; } #about-me-modal .collage-modal-title { font-size: 1.6rem; letter-spacing: 0.22em; } #about-me-modal .collage-modal-subtitle { font-size: 0.78rem; margin: 6px 0 0 38px; color: rgba(245, 247, 250, 0.6); } /* ========================================================== 7. About Me 模态 Body — 中英对照双栏 ------------------------------------------------------------ 上半: EN 段 (Cinzel italic + 0.95rem + 0.85 alpha) 下半: CN 段 (PingFang + 0.95rem + 0.85 alpha) 顶部一条 1px 紫调分隔线 + 中部"中英对照"标签 ========================================================== */ .about-me-modal-body { padding: 30px 32px 24px; max-width: 920px; margin: 0 auto; } .about-me-modal-intro { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid rgba(120, 90, 200, 0.25); } .about-me-modal-intro-rule { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(120, 90, 200, 0.5) 0%, rgba(120, 90, 200, 0.1) 100%); } .about-me-modal-intro-label { font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 0.7rem; font-weight: 400; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(120, 90, 200, 0.85); white-space: nowrap; } .about-me-modal-block { margin-bottom: 28px; position: relative; padding: 6px 0 6px 18px; border-left: 2px solid rgba(120, 90, 200, 0.35); } .about-me-modal-block:last-child { margin-bottom: 0; } .about-me-modal-block-label { display: inline-block; font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.35em; text-transform: uppercase; color: rgba(120, 90, 200, 0.9); margin-bottom: 12px; padding: 3px 10px; background: rgba(120, 90, 200, 0.12); border: 1px solid rgba(120, 90, 200, 0.25); } .about-me-modal-en, .about-me-modal-cn { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 0.95rem; line-height: 1.85; color: rgba(245, 247, 250, 0.88); margin: 0 0 8px; letter-spacing: 0.02em; text-align: justify; } .about-me-modal-en { font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 0.88rem; font-style: italic; color: rgba(245, 247, 250, 0.78); line-height: 1.95; letter-spacing: 0.015em; } .about-me-modal-en strong, .about-me-modal-cn strong { font-weight: 600; color: rgba(220, 200, 255, 0.95); } .about-me-modal-en em { font-style: normal; color: rgba(180, 220, 255, 0.85); border-bottom: 1px dashed rgba(120, 90, 200, 0.4); padding-bottom: 1px; } .about-me-modal-divider { display: flex; align-items: center; justify-content: center; margin: 20px 0; gap: 12px; color: rgba(120, 90, 200, 0.4); font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 0.7rem; letter-spacing: 0.5em; text-transform: uppercase; } .about-me-modal-divider::before, .about-me-modal-divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(120, 90, 200, 0.3) 50%, transparent 100%); } /* ========================================================== 8. 流体波纹兼容 (复用 portfolio-grid.css 的 @keyframes) ------------------------------------------------------------ About Me 卡也参与流体波纹 + 物理水波置换 (与 collage-card 同步) ========================================================== */ .about-me-card.fluid-wake, .about-me-photo-wrap.fluid-wake { animation: portfolioCardRipple 0.8s ease-out; } /* ========================================================== 9. 响应式 (1024 / 768 / 480 / 360) ------------------------------------------------------------ Backlog #39: 重构为"左→右"双栏响应式 · 1024px: 双栏继续, 间距收紧, 卡和照片等比缩小 · 768px: 切竖排 (照片→卡), 两者居中, gap 收窄 · 480px: 照片+卡进一步缩小, 文字字号压缩 · 360px: 最小屏, 卡宽度贴边, 照片改为方形视觉锚点 ========================================================== */ /* 1024px: 双栏继续, 间距收紧 (56px → 32px) */ @media (max-width: 1024px) { #section-about-me.content-section { --about-me-gap: 32px; } .about-me-layout { min-height: 520px; padding: 50px 20px; } .about-me-card { width: 320px; height: 460px; padding: 50px 28px 40px; } .about-me-photo-wrap { width: 170px; height: 240px; } .about-me-card-title { font-size: 1.65rem; } .about-me-card-philosophy { font-size: 0.75rem; max-width: 240px; } } /* 768px: 切竖排 (照片→卡), 两者水平居中 */ @media (max-width: 768px) { .about-me-layout { flex-direction: column; justify-content: center; align-items: center; min-height: auto; padding: 40px 16px; gap: 28px; } .about-me-photo-wrap { width: 150px; height: 210px; order: 1; transform: rotate(0deg); /* Backlog #40: 竖排下仍维持摆正 0deg */ } .about-me-photo-wrap:hover { transform: translateY(-3px); } .about-me-card { width: 100%; max-width: 360px; height: 440px; padding: 50px 28px 40px; order: 2; } .about-me-modal-body { padding: 22px 20px 18px; } .about-me-modal-en { font-size: 0.82rem; } .about-me-modal-cn { font-size: 0.9rem; } } /* 480px: 进一步缩小, 文字字号压缩 */ @media (max-width: 480px) { .about-me-layout { gap: 22px; padding: 36px 14px; } .about-me-photo-wrap { width: 130px; height: 180px; } .about-me-card { max-width: 320px; height: 420px; padding: 44px 22px 32px; } .about-me-card-title { font-size: 1.4rem; letter-spacing: 0.14em; } .about-me-card-subtitle { font-size: 0.9rem; letter-spacing: 0.3em; } .about-me-card-philosophy { font-size: 0.72rem; max-width: 220px; } .about-me-modal-block { padding: 4px 0 4px 14px; } .about-me-modal-en { font-size: 0.78rem; line-height: 1.85; } .about-me-modal-cn { font-size: 0.86rem; line-height: 1.8; } .about-me-modal-block-label { font-size: 0.6rem; padding: 2px 8px; } } /* 360px: 最小屏, 进一步压缩 */ @media (max-width: 360px) { .about-me-layout { gap: 18px; padding: 32px 10px; } .about-me-photo-wrap { width: 110px; height: 150px; } .about-me-card { max-width: 290px; height: 400px; padding: 40px 18px 28px; } .about-me-card-title { font-size: 1.25rem; } .about-me-card-philosophy { font-size: 0.68rem; line-height: 1.6; } } /* ========================================================== 10. Reduced Motion / 触屏适配 ========================================================== */ @media (prefers-reduced-motion: reduce) { .about-me-card, .about-me-photo, .about-me-photo-wrap { transition: none !important; animation: none !important; } .about-me-card:hover { transform: rotate(-3deg) translateY(-4px); } .about-me-card:active { transform: rotate(-3deg) translateY(1px); } }