style:調整顏色變數名稱

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;