# 叠序 · Sticky-Stack 卡片层叠式律师名片。五个板块各占一张卡片，向下滚动时每张卡吸顶停住，后一张滚上来盖住它，被盖住的那张轻微缩小后退，形成真实的物理层叠。 ## 一句话定位 像一叠摊在桌上的卷宗，一页压一页往下翻。 ## 设计参数 | 项 | 取值 | | --- | --- | | 底色 | 纸灰 `#F4F4F2` | | 卡面 | 纯白 `#FFFFFF` | | 正文墨色 | 墨蓝黑 `#1B2A3A`，次级 `#4A5765` | | 强调色 | 铜橙 `#C2703A` | | 分隔线 | `rgba(27,42,58,.1)` | | 字体 | 标题宋体（Songti SC / Noto Serif SC），正文无衬线 | | 圆角 | `16px`（卡片）/ `12px`（内块） | | 阴影 | 常态 `0 6px 22px`，被覆盖时降到 `0 2px 10px` | | 吸顶位置 | 桌面 `top: 84px`，平板 `70px`，手机 `60px` | | 动效强度 | 5 / 10（层叠缩放 + 淡入 + 悬停） | ## 层叠机制（5.A Sticky-Stack 骨架） 用原生 CSS `position: sticky` 实现，**不引入 GSAP**，保证单文件可独立部署： ``` .stack-card { position: sticky; top: 84px; } .stack-card.is-covered { transform: scale(.965); opacity: .55; } ``` 再由 IntersectionObserver 判断卡片是否已被后一张盖住（卡片顶部滚出视口上方时加 `is-covered`）： ```js new IntersectionObserver(..., { threshold: 0, rootMargin: '-84px 0px 0px 0px' }) ``` 关键点：这是**真实吸顶层叠**（卡片真的停在视口顶被后一张覆盖），不是"依次淡入的列表"。后者是常见假实现。 ## 版式家族（五张卡） 1. **名片卡** 双栏，左信息右肖像 + 二维码 2. **擅长领域卡** 正文 + 圆角标签 3. **工作经历卡** 时间轴 4. **专业领域卡** 两个内嵌信息块 5. **办公机构卡** 地址 + 地图按钮 ## 交互与可访问性 - 单一行动号召「立即咨询」，直连 `tel:` 拨号 - 移动端底部浮动咨询条，适配 `env(safe-area-inset-bottom)` - `prefers-reduced-motion` 下：关闭缩放与淡入过渡，**但保留 sticky 吸顶**（吸顶本身不是动效，去掉反而破坏结构） - 不支持 IntersectionObserver 的浏览器：卡片全部直接显示，层叠降级为普通堆叠，不白屏 - 语义化标签 + `:focus-visible` 铜橙焦点环 ## 深色模式 不做深色切换。层叠卡片的纵深感依赖白卡投影在浅灰底上的明暗对比，深色下这套层次会消失。 ## 适合谁 希望客户"一屏一屏往下看"、信息密度适中、喜欢阅读节奏感的律师。层叠让长内容也有推进感，适合主要通过微信转发的场景。 ## 与其他版本的差异 - 唯一的**卡片层叠滚动**结构（其余七套都是常规纵向流式） - 唯一把每个板块做成**独立吸顶卡片**的版本 - 强调色铜橙，与墨衡（靛蓝）、清简（朱橙）、夜航（青绿）、青瓷（松绿）、硬派（警示黄）、琉璃（冷青）、流光（青紫）均不撞色 ## 透明抠图适配 律师照已抠去背景（透明 PNG/WebP）。肖像区配**暖调浅色衬底**（`#FBFAF8 → #EEEDE8 → #DFDDD5`），与铜橙强调色同属暖系；`object-fit: contain` 保证人物完整不裁切。 ## 改内容的位置 - 姓名、律所、地址、电话、邮箱：搜索 `
` 与 `

` - 擅长领域：`id="fields"` - 工作经历：`id="career"` 的 `