# 流光 · Aurora / Mesh Gradient 极光渐变式律师名片。三团大面积极光（青绿 / 紫 / 暖橙）在底层缓慢漂移，内容浮在半透明白卡上，标题用渐变文字收住视线。 ## 一句话定位 像北方夜空里缓慢流动的极光，柔和、有呼吸感，但不喧宾夺主。 ## 设计参数 | 项 | 取值 | | --- | --- | | 底色 | 瓷白 `#FAFAF8` | | 极光三色 | 青绿 `#5FD8C0` / 紫 `#A79BF5` / 暖橙 `#F7C09A` | | 极光处理 | 各 `blur(72px)` + `mix-blend-mode: multiply`，透明度 `.5` | | 极光动效 | 26s / 32s / 29s 三组不同步漂移，alternate 往复 | | 强调色 | 松绿 `#1F7A6B`，次级紫 `#5B4BC4` | | 卡面 | `rgba(255,255,255,.74)` + `blur(16px) saturate(140%)` | | 字体 | 标题宋体（Songti SC / Noto Serif SC），正文无衬线 | | 圆角 | `20px` | | 按钮 | 胶囊形 `999px` + 渐变填充 | | 动效强度 | 5 / 10（极光持续漂移 + 淡入 + 悬停） | ## 版式家族 1. **Hero** 双栏（1.15 : 0.85），姓名用青绿到紫的渐变文字 2. **擅长领域** 半透明面板，领域走胶囊标签 3. **工作经历** 面板内嵌时间轴，年份用紫色标记 4. **专业领域** 两张并排半透明卡 5. **办公机构** 行动条，地址与地图按钮左右分置 ## 交互与可访问性 - 单一行动号召「立即咨询」，直连 `tel:` 拨号 - 移动端底部浮动咨询条，适配 `env(safe-area-inset-bottom)` - **`prefers-reduced-motion` 下极光完全静止**（保留静态渐变，视觉不塌） - `prefers-reduced-transparency: reduce` 下卡片改实色白底，保证文字对比度 - 语义化标签 + `:focus-visible` 松绿焦点环 - 极光层 `aria-hidden` 且 `pointer-events: none`，不干扰阅读与点击 ## 深色模式 不做深色切换。极光是浅底美学，深色下 multiply 混色会失效，强行适配反而丢掉本风格的核心特征。 ## 适合谁 希望名片有记忆点、面向年轻或创意行业客户、又不想过分跳脱的律师。极光的柔和高饱和在微信分享缩略图里特别抓眼。 ## 与其他版本的差异 - 唯一使用**大面积流动渐变背景**的版本 - 唯一做**渐变文字标题**（青绿到紫）的版本 - 唯一由三层不同步动画构成氛围的版本 - 强调色松绿 + 紫，与其他七套均不撞色 ## 透明抠图适配 律师照已抠去背景（透明 PNG/WebP）。肖像区配**冷调浅色衬底**（`#FFFFFF → #EAF3F0 → #D6E4E6`），与底部青绿极光呼应；`object-fit: contain` 保证人物完整不裁切。 ## 改内容的位置 - 姓名、律所、地址、电话、邮箱：搜索 `
` 与 `

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