/*
Theme Name: 影響力編輯室
Theme URI: https://influence4good.ddev.site
Author: Allen
Description: 影響力編輯室 (Influence for good) — WordPress 客製 classic theme，1:1 還原 Figma 設計。
Version: 0.1.2
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Update URI: false
Text Domain: influence4good
*/
:root {
/* 允許 height/width 從 keyword（如 auto）動畫到具體值 — Chrome 129+/Safari 18.4+/Firefox 129+；舊瀏覽器忽略、優雅降級 */
interpolate-size: allow-keywords;
/* header 列高（nav 項目 + donate 按鈕共用，避免 Safari 次像素捨入導致底緣不對齊） */
--header-bar-height: 92px;
/* Color tokens — synced from Figma design system (Page 3) */
--color-primary-blue: #160068;
--color-primary-light: #F5F5F5;
--color-secondary-purple: #5D0EF5;
--color-secondary-blue: #27A1E2;
--color-secondary-yellow: #FFDE5A;
--color-secondary-green: #23C480;
--color-neutral-grey: #D9D9D9;
--color-black: #000;
/* Text colors — synced from Figma design system (Page 5) */
--color-text-dark-blue: #231655;
/* UI colors — neutral 用途（譬如 mobile 漢堡 icon） */
--color-ocean-dark: #1E1E1E;
/* Font families — synced from Figma design system (Pages 7–10) */
--font-family-biorhyme: 'BioRhyme', serif;
--font-family-biorhyme-expanded: 'BioRhyme Expanded', serif;
--font-family-museomoderno: 'MuseoModerno', sans-serif;
--font-family-montserrat: 'Montserrat', sans-serif;
--font-family-cjk: 'Noto Sans TC', sans-serif;
/* 預設字體鏈：英文 (MuseoModerno) → 中文 (Noto Sans TC) → fallback */
--font-family-default: var(--font-family-museomoderno), var(--font-family-cjk), sans-serif;
/* Font weights — semantic alias for numeric values */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Typography role tokens — synced from Figma design system (Pages 7–10) */
/* H1 — display */
--font-h1-family: var(--font-family-default);
--font-h1-weight: var(--font-weight-bold);
--font-h1-size: 40px;
--font-h1-line-height: 72px;
--font-h1-letter-spacing: 0.05em;
/* H2 */
--font-h2-family: var(--font-family-default);
--font-h2-weight: var(--font-weight-semibold);
--font-h2-size: 32px;
--font-h2-line-height: normal;
--font-h2-letter-spacing: 0;
/* H3 */
--font-h3-family: var(--font-family-default);
--font-h3-weight: var(--font-weight-semibold);
--font-h3-size: 24px;
--font-h3-line-height: 36px;
--font-h3-letter-spacing: 0.05em;
/* H4 */
--font-h4-family: var(--font-family-default);
--font-h4-weight: var(--font-weight-semibold);
--font-h4-size: 18px;
--font-h4-line-height: 24px;
--font-h4-letter-spacing: 0.05em;
/* H5 */
--font-h5-family: var(--font-family-default);
--font-h5-weight: var(--font-weight-regular);
--font-h5-size: 14px;
--font-h5-line-height: 20px;
--font-h5-letter-spacing: 0.05em;
/* body1 */
--font-body1-family: var(--font-family-default);
--font-body1-weight: var(--font-weight-regular);
--font-body1-size: 18px;
--font-body1-line-height: 36px;
--font-body1-letter-spacing: 0.06em;
/* body2 — Montserrat 例外 */
--font-body2-family: var(--font-family-montserrat), var(--font-family-cjk), sans-serif;
--font-body2-weight: var(--font-weight-medium);
--font-body2-size: 14px;
--font-body2-line-height: 23px;
--font-body2-letter-spacing: 0.08em;
/* body2 連結字距例外 — post-article__content 清單連結（14px 字級下 0.8px 換算）*/
--font-body2-link-letter-spacing: 0.057em;
/* body3 */
--font-body3-family: var(--font-family-default);
--font-body3-weight: var(--font-weight-regular);
--font-body3-size: 16px;
--font-body3-line-height: 27.3px;
--font-body3-letter-spacing: 0.04em;
/* 明確無字距（給不套 role tracking 的標題等）*/
--letter-spacing-normal: normal;
/* 緊湊行高（無單位）— post-article__content 清單連結等密集排版用 */
--line-height-tight: 1.4;
/* Footer tokens — 桌機板 footer 專用排版 */
--color-white: #ffffff;
--font-footer-slogan-family: var(--font-family-default);
--font-footer-slogan-weight: var(--font-weight-bold);
--font-footer-slogan-size: 35px;
--font-footer-slogan-line-height: 50px;
--font-footer-section-family: var(--font-family-default);
--font-footer-section-weight: var(--font-weight-bold);
--font-footer-section-size: 16px;
--font-footer-section-line-height: normal;
--font-footer-link-family: var(--font-family-default);
--font-footer-link-weight: var(--font-weight-regular);
--font-footer-link-size: 16px;
--font-footer-link-line-height: 30px;
/* Mobile header offset — 12 gap + ~75 closed header height + 安全餘量；給 .site-main margin-top 用 */
--mobile-header-offset: 88px;
/* Marquee title bar 字級 — .articles__title-bar-word 專用 */
--font-marquee-size: 72px;
--font-marquee-mobile-size: 32px; /* Figma mobile node 608:6651：高 56 / font 32 / gap 16 */
/* 文章分類 Swiper Grid — 每列高度；wrapper 高度 = rows × 此值，兩處共用同一來源
桌機 wrapper = calc(7 * var(--front-category-row-h)) = 399px
平板 wrapper = calc(4 * var(--front-category-row-h)) = 228px */
--front-category-row-h: 57px;
/* Transition timing function tokens — 首顆成員，banner swiper 過場曲線
使用者指定實驗值，非 Figma 規格 */
--transition-timing-ease-out: ease-out;
/* Hero title tokens — single-topic banner 大標題專用（比 H1 更大的展示級字級） */
--font-hero-title-family: var(--font-family-default);
--font-hero-title-weight: var(--font-weight-bold);
--font-hero-title-size: 48px;
--font-hero-title-line-height: 64px;
--font-hero-title-letter-spacing: 0.05em;
/* Muted text color — single-topic credit 區塊等輔助文字用 */
--color-text-muted: #6B6B6B;
}
/* Responsive overrides — synced from Figma design system (Page 11) */
/* Breakpoints — Desktop ≥ 992 / Tablet < 992 (max-width: 991.98px) / Mobile < 768 (max-width: 767.98px) */
/* Cascade 順序：tablet 規則放在 mobile 之前，相同特異性時 mobile source order 較後勝出 */
@media (max-width: 767.98px) {
:root {
/* H2 mobile: size 縮小 + 從 normal 改具體 LH */
--font-h2-size: 26px;
--font-h2-line-height: 40px;
/* H3 mobile: size + LH 縮小 */
--font-h3-size: 18px;
--font-h3-line-height: 26px;
}
}
/* =============================================================================
Logo-specific tokens — Figma 桌機板 header 中 logo 字距特別寬，獨立 token
============================================================================= */
:root {
--font-logo-zh-family: var(--font-family-cjk);
--font-logo-zh-weight: var(--font-weight-semibold);
--font-logo-zh-size: 21.739px;
--font-logo-zh-line-height: 23.188px;
--font-logo-zh-letter-spacing: 0.35em;
--font-logo-en-family: var(--font-family-cjk);
--font-logo-en-weight: var(--font-weight-semibold);
--font-logo-en-size: 17.391px;
--font-logo-en-line-height: 17.391px;
--font-logo-en-letter-spacing: 0.04em;
}
/* =============================================================================
Global reset — box-sizing 全域 border-box（避免每個元件單獨宣告）
============================================================================= */
html {
scroll-behavior: smooth;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
background-color: var(--color-primary-light);
}
.site-main {
overflow-x: clip;
}
/* =============================================================================
Site header — Figma 桌機板（≥ 768px viewport）
============================================================================= */
.site-header {
border-top: 1px solid var(--color-primary-blue);
}
.site-header__inner {
max-width: 1440px;
margin: 0 auto;
padding-left: clamp(32px, calc(50vw - 590.5px), 129.5px);
display: flex;
align-items: flex-start;
min-height: 99px;
position: relative;
}
.site-header__brand {
display: flex;
align-items: center;
gap: 16.667px;
text-decoration: none;
color: var(--color-primary-blue);
align-self: flex-start;
margin-top: 18px;
}
.site-header__brand-logo {
width: 98.385px;
height: 47.496px;
flex-shrink: 0;
}
.site-header__brand-text {
display: flex;
flex-direction: column;
gap: 3.623px;
white-space: nowrap;
}
.site-header__brand-zh {
font-family: var(--font-logo-zh-family);
font-weight: var(--font-logo-zh-weight);
font-size: var(--font-logo-zh-size);
line-height: var(--font-logo-zh-line-height);
letter-spacing: var(--font-logo-zh-letter-spacing);
}
.site-header__brand-en {
font-family: var(--font-logo-en-family);
font-weight: var(--font-logo-en-weight);
font-size: var(--font-logo-en-size);
line-height: var(--font-logo-en-line-height);
letter-spacing: var(--font-logo-en-letter-spacing);
}
.site-nav__list {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.site-nav__list > li > a {
display: flex;
align-items: center;
height: var(--header-bar-height); /* 對齊 donate 按鈕底緣，避免 Safari 次像素捨入造成高度差 */
background: #fff;
border-right: 1px solid var(--color-primary-blue);
border-bottom: 1px solid var(--color-primary-blue);
border-left: 1px solid var(--color-primary-blue);
padding: 32px clamp(12px, calc(5.77vw - 45.23px), 24px);
color: var(--color-primary-blue);
font-family: var(--font-family-default);
font-weight: var(--font-weight-bold);
font-size: 16px;
line-height: 27.3px;
letter-spacing: 0.04em;
text-decoration: none;
white-space: nowrap;
transition: color 300ms ease-out, background-color 300ms ease-out;
}
.site-nav__list > li > a:hover {
background: var(--color-primary-light);
color: var(--color-secondary-purple);
}
.site-nav__list > li.current-menu-item > a {
background: var(--color-secondary-purple);
color: var(--color-white);
}
/* 影響力專題（topic CPT archive + single-topic 都 trigger）— 黃底 + 深藍字 */
.site-nav__list > li.menu-item-object-topic.current-menu-item > a {
background: var(--color-secondary-yellow);
color: var(--color-primary-blue);
}
/* 特約專欄（body 端 .page-columns 由 functions.php body_class filter 注入）— 綠底、文字色繼承 base */
.page-columns .site-nav__list > li.current-menu-item > a {
background: var(--color-secondary-green);
}
/* 父 li 作為子選單絕對定位錨點 */
.site-nav__list > li {
position: relative;
}
/* 子選單：預設隱藏、絕對定位於父 li 下方 */
.site-nav__list .sub-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
min-width: 100%;
width: max-content;
list-style: none;
margin: 0;
padding: 0;
background: var(--color-primary-blue);
z-index: 10;
}
/* hover / 鍵盤 focus-within 父項 → 展開子選單 */
.site-nav__list > li:hover > .sub-menu,
.site-nav__list > li:focus-within > .sub-menu {
display: block;
}
/* 子選單 anchor — 主 nav 反相（深底白字 Regular） */
.site-nav__list .sub-menu > li > a {
display: block;
padding: 8px 12px;
background: var(--color-primary-blue);
color: var(--color-primary-light);
font-family: var(--font-family-default);
font-weight: var(--font-weight-regular);
font-size: 16px;
line-height: 27.3px;
letter-spacing: 0.04em;
text-decoration: none;
white-space: nowrap;
transition: background-color 250ms ease-out, box-shadow 250ms ease-out;
}
/* 子選單 anchor hover / 鍵盤 focus-visible — 換淺藍底 + 3px 內陷深框 */
.site-nav__list .sub-menu > li > a:hover,
.site-nav__list .sub-menu > li > a:focus-visible {
background: var(--color-secondary-blue);
box-shadow: inset 0 0 0 3px var(--color-primary-blue);
}
/* 桌機預設隱藏漢堡（mobile @media 內 override 為 flex） */
.site-header__menu-toggle {
display: none;
}
.site-header__donate {
margin-left: auto;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 2px;
background: var(--color-primary-blue);
border-right: 1px solid var(--color-primary-blue);
border-bottom: 1px solid var(--color-primary-blue);
border-left: 1px solid var(--color-primary-blue);
border-bottom-left-radius: 10px;
height: var(--header-bar-height);
padding: 12px clamp(16px, calc(3.85vw - 22.15px), 24px) 24px;
color: var(--color-primary-light);
font-family: var(--font-family-default);
font-weight: var(--font-weight-bold);
font-size: 16px;
line-height: 27.3px;
letter-spacing: 0.04em;
text-decoration: none;
white-space: nowrap;
transition:
background-color 250ms ease-out,
color 250ms ease-out,
padding-top 250ms ease-out;
}
.site-header__donate-icon {
width: 18px;
height: 18px;
transition: width 250ms ease-out, height 250ms ease-out;
}
.site-header__donate:hover {
background-color: var(--color-secondary-green);
padding-top: 5px;
}
.site-header__donate:hover .site-header__donate-icon {
width: 54px;
height: 54px;
}
/* =============================================================================
Screen reader utility — WP 標準 a11y 隱藏 class
============================================================================= */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
/* =============================================================================
Front page banner — 桌機板 Swiper carousel（≥ 768px viewport）
============================================================================= */
/* Section 外框：上 64px / 下 80px 內距 */
.front-banner {
padding-top: 64px;
padding-bottom: 80px;
}
/* 內容寬限 1440、兩側 108px 對齊 footer；Grid 3 columns：swiper(938) gap(42) nav(220)
nav track 從 auto 改固定 220px（2×66 button + 2×20.319 gap + counter ≈ 220）— 避免
click next 時 auto track 重算與 swiper transform 動畫競爭、導致右向換頁瞬切 */
.front-banner__inner {
max-width: 1440px;
margin: 0 auto;
padding: 0 clamp(32px, calc(41.25vw - 486px), 108px);
position: relative;
display: grid;
grid-template-columns: minmax(0, 937px) 42px 220px;
justify-content: center;
grid-template-rows: auto;
align-items: end;
}
/* Swiper 容器：grid-column 1 對應 938px track。
必須補 explicit width — Swiper.js init 時 query container.offsetWidth、
光靠 grid track 在初測階段可能傳回 0 → Swiper 用 fallback 2^25 (33M) 把 slide
寬度撐爆、wrapper 物理延伸覆蓋整個 inner、攔下 nav click。explicit width 解決 */
.front-banner__swiper {
grid-column: 1;
width: 100%;
max-width: 937px;
min-width: 0;
overflow: hidden;
}
/* 覆蓋 Swiper 預設 ease → ease-out，使用者指定實驗值 */
.front-banner__swiper .swiper-wrapper {
transition-timing-function: var(--transition-timing-ease-out);
}
/* 每張 slide：swiper 已限縮至 938px，slide 與 card 同寬，不需置中 */
.front-banner__slide {
display: flex;
}
/* Banner card 938×542、細藍框、圓角；背景色由 modifier 提供 */
.front-banner__card {
width: 100%;
height: 542px;
border: 2.54px solid var(--color-primary-blue);
border-radius: 16.933px;
overflow: clip;
position: relative;
text-decoration: none;
display: block;
flex-shrink: 0;
}
/* Card 背景色 modifier — 對應 slide 類別 column / topic / article */
.front-banner__card.column { background: var(--color-secondary-green); }
.front-banner__card.topic { background: var(--color-secondary-yellow); }
.front-banner__card.article { background: var(--color-secondary-purple); }
/* 左半圖片：absolute、覆蓋左側 493px */
.front-banner__media {
position: absolute;
left: 0;
top: 0;
width: calc((100% - 58px) * 493 / 880);
height: 100%;
border-radius: 16.933px;
overflow: hidden;
transition: width 300ms ease-out;
}
/* Hover 半透明黑色遮罩 — opacity 0→1 由 @media (hover: hover) hover 規則切換
inset: 0 蓋滿 media；border-radius inherit 同步左右兩側圓角；pointer-events: none 不擋 card a 連結 click */
.front-banner__media::after {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.2);
opacity: 0;
border-radius: inherit;
pointer-events: none;
transition: opacity 300ms ease-out;
}
.front-banner__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* 右側內容組：absolute、左 520.46px、頂 53.46px、寬 387px */
.front-banner__content {
position: absolute;
right: 30.54px;
top: 53.46px;
width: calc((100% - 58px) * 387 / 880);
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* Badges 條：上圓角、無底 border、bg primary-light；flex 水平置中（Figma justify-center） */
.front-banner__badges {
background: var(--color-primary-light);
border: 0.847px solid var(--color-primary-blue);
border-bottom: 0;
border-top-left-radius: 8.466px;
border-top-right-radius: 8.466px;
padding: 12px 20px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-h4-family);
font-weight: var(--font-h4-weight);
font-size: var(--font-h4-size);
line-height: var(--font-h4-line-height);
letter-spacing: var(--font-h4-letter-spacing);
color: var(--color-primary-blue);
}
/* Title + Description 區：四邊 border、gap 8px；全寬覆蓋父層 align-items: flex-start */
.front-banner__text {
background: var(--color-primary-light);
border: 0.847px solid var(--color-primary-blue);
padding: 20px;
display: flex;
flex-direction: column;
gap: 8px;
color: var(--color-primary-blue);
align-self: stretch;
}
/* Title — H2 token（h3 markup、H2 視覺） */
.front-banner__title {
font-family: var(--font-h2-family);
font-weight: var(--font-h2-weight);
font-size: var(--font-h2-size);
line-height: var(--font-h2-line-height);
letter-spacing: var(--font-h2-letter-spacing);
margin: 0;
color: var(--color-primary-blue);
}
/* Description — body3 token；2 行 line-clamp ellipsis */
.front-banner__desc {
font-family: var(--font-body3-family);
font-weight: var(--font-body3-weight);
font-size: var(--font-body3-size);
line-height: var(--font-body3-line-height);
letter-spacing: var(--font-body3-letter-spacing);
margin: 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
/* Date 條：純矩形（Figma 無 border-radius）、無頂 border；flex 水平置中（Figma justify-center） */
.front-banner__date {
background: var(--color-primary-light);
border: 0.847px solid var(--color-primary-blue);
border-top: 0;
padding: 12px 20px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary-blue);
font-family: var(--font-family-museomoderno);
font-weight: var(--font-weight-regular);
font-size: 16px;
line-height: 20.319px;
letter-spacing: 0.05em;
}
/* Sticker 容器：170×170 absolute 在 card 右下、為內層 img 動畫提供定位 origin */
.front-banner__sticker {
position: absolute;
right: 28px;
bottom: 12px;
width: 170px;
height: 170px;
pointer-events: none;
}
/* Sticker img：兩變體間 2500ms linear alternate infinite 擺動
from = Figma Default（右上錨點 + rotate 5deg）
to = Figma Variant2（左下錨點 + rotate -6deg）
alternate 讓 sticker 持續來回擺動、無突跳 */
.front-banner__sticker-img {
position: absolute;
left: 0;
top: 0;
width: 116.616px;
height: 123.888px;
will-change: transform;
animation: front-banner-sticker-wobble 2500ms linear 1s infinite alternate backwards;
}
@keyframes front-banner-sticker-wobble {
from {
transform: translate(58.194px, 0) rotate(5deg);
}
to {
transform: translate(-6.87px, 51.425px) rotate(-6deg);
}
}
/* Card hover 動態（300ms ease-out）— Figma BannerHover Variant2：
media 寬 493→720（同 fluid 公式但分子改 720）、圖片上加半透明黑色遮罩、date 文字改左上對齊。
雙重把關 (hover: hover) and (min-width: 768): 觸控裝置不觸發、mobile viewport（< 768）也排除，避免 DevTools 模擬或邊緣裝置誤觸發 */
@media (hover: hover) and (min-width: 768px) {
.front-banner__card:hover .front-banner__media {
width: calc((100% - 58px) * 720 / 880);
}
.front-banner__card:hover .front-banner__media::after {
opacity: 1;
}
.front-banner__card:hover .front-banner__date {
align-items: flex-start;
justify-content: flex-start;
}
}
/* Nav 列：grid-column 3（對應 42px gap 後的 auto track）
align-items: end 由 .front-banner__inner 的 align-items: end 控制，
nav item 自動對齊 grid 行底部（= swiper / card 底部） */
.front-banner__nav {
grid-column: 3;
display: flex;
align-items: center;
gap: 20.319px;
}
/* 箭頭按鈕：66×66、無背景邊框 */
.front-banner__prev,
.front-banner__next {
width: 66.038px;
height: 66.038px;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
flex-shrink: 0;
}
.front-banner__prev img,
.front-banner__next img {
width: 100%;
height: 100%;
display: block;
}
/* left svg 本身已是向左箭頭；right svg 向右。
plan 中標注 left svg = rotate(180deg)，但本次 assets 各自獨立，直接用各自的 */
/* 計數文字（Swiper fraction pagination）：override swiper 預設 absolute/width
selector 升為 .front-banner__nav .front-banner__counter（specificity 0,2,0）以
確保蓋過 swiper-bundle.css 的 .swiper-pagination（0,1,0）。
Figma counter：BioRhyme Expanded ExtraBold 18px、leading normal、color primary-blue */
.front-banner__nav .front-banner__counter {
position: static; /* swiper 預設 absolute → 抵消 */
bottom: auto; /* swiper 預設 bottom: 8px → 抵消 */
left: auto; /* swiper 預設 left: 0 → 抵消 */
z-index: auto; /* swiper 預設 z-index: 10 → 抵消 */
width: auto; /* swiper 預設 width: 100% → 抵消 */
transform: none; /* swiper 預設 translate3d → 抵消 */
pointer-events: none; /* 顯示用、不攔 click（避免使用者點到計數文字無反應） */
font-family: var(--font-family-biorhyme-expanded);
font-weight: 800; /* ExtraBold — BioRhyme Expanded 只載入 wght@800 */
font-size: 18px;
line-height: normal;
color: var(--color-primary-blue);
white-space: nowrap;
}
/* =============================================================================
Front articles section — 桌機板（≥ 1200px viewport）
第 2 個 section：最新文章 4 cards + 文章分類 box + 熱門文章 swiper
============================================================================= */
/* 整體 section — fullbleed wrapper */
/* ---- Title bar：fullbleed 紫底裝飾、scroll-driven 橫向位移 ---- */
.articles__title-bar {
display: flex;
align-items: center;
background: var(--color-secondary-purple);
border-top: 1px solid var(--color-primary-blue);
border-bottom: 1px solid var(--color-primary-blue);
height: 88px;
overflow: clip;
width: 100%;
}
.articles__title-bar-track {
display: block;
white-space: nowrap;
will-change: transform;
padding-left: 32px;
}
.articles__title-bar-track::before {
content: "Article Article Article Article Article Article Article Article Article Article Article Article Article Article Article Article";
color: var(--color-secondary-purple);
font-family: var(--font-family-museomoderno);
font-size: var(--font-marquee-size);
font-weight: var(--font-weight-regular);
line-height: 1;
paint-order: stroke fill;
-webkit-text-stroke: 4px var(--color-primary-light);
text-stroke: 4px var(--color-primary-light);
word-spacing: 10px;
}
/* Inner：max-width 置中、section 間距；水平 padding 仿 .front-banner__inner clamp 漸進（32→108） */
.front-articles__inner {
max-width: 1440px;
margin: 0 auto;
padding: 72px clamp(32px, calc(41.25vw - 486px), 108px) 120px;
}
/* ---- Top row：title + readmore ---- */
.front-articles__top {
display: flex;
align-items: center;
gap: 56px;
margin-bottom: 32px;
}
/* Title 組：zh + en 並排、基線對齊 */
.front-section__title,
.page__title {
display: flex;
gap: 12px;
align-items: flex-end;
flex-wrap: wrap;
}
.page__title-zh,
.page__title-en {
min-width: 0;
overflow-wrap: break-word;
}
.front-section__title-zh,
.page__title-zh {
font-family: var(--font-h2-family);
font-weight: var(--font-h2-weight);
font-size: var(--font-h2-size);
line-height: var(--font-h2-line-height);
letter-spacing: var(--font-h2-letter-spacing);
color: var(--color-primary-blue);
}
.front-section__title-en,
.page__title-en {
font-family: var(--font-family-museomoderno);
font-weight: var(--font-weight-regular);
font-size: 24px;
line-height: normal;
letter-spacing: 0;
color: var(--color-primary-blue);
}
.single-topic .page__title {
justify-content: center;
}
/* Readmore 按鈕：208×46 深藍底、左側 1px secondary-blue 邊線 */
.front-readmore {
display: inline-flex;
align-items: center;
width: 208px;
height: 46px;
padding-right: 24px;
background: var(--color-primary-blue);
border-radius: 10px;
overflow: hidden;
text-decoration: none;
position: relative;
flex-shrink: 0;
}
/* 左側 secondary-blue 1px 邊線（絕對定位覆蓋）；hover 時 scaleX 擴展滿覆按鈕 */
.front-readmore-border {
position: absolute;
left: 0;
top: 0;
width: 1px;
height: 100%;
flex-shrink: 0;
transform: scaleX(1);
transform-origin: left center;
transition: transform 300ms ease-out;
}
.front-articles .front-readmore-border {
background: var(--color-secondary-blue);
}
.front-topics .front-readmore-border {
background: var(--color-secondary-yellow);
}
.front-columns .front-readmore-border {
background: var(--color-secondary-blue);
}
/* eye + 文字 內層；position relative 提升 stacking 層級、避免被 border scaleX 蓋過 */
.front-readmore-inner {
display: flex;
align-items: center;
gap: 8px;
padding: 11px 0 11px 15px;
flex: 1;
position: relative;
}
.front-readmore-icon-eye {
display: inline-flex;
align-items: center;
width: 24px;
height: 24px;
flex-shrink: 0;
}
.front-readmore-icon-eye svg {
width: 24px;
height: 24px;
display: block;
}
/* 瞳孔群組共用 base：transition + 預設 translateX(0)；transform-origin 由 modifier 提供 */
.front-readmore-eye-pupils {
transform: translateX(0);
transition: transform 300ms ease-out;
}
/* 右眼瞳孔：transform-origin 對齊右瞳孔幾何中心 (16, 12) — rotate 不偏移位置 */
.front-readmore-eye-pupils--right {
transform-origin: 16px 12px;
}
/* 左眼瞳孔：transform-origin 對齊左瞳孔幾何中心 (5, 12) */
.front-readmore-eye-pupils--left {
transform-origin: 5px 12px;
}
.front-readmore-label {
font-family: var(--font-family-default);
font-weight: var(--font-weight-regular);
font-size: 18px;
line-height: 24px;
letter-spacing: 0.05em;
color: var(--color-primary-light);
white-space: nowrap;
}
/* Arrow icon 區：46×46、右對齊、overflow clip；position relative 同 inner 提升 stacking */
.front-readmore-icon-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
flex-shrink: 0;
overflow: hidden;
position: relative;
/* 箭頭原始方向為向上，旋轉 90deg 使其朝右 */
transform: rotate(90deg);
}
.front-readmore-icon-arrow svg {
width: 17px;
height: 38px;
display: block;
}
/* Readmore hover 動態：300ms ease-out
1. border 從 1px scaleX(208) 滿覆按鈕背景
2. 瞳孔 group translateX 朝右
觸控裝置不觸發 — 避免 tap-then-leave 殘留 hover 狀態 */
@media (hover: hover) {
.front-readmore:hover .front-readmore-border {
transform: scaleX(208);
}
.front-readmore:hover .front-readmore-eye-pupils {
transform: translateX(4px) rotate(90deg);
}
/* Footer 訂閱按鈕：::before 從 scaleX(0) → scaleX(1)、淺藍由左向右擴展滿覆 padding-box */
.site-footer__newsletter-submit:hover::before {
transform: scaleX(1);
}
}
/* ---- Main grid：cards 2 col + sidebar 1 col ---- */
.front-articles__grid {
display: grid;
grid-template-columns: 1fr 392px;
gap: 24px;
align-items: start;
}
/* Cards 區：2×2 grid */
.front-articles__cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 52px 20px;
}
/* 單張 card — flex column，無底線連結 */
.article-card {
display: flex;
flex-direction: column;
min-width: 0;
text-decoration: none;
color: var(--color-primary-blue);
position: relative;
}
/* Media 區：固定 aspect-ratio、padding-bottom 49 對應 body 重疊區、紫底於 hover 露出 */
.article-card-media {
aspect-ratio: 392 / 284;
background: var(--color-secondary-purple);
border-radius: 20px 20px 0 0;
position: relative;
overflow: clip;
padding-bottom: 49px;
}
/* 圖片：絕對定位、source-aspect 472/379 layout、cover 裁切、hover 時 transform 動效 */
.article-card-media img {
position: absolute;
top: 0;
width: 100%;
height: 100%;
aspect-ratio: 472 / 379;
object-fit: cover;
display: block;
transform: scale(1) rotate(0deg);
transition: transform 0.5s ease;
transform-origin: center;
}
/* Hover：source-aspect 等比縮 + 旋轉 10°、露出 media 容器紫底 */
@media (hover: hover) {
.article-card:hover .article-card-media img {
transform: scale(0.9) rotate(10deg);
}
}
/* Card body — 文字區塊群組，疊在圖片上方 */
.article-card-body {
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
z-index: 1;
margin-top: -49px;
flex-shrink: 0;
}
/* Category 條：上圓角、無底 border */
.article-card-category {
background: var(--color-primary-light);
border-top: 1px solid var(--color-primary-blue);
border-left: 1px solid var(--color-primary-blue);
border-right: 1px solid var(--color-primary-blue);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding: 12px 24px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-h4-family);
font-weight: var(--font-h4-weight);
font-size: var(--font-h4-size);
line-height: var(--font-h4-line-height);
letter-spacing: var(--font-h4-letter-spacing);
color: var(--color-primary-blue);
white-space: nowrap;
}
/* Title 條：四邊 border */
.article-card-title {
background: var(--color-primary-light);
border: 1px solid var(--color-primary-blue);
padding: 24px;
font-family: var(--font-body2-family);
font-weight: var(--font-weight-semibold);
font-size: 18px;
line-height: 24px;
letter-spacing: 0.05em;
color: var(--color-primary-blue);
align-self: stretch;
}
/* Date 條：三邊 border（無頂）、置中 */
.article-card-date {
background: var(--color-primary-light);
border-bottom: 1px solid var(--color-primary-blue);
border-left: 1px solid var(--color-primary-blue);
border-right: 1px solid var(--color-primary-blue);
padding: 12px 24px;
text-align: center;
font-family: var(--font-family-museomoderno);
font-weight: var(--font-weight-regular);
font-size: 18px;
line-height: 24px;
letter-spacing: 0.05em;
color: var(--color-primary-blue);
}
/* ---- Sidebar ---- */
.front-articles__sidebar {
display: flex;
flex-direction: column;
gap: 48px;
}
/* 文章分類 box：392×486，白底、border、圓角；padding 與 popular-box 一致
不設 overflow: hidden — 讓 title::before 遮罩可繪到 box border-top；swiper 自帶 overflow 不需 box 再裁 */
.front-articles__category-box {
width: 392px;
min-height: 290px;
background: var(--color-white);
border: 1px solid var(--color-primary-blue);
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 24px;
}
/* 文章分類 title 條：底部掛出，三邊 border（無頂） */
.front-articles__category-box-title {
background: var(--color-primary-light);
border-bottom: 1px solid var(--color-primary-blue);
border-left: 1px solid var(--color-primary-blue);
border-right: 1px solid var(--color-primary-blue);
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
padding: 0 18px 12px;
font-family: var(--font-h3-family);
font-weight: var(--font-h3-weight);
font-size: var(--font-h3-size);
line-height: var(--font-h3-line-height);
letter-spacing: var(--font-h3-letter-spacing);
color: var(--color-primary-blue);
text-align: center;
white-space: nowrap;
flex-shrink: 0;
grid-column: 2;
justify-self: center;
position: relative;
}
/* 遮掉 box border-top 在 title 寬度區段、形成 U 字形視覺 */
.front-articles__category-box-title::before {
content: '';
position: absolute;
top: -2px;
left: 0;
right: 0;
height: 4px;
background: var(--color-primary-light);
}
/* head：grid 1fr auto 1fr — 子元素顯式 grid-column 鎖定、title 永遠在中央軌道
即使 prev/next 被 swiper 隱藏（display: none）也不影響 title 位置 */
.front-articles__category-head {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: start;
width: 100%;
}
.front-articles__category-prev,
.articles__category-prev { grid-column: 1; justify-self: start; }
.front-articles__category-next,
.articles__category-next { grid-column: 3; justify-self: end; }
/* swiper container：接管 category-list 的 padding + position，數學與現狀完全一致
selector 加 .swiper 提升特異性（0,2,0）避免被 swiper-bundle.css 的 .swiper 規則覆寫 */
.swiper.front-articles__category-swiper {
width: 100%;
overflow: hidden;
padding: 12px 16px 24px;
box-sizing: border-box;
position: relative;
}
.swiper.front-articles__category-swiper:has(> .swiper-wrapper > .swiper-slide:nth-child(-n+2):last-child)::before {
display: none;
}
/* 中央分隔線：從 category-list::before 搬來；left 50% 在 padding-box 中心，與 spaceBetween 32 中心對齊 */
.front-articles__category-swiper::before {
content: '';
position: absolute;
top: 12px;
bottom: 24px;
left: 50%;
width: 1px;
background: var(--color-primary-blue);
pointer-events: none;
z-index: 1;
}
/* 分類項目 — 同時是 .swiper-slide；Swiper Grid 設 inline width/transform、不與此規則衝突 */
.articles__category-item {
display: flex;
align-items: center;
gap: 8px;
padding: 0;
font-family: var(--font-h4-family);
font-weight: var(--font-h4-weight);
font-size: var(--font-h4-size);
line-height: var(--font-h4-line-height);
letter-spacing: var(--font-h4-letter-spacing);
color: var(--color-primary-blue);
}
/* Tablet（768~991.98）：每 slot 57px、box 高度依內容累加；覆寫 Swiper Grid 預設 margin-top
容器含 padding 計算 = rows(4) × row-h(57px) + padding-top(12px) + padding-bottom(24px) = 264px
box-sizing: border-box → 內容區恰 228px（= 4 × 57）；wrapper 100% 填滿內容區
覆蓋 Swiper 寫入的 inline height（!important 確保 CSS 優先） */
@media (min-width: 768px) and (max-width: 991.98px) {
/* 容器高度：rows × row-h + padding-top + padding-bottom */
.swiper.front-articles__category-swiper {
height: calc(var(--cat-rows-t, 4) * var(--front-category-row-h) + 12px + 24px) !important;
}
.swiper.front-articles__category-swiper .swiper-slide {
margin-top: 0 !important;
height: var(--front-category-row-h) !important;
display: flex;
align-items: center;
}
/* wrapper 明確像素高度（= 4 × 57px = 228px）；避免 flex 子容器百分比解析失準 */
.swiper.front-articles__category-swiper .swiper-wrapper {
height: calc(var(--cat-rows-t, 4) * var(--front-category-row-h)) !important;
}
}
/* Desktop（≥ 992）：每 slot 57px、box 高度依內容累加；覆寫 Swiper Grid 預設 margin-top
容器含 padding 計算 = rows(7) × row-h(57px) + padding-top(12px) + padding-bottom(24px) = 435px
box-sizing: border-box → 內容區恰 399px（= 7 × 57）；wrapper 明確像素避免百分比解析失準
覆蓋 Swiper 寫入的 inline height（!important 確保 CSS 優先） */
@media (min-width: 992px) {
/* 容器高度：rows × row-h + padding-top + padding-bottom */
.swiper.front-articles__category-swiper {
height: calc(var(--cat-rows-d, 7) * var(--front-category-row-h) + 12px + 24px) !important;
}
.swiper.front-articles__category-swiper .swiper-slide {
margin-top: 0 !important;
height: var(--front-category-row-h) !important;
display: flex;
align-items: center;
}
/* wrapper 明確像素高度（= 7 × 57px = 399px）；避免 flex 子容器百分比解析失準 */
.swiper.front-articles__category-swiper .swiper-wrapper {
height: calc(var(--cat-rows-d, 7) * var(--front-category-row-h)) !important;
}
}
/* 分類連結：繼承 item color、移除 underline、hover 變亮字色（secondary-purple）*/
.articles__category-link {
color: inherit;
text-decoration: none;
transition: color 300ms ease-out;
}
@media (hover: hover) {
.articles__category-item:hover .articles__category-link {
color: var(--color-secondary-purple);
}
}
.articles__category-item--current .articles__category-link {
color: var(--color-secondary-purple);
font-weight: var(--font-weight-bold);
}
/* # hash 圓圈徽章 */
.articles__category-hash {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
background: var(--color-secondary-purple);
border: 1px solid var(--color-primary-blue);
border-radius: 50%;
color: var(--color-primary-light);
font-family: var(--font-family-museomoderno);
font-weight: var(--font-weight-semibold);
font-size: 18px;
line-height: 1;
flex-shrink: 0;
}
/* 熱門文章 box：白底、border、圓角 */
.front-articles__popular-box {
width: 392px;
background: var(--color-white);
border: 1px solid var(--color-primary-blue);
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 20px 24px;
}
/* head 列：prev title next */
.front-articles__popular-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
width: 100%;
}
/* Prev / Next 按鈕：61×61（popular + category 共用） */
.front-articles__popular-prev,
.front-articles__popular-next,
.front-articles__category-prev,
.articles__category-prev,
.front-articles__category-next,
.articles__category-next {
width: 61px;
height: 61px;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
color: var(--color-primary-blue);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: clip;
}
/* SVG 內部尺寸 */
.front-articles__popular-prev svg,
.front-articles__popular-next svg,
.front-articles__category-prev svg,
.articles__category-prev svg,
.front-articles__category-next svg,
.articles__category-next svg {
width: 22px;
height: 50px;
display: block;
}
/* Prev = 向左（arrow 原始向上，旋轉 -90deg） */
.front-articles__popular-prev svg,
.front-articles__category-prev svg,
.articles__category-prev svg {
transform: rotate(-90deg);
}
/* Next = 向右（旋轉 90deg） */
.front-articles__popular-next svg,
.front-articles__category-next svg,
.articles__category-next svg {
transform: rotate(90deg);
}
/* 熱門文章 title 條 */
.front-articles__popular-box-title {
background: var(--color-primary-light);
border-bottom: 1px solid var(--color-primary-blue);
border-left: 1px solid var(--color-primary-blue);
border-right: 1px solid var(--color-primary-blue);
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
padding: 0 18px 12px;
font-family: var(--font-h3-family);
font-weight: var(--font-h3-weight);
font-size: var(--font-h3-size);
line-height: var(--font-h3-line-height);
letter-spacing: var(--font-h3-letter-spacing);
color: var(--color-primary-blue);
text-align: center;
white-space: nowrap;
position: relative;
}
/* 遮掉 popular-box border-top 在 title 寬度區段、形成 U 字形視覺 */
.front-articles__popular-box-title::before {
content: '';
position: absolute;
top: -2px;
left: 0;
right: 0;
height: 4px;
background: var(--color-primary-light);
}
/* Swiper 容器：352×196，clip overflow */
.front-articles__popular-swiper {
width: 352px;
height: 196px;
overflow: clip;
}
/* 單張 slide */
.front-articles__popular-slide.swiper-slide {
display: flex;
flex-direction: row;
gap: 16px;
padding: 24px 0;
width: 352px;
}
/* Meta 區（左側，flex 1） */
.front-articles__popular-meta {
flex: 1 0 0;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 148px;
}
/* 日期 + 標題 上方群組 */
.front-articles__popular-top {
display: flex;
flex-direction: column;
gap: 4px;
}
/* Date — BioRhyme Bold（原版、非 Expanded） */
.front-articles__popular-date {
font-family: var(--font-family-biorhyme);
font-weight: var(--font-weight-bold);
font-size: 16px;
line-height: 24px;
letter-spacing: 0.05em;
color: var(--color-primary-blue);
}
/* Title */
.front-articles__popular-title {
font-family: var(--font-h4-family);
font-weight: var(--font-h4-weight);
font-size: var(--font-h4-size);
line-height: var(--font-h4-line-height);
letter-spacing: var(--font-h4-letter-spacing);
color: var(--color-primary-blue);
text-decoration: none;
transition: color 300ms ease-out;
}
/* Rank badge：border、圓角 100px */
.front-articles__popular-rank {
align-self: flex-start;
border: 1px solid var(--color-primary-blue);
border-radius: 100px;
padding: 2px 12px;
font-family: var(--font-family-museomoderno);
font-weight: var(--font-weight-semibold);
font-size: 18px;
line-height: 24px;
letter-spacing: 0.05em;
color: var(--color-primary-blue);
white-space: nowrap;
}
/* 圖片：148×148 圓形 */
.front-articles__popular-image {
width: 148px;
height: 148px;
border-radius: 50%;
overflow: clip;
flex-shrink: 0;
position: relative;
}
.front-articles__popular-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* hover 內框線：absolute 圓形 border、opacity 控制顯示、不擠壓 image */
.front-articles__popular-image::after {
content: '';
position: absolute;
inset: 0;
border: 10px solid var(--color-secondary-purple);
border-radius: 50%;
pointer-events: none;
opacity: 0;
transition: opacity 300ms ease-out;
}
/* popular-swiper hover — name 變紫 + image 內框線淡入；觸控不觸發 */
@media (hover: hover) {
.front-articles__popular-swiper:hover .front-articles__popular-title {
color: var(--color-secondary-purple);
}
.front-articles__popular-swiper:hover .front-articles__popular-image::after {
opacity: 1;
}
}
/* =============================================================================
Front page — Topics section（最新專題 / Latest Topics）
============================================================================= */
.front-topics__inner {
max-width: 1440px;
margin: 0 auto;
padding: 0 clamp(32px, calc(41.25vw - 486px), 108px) 120px;
}
@media (max-width: 767.98px) {
.front-topics {
padding-bottom: 72px;
}
.front-topics__inner {
padding: 0 0 50px;
border: 2px solid var(--color-primary-blue);
border-radius: 20px;
overflow: clip;
background-color: var(--color-primary-light);
}
}
.front-topics__card {
border: 1px solid var(--color-primary-blue);
border-radius: 20px;
overflow: clip;
padding: 0 56px 32px;
display: flex;
flex-direction: column;
gap: 40px;
margin-bottom: 84px;
}
.topics__title-bar {
position: relative;
background-color: var(--color-secondary-yellow);
height: 88px;
border-bottom: 1px solid var(--color-primary-blue);
overflow: clip;
/* 反向 escape card padding 達成全寬 bleed，56*2 padding + 1*2 border = 114px */
width: calc(100% + 114px);
margin: 0 -57px;
display: flex;
align-items: center;
}
.topics__title-bar-track {
display: block;
white-space: nowrap;
will-change: transform;
padding-left: 32px;
}
.topics__title-bar-track::before {
content: "Topic Topic Topic Topic Topic Topic Topic Topic Topic Topic Topic Topic Topic Topic Topic Topic";
font-family: var(--font-family-museomoderno);
font-size: var(--font-marquee-size);
font-weight: var(--font-weight-regular);
color: var(--color-secondary-yellow);
-webkit-text-stroke: 4px var(--color-primary-light);
paint-order: stroke fill;
line-height: 1;
word-spacing: 10px;
}
.front-topics__top {
display: flex;
align-items: flex-end;
gap: 56px;
}
.front-topics__readmore-bottom {
display: none;
}
/* 最新專題 swiper — 桌機 2 visible（CSS slide width）、mobile 1 visible + bullets */
.front-topics__grid {
width: 100%;
--swiper-pagination-color: var(--color-primary-blue);
--swiper-pagination-bullet-inactive-color: var(--color-primary-blue);
--swiper-pagination-bullet-inactive-opacity: 0.3;
}
.front-topics__grid .swiper-slide {
width: calc((100% - 32px) / 2);
height: auto;
min-width: 0;
}
@media (max-width: 767.98px) {
.front-topics__grid .swiper-slide {
width: 100%;
}
.front-topics__grid .swiper-pagination {
position: relative;
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
}
.front-topics__grid .swiper-pagination-bullet {
width: 16px;
height: 16px;
margin: 0;
opacity: 1;
background-color: var(--color-neutral-grey);
}
.front-topics__grid .swiper-pagination-bullet-active {
background-color: var(--color-secondary-yellow);
}
.front-topics__grid .topic-card-media img,
.front-topics__grid .topic-card-media::after {
-webkit-mask-image: url('assets/img/topic-card-mask-mobile.svg');
mask-image: url('assets/img/topic-card-mask-mobile.svg');
}
/* 改動 1：Title-bar mobile 尺寸 */
.topics__title-bar {
height: 56px;
}
.topics__title-bar-track::before {
font-size: var(--font-marquee-mobile-size);
word-spacing: 6px;
}
/* 改動 1：Section header column + 置中 + 隱藏 header 內 readmore */
.front-topics__top {
flex-direction: column;
align-items: center;
gap: 0;
}
.front-topics__top .front-readmore {
display: none;
}
.front-topics__top .front-section__title {
flex-direction: column;
align-items: center;
text-align: center;
}
/* 改動 2：readmore-bottom 手機版顯示 */
.front-topics__readmore-bottom {
display: flex;
justify-content: center;
margin-top: 32px;
}
}
@media (min-width: 768px) {
.front-topics__grid .swiper-pagination {
display: none;
}
}
.topic-card {
position: relative;
display: block;
aspect-ratio: 540 / 368;
border-radius: 20px;
overflow: hidden;
text-decoration: none;
padding: 36px 34px;
}
.topic-card-media,
.topic-card-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.topic-card-media img {
object-fit: cover;
-webkit-mask-image: url('assets/img/topic-card-mask.svg');
mask-image: url('assets/img/topic-card-mask.svg');
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.topic-card-media::after {
content: "";
position: absolute;
inset: 0;
background-color: var(--color-black);
opacity: 0;
transition: opacity 300ms ease-out;
pointer-events: none;
-webkit-mask-image: url('assets/img/topic-card-mask.svg');
mask-image: url('assets/img/topic-card-mask.svg');
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
@media (hover: hover) {
.topic-card:hover .topic-card-media::after {
opacity: 0.2;
}
}
.topic-card-overlay {
position: absolute;
bottom: 37px;
left: 50%;
transform: translateX(-50%);
width: calc(100% - 34px * 2);
display: flex;
flex-direction: column;
align-items: flex-start;
}
.topic-card-tab {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
background-color: var(--color-secondary-yellow);
border-top: 1px solid var(--color-primary-blue);
border-left: 1px solid var(--color-primary-blue);
border-right: 1px solid var(--color-primary-blue);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
font-family: var(--font-h4-family);
font-size: var(--font-h4-size);
font-weight: var(--font-h4-weight);
line-height: var(--font-h4-line-height);
letter-spacing: var(--font-h4-letter-spacing);
color: var(--color-primary-blue);
}
.topic-card-title {
display: flex;
align-items: center;
width: 100%;
padding: 24px;
background-color: var(--color-secondary-yellow);
border: 1px solid var(--color-primary-blue);
font-family: var(--font-h4-family);
font-size: var(--font-h4-size);
font-weight: var(--font-h4-weight);
line-height: var(--font-h4-line-height);
letter-spacing: var(--font-h4-letter-spacing);
color: var(--color-primary-blue);
box-sizing: border-box;
}
/* =============================================================================
Front page — Topic-article cards（.front-topics__card 下方 3 張並排）
============================================================================= */
.front-topics__articles {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px;
}
.topic-article {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
text-decoration: none;
color: inherit;
}
.topic-article-topic {
position: relative;
width: 100%;
background-color: var(--color-secondary-yellow);
border: 1px solid var(--color-primary-blue);
border-radius: 10px 10px 0 0;
padding: 12px 12px 12px 24px;
box-sizing: border-box;
font-family: var(--font-h4-family);
font-size: var(--font-h4-size);
font-weight: var(--font-h4-weight);
line-height: var(--font-h4-line-height);
letter-spacing: var(--font-h4-letter-spacing);
color: var(--color-primary-blue);
}
.topic-article-media {
aspect-ratio: 344 / 275;
position: relative;
overflow: clip;
padding-bottom: 49px;
background: var(--color-primary-blue);
}
.topic-article-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform-origin: center;
transition: transform 300ms ease-out;
}
.topic-article-meta {
position: relative;
z-index: 1;
flex-shrink: 0;
display: flex;
flex-direction: column;
margin-top: -49px;
}
.topic-article-category {
background-color: var(--color-primary-light);
border-top: 1px solid var(--color-primary-blue);
border-left: 1px solid var(--color-primary-blue);
border-right: 1px solid var(--color-primary-blue);
border-radius: 10px 10px 0 0;
padding: 12px 24px;
font-family: var(--font-h4-family);
font-size: var(--font-h4-size);
font-weight: var(--font-h4-weight);
line-height: var(--font-h4-line-height);
letter-spacing: var(--font-h4-letter-spacing);
color: var(--color-primary-blue);
box-sizing: border-box;
width: fit-content;
}
.topic-article-title {
background-color: var(--color-primary-light);
border: 1px solid var(--color-primary-blue);
padding: 24px;
font-family: var(--font-body2-family);
font-size: var(--font-h4-size);
font-weight: var(--font-h4-weight);
line-height: var(--font-h4-line-height);
letter-spacing: var(--font-h4-letter-spacing);
color: var(--color-primary-blue);
box-sizing: border-box;
}
.topic-article-date {
background-color: var(--color-primary-light);
border-bottom: 1px solid var(--color-primary-blue);
border-left: 1px solid var(--color-primary-blue);
border-right: 1px solid var(--color-primary-blue);
padding: 12px 24px;
font-family: var(--font-h4-family);
font-size: var(--font-h4-size);
font-weight: var(--font-weight-regular);
line-height: var(--font-h4-line-height);
letter-spacing: var(--font-h4-letter-spacing);
color: var(--color-primary-blue);
box-sizing: border-box;
width: fit-content;
}
@media (hover: hover) and (min-width: 768px) {
.topic-article:hover .topic-article-media img {
transform: rotate(10deg);
}
}
@media (max-width: 1199.98px) {
.topic-article-topic {
padding: clamp(4px, calc((100vw - 768px) / 432 * 8 + 4px), 12px)
clamp(6px, calc((100vw - 768px) / 432 * 6 + 6px), 12px)
clamp(4px, calc((100vw - 768px) / 432 * 8 + 4px), 12px)
clamp(6px, calc((100vw - 768px) / 432 * 18 + 6px), 24px);
font-size: clamp(14px, calc((100vw - 768px) / 432 * 4 + 14px), 18px);
line-height: clamp(23px, calc((100vw - 768px) / 432 * 1 + 23px), 24px);
}
.topic-card-title {
padding: clamp(12px, calc((100vw - 992px) / 208 * 12 + 12px), 24px) 24px;
}
}
@media (max-width: 991.98px) {
.front-topics__articles {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.topic-article:last-child {
display: none;
}
.single-topic .topic-article:last-child {
display: flex;
}
.topic-article-media img {
top: 0;
aspect-ratio: auto;
}
.topic-card-title {
padding: 12px 24px;
}
.front-topics__card {
margin-bottom: 48px;
}
}
@media (max-width: 767.98px) {
.front-topics__articles {
grid-template-columns: 1fr;
gap: 24px;
}
.topic-article-topic {
padding: 4px 6px;
font-family: var(--font-body2-family);
font-size: 14px;
font-weight: 700;
line-height: 23px;
letter-spacing: 0.08em;
}
.topic-article-media {
aspect-ratio: 336 / 153;
}
.topic-article-media img {
top: 0;
height: 100%;
}
.topic-article-meta {
position: relative;
bottom: auto;
}
.topic-article-category {
width: fit-content;
padding: 8px 6px;
font-family: var(--font-body2-family);
font-size: 14px;
font-weight: 700;
line-height: 23px;
letter-spacing: 0.08em;
}
.topic-article-title {
padding: 8px 6px;
font-family: var(--font-h4-family);
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 0.04em;
}
.topic-article-date {
width: fit-content;
padding: 8px 6px;
font-family: var(--font-body2-family);
font-size: 14px;
font-weight: 500;
line-height: 23px;
letter-spacing: 0.08em;
}
.topic-card-tab {
padding: 12px 8px;
}
.topic-card-title {
padding: 12px 8px;
}
.topic-card {
padding: 40px 20px;
}
.topic-card-overlay {
bottom: 40px;
width: calc(100% - 20px * 2);
}
.front-topics__card {
gap: 24px;
margin-bottom: 0;
padding: 0 20px 24px;
border: none;
border-radius: 0;
overflow: visible;
}
.topics__title-bar {
width: calc(100% + 44px);
margin: 0 -22px;
}
.front-topics__articles {
padding: 0 20px;
}
.front-topics__grid {
margin-bottom: 24px;
}
}
/* =============================================================================
Front page — Columns section（合作專欄 / Guest Columns）
============================================================================= */
.front-columns__inner {
max-width: 1440px;
margin: 0 auto;
padding: 0 clamp(32px, calc(41.25vw - 486px), 108px) 96px;
}
@media (max-width: 767.98px) {
.front-columns__inner {
padding: 32px 20px 56px;
}
}
.front-columns__card {
display: grid;
grid-template-columns: 584fr 633fr;
border: 1px solid var(--color-primary-blue);
border-radius: 20px;
overflow: clip;
aspect-ratio: 1216 / 618;
margin-bottom: 84px;
}
.front-columns__left {
position: relative;
display: flex;
flex-direction: column;
background-color: var(--color-primary-light);
min-width: 0;
overflow: hidden;
}
.columns__title-bar {
height: 88px;
background-color: var(--color-secondary-green);
border-bottom: 1px solid var(--color-primary-blue);
overflow: clip;
display: flex;
align-items: center;
}
.columns__title-bar-track {
display: block;
white-space: nowrap;
will-change: transform;
padding-left: 32px;
}
.columns__title-bar-track::before {
content: "Column Column Column Column Column Column Column Column Column Column Column Column Column Column Column Column";
font-family: var(--font-family-museomoderno);
font-size: var(--font-marquee-size);
font-weight: var(--font-weight-regular);
color: var(--color-secondary-green);
-webkit-text-stroke: 4px var(--color-primary-light);
paint-order: stroke fill;
line-height: 1;
word-spacing: 10px;
}
.front-columns__title-area {
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
padding: 0 24px;
}
.front-columns .front-section__title {
flex-direction: column;
align-items: center;
gap: 2px;
text-align: center;
}
.front-columns__grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(3, 1fr);
min-width: 0;
min-height: 0;
background-color: var(--color-primary-blue);
gap: 1px;
padding-left: 1px;
}
@media (min-width: 768px) {
.front-columns__grid:has(> .column-card:nth-child(1):last-child) {
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
.front-columns__grid:has(> .column-card:nth-child(2):last-child) {
grid-template-columns: 1fr;
grid-template-rows: repeat(2, 1fr);
}
.front-columns__grid:has(> .column-card:nth-child(3):last-child) {
grid-template-columns: 1fr;
grid-template-rows: repeat(3, 1fr);
}
.front-columns__grid:has(> .column-card:nth-child(4):last-child) {
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(2, 1fr);
}
}
.column-card {
position: relative;
display: block;
overflow: clip;
text-decoration: none;
background-color: var(--color-primary-light);
min-width: 0;
min-height: 0;
}
.column-card::after {
content: "";
position: absolute;
inset: 0;
background-color: var(--color-black);
opacity: 0;
transition: opacity 300ms ease-out;
pointer-events: none;
}
@media (hover: hover) {
.column-card:hover::after {
opacity: 0.2;
}
}
.column-card__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.column-card__tag {
position: absolute;
bottom: 0;
left: 0;
background-color: var(--color-secondary-green);
border: 1px solid var(--color-primary-blue);
border-bottom: none;
border-radius: 10px 10px 0 0;
padding: 8px 16px;
font-family: var(--font-h4-family);
font-size: var(--font-h4-size);
font-weight: var(--font-h4-weight);
line-height: var(--font-h4-line-height);
letter-spacing: var(--font-h4-letter-spacing);
color: var(--color-primary-blue);
white-space: nowrap;
z-index: 1;
}
/* === Column articles 列（.front-columns__card 下方） === */
.front-columns__articles {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.front-columns__articles .column-article:nth-child(4) {
display: none;
}
.front-columns__readmore-bottom {
display: none;
}
.column-article {
display: flex;
flex-direction: column;
min-width: 0;
text-decoration: none;
color: var(--color-primary-blue);
position: relative;
}
.column-article-media {
aspect-ratio: 344 / 284;
background: var(--color-secondary-green);
border-radius: 20px 20px 0 0;
position: relative;
overflow: clip;
padding-bottom: 49px;
}
.column-article-media img {
position: absolute;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1) rotate(0deg);
transition: transform 0.5s ease;
transform-origin: center;
}
@media (hover: hover) and (min-width: 768px) {
.column-article:hover .column-article-media img {
transform: scale(0.9) rotate(10deg);
}
}
.column-article-body {
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
z-index: 1;
margin-top: -49px;
flex-shrink: 0;
}
.column-article-meta {
display: flex;
}
.column-article-column {
background: var(--color-secondary-green);
border-top: 1px solid var(--color-primary-blue);
border-left: 1px solid var(--color-primary-blue);
border-top-left-radius: 10px;
padding: 12px 12px 12px 24px;
font-family: var(--font-h4-family);
font-size: var(--font-h4-size);
font-weight: var(--font-h4-weight);
line-height: var(--font-h4-line-height);
letter-spacing: var(--font-h4-letter-spacing);
color: var(--color-primary-blue);
white-space: nowrap;
}
.column-article-category {
background: var(--color-primary-light);
border-top: 1px solid var(--color-primary-blue);
border-right: 1px solid var(--color-primary-blue);
border-top-right-radius: 10px;
padding: 12px 24px 12px 12px;
font-family: var(--font-h4-family);
font-size: var(--font-h4-size);
font-weight: var(--font-h4-weight);
line-height: var(--font-h4-line-height);
letter-spacing: var(--font-h4-letter-spacing);
color: var(--color-primary-blue);
white-space: nowrap;
}
.column-article-title {
background: var(--color-primary-light);
border: 1px solid var(--color-primary-blue);
padding: 24px;
font-family: var(--font-body2-family);
font-weight: var(--font-weight-semibold);
font-size: 18px;
line-height: 24px;
letter-spacing: 0.05em;
color: var(--color-primary-blue);
align-self: stretch;
}
.column-article-date {
background: var(--color-primary-light);
border-bottom: 1px solid var(--color-primary-blue);
border-left: 1px solid var(--color-primary-blue);
border-right: 1px solid var(--color-primary-blue);
padding: 12px 24px;
text-align: center;
font-family: var(--font-family-museomoderno);
font-weight: var(--font-weight-regular);
font-size: 18px;
line-height: 24px;
letter-spacing: 0.05em;
color: var(--color-primary-blue);
}
@media (max-width: 1199.98px) {
.column-article-column {
padding-left: clamp(12px, calc(5.769vw - 45.231px), 24px);
}
.column-article-category {
padding-right: clamp(12px, calc(5.769vw - 45.231px), 24px);
}
}
@media (max-width: 991.98px) {
.front-columns__articles {
grid-template-columns: 1fr 1fr;
}
.front-columns__articles .column-article:nth-child(4) {
display: flex;
}
.column-article-column {
padding-left: 24px;
}
.column-article-category {
padding-right: 24px;
}
}
@media (max-width: 767.98px) {
.front-columns__card {
display: block;
border: none;
border-radius: 0;
overflow: visible;
aspect-ratio: auto;
margin-bottom: 0;
}
.front-columns__left {
background-color: transparent;
overflow: visible;
display: flex;
flex-direction: column;
gap: 24px;
margin-bottom: 40px;
}
.columns__title-bar {
height: 56px;
margin-left: -20px;
margin-right: -20px;
}
.columns__title-bar-track::before {
font-size: var(--font-marquee-mobile-size);
word-spacing: 6px;
}
.front-columns__title-area {
padding: 0;
}
.front-columns__title-area .front-readmore {
display: none;
}
.front-columns__readmore-bottom {
display: flex;
justify-content: center;
}
/* --- A. Title 雙語字級 mobile（Figma node 608:6676） --- */
.front-columns__title-area .front-section__title-zh {
font-size: 26px;
line-height: 40px;
}
.front-columns__title-area .front-section__title-en {
font-size: 24px;
line-height: normal;
}
/* --- B. Grid mobile 4 張橫向 scroll（Figma node 608:6677） --- */
/* inner 已有 padding: 32px 20px 56px，左右各 20px 由 inner 負責；
grid 本身不加水平 padding，scroll 右端與 inner 右邊界對齊（距 viewport 20px）。 */
.front-columns__grid {
display: flex;
flex-direction: row;
grid-template-columns: none;
grid-template-rows: none;
gap: 0;
overflow-x: auto;
background-color: transparent;
margin-bottom: 56px;
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
.front-columns__grid .column-card {
flex: 0 0 200px;
height: 200px;
border: 1px solid var(--color-primary-blue);
border-radius: 0;
}
.front-columns__grid .column-card:nth-child(1) {
border-radius: 10px 0 0 10px;
}
.front-columns__grid .column-card:last-child {
border-radius: 0 10px 10px 0;
}
}
@media (max-width: 767.98px) {
/* Articles container: 2-col grid + gap 8 */
.front-columns__articles {
grid-template-columns: 1fr 1fr;
gap: 32px 8px;
margin-bottom: 32px;
}
.column-article {
min-width: auto;
}
.column-article-body {
margin-top: 0;
}
.column-article-media {
padding-bottom: 0;
aspect-ratio: 158 / 165;
margin-bottom: -60px;
}
/* Image: fill media、解除桌機 source-aspect + transform */
.column-article-media img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
aspect-ratio: auto;
transform: none;
object-fit: cover;
}
/* Body: 解除 stacking context、讓 column 絕對定位能上爬到 .column-article */
.column-article-body {
position: static;
z-index: 1;
}
/* Column tag: 從桌機 top row badge 改 mobile 頂部 hanging badge（圖片區頂部置中、border 下+左+右、底部圓角） */
.column-article-column {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
border-top: none;
border-bottom: 1px solid var(--color-primary-blue);
border-right: 1px solid var(--color-primary-blue);
border-top-left-radius: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding: 4px 6px;
font-family: var(--font-body2-family);
font-size: 14px;
font-weight: 700;
line-height: 23px;
letter-spacing: 0.08em;
z-index: 2;
}
/* Category: 變 top row 唯一 item、補滿 top + left + right 邊框 + 圓角 */
.column-article-category {
border-left: 1px solid var(--color-primary-blue);
border-top-left-radius: 10px;
padding: 8px 6px;
font-family: var(--font-body2-family);
font-size: 14px;
font-weight: 700;
line-height: 23px;
letter-spacing: 0.08em;
}
/* Title: mobile 字級 16 Museo Bold + 縮 padding */
.column-article-title {
padding: 8px 6px;
font-family: var(--font-h4-family);
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 0.04em;
}
/* Date: fit-content + Montserrat Medium 14 + 縮 padding */
.column-article-date {
width: fit-content;
padding: 8px 6px;
font-family: var(--font-body2-family);
font-size: 14px;
font-weight: 500;
line-height: 23px;
letter-spacing: 0.08em;
}
.column-card__tag {
left: 50%;
transform: translateX(-50%);
}
}
/* =============================================================================
Site footer — 桌機板（≥ 768px viewport）
============================================================================= */
/* 整體 footer — fullbleed，無 max-width 限制 */
.site-footer {
background-color: var(--color-primary-light);
}
/* ---- 上半段 ---- */
.site-footer__top {
background-color: var(--color-white);
border-top: 1px solid var(--color-primary-blue);
border-bottom: 1px solid var(--color-primary-blue);
}
.site-footer__top-inner {
max-width: 1440px;
margin: 0 auto;
padding: 0 96px 0 108px;
min-height: 372px;
position: relative;
display: flex;
align-items: flex-start;
justify-content: space-between;
}
/* Slogan 雙行 */
.site-footer__slogan {
font-family: var(--font-footer-slogan-family);
font-weight: var(--font-footer-slogan-weight);
font-size: var(--font-footer-slogan-size);
line-height: var(--font-footer-slogan-line-height);
color: var(--color-primary-blue);
margin: 50px 0 0;
padding: 0;
display: flex;
flex-direction: column;
}
.site-footer__slogan span {
display: block;
}
.site-footer__slogan span:nth-child(2) {
display: none;
}
/* Newsletter 訂閱表單 */
.site-footer__newsletter {
display: flex;
align-items: center;
border: 1px solid var(--color-primary-blue);
border-radius: 20px;
overflow: hidden;
margin-top: 32px;
width: 450px;
flex-shrink: 0;
}
/* 訂閱按鈕 */
.site-footer__newsletter-submit {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--color-secondary-yellow);
border: 0;
flex: 1;
height: 55px;
padding: 0 14px;
cursor: pointer;
color: var(--color-primary-blue);
font-family: var(--font-h4-family);
font-weight: var(--font-h4-weight);
font-size: var(--font-h4-size);
line-height: var(--font-h4-line-height);
letter-spacing: var(--font-h4-letter-spacing);
flex-shrink: 0;
position: relative;
overflow: hidden;
}
/* Hover 擴展層（::before pseudo）：default scaleX(0) 不可見、hover scaleX(1) 從左到右擴展滿覆 padding-box */
.site-footer__newsletter-submit::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: var(--color-secondary-blue);
transform: scaleX(0);
transform-origin: left center;
transition: transform 300ms ease-out;
}
.site-footer__newsletter-icon {
display: flex;
align-items: center;
width: 24px;
height: 24px;
flex-shrink: 0;
position: relative;
}
.site-footer__newsletter-icon img {
width: 100%;
height: auto;
}
.site-footer__newsletter-submit-label {
flex-shrink: 0;
position: relative;
}
.site-footer__newsletter-arrow {
display: flex;
align-items: center;
width: 46px;
height: 46px;
margin-left: 16px;
flex-shrink: 0;
position: relative;
}
.site-footer__newsletter-arrow img {
width: 100%;
height: auto;
}
/* 桌機預設只顯示 desktop 版 arrow、mobile 版隱藏（mobile @media 內反轉）*/
.site-footer__newsletter-arrow-mobile {
display: none;
}
/* 左側欄（slogan + newsletter）包裝 — 讓兩者垂直排列 */
.site-footer__top-inner > .site-footer__slogan,
.site-footer__top-inner > .site-footer__newsletter {
align-self: flex-start;
}
/* 因為 slogan 和 newsletter 都是 top-inner 直屬子元素，
需要把它們用隱性欄包起來；改用以下方式：讓 top-inner 為 grid layout */
.site-footer__top-inner {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto 1fr;
column-gap: 40px;
}
.site-footer__slogan {
grid-column: 1;
grid-row: 1;
}
.site-footer__newsletter {
grid-column: 1;
grid-row: 2;
}
/* 兩欄 nav group — 靠右，跨 2 rows */
.site-footer__nav-group {
grid-column: 2;
grid-row: 1 / 3;
align-self: start;
display: flex;
gap: 16px;
align-items: flex-start;
padding-top: 50px;
}
.site-footer__nav-col {
width: 192px;
}
.site-footer__nav-heading {
font-family: var(--font-footer-section-family);
font-weight: var(--font-footer-section-weight);
font-size: var(--font-footer-section-size);
line-height: var(--font-footer-section-line-height);
color: var(--color-primary-blue);
text-transform: uppercase;
margin: 0 0 12px;
padding: 0;
}
.site-footer__nav-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.site-footer__nav-list li a {
font-family: var(--font-footer-link-family);
font-weight: var(--font-footer-link-weight);
font-size: var(--font-footer-link-size);
line-height: var(--font-footer-link-line-height);
color: var(--color-primary-blue);
opacity: 0.8;
text-decoration: none;
display: block;
transition: opacity 200ms ease-out;
}
.site-footer__nav-list li a:hover,
.site-footer__nav-list li a:focus-visible {
opacity: 1;
text-decoration: underline;
outline: none;
}
.site-footer__nav-list li a:focus-visible {
outline: 2px solid var(--color-primary-blue);
outline-offset: 2px;
border-radius: 2px;
}
/* ---- 下半段 ---- */
.site-footer__bottom {
background: transparent;
}
.site-footer__bottom-inner {
max-width: 1440px;
margin: 0 auto;
padding: 32px 108px 40px;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 80px;
}
/* Social icon 列 */
.site-footer__social {
display: flex;
align-items: center;
gap: 24px;
margin-top: 8px;
}
.site-footer__social-link {
display: inline-flex;
align-items: center;
width: 40px;
height: 40px;
flex-shrink: 0;
transition: opacity 200ms ease-out;
}
.site-footer__social-link img {
width: 100%;
height: 100%;
object-fit: contain;
}
.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
opacity: 0.8;
}
.site-footer__social-link:focus-visible {
outline: 2px solid var(--color-primary-blue);
outline-offset: 3px;
border-radius: 4px;
}
.site-footer__archive-link {
font-family: var(--font-h4-family);
font-weight: var(--font-h4-weight);
font-size: var(--font-h4-size);
line-height: var(--font-h4-line-height);
letter-spacing: var(--font-h4-letter-spacing);
color: var(--color-primary-blue);
text-decoration: none;
transition: text-decoration 200ms ease-out;
}
.site-footer__archive-link:hover,
.site-footer__archive-link:focus-visible {
text-decoration: underline;
}
/* Policy 列 — 右側 */
.site-footer__policy {
display: flex;
align-items: center;
font-family: var(--font-footer-link-family);
font-weight: var(--font-footer-link-weight);
font-size: var(--font-footer-link-size);
line-height: var(--font-footer-link-line-height);
color: var(--color-primary-blue);
opacity: 0.8;
}
.site-footer__brand-mark::after {
content: " | ";
padding: 0 8px;
}
.site-footer__policy-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
}
.site-footer__policy-list li + li::before {
content: " | ";
padding: 0 8px;
}
.site-footer__policy-list li a {
color: inherit;
text-decoration: none;
}
.site-footer__policy-list li a:hover,
.site-footer__policy-list li a:focus-visible {
text-decoration: underline;
}
/* =============================================================================
Desktop narrow (< 1200px) — 桌機板細部 RWD 微調層（≥ 992 仍視為桌機）
============================================================================= */
@media (max-width: 1199.98px) {
/* Footer slogan：桌機緊湊起 slogan 改 block + spans 改 inline（兩 span 連續排版）*/
.site-footer__slogan {
display: block;
}
.site-footer__slogan span,
.site-footer__slogan span:nth-child(2) {
display: inline;
}
/* Brand 對齊 swiper 左緣：tablet 範圍 banner 1-col grid 居中、swiper 左緣 = 32 + max(0, (V-1001)/2)
公式 max(32, 50vw - 468.5px) 同形式、上限 132 取自 V=1199.98 邊界值 131.49 進位 */
.site-header__inner {
padding-left: clamp(32px, calc(50vw - 468.5px), 132px);
}
}
/* =============================================================================
Tablet (< 992px) — 介於桌機與手機之間的 override 層
============================================================================= */
@media (max-width: 991.98px) {
/* Footer top-inner padding：左 108 / 右 96（desktop）線性過渡到 19 / 19（mobile 邊界）
公式：左 slope 89/224 ≈ 0.39732、b ≈ -286；右 slope 77/224 = 0.34375、b = -245
端點：768 → 19/19、992 → 108/96，與 mobile / desktop 兩端皆無跳階 */
.site-footer__top-inner {
padding-top: 0;
padding-right: clamp(19px, calc(34.375vw - 245px), 96px);
padding-bottom: 0;
padding-left: clamp(19px, calc(39.732vw - 286px), 108px);
}
/* Footer slogan font-size + line-height：desktop 35/50 線性過渡到 mobile 26/40（對齊 Figma mobile H2）
font-size 公式：slope 9/224 ≈ 0.04018、b ≈ -4.86；端點 768 → 26、992 → 35
line-height 公式：slope 10/224 ≈ 0.04464、b ≈ 5.72；端點 768 → 40、992 → 50
mobile (<768) 由 clamp min 自動鎖定 26/40、無需另外 override */
.site-footer__slogan {
font-size: clamp(26px, calc(4.018vw - 4.86px), 35px);
line-height: clamp(40px, calc(4.464vw + 5.72px), 50px);
}
/* Footer newsletter：desktop 450 線性過渡到 mobile 邊界 350（對齊 mobile max-width）
公式：slope 100/224 ≈ 0.4464、b ≈ 7；端點 768 → 350、992 → 450
消除 grid 1fr 軌道因 newsletter 450 固定 + min-content 撐出容器的 overflow */
.site-footer__newsletter {
width: clamp(350px, calc(44.64vw + 7px), 450px);
}
/* Footer nav-col width：反向 clamp（負 slope）— viewport 越大、nav-col 越小
公式：slope -21/224 ≈ -0.0938、b = 234；端點 768 → 162、992 → 141
原因：newsletter 同步擴張（350→450）比 inner 擴張更快、留給 nav-group 的空間遞減
mobile (<768) layout 翻轉、col 改 flex: 1 — 視為設計切換點 */
.site-footer__nav-col {
width: clamp(141px, calc(-9.38vw + 234px), 162px);
}
/* Footer bottom-inner：tablet 起改 flex column stack（social 與 policy 上下排）
padding：左右 108（desktop）線性過渡到 19 / 19（mobile 邊界），上 32、下 40 維持
公式：slope 89/224 ≈ 0.39732、b ≈ -286；端點 768 → 19、992 → 108
左右對稱、3-value shorthand（top / 左右 / bottom）*/
.site-footer__bottom-inner {
flex-direction: column;
align-items: flex-start;
max-width: 100%;
min-height: auto;
padding: 32px clamp(19px, calc(39.732vw - 286px), 108px) 40px;
}
/* policy 列：取消桌機 inline-flex 水平對齊，改 column 自然堆疊 */
.site-footer__policy {
position: static;
width: 100%;
padding: 0;
margin-top: 16px;
flex-wrap: wrap;
align-items: flex-start;
text-align: left;
}
/* Banner title font-size + line-height：desktop 32/48 線性過渡到 mobile 26/40（對齊 H2 token 兩端）
font-size 公式：slope 6/224 ≈ 0.02679、b ≈ 5.43；端點 768 → 26、992 → 32
line-height 公式：slope 8/224 ≈ 0.03571、b ≈ 12.57；端點 768 → 40、992 → 48（normal CJK ≈ 1.5×32 估值）
mobile (<768) 由 clamp min 自動鎖定 26/40、無需另外 override */
.front-banner__title {
font-size: clamp(26px, calc(2.679vw + 5.43px), 32px);
line-height: clamp(40px, calc(3.571vw + 12.57px), 48px);
}
}
/* =============================================================================
Mobile header (< 992px) — 漢堡選單 + 全 panel layout
觸發點從 767.98 提前到 991.98：消除 desktop layout 在 768~1090 viewport
的 overflow 區、tablet 範圍直接走 mobile-style 漢堡 layout
============================================================================= */
@media (max-width: 991.98px) {
/* ===== Sticky overlay：header 固定於 viewport 頂端 12px、出 flow ===== */
.site-header {
position: fixed;
top: 12px;
left: 0;
right: 0;
z-index: 100;
background: var(--color-white);
max-height: calc(100vh - 12px);
overflow-y: auto; /* panel 過長 edge case：header 內部可滾、不溢出 viewport */
border-bottom: 1px solid var(--color-primary-blue);
}
/* Header 上方 12px 空隙以 primary-light 填滿（避免透明露出後方內容）*/
body::after {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
height: 12px;
background: var(--color-primary-light);
z-index: 99;
pointer-events: none;
}
/* 內容區補 margin-top 避開 fixed header（12 gap + ~75 closed header height）*/
.site-main {
margin-top: var(--mobile-header-offset);
}
/* Body scroll lock — 漢堡展開時 body 不可滾 */
body:has(.site-header__menu-toggle[aria-expanded="true"]) {
overflow: hidden;
}
/* 半透明覆層 — 漢堡展開時蓋住內容區（z-index 50：低於 header 100、高於內容）
pseudo-element 動畫採 interpolate display + allow-discrete + @starting-style，與既有 panel 開合節奏一致 */
body::before {
content: '';
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 50;
pointer-events: none;
opacity: 0;
display: none;
transition:
opacity 250ms ease-out,
display 250ms ease-out allow-discrete;
}
body:has(.site-header__menu-toggle[aria-expanded="true"])::before {
opacity: 1;
display: block;
}
@starting-style {
body:has(.site-header__menu-toggle[aria-expanded="true"])::before {
opacity: 0;
}
}
/* ===== 頂列 ===== */
.site-header__inner {
flex-wrap: wrap;
align-items: center;
padding: 20px;
padding-left: 20px;
max-width: 100%;
min-height: auto;
}
.site-header__brand {
margin-top: 0;
gap: 11.925px;
}
.site-header__brand-logo {
width: 70.394px;
height: 33.983px;
}
.site-header__brand-text {
gap: 2.592px;
}
.site-header__brand-zh {
font-size: 15.554px;
line-height: 16.591px;
}
.site-header__brand-en {
font-size: 12.443px;
line-height: 12.443px;
}
/* ===== 漢堡 icon ===== */
.site-header__menu-toggle {
display: flex;
flex-direction: column;
gap: 5px;
margin-left: auto;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
}
.site-header__menu-toggle-bar {
display: block;
width: 40px;
height: 4px;
background: var(--color-ocean-dark);
border-radius: 3px;
transition: transform 200ms ease-out, opacity 200ms ease-out;
}
.site-header__menu-toggle[aria-expanded="true"] > :nth-child(1) {
transform: translateY(9px) rotate(45deg);
}
.site-header__menu-toggle[aria-expanded="true"] > :nth-child(2) {
opacity: 0;
}
.site-header__menu-toggle[aria-expanded="true"] > :nth-child(3) {
transform: translateY(-9px) rotate(-45deg);
}
/* ===== Menu panel：donate + nav 預設收起 + 開合動畫 ===== */
.site-header__donate,
.site-nav {
flex-basis: 100%;
display: none;
height: 0;
overflow: hidden;
margin: 0;
transition:
height 250ms ease-out,
margin-top 250ms ease-out,
display 250ms ease-out allow-discrete;
}
.site-header:has(.site-header__menu-toggle[aria-expanded="true"]) .site-header__donate,
.site-header:has(.site-header__menu-toggle[aria-expanded="true"]) .site-nav {
display: flex;
height: auto;
}
.site-header:has(.site-header__menu-toggle[aria-expanded="true"]) .site-nav {
margin-top: 40px;
}
/* @starting-style：element 剛進入展開狀態時從 height: 0 開始、讓展開動畫有起始幀可內插 */
@starting-style {
.site-header:has(.site-header__menu-toggle[aria-expanded="true"]) .site-header__donate,
.site-header:has(.site-header__menu-toggle[aria-expanded="true"]) .site-nav {
height: 0;
}
}
/* ===== Nav 垂直列表 ===== */
.site-nav__list {
flex-direction: column;
width: 100%;
gap: 20px;
}
.site-nav__list > li {
width: 100%;
}
.site-nav__list > li > a {
height: auto; /* reset 桌機版固定高度，避免影響手機 slide-out 選單自然高度 */
background: transparent;
border: 0;
padding: 0;
color: var(--color-primary-blue);
font-weight: var(--font-weight-medium);
font-size: 18px;
line-height: normal;
letter-spacing: 0;
justify-content: space-between;
width: 100%;
}
/* ===== Chevron 給有子選單的父項 ===== */
.menu-item-has-children > a::after {
content: '';
flex-shrink: 0;
width: 17px;
height: 9px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
transition: transform 200ms ease-out;
}
.menu-item-has-children[aria-expanded="true"] > a::after {
transform: rotate(180deg);
}
/* ===== Sub-menu mobile：override desktop dropdown ===== */
.site-nav__list > li:hover > .sub-menu,
.site-nav__list > li:focus-within > .sub-menu {
display: none;
}
.site-nav__list .sub-menu {
position: static;
width: 100%;
background: transparent;
margin: 8px 0 0;
padding: 0;
height: 0;
overflow: hidden;
transition:
height 250ms ease-out,
display 250ms ease-out allow-discrete;
}
.site-nav__list > li[aria-expanded="true"] > .sub-menu {
display: block;
height: auto;
}
/* @starting-style：sub-menu 剛展開時從 height: 0 開始 */
@starting-style {
.site-nav__list > li[aria-expanded="true"] > .sub-menu {
height: 0;
}
}
.site-nav__list .sub-menu > li > a {
background: #d9d9d9;
color: var(--color-primary-blue);
padding: 8px 16px;
border-bottom: 1px solid var(--color-primary-blue);
font-size: 18px;
line-height: 24px;
letter-spacing: 0.05em;
font-weight: var(--font-weight-regular);
box-shadow: none;
}
.site-nav__list .sub-menu > li > a:hover,
.site-nav__list .sub-menu > li > a:focus-visible {
background: #d9d9d9;
box-shadow: none;
}
/* ===== Donate mobile：排在 nav 之後、橫向 full-width，1:1 對 Figma ===== */
/* bg / color / radius / border 繼承自上方 desktop 規則，只 override 變動的 property */
.site-header__donate {
order: 99;
flex-direction: row;
justify-content: center;
height: auto;
padding: 10px 0;
gap: 8px;
border-width: 0;
border-radius: 0;
margin-top: 24px;
font-family: var(--font-family-cjk);
font-weight: var(--font-weight-medium);
font-size: 18px;
line-height: normal;
letter-spacing: 0;
}
.site-header__donate-icon {
width: 24px;
height: 24px;
}
/* Mobile：取消 desktop hover 的放大 + 位移效果（含對應 transition） */
.site-header__donate {
transition: background-color 250ms ease-out, color 250ms ease-out;
}
.site-header__donate-icon {
transition: none;
}
.site-header__donate:hover {
padding-top: 10px;
}
.site-header__donate:hover .site-header__donate-icon {
width: 24px;
height: 24px;
}
}
/* =============================================================================
Desktop narrow front-banner（< 1200）— inner grid 改 1 欄、nav 移至 swiper 下方靠右
mobile @media 在後、會進一步把 nav 改 absolute 浮在 card 內（cascade override）
============================================================================= */
@media (max-width: 1199.98px) {
.front-banner__inner {
grid-template-columns: minmax(0, 937px);
grid-template-rows: auto auto;
}
.front-banner__nav {
grid-column: 1;
justify-self: end;
}
}
/* =============================================================================
Mobile front-banner（< 768）— 純 @media override，PHP markup / Swiper config 不動
============================================================================= */
@media (max-width: 767.98px) {
/* 1. Section padding：上下 40px、左右 19px（與其他 mobile section 一致）*/
.front-banner {
padding: 40px 19px;
}
/* 2. Inner — 取消桌機 4-column grid、改為 1-column；
紫底卡改移到個別 .front-banner__card；nav 改 absolute 覆在 card 內、inner 不再需要 row-gap */
.front-banner__inner {
grid-template-columns: 1fr;
grid-template-rows: auto;
padding: 0;
max-width: 100%;
align-items: stretch;
}
/* 3. Swiper — 取消桌機固定 938px、改 full-width */
.front-banner__swiper {
width: auto;
min-width: 0;
max-width: 100%;
}
/* 4. Slide / Card — 直立排列；透明底與無邊框（紫底卡由 inner 統一提供）*/
.front-banner__slide {
display: block;
}
.front-banner__card {
width: 100%;
height: 575px;
border: 3px solid var(--color-primary-blue);
border-radius: 20px;
overflow: hidden;
display: flex;
flex-direction: column;
flex-shrink: 0;
}
/* 5. Media（圖片區）— static 脫離桌機 absolute；height 285px；
margin-bottom: -80px 讓下方 content 上推 80px 與影像重疊；
padding: 24px 為 sticker absolute 定位提供 anchor 空間；
position: relative 為 sticker 提供定位 context */
.front-banner__media {
position: relative;
width: 100%;
height: 285px;
margin-bottom: -80px;
overflow: clip;
padding: 24px;
border-radius: 0;
}
.front-banner__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* 6. Content（category / title / date stack）— 取消桌機 absolute 定位 */
.front-banner__content {
position: static;
left: auto;
top: auto;
width: 100%;
padding: 0;
z-index: 2;
}
/* Badges 條：border 改 0.584px、上圓角改 5.837px、padding 改 12px 8px */
.front-banner__badges {
border-width: 0.584px;
border-top-left-radius: 5.837px;
border-top-right-radius: 5.837px;
padding: 12px 8px;
}
/* Title + Desc 區：border 改 0.584px、padding 改 21px 8px、gap 改 12px */
.front-banner__text {
border-width: 0.584px;
padding: 21px 8px;
gap: 12px;
}
/* Date 條：border 0.584px、取消桌機 border-radius、padding 7px 8px；
字體改為 body2 token（Montserrat Medium 14/23/0.08em；桌機是 MuseoModerno）*/
.front-banner__date {
border-width: 0.584px;
border-radius: 0;
padding: 7px 8px;
font-family: var(--font-body2-family);
font-weight: var(--font-body2-weight);
font-size: var(--font-body2-size);
line-height: var(--font-body2-line-height);
letter-spacing: var(--font-body2-letter-spacing);
}
/* 7. Sticker — SVG ![]()
、定位於 image 右上角 100×100
桌機 right + bottom；mobile 用 top + right、bottom: auto 抵消桌機板 bottom */
.front-banner__sticker {
top: 24px;
bottom: auto;
right: 24px;
width: 200px;
height: 200px;
}
/* Mobile sticker img：覆寫桌機尺寸與 keyframes name；
position/left/top/will-change/animation timing 全部繼承桌機 base 規則 */
.front-banner__sticker-img {
width: 81.871px;
height: 87.993px;
animation-name: front-banner-sticker-wobble-mobile;
}
/* Mobile keyframes：root 200×200 內 sticker 81.871×87.993 在右上↔左下擺動
from = Figma topic-m（右上、rotate 5°）
to = Figma Variant2（左下、rotate -6°） */
@keyframes front-banner-sticker-wobble-mobile {
from {
transform: translate(118.570px, 5.090px) rotate(5deg);
}
to {
transform: translate(22.105px, 84.218px) rotate(-6deg);
}
}
/* 8. Nav — 改 absolute 覆在紫底 card 內 bottom 8px（對應 Figma outer pb-8、視覺疊在 card 上）
inner 是 position: relative（從桌機規則繼承）、提供 anchor
z-index: 10 浮在 swiper 與 slide 之上（swiper-bundle.css 的 .swiper z-index: 1）*/
.front-banner__nav {
position: absolute;
bottom: 8px;
left: 0;
right: 0;
z-index: 10;
justify-self: unset;
justify-content: center;
gap: 24px;
padding: 0;
}
.front-banner__prev,
.front-banner__next {
width: 78px;
height: 78px;
}
}
/* =============================================================================
Tablet front-articles（< 992）— Grid 單欄 + Sidebar 水平排列
無 Figma 設計、bridge desktop ↔ mobile 兩端
============================================================================= */
@media (max-width: 991.98px) {
/* Grid: 兩欄 → 單欄（cards 在上、sidebar 在下）*/
/* minmax(0, 1fr)：明示 min = 0，防 1fr（= minmax(auto, 1fr)）在 min-content 超大時撐爆 track */
.front-articles__grid {
grid-template-columns: minmax(0, 1fr);
gap: 48px;
}
/* 雙保險：cards 作為 grid item 預設 min-width: auto（= min-content），明示 0 允許 shrink */
.front-articles__cards {
min-width: 0;
}
/* Sidebar: 垂直 → 水平（category + popular 並排）*/
.front-articles__sidebar {
flex-direction: row;
align-items: flex-start;
gap: 24px;
}
/* Boxes 平分 sidebar row 寬度 */
.front-articles__category-box,
.front-articles__popular-box {
width: auto;
flex: 1 1 0;
min-width: 0;
}
/* Popular swiper + slide 撐滿縮窄的 box */
.front-articles__popular-swiper {
width: 100%;
}
.front-articles__popular-slide.swiper-slide {
width: 100%;
}
}
/* =============================================================================
Mobile front-articles（< 768）Phase A — layout reorder + 基礎尺寸 RWD
Figma mobile homepage frame 608:6641；card 量測來源 608:6666
============================================================================= */
/* --- Title bar marquee mobile --- */
@media (max-width: 767.98px) {
.articles__title-bar {
height: 56px; /* desktop 88 → mobile 56；Figma node 608:6651 */
}
.articles__title-bar-track::before {
font-size: var(--font-marquee-mobile-size);
-webkit-text-stroke: 2px var(--color-primary-light);
text-stroke: 2px var(--color-primary-light);
word-spacing: 6px;
}
}
/* --- Section title mobile：垂直堆疊 + 置中 (Figma node 608:6683 — zh 26/40 + en 24/normal) --- */
@media (max-width: 767.98px) {
.front-section__title,
.page__title {
flex-direction: column;
align-items: center;
gap: 0;
text-align: center;
}
}
/* --- Layout reorder：display: contents + flex order --- */
/* __top / __grid / __sidebar 變 display:contents，其子元素升格為 __inner 的直接 flex 子節點 */
@media (max-width: 767.98px) {
.front-articles__inner {
display: flex;
flex-direction: column;
gap: 24px;
padding: 24px 19px 72px;
}
.front-articles__top,
.front-articles__grid,
.front-articles__sidebar {
display: contents;
}
/* 目標順序：title(0) → cards(1) → readmore(2) → category-box(3) → popular-box(4) */
.front-section__title { order: 0; }
.front-articles__cards { order: 1; }
.front-articles__top .front-readmore { order: 2; align-self: center; margin-bottom: 48px; }
.front-articles__category-box { order: 3; margin-bottom: 16px; }
.front-articles__popular-box { order: 4; }
}
/* --- Cards grid mobile：2 cols 縮小 --- */
@media (max-width: 767.98px) {
.front-articles__cards {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
gap: 24px 8px; /* vertical 24 / horizontal 14；Figma 608:6666 card 寬 170、相鄰間距約 14 */
}
}
/* --- Article card body mobile：padding / 字級縮（Figma node 608:6666 量測）--- */
/* category 條：desktop padding 12px 24px → mobile 8px 6px；font 18 → 14 */
/* title 條： desktop padding 24px → mobile 8px 6px；font 18 → 16（MuseoModerno Bold）；LH 24 不變 */
/* date 條： desktop padding 12px 24px → mobile 8px 6px；font 18 → 14 */
@media (max-width: 767.98px) {
.article-card {
padding: 0 0 10px 0;
}
.article-card-media {
aspect-ratio: 158 / 133;
}
.article-card-category {
padding: 8px 6px;
font-size: 14px;
line-height: 23px;
}
.article-card-title {
padding: 8px 6px;
font-size: 16px;
font-weight: var(--font-weight-bold);
/* line-height: 24px — 與 desktop 相同、不需 override */
}
.article-card-date {
padding: 8px 6px;
font-size: 14px;
line-height: 23px;
}
}
/* =============================================================================
Mobile category-box（< 768）— 內部結構從 2×7 grid 重構為橫向 chip strip
Figma node 608:6715
============================================================================= */
@media (max-width: 767.98px) {
/* box：撐滿行寬、取消固定高、收 padding 到 16px（Figma px 16） */
.front-articles__category-box {
width: 100%;
height: auto;
min-height: unset;
padding: 0 16px;
}
/* head 保留 3-col grid；title 字級由 mobile H3 token cascade 接管 */
/* prev/next 按鈕：mobile 60×60（40 會切到箭頭 SVG、61 太擠、60 平衡） */
.front-articles__category-prev,
.articles__category-prev,
.front-articles__category-next,
.articles__category-next {
width: 60px;
height: 60px;
}
/* archive 變體：mobile 一律顯示 nav，覆寫 Swiper bundle 的 .swiper-button-lock { display: none } */
.articles__category-prev.swiper-button-lock,
.articles__category-next.swiper-button-lock {
display: flex;
}
/* swiper container：Swiper 接管 overflow，mobile 上下 8 留 chip 透氣、水平 0 緊湊
雙 class 提升特異性與 desktop L1021 同模式、避免被 swiper-bundle .swiper 規則覆寫 */
.swiper.front-articles__category-swiper {
padding: 8px 0;
}
/* mobile：隱藏中央分隔線（desktop ::before 搬到 swiper container 後需在 mobile override） */
.front-articles__category-swiper::before {
display: none;
}
/* slide 寬度自然撐：slidesPerView 'auto' 要求 slide width 不被鎖死、
覆寫 swiper-bundle 預設 .swiper-slide { width: 100% }、特異性 0,3,0 勝出 */
.swiper.front-articles__category-swiper .swiper-slide {
width: auto;
}
/* item chip 樣式：上下 6 左右 4、gap 6；flex-shrink 由 Swiper slide 預設處理 */
.articles__category-item {
padding: 6px 4px;
gap: 6px;
}
/* hash 圓縮：26px → 20px（Figma 19.5 取整）、border 縮 0.75px、font 縮 13.5px */
.articles__category-hash {
width: 20px;
height: 20px;
border-width: 0.75px;
font-size: 13.5px;
}
}
/* =============================================================================
Mobile popular-box（< 768）— 尺寸 RWD：box / head / swiper / slide 改 100%
Figma node 608:6652
============================================================================= */
@media (max-width: 767.98px) {
.front-articles__popular-box {
width: 100%;
padding: 0;
}
.front-articles__popular-head {
padding: 0 16px;
}
.front-articles__popular-prev,
.front-articles__popular-next {
width: 60px;
height: 60px;
}
.front-articles__popular-swiper {
width: 100%;
}
.front-articles__popular-slide.swiper-slide {
width: 100%;
padding: 24px 16px;
}
}
/* =============================================================================
Mobile footer (< 768px) — 純 @media override，footer.php 不動
============================================================================= */
@media (max-width: 767.98px) {
/* 1. Token override：footer slogan 對應 mobile H2（26/40，同 line 130-131 pattern） */
:root {
--font-footer-slogan-size: 26px;
--font-footer-slogan-line-height: 40px;
}
/* 2. 上半段 top-inner：grid 改單欄 + padding override */
.site-footer__top-inner {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
column-gap: 0;
padding: 32px 19px;
max-width: 100%;
min-height: auto;
}
/* 三個子元素重設 grid 位置，各佔 full width */
.site-footer__slogan {
grid-column: 1;
grid-row: 1;
margin-top: 0;
max-width: 350px;
}
.site-footer__newsletter {
grid-column: 1;
grid-row: 2;
margin-top: 25px;
width: 100%;
max-width: 350px;
height: 52px;
}
/* nav-group：改回 auto row、取消桌機的 grid-row: 1/3 跨欄 */
.site-footer__nav-group {
grid-column: 1;
grid-row: 3;
padding-top: 0;
margin-top: 31px; /* 56px gap 含 newsletter 高度 52px；25+52+31 ≈ 108px → 扣 newsletter 本身高度後剩餘距離符合 56px gap 視覺意圖 */
gap: 0;
justify-content: space-between;
}
/* nav-col：取消固定寬 192px */
.site-footer__nav-col {
width: auto;
flex: 1;
}
/* 3. Newsletter submit override */
/* submit 按鈕：padding 改 12px、gap 12px、高 52px、撐滿容器置中 */
.site-footer__newsletter-submit {
padding: 12px 6px 12px 12px;
gap: 8px;
height: 52px;
width: 100%;
justify-content: center;
flex-shrink: 0;
}
/* submit 文字改用 body3 token（MuseoModerno Regular 16/27.3/0.04em） */
.site-footer__newsletter-submit-label {
font-family: var(--font-body3-family);
font-weight: var(--font-body3-weight);
font-size: var(--font-body3-size);
line-height: var(--font-body3-line-height);
letter-spacing: var(--font-body3-letter-spacing);
}
/* arrow 容器：mobile 尺寸 46×24（桌機是 46×46） */
.site-footer__newsletter-arrow {
width: 46px;
height: 24px;
margin-left: 4px;
}
/* arrow 圖片切版：mobile 顯示 46×24 viewBox 專屬 svg、桌機版隱藏 */
.site-footer__newsletter-arrow-desktop {
display: none;
}
.site-footer__newsletter-arrow-mobile {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
/* social row：置中、允許 wrap */
.site-footer__social {
justify-content: center;
flex-wrap: wrap;
margin-top: 0;
}
}
/* Accessibility：尊重 OS 減少動畫設定（暈眩 / 注意力敏感等用戶）*/
@media (prefers-reduced-motion: reduce) {
.site-header__donate,
.site-nav,
.site-nav__list .sub-menu {
transition: none;
}
}
/* =============================================================================
Blog index — home.php 最新文章列表（桌機 base、視覺細節後續逐步調）
============================================================================= */
.archive__inner {
max-width: 1440px;
margin-inline: auto;
padding: 72px clamp(32px, calc(41.25vw - 486px), 108px) 120px;
min-height: calc(100vh - 100px);
}
@media (max-width: 767.98px) {
.archive__inner {
padding: 40px 20px 72px;
}
}
.single-topic__inner {
max-width: 1440px;
margin: 0 auto;
padding: 72px clamp(32px, calc(41.25vw - 486px), 108px) 120px;
}
@media (max-width: 767.98px) {
.single-topic__inner {
padding: 24px 19px 72px;
}
}
/* ─── single-topic hero banner（TWReporter 式滿版大圖 + 疊層標題） ─── */
.single-topic__banner {
position: relative;
height: 100svh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
background-size: cover;
background-position: center;
}
.single-topic__banner-scrim {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 0;
}
.single-topic__banner-inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
text-align: center;
padding: 0 24px;
padding-top: 100px;
}
/* 子元素 UA 預設 margin 歸零，避免疊加在 gap 之上造成非預期間距 */
.single-topic__banner-inner h1,
.single-topic__banner-inner p,
.single-topic__banner-inner span {
margin: 0;
}
.single-topic__banner-title {
color: var(--color-white);
font-family: var(--font-hero-title-family);
font-weight: var(--font-hero-title-weight);
font-size: var(--font-hero-title-size);
line-height: var(--font-hero-title-line-height);
letter-spacing: var(--font-hero-title-letter-spacing);
}
.single-topic__banner-subtitle {
color: var(--color-white);
font-family: var(--font-body1-family);
font-weight: var(--font-body1-weight);
font-size: var(--font-body1-size);
line-height: var(--font-body1-line-height);
letter-spacing: var(--font-body1-letter-spacing);
}
.single-topic__banner-divider {
display: block;
width: 48px;
height: 2px;
background: rgba(255, 255, 255, 0.6);
}
.single-topic__banner-date {
color: rgba(255, 255, 255, 0.8);
font-family: var(--font-body3-family);
font-weight: var(--font-body3-weight);
font-size: var(--font-body3-size);
line-height: var(--font-body3-line-height);
letter-spacing: var(--font-body3-letter-spacing);
}
.single-topic__banner-arrow {
position: absolute;
left: 50%;
bottom: 40px;
transform: translateX(-50%);
z-index: 1;
color: var(--color-white);
cursor: pointer;
text-decoration: none;
}
@media (max-width: 1199.98px) {
.single-topic__banner-inner {
padding-top: 72px;
}
.single-topic__banner-title {
font-size: 40px;
line-height: 56px;
}
}
@media (max-width: 991.98px) {
.single-topic__banner-inner {
padding-top: 0;
gap: 16px;
}
.single-topic__banner-title {
font-size: 34px;
line-height: 48px;
}
.single-topic__banner-divider {
width: 40px;
}
}
@media (max-width: 767.98px) {
.single-topic__banner-inner {
gap: 12px;
padding: 0 20px;
}
.single-topic__banner-title {
font-size: 28px;
line-height: 40px;
}
.single-topic__banner-arrow {
bottom: 24px;
}
}
/* ─── single-topic content（post_content 窄欄內文） ─── */
.single-topic__content {
max-width: 660px;
margin: 0 auto;
text-align: left;
padding-top: 64px;
}
.single-topic__content p {
font-family: var(--font-body1-family);
font-weight: var(--font-body1-weight);
font-size: var(--font-body1-size);
line-height: var(--font-body1-line-height);
letter-spacing: var(--font-body1-letter-spacing);
margin: 0 0 1em;
}
.single-topic__content p:last-child {
margin-bottom: 0;
}
@media (max-width: 767.98px) {
.single-topic__content {
padding-top: 32px;
}
}
/* ─── single-topic credit（置中分隔線 + 灰階多行文字） ─── */
.single-topic__credit {
text-align: center;
padding-top: 56px;
}
.single-topic__credit-divider {
display: block;
width: 48px;
height: 1px;
background: var(--color-neutral-grey);
margin: 0 auto 24px;
}
.single-topic__credit-text {
color: var(--color-text-muted);
}
.single-topic__credit-text p {
font-family: var(--font-body3-family);
font-weight: var(--font-body3-weight);
font-size: var(--font-body3-size);
line-height: var(--font-body3-line-height);
letter-spacing: var(--font-body3-letter-spacing);
margin: 0 0 8px;
}
.single-topic__credit-text p:last-child {
margin-bottom: 0;
}
@media (max-width: 767.98px) {
.single-topic__credit {
padding-top: 32px;
}
}
/* ─── single-topic body/related wrapper（TWReporter 式灰底帶包裹文章列表） ─── */
.single-topic__body {
padding-bottom: 80px;
scroll-margin-top: 40px;
}
@media (max-width: 991.98px) {
.single-topic__body {
padding-bottom: 60px;
}
}
@media (max-width: 767.98px) {
.single-topic__body {
padding-bottom: 40px;
}
}
.single-topic__related {
background-color: var(--color-neutral-grey);
padding: 60px 0 50px;
}
.single-topic__related-inner {
max-width: 1440px;
margin: 0 auto;
padding: 0 clamp(32px, calc(41.25vw - 486px), 108px);
}
@media (max-width: 1199.98px) {
.single-topic__related {
padding: 52px 0 44px;
}
}
@media (max-width: 991.98px) {
.single-topic__related {
padding: 44px 0 36px;
}
}
@media (max-width: 767.98px) {
.single-topic__related {
padding: 32px 0 40px;
}
.single-topic__related-inner {
padding: 0 19px;
}
}
/* ─── /single-topic hero banner ─── */
.archive__layout {
display: grid;
grid-template-columns: minmax(0, 240px) 1fr;
gap: 48px;
}
.post-type-archive-topic .archive__layout {
grid-template-columns: 1fr;
}
.author-archive .archive__layout {
grid-template-columns: 1fr;
}
.archive__top {
grid-column: 1 / -1;
}
.articles__category-list {
display: flex;
flex-direction: column;
gap: 16px;
list-style: none;
margin: 0;
padding: 16px 0;
}
.articles__category-head {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: start;
width: 100%;
}
.articles__category-prev { grid-column: 1; justify-self: start; }
.articles__category-next { grid-column: 3; justify-self: end; }
.articles__category-prev,
.articles__category-next {
width: 32px;
height: 49px;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
color: var(--color-primary-blue);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: clip;
}
.articles__category-prev svg,
.articles__category-next svg {
width: 14px;
height: 32px;
display: block;
}
.articles__category-prev svg { transform: rotate(-90deg); }
.articles__category-next svg { transform: rotate(90deg); }
.swiper.articles__category-swiper {
width: 100%;
flex: 1;
overflow: hidden;
padding: 12px 16px 24px;
box-sizing: border-box;
position: relative;
}
@media (min-width: 768px) {
.articles__category-box {
height: calc(var(--articles-category-rows, 7) * 64px + 87px);
position: sticky;
top: 24px;
}
.swiper.articles__category-swiper .swiper-wrapper {
height: 100%;
}
.swiper.articles__category-swiper .swiper-slide {
margin-top: 0 !important;
height: 64px !important;
display: flex;
align-items: center;
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
.articles__category-box {
top: calc(var(--mobile-header-offset) + 24px);
}
}
@media (max-width: 767.98px) {
.articles__category-box {
height: auto;
padding: 0 24px;
}
.articles__category-prev,
.articles__category-next {
width: 60px;
height: 60px;
}
.articles__category-prev svg,
.articles__category-next svg {
width: 22px;
height: 50px;
}
.swiper.articles__category-swiper {
padding: 8px 0;
}
.swiper.articles__category-swiper .swiper-slide {
width: auto;
}
}
.articles__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.topics__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
@media (max-width: 991.98px) {
.topics__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767.98px) {
.topics__grid {
grid-template-columns: 1fr;
gap: 32px;
padding: 0 24px;
}
}
.articles__category-box {
width: 100%;
background: var(--color-white);
border: 1px solid var(--color-primary-blue);
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 12px;
}
.articles__category-box-title {
background: var(--color-primary-light);
border-bottom: 1px solid var(--color-primary-blue);
border-left: 1px solid var(--color-primary-blue);
border-right: 1px solid var(--color-primary-blue);
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
padding: 0 18px 12px;
font-family: var(--font-h3-family);
font-weight: var(--font-h3-weight);
font-size: var(--font-h3-size);
line-height: var(--font-h3-line-height);
letter-spacing: var(--font-h3-letter-spacing);
color: var(--color-primary-blue);
text-align: center;
white-space: nowrap;
flex-shrink: 0;
position: relative;
grid-column: 2;
justify-self: center;
}
.articles__category-box-title::before {
content: '';
position: absolute;
top: -2px;
left: 0;
right: 0;
height: 4px;
background: var(--color-primary-light);
}
.articles__pagination {
display: flex;
justify-content: center;
margin-top: 48px;
}
ul.page-numbers {
display: flex;
flex-direction: row;
list-style-type: none;
height: 26px;
gap: 16px;
}
ul.page-numbers li {
aspect-ratio: 1;
display: block;
}
ul.page-numbers li a,
ul.page-numbers li span {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
font-family: var(--font-family-museomoderno);
font-weight: var(--font-weight-regular);
font-size: 18px;
line-height: 1;
text-decoration: none;
border-radius: 10px;
}
ul.page-numbers li a:not(.prev, .next) {
color: var(--color-primary-blue);
transition: color 0.3s ease-out, background-color 0.3s ease-out;
}
ul.page-numbers li a:not(.prev, .next):hover {
color: var(--color-primary-light);
background: var(--color-secondary-purple);
}
ul.page-numbers li span.current {
color: var(--color-primary-light);
background: var(--color-primary-blue);
}
.prev.page-numbers,
.next.page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
background-color: var(--color-secondary-purple);
border: 1px solid var(--color-primary-blue);
border-radius: 50%;
transform: rotate(90deg);
}
.prev.page-numbers {
transform: rotate(-90deg) scaleX(-1);
}
.post-type-archive-topic ul.page-numbers li a:not(.prev, .next):hover,
.single-topic ul.page-numbers li a:not(.prev, .next):hover {
color: var(--color-primary-blue);
background-color: var(--color-secondary-yellow);
}
.post-type-archive-topic .prev.page-numbers,
.post-type-archive-topic .next.page-numbers,
.single-topic .prev.page-numbers,
.single-topic .next.page-numbers {
background-color: var(--color-secondary-yellow);
}
.post-type-archive-topic .prev.page-numbers svg path,
.post-type-archive-topic .next.page-numbers svg path,
.single-topic .prev.page-numbers svg path,
.single-topic .next.page-numbers svg path {
stroke: var(--color-primary-blue);
}
@media (max-width: 991.98px) {
.archive__inner {
min-height: calc(100vh - 88px);
}
.articles__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.archive__layout {
gap: 32px;
}
}
@media (max-width: 767.98px) {
.articles__grid {
grid-template-columns: minmax(0, 1fr);
}
.archive__layout {
grid-template-columns: 1fr;
gap: 24px;
}
}
/* =============================================================================
Page: Columns Index — 全部 column terms 列表
============================================================================= */
.page-columns__inner {
max-width: 1440px;
margin: 0 auto;
padding: 72px clamp(32px, calc(41.25vw - 486px), 108px) 120px;
min-height: calc(100vh - 100px);
}
.page-columns__layout {
display: grid;
grid-template-columns: 1fr;
gap: 48px;
}
.page-columns__grid {
display: grid;
grid-template-columns: repeat(var(--page-columns-cols, 4), 1fr);
background-color: var(--color-primary-blue);
gap: 1px;
padding: 1px;
border-radius: 20px;
overflow: clip;
}
.page-columns__grid .column-card {
aspect-ratio: 3 / 2;
}
/* Pagination 綠色 — mirror .post-type-archive-topic / .single-topic yellow override 同 pattern */
.page-columns ul.page-numbers li a:not(.prev, .next):hover {
color: var(--color-primary-blue);
background-color: var(--color-secondary-green);
}
.page-columns .prev.page-numbers,
.page-columns .next.page-numbers {
background-color: var(--color-secondary-green);
}
.page-columns .prev.page-numbers svg path,
.page-columns .next.page-numbers svg path {
stroke: var(--color-primary-blue);
}
@media (max-width: 991.98px) {
.page-columns__inner {
min-height: calc(100vh - 88px);
}
.page-columns__grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 767.98px) {
.page-columns__inner {
padding: 24px 19px 72px;
}
.page-columns__grid {
grid-template-columns: 1fr;
}
}
/* --- 4 角 .column-card border-radius 20px、跨 count × 跨斷點 --- */
@media (max-width: 767.98px) {
/* Mobile 1-col：4 角縮成 2 */
.page-columns__grid .column-card:first-child {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.page-columns__grid .column-card:last-child {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
/* Tablet 2-col 固定 */
.page-columns__grid .column-card:first-child {
border-top-left-radius: 20px;
}
.page-columns__grid .column-card:nth-child(2),
.page-columns__grid .column-card:last-child:nth-child(-n+2) {
border-top-right-radius: 20px;
}
.page-columns__grid .column-card:nth-child(2n+1):nth-last-child(-n+2) {
border-bottom-left-radius: 20px;
}
.page-columns__grid .column-card:last-child {
border-bottom-right-radius: 20px;
}
}
@media (min-width: 992px) {
/* ===== Desktop N = 2 ===== */
.page-columns__grid[style*="--page-columns-cols: 2"] .column-card:first-child {
border-top-left-radius: 20px;
}
.page-columns__grid[style*="--page-columns-cols: 2"] .column-card:nth-child(2),
.page-columns__grid[style*="--page-columns-cols: 2"] .column-card:last-child:nth-child(-n+2) {
border-top-right-radius: 20px;
}
.page-columns__grid[style*="--page-columns-cols: 2"] .column-card:nth-child(2n+1):nth-last-child(-n+2) {
border-bottom-left-radius: 20px;
}
.page-columns__grid[style*="--page-columns-cols: 2"] .column-card:last-child {
border-bottom-right-radius: 20px;
}
/* ===== Desktop N = 3 ===== */
.page-columns__grid[style*="--page-columns-cols: 3"] .column-card:first-child {
border-top-left-radius: 20px;
}
.page-columns__grid[style*="--page-columns-cols: 3"] .column-card:nth-child(3),
.page-columns__grid[style*="--page-columns-cols: 3"] .column-card:last-child:nth-child(-n+3) {
border-top-right-radius: 20px;
}
.page-columns__grid[style*="--page-columns-cols: 3"] .column-card:nth-child(3n+1):nth-last-child(-n+3) {
border-bottom-left-radius: 20px;
}
.page-columns__grid[style*="--page-columns-cols: 3"] .column-card:last-child {
border-bottom-right-radius: 20px;
}
/* ===== Desktop N = 4 ===== */
.page-columns__grid[style*="--page-columns-cols: 4"] .column-card:first-child {
border-top-left-radius: 20px;
}
.page-columns__grid[style*="--page-columns-cols: 4"] .column-card:nth-child(4),
.page-columns__grid[style*="--page-columns-cols: 4"] .column-card:last-child:nth-child(-n+4) {
border-top-right-radius: 20px;
}
.page-columns__grid[style*="--page-columns-cols: 4"] .column-card:nth-child(4n+1):nth-last-child(-n+4) {
border-bottom-left-radius: 20px;
}
.page-columns__grid[style*="--page-columns-cols: 4"] .column-card:last-child {
border-bottom-right-radius: 20px;
}
}
/* =============================================================================
Column archive — taxonomy-column.php
============================================================================= */
.column-archive__inner {
max-width: 1440px;
margin: 0 auto;
padding: 72px clamp(32px, calc(41.25vw - 486px), 108px) 120px;
min-height: calc(100vh - 100px);
}
.column-archive__layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 48px;
}
.column-archive__top {
display: grid;
grid-template-columns: auto 1fr;
gap: 32px;
align-items: center;
}
.column-archive__top-logo img {
display: block;
width: 100%;
max-width: 290px;
height: auto;
border: 1px solid;
border-radius: 20px;
}
.column-archive__top-text {
display: flex;
flex-direction: column;
gap: 16px;
}
.column-archive__description {
color: var(--color-primary-blue);
width: 100%;
max-width: 30em;
}
.column-archive__topic-heading,
.column-archive__post-heading {
font-family: var(--font-h3-family, var(--font-family-default));
font-weight: var(--font-h3-weight, var(--font-weight-bold));
font-size: var(--font-h3-size, 24px);
line-height: var(--font-h3-line-height, 1.4);
letter-spacing: var(--font-h3-letter-spacing, normal);
color: var(--color-primary-blue);
margin: 0 0 24px 0;
}
.column-archive__topic {
position: relative;
min-width: 0;
}
.column-archive__post-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
@media (max-width: 991.98px) {
.column-archive__inner {
min-height: calc(100vh - 88px);
}
.column-archive__post-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767.98px) {
.column-archive__inner {
padding: 24px 19px 72px;
}
.column-archive__top {
grid-template-columns: 1fr;
}
.column-archive__top-logo {
display: flex;
justify-content: center;
}
.column-archive__description {
text-align: center;
align-self: center;
}
/* viewport 滿寬 — 用 50% - 50vw 技巧，不依賴 parent padding 計算 */
.tax-column .topics__title-bar {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
}
/* =============================================================================
Column archive — body.tax-column scoped overrides
============================================================================= */
/* topic.php 黃 → 綠、文字色 → primary-light（#F5F5F5）*/
.tax-column .topic-card-tab,
.tax-column .topic-card-title {
background-color: var(--color-secondary-green);
color: var(--color-primary-light);
}
/* article.php media 紫 → 綠（hover 時露出的背景）*/
.tax-column .article-card-media {
background: var(--color-secondary-green);
}
/* pagination 紫 → 綠 — mirror .post-type-archive-topic yellow override 結構 */
.tax-column ul.page-numbers li a:not(.prev, .next):hover {
color: var(--color-primary-blue);
background-color: var(--color-secondary-green);
}
.tax-column .prev.page-numbers,
.tax-column .next.page-numbers {
background-color: var(--color-secondary-green);
}
.tax-column .prev.page-numbers svg path,
.tax-column .next.page-numbers svg path {
stroke: var(--color-primary-blue);
}
/* topics__title-bar 藍 → 綠 */
.tax-column .topics__title-bar {
background-color: var(--color-secondary-green);
}
.tax-column .topics__title-bar-track::before {
color: var(--color-secondary-green);
}
/* front-topics__grid pagination 紫 → 綠 */
.tax-column .front-topics__grid .swiper-pagination {
position: relative;
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
}
.tax-column .front-topics__grid .swiper-pagination-bullet {
width: 16px;
height: 16px;
margin: 0;
opacity: 1;
background-color: var(--color-neutral-grey);
}
.tax-column .front-topics__grid .swiper-pagination-bullet-active {
background-color: var(--color-secondary-green);
}
/* =============================================================================
Single post — single.php（3 sections × __section __inner __layout）
============================================================================= */
.post-article__inner {
max-width: 1440px;
margin: 0 auto;
padding: 72px clamp(32px, calc(41.25vw - 486px), 108px) 0;
}
.post-context__inner {
max-width: 1440px;
margin: 0 auto;
padding: 0 clamp(32px, calc(41.25vw - 486px), 108px) 148px;
}
.post-related__inner {
max-width: 1440px;
margin: 0 auto;
padding: 0 clamp(32px, calc(41.25vw - 486px), 108px) 96px;
}
.post-article__layout,
.post-context__layout,
.post-related__layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 60px;
}
@media (max-width: 767.98px) {
.post-article__inner {
padding: 40px 20px 0px;
}
.post-context__inner {
padding: 24px 20px 0px;
}
.post-related__inner {
padding: 32px 20px 72px;
}
}
/* --- post-article__layout override：flex column（蓋過 L4210 grid 共用規則）--- */
.post-article__section .post-article__layout {
display: flex;
flex-direction: column;
}
/* --- hero（heading + media 緊貼容器）--- */
.post-article__hero {
display: flex;
flex-direction: column;
}
.post-article__card {
display: flex;
flex-direction: column;
}
/* --- heading --- */
.post-article__heading {
display: flex;
flex-direction: column;
}
.post-article__badges {
display: flex;
align-items: flex-start;
}
/* --- badge --- */
.post-article__badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
border: 1px solid var(--color-primary-blue);
font-family: var(--font-h4-family);
font-weight: var(--font-h4-weight);
font-size: var(--font-h4-size);
line-height: var(--font-h4-line-height);
letter-spacing: var(--font-h4-letter-spacing);
color: var(--color-primary-blue);
white-space: nowrap;
}
.post-article__badge--topic {
background: var(--color-secondary-yellow);
border-right: 0;
border-bottom: 0;
border-radius: 10px 0 0 0;
padding-right: 12px;
padding-left: 24px;
}
.post-article__badge--category {
background: var(--color-primary-light);
border-left: 0;
border-bottom: 0;
border-radius: 0 10px 0 0;
padding-left: 12px;
padding-right: 24px;
}
@media (min-width: 768px) {
.post-article__badge--category:only-child {
border-left: 1px solid var(--color-primary-blue);
border-radius: 10px 10px 0 0;
padding-left: 24px;
}
.post-article__badge--topic:only-child {
border-right: 1px solid var(--color-primary-blue);
border-radius: 10px 10px 0 0;
padding-right: 24px;
}
}
/* --- title box --- */
.post-article__title-box {
padding: 24px;
background: var(--color-primary-light);
border: 1px solid var(--color-primary-blue);
border-bottom: 0;
}
.post-article__title {
margin: 0;
font-family: var(--font-h1-family);
font-weight: var(--font-h1-weight);
font-size: var(--font-h1-size);
line-height: var(--font-h1-line-height);
letter-spacing: 0.04em;
color: var(--color-primary-blue);
}
/* --- featured 圖框（meta 條上緣 -1px 貼齊邊框，避免雙線）--- */
.post-article__featured {
position: relative;
aspect-ratio: 1224 / 600;
border: 1px solid var(--color-primary-blue);
border-radius: 0 0 20px 20px;
overflow: hidden;
}
.post-article__featured-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* meta 條 top/left 各 -1px：與圖框邊框重疊而非雙線 */
.post-article__meta {
position: absolute;
top: -1px;
left: -1px;
margin: 0;
padding: 14px 25px;
list-style: none;
display: flex;
gap: 32px;
background: var(--color-primary-light);
border: 1px solid var(--color-primary-blue);
border-top: 0;
border-left: 0;
}
.post-article__meta-item {
font-family: var(--font-body1-family);
font-weight: var(--font-body1-weight);
font-size: var(--font-body1-size);
line-height: var(--font-body1-line-height);
letter-spacing: var(--font-body1-letter-spacing);
color: var(--color-primary-blue);
white-space: nowrap;
}
/* --- 圖說 --- */
.post-article__featured-img-caption {
margin-top: 16px;
margin-bottom: 0;
font-family: var(--font-body2-family);
font-weight: var(--font-body2-weight);
font-size: var(--font-body2-size);
line-height: var(--font-body2-line-height);
letter-spacing: var(--font-body2-letter-spacing);
color: var(--color-primary-blue);
}
.post-article__content h2,
.post-article__content h3 {
scroll-margin-top: 24px;
}
@media (max-width: 991.98px) {
.post-article__content h2,
.post-article__content h3 {
scroll-margin-top: var(--mobile-header-offset);
}
}
/* --- body 3 欄 --- */
.post-article__body {
display: grid;
grid-template-columns: 288px minmax(0, 808px) 1fr;
gap: 24px;
}
.post-article__outline {
padding-bottom: 40px;
}
.post-article__outline-container {
position: sticky;
top: 24px;
border: 1px solid var(--color-primary-blue);
border-radius: 20px;
padding: 0 24px 12px;
}
.post-article__outline-title {
display: flex;
justify-content: center;
width: fit-content;
margin: 0 auto;
background: var(--color-primary-light);
border-left: 1px solid var(--color-primary-blue);
border-right: 1px solid var(--color-primary-blue);
border-bottom: 1px solid var(--color-primary-blue);
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
padding: 0 18px 12px;
position: relative;
white-space: nowrap;
}
.post-article__outline-title::before {
content: "";
position: absolute;
top: -1px;
left: 0;
right: 0;
height: 1px;
background: var(--color-primary-light);
}
.post-article__outline-heading {
margin: 0;
font-family: var(--font-h3-family);
font-weight: var(--font-h3-weight);
font-size: var(--font-h3-size);
line-height: var(--font-h3-line-height);
letter-spacing: var(--font-h3-letter-spacing);
color: var(--color-primary-blue);
}
.post-article__outline-nav {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px 0;
}
.post-article__outline-item {
display: flex;
align-items: flex-start;
gap: 12px;
color: var(--color-primary-blue);
text-decoration: none;
transition: color 300ms ease-out;
}
.post-article__outline-item:hover {
color: var(--color-secondary-purple);
}
.post-article__outline-item--top {
font-family: var(--font-body3-family);
font-weight: var(--font-body3-weight);
font-size: var(--font-body3-size);
line-height: var(--font-body3-line-height);
letter-spacing: var(--font-body3-letter-spacing);
}
.post-article__outline-bullet {
flex-shrink: 0;
width: 26px;
height: 26px;
background: var(--color-secondary-purple);
border: 1px solid var(--color-primary-blue);
border-radius: 100px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.post-article__outline-bullet svg {
width: 12px;
height: 16px;
transform: rotate(90deg);
}
.post-article__outline-sub-list {
margin: 0;
padding: 0 0 0 38px;
list-style: none;
}
.post-article__outline-sub-list li {
position: relative;
padding-left: 12px;
color: var(--color-primary-blue);
}
.post-article__outline-sub-list li::before {
content: "•";
position: absolute;
left: 0;
color: var(--color-primary-blue);
font-size: 10px;
line-height: var(--font-body2-line-height);
transition: color 300ms ease-out;
}
.post-article__outline-sub-list li:hover::before {
color: var(--color-secondary-purple);
}
.post-article__outline-item--sub {
font-family: var(--font-body2-family);
font-weight: var(--font-body2-weight);
font-size: var(--font-body2-size);
line-height: var(--font-body2-line-height);
letter-spacing: var(--font-body2-letter-spacing);
}
.post-article__share {
padding-bottom: 40px;
}
.post-article__share-container {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 32px;
position: sticky;
top: 24px;
}
.post-article__share-label {
display: none;
}
.post-article__share-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
background: transparent;
border: 0;
color: var(--color-primary-blue);
cursor: pointer;
transition: color 300ms ease-out;
}
.post-article__share-btn svg {
width: 100%;
height: 100%;
}
.post-article__share-btn:hover {
color: var(--color-secondary-purple);
}
.post-article__content {
max-width: 600px;
margin: 0 auto;
padding: 0 36px;
}
.page-content .post-article__content {
max-width: 960px;
}
.post-article__intro {
margin: 0 -36px;
padding-bottom: 48px;
border-bottom: 1px solid var(--color-primary-blue);
font-family: var(--font-body1-family);
font-weight: var(--font-body1-weight);
font-size: var(--font-body1-size);
line-height: var(--font-body1-line-height);
letter-spacing: 0.05em;
color: var(--color-text-dark-blue);
}
.post-article__content p:not(.post-article__intro) {
margin: 0;
padding-bottom: 40px;
font-family: var(--font-body1-family);
font-weight: var(--font-body1-weight);
font-size: var(--font-body1-size);
line-height: var(--font-body1-line-height);
letter-spacing: var(--font-body1-letter-spacing);
color: var(--color-text-dark-blue);
}
.post-article__content h2.wp-block-heading {
margin: 0;
padding: 48px 0;
font-family: var(--font-h2-family);
font-weight: var(--font-h2-weight);
font-size: var(--font-h2-size);
line-height: var(--font-h2-line-height);
letter-spacing: var(--font-h2-letter-spacing);
color: var(--color-text-dark-blue);
}
.post-article__content h3.wp-block-heading {
margin: 0;
padding-bottom: 32px;
font-family: var(--font-h3-family);
font-weight: var(--font-h3-weight);
font-size: var(--font-h3-size);
line-height: var(--font-h3-line-height);
letter-spacing: var(--font-h3-letter-spacing);
color: var(--color-text-dark-blue);
}
.post-article__content .wp-block-image {
margin: 0 -36px;
padding-top: 16px;
padding-bottom: 40px;
}
.post-article__content .wp-block-image > img {
display: block;
width: 100% !important;
height: auto;
aspect-ratio: 600 / 400;
object-fit: cover;
object-position: center;
border-radius: 20px;
}
.post-article__content .wp-block-image figcaption {
margin-top: 16px;
padding: 0 72px;
font-family: var(--font-body2-family);
font-weight: var(--font-body2-weight);
font-size: var(--font-body2-size);
line-height: var(--font-body2-line-height);
letter-spacing: var(--font-body2-letter-spacing);
color: var(--color-primary-blue);
}
.post-article__content .wp-block-quote {
margin: 0 -36px 40px;
padding: 0 72px 16px;
background: var(--color-white);
border-radius: 10px;
}
.page-content .post-article__content .wp-block-quote {
margin: 0 0px 40px;
padding: 32px 36px 16px;
}
/* Quote 內 h3 padding 透過 specificity override 外層 h3 的 pb-32 */
.post-article__content .wp-block-quote h3.wp-block-heading {
padding: 32px 0;
}
.post-article__content .wp-block-list {
margin: 0;
padding-bottom: 40px;
padding-left: 1.5em;
list-style-position: outside;
font-family: var(--font-body1-family);
font-weight: var(--font-body1-weight);
font-size: var(--font-body1-size);
line-height: var(--font-body1-line-height);
letter-spacing: var(--font-body1-letter-spacing);
color: var(--color-text-dark-blue);
}
.post-article__content .wp-block-list li {
margin-bottom: 8px;
}
.post-article__content .wp-block-list li:last-child {
margin-bottom: 0;
}
.post-article__content ul.wp-block-list li {
line-height: var(--line-height-tight);
margin-bottom: 4px;
padding: 0;
}
.post-article__content ul.wp-block-list li a {
color: var(--color-primary-blue);
font-size: var(--font-body2-size);
letter-spacing: var(--font-body2-link-letter-spacing);
text-decoration: none;
}
.post-article__content ul.wp-block-list li a:hover {
text-decoration: underline;
}
/* =============================================================================
post-context — 3-column aside（team / FAQ / column intro / donate）
============================================================================= */
/* --- layout override：3 欄 grid（蓋過 L4214 共用 1-column grid）--- */
.post-context__section .post-context__layout {
display: grid;
grid-template-columns: 288px minmax(0, 808px) 1fr;
gap: 24px;
}
/* --- main：flex column，section 之間 gap --- */
.post-context__main {
display: flex;
flex-direction: column;
gap: 40px;
max-width: 600px;
width: 100%;
margin: 0 auto;
}
/* --- team --- */
.post-context__team-container {
position: sticky;
top: 24px;
border: 1px solid var(--color-primary-blue);
border-radius: 20px;
padding: 0 24px 24px;
}
.post-context__team-title {
display: flex;
justify-content: center;
width: fit-content;
margin: 0 auto;
background: var(--color-primary-light);
border-left: 1px solid var(--color-primary-blue);
border-right: 1px solid var(--color-primary-blue);
border-bottom: 1px solid var(--color-primary-blue);
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
padding: 0 18px 12px;
position: relative;
white-space: nowrap;
}
/* 蓋掉 container 頂邊框、使 hanging tab 視覺上不與頂線重疊 */
.post-context__team-title::before {
content: "";
position: absolute;
top: -1px;
left: 0;
right: 0;
height: 1px;
background: var(--color-primary-light);
}
.post-context__team-heading {
margin: 0;
font-family: var(--font-h3-family);
font-weight: var(--font-h3-weight);
font-size: var(--font-h3-size);
line-height: var(--font-h3-line-height);
letter-spacing: var(--font-h3-letter-spacing);
color: var(--color-primary-blue);
}
.post-context__team-list {
margin: 0;
padding: 16px 0 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.post-context__team-row {
display: flex;
gap: 12px;
align-items: baseline;
}
.post-context__team-label,
.post-context__team-value {
margin: 0;
font-family: var(--font-body3-family);
font-size: var(--font-body3-size);
line-height: var(--font-body3-line-height);
letter-spacing: var(--font-body3-letter-spacing);
color: var(--color-primary-blue);
}
.post-context__team-label {
font-weight: var(--font-weight-regular);
}
.post-context__team-value {
font-weight: var(--font-weight-bold);
}
.post-context__team-link {
color: inherit;
text-decoration: none;
}
.post-context__team-link:hover,
.post-context__team-link:focus-visible {
text-decoration: underline;
}
/* --- FAQ container + accordion --- */
.post-context__faq {
border: 1px solid var(--color-primary-blue);
border-radius: 10px;
overflow: clip;
background: var(--color-primary-light);
}
.post-context__faq-title {
background: var(--color-primary-blue);
padding: 16px 24px 16px 72px;
}
.post-context__faq-heading {
margin: 0;
font-family: var(--font-h3-family);
font-weight: var(--font-h3-weight);
font-size: var(--font-h3-size);
line-height: var(--font-h3-line-height);
letter-spacing: var(--font-h3-letter-spacing);
color: var(--color-white);
}
.post-context__faq-item {
border-bottom: 1px solid var(--color-primary-blue);
}
.post-context__faq-item:last-child {
border-bottom: 0;
}
.post-context__faq-question {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 72px;
gap: 24px;
cursor: pointer;
list-style: none;
}
/* 移除 WebKit 預設 disclosure triangle */
.post-context__faq-question::-webkit-details-marker {
display: none;
}
.post-context__faq-question-text {
flex: 1;
font-family: var(--font-h4-family);
font-weight: var(--font-h4-weight);
font-size: var(--font-h4-size);
line-height: var(--font-h4-line-height);
letter-spacing: var(--font-h4-letter-spacing);
color: var(--color-primary-blue);
}
.post-context__faq-toggle {
flex-shrink: 0;
width: 24px;
height: 24px;
background: var(--color-secondary-purple);
border: 1px solid var(--color-primary-blue);
border-radius: 100px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-primary-light);
}
.post-context__faq-toggle-icon {
display: block;
width: 14px;
height: 14px;
}
.post-context__faq-toggle-bar {
transform: rotate(0deg);
transform-origin: center;
transform-box: fill-box;
transition: transform 300ms ease-out;
}
.post-context__faq-item[open] .post-context__faq-toggle-bar--v {
transform: rotate(90deg);
}
.post-context__faq-item::details-content {
block-size: 0;
overflow: hidden;
transition:
content-visibility 300ms ease-out allow-discrete,
block-size 300ms ease-out;
}
.post-context__faq-item[open]::details-content {
block-size: auto;
}
.post-context__faq-answer {
background: var(--color-white);
padding: 12px 72px;
}
.post-context__faq-answer p {
margin: 0;
font-family: var(--font-body3-family);
font-weight: var(--font-body3-weight);
font-size: var(--font-body3-size);
line-height: var(--font-body3-line-height);
letter-spacing: var(--font-body3-letter-spacing);
color: var(--color-primary-blue);
}
/* --- column intro --- */
.post-context__column-intro {
border: 1px solid var(--color-primary-blue);
border-radius: 10px;
overflow: clip;
display: flex;
align-items: stretch;
}
.post-context__column-image {
position: relative;
flex-shrink: 0;
width: 300px;
background: var(--color-white);
overflow: clip;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.post-context__column-image::after {
content: "";
position: absolute;
inset: 0;
background-color: var(--color-black);
opacity: 0;
transition: opacity 300ms ease-out;
pointer-events: none;
}
@media (hover: hover) {
.post-context__column-image:hover::after {
opacity: 0.2;
}
}
.post-context__column-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.post-context__column-info {
flex: 1;
display: flex;
flex-direction: column;
border-left: 1px solid var(--color-primary-blue);
}
.post-context__column-title {
background: var(--color-secondary-green);
border-bottom: 1px solid var(--color-primary-blue);
padding: 16px 24px;
}
.post-context__column-heading {
margin: 0;
font-family: var(--font-h3-family);
font-weight: var(--font-h3-weight);
font-size: var(--font-h3-size);
line-height: var(--font-h3-line-height);
letter-spacing: var(--letter-spacing-normal);
color: var(--color-primary-blue);
}
.post-context__column-body {
display: flex;
flex-direction: column;
gap: 16px;
padding: 16px 24px;
}
.post-context__column-name {
margin: 0;
font-family: var(--font-h4-family);
font-weight: var(--font-h4-weight);
font-size: var(--font-h4-size);
line-height: var(--font-h4-line-height);
letter-spacing: var(--font-h4-letter-spacing);
color: var(--color-primary-blue);
}
.post-context__column-description {
margin: 0;
font-family: var(--font-body1-family);
font-weight: var(--font-body1-weight);
font-size: var(--font-body1-size);
line-height: 30px;
letter-spacing: 0.05em;
color: var(--color-primary-blue);
}
.post-context__column-updated {
margin: 0;
font-family: var(--font-body3-family);
font-weight: var(--font-body3-weight);
font-size: var(--font-body3-size);
line-height: var(--font-body3-line-height);
letter-spacing: var(--font-body3-letter-spacing);
color: var(--color-primary-blue);
}
/* --- donate banner --- */
.post-context__donate {
display: flex;
align-items: center;
justify-content: space-between;
padding: 32px 32px 32px 72px;
background: var(--color-primary-blue);
border-radius: 10px;
text-decoration: none;
color: var(--color-white);
}
.post-context__donate-text {
font-family: var(--font-h3-family);
font-weight: var(--font-h3-weight);
font-size: var(--font-h3-size);
line-height: var(--font-h3-line-height);
letter-spacing: var(--font-h3-letter-spacing);
}
.post-context__donate-cta {
display: inline-flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
height: 55px;
padding: 0 12px;
background: var(--color-secondary-yellow);
border-left: 1px solid var(--color-primary-blue);
border-radius: 20px;
overflow: clip;
}
.post-context__donate-label {
font-family: var(--font-family-montserrat), var(--font-family-cjk), sans-serif;
font-weight: var(--font-weight-bold);
font-size: 18px;
line-height: 24px;
letter-spacing: 0.05em;
color: var(--color-primary-blue);
}
.post-context__donate-icon {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.post-context__donate-icon-mobile {
display: none;
}
/* =============================================================================
post-related — 3-column layout（title / articles / aside）
============================================================================= */
.post-related__section .post-related__layout {
display: grid;
grid-template-columns: 288px minmax(0, 808px) 1fr;
gap: 24px;
}
.post-related__title {
display: flex;
flex-direction: column;
gap: 4px;
}
.post-related__title-zh {
margin: 0;
font-family: var(--font-h2-family);
font-weight: var(--font-h2-weight);
font-size: var(--font-h2-size);
line-height: var(--font-h2-line-height);
letter-spacing: var(--font-h2-letter-spacing);
color: var(--color-primary-blue);
}
.post-related__title-en {
margin: 0;
font-family: var(--font-family-museomoderno);
font-weight: var(--font-weight-regular);
font-size: 24px;
line-height: normal;
color: var(--color-primary-blue);
}
.post-related__articles {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 40px 24px;
}
/* 單卡時對齊 .post-context__donate 左緣：donate 所在的 .post-context__main 為 600px 置中於 .post-related__layout 中間 808px 欄 */
.post-related__articles:has(> .article-card:only-child) {
grid-template-columns: minmax(0, 392px);
justify-content: start;
padding-left: calc((100% - 600px) / 2);
}
@media (max-width: 991.98px) {
.post-article__body {
grid-template-columns: minmax(0, 1fr) 64px;
grid-template-areas:
"outline share"
"content share";
gap: 32px;
}
.post-article__outline { grid-area: outline; }
.post-article__content { grid-area: content; max-width: 100%; }
.post-article__share { grid-area: share; }
.post-article__outline-container { position: static; top: auto; }
.post-article__section .post-article__layout,
.post-context__section .post-context__layout,
.post-related__section .post-related__layout {
gap: 48px;
}
.post-context__section .post-context__layout { grid-template-columns: minmax(0, 1fr); }
.post-context__main { max-width: 100%; }
.post-context__team-container { position: static; top: auto; }
.post-related__section .post-related__layout {
grid-template-columns: minmax(0, 1fr);
}
.post-related__articles:has(> .article-card:only-child) {
grid-template-columns: repeat(2, minmax(0, 1fr));
padding-left: 0;
}
}
@media (max-width: 767.98px) {
.post-article__section .post-article__layout {
gap: 24px;
}
.post-article__card {
border: 3px solid var(--color-primary-blue);
border-radius: 20px;
overflow: clip;
}
/* display: contents 攤平 __media + __featured，讓 img / heading / meta 變成 __hero 的直接 flex 兒子（才能 order 重排） */
.post-article__media,
.post-article__featured {
display: contents;
}
/* 重排：圖在最上、heading 中、meta 在底 */
.post-article__featured-img { order: 1; }
.post-article__heading { order: 2; }
.post-article__meta { order: 3; }
/* 圖：固定 240 高、margin-bottom -50 讓 heading 浮上來與圖底重疊（取代桌機 absolute / aspect-ratio） */
.post-article__featured-img {
position: static;
width: 100%;
height: 240px;
object-fit: cover;
margin-bottom: -50px;
}
/* heading 在卡片內、position relative 升 z-context 蓋過圖 */
.post-article__heading {
position: relative;
width: 100%;
}
/* badges 兩個改 column 排：category 上、topic 下；各自獨立樣式覆寫 */
.post-article__badges {
display: flex;
flex-direction: column;
width: 100%;
}
/* category badge 手機：小、左貼、上兩角 10px 圓角、l/r/t 邊框 */
.post-article__badge--category {
align-self: flex-start;
order: 1;
padding: 12px 8px;
border: 1px solid var(--color-primary-blue);
border-bottom: 0;
border-radius: 10px 10px 0 0;
line-height: var(--font-h3-line-height);
}
/* topic badge 手機：全寬、黃底、無圓角、l/r/t 邊框、可換行 */
.post-article__badge--topic {
order: 2;
width: 100%;
padding: 12px 8px;
border: 1px solid var(--color-primary-blue);
border-bottom: 0;
border-radius: 0;
white-space: normal;
justify-content: flex-start;
line-height: var(--font-h3-line-height);
}
/* title-box 手機 padding */
.post-article__title-box {
padding: 18px 8px;
}
/* title 手機切到 H2 token（自動取 mobile override 後的 26/40/0） */
.post-article__title {
font-family: var(--font-h2-family);
font-weight: var(--font-h2-weight);
font-size: var(--font-h2-size);
line-height: var(--font-h2-line-height);
letter-spacing: var(--font-h2-letter-spacing);
}
.post-article__meta {
position: static;
background: var(--color-primary-light);
border: 1px solid var(--color-primary-blue);
border-top: 0;
border-radius: 0 0 calc(20px - 3px) calc(20px - 3px);
padding: 12px 8px 16px;
display: grid;
grid-template-columns: max-content max-content;
column-gap: 12px;
row-gap: 8px;
justify-content: start;
width: 100%;
}
/* meta-item 字體切到 body2（手機更小） */
.post-article__meta-item {
font-family: var(--font-body2-family);
font-weight: var(--font-body2-weight);
font-size: var(--font-body2-size);
line-height: var(--font-body2-line-height);
letter-spacing: var(--font-body2-letter-spacing);
}
.post-article__featured-img-caption {
margin-top: 12px;
margin-bottom: 0;
}
.post-article__body {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: none;
gap: 0;
}
.post-article__outline,
.post-article__content,
.post-article__share {
grid-area: auto;
}
.post-article__outline {
margin-bottom: 24px;
padding-bottom: 0;
}
.post-article__share {
margin: 0 -20px;
background: var(--color-white);
padding: 8px 20px;
}
.post-article__share-container {
flex-direction: row;
justify-content: center;
align-items: center;
gap: 24px;
position: relative;
top: 0;
}
.post-article__share-label {
display: inline-block;
font-family: var(--font-body1-family);
font-weight: var(--font-body1-weight);
font-size: var(--font-body1-size);
line-height: 40px;
letter-spacing: 0;
color: var(--color-primary-blue);
white-space: nowrap;
}
.post-article__outline-container {
position: relative;
top: 0;
padding: 0 16px 8px;
}
.post-article__outline-heading {
font-size: 24px;
line-height: 36px;
}
.post-article__content {
padding: 0 16px;
}
.post-article__intro {
margin: 0 -16px;
padding-bottom: 24px;
}
.post-article__content p:not(.post-article__intro) {
padding-bottom: 24px;
font-size: 16px;
line-height: 32px;
letter-spacing: 0.04em;
}
.post-article__content .wp-block-list {
padding-bottom: 24px;
font-size: 16px;
line-height: 32px;
letter-spacing: 0.04em;
}
.post-article__content h2.wp-block-heading {
padding: 24px 0 16px;
}
.post-article__content h2.wp-block-heading:has(+ h3.wp-block-heading) {
padding: 24px 0 12px;
}
.post-article__content h3.wp-block-heading {
padding-bottom: 16px;
font-size: 22px;
line-height: 36px;
letter-spacing: 0.05em;
}
.post-article__content .wp-block-image {
margin-top: 0;
margin-right: -20px;
margin-bottom: 0;
margin-left: -20px;
}
.post-article__content .wp-block-image figcaption {
margin-bottom: 0;
padding: 0 16px;
}
.post-article__content .wp-block-quote {
margin: 0 -16px;
padding: 36px 36px 12px;
}
.post-article__content .wp-block-quote h3.wp-block-heading {
padding: 0 0 16px;
}
.post-context__donate-icon-desktop {
display: none;
}
.post-context__donate-icon-mobile {
display: block;
}
.post-context__main {
gap: 24px;
}
.post-context__column-intro {
margin-bottom: 16px;
}
.post-context__team-container {
border-radius: 10px;
padding: 0 16px 16px;
}
.post-context__team-list {
padding-top: 8px;
}
.post-context__faq-title {
padding: 16px;
}
.post-context__faq-heading {
font-size: 22px;
}
.post-context__faq-question {
padding: 12px 16px;
}
.post-context__faq-question-text {
font-family: var(--font-body3-family);
font-weight: var(--font-weight-bold);
font-size: var(--font-body3-size);
line-height: var(--font-body3-line-height);
letter-spacing: var(--font-body3-letter-spacing);
}
.post-context__faq-answer {
padding: 12px 16px;
}
.post-context__column-intro {
flex-direction: column;
}
.post-context__column-image {
width: 100%;
height: 240px;
}
.post-context__column-info {
border-left: 0;
border-top: 1px solid var(--color-primary-blue);
}
.post-context__column-title {
padding: 16px;
}
.post-context__column-heading {
font-size: 22px;
color: var(--color-text-dark-blue);
}
.post-context__column-body {
gap: 8px;
padding: 16px;
}
.post-context__column-description {
font-size: 16px;
}
.post-context__donate {
flex-direction: column;
justify-content: flex-start;
gap: 12px;
margin: 0 -20px;
padding: 24px 32px;
border-radius: 0;
}
.post-context__donate-text {
font-size: 22px;
}
.post-context__donate-cta {
height: 47px;
border-radius: 10px;
}
.post-context__donate-label {
font-size: 16px;
}
.post-related__articles {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px 8px;
}
}
.toast {
position: fixed;
bottom: 24px;
left: 50%;
z-index: 1000;
padding: 12px 24px;
background: var(--color-primary-blue);
color: var(--color-white);
border-radius: 8px;
font-family: var(--font-body3-family);
font-weight: var(--font-body3-weight);
font-size: var(--font-body3-size);
line-height: var(--font-body3-line-height);
letter-spacing: var(--font-body3-letter-spacing);
opacity: 0;
transform: translate(-50%, 20px);
transition: opacity 0.3s ease, transform 0.3s ease;
pointer-events: none;
}
.toast--visible {
opacity: 1;
transform: translate(-50%, 0);
}
.author-profile {
display: flex;
align-items: flex-start;
gap: 32px;
}
.author-profile__photo {
flex: 0 0 auto;
width: 150px;
height: 150px;
border-radius: 50%;
overflow: hidden;
}
.author-profile__photo-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.author-profile__text {
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
}
.author-profile__headline {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 12px;
}
.author-profile__name {
margin: 0;
font-family: var(--font-h2-family);
font-weight: var(--font-h2-weight);
font-size: var(--font-h2-size);
line-height: var(--font-h2-line-height);
letter-spacing: var(--font-h2-letter-spacing);
color: var(--color-primary-blue);
}
.author-profile__title {
margin: 0;
font-family: var(--font-h4-family);
font-weight: var(--font-h4-weight);
font-size: var(--font-h4-size);
line-height: var(--font-h4-line-height);
letter-spacing: var(--font-h4-letter-spacing);
color: var(--color-primary-blue);
}
.author-profile__social {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.author-profile__social-item {
margin: 0;
}
.author-profile__social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: 1px solid var(--color-primary-blue);
border-radius: 50%;
background: transparent;
color: var(--color-primary-blue);
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease;
}
.author-profile__social-link:hover {
background: var(--color-primary-blue);
color: var(--color-white);
}
.author-profile__social-link .social-icon {
width: 20px;
height: 20px;
}
@media (max-width: 767.98px) {
.author-profile {
flex-direction: column;
align-items: center;
text-align: center;
}
.author-profile__headline {
justify-content: center;
}
.author-profile__social {
justify-content: center;
}
}
/* =============================================================================
single-topic hero — header 疊層透明化（banner 滿版 100svh，header 浮在圖上）
============================================================================= */
body.single-topic .site-header {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
background: transparent;
border-top: none;
}
body.single-topic .site-header__brand-zh,
body.single-topic .site-header__brand-en {
color: var(--color-white);
}
@media (max-width: 991.98px) {
body.single-topic .site-header {
background: transparent;
border-bottom: none;
}
body.single-topic::after {
background: transparent;
}
body.single-topic .site-main {
margin-top: 0;
}
}
/* =============================================================================
about-page — 「關於我們」(page-about-us.php)
無 Figma 設計稿；比照 .front-section__title-zh（H2 藍標題）、
.post-context__faq / .post-context__team-container（1px primary-blue 邊框
+ 圓角卡片）、.author-profile__headline（姓名+職稱同行）、
.post-context__donate-cta（圓角 CTA 按鈕）等既有 pattern 重建，
色彩/字體一律沿用既有 :root token。
============================================================================= */
/* --- 整頁區段垂直節奏：以 flex column + gap 統一控制間距 --- */
.about-page__inner {
display: flex;
flex-direction: column;
gap: 80px;
}
@media (max-width: 1199.98px) {
.about-page__inner {
gap: 72px;
}
}
@media (max-width: 991.98px) {
.about-page__inner {
gap: 56px;
}
}
@media (max-width: 767.98px) {
.about-page__inner {
gap: 40px;
}
}
/* --- 區段大標：比照 .front-section__title-zh 走 H2 藍 --- */
.about__section-title {
margin: 0 0 24px;
font-family: var(--font-h2-family);
font-weight: var(--font-h2-weight);
font-size: var(--font-h2-size);
line-height: var(--font-h2-line-height);
letter-spacing: var(--font-h2-letter-spacing);
color: var(--color-primary-blue);
}
@media (max-width: 767.98px) {
.about__section-title {
margin-bottom: 20px;
}
}
/* --- 區段大標旁英文小標：inline span 比照 .front-section__title-en / .page__title-en 樣式，
但因這裡是 h2 內緊接中文文字後的 inline span（非 flex sibling），間距改用 margin-left
取代 flex gap，數值沿用同檔案 .front-section__title / .page__title 的 12px 節奏 --- */
.about__section-title-en {
margin-left: 12px;
font-family: var(--font-family-museomoderno);
font-weight: var(--font-weight-regular);
font-size: 24px;
line-height: normal;
letter-spacing: 0;
color: var(--color-primary-blue);
}
/* --- 組織介紹：body1 敘事文，段落間距舒適，閱讀寬度限制 --- */
.about__intro {
max-width: 820px;
font-family: var(--font-body1-family);
font-weight: var(--font-body1-weight);
font-size: var(--font-body1-size);
line-height: var(--font-body1-line-height);
letter-spacing: var(--font-body1-letter-spacing);
color: var(--color-text-dark-blue);
}
.about__intro p {
margin: 0 0 24px;
}
.about__intro p:last-child {
margin-bottom: 0;
}
/* --- 我們目前關注：直式條列（與下方 methods 卡片格線做視覺區隔）--- */
.about__focus-grid {
border-top: 1px solid var(--color-primary-blue);
}
.about__focus-card {
display: flex;
align-items: flex-start;
gap: 24px;
padding: 24px 0;
border-bottom: 1px solid var(--color-primary-blue);
}
.about__focus-media {
flex: 0 0 200px;
aspect-ratio: 4 / 3;
border-radius: 12px;
background: var(--color-neutral-grey);
}
.about__focus-text {
display: flex;
flex-direction: column;
gap: 12px;
flex: 1 1 auto;
min-width: 0;
}
.about__focus-title {
margin: 0;
font-family: var(--font-h3-family);
font-weight: var(--font-h3-weight);
font-size: var(--font-h3-size);
line-height: var(--font-h3-line-height);
letter-spacing: var(--font-h3-letter-spacing);
color: var(--color-primary-blue);
}
.about__focus-body {
font-family: var(--font-body1-family);
font-weight: var(--font-body1-weight);
font-size: var(--font-body1-size);
line-height: var(--font-body1-line-height);
letter-spacing: var(--font-body1-letter-spacing);
color: var(--color-text-dark-blue);
}
@media (max-width: 767.98px) {
.about__focus-card {
flex-direction: column;
gap: 8px;
padding: 20px 0;
}
.about__focus-media {
flex: 0 0 auto;
width: 100%;
}
/* 桌機已改用 H3 token（比照 .about__method-label），手機維持原本大小，改回 H4 token。
font-weight 沿用改版前手機現況的 --font-weight-bold（非 --font-h4-weight 的 semibold），
避免因 token 換算間接改變手機粗細觀感 */
.about__focus-title {
font-family: var(--font-h4-family);
font-weight: var(--font-weight-bold);
font-size: var(--font-h4-size);
line-height: var(--font-h4-line-height);
letter-spacing: var(--font-h4-letter-spacing);
}
}
/* --- 我們目前怎麼做：3 欄卡片格線，站台卡片風（1px primary-blue 邊框 + 10px 圓角）--- */
.about__methods {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px;
margin: 0;
padding: 0;
list-style: none;
}
.about__method {
display: flex;
flex-direction: column;
border: 1px solid var(--color-primary-blue);
border-radius: 20px;
padding: 32px;
}
/* 黑色線稿 PNG（透明底）置中 + 用 filter 上色成接近 --color-primary-blue（#160068）。
來源為純黑，故 invert 先拉出灰階基底，再用 sepia + 大幅 saturate 導出色相、
hue-rotate 轉到目標色相、brightness/contrast 收斂明暗與飽和，
數值經程式化色彩模擬反覆逼近，非肉眼試誤隨機值。
margin-top: auto 利用 .about__method 的 flex column 把 icon 推到卡片底部，
讓三張卡（body 行數不一）的 icon 仍對齊在同一水平基準 */
.about__method-icon {
display: block;
width: 84px;
height: auto;
margin-top: auto;
margin-inline: auto;
filter: invert(11%) sepia(88%) saturate(2600%) hue-rotate(250deg) brightness(84%) contrast(134%);
}
.about__method-label {
display: block;
text-align: center;
margin: 0 0 12px;
font-family: var(--font-h3-family);
font-weight: var(--font-h3-weight);
font-size: var(--font-h3-size);
line-height: var(--font-h3-line-height);
letter-spacing: var(--font-h3-letter-spacing);
color: var(--color-primary-blue);
}
.about__method-body {
font-family: var(--font-body1-family);
font-weight: var(--font-body1-weight);
font-size: var(--font-body1-size);
line-height: var(--font-body1-line-height);
letter-spacing: var(--font-body1-letter-spacing);
color: var(--color-text-dark-blue);
}
@media (max-width: 991.98px) {
.about__methods {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.about__method {
padding: 24px;
}
}
@media (max-width: 767.98px) {
.about__methods {
grid-template-columns: 1fr;
gap: 20px;
}
}
/* --- 團隊成員：卡片格線比照 focus，headline 姓名+職稱同行比照 .author-profile__headline ---
版面改為「卡內頂部紫帶 + 頭像騎壓紫帶」的常見團隊卡樣式：
- .about__member 拿掉四邊 padding、改 overflow:hidden，讓 .about__member-bar 滿版 bleed 到卡片邊緣，
且卡片本身的 20px 圓角會順帶把紫帶方角裁成圓角，不需在紫帶上另外處理左右圓角
- 底部/左右內距改分別交給 .about__member（僅留 padding-bottom）與 .about__member-body（padding-inline）負責
- .about__member-photo 改固定 150x150 + border-radius:50%（比照 .author-profile__photo 圓形頭像寫法），
用負 margin-top（= 紫帶高度）把頭像頂到紫帶頂端，讓頭像上半部疊在紫帶上、下半部落在紫帶下方 */
.about__team {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px;
}
.about__member {
display: flex;
flex-direction: column;
border: 1px solid var(--color-primary-blue);
border-radius: 20px;
overflow: hidden;
padding-bottom: 32px;
text-align: center;
}
/* 卡內紫帶：沿用 .articles__title-bar 紫色 + marquee + 捲動（見上方第 712 行），
這裡只覆寫尺寸與圓角以符合卡片內縮小版的比例。不可改動 .articles__title-bar 本身（首頁 Article 區共用） */
.about__member-bar {
height: 88px;
border-radius: 20px 20px 0 0;
}
/* 三張卡的紫帶視覺上要接成「一整條連續文字帶」，每張卡只是開窗（遮罩，見 .about__member-bar /
.about__member 既有的 overflow:hidden/clip）。做法：把第 2、3 張卡的 track 往左位移「卡寬 + gap」
的整數倍，track 容器滿卡寬（無 padding），故 100% = 一個卡寬；gap 讀自 .about__team 的 grid-gap 32px。
捲動視差由 front-marquee.js 對三張卡的 track 同步套 transform，與這裡的靜態 margin-left 疊加，
跨卡連續性在捲動時仍成立。桌機（含桌機緊湊 ≥ 992）皆為 3 欄 gap:32px，沿用同一份數值。 */
.about__team .about__member:nth-child(2) .articles__title-bar-track {
margin-left: calc(-100% - 32px);
}
.about__team .about__member:nth-child(3) .articles__title-bar-track {
margin-left: calc(-200% - 64px);
}
.about__member-photo {
width: 150px;
height: 150px;
margin: -64px auto 16px;
border-radius: 50%;
overflow: hidden;
border: 4px solid var(--color-white);
background: var(--color-white);
position: relative;
z-index: 1;
}
.about__member-photo-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.about__member-body {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
padding-inline: 32px;
}
.about__member-headline {
display: flex;
align-items: baseline;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
margin: 0;
}
.about__member-name {
font-family: var(--font-h3-family);
font-weight: var(--font-h3-weight);
font-size: var(--font-h3-size);
line-height: var(--font-h3-line-height);
letter-spacing: var(--font-h3-letter-spacing);
color: var(--color-primary-blue);
}
.about__member-role {
font-family: var(--font-h5-family);
font-weight: var(--font-h5-weight);
font-size: var(--font-h5-size);
line-height: var(--font-h5-line-height);
letter-spacing: var(--font-h5-letter-spacing);
color: var(--color-primary-blue);
}
.about__member-bio {
font-family: var(--font-body1-family);
font-weight: var(--font-body1-weight);
font-size: var(--font-body1-size);
line-height: var(--font-body1-line-height);
letter-spacing: var(--font-body1-letter-spacing);
color: var(--color-text-dark-blue);
}
/* 平板/手機紫帶改為「每張卡各自獨立」：桌機的跨卡連續帶靠 nth-child 靜態位移把三張卡接成一條，
但 2 欄/1 欄版面沒有「跨卡相鄰」的視覺前提，故把 nth-child 位移歸零、每卡各自從頭顯示。
捲動維持由 front-marquee.js 的捲動視差提供（隨頁面捲動而動，不分裝置）。 */
@media (max-width: 991.98px) {
.about__team {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.about__member {
padding-bottom: 24px;
}
.about__member-body {
padding-inline: 24px;
}
/* 平板改「每卡獨立自走」，桌機的跨卡接續位移在此不適用：兩張卡都歸零，紫帶各自從頭開始。 */
.about__team .about__member:nth-child(2) .articles__title-bar-track,
.about__team .about__member:nth-child(3) .articles__title-bar-track {
margin-left: 0;
}
}
@media (max-width: 767.98px) {
.about__team {
grid-template-columns: 1fr;
gap: 20px;
}
/* 1 欄版面：每張卡各自獨立一行，沒有「跨卡相鄰」的視覺前提，全部歸零讓紫帶各自從頭開始。 */
.about__team .about__member:nth-child(2) .articles__title-bar-track,
.about__team .about__member:nth-child(3) .articles__title-bar-track {
margin-left: 0;
}
}
/* 團隊區紫色浮水印文字覆寫：借用 .articles__title-bar-track::before（首頁 Article 區共用規則，見上方第 730 行）
的樣式，僅覆寫 content 把「Article」換成「Team Member」。選擇器特異性 (0,2,1) 高於基底 (0,1,1) 故會勝出；
其餘 font-family / size / color / text-stroke / word-spacing 等皆繼承自基底，不重複宣告。
重複次數由 8 組加到 23 組：第 3 張卡的 track 靜態左移 2 個卡寬（見上方 nth-child(3) margin-left），
再疊加 front-marquee.js 的捲動 transform，需要更長的字串才能確保三張卡在整個位移/捲動範圍內都填滿文字、
不露出空白（只改這裡的 content，不動基底 .articles__title-bar-track::before，那是首頁 Article 區共用）。 */
.about__section--team .articles__title-bar-track::before {
content: "Team Member Team Member Team Member Team Member Team Member Team Member Team Member Team Member Team Member Team Member Team Member Team Member Team Member Team Member Team Member Team Member Team Member Team Member Team Member Team Member Team Member Team Member Team Member";
}
/* 舊規則 .about__section--team .articles__title-bar { margin-bottom: 40px } 已移除：
原意是給「區段層級」紫帶留下緣間距，但團隊成員版面改版後 .about__section--team 底下唯一的
.articles__title-bar 只剩卡內紫帶 .about__member-bar（見上方），40px 下間距套在卡內紫帶會把
頭像往下推、破壞騎壓紫帶的疊圖效果。紫帶本身無下緣留白為預設行為（沿用基底 .articles__title-bar），
不需額外補規則 */
/* --- 支持我們：借用首頁「最新專題」卡片設計（白底 1px 藍框圓角卡 + 頂部滿版黃色標題條）。
容器 .front-topics__card / 黃條 .topics__title-bar* / 標題 .front-section__title* 皆沿用既有規則，
這裡只補卡片內文與 CTA 按鈕樣式 --- */
/* .front-topics__card 預設 margin-bottom: 84px 是給首頁專題卡片之間留白用；
本頁區段間距已由 .about-page__inner 的 flex gap 統一控制，故歸零避免雙重間距 */
.about__support-card {
margin-bottom: 0;
}
/* 支持我們區黃條浮水印文字覆寫：借用 .topics__title-bar-track::before（首頁最新專題共用規則，見上方第 1493 行）
的樣式，僅覆寫 content 把「Topic」換成「Support us」。選擇器特異性 (0,2,1) 高於基底 (0,1,1) 故會勝出；
其餘 font-family / size / color / text-stroke / word-spacing 等皆繼承自基底，不重複宣告 */
.about__support-card .topics__title-bar-track::before {
content: "Support us Support us Support us Support us Support us Support us Support us Support us";
}
.about__support-text {
font-family: var(--font-body1-family);
font-weight: var(--font-body1-weight);
font-size: var(--font-body1-size);
line-height: var(--font-body1-line-height);
letter-spacing: var(--font-body1-letter-spacing);
color: var(--color-text-dark-blue);
}
.about__support-text p {
margin: 0 0 24px;
}
.about__support-text p:last-child {
margin-bottom: 0;
}
.about__support-cta {
display: inline-flex;
/* .front-topics__card 為 flex column 且未設 align-items（預設 stretch），
CTA 需自行 flex-start 避免被撐成滿版寬度按鈕 */
align-self: flex-start;
align-items: center;
justify-content: center;
height: 55px;
padding: 0 32px;
background: var(--color-primary-blue);
color: var(--color-white);
border-radius: 100px;
font-family: var(--font-h4-family);
font-weight: var(--font-weight-bold);
font-size: var(--font-h4-size);
line-height: var(--font-h4-line-height);
letter-spacing: var(--font-h4-letter-spacing);
text-decoration: none;
transition: background-color 0.2s ease;
}
.about__support-cta:hover {
background: var(--color-secondary-yellow);
color: var(--color-primary-blue);
}
@media (max-width: 767.98px) {
.about__support-cta {
width: 100%;
}
/* 支持我們卡手機版還原圓角框：基底 .front-topics__card 手機版（見上方第 1930 行）為首頁專題卡
滿版無框設計（border:none; border-radius:0; overflow:visible），此區只針對 .about__support-card
覆寫還原框線，不動基底（首頁最新專題共用）。overflow:hidden 讓黃條上緣被卡片 20px 圓角裁切 */
.about__support-card {
border: 1px solid var(--color-primary-blue);
border-radius: 20px;
overflow: hidden;
}
/* 黃條 bleed 值重算：基底 .front-topics__card 手機版 padding 為左右 20px，
.about__support-card 還原 1px 框後，比照桌機版同一套公式（見上方第 1480 行 .topics__title-bar
width: calc(100% + 114px) = 2 * (56px padding + 1px border)）：
width: calc(100% + 2 * (20px + 1px)) = calc(100% + 42px)、margin: 0 -21px。
此值會讓黃條精確貼齊框「內緣」；overflow:hidden 會把多出的 1px 裁掉，不會溢出框外也不留白邊。
只覆寫 .about__support-card 內的 .topics__title-bar，不動基底（首頁最新專題共用） */
.about__support-card .topics__title-bar {
width: calc(100% + 42px);
margin: 0 -21px;
}
}