Signal ID

精确重现这个为“ECHOID”设计的全视口深色首屏落地页——它是 E network 的语音身份产品。精确匹配下方每个细节。不要虚构额外版块、卡片、统计数据或装饰性叠层。Desktop 构图：左侧/中央使用全出血电影感背景视频，右侧对齐注册面板；左侧保留黑色负空间；UI 固定在顶部（导航）、右侧（表单）和底部（法律声明）。

═══════════════════════════════════════
页面元信息
═══════════════════════════════════════
- 文档标题：ECHOID — 你在 E network 的语音 ID
- Lang: en
- 页面背景为纯黑色 (#000)
- 文本抗锯齿
- 仅含一个全视口版块（无其他页面版块）

═══════════════════════════════════════
精确媒体 URL（CloudFront — 原样使用）
═══════════════════════════════════════
背景视频 (MP4)：
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260806_133255_956f653f-5d80-4b06-abd5-0f46c98b60fa.mp4

海报图 / 回退静态图 (PNG)：
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260806_132328_5f9029c8-218f-4489-82b6-29ff2849920e.png

视频属性：autoPlay, muted, loop, playsInline, preload="auto"
视频 CSS：width/height 100%, object-fit: cover, object-position: center
媒体层：position absolute, inset 0, z-index -1，视频后方为黑色背景
预连接至：https://d8j0ntlcm91z4.cloudfront.net

视频内容（供参考）：深色电影感 AI/超现实人脸序列——抽象的金属/玻璃面部形态、冷暗色调、动态视觉身份氛围。全出血铺满边到边；绝不内嵌，绝不放进卡片。

═══════════════════════════════════════
字体（精确 Google Fonts）
═══════════════════════════════════════
从 Google Fonts 加载：
family=Sora:wght@200;300;400
family=JetBrains+Mono:wght@300;400;500
display=swap
预连接 fonts.googleapis.com 和 fonts.gstatic.com

CSS 字体栈：
--font-display: "Sora", "Helvetica Neue", Helvetica, Arial, sans-serif
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace

使用映射：
- Sora 200：导航 logo “ECHOID”、hero H1 “ECHOID”
- Sora 300：email input、法律页脚文本
- JetBrains Mono 400：导航链接、JOIN UP CTA、chip、buttons、引荐链接、mobile menu 链接/CTA
- JetBrains Mono 300：标语“YOUR VOICE ID TO THE E NETWORK.”

═══════════════════════════════════════
设计变量
═══════════════════════════════════════
--bg: #000000
--text: #ffffff
--text-dim: rgba(255,255,255,0.62)
--text-dimmer: rgba(255,255,255,0.42)
--line: rgba(255,255,255,0.14)
--line-strong: rgba(255,255,255,0.26)
--fill-ghost: rgba(255,255,255,0.05)
--fill-solid: rgba(255,255,255,0.10)
--gutter: clamp(20px, 5vw, 100px)
--ease-premium: cubic-bezier(0.16, 1, 0.3, 1)

═══════════════════════════════════════
布局外壳
═══════════════════════════════════════
.hero:
- position relative, width 100%
- height: 100vh AND 100svh
- min-height: 640px（若 max-height ≤640px，min-height 改为 100svh）
- overflow hidden
- CSS grid: grid-template-rows: auto 1fr auto
- isolation: isolate

第 1 行 = navbar
第 2 行 = 右对齐表单主体（mobile 上居中）
第 3 行 = 法律页脚

═══════════════════════════════════════
遮罩（视频上的双渐变叠层）
═══════════════════════════════════════
Desktop (≥721px) — 两层叠加的 linear-gradients：
1) to right:
   transparent 0% → transparent 45% → rgba(0,0,0,0.45) 72% → rgba(0,0,0,0.72) 100%
2) to bottom:
   rgba(0,0,0,0.55) 0% → transparent 22% → transparent 78% → rgba(0,0,0,0.65) 100%

Mobile (≤720px) — 单层底部渐变：
rgba(0,0,0,0.6) 0% → rgba(0,0,0,0.25) 30% → rgba(0,0,0,0.75) 100%

═══════════════════════════════════════
NAVBAR（顶部）
═══════════════════════════════════════
Flex space-between, align center, gap 32px
Padding：clamp(20px, 2.4vw, 34px) horizontal gutter；遵守 safe-area insets

左侧 — Logo 链接“ECHOID”
- Sora 200
- font-size: clamp(20px, 1.75vw, 30px)
- letter-spacing: 0.16em
- 白色、无下划线、line-height 1

