/* 下載專區 — 本頁專屬樣式 共用元件與 design tokens 在 style.css，不要重造。 本頁沿用的共用元件（都在 style.css，這裡只做必要覆寫）： .page-hero / .page-hero-overlay / .page-hero-content 內頁標頭 .breadcrumb / .breadcrumb-current 麵包屑 .filter-bar / .filter-bar-inner / .filter-select / .filter-select-wrap / .filter-search 篩選列（下拉＋搜尋） .pill-tab / .pill-tab.is-active 分類切換按鈕的外觀 🔴 font-size 一律 rem，不可以用 px：全站有「文字大小 預設／中／大」切換 （改 的 font-size），寫 px 的字級不會跟著放大，而且不會報錯。 ⚠️ 間距（padding／margin／gap）刻意維持 px，與全站一致——間距若也隨字級放大， 版面會整體變胖、窄螢幕更容易橫向溢出。 ========================================== */ /* ========================================== 內頁標頭 ------------------------------------------ 背景圖寫在 CSS 而不是 inline style（沿用 about.css 的做法）。 只寫 background-size: cover ＋ 置中（由 .page-hero 提供）， 構圖靠裁圖決定，不在 CSS 寫死縮放與位移。 ⚠️ page-hero.jpg 是通用圖，**contact／downloads／links／member-center／privacy／sitemap 六頁共用**——改這個檔案六頁會一起變（S10，客戶 2026-08-26 就是這樣換的）。 活動花絮 gallery 用自己的 gallery-hero.jpg，不受影響。 ========================================== */ .downloads-hero { background-image: url('../../images/hero/page-hero.jpg'); } /* ========================================== 版面外框 ========================================== */ .downloads-section { padding: 40px var(--page-gutter) 96px; } .downloads-inner { max-width: var(--container-max); margin: 0 auto; /* 🔴 桌機左欄（.dl-side）與篩選列下拉（.filter-select-wrap）共用這一個寬度， 客戶指出兩者不齊看起來不整齊（下拉比左欄窄）。 兩邊都寫死 240px 一定會有人只改一邊，所以在共同祖先上宣告一次。 ⚠️ 只有 1024px 以上兩者才並存對齊：以下是上下堆疊，左欄吃滿整列寬度。 */ --dl-side-width: 240px; } .downloads-breadcrumb { margin-bottom: 24px; } /* 麵包屑最後一段是分類名稱，要能斷行，否則會把整列推到溢出 */ .downloads-breadcrumb .breadcrumb-current { overflow-wrap: anywhere; } /* ========================================== 篩選列（覆寫共用元件 .filter-bar） ------------------------------------------ 共用元件自帶 padding: 32px 24px 0，那是給「整段獨立區塊」用的； 本頁把它放進 .downloads-inner 裡（外層已有 24px 水平內距、也已有最大寬度）， 所以水平內距要歸零，改用下方間距把它與清單分開。 ⚠️ 只在本頁的 .downloads-filter 上覆寫，不要去改 style.css。 ========================================== */ .downloads-filter { padding: 0 0 24px; } /* ⚠️ 原本這裡有一條 `.downloads-filter[hidden] { display: none }`，2026-08-13 刪除： 已由 `style.css` Base Reset 的全站 `[hidden][hidden]` 涵蓋（見 CLAUDE.md 五節 2-2）。 */ /* 搜尋結果摘要：跨分類搜尋時必須讓使用者知道結果不只來自當前分類 */ .dl-note { margin: 0 0 24px; padding: 12px 16px; border: 1px solid var(--color-border); border-left: 3px solid var(--color-primary); border-radius: var(--radius-sm); background-color: var(--color-bg-alt); font-size: 0.875rem; color: var(--color-text); } .dl-note-clear { margin-left: 8px; border: none; background: none; padding: 0; font-family: inherit; font-size: 0.875rem; font-weight: 600; color: var(--color-primary); text-decoration: underline; } /* ========================================== 兩欄版面：左側分類切換、右側檔案清單 ------------------------------------------ 🔴 刻意用 flex 而不是 grid 兩欄。 側欄（.dl-side）在 JS 沒跑時是 hidden 的——若用 grid-template-columns: 240px 1fr， 側欄消失後清單會掉進那條 240px 的軌道裡被壓成一小條，而且不會報錯。 flex 則是側欄 display: none 之後，清單自動吃滿整個寬度，什麼都不必補。 🔴 兩邊都要 min-width: 0。flex 項目的預設下限是 min-content， 清單裡有很長的法規全名時會把整列撐得比容器寬、整頁橫向溢出。 （同一個坑在 style.css 的 .courses-grid、gallery.css 的 .album-grid 都有記錄。） ========================================== */ .downloads-layout { display: flex; flex-direction: column; gap: 32px; } /* ========================================== 左側：分類切換 ------------------------------------------ 按鈕外觀直接沿用共用元件 .pill-tab（style.css 的「分類頁籤」）， 這裡只調整排列方式：手機橫向排列可換行、桌機縱向填滿側欄。 🔴 整個側欄預設 hidden，由 js/downloads.js 產生完分類按鈕才解除。 理由與篩選列相同：分類切換是純 JS 功能，JS 沒跑時所有分類都是展開的， 這時畫一個空的「檔案分類」標題只會讓人以為壞了。 內容不受影響——導覽列「下載專區」下拉與頁尾都有各分類的靜態連結。 ⚠️ 原本這裡有一條 `.dl-side[hidden] { display: none }`，2026-08-13 刪除： 已由 `style.css` Base Reset 的全站 `[hidden][hidden]` 涵蓋（見 CLAUDE.md 五節 2-2）。 **`hidden` 屬性本身仍然是這個側欄的開關**，只是不必再逐處補 CSS。 ========================================== */ .dl-side-title { margin: 0 0 12px; font-size: 1.0625rem; font-weight: 600; color: var(--color-heading); } .dl-cat-nav { display: flex; flex-wrap: wrap; gap: 8px; } .dl-cat-nav .pill-tab { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 16px; font-size: 0.9375rem; /* 未來的分類名稱可能很長（例如「營業稅與營利事業所得稅」），要能在按鈕內斷行 */ overflow-wrap: anywhere; } /* 檔案筆數：由 js/downloads.js 算出來的，不是手寫的。 底色刻意用半透明白，選中時（紫底）與未選中時（白底）都能自動貼合， 不要填死色值——填死任一個在另一個狀態就會錯。 */ .dl-cat-count { min-width: 24px; padding: 0 6px; border-radius: 999px; background-color: var(--color-bg-alt); font-size: 0.75rem; font-weight: 600; color: var(--color-muted); text-align: center; } .dl-cat-nav .pill-tab.is-active .dl-cat-count { background-color: rgba(255, 255, 255, 0.22); color: #FFFFFF; } /* ========================================== 右側：分類內容 ========================================== */ /* ⚠️ 原本這裡有一條 `.dl-panel[hidden] 等 6 個選擇器 { display: none }`，2026-08-13 刪除： 已由 `style.css` Base Reset 的全站 `[hidden][hidden]` 涵蓋（見 CLAUDE.md 五節 2-2）。 */ .dl-main { min-width: 0; } /* 搜尋模式下多個分類會同時出現，彼此要有明顯的分隔。 🔴 選擇器一定要是 `:not([hidden]) ~ :not([hidden])`，不可以寫成 `.dl-panel + .dl-panel`： 相鄰選擇器不管前一個是否被藏起來——瀏覽第二個分類時（第一個是 hidden）， 第二個分類仍然會吃到這條規則，畫面上就出現一條「上面什麼都沒有的分隔線」 ＋ 40px 空白，而且不會報錯。 用 ~ 而不是 + 的理由：中間可能夾著任意數量的 hidden 分類， + 會因為相鄰的那個是 hidden 而整條失配、變成沒有分隔線。 */ .dl-panel:not([hidden])~.dl-panel:not([hidden]) { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--color-border); } .dl-panel-head { margin-bottom: 24px; } .dl-panel-title { margin: 0 0 8px; font-size: 1.5rem; font-weight: 600; color: var(--color-heading); overflow-wrap: anywhere; } .dl-panel-desc { margin: 0; max-width: 68ch; font-size: 0.9375rem; color: var(--color-muted); } /* 同上：搜尋時小節會被整段藏起來，用 + 會在被藏的小節後面留一段沒人要的空白 */ .dl-group:not([hidden])~.dl-group:not([hidden]) { margin-top: 32px; } .dl-group-title { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 1.0625rem; font-weight: 600; color: var(--color-primary); } /* 標題右側延伸一條細線，讓小節之間的層級一眼可分。 用 ::after 而不是 border-bottom：文字與線同一水平線，比整條下框線更輕。 */ .dl-group-title::after { content: ''; flex: 1; min-width: 16px; height: 1px; background-color: var(--color-border); } .dl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } /* ========================================== 單筆項目 ------------------------------------------ 兩種型態（直接下載／外部連結）共用同一個版型，只有圖示、徽章與右側動作字不同—— 刻意不做成兩套樣式，否則日後改間距要改兩個地方。 ========================================== */ .dl-item { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-surface); transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out; } .dl-item:hover, .dl-item:focus-visible { border-color: var(--color-primary); box-shadow: var(--shadow-sm); } /* 後台已建立項目但檔案還沒上傳：整列調淡、不可點（它是 不是 ）， hover 不亮邊框——看起來能點、點了沒反應比灰掉更糟。 */ .dl-item.is-pending { opacity: 0.6; cursor: default; } .dl-item.is-pending:hover { border-color: var(--color-border); box-shadow: none; } .dl-item-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-sm); background-color: var(--color-bg-alt); color: var(--color-primary); } .dl-item-icon svg { width: 20px; height: 20px; } /* min-width: 0 讓長檔名可以在 flex 項目內斷行，而不是把整列撐開 */ .dl-item-body { flex: 1; min-width: 0; } .dl-item-name { display: block; font-size: 1rem; font-weight: 600; color: var(--color-heading); /* 法規全名可能很長且中間沒有空白，anywhere 才會在任意字元處斷開； break-word 對長串連續字元不一定生效，會造成橫向溢出。 */ overflow-wrap: anywhere; } .dl-item:hover .dl-item-name { color: var(--color-primary); } .dl-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; font-size: 0.8125rem; color: var(--color-muted); } .dl-item-fact { overflow-wrap: anywhere; } /* ========================================== 共用元件：檔案格式徽章 .dl-item-badge ------------------------------------------ 2026-08-12 客戶第三批第 7 項：「希望標籤有不同顏色去分辨，例如 excel 是綠色、 word 檔是藍色之類的，視覺上會比較好分辨是不同格式」。 本頁目前實際出現的格式（2026-08-12 盤點 downloads.html，共 25 個徽章）： | 徽章文字 | 筆數 | class | 底色 | 白字對比 | |-----------|-----|------------------|----------------|---------| | PDF | 12 | .is-pdf | --file-pdf | 5.62:1 | | DOCX | 6 | .is-word | --file-word | 6.49:1 | | XLSX | 2 | .is-excel | --file-excel | 5.27:1 | | 外部連結 | 5 | .is-external-badge | 透明＋紫框 | 13.23:1（紫字對白底）| 全部過 WCAG AA 4.5:1（徽章字級 0.75rem 算小字，門檻是 4.5 不是 3）。 色值與新增格式的做法寫在 style.css 的 :root（搜「檔案格式色」）。 🔴 沒有 .is-* 的徽章會落到下面這條預設規則（主色紫底白字，13.23:1）， 所以新增格式忘了配色只會「顏色沒分開」，不會變成沒有樣式的裸文字。 🔴 顏色是輔助線索，不是唯一線索——徽章一律保留格式文字。 理由：紅（PDF）與綠（Excel）對紅綠色弱者最難分辨，黑白列印也會全部變灰。 **不要把文字換成純圖示。** */ .dl-item-badge { display: inline-flex; align-items: center; padding: 2px 8px; border: 1px solid transparent; border-radius: var(--radius-sm); background-color: var(--color-primary); font-size: 0.75rem; font-weight: 600; color: #FFFFFF; letter-spacing: 0.02em; } .dl-item-badge.is-pdf { background-color: var(--file-pdf); } .dl-item-badge.is-word { background-color: var(--file-word); } .dl-item-badge.is-excel { background-color: var(--file-excel); } /* 外部連結徽章：實心改成外框。 ⚠️ 它刻意**不參與**上面那組格式配色：外部連結不是一個檔案格式， 而是「按下去會離開本站」，用外框（形狀）而不是另一個色相區分， 才不會讓人以為那也是一種可下載的檔案。 ⚠️ **這裡原本有一則「不要用 --color-primary-soft 當底色配白字」的警語， R21（2026-08-25）之後已經不成立，所以刪掉了**：當時 `--brand-purple-soft` 是 `#9B82BE`、白字只有 3.32，現在改成 `#704C8C`、白字 **6.77**，過 AA。 🔴 **留著錯的警語比沒有警語更糟**——它會主動說服下一個人一件已經不是事實的事。 ⚠️ 但這個徽章**仍然維持外框、不改成實心**：理由是上面那條（形狀而非色相）， 與對比無關，不要因為現在配得了白字就順手改成實心。 ⚠️ 底色用 transparent 而不是填一個和卡片一樣的白： 這個徽章日後若出現在別的底色上（例如灰底區塊），填死白色就會變成一塊白方塊。 */ .dl-item-badge.is-external-badge { background-color: transparent; border-color: var(--color-primary-soft); color: var(--color-primary); } /* 右側動作字：手機不顯示（一列裡塞不下，而且整張卡片本身就可以點）， */ /* 768px 起才出現，讓「下載」與「前往」的差別一眼可辨。 */ .dl-item-cta { display: none; } .dl-item-cta svg { width: 16px; height: 16px; } /* ========================================== 空狀態 ========================================== */ .dl-panel-empty, .dl-empty { margin: 0; padding: 48px 24px; border: 1px dashed var(--color-border); border-radius: var(--radius-md); text-align: center; font-size: 0.9375rem; color: var(--color-muted); } /* ========================================== 螢幕閱讀器專用文字 ------------------------------------------ 外部連結的「（另開新視窗）」與篩選列的