/* ============================================================ 教程站排版 —— 全部颜色/圆角/间距走 theme.css 的令牌，不写死任何色值。 两轴主题沿用编辑器自己的：。 ============================================================ */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ---------------- 开场与转场（与项目主页同一套） ---------------- 开场：一片"眼皮"掀开 + 内容由糊到清；离开本页时糊掉，跳转看起来像闭眼再睁眼。 注意：filter 会给 fixed 后代造包含块，而侧栏是 sticky、背景层是 fixed—— 所以 .focus-in 跑完由脚本摘掉，不留残余的 filter。 */ #blink { position: fixed; inset: 0; z-index: 200; pointer-events: none; background: var(--page); animation: eyelid 0.85s var(--ease) forwards; } @keyframes eyelid { 0% { clip-path: inset(0 0 0 0); } 45% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(50% 0 50% 0); opacity: 0; } } .focus-in { animation: focusIn 0.9s var(--ease) both; } @keyframes focusIn { 0% { filter: blur(18px); opacity: 0; transform: scale(1.02); } 60% { filter: blur(3px); opacity: 1; } 100% { filter: blur(0); opacity: 1; transform: none; } } body.leaving { animation: focusOut 0.28s var(--ease) forwards; } @keyframes focusOut { to { filter: blur(16px); opacity: 0; transform: scale(0.99); } } /* 支持跨文档视图转场的浏览器直接接管，更顺 */ @view-transition { navigation: auto; } @media (prefers-reduced-motion: reduce) { #blink, .focus-in, body.leaving { animation: none !important; } @view-transition { navigation: none; } } body { margin: 0; font-family: var(--font-ui); background: var(--page); color: var(--text); font-size: 15px; line-height: 1.75; -webkit-font-smoothing: antialiased; } /* 背景层（与编辑器同一口径，见 editor/src/renderer/state/editor-bg.ts）： 主题画布打底；有背景图时叠一层主题色淡罩 + 图片铺满，玻璃件半透覆盖它。 为什么是个固定定位的独立元素、而不是 body 的 background-attachment: fixed： fixed 背景会被提到独立合成层，后代的 backdrop-filter 就模糊不到它——编辑器 index.css 里专门为此写过警告（打包后磨砂全灭即此因）。用真实元素铺底则磨砂正常。 */ .t-bg { position: fixed; inset: 0; z-index: -1; background: var(--canvas); pointer-events: none; } /* 有背景图时压两层暗罩再铺图：上面一层上深下浅的渐变 + 一层平铺的 34%。 两层加起来才压得住底图——首页的字直接落在图上，章节页的玻璃面板也因此更透亮好读。 这两层必须挂在 .t-bg（body 的直接子元素）上，不能挂进 .t-index / .t-layout 里： 开场动画给它们加了 filter，而 filter 会给 fixed 后代造包含块，罩子会被缩进那个 1000px 的盒子变成中间一条竖带，等动画结束才「啪」地铺满。 */ .t-bg[data-bg] { background: linear-gradient( 180deg, color-mix(in oklab, var(--page) 78%, transparent) 0%, color-mix(in oklab, var(--page) 58%, transparent) 46%, color-mix(in oklab, var(--page) 72%, transparent) 100%), linear-gradient(color-mix(in oklab, var(--page) 34%, transparent), color-mix(in oklab, var(--page) 34%, transparent)), var(--bg-image) center / cover no-repeat; } /* 图标兜底：不给尺寸的话 SVG 会按 flex 容器撑到巨大（页脚上下章的箭头即栽在这）。 */ svg { width: 16px; height: 16px; flex: none; } /* ---------------- 页头 ---------------- */ .t-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: var(--s4); padding: 10px clamp(16px, 4vw, 32px); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--page) 72%, transparent); backdrop-filter: blur(18px) saturate(1.2); } /* 字标两半各去各处：logo+站名 → 项目主页；「模拟器手册」→ 手册首页。 */ .t-wordmark { display: flex; align-items: center; gap: 7px; font-weight: 680; font-size: 15px; letter-spacing: -0.01em; color: var(--text); white-space: nowrap; } .t-wordmark-main { display: flex; align-items: center; gap: 7px; color: var(--text); text-decoration: none; } .t-wordmark .mark { width: 24px; height: 24px; border-radius: var(--r-xs); flex: none; transition: transform 0.4s var(--ease-spring); } .t-wordmark-main:hover .mark { transform: rotate(-8deg) scale(1.1); } .t-wordmark .sub { font-weight: 500; font-size: 12.5px; color: var(--text-dim); padding-left: 7px; border-left: 1px solid var(--border-2); text-decoration: none; transition: color 0.2s var(--ease); } .t-wordmark .sub:hover { color: var(--accent); } /* 侧栏顶上：回手册首页（那张章节地图） */ .t-back { display: inline-flex; align-items: center; gap: 5px; margin-bottom: var(--s3); padding: 4px 8px 4px 5px; border-radius: var(--r-sm); color: var(--text-dim); text-decoration: none; font-size: 12px; font-weight: 560; transition: background 0.18s var(--ease), color 0.18s var(--ease); } .t-back:hover { background: var(--glass-2); color: var(--text); } .t-back svg { width: 14px; height: 14px; } .t-header-spacer { flex: 1; } .t-header-tools { display: flex; align-items: center; gap: var(--s2); } /* 弹出小菜单（背景设置） */ .t-pop-host { position: relative; display: inline-flex; } .t-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 70; min-width: 168px; padding: var(--s2); display: flex; flex-direction: column; gap: 2px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--elev); box-shadow: var(--shadow-lg); backdrop-filter: blur(18px) saturate(1.2); } .t-pop[hidden] { display: none; } .t-pop-title { font-size: 10.5px; font-weight: 640; color: var(--text-faint); padding: 2px 8px 5px; letter-spacing: 0.04em; } .t-pop-item { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: var(--r-sm); border: 1px solid transparent; background: none; color: var(--text); cursor: pointer; font: inherit; font-size: 12.5px; text-align: left; } .t-pop-item:hover { background: var(--glass-2); } .t-pop-item[aria-current='true'] { background: color-mix(in oklab, var(--accent) 16%, transparent); border-color: color-mix(in oklab, var(--accent) 40%, transparent); color: var(--accent); font-weight: 600; } /* 汉堡（窄屏开侧栏） */ .t-burger { display: none; } /* ---------------- 布局 ---------------- */ .t-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(20px, 4vw, 52px); max-width: 1320px; margin: 0 auto; padding: var(--s5) clamp(16px, 4vw, 32px) 96px; align-items: start; } /* ---------------- 侧栏：跟随阅读进度的清单 ---------------- */ .t-sidebar { position: sticky; top: 68px; max-height: calc(100vh - 88px); overflow-y: auto; padding: var(--s4); border-radius: var(--r-lg); border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(14px); box-shadow: var(--shadow-sm); scrollbar-width: thin; } .t-progress-head { margin-bottom: var(--s3); } .t-progress-title { font-size: 13px; font-weight: 640; } .t-progress-sub { font-size: 11.5px; color: var(--text-dim); line-height: 1.5; margin-top: 3px; } .t-progress-bar { height: 5px; border-radius: var(--r-pill); background: var(--glass-2); overflow: hidden; margin-top: 9px; } .t-progress-fill { height: 100%; border-radius: var(--r-pill); background: var(--grad-accent); transition: width var(--dur) var(--ease); } .t-toc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; } .t-toc a { display: flex; align-items: flex-start; gap: 9px; padding: 7px 9px; border-radius: var(--r-sm); color: var(--text-dim); text-decoration: none; font-size: 13px; line-height: 1.45; border: 1px solid transparent; transition: background 0.18s var(--ease), color 0.18s var(--ease); } .t-toc a:hover { background: var(--glass-2); color: var(--text); } .t-toc a[aria-current='page'] { background: color-mix(in oklab, var(--accent) 14%, transparent); border-color: color-mix(in oklab, var(--accent) 38%, transparent); color: var(--text); font-weight: 600; } .t-toc .tick { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--text-faint); } .t-toc a.is-done .tick { color: var(--good); } .t-toc a.is-done .label { color: var(--text-faint); } /* 序号槽：固定宽 + 居中，所有行（含「序」和留空的进阶章）的标题都从同一条竖线起排。 */ .t-toc .num { flex: none; width: 16px; text-align: center; font-family: var(--font-num); font-size: 11px; color: var(--text-faint); margin-top: 2px; } .t-toc .label { flex: 1; min-width: 0; } .t-toc .opt { font-size: 10px; padding: 0 4px; border-radius: var(--r-xs); border: 1px solid var(--border); color: var(--text-faint); font-weight: 500; } .t-toc-sep { margin: var(--s3) 0 var(--s2); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--text-faint); text-transform: uppercase; } /* ---------------- 正文 ---------------- */ /* 正文也是一块磨砂玻璃面板（与侧栏同一套做法，也与编辑器"玻璃面板浮在画布上"一致）： 背景图上直接铺长文根本没法读。正文承载的是成段的字，所以比侧栏再实一点。 */ .t-main { min-width: 0; padding: clamp(20px, 3vw, 40px); border-radius: var(--r-lg); border: 1px solid var(--border); background: color-mix(in srgb, var(--elev) 92%, transparent); backdrop-filter: blur(20px) saturate(1.15); box-shadow: var(--shadow-sm); } .t-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 620; letter-spacing: 0.05em; color: var(--accent); text-transform: uppercase; margin-bottom: var(--s2); } .t-main h1 { font-size: clamp(28px, 4vw, 38px); line-height: 1.2; letter-spacing: -0.02em; font-weight: 720; margin: 0 0 var(--s3); } .t-lede { font-size: 17px; line-height: 1.7; color: var(--text-dim); margin: 0 0 var(--s6); } .t-main h2 { font-size: 21px; font-weight: 680; letter-spacing: -0.01em; margin: var(--s6) 0 var(--s3); padding-top: var(--s2); scroll-margin-top: 76px; } .t-main h3 { font-size: 16px; font-weight: 640; margin: var(--s5) 0 var(--s2); scroll-margin-top: 76px; } .t-main p { margin: 0 0 var(--s4); } .t-main ul, .t-main ol { margin: 0 0 var(--s4); padding-left: 1.4em; } .t-main li { margin-bottom: 6px; } .t-main li::marker { color: var(--text-faint); } .t-main a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; } .t-main strong { font-weight: 660; color: var(--text); } .t-main code { font-family: var(--font-num); font-size: 0.87em; padding: 1.5px 5px; border-radius: var(--r-xs); background: var(--glass-2); border: 1px solid var(--border); color: var(--text); } .t-main pre { margin: 0 0 var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r-md); border: 1px solid var(--border); background: var(--card); overflow-x: auto; font-family: var(--font-num); font-size: 12.5px; line-height: 1.65; } .t-main pre code { padding: 0; background: none; border: 0; font-size: inherit; } .t-main hr { border: 0; border-top: 1px solid var(--border); margin: var(--s6) 0; } /* 表格：窄屏自己横向滚，页面 body 永不横滚 */ .t-table-wrap { overflow-x: auto; margin: 0 0 var(--s4); } .t-main table { border-collapse: collapse; width: 100%; font-size: 13.5px; } .t-main th, .t-main td { border: 1px solid var(--border); padding: 7px 11px; text-align: left; vertical-align: top; } .t-main th { background: var(--glass-2); font-weight: 620; } /* ---------------- 提示块 ---------------- */ .t-note { display: flex; gap: var(--s3); margin: 0 0 var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r-md); border: 1px solid var(--border); border-left: 3px solid var(--accent-2); background: var(--card); font-size: 14px; } .t-note > svg { flex: none; width: 17px; height: 17px; margin-top: 4px; color: var(--accent-2); } .t-note > div { min-width: 0; } .t-note p:last-child { margin-bottom: 0; } .t-note .t-note-title { font-weight: 640; margin-bottom: 3px; } .t-note--warn { border-left-color: var(--warn); } .t-note--warn > svg { color: var(--warn); } .t-note--good { border-left-color: var(--good); } .t-note--good > svg { color: var(--good); } .t-note--crit { border-left-color: var(--crit); } .t-note--crit > svg { color: var(--crit); } /* ---------------- 复刻面板：外框 ---------------- */ .rp { margin: 0 0 var(--s5); border-radius: var(--r-lg); border: 1px solid var(--border-2); background: var(--page); background-image: var(--canvas); box-shadow: var(--shadow-md); overflow: hidden; } .rp-caption { display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--elev) 80%, transparent); font-size: 11.5px; color: var(--text-dim); } .rp-caption .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-2); flex: none; } .rp-caption .dot:nth-child(2) { margin-left: -3px; } .rp-caption .dot:nth-child(3) { margin-left: -3px; margin-right: 5px; } .rp-caption .live { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--text-faint); } .rp-body { display: flex; min-height: 260px; } /* rail（左竖工作区条） */ .rp-rail { flex: none; width: 62px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--s2) 0; border-right: 1px solid var(--border); background: color-mix(in srgb, var(--glass) 70%, transparent); backdrop-filter: blur(18px); } .rp-rail-item { width: 46px; padding: 6px 0 5px; border: 0; background: none; cursor: default; display: flex; flex-direction: column; align-items: center; gap: 3px; border-radius: var(--r-sm); color: var(--text-faint); font-size: 9.5px; font-family: var(--font-ui); line-height: 1.2; } .rp-rail-item svg { width: 17px; height: 17px; } .rp-rail-item[aria-current='true'] { background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent); } .rp-rail-sep { width: 26px; height: 1px; background: var(--border-2); margin: 5px 0; } /* 栏 */ .rp-cols { flex: 1; display: flex; min-width: 0; } .rp-col { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--border); } .rp-col:last-child { border-right: 0; } .rp-col-head { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--glass-2) 70%, transparent); font-size: 11.5px; font-weight: 600; color: var(--text-dim); } .rp-col-head .chev { width: 12px; height: 12px; color: var(--text-faint); margin-left: auto; } .rp-col-body { flex: 1; min-height: 0; overflow: auto; padding: var(--s3); background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(4px); } /* 面板内通用小件 */ .rp-h { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); } .rp-h .title { font-size: 13px; font-weight: 680; } .rp-h .count { font-size: 11px; color: var(--text-dim); } .rp-h .grow { flex: 1; } .rp-empty { padding: var(--s4); border-radius: var(--r-sm); border: 1px dashed var(--border-2); color: var(--text-dim); font-size: 12px; line-height: 1.6; text-align: center; } .rp-list { display: flex; flex-direction: column; gap: 3px; } .rp-row { display: flex; align-items: center; gap: 8px; text-align: left; width: 100%; padding: 7px 9px; border-radius: var(--r-sm); border: 1px solid transparent; background: none; cursor: pointer; color: var(--text); font-family: var(--font-ui); font-size: 12.5px; transition: background 0.16s var(--ease); } .rp-row:hover { background: var(--glass-2); } .rp-row[aria-selected='true'] { background: color-mix(in oklab, var(--accent) 14%, transparent); border-color: color-mix(in oklab, var(--accent) 40%, transparent); } .rp-row .rp-row-main { flex: 1; min-width: 0; } .rp-row .rp-row-t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rp-row .rp-row-s { font-size: 11px; color: var(--text-dim); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rp-group-label { display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 640; color: var(--text-faint); letter-spacing: 0.04em; margin: var(--s3) 0 var(--s1); padding: 0 4px; } .rp-group-label:first-child { margin-top: 0; } .rp-field { margin-bottom: var(--s3); } .rp-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-dim); margin-bottom: 4px; } .rp-hint { font-size: 11px; color: var(--text-faint); line-height: 1.55; margin-top: 4px; } .rp-section { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card); padding: var(--s3); margin-bottom: var(--s3); } .rp-section-title { font-size: 11.5px; font-weight: 660; margin-bottom: var(--s2); } .rp-warn-text { color: var(--warn); font-size: 11px; font-weight: 600; } /* 服务卡（控制中心） */ .rp-svc { display: flex; align-items: center; gap: var(--s3); } .rp-svc-main { flex: 1; min-width: 0; } .rp-svc-name { font-size: 13px; font-weight: 660; } .rp-svc-desc { font-size: 11px; color: var(--text-dim); } .rp-svc-note { font-size: 10.5px; color: var(--text-faint); margin-top: 2px; } /* 分档梯子（变量面板） */ .rp-bands { display: flex; flex-direction: column; gap: 5px; } .rp-band { display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--card); cursor: pointer; text-align: left; width: 100%; font-family: var(--font-ui); color: var(--text); } .rp-band--empty { border-style: dashed; color: var(--text-faint); } .rp-band[aria-selected='true'] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--ring); } .rp-band.is-hit { border-color: var(--good); box-shadow: 0 0 0 2px color-mix(in oklab, var(--good) 40%, transparent); } .rp-band-range { font-family: var(--font-num); font-size: 10.5px; color: var(--text-faint); flex: none; min-width: 56px; } .rp-band-name { font-size: 12px; font-weight: 620; } .rp-band-text { font-size: 11.5px; color: var(--text-dim); line-height: 1.5; margin-top: 2px; } .rp-legend { font-size: 10.5px; color: var(--text-faint); margin-top: var(--s2); } /* 时间线块 */ .rp-track { position: relative; height: 46px; border-bottom: 1px solid var(--border); } .rp-track-name { position: absolute; left: 0; top: 0; bottom: 0; width: 92px; display: flex; align-items: center; padding-left: 8px; font-size: 11px; color: var(--text-dim); border-right: 1px solid var(--border); background: var(--glass-2); } .rp-post { position: absolute; top: 9px; height: 26px; border-radius: var(--r-xs); border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent); background: color-mix(in oklab, var(--accent) 18%, transparent); font-size: 10.5px; color: var(--text); font-family: var(--font-ui); padding: 0 6px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; text-align: left; transition: background 0.16s var(--ease), box-shadow 0.16s var(--ease); } .rp-post:hover { background: color-mix(in oklab, var(--accent) 30%, transparent); } .rp-post[aria-selected='true'] { background: color-mix(in oklab, var(--accent) 42%, transparent); border-color: var(--accent); box-shadow: 0 0 0 2px var(--ring); } .rp-post--sched { border-style: dashed; background: transparent; } /* 让复刻面板里的表单元素不可真提交 */ .rp input, .rp textarea, .rp select { font-family: var(--font-ui); } .rp .ui-input { width: 100%; } /* ---------------- 页脚上下章 ---------------- */ .t-pager { display: flex; gap: var(--s3); margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--border); } .t-pager a { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: var(--s3) var(--s4); border-radius: var(--r-md); border: 1px solid var(--border); background: var(--card); text-decoration: none; color: var(--text); transition: border-color 0.2s var(--ease), transform 0.2s var(--ease); } .t-pager a:hover { border-color: var(--accent); transform: translateY(-2px); } .t-pager .dir { font-size: 11px; color: var(--text-dim); } .t-pager .name { font-size: 14px; font-weight: 620; } .t-pager .next { text-align: right; } /* ---------------- 手册首页 ---------------- 先给一张地图再进正文：上来就是一篇长文，第一眼全是字，会劝退。 */ .t-index { max-width: 1000px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px) 96px; } .t-hero { max-width: 720px; margin: 0 auto; padding: clamp(44px, 10vh, 92px) 0 clamp(32px, 6vh, 56px); text-align: center; } .t-hero h1 { font-size: clamp(30px, 5.4vw, 46px); line-height: 1.14; letter-spacing: -0.03em; font-weight: 740; margin: 0 0 var(--s4); animation: heroIn 0.7s var(--ease) both; } .t-hero p { font-size: 16.5px; color: var(--text-dim); margin: 0 0 var(--s5); animation: heroIn 0.7s var(--ease) 0.08s both; } .t-hero-actions { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; animation: heroIn 0.7s var(--ease) 0.16s both; } /* text-faint 是给实心面板调的，压在背景图上会糊掉——这行用 text-dim。 */ .t-hero-meta { font-size: 12.5px !important; color: var(--text-dim) !important; margin: var(--s4) 0 0 !important; animation: heroIn 0.7s var(--ease) 0.24s both; } @keyframes heroIn { from { filter: blur(10px); opacity: 0; transform: translateY(12px); } to { filter: blur(0); opacity: 1; transform: none; } } .t-index-sep { display: flex; align-items: center; gap: var(--s3); margin: var(--s6) 0 var(--s3); font-size: 11px; font-weight: 640; letter-spacing: 0.08em; color: var(--text-faint); text-transform: uppercase; } .t-index-sep::after { content: ''; flex: 1; height: 1px; background: var(--border); } .t-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: var(--s3); } .t-card { display: flex; flex-direction: column; padding: var(--s4); border-radius: var(--r-md); border: 1px solid var(--border); background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: blur(12px); text-decoration: none; color: var(--text); transition: border-color 0.22s var(--ease), transform 0.22s var(--ease), box-shadow 0.22s var(--ease); animation: cardIn 0.6s var(--ease) both; } .t-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-md); } /* 卡片依次浮现，不要齐刷刷一整片 */ .t-cards .t-card:nth-child(1) { animation-delay: 0.30s; } .t-cards .t-card:nth-child(2) { animation-delay: 0.36s; } .t-cards .t-card:nth-child(3) { animation-delay: 0.42s; } .t-cards .t-card:nth-child(4) { animation-delay: 0.48s; } .t-cards .t-card:nth-child(5) { animation-delay: 0.54s; } .t-cards .t-card:nth-child(6) { animation-delay: 0.60s; } .t-cards .t-card:nth-child(7) { animation-delay: 0.66s; } .t-cards .t-card:nth-child(8) { animation-delay: 0.72s; } .t-cards .t-card:nth-child(9) { animation-delay: 0.78s; } @keyframes cardIn { from { filter: blur(8px); opacity: 0; transform: translateY(14px); } to { filter: blur(0); opacity: 1; transform: none; } } .t-card .n { display: flex; align-items: center; gap: 6px; font-family: var(--font-num); font-size: 11px; color: var(--accent); font-weight: 700; } .t-card .n .tick { display: inline-flex; color: var(--good); } .t-card .n .tick svg { width: 13px; height: 13px; } .t-card .h { font-size: 14.5px; font-weight: 640; margin: 5px 0 5px; } .t-card .d { font-size: 12.5px; color: var(--text-dim); line-height: 1.6; } /* 读过的卡淡下去，让没读的显出来 */ .t-card.is-done { opacity: 0.62; } .t-card.is-done:hover { opacity: 1; } @media (prefers-reduced-motion: reduce) { .t-hero h1, .t-hero p, .t-hero-actions, .t-hero-meta, .t-card { animation: none; } } /* ---------------- 窄屏 ---------------- */ @media (max-width: 900px) { .t-layout { grid-template-columns: minmax(0, 1fr); padding-top: var(--s4); } .t-burger { display: inline-grid; } .t-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(320px, 86vw); max-height: none; border-radius: 0; transform: translateX(-102%); transition: transform 0.3s var(--ease); background: var(--elev); backdrop-filter: blur(22px); } .t-sidebar.is-open { transform: none; } .t-scrim { position: fixed; inset: 0; z-index: 55; border: 0; background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(2px); } .rp-body { min-height: 0; } .rp-cols { flex-direction: column; } .rp-col { border-right: 0; border-bottom: 1px solid var(--border); } .rp-col[style] { width: auto !important; } .t-pager { flex-direction: column; } .t-pager .next { text-align: left; } } @media (max-width: 560px) { .rp-rail { display: none; } .t-wordmark .sub { display: none; } }