宠物诊断

Prompt

构建一个**完全自包含的单个 `index.html`** 文件。无需构建步骤、框架、外部
JS 或本地图像文件。所有 CSS 放在 `<head>` 内的一个 `<style>` 块中；在 `</body>`
前放置一个小型 `<script>`。严格匹配下文的每个数值——布局由测量数据驱动，而非
凭目测判断。

---

## 1. 资源（仅限远程资源——使用以下精确 URL）

**Hero video（桌面端，自动播放背景）——1928×1076、8.04 s、H.264 MP4、静音：**
```
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260814_034538_de4032ce-5035-473d-a5b1-0e2224635a6a.mp4
```

**Hero still（桌面端）——同时作为视频的 poster 和 reduced-motion 画面：**
```
https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/193afe38-41fa-4454-9d48-ed154b66d17c.png
```

**Hero still（移动端，9:16 portrait crop）：**
```
https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/44c2e930-23df-4ffb-98bc-02b0f7014028.png
```

**Open Graph 分享图：**
```
https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/0308ea65-1b37-4171-80f8-7d2eaacf1280.png
```

四项资源呈现的是同一场景：一只金毛寻回犬躺在画面 left third of frame 的低矮深胡桃木狗床上，
头转向 camera；右侧有一位背对镜头的人，身穿橄榄绿色罗纹针织毛衣，坐在抛光混凝土地面上；
他们身后是黑色边框的落地窗，窗外可见虚化的金色山丘；最左侧边缘有一盆棕榈类室内植物。采用温暖的
late-afternoon grade。

---

## 2. 字体

Google Fonts，通过 `preconnect` 加载 `fonts.googleapis.com` 和 `fonts.gstatic.com`
（后者带有 `crossorigin`）：

```html
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
```

- **Instrument Serif 400**——仅用于标题。
- **Inter 400 / 500 / 600**——用于其他所有内容。
- 正文字体栈：`"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif`
- 标题字体栈：`"Instrument Serif", Georgia, "Times New Roman", serif`
- 在 `body` 上启用 `-webkit-font-smoothing: antialiased` 和 `-moz-osx-font-smoothing: grayscale`。

---

## 3. Head

```
<title>Lume — 读取 120+ 项健康指标，由顶级兽医解读。</title>
meta description: 读取 120+ 项健康指标。由顶级兽医提供指导。总价仅 $349。与领先的兽医研究专家共同打造。
og:title:       Lume — 读取 120+ 项健康指标
og:description: 由顶级兽医提供指导。总价仅 $349。
og:image:       <上方的 OG url>
viewport:       width=device-width, initial-scale=1
```

---

## 4. 设计 token 与全局重置

```css
:root{ --cream:#eef0d0; --ink:#101010; }
*,*::before,*::after{ box-sizing:border-box; }
body{
  background:#0d0d0d;
  overflow-x:hidden;
  color:var(--ink);
}
```

`#eef0d0` 是用于高亮品牌列和主按钮的淡奶油色。
`#0d0d0d` 是 hero band 下方可见的近黑色页面底色。

---

## 5. 区块几何——full-bleed、fluid measure

页面是**一个 full-bleed hero band**。没有灰色页面边框、没有带 max-width 的页面
外壳、没有圆角，区块上也没有投影。

```css
.hero{
  position:relative;
  width:100%;
  height:min(92vh, 62vw);
  min-height:600px;
  overflow:hidden;
  isolation:isolate;
}
```

其内部由一个 **measure container** 容纳标题和表格。下方每个 `cqw`
值都以它为基准解析，而且它会随显示器增大，使字体在大屏幕上放大、在小屏幕上
缩小：

```css
.hero__inner{
  position:absolute;
  inset:0;
  z-index:2;
  width:100%;
  max-width:min(100%, clamp(1080px, 82vw, 1700px));
  margin-inline:auto;
  container-type:inline-size;
}
```

**nav 特意不放在 `.hero__inner` 内**——它是 `.hero` 的直接子元素，因此会像普通网站页眉一样
位于真正的页面边缘。其他所有内容都放在 measure 内。

最终字体比例（请对照这些数值验证）：

| Viewport | Measure | 标题 | 按钮 | 表格文字 |
|---|---|---|---|---|
| 1024 | 1024 | 20.8px | 10px | 9.4px |
| 1280 | 1080 | 21.9px | 10px | 9.9px |
| 1440 | 1181 | 24.0px | 10px | 10.9px |
| 1920 | 1574 | 32.0px | 12.4px | 14.5px |
| 2560+ | 1700 | 34.5px | 13.4px | 15.6px |

---

## 6. 媒体层

三个层叠元素，均为 `.hero__media`，全部使用绝对定位并覆盖容器：

```css
.hero__media{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 50%;
  z-index:0;
  filter:saturate(1.06) contrast(1.04) brightness(.97);
}
.hero__media--mobile{ display:none; }
```

DOM 中的顺序：桌面端 `<img>`、移动端 `<img>`，然后是位于最上层的 `<video>`。

