feat 專案設計規範

assets/css/index.css

@@ -155,7 +155,47 @@ section.archive-block p:last-child {
 
 /* ---------- 首頁 home-page：閱讀寬度與字級（弱化對 vw 的依賴） ---------- */
 
-/* 用 px 鎖上限，避免 72rem 隨根字級／無障礙字級變大（例如實測出 ~1390px） */
+/* Hero 大標：維持全站水晶黃字色，用深色描邊＋暈光與淺黃底圖區隔 */
+.home-page header .hero h1 {
+    color: var(--primary);
+    font-weight: 900;
+    letter-spacing: 0.05em;
+    text-shadow:
+        0 0 0.04em rgba(42, 32, 0, 0.55),
+        0 0.03em 0 rgba(26, 20, 0, 0.42),
+        0 0.08em 0.12em rgba(0, 0, 0, 0.28),
+        0 -0.02em 0.06em rgba(255, 255, 255, 0.35),
+        0 0 0.35em rgba(255, 204, 0, 0.85),
+        0 0 0.85em rgba(255, 180, 0, 0.4);
+}
+
+/* 副標：結構與 concert 相同（subtitle-wrap + 兩側黃線）；字級大於演唱會頁以利閱讀 */
+.home-page header .hero .subtitle-wrap {
+    margin: 0.65rem auto 1.05rem;
+    padding: 0 0.75rem;
+    max-width: min(40rem, 94vw);
+}
+
+.home-page header .hero .subtitle-wrap::before,
+.home-page header .hero .subtitle-wrap::after {
+    height: 3px;
+    max-width: min(72px, 14vw);
+    background-color: #ffcc00;
+    opacity: 1;
+}
+
+.home-page header .hero .subtitle-wrap .sub-title {
+    margin: 0 min(1.6rem, 4vw);
+    font-size: clamp(1.12rem, 2.4vw + 0.72rem, 1.52rem);
+    font-weight: 700;
+    letter-spacing: 0.22em;
+    line-height: 1.5;
+    color: #e6e6e6;
+    text-shadow:
+        0 0 0.35em rgba(0, 0, 0, 0.45),
+        0 0.06em 0.18em rgba(0, 0, 0, 0.35);
+}
+
 .home-page .container {
     max-width: min(1200px, calc(100% - 2rem));
     width: 100%;

assets/css/style.css

@@ -2170,7 +2170,7 @@ body.totoga2-page.totoga2-video-copy-page .ebook-intro.section {
     margin-bottom: 1.5rem;
 }
 
-body.totoga2-page.totoga2-video-copy-page .ebook-intro.section .bilivideo-tabs {
+body.totoga2-page.totoga2-video-copy-page .ebook-intro.section .bilivideo-tabs__shell {
     margin-top: 0.5rem;
 }
 
@@ -2178,10 +2178,43 @@ body.totoga2-page.totoga2-video-copy-page {
     overflow-x: hidden;
 }
 
-/* 節目影片複本：三集＝同一殼內分頁；非使用中 panel 不占版面（避免被 flex display 蓋掉 hidden） */
-body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs {
+/* 節目影片複本：頂列為上／中／下集（獨立 .btn）；播放器外殼內僅 iframe */
+body.totoga2-page.totoga2-video-copy-page .bilivideo-hub .bilivideo-tabs__shell {
     max-width: 960px;
-    margin: 0 auto;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+body.totoga2-page.totoga2-video-copy-page .totoga2-copy-sibling-links {
+    text-align: center;
+    font-size: 0.9rem;
+    margin: 0.35rem auto 0.85rem;
+    color: #555;
+}
+
+body.totoga2-page.totoga2-video-copy-page .totoga2-copy-sibling-links a {
+    color: #4a3d12;
+    font-weight: 650;
+    text-decoration: underline;
+    text-underline-offset: 0.2em;
+}
+
+body.totoga2-page.totoga2-video-copy-page .totoga2-copy-sibling-links a:hover {
+    color: #221a06;
+}
+
+body.totoga2-page.totoga2-video-copy-page .totoga2-copy-sibling-links__sep {
+    margin: 0 0.4rem;
+    opacity: 0.55;
+}
+
+body.totoga2-page.totoga2-video-copy-page .bilivideo-episode-nav .btn {
+    opacity: 0.9;
+}
+
+body.totoga2-page.totoga2-video-copy-page .bilivideo-episode-nav .bilivideo-episode-nav__tab--active {
+    opacity: 1;
+    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.28);
 }
 
 body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__shell {
@@ -2192,51 +2225,6 @@ body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__shell {
     background: #070707;
 }
 
-body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__list {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 0;
-    margin: 0;
-    padding: 0;
-}
-
-body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__tab {
-    margin: 0;
-    padding: 0.75rem 0.5rem;
-    border: none;
-    border-right: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 0;
-    cursor: pointer;
-    font: inherit;
-    font-weight: 700;
-    font-size: clamp(0.88rem, 2.1vw, 1rem);
-    text-align: center;
-    color: #e8e4dc;
-    background: #151515;
-    letter-spacing: 0.12em;
-}
-
-body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__tab:last-child {
-    border-right: none;
-}
-
-body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__tab:hover {
-    background: #1f1f1f;
-    color: #fff;
-}
-
-body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__tab:focus-visible {
-    outline: 2px solid #ffcc00;
-    outline-offset: -2px;
-    position: relative;
-    z-index: 1;
-}
-
-body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__tab--active {
-    background: linear-gradient(180deg, #ffe566 0%, #ffcc00 100%);
-    color: #1a1406;
-}
-
 body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__panels {
     overflow: hidden;
     background: #000;