/* 字體大小：小／中／大 —— 全站唯一正本（2026/9/24） * * 三個入口都載入這一份（業者入口、家屬訂購頁、花店後台）。 * * ══════════ 唯一的開關 ══════════ * → :root 的 font-size。其餘所有字級用 rem 跟著長大。 * * 小 100% ＝ 2026/9/24 之前的大小（正文 14px） * 中 112.5% ＝ **預設**（正文 15.75px）—— 老業者看得吃力是這一輪的起點 * 大 125% （正文 17.5px） * * ⚠️ 沒有 data-font 時也要是「中」：JS 掛掉或被關掉時，畫面不該掉回最小。 * 所以預設值寫在沒有屬性選擇器的那一條。 * * ⚠️ **不要在這裡調任何個別元素的字級。** 這一份只管根值與切換鈕本身； * 其他檔案負責「用 rem 寫字級」。混在一起的話，下一個人要改一個字級 * 得在兩個地方找。 */ :root { font-size: 112.5%; } :root[data-font="s"] { font-size: 100%; } :root[data-font="m"] { font-size: 112.5%; } :root[data-font="l"] { font-size: 125%; } /* ══════════ 不隨字級變的區塊 ══════════ * * 花卡與請款單是**要印出來給人看的實物**，尺寸由紙張決定，不是由螢幕上 * 好不好讀決定。放大之後：花卡的字會超出卡片範圍、請款單會擠出 A4。 * * ⚠️ 這裡把 font-size 釘回**今天的 px**（後台 body 是 14px）。 * 不是 16px —— 釘錯值等於偷偷改了列印結果，而那要等印出來才發現。 * ⚠️ 花卡本體是 ，由 card-render.js 用 px 畫，CSS 根本影響不到它； * 這裡釘的是它周圍的說明文字與 A4 預覽裡的所有文字。 * ⚠️ 商品照片框（.pc-img）用 aspect-ratio 固定 1:1，本來就不吃字級， * 但它的「沒有照片」底色卡裡有字 —— 一起釘住，不然卡片會被字撐高。 */ .invoice, #printWrap, .card-cell, .font-panel .fp-preview, .pc-img { font-size: 14px; } /* ══════════ 三段切換鈕 ══════════ * * ⚠️ 44px 是這個專案的點擊區標準，而且這個功能的使用者正是 * 「看不清楚、手也不那麼穩」的人 —— 三段各自至少 44×44。 * ⚠️ 尺寸一律 px：切換鈕本身不能跟著字級變大，不然按一次「大」 * 按鈕就跑掉了，第二次按會按到旁邊那一段。 */ .fs-switch { display: inline-flex; align-items: center; gap: 6px; flex: none; } .fs-switch .fs-label { font-size: 12px; color: var(--ink-soft); letter-spacing: .08em; white-space: nowrap; } .fs-switch button { min-width: 44px; min-height: 44px; padding: 0 8px; font-family: inherit; font-size: 15px; line-height: 1; cursor: pointer; color: var(--gold-deep); background: var(--paper); border: 1px solid var(--khaki); border-radius: 0; } .fs-switch button + button { border-left: 0; } /* 目前選中的那一段實心 */ .fs-switch button[aria-pressed="true"] { background: var(--gold-deep); color: var(--paper); border-color: var(--gold-deep); } .fs-switch button:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }