背景视频同步播放

assets/style.css

@@ -7,6 +7,8 @@
   --radius: 6px;
   --shadow: 0 6px 14px rgba(226, 38, 38, 0.08);
   --shadow-hover: 0 8px 20px rgba(226, 38, 38, 0.12);
+  --bg-base: #ffffff;
+  --bg-accent: #fff5f5;
 }
 
 * { box-sizing: border-box; }
@@ -17,10 +19,14 @@ body {
     sans-serif;
   color: #333;
   background:
-    radial-gradient(1200px 400px at 10% -20%, #fff5f5 0%, transparent 40%),
-    linear-gradient(#ffffff, #ffffff);
+    radial-gradient(1200px 400px at 10% -20%, var(--bg-accent) 0%, transparent 40%),
+    linear-gradient(var(--bg-base), var(--bg-base));
 }
 
+#bgVideoContainer { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
+#bgVideoContainer video { width: 100%; height: 100%; object-fit: cover; filter: blur(36px) saturate(120%) brightness(1.05) contrast(1.05); transform: scale(1.06); opacity: 0.5; }
+.page { position: relative; z-index: 1; }
+
 .page {
   max-width: var(--page-max);
   padding: 16px;
@@ -33,7 +39,7 @@ body {
   top: 0;
   z-index: 100;
   border: var(--border);
-  background: #fff;
+  background: rgba(255,255,255,0.95);
   min-height: 60px;
   padding: 10px 16px;
   display: flex;
@@ -69,7 +75,7 @@ body {
   padding: 8px 14px;
   border-radius: 999px;
   border: 1px solid var(--red);
-  background: #fff;
+  background: rgba(255,255,255,0.92);
   transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
 }