/* ========================================================== resume-modal.css — 简历模块模态框 (Resume Module Modal) — Backlog #79 ------------------------------------------------------------ 物理拆分层, 不使用 CSS @import, 在 file:// 协议下零跨域错误。 在 index.html 中按顺序引入, 跟 resume.css 相邻: ... resume.css (5) → resume-modal.css (5.5) → portfolio-preview.css (6) ... z-index 计划: 9999995 (低于 seaweed 10000001, 高于 portfolio modal 9999990) 包含: 1. 模态根 (resume-modal + backdrop + container + close) 2. 模态内容滚动 (resume-modal-content) 3. 模态段落 (resume-modal-section + section-title) 4. 模态内的卡 (复用 .resume-card 样式, 加 modal 专属微调) 5. 入场动画 (fade + slide) 6. 响应式 (max-width: 900 / 600) 铁律: 八角切角 + 硬投影 + 纯色米白 (跟 v2 卡一致) ========================================================== */ /* ========================================================== 1. 模态根 (Modal Root) — 默认 hidden, JS 加 'active' 显示 ========================================================== */ .resume-modal { position: fixed; inset: 0; z-index: 9999995; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .resume-modal[hidden] { display: none !important; } .resume-modal.active { opacity: 1; pointer-events: auto; } /* ========================================================== 2. 背景遮罩 (Backdrop) — 点击关闭模态 ========================================================== */ .resume-modal-backdrop { position: absolute; inset: 0; /* [Backlog #95 v2 · 2026-09-17] 对齐 LifeCollage 米白氛围: 之前用深色 backdrop 0.82 + blur 4 让 Resume 比 LifeCollage 暗很多, 用户反馈 "lifecollage 模态框背景都是米白, resume 也对齐这个效果". LifeCollage 用 .collage-modal-overlay transparent + .seaweed-branch-vignette 径向米白雾, Resume 不走 collage-modal-overlay 体系, 走自己 .resume-modal-backdrop. 浅米白半透 + 强模糊: 透出 body 米白底 + 模糊 seaweed canvas (跟 vignette 同思路) "背景内容不显示" 铁律不靠深 backdrop 实现 (已在 seaweed-vignette.css .content-section opacity:0 + .seaweed-label-layer + #cinematic-title-container 联动 hide 兜底) */ background: rgba(247, 241, 225, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; } /* ========================================================== 3. 模态容器 (Container) — 实际承载内容的白色面板 ========================================================== */ .resume-modal-container { position: relative; width: 90vw; max-width: 1000px; max-height: 88vh; background-color: #f7f1e1; background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.04)); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.25), 0 16px 40px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; /* 八角切角 8px */ clip-path: polygon( 8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px ); /* 入场: 从下方轻微上滑 */ transform: translateY(20px); transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); } .resume-modal.active .resume-modal-container { transform: translateY(0); } /* ========================================================== 4. 关闭按钮 (Close Button) — 右上角 × ========================================================== */ .resume-modal-close { position: absolute; top: 12px; right: 18px; z-index: 2; width: 40px; height: 40px; background: transparent; border: none; color: rgba(0, 0, 0, 0.5); font-size: 28px; line-height: 1; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-weight: 300; cursor: pointer; transition: color 0.2s ease, transform 0.2s ease; padding: 0; } .resume-modal-close:hover { color: rgba(0, 0, 0, 0.85); transform: rotate(90deg); } .resume-modal-close:focus { outline: none; } .resume-modal-close:focus-visible { outline: 2px solid rgba(0, 80, 100, 0.5); outline-offset: 2px; } /* ========================================================== 5. 模态内容滚动 (Content) — 垂直滚动, 顶/底留 padding ========================================================== */ .resume-modal-content { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 60px 48px 40px 48px; /* 滚动条样式 (Webkit) */ scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.25) transparent; } .resume-modal-content::-webkit-scrollbar { width: 8px; } .resume-modal-content::-webkit-scrollbar-track { background: transparent; } .resume-modal-content::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 4px; } .resume-modal-content::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.35); } /* ========================================================== 6. 模态段落 (Section) + 标题 ========================================================== */ .resume-modal-section { margin-bottom: 3rem; } .resume-modal-section:last-child { margin-bottom: 0; } .resume-modal-section-title { font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 1.5rem; font-weight: 400; color: rgba(10, 31, 36, 0.95); letter-spacing: 0.15em; text-transform: uppercase; margin: 0 0 1.5rem 0; padding-bottom: 12px; border-bottom: 1px solid rgba(0, 80, 100, 0.25); } /* ========================================================== 7. 模态内卡微调 (Modal Card Tweaks) ------------------------------------------------------------ 模态内空间充裕, 卡可以稍微紧凑些, 视觉重量比 section 内轻. ========================================================== */ .resume-modal-content .resume-card { margin-bottom: 1rem; } .resume-modal-content .resume-card:last-child { margin-bottom: 0; } /* ========================================================== 8. 响应式 (Responsive) ========================================================== */ @media (max-width: 900px) { .resume-modal-container { width: 95vw; max-height: 92vh; } .resume-modal-content { padding: 56px 32px 32px 32px; } .resume-modal-section-title { font-size: 1.3rem; } } @media (max-width: 600px) { .resume-modal-container { width: 100vw; max-height: 100vh; max-width: none; border-radius: 0; /* 移动端去掉切角, 适配全屏 */ clip-path: none; } .resume-modal-content { padding: 56px 20px 24px 20px; } .resume-modal-close { top: 8px; right: 12px; width: 36px; height: 36px; font-size: 24px; } .resume-modal-section-title { font-size: 1.1rem; letter-spacing: 0.1em; } }