```html
<img class="hero__media hero__media--desktop" src="…193afe38….png"
     alt="一个人坐在阳光充足的客厅里，身旁是他们的金毛寻回犬"
     fetchpriority="high" decoding="async">
<img class="hero__media hero__media--mobile" src="…44c2e930….png"
     alt="" aria-hidden="true" decoding="async">
<video class="hero__media hero__media--desktop hero__video" src="…de4032ce….mp4"
       autoplay muted loop playsinline preload="auto" aria-hidden="true" tabindex="-1"></video>
```

视频初始时透明，只有在确实能够播放后才 cross-fades in，因此连接较慢时会显示静态图，
而不是黑帧：

```css
.hero__video{ opacity:0; transition:opacity .9s ease; }
.hero__video.is-ready{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .hero__video{ display:none; } }
```

---

## 7. 叠加渐变

在 `.hero` 上仅使用一个 `::after`，设置 `z-index:1`、`pointer-events:none`，按以下顺序层叠
三层——两层用于保证文字可读性，一层暖色调用于统一 grade：

```css
background:
  linear-gradient(to bottom, rgba(0,0,0,.30) 0%, rgba(0,0,0,.09) 20%, rgba(0,0,0,0) 38%),
  linear-gradient(to top,    rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 26%),
  linear-gradient(120deg,    rgba(120,64,18,.14), rgba(150,96,32,.10));
```

---

## 8. Nav

```css
.nav{
  position:absolute; top:0; left:0; right:0;
  z-index:4;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(16px,2vw,34px) clamp(18px,3.2vw,56px);
}
.brand{
  display:flex; align-items:center; gap:.42em;
  color:#fff;
  font-size:clamp(15px,1.15vw,23px);
  font-weight:500;
  letter-spacing:-.014em;
  text-decoration:none;
}
.brand__mark{ width:1.02em; height:1.02em; flex:none; display:block; }
```

**品牌标志——一轮新月**（契合名称 "Lume"），16×16 viewBox，使用 `fill="currentColor"`
使其在 nav 中继承白色，在表格表头中继承近黑色：

```html
<svg class="brand__mark" viewBox="0 0 16 16" fill="none" aria-hidden="true">
  <path d="M11.35 1.55a7 7 0 1 0 0 12.9 7.65 7.65 0 0 1 0-12.9Z" fill="currentColor"/>
</svg>
```

文字标志：`Lume`。右侧：一个深色按钮，文字为 `立即开始`。

---

## 9. 按钮

```css
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border:0; cursor:pointer; text-decoration:none; white-space:nowrap;
  font-family:inherit; font-weight:500;
  letter-spacing:-.006em;
  border-radius:999px;
  transition:background-color .18s ease, transform .18s ease;
}
.btn:active{ transform:translateY(1px); }

.btn--dark{                      /* nav */
  background:#0b0b0b; color:#fff;
  font-size:clamp(12px,.88vw,18px);
  padding:.86em 1.32em;
}
.btn--dark:hover{ background:#242424; }

.btn--cream{                     /* hero 中的主按钮 */
  background:var(--cream); color:#16160f;
  font-size:1em; padding:.9em 1.35em;
}
.btn--cream:hover{ background:#f3f5da; }

.btn--glass{                     /* hero 中的次要按钮 */
  background:rgba(255,255,255,.19); color:#fff;
  font-size:1em; padding:.9em 1.35em;
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
}
.btn--glass:hover{ background:rgba(255,255,255,.28); }
```

---

## 10. 标题块

```css
.hero__copy{
  position:absolute; z-index:3;
  left:50%; top:16.75%;
  transform:translateX(-50%);
  width:min(94%, 66cqw);
  text-align:center;
  color:#fff;
}
.hero__title{
  margin:0;
  font-family:"Instrument Serif",Georgia,"Times New Roman",serif;
  font-weight:400;
  font-size:max(17px, 2.03cqw);
  line-height:1.15;
  letter-spacing:.004em;
  text-shadow:0 1px 14px rgba(0,0,0,.30);
}
.hero__actions{
  display:flex; align-items:center; justify-content:center;
  gap:.55cqw;
  margin-top:1.66cqw;
  font-size:max(10px, .79cqw);
}
```

`max()` 下限至关重要：没有它们，当 fluid measure 在较窄的桌面端缩小时，表格文字会降到
8px 以下。不要将它们替换为普通的 `cqw`。

两行文字，通过显式 `<br>` 分隔（而不是自然换行）：

```html
<h1 class="hero__title">
  读取 120+ 项健康指标。由顶级兽医提供指导。总价仅 $349。<br>
  与领先的兽医研究专家共同打造
</h1>
```

然后是两个按钮：奶油色 `立即开始`、玻璃效果 `预约与我们通话`。

---

## 11. 对比表——分层技巧

这是最需要细致处理的部分。该表格**不是** `<table>`。它是由松散 `div` 组成的 CSS grid，
叠放在三个独立定位的背景面板上，使奶油色品牌列可以浮在磨砂面板*上方*，并且
*伸出*表头行。

```css
.compare{
  --cols:1fr 16.5% 16.2%;
  --pad-x:.85em;
  --panel-top:3.2em;
  --panel-bottom:4.9em;
  --radius:1.4em;
  position:absolute; z-index:3;
  left:50%; transform:translateX(-50%);
  bottom:16%;
  width:54.8cqw;
  color:#fff;
  font-size:max(8.5px, .92cqw);
}
```

