feat:調整內容

concert.css

@@ -1,3 +1,7 @@
+body {
+    background-color: var(--);
+}
+
 .concert-archive-header {
     text-align: center;
     padding: 100px 20px 80px;

concert.html

@@ -3,7 +3,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SECHSKIES Concert Archive</title>
     <link rel="stylesheet" href="concert.css">
-    <link rel="stylesheet" href="style.css">
+    <!-- <link rel="stylesheet" href="style.css"> -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
 </head>
 
@@ -11,7 +11,7 @@
     <!-- HTML 結構 -->
     <header class="concert-archive-header">
         <div class="header-inner">
-            <h1 class="main-title">20th ANNIVERSARY TOUR</h1>
+            <h1 class="main-title">巡迴演唱會列表</h1>
             <div class="subtitle-wrap">
                 <span class="sub-title">SECHSKIES CONCERT ARCHIVE</span>
             </div>
@@ -24,7 +24,7 @@
 
         <!-- 演唱會 con-$ -->
         <div class="con-1" data-tour="YELLOW NOTE">
-            <span class="title">2016 SECHSKIES [YELLOW NOTE]</span>
+            <span class="title">2016&nbsp;&nbsp;|&nbsp;&nbsp; YELLOW NOTE</span>
 
             <!-- 地點 con-$-$ -->
             <div class="con-1-1 attended" data-date1="09.10">
@@ -152,7 +152,7 @@
         </div>
         <!-- 演唱會 02 -->
         <div class="con-2" data-tour="20TH ANNIV.">
-            <span class="title">20TH ANNIVERSARY CONCERT</span>
+            <span class="title">2017-2018&nbsp;&nbsp;|&nbsp;&nbsp;20TH ANNIVERSARY</span>
             <div class="con-2-1">
                 <span class="location">首爾：高尺天空巨蛋</span>
                 <input type="checkbox" id="expand-con-2-1" class="expand-trigger">
@@ -332,7 +332,7 @@
         </div>
         <!-- 演唱會 03 -->
         <div class="con-3" data-tour="NOW・HERE・AGAIN.">
-            <span class="title">2018 CONCERT [NOW・HERE・AGAIN]</span>
+            <span class="title">2018&nbsp;&nbsp;|&nbsp;&nbsp;NOW・HERE・AGAIN</span>
             <div class="con-3-1 attended" data-date1="10.13" data-date2="10.14">
                 <span class="location">首爾：首爾奧林匹克體操競技場</span>
                 <input type="checkbox" id="expand-con-3-1" class="expand-trigger">

index.css

@@ -0,0 +1,85 @@
+.story-timeline {
+    position: relative;
+    max-width: 1000px;
+    margin: 50px auto;
+    padding: 20px 0;
+}
+
+/* 中央貫穿軸線 */
+.story-timeline::after {
+    content: '';
+    position: absolute;
+    width: 6px;
+    background-color: var(--primary);
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    margin-left: -3px;
+    border-radius: 10px;
+}
+
+.timeline-box {
+    content: '';
+    padding: 10px 40px;
+    position: relative;
+    width: 50%;
+    box-sizing: border-box;
+}
+
+
+/* 圓形節點 */
+.timeline-box::after {
+    content: '\f3a5';
+    /* 可換成圖示或圖片中的圓圈 */
+    font-family: "Font Awesome 6 Free" !important;
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    right: -20px;
+    top: 15px;
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #FFD700;
+    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
+    display: inline-block;
+    vertical-align: middle;
+}
+
+
+
+/* 左右交錯控制 */
+.left {
+    left: 0;
+    text-align: right;
+}
+
+.right {
+    left: 50%;
+    text-align: left;
+}
+
+
+/* 日期標籤（膠囊型） */
+.date-tag {
+    display: inline-block;
+    padding: 8px 20px;
+    background: var(--accent);
+    /* #FFD700 */
+    color: var(--text);
+    border-radius: 50px;
+    font-weight: bold;
+    margin-bottom: 10px;
+}
+
+.content h3 {
+    color: var(--primary);
+    /* #FFDD00 */
+    margin: 10px 0;
+}
+
+.content p {
+    color: var(--text-muted);
+    line-height: 1.6;
+}

index.html

@@ -6,6 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SECHSKIES - 水晶男孩傳奇介紹</title>
     <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="index.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
 
 </head>
 
@@ -22,6 +24,7 @@
         <a href="#background">故事背景</a>
         <a href="#albums">歷年作品</a>
         <a href="#current">現在故事線</a>
+        <a href="concert.html">演唱會紀錄</a>
     </nav>
 
     <canvas id="particles"></canvas>
@@ -29,14 +32,11 @@
     <div class="container">
 
         <section id="background">
-            <h2>故事背景</h2>
+            <h2 class="section-title">故事背景</h2>
-            <p>
+            <div class="intro-text">
-                <span class="highlight">SECHSKIES（水晶男孩）</span> 於 1997 年 4 月 15 日出道，是韓國第一代頂尖男子團體。隊名在德語中意為「六顆水晶」，代表六位成員。
+                <p>1997 年 4 月 15 日，<span class="highlight">SECHSKIES（水晶男孩）</span>正式出道，作為韓國第一代男子團體的巔峰，他們的團名在德語中意為「六顆水晶」。
-            </p>
-            <p>
-                他們在 90 年代末與 H.O.T 並稱為 K-POP 的兩大山脈。然而，在事業巔峰期的 2000 年 5 月，團體突然宣佈解散，成為當時韓國演藝界最震撼的消息。解散後的 16
-                年間，成員各自在不同領域發展，但「小黃（粉絲暱稱）」們從未忘記那片黃色氣球海。
                 </p>
+            </div>
 
             <div class="story-grid">
                 <div class="card">
@@ -54,9 +54,9 @@
                 </div>
             </div>
         </section>
-
+        <!-- 歷年作品表格區塊 -->
         <section id="albums">
-            <h2>歷年作品 (精選)</h2>
+            <h2 class="section-title">歷年作品 (精選)</h2>
             <table>
                 <thead>
                     <tr>
@@ -105,7 +105,7 @@
         </section>
 
         <section id="current">
-            <h2>現在的故事線</h2>
+            <h2 class="section-title">現在的故事線</h2>
             <div class="timeline">
                 <div class="timeline-item">
                     <strong>2016年：傳奇回歸</strong>
@@ -121,7 +121,43 @@
                 </div>
             </div>
         </section>
+        <section class="story-timeline">
+            <!-- 1997 出道 -->
+            <div class="timeline-box left">
+                <div class="date-tag">1997 - 2000</div>
+                <div class="content">
+                    <h3>傳奇的誕生：出道與巔峰</h3>
+                    <p>1997年4月15日以《學園別曲》出道，分為黑、白水晶兩隊，與H.O.T並稱為90年代後期兩大山脈。</p>
+                </div>
+            </div>
 
+            <!-- 2000 解散 -->
+            <div class="timeline-box right">
+                <div class="date-tag">2000 - 2016</div>
+                <div class="content">
+                    <h3>遺憾的句點：宣告解散</h3>
+                    <p>2000年5月20日正式解散，成員各自發展，水晶暫時進入休眠期。</p>
+                </div>
+            </div>
+
+            <!-- 2016 回歸 -->
+            <div class="timeline-box left">
+                <div class="date-tag">2016年 4月</div>
+                <div class="content">
+                    <h3>重逢的感動：六六歌合體</h3>
+                    <p>透過《無限挑戰》「六六歌2」跨越16年再次重聚，引起全韓黃色氣球海再現。</p>
+                </div>
+            </div>
+
+            <!-- 2019 至今 -->
+            <div class="timeline-box right">
+                <div class="date-tag">2019 - TODAY</div>
+                <div class="content">
+                    <h3>體制調整與穩定</h3>
+                    <p>調整為四人組合（殷志源、李宰鎮、金在德、張水院），繼續以經典魅力活躍於樂壇與綜藝。</p>
+                </div>
+            </div>
+        </section>
     </div>
     <footer>
         <p>SECHSKIES Fanpage &copy; 2026 - 黃色氣球永遠飄揚</p>

style.css

@@ -1,14 +1,26 @@
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');
 
 :root {
-    --yellow: #FFD700;
+    --primary: #ffcc00;
     /* 應援黃色 */
-    --dark-yellow: #4e492b;
+    --light-yellow: #fceea7;
+    /* --dark-yellow: #4e492b; */
     --black: #1a1a1a;
-    --gray: #f4f4f4;
+    --deep-black: #0a0a0a;
-    --text-color: #333;
+    /* 更純粹的底黑 */
-    --dark: #777;
+    /* --gray: #f4f4f4; */
-    --accent: #FFD700;
+    /* --text-color: #333; */
+    /* --dark: #777; */
+    /* --accent: #FFD700; */
+    --card-bg: #1a1a1a;
+    /* 卡片專用深灰 */
+    --bg-alt: #fcfaf2;
+    /* 今天的米白背景 */
+    --text-main: #333;
+    /* 主要文字 */
+    --text-muted: #888;
+    /* 輔助文字 */
+
 }
 
 /* 1. 先處理 body 和全域，確保沒人亂給外距 */
@@ -18,16 +30,23 @@
     box-sizing: border-box;
 }
 
