/* 亮色／暗色都由 CSS 變數切換，不寫 JS 主題邏輯 */ :root { --bg: #f6f7f9; --surface: #ffffff; --surface-2: #eef0f4; --text: #16181d; --text-dim: #5c6270; --text-faint: #868d9c; --line: #e2e5eb; --accent: #1f5fd0; --accent-soft: #e6eefb; --warn: #a4500f; --radius: 12px; --shadow: 0 1px 2px rgb(16 18 25 / 6%), 0 4px 14px rgb(16 18 25 / 4%); /* 閱讀器的行寬。必須用 rem 而不是 em——em 會跟著各元素自己的字級變， 標題、meta、內文的欄寬就會不一樣，左邊界對不齊。 */ --reading-width: 36rem; /* 每種語言用自己的字體，靠元素上的 lang 屬性決定（見下方 :lang 規則）。 不能用 unicode-range 分——漢字在中日文是同一組碼位， 「骨」「直」「今」的中日字形差異靠碼位分不出來，只能靠語言標記。 */ --font-zh: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif; --font-ja: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif; --font-en: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* 預設走中文——介面文字（篩選、按鈕、標籤）全是繁中。 西文字先由 --font-en 的系統字負責，漢字才落到中文字體。 */ :root { --font-stack: var(--font-en), var(--font-zh); } :lang(ja) { --font-stack: var(--font-en), var(--font-ja); } :lang(en) { --font-stack: var(--font-en); } /* 暗色的色票只寫一次，用 CSS 變數在兩個地方套用： 1. 系統偏好是暗色，而且使用者「沒有」明確選日間 2. 使用者明確選了夜間 「自動」＝不在 上放 data-theme，於是只有第 1 條生效。 注意第 1 條一定要加 :not([data-theme="light"])，否則系統是暗色時 使用者選「日間」會被媒體查詢蓋回去，切不動。 */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #101216; --surface: #181b21; --surface-2: #22262e; --text: #e8eaf0; --text-dim: #a2a9b8; --text-faint: #767e8f; --line: #2a2f38; --accent: #6da4ff; --accent-soft: #1d2c45; --warn: #e5a765; --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 4px 14px rgb(0 0 0 / 22%); } } :root[data-theme="dark"] { --bg: #101216; --surface: #181b21; --surface-2: #22262e; --text: #e8eaf0; --text-dim: #a2a9b8; --text-faint: #767e8f; --line: #2a2f38; --accent: #6da4ff; --accent-soft: #1d2c45; --warn: #e5a765; --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 4px 14px rgb(0 0 0 / 22%); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* font-family 寫在 * 上，這樣每個元素都會用「自己最近的 lang」算出的堆疊； 只寫在 body 上的話，卡片內標了 lang="ja" 也不會換字體。 */ * { font-family: var(--font-stack); } body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.6; /* iPhone のノッチ／ホームインジケータ分 */ padding: 0 max(16px, env(safe-area-inset-left)) max(24px, env(safe-area-inset-bottom)); } /* ---------- 頂部 ---------- */ .topbar { position: sticky; top: 0; z-index: 10; margin: 0 calc(-1 * max(16px, env(safe-area-inset-left))); padding: 14px max(16px, env(safe-area-inset-left)) 10px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .topbar__row { display: flex; align-items: baseline; gap: 10px; max-width: 1180px; margin: 0 auto; } h1 { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: 0.02em; } /* 更新時間緊接在標題後面，當作標題的附註；靠右的位置留給外觀按鈕 */ .stamp { margin: 0; font-size: 0.78rem; color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .theme-toggle { margin-left: auto; align-self: center; flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; color: var(--text-dim); background: var(--surface); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; transition: color 0.12s, border-color 0.12s; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); } .theme-toggle__icon { display: grid; place-items: center; width: 17px; height: 17px; } .theme-toggle svg { width: 100%; height: 100%; display: block; } .search { max-width: 1180px; margin: 10px auto 0; } #search { width: 100%; padding: 9px 13px; font: inherit; font-size: 0.9rem; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; outline: none; } #search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .filters { max-width: 1180px; margin: 8px auto 0; } /* 摺疊列本身不畫外框——裡面的膠囊已經有形狀了，再包一層會變成框中框 */ .filters__toggle { display: flex; align-items: center; gap: 7px; width: fit-content; padding: 2px 0; cursor: pointer; list-style: none; user-select: none; } /* Safari 仍會畫預設的三角形，要另外關掉 */ .filters__toggle::-webkit-details-marker { display: none; } .filters__toggle:hover .filters__pill { border-color: var(--accent); color: var(--text); } .filters__toggle:hover .filters__caret { color: var(--accent); border-color: var(--accent); } /* 三角形是唯一的開合提示，包一顆圓形膠囊讓它看起來就是個按鈕。 整顆一起旋轉沒問題——圓形轉了看不出來，只有裡面的三角形會動。 */ .filters__caret { display: grid; place-items: center; width: 26px; height: 26px; flex: none; font-size: 0.82rem; line-height: 1; color: var(--text-dim); background: var(--surface); border: 1px solid var(--line); border-radius: 50%; transition: transform 0.15s, color 0.12s, border-color 0.12s; } .filters[open] .filters__caret { transform: rotate(90deg); } /* 摺起來時用兩顆膠囊顯示地區與主題目前的選擇，不必展開就知道在看什麼。 展開後下面的膠囊列已經標示了選中項，這兩顆就沒必要再佔位子。 */ .filters__pill { border: 1px solid var(--line); background: transparent; padding: 3px 11px; font-size: 0.78rem; transition: border-color 0.12s, color 0.12s; } .filters[open] .filters__pill { display: none; } .filters__body { display: grid; gap: 6px; padding: 10px 0 2px; } /* 三排篩選器原本只靠換行區分，膠囊長得又一樣，看起來像同一組。 現在每排都有固定寬度的標題，並且各自用不同的形狀與顏色。 */ .filters__row { display: grid; grid-template-columns: 2.6rem 1fr; align-items: start; gap: 8px; } .filters__label { padding-top: 5px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; color: var(--text-faint); white-space: nowrap; } .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { padding: 4px 12px; font: inherit; font-size: 0.82rem; line-height: 1.5; color: var(--text-dim); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background 0.12s, color 0.12s, border-color 0.12s; } .chip:hover { border-color: var(--accent); color: var(--text); } /* 三排篩選器的膠囊長得一模一樣——形狀、大小、選中樣式都統一。 左邊固定寬度的「地區／主題／排序」標題已經足以區分是哪一組， 再讓形狀也不同只會變得雜亂。 */ .chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } .chip__count { margin-left: 5px; font-size: 0.75em; opacity: 0.62; font-variant-numeric: tabular-nums; } /* ---------- 內容 ---------- */ main { max-width: 1180px; margin: 0 auto; padding-top: 18px; } .group { margin-bottom: 26px; } .group__head { display: flex; align-items: baseline; gap: 9px; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--line); } .group__title { margin: 0; font-size: 0.95rem; font-weight: 700; } .group__count { font-size: 0.78rem; color: var(--text-faint); font-variant-numeric: tabular-nums; } .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 9px; } .card { display: block; padding: 11px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: inherit; text-decoration: none; transition: border-color 0.12s, transform 0.12s; } .card:hover { border-color: var(--accent); transform: translateY(-1px); } .card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .card__title { margin: 0 0 7px; font-size: 0.93rem; font-weight: 600; line-height: 1.45; } /* 英文標題下面的中譯 */ .card__title-zh { margin: -3px 0 7px; font-size: 0.86rem; line-height: 1.5; color: var(--text-dim); } .card__title-zh mark, .card__title mark { background: var(--accent-soft); color: inherit; border-radius: 3px; padding: 0 1px; } .card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--text-faint); } .badge { padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--text-dim); font-size: 0.72rem; white-space: nowrap; } /* 修飾類別必須排在 .badge 後面——特異度相同，後定義的才會生效。 */ /* 卡片與彈窗裡的標籤也統一成同一顆膠囊。唯一的差別是熱度那顆可以點， 所以多一個 hover 提示；顏色、形狀、字級都跟其他標籤一致。 */ .badge--coverage { font: inherit; font-size: 0.72rem; border: 1px solid transparent; cursor: pointer; } .badge--coverage:hover { border-color: var(--accent); color: var(--accent); } .card__source { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 15em; } /* 會跳離本站的條目標記 */ .card__external { color: var(--text-faint); font-size: 0.8rem; } .card__time { margin-left: auto; font-variant-numeric: tabular-nums; } .empty { padding: 42px 0; text-align: center; color: var(--text-faint); } /* ---------- 閱讀器 ---------- */ .reader { width: min(760px, calc(100vw - 32px)); max-height: min(88vh, 900px); padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: 0 12px 48px rgb(0 0 0 / 28%); overflow: hidden; } .reader::backdrop { background: rgb(8 10 14 / 55%); backdrop-filter: blur(3px); } .reader__inner { display: flex; flex-direction: column; max-height: inherit; } .reader__head { position: relative; padding: 18px 24px 14px; border-bottom: 1px solid var(--line); } /* 標題與底部連結對齊內文的閱讀行寬，不然看起來像沒對到 */ .reader__head > .reader__meta, .reader__head > .reader__title { max-width: var(--reading-width); margin-inline: auto; } /* 頁尾是左右兩欄，所以是整條置中，不是各自置中 */ .reader__foot { max-width: calc(var(--reading-width) + 48px); margin-inline: auto; width: 100%; } /* 讓出右上角關閉鈕的位置，避免長標題壓到它 */ .reader__title { padding-right: 30px; } .reader__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 0.76rem; color: var(--text-faint); } .reader__time { color: var(--text-faint); } .reader__title { margin: 0; font-size: 1.1rem; font-weight: 700; line-height: 1.45; } .reader__title-zh { display: block; margin-top: 5px; font-size: 0.95rem; font-weight: 600; color: var(--text-dim); } .reader__close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; font-size: 0.9rem; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; line-height: 1; } .reader__close:hover { color: var(--text); border-color: var(--accent); } .reader__body { padding: 26px 24px 8px; overflow-y: auto; overscroll-behavior: contain; /* 只在右側留捲軸空間。用 both-edges 反而會讓內文左緣比標題多縮排一個 捲軸寬（實測差 15px）——頁首頁尾不是捲動容器，沒有那段留白。 */ scrollbar-gutter: stable; flex: 1; } /* 閱讀區的行寬要控制住。彈窗有 760px 寬，內文如果拉滿，一行會塞進 45 個以上的 中文字，眼睛從行尾找回行首會很吃力。36rem 大約是一行 34 個中文字。 置中要寫進各自的 margin 簡寫裡——這裡若只寫 margin-inline，會被下面那些 帶 margin 簡寫的規則覆蓋掉（簡寫會把 margin-left/right 重設為 0）。 */ .reader__body > * { max-width: var(--reading-width); } .reader__p { margin: 0 auto 1.5em; font-size: 1.05rem; /* 中日文的字面比西文飽滿，行距要比英文排版的慣例再鬆一點才不會擠 */ line-height: 2; letter-spacing: 0.01em; color: var(--text); /* 避免最後一行只剩一兩個字 */ text-wrap: pretty; } /* 原文與中譯成對出現時只用間距綁在一起，縱線留給中譯自己 */ .reader__pair { margin: 0 auto 1.8em; } .reader__pair .reader__p { margin: 0 0 0.55em; } /* 引文縱線只用在中譯上——它是「這段的譯文」，縱線讓它跟原文分得開。 電頭與署名不用，那些是註記不是引用。 */ .reader__zh { margin: 0; padding-left: 14px; border-left: 2px solid var(--line); font-size: 0.97rem; line-height: 1.9; letter-spacing: 0.01em; color: var(--text-dim); text-wrap: pretty; } .reader__empty { margin: 0 auto 14px; color: var(--text-faint); font-size: 0.9rem; } /* 電頭：「（中央社記者 劉冠廷 台北12日電）」這類記者／時間／地點資訊， 單獨拉成第一行並用引用縱線標記，內文從下一段開始。 文末的編輯署名「（編輯：林淑媛）1150812」用同一種樣式收尾。 */ .reader__dateline, .reader__credit { margin: 0 auto 1.6em; max-width: var(--reading-width); font-size: 0.88rem; line-height: 1.7; color: var(--text-dim); } /* 署名收在最後，不用引用縱線——它是結尾註記，不需要跟電頭一樣被強調 */ .reader__credit { margin-top: 0.4em; margin-bottom: 0.6em; color: var(--text-faint); } .reader__foot { padding: 12px 24px 16px; border-top: 1px solid var(--line); background: var(--surface); } /* 「閱讀原文」靠左、發稿時間靠右，整條對齊內文的閱讀行寬 */ .reader__foot { display: flex; } .reader__foot > .reader__link { flex: 1; } .reader__stamp { font-size: 0.78rem; color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; } .reader__link { display: block; font-size: 0.86rem; font-weight: 600; color: var(--accent); text-decoration: none; } .reader__link:hover { text-decoration: underline; } @media (max-width: 560px) { .reader { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto auto 0; border-radius: 14px 14px 0 0; } /* 手機上寬度本來就受限，行寬不必再壓，改成把邊距收窄換取閱讀空間 */ .reader__body { padding: 20px 18px 8px; } .reader__p { font-size: 1.02rem; line-height: 1.95; } } /* ---------- 報導媒體一覽 ---------- */ .outlets { width: min(460px, calc(100vw - 32px)); max-height: min(80vh, 720px); padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: 0 12px 48px rgb(0 0 0 / 28%); overflow: hidden; } .outlets::backdrop { background: rgb(8 10 14 / 55%); backdrop-filter: blur(3px); } .outlets__inner { display: flex; flex-direction: column; max-height: inherit; } .outlets__head { position: relative; padding: 16px 52px 12px 20px; border-bottom: 1px solid var(--line); } .outlets__title { margin: 0; font-size: 0.95rem; font-weight: 700; } .outlets__list { margin: 0; padding: 6px 20px 16px; list-style: none; overflow-y: auto; } .outlet { padding: 12px 0; border-bottom: 1px solid var(--line); } .outlet:last-child { border-bottom: none; } .outlet__head { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; } .outlet__name { font-size: 0.92rem; font-weight: 600; } .outlet__note { margin: 5px 0 0; font-size: 0.82rem; line-height: 1.65; color: var(--text-dim); } /* ---------- 底部 ---------- */ .footer { max-width: 1180px; margin: 8px auto 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.76rem; color: var(--text-faint); } .footer p { margin: 0 0 4px; } .footer code { font-size: 0.95em; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; } .footer .warn { color: var(--warn); } @media (max-width: 560px) { .cards { grid-template-columns: 1fr; } .topbar__row { flex-direction: column; align-items: flex-start; gap: 2px; } }