diff --git a/archive.html b/archive.html index b430ce0..ca92afb 100644 --- a/archive.html +++ b/archive.html @@ -73,58 +73,75 @@

-
+

啟動新篇章

回歸後的數位單曲與專輯，是現在進行式的聲紋紀錄；耳機調大聲一格，就能把「新篇章」接住。

-

聽見歌詞細節

-
- -
-

輝煌全盛期

-

主打的記憶點、b-side 的伏筆、舞步與應援口號——想一次收進收藏庫，往這張整理頁走。

-

打開輝煌全盛期整理

-
- -
-

歷年作品 (精選)

- +

聽見歌詞細節（2016 代表曲目）

+
- - - + + + + - - - - - - - - - - - - - - - + + - - + + + - - + + + + +
年份專輯/作品主打歌封面年份專輯／作品主打歌
1997學園別曲學園別曲 / 男兒之路 (Pom Saeng Pom Sa)
1998Road FighterRoad Fighter / Couple
1999Com'BackCom'Back
+ 2016 數位單曲 封面 + 2016 數位單曲 Three Words (三個詞)
+ 2017 ANOTHER LIGHT 封面 + 2017ANOTHER LIGHTSomething Special / SmileANOTHER LIGHTSomething Special / Smile
+ 2020 ALL FOR YOU 封面 + 2020ALL FOR YOUALL FOR YOUALL FOR YOUALL FOR YOU
+
+ +
+

輝煌全盛期

+

主打的記憶點、b-side 的伏筆、舞步與應援口號——想一次收進收藏庫，往這張整理頁走。

+

打開輝煌全盛期整理

