Update style.css

style.css

@@ -1,217 +1,215 @@
-/* --- 互動與可讀性提升 --- */
-/* 引入 Google Font */
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&display=swap');
+/* --- Google Font 與全域設定 --- */
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap');
+
+:root {
+    --primary-color: #005f73;
+    --secondary-color: #0a9396;
+    --highlight-color: #94d2bd;
+    --accent-color: #ee9b00;
+    --bg-light: #f8f9fa;
+    --bg-dark: #343a40;
+    --text-primary: #212529;
+    --text-secondary: #6c757d;
+    --border-color: #dee2e6;
+    --shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.05);
+    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.05), 0 4px 6px rgba(0, 0, 0, 0.05);
+}
 
-/* 平滑捲動 */
 html {
     scroll-behavior: smooth;
+    scroll-padding-top: 80px; /* 避免導覽列遮擋標題 */
 }
 
 body {
-    /* 更換為更易讀的字體 */
     font-family: 'Noto Sans TC', sans-serif;
-    line-height: 1.8; /* 增加行高 */
+    font-weight: 400;
+    line-height: 1.8;
     margin: 0;
     padding: 0;
-    background: #f8f9fa; /* 使用更柔和的背景色 */
-    color: #343a40; /* 深灰色文字，對比更舒適 */
+    background: var(--bg-light);
+    color: var(--text-primary);
 }
 
