/* ========================================================== [DEAD · Backlog #67 排队清理 · 2026-09-07] seaweed-frame.css — 海草框组件 (Seaweed Frame Component) 详情: PROJECT_NOTES.md §9.44 + §0 / WORKFLOW.md §4 (Backlog #60 后被 seaweed-branch-modal.js 替代, Backlog #66 后 0 活跃 caller) ------------------------------------------------------------ 物理拆分层, 不使用 CSS @import, 在 file:// 协议下零跨域错误。 在 index.html 中按顺序引入 (后加载覆盖前加载): 1. base.css (基础层: 重置 + 全局变量) 2. scene.css (场景层: 海草 + 潜水员) 3. ... 15. seaweed-frame.css ← 本文件 (Backlog #57 阶段 ①: 框组件算法层) 16. about-me.css (业务层, 仍持有旧的 .about-me-card 直至阶段 ②) 17. responsive.css (全局响应兜底) 完整文件结构与职责归属见 [WORKFLOW.md §4](./WORKFLOW.md). 包含 (Backlog #57 阶段 ①): 1. .seaweed-frame 基础类 (透明 position-relative flex column) 2. --field 变体: 无框场域 (原 about-me-card 形态, Backlog #51) · 透明 + radial-gradient 白光晕 · backdrop-filter blur(8px) [TD-4 软违规, 浮层允许] · 0 border / 0 box-shadow / 0 clip-path · 文字深色 (rgba(10, 31, 36, 0.x)) 3. --paper 变体: 硬切角卡纸 (原 life-*.collage-card / portfolio .project-card 形态) · 莫兰迪浅色背景 (var(--frame-bg, #fbf8f5)) · 八角形 12px clip-path · 双层硬投影 + 顶部 3.5px 描边纸带 · 切面细线 ::after 4. 子元素 slot (BEM 命名): · .seaweed-frame__bg 光晕/纸感底 (mode-dependent) · .seaweed-frame__content 文字容器 (z-index 1, pointer-events 由父决定) · .seaweed-frame__accent 主题色微表达 (field: 顶部 1px 雾, paper: 3.5px 描边) · .seaweed-frame__watermark 大字母水印 (Backlog #57 用户拍板: 保留) 5. CSS 变量 (业务方可在父元素上覆写): · --frame-accent: 主题色 (默认 rgba(10, 31, 36, 0.25), Backlog #62 紫去化后) · --frame-bg: 背景色 (仅 paper 模式生效, 默认 #fbf8f5) · --frame-radius: 切角尺寸 (仅 paper 模式生效, 默认 12px) · --frame-tilt: 静态旋转 (默认 0deg, about-me-card 用 -3deg 覆写) 6. Hover 状态 (两种 mode 共享节奏, 视觉差异): · field: translateY(-4px) + 光晕加强 (radial 范围 60%→65%) · paper: translateY(-5px) + 投影加深 + 顶部主题色 7. 响应式 fallback: · ≤768px 关闭 backdrop-filter (移动端性能), 改用 ::before 静态白色微染 · ≤480px 关闭 3.5px 描边 (纸带在小屏视觉重量过大) 【深海纸雕铁律合规】 - 不透明: --field 变体透明, 但 z-index + 父级 stacking context 保护 - 硬边: --field 无 clip-path (无形场域); --paper 八角 12px 与 life/portfolio 严格一致 - 物理投影: --field 0 (光晕替代); --paper 双层硬投影 (3px 4px 0 + 0 6px 14px + inset 1px 0) - 纸带: --paper::before 顶部 3.5px 描边, --field 无 (无形不需) - TD-4 软违规: --field 用 backdrop-filter 8px (浮层允许, 与 about-me-card 保持一致) 【Backlog #57 用户拍板】 - 海草克制: 框本身不抢戏, 不引入新视觉重量 - 字母水印保留: 业务方可在 frame 内放 .seaweed-frame__watermark - 阶段 ①+② 一起做: 阶段 ① 算法层 (本文件) + 阶段 ② about-me 自身切换 【阶段 ① 范围 (本文件 0 业务侵入)】 - 本文件创建后, 业务方 (about-me.css / life-*.css / portfolio-*.css) 仍持有旧实现 - 阶段 ② 才把 about-me.css 的 .about-me-card 改为引用 .seaweed-frame--field - 阶段 ③ 才推广到 life × 4 + portfolio × 8 - 本文件不依赖任何业务文件, 可独立单元测试 ========================================================== */ /* ========================================================== 1. 基础类 .seaweed-frame (无视觉, 仅结构与过渡节奏) ------------------------------------------------------------ 业务方必须显式加 --field / --paper 变体, 否则 .seaweed-frame 默认是无视觉的"空框" (透明 + 0 尺寸提示), 不渲染。 这样强制业务方选 mode, 避免误用导致视觉漂移. ========================================================== */ .seaweed-frame { position: relative; display: flex; flex-direction: column; box-sizing: border-box; /* 业务方可覆写的局部变量 (默认值兜底) */ --frame-accent: rgba(10, 31, 36, 0.25); /* Backlog #62 紫去化后深色微染 */ --frame-bg: #fbf8f5; /* 仅 paper 模式生效 */ --frame-radius: 12px; /* 仅 paper 模式生效 */ --frame-tilt: 0deg; /* 静态旋转, about-me 用 -3deg */ /* 通用过渡节奏 (field / paper 共用, hover 视觉各自定义) */ transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1), background 0.6s cubic-bezier(0.25, 1, 0.5, 1); will-change: transform; } /* ========================================================== 2. 变体 --field (无框场域, Backlog #51 形态) ------------------------------------------------------------ 透明 + radial-gradient 白光晕 + backdrop-filter blur 浮在米白底上, 像"水中的文字", 没有任何硬边界 业务方常需覆写: width / height / padding / transform: rotate(--frame-tilt) ========================================================== */ .seaweed-frame--field { background: radial-gradient( ellipse 60% 50% at center, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.55) 35%, rgba(255, 255, 255, 0.18) 75%, rgba(255, 255, 255, 0) 100% ); backdrop-filter: blur(8px) saturate(1.05); -webkit-backdrop-filter: blur(8px) saturate(1.05); border: none !important; border-radius: 0 !important; box-shadow: none !important; clip-path: none !important; transform: rotate(var(--frame-tilt, 0deg)); -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; cursor: pointer; } /* Hover: 抬升 -4px + 光晕扩散 (radial 范围 60% → 65%, 中心 alpha 0.88 → 0.95) Backlog #51 验证: 用 backdrop-filter blur 加强替代原 box-shadow 加深 */ .seaweed-frame--field:hover { transform: rotate(var(--frame-tilt, 0deg)) translateY(-4px); backdrop-filter: blur(12px) saturate(1.12); -webkit-backdrop-filter: blur(12px) saturate(1.12); background: radial-gradient( ellipse 65% 55% at center, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.65) 35%, rgba(255, 255, 255, 0.22) 80%, rgba(255, 255, 255, 0) 100% ); } /* Active: 下沉 +1px, 降低 backdrop-filter (物理按下) */ .seaweed-frame--field:active { transform: rotate(var(--frame-tilt, 0deg)) translateY(1px); backdrop-filter: blur(6px) saturate(1.0); -webkit-backdrop-filter: blur(6px) saturate(1.0); } /* ========================================================== 3. 变体 --paper (硬切角卡纸, life/portfolio 原形态) ------------------------------------------------------------ 莫兰迪浅色 + 八角形 12px clip-path + 双层硬投影 + 顶部 3.5px 描边 业务方常需覆写: width / height / padding ========================================================== */ .seaweed-frame--paper { background: var(--frame-bg, #fbf8f5); border: none !important; border-radius: 0 !important; overflow: hidden; transform: rotate(var(--frame-tilt, 0deg)); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; /* 八角形刻刀切角 (12px 斜切, 与 life/portfolio 严格一致) */ clip-path: polygon( var(--frame-radius, 12px) 0%, calc(100% - var(--frame-radius, 12px)) 0%, 100% var(--frame-radius, 12px), 100% calc(100% - var(--frame-radius, 12px)), calc(100% - var(--frame-radius, 12px)) 100%, var(--frame-radius, 12px) 100%, 0% calc(100% - var(--frame-radius, 12px)), 0% var(--frame-radius, 12px) ); /* 双层硬投影 (3px 4px 0 主 + 0 6px 14px 副 + inset 1px 0 卡纸顶高光) */ 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); } /* Hover: 抬升 -5px + 投影加深 + 顶部主题色 (Backlog #62 紫去化后, 默认深色微染) */ .seaweed-frame--paper:hover { transform: rotate(var(--frame-tilt, 0deg)) translateY(-5px); 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); --frame-accent: var(--frame-accent-active, var(--frame-accent)); } /* Active: 缩小 0.96 + 下沉 2px (物理按下) */ .seaweed-frame--paper:active { transform: rotate(var(--frame-tilt, 0deg)) scale(0.96) translateY(2px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); filter: brightness(0.8); } /* ::before 顶部 3.5px 描边纸带 (与 life/portfolio 原 ::before 视觉一致) */ .seaweed-frame--paper::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--frame-accent) 0px, var(--frame-accent) 3.5px, transparent 3.5px, transparent 100% ); clip-path: polygon( 0 var(--frame-radius, 12px), var(--frame-radius, 12px) 0, calc(100% - var(--frame-radius, 12px)) 0, 100% var(--frame-radius, 12px) ); z-index: 3; } /* ::after 切面细线 (clip-path 后重描, 让八角形边缘清晰) */ .seaweed-frame--paper::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; } /* ::after 边色随 hover 加深 (与 life/portfolio 原 ::after hover 行为一致) */ .seaweed-frame--paper:hover::after { border-color: rgba(0, 3, 10, 0.22); } /* ========================================================== 4. 子元素 slot (BEM 命名) ========================================================== */ /* 4.1 文字容器 (默认不抢 hit-area, 整框可点) */ .seaweed-frame__content { position: relative; z-index: 1; pointer-events: none; } /* 4.2 背景层 (field 模式: 静态光晕替身, paper 模式: 背景图/纹理预留) 默认透明, 业务方按需覆写. field 模式本身已用 radial-gradient, 这里给"想加额外纹理" 的业务方留扩展位 */ .seaweed-frame__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; } /* 4.3 主题色微表达 (仅 --field 模式有效, paper 模式用 ::before 描边) 业务方可在 :hover / .is-active 时改 --frame-accent 实现"一抹微光" 默认: 顶部 1px 高雾, opacity 0, hover 时显现 */ .seaweed-frame--field .seaweed-frame__accent { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--frame-accent); opacity: 0; transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1); pointer-events: none; z-index: 2; } .seaweed-frame--field:hover .seaweed-frame__accent { opacity: 1; } /* 4.4 大字母水印 (Backlog #57 用户拍板: 保留) 默认 Cinzel 衬线 12rem, 主题色 0.07 透明, 居中 业务方可在父元素用 [data-watermark="X1"] 覆写 content */ .seaweed-frame__watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'Cinzel', 'Playfair Display', serif; font-size: 12rem; font-weight: 900; line-height: 1; color: var(--frame-accent); opacity: 0.07; z-index: 0; pointer-events: none; user-select: none; letter-spacing: -0.04em; text-transform: uppercase; } /* ========================================================== 5. 响应式 fallback (Backlog #57 阶段 ④ 性能优化前置) ------------------------------------------------------------ 移动端 backdrop-filter 性能差 (Chrome 合成 bug, Backlog #59-fix 系列 教训), 关掉并用 ::before 静态白色微染替代, 保持"形" 但丢"光" ========================================================== */ /* 5.1 ≤768px: 关闭 backdrop-filter, 改静态 alpha */ @media (max-width: 768px) { .seaweed-frame--field { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255, 255, 255, 0.65); } .seaweed-frame--field:hover { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255, 255, 255, 0.75); } .seaweed-frame--field:active { backdrop-filter: none; -webkit-backdrop-filter: none; } } /* 5.2 ≤480px: paper 模式关闭 3.5px 描边 (纸带在小屏视觉重量过大) */ @media (max-width: 480px) { .seaweed-frame--paper::before { display: none; } } /* ========================================================== 6. 减少动效 (Reduced Motion) ------------------------------------------------------------ 用户系统设置 prefers-reduced-motion: reduce 时, 关闭 hover 抬升 但保留 opacity / background 过渡 (避免完全无反馈) ========================================================== */ @media (prefers-reduced-motion: reduce) { .seaweed-frame--field:hover, .seaweed-frame--paper:hover { transform: rotate(var(--frame-tilt, 0deg)); /* 取消 translateY */ } .seaweed-frame--field:active, .seaweed-frame--paper:active { transform: rotate(var(--frame-tilt, 0deg)); /* 取消 translateY(1px) / scale */ } }