# 琉璃 · Glassmorphism 毛玻璃式律师名片。深色底上浮着几团静态柔光，所有内容装在真毛玻璃卡片里：`backdrop-filter` 模糊折射底光，配 1px 内边与 inset 高光做出玻璃的物理边缘。 ## 一句话定位 像一块悬在暗室里的磨砂玻璃，冷、透、有厚度。 ## 设计参数 | 项 | 取值 | | --- | --- | | 底色 | 深夜蓝 `#0B1220` | | 背景光斑 | `#1E4E6B` / `#3A2C63` / `#1B5E55`，各 `blur(90px)` | | 强调色 | 冷青 `#7FD8C8`，次级 `#9DB8FF` | | 玻璃面 | `rgba(255,255,255,.07)` + `blur(24px) saturate(160%)` | | 玻璃边缘 | 1px `rgba(255,255,255,.14)` + `inset 0 1px 0 rgba(255,255,255,.18)` | | 字体 | 标题宋体（Songti SC / Noto Serif SC），正文无衬线 | | 圆角 | `18px`（玻璃厚度感） | | 阴影 | `0 18px 50px rgba(0,0,0,.32)` 外投影 + inset 高光 | | 动效强度 | 3 / 10（仅一次性淡入 + 悬停微移） | ## 版式家族 1. **Hero** 双栏（1.15 : 0.85），左为信息玻璃卡，右为肖像玻璃卡 2. **擅长领域** 整幅玻璃面板，领域走胶囊标签 3. **工作经历** 玻璃面板内嵌时间轴，半透明发丝线分隔 4. **专业领域** 两张并排玻璃卡 5. **办公机构** 玻璃行动条，地址与地图按钮左右分置 ## 交互与可访问性 - 单一行动号召「立即咨询」，直连 `tel:` 拨号 - 移动端底部浮动咨询条，适配 `env(safe-area-inset-bottom)` - **`prefers-reduced-transparency: reduce` 下自动关闭毛玻璃**，改用实色 `#152238` 保证文字可读（毛玻璃最大的可访问性风险就此消除） - `prefers-reduced-motion` 下关闭全部动效 - 语义化标签 + `:focus-visible` 青色焦点环 ## 深色模式 页面本身即深色，不随系统切换。这是毛玻璃的必要条件：玻璃需要底下有光可折射，浅底上毛玻璃效果会失效。 ## 适合谁 面向年轻客群、互联网/新媒体行业客户，或希望在同行名片中显得"不传统"的律师。注意：年长客户可能觉得过于花哨。 ## 与其他版本的差异 - 唯一使用 **`backdrop-filter` 真毛玻璃**的版本 - 唯一做 **`prefers-reduced-transparency` 降级**的版本 - 强调色冷青，与墨衡（靛蓝）、清简（朱橙）、夜航（青绿）、青瓷（松绿）、硬派（警示黄）、流光（青紫）、叠序（铜橙）均不撞色 ## 透明抠图适配 律师照已抠去背景（透明 PNG/WebP）。深色底上直接放透明人像会导致深色西装与背景融合，因此肖像区加了**浅色径向衬底**（`#F2F6FA → #D8E2EC → #B9C6D4`），并用 `object-fit: contain` 保证人物不被裁切。 ## 改内容的位置 - 姓名、律所、地址、电话、邮箱：搜索 `
` 与 `

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