Build a single-screen, non-scrolling hero landing page called **Terranova — Signals from the Deep Green**. It is a full-bleed looping background video with a real-time refractive "liquid glass" card floating over it, plus a slide-in fullscreen menu. Vanilla HTML/CSS/JS only — **no frameworks, no build step, no Three.js, no WebGL, no canvas 3D**. The glass effect is done entirely with an SVG filter plus a 2D canvas that re-draws the video every frame. Produce exactly five files: `index.html`, `styles.css`, `glass-card.js`, `ui.js`, `serve.mjs`. --- ## 1. Global setup ### Fonts In ``, in this order: ```html ``` Font stack on `html, body`: `'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif` with `-webkit-font-smoothing: antialiased` and `-moz-osx-font-smoothing: grayscale`. Page title: `Terranova — Signals from the Deep Green` (em dash). ``, ``, ``. ### Reset ```css html, body { width: 100%; height: 100%; overflow: hidden; background: #c2ccd3; color: #000; overflow-x: hidden; } ``` `#c2ccd3` is only a pre-load fallback behind the video. The page never scrolls. Breakpoints follow Tailwind's: **sm 640px, md 768px, lg 1024px**, all `min-width` (mobile-first). --- ## 2. Background video First element inside ``: ```html ``` That exact URL. The asset is 1920×1080, ~10.04s, a bright iridescent soap-bubble / glass-sphere loop on a near-white studio background. **Do not set `crossorigin`.** The host serves no CORS headers; adding the attribute breaks loading outright
……（完整源码请在站内查看）