@charset "utf-8"; /* sonet-hf-root.css — 消費站「根字級契約」（root font-size contract）。 * * ── 為什麼需要 ────────────────────────────────────────────── * 頁首頁尾 SSR 資產以 Materialize 為底，大量使用 `rem`。`rem` 永遠相對於「根元素 的字級」， * 本質上無法被 `.sonet-hf` wrapper scope（scope 只能限縮選擇器的作用範圍，改變不了 rem 的基準）。 * 因此即使頁首頁尾的 CSS 已 scope 到 .sonet-hf、不再污染消費站元素，頁首頁尾自身用 rem 算出來的 * 字級/間距，仍會吃「消費站 的字級」。 * * 正式機（materialize 全域）之所以正常，是因為 materialize 自己就帶了 html{font-size:...} 的三段 * responsive 值，把根字級設成它要的基準。一旦把 materialize scope 到 .sonet-hf，這條 html{} 就 * 碰不到真正的 了 → 根字級退回消費站預設（多半 16px）→ 頁首頁尾 rem 全部偏大、跑版。 * * ── 本檔做什麼 ────────────────────────────────────────────── * 提供 Materialize 原本的三段 responsive 根字級，直接套在消費站的 ，使頁首頁尾 rem 排版正確。 * 由 SonetHeaderFooterAssets::renderHead() 隨其他資產一併輸出，且「刻意不 scope、維持全域」—— * 因為 rem 的基準必須落在真正的 ，不能包進 wrapper。 * * 載入順序：本檔在 manifest 的 css 陣列中排在 style-clear-hf.css 之後，靠「後者勝」壓過 * style-clear-hf 大 reset 裡的 `html{font-size:100%}`（同權重、免用 !important）。 * * ── 契約與注意 ────────────────────────────────────────────── * 這會設定「整個消費站」的根字級（消費站自身內容的 em/rem 也依此縮放）。這是接 SSR 頁首頁尾的 * 前提契約：消費站內容須以此根字級為設計基準。若消費站有自己的根字級需求而衝突，須自行協調 * （例如在自己的 CSS 以更高優先序覆蓋，或不使用本檔、改由自站設定等值的 html 字級）。 */ @media only screen and (min-width: 0) { html { font-size: 0.875em; } } @media only screen and (min-width: 992px) { html { font-size: 0.906em; } } @media only screen and (min-width: 1200px) { html { font-size: 0.938em; } } /* 頁首頁尾 wrapper 的字級基準修正。 * materialize 的 html{font-size:0.875~0.938em} 經 scope 後會落到 .sonet-hf（wrapper）， * 使 wrapper 基準變成 root 再乘一次係數（偏掉），頁首以 em 計算的字（.menu-top-title:1.475em、 * 選單等）基準跟著錯 → 整體偏大。此處把 wrapper 重設為 1rem（= root），讓頁首 em 字以正確 root * 為基準，與正式機（materialize 全域、html 即 root）一致。!important 壓過 scoped materialize。 */ .sonet-hf { font-size: 1rem !important; }