/* ========================================================== portfolio-card-entry.css — 作品集样式: §5 入口卡 (STUDIO + LAB 双卡) — Backlog #152 ------------------------------------------------------------ 加载序: CSS 第 8 / 37 (index.html 第 8 个 ; 后加载的覆盖先加载的) ★ 全站 37 个 CSS 的完整加载序 + 职责表见 index.html 头注释「📂 文件结构速查」 (单一事实源 —— 旧版 19 个文件各抄一份清单, 且停在 25/26/28/31 四个旧版本; 加一个 CSS 要改 19 处, 编号还是"分组号"而非真实加载位, 现已收敛) [Backlog #152 · 2026-10-01] **portfolio-grid.css 按分节职责再拆 3 层。** Backlog #148 已把 14 个 @media 迁到 portfolio-grid-responsive.css; 本轮继续按**分节职责**把基础层切开, 从 1 个文件变成 4 个基础层: portfolio-grid.css 第 1 19 条 §1 主题聚拢 (Theme Clustering) portfolio-card.css 第 2 17 条 §2-§3 项目卡本体 + 卡片扩展 FX portfolio-entry.css 第 3 44 条 §4 作品集网格 + 项目卡完整定义 portfolio-card-entry.css 第 4 27 条 §5 入口卡 (STUDIO + LAB 双卡) portfolio-grid-responsive.css 第 5 最后 50 条 14 个 @media 响应式 + 覆盖节 (Backlog #148 已拆出, 本轮不动) ★ CORS 铁律: **禁 @import**。file:// 下 Origin=null, @import 会 **静默失败、整段样式丢失**(不报错, 只是不生效)。必须多个独立 靠标签顺序保证层叠顺序。 (禁 @import 的原因见 PROJECT_NOTES.md §13.1 零构建原则) ★ 加载顺序: 上面 5 层**必须按所标次序**排。四段基础层的相对顺序与 拆分前的规则顺序**完全一致**, 所以拆分本身不改变任何属性的计算值。 portfolio-grid-responsive.css 是纯覆盖层, 必须**最后**。 ★ 层叠中性 (Backlog #152 实测): 拆成 4 段后用浏览器 CSSOM (http:// 下 document.styleSheets) 取出**真实解析出的 107 条规则**, 对 819 个 (selector, 声明属性) 组合逐一求"最终胜出声明", 比较拆分前后两种顺序 —— **零差异**。原因: 跨节重复的顶层选择器只有 .project-card / .project-logo-wrapper / .project-logo 三个, 且重叠处的声明都带 `!important`, 而 !important 压过一切非 important 声明, 先后顺序不影响。 (CSS: !important > 非 important; 同为 important 时才比顺序) 本文件: §5 入口卡 (STUDIO + LAB 双卡) (CSSOM 实测 27 条规则) 持有 .portfolio-entry-grid / .portfolio-entry-card{,--architecture,--ai} / .entry-{emoji,title-en,title-cn,meta,meta-count,meta-themes,meta-codes,cta} / .portfolio-anchor / .portfolio-subsection-header* / .subsection-title-{en,cn} 等**入口卡**样式。Backlog #146/#150 修的 .entry-cta 右对齐 (width:100%) 就在本文件。 ========================================================== */ /* ========================================================== [Backlog #108 · 2026-09-29] Studio + Lab 双入口卡 + sub-section 标题 ------------------------------------------------------------ 用户原话: "把 portfolio 作品集分成两个部分: 1 建筑的 2 AI 的" 选择 Studio + Lab 双轴命名: Studio=建筑创作 / Lab=AI 实验探索 视觉: - 双入口卡: 2 列等宽, 大卡尺寸 (280-320px 高), 8 角切角 + 米白底 + 硬投影 (跟项目卡同铁律) - Architecture Studio: 深 teal 主色 #006478, 🏛️ emoji, 11 works · 5 themes · P M S C O - AI Lab: 紫色主色 #bf5af2 (跟 X1 tag-ai 一致), 🤖 emoji, 1 work · X1 - Sub-section 标题: 左对齐 + 英文 Cinzel + 中文 PingFang, 跟 year header 同节奏 ========================================================== */ /* [Backlog #182 · 2026-10-04] 三入口卡 grid 容器: 3 列等宽 (原 2 列)。 用户拍板「入口卡三卡并列」, Notes 插在 Architecture Studio 与 AI Lab 中间。 让三列并排的**唯一**原因是上面的 grid-template-columns: repeat(3, 1fr)。 实测修正 (2026-10-04 复验, 别再按旧注释推算): 本 grid 的宽度**不由 max-width 决定** —— 它是 .content-section .container (portfolio-layout.css:124, display:flex + flex-direction:column + align-items:flex-end, portfolio 是 nth-of-type(odd) 分支) 的**交叉轴子项**, align-items:flex-end 让它不 stretch, 于是走 shrink-to-fit, 宽度恒等于 max-content: 三列 1026px / 两列 679px / 单列 331px, 视口从 360 到 2560 都不变。 所以: - max-width 880 → 1300 是**当前不生效**的上限 (旧值 880 同样从未生效: 两列只有 679)。 保留 1300 是当安全阀, 不是三列成立的原因。 - 每张卡实测恒 331px, **不是**本注释早期版本写的 417px, 也不再 ≈ 改前的 428px。 卡面 .entry-meta 三个 span 实测等高 17px (未折行), 文案一个字不用改。 - #154 的「右对齐贴页缘」仍然成立: grid 右缘 2530 = container 右缘 2550 − padding-right 20。 */ .portfolio-entry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-7); /* [Backlog #154 · 2026-10-02] 改右对齐 (用户: "两个卡片要右对齐到整个页面的右侧, 整个内容都是页面居右排版的")。 旧: margin: var(--space-9) auto var(--space-10) auto —— 左右**都** auto = 双向自动外边距, 网格在自己的 .container (宽 1300, left=620 → right=1920) 里被居中。实测 grid 宽 637 (受 max-width:880 限制), 距**页面右缘 341px** —— 整块内容浮在右侧但离页边一大截, 与同区块的 .portfolio-subsection-header (距右缘仅 20px) 明显不同轴。 新: 跟 portfolio-entry.css 里 .portfolio-grid--ai / --architecture 的既有约定一致 (`margin: 30px 0 0 auto` = 只有左边 auto → 推到右边), 让这块入口卡真正贴页面右侧。 */ margin: var(--space-9) 0 var(--space-10) auto; /* [Backlog #251 · 2026-10-22] 1300 → **1080px**: 与 .portfolio-grid--architecture 的 max-width **逐值相同** ⇒ 两块网格的左右边缘**逐像素对齐**。 用户原话:「入口卡的尺寸偏大了, 我希望这三张入口卡排版上, 边缘和建筑作品集的边缘对齐」。 实测 (1440 视口): 改前网格 1218px (L=202 R=1420), 建筑网格 1080px (L=340 R=1420) —— 右边本来就齐 (都贴容器右缘), 差的是**左边**: 入口卡多伸出 138px。 限宽 1080 后: L=340 R=1420, 与建筑网格完全重合 ✓ 每张卡 395 → 349px。 ⚠ 本 grid 走 shrink-to-fit (宽度 = max-content), 所以 max-width 1300 其实 从未生效过 (max-content 只有 1218); 改成 1080 是**第一次让这个上限真正咬到**。 见文件上方「本 grid 的宽度不由 max-width 决定」那段注释。 */ max-width: 1080px; } /* 双入口卡基础样式: 跟项目卡同 8 角切角 + 米白底 + 硬投影 */ .portfolio-entry-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); /* [Backlog #251] 竖向内边距 24px → **16px**: 卡片限宽 1080 后 Notes 卡的码字行 会折到第二行, 若不收内边距, 卡片高度会**跟改前一样高**(231px) —— 用户要的是「尺寸偏大」, 两个方向都该收 (实测 395×231 → 349×215)。 */ padding: var(--space-7) 18px; background: var(--role-paper); border: 2px solid rgba(10, 31, 36, 0.12); border-left: 4px solid rgba(0, 80, 100, 0.6); border-radius: 0; /* [Backlog #108] 八角切角 (跟 .project-card 同铁律): */ 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 ); /* 双层硬投影 (paper-cut 物理感): */ box-shadow: 0 2px 0 rgba(10, 31, 36, 0.08), 0 6px 16px rgba(10, 31, 36, 0.12); text-decoration: none; color: rgba(10, 31, 36, 0.92); cursor: pointer; transition: all 0.25s ease; /* [Backlog #108 续 · 2026-09-29] z-index 提升到 130: .seaweed-label-layer (z=120) 内含 seaweed-label 子元素 (pointer-events: auto), 即使 opacity: 0 也会拦截 click. 提升 entry card 到 z=130 浮于 seaweed labels 之上, 确保点击不被背景海草层拦截. position: relative 创建独立 stacking context */ position: relative; z-index: 130; /* [Backlog #108 续 · 2026-09-29] pointer-events: auto !important: #content-wrapper { pointer-events: none } 是可继承属性, 沿父链传到 entry card (在 .container 里, 不是 .section-content 子树, .section-content 有显式 auto 但不在我们这条路径). 跟 .project-card 铁律一致 (portfolio-grid.css:468). 没有这个 !important, 即使 z-index=130 浮在 seaweed label 之上, 浏览器 hit-test 时仍会跳过 entry card → body 拦截. */ pointer-events: auto !important; } /* hover: 浮起 + 加深投影 + accent 色加深 */ .portfolio-entry-card:hover { transform: translateY(-3px); box-shadow: 0 2px 0 rgba(10, 31, 36, 0.1), 0 10px 24px rgba(10, 31, 36, 0.18); background: #f9f3e6; } /* Architecture Studio 主色 (深 teal) */ .portfolio-entry-card--architecture { border-left-color: rgba(0, 80, 100, 0.85); } .portfolio-entry-card--architecture:hover { border-left-color: rgba(0, 80, 100, 1); } /* AI Lab 主色 (紫色, 跟 X1 tag-ai 一致) */ .portfolio-entry-card--ai { border-left-color: rgba(191, 90, 242, 0.6); } .portfolio-entry-card--ai:hover { border-left-color: rgba(191, 90, 242, 0.95); } /* Notes 主色 (黄/古铜) — [Backlog #182] 零新增配色: #d4a55a 是 Notes 模块搬家前 --theme-color 就有的黄, #b87333 是 #174 卡片水印用的古铜。 */ .portfolio-entry-card--notes { border-left-color: rgba(212, 165, 90, 0.85); } .portfolio-entry-card--notes:hover { border-left-color: rgba(212, 165, 90, 1); } /* emoji: 居中, 大号 */ .entry-emoji { font-size:var(--icon-entry); line-height: 1; margin-bottom: var(--space-2); } /* 英文标题: Cinzel, 主色, 居中, 大写感 */ .entry-title-en { font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: var(--type-body); font-weight: 600; color: rgba(10, 31, 36, 0.92); letter-spacing: 0.14em; text-transform: uppercase; text-align: center; } .portfolio-entry-card--architecture .entry-title-en { color: rgba(0, 80, 100, 0.92); } .portfolio-entry-card--ai .entry-title-en { color: rgba(127, 60, 161, 0.92); } .portfolio-entry-card--notes .entry-title-en { color: rgba(176, 115, 51, 0.92); } /* 中文副标题: PingFang, 居中 */ .entry-title-cn { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", 'PingFang SC', 'Microsoft YaHei', sans-serif; font-size:var(--type-caption); color: rgba(10, 31, 36, 0.6); letter-spacing: 0.06em; text-align: center; } /* meta: 3 段 metadata 横排 (count / themes / codes) */ .entry-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); justify-content: center; /* [Backlog #251] **等高**: 三张入口卡的 meta 行高度必须一致, 否则 Notes 卡那行码字(8 个字母)撑到第二行, 它的 CTA 会比另两张低 11px。 min-height 40px = 两行 chip 的高度; align-content: flex-start 让 **第一行** chip 在三张卡里对齐(单行卡居中会低 11px)。 */ min-height: 40px; align-content: flex-start; /* [Backlog #251] **等高**: 三张入口卡的 meta 行高度必须一致, 否则 Notes 卡那行码字(8 个字母)撑到第二行, 它的 CTA 会比另两张低 11px。 min-height 40px = 两行 chip 的高度; align-content: flex-start 让 **第一行** chip 在三张卡里对齐(单行卡居中会低 11px)。 */ min-height: 40px; align-content: flex-start; margin-top: var(--space-3); font-family: var(--font-mono); font-size:var(--type-micro); color: rgba(10, 31, 36, 0.7); letter-spacing: 0.04em; } .entry-meta-count, .entry-meta-themes, .entry-meta-codes { padding: var(--space-1) var(--space-4); background: rgba(10, 31, 36, 0.06); border: 1px solid rgba(10, 31, 36, 0.1); border-radius: 0; } .portfolio-entry-card--architecture .entry-meta-codes { color: rgba(0, 80, 100, 0.85); font-weight: 600; } .portfolio-entry-card--ai .entry-meta-codes { color: rgba(127, 60, 161, 0.85); font-weight: 600; } .portfolio-entry-card--notes .entry-meta-codes { color: rgba(176, 115, 51, 0.85); font-weight: 600; } /* CTA: 跳转箭头提示 */ .entry-cta { margin-top: var(--space-4); font-family: 'Cinzel', sans-serif; font-size:var(--type-caption-sm); font-weight: 500; color: rgba(10, 31, 36, 0.55); letter-spacing: 0.1em; /* [Backlog #146 · 2026-10-01] 右对齐 (用户: "studio+lab 这部分的建筑和ai的按钮, 右对齐") 为什么必须写 align-self 而不是只写 text-align: 卡片是 `display:flex; flex-direction:column; align-items:center`, 所以 .entry-cta 作为 flex item 默认**盒子本身就居中**。实测改前 ARCH 卡 CTA 左右 gap = 40 / 38, AI 卡 = 92 / 90 —— 近乎相等, 证明是居中。 而 text-align 早就是 right (从祖先继承), 只是盒子居中导致看不出效果。 align-self: flex-end 把盒子推到内容盒右缘, 两张卡的箭头才会真正对齐成一条线, 同时对齐全站「右对齐设计语言」(与 Reading 模态 / 卡片标题同一取向)。 */ align-self: flex-end; /* 显式声明而非依赖继承: 一旦某天祖先的 text-align 变了, 这里仍保持右对齐 */ text-align: right; /* [Backlog #150 · 2026-10-01] 补 width: 100% —— #146 只加 align-self 是不够的。 根因: 卡片是 flex column + align-items:center, .entry-cta 作为 flex item 宽度是 shrink-to-fit (实测 ARCH 197px / AI 92.7px, 卡内容宽约 274px)。 align-self: flex-end 只是把这个**窄块**推到右缘, 块内文字正好占满块宽, text-align: right 因此没有任何余量可作用 → 观感仍是"居中偏左"。 加 width: 100% 后盒子撑满内容宽, 文字才真正贴到卡内右缘, 与下方 chip 行 (右侧 padding 18px) 的右缘成一条线。 */ width: 100%; /* 不同宽度适配: 卡片宽度 311px (≤768px 变 1 列, ≤320px 视口收到 277px), width:100% 后 CTA 盒 = 卡内容宽, 恒不溢出。文案变长或字体回退时 会正常换行, 而 text-align:right 使换行后的每一行仍右对齐。与 §8 铁律 「硬边 + 不溢出」一致。 */ max-width: 100%; } .portfolio-entry-card--architecture .entry-cta { color: rgba(0, 80, 100, 0.7); } .portfolio-entry-card--ai .entry-cta { color: rgba(127, 60, 161, 0.7); } .portfolio-entry-card--notes .entry-cta { color: rgba(176, 115, 51, 0.7); } /* 锚点 (用于 entry card click scrollTo) — 不可见, scrollTo 手动加 -80px 偏移抵消固定 nav */ .portfolio-anchor { display: block; position: relative; visibility: hidden; } /* Sub-section 标题 (Architecture Studio / AI Lab) */ .portfolio-subsection-header { display: flex; align-items: baseline; gap: var(--space-7); padding: 18px 0 var(--space-6) 0; margin: var(--space-4) 0 var(--space-3) 0; border-bottom: 2px solid rgba(10, 31, 36, 0.08); font-family: 'Cinzel', sans-serif; } .portfolio-subsection-header--architecture { border-bottom-color: rgba(0, 80, 100, 0.25); } .portfolio-subsection-header--ai { border-bottom-color: rgba(191, 90, 242, 0.3); } .portfolio-subsection-header--notes { border-bottom-color: rgba(212, 165, 90, 0.3); } .subsection-title-en { font-size: var(--type-section-sm); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .portfolio-subsection-header--architecture .subsection-title-en { color: rgba(0, 80, 100, 0.92); } .portfolio-subsection-header--ai .subsection-title-en { color: rgba(127, 60, 161, 0.92); } .portfolio-subsection-header--notes .subsection-title-en { color: rgba(176, 115, 51, 0.92); } .subsection-title-cn { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", 'PingFang SC', 'Microsoft YaHei', sans-serif; font-size:var(--type-caption); font-weight: 400; color: rgba(10, 31, 36, 0.55); letter-spacing: 0.06em; }