列比例根据参考图测得：功能列约为 67.3%，品牌列为 16.5%，对比列为 16.2%。整个表格宽度是
measure 的 54.8%，并水平居中。

**第 1 层——磨砂面板**（`z-index:0`、`pointer-events:none`），通过两个自定义属性从容器
顶部和底部向内收缩，使其仅包裹各行：

```css
.compare__panels{
  position:absolute; left:0; right:0;
  top:var(--panel-top); bottom:var(--panel-bottom);
  display:grid; grid-template-columns:var(--cols);
  z-index:0; pointer-events:none;
}
.panel{ border-radius:var(--radius); }
.panel--features{                       /* 跨越第 1–2 列 */
  grid-column:1 / span 2;
  background:linear-gradient(102deg, rgba(255,255,255,.19), rgba(255,255,255,.08));
  backdrop-filter:blur(18px) saturate(115%);
  -webkit-backdrop-filter:blur(18px) saturate(115%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.panel--vet{                            /* 仅第 3 列 */
  grid-column:3;
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(18px) saturate(115%);
  -webkit-backdrop-filter:blur(18px) saturate(115%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.11);
}
```

请注意，功能面板跨越**两**列，因此会从奶油色列*后方*穿过——磨砂玻璃在其下方保持连续。

**第 2 层——奶油色品牌列**（`z-index:2`），它向表头上方伸出 `1.5em`，底部比面板低
`0.2em`：

```css
.hugo-col{
  position:absolute; z-index:2;
  top:-1.5em;
  bottom:calc(var(--panel-bottom) - .2em);
  left:calc(100% - 32.7%);
  width:16.5%;
  background:var(--cream);
  border-radius:var(--radius);
  box-shadow:0 12px 34px -14px rgba(0,0,0,.45);
  pointer-events:none;
}
```

**第 3 层——内容网格**（`z-index:1`，位于奶油色区域的单元格提升到 `3`）：

```css
.compare__grid{ display:grid; grid-template-columns:var(--cols); align-items:stretch; }
.compare__head{ display:contents; }     /* 表头 span 直接成为网格项 */
.compare__head span{
  font-size:1.02em; font-weight:500;
  letter-spacing:-.012em;
  height:calc(var(--panel-top) / 1.02);
  display:flex; align-items:flex-start;
  text-shadow:0 1px 8px rgba(0,0,0,.4);
}
.compare__head .h-feature{ padding-left:var(--pad-x); }
.compare__head .h-hugo,
.compare__head .h-vet{ justify-content:center; }
.compare__head .h-hugo{                 /* 位于奶油色上 → 深色文字，无阴影 */
  color:#1a1a12; text-shadow:none;
  position:relative; z-index:3;
  align-items:center; height:auto;
}

.row-label,.row-hugo,.row-vet{
  display:flex; align-items:center;
  height:3.6em;
  position:relative; z-index:1;
}
.row-label{
  padding-left:var(--pad-x); padding-right:1em;
  letter-spacing:-.008em;
  color:rgba(255,255,255,.95);
  text-shadow:0 1px 6px rgba(0,0,0,.3);
}
.row-hugo{ justify-content:center; color:#20200f; z-index:3; }
.row-vet{ justify-content:center; color:rgba(255,255,255,.9); text-shadow:0 1px 6px rgba(0,0,0,.3); }
```

**发丝分隔线**：仅在外侧边缘按 `--pad-x` 内缩，最后一行不显示：

```css
.row-label::after{ content:""; position:absolute; left:var(--pad-x); right:0; bottom:0;
                   height:1px; background:rgba(255,255,255,.16); }
.row-vet::after  { content:""; position:absolute; left:0; right:var(--pad-x); bottom:0;
                   height:1px; background:rgba(255,255,255,.14); }
.r-last::after{ display:none !important; }
```

为第四行的三个单元格全部添加 `r-last` 类。

**勾选标记**（每行一个，位于奶油色列中），大小为 `1.1em` 正方形：

```html
<svg class="check" viewBox="0 0 14 14" fill="none" aria-label="已包含" role="img">
  <path d="M2.4 7.4l3 3 6.2-7" stroke="currentColor" stroke-width="1.35"
        stroke-linecap="round" stroke-linejoin="round"/>
</svg>
```
```css
.check{ width:1.1em; height:1.1em; display:block; }
```

---

## 12. 总计与脚注

```css
.totals{
  display:grid; grid-template-columns:var(--cols); align-items:center;
  margin-top:1.9em;
  font-weight:600; font-size:1.02em;
  letter-spacing:-.014em;
  text-shadow:0 1px 8px rgba(0,0,0,.4);
}
.totals span:first-child{ padding-left:var(--pad-x); }
.totals span:nth-child(n+2){ text-align:center; }
.footnote{
  margin:.8em 0 0 var(--pad-x);
  font-size:.88em; font-style:italic; font-weight:400;
  color:rgba(255,255,255,.8);
  letter-spacing:-.004em;
  text-shadow:0 1px 6px rgba(0,0,0,.4);
}
```

---

## 13. 精确文案（字符数是硬性约束）

