/* kAI 健康紀錄 官方網站 * * 設計判準跟 iOS App 同一套（health-ios/HealthLog/Support/Palette.swift 的註解）： * **很多年長者會用** —— 內文 17px 起（不是 14px 的網頁慣例）、灰字對米色底 ≥ 7:1（WCAG AAA）。 * 這條優先於「看起來精緻」，要調淡任何一個顏色之前先量對比。 * * 對比全部由 scripts/check-contrast.py 實際算出來，**不要憑感覺填數字** * （第一版我把 accent 猜成 6.6:1，實際只有 5.16:1，連 AAA 都不到）。 * 亮色（底 #FDF5F0 / 卡片 #FFFFFF）： * --ink #1A1A1A → 16.2:1 * --ink-soft #3A3A3A → 10.6:1 * --ink-muted #4A4A4A → 8.2:1 ← 灰字下限，不可以再淡 * --accent #9B1930 → 7.6:1（米底）／8.2:1（白底）；白字壓在 accent 上同樣 8.2:1 * 改任何顏色都要重跑 scripts/check-contrast.py。 */ :root { --bg: #FDF5F0; --card: #FFFFFF; --ink: #1A1A1A; --ink-soft: #3A3A3A; --ink-muted: #4A4A4A; --line: #E4D9D2; --accent: #9B1930; /* 深紅：連結與選中的分頁，對米底 7.6:1（AAA）*/ --accent-ink: #FFFFFF; } /* 深色有兩個入口：系統是深色且使用者沒手動選白色；或使用者手動選黑色（theme.js 在 上放 data-theme）。 * CSS 沒辦法把 media query 跟屬性選擇器寫成同一條規則，所以下面兩塊**必須一模一樣** —— * scripts/check-contrast.py 會逐個變數比對，改一邊忘了另一邊會直接紅。 */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #16130F; --card: #221E1A; --ink: #F2EDE8; --ink-soft: #D6CEC7; --ink-muted: #BCB3AB; --line: #3A332D; --accent: #FF8FA0; --accent-ink: #16130F; } } :root[data-theme="dark"] { --bg: #16130F; --card: #221E1A; --ink: #F2EDE8; --ink-soft: #D6CEC7; --ink-muted: #BCB3AB; --line: #3A332D; --accent: #FF8FA0; --accent-ink: #16130F; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.75 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif; overflow-wrap: break-word; /* 長網址不撐出水平捲軸 */ } .wrap { max-width: 44rem; margin: 0 auto; padding: 0 1.25rem 4rem; } /* 頁首：手機上讓導覽自己占一列並可橫向捲動。 * ⚠ 子項少了 shrink-0 / white-space:nowrap 會被壓成一字一行；只加那兩個又會把整頁撐出 * 水平捲軸 —— 兩種壞法要一起解，所以 nav 自己 overflow-x:auto。（後台踩過，見 web-ux 技能） */ header.site { border-bottom: 1px solid var(--line); margin-bottom: 2rem; padding: 1rem 0 0.75rem; } header.site .wrap { padding-bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; } .brand { font-size: 1.0625rem; font-weight: 700; color: var(--ink); text-decoration: none; flex: 0 0 auto; white-space: nowrap; } nav.site { display: flex; gap: 0.25rem; min-width: 0; width: 100%; order: 3; overflow-x: auto; margin: 0 -0.25rem; padding: 0 0.25rem; } @media (min-width: 30rem) { nav.site { width: auto; order: 2; margin-left: auto; } } /* 外觀切換：跟 App 設定頁同一組字（自動／白色／黑色）。用
開合，不用 JS 也點得開； * theme.js 只負責記住選擇、套到 、選完關起來。手機上排在品牌名右邊，桌機排在導覽最右。 * 按鈕本身要有文字，不能只剩一個圖示（web-ux：手機沒有 hover，裸圖示等於沒說明）。 */ details.theme { position: relative; order: 2; margin-left: auto; flex: 0 0 auto; } @media (min-width: 30rem) { details.theme { order: 3; margin-left: 0; } } details.theme > summary { list-style: none; cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; padding: 0.35rem 0.7rem; /* 44px：年長者的手指要按得到 */ border: 1px solid var(--line); border-radius: 0.5rem; color: var(--ink-soft); font-size: 1rem; white-space: nowrap; background: var(--card); } details.theme > summary::-webkit-details-marker { display: none; } details.theme > summary:hover, details.theme[open] > summary { color: var(--ink); border-color: var(--ink-muted); } details.theme > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } details.theme > summary svg { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; } .theme-menu { position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 10; min-width: 9.5rem; background: var(--card); border: 1px solid var(--line); border-radius: 0.6rem; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); padding: 0.3rem; } .theme-menu button { display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left; min-height: 2.75rem; padding: 0.45rem 0.8rem; border: 0; border-radius: 0.4rem; background: none; color: var(--ink); font: inherit; font-size: 1.0625rem; cursor: pointer; } .theme-menu button:hover { background: var(--bg); } .theme-menu button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .theme-menu button::before { content: ""; width: 1.1rem; flex: 0 0 auto; text-align: center; color: var(--accent); font-weight: 700; } .theme-menu button[aria-checked="true"]::before { content: "✓"; } nav.site a { flex: 0 0 auto; white-space: nowrap; padding: 0.35rem 0.6rem; border-radius: 0.4rem; color: var(--ink-soft); text-decoration: none; font-size: 1rem; } nav.site a:hover { background: var(--card); } nav.site a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); } h1 { font-size: 1.875rem; line-height: 1.35; margin: 0 0 0.5rem; letter-spacing: -0.01em; } h2 { font-size: 1.3125rem; line-height: 1.45; margin: 2.5rem 0 0.75rem; } h3 { font-size: 1.0625rem; margin: 1.75rem 0 0.5rem; } p, li { color: var(--ink-soft); } li { margin: 0.35rem 0; } ul { padding-left: 1.3rem; } strong { color: var(--ink); } a { color: var(--accent); } a:focus-visible, nav.site a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .lede { font-size: 1.0625rem; color: var(--ink-soft); } .meta { font-size: 0.9375rem; color: var(--ink-muted); } /* 15px，年長者可讀的下限 */ .card { background: var(--card); border: 1px solid var(--line); border-radius: 0.75rem; padding: 1.25rem 1.25rem 1rem; margin: 1.5rem 0; } .card h2, .card h3 { margin-top: 0; } .card :last-child { margin-bottom: 0; } /* 表格在窄畫面自己捲，不要讓 body 出現水平捲軸 */ .table-scroll { overflow-x: auto; margin: 1rem 0; } table { border-collapse: collapse; width: 100%; min-width: 24rem; font-size: 1rem; } th, td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line); vertical-align: top; } th { color: var(--ink); font-weight: 600; background: var(--card); } td { color: var(--ink-soft); } footer.site { border-top: 1px solid var(--line); margin-top: 3rem; padding-top: 1.5rem; font-size: 0.9375rem; color: var(--ink-muted); } footer.site a { color: var(--ink-muted); } footer.site p { color: var(--ink-muted); margin: 0.35rem 0; } .toc { font-size: 1rem; } .toc ol { padding-left: 1.4rem; margin: 0.5rem 0 0; } .email { font-size: 1.125rem; } /* 宣傳圖：手機上橫向捲動的長條。 * 圖是 853×1844 的直式圖，三張並排在窄畫面塞不下 —— 讓這一條自己捲， * 而不是縮到看不清楚，也不可以讓 body 出現水平捲軸。 * img 一定要寫 width/height 屬性：沒有的話載入時版面會跳動（CLS）。 */ .promo { display: flex; gap: 0.875rem; overflow-x: auto; margin: 1.5rem -1.25rem 0.5rem; padding: 0.25rem 1.25rem 1rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .promo a { flex: 0 0 auto; scroll-snap-align: center; border-radius: 0.75rem; } .promo img { display: block; width: 15rem; height: auto; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--card); } @media (min-width: 48rem) { .promo img { width: 13rem; } }