右侧 — 导航组（gap clamp(24px, 3.2vw, 62px)）：
A) Desktop 链接 (≥901px)：故事、平台、身份、联系
   - JetBrains Mono 400
   - font-size: clamp(11px, 0.78vw, 14px)
   - letter-spacing: 0.18em
   - text-transform: uppercase
   - 白色；hover → --text-dim
   - transition color 0.25s ease
   - 链接间距：clamp(20px, 2.8vw, 56px)
   - hrefs: #story #platforms #identity #contact

B) Desktop CTA“加入”（通过 uppercase 渲染为“加入”）
   - 使用与链接相同的 mono 字体
   - padding: clamp(12px,1vw,17px) clamp(20px,1.8vw,32px)
   - border: 1px solid --line-strong
   - hover: background --fill-ghost, border-color rgba(255,255,255,0.5)
   - transition background+border 0.25s ease
   - href #join

C) Mobile hamburger（仅 ≤900px；隐藏 desktop 链接和 CTA）
   - 44×44 点击区域，3 条白色横线，每条宽 22px × 高 1px
   - 横线位于 top 16/22/28px，通过 translateX(-50%) 居中
   - Active（变形为 X）：bar1 rotate(45deg) 并移至 top 22px；bar2 opacity 0 + scaleX(0)；bar3 rotate(-45deg) 并移至 top 22px
   - transition: transform 0.45s --ease-premium, opacity 0.25s ease

═══════════════════════════════════════
MOBILE MENU OVERLAY
═══════════════════════════════════════
Fixed fullscreen, z-index 50（nav 为 60）
背景：rgba(4,4,6,0.94)
backdrop-filter: blur(28px) saturate(140%)
关闭：clip-path circle(3% at calc(100% - 42px) 42px), opacity 0, pointer-events none
打开：clip-path circle(150% at same origin), opacity 1, pointer-events auto
Transition: clip-path 0.7s --ease-premium, opacity 0.45s ease
居中的大写 mono 链接列（故事/平台/身份/联系），后接带边框的“加入”
链接字号：clamp(20px, 5.5vw, 28px), letter-spacing 0.14em
CTA: letter-spacing 0.22em, padding 16px 40px, border 1px --line-strong
交错入场：每个项目初始 opacity 0 + translateY(16px)；打开时 → opacity 1 + translateY(0)
延迟：calc(180ms + var(--i) * 70ms)，链接的 i = 0..3，CTA 的 i=4
项目 Transition：opacity 0.4s ease, transform 0.5s --ease-premium
Escape 关闭；点击 backdrop 关闭；body.menu-open { overflow:hidden }；恢复焦点；在 ≥901px 时自动关闭

═══════════════════════════════════════
右侧面板（语音入口注册）
═══════════════════════════════════════
hero__body: flex align center, justify flex-end（≤720px 时居中）、horizontal gutter、min-height 0、overflow-y auto

.panel desktop：width min(34vw, 620px), min-width 380px, column flex-start
≤1100px：width min(70vw, 520px), min-width 0
≤720px：width 100%, stretch；chip 保持 flex-start

元素顺序：

1) CHIP：“[ 语音入口 ]”，显示为大写“[ 语音入口 ]”
   - JetBrains Mono 400
   - font-size: clamp(11px, 0.72vw, 14px)
   - letter-spacing: 0.2em
   - background: rgba(255,255,255,0.09)
   - padding: clamp(9px,0.8vw,14px) clamp(14px,1.1vw,20px)
   - line-height 1
   - 不要圆角 pill——使用直角矩形

2) H1：“ECHOID”
   - Sora 200
   - font-size: clamp(54px, 6.2vw, 118px)  [≤380px: clamp(44px,15vw,64px)]
   - letter-spacing: 0.03em
   - line-height: 0.95
   - margin-top: clamp(28px, 3vw, 52px)
   - 品牌优先：这是占主导地位的 hero 文字；不得有更大的元素

3) 标语：“你在 E network 的语音 ID。”
   - JetBrains Mono 300，通过 CSS 转为 uppercase
   - font-size: clamp(11px, 0.94vw, 17px)
   - letter-spacing: 0.14em
   - color: --text-dim
   - margin-top: clamp(14px, 1.4vw, 24px)
   - line-height 1.4