-/* --- 導覽列樣式 --- */
+/* --- 導覽列 --- */
 .navbar {
-    background-color: rgba(255, 255, 255, 0.9);
+    background-color: rgba(255, 255, 255, 0.85);
     backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
-    border-bottom: 1px solid #e9ecef;
-    padding: 10px 20px;
+    border-bottom: 1px solid var(--border-color);
+    padding: 1rem 1.5rem;
     position: sticky;
     top: 0;
     z-index: 1000;
-    width: 100%;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
-}
-.nav-container {
-    max-width: 1000px;
-    margin: 0 auto;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-.nav-logo {
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: #005f73;
-    text-decoration: none;
+    transition: box-shadow 0.3s;
 }
-.nav-menu {
-    list-style: none;
-    display: flex;
-    gap: 20px;
-    margin: 0;
-    padding: 0;
+.navbar.scrolled {
+    box-shadow: var(--shadow);
 }
+.nav-container { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
+.nav-logo { font-size: 1.5rem; font-weight: 700; color: var(--primary-color); text-decoration: none; }
+.nav-menu { list-style: none; display: flex; gap: 1rem; margin: 0; padding: 0; }
 .nav-link {
-    color: #495057;
+    color: var(--text-secondary);
     text-decoration: none;
-    font-weight: 700;
-    padding: 5px 10px;
-    border-radius: 5px;
-    transition: color 0.3s, background-color 0.3s;
-}
-.nav-link:hover {
-    color: #fff;
-    background-color: #0a9396;
+    font-weight: 500;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+    position: relative;
+    transition: color 0.3s;
+}
+.nav-link:hover, .nav-link.active {
+    color: var(--primary-color);
+}
+.nav-link::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 3px;
+    bottom: -5px;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: var(--secondary-color);
+    border-radius: 2px;
+    transition: width 0.3s ease-in-out;
+}
+.nav-link:hover::after, .nav-link.active::after {
+    width: 60%;
 }
 
-/* --- 原有樣式優化 --- */
+/* --- Header --- */
 header {
-    background: #005f73;
+    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
     color: #fff;
-    padding: 4rem 2rem;
+    padding: 5rem 2rem;
     text-align: center;
-    border-bottom: 5px solid #94d2bd;
+    position: relative;
+    overflow: hidden;
 }
-header h1 {
-    margin: 0;
-    font-size: 3rem;
+.header-content h1 {
+    font-size: 3.2rem;
     font-weight: 700;
-}
-main {
-    padding: 20px;
-    max-width: 1000px;
-    margin: 0 auto;
+    margin-bottom: 0.5rem;
 }
 
-/* 動態載入效果 */
+/* --- Main Content & Sections --- */
+main { padding: 2rem 1rem; max-width: 1000px; margin: 0 auto; }
 section {
     background: #fff;
-    margin-bottom: 30px;
-    padding: 30px 40px;
-    border-radius: 12px;
-    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
+    margin-bottom: 2.5rem;
+    padding: 2rem 2.5rem;
+    border-radius: 16px;
+    box-shadow: var(--shadow);
     opacity: 0;
-    transform: translateY(20px);
+    transform: translateY(30px);
     transition: opacity 0.6s ease-out, transform 0.6s ease-out;
 }
-section.visible {
-    opacity: 1;
-    transform: translateY(0);
-}
-
+section.visible { opacity: 1; transform: translateY(0); }
 h2 {
-    color: #0a9396;
-    border-bottom: 3px solid #e9ecef;
-    padding-bottom: 15px;
+    color: var(--primary-color);
     text-align: center;
     font-size: 2.2rem;
     font-weight: 700;
-}
-p, li {
-    font-size: 1.1rem;
-    margin-bottom: 1.2rem;
-}
-strong {
-    color: #005f73;
-}
+    margin-bottom: 2.5rem;
+    position: relative;
+    padding-bottom: 1rem;
+}
+h2::after {
+    content: '';
+    position: absolute;
+    width: 80px;
+    height: 4px;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: var(--highlight-color);
+    border-radius: 2px;
+}
+p, li { font-size: 1.1rem; }
 
-/* 圖片互動效果 */
-.figure-container img {
-    max-width: 100%;
-    height: auto;
-    display: block;
-    margin: 15px auto;
-    border: 1px solid #ccc;
-    border-radius: 8px;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-.figure-container img:hover {
-    transform: scale(1.03);
-    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
-}
-.table-container { overflow-x: auto; }
-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
-th, td { padding: 15px; text-align: left; border: 1px solid #dee2e6; }
-thead { background-color: #00796b; color: #fff; }
-tbody tr:nth-of-type(even) { background-color: #f8f9fa; }
+/* --- Specific Section Styles --- */
+.table-container { border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; }
+.interp-item { border-radius: 12px; }
+.constraints-levels { gap: 1rem; }
+.level-item { padding: 1.5rem; border-radius: 8px; }
+.case-study { background-color: var(--bg-dark); color: var(--bg-light); border-radius: 16px; border: none; }
+.case-study h2 { color: #fff; }
+.step { background-color: #495057; }
+.app-card-header { border-top-left-radius: 12px; border-top-right-radius: 12px; }
 
-/* 工程應用卡片 */
-.app-card {
-    background: #fff;
-    border: 1px solid #e9ecef;
-    border-radius: 12px;
-    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
-    display: flex;
-    flex-direction: column;
-    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
-}
-.app-card:hover {
-    transform: translateY(-8px);
-    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
-}
-.app-card-body ul { flex-grow: 1; }
-.example-link {
-    display: inline-block;
-    margin-top: 15px;
-    padding: 10px 18px;
-    background-color: #005f73;
-    color: white;
-    text-decoration: none;
-    border-radius: 5px;
-    font-weight: 700;
-    transition: background-color 0.2s, transform 0.2s;
-}
-.example-link:hover {
-    background-color: #0a9396;
-    transform: scale(1.05);
+/* 地熱探勘 (優化) */
+.special-topic-section { background-color: #f7feff; border-left: 5px solid var(--secondary-color); }
+.topic-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    gap: 2rem;
 }
-
-/* --- 新增：地熱探勘專題章節樣式 --- */
-.special-topic-section {
-    background-color: #eef7f7; /* 淡雅的背景色 */
-    border-left: 5px solid #00796b;
-}
-
-.special-topic-section h3 {
-    color: #00796b;
-    font-size: 1.8rem;
-    margin-top: 2rem;
-    margin-bottom: 1rem;
-    padding-bottom: 0.5rem;
-    border-bottom: 2px solid #94d2bd;
-}
-
-.special-topic-section h4 {
-    color: #005f73;
-    font-size: 1.3rem;
-    font-style: italic;
-    margin-top: 1.5rem;
+.topic-item {
+    background-color: #fff;
+    padding: 1.5rem;
+    border-radius: 12px;
+    box-shadow: var(--shadow);
+    border-top: 4px solid var(--highlight-color);
 }
+.topic-item h3 { font-size: 1.5rem; color: var(--primary-color); border-bottom: 2px solid var(--border-color); padding-bottom: 0.5rem; margin-bottom: 1rem; }
+.topic-item h4 { font-size: 1.2rem; color: var(--secondary-color); font-style: italic; }
+.summary-text { text-align: center; font-size: 1.2rem; font-weight: 500; }
 
-.topic-item {
-    margin-bottom: 2rem;
+/* --- Back to Top Button --- */
+.back-to-top {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background-color: var(--primary-color);
+    color: white;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-decoration: none;
+    box-shadow: var(--shadow-lg);
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(20px);
+    transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background-color 0.3s;
 }
+.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
+.back-to-top:hover { background-color: var(--accent-color); }
+.back-to-top svg { width: 24px; height: 24px; }
 
-/* 確保其他樣式一致 (從舊版複製並微調) */
-.interpretation-methods, .case-study-steps { display: grid; grid-template-columns: 1fr; gap: 30px; margin-top: 20px; }
-@media (min-width: 768px) { .interpretation-methods, .case-study-steps { grid-template-columns: 1fr 1fr; } }
-.interp-item { padding: 25px; border-radius: 8px; background-color: #f8f9fa; border: 1px solid #e9ecef; }
-.constraints-levels { display: flex; flex-direction: column; gap: 15px; margin-top: 20px; }
-.level-item { padding: 20px; border-left: 5px solid; border-radius: 5px; }
-.level-item:nth-of-type(1) { border-color: #ae2012; background-color: #fff1f0; }
-.level-item:nth-of-type(2) { border-color: #ee9b00; background-color: #fff9eb; }
-.level-item:nth-of-type(3) { border-color: #005f73; background-color: #e0f7fa; }
-.case-study { background-color: #495057; color: #f8f9fa; border-radius: 12px; border: 3px solid #94d2bd; }
-.case-study h2 { color: #e9ecef; }
-.step { background-color: #343a40; padding: 25px; border-radius: 8px; }
-.step h3 { color: #94d2bd; }
-.app-grid-expanded { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 25px; margin-top: 20px; }
-.app-card-header { background-color: #00796b; color: white; padding: 15px; border-top-left-radius: 12px; border-top-right-radius: 12px; }
-.app-card-header h3 { margin: 0; color: white; font-size: 1.4rem; }
-.app-card-body { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; }
+/* --- Footer --- */
 footer {
     text-align: center;
-    padding: 30px;
-    margin-top: 40px;
-    background: #343a40;
-    color: #e9ecef;
+    padding: 2rem;
+    margin-top: 2rem;
+    background: var(--bg-dark);
+    color: var(--bg-light);
 }
+
+/* 沿用舊版確保相容性 */
+.quote-box{background-color:#e0f7fa;border-left:5px solid #00796b;margin:20px 0;padding:15px 20px;border-radius:5px;font-style:italic;}
+.figure-container img{max-width:100%;height:auto;display:block;margin:15px auto;border:1px solid #ccc;border-radius:8px;transition:transform .3s ease,box-shadow .3s ease;}
+.figure-container img:hover{transform:scale(1.03);box-shadow:0 5px 20px rgba(0,0,0,.15);}
+.figure-container figcaption{margin-top:10px;font-size:.9rem;color:#555;line-height:1.5;text-align:left;padding:10px;background-color:#f8f9fa;border-radius:4px;}
+table{width:100%;border-collapse:collapse;margin-top:20px;}
+th,td{padding:15px;text-align:left;border:1px solid #dee2e6;}
+thead{background-color:#00796b;color:#fff;}
+tbody tr:nth-of-type(even){background-color:#f8f9fa;}
+td.category{background-color:#e0f7fa;font-weight:700;color:#004d40;vertical-align:middle;}
+.interpretation-methods,.case-study-steps{display:grid;grid-template-columns:1fr;gap:30px;margin-top:20px;}
+@media (min-width:768px){.interpretation-methods,.case-study-steps{grid-template-columns:1fr 1fr;}}
+.interp-item{padding:25px;border-radius:8px;background-color:#f8f9fa;border:1px solid #e9ecef;}
+.level-item{padding:20px;border-left:5px solid;border-radius:8px;}
+.level-item:nth-of-type(1){border-color:#ae2012;background-color:#fff1f0;}
+.level-item:nth-of-type(2){border-color:#ee9b00;background-color:#fff9eb;}
+.level-item:nth-of-type(3){border-color:#005f73;background-color:#e0f7fa;}
+.step{background-color:#495057;padding:25px;border-radius:8px;}
+.step h3{color:#94d2bd;}
+.app-grid-expanded{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:25px;margin-top:20px;}
+.app-card{background:#fff;border:1px solid #e9ecef;border-radius:12px;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .3s ease-in-out,box-shadow .3s ease-in-out;}
+.app-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);}
+.app-card-body ul{flex-grow:1;}
+.example-link{display:inline-block;margin-top:15px;padding:10px 18px;background-color:var(--primary-color);color:white;text-decoration:none;border-radius:5px;font-weight:700;transition:background-color .2s,transform .2s;}
+.example-link:hover{background-color:var(--accent-color);transform:scale(1.05);}
+.app-card-header h3{margin:0;color:white;font-size:1.4rem;}
+.app-card-body{padding:25px;flex-grow:1;display:flex;flex-direction:column;}