/* site-menu.css — 全站雜誌目錄選單（kq-menu）依賴：tokens.css、chrome.css 注入：site-menu.js 動態 append #kq-menu 到性格：對開頁（內容族）。框對齊主頁雜誌比例框，全站統一。規則：只用 token，禁裸 hex / 禁裸 px 圓角 / 禁 text-shadow 光暈；小字 line-height 吸附 8px。注意：dispatch 原稿用 --antique，此 token 不存在→以 --serif 代替。 */ /* ── overlay 外殼 ── */ #kq-menu{ --kq-menu-w: 1200px; --kq-menu-h: min(var(--app-max-h), calc(100dvh - 96px)); position: fixed; inset: 0; z-index: 200; display: none; } #kq-menu.is-open{ display: block; } html.kq-menu-locked{ overflow: hidden; } .kq-menu__scrim{ position: absolute; inset: 0; background: var(--scrim); } /* ── 雜誌頁框（置中，疊合主頁外框）── */ .kq-menu__frame{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; max-width: var(--kq-menu-w); height: var(--kq-menu-h); max-height: calc(100dvh - 32px); padding: 0 var(--margin); display: flex; } /* ── 對開 ── */ .kq-menu__spread{ position: relative; flex: 1; display: flex; flex-direction: column; background: var(--paper); border-top: var(--rule) solid var(--signal); /* 一頁一條 signal 結構線 */ overflow: hidden; } .kq-menu__pages{ position: relative; flex: 1; display: flex; } .kq-menu__gutter{ position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--ink-3); opacity: .6; transform: scaleY(0); transform-origin: top; } .kq-menu__page{ flex: 1; min-width: 0; padding: 56px clamp(20px,4vw,52px); display: flex; flex-direction: column; } .kq-menu__page--left{ justify-content: space-between; } .kq-menu__page--right{ justify-content: flex-end; gap: 6px; } /* 左頁：系統聲 */ .kq-menu__eyebrow{ font-family: var(--mono); font-size: var(--t--2); line-height: var(--lh--2); letter-spacing: .2em; color: var(--teal-ink); } .kq-menu__big{ font-family: var(--serif); font-size: clamp(52px,8vw,100px); line-height: .92; color: var(--ink); margin-top: 14px; } .kq-menu__tag{ font-family: var(--serif); font-size: var(--t--1); line-height: var(--lh--1); color: var(--ink-2); margin-top: 18px; max-width: 24ch; } .kq-menu__tag em{ color: var(--teal-ink); font-style: normal; } /* 左頁：引言區 */ .kq-menu__epi{ margin-top: 32px; max-width: 30ch; } .kq-menu__epi-label{ font-family: var(--mono); font-size: var(--t--1); line-height: var(--lh--1); letter-spacing: .14em; color: var(--teal-ink); margin-bottom: 20px; } .kq-menu__epi-q{ position: relative; font-family: var(--serif); font-weight: 500; font-size: var(--k-2); line-height: var(--lh-2); color: var(--ink); } .kq-menu__oq{ position: absolute; right: 100%; top: 0; color: var(--ink); } .kq-menu__epi-zh{ font-family: var(--serif); font-size: var(--u-0); line-height: var(--lh-u); color: var(--ink-2); margin-top: 16px; } .kq-menu__epi-by{ font-family: var(--mono); font-size: var(--t--1); line-height: var(--lh--1); letter-spacing: .04em; color: var(--ink-3); margin-top: 24px; } .kq-menu__dash{ color: var(--signal); } /* 右頁：人聲目錄 */ .kq-menu__entry{ text-decoration: none; color: var(--ink); display: block; padding: 10px 0; } .kq-menu__mask{ display: block; overflow: hidden; } .kq-menu__kicker{ position: relative; display: block; font-family: var(--mono); font-size: var(--t--2); line-height: var(--lh--2); letter-spacing: .08em; color: var(--teal-ink); margin-bottom: 6px; } .kq-menu__sec{ position: absolute; right: 100%; margin-right: .45em; color: inherit; } .kq-menu__lead{ display: flex; align-items: baseline; gap: 14px; } .kq-menu__title{ font-family: var(--serif); font-weight: 500; font-size: clamp(22px,3.6vw,34px); line-height: 1.18; white-space: nowrap; } .kq-menu__dots{ flex: 1; border-bottom: 1px dotted var(--ink-3); transform: translateY(-5px); min-width: 18px; } .kq-menu__pno{ font-family: var(--mono); font-size: var(--k-1); line-height: 1; color: var(--teal-ink); } .kq-menu__meta{ font-family: var(--mono); font-size: var(--t--2); line-height: var(--lh--2); letter-spacing: .08em; color: var(--ink-3); margin-top: 4px; } .kq-menu__entry:hover .kq-menu__title{ color: var(--signal); } /* 00 序章弱化呈現：小字 serif 標題（對比 01–05 的大標），靠字級差分層、不夾分隔線 */ .kq-menu__entry--prologue{ padding: 6px 0 2px; } .kq-menu__entry--prologue .kq-menu__title{ font-size: clamp(16px,2vw,19px); line-height: 1.3; } /* 移除 UA 預設藍色 focus 外框；鍵盤焦點改用品牌色標題（同 hover）作提示，保留可及性 */ .kq-menu__entry:focus{ outline: none; } .kq-menu__entry:focus-visible{ outline: none; } .kq-menu__entry:focus-visible .kq-menu__title{ color: var(--signal); } /* 當前頁：signal 標記 */ .kq-menu__entry.is-active .kq-menu__kicker{ color: var(--signal); } .kq-menu__entry.is-active .kq-menu__pno{ color: var(--signal); } .kq-menu__entry.is-active .kq-menu__dots{ border-bottom-color: var(--signal); } /* 底部署名列 */ .kq-menu__foot{ display: flex; justify-content: space-between; align-items: baseline; padding: 24px clamp(20px,4vw,52px); } .kq-menu__folio-l{ font-family: var(--mono); font-size: var(--t--2); line-height: var(--lh--2); letter-spacing: .1em; color: var(--teal-ink); } .kq-menu__folio-r{ font-family: var(--mono); font-size: var(--t--2); line-height: var(--lh--2); letter-spacing: .04em; color: var(--signal); } /* 關閉 */ .kq-menu__close{ position: absolute; top: 22px; right: clamp(20px,4vw,52px); z-index: 5; display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; font-family: var(--mono); font-size: var(--t--1); line-height: 1; letter-spacing: .1em; color: var(--ink-2); } .kq-menu__close:hover{ color: var(--signal); } .kq-menu__x{ position: relative; width: 14px; height: 14px; } .kq-menu__x::before,.kq-menu__x::after{ content: ""; position: absolute; top: 50%; left: 0; width: 14px; height: 1.5px; background: currentColor; } .kq-menu__x::before{ transform: rotate(45deg); } .kq-menu__x::after{ transform: rotate(-45deg); } /* wordmark 觸發態：開啟時不變色（守 logo 單色），僅游標提示 */ .masthead .logo{ cursor: pointer; } /* ── 手機：堆疊 ── */ @media (max-width: 1023px){ #kq-menu{ --kq-menu-h: 100dvh; } .kq-menu__frame{ padding: 0; max-height: 100dvh; } .kq-menu__spread{ overflow-y: auto; } .kq-menu__pages{ flex-direction: column; } .kq-menu__gutter{ top: auto; left: 0; right: 0; width: auto; height: 1px; transform-origin: left; transform: scaleX(0); } .kq-menu__page{ flex: none; padding: 40px var(--margin); } .kq-menu__page--left{ padding-bottom: 20px; gap: 16px; } .kq-menu__big{ font-size: clamp(44px,16vw,78px); } .kq-menu__epi{ margin-top: 22px; } .kq-menu__epi-q{ font-size: var(--k-1); line-height: var(--lh-1); } .kq-menu__epi-zh{ display: none; } .kq-menu__page--right{ padding-top: 20px; gap: 2px; justify-content: flex-start; } .kq-menu__title{ font-size: clamp(20px,6vw,30px); } .kq-menu__foot{ flex-direction: column; gap: 8px; margin-top: auto; } } /* ── prefers-reduced-motion ── */ @media (prefers-reduced-motion: reduce){ .kq-menu__gutter, .kq-menu__page--left, .kq-menu__mask > *{ transition: none !important; } }