/* ========================================================================= * 檔案名稱：star.css * 系統版本：V0.18 (完全解壓縮、教科書等級註解版 - 第一部分) * 作者宣告：五元網站包租公-Tiger老師 (台灣老站神) * 系統說明：十二星座運勢 - 五維星盤 (Cyber-Wuxia 科技論運武俠風) 核心樣式表 * ========================================================================= */ /* ========================================================================= * 【模組 1：核心陣法 CSS 變數區 (CSS Variables)】 * 教科書說明： * 這裡使用 `:root` 偽類來定義全域變數 (Custom Properties)。 * 變數名稱必須以兩個減號 `--` 開頭。 * 這樣做的好處是：當我們需要切換網站主題時，只需要改變變數的值， * 整個網站使用了這些變數的顏色就會瞬間全部跟著改變，不需要去逐一修改每一個 class。 * ========================================================================= */ :root { /* 定義網站的最底層背景色 (極深的藍黑色，營造宇宙深淵感) */ --bg-main: #050a10; /* 定義網站的主要科技色 (Cyan 青色，常用於線條、一般文字) */ --primary: #00ffff; /* * 為什麼要特別獨立出 RGB 格式的變數？ * 因為標準的 HEX 色碼 (#00ffff) 無法直接使用 CSS 的 rgba() 函數來設定透明度。 * 我們把 0, 255, 255 存起來，後面就能寫成 rgba(var(--primary-rgb), 0.5) 來實現半透明青色！ */ --primary-rgb: 0, 255, 255; /* 定義網站的強調色 (Gold 金色，用於重要標題、第一名、星星等) */ --accent: #ffd700; /* 強調色的 RGB 格式，同樣是為了後續做半透明發光陰影使用 */ --accent-rgb: 255, 215, 0; } /* * [主題切換邏輯] * 教科書說明： * 當 HTML 的 標籤被加上 `data-theme="pink"` 屬性時， * 這裡的設定就會「覆寫 (Override)」上面 :root 的變數。 * 這是現代前端實作「多色系/日夜間模式」最主流、效能最好的作法。 */ body[data-theme="pink"] { --bg-main: #2d0a1a; /* 改為深紫紅色底 */ --primary: #ff69b4; /* 主要色改為桃花粉 */ --primary-rgb: 255, 105, 180; --accent: #ffffff; /* 強調色改為純白，搭配粉色較亮眼 */ --accent-rgb: 255, 255, 255; } body[data-theme="gold"] { --bg-main: #1a1500; --primary: #ffd700; /* 主要色直接改為金色 */ --primary-rgb: 255, 215, 0; --accent: #ffffff; --accent-rgb: 255, 255, 255; } body[data-theme="purple"] { --bg-main: #0a0510; --primary: #8a2be2; /* 藍紫色 */ --primary-rgb: 138, 43, 226; --accent: #00ffff; /* 在紫色主題中，用青色當作強調色產生強烈對比 */ --accent-rgb: 0, 255, 255; } body[data-theme="red"] { --bg-main: #1a0505; --primary: #ff3333; /* 修羅紅 */ --primary-rgb: 255, 51, 51; --accent: #ffd700; /* 紅色配金色，標準武俠霸氣配色 */ --accent-rgb: 255, 215, 0; } /* ========================================================================= * 【模組 2：全域與版面基礎設定 (Global Resets & Body)】 * ========================================================================= */ /* * 萬用選擇器 (*) 設定 * 教科書說明： * `box-sizing: border-box;` 是一句神級代碼。 * 預設情況下，如果你給元素寬度 100px，又給了 padding 10px，元素總寬會變成 120px (撐破版面)。 * 加上這行後，padding 和 border 的厚度會往內扣，元素總寬永遠維持你設定的 100px，排版絕不跑版！ */ * { box-sizing: border-box; } body { /* 移除瀏覽器預設的白邊 (margin) 與內縮 (padding) */ margin: 0; padding: 0; /* 呼叫我們在上面定義的變數，作為網頁底色 */ background-color: var(--bg-main); /* * [科技感網格背景原理] * 教科書說明： * 我們不使用圖片當背景，而是使用兩層 `linear-gradient` (線性漸層) 來畫線！ * 第一層：畫橫線。0 到 1px 是半透明青色，1px 到結尾是透明。 * 第二層：畫直線 (90deg 旋轉)。同樣 0 到 1px 是半透明青色。 */ background-image: linear-gradient(rgba(var(--primary-rgb), 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--primary-rgb), 0.05) 1px, transparent 1px); /* * 配合上面的漸層，強制每 30px x 30px 重複一次圖案。 * 這樣就會交織出完美的 30x30 方格網。 */ background-size: 30px 30px; /* 全網頁預設字體顏色 */ color: var(--primary); /* 設定優先字體，保證 Windows 看正黑體，Mac 看蘋方體 */ font-family: "Microsoft JhengHei", "PingFang TC", sans-serif; /* * 過渡動畫 (Transition) * 當 `background-color` 或 `color` 發生改變時 (例如按了換色按鈕)， * 不要瞬間變色，而是花 0.5 秒 (0.5s) 平滑漸變，`ease` 代表動畫速率由慢到快再變慢。 */ transition: background-color 0.5s ease, color 0.5s ease; } .main-container { /* 限制網頁最大寬度為 1000px，防止在超大螢幕上內容太過發散 */ max-width: 1000px; /* `margin: 40px auto;` 的 `auto` 魔法：讓這個區塊在畫面中水平置中！ */ margin: 40px auto; /* 左右保留 20px 內縮，這樣在手機螢幕上，內容才不會貼死螢幕邊緣 */ padding: 0 20px; } /* ========================================================================= * 【模組 3：玻璃擬態組件 (Glassmorphism Components)】 * 教科書說明： * Glassmorphism (毛玻璃) 是現代 UI 最流行的風格。 * 它的核心公式：半透明背景色 + 背景模糊濾鏡 (backdrop-filter) + 淡淡的邊框。 * ========================================================================= */ .glass-panel { /* 使用 rgba 帶入變數並設定 60% (0.6) 不透明度 */ background: rgba(var(--bg-main), 0.6); /* * 毛玻璃的靈魂指令！ * 把這個元素「背後」的東西模糊化 10px。注意：背景必須是半透明的才看得到效果。 */ backdrop-filter: blur(10px); /* 1px 的實線邊框，顏色吃主題變數 */ border: 1px solid var(--primary); /* * 盒子陰影 (box-shadow) 語法： * 水平偏移(0) 垂直偏移(0) 模糊半徑(15px) 顏色。 * 這裡創造出元素向外發光的霓虹效果。 */ box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.3); /* 圓角收邊 */ border-radius: 8px; /* 區塊與區塊之間保持 25px 的下推距離 */ margin-bottom: 25px; /* 區塊內部的文字/內容距離邊框 25px */ padding: 25px; /* 主題換色時，邊框與發光陰影也要平滑過渡 */ transition: border-color 0.5s ease, box-shadow 0.5s ease; } /* ========================================================================= * 【模組 4：排版與標題 (Typography & Headings)】 * ========================================================================= */ .header-title-area { /* * 啟用 Flexbox 彈性排版，這是目前網頁排版最強大的工具。 * flex-direction: column; 讓裡面的元素從上到下「垂直」排列 (預設是水平)。 */ display: flex; flex-direction: column; /* align-items: center; 在垂直排列模式下，這會讓內容「水平置中」 */ align-items: center; /* justify-content: center; 讓內容「垂直置中」 */ justify-content: center; margin-bottom: 20px; } /* 針對 h1, h2, h3 標籤，以及 class 為 gold-text 的元素同時套用樣式 */ h1, h2, h3, .gold-text { color: var(--accent); /* * 文字陰影 (text-shadow) 語法與 box-shadow 類似。 * 這裡用強調色的 60% 不透明度，創造出立體發光字的感覺。 */ text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.6); text-align: center; margin-top: 0; margin-bottom: 5px; transition: color 0.5s ease, text-shadow 0.5s ease; } .header-subtitle { color: var(--primary); font-weight: bold; /* 1em 等於父元素字體大小的 1 倍 (也就是維持原大) */ font-size: 1em; text-align: center; } .header-subtitle span { /* span 標籤內的字稍微縮小為 0.8 倍 */ font-size: 0.8em; } /* ========================================================================= * 【模組 5：導覽列與選單 (Navigation & Menus)】 * ========================================================================= */ /* --- [A. 獨立右上角整合選單模組] --- */ .top-right-nav { /* * 固定定位 (Fixed Positioning) * 讓這個選單永遠黏在視窗的右上角，不管使用者怎麼往下捲動網頁都不會消失。 */ position: fixed; top: 15px; right: 15px; /* z-index 設到極大值，保證它永遠蓋在所有內容的「最上層」，不會被蓋住 */ z-index: 99999; } .menu-toggle-btn { /* 黑底色帶 80% 不透明度 */ background-color: rgba(0, 0, 0, 0.8); border: 1px solid var(--primary); color: var(--accent); padding: 10px 20px; font-size: 16px; font-weight: bold; /* 把游標變成「手指」圖案，提示使用者這是可以點擊的按鈕 */ cursor: pointer; border-radius: 6px; transition: all 0.3s ease; text-shadow: 0 0 5px rgba(var(--accent-rgb), 0.5); /* * inline-flex: 讓按鈕本身像文字一樣可並排，但內部內容可以使用 Flexbox 排版。 * 這裡用來讓「漢堡圖示 ☰」和「十大命理陣法文字」完美對齊。 */ display: inline-flex; align-items: center; justify-content: center; /* 防止按鈕因為畫面太窄而導致裡面的文字換行 */ white-space: nowrap; } /* 滑鼠懸停 (Hover) 時的按鈕變化 */ .menu-toggle-btn:hover { background-color: rgba(var(--primary-rgb), 0.1); box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.5); color: var(--primary); text-shadow: 0 0 8px rgba(var(--primary-rgb), 0.8); } .menu-icon { display: inline-block; } .menu-text { display: inline-block; /* 電腦版預設為展開狀態，給予 150px 的最大寬度 */ max-width: 150px; opacity: 1; /* overflow: hidden; 超出範圍的內容直接隱藏，這是做寬度伸縮動畫的關鍵！ */ overflow: hidden; /* 綁定寬度、透明度與邊距的滑動轉場動畫 */ transition: max-width 0.35s ease, opacity 0.3s ease, margin-left 0.35s ease; margin-left: 8px; } /* [下拉選單列表區塊 - 收合狀態] */ .dropdown-list { /* visibility: hidden 比 display: none 好，因為它保留了 DOM 的動畫運算空間 */ visibility: hidden; /* * [黑客級動畫技巧] * 我們無法對 height: auto 做動畫。 * 因此我們把 max-height 設為 0，當要展開時再把 max-height 設為一個夠大的數值， * 這樣就能達成「平滑向下展開」的視覺效果！ */ max-height: 0; opacity: 0; /* 絕對定位，將選單掛附在父元素 (nav) 的下方 */ position: absolute; top: calc(100% + 10px); /* 往下推移 100% 的按鈕高度，再多加 10px 間距 */ right: 0; /* 靠右對齊按鈕 */ width: 260px; /* 收合動畫過程中隱藏卷軸，避免畫面抖動破圖 */ overflow-y: hidden; /* 移除 `