/* ============================================================ 共用頁首樣式 header.css 首頁／部落格列表／文章內頁三處共用，避免各頁 CSS 各自複製後走鐘。 僅使用 CSS 變數（--sea-blue、--ink、--line…），由各頁自己的 :root 供給， 因此不同頁面的配色仍會各自解析，樣式結構則保持一致。 使用方式：於各頁 內、頁面專用 CSS 之前引用： ============================================================ */ header{ position:fixed;top:0;left:0;right:0;z-index:80; display:flex;align-items:center;justify-content:space-between; padding:14px clamp(18px,3.5vw,36px); background:rgba(255,255,255,0);transition:background .35s,box-shadow .35s,transform .35s; } header.scrolled{background:rgba(253,254,255,.95);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line);} .logo{display:flex;align-items:center;text-decoration:none;color:var(--ink);min-width:0;} /* 完整版 logo（圖＋字），高度固定、寬度依原比例 438.68:128.23 自動 */ .logo .logo-lockup{display:block;height:38px;width:auto;} header nav{display:flex;align-items:center;gap:26px;} header nav a{font-size:var(--fs-ss);font-weight:500;letter-spacing:.1em;color:var(--ink);text-decoration:none;white-space:nowrap;transition:color .25s;} header nav a:hover{color:var(--sea-blue);} header nav a.on{color:var(--sea-blue);} header nav .cta{ background:var(--sea-blue);color:#fff;font-weight:700;white-space:nowrap;flex-shrink:0; padding:11px 24px;border-radius:999px;display:inline-flex;align-items:center;gap:8px; transition:background .25s,transform .3s; } header nav .cta:hover{background:var(--sea-blue-deep);color:#fff;transform:translateY(-2px);} @media(max-width:1080px){header nav{gap:18px;}} @media(max-width:980px){header nav{gap:14px;}} /* 導覽項目一律不折行；擠不下時整批收起，只留主要 CTA */ @media(max-width:940px){header nav a:not(.cta){display:none;}} /* 手機：logo 縮一號，按鈕一行寫完（省略箭頭） */ @media(max-width:520px){ .logo .logo-lockup{height:28px;} header nav .cta{padding:10px 18px;} header nav .cta .cta-ar{display:none;} } /* ============================================================ 共用頁尾樣式（原本各頁 CSS 各放一份，已集中於此避免走鐘） 結構見 /partials/footer.html：品牌區 ＋ 兩欄導覽 ＋ 底部版權列 ============================================================ */ footer{ background:var(--dark);color:var(--on-dark-soft); padding:56px 0 34px;font-size:var(--fs-xs);letter-spacing:.1em; border-top:1px solid var(--dark-line); } /* 注意：.wrap 的 padding 簡寫會覆蓋單邊 padding，故這兩條以 footer 提高優先權 */ footer .ft-grid{ display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:38px 34px; padding-bottom:46px; } /* 深色底 footer 使用白色版 logo（/src/logo-on-dark.svg） */ .ft-brand .ft-logo{display:block;height:44px;width:auto;} .ft-brand .ft-desc{margin-top:16px;line-height:2;letter-spacing:.08em;} .ft-brand .ft-area{margin-top:6px;line-height:2;letter-spacing:.08em;color:var(--on-dark-dim);} .ft-nav{display:flex;flex-direction:column;gap:12px;align-items:flex-start;} .ft-nav .ft-t{ font-weight:700;letter-spacing:.2em;color:#fff;margin-bottom:2px; } .ft-nav a{ color:var(--on-dark-soft);text-decoration:none;letter-spacing:.08em; transition:color .25s; } .ft-nav a:hover{color:#fff;} footer .ft-btm{ display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap; padding-top:26px;border-top:1px solid var(--dark-line); } .ft-btm .en{font-family:var(--en);font-weight:500;letter-spacing:.2em;color:var(--on-dark-dim);} @media(max-width:760px){ footer .ft-grid{grid-template-columns:1fr;gap:30px;} }