diff --git a/assets/css/index.css b/assets/css/index.css index 2b7bc29..dd8d7fa 100644 --- a/assets/css/index.css +++ b/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%; diff --git a/assets/css/style.css b/assets/css/style.css index c9d3db9..1ad3e2d 100644 --- a/assets/css/style.css +++ b/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; diff --git a/docs/totoga2-copy-video-notes.md b/docs/totoga2-copy-video-notes.md index 898a5e8..07d4f26 100644 --- a/docs/totoga2-copy-video-notes.md +++ b/docs/totoga2-copy-video-notes.md @@ -6,3 +6,4 @@ - 中集、下集 iframe 使用 `data-src`，第一次切到該分頁時由頁內 script 寫入 `src`；改連結時請改 `data-src`（或已寫入後的 `src`）。 - 目前中／下集預設與上集同一 BV，僅作占位；正式替換時改各分頁 iframe 的 `data-src` 即可。 - 此頁 `body.totoga2-video-copy-page` 會覆寫 `.map-archive-header` 的整屏高度（`100vh`／`100dvh`），避免與導覽、影片疊加後出現整頁直向捲軸；其他全屏 banner 頁不受影響。 +- 資訊架構：頂部黃色列僅 **上集／中集／下集**（`role="tab"`）；**紀實電子書、時間軸＋長文、複本總覽** 為其下文字連結，仍各為獨立 HTML；`totoga2-copy-ebook.html` 等頁仍保留原四鈕列。 diff --git a/extra/grok.html b/extra/grok.html index 490d85e..fb9fb1c 100644 --- a/extra/grok.html +++ b/extra/grok.html @@ -17,7 +17,7 @@

SECHSKIES
水晶男孩

-

六顆永恆的水晶 • 左右命運的傳奇

+

六顆永恆的水晶 · 左右命運的傳奇

探索他們的故事
diff --git a/extra/totoga2-copy-video.html b/extra/totoga2-copy-video.html index 62514d0..9a7aa80 100644 --- a/extra/totoga2-copy-video.html +++ b/extra/totoga2-copy-video.html @@ -24,27 +24,28 @@ - +
+ +

+ 紀實電子書 + + 時間軸＋長文 + + 複本總覽 +

-
-
-

節目影片

+
+
+

節目影片

-
-
- - - -
@@ -67,14 +68,12 @@
-
-
+
+

回到首頁 · 傳奇的轉折 - 紀實電子書（另頁） - 時間軸＋八章（另頁）