From d3b0a138a3f622778785de80e46b24d94aeca15a Mon Sep 17 00:00:00 2001
From: Noopy Jekki <jekkinoopy@gmail.com>
Date: Fri, 17 Jul 2026 16:12:42 +0800
Subject: [PATCH] =?UTF-8?q?=E7=B7=B4=E7=BF=92=E5=AE=A4=E5=BE=8C=E5=8F=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sechskies-admin-hw/css/style.css | 37 ++++++++++++++++++++++++++++++--
 sechskies-admin-hw/index.html    | 20 +++++++++++------
 2 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/sechskies-admin-hw/css/style.css b/sechskies-admin-hw/css/style.css
index 1bbb18e..8b79aad 100644
--- a/sechskies-admin-hw/css/style.css
+++ b/sechskies-admin-hw/css/style.css
@@ -136,10 +136,10 @@ body::after {
   color: #fff;
 }
 
-/* ============ 主視覺 ============ */
+/* ============ 主視覺（嵌入影片背景，尺寸依影片比例） ============ */
 .sk-hero {
-  background: linear-gradient(180deg, rgba(180, 184, 191, 0.14) 0%, transparent 100%);
   border-bottom: 1px solid var(--sk-border);
+  overflow: hidden;
 }
 
 .sk-hero h1 {
@@ -155,6 +155,39 @@ body::after {
   border-radius: 2px;
 }
 
+.sk-hero-video-frame {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  background: #000;
+}
+
+.sk-hero-video-frame iframe {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  pointer-events: none;
+}
+
+.sk-hero-overlay {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, rgba(10, 10, 10, 0.35) 0%, rgba(10, 10, 10, 0.8) 100%);
+}
+
+.sk-hero-content {
+  position: relative;
+  z-index: 2;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
 /* ============ 區塊標題 ============ */
 .sk-section-title {
   color: var(--sk-text);
diff --git a/sechskies-admin-hw/index.html b/sechskies-admin-hw/index.html
index e2f3707..acced70 100644
--- a/sechskies-admin-hw/index.html
+++ b/sechskies-admin-hw/index.html
@@ -32,12 +32,20 @@
     </div>
   </nav>
 
-  <!-- 主視覺 -->
-  <header class="sk-hero py-5">
-    <div class="container py-4 text-center">
-      <h1 class="display-4 fw-bold mb-0">偶像練習生</h1>
-      <div class="sk-title-bar"></div>
-      <p class="lead mb-0 mt-4 text-body-secondary">全能Leader 殷志源打造全新綜藝</p>
+  <!-- 主視覺（嵌入影片背景） -->
+  <header class="sk-hero">
+    <div class="sk-hero-video-frame">
+      <iframe
+        src="https://www.youtube.com/embed/ARi0cfpv6mE?autoplay=1&mute=1&loop=1&playlist=ARi0cfpv6mE&controls=0&modestbranding=1&rel=0&showinfo=0"
+        title="水晶練習室主視覺影片"
+        allow="autoplay; encrypted-media"
+        loading="lazy"></iframe>
+      <div class="sk-hero-overlay"></div>
+      <div class="sk-hero-content container text-center">
+        <h1 class="display-4 fw-bold mb-0">偶像練習生</h1>
+        <div class="sk-title-bar"></div>
+        <p class="lead mb-0 mt-4 text-body-secondary">全能Leader 殷志源打造全新綜藝</p>
+      </div>
     </div>
   </header>