4) 表单（noValidate，阻止默认提交）：
   margin-top: clamp(38px, 4.6vw, 82px)
   column gap: clamp(14px, 1.3vw, 22px)
   width 100%

   a) Email 字段
      - 视觉隐藏的 label“邮箱”
      - 透明 input，无左右边框，仅有 1px --line-strong 底边框
      - border-radius 0
      - padding: 0 2px clamp(12px,1.1vw,18px)
      - Sora 300, clamp(16px,0.95vw,18px)，白色文本
      - placeholder“邮箱”颜色为 --text-dim
      - focus：底边框 rgba(255,255,255,0.85)；placeholder → --text-dimmer
      - transition border-color 0.25s ease

   b) Button“使用邮箱继续”(.btn--ghost)
      - 全宽、border-radius 0、无边框
      - padding: clamp(17px,1.6vw,27px) 20px
      - JetBrains Mono 400、uppercase、letter-spacing 0.22em
      - font-size: clamp(11px,0.78vw,14px)
      - background --fill-ghost, color --text-dimmer
      - hover: bg rgba(255,255,255,0.09), color white

   c) Button“访问”(.btn--solid)
      - 字体/内边距同上
      - background --fill-solid, color white
      - hover: bg rgba(255,255,255,0.17)

5) 引荐链接（在表单下方居中）：“我有邀请码”
   - JetBrains Mono 400，通过 CSS 转为 uppercase
   - font-size: clamp(11px, 0.74vw, 14px)
   - letter-spacing: 0.18em
   - margin-top: clamp(26px, 2.6vw, 46px)
   - align-self: center
   - href #invite
   - hover: --text-dim + underline, underline-offset 4px

═══════════════════════════════════════
法律页脚
═══════════════════════════════════════
border-top: 1px solid --line
padding: clamp(18px,1.7vw,30px) gutter；底部使用 safe-area
text-align center
精确文案：
“开设 e.xyz 账户即表示你接受我们的隐私声明和服务合同。”
- Sora 300, clamp(12px,0.82vw,16px), color --text-dim, line-height 1.5
- “隐私声明”和“服务合同”为白色带下划线链接（underline-offset 3px, thickness 1px），hrefs #privacy-notice 和 #service-contract
- link hover → --text-dim

═══════════════════════════════════════
焦点 / A11Y
═══════════════════════════════════════
Focus-visible outline：1px solid rgba(255,255,255,0.7)，buttons、CTA、toggle、引荐链接、input、mobile 链接的 offset 为 3px
Mobile menu：role=dialog, aria-modal, aria-label="站点菜单"，关闭时 aria-hidden，关闭时 inert
Toggle：aria-expanded, aria-controls="mobileMenu", aria-label 打开/关闭菜单

═══════════════════════════════════════
减少动态效果
═══════════════════════════════════════
prefers-reduced-motion: reduce → 隐藏视频；在 .hero__media 上将海报图显示为 cover background-image；将所有 animation/transition durations 压缩至 0.01ms

═══════════════════════════════════════
短高度压缩 (max-height: 640px)
═══════════════════════════════════════
收紧 nav padding；减小 H1（clamp(36px,7vw,64px)）；缩小表单边距/间距；减薄 buttons；缩小法律声明（11px）；收紧 mobile menu

═══════════════════════════════════════
动态效果摘要（哪些元素会动）
═══════════════════════════════════════
1. 背景视频连续循环（主要视觉存在）
2. links、CTAs、buttons、input border 使用 0.25s ease 的 hover 颜色/背景 transitions
3. Hamburger ↔ X 使用 0.45s premium ease 变形
4. Mobile menu 的圆形 clip-path 使用 0.7s premium ease 展开 + opacity 0.45s
5. Mobile menu 项目以 70ms 索引延迟交错淡入/向上滑入
Desktop panel 不要 entrance animation。视频上不要 floating badges。不要 cards、pills、glow、purple 或 multi-shadow chrome。仅使用直角矩形。美学：黑色 / 白色 / 半透明白色玻璃，在电影感人脸视频上叠加 terminal-mono UI。

═══════════════════════════════════════
技术栈 / 实现说明
═══════════════════════════════════════
React + plain CSS（或同等方案）。不要求 Tailwind utility look——使用上述 custom properties。Form action="#" method="post"，但使用 preventDefault。页面仅包含 hero。
```

---

**须原样保留的媒体 URL：**

- 视频：`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260806_133255_956f653f-5d80-4b06-abd5-0f46c98b60fa.mp4`
- 海报图：`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260806_132328_5f9029c8-218f-4489-82b6-29ff2849920e.png`
- 字体：**Sora** (200/300/400) + **JetBrains Mono** (300/400/500)