+ + + + + + + + + + + + + + + + + + + + + + +
年份專輯／作品主打歌
1997學園別曲學園別曲 / 男兒之路 (Pom Saeng Pom Sa)
1998Road FighterRoad Fighter / Couple
1999Com'BackCom'Back
diff --git a/img/albums/1997.jpg b/img/albums/1997.jpg new file mode 100644 index 0000000..1b45ee2 Binary files /dev/null and b/img/albums/1997.jpg differ diff --git a/img/albums/1998.jpg b/img/albums/1998.jpg new file mode 100644 index 0000000..1b45ee2 Binary files /dev/null and b/img/albums/1998.jpg differ diff --git a/img/albums/1999.jpg b/img/albums/1999.jpg new file mode 100644 index 0000000..1b45ee2 Binary files /dev/null and b/img/albums/1999.jpg differ diff --git a/img/albums/2016.jpg b/img/albums/2016.jpg new file mode 100644 index 0000000..30a9e74 Binary files /dev/null and b/img/albums/2016.jpg differ diff --git a/img/albums/2017.jpg b/img/albums/2017.jpg new file mode 100644 index 0000000..5c26c04 Binary files /dev/null and b/img/albums/2017.jpg differ diff --git a/img/albums/20172.jpg b/img/albums/20172.jpg new file mode 100644 index 0000000..fee69c1 Binary files /dev/null and b/img/albums/20172.jpg differ diff --git a/img/albums/2020.jpg b/img/albums/2020.jpg new file mode 100644 index 0000000..f3a527c Binary files /dev/null and b/img/albums/2020.jpg differ diff --git a/img/logo1titles-1024x107.png b/img/logo.png similarity index 100% rename from img/logo1titles-1024x107.png rename to img/logo.png diff --git a/index.css b/index.css index 7a1fccf..248f69e 100644 --- a/index.css +++ b/index.css @@ -90,8 +90,40 @@ padding-bottom: 0; } -#archive .archive-block { - margin: 1.75rem 0; +/* archive.html：.archive-block 已改為
，沿用 style.css 的 section 卡片版型 */ +section.archive-block p { + color: #4a4a4a; + line-height: 1.7; + margin: 0 0 0.75rem; +} + +section.archive-block p:last-child { + margin-bottom: 0; +} + +/* archive.html：精選作品表（含封面欄） */ +.archive-discography { + width: 100%; + margin-top: 1.25rem; +} + +.archive-discography .album-cover-cell { + width: 96px; + vertical-align: middle; + text-align: center; + padding: 10px 8px; +} + +.archive-discography .album-cover-cell img { + width: 76px; + height: 76px; + object-fit: cover; + border-radius: 10px; + border: 1px solid rgba(255, 204, 0, 0.28); + box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); + display: block; + margin: 0 auto; + background: #fff; } .landing-intro { diff --git a/index.html b/index.html index 7589517..a6c8232 100644 --- a/index.html +++ b/index.html @@ -67,14 +67,6 @@
-
-

成立的初衷

-
-

- 這裡先端出舞台上與綜藝裡最刺眼、也最誠實的魅力，接住每一次「怎麼又帥又好笑」的心跳；你越往深處挖，越容易聽懂那場 仍在續寫的傳奇。 -

-
-

好奇的開端

@@ -84,13 +76,45 @@

水晶男孩（SECHSKIES）的魔力在於：即便錯過他們第一次站上大型舞台的年代，依然會被他們 熱血、真誠且專業 - 的魅力所感動。這裡不僅是資訊站，更是由熱愛凝聚的空間。從台上的職人氣場，到台下像家人吵架又像互相撐腰的 反差，把「現在入坑」變成一種完全被允許的日常。 + 的魅力所感動。這裡不僅是資訊站，更是由熱愛凝聚的空間。從台上的職人氣場，到台下像家人吵架又像互相撐腰的 反差，把「現在入坑」變成一種完全被允許的日常。

經典不是博物館的玻璃櫃，而是每次重播都讓人想跟著跳的節奏。加入我們，一起把手上的應援色舉高一點。

+
+

成立的初衷

+
+
+

+ 本站是以 SECHSKIES 水晶男孩 為核心的數位推廣部，旨在透過 專業的視覺策展 宣傳成員魅力與 小黃們的應援活動。我們不滿足於傳統的追星模式，而是嘗試以水晶男孩為 靈感主軸，延伸至 網頁開發、視覺設計與內容企劃 等多重領域，將對偶像的喜愛轉化為 實質的專業養分。在這裡，你不只能探索他們的 傳奇軌跡，更能見證追星如何激發 創作潛能。 +

+ +
+

LOGO 設計理念

+

+ 「晶」字發想來自六角形的水晶，為了強調水晶男孩初心為六人。上半部形似數字 6，搭配演唱會必備的手燈圖案，代表粉絲和水晶密不可分的關係。色彩配置發想來自回歸舞台成員脫下眼罩的剎那，整個場地從一片漆黑瞬間發亮，映入眼簾的是一片黃色海洋。以此片段為契機，設計成黑色系與黃色系的色彩搭配，來記錄那瞬間的感動。 +

+
+
+ +
+
+ SECHSKIES Logo Concept + + + 設計語彙：六角、黃海與初心 + +
+
+
+ +
+ 「我們要用這座藝廊般的網站證明：追星的孩子不僅不會變壞，更會因為那份守護的熱情，讓現在的自己變得比追星前的自己還要厲害。」 +
+

跨時空軌跡

@@ -127,7 +151,7 @@
-
+

傳奇的轉折

PLOT TWIST @@ -137,26 +161,28 @@ 開啟完整紀實篇章

-
-

六六歌實錄

-

把懸念、試探與哭點縫在同一條時間軸上；很多人第一次真正把「水晶男孩」打進搜尋框，就是從這種瘋狂的剪輯節奏開始。

-

對照這一段幕後敘事

-
-
-

命運的交涉

-

KTV、游擊演唱會規則、與其說講道理不如說把真心擺上桌面——交涉的不是合約字面，而是還願不願意再一次肩並肩。

-

讀交涉與對話肌理

-
-
-

拼圖的歸位

-

變數一個個被排除之後，驚喜接上登場段落；缺一角舞台的視覺，終於對齊觀眾席上堅守的那片黃。

-

從「召集」段開始補這條線

-
-
-

巔峰與雨天

-

急凍、告別、各自的跑道——並不是要你沉浸遺憾，而是讓你懂：後來每一次亮燈，為什麼會更值得尖叫。

-

讀這條脈絡的起點

-
+
+
+

六六歌實錄

+

把懸念、試探與哭點縫在同一條時間軸上；很多人第一次真正把「水晶男孩」打進搜尋框，就是從這種瘋狂的剪輯節奏開始。

+

對照這一段幕後敘事

+
+
+

命運的交涉

+

KTV、游擊演唱會規則、與其說講道理不如說把真心擺上桌面——交涉的不是合約字面，而是還願不願意再一次肩並肩。

+

讀交涉與對話肌理

+
+
+

拼圖的歸位

+

變數一個個被排除之後，驚喜接上登場段落；缺一角舞台的視覺，終於對齊觀眾席上堅守的那片黃。

+

從「召集」段開始補這條線

+
+
+

巔峰與雨天

+

急凍、告別、各自的跑道——並不是要你沉浸遺憾，而是讓你懂：後來每一次亮燈，為什麼會更值得尖叫。

+

讀這條脈絡的起點

+
+
@@ -171,4 +197,4 @@ - + \ No newline at end of file diff --git a/lyrics.css b/lyrics.css index 93daa55..7d8c856 100644 --- a/lyrics.css +++ b/lyrics.css @@ -1,73 +1,155 @@ -:root { - /* 定義一個基礎大小，這就是你的「倍率開關」 */ - font-size: 26px; -} +/* 歌詞頁：載入於 style.css 之後，並以 .lyrics-page 提高權重，避免被全站 table / body 洗版 */ + +body.lyrics-page { + --lyrics-bg: #2a2a2a; + --lyrics-paper: #faf6e8; + --lyrics-accent: #f5dfa8; + --lyrics-muted: #c9c2a8; -.nanum-pen-script-regular { font-family: "Nanum Pen Script", cursive; font-weight: 400; font-style: normal; + background-color: var(--lyrics-bg) !important; + color: #fff !important; + margin: 0 !important; + padding: clamp(1rem, 4vw, 2.5rem) !important; + min-height: 100dvh; + line-height: 1.55; + overflow-x: hidden; + font-size: clamp(18px, 2.8vw, 26px); } -body { - margin: 10%; - background-color: #333333; - color: #ffffff; +body.lyrics-page h1 { + color: var(--lyrics-accent); + font-size: clamp(1.75rem, 4vw, 2.5rem); + text-align: center; + margin: 0 0 1.25rem; + letter-spacing: 0.02em; } -h1 { - color: #FAEAB1; - font-size: 2.5rem; - /* 想要這區特別大一點就設 2.5 */ +body.lyrics-page .lyrics-layout { + max-width: 1100px; + margin: 0 auto; } -.main-left { - width: 50%; +body.lyrics-page .lyrics-main-table { + width: 100%; + max-width: 1100px; + margin: 0 auto; + border-collapse: separate; + border-spacing: clamp(0.75rem, 2.5vw, 1.75rem); + background: transparent !important; + box-shadow: none !important; + border-radius: 0 !important; +} + +body.lyrics-page .lyrics-main-table > tbody > tr > td { + padding: 0.35rem 0.5rem !important; + border: none !important; + border-bottom: none !important; + text-align: left !important; + color: inherit !important; + vertical-align: top !important; + background: transparent !important; +} + +body.lyrics-page .main-left { + width: 48%; + max-width: 480px; vertical-align: top; - gap: 1rem; - /* padding-right: 40px; */ } -.songInfo { - color: #FAEAB1; +body.lyrics-page .main-left iframe { + display: block; + width: 100%; + border: 0; + border-radius: 10px; + box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); +} + +body.lyrics-page .songInfo { + color: var(--lyrics-accent); display: grid; grid-template-columns: max-content 1fr; - gap: -10px; - align-items: center; - gap: 0.5rem; - /* 原本的 8px 大約是 0.5rem */ - font-size: 1.2rem; - /* 想要這區特別大一點就設 1.2 */ + gap: 0.4rem 0.75rem; + align-items: baseline; + font-size: 1rem; + margin-top: 1rem; } -/* .songInfo dd{ - margin: 5px 0; -} */ -p { +body.lyrics-page .songInfo dt { + font-weight: 700; + color: var(--lyrics-muted); +} + +body.lyrics-page .songInfo dd { + margin: 0; +} + +body.lyrics-page .lyrics-main-table p { color: #fff; - line-height: 1.5; - gap: 0.5rem; - /* 原本的 8px 大約是 0.5rem */ - font-size: 1.5rem; - /* 想要這區特別大一點就設 1.2 */ - margin: auto; + line-height: 1.55; + font-size: clamp(1rem, 2.2vw, 1.35rem); + margin: 0; + max-width: 52ch; } -table { - border-spacing: 40px; - /* 左右間距 20px，上下 0 */ - border-collapse: separate; - /* 必須是 separate，spacing 才會生效 */ +body.lyrics-page a { + color: #b8e6ff; + text-decoration: underline; + text-underline-offset: 0.15em; } -/* width: 100%; */ -/* border:#fff solid 1px; */ -a { - color: #FFF; - text-decoration: none; +body.lyrics-page a:hover { + color: #fff; } -.contact i { - font-size: 0.6em; - margin-right: 0.3rem; -} \ No newline at end of file +body.lyrics-page .contact { + color: var(--lyrics-paper); + font-size: 0.95rem; + line-height: 1.65; + max-width: 42ch; +} + +body.lyrics-page .contact h3 { + color: var(--lyrics-accent); + font-size: 1.15rem; + margin: 0.35rem 0 0.5rem; + font-family: "Nanum Pen Script", cursive; +} + +body.lyrics-page .contact img { + max-height: 36px; + width: auto; + display: block; + margin-bottom: 0.35rem; +} + +body.lyrics-page .contact i { + font-size: 0.75em; + margin-right: 0.35rem; + color: var(--lyrics-accent); +} + +@media (max-width: 820px) { + body.lyrics-page .lyrics-main-table, + body.lyrics-page .lyrics-main-table tbody, + body.lyrics-page .lyrics-main-table tr, + body.lyrics-page .lyrics-main-table td { + display: block; + width: 100% !important; + } + + body.lyrics-page .lyrics-main-table { + border-spacing: 0; + } + + body.lyrics-page .main-left { + max-width: none; + margin-bottom: 1.5rem; + } + + body.lyrics-page .lyrics-main-table > tbody > tr > td + td { + margin-top: 0.5rem; + } +} diff --git a/lyrics.html b/lyrics.html index ef17260..da3bfd5 100644 --- a/lyrics.html +++ b/lyrics.html @@ -1,193 +1,120 @@ - + - Document + 세 단어 (THREE WORDS) — SECHSKIES - - + - -

세 단어 (THREE WORDS)

- - - - - - - - - -
- -
-
Artist
-
SECHSKIES
-
Album
-
2016 Re-ALBUM
-
Release Date
-
2016년
-
Genre
-
K-Pop
-
- - 		-

다신 볼 수 없을 것만 같던
- 그대가 내 앞에 서 있네요
- 지킬 수 있을지 모르며 약속했던
- 그 언젠가가 지금인 거군요
- 단 하루도 널, 널 잊었던 적
- 없다는 말은 거짓말이겠지만
- 그대가 곁에 있지 않을 때 외로웠죠 (외로웠죠)
- 한 순간도 널, 널 잊었던 적
- 없다는 말이 무슨 의미겠어요
- 지금 여기 우리 세 단어면 돼요
- I just wanna be with you
- 내가 사는 이유
- 다시는 멀리 가지 않을게요
- I'll always be here for you
- 세월이 지난 후
- 세상이 다시 우릴 갈라놔도
- 떠나야만 해도
- 멀리 있진 않을게요 uh
- 참 멀리 멀리 멀리도 돌아왔네요
- 지독한 세월과 세상에게 수없이 꺾이고 (꺾이고)
- 발밑엔 낙엽이 뒤덮이고 이 야윈 모습이지만
- 여기 여전히 그대 곁에 서있죠
- I missed you 한 순간도 편히 잠든 적 없어 (없어)
- 잘 지낸 것 같겠지만 I missed you
- 한 순간도 진짜 웃은 적 없어 (없어)
- 한 순간도 널, 널 잊었던 적
- 없다는 말이 무슨 의미겠어요
- 지금 여기 우리 세 단어면 돼요
- I just wanna be with you
- 내가 사는 이유
- 다시는 멀리 가지 않을게요
- I'll always be here for you
- 세월이 지난 후
- 세상이 다시 우릴 갈라놔도
- 떠나야만 해도
- 멀리 있진 않을게요
- 시간은 참 무섭게도 가네요
- 붙잡으려 해도 잡히지 않을 거예요
- 언젠가 다시 헤어지게 되어도
- 여기 가까이 서있을게
- 지금 여기 우리
- I just wanna be with you
- 내가 사는 이유 (miss you baby)
- 다시는 멀리 가지 않을게요 (가지 않을게요)
- I'll always be here for you
- 세월이 지난 후
- 세상이 다시 우릴 갈라놔도 (우릴 갈라놔도)
- 떠나야만 해도 (떠나야만 해도)
- 멀리 (멀리) 있진 않을게요
- 멀리 있진 않을게
-

-
-
- -

YG Entertainment

- Huiujeong-ro 1-gil, Mapo-gu, Seoul, South Korea
- https://www.ygfamily.com/
- +82231421104 -
-
- - - + +
+

세 단어 (THREE WORDS)

+ + + + + + + + + + + +
+ +
+
Artist
+
SECHSKIES
+
Album
+
2016 Re-ALBUM
+
Release Date
+
2016년
+
Genre
+
K-Pop
+
+ 		+

다신 볼 수 없을 것만 같던
+ 그대가 내 앞에 서 있네요
+ 지킬 수 있을지 모르며 약속했던
+ 그 언젠가가 지금인 거군요
+ 단 하루도 널, 널 잊었던 적
+ 없다는 말은 거짓말이겠지만
+ 그대가 곁에 있지 않을 때 외로웠죠 (외로웠죠)
+ 한 순간도 널, 널 잊었던 적
+ 없다는 말이 무슨 의미겠어요
+ 지금 여기 우리 세 단어면 돼요
+ I just wanna be with you
+ 내가 사는 이유
+ 다시는 멀리 가지 않을게요
+ I'll always be here for you
+ 세월이 지난 후
+ 세상이 다시 우릴 갈라놔도
+ 떠나야만 해도
+ 멀리 있진 않을게요 uh
+ 참 멀리 멀리 멀리도 돌아왔네요
+ 지독한 세월과 세상에게 수없이 꺾이고 (꺾이고)
+ 발밑엔 낙엽이 뒤덮이고 이 야윈 모습이지만
+ 여기 여전히 그대 곁에 서있죠
+ I missed you 한 순간도 편히 잠든 적 없어 (없어)
+ 잘 지낸 것 같겠지만 I missed you
+ 한 순간도 진짜 웃은 적 없어 (없어)
+ 한 순간도 널, 널 잊었던 적
+ 없다는 말이 무슨 의미겠어요
+ 지금 여기 우리 세 단어면 돼요
+ I just wanna be with you
+ 내가 사는 이유
+ 다시는 멀리 가지 않을게요
+ I'll always be here for you
+ 세월이 지난 후
+ 세상이 다시 우릴 갈라놔도
+ 떠나야만 해도
+ 멀리 있진 않을게요
+ 시간은 참 무섭게도 가네요
+ 붙잡으려 해도 잡히지 않을 거예요
+ 언젠가 다시 헤어지게 되어도
+ 여기 가까이 서있을게
+ 지금 여기 우리
+ I just wanna be with you
+ 내가 사는 이유 (miss you baby)
+ 다시는 멀리 가지 않을게요 (가지 않을게요)
+ I'll always be here for you
+ 세월이 지난 후
+ 세상이 다시 우릴 갈라놔도 (우릴 갈라놔도)
+ 떠나야만 해도 (떠나야만 해도)
+ 멀리 (멀리) 있진 않을게요
+ 멀리 있진 않을게
+

+
+ +
+
+ YG Entertainment logo +

YG Entertainment

+

+ Huiujeong-ro 1-gil, Mapo-gu, Seoul, South Korea
+ https://www.ygfamily.com/
+ +82231421104 +

+
+
+
- \ No newline at end of file + diff --git a/style.css b/style.css index 121414b..2520243 100644 --- a/style.css +++ b/style.css @@ -1,1202 +1,1320 @@ -@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap'); - -:root { - --primary: #ffcc00; - --light-yellow: #fceea7; - --dark-yellow: #4e492b; - --black: #1a1a1a; - --deep-black: #0a0a0a; - --gray: #f4f4f4; - --text-color: #333; - --accent: #FFD700; - --text: #1a1a1a; - --card-bg: #1a1a1a; - --bg-alt: #fcfaf2; - --text-main: #333; - --text-muted: #888; - --surface: #fffdf7; - --surface-soft: #fff9e8; -} - -/* 1. 先處理 body 和全域，確保沒人亂給外距 */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - - -html, -body { - background-color: var(--deep-black); - color: #eeeeee; - height: 100%; - margin: 0; - padding: 0; - overflow-x: hidden; -} - -body { - font-family: 'Noto Sans TC', system-ui, sans-serif; - color: var(--text-color); - line-height: 1.6; -} - -header { - width: 100%; - height: 100vh; - min-height: 100dvh; - background-image: url('img/header.jpg'); - background-position: center center; - background-repeat: no-repeat; - background-size: 108%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; - overflow: hidden; - position: relative; -} - -/* 導覽列 */ -nav { - background-color: var(--black); - padding: 0.8rem; - display: flex; - justify-content: space-between; - align-items: center; - padding: 10px 100px; -} - -.logo { - width: 300px; - height: auto; - display: block; - object-fit: contain; - transform: translateY(5px); -} - -.logo img { - width: 100%; - height: 100%; - object-fit: contain; - -} - -nav ul { - list-style: none; - display: flex; - justify-content: center; - gap: 24px; -} - -nav a { - color: var(--primary); - text-decoration: none; - font-size: 0.95rem; - letter-spacing: 1px; -} - - -nav a:hover { - color: white; -} - -.portal-nav li { - position: relative; - padding-bottom: 8px; -} - -.portal-nav { - position: relative; - z-index: 60; -} - -.portal-nav .portal-submenu { - display: none; - position: absolute; - top: calc(100% - 2px); - left: 0; - min-width: 220px; - padding: 10px; - border-radius: 12px; - background: #ffffff; - box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12); - z-index: 80; -} - -.portal-nav .portal-submenu li { - padding-bottom: 0; -} - -.portal-nav .portal-submenu a { - display: block; - padding: 6px 8px; - border-radius: 8px; - color: #5f5f5f; - font-size: 0.84rem; - font-weight: 500; - letter-spacing: 0; -} - -.portal-nav .portal-submenu a:hover { - background: #fff8df; - color: #3a300a; -} - -.portal-nav a.nav-current { - color: #ffffff; -} - -.portal-nav>ul>li.coming-soon>a { - position: relative; - padding-bottom: 20px; - color: #c8a66a !important; - cursor: not-allowed; -} - -.portal-nav>ul>li.coming-soon>a::after { - content: "建置中"; - position: absolute; - left: 50%; - bottom: -8px; - transform: translateX(-50%); - white-space: nowrap; - line-height: 1; - font-size: 0.72rem; - letter-spacing: 0.5px; - color: #fff; - background: #a66a2d; - border-radius: 999px; - padding: 4px 10px; -} - -.portal-nav a[data-coming-soon="true"] { - cursor: not-allowed; - opacity: 0.72; -} - -.portal-nav li.coming-soon>.portal-submenu { - display: none !important; -} - -.portal-nav .portal-submenu a[data-coming-soon="true"] { - position: relative; -} - -.portal-nav .portal-submenu a[data-coming-soon="true"]::after { - content: "建置中"; - position: absolute; - top: 50%; - right: -78px; - transform: translateY(-50%); - font-size: 0.72rem; - letter-spacing: 0.5px; - color: #fff; - background: #a66a2d; - border-radius: 999px; - padding: 4px 10px; - opacity: 0; - pointer-events: none; - transition: opacity 0.18s ease; -} - -.portal-nav .portal-submenu a[data-coming-soon="true"]:hover::after, -.portal-nav .portal-submenu a[data-coming-soon="true"]:focus-visible::after { - opacity: 1; -} - -.portal-nav li:hover>.portal-submenu, -.portal-nav li:focus-within>.portal-submenu, -.portal-nav li.open>.portal-submenu { - display: grid; - gap: 6px; -} - -#particles { - position: fixed; - inset: 0; - width: 100vw; - height: 100vh; - display: block; - z-index: 0; - pointer-events: none; -} - -header, -nav, -.container, -footer { - position: relative; - z-index: 1; -} - -/* 橫幅 Hero Section */ -.hero { - position: relative; - z-index: 1; - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.hero h1, -.hero p { - margin: 0; - padding: 0.5rem; -} - -.hero h1 { - font-size: 2.5rem; - line-height: 1.2; - color: var(--primary); - text-shadow: 0 0 30px rgba(255, 221, 0, 0.8); -} - -.hero p { - font-size: 1.2rem; - color: var(--gray); -} - -.btn { - display: inline-block; - padding: 10px 30px; - background: var(--primary); - color: #000; - font-weight: bold; - border-radius: 50px; - text-decoration: none; - transition: all 0.3s; -} - -.btn:hover { - transform: scale(1.1); - background: #FFEE66; -} - - -/* 區塊容器 */ -.container { - max-width: 1200px; - margin: 0 auto; - padding: 40px 20px; -} - -.content-container { - max-width: 1200px; - margin: 0 auto; - padding-left: 20px; - padding-right: 20px; -} - -.section-title { - color: var(--primary); - text-align: center; - font-size: 1.35rem; - letter-spacing: 3px; - margin-bottom: 20px; - text-transform: uppercase; -} - -.section-title::after { - content: ""; - display: block; - width: 50px; - height: 3px; - background: var(--primary); - margin: 15px auto 0; -} - -.subtitle-wrap { - margin: 4px auto 28px; - display: flex; - align-items: center; - justify-content: center; -} - -.subtitle-wrap::before, -.subtitle-wrap::after { - content: ""; - flex: 1; - height: 2px; - background-color: var(--primary); - max-width: 56px; - opacity: 0.7; -} - -.sub-title { - font-size: 0.72rem; - color: #7e7e7e; - letter-spacing: 2.4px; - margin: 0 18px; -} - - - -.story-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 40px; - max-width: 1200px; - margin: 0 auto; -} - -.card { - background: linear-gradient(135deg, var(--surface-soft) 0%, #ffffff 100%); - backdrop-filter: blur(10px); - border: 1px solid rgba(255, 204, 0, 0.18); - border-radius: 14px; - padding: 30px; - transition: 0.4s; - box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08); -} - -.card:hover { - transform: translateY(-8px); - border-color: var(--primary); - box-shadow: 0 16px 32px rgba(0, 0, 0, 0.14); -} - -.card h3 { - color: #2e2e2e; - margin-bottom: 15px; -} - -.card p { - color: #585858; -} - -/* 統一 section 版型 */ -section { - margin-top: 0 !important; - margin-bottom: 60px; - background: var(--surface); - padding: 44px 36px; - border-radius: 16px; - border: 1px solid rgba(255, 204, 0, 0.15); - box-shadow: 0 14px 34px rgba(0, 0, 0, 0.15); - position: relative; - z-index: 10; - -} - -/* 作品列表表格 */ -table { - width: 100%; - border-collapse: collapse; - margin-top: 20px; - border-radius: 12px; - overflow: hidden; - background: #fff; - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); -} - -table th { - background-color: var(--primary); - color: var(--black); - padding: 12px; -} - -table td { - padding: 12px; - border-bottom: 1px solid #ececec; - text-align: center; - color: #4a4a4a; -} - -a { - color: var(--text-color); - text-decoration: none; -} - -.story-archive { - overflow: hidden; -} - -/* 備註：移除主軸上方獨立鑽石後，將主軸上下邊界微調 4px，保留你要的留白節奏 */ -.merged-storyline { - position: relative; - padding-top: 18px; - padding-bottom: 4px; - max-width: 960px; - margin: 0 auto; -} - -/* 備註：主軸往上/下各延伸 4px，避免線段在視覺上被截斷 */ -.merged-storyline::before { - content: ""; - position: absolute; - top: -4px; - bottom: -4px; - left: 50%; - width: 4px; - transform: translateX(-50%); - background: linear-gradient(180deg, #ffde5f 0%, #ffcc00 45%, #f3b700 100%); - border-radius: 8px; -} - -.story-node { - position: relative; - width: calc(50% - 34px); - margin-bottom: 28px; - padding: 16px 18px; - background: linear-gradient(135deg, var(--surface-soft) 0%, #fff 100%); - border: 1px solid rgba(255, 204, 0, 0.18); - border-radius: 12px; - box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1); -} - -/* 備註：改回 Font Awesome 鑽石圖示，並加上 border-box 讓圓圈節點中心準確對齊主軸 */ -.story-node::before { - content: "\f3a5"; - font-family: "Font Awesome 6 Free"; - font-weight: 900; - position: absolute; - top: 6px; - width: 30px; - height: 30px; - box-sizing: border-box; - display: grid; - place-items: center; - line-height: 1; - border-radius: 50%; - background: #fffdf5; - color: #e0b400; - /* border: 2px solid var(--primary); - box-shadow: 0 0 0 4px var(--surface), 0 4px 10px rgba(0, 0, 0, 0.14); */ - z-index: 2; -} - -/* 備註：時間標籤改成 concert 的日期章語言，並把字級放大到原本兩倍以上 */ -.story-node::after { - content: attr(data-era); - position: absolute; - top: -14px; - background-color: var(--primary); - color: #303030; - font-size: 0.7rem; - font-weight: 700; - letter-spacing: 0.5px; - border-radius: 7px; - padding: 3px 9px; - border: 2px solid #fff; - box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.16); - z-index: 3; -} - -/* 備註：改用奇偶自動分邊，新增中間節點時不需要手動加 class */ -.merged-storyline .story-node:nth-of-type(odd) { - margin-right: auto; - margin-top: 30px; -} - -.merged-storyline .story-node:nth-of-type(odd)::before { - right: -49px; -} - -.merged-storyline .story-node:nth-of-type(odd)::after { - right: -10px; - top: -20px; - transform: rotate(30deg); -} - -.merged-storyline .story-node:nth-of-type(even) { - margin-left: auto; - margin-top: 10px; -} - -.merged-storyline .story-node:nth-of-type(even)::before { - left: -49px; -} - -.merged-storyline .story-node:nth-of-type(even)::after { - left: -10px; - top: -20px; - transform: rotate(-30deg); -} - -.story-node h3 { - color: #303030; - margin-bottom: 8px; - font-size: 1rem; - line-height: 1.5; -} - -.story-node p { - color: #575757; - font-size: 0.9rem; - line-height: 1.7; -} - -@media (max-width: 900px) { - - /* 備註：手機版主軸維持在左側，避免鑽石與內容互相遮擋 */ - .merged-storyline::before { - left: 18px; - transform: none; - } - - .story-node { - width: calc(100% - 44px); - margin-left: 44px; - } - - .story-node { - margin-right: 0; - margin-left: 44px; - } - - .story-node::before { - left: -39px; - right: auto; - } - - .story-node::after { - left: 14px; - right: auto; - transform: rotate(-8deg); - } -} - -/* 頁尾 */ -footer { - background-color: var(--black); - color: white; - text-align: center; - padding: 50px 0 20px; -} - -.highlight { - color: var(--dark-yellow); - font-weight: bold; -} - -/* map.html */ -.map-page .map-archive-header, -.map-page .portal-nav, -.map-page .member-tabs, -.map-page #itinerary-search, -.map-page .map-layout, -.map-page footer { - position: relative; - z-index: 1; -} - -.concert-page .concert-archive-header, -.concert-page .portal-nav, -.concert-page .search-section, -.concert-page .concert-container, -.concert-page footer { - position: relative; - z-index: 1; -} - -.map-page .portal-nav { - width: 100%; - margin: 0 0 14px; - padding: 0.8rem 100px; - background-color: var(--black); - border-radius: 0; - box-shadow: none; - overflow: visible; - position: sticky; - top: 0; - z-index: 30; -} - -.map-page .portal-nav ul { - list-style: none; - margin: 0; - padding: 0; -} - -.map-page .portal-nav>ul { - display: flex; - align-items: center; - justify-content: flex-end; - gap: 24px; - flex-wrap: wrap; - min-width: 0; - padding: 0; -} - -.map-page .portal-nav>ul>li { - position: relative; - line-height: 1; -} - -.map-page .portal-nav>ul>li>a { - display: inline-block; - color: var(--primary); - text-decoration: none; - font-size: 0.95rem; - letter-spacing: 1px; - white-space: nowrap; - padding: 4px 2px; - border-bottom: 0; - transition: color 0.2s ease; -} - -.map-page .portal-nav>ul>li>a:hover, -.map-page .portal-nav>ul>li:focus-within>a { - color: white; -} - -.map-page .portal-nav .portal-submenu { - position: absolute; - left: auto; - right: 0; - top: calc(100% + 8px); - min-width: 240px; - padding: 10px; - border-radius: 12px; - background: #ffffff; - box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12); - display: none; - gap: 6px; - z-index: 20; -} - -.map-page .portal-nav>ul>li:hover .portal-submenu, -.map-page .portal-nav>ul>li:focus-within .portal-submenu { - display: grid; -} - -.map-page .portal-nav .portal-submenu a { - display: block; - padding: 6px 8px; - border-radius: 8px; - font-size: 0.84rem; - color: #5f5f5f; - font-weight: 500; -} - -.map-page .portal-nav .portal-submenu a:hover { - background: #fff8df; - color: #3a300a; -} - -.map-archive-header { - width: 100%; - height: 100vh; - min-height: 100dvh; - background-image: url('img/header.jpg'); - background-position: center center; - background-repeat: no-repeat; - background-size: 108%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; - padding: 0 20px; - overflow: hidden; - position: relative; -} - -.map-archive-header .main-title { - font-size: clamp(2rem, 4.5vw, 3.2rem); - font-weight: 900; - color: var(--yellow); - letter-spacing: 6px; - text-transform: uppercase; - margin: 0; - text-shadow: 0 0 30px rgba(255, 221, 0, 0.75); -} - -.map-archive-header .subtitle-wrap { - margin-top: 20px; -} - -.map-archive-header .subtitle-wrap::before, -.map-archive-header .subtitle-wrap::after { - height: 3px; - background-color: #ffcc00; - max-width: 56px; -} - -.map-archive-header .sub-title { - font-size: 0.92rem; - letter-spacing: 4px; - color: #d4d4d4; -} - -.map-layout { - display: grid; - grid-template-columns: minmax(320px, 40%) minmax(0, 1fr); - gap: 26px; - align-items: start; - padding-top: 16px; -} - -.member-tabs { - background: transparent; - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: center; - gap: 12px; - margin: 18px auto 14px; - max-width: 1100px; - padding: 4px 20px; -} - -#itinerary-search { - display: block; - max-width: 1100px; - width: 100%; - margin: 0 auto 14px; - padding: 10px 16px; - border: 1px solid #e4dbb8; - border-radius: 999px; - font-size: 0.92rem; - background: #fffef8; - color: #444; - outline: none; -} - -#itinerary-search:focus { - border-color: #ffcc00; - box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.2); -} - -.tab-btn { - border: 1px solid #e9d99d; - background: #ffffff; - color: #4a4a4a; - border-radius: 999px; - padding: 9px 18px; - font-size: 0.93rem; - font-weight: 700; - cursor: pointer; - transition: all 0.2s ease; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); -} - -.tab-btn:hover, -.tab-btn.active { - background: #ffcc00; - color: #2f2f2f; - border-color: #ffcc00; -} - -.map-sticky { - position: sticky; - top: 22px; - align-self: start; - background: #fff; - border-radius: 16px; - padding: 18px; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07); - border: 1px solid rgba(0, 0, 0, 0.04); -} - -.map-title { - color: #343434; - font-size: 1.05rem; - margin: 0 0 12px; - letter-spacing: 1px; -} - -.map-my-maps-frame { - width: 100%; - height: min(66vh, 640px); - min-height: 420px; - border: 0; - border-radius: 12px; - box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1); -} - -.map-embed-all { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 16px; -} - -.map-embed-label { - margin: 0 0 8px; - font-size: 0.88rem; - font-weight: 700; - color: #444; -} - -.map-links-dual { - display: flex; - flex-direction: column; - gap: 6px; - margin-top: 12px; -} - -.map-links-dual .map-link { - margin-top: 0; -} - -.map-links-wrap .map-link { - align-self: flex-start; -} - -.map-link { - display: inline-block; - margin-top: 12px; - font-size: 0.85rem; - color: #7f6712; - text-decoration: none; - border-bottom: 1px solid rgba(127, 103, 18, 0.4); -} - -.itinerary-list { - background: transparent; - border: 0; - box-shadow: none; - border-radius: 0; - padding-top: 0; - padding-bottom: 0; - display: grid; - gap: 14px; - padding: 0 14px; -} - -.day-group { - padding: 0 !important; - border: 0 !important; - box-shadow: none !important; - border-radius: 14px; - background: #fff8df; - overflow: hidden; - width: 100%; - margin: 0; -} - -.day-toggle { - width: calc(100% - 20px); - margin: 10px auto 8px; - border: 0; - background: #fff8df; - color: #4b4020; - font-size: 0.95rem; - font-weight: 800; - letter-spacing: 0.4px; - padding: 12px 16px; - display: flex; - align-items: center; - justify-content: space-between; - cursor: pointer; - border-radius: 12px; -} - -.day-toggle i { - transition: transform 0.2s ease; -} - -.day-group.expanded .day-toggle i { - transform: rotate(180deg); -} - -.day-cards { - display: grid; - gap: 10px; - width: calc(100% - 20px); - margin: 0 auto 10px; - padding: 10px; - background: #fff; - border-radius: 12px; -} - -.polaroid-card { - display: flex; - align-items: flex-start; - gap: 14px; - border-radius: 12px; - padding: 12px; - background: #fff; - cursor: pointer; - transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; - position: relative; -} - -.polaroid-card::before { - content: "\f111"; - font-family: "Font Awesome 6 Free"; - font-weight: 900; - position: absolute; - right: 12px; - top: 10px; - color: #ebd37a; - font-size: 0.5rem; -} - -.polaroid-card:hover, -.polaroid-card.active { - transform: translateY(-1px); - box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08); - background: #fffdf4; -} - -.photo-frame { - width: 118px; - flex: 0 0 118px; -} - -.photo-frame img { - width: 100%; - height: 86px; - object-fit: cover; - border-radius: 8px; -} - -.card-content .date { - display: inline-block; - font-size: 0.72rem; - color: #9a8851; - margin-bottom: 2px; - font-weight: 700; - letter-spacing: 0.6px; -} - -.card-content h3 { - margin: 0 0 3px; - font-size: 1rem; - color: #323232; -} - -.card-content .description { - margin: 0 0 6px; - font-size: 0.86rem; - color: #6a6a6a; -} - -.card-content .tag { - font-size: 0.76rem; - color: #8b7423; - font-weight: 600; -} - -.detail-panel { - margin-top: 8px; - border: 1px solid #eadfb2; - border-radius: 12px; - overflow: hidden; - background: #fffef8; - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06); -} - -.detail-photo img { - width: 100%; - max-height: 300px; - object-fit: cover; - display: block; -} - -.detail-content { - padding: 16px; -} - -.detail-content h3 { - margin: 4px 0 10px; - color: #2c2c2c; - font-size: 1.2rem; -} - -.detail-content p { - color: #5a5a5a; - margin-bottom: 12px; - line-height: 1.7; -} - -.detail-content blockquote { - margin: 0 0 10px; - padding: 10px 12px; - background: #fff7da; - border-left: 3px solid #f0c02f; - color: #65510e; - font-size: 0.92rem; - border-radius: 4px; -} - -.detail-link { - display: inline-block; - margin-top: 8px; - color: #7b6215; - text-decoration: none; - font-weight: 600; - border-bottom: 1px solid rgba(123, 98, 21, 0.45); -} - -@media (max-width: 920px) { - .map-archive-header { - background-size: cover; - padding: 0 16px; - } - - .map-archive-header .main-title { - letter-spacing: 4px; - } - - .map-layout { - grid-template-columns: 1fr; - } - - .map-page .portal-nav>ul { - justify-content: center; - gap: 16px; - } - - .map-page .portal-nav { - padding: 0.8rem 16px; - } - - .map-page .portal-nav .portal-submenu { - position: static; - min-width: 0; - margin-top: 6px; - display: grid; - box-shadow: none; - background: #fffaf0; - padding: 8px; - } - - #itinerary-search { - width: calc(100% - 28px); - } - - .map-sticky { - position: static; - padding: 14px; - } - - .map-my-maps-frame { - height: 320px; - min-height: 320px; - } - - .map-embed-all { - grid-template-columns: 1fr; - } - - .polaroid-card { - flex-direction: column; - gap: 10px; - } - - .photo-frame { - width: 100%; - flex: none; - } - - .photo-frame img { - height: 170px; - } - - .detail-content { - padding: 13px; - } -} - -/* Variety hub */ -.variety-block { - background: #fffdf6; - border-radius: 16px; - padding: 24px; - margin-top: 24px; - border: 1px solid rgba(0, 0, 0, 0.06); -} - -.variety-page-main { - padding-bottom: 48px; -} - -/* Chronicle (webcomic-like reader) */ -.chronicle-controls { - max-width: 1200px; - margin: 24px auto 10px; - padding: 0 14px; - display: flex; - gap: 10px; - flex-wrap: wrap; -} - -.mode-btn { - border: 0; - background: #2a2a2a; - color: #ffe9a8; - padding: 10px 16px; - border-radius: 999px; - cursor: pointer; - font-weight: 700; - letter-spacing: 0.3px; -} - -.mode-btn.active { - background: var(--primary); - color: #161616; -} - -.chronicle-reader { - max-width: 960px; - margin: 0 auto 24px; - padding: 0 14px; -} - -.chronicle-chapter { - background: #fffdf6; - border-radius: 16px; - padding: 24px 20px; - margin-bottom: 16px; - box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); -} - -.chronicle-chapter h2 { - margin: 0 0 12px; - color: #252525; - letter-spacing: 1px; -} - -.chronicle-chapter p { - margin: 0 0 10px; - line-height: 1.9; - color: #333; -} - -.chronicle-pager { - max-width: 960px; - margin: 0 auto 30px; - padding: 0 14px; - display: flex; - align-items: center; - justify-content: center; - gap: 12px; -} - -#chapter-indicator { - min-width: 64px; - text-align: center; - font-weight: 700; - color: #f6d66f; -} - -.chronicle-pager .btn { - border: 0; - background: #171717; - color: #fff2bf; - padding: 9px 14px; - border-radius: 8px; - cursor: pointer; -} - -.chronicle-pager .btn:disabled { - opacity: 0.4; - cursor: not-allowed; -} - -@media (max-width: 640px) { - .chronicle-chapter { - padding: 18px 14px; - } - - .mode-btn { - width: 100%; - } +@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap'); + +:root { + --primary: #ffcc00; + --light-yellow: #fceea7; + --dark-yellow: #4e492b; + --black: #1a1a1a; + --deep-black: #0a0a0a; + --gray: #f4f4f4; + --text-color: #333; + --accent: #FFD700; + --text: #1a1a1a; + --card-bg: #1a1a1a; + --bg-alt: #fcfaf2; + --text-main: #333; + --text-muted: #888; + --surface: #fffdf7; + --surface-soft: #fff9e8; +} + +/* 1. 先處理 body 和全域，確保沒人亂給外距 */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + + +html, +body { + background-color: var(--deep-black); + color: #eeeeee; + height: 100%; + margin: 0; + padding: 0; + overflow-x: hidden; +} + +body { + font-family: 'Noto Sans TC', system-ui, sans-serif; + color: var(--text-color); + line-height: 1.6; +} + +header { + width: 100%; + height: 100vh; + min-height: 100dvh; + background-image: url('img/header.jpg'); + background-position: center center; + background-repeat: no-repeat; + background-size: 108%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + overflow: hidden; + position: relative; +} + +/* 導覽列 */ +nav { + background-color: var(--black); + padding: 0.8rem; + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 100px; +} + +.logo { + width: 300px; + height: auto; + display: block; + object-fit: contain; + transform: translateY(5px); +} + +.logo img { + width: 100%; + height: 100%; + object-fit: contain; + +} + +nav ul { + list-style: none; + display: flex; + justify-content: center; + gap: 24px; +} + +nav a { + color: var(--primary); + text-decoration: none; + font-size: 0.95rem; + letter-spacing: 1px; +} + + +nav a:hover { + color: white; +} + +.portal-nav li { + position: relative; + padding-bottom: 8px; +} + +.portal-nav { + position: relative; + z-index: 60; +} + +.portal-nav .portal-submenu { + display: none; + position: absolute; + top: calc(100% - 2px); + left: 0; + min-width: 220px; + padding: 10px; + border-radius: 12px; + background: #ffffff; + box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12); + z-index: 80; +} + +.portal-nav .portal-submenu li { + padding-bottom: 0; +} + +.portal-nav .portal-submenu a { + display: block; + padding: 6px 8px; + border-radius: 8px; + color: #5f5f5f; + font-size: 0.84rem; + font-weight: 500; + letter-spacing: 0; +} + +.portal-nav .portal-submenu a:hover { + background: #fff8df; + color: #3a300a; +} + +.portal-nav a.nav-current { + color: #ffffff; +} + +.portal-nav>ul>li.coming-soon>a { + position: relative; + padding-bottom: 20px; + color: #c8a66a !important; + cursor: not-allowed; +} + +.portal-nav>ul>li.coming-soon>a::after { + content: "建置中"; + position: absolute; + left: 50%; + bottom: -8px; + transform: translateX(-50%); + white-space: nowrap; + line-height: 1; + font-size: 0.72rem; + letter-spacing: 0.5px; + color: #fff; + background: #a66a2d; + border-radius: 999px; + padding: 4px 10px; +} + +.portal-nav a[data-coming-soon="true"] { + cursor: not-allowed; + opacity: 0.72; +} + +.portal-nav li.coming-soon>.portal-submenu { + display: none !important; +} + +.portal-nav .portal-submenu a[data-coming-soon="true"] { + position: relative; +} + +.portal-nav .portal-submenu a[data-coming-soon="true"]::after { + content: "建置中"; + position: absolute; + top: 50%; + right: -78px; + transform: translateY(-50%); + font-size: 0.72rem; + letter-spacing: 0.5px; + color: #fff; + background: #a66a2d; + border-radius: 999px; + padding: 4px 10px; + opacity: 0; + pointer-events: none; + transition: opacity 0.18s ease; +} + +.portal-nav .portal-submenu a[data-coming-soon="true"]:hover::after, +.portal-nav .portal-submenu a[data-coming-soon="true"]:focus-visible::after { + opacity: 1; +} + +.portal-nav li:hover>.portal-submenu, +.portal-nav li:focus-within>.portal-submenu, +.portal-nav li.open>.portal-submenu { + display: grid; + gap: 6px; +} + +#particles { + position: fixed; + inset: 0; + width: 100vw; + height: 100vh; + display: block; + z-index: 0; + pointer-events: none; +} + +header, +nav, +.container, +footer { + position: relative; + z-index: 1; +} + +/* 橫幅 Hero Section */ +.hero { + position: relative; + z-index: 1; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.hero h1, +.hero p { + margin: 0; + padding: 0.5rem; +} + +.hero h1 { + font-size: 2.5rem; + line-height: 1.2; + color: var(--primary); + text-shadow: 0 0 30px rgba(255, 221, 0, 0.8); +} + +.hero p { + font-size: 1.2rem; + color: var(--gray); +} + +.btn { + display: inline-block; + padding: 10px 30px; + background: var(--primary); + color: #000; + font-weight: bold; + border-radius: 50px; + text-decoration: none; + transition: all 0.3s; +} + +.btn:hover { + transform: scale(1.1); + background: #FFEE66; +} + + +/* 區塊容器 */ +.container { + max-width: 1200px; + margin: 0 auto; + padding: 40px 20px; +} + +.content-container { + max-width: 1200px; + margin: 0 auto; + padding-left: 20px; + padding-right: 20px; +} + +.section-title { + color: var(--primary); + text-align: center; + font-size: 1.35rem; + letter-spacing: 3px; + margin-bottom: 20px; + text-transform: uppercase; +} + +.section-title::after { + content: ""; + display: block; + width: 50px; + height: 3px; + background: var(--primary); + margin: 15px auto 0; +} + +.subtitle-wrap { + margin: 4px auto 28px; + display: flex; + align-items: center; + justify-content: center; +} + +.subtitle-wrap::before, +.subtitle-wrap::after { + content: ""; + flex: 1; + height: 2px; + background-color: var(--primary); + max-width: 56px; + opacity: 0.7; +} + +.sub-title { + font-size: 0.72rem; + color: #7e7e7e; + letter-spacing: 2.4px; + margin: 0 18px; +} + + + +.story-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 40px; + max-width: 1200px; + margin: 0 auto; +} + +.card { + background: linear-gradient(135deg, var(--surface-soft) 0%, #ffffff 100%); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 204, 0, 0.18); + border-radius: 14px; + padding: 30px; + transition: 0.4s; + box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08); +} + +.card:hover { + transform: translateY(-8px); + border-color: var(--primary); + box-shadow: 0 16px 32px rgba(0, 0, 0, 0.14); +} + +.card h3 { + color: #2e2e2e; + margin-bottom: 15px; +} + +.card p { + color: #585858; +} + +/* 統一 section 版型 */ +section { + margin-top: 0 !important; + margin-bottom: 60px; + background: var(--surface); + padding: 44px 36px; + border-radius: 16px; + border: 1px solid rgba(255, 204, 0, 0.15); + box-shadow: 0 14px 34px rgba(0, 0, 0, 0.15); + position: relative; + z-index: 10; + +} + +/* 首頁：成立的初衷 — 標題與全站一致置中；其下雙欄（文 7 : 圖 3） */ +.mission-section > .section-title { + margin-bottom: clamp(1.25rem, 3vw, 1.75rem); +} + +.mission-section .mission-layout { + display: grid; + grid-template-columns: minmax(0, 7fr) minmax(200px, 3fr); + gap: clamp(1.5rem, 4vw, 3rem); + align-items: start; +} + +.mission-content > p, +.mission-content .logo-concept p { + color: #4a4a4a; + font-size: 1rem; + line-height: 1.6; + text-align: left; + margin: 0 0 1rem; +} + +.mission-content .logo-concept { + margin-top: 1.75rem; + padding-top: 0; +} + +.mission-content .logo-concept h3 { + font-size: 1.08rem; + letter-spacing: 0.18em; + color: var(--primary); + margin: 0 0 0.85rem; + font-weight: 800; + text-transform: uppercase; + padding: 0.65rem 0; + border-top: 2px solid rgba(255, 204, 0, 0.5); + border-bottom: 2px solid rgba(255, 204, 0, 0.5); +} + +/* 金句：獨立於雙欄之下，全區塊寬度內致中 */ +.mission-section > .quote-box { + width: 100%; + max-width: 44rem; + margin: clamp(1.75rem, 4vw, 2.5rem) auto 0; + padding: 1rem 1.25rem; + background: linear-gradient(135deg, var(--surface-soft) 0%, #fff7da 100%); + border-left: 4px solid var(--primary); + border-radius: 10px; + color: #55420a; + font-size: 1.02rem; + font-weight: 600; + line-height: 1.65; + text-align: center; + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06); +} + +.mission-visual { + align-self: start; +} + +.mission-visual .logo-wrapper { + position: sticky; + top: 1.25rem; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; +} + +.mission-visual .logo-wrapper img { + width: 100%; + max-width: min(320px, 100%); + height: auto; + display: block; + object-fit: contain; +} + +.mission-visual .caption { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.2rem; + margin-top: 0.65rem; + font-size: 0.78rem; + line-height: 1.45; + color: #6a6a6a; + max-width: 14rem; +} + +.mission-visual .arrow-icon { + font-size: 0.95rem; + line-height: 1; + color: var(--primary); + font-style: normal; +} + +@media (max-width: 900px) { + .mission-section .mission-layout { + grid-template-columns: 1fr; + gap: 1.75rem; + } + + .mission-visual .logo-wrapper { + position: static; + } + + .mission-visual .logo-wrapper img { + max-width: 260px; + } +} + +/* 作品列表表格 */ +table { + width: 100%; + border-collapse: collapse; + margin-top: 20px; + border-radius: 12px; + overflow: hidden; + background: #fff; + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); +} + +table th { + background-color: var(--primary); + color: var(--black); + padding: 12px; +} + +table td { + padding: 12px; + border-bottom: 1px solid #ececec; + text-align: center; + color: #4a4a4a; +} + +a { + color: var(--text-color); + text-decoration: none; +} + +.story-archive { + overflow: hidden; +} + +/* 備註：移除主軸上方獨立鑽石後，將主軸上下邊界微調 4px，保留你要的留白節奏 */ +.merged-storyline { + position: relative; + padding-top: 18px; + padding-bottom: 4px; + max-width: 960px; + margin: 0 auto; +} + +/* 備註：主軸往上/下各延伸 4px，避免線段在視覺上被截斷 */ +.merged-storyline::before { + content: ""; + position: absolute; + top: -4px; + bottom: -4px; + left: 50%; + width: 4px; + transform: translateX(-50%); + background: linear-gradient(180deg, #ffde5f 0%, #ffcc00 45%, #f3b700 100%); + border-radius: 8px; +} + +.story-node { + position: relative; + width: 100%; + max-width: 42rem; + margin: 0 0 28px; + padding: 16px 18px; + background: linear-gradient(135deg, var(--surface-soft) 0%, #fff 100%); + border: 1px solid rgba(255, 204, 0, 0.18); + border-radius: 12px; + box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1); +} + +/* 時間軸節點：僅在 merged-storyline 內顯示鑽石與年代章 */ +.story-node::before, +.story-node::after { + content: none; + display: none; +} + +.merged-storyline .story-node { + width: calc(50% - 34px); + max-width: none; + margin-left: 0; + margin-right: 0; +} + +.merged-storyline .story-node::before { + content: "\f3a5"; + font-family: "Font Awesome 6 Free"; + font-weight: 900; + position: absolute; + top: 6px; + width: 30px; + height: 30px; + box-sizing: border-box; + display: grid; + place-items: center; + line-height: 1; + border-radius: 50%; + background: #fffdf5; + color: #e0b400; + z-index: 2; +} + +.merged-storyline .story-node::after { + content: attr(data-era); + position: absolute; + top: -14px; + background-color: var(--primary); + color: #303030; + font-size: 0.7rem; + font-weight: 700; + letter-spacing: 0.5px; + border-radius: 7px; + padding: 3px 9px; + border: 2px solid #fff; + box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.16); + z-index: 3; + display: block; +} + +/* 備註：改用奇偶自動分邊，新增中間節點時不需要手動加 class */ +.merged-storyline .story-node:nth-of-type(odd) { + margin-right: auto; + margin-top: 30px; +} + +.merged-storyline .story-node:nth-of-type(odd)::before { + right: -49px; +} + +.merged-storyline .story-node:nth-of-type(odd)::after { + right: -10px; + top: -20px; + transform: rotate(30deg); +} + +.merged-storyline .story-node:nth-of-type(even) { + margin-left: auto; + margin-top: 10px; +} + +.merged-storyline .story-node:nth-of-type(even)::before { + left: -49px; +} + +.merged-storyline .story-node:nth-of-type(even)::after { + left: -10px; + top: -20px; + transform: rotate(-30deg); +} + +.story-node h3 { + color: #303030; + margin-bottom: 8px; + font-size: 1rem; + line-height: 1.5; +} + +.story-node p { + color: #575757; + font-size: 0.9rem; + line-height: 1.7; +} + +@media (max-width: 900px) { + + /* 備註：手機版主軸維持在左側，避免鑽石與內容互相遮擋 */ + .merged-storyline::before { + left: 18px; + transform: none; + } + + .merged-storyline .story-node { + width: calc(100% - 44px); + margin-right: 0; + margin-left: 44px; + } + + .merged-storyline .story-node::before { + left: -39px; + right: auto; + } + + .merged-storyline .story-node::after { + left: 14px; + right: auto; + transform: rotate(-8deg); + } +} + +/* 頁尾 */ +footer { + background-color: var(--black); + color: white; + text-align: center; + padding: 50px 0 20px; +} + +.highlight { + color: var(--dark-yellow); + font-weight: bold; +} + +/* map.html */ +.map-page .map-archive-header, +.map-page .portal-nav, +.map-page .member-tabs, +.map-page #itinerary-search, +.map-page .map-layout, +.map-page footer { + position: relative; + z-index: 1; +} + +.concert-page .concert-archive-header, +.concert-page .portal-nav, +.concert-page .search-section, +.concert-page .concert-container, +.concert-page footer { + position: relative; + z-index: 1; +} + +.map-page .portal-nav { + width: 100%; + margin: 0 0 14px; + padding: 0.8rem 100px; + background-color: var(--black); + border-radius: 0; + box-shadow: none; + overflow: visible; + position: sticky; + top: 0; + z-index: 30; +} + +.map-page .portal-nav ul { + list-style: none; + margin: 0; + padding: 0; +} + +.map-page .portal-nav>ul { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 24px; + flex-wrap: wrap; + min-width: 0; + padding: 0; +} + +.map-page .portal-nav>ul>li { + position: relative; + line-height: 1; +} + +.map-page .portal-nav>ul>li>a { + display: inline-block; + color: var(--primary); + text-decoration: none; + font-size: 0.95rem; + letter-spacing: 1px; + white-space: nowrap; + padding: 4px 2px; + border-bottom: 0; + transition: color 0.2s ease; +} + +.map-page .portal-nav>ul>li>a:hover, +.map-page .portal-nav>ul>li:focus-within>a { + color: white; +} + +.map-page .portal-nav .portal-submenu { + position: absolute; + left: auto; + right: 0; + top: calc(100% + 8px); + min-width: 240px; + padding: 10px; + border-radius: 12px; + background: #ffffff; + box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12); + display: none; + gap: 6px; + z-index: 20; +} + +.map-page .portal-nav>ul>li:hover .portal-submenu, +.map-page .portal-nav>ul>li:focus-within .portal-submenu { + display: grid; +} + +.map-page .portal-nav .portal-submenu a { + display: block; + padding: 6px 8px; + border-radius: 8px; + font-size: 0.84rem; + color: #5f5f5f; + font-weight: 500; +} + +.map-page .portal-nav .portal-submenu a:hover { + background: #fff8df; + color: #3a300a; +} + +.map-archive-header { + width: 100%; + height: 100vh; + min-height: 100dvh; + background-image: url('img/header.jpg'); + background-position: center center; + background-repeat: no-repeat; + background-size: 108%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + padding: 0 20px; + overflow: hidden; + position: relative; +} + +.map-archive-header .main-title { + font-size: clamp(2rem, 4.5vw, 3.2rem); + font-weight: 900; + color: var(--yellow); + letter-spacing: 6px; + text-transform: uppercase; + margin: 0; + text-shadow: 0 0 30px rgba(255, 221, 0, 0.75); +} + +.map-archive-header .subtitle-wrap { + margin-top: 20px; +} + +.map-archive-header .subtitle-wrap::before, +.map-archive-header .subtitle-wrap::after { + height: 3px; + background-color: #ffcc00; + max-width: 56px; +} + +.map-archive-header .sub-title { + font-size: 0.92rem; + letter-spacing: 4px; + color: #d4d4d4; +} + +.map-layout { + display: grid; + grid-template-columns: minmax(320px, 40%) minmax(0, 1fr); + gap: 26px; + align-items: start; + padding-top: 16px; +} + +.member-tabs { + background: transparent; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 12px; + margin: 18px auto 14px; + max-width: 1100px; + padding: 4px 20px; +} + +#itinerary-search { + display: block; + max-width: 1100px; + width: 100%; + margin: 0 auto 14px; + padding: 10px 16px; + border: 1px solid #e4dbb8; + border-radius: 999px; + font-size: 0.92rem; + background: #fffef8; + color: #444; + outline: none; +} + +#itinerary-search:focus { + border-color: #ffcc00; + box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.2); +} + +.tab-btn { + border: 1px solid #e9d99d; + background: #ffffff; + color: #4a4a4a; + border-radius: 999px; + padding: 9px 18px; + font-size: 0.93rem; + font-weight: 700; + cursor: pointer; + transition: all 0.2s ease; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); +} + +.tab-btn:hover, +.tab-btn.active { + background: #ffcc00; + color: #2f2f2f; + border-color: #ffcc00; +} + +.map-sticky { + position: sticky; + top: 22px; + align-self: start; + background: #fff; + border-radius: 16px; + padding: 18px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07); + border: 1px solid rgba(0, 0, 0, 0.04); +} + +.map-title { + color: #343434; + font-size: 1.05rem; + margin: 0 0 12px; + letter-spacing: 1px; +} + +.map-my-maps-frame { + width: 100%; + height: min(66vh, 640px); + min-height: 420px; + border: 0; + border-radius: 12px; + box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1); +} + +.map-embed-all { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 16px; +} + +.map-embed-label { + margin: 0 0 8px; + font-size: 0.88rem; + font-weight: 700; + color: #444; +} + +.map-links-dual { + display: flex; + flex-direction: column; + gap: 6px; + margin-top: 12px; +} + +.map-links-dual .map-link { + margin-top: 0; +} + +.map-links-wrap .map-link { + align-self: flex-start; +} + +.map-link { + display: inline-block; + margin-top: 12px; + font-size: 0.85rem; + color: #7f6712; + text-decoration: none; + border-bottom: 1px solid rgba(127, 103, 18, 0.4); +} + +.itinerary-list { + background: transparent; + border: 0; + box-shadow: none; + border-radius: 0; + padding-top: 0; + padding-bottom: 0; + display: grid; + gap: 14px; + padding: 0 14px; +} + +.day-group { + padding: 0 !important; + border: 0 !important; + box-shadow: none !important; + border-radius: 14px; + background: #fff8df; + overflow: hidden; + width: 100%; + margin: 0; +} + +.day-toggle { + width: calc(100% - 20px); + margin: 10px auto 8px; + border: 0; + background: #fff8df; + color: #4b4020; + font-size: 0.95rem; + font-weight: 800; + letter-spacing: 0.4px; + padding: 12px 16px; + display: flex; + align-items: center; + justify-content: space-between; + cursor: pointer; + border-radius: 12px; +} + +.day-toggle i { + transition: transform 0.2s ease; +} + +.day-group.expanded .day-toggle i { + transform: rotate(180deg); +} + +.day-cards { + display: grid; + gap: 10px; + width: calc(100% - 20px); + margin: 0 auto 10px; + padding: 10px; + background: #fff; + border-radius: 12px; +} + +.polaroid-card { + display: flex; + align-items: flex-start; + gap: 14px; + border-radius: 12px; + padding: 12px; + background: #fff; + cursor: pointer; + transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; + position: relative; +} + +.polaroid-card::before { + content: "\f111"; + font-family: "Font Awesome 6 Free"; + font-weight: 900; + position: absolute; + right: 12px; + top: 10px; + color: #ebd37a; + font-size: 0.5rem; +} + +.polaroid-card:hover, +.polaroid-card.active { + transform: translateY(-1px); + box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08); + background: #fffdf4; +} + +.photo-frame { + width: 118px; + flex: 0 0 118px; +} + +.photo-frame img { + width: 100%; + height: 86px; + object-fit: cover; + border-radius: 8px; +} + +.card-content .date { + display: inline-block; + font-size: 0.72rem; + color: #9a8851; + margin-bottom: 2px; + font-weight: 700; + letter-spacing: 0.6px; +} + +.card-content h3 { + margin: 0 0 3px; + font-size: 1rem; + color: #323232; +} + +.card-content .description { + margin: 0 0 6px; + font-size: 0.86rem; + color: #6a6a6a; +} + +.card-content .tag { + font-size: 0.76rem; + color: #8b7423; + font-weight: 600; +} + +.detail-panel { + margin-top: 8px; + border: 1px solid #eadfb2; + border-radius: 12px; + overflow: hidden; + background: #fffef8; + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06); +} + +.detail-photo img { + width: 100%; + max-height: 300px; + object-fit: cover; + display: block; +} + +.detail-content { + padding: 16px; +} + +.detail-content h3 { + margin: 4px 0 10px; + color: #2c2c2c; + font-size: 1.2rem; +} + +.detail-content p { + color: #5a5a5a; + margin-bottom: 12px; + line-height: 1.7; +} + +.detail-content blockquote { + margin: 0 0 10px; + padding: 10px 12px; + background: #fff7da; + border-left: 3px solid #f0c02f; + color: #65510e; + font-size: 0.92rem; + border-radius: 4px; +} + +.detail-link { + display: inline-block; + margin-top: 8px; + color: #7b6215; + text-decoration: none; + font-weight: 600; + border-bottom: 1px solid rgba(123, 98, 21, 0.45); +} + +@media (max-width: 920px) { + .map-archive-header { + background-size: cover; + padding: 0 16px; + } + + .map-archive-header .main-title { + letter-spacing: 4px; + } + + .map-layout { + grid-template-columns: 1fr; + } + + .map-page .portal-nav>ul { + justify-content: center; + gap: 16px; + } + + .map-page .portal-nav { + padding: 0.8rem 16px; + } + + .map-page .portal-nav .portal-submenu { + position: static; + min-width: 0; + margin-top: 6px; + display: grid; + box-shadow: none; + background: #fffaf0; + padding: 8px; + } + + #itinerary-search { + width: calc(100% - 28px); + } + + .map-sticky { + position: static; + padding: 14px; + } + + .map-my-maps-frame { + height: 320px; + min-height: 320px; + } + + .map-embed-all { + grid-template-columns: 1fr; + } + + .polaroid-card { + flex-direction: column; + gap: 10px; + } + + .photo-frame { + width: 100%; + flex: none; + } + + .photo-frame img { + height: 170px; + } + + .detail-content { + padding: 13px; + } +} + +/* Variety hub */ +.variety-block { + background: #fffdf6; + border-radius: 16px; + padding: 24px; + margin-top: 24px; + border: 1px solid rgba(0, 0, 0, 0.06); +} + +.variety-page-main { + padding-bottom: 48px; +} + +/* Chronicle (webcomic-like reader) */ +.chronicle-controls { + max-width: 1200px; + margin: 24px auto 10px; + padding: 0 14px; + display: flex; + gap: 10px; + flex-wrap: wrap; +} + +.mode-btn { + border: 0; + background: #2a2a2a; + color: #ffe9a8; + padding: 10px 16px; + border-radius: 999px; + cursor: pointer; + font-weight: 700; + letter-spacing: 0.3px; +} + +.mode-btn.active { + background: var(--primary); + color: #161616; +} + +.chronicle-reader { + max-width: 960px; + margin: 0 auto 24px; + padding: 0 14px; +} + +.chronicle-chapter { + background: #fffdf6; + border-radius: 16px; + padding: 24px 20px; + margin-bottom: 16px; + box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); +} + +.chronicle-chapter h2 { + margin: 0 0 12px; + color: #252525; + letter-spacing: 1px; +} + +.chronicle-chapter p { + margin: 0 0 10px; + line-height: 1.9; + color: #333; +} + +.chronicle-pager { + max-width: 960px; + margin: 0 auto 30px; + padding: 0 14px; + display: flex; + align-items: center; + justify-content: center; + gap: 12px; +} + +#chapter-indicator { + min-width: 64px; + text-align: center; + font-weight: 700; + color: #f6d66f; +} + +.chronicle-pager .btn { + border: 0; + background: #171717; + color: #fff2bf; + padding: 9px 14px; + border-radius: 8px; + cursor: pointer; +} + +.chronicle-pager .btn:disabled { + opacity: 0.4; + cursor: not-allowed; +} + +@media (max-width: 640px) { + .chronicle-chapter { + padding: 18px 14px; + } + + .mode-btn { + width: 100%; + } } \ No newline at end of file diff --git a/tablet.css b/tablet.css index d758c9b..d0a11b9 100644 --- a/tablet.css +++ b/tablet.css @@ -180,36 +180,34 @@ max-width: 100%; } - /* 歌詞頁 body class（tablet.css 需載於該頁 inline style 之後才可蓋過行內 :root） */ - body.nanum-pen-script-regular { + /* 歌詞頁 */ + body.lyrics-page { margin: clamp(24px, 5vw, 56px) !important; box-sizing: border-box; overflow-x: hidden; } - html:has(body.nanum-pen-script-regular) { + html:has(body.lyrics-page) { font-size: 118.75% !important; } - body.nanum-pen-script-regular table { + body.lyrics-page .lyrics-main-table { border-spacing: clamp(12px, 3vw, 24px) !important; max-width: 100%; - display: block; - overflow-x: auto; - -webkit-overflow-scrolling: touch; } - body.nanum-pen-script-regular .main-left { + body.lyrics-page .main-left { width: 100% !important; display: block; box-sizing: border-box; } - body.nanum-pen-script-regular p { + body.lyrics-page .lyrics-main-table p { font-size: 1.2rem !important; + max-width: none; } - body.nanum-pen-script-regular h1 { + body.lyrics-page h1 { font-size: clamp(1.6rem, 5vw, 2.1rem) !important; } }