/* ============================================================ 財團法人牙周病防治學術基金會 官方網站樣式 這份 CSS 會被四個 HTML 頁面共用（index.html + pages/ 底下三個頁面） ============================================================ */ /* :root 是一個特殊選擇器，代表整份文件的最頂層（ 元素）。 在這裡定義的 --變數名稱 稱為「CSS 自訂屬性（CSS Custom Properties）」， 之後可以用 var(--變數名稱) 在任何地方重複使用， 好處是以後要改主題色，只要改這裡一個地方，全站顏色就會一起更新。 */ :root { --green-primary: #2f8f5e; /* 主要綠色，用在按鈕、連結、標題等強調處 */ --green-dark: #1f6b45; /* 較深的綠色，用在文字、footer 底色 */ --green-light: #eaf6ef; /* 很淺的綠色，用在區塊底色 */ --green-accent: #7fc9a3; /* 點綴色，用在底線、hover 效果 */ --text-main: #2b2b2b; /* 一般內文文字顏色（接近黑但不是純黑，閱讀較舒服） */ --text-muted: #5c6b64; /* 次要文字顏色，例如說明文字、標語 */ --bg-main: #fbfdfc; /* 整站的底色，接近白色但帶一點點綠 */ --border-soft: #dcece3; /* 淺色邊框，用在卡片、分隔線 */ --max-width: 1080px; /* 內容區塊的最大寬度，避免螢幕太寬時文字被拉得很長不好讀 */ } /* 通用重置：瀏覽器預設會把 padding、border 另外加到元素寬度之外， 設定 box-sizing: border-box 後，寬度計算會包含 padding 和 border，比較好抓版面尺寸 */ * { box-sizing: border-box; } /* 讓點擊錨點連結（例如 #section）時會平滑捲動，而不是瞬間跳過去 */ html { scroll-behavior: smooth; } body { margin: 0; /* 字型優先順序：先試思源黑體(繁體)，找不到再試蘋方/微軟正黑體，最後才用系統預設字型 */ font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif; color: var(--text-main); background: var(--bg-main); line-height: 1.8; /* 行高 1.8 倍字級大小，中文閱讀建議行距寬一點比較舒服 */ } img { max-width: 100%; /* 圖片絕不超過容器寬度，避免圖片把版面撐壞（RWD 基本技巧） */ display: block; } a { color: var(--green-dark); text-decoration: none; /* 先移除底線，需要底線效果時在個別規則另外加 */ } a:hover { text-decoration: underline; } /* .container 是常見的排版技巧：把內容限制在 --max-width 以內， 並用 margin: 0 auto 讓它在螢幕置中，左右各留一點 padding 避免貼齊邊緣 */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; } /* ============================================================ 頁首 / 導覽列 (Header / Nav) ============================================================ */ .site-header { background: #fff; border-bottom: 1px solid var(--border-soft); /* sticky：捲動頁面時，頁首會黏在螢幕最上方，不會被捲走 */ position: sticky; top: 0; z-index: 10; /* 數字越大，疊在越上層，確保頁首蓋在其他內容之上 */ } .nav-bar { max-width: var(--max-width); margin: 0 auto; padding: 12px 20px; /* flex 排版：讓 Logo 區塊和選單並排、置中對齊，並自動分散到左右兩側 */ display: flex; align-items: center; justify-content: space-between; } .brand { display: flex; align-items: center; gap: 12px; /* 子元素之間的間距，取代早期用 margin 手動留白的作法 */ } .brand img { width: 44px; height: 44px; } .brand-name { font-size: 1.05rem; font-weight: 700; color: var(--green-dark); line-height: 1.3; } .nav-links { display: flex; gap: 28px; list-style: none; /* 移除