/* ══════════════════════════════════════════════════════════════ IBM Plex Mono，自架。 🔴 **刻意不用 Google Fonts CDN。** 法務頁一邊寫「沒有第三方」， 一邊讓瀏覽器把讀者的 IP 送去 Google，那是自打嘴巴。 字型是 OFL 授權（見 assets/fonts/IBMPlexMono-OFL.txt），可以自架。 順便讓 CSP 收得更緊：font-src 只要 'self'。 ⚠️ 只帶 Regular 與 SemiBold。頁面沒有用到斜體，700 對應到 SemiBold。 ══════════════════════════════════════════════════════════════ */ @font-face { font-family: "IBM Plex Mono"; src: url("./assets/fonts/IBMPlexMono-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("./assets/fonts/IBMPlexMono-SemiBold.ttf") format("truetype"); font-weight: 600 700; font-style: normal; font-display: swap; } /* 法務頁樣式。用 Studio 主題（紙感）—— 這種頁面是拿來讀的，不是拿來看的。 Token 與 styles.css 同源，見 ../doc/landing-style-spec.md */ :root { --stu-bg: #EFEDE8; --paper: #FBFAF7; --ink: #22231F; --ink-rgb: 34,35,31; --acc: #D94F3D; --stamp: #B0203A; --gt1-stu:#B8432F; --g1: #FF3EA5; --g2: #3FD9FF; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", Roboto, sans-serif; } * { box-sizing: border-box; } body { margin: 0; background: var(--stu-bg); color: var(--ink); font-family: var(--ui); font-size: 16px; line-height: 1.85; -webkit-font-smoothing: antialiased; } .legal { max-width: 760px; margin: 0 auto; padding: 56px 24px 96px; } .legal__brand { position: relative; font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .22em; margin-bottom: 34px; } .legal__brand span { display: block; } .legal__brand .p, .legal__brand .c { position: absolute; top: 0; opacity: .55; } .legal__brand .p { left: -2px; margin-top: -1px; color: var(--g1); } .legal__brand .c { left: 2px; margin-top: 1px; color: var(--g2); } .legal__brand .t { position: relative; } h1 { font-family: var(--mono); font-size: clamp(26px, 3.4vw, 34px); font-weight: 700; letter-spacing: .02em; margin: 0 0 6px; } .legal__upd { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: rgba(var(--ink-rgb), .5); margin: 0 0 8px; } .legal__jump { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; margin: 0 0 40px; } .legal__jump a { color: var(--gt1-stu); } h2 { font-family: var(--mono); font-size: 15px; font-weight: 700; letter-spacing: .04em; margin: 40px 0 10px; padding-top: 18px; border-top: 1px solid rgba(var(--ink-rgb), .14); } h2:first-of-type { border-top: none; padding-top: 0; } p { margin: 0 0 14px; } ul { margin: 0 0 14px; padding-left: 22px; } li { margin-bottom: 7px; } strong { font-weight: 700; } a { color: var(--gt1-stu); } a:hover { color: var(--acc); } :focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; } /* 重點框：資料流那種「一定要看到」的段落 */ .callout { background: var(--paper); border-left: 3px solid var(--acc); box-shadow: 0 2px 10px rgba(0,0,0,.07); padding: 16px 20px; margin: 0 0 18px; border-radius: 0 6px 6px 0; } .callout p:last-child, .callout ul:last-child { margin-bottom: 0; } .legal__sep { margin: 76px 0 0; border: 0; border-top: 2px solid rgba(var(--ink-rgb), .18); } .legal__back { margin-top: 56px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* ══════════════════════════════════════════════════════════════ 語言切換與頁尾（2026-08-29 加） ══════════════════════════════════════════════════════════════ */ /* 🔴 **預設兩種語言都顯示。** 只有在 legal.js 跑起來、把 `js-i18n` 加到 之後，才會只留一種。腳本掛掉就回到中英並列的長頁 —— 法務文件寧可醜，不可以讀不到。 */ .lang-block { display: block; } html.js-i18n .lang-block { display: none; } html.js-i18n .lang-block.is-active { display: block; } /* 沒有 JS 時，兩塊之間要有分隔，不然會黏成一坨 */ html:not(.js-i18n) .lang-block + .lang-block { margin-top: 76px; border-top: 2px solid rgba(var(--ink-rgb), .18); padding-top: 8px; } .langbar { position: absolute; top: 0; right: 0; z-index: 8; padding: 18px clamp(20px, 4vw, 60px); } .langtoggle { display: flex; align-items: center; height: 34px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--paper); overflow: hidden; } .langtoggle button { font-family: var(--mono); font-size: 11px; font-weight: 600; padding: 0 12px; height: 100%; border: 0; cursor: pointer; background: transparent; color: var(--ink); } .langtoggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); } /* ── 頁尾。跟首頁同一個產生器，樣式也照抄，兩邊要長一樣 ── */ footer { background: #17181C; color: #F4F3ED; padding: clamp(44px,6vw,70px) clamp(24px,5vw,84px); } .foot-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; flex-wrap: wrap; } .foot-brand { display: flex; flex-direction: column; gap: 14px; } .foot-brand a { font-family: var(--mono); font-size: 12px; color: rgba(244,243,237,.6); } .foot-links { display: flex; gap: 26px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; } .foot-links a { color: rgba(244,243,237,.75); } .foot-links a:hover { color: var(--g1); } .foot-links .pending { color: rgba(244,243,237,.35); border-bottom: 1px dashed rgba(244,243,237,.28); } .foot-legal { margin-top: 34px; font-family: var(--mono); font-size: 10px; color: rgba(244,243,237,.35); } .foot-legal a { color: rgba(244,243,237,.6); } .foot-legal a:hover { color: var(--g1); } /* 品牌字：三層錯位 = App icon 上的重影效果 */ .wordmark { position: relative; font-family: var(--mono); font-size: 14px; font-weight: 700; letter-spacing: .22em; line-height: 1.2; } .wordmark span { display: block; } .wm-pink, .wm-cyan { position: absolute; top: 0; opacity: .7; } .wm-pink { left: -2px; margin-top: -1px; color: var(--g1); } .wm-cyan { left: 2px; margin-top: 1px; color: var(--g2); } .wm-top { position: relative; } /* 法務頁本體不再需要自己的返回連結，頁尾有 */ .legal { position: relative; }