diff --git a/index.css b/index.css index 044a091..7003737 100644 --- a/index.css +++ b/index.css @@ -152,3 +152,64 @@ section.archive-block p:last-child { text-align: center; margin-top: 8px; } + +/* ---------- 首頁 home-page：閱讀寬度與字級（弱化對 vw 的依賴） ---------- */ + +/* 用 px 鎖上限，避免 72rem 隨根字級／無障礙字級變大（例如實測出 ~1390px） */ +.home-page .container { + max-width: min(1200px, calc(100% - 2rem)); + width: 100%; + margin-inline: auto; + padding: 2.5rem 1.25rem; + box-sizing: border-box; +} + +.home-page #start .intro-text { + max-width: 42rem; + margin-inline: auto; +} + +.home-page #start .intro-text p.intro-text, +.home-page #start .core-description, +.home-page #start .call-to-action { + font-size: 1.0625rem; + line-height: 1.75; + color: #4a4a4a; + margin: 0 0 1.125rem; +} + +.home-page #start .intro-text p:last-child { + margin-bottom: 0; +} + +.home-page #story > p.intro-text { + max-width: 44rem; + margin-inline: auto; + margin-bottom: 1.25rem; + font-size: 1.0625rem; + line-height: 1.75; + color: #4a4a4a; +} + +.home-page .merged-storyline .story-node p { + font-size: 1rem; + line-height: 1.75; +} + +.home-page .merged-storyline .story-node h3 { + font-size: 1.0625rem; +} + +@media (max-width: 640px) { + + .home-page .container { + padding: 1.75rem 1rem; + } + + .home-page #start .intro-text p.intro-text, + .home-page #start .core-description, + .home-page #start .call-to-action, + .home-page #story > p.intro-text { + font-size: 1rem; + } +} diff --git a/index.html b/index.html index 5775330..9a62c58 100644 --- a/index.html +++ b/index.html @@ -12,8 +12,8 @@ - -
+ +
@@ -31,10 +31,11 @@

好奇的開端

- 身為在回歸後才被這場 「黃色奇蹟」 擊中的新一代粉絲，我深刻體會那種從好奇觀看到最終徹底淪陷的悸動。 + 身為在回歸後才被這場 「黃色奇蹟」 + 擊中的新一代粉絲，我深刻體會那種從好奇觀看到最終徹底淪陷的悸動。

- 這段旅程始於 2016 年 4 月，透過國民綜藝《無限挑戰》的回歸企劃，讓原本不認識這組傳奇的我，因一時好奇點開節目。 + 這段旅程始於 2016 年 4 月，透過國民綜藝《無限挑戰》的回歸企劃，讓原本不認識這組傳奇的我，因一時好奇點開節目。 即便錯過了那個屬於他們的世紀末，但跟著節目的編排鋪陳，從歡笑到感動，我依然被那份熱血、真誠且專業的魅力所震撼。

@@ -49,7 +50,7 @@

SECHSKIES Logo Concept - + 設計語彙：六角、黃海與初心
@@ -57,26 +58,25 @@

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

LOGO 設計理念

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

