style:調整顏色變數名稱

index.html

@@ -21,8 +21,9 @@
     </header>
 
     <nav>
+        <div class="logo"><img src="./img/logov.svg" alt=""></div>
         <ul>
-            <li><a href="#background">故事背景</a></li>
+            <li><a href="#background">重拾黃色奇蹟</a></li>
             <li><a href="#albums">歷年作品</a></li>
             <li><a href="#current">現在故事線</a></li>
             <li><a href="concert.html">演唱會紀錄</a></li>
@@ -32,28 +33,22 @@
     <canvas id="particles"></canvas>
 
     <div class="container">
-
         <section id="background">
             <h2 class="section-title">故事背景</h2>
             <div class="intro-text">
-                <p>1997 年 4 月 15 日，<span class="highlight">SECHSKIES（水晶男孩）</span>正式出道，作為韓國第一代男子團體的巔峰，他們的團名在德語中意為「六顆水晶」。
+                <!-- 標題與第一段：點出「新粉」身分與震撼 -->
+                <p class="intro-text">
+                    身為在回歸後才被這場 <span class="highlight">「黃色奇蹟」</span> 擊中的新一代粉絲，我深刻體會那種從好奇觀看到最終徹底淪陷的悸動。
+                </p>
+                <!-- 第二段：強調核心魅力與反差 -->
+                <p class="core-description">
+                    水晶男孩（SECHSKIES）的魔力在於：即便錯過了 90 年代，依然會被他們 <span class="highlight">熱血、真誠且專業</span>
+                    的舞台魅力所感動。這裡不僅是資訊站，更是由熱愛凝聚的空間。從舞台上的職人氣場，到台下如家人般的 <span class="highlight">「反差萌」</span>，他們展現了超越年齡的吸引力。
+                </p>
+                <!-- 結尾：溫馨號召 -->
+                <p class="call-to-action">
+                    經典並非活在過去，而是每個當下都讓人心跳不已。加入我們，一起感受這場 <span class="highlight">仍在續寫的傳奇</span>。
                 </p>
-            </div>
-
-            <div class="story-grid">
-                <div class="card">
-                    <h3>出道與巔峰（1997-2000）</h3>
-                    <p>1997年4月15日，水晶男孩以《學園別曲》正式出道，是韓國第一代偶像團體，與H.O.T.並稱為90年代後期兩大山脈。團名源自德語「六顆水晶」，象徵六位成員能左右命運。</p>
-                    <p>分為「黑水晶」（殷志源、李宰鎮、金在德 — Rap與舞蹈）和「白水晶」（姜成勳、高志溶、張水院 — 主唱）。</p>
-                </div>
-                <div class="card">
-                    <h3>解散與重逢（2000-2016）</h3>
-                    <p>2000年5月20日正式解散，成員各自發展。2016年4月14日，時隔16年在《無限挑戰》「六六歌」特輯驚喜合體，引起巨大迴響。</p>
-                </div>
-                <div class="card">
-                    <h3>YG時期與現在</h3>
-                    <p>2016年5月，除高志溶外五人與YG娛樂簽約重啟活動。2019年起調整為四人組合（殷志源、李宰鎮、金在德、張水院），繼續以經典魅力感動粉絲。</p>
-                </div>
             </div>
         </section>
         <!-- 歷年作品表格區塊 -->
@@ -115,7 +110,8 @@
             <div class="merged-storyline">
                 <article class="story-node" data-era="1997">
                     <h3>傳奇的誕生：出道與巔峰</h3>
-                    <p>1997年4月15日以《學園別曲》出道，分為黑、白水晶兩隊，與H.O.T並稱為90年代後期兩大山脈。</p>
+                    <p>1997年4月15日，水晶男孩以《學園別曲》正式出道，是韓國第一代偶像團體，與H.O.T.並稱為90年代後期兩大山脈。團名源自德語「六顆水晶」，象徵六位成員能左右命運。</p>
+                    <p>分為「黑水晶」（殷志源、李宰鎮、金在德 — Rap與舞蹈）和「白水晶」（姜成勳、高志溶、張水院 — 主唱）。</p>
                 </article>
 
                 <article class="story-node" data-era="2000">

style.css

@@ -2,7 +2,6 @@
 
 :root {
     --primary: #ffcc00;
-    --yellow: #ffcc00;
     --light-yellow: #fceea7;
     --dark-yellow: #4e492b;
     --black: #1a1a1a;
@@ -64,6 +63,25 @@ header {
 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 {
@@ -74,7 +92,7 @@ nav ul {
 }
 
 nav a {
-    color: var(--yellow);
+    color: var(--primary);
     text-decoration: none;
     font-size: 0.95rem;
     letter-spacing: 1px;
@@ -123,7 +141,7 @@ footer {
 .hero h1 {
     font-size: 2.5rem;
     line-height: 1.2;
-    color: var(--yellow);
+    color: var(--primary);
     text-shadow: 0 0 30px rgba(255, 221, 0, 0.8);
 }
 
@@ -135,7 +153,7 @@ footer {
 .btn {
     display: inline-block;
     padding: 10px 30px;
-    background: var(--yellow);
+    background: var(--primary);
     color: #000;
     font-weight: bold;
     border-radius: 50px;
@@ -157,7 +175,7 @@ footer {
 }
 
 .section-title {
-    color: var(--yellow);
+    color: var(--primary);
     text-align: center;
     font-size: 1.35rem;
     letter-spacing: 3px;
@@ -170,7 +188,7 @@ footer {
     display: block;
     width: 50px;
     height: 3px;
-    background: var(--yellow);
+    background: var(--primary);
     margin: 15px auto 0;
 }
 
@@ -186,7 +204,7 @@ footer {
     content: "";
     flex: 1;
     height: 2px;
-    background-color: var(--yellow);
+    background-color: var(--primary);
     max-width: 56px;
     opacity: 0.7;
 }
@@ -210,6 +228,7 @@ footer {
 
 .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;
@@ -219,7 +238,7 @@ footer {
 
 .card:hover {
     transform: translateY(-8px);
-    border-color: var(--yellow);
+    border-color: var(--primary);
     box-shadow: 0 16px 32px rgba(0, 0, 0, 0.14);
 }
 
@@ -243,6 +262,7 @@ section {
     box-shadow: 0 14px 34px rgba(0, 0, 0, 0.15);
     position: relative;
     z-index: 10;
+
 }
 
 /* 作品列表表格 */
@@ -257,7 +277,7 @@ table {
 }
 
 table th {
-    background-color: var(--yellow);
+    background-color: var(--primary);
     color: var(--black);
     padding: 12px;
 }
@@ -327,7 +347,7 @@ a {
     border-radius: 50%;
     background: #fffdf5;
     color: #e0b400;
-    /* border: 2px solid var(--yellow);
+    /* 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;
 }
@@ -337,7 +357,7 @@ a {
     content: attr(data-era);
     position: absolute;
     top: -14px;
-    background-color: var(--yellow);
+    background-color: var(--primary);
     color: #303030;
     font-size: 0.7rem;
     font-weight: 700;