/* ========================================================== life-layout.css — 兴趣模块骨架与核心卡片 (LifeCollage Skeleton + Cards) ------------------------------------------------------------ 物理拆分层, 不使用 CSS @import, 在 file:// 协议下零跨域错误。 在 index.html 中按顺序引入 (后加载覆盖前加载, 15 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 列表 + 节点 + 响应式) ← 原 lifeCollage.css 一部分 12. life-travel.css (Travel 地图 + 时间轴 + 响应式) ← 原 lifeCollage.css 一部分 13. life-photography.css (Photography 骨架位, Backlog #27 待实现) 14. life-finance.css (Finance 骨架位, Backlog #27 待实现) 15. responsive.css (全局响应兜底) 完整文件结构与职责归属见 [WORKFLOW.md §4](./WORKFLOW.md). 包含: 1. 兴趣区块全局骨架 (.life-collage-block / .life-collage-main-title / .life-collage-subtitle / .life-collage-tags / .collage-tag / .life-collage-desc-text) 2. 卡片网格 (.life-collage-card-grid) — flex 散落扑克牌布局 3. 基础卡片 (.collage-card) — 固定 260×360 莫兰迪浅色卡纸 4. 4 张卡主题色 (#marathon-card / #travel-card / #photography-card / #finance-card) 5. 卡片背景层 (.collage-card-bg / ::after) + 内容层 (.collage-card-content) 6. 卡片内容元素 (.collage-card-icon / -title / -philosophy) 7. 卡片编号水印 (.card-watermark) + 静态变体 (.collage-card--static) 8. 硬边切角纸雕变体 (.collage-card--interactive): · 八角形 12px 切角 (与 .project-card 同步) · 顶部描边高光 (3.5px 纸带) + 切面细线 · 物理硬投影 (3px 4px 0 + 0 6px 14px + inset 0 1px 0) · 散落扑克牌 4 张各自旋转 + 位移 (nth-child 1-4) · Hover 抬升 + 高光染色 (4 种主题色) · Active 按下下沉 + 暗化 · 流体波纹 + 物理水波置换 (复用 portfolio-grid.css 中的 @keyframes) 9. 4 张卡 Hover 高光染色 (Marathon 红 / Travel 橙 / Photography 蓝紫 / Finance 金) 10. 响应式 (1600+ / 1200-1599 / 1025-1199 / 1024 / 768 / 480 / 360 + 横屏 ≤500px) — 仅卡片 / 网格 / 骨架 / 主标题 【深海纸雕铁律】 - 不透明: 4 张卡莫兰迪浅色卡纸 (#fbf8f5 / #f3f7f6 / #f5f5f7 / #f6f5f9) + 4 个 background 全不透明, 杜绝 backdrop-filter - 硬边: 八角形 12px 切角 (clip-path polygon), 默认无 border-radius 仅 .collage-card 基础用 12px (但用 --interactive 覆写为 0) - 物理投影: 3px 4px 0 + 0 6px 14px + inset 0 1px 0 Hover 抬升 5px + 5px 7px 0 + 0 12px 24px - 纸带厚度 3.5px: .collage-card--interactive::before 顶部描边 3.5px ========================================================== */ /* ========================================================== 1. 兴趣区块全局骨架 (LifeCollage Skeleton) ========================================================== */ .life-collage-block { text-align: left; margin-bottom: 60px; } .life-collage-main-title { font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 3rem; text-transform: uppercase; letter-spacing: 0.3em; color: #000 !important; margin-bottom: 0.5rem; font-weight: 300; } .life-collage-subtitle { font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.2em; color: #000 !important; margin-bottom: 1.5rem; font-weight: 300; } .life-collage-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 2rem; } .collage-tag { display: inline-flex; align-items: center; padding: 4px 14px; border: 1px solid rgba(0, 242, 254, 0.35); background: rgba(0, 242, 254, 0.08); color: #00f2fe; border-radius: 2px; /* 微型 chip 允许 2px 直角微圆 */ font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace; cursor: pointer; transition: all 0.3s ease; } .life-collage-desc-text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 0.95rem; color: rgba(245, 247, 250, 0.7); line-height: 1.8; margin-bottom: 1rem; letter-spacing: 0.02em; } /* ========================================================== 2. 兴趣卡片 — 全局散落扑克牌 (Polaroid Scatter) + 智能折行 - flex-wrap: 大宽屏 4-up / 中窄屏 2-up / 极窄屏 1-up 自动折行 - 4 张卡用 :nth-child 各自轻微旋转 + 横向位移, 制造"摆桌"感 - :hover 时放大 + 回正 + 提到最上层 ========================================================== */ .life-collage-card-grid { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 20px 10px; /* row 20px / column 10px, 扑克牌之间疏密得当 */ max-width: 1300px; margin: 40px auto; padding: 30px 20px 50px; } .collage-card { position: relative; width: 260px; height: 360px; flex-shrink: 0; /* 防止被压缩, 永远保持基础尺寸 */ border-radius: 12px; overflow: hidden; cursor: pointer; transform-origin: center center; transition: transform 0.25s ease, box-shadow 0.25s ease, z-index 0s; display: flex; align-items: flex-end; box-shadow: 4px 6px 0px rgba(0, 3, 10, 0.4); background: #04161d; } /* ========================================================== 3. 4 张卡主题色 (莫兰迪浅色卡纸 + CSS 变量) ------------------------------------------------------------ 与 .project-card[data-watermark="X1"] 同色系, 形成"作品集 ↔ 兴趣" 双侧的卡纸色彩呼应. --theme-color 用于 .card-watermark 字母水印 + .collage-card--interactive:hover ========================================================== */ #marathon-card { background: #fbf8f5; --theme-color: #b31515; } /* 极淡暖橙白 */ #travel-card { background: #f3f7f6; --theme-color: #1f7a6a; } /* 极淡薄荷青白 */ #photography-card { background: #f5f5f7; --theme-color: #4a5d8f; } /* 高级浅灰白 */ #finance-card { background: #f6f5f9; --theme-color: #6b4d8a; } /* 极淡紫白 */ /* ========================================================== 4. 卡片编号水印 (单字母 M / T / P / F) ========================================================== */ .card-watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'Cinzel', 'Playfair Display', serif; font-size: 12rem; /* 单字母: 8rem → 12rem, 更具视觉冲击 */ font-weight: 900; line-height: 1; color: var(--theme-color); opacity: 0.07; /* 若隐若现, 不抢 Logo 焦点 */ z-index: 1; pointer-events: none; /* 不干扰鼠标 */ user-select: none; letter-spacing: -0.04em; } /* 大小卡现在统一样式, 仅保留色彩 / 高度差异 (无 grid 跨列) */ .collage-card--large { min-height: 0; /* 不再特殊 */ } /* ========================================================== 5. 散落扑克牌 — 4 张卡各自轻微旋转 + 横向位移 ("摆桌"感) ========================================================== */ .collage-card--interactive:nth-child(1) { transform: rotate(-4deg) translate(8px, 5px); z-index: 1; box-shadow: 4px 6px 0px rgba(0, 3, 10, 0.4); } .collage-card--interactive:nth-child(2) { transform: rotate(3deg) translate(-8px, -5px); z-index: 2; box-shadow: 4px 6px 0px rgba(0, 3, 10, 0.4); } .collage-card--interactive:nth-child(3) { transform: rotate(-2deg) translate(8px, 10px); z-index: 3; box-shadow: 4px 6px 0px rgba(0, 3, 10, 0.4); } .collage-card--interactive:nth-child(4) { transform: rotate(5deg) translate(-12px, 2px); z-index: 4; box-shadow: 4px 6px 0px rgba(0, 3, 10, 0.4); } /* === Hover: 放大 + 回正 + 阴影增强 + 提层 === */ .collage-card--interactive:hover, .collage-card--interactive:focus-visible { transform: scale(1.05) rotate(0deg) translateY(-8px) !important; box-shadow: 8px 12px 0px rgba(0, 3, 10, 0.3) !important; z-index: 50 !important; transition: transform 0.25s ease, box-shadow 0.25s ease, z-index 0s !important; } /* ========================================================== 6. 卡片背景层 + 内容层 (Background / Content Layer) ========================================================== */ .collage-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); z-index: 1; } .collage-card-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, rgba(2, 10, 14, 0.7) 100%); } .collage-card:hover .collage-card-bg { transform: scale(1.05); } .collage-card-content { position: relative; z-index: 3; /* 高于 watermark 的 z-index: 1 */ padding: 24px; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; /* 文字始终在底部 */ height: 100%; box-sizing: border-box; } /* ========================================================== 7. 卡片内容元素 (Icon / Title / Philosophy) ========================================================== */ .collage-card-icon { font-size: 42px; /* 1.5x: 28px → 42px, 强化视觉冲击 */ line-height: 1; display: inline-block; margin-bottom: 12px; position: relative; z-index: 2; /* 高于 watermark */ filter: drop-shadow(2px 3px 0px rgba(0, 3, 10, 0.15)); /* 轻量纸雕投影 */ } .collage-card-title { font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 1.3rem; text-transform: uppercase; letter-spacing: 0.15em; color: #1a2530; /* 浅色背景配深色文字 */ margin-bottom: 8px; font-weight: 500; position: relative; z-index: 2; } .collage-card-philosophy { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 0.85rem; color: #4a5560; /* 浅色背景配深灰文字 */ letter-spacing: 0.02em; line-height: 1.5; position: relative; z-index: 2; } /* ========================================================== 8. 静态变体 (collage-card--static) — 深色卡纸, 无交互 ========================================================== */ .collage-card--static { background: #04161d; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7), 0 20px 40px rgba(0, 3, 5, 0.85); } /* ========================================================== 9. 硬边切角交互卡 (collage-card--interactive) ------------------------------------------------------------ 与 .project-card 同一家族: 八角形切角 + 物理硬投影 + 顶部高光 ========================================================== */ .collage-card--interactive { /* Stacked paper card: solid, opaque, no glass */ /* 浅色背景: 不再用 #04161d 强制覆盖, 让 #marathon-card / #travel-card 等 的莫兰迪浅色背景生效 */ background: transparent; border: none !important; border-radius: 0 !important; box-shadow: 3px 4px 0px rgba(0, 3, 10, 0.18), /* 主投影: 硬边切角 */ 0 6px 14px rgba(0, 3, 10, 0.10), /* 次投影: 柔和扩散 */ inset 0 1px 0 rgba(255, 255, 255, 0.6) !important; /* 卡纸顶部高光 */ /* 八边形刻刀切角: 12px 斜切 (与 .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 ); transform: translateZ(0); will-change: transform; /* 顶部描边主色 (CSS 变量) — 卡纸顶面"受光高光" */ --card-accent: rgba(255, 255, 255, 0.22); /* 文本选择抑制 + 移动端 tap 高亮抑制 */ -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; cursor: pointer !important; -webkit-tap-highlight-color: transparent !important; position: relative !important; /* z-index 由 :nth-child 分别指定 (1/2/3/4), 不再统一 99999 — 防止盖在 modal 上 */ pointer-events: auto !important; /* 合并 transition (流体波纹 0.4s + 默认 0.3s) */ transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s, filter 0.3s !important; } /* 顶部描边高亮 — 与 .project-card::before 同款 4 顶点梯形 (纸带 3.5px) */ .collage-card--interactive::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--card-accent) 0px, var(--card-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 后重描) */ .collage-card--interactive::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; } .collage-card--interactive:hover { transform: translateY(-5px); /* 浅色背景 hover: 不要 #062536 深色, 让原色保留或微微变深 */ box-shadow: 5px 7px 0px rgba(0, 3, 10, 0.22), /* 主投影加深 */ 0 12px 24px rgba(0, 3, 10, 0.15), /* 次投影 */ inset 0 1px 0 rgba(255, 255, 255, 0.8) !important; /* 高光更强 */ --card-accent: var(--theme-color); } .collage-card--interactive:hover::after { border-color: rgba(0, 3, 10, 0.22); } /* Active / click 反馈 — 物理按下 */ .collage-card--interactive:active { transform: scale(0.96) translateY(2px) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important; filter: brightness(0.8); } /* Icon 悬浮缩放 */ .collage-card--interactive .collage-card-icon { transition: transform 0.4s ease; } .collage-card--interactive:hover .collage-card-icon { transform: scale(1.05); } /* ========================================================== 10. 4 张卡 Hover 高光染色 (4 种语义色) ------------------------------------------------------------ 覆写 .collage-card--interactive:hover 的 --card-accent 变量 让顶部描边纸带与卡片主题色一致. ========================================================== */ /* Marathon: 暗红 (对应 tag-monument) */ #marathon-card.collage-card--interactive:hover { --card-accent: rgba(179, 21, 21, 0.7) !important; } /* Travel: 薄荷青 (与 #travel-card --theme-color: #1f7a6a 一致) */ #travel-card.collage-card--interactive:hover { --card-accent: rgba(31, 122, 106, 0.7) !important; } /* Photography: 蓝紫 (视觉叙事类, 独有配色) */ #photography-card.collage-card--interactive:hover { --card-accent: rgba(120, 168, 255, 0.7) !important; } /* Finance: 紫 (与 #finance-card --theme-color: #6b4d8a 一致) */ #finance-card.collage-card--interactive:hover { --card-accent: rgba(107, 77, 138, 0.7) !important; } /* ========================================================== 11. 占位 (流体波纹 / 物理水波置换已抽离到 life-modal.css) ------------------------------------------------------------ 注: .collage-card--interactive.fluid-wake .collage-card--interactive.physical-water-ripple + 流体/水波容器相关样式已统一迁移到 life-modal.css (按用户要求"流体与特效层"归类到模态模块). ========================================================== */ /* ========================================================== 12. 响应式 (Life Layout 专属: 骨架 / 主标题 / 网格 / 卡片尺寸) ------------------------------------------------------------ 断点 1600+ / 1200-1599 / 1025-1199 / 1024 / 768 / 480 / 360 + 横屏 ≤500px Modal / Marathon / Travel 模态响应式保留在 lifeCollage.css ========================================================== */ /* 12.0 大屏及以上 (>= 1600px) — 标题更大, 卡片网格容器更宽 */ @media (min-width: 1600px) { .life-collage-card-grid { max-width: 1320px; gap: 20px; } .life-collage-main-title { font-size: 3.2rem; letter-spacing: 0.3em; } } /* 12.0b 中等桌面 (1200–1599px) — 标题适中 */ @media (min-width: 1200px) and (max-width: 1599px) { .life-collage-card-grid { gap: 18px; } .life-collage-main-title { font-size: 2.8rem; } } /* 12.0c 小桌面 / 大平板 (1025–1199px) — 卡片稍小 */ @media (min-width: 1025px) and (max-width: 1199px) { .collage-card { width: 240px; height: 340px; } .life-collage-card-grid { gap: 14px; max-width: 1100px; } } /* 12.1 ≤1024px — 仅标题缩小 (模态 / Marathon 已在 lifeCollage.css) */ @media (max-width: 1024px) { .life-collage-main-title { font-size: 2.2rem; } } /* 12.2 768px 以下 — 卡片稍小 */ @media (max-width: 768px) { .collage-card { width: 240px; height: 340px; } .life-collage-card-grid { gap: 16px 8px; padding: 20px 10px 32px; } } /* 12.3 480px 以下 — 卡片更小, 标题缩 */ @media (max-width: 480px) { .life-collage-main-title { font-size: 1.8rem; letter-spacing: 0.2em; } .collage-card { width: 200px; height: 300px; } .collage-card-title { font-size: 1.1rem; } .collage-card-philosophy { font-size: 0.78rem; } } /* 12.4 360px 以下 — 极窄屏 */ @media (max-width: 360px) { .life-collage-main-title { font-size: 1.4rem !important; letter-spacing: 0.15em; } .collage-card { width: 180px; height: 280px; } } /* 12.5 横屏模式 (不论宽度, 只要高度 ≤ 500px) — 卡片更矮 */ @media (orientation: landscape) and (max-height: 500px) { .collage-card { width: 220px; height: 260px; } .life-collage-card-grid { gap: 10px; } }