| 位置 | 字符串 | 字符数 |
|---|---|---|
| 文字标志（nav + 表头） | `Lume` | 4 |
| Nav 按钮 | `立即开始` | 11 |
| 标题第 1 行 | `读取 120+ 项健康指标。由顶级兽医提供指导。总价仅 $349。` | 74 |
| 标题第 2 行 | `与领先的兽医研究专家共同打造` | 57 |
| 主按钮 | `立即开始` | 11 |
| 次要按钮 | `预约与我们通话` | 19 |
| 第 1 列表头 | `筛查与护理` | 16 |
| 第 3 列表头 | `标准方案` | 8 |
| 第 1 行 | `完整实验室检测组合（血液、尿液、粪便、唾液）` | 55 |
| 第 2 行 | `全面体格检查与生命体征扫描` | 32 |
| 第 3 行 | `饮食与日常行为分析` | 32 |
| 第 4 行 | `书面检查结果和个性化护理方案` | 41 |
| 价格 | `$720` `$280` `$160` `$240` | 每项 4 个字符 |
| 总计 | `总价：` / `$349` / `*$1,400+` | 12 / 4 / 8 |
| 脚注 | `*如果在免预约诊所逐项预约，通常每年的花费。` | 81 |

在标记中将 & 符号转义为 `&amp;`。`Behaviour` 使用英式拼写是有意为之。

---

## 14. 动画与动态效果

没有 **scroll、entrance 或 decorative animations**。全部动态效果仅包括：

1. **Hero video**——`autoplay muted loop playsinline`，8.04 s 无缝循环，静音。
2. **Video reveal**——在 `.9s ease` 内从 `opacity 0 → 1`，由 `is-ready` 类触发。
3. **按钮 hover**——`background-color .18s ease`。
4. **按钮按下**——`transform:translateY(1px)`，`.18s ease`。

设置全局 reduced-motion 防护，并在该偏好下完全移除视频：

```css
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }
```

---

## 15. 响应式——仅在 820px 设置一个 breakpoint

```css
@media (max-width:820px){
  .hero{ height:100svh; min-height:620px; }
  .hero__inner{ padding-inline:0; }
  .hero__media--desktop{ display:none; }   /* 同时隐藏视频 */
  .hero__media--mobile{ display:block; }

  .nav{ padding:18px 18px; }
  .brand{ font-size:16px; }
  .btn--dark{ font-size:12px; }

  .hero__copy{ top:11%; width:88%; }
  .hero__title{ font-size:5.4cqw; line-height:1.24; }
  .hero__actions{ font-size:3.2cqw; gap:2cqw; margin-top:5cqw; flex-wrap:wrap; }

  .compare{ width:88cqw; bottom:6%; font-size:3.1cqw; --cols:1fr 20% 20%; }
  .hugo-col{ left:calc(100% - 40%); width:20%; }
  .row-label,.row-hugo,.row-vet{ height:4.1em; }
}
```

因为视频也带有 `hero__media--desktop`，所以切换为 portrait still 的同一条规则也会在手机端
隐藏视频——无需单独处理移动端视频。

---

## 16. 脚本（页面中唯一的 JS）

```html
<script>
  (function () {
    var v = document.querySelector('.hero__video');
    if (!v) return;
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;

    function reveal() { v.classList.add('is-ready'); }
    if (v.readyState >= 3) reveal();
    else v.addEventListener('canplay', reveal, { once: true });

    v.addEventListener('loadeddata', function () {
      var p = v.play();
      if (p && p.catch) p.catch(function () {});
    }, { once: true });
  })();
</script>
```

---

## 17. 结构

```
body
└─ div.page                          ← 无作用的包装器，不带任何 CSS
   └─ section.hero
      ├─ img.hero__media.hero__media--desktop
      ├─ img.hero__media.hero__media--mobile
      ├─ video.hero__media.hero__media--desktop.hero__video
      ├─ nav.nav                     ← 位于 measure 外部，固定在页面边缘
      │  ├─ a.brand  (svg.brand__mark + span "Lume")
      │  └─ a.btn.btn--dark  "立即开始"
      └─ div.hero__inner             ← cqw measure container
         ├─ div.hero__copy
         │  ├─ h1.hero__title  （两行，显式使用 <br>）
         │  └─ div.hero__actions  (a.btn--cream, a.btn--glass)
         └─ div.compare
            ├─ div.compare__panels  (div.panel--features, div.panel--vet)
            ├─ div.hugo-col
            ├─ div.compare__grid
            │  ├─ div.compare__head  (span.h-feature, span.h-hugo, span.h-vet)
            │  └─ 4 × (div.row-label, div.row-hugo, div.row-vet)
            ├─ div.totals  （3 个 span）
            └─ p.footnote
```

---

## 18. 验收检查

- 在 1440×900 下，标题渲染为 **24px**，表格正文文字渲染为 **10.9px**。
- 奶油色列的顶部边缘位于 `筛查与护理` 表头 baseline 的**上方**，并且可以看到磨砂功能面板在其
  *后方*连续延伸。
- 视频报告 `readyState 4`、`paused=false`、`videoWidth 1928`、`duration 8.04`。
- 从 320px 到 2560px 的任何宽度下均无水平滚动条。
- 启用 `prefers-reduced-motion: reduce` 时，渲染结果中不显示 `<video>`，可见内容为
  桌面端静态图。
