/* ============================================ 2026 生態博覽會網站 — 設計 Tokens 對應 Figma Styles：2026 生態博覽會/主色 #F24E2A、Text #26311F 等 ============================================ */ :root { /* 品牌色 */ --color-primary: #f24e2a; /* 2026 生態博覽會/主色 */ --color-text: #26311f; /* 2026 生態博覽會/Text */ --color-white: #ffffff; --color-gray: #5b5b5b; /* 五大分類色（市集/流程表共用） */ --color-cat-a: #f24e2a; /* 森士行動 */ --color-cat-b: #e67e22; /* 土壤系統 */ --color-cat-c: #3d8bc4; /* 水體系統 */ --color-cat-d: #619b16; /* 樹冠系統 */ --color-cat-e: #d4b106; /* 風動系統 */ /* KV 熱顯像色階 */ --kv-hot: #f04e26; --kv-amber: #e17924; --kv-yellow: #fbd40a; --kv-yellowgreen: #b3cb1c; --kv-teal: #83b9c4; --kv-cool: #5fa8b7; /* 版面 */ --content-width: 1200px; --side-margin: 360px; /* 1920px 畫布下的左右留白 */ /* 字級（對應 Figma Text Style） --fs-body / --fs-caption 是全站正文與說明文字的總開關： 真的有被各處 CSS 用 var() 引用，改這裡就會整站一起變（流程表除外，見下方說明）。 */ --fs-h1: 44px; --fs-h2: 28px; --fs-h3: 22px; --fs-body: 20px; --fs-caption: 18px; /* 對應 Figma 的 Caption：Zen Kaku Gothic New Regular 18 / 行高 1.6 */ /* 品牌漸層（對應 Figma 的「2026 生態博覽會/漸層」樣式）：淡綠 → 黃。 用在標題左側的直線、策展實踐的段落分隔線、活動亮點卡片的底線、亮點編號圓圈。 水平用 90deg（左→右）、垂直用 180deg（上→下）。 */ --gradient-brand: linear-gradient(90deg, #99cfab 18%, #fff000 100%); /* 圓角 / 陰影 */ --radius-sm: 10px; --radius-md: 16px; --radius-pill: 999px; --shadow-cta: 0px 4px 15px 0px rgba(174, 42, 19, 0.49); --shadow-nav: 0px 12px 16px rgba(38, 49, 31, 0.16); } @font-face { font-family: 'Wix Madefor Display'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/wix-madefor-display-500.woff2') format('woff2'); } @font-face { font-family: 'Wix Madefor Display'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/wix-madefor-display-700.woff2') format('woff2'); } /* 中文字型：Noto Sans TC，由各頁 的 Google Fonts 連結以「只含本站用字」的子集載入。 為什麼不是 Zen Kaku Gothic New：那是日文字型，有 22 個繁體中文專用字它沒有做 （辦、溫、你、拖、咖啡…），會掉到系統字型，變成 Mac 蘋方／Windows 微軟正黑， 同一句話出現兩種字型。Noto Sans TC 是完整繁中字型，所有字都由它提供，跨系統一致。 後面仍保留系統字型作為網路載入失敗時的後備。 --font-body 的 Wix Madefor Display 是拉丁字型（已內嵌在 assets/fonts/）， 負責數字與英文（例如流程表時間、KV 溫度數字），刻意保留不換： 它不會有掉字問題，而且流程表的數字等寬對齊是依它的字寬校準的（見 css/events.css）。 */ :root { --font-display: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif; --font-body: 'Wix Madefor Display', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif; }