feat 時間軸內容補充~2016(WIP)

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;
+    align-items: flex-start;
-    text-align: center;
+    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;
+    gap: 0.1em;
-    font-weight: 700;
+    margin-inline-end: 0.2em;
-    color: var(--dark-yellow);
+    font-weight: 600;
-    text-decoration: underline;
+    color: #6a5d48;
-    text-decoration-color: currentColor;
+    text-decoration: none;
-    text-underline-offset: 0.22em;
+    border-bottom: none;
-    text-decoration-thickness: 2px;
+    padding-bottom: 0;
-    text-underline-position: from-font;
 }
 
 .merged-storyline .story-external-inline:hover,
 .merged-storyline .story-external-inline:focus-visible {
-    color: var(--primary);
+    color: var(--dark-yellow);
-    text-decoration-thickness: 2px;
 }
 
 .merged-storyline .story-external-inline i {
-    font-size: 0.78em;
+    font-size: 0.72em;
-    opacity: 0.88;
+    opacity: 0.65;
     line-height: 1;
     flex-shrink: 0;
+    align-self: center;
 }
 
 @media (max-width: 900px) {

index.html

@@ -50,23 +50,28 @@
                     <div class="mission-row__visual">
                         <div class="logo-wrapper">
                             <img src="./assets/images/logo.png" alt="SECHSKIES Logo Concept">
-                            <span class="caption">
+                            <div class="caption">
-                                <span class="arrow-icon" aria-hidden="true">↑</span>
+                                <span class="caption__line caption__line--title"><span class="arrow-icon mark_b"
-                                設計語彙：六角、黃海與初心
+                                        aria-hidden="true">↑</span>設計概念：</span>
-                            </span>
+                                <span class="caption__line">六角形水晶、黃色海洋與我們的初心</span>
+                            </div>
                         </div>
                     </div>
                     <div class="mission-row__body">
                         <h2 class="section-title mission-block-title">成立的初衷</h2>
                         <p class="mission-lead">
                             以推廣 <span class="mark_b mark_y">SECHSKIES 水晶男孩</span> 為核心，旨在透過 <span
-                                class="mark_b">專業的視覺策展</span> 宣傳成員魅力與 <span
+                                class="mark_b">專業的視覺策展</span> 宣傳成員魅力與 <span class="mark_b">小黃們的應援活動</span>。嘗試以水晶男孩為
-                                class="mark_b">小黃們的應援活動</span>。我們不滿足於傳統的追星模式，而是嘗試以水晶男孩為 <span
+                            <span class="mark_b">靈感主軸</span>，延伸至
-                                class="mark_b">靈感主軸</span>，延伸至
                             <span class="mark_b">網頁開發、視覺設計與內容企劃</span>
                             等多重領域，將對偶像的喜愛轉化為 <span class="mark_b">實質的專業養分</span>。在這裡，你不只能探索他們的 <span
                                 class="mark_b">傳奇軌跡</span>，更能見證追星如何激發 <span class="mark_b">創作潛能</span>。
                         </p>
+                        <div class="slogan-quote slogan-quote--mission">
+                            <span class="slogan-quote__inner">我要用這座<span
+                                    class="mark_b">藝廊般的網站</span>證明：<br>追星的孩子不僅不會變壞，更會因為那份<span
+                                    class="mark_b">守護並推廣的熱情</span>，<br>讓現在的自己變得比追星前的自己還要厲害!</span>
+                        </div>
                     </div>
                 </div>
 
@@ -98,10 +103,6 @@
                 </div>
             </div>
 
-            <div class="slogan-quote slogan-quote--mission">
-                <span class="slogan-quote__inner">我要用這座<span class="mark_b">藝廊般的網站</span>證明：<br>追星的孩子不僅不會變壞，更會因為那份<span
-                        class="mark_b">守護並推廣的熱情</span>，<br>讓現在的自己變得比追星前的自己還要厲害!</span>
-            </div>
         </section>
 
         <section id="timeline" class="story-archive">
@@ -132,13 +133,30 @@
                     </p>
                 </article>
                 <article class="story-node story-node--ebook-ssg2" data-era="2016">
-                    <h3>傳奇回歸：重逢的感動合體</h3>
+                    <h3>感動合體：那一晚，我們找回了完整</h3>
-                    <p>透過《無限挑戰》「六六歌2」跨越16年再次重聚，引起全韓黃色氣球海再現。</p>
+                    <p>塵封十六年的時光被溫柔拂去，跨越六千多天的等待，黃色氣球海再次淹沒了上岩運動場。當六個身影重新站在一起，那幅曾被凍結在 2000
-                    <a href="extra/totoga2.html#ebook" class="timeline-ebook-cta">
+                        年的畫面終於再次「溶解」並重合。那一晚，淚水證明了奇蹟真的存在，我們終於找回了那份久違的完整，以為故事從此能圓滿續寫。</p>
+                    <span class="timeline-ebook-cta" aria-label="傳奇書寫中，連結暫停">
                         <span>點我見證傳奇</span><i class="fa-solid fa-hand-pointer" aria-hidden="true"></i>
-                    </a>
+                    </span>
                 </article>
+                <!-- 2016 年後續發展與情感轉折區塊 -->
+                <article class="story-node" data-era="2016">
+                    <h3>延續與錯位：在現實中守候</h3>
+                    <p>當《無限挑戰》的燈光熄滅，原本以為這場跨越十六年的重逢僅是曇花一現的夢境，但隨後五位成員與 YG
+                        簽約的消息，正式宣告了傳奇的歸來。九月演唱會上，新舊粉絲在黃色海洋中見證了跨越時空的強烈羈絆，那種心意相通的悸動，讓我們知道這道光從未真正熄滅過。</p>
 
+                    <p>而志溶雖然未參與合體，卻在十二月演唱會落幕當天，透過《超人回來了》的預告驚喜現身。這不是告別，而是他選擇以另一種最真實、最溫馨的形式，在現實生活中繼續陪伴著大家。舞台上的空位雖然令人難過，但看到他帶著孩子幸福的模樣，我們才明白：原來水晶與粉絲的羈絆，早已超越了表演的定義，而是要在彼此的生活裡，一起變老，一起寫下新的篇章。
+                    </p>
+                    ### 餘溫與新生：從奇蹟走向恆久
+
+                    <p>當《無限挑戰》的燈光熄滅，原以為那場重逢只是十六年一次的曇花一現。同年五月，五位成員與 YG
+                        簽約的消息，讓夢境落實成了現實。四月的「六六歌」是屬於老粉絲守候十六年的淚水與重逢；而九月的個人演唱會，則是一場關於愛情的傳承。無數新粉絲透過黃色海洋，目睹了偶像與歌迷間那種超越時空的生死契闊，雖然志溶未能站上舞台成了這場盛宴唯一的遺憾，但那種「水晶男孩」與「黃飯」共生的生命力，卻從那一刻起，重新注入了新的靈魂。
+                    </p>
+
+                    <p>這份羈絆在十二月有了更溫柔的延續。演唱會落幕當晚，志溶帶著孩子在《超人回來了》預告中驚喜現身。這不是告別，而是他換了一種最真實的形式，在現實生活中守護著這份情誼。舞台上的空位雖讓心底隱隱作痛，但看著他幸福的模樣，我們才懂得：水晶男孩的定義早已超越了表演，而是彼此約好在不同的時空裡，也要一起變老，一起寫下永不終結的篇章。
+                    </p>
+                </article>
                 <article class="story-node" data-era="2019">
                     <h3>體制調整與穩定</h3>
                     <p>調整為四人組合（殷志源、李宰鎮、金在德、張水院），繼續以經典魅力活躍於樂壇與綜藝。</p>