/* ========================================== news.html 專屬樣式 本頁沿用的共用元件（都在 style.css，這裡只做必要覆寫）： .pill-tabs / .pill-tab 分類頁籤 .filter-bar / .filter-bar-inner / .filter-search 篩選列（關鍵字搜尋） .news-list / .news-item 文章清單 .pagination / .pagination-btn 分頁 🔴 font-size 一律 rem，不可以用 px：全站有「文字大小 預設／中／大」切換 （改 的 font-size），寫 px 的字級不會跟著放大，而且不會報錯。 ⚠️ 間距（padding／margin／gap）刻意維持 px，與全站一致。 ========================================== */ .news-list-section { padding: 64px var(--page-gutter); } /* 切換分頁後 news.js 會把清單捲到視窗頂端（listEl.scrollIntoView）， 但 .site-header 是 sticky／top:0，不讓出高度的話第一則會被頁首蓋住（使用者 2026-09-17 回報）。 ⚠️ 用 --header-stack 這個 token，LIFF 模式下它是 0px，不會多讓出一段空白。 ⚠️ 作法與活動花絮（gallery.css 的 .gallery-section）一致。 */ #news-list-grid { scroll-margin-top: calc(var(--header-stack) + 16px); } /* 用 token 不寫 1440px 字面值（理由同 article.css：值相同的字面量 grep 不到） */ .news-list-inner { max-width: var(--container-max); margin: 0 auto; } .news-list-inner .pill-tabs { margin-bottom: 40px; } .news-list-inner .news-list { margin-bottom: 40px; } /* 分類按鈕靠左，不置中（客戶要求）。 .pill-tabs 是 style.css 的共用元件、預設 justify-content: center， 這裡用本頁的 id 覆寫，不改共用元件本身——其他頁面仍需要置中。 同一個做法已用在 index.css 的 #home-course-tabs。 */ #news-tabs { justify-content: flex-start; } /* 🔴 M7（客戶 2026-08-17）：小尺寸時分類按鈕改橫向滑動，不要換行往下排—— 換行會把文章列表推到很下方才出現。做法是在 HTML 掛共用元件 `.scroll-tabs`。 🔴 **但只掛 class 沒有用，必須在這裡把 `flex-wrap` 改掉。** `.pill-tabs`（style.css:3021）自己宣告了 `flex-wrap: wrap`， 而 `.scroll-tabs`（:2882）**根本沒有宣告 flex-wrap**（它靠預設的 nowrap）。 兩者特異性相同 (0,1,0)，`.pill-tabs` 排在後面 → wrap 贏， **掛了 `.scroll-tabs` 也不會橫捲，只會多一個誤導的 class**。 ⚠️ 這與課程內頁分頁列踩過的是同一個坑（見 CLAUDE.md 的定案清單）： 掛 `.scroll-tabs` 之前一定要先確認容器沒有自己宣告 `flex-wrap`。 ⚠️ 首頁那一列（`.home-news-tabs`）不必這樣處理，因為它不是 `.pill-tabs`、 沒有宣告 flex-wrap，所以 `.scroll-tabs` 的預設值直接生效。 */ #news-tabs { flex-wrap: nowrap; } /* ≥1280 維持原本的樣子（6 個分類排得下，不需要橫捲）。 ⚠️ 要把 `.scroll-tabs` 帶進來的三件事一起還原，否則桌機會多出 12px 的捲軸留白： flex-wrap、overflow、padding-bottom。 🔴 用 `overflow: visible`（兩軸）不是只寫 `overflow-x: visible`： `.scroll-tabs` 另外有 `overflow-y: hidden`，而依 CSS 規範 **一軸 visible 搭另一軸非 visible 時，visible 會被算成 auto** ——只改 x 的話算出值仍是 `auto`（實測過），註解就變成一個錯的保證。 */ /* 熱門關鍵字（篩選列下方一排可點的膠囊） */ .news-hot-keywords { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 20px; } .news-hot-keywords-label { display: inline-flex; align-items: center; gap: 4px; font-size: 0.875rem; color: var(--color-text-muted, #6B6B6B); margin-right: 4px; } .news-hot-keywords-label svg { width: 16px; height: 16px; } .news-hot-keyword { border: 1px solid var(--color-border); background: var(--color-bg-alt); color: var(--color-text); border-radius: 999px; padding: 6px 14px; font-size: 0.875rem; font-family: inherit; line-height: 1.4; cursor: pointer; transition: background-color 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out; } .news-hot-keyword:hover, .news-hot-keyword:focus-visible { border-color: var(--color-primary); color: var(--color-primary); } .news-hot-keyword.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } @media (min-width: 1280px) { #news-tabs { flex-wrap: wrap; overflow: visible; padding-bottom: 0; } } /* ========================================== 時間區間篩選（客戶要求：能用時間區間篩選文章） ------------------------------------------ 🔴 **`.filter-date*` 那一整組已於 AA1（2026-09-03）搬到 `style.css` 的 「共用元件：日期區間篩選」**——活動花絮也要用，它不再是本頁專屬。 **要改日期欄的外觀請去那裡，不要在這裡補一份。** ⚠️ 本頁只留下方那一條 `.news-list-inner .filter-bar-inner`（頁面層的換行覆寫）。 篩選邏輯仍在 `script.js`：分類 ＋ 關鍵字 ＋ 起訖日三者 AND。 ========================================== */ /* 🔴 共用元件 .filter-bar-inner 在 768px 起是 flex-direction: row 且沒有 flex-wrap， 日期組會被硬塞進搜尋框旁邊、把搜尋框壓到只剩一百多 px。 這裡只在本頁補上 wrap，讓日期組在 768–1023 自己換到下一列（1024 起才並排）。 ⚠️ 是在本頁的容器上覆寫，不是改 style.css——報名課程頁的兩個下拉仍要維持不換行。 */ .news-list-inner .filter-bar-inner { flex-wrap: wrap; }