feat:調整內容

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;
-    --text-color: #333;
-    --dark: #777;
-    --accent: #FFD700;
+    --deep-black: #0a0a0a;
+    /* 更純粹的底黑 */
+    /* --gray: #f4f4f4; */
+    /* --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;
-    min-height: 100%;
+
+html,
+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;
-    position: sticky;
+    padding: 0.8rem;
+    /* 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); */
-    border-radius: 20px;
+    background: var(--card-bg);
+    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);
-    padding: 30px;
-    border-radius: 15px;
+    background: transparent;
+    /* 移除白底或黑底 */
+    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 {