/* ========================================================== Oscan 網站樣式 ---------------------------------------------------------- 由「展示資料/oscan-design.css」的設計稿演進而來，兩者的 token 名稱刻意保持一致，對照設計稿時不會混淆。 結構： 1. 設計 Token — 淺色 2. 設計 Token — 深色 3. 基礎與版面 4. 導覽列與頁尾 5. 按鈕 6. 元件（卡片、風險標籤、上傳區、橫幅…） 7. Demo 流程專用 8. 響應式 改配色只要動第 1、2 節的變數，其他地方都不寫死顏色。 深色模式：，由 theme.js 設定。 ========================================================== */ /* ---------------------------------------------------------- 1. 設計 Token — 淺色（主要版本） ---------------------------------------------------------- */ :root { --bg: #F7F7F6; --surface: #FFFFFF; --surface-alt: #F1F1EE; --border: #D6D6D1; --border-strong: #8A8A84; --divider: #EDEDEA; --text: #2C2C2A; --text-secondary: #5F5E5A; --text-muted: #8A8A84; --btn-bg: #FFFFFF; --btn-text: #2C2C2A; --btn-border: #8A8A84; --btn-shadow: 0 1px 2px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04); --btn-shadow-up: 0 3px 6px rgba(0,0,0,.08), 0 8px 18px rgba(0,0,0,.07); --btn-shadow-in: inset 0 2px 5px rgba(0,0,0,.11); /* 風險等級 — 刻意去飽和：能分辨嚴重度，但不造成警報感 */ --risk-critical-bg: #F6EDEB; --risk-critical-border: #D9C4BF; --risk-critical-text: #4A1B0C; --risk-critical-accent: #993C1D; --risk-high-bg: #F7F1E6; --risk-high-border: #DDD0B8; --risk-high-text: #412402; --risk-high-accent: #854F0B; --risk-medium-bg: #EFF1F3; --risk-medium-border: #CBD2D8; --risk-medium-text: #042C53; --risk-medium-accent: #185FA5; --risk-low-bg: #F7F7F6; --risk-low-border: #D6D6D1; --risk-low-text: #2C2C2A; --risk-low-accent: #5F5E5A; --radius: 8px; --radius-card: 10px; --content-max: 940px; } /* ---------------------------------------------------------- 2. 設計 Token — 深色 ---------------------------------------------------------- 底色用暖灰不用純黑：純黑會讓白灰設計顯得廉價， 在 OLED 上文字邊緣也容易有光暈。 主按鈕改為淺底深字：陰影在深色底幾乎看不見， 改用高對比填色來建立同樣的視覺份量。 因此「立體按壓」在深色模式靠亮度變化，而非陰影變化。 ---------------------------------------------------------- */ [data-theme="dark"] { --bg: #151514; --surface: #232322; --surface-alt: #2A2A28; --border: #3A3A37; --border-strong: #5F5E5A; --divider: #2E2E2B; --text: #EDEDEA; --text-secondary: #9A9A94; --text-muted: #8A8A84; --btn-bg: #EDEDEA; --btn-text: #1B1B1A; --btn-border: #EDEDEA; --btn-shadow: none; --btn-shadow-up: none; --btn-shadow-in: none; --risk-critical-bg: #3A1E14; --risk-critical-border: #6B3A2C; --risk-critical-text: #F5C4B3; --risk-critical-accent: #F0997B; --risk-high-bg: #33260F; --risk-high-border: #6B5424; --risk-high-text: #FAC775; --risk-high-accent: #EF9F27; --risk-medium-bg: #14293D; --risk-medium-border: #24486B; --risk-medium-text: #B5D4F4; --risk-medium-accent: #85B7EB; --risk-low-bg: #232322; --risk-low-border: #3A3A37; --risk-low-text: #EDEDEA; --risk-low-accent: #9A9A94; } /* ---------------------------------------------------------- 3. 基礎與版面 ---------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* hidden 屬性必須永遠有效。 瀏覽器預設的 [hidden]{display:none} 只是 UA 樣式，任何作者端的 display 宣告都會蓋掉它 —— 例如 .btn-row{display:flex} 就讓