diff --git a/assets/css/style.css b/assets/css/style.css index bbfef37..a7babff 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -676,6 +676,12 @@ section { align-items: start; } +/* 成立的初衷列：左圖 3、右文 7；左欄與右欄垂直置中 */ +.mission-section .mission-row--intro { + grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); + align-items: center; +} + .mission-section .mission-row+.mission-row { margin-top: 2.75rem; padding-top: 2.75rem; @@ -743,8 +749,8 @@ section { top: 1.25rem; display: flex; flex-direction: column; - align-items: center; - text-align: center; + align-items: flex-start; + text-align: left; } .mission-section .logo-wrapper img { @@ -780,6 +786,25 @@ section { min-width: 0; } +/* 理念列右欄：黃海框寬度上限，避免寬螢幕 16:9 拉得過高 */ +.mission-section .mission-row--concept .mission-gif-frame { + width: min(100%, 26rem); + margin-inline: auto; +} + +/* 金句放在「成立的初衷」段落下、右欄填空（與左欄 Logo 對齊節奏） */ +.mission-section .mission-row--intro .mission-row__body > .slogan-quote--mission { + margin: 1.35rem 0 0; + max-width: none; + width: 100%; + box-sizing: border-box; + text-align: left; +} + +.mission-section .mission-row--intro .mission-row__body > .slogan-quote--mission .slogan-quote__inner { + text-align: left; +} + .mission-section .logo-wrapper .caption, .mission-section .mission-moment-wrap .caption { display: flex; @@ -795,6 +820,31 @@ section { text-align: left; } +/* 首頁 intro：圖說直向兩行、置左對齊 */ +.mission-section .mission-row--intro .logo-wrapper .caption { + flex-direction: column; + align-items: flex-start; + align-self: stretch; + justify-content: flex-start; + text-align: left; + gap: 0.3rem; +} + +.mission-section .mission-row--intro .logo-wrapper .caption .caption__line { + display: block; + width: 100%; +} + +.mission-section .mission-row--intro .logo-wrapper .caption .caption__line--title { + font-weight: 700; + color: #5a5a5a; +} + +/* 第二行：左縮排約一字／「i」寬，與上行「↑」後正文對齊 */ +.mission-section .mission-row--intro .logo-wrapper .caption > .caption__line:not(.caption__line--title) { + margin-left: 1ch; +} + .mission-section .logo-wrapper .arrow-icon, .mission-section .mission-moment-wrap .arrow-icon { flex-shrink: 0; @@ -972,6 +1022,11 @@ a { overflow: hidden; } +/* 首頁時間軸：外凸氣泡（與頂欄籌備中同系）勿被裁切 */ +#timeline.story-archive { + overflow: visible; +} + /* 備註：移除主軸上方獨立鑽石後，將主軸上下邊界微調 4px，保留你要的留白節奏 */ .merged-storyline { position: relative; @@ -1117,6 +1172,49 @@ a { border: 2px solid rgba(255, 255, 255, 0.9); box-shadow: 0 4px 16px rgba(230, 184, 0, 0.42); transition: transform 0.2s ease, box-shadow 0.2s ease; + position: relative; + cursor: default; + box-sizing: border-box; +} + +/* 同頂欄 .portal-submenu a[data-coming-soon]::after 氣泡（文案固定為「傳奇書寫中」） */ +.merged-storyline .timeline-ebook-cta::after { + content: "傳奇書寫中"; + position: absolute; + z-index: 120; + white-space: nowrap; + font-size: 0.72rem; + font-weight: 600; + letter-spacing: 0.02em; + color: #6a4818; + background: #fff9e6; + padding: 5px 11px; + border-radius: 8px; + box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14); + opacity: 0; + pointer-events: none; + transition: opacity 0.16s ease; + left: 100%; + right: auto; + top: 50%; + bottom: auto; + margin-left: 10px; + transform: translateY(-50%); +} + +@media (hover: hover) { + + .merged-storyline .timeline-ebook-cta:hover::after, + .merged-storyline .timeline-ebook-cta:focus-visible::after { + opacity: 1; + } +} + +@media (hover: none) { + .merged-storyline .timeline-ebook-cta:active::after { + opacity: 1; + transition: opacity 0.08s ease; + } } .merged-storyline .timeline-ebook-cta:hover { @@ -1171,31 +1269,30 @@ a { margin: 0 0 10px; } -/* 時間軸內文：外站連結（例：Disney+ 劇集） */ +/* 時間軸內文：外站補充連結（配角語境，不搶主敘事視覺） */ .merged-storyline .story-external-inline { display: inline-flex; align-items: center; - gap: 0.35em; - font-weight: 700; - color: var(--dark-yellow); - text-decoration: underline; - text-decoration-color: currentColor; - text-underline-offset: 0.22em; - text-decoration-thickness: 2px; - text-underline-position: from-font; + gap: 0.1em; + margin-inline-end: 0.2em; + font-weight: 600; + color: #6a5d48; + text-decoration: none; + border-bottom: none; + padding-bottom: 0; } .merged-storyline .story-external-inline:hover, .merged-storyline .story-external-inline:focus-visible { - color: var(--primary); - text-decoration-thickness: 2px; + color: var(--dark-yellow); } .merged-storyline .story-external-inline i { - font-size: 0.78em; - opacity: 0.88; + font-size: 0.72em; + opacity: 0.65; line-height: 1; flex-shrink: 0; + align-self: center; } @media (max-width: 900px) { diff --git a/index.html b/index.html index eee9bd1..1c3d1ad 100644 --- a/index.html +++ b/index.html @@ -50,23 +50,28 @@
SECHSKIES Logo Concept - - - 設計語彙：六角、黃海與初心 - +
+ 設計概念： + 六角形水晶、黃色海洋與我們的初心 +

成立的初衷

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

+
+ 我要用這座藝廊般的網站證明：
追星的孩子不僅不會變壞，更會因為那份守護並推廣的熱情，
讓現在的自己變得比追星前的自己還要厲害! +
@@ -98,10 +103,6 @@ -
- 我要用這座藝廊般的網站證明：
追星的孩子不僅不會變壞，更會因為那份守護並推廣的熱情，
讓現在的自己變得比追星前的自己還要厲害! -
@@ -132,13 +133,30 @@

-

傳奇回歸：重逢的感動合體

-

透過《無限挑戰》「六六歌2」跨越16年再次重聚，引起全韓黃色氣球海再現。

- +

感動合體：那一晚，我們找回了完整

+

塵封十六年的時光被溫柔拂去，跨越六千多天的等待，黃色氣球海再次淹沒了上岩運動場。當六個身影重新站在一起，那幅曾被凍結在 2000 + 年的畫面終於再次「溶解」並重合。那一晚，淚水證明了奇蹟真的存在，我們終於找回了那份久違的完整，以為故事從此能圓滿續寫。

+ 點我見證傳奇 - +
+ +
+

延續與錯位：在現實中守候

+

當《無限挑戰》的燈光熄滅，原本以為這場跨越十六年的重逢僅是曇花一現的夢境，但隨後五位成員與 YG + 簽約的消息，正式宣告了傳奇的歸來。九月演唱會上，新舊粉絲在黃色海洋中見證了跨越時空的強烈羈絆，那種心意相通的悸動，讓我們知道這道光從未真正熄滅過。

+

而志溶雖然未參與合體，卻在十二月演唱會落幕當天，透過《超人回來了》的預告驚喜現身。這不是告別，而是他選擇以另一種最真實、最溫馨的形式，在現實生活中繼續陪伴著大家。舞台上的空位雖然令人難過，但看到他帶著孩子幸福的模樣，我們才明白：原來水晶與粉絲的羈絆，早已超越了表演的定義，而是要在彼此的生活裡，一起變老，一起寫下新的篇章。 +

+ ### 餘溫與新生：從奇蹟走向恆久 + +

當《無限挑戰》的燈光熄滅，原以為那場重逢只是十六年一次的曇花一現。同年五月，五位成員與 YG + 簽約的消息，讓夢境落實成了現實。四月的「六六歌」是屬於老粉絲守候十六年的淚水與重逢；而九月的個人演唱會，則是一場關於愛情的傳承。無數新粉絲透過黃色海洋，目睹了偶像與歌迷間那種超越時空的生死契闊，雖然志溶未能站上舞台成了這場盛宴唯一的遺憾，但那種「水晶男孩」與「黃飯」共生的生命力，卻從那一刻起，重新注入了新的靈魂。 +

+ +

這份羈絆在十二月有了更溫柔的延續。演唱會落幕當晚，志溶帶著孩子在《超人回來了》預告中驚喜現身。這不是告別，而是他換了一種最真實的形式，在現實生活中守護著這份情誼。舞台上的空位雖讓心底隱隱作痛，但看著他幸福的模樣，我們才懂得：水晶男孩的定義早已超越了表演，而是彼此約好在不同的時空裡，也要一起變老，一起寫下永不終結的篇章。 +

+

體制調整與穩定

調整為四人組合（殷志源、李宰鎮、金在德、張水院），繼續以經典魅力活躍於樂壇與綜藝。