/* @import 必须排在所有其它规则之前（@charset / @layer 除外），否则整条被浏览器丢弃。 这里曾经被下面那条 [hidden] 挡在后面，结果 Noto Serif SC 一直没加载成功—— 中文全部落到系统宋体，font-weight 改了也看不出变化。别再把它往下挪。 */ @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&display=swap'); /* [hidden] 全局兜底。 HTML 的 hidden 属性是靠浏览器默认样式表里的 [hidden]{display:none} 生效的， 优先级极低——任何一条给元素设了 display 的作者样式都能把它架空， 于是「明明 el.hidden = true 了，元素却还在页面上」。 这个坑在本项目里已经踩过两次（高级筛选的把手、后台的登录页）， 而且症状很迷惑：元素没消失，只是被挤到别处，看着像布局错乱。 一条全局规则永久解决。 */ [hidden] { display: none !important; } /* 卡片主标题专用字体：仅收录当前 53 件作品标题里出现过的字（子集化， 原字库 26.5MB → 140KB），新作品若用到子集外的字会自动回退到青鸟/宋体。 */ /* 首页与页脚那行「天津师范大学新闻学系」用的粗衬线。 自托管的 9 字子集，来历与重新生成的方法见 fonts/NotoSerifSC-来源说明.md。 unicode-range 是关键：它让这份字体**只**接管这 9 个字， 其余汉字照常落到后面的字体上——否则一份只有 9 个字形的字体 会把整段中文都吞掉，缺字的地方全变成豆腐块。 */ @font-face { font-family: "Noto Serif SC"; src: url("fonts/noto-serif-sc-600-subset.woff2") format("woff2"); /* 字重跟着 .hero-dept 走。子集是按字重切的，两边必须对上—— CSS 里写 600 而这里只有 700 的话，这 9 个字就不命中本地子集了， 会掉回 Google 那份（国内多半拉不到，最后显示成系统宋体）。 */ font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+5927, U+5929, U+5b66, U+5e08, U+65b0, U+6d25, U+7cfb, U+8303, U+95fb; } @font-face { font-family: "ZhaohuaTitleB"; src: url("fonts/zhaohua-title-b-subset.woff2") format("woff2"), url("fonts/zhaohua-title-b-subset.ttf") format("truetype"); font-display: swap; } /* 站点拉丁字体 —— 软宋（Ruan Song）。 Text 光学尺寸系列（针对正文/UI 字号优化）， 覆盖 Light / Regular / Medium / Semibold / Bold / Extrabold + 对应斜体。 unicode-range 锁在拉丁区，中文不受影响。 */ @font-face { font-family: "SiteLatin"; src: url("fonts/RuanSong-Text-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "SiteLatin"; src: url("fonts/RuanSong-Text-LightItalic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "SiteLatin"; src: url("fonts/RuanSong-Text-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "SiteLatin"; src: url("fonts/RuanSong-Text-RegularItalic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "SiteLatin"; src: url("fonts/RuanSong-Text-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "SiteLatin"; src: url("fonts/RuanSong-Text-MediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "SiteLatin"; src: url("fonts/RuanSong-Text-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "SiteLatin"; src: url("fonts/RuanSong-Text-SemiboldItalic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "SiteLatin"; src: url("fonts/RuanSong-Text-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "SiteLatin"; src: url("fonts/RuanSong-Text-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "SiteLatin"; src: url("fonts/RuanSong-Text-Extrabold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "SiteLatin"; src: url("fonts/RuanSong-Text-ExtraboldItalic.woff2") format("woff2"); font-weight: 800; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { color-scheme: light; --ink: #170f0b; --muted: #5f4c45; --paper: rgba(250, 245, 240, 0.68); --paper-soft: rgba(245, 232, 224, 0.65); --paper-strong: rgba(255, 252, 248, 0.82); --line: rgba(255, 255, 255, 0.42); --line-dark: rgba(67, 34, 20, 0.2); --red: #bb3f3c; --red-deep: #8c1f1e; --cream: #fff6ee; --radius: 25px; --glass-blur: blur(18px) saturate(132%); /* --paper-strong 压平后的实色版本。作品卡和卡片正文用它顶替毛玻璃， 省掉侧边栏收展时每帧重算几十层模糊（见 .work-card / .work-body） */ --paper-flat: #fdf9f5; --shadow: 0 14px 36px rgba(52, 18, 7, 0.26); --inset: inset 0 1px 0 rgba(255, 255, 255, 0.78), inset 0 -16px 28px rgba(135, 73, 48, 0.08); font-family: "SiteLatin", "Noto Serif SC", "Songti SC", "STSong", serif; } /* ===================== 主题切换的过渡 ===================== 两条路，能走哪条走哪条： 1) View Transitions（Chrome 111+ / Safari 18+）：整页交叉淡入淡出， 由合成器一次性完成，页面上有几十张卡也不影响，这是首选。 2) 退化方案 html.theme-anim：给所有元素临时挂一条颜色过渡。 用通配符 + !important 是因为站里几百条规则各自写了自己的 transition， 不强制盖不住。代价是这 0.5 秒内别的过渡（hover 位移之类）会被顶掉—— 只在手动切主题的那一下发生，且切完立刻摘掉，可以接受。 注意只过渡颜色和 filter，不碰 transform/opacity： 那两个正在被别的动画用着，一起接管会打架。 首次进页面不走这里——防闪烁脚本在 CSS 生效前就把主题定好了， 没有"从亮变暗"这个过程可动。 */ @media (prefers-reduced-motion: no-preference) { /* 页面换色不和光同时起步：延到光的峰值之后（约 11% 处）才开始， 用 62% 的时长走完。读起来才是「光把颜色带出来的」， 而不是光和颜色各走各的两件事——这是调参台上最能去掉"生硬"的一处。 这里用的是普通 CSS 过渡，不是 View Transitions。后者要把整页拍成快照， 而快照里 backdrop-filter 不生效——站里十九处毛玻璃会在切换那一下集体失去模糊， 最显眼的就是顶部那条磨砂带闪一下没了。用 transition 就没有这个问题。 代价是这 0.6 秒内所有元素都挂着一条过渡（下面用了通配符 + !important， 因为站里几百条规则各写各的 transition，不强制盖不住），切完立刻摘掉。 只过渡颜色和 filter，不碰 transform/opacity——那两个正被别的动画用着。 */ html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: background-color 0.37s cubic-bezier(0.33, 0, 0.2, 1) 0.066s, background-image 0.37s cubic-bezier(0.33, 0, 0.2, 1) 0.066s, color 0.37s cubic-bezier(0.33, 0, 0.2, 1) 0.066s, border-color 0.37s cubic-bezier(0.33, 0, 0.2, 1) 0.066s, box-shadow 0.37s cubic-bezier(0.33, 0, 0.2, 1) 0.066s, filter 0.37s cubic-bezier(0.33, 0, 0.2, 1) 0.066s !important; } /* ── 明暗切换的那束顶光 ── 视觉语言沿用站里已有的 .viewer-flash / topLightSweep：顶部中央一枚柔和的 暖白椭圆锥，边缘靠 gradient 自己化开，不用任何硬边。 （早先试过用 clip-path 把页面裁成楔形，硬边三角，跟手电筒不沾边，已废弃。） 「集中 → 发散」用 scaleX 表达而不是改 gradient 尺寸：transform 走合成器， 改 background-size 每帧都要重画整块渐变。transform-origin 钉在 50% 0， 张开时光源不动、只有下方铺开——这是「光从上面打下来」和「从中间炸开」的区别。 下面五个数值是在调参台上试出来的，别凭感觉改： 时长 600ms · 起始集中 0.08 · 散开 2.15 · 强度 0.30 · 余晖 1.40× （强度只有 0.3，是一道很淡的光；起始 0.08 极窄，开灯那一下是真的"一束"） */ .theme-beam { --beam-dur: 600ms; --beam-from: 0.08; --beam-to: 2.15; --beam-peak: 0.30; --beam-tail: 1.40; position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: 9999; pointer-events: none; opacity: 0; overflow: hidden; } .theme-beam::before { content: ""; position: absolute; inset: 0; transform-origin: 50% 0; background: radial-gradient( ellipse 52% 82% at 50% -6%, rgba(255, 247, 231, 0.95) 0%, rgba(255, 242, 219, 0.5) 20%, rgba(255, 237, 208, 0.16) 40%, transparent 62% ); } /* 整屏一点点提亮，让"灯亮了"不只发生在顶部那一块 */ .theme-beam::after { content: ""; position: absolute; inset: 0; background: rgba(255, 250, 240, 0.06); opacity: 0; } /* 开灯：一束集中的光落下 → 散开铺满 → 长长地退去 */ .theme-beam.beam-on { animation: beamFade calc(var(--beam-dur) * var(--beam-tail)) both; } .theme-beam.beam-on::before { animation: beamSpread var(--beam-dur) cubic-bezier(0.17, 0.84, 0.28, 1) both; } .theme-beam.beam-on::after { animation: beamLift calc(var(--beam-dur) * var(--beam-tail)) both; } /* 关灯：光先在场，收拢成一束，然后灭 */ .theme-beam.beam-off { animation: beamFadeOff calc(var(--beam-dur) * var(--beam-tail) * 0.92) both; } .theme-beam.beam-off::before { animation: beamCollapse calc(var(--beam-dur) * 0.9) cubic-bezier(0.36, 0, 0.28, 1) both; } /* 张开到 74% 时略过冲再回落，光才像有惯性；blur 同步变大， 因为光散开时边缘本来就该越来越糊 */ @keyframes beamSpread { 0% { transform: scaleX(var(--beam-from)) scaleY(0.78); filter: blur(1px); } 38% { transform: scaleX(calc(var(--beam-to) * 0.80)) scaleY(1.04); filter: blur(5px); } 74% { transform: scaleX(calc(var(--beam-to) * 1.05)) scaleY(1.21); filter: blur(10px); } 100% { transform: scaleX(var(--beam-to)) scaleY(1.16); filter: blur(13px); } } /* 包络逐帧指定缓动：点亮走快出曲线，熄灭走长尾曲线。 整段比 beamSpread 长（余晖 1.35×）——两件事不在同一帧收尾， 「同时结束」正是生硬的主因。 */ @keyframes beamFade { 0% { opacity: 0; animation-timing-function: cubic-bezier(0.15, 0.85, 0.3, 1); } 11% { opacity: var(--beam-peak); animation-timing-function: linear; } 34% { opacity: calc(var(--beam-peak) * 0.94); animation-timing-function: cubic-bezier(0.45, 0, 0.7, 0.8); } 72% { opacity: calc(var(--beam-peak) * 0.34); animation-timing-function: cubic-bezier(0.3, 0, 0.75, 1); } 100% { opacity: 0; } } @keyframes beamLift { 0% { opacity: 0; animation-timing-function: cubic-bezier(0.15, 0.85, 0.3, 1); } 16% { opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.7, 0.9); } 100% { opacity: 0; } } @keyframes beamCollapse { 0% { transform: scaleX(calc(var(--beam-to) * 0.88)) scaleY(1.14); filter: blur(12px); } 46% { transform: scaleX(calc(var(--beam-to) * 0.46)) scaleY(0.96); filter: blur(7px); } 100% { transform: scaleX(0.13) scaleY(0.58); filter: blur(2px); } } @keyframes beamFadeOff { 0% { opacity: 0; animation-timing-function: cubic-bezier(0.15, 0.85, 0.3, 1); } 13% { opacity: calc(var(--beam-peak) * 0.92); animation-timing-function: cubic-bezier(0.5, 0, 0.72, 0.75); } 58% { opacity: calc(var(--beam-peak) * 0.42); animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1); } 100% { opacity: 0; } } } /* ===================== 暗色主题 ===================== 表面走中性黑灰（近似 Apple 的 systemGray 深色阶），不带棕； 暖色只留给强调色（--red 系）和背景照本身。 一层一层往上抬：#1c1c1e 底 → #2b2b2d 卡片 → #3a3a3c 悬浮/按钮。 */ [data-theme="dark"] { color-scheme: dark; --ink: #ececf0; --muted: #9a9aa0; --paper: rgba(44, 44, 46, 0.78); --paper-soft: rgba(50, 50, 52, 0.76); --paper-strong: rgba(36, 36, 38, 0.88); --paper-flat: #2b2b2d; --line: rgba(255, 255, 255, 0.07); --line-dark: rgba(255, 255, 255, 0.10); --cream: #2b2b2d; /* 暗色下的主红压深一档：#a04540 在深灰面板上偏亮、偏"粉"， 红按钮反倒比亮色版本更抢眼，正好和暗色该有的克制相反 */ --red: #8e3a36; --red-deep: #c46864; --shadow: 0 14px 36px rgba(0, 0, 0, 0.56); /* 只留顶边一道极淡的高光，不要底部内阴影——那道暗角会把整块面拆成上下两半 */ --inset: inset 0 1px 0 rgba(255, 255, 255, 0.045); } /* 暗色下 body 背景 —— 中性深灰，不是纯黑 */ html[data-theme="dark"] { background-color: #1c1c1e; } [data-theme="dark"] body { background: #1c1c1e; } /* 背景图压暗。这里是两道叠加：filter 先压一次，::after 的黑罩再压一次， 两道乘起来很容易把背景图干成纯黑（0.38 × 0.45 ≈ 0.17）。 改动任意一边都要连着另一边一起看。 */ [data-theme="dark"] .page-bg { filter: brightness(0.62) saturate(0.72); } /* 暗色下顶部状态栏区域同步换成 #1c1c1e 实色带 */ @supports (-webkit-touch-callout: none) { [data-theme="dark"] .page-bg::before { background: linear-gradient(180deg, #1c1c1e 0, #1c1c1e env(safe-area-inset-top, 0px), rgba(28, 28, 30, 0.55) 65%, transparent 100%); } } /* 罩子用暖棕而不是纯黑：纯黑压在暖色照片上会把它拉灰，读起来像掉色而不是入夜 */ [data-theme="dark"] .page-bg::after { background-image: radial-gradient(circle at 50% 18%, rgba(60, 40, 26, 0.22), transparent 34%), linear-gradient(180deg, rgba(24, 16, 10, 0.28), rgba(24, 16, 10, 0.46)); } /* --- 暗色下各组件微调 --- */ /* 顶部磨砂条（浅底半透明 → 深底半透明） */ [data-theme="dark"] body::after { background: linear-gradient(180deg, rgba(28, 28, 30, 0.85) 0%, rgba(28, 28, 30, 0.6) 25%, rgba(28, 28, 30, 0.2) 50%, transparent 75%); border-bottom-color: rgba(255, 255, 255, 0.06); } /* 搜索框 */ [data-theme="dark"] .search-box input { background: rgba(44, 44, 46, 0.78); border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); color: var(--ink); } [data-theme="dark"] .search-box input::placeholder { color: rgba(235, 235, 245, 0.45); } /* 联系行 */ [data-theme="dark"] .contact-row { background: #2b2b2d; border-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .contact-row .c-ico { background: rgba(187, 63, 60, 0.2); } /* 通知公告页样式 */ [data-theme="dark"] .news-item, [data-theme="dark"] .announcement-card { background: rgba(44, 44, 46, 0.75); } /* 筛选栏及其他浅色表面 */ [data-theme="dark"] .filter-bar, [data-theme="dark"] .sort-toggle, [data-theme="dark"] .award-tabs, [data-theme="dark"] .award-chiprow, [data-theme="dark"] .timeline-node { background: rgba(44, 44, 46, 0.78); } /* --- 暗色下的卡片：要一整块，不要"相框" --- .work-card 的 6px 边框在亮色下是有意的卡纸相框（米白）， 暗色里再怎么调半透明白都只会变成一圈灰边。这里把边框刷成和卡面同色， 6px 就当作卡面自己的一圈留白消失掉了。 （不直接改成 1px 是因为 .thumb 的内圆角写死了 calc(var(--radius) - 6px)， 动边框宽度就得连着改圆角，多一处要对齐的地方。） */ [data-theme="dark"] .work-card { border-color: var(--paper-flat); } /* 正文区与卡面同色，只留一丝极淡的自上而下过渡 */ [data-theme="dark"] .work-body { background: linear-gradient(180deg, #2e2e30, #2b2b2d); } [data-theme="dark"] .work-card p { color: #a1a1a6; } [data-theme="dark"] .thumb { background: #242426; } /* 没有缩略图的作品走 .placeholder，它的底是米白 rgba(246,232,224,.72)—— 暗色下不盖掉就是一整块刺眼的白 */ [data-theme="dark"] .placeholder { background: #242426; } /* 卡片悬浮阴影原本是暖棕红，暗色下换成中性黑，免得卡片周围泛出一圈棕 */ [data-theme="dark"] .work-card:hover { box-shadow: 0 24px 56px rgba(0, 0, 0, 0.5), var(--inset); } /* 缩略图加蒙版降低亮度 */ [data-theme="dark"] .thumb img { filter: brightness(0.82) saturate(0.85); } [data-theme="dark"] .work-card:hover .thumb img { filter: brightness(0.92) saturate(0.9); } /* 标签 */ [data-theme="dark"] .tag { background: rgba(160, 69, 64, 0.22); border-color: rgba(196, 104, 100, 0.25); color: var(--red-deep); } /* 按钮 */ [data-theme="dark"] .button { background: #3a3a3c; color: var(--red-deep); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .button.primary { background: var(--red); color: #fff0ec; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .button.primary:hover { background: #a3453f; } [data-theme="dark"] .icon-button:hover { background: #3a3a3c; } /* 获奖选中态 */ [data-theme="dark"] .award-chip.is-selected { border-color: var(--red-deep); background: rgba(160, 69, 64, 0.3); color: var(--red-deep); } /* --- 筛选药丸的文字与箭头 --- 药丸的标签不在按钮自己身上，而在 .filters span 里，那条规则写死了 color:#120c09。 只给 .filter-pill 换色管不到它——文字仍然是近黑压在深底上，等于看不见。 下拉箭头同理：它是 ::after 里一张 stroke='%231c120d' 的内联 SVG，也得换一张浅色的。 */ [data-theme="dark"] .filters span { color: var(--ink); } [data-theme="dark"] .filter-pill::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ececf0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } /* --- 二级筛选面板（媒介面板）--- 面板由 JS 挂到 body 下，整块底色是硬编码的米白毛玻璃，暗色下从来没被覆盖 */ [data-theme="dark"] .media-panel { background: rgba(36, 36, 38, 0.82); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55); } [data-theme="dark"] .mp-cats { background: rgba(28, 28, 30, 0.5); } [data-theme="dark"] .mp-cat:hover, [data-theme="dark"] .mp-item:hover { background: rgba(255, 255, 255, 0.07); } /* --- 作品详情弹窗 --- 面板整体是一张米色卡纸，里面还嵌一张预览卡，暗色下两层都要压下来： 面板 #282828 一档，预览卡再深一档，才看得出"卡里嵌卡"的层次 */ [data-theme="dark"] .viewer-panel { background: rgba(40, 40, 42, 0.94); } [data-theme="dark"] .viewer-stage { background: rgba(28, 28, 30, 0.92); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.45)); } /* 亮色下压在模糊底衬上的是米色薄纱，暗色下要反过来压暗， 否则一张亮底缩略图糊开之后整块预览卡会白得刺眼 */ [data-theme="dark"] .viewer-stage[data-mode="link"]::after { background: linear-gradient(180deg, rgba(18, 18, 20, 0.34), rgba(18, 18, 20, 0.62)); } [data-theme="dark"] .viewer-stage[data-mode="link"]::before { filter: blur(36px) saturate(1.2) brightness(0.8); } /* 磨砂牌现在是 .tray-meta（奖牌已挪出去单独站着，不再共用这层玻璃） */ [data-theme="dark"] .viewer-stage[data-mode="doc"] .tray-meta { border-color: rgba(255, 255, 255, 0.1); background: rgba(38, 38, 40, 0.72); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06); } /* 磨砂操作条：暗色下同样只留一层意思，别在深底上现出一块矩形 */ [data-theme="dark"] .viewer-meta-footer { background: none; } [data-theme="dark"] .icon-button { background: rgba(58, 58, 60, 0.88); border-color: rgba(255, 255, 255, 0.14); color: var(--ink); } [data-theme="dark"] .share-button { background: rgba(58, 58, 60, 0.85); border-color: rgba(255, 255, 255, 0.14); } [data-theme="dark"] .share-button:hover { background: rgba(72, 72, 74, 0.9); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45); } /* 手机端整张卡片的环境色薄纱：亮色是米色，暗色要反过来压暗， 否则一张亮底缩略图糊开之后整张上拉卡片会白得刺眼 */ @media (max-width: 820px) { [data-theme="dark"] .viewer-panel::after { background: linear-gradient(180deg, rgba(18, 18, 20, 0.58) 0%, rgba(18, 18, 20, 0.74) 46%, rgba(18, 18, 20, 0.86) 100%); } [data-theme="dark"] .viewer-panel::before { filter: blur(52px) saturate(1.3) brightness(0.75); } [data-theme="dark"] .viewer-stage[data-mode="doc"] { background: rgba(28, 28, 30, 0.92); } } [data-theme="dark"] .text-button { background: rgba(58, 58, 60, 0.78); } /* --- 其余几处同样漏掉的浅底面板 --- */ [data-theme="dark"] .gs-panel { background: rgba(36, 36, 38, 0.82); } [data-theme="dark"] .an-item { background: rgba(44, 44, 46, 0.94); } [data-theme="dark"] .an-item.is-important { background: rgba(52, 52, 54, 0.97); } [data-theme="dark"] .ac-chip { background: rgba(58, 58, 60, 0.78); } [data-theme="dark"] .ac-chip:hover { background: rgba(72, 72, 74, 0.9); } [data-theme="dark"] .adv-chip { background: rgba(58, 58, 60, 0.45); } [data-theme="dark"] .adv-seg { background: rgba(58, 58, 60, 0.6); } [data-theme="dark"] .adv-panel { background: rgba(40, 40, 42, 0.96); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); } /* 侧边栏搜索 placeholder */ [data-theme="dark"] .sb-search-input::placeholder { color: rgba(235, 235, 245, 0.55); } /* 筛选药丸：去掉浅底，换深底浅字 */ [data-theme="dark"] .filter-pill { background: rgba(58, 58, 60, 0.82); border-color: rgba(255, 255, 255, 0.12); color: var(--ink); } [data-theme="dark"] .filter-pill:hover { background: rgba(72, 72, 74, 0.88); } [data-theme="dark"] .filter-pill[aria-expanded="true"] { background: rgba(84, 84, 88, 0.92); } /* 二级筛选胶囊 */ [data-theme="dark"] .tray-item { background: rgba(52, 52, 54, 0.82); border-color: rgba(255, 255, 255, 0.10); color: var(--ink); } [data-theme="dark"] .tray-item:hover { background: rgba(70, 70, 73, 0.88); color: #ececf0; } /* 排序切换 */ [data-theme="dark"] .sort-toggle { background: rgba(58, 58, 60, 0.82); border-color: rgba(255, 255, 255, 0.12); color: var(--ink); } [data-theme="dark"] .sort-toggle:hover { background: rgba(72, 72, 74, 0.88); } /* 最近浏览标题：去掉阴影、提高亮度 */ [data-theme="dark"] .recent-strip-title { color: rgba(255, 248, 240, 0.95); text-shadow: none; } [data-theme="dark"] .recent-clear { color: rgba(255, 248, 240, 0.78); } [data-theme="dark"] .recent-clear:hover { color: #e8a09a; } html { min-height: 100%; background-color: #9f4d25; overflow-y: scroll; -webkit-overflow-scrolling: touch; } * { box-sizing: border-box; } body { min-height: 100vh; margin: 0; padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); color: var(--ink); background: #9f4d25; font-synthesis: none; -webkit-font-synthesis: none; } /* ===================== 键盘焦点指示 ===================== 全站原先一条 :focus-visible 都没有，几处 input 还写了 outline:0 且无替代， 用键盘走一遍完全不知道自己在哪。统一给一圈高对比描边环。 用 :focus-visible 而不是 :focus：鼠标点击不会触发，只在键盘导航时出现。 */ :focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; } /* 深底上的控件（侧边栏、移动菜单、页脚）用浅色环，红色在深红底上看不出来 */ .sidebar :focus-visible, .mobile-menu :focus-visible, .mobile-topbar :focus-visible, .site-footer :focus-visible, .award-tabs :focus-visible, .award-chiprow :focus-visible { outline-color: #fff6ee; } /* 这几个自己有圆角，焦点环跟着走一圈才不别扭 */ .button:focus-visible, .text-button:focus-visible, .search-submit:focus-visible, .award-tab:focus-visible, .award-chip:focus-visible, .filter-pill:focus-visible, .icon-button:focus-visible, .gyro-ask-yes:focus-visible, .gyro-ask-no:focus-visible { border-radius: 999px; } /* 输入框本来就把 outline 关了并用 box-shadow 画了聚焦态，别再叠一圈 */ .search-box input:focus-visible { outline: none; } /* 标题类：汉字收紧间距，数字/英文加宽。 字重不在这里定——按钮和导航要粗体，各自的规则说了算。 */ /* .hero h1 原本也在这张单子里，一并摘掉：首页主标题的字距 由 .hero-name 自己定（中文要松、英文要紧），不该被这条统一值管。 */ .section-heading h2, .about-section h2, .work-card h3, .viewer-meta h3 { letter-spacing: -0.06em; word-spacing: 0.12em; } .nav-links, .button, .text-button, .search-submit { letter-spacing: -0.06em; word-spacing: 0.12em; } /* 顶部渐变模糊带：仅在搜索工具栏吸顶后出现（JS 切换 body.has-top-blur） */ body::after { position: fixed; left: 0; top: 0; z-index: 25; width: 100vw; height: calc(env(safe-area-inset-top, 0px) + 140px); content: ""; pointer-events: none; opacity: 0; transition: opacity 0.35s ease; background: linear-gradient(180deg, rgba(159, 77, 37, 0.18) 0%, rgba(159, 77, 37, 0.1) 25%, rgba(159, 77, 37, 0.04) 50%, transparent 75%); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0.15) 50%, transparent 75%); -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0.15) 50%, transparent 75%); border-bottom: 1px solid rgba(159, 77, 37, 0.15); } body.has-top-blur::after { opacity: 1; } /* 仅 iOS 的 Safari 本体（sidebar.js 按 UA 打标）：顶部模糊带与 Safari 自身的 chrome 磨砂叠加显乱，禁用； 微信等其他 iOS 浏览器保持正常 */ html.ios-safari body::after { display: none; } .page-bg { position: fixed; top: 0; left: 0; z-index: 0; width: 100vw; /* 锚定最大视口（Safari 工具栏收起时的全屏高度）： 不随工具栏收展改变尺寸，背景图钉死全屏、盖住状态栏后方 */ height: 100vh; height: 100lvh; pointer-events: none; background: url("index pictures/background.png") center center / cover no-repeat; transform: translateZ(0); } /* 灵动岛/刘海机型：把背景照最顶上那一条盖成实色，避免状态栏后面是一块 忽明忽暗的报纸纹理。 注意这条带子只管背景照——它在 .page-bg（z-index:0）里，而正文 main 是 z-index:1，压在它上面。所以「状态栏区域透出正文」不是靠这条解决的， 那件事只有顶栏（z-index:60）盖得住，见 .mobile-topbar 的第一段色标。 两处各管一半，缺一不可：没有这条，顶栏没铺到的地方会露出纹理； 没有顶栏那段，正文会直接透上来。 仅针对 iOS/WebKit（-webkit-touch-callout 是 iOS 特有属性）。 */ @supports (-webkit-touch-callout: none) { .page-bg::before { position: absolute; top: 0; left: 0; right: 0; z-index: 1; height: calc(env(safe-area-inset-top, 0px) + 90px); content: ""; background: linear-gradient(180deg, #9f4d25 0, #9f4d25 env(safe-area-inset-top, 0px), rgba(159, 77, 37, 0.55) 65%, transparent 100%); pointer-events: none; } } .page-bg::after { position: absolute; inset: 0; content: ""; background-image: radial-gradient(circle at 50% 18%, rgba(255, 236, 216, 0.18), transparent 34%), linear-gradient(180deg, rgba(58, 16, 5, 0.08), rgba(80, 24, 7, 0.28)); } a { color: inherit; text-decoration: none; } button, input, select { font: inherit; } button, select { cursor: pointer; } img { display: block; max-width: 100%; } .site-header { position: relative; z-index: 1; min-height: auto; padding-top: env(safe-area-inset-top, 0px); color: var(--cream); } .topbar { position: absolute; top: 0; left: 32px; right: 32px; z-index: 20; width: auto; padding: 50px 0 0; display: flex; align-items: center; justify-content: space-between; } .brand { color: rgba(255, 246, 238, 0.88); font-size: 18px; opacity: 0; pointer-events: none; } .nav-links { margin-left: auto; display: flex; align-items: center; gap: 10px; justify-content: end; padding: 6px; border-radius: 999px; border: 1px solid rgba(255, 246, 238, 0.28); background: rgba(60, 22, 10, 0.26); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 6px 20px rgba(38, 12, 4, 0.28); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); color: #fff8ef; font-family: "SiteLatin", "Noto Serif SC", serif; font-size: 19px; font-weight: 700; } .nav-links a { position: relative; display: inline-flex; align-items: center; padding: 9px 20px; border-radius: 999px; color: rgba(255, 248, 240, 0.92); letter-spacing: 0.02em; transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); } .nav-links a:hover { color: #fffaf5; background: rgba(255, 248, 240, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22); transform: translateY(-1px); } .nav-links a:active { transform: translateY(0) scale(0.97); background: rgba(255, 248, 240, 0.1); } .hero { width: min(1220px, calc(100% - 48px)); margin: 0 auto; padding: 170px 0 0; display: grid; align-content: start; justify-items: center; } .hero-copy { text-align: center; text-shadow: 0 6px 22px rgba(50, 15, 4, 0.48); } .kicker { margin: 0 0 20px; font-size: clamp(30px, 3.2vw, 48px); line-height: 1.15; } /* 首页主标题的样式现在全在 .hero-dept / .hero-name 那两条里。 原来这里还有一条 .hero h1：它的特异性（0,1,1）比 .hero-name（0,1,0）高， 会把新规则整条压掉——留着就是个隐形陷阱，直接删。 */ /* 首页主标题：两行文字，不再是 title.png。 字体按语言分工——中文两行是两副字（上行粗衬线、下行朝华）， 英文两行都用站点的拉丁字 SiteLatin，靠字重拉开层次。 分工写在下面 html[lang="en"] 那组里，i18n.js 会把 lang 挂到 上。 */ /* 标题块定高，让中英两版占同样的垂直空间。 不定高就会跳：中文下行是 78px 的一行（87px 高），英文是 58px 的两行（130px 高）， 上行的差（56 vs 35）只抵消一部分，净剩 22px——切一次语言， 下面的检索栏就往下窜一次，很难看。 为什么不靠调字号让英文也排成一行：那需要把英文压到 48px 上下， 两行标题的体量就完全不对等了，而且窄屏一样会折。定高最直接， 代价只是中文时多出一点上下留白——hero 本来就是留白区，看不出来。 */ .hero-copy { display: flex; flex-direction: column; justify-content: center; min-height: clamp(132px, 16.5vw, 196px); } .hero-dept, .hero-name { margin: 0 auto; text-align: center; color: #fff8ef; text-shadow: 0 6px 20px rgba(50, 15, 4, 0.42); } .hero-dept { font-family: "Noto Serif SC", "SiteLatin", serif; font-weight: 600; font-size: clamp(21px, 3.3vw, 39px); letter-spacing: 0.04em; /* 字距是往右加的，整行会因此右偏半个字距——补回来才真居中 */ text-indent: 0.04em; opacity: 0.92; } .hero-name { margin-top: clamp(6px, 1vw, 14px); font-family: "ZhaohuaTitleB", "Noto Serif SC", serif; font-weight: 400; font-size: clamp(38px, 7.4vw, 78px); line-height: 1.12; letter-spacing: 0.02em; text-indent: 0.02em; } /* 英文：两行同一副拉丁字，用字重和字号分主次——下面那行更粗。 英文比中文长得多，字号要压下来，字距也不需要中文那么松。 */ html[lang="en"] .hero-dept { font-family: "SiteLatin", serif; font-weight: 400; font-size: clamp(17px, 2.2vw, 28px); letter-spacing: 0.02em; text-indent: 0.02em; } html[lang="en"] .hero-name { font-family: "SiteLatin", serif; /* 700 压到 600：RuanSong 的 Bold 在这个字号下太重，压住了整屏 */ font-weight: 600; font-size: clamp(30px, 4.6vw, 58px); letter-spacing: 0.005em; text-indent: 0; } .toolbar-shell { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 24px); z-index: 30; width: min(820px, 100%); margin: 56px auto 18px; transition: opacity 0.38s ease, transform 0.38s ease; /* 注意：这里不能加 will-change: opacity / filter 之类的属性， 否则会成为子元素的 backdrop root，筛选框和按钮的高斯模糊会失效 */ } .toolbar-shell::after { display: none; } .toolbar-shell.is-hidden { opacity: 0; pointer-events: none; transform: translateY(-16px); visibility: hidden; } .scroll-hint { position: fixed; left: 50%; bottom: 80px; z-index: 15; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 246, 238, 0.24); background: rgba(60, 22, 10, 0.22); color: #fff8ef; opacity: 0.72; transform: translateX(-50%); transition: opacity 0.4s ease; animation: scrollHintBob 1.9s ease-in-out infinite; } .scroll-hint::after { content: ""; width: 13px; height: 13px; margin-top: -5px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); } .scroll-hint:hover { opacity: 1; } @keyframes scrollHintBob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } } body.is-scrolled .scroll-hint { opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .scroll-hint { animation: none; } .work-card { transition: opacity 0.2s ease; transform: none !important; } .work-card:hover { transform: none !important; } .fadeSlideIn { animation: none !important; opacity: 1 !important; } } /* ===================== 独立页面 ===================== */ .page-wrap { position: relative; z-index: 1; width: min(960px, calc(100% - 48px)); margin: 0 auto; padding: 118px 0 96px; } .page-header { margin-bottom: 34px; } .page-header .eyebrow { color: #ffe1cc; } /* 页首大标题：中文在前、英文在后，同一行「新闻公告 /NEWS & NOTICE」。 两者各自的字号字体都不动（h1 是 clamp 出来的 40–66px 朝华， .eyebrow 是 13px 的拉丁体），靠 baseline 对齐把小字坐到大字的基线上—— 用 center 会让 13px 浮在半空。窄屏放不下时英文整段换行，不硬挤。 */ .page-title-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; } .page-title-row h1, .page-title-row .eyebrow { margin: 0; } .page-title-row .eyebrow::before { content: "/"; } .page-header h1 { margin: 6px 0 0; color: #fff8ef; font-family: "SiteLatin", "ZhaohuaTitleB", "Noto Serif SC", serif; font-size: clamp(40px, 5vw, 66px); font-weight: 400; line-height: 1.1; letter-spacing: -0.03em; text-shadow: 0 5px 18px rgba(46, 14, 5, 0.4); } .page-lead { max-width: 640px; margin: 18px 0 0; color: rgba(255, 246, 238, 0.9); font-size: 18px; line-height: 1.9; } .panel { /* 通条列表（.news-item）要靠负外边距顶到托盘两侧，得知道这里的内边距是多少； 写成变量，窄屏改一处两边同时跟上，不会各改各的对不齐 */ --panel-pad: 34px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-strong); box-shadow: var(--shadow), var(--inset); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); padding: var(--panel-pad); } .panel + .panel, .about-creator-card + .about-creator-card { margin-top: 22px; } .panel h2 { margin: 0 0 14px; color: var(--ink); font-family: "SiteLatin", "ZhaohuaTitleB", "Noto Serif SC", serif; font-size: 26px; font-weight: 400; letter-spacing: -0.03em; } .panel p { margin: 0 0 12px; color: var(--muted); font-size: 16px; line-height: 1.95; } .panel p:last-child { margin-bottom: 0; } .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; } .feature-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-strong); box-shadow: var(--shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); padding: 24px; } .feature-card .f-ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(187, 63, 60, 0.12); color: var(--red-deep); margin-bottom: 14px; } .feature-card .f-ico svg { width: 22px; height: 22px; } .feature-card h3 { margin: 0 0 6px; font-family: "SiteLatin", "ZhaohuaTitleB", "Noto Serif SC", serif; font-size: 18px; font-weight: 400; letter-spacing: -0.02em; color: var(--ink); } .feature-card p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.75; } .page-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; } .page-stats div { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-strong); box-shadow: var(--shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); padding: 22px 24px; } .page-stats strong { display: block; color: var(--red-deep); font: 800 34px/1.05 "SiteLatin", serif; } .page-stats span { display: block; margin-top: 8px; color: var(--muted); font-size: 15px; } /* 联系方式 */ .contact-list { display: grid; gap: 14px; margin-top: 4px; } .contact-row { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid rgba(120, 60, 40, 0.12); border-radius: var(--radius); background: #fbf3ec; transition: transform 0.18s ease, box-shadow 0.18s ease; } a.contact-row:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(53, 20, 8, 0.14); } .contact-row .c-ico { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; background: rgba(187, 63, 60, 0.12); color: var(--red-deep); } .contact-row .c-ico svg { width: 23px; height: 23px; } .contact-row .c-label { display: block; color: var(--muted); font-size: 13px; letter-spacing: 0.04em; } .contact-row .c-value { display: block; margin-top: 3px; color: var(--ink); font-size: 17px; } .contact-note { margin-top: 18px; color: rgba(255, 246, 238, 0.7); font-size: 14px; line-height: 1.8; } /* 版权声明 */ .site-footer { position: relative; z-index: 1; width: 100%; margin: 64px 0 0; padding: 44px 32px calc(48px + env(safe-area-inset-bottom, 0px)); color: var(--cream); background: rgba(122, 44, 16, 0.5); backdrop-filter: blur(18px) saturate(130%); -webkit-backdrop-filter: blur(18px) saturate(130%); border-top: 1px solid rgba(255, 246, 238, 0.14); } .footer-inner { width: min(1320px, 100%); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .site-footer p { margin: 0; } /* 页脚这两行和首页主标题同一套字体分工，只是尺寸小一号 */ .footer-dept { font-family: "Noto Serif SC", "SiteLatin", serif; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; color: rgba(255, 246, 238, 0.72); } .footer-title { margin-top: 6px !important; font-family: "ZhaohuaTitleB", "Noto Serif SC", serif; font-weight: 400; font-size: 26px; letter-spacing: 0.02em; color: #fff8ef; } /* 英文页脚：同首页——两行都用 SiteLatin，下面那行更粗 */ html[lang="en"] .footer-dept { font-family: "SiteLatin", serif; font-weight: 500; letter-spacing: 0.03em; } html[lang="en"] .footer-title { font-family: "SiteLatin", serif; font-weight: 600; font-size: 22px; letter-spacing: 0; } .footer-legal { text-align: right; font-size: 13px; line-height: 2; color: rgba(255, 246, 238, 0.7); } .footer-nav { display: none; align-items: center; justify-content: center; gap: 16px; font-size: 15px; color: rgba(255, 246, 238, 0.92); } .footer-nav a { display: inline-flex; align-items: center; gap: 7px; } .footer-nav svg { width: 17px; height: 17px; } .footer-sep { color: rgba(255, 246, 238, 0.35); } @media (max-width: 640px) { .site-footer { margin-top: 48px; padding: 40px 24px calc(44px + env(safe-area-inset-bottom, 0px)); text-align: center; } .footer-inner { flex-direction: column; gap: 0; } .footer-dept { display: none; } .footer-title { margin-top: 0 !important; font-size: 24px; } .footer-legal { margin-top: 14px; text-align: center; } .footer-nav { display: flex; margin-top: 22px; } } .copyright-author { font-family: "SiteLatin", "Noto Serif SC", serif; font-size: 16px; letter-spacing: -0.02em; color: rgba(255, 246, 238, 0.9); } .copyright-author + .copyright-author { margin-top: 4px; } @media (max-width: 720px) { .feature-grid, .page-stats { grid-template-columns: 1fr; } .page-wrap { padding-top: 96px; } .panel { --panel-pad: 24px; } } /* ===================== 侧边栏 ===================== */ :root { --sb-w: 238px; /* 71 是量出来的，不是拍的：71 − 左右各 12px 内边距 − 1px 右边框 = 46 的内容宽， 收起键（34px）在里面居中，圆心落在 12 + 23 = 35px； 导航图标（24px，左内边距 11px）圆心同样是 12 + 11 + 12 = 35px； 展开态图标（内边距 11px）也是 35px。 于是收起键、六个图标、展开态图标三者共用一条中线，收起时图标一步不动。 */ --sb-w-collapsed: 71px; } body.has-sidebar .scroll-hint { left: calc(50% + var(--sb-w) / 2); } body.has-sidebar.sidebar-collapsed .scroll-hint { left: calc(50% + var(--sb-w-collapsed) / 2); } /* ===== 收起 / 展开 ===== 推开式侧边栏，正文宽度是真的在变，所以每帧都得重排——这躲不掉。 之前之所以卡，不是因为重排本身，而是重排时还要连带重算 25 张作品卡的 backdrop-filter（见 .work-card 那条注释）。把卡片的毛玻璃去掉之后， 每帧就只剩普通的块级重排，动画才真的跑得动。 曲线用前重后轻的 (0.32,0.72,0,1)：位移在前 40% 就走掉大半， 最贵的那几帧集中在开头，收尾时已经几乎不动了。 */ body.has-sidebar { padding-left: var(--sb-w); transition: padding-left 0.26s cubic-bezier(0.32, 0.72, 0, 1); } /* 侧边栏由 JS 注入，首次挂载那一下不要动画，否则每次开页面都看见它推一遍 */ body.sb-no-anim, body.sb-no-anim * { transition: none !important; } @media (prefers-reduced-motion: reduce) { body.has-sidebar { transition: none; } } body.has-sidebar.sidebar-collapsed { padding-left: var(--sb-w-collapsed); } .sidebar { position: fixed; top: 0; left: 0; z-index: 60; width: var(--sb-w); height: 100vh; height: 100dvh; display: flex; flex-direction: column; padding: 16px 12px; color: #fff5ec; border-right: 1px solid rgba(255, 246, 238, 0.16); box-shadow: 2px 0 22px rgba(30, 10, 3, 0.26); /* 和 body 的 padding-left 同一条曲线、同一个时长——两边必须是一个整体在动 */ transition: width 0.26s cubic-bezier(0.32, 0.72, 0, 1), transform 0.3s ease; overflow: hidden; } /* 毛玻璃底单独拆成一层，宽度恒为展开宽度。 backdrop-filter 的采样区域跟着元素自身几何走，让它随栏宽变化就得重算整块模糊； 固定宽度之后，收起时父级只是把它裁窄，模糊结果可以直接复用。 */ .sidebar::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: var(--sb-w); background: rgba(46, 17, 8, 0.42); backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); pointer-events: none; } /* backdrop-filter 会开新的层叠上下文，内容得显式抬到毛玻璃之上。 往 .sidebar 里加新的直接子元素时，记得一并加进这个选择器， 否则它会被 ::before 那层盖住——看不见，但因为 ::before 不吃事件，还点得到 */ .sidebar-head, .sidebar-nav, .sb-theme-row { position: relative; z-index: 1; } .sidebar.is-collapsed { width: var(--sb-w-collapsed); } .sidebar-head { display: flex; align-items: center; gap: 8px; padding: 4px 4px 12px; margin-bottom: 8px; border-bottom: 1px solid rgba(255, 246, 238, 0.12); } .sidebar-brand { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: #fff8ef; } .sidebar-brand-mark { flex: none; width: 100%; max-width: 36px; display: block; background: transparent; box-shadow: none; } .sidebar-brand-mark img { width: 100%; height: auto; object-fit: contain; filter: brightness(1.15) drop-shadow(0 2px 8px rgba(50, 15, 4, 0.35)); } .sidebar-toggle, .sb-caret, .sidebar-opener { border: 0; background: transparent; color: inherit; cursor: pointer; } .sidebar-toggle { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: rgba(255, 246, 238, 0.82); transition: background 0.18s ease; } .sidebar-toggle:hover { background: rgba(255, 248, 240, 0.14); } .sidebar-toggle svg { width: 20px; height: 20px; } .sidebar-nav { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; overflow-x: hidden; } .sb-item, .sb-parent-link, .sb-sub-item { display: flex; align-items: center; gap: 12px; padding: 10px 11px; border-radius: 11px; color: rgba(255, 246, 238, 0.86); /* 目录条目按标题待遇走朝华，和站内各处主标题同一副面孔； 拉丁字仍由 SiteLatin 先接（朝华只做中文标题） */ font-family: "SiteLatin", "ZhaohuaTitleB", "Noto Serif SC", serif; font-size: 16.5px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; transition: background 0.18s ease, color 0.18s ease; } a.sb-item:hover, .sb-parent-link:hover, .sb-sub-item:hover { background: rgba(255, 248, 240, 0.12); color: #fff9f3; } .sb-ico { flex: none; width: 24px; height: 24px; display: grid; place-items: center; } .sb-ico svg { width: 21px; height: 21px; } .sb-ico-sm svg { width: 13px; height: 13px; opacity: 0.85; } /* 展开时文字滑入。 收展本身（栏宽 + 正文左边距）是瞬间的——那是布局，一做过渡就得整页逐帧重排， 之前几版卡就卡在这儿。但文字这一层是纯合成的：opacity + translateX 不碰布局， 多少个都不掉帧。所以动效没有取消，只是从"整条栏慢慢推"换成了 "栏一步到位、字跟着滑进来"——这一下就够交代状态变化了。 */ .sb-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); } .sidebar:not(.is-collapsed) .sb-label { animation: sbLabelIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; } /* 逐项错开一点，像依次落位，而不是整块一起闪出来 */ .sidebar:not(.is-collapsed) .sb-item:nth-child(2) .sb-label { animation-delay: 0.02s; } .sidebar:not(.is-collapsed) .sb-item:nth-child(3) .sb-label { animation-delay: 0.04s; } .sidebar:not(.is-collapsed) .sb-item:nth-child(4) .sb-label { animation-delay: 0.06s; } .sidebar:not(.is-collapsed) .sb-item:nth-child(5) .sb-label { animation-delay: 0.08s; } .sidebar:not(.is-collapsed) .sb-group .sb-label { animation-delay: 0.1s; } @keyframes sbLabelIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .sidebar:not(.is-collapsed) .sb-label { animation: none; } } .sb-item.is-active, .sb-parent.is-active .sb-parent-link, .sb-sub-item.is-active { background: rgba(187, 63, 60, 0.92); color: #fffaf5; box-shadow: 0 4px 12px rgba(120, 25, 23, 0.34); } .sb-group { display: flex; flex-direction: column; } .sb-parent { display: flex; align-items: center; padding: 0; border-radius: 11px; } .sb-parent-link { flex: 1; min-width: 0; } .sb-caret { flex: none; width: 32px; height: 40px; display: grid; place-items: center; border-radius: 9px; color: rgba(255, 246, 238, 0.66); } .sb-caret svg { width: 16px; height: 16px; transition: transform 0.22s ease; } .sb-group.is-open .sb-caret svg { transform: rotate(90deg); } .sb-sub { display: flex; flex-direction: column; gap: 2px; max-height: 0; overflow: hidden; transition: max-height 0.28s ease; } .sb-group.is-open .sb-sub { max-height: 480px; } .sb-sub-item { padding: 8px 11px 8px 12px; margin: 2px 0 2px 15px; font-size: 15px; font-weight: 700; color: rgba(255, 246, 238, 0.74); border-left: 1px solid rgba(255, 246, 238, 0.16); border-radius: 0 10px 10px 0; } .sidebar.is-collapsed .sidebar-brand, .sidebar.is-collapsed .sb-caret, .sidebar.is-collapsed .sb-sub { display: none; } /* 收起时不用 justify-content:center 去挤图标——那样文字还在流里， 会把图标顶偏，而且文字一旦 display:none 就是"啪"地消失。 改成保持左对齐、给一个恰好让图标落在栏中线的左内边距， 文字原地淡出、由侧栏的 overflow:hidden 顺势裁掉，图标一步不动。 */ .sidebar.is-collapsed .sb-item, .sidebar.is-collapsed .sb-parent-link { align-items: center; height: 44px; padding: 0 0 0 11px; margin: 0; } .sidebar.is-collapsed .sb-label { opacity: 0; } /* 「作品库」是 .sb-item.sb-parent 里再套一个 .sb-parent-link， 两层都会吃到上面那条 11px 左内边距，图标被推到 46px 去。外层清零。 */ .sidebar.is-collapsed .sb-parent { padding-left: 0; } /* 收起时收起键要和下面一列图标共用一条中线。 原来对不齐有两个叠加原因： 1) .sidebar-brand 只是把里面的 logo 设成 display:none，自己还带着 flex:1， 仍然占着一整格，把按钮往右挤； 2) .sidebar-head 左右各 4px 内边距，而导航项收起后 padding 归零。 两处一起去掉，按钮中心才落回 34px（= 68px 栏宽的一半）。 */ .sidebar.is-collapsed .sidebar-head { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; } /* 主题切换按钮 */ .sb-theme-row { margin-top: auto; padding: 8px 14px 6px; display: flex; justify-content: flex-end; } /* 规格对齐上面的 .sb-item：无边框、透明底、同一条 hover 曲线和同一个圆角， 只是它是纯图标所以做成正方形 */ .sb-theme-btn { width: 40px; height: 40px; border: 0; border-radius: 11px; background: transparent; color: rgba(255, 246, 238, 0.86); cursor: pointer; display: grid; place-items: center; transition: background 0.18s ease, color 0.18s ease; } .sb-theme-btn:hover { background: rgba(255, 248, 240, 0.12); color: #fff9f3; } .sb-theme-btn svg { width: 20px; height: 20px; } /* 收起时内容宽只剩 47px，右对齐会把 38px 的按钮推到圆心 40px 处， 偏离收起键和六个导航图标共用的 35px 中线；这里改成居中对齐归位 */ .sidebar.is-collapsed .sb-theme-row { padding: 6px 0; justify-content: center; } @media (max-width: 900px) { body.has-sidebar, body.has-sidebar.sidebar-collapsed { padding-left: 0; } .sidebar { display: none; } /* 箭头避开底部 tab 栏 */ .scroll-hint { bottom: 130px; } } .toolbar { position: relative; z-index: 1; width: min(820px, 100%); margin: 0 auto; display: grid; /* 按钮列从 134 收到 120：这一列让出多少，1fr 的输入框就长多少， "按钮窄一点、输入框长一点"是同一处改动的两面。 列间距一并从 14 收到 12，再多让 2px 给输入框。 */ grid-template-columns: minmax(0, 1fr) 120px; row-gap: 16px; column-gap: 12px; align-items: start; padding: 0; transition: filter 0.22s ease; } .toolbar::before { display: none; } .search-box { position: relative; z-index: 5; min-width: 0; padding: 0; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; align-self: stretch; } .search-box input, .search-submit { width: 100%; /* 58 → 56.8（-2%） */ height: 56.8px; min-height: 56.8px; border-radius: 999px; } .search-box input { border: 1px solid rgba(76, 46, 35, 0.22); background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(12px) saturate(120%); -webkit-backdrop-filter: blur(12px) saturate(120%); color: var(--ink); padding: 0 24px; font-size: 18px; box-shadow: 0 2px 10px rgba(53, 20, 8, 0.10); outline: 0; transition: box-shadow 0.18s ease, border-color 0.18s ease; } .search-box input:focus { border-color: var(--red); box-shadow: 0 2px 10px rgba(53, 20, 8, 0.10), 0 0 0 3px rgba(187, 63, 60, 0.3); } .search-box input::placeholder { color: rgba(80, 68, 63, 0.45); } .button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fbf1e8; color: var(--red-deep); font-family: "SiteLatin", "Noto Serif SC", serif; font-size: 16px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; white-space: nowrap; box-shadow: 0 2px 8px rgba(53, 20, 8, 0.12); transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; transform-origin: center; } .button.primary { min-height: 54px; border-color: transparent; background: var(--red); color: #fffaf5; font-size: 16px; box-shadow: 0 4px 14px rgba(140, 31, 30, 0.28); } .button.primary:hover { background: #c94b48; } .button:hover, .text-button:hover, .filter-pill:hover { transform: translateY(-2px); } .button:active, .text-button:active, .search-submit:active, .tray-item:active { transform: translateY(0) scale(0.97); transition: transform 80ms ease-out; } .button.primary.search-submit { position: relative; z-index: 5; align-self: stretch; margin-left: 0; border-radius: 999px; font-family: "SiteLatin", "Noto Serif SC", serif; font-weight: 700; /* 同上，跟着 -2% */ min-height: 56.8px; height: 56.8px; box-shadow: 0 4px 14px rgba(140, 31, 30, 0.28); } .toolbar .search-submit { font-size: 22px; font-family: "SiteLatin", "Noto Serif SC", "Songti SC", serif; font-weight: 600; } /* 筛选栏：固定四个药丸；媒介药丸点击弹出二级面板 */ .filters { position: relative; z-index: 1; grid-column: 1 / -1; margin: 0 -9px; display: flex; } .filters > .filter-pill { flex: 1 1 0; } /* ===================== 媒介二级面板 ===================== 面板由 JS 挂载到 body 下（脱离工具栏的层叠上下文）， 桌面端 fixed 定位、位置由 JS 按筛选栏实时计算 */ .media-panel { position: fixed; z-index: 200; width: min(520px, calc(100vw - 32px)); max-height: 60vh; display: flex; border: 1px solid var(--line); border-radius: 22px; /* 毛玻璃：--paper-strong（0.82）几乎不透光，底下那张报纸底图全被挡住， 面板看着就是一块糊在页面上的死板子。压到 0.72 让材质真的透出来， 模糊只给 14px —— 再高就糊成一片灰、跟实色没区别了， saturate 补回被模糊冲淡的暖色。 */ background: rgba(255, 252, 248, 0.72); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); box-shadow: 0 18px 48px rgba(40, 12, 4, 0.28); overflow: hidden; opacity: 0; transform: translateX(-50%) translateY(-8px) scale(0.97); transform-origin: top center; pointer-events: none; visibility: hidden; transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.3s; } .media-panel.is-open { opacity: 1; transform: translateX(-50%); pointer-events: auto; visibility: visible; transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s; } .mp-cats { width: 150px; flex: none; padding: 8px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overscroll-behavior: contain; border-right: 1px solid var(--line-dark); background: rgba(246, 234, 225, 0.5); } .mp-items { flex: 1; min-width: 0; padding: 8px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overscroll-behavior: contain; } .mp-cat, .mp-item { flex: none; border: 0; border-radius: 12px; background: transparent; color: var(--ink); font-family: "SiteLatin", "Noto Serif SC", serif; font-size: 17px; line-height: 1.4; letter-spacing: -0.03em; text-align: left; /* 左边 28px 给多选的勾留位（见 .mp-check） */ padding: 11px 15px 11px 28px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background 0.16s ease, color 0.16s ease; } .mp-cat { padding-left: 15px; } /* 右列具体媒体用 Noto 正文字体，与左列分类的标题字体区分 */ .mp-item { font-family: "SiteLatin", "Noto Serif SC", "Songti SC", serif; font-weight: 700; font-size: 15px; letter-spacing: 0; } /* 多选：选中项前面出一个勾。用 gap + 固定宽度的勾位， 选中和未选中的文字左边缘对齐，勾出现时整列不会左右跳 */ .mp-item { display: flex; align-items: center; gap: 7px; } .mp-item > span { overflow: hidden; text-overflow: ellipsis; } .mp-check { flex: none; width: 14px; height: 14px; margin-left: -21px; /* 勾挂到文字左侧的空白里，不占文字的位置 */ } /* 左列大类上的小圆点：这一类里有选中项，但当前没在浏览它 */ .mp-dot { position: absolute; top: 50%; right: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); transform: translateY(-50%); } .mp-cat { position: relative; padding-right: 24px; } .mp-cat.is-selected .mp-dot, .mp-cat.is-active .mp-dot { background: currentColor; } /* 平铺形态（类型只有三项，不值得为它分左右两列） */ .media-panel.is-flat { width: min(260px, calc(100vw - 32px)); } .media-panel.is-flat .mp-cats { display: none; } .mp-cat:hover, .mp-item:hover { background: rgba(187, 63, 60, 0.1); } .mp-cat.is-active { background: rgba(187, 63, 60, 0.14); color: var(--red-deep); } .mp-cat.is-selected, .mp-item.is-selected { background: var(--red); color: #fffaf5; } .mp-overlay { display: none; } /* 四个筛选器的触发药丸。原来年级/类型/主题是