/* unsaid-jar design tokens——全站唯一色票／字型／間距／動效時長真相源。 * 主題：暖黑房間 × 床頭燈（write/jar/ceremony 三個 view 共用）。 * 規格出處：docs/design/DESIGN.md（#822 設計線）。 * design/tokens.css 是同名的舊設計稿副本（已凍結，見 design/README.md）—— * 這一份（public/tokens.css）才是實際生效的版本，改色票／動效只改這裡。 */ /* #858：見下方 --font-receipt 註解——限定 unicode-range 只涵蓋 Latin/數字/基本標點， 把系統等寬字型排除在中文字符的候選之外，讓 fallback 正確落到 LXGW WenKai TC。 local() 找不到就是找不到（例如非 Apple/Windows 平台缺 SF Mono/Menlo/Consolas）， 此時這個 face 完全不匹配，直接落到 --font-receipt 清單下一個字型，不會整段空白。 */ @font-face { font-family: 'Receipt Mono'; src: local('SF Mono'), local('Menlo'), local('Consolas'), local('Courier New'); unicode-range: U+0000-00FF, U+2010-2027, U+2030-205E; } :root { /* ---- 色彩：材質命名，不是色階命名 ---- 世界只有三種材質：暖黑的房間、暖白的熱感紙、微冷的玻璃。 */ --room: #191411; /* 房間底色：暖黑（紅棕底調，不是螢幕慣用冷黑） */ --room-deep: #100D0B; /* 更深處：頁緣暗角、罐子後方、遮罩 */ --room-lift: #241E19; /* 略亮一層：卡片、輸入框 */ --lamp: #C49A3C; /* 奧斯卡金（MM design system n金，2026-08-29 拍板）：唯一強調色，只給儀式（印/拆/熱印光） */ --lamp-bright: #D2AC52; /* 奧斯卡金 hover 提亮一階 */ --lamp-dim: #7F6427; /* 燈的餘光：focus ring、次要強調 */ /* #858 四稿（MM 拍板）：印表機全線框（同玻璃罐 --glass 語言），不再有 機身/出紙口色塊——printer-body/edge token 已退役，色塊迭代史見 git。 */ --paper: #F8F3EA; /* 熱感紙（作者 A） */ --paper-b: #F3EAE4; /* 第二種紙色（作者 B，微偏粉褐，只微分不標示） */ --ink: #2E2823; /* 熱印字：碳化棕黑（熱印沒有純黑） */ --ink-faint: #6E655B; /* 紙上淡字：時刻戳、meta（on paper 5.2:1，過 AA 小字） */ --glass: #9FB2A8; /* 玻璃冷青：全頁唯一冷色，只用於玻璃描邊/高光 */ --text: #D8CFC2; /* 房間裡的字：暖灰 */ --text-dim: #948878; /* 次要文字、placeholder（on room 5.1:1 / on room-lift 4.6:1） */ /* ---- 衍生色：髮線、摺痕、玻璃、遮罩（gate 48：不准 inline rgba）---- */ --hairline: rgba(216, 207, 194, .08); /* 房間裡的細framing線 */ --hairline-strong: rgba(216, 207, 194, .18); /* ghost 按鈕框、grip */ --lamp-hairline: rgba(196, 154, 60, .25); /* 儀式入口卡的金色細框 */ --glass-fill: rgba(255, 255, 255, .03); /* 罐身玻璃填色 */ --crease: rgba(46, 40, 35, .12); /* 折紙摺痕（主） */ --crease-soft: rgba(46, 40, 35, .08); /* 折紙摺痕（次） */ --band: rgba(0, 0, 0, .015); /* 熱印橫向 banding，極淡 */ --lamp-wash: rgba(196, 154, 60, .12); /* 金色淡底：時間選擇器 pane 切換鍵選中（#833） */ --notify: #C0604A; /* 未讀提示紅點（#857）：不借用 --lamp—— --lamp 定義是「只給儀式」（印/拆/熱印光），未讀提示是持續性 UI 狀態非儀式時刻，借用會混淆語意。 選暖陶土紅貼合房間材質語言（非螢幕冷紅），在暗房間裡仍可辨識為警示。 */ /* #891：月信「兩人的時差」橫條圖六段色階——不新增 hex，全部由 --ink×--paper 混色衍生，深淺對應時段明暗直覺（清晨最淺、深夜最深），跟月信紙面本來就有的 墨色語彙一致，不是外掛的圖表色票。 */ --rhythm-dawn: color-mix(in srgb, var(--ink) 15%, var(--paper)); --rhythm-day: color-mix(in srgb, var(--ink) 30%, var(--paper)); --rhythm-noon: color-mix(in srgb, var(--ink) 45%, var(--paper)); --rhythm-afternoon: color-mix(in srgb, var(--ink) 60%, var(--paper)); --rhythm-evening: color-mix(in srgb, var(--ink) 75%, var(--paper)); --rhythm-latenight: color-mix(in srgb, var(--ink) 92%, var(--paper)); --scrim: color-mix(in srgb, var(--room-deep) 60%, transparent); /* peek 遮罩 */ --scrim-read: color-mix(in srgb, var(--room-deep) 72%, transparent); /* 拆罐閱讀遮罩 */ --bar: color-mix(in srgb, var(--room-deep) 88%, transparent); /* tab bar 底 */ /* ---- 陰影 ---- */ --shadow-paper: 0 8px 24px rgba(0, 0, 0, .45); /* 剛印好、掛在出紙口的紙 */ --shadow-chip: 0 2px 5px rgba(0, 0, 0, .35); /* 罐內/地板折紙塊 */ --shadow-sheet: 0 6px 18px rgba(0, 0, 0, .4); /* peek sheet 裡的紙 */ --shadow-read: 0 14px 40px rgba(0, 0, 0, .55);/* 拆罐展開、懸在遮罩上的紙 */ --shadow-tag: 0 3px 8px rgba(0, 0, 0, .4); /* 罐頸掛牌 */ /* ---- 字型 ---- 全站中文＝LXGW WenKai TC（霞鶩文楷 TC，OFL 自架 webfont，public/fonts/，#828）。 unicode-range 切片：只有頁面真的用到的字元區段才會下載對應 woff2。 */ /* receipt：拉丁/數字維持等寬（熱印機的字），中文落到文楷。 #858 根因修復：這裡曾經是 `ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", "LXGW WenKai TC", …`——結果紙條/輸入框的中文全數 fallback 成系統黑體，不是文楷。 實測（document.fonts.check() 為 true，切片確實已載入）排除了「字沒下載到」； 真正原因：這幾個系統等寬字型名稱沒有限定 unicode-range，Chromium/WebKit 對「這個 字型沒有的字符」在還沒走到 CSS 清單下一個字型前，會先套用系統內建的 CJK 替代字型 （macOS 上是黑體系），LXGW WenKai TC 因此永遠排不上——跟 DESIGN.md §3.2 提過的 `-apple-system` 內建 CJK fallback 是同一類陷阱，只是這次踩在等寬字型上。 修法：用一個限定 unicode-range（只涵蓋 Latin/數字/基本標點）的本機字型 `Receipt Mono` 包住這幾個系統等寬字型——限定範圍後，中文字符在字型比對階段就 直接被排除在候選外，強制往下走到 LXGW WenKai TC，不再被系統 CJK 替代字型攔截。 跟 LXGW 自己 97 個切片「同名多個 @font-face、各自限定 unicode-range」是同一招。 */ --font-receipt: 'Receipt Mono', "LXGW WenKai TC", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", monospace; /* UI：文楷放最前——含拉丁一起走楷書手寫感，全站一致 */ --font-ui: "LXGW WenKai TC", -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif; /* 標籤（罐頸掛牌、封存列表月份）：同為楷書，文楷在前、系統楷體 fallback。 全站已是楷體，outlier 之分不再存在（原 hallmark gate 38 註記見 DESIGN.md §3） */ --font-label: "LXGW WenKai TC", "Kaiti TC", "BiauKai", "DFKai-SB", "Songti TC", serif; --fs-receipt: 15px; --ls-receipt: 0.08em; --line-h: 22px; /* receipt 行高 = 熱印進紙一步 */ /* ---- 尺寸（4pt 刻度；off-scale 值一律貼齊）---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-10: 40px; --paper-w: 260px; /* 紙條寬 */ --chip-w: 56px; /* 折好的紙塊 */ --chip-h: 26px; --radius-paper: 2px; --radius-card: 10px; --radius-pill: 999px; /* ---- 動效：兩套 easing，語意分工 ---- steps() 專屬「印」；連續曲線專屬「紙在空中」；ease-out 給 UI。 動畫只動 transform / opacity（gate 14）；進紙用固定視窗＋translateY。 */ --ease-ui: cubic-bezier(0.2, 0.8, 0.2, 1); /* sheet、淡入 */ --ease-fold: cubic-bezier(0.45, 0, 0.2, 1); /* 折紙、展開 */ --ease-drop: cubic-bezier(0.5, 0, 0.9, 0.6); /* 重力加速（y 軸） */ --ease-fall: cubic-bezier(0.4, 0, 1, 1); /* 散落自由落體 */ --ease-pour: cubic-bezier(0.6, 0, 0.3, 1); /* 罐傾倒 */ /* #863：dur-line／pause-reread／dur-scatter／stagger-scatter／dur-unfold 清掉——宣告了但 styles.css／app.js 從未 var() 引用過（那幾段動畫的實際 時長是 app.js 裡的 JS 常數，不是這裡）。留下的都經 grep 驗證至少一處 真的被引用。 */ --dur-reveal: 500ms; /* 該行文字 clip-path 掃出 */ --dur-cut: 120ms; /* 「喀」切紙 */ --dur-fold: 450ms; /* 第一折 */ --dur-fold2: 400ms; /* 第二折 */ --dur-drop: 700ms; /* 拋物線進罐 */ --dur-sheet: 280ms; /* peek bottom sheet */ --dur-pour: 600ms; /* 罐傾倒 */ --hold-open: 1000ms; /* 拆罐長按：防誤觸，是功能不是動效 */ }