@@ -84,7 +84,7 @@ 無限挑戰 六六歌2 放送畫面：全場黃色氣球海
- + 回歸演唱會的動人瞬間-黃色氣球海
@@ -94,8 +94,8 @@
- 「我們要用這座藝廊般的網站證明：追星的孩子不僅不會變壞，更會因為那份守護的熱情，讓現在的自己變得比追星前的自己還要厲害。」 + 我們要用這座藝廊般的網站證明：
追星的孩子不僅不會變壞，更會因為那份守護的熱情，
讓現在的自己變得比追星前的自己還要厲害!
diff --git a/portal-nav.js b/portal-nav.js index ebea63c..19c65a0 100644 --- a/portal-nav.js +++ b/portal-nav.js @@ -7,7 +7,13 @@ * 浮層、title 與該次互動同步；無障礙用語固定為「尚無開放」（避免標籤隨機跳動）。 * 要調整詞句：改 NAV_SOON_PHRASES 即可。 */ - const NAV_SOON_PHRASES = ["奇蹟醞釀中", "感動載入中"]; + const NAV_SOON_PHRASES = ["奇蹟醞釀中", // 頁面準備中，呼應黃色奇蹟的誕生 + "感動載入中", // 資料讀取中，連結入坑時的悸動 + "初心校準中", // 結構調整中，呼應 LOGO 的六人設計核心 + "黃海漫延中", // 視覺填充中，發想自黃色海洋填滿漆黑的過程 + "傳奇編排中", // 內容整理中，記錄 1999 年榮譽與歷史軌跡 + "夢想航行中", // 未來規劃中，期待水晶男孩的下一個十年 + ]; function pickSoonPhrase() { return NAV_SOON_PHRASES[Math.floor(Math.random() * NAV_SOON_PHRASES.length)]; diff --git a/style.css b/style.css index f68adcb..1dab0ae 100644 --- a/style.css +++ b/style.css @@ -406,13 +406,13 @@ section { /* 首頁：成立的初衷 — 標題與全站一致置中；其下雙欄（文 7 : 圖 3） */ .mission-section>.section-title { - margin-bottom: clamp(1.25rem, 3vw, 1.75rem); + margin-bottom: 1.5rem; } .mission-section .mission-layout { display: grid; grid-template-columns: minmax(200px, 3fr) minmax(0, 7fr); - gap: clamp(1.5rem, 4vw, 3rem); + gap: 2rem; align-items: start; } @@ -446,7 +446,7 @@ section { .mission-section .logo-concept-media-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 46%); - gap: clamp(1rem, 3vw, 1.85rem); + gap: 1.5rem; align-items: start; } @@ -478,25 +478,29 @@ section { .mission-section .mission-visual .caption, .mission-section .mission-moment-wrap .caption { display: flex; - flex-direction: column; + flex-direction: row; align-items: center; - gap: 0.2rem; + justify-content: center; + gap: 0.35rem; margin-top: 0.65rem; font-size: 0.78rem; line-height: 1.45; color: #6a6a6a; max-width: 16rem; + text-align: left; } .mission-section .mission-visual .arrow-icon, .mission-section .mission-moment-wrap .arrow-icon { + flex-shrink: 0; font-size: 0.95rem; line-height: 1; color: var(--primary); font-style: normal; } -.mission-section .highlight-stage-flash { +/* 全站：黃色光暈強調（可與 .mark_b 並用） */ +.mark_y { letter-spacing: 0.06em; font-weight: 800; text-shadow: @@ -505,12 +509,12 @@ section { } @media (prefers-reduced-motion: no-preference) { - .mission-section .highlight-stage-flash { - animation: mission-stage-flash-pulse 2.8s ease-in-out infinite; + .mark_y { + animation: mark_y-pulse 2.8s ease-in-out infinite; } } -@keyframes mission-stage-flash-pulse { +@keyframes mark_y-pulse { 0%, 100% { @@ -527,7 +531,7 @@ section { } @media (prefers-reduced-motion: reduce) { - .mission-section .highlight-stage-flash { + .mark_y { animation: none; } } @@ -536,7 +540,7 @@ section { .mission-section>.quote-box { width: 100%; max-width: 44rem; - margin: clamp(1.75rem, 4vw, 2.5rem) auto 0; + margin: 2rem auto 0; padding: 1rem 1.25rem; background: linear-gradient(135deg, var(--surface-soft) 0%, #fff7da 100%); border-left: 4px solid var(--primary); @@ -849,7 +853,8 @@ footer { padding: 50px 0 20px; } -.highlight { +/* 全站：深色字重點（棕黃字色，與 不同於「顏色」） */ +.mark_b { color: var(--dark-yellow); font-weight: bold; } diff --git a/tablet.css b/tablet.css index d0a11b9..d8eebc5 100644 --- a/tablet.css +++ b/tablet.css @@ -8,16 +8,16 @@ nav, .portal-nav { - padding-left: clamp(14px, 3.5vw, 32px) !important; - padding-right: clamp(14px, 3.5vw, 32px) !important; + padding-left: clamp(14px, 2vw + 10px, 32px) !important; + padding-right: clamp(14px, 2vw + 10px, 32px) !important; row-gap: 12px; flex-wrap: wrap; align-items: flex-start; } .map-page .portal-nav { - padding-left: clamp(14px, 3.5vw, 32px) !important; - padding-right: clamp(14px, 3.5vw, 32px) !important; + padding-left: clamp(14px, 2vw + 10px, 32px) !important; + padding-right: clamp(14px, 2vw + 10px, 32px) !important; } .portal-nav .logo { @@ -50,21 +50,26 @@ } .hero h1 { - font-size: clamp(1.75rem, 4.5vw, 2.35rem); + font-size: clamp(1.75rem, 2.25vw + 1rem, 2.35rem); } .hero p { - font-size: clamp(1rem, 2.8vw, 1.15rem); + font-size: clamp(1rem, 1.5vw + 0.65rem, 1.15rem); } .container, .content-container { - padding-left: clamp(14px, 3vw, 22px); - padding-right: clamp(14px, 3vw, 22px); + padding-left: clamp(14px, 1.5vw + 10px, 22px); + padding-right: clamp(14px, 1.5vw + 10px, 22px); + } + + .home-page .container { + padding-left: clamp(14px, 1.5vw + 10px, 22px); + padding-right: clamp(14px, 1.5vw + 10px, 22px); } section { - padding: clamp(26px, 5vw, 36px) clamp(16px, 4vw, 28px) !important; + padding: clamp(26px, 3vw + 18px, 36px) clamp(16px, 2.5vw + 12px, 28px) !important; } .story-grid {