- 低于 820px：portrait still、无视频，表格列为 `1fr 20% 20%`。

溯源 · 已核对已发布案例的 prompt 均经人工核对与原帖一致；平台逆向重构的 prompt 不予收录。核对原帖 ↗

适用模型与稳定度

建议模型

待补充模型

稳定度
成本: 中

构建一个**完全自包含的单个 `index.html`** 文件。无需构建步骤、框架、外部 JS 或本地图像文件。所有 CSS 放在 `<head>` 内的一个 `<style>` 块中；在 `</body>` 前放置一个小型 `<script>`。严格匹配下文的每个数值——布局由测量数据驱动，而非凭目测判断。 --- ## 1. 资源（仅限远程资源——使用以下精确 URL） **Hero video（桌面端，自动播放背景）——1928×1076、8.04 s、H.264 MP4、静音：** ``` https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260814_034538_de4032ce-5035-473d-a5b1-0e2224635a6a.mp4 ``` **Hero still（桌面端）——同时作为视频的 poster 和 reduced-motion 画面：** ``` https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/193afe38-41fa-4454-9d48-ed154b66d17c.png ``` **Hero still（移动端，9:16 portrait crop）：** ``` https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/44c2e930-23df-4ffb-98bc-02b0f7014028.png ``` **Open Graph 分享图：** ``` https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/0308ea65-1b37-4171-80f8-7d2eaacf1280.png ``` 四项资源呈现的是同一场景：一只金毛寻回犬躺在画面 left third of frame 的低矮深胡桃木狗床上，头转向 camera；右侧有一位背对镜头的人，身穿橄榄绿色罗纹针织毛衣，坐在抛光混凝土地面上；他们身后是黑色边框的落地窗，窗外可见虚化的金色山丘；最左侧边缘有一盆棕榈类室内植物。采用温暖的 late-afternoon grade。 --- ## 2. 字体 Google Fonts，通过 `preconnect` 加载 `fonts.googleapis.com` 和 `fonts.gstatic.com` （后者带有 `crossorigin`）： ```html <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"> ``` - **Instrument Serif 400**——仅用于标题。 - **Inter 400 / 500 / 600**——用于其他所有内容。 - 正文字体栈：`"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif` - 标题字体栈：`"Instrument Serif", Georgia, "Times New Roman", serif` - 在 `body` 上启用 `-webkit-font-smoothing: antialiased` 和 `-moz-osx-font-smoothing: grayscale`。 --- ## 3. Head ``` <title>Lume — 读取 120+ 项健康指标，由顶级兽医解读。</title> meta description: 读取 120+ 项健康指标。由顶级兽医提供指导。总价仅 $349。与领先的兽医研究专家共同打造。 og:title: Lume — 读取 120+ 项健康指标 og:description: 由顶级兽医提供指导。总价仅 $349。 og:image: <上方的 OG url> viewport: width=device-width, initial-scale=1 ``` --- ## 4. 设计 token 与全局重置 ```css :root{ --cream:#eef0d0; --ink:#101010; } *,*::before,*::after{ box-sizing:border-box; } body{ background:#0d0d0d; overflow-x:hidden; color:var(--ink); } ``` `#eef0d0` 是用于高亮品牌列和主按钮的淡奶油色。 `#0d0d0d` 是 hero band 下方可见的近黑色页面底色。 --- ## 5. 区块几何——full-bleed、fluid measure 页面是**一个 full-bleed hero band**。没有灰色页面边框、没有带 max-width 的页面外壳、没有圆角，区块上也没有投影。 ```css .hero{ position:relative; width:100%; height:min(92vh, 62vw); min-height:600px; overflow:hidden; isolation:isolate; } ``` 其内部由一个 **measure container** 容纳标题和表格。下方每个 `cqw` 值都以它为基准解析，而且它会随显示器增大，使字体在大屏幕上放大、在小屏幕上缩小： ```css .hero__inner{ position:absolute; inset:0; z-index:2; width:100%; max-width:min(100%, clamp(1080px, 82vw, 1700px)); margin-inline:auto; container-type:inline-size; } ``` **nav 特意不放在 `.hero__inner` 内**——它是 `.hero` 的直接子元素，因此会像普通网站页眉一样位于真正的页面边缘。其他所有内容都放在 measure 内。最终字体比例（请对照这些数值验证）： | Viewport | Measure | 标题 | 按钮 | 表格文字 | |---|---|---|---|---| | 1024 | 1024 | 20.8px | 10px | 9.4px | | 1280 | 1080 | 21.9px | 10px | 9.9px | | 1440 | 1181 | 24.0px | 10px | 10.9px | | 1920 | 1574 | 32.0px | 12.4px | 14.5px | | 2560+ | 1700 | 34.5px | 13.4px | 15.6px | --- ## 6. 媒体层三个层叠元素，均为 `.hero__media`，全部使用绝对定位并覆盖容器： ```css .hero__media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; z-index:0; filter:saturate(1.06) contrast(1.04) brightness(.97); } .hero__media--mobile{ display:none; } ``` DOM 中的顺序：桌面端 `<img>`、移动端 `<img>`，然后是位于最上层的 `<video>`。 ```html <img class="hero__media hero__media--desktop" src="…193afe38….png" alt="一个人坐在阳光充足的客厅里，身旁是他们的金毛寻回犬" fetchpriority="high" decoding="async"> <img class="hero__media hero__media--mobile" src="…44c2e930….png" alt="" aria-hidden="true" decoding="async"> <video class="hero__media hero__media--desktop hero__video" src="…de4032ce….mp4" autoplay muted loop playsinline preload="auto" aria-hidden="true" tabindex="-1"></video> ``` 视频初始时透明，只有在确实能够播放后才 cross-fades in，因此连接较慢时会显示静态图，而不是黑帧： ```css .hero__video{ opacity:0; transition:opacity .9s ease; } .hero__video.is-ready{ opacity:1; } @media (prefers-reduced-motion:reduce){ .hero__video{ display:none; } } ``` --- ## 7. 叠加渐变在 `.hero` 上仅使用一个 `::after`，设置 `z-index:1`、`pointer-events:none`，按以下顺序层叠三层——两层用于保证文字可读性，一层暖色调用于统一 grade： ```css background: linear-gradient(to bottom, rgba(0,0,0,.30) 0%, rgba(0,0,0,.09) 20%, rgba(0,0,0,0) 38%), linear-gradient(to top, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 26%), linear-gradient(120deg, rgba(120,64,18,.14), rgba(150,96,32,.10)); ``` --- ## 8. Nav ```css .nav{ position:absolute; top:0; left:0; right:0; z-index:4; display:flex; align-items:center; justify-content:space-between; padding:clamp(16px,2vw,34px) clamp(18px,3.2vw,56px); } .brand{ display:flex; align-items:center; gap:.42em; color:#fff; font-size:clamp(15px,1.15vw,23px); font-weight:500; letter-spacing:-.014em; text-decoration:none; } .brand__mark{ width:1.02em; height:1.02em; flex:none; display:block; } ``` **品牌标志——一轮新月**（契合名称 "Lume"），16×16 viewBox，使用 `fill="currentColor"` 使其在 nav 中继承白色，在表格表头中继承近黑色： ```html <svg class="brand__mark" viewBox="0 0 16 16" fill="none" aria-hidden="true"> <path d="M11.35 1.55a7 7 0 1 0 0 12.9 7.65 7.65 0 0 1 0-12.9Z" fill="currentColor"/> </svg> ``` 文字标志：`Lume`。右侧：一个深色按钮，文字为 `立即开始`。 --- ## 9. 按钮 ```css .btn{ display:inline-flex; align-items:center; justify-content:center; border:0; cursor:pointer; text-decoration:none; white-space:nowrap; font-family:inherit; font-weight:500; letter-spacing:-.006em; border-radius:999px; transition:background-color .18s ease, transform .18s ease; } .btn:active{ transform:translateY(1px); } .btn--dark{ /* nav */ background:#0b0b0b; color:#fff; font-size:clamp(12px,.88vw,18px); padding:.86em 1.32em; } .btn--dark:hover{ background:#242424; } .btn--cream{ /* hero 中的主按钮 */ background:var(--cream); color:#16160f; font-size:1em; padding:.9em 1.35em; } .btn--cream:hover{ background:#f3f5da; } .btn--glass{ /* hero 中的次要按钮 */ background:rgba(255,255,255,.19); color:#fff; font-size:1em; padding:.9em 1.35em; backdrop-filter:blur(14px) saturate(120%); -webkit-backdrop-filter:blur(14px) saturate(120%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.15); } .btn--glass:hover{ background:rgba(255,255,255,.28); } ``` --- ## 10. 标题块 ```css .hero__copy{ position:absolute; z-index:3; left:50%; top:16.75%; transform:translateX(-50%); width:min(94%, 66cqw); text-align:center; color:#fff; } .hero__title{ margin:0; font-family:"Instrument Serif",Georgia,"Times New Roman",serif; font-weight:400; font-size:max(17px, 2.03cqw); line-height:1.15; letter-spacing:.004em; text-shadow:0 1px 14px rgba(0,0,0,.30); } .hero__actions{ display:flex; align-items:center; justify-content:center; gap:.55cqw; margin-top:1.66cqw; font-size:max(10px, .79cqw); } ``` `max()` 下限至关重要：没有它们，当 fluid measure 在较窄的桌面端缩小时，表格文字会降到 8px 以下。不要将它们替换为普通的 `cqw`。两行文字，通过显式 `<br>` 分隔（而不是自然换行）： ```html <h1 class="hero__title"> 读取 120+ 项健康指标。由顶级兽医提供指导。总价仅 $349。<br> 与领先的兽医研究专家共同打造 </h1> ``` 然后是两个按钮：奶油色 `立即开始`、玻璃效果 `预约与我们通话`。 --- ## 11. 对比表——分层技巧这是最需要细致处理的部分。该表格**不是** `<table>`。它是由松散 `div` 组成的 CSS grid，叠放在三个独立定位的背景面板上，使奶油色品牌列可以浮在磨砂面板*上方*，并且 *伸出*表头行。 ```css .compare{ --cols:1fr 16.5% 16.2%; --pad-x:.85em; --panel-top:3.2em; --panel-bottom:4.9em; --radius:1.4em; position:absolute; z-index:3; left:50%; transform:translateX(-50%); bottom:16%; width:54.8cqw; color:#fff; font-size:max(8.5px, .92cqw); } ``` 列比例根据参考图测得：功能列约为 67.3%，品牌列为 16.5%，对比列为 16.2%。整个表格宽度是 measure 的 54.8%，并水平居中。 **第 1 层——磨砂面板**（`z-index:0`、`pointer-events:none`），通过两个自定义属性从容器顶部和底部向内收缩，使其仅包裹各行： ```css .compare__panels{ position:absolute; left:0; right:0; top:var(--panel-top); bottom:var(--panel-bottom); display:grid; grid-template-columns:var(--cols); z-index:0; pointer-events:none; } .panel{ border-radius:var(--radius); } .panel--features{ /* 跨越第 1–2 列 */ grid-column:1 / span 2; background:linear-gradient(102deg, rgba(255,255,255,.19), rgba(255,255,255,.08)); backdrop-filter:blur(18px) saturate(115%); -webkit-backdrop-filter:blur(18px) saturate(115%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); } .panel--vet{ /* 仅第 3 列 */ grid-column:3; background:rgba(255,255,255,.12); backdrop-filter:blur(18px) saturate(115%); -webkit-backdrop-filter:blur(18px) saturate(115%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.11); } ``` 请注意，功能面板跨越**两**列，因此会从奶油色列*后方*穿过——磨砂玻璃在其下方保持连续。 **第 2 层——奶油色品牌列**（`z-index:2`），它向表头上方伸出 `1.5em`，底部比面板低 `0.2em`： ```css .hugo-col{ position:absolute; z-index:2; top:-1.5em; bottom:calc(var(--panel-bottom) - .2em); left:calc(100% - 32.7%); width:16.5%; background:var(--cream); border-radius:var(--radius); box-shadow:0 12px 34px -14px rgba(0,0,0,.45); pointer-events:none; } ``` **第 3 层——内容网格**（`z-index:1`，位于奶油色区域的单元格提升到 `3`）： ```css .compare__grid{ display:grid; grid-template-columns:var(--cols); align-items:stretch; } .compare__head{ display:contents; } /* 表头 span 直接成为网格项 */ .compare__head span{ font-size:1.02em; font-weight:500; letter-spacing:-.012em; height:calc(var(--panel-top) / 1.02); display:flex; align-items:flex-start; text-shadow:0 1px 8px rgba(0,0,0,.4); } .compare__head .h-feature{ padding-left:var(--pad-x); } .compare__head .h-hugo, .compare__head .h-vet{ justify-content:center; } .compare__head .h-hugo{ /* 位于奶油色上 → 深色文字，无阴影 */ color:#1a1a12; text-shadow:none; position:relative; z-index:3; align-items:center; height:auto; } .row-label,.row-hugo,.row-vet{ display:flex; align-items:center; height:3.6em; position:relative; z-index:1; } .row-label{ padding-left:var(--pad-x); padding-right:1em; letter-spacing:-.008em; color:rgba(255,255,255,.95); text-shadow:0 1px 6px rgba(0,0,0,.3); } .row-hugo{ justify-content:center; color:#20200f; z-index:3; } .row-vet{ justify-content:center; color:rgba(255,255,255,.9); text-shadow:0 1px 6px rgba(0,0,0,.3); } ``` **发丝分隔线**：仅在外侧边缘按 `--pad-x` 内缩，最后一行不显示： ```css .row-label::after{ content:""; position:absolute; left:var(--pad-x); right:0; bottom:0; height:1px; background:rgba(255,255,255,.16); } .row-vet::after { content:""; position:absolute; left:0; right:var(--pad-x); bottom:0; height:1px; background:rgba(255,255,255,.14); } .r-last::after{ display:none !important; } ``` 为第四行的三个单元格全部添加 `r-last` 类。 **勾选标记**（每行一个，位于奶油色列中），大小为 `1.1em` 正方形： ```html <svg class="check" viewBox="0 0 14 14" fill="none" aria-label="已包含" role="img"> <path d="M2.4 7.4l3 3 6.2-7" stroke="currentColor" stroke-width="1.35" stroke-linecap="round" stroke-linejoin="round"/> </svg> ``` ```css .check{ width:1.1em; height:1.1em; display:block; } ``` --- ## 12. 总计与脚注 ```css .totals{ display:grid; grid-template-columns:var(--cols); align-items:center; margin-top:1.9em; font-weight:600; font-size:1.02em; letter-spacing:-.014em; text-shadow:0 1px 8px rgba(0,0,0,.4); } .totals span:first-child{ padding-left:var(--pad-x); } .totals span:nth-child(n+2){ text-align:center; } .footnote{ margin:.8em 0 0 var(--pad-x); font-size:.88em; font-style:italic; font-weight:400; color:rgba(255,255,255,.8); letter-spacing:-.004em; text-shadow:0 1px 6px rgba(0,0,0,.4); } ``` --- ## 13. 精确文案（字符数是硬性约束） | 位置 | 字符串 | 字符数 | |---|---|---| | 文字标志（nav + 表头） | `Lume` | 4 | | Nav 按钮 | `立即开始` | 11 | | 标题第 1 行 | `读取 120+ 项健康指标。由顶级兽医提供指导。总价仅 $349。` | 74 | | 标题第 2 行 | `与领先的兽医研究专家共同打造` | 57 | | 主按钮 | `立即开始` | 11 | | 次要按钮 | `预约与我们通话` | 19 | | 第 1 列表头 | `筛查与护理` | 16 | | 第 3 列表头 | `标准方案` | 8 | | 第 1 行 | `完整实验室检测组合（血液、尿液、粪便、唾液）` | 55 | | 第 2 行 | `全面体格检查与生命体征扫描` | 32 | | 第 3 行 | `饮食与日常行为分析` | 32 | | 第 4 行 | `书面检查结果和个性化护理方案` | 41 | | 价格 | `$720` `$280` `$160` `$240` | 每项 4 个字符 | | 总计 | `总价：` / `$349` / `*$1,400+` | 12 / 4 / 8 | | 脚注 | `*如果在免预约诊所逐项预约，通常每年的花费。` | 81 | 在标记中将 & 符号转义为 `&`。`Behaviour` 使用英式拼写是有意为之。 --- ## 14. 动画与动态效果没有 **scroll、entrance 或 decorative animations**。全部动态效果仅包括： 1. **Hero video**——`autoplay muted loop playsinline`，8.04 s 无缝循环，静音。 2. **Video reveal**——在 `.9s ease` 内从 `opacity 0 → 1`，由 `is-ready` 类触发。 3. **按钮 hover**——`background-color .18s ease`。 4. **按钮按下**——`transform:translateY(1px)`，`.18s ease`。设置全局 reduced-motion 防护，并在该偏好下完全移除视频： ```css @media (prefers-reduced-motion:reduce){ *{ transition:none !important; } } ``` --- ## 15. 响应式——仅在 820px 设置一个 breakpoint ```css @media (max-width:820px){ .hero{ height:100svh; min-height:620px; } .hero__inner{ padding-inline:0; } .hero__media--desktop{ display:none; } /* 同时隐藏视频 */ .hero__media--mobile{ display:block; } .nav{ padding:18px 18px; } .brand{ font-size:16px; } .btn--dark{ font-size:12px; } .hero__copy{ top:11%; width:88%; } .hero__title{ font-size:5.4cqw; line-height:1.24; } .hero__actions{ font-size:3.2cqw; gap:2cqw; margin-top:5cqw; flex-wrap:wrap; } .compare{ width:88cqw; bottom:6%; font-size:3.1cqw; --cols:1fr 20% 20%; } .hugo-col{ left:calc(100% - 40%); width:20%; } .row-label,.row-hugo,.row-vet{ height:4.1em; } } ``` 因为视频也带有 `hero__media--desktop`，所以切换为 portrait still 的同一条规则也会在手机端隐藏视频——无需单独处理移动端视频。 --- ## 16. 脚本（页面中唯一的 JS） ```html <script> (function () { var v = document.querySelector('.hero__video'); if (!v) return; if (matchMedia('(prefers-reduced-motion: reduce)').matches) return; function reveal() { v.classList.add('is-ready'); } if (v.readyState >= 3) reveal(); else v.addEventListener('canplay', reveal, { once: true }); v.addEventListener('loadeddata', function () { var p = v.play(); if (p && p.catch) p.catch(function () {}); }, { once: true }); })(); </script> ``` --- ## 17. 结构 ``` body └─ div.page ← 无作用的包装器，不带任何 CSS └─ section.hero ├─ img.hero__media.hero__media--desktop ├─ img.hero__media.hero__media--mobile ├─ video.hero__media.hero__media--desktop.hero__video ├─ nav.nav ← 位于 measure 外部，固定在页面边缘 │ ├─ a.brand (svg.brand__mark + span "Lume") │ └─ a.btn.btn--dark "立即开始" └─ div.hero__inner ← cqw measure container ├─ div.hero__copy │ ├─ h1.hero__title （两行，显式使用 <br>） │ └─ div.hero__actions (a.btn--cream, a.btn--glass) └─ div.compare ├─ div.compare__panels (div.panel--features, div.panel--vet) ├─ div.hugo-col ├─ div.compare__grid │ ├─ div.compare__head (span.h-feature, span.h-hugo, span.h-vet) │ └─ 4 × (div.row-label, div.row-hugo, div.row-vet) ├─ div.totals （3 个 span） └─ p.footnote ``` --- ## 18. 验收检查 - 在 1440×900 下，标题渲染为 **24px**，表格正文文字渲染为 **10.9px**。 - 奶油色列的顶部边缘位于 `筛查与护理` 表头 baseline 的**上方**，并且可以看到磨砂功能面板在其 *后方*连续延伸。 - 视频报告 `readyState 4`、`paused=false`、`videoWidth 1928`、`duration 8.04`。 - 从 320px 到 2560px 的任何宽度下均无水平滚动条。 - 启用 `prefers-reduced-motion: reduce` 时，渲染结果中不显示 `<video>`，可见内容为桌面端静态图。 - 低于 820px：portrait still、无视频，表格列为 `1fr 20% 20%`。

继续看相关 Case。

3D 超市包装式创意机构官网

3D 动画图钉

3D 地球

宠物诊断

继续看相关 Case。

3D 超市包装式创意机构官网

3D 动画图钉

3D 地球