-html {
+
-    background: #0A0A0A;
+html,
-    min-height: 100%;
+body {
+    background-color: var(--deep-black);
+    color: #eeeeee;
 }
 
+/* html {
+    min-height: 100%;
+} */
+
 body {
     font-family: 'Noto Sans TC', system-ui, sans-serif;
     color: var(--text-color);
     line-height: 1.6;
     overflow-x: hidden;
+    width: 80%;
 }
 
 header {
@@ -57,23 +76,26 @@ header {
 /* 導覽列 */
 nav {
     background-color: var(--black);
-    padding: 0.5rem;
+    padding: 0.8rem;
-    position: sticky;
+    /* position: sticky;
     top: 0;
     z-index: 1000;
+    margin: 0; */
     display: flex;
     justify-content: center;
-    margin: 0;
 }
 
 nav a {
     color: var(--yellow);
     text-decoration: none;
-    margin: 0 20px;
+    /* margin: 0 20px;
     font-weight: bold;
-    transition: 0.3s;
+    transition: 0.3s; */
+    font-size: 0.95rem;
+    letter-spacing: 1px;
 }
 
+
 nav a:hover {
     color: white;
 }
@@ -132,6 +154,33 @@ nav a:hover {
     padding: 40px 20px;
 }
 
+section {
+    background-color: var(--bg-white);
+}
+
+.section-title {
+    color: var(--yellow);
+    text-align: center;
+    font-size: 2rem;
+    letter-spacing: 6px;
+    margin-bottom: 50px;
+    text-transform: uppercase;
+    /* 
+    padding-left: 15px;
+    color: var(--black); */
+}
+
+.section-title::after {
+    content: "";
+    display: block;
+    width: 50px;
+    height: 3px;
+    background: var(--yellow);
+    margin: 15px auto 0;
+}
+
+
+
 .story-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@@ -141,14 +190,18 @@ nav a:hover {
 }
 
 .card {
-    /* background: rgba(0, 0, 0, 0.85); */
+    background: var(--card-bg);
-    border-radius: 20px;
+    border: 1px solid #333;
+    /* 極細的邊框取代厚重的陰影 */
+    border-radius: 8px;
     padding: 30px;
-    transition: transform 0.4s, box-shadow 0.4s;
+    transition: 0.4s;
 }
 
 .card:hover {
     transform: translateY(-15px);
+    border-color: var(--yellow);
+    /* 移上去才亮黃色 */
     box-shadow: 0 5px 5px rgba(255, 221, 0, 0.2);
 }
 
@@ -159,26 +212,28 @@ nav a:hover {
 
 section {
     margin-bottom: 60px;
-    background: rgba(255, 255, 255, 0.95);
+    background: transparent;
-    padding: 30px;
+    /* 移除白底或黑底 */
-    border-radius: 15px;
+    box-shadow: none;
+    /* 移除陰影 */
+    padding: 60px 0;
+    /* 增加上下留白，讓呼吸感出來 */
+    border-radius: 0;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
     position: relative;
     z-index: 10;
 }
 
-h2 {
-    border-left: 5px solid var(--yellow);
-    padding-left: 15px;
-    color: var(--black);
-    margin-bottom: 25px;
-}
 
 /* 作品列表表格 */
 table {
     width: 100%;
     border-collapse: collapse;
     margin-top: 20px;
+    border-radius: 10px;
+    overflow: hidden;
+    /* 確保邊框圓角生效 */
+
 }
 
 table th {