/* ============================================================ 一人公司·从 0 到 1 — 主样式 依赖: themes.css 提供的颜色/阴影变量 ============================================================ */ /* ------------------------------------------------------------ 基础重置 & 全局 ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { color-scheme: var(--color-scheme); scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--font-serif); font-size: var(--text-body); line-height: var(--leading-body); font-feature-settings: "kern", "liga", "ss01"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color var(--duration-base) var(--ease-apple), color var(--duration-base) var(--ease-apple); } /* 暗模式正文换 sans-serif: 衬线在 #000 上 anti-alias 会糊, Apple developer.apple.com/Linear/GitHub Dark 全是 sans 正文 */ [data-theme="dark"] body { font-family: var(--font-body); font-feature-settings: "kern", "liga", "tnum"; letter-spacing: -0.005em; } [data-theme="dark"] .main p { line-height: 1.75; letter-spacing: 0.008em; } body { min-height: 100vh; overflow-x: hidden; } /* 滚动条: Apple 风 thin overlay, hover 时变深 */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; border: none; transition: background var(--duration-fast) var(--ease-apple); } ::-webkit-scrollbar-thumb:hover { background: var(--ink-soft); } a { color: var(--accent); text-decoration: none; border: none; transition: color var(--duration-fast) var(--ease-apple), text-decoration-color var(--duration-fast) var(--ease-apple); } a:hover { color: var(--accent-strong); text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; text-decoration-thickness: 1px; } a:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 3px; border-radius: 3px; } :focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; border-radius: 4px; } ::selection { background: var(--selection-bg); color: var(--ink-strong); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ------------------------------------------------------------ 字号档位（绑定到 ） ------------------------------------------------------------ */ html[data-fontsize="s"] body { font-size: 15px; } html[data-fontsize="m"] body { font-size: 17px; } html[data-fontsize="l"] body { font-size: 18.5px; } html[data-fontsize="xl"] body { font-size: 20px; line-height: 1.95; } /* ------------------------------------------------------------ 阅读进度条（顶部） ------------------------------------------------------------ */ .reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; /* Apple: 1-2px hairline 进度条, 不要彩虹 */ background: transparent; z-index: 100; pointer-events: none; } .reading-progress__bar { height: 100%; width: 0%; background: var(--accent); transition: width 0.1s linear; box-shadow: none; } /* ------------------------------------------------------------ 顶部导航 ------------------------------------------------------------ */ .topbar { position: sticky; top: 0; z-index: 80; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--divider); transition: background var(--duration-fast) var(--ease-apple); } .topbar__inner { max-width: 1280px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 16px; } .topbar__brand { display: flex; align-items: center; gap: 10px; font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif; font-weight: 700; font-size: 0.98rem; color: var(--ink-strong); border: none; letter-spacing: 0.01em; white-space: nowrap; } .topbar__brand:hover { background: transparent; color: var(--accent); } /* SOLO 四宫格 logo — 4 个字母平分一个矩形 */ .topbar__logo { width: 32px; height: 32px; border-radius: 8px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; background: var(--paper-elevated); box-shadow: var(--shadow-sm), inset 0 0 0 0.5px var(--line); flex: 0 0 auto; transition: transform 0.18s ease, box-shadow 0.18s ease; } .topbar__brand:hover .topbar__logo { transform: rotate(-2deg) scale(1.06); box-shadow: var(--shadow-md), inset 0 0 0 0.5px var(--line); } .topbar__logo-cell { display: flex; align-items: center; justify-content: center; font-family: "Inter", "PingFang SC", sans-serif; font-weight: 800; font-size: 11px; color: #fffdf7; letter-spacing: -0.02em; line-height: 1; } .topbar__logo-cell::before { content: attr(data-l); } /* SOLO Logo 4 cell: 用 accent 主色 + 3 个低饱和邻接色, 比 6 色更整齐 */ .topbar__logo-cell:nth-child(1) { background: var(--accent); } .topbar__logo-cell:nth-child(2) { background: color-mix(in srgb, var(--accent) 75%, var(--ink-strong)); } .topbar__logo-cell:nth-child(3) { background: color-mix(in srgb, var(--accent) 75%, var(--paper)); } .topbar__logo-cell:nth-child(4) { background: color-mix(in srgb, var(--accent) 60%, var(--ink-strong)); } .topbar__divider { width: 1px; height: 22px; background: var(--line); flex: 0 0 auto; } .topbar__chip { font-family: var(--font-display); font-size: var(--text-footnote); color: var(--muted); padding: 3px 10px; border-radius: var(--radius-pill); background: transparent; border: 1px solid var(--line); white-space: nowrap; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-weight: 500; } .topbar__spacer { flex: 1 1 auto; min-width: 12px; } .topbar__actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; } /* 窄屏：隐藏装饰性 chip + divider，避免与按钮挤占同一行 */ @media (max-width: 900px) { .topbar__chip, .topbar__divider { display: none; } } @media (max-width: 540px) { .topbar__brand span:not(.topbar__logo) { display: none; } .icon-btn--wide .label { display: none; } .icon-btn--wide { width: 36px; padding: 0; } } .icon-btn { appearance: none; background: transparent; border: none; color: var(--ink-soft); width: 36px; height: 36px; border-radius: var(--radius-pill); display: grid; place-items: center; cursor: pointer; transition: background var(--duration-fast) var(--ease-apple), color var(--duration-fast) var(--ease-apple), transform var(--duration-fast) var(--ease-apple); } .icon-btn:hover { background: var(--surface); color: var(--ink-strong); } .icon-btn:active { transform: scale(0.94); } .icon-btn svg { width: 18px; height: 18px; stroke-width: 1.8; } .icon-btn .label { font-size: 0.75rem; margin-left: 6px; font-family: "Inter", sans-serif; } .icon-btn--wide { width: auto; padding: 0 12px; } /* 桌面端隐藏 ☰ 目录按钮 (sidebar 永远在左侧显示, 不需要"打开"操作) */ @media (min-width: 1025px) { #tocToggle { display: none !important; } } /* 设置弹层: Apple Popover 风, frosted glass + 大圆角 + 1px hairline */ .menu { position: absolute; right: 18px; top: 56px; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); min-width: 260px; padding: var(--space-3); z-index: 90; opacity: 0; transform: translateY(-6px) scale(0.98); transform-origin: top right; pointer-events: none; transition: opacity var(--duration-fast) var(--ease-apple), transform var(--duration-fast) var(--ease-apple); } .menu[data-open="true"] { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .menu__title { font-family: var(--font-display); font-size: var(--text-caption); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--muted); padding: var(--space-2) var(--space-2) var(--space-1); } .menu__row { display: flex; gap: 4px; padding: var(--space-1); } .menu__pill { flex: 1; appearance: none; background: var(--surface); border: none; color: var(--ink-soft); padding: 7px 8px; border-radius: var(--radius-sm); font-family: var(--font-display); font-size: var(--text-callout); font-weight: 500; cursor: pointer; transition: background var(--duration-fast) var(--ease-apple), color var(--duration-fast) var(--ease-apple); } .menu__pill:hover { background: var(--surface-hover); color: var(--ink-strong); } .menu__pill[aria-pressed="true"] { background: var(--accent); color: #ffffff; border-color: var(--accent); } /* ------------------------------------------------------------ 主体布局（侧边目录 + 正文） ------------------------------------------------------------ */ .page { max-width: 1280px; margin: 0 auto; padding: 28px 24px 96px; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 36px; } @media (max-width: 1024px) { .page { grid-template-columns: minmax(0, 1fr); padding: 16px 16px 80px; } } /* ------------------------------------------------------------ 侧边目录 ------------------------------------------------------------ */ .sidebar { position: sticky; top: 72px; align-self: start; height: calc(100vh - 92px); overflow: hidden; display: flex; flex-direction: column; } /* sidebar: Apple Docs left-rail 风, 透明背景, 分组列表 */ .sidebar__inner { background: transparent; border: none; border-radius: 0; padding: var(--space-5) 0 var(--space-3) 0; box-shadow: none; overflow: hidden; display: flex; flex-direction: column; flex: 1; } .sidebar__title { font-family: var(--font-display); font-size: var(--text-caption); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted); margin: 0 0 var(--space-4); display: block; } .sidebar__title::after { display: none; } .sidebar__list { list-style: none; margin: 0; padding: 0 var(--space-2) var(--space-4) var(--space-3); /* 左 padding 给 active rail 让位 */ overflow-y: auto; flex: 1; scrollbar-width: thin; scrollbar-color: var(--line) transparent; } /* 分组: 开篇 / 正文 / 结语 */ .sidebar__group { margin: 0 0 var(--space-4); list-style: none; } .sidebar__group:last-child { margin-bottom: 0; } .sidebar__group-head { font-family: var(--font-display); font-size: var(--text-caption); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted-2); padding: var(--space-2) var(--space-3) var(--space-1); margin-bottom: var(--space-1); } .sidebar__sublist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; } /* 链接: 章号 chip + 标题, hover 行有底色, active 用左侧 2px accent rail */ .sidebar__link { display: flex; align-items: baseline; gap: var(--space-3); padding: 7px var(--space-3) 7px var(--space-3); color: var(--ink-soft); font-family: var(--font-display); font-size: var(--text-callout); border-radius: var(--radius-sm); line-height: 1.35; transition: background var(--duration-fast) var(--ease-apple), color var(--duration-fast) var(--ease-apple); background: transparent; text-decoration: none; position: relative; } .sidebar__chip { flex: 0 0 auto; font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600; font-feature-settings: "tnum"; color: var(--muted-2); letter-spacing: 0.04em; min-width: 1.5em; line-height: 1; } .sidebar__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar__link:hover { background: var(--surface); color: var(--ink-strong); } .sidebar__link:hover .sidebar__chip { color: var(--ink-soft); } /* Active: Apple Docs 左侧 2px 蓝 rail + 文字加重, 不用底色块 */ .sidebar__link.is-active { color: var(--accent); font-weight: 600; background: transparent; } .sidebar__link.is-active::before { content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 2px; background: var(--accent); border-radius: 1px; } .sidebar__link.is-active .sidebar__chip { color: var(--accent); font-weight: 700; } @media (max-width: 1024px) { .sidebar { position: fixed; top: 0; left: 0; width: 86%; max-width: 320px; height: 100vh; z-index: 95; background: var(--bg); transform: translateX(-100%); transition: transform 0.28s ease; box-shadow: var(--shadow-xl); padding: 12px; } .sidebar[data-open="true"] { transform: translateX(0); } .sidebar__inner { height: 100%; border-radius: 12px; } } /* 移动遮罩 */ .scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 90; } .scrim[data-open="true"] { opacity: 1; pointer-events: auto; } /* ------------------------------------------------------------ 主内容卡片 ------------------------------------------------------------ */ /* .main: Apple Docs 风, 直接让位给内容; 不再是带 elevation 的卡片 */ .main { background: transparent; border: none; border-radius: 0; padding: var(--space-7) 0 var(--space-9); box-shadow: none; position: relative; } .main > * { position: relative; } @media (max-width: 720px) { .main { padding: var(--space-5) 0 var(--space-7); } } /* ------------------------------------------------------------ 排版: Apple HIG type scale 严格化 - 标题用 var(--font-display) (SF Pro Display) - 字号档位严格 var(--text-h1..--text-body) - 不用 border 装饰, 用 weight + spacing 区分层级 ------------------------------------------------------------ */ h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink-strong); scroll-margin-top: 88px; position: relative; text-wrap: balance; } h1 { font-size: var(--text-display); font-weight: 700; line-height: var(--leading-display); letter-spacing: var(--tracking-display); margin: 0 0 var(--space-5); border: none; padding: 0; } h2 { font-size: var(--text-h1); font-weight: 700; line-height: var(--leading-h); letter-spacing: var(--tracking-h); margin: var(--space-8) 0 var(--space-4); border: none; padding: 0; } h3 { font-size: var(--text-h2); font-weight: 600; line-height: var(--leading-tight); letter-spacing: var(--tracking-h); margin: var(--space-7) 0 var(--space-3); color: var(--ink-strong); border: none; padding: 0; } h4 { font-size: var(--text-h3); font-weight: 600; line-height: var(--leading-tight); margin: var(--space-6) 0 var(--space-3); color: var(--ink-strong); } /* 锚点复制按钮 */ .heading-anchor { display: inline-block; margin-left: 8px; color: var(--muted-2); border: none; background: none; cursor: pointer; opacity: 0; transition: opacity 0.15s, color 0.15s; font-size: 0.8em; padding: 0 4px; } h2:hover .heading-anchor, h3:hover .heading-anchor, h4:hover .heading-anchor { opacity: 1; } .heading-anchor:hover { color: var(--accent); } .heading-anchor.copied { color: var(--band-4); opacity: 1; } p { font-family: var(--font-body); font-size: var(--text-body); line-height: var(--leading-body); margin: 0 0 var(--space-5); color: var(--ink); word-wrap: break-word; max-width: var(--measure); /* 行长 ~38 中文字, Bringhurst 阅读最舒适区 */ text-wrap: pretty; } /* 卡片/表格/特殊容器内的 p 不限宽度 (会撑爆 layout) */ .tldr-card p, .lesson-card p, .callout p, .section-summary p, .term-card p, td p, th p, .ai-stash-card p, .section-summary__list p, blockquote p, .hero p, .chapter-map p { max-width: none; } strong { color: var(--ink-strong); font-weight: 600; } /* blockquote: Apple Editorial 风, 大字斜体, 左侧 hairline, 无装饰 */ blockquote { margin: var(--space-7) 0; padding: 0 0 0 var(--space-5); background: transparent; border-left: 2px solid var(--accent); border-radius: 0; color: var(--ink-strong); position: relative; box-shadow: none; } blockquote p { margin: 0 0 var(--space-3); font-size: 1.125rem; line-height: 1.55; font-weight: 500; font-style: italic; max-width: var(--measure); } blockquote p:last-child { margin-bottom: 0; } blockquote strong { color: var(--ink-strong); font-weight: 600; } /* hr: 单 hairline */ hr { border: none; height: 1px; background: var(--divider); margin: var(--space-7) 0; } /* ------------------------------------------------------------ 表格（出版级 + 现代化） ------------------------------------------------------------ */ /* 表格: Apple Docs 风, 顶部 hairline + zebra 行, 无 elevation */ .table-wrap { margin: var(--space-6) 0 var(--space-7); overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--paper); box-shadow: none; } table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-callout); font-family: var(--font-display); background: transparent; } th, td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--divider); line-height: var(--leading-body); } th { background: var(--paper-elevated); color: var(--ink-strong); font-weight: 600; font-size: var(--text-footnote); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; position: sticky; top: 0; z-index: 1; border-bottom: 1px solid var(--line); } tr:last-child td { border-bottom: none; } tbody tr { transition: background var(--duration-fast) var(--ease-apple); } tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--paper-elevated) 50%, transparent); } tbody tr:hover td { background: var(--accent-soft); } td strong { color: var(--ink-strong); font-weight: 600; } /* ------------------------------------------------------------ 代码 ------------------------------------------------------------ */ code { font-family: var(--font-mono); background: var(--code-inline-bg); color: var(--code-inline-ink); padding: 0.12em 0.42em; border-radius: 5px; font-size: 0.88em; border: none; font-feature-settings: "tnum"; } pre { background: var(--code-bg); color: var(--code-ink); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); overflow-x: auto; font-size: 0.85rem; line-height: 1.7; box-shadow: none; position: relative; font-family: var(--font-mono); } pre code { background: transparent; color: inherit; border: none; padding: 0; font-size: inherit; } .code-copy { position: absolute; top: 8px; right: 8px; background: rgba(20, 18, 14, 0.88); border: 1px solid rgba(255, 255, 255, 0.18); color: #f0ead7; font-family: "Inter", sans-serif; font-size: 0.72rem; padding: 4px 10px; border-radius: 6px; cursor: pointer; opacity: 0; transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 2; } pre:hover .code-copy, .code-copy:focus-visible { opacity: 1; } .code-copy:hover { background: rgba(40, 36, 28, 0.96); border-color: rgba(255, 255, 255, 0.3); } .code-copy.copied { background: var(--band-4); border-color: var(--band-4); color: #fff; opacity: 1; } /* ------------------------------------------------------------ 图片 ------------------------------------------------------------ */ img { display: block; max-width: 100%; height: auto; margin: var(--space-6) auto var(--space-7); border: none; border-radius: var(--radius-md); background: transparent; box-shadow: none; } /* 行内引用编号链接（参考文献角标） */ p > a[title] { display: inline-block; font-size: 0.78em; color: var(--accent); background: var(--accent-fade); padding: 0 6px; margin: 0 2px; border-radius: 999px; border: none; vertical-align: super; line-height: 1.4; } p > a[title]:hover { background: var(--accent); color: var(--paper-elevated); } /* ------------------------------------------------------------ 英雄区（Hero）— Apple HIG 风 设计原则: 内容是英雄, 不是装饰. 无背景色块/无 3D 球/无渐变高亮. 只用 typography hierarchy 和留白讲故事. ------------------------------------------------------------ */ .hero { padding: var(--space-9) 0 var(--space-8); margin: 0; border: none; background: transparent; box-shadow: none; max-width: 760px; } .hero__eyebrow { font-family: var(--font-display); font-size: var(--text-caption); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent); margin: 0 0 var(--space-4); } .hero__title { font-family: var(--font-display); font-size: var(--text-display); font-weight: 700; line-height: var(--leading-display); letter-spacing: var(--tracking-display); color: var(--ink-strong); margin: 0 0 var(--space-5); border: none; padding: 0; text-wrap: balance; } .hero__subtitle { font-family: var(--font-body); font-size: 1.25rem; line-height: 1.5; color: var(--ink-soft); margin: 0 0 var(--space-5); max-width: 38em; text-wrap: pretty; } .hero__subtitle strong { color: var(--ink-strong); font-weight: 600; } .hero__meta-line { font-family: var(--font-display); font-size: var(--text-callout); color: var(--muted); margin: 0 0 var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: baseline; } .hero__meta-line strong { color: var(--ink-strong); font-weight: 600; font-feature-settings: "tnum"; /* 等宽数字 */ } .hero__cta-row { display: flex; gap: var(--space-3); margin: 0; flex-wrap: wrap; } .hero__cta { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-size: var(--text-body); font-weight: 500; padding: 10px 22px; border-radius: var(--radius-pill); text-decoration: none; border: 1px solid transparent; transition: background var(--duration-fast) var(--ease-apple), border-color var(--duration-fast) var(--ease-apple), color var(--duration-fast) var(--ease-apple); } .hero__cta--primary { background: var(--accent); color: #ffffff; } .hero__cta--primary:hover { background: var(--accent-strong); color: #ffffff; } .hero__cta--ghost { background: transparent; color: var(--accent); border-color: var(--line-strong); } .hero__cta--ghost:hover { background: var(--accent-soft); border-color: var(--accent); } @media (max-width: 720px) { .hero { padding: var(--space-7) 0 var(--space-6); } .hero__subtitle { font-size: 1.0625rem; } } /* ------------------------------------------------------------ 章节卡片（学习地图） ------------------------------------------------------------ */ .chapter-map { margin: 36px 0 8px; } .chapter-map__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; } .chapter-map__head h2 { margin: 0; border: none; padding: 0; font-size: 1.45rem; } .chapter-map__head p { margin: 0; color: var(--muted); font-size: 0.95rem; } .chapter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .chapter-card { position: relative; display: block; padding: var(--space-5); background: var(--paper-elevated); border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink); font-family: var(--font-display); text-decoration: none; overflow: hidden; transition: border-color var(--duration-fast) var(--ease-apple), background var(--duration-fast) var(--ease-apple), transform var(--duration-fast) var(--ease-apple); } /* 顶部 3px 章节 band hairline (代替原来的左侧粗 4px 彩条) */ .chapter-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--band, var(--accent)); border-radius: var(--radius-md) var(--radius-md) 0 0; opacity: 0.85; transition: opacity var(--duration-fast) var(--ease-apple); } .chapter-card:hover { border-color: var(--ink-soft); background: var(--paper); transform: translateY(-1px); } .chapter-card:hover::before { opacity: 1; } .chapter-card__num { font-size: var(--text-caption); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--band, var(--accent)); font-weight: 600; margin-bottom: var(--space-2); display: block; } .chapter-card__title { font-size: var(--text-headline); font-weight: 600; color: var(--ink-strong); line-height: var(--leading-tight); letter-spacing: var(--tracking-h); margin: 2px 0 var(--space-2); } .chapter-card__desc { font-size: var(--text-callout); color: var(--muted); line-height: 1.55; margin: 0; } /* 章节色带映射 */ .chapter-card[data-band="1"] { --band: var(--band-1); } .chapter-card[data-band="2"] { --band: var(--band-2); } .chapter-card[data-band="3"] { --band: var(--band-3); } .chapter-card[data-band="4"] { --band: var(--band-4); } .chapter-card[data-band="5"] { --band: var(--band-5); } .chapter-card[data-band="6"] { --band: var(--band-6); } /* ------------------------------------------------------------ 术语速览 (.term-stack + .term-card) — Apple Docs Disclosure 风 ------------------------------------------------------------ */ .term-stack { display: flex; flex-direction: column; gap: 0; margin: var(--space-6) 0; border-top: 1px solid var(--divider); } .term-card { border-bottom: 1px solid var(--divider); } .term-card > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 600; font-size: var(--text-headline); color: var(--ink-strong); letter-spacing: var(--tracking-h); transition: color var(--duration-fast) var(--ease-apple); user-select: none; } .term-card > summary::-webkit-details-marker { display: none; } .term-card > summary:hover { color: var(--accent); } .term-card__name em { font-style: italic; font-weight: 400; color: var(--muted); margin-left: var(--space-2); letter-spacing: 0; } .term-card__hint { font-family: var(--font-display); font-size: var(--text-callout); font-weight: 500; color: var(--accent); display: inline-flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; } .term-card__hint::after { content: "+"; font-size: 1.2em; font-weight: 300; line-height: 0.8; transition: transform var(--duration-fast) var(--ease-apple); } .term-card[open] > summary .term-card__hint { color: var(--ink-soft); } .term-card[open] > summary .term-card__hint::after { transform: rotate(45deg); } .term-card__body { padding: 0 0 var(--space-5); max-width: var(--measure); } .term-card__body p { margin: 0 0 var(--space-3); color: var(--ink-soft); } .term-card__body p:last-child { margin-bottom: 0; } /* ------------------------------------------------------------ 章首胶囊（Pull Quote） ------------------------------------------------------------ */ .callout { display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--paper-elevated); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-md); margin: var(--space-5) 0; align-items: flex-start; max-width: var(--measure); } .callout__icon { flex: 0 0 24px; height: 24px; border-radius: var(--radius-xs); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 600; font-family: var(--font-display); font-size: 0.78rem; margin-top: 2px; } .callout__body { font-size: var(--text-callout); color: var(--ink); line-height: var(--leading-body); } .callout__body p { max-width: none; } /* ------------------------------------------------------------ 返回顶部按钮 ------------------------------------------------------------ */ .back-to-top { position: fixed; right: var(--space-5); bottom: var(--space-5); width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--paper-elevated) 80%, transparent); color: var(--ink-soft); border: 1px solid var(--line); cursor: pointer; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); box-shadow: var(--shadow-md); display: grid; place-items: center; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity var(--duration-base) var(--ease-apple), transform var(--duration-base) var(--ease-apple), color var(--duration-fast) var(--ease-apple), background var(--duration-fast) var(--ease-apple); z-index: 70; } .back-to-top:hover { color: var(--accent); background: var(--paper); } .back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .back-to-top:hover { background: var(--accent-strong); } .back-to-top svg { width: 18px; height: 18px; stroke-width: 2; } /* ------------------------------------------------------------ 搜索遮罩 ------------------------------------------------------------ */ .search-modal { position: fixed; inset: 0; z-index: 110; background: rgba(15, 12, 8, 0.5); backdrop-filter: blur(4px); display: grid; place-items: start center; padding-top: 14vh; opacity: 0; pointer-events: none; transition: opacity 0.18s ease; } .search-modal[data-open="true"] { opacity: 1; pointer-events: auto; } .search-box { width: min(640px, 92vw); background: var(--paper-elevated); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-xl); padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 10px; max-height: 70vh; } .search-box__input-row { display: flex; align-items: center; gap: 10px; padding: 4px 8px; border-bottom: 1px solid var(--divider); } .search-box__input-row svg { width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; } .search-box__input { flex: 1; border: none; outline: none; background: transparent; font-size: 1rem; font-family: inherit; color: var(--ink); padding: 12px 4px; } .search-box__hint { font-family: "Inter", sans-serif; font-size: 0.72rem; color: var(--muted); background: var(--surface); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--line); } .search-results { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; flex: 1; scrollbar-width: thin; } .search-results__empty { padding: 22px 12px; color: var(--muted); font-size: 0.92rem; text-align: center; } .search-result { display: block; padding: 10px 12px; border: none; background: transparent; width: 100%; text-align: left; border-radius: 10px; color: var(--ink); cursor: pointer; font-family: inherit; font-size: 0.92rem; line-height: 1.5; } .search-result:hover, .search-result.is-active { background: var(--accent-fade); color: var(--accent-strong); } .search-result__path { display: block; font-size: 0.72rem; color: var(--muted); margin-top: 3px; font-family: "Inter", sans-serif; letter-spacing: 0.02em; } .search-result mark { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--ink-strong); border-radius: 3px; padding: 0 2px; } /* ------------------------------------------------------------ 页脚 ------------------------------------------------------------ */ .site-footer { margin-top: 56px; padding: 28px 24px 12px; border-top: 1px solid var(--divider); text-align: center; color: var(--muted); font-family: "Inter", sans-serif; font-size: 0.82rem; line-height: 1.7; } .site-footer a { color: var(--accent); border: none; } .site-footer a:hover { text-decoration: underline; background: transparent; } /* ------------------------------------------------------------ Toast 提示 ------------------------------------------------------------ */ .toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); padding: 10px 16px; background: var(--ink-strong); color: var(--paper-elevated); border-radius: 10px; font-size: 0.85rem; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 200; font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif; } .toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } /* ------------------------------------------------------------ 入场动画（仅章节卡片，可被 reduced-motion 覆盖） ------------------------------------------------------------ */ .fade-in { opacity: 0; transform: translateY(12px); transition: opacity var(--duration-slow) var(--ease-apple), transform var(--duration-slow) var(--ease-apple); } .fade-in.is-shown { opacity: 1; transform: translateY(0); } /* ------------------------------------------------------------ 章节 (
) — Apple HIG 编辑风 不用大彩条/底色块, 用 Eyebrow + 大字标题 (Apple Newsroom 风) data-band 仅保留为 var, 在 .chapter-card 顶部细线还会用 ------------------------------------------------------------ */ .chapter-section { --chapter-band: var(--accent); position: relative; padding-top: 0; margin-top: var(--space-9); } .chapter-section:first-of-type { margin-top: var(--space-6); } .chapter-section[data-band="1"] { --chapter-band: var(--band-1); } .chapter-section[data-band="2"] { --chapter-band: var(--band-2); } .chapter-section[data-band="3"] { --chapter-band: var(--band-3); } .chapter-section[data-band="4"] { --chapter-band: var(--band-4); } .chapter-section[data-band="5"] { --chapter-band: var(--band-5); } .chapter-section[data-band="6"] { --chapter-band: var(--band-6); } .chapter-section > .chapter-h2 { position: relative; padding: 0; margin: 0 0 var(--space-5); background: none; border: none; border-radius: 0; } /* 章节 eyebrow: "CHAPTER 01" 小字头标, Apple Newsroom 风 */ .chapter-section > .chapter-h2::before { content: "CHAPTER " attr(data-chapter); display: block; font-family: var(--font-display); font-size: var(--text-caption); font-weight: 700; letter-spacing: 0.16em; color: var(--chapter-band); text-transform: uppercase; margin-bottom: var(--space-3); line-height: 1; opacity: 1; } /* ------------------------------------------------------------ TL;DR 章首卡片 — Apple Docs Callout 风 纯 paper-elevated 底, 顶部 3px hairline 用章节 band, 不再有 gradient/装饰圆/阴影 ------------------------------------------------------------ */ .tldr-card { --card-band: var(--accent); margin: var(--space-6) 0 var(--space-7); padding: var(--space-5) var(--space-6); background: var(--paper-elevated); border: 1px solid var(--line); border-top: 3px solid var(--card-band); border-radius: var(--radius-md); box-shadow: none; position: relative; overflow: visible; } .tldr-card[data-band="1"] { --card-band: var(--band-1); } .tldr-card[data-band="2"] { --card-band: var(--band-2); } .tldr-card[data-band="3"] { --card-band: var(--band-3); } .tldr-card[data-band="4"] { --card-band: var(--band-4); } .tldr-card[data-band="5"] { --card-band: var(--band-5); } .tldr-card[data-band="6"] { --card-band: var(--band-6); } .tldr-card__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); } .tldr-card__icon { flex: 0 0 28px; width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--card-band); color: var(--paper); display: grid; place-items: center; font-weight: 700; font-size: 0.95rem; } .tldr-card__eyebrow { font-family: var(--font-display); font-size: var(--text-caption); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--card-band); } .tldr-card__title { font-family: var(--font-display); font-size: var(--text-h3); font-weight: 600; color: var(--ink-strong); margin-top: 2px; letter-spacing: var(--tracking-h); } .tldr-card__list { list-style: none; margin: 0; padding: 0; counter-reset: tldr; } .tldr-card__list li { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--divider); counter-increment: tldr; align-items: flex-start; font-size: var(--text-body); color: var(--ink); line-height: var(--leading-body); max-width: none; } .tldr-card__list li:first-child { border-top: none; padding-top: 0; } .tldr-card__bullet { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); color: var(--ink-soft); display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 0.75rem; margin-top: 4px; font-feature-settings: "tnum"; } .tldr-card__bullet::before { content: counter(tldr); } .tldr-card__foot { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--divider); font-family: var(--font-display); font-size: var(--text-footnote); color: var(--muted); } .tldr-card__foot em { font-style: normal; color: var(--ink-strong); font-weight: 500; margin: 0 2px; } /* ------------------------------------------------------------ 章末上下章导航 ------------------------------------------------------------ */ .chapter-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; margin: 36px 0 8px; padding-top: 24px; border-top: 1px dashed var(--line); } .chapter-nav__btn { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; background: var(--paper-elevated); border: 1px solid var(--line); border-radius: 12px; font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif; text-decoration: none; color: var(--ink); transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; min-width: 0; } .chapter-nav__btn:not(.is-disabled):hover { transform: translateY(-2px); border-color: var(--chapter-band, var(--accent)); box-shadow: var(--shadow-md); background: color-mix(in srgb, var(--chapter-band, var(--accent)) 6%, var(--paper-elevated)); } .chapter-nav__btn--prev { text-align: left; } .chapter-nav__btn--next { text-align: right; } .chapter-nav__btn--map { text-align: center; align-items: center; } .chapter-nav__btn.is-disabled { opacity: 0.45; cursor: not-allowed; text-align: center; align-items: center; } .chapter-nav__dir { font-size: 0.74rem; letter-spacing: 0.08em; color: var(--chapter-band, var(--accent)); font-weight: 700; text-transform: uppercase; } .chapter-nav__title { font-size: 0.95rem; font-weight: 600; color: var(--ink-strong); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 720px) { .chapter-nav { grid-template-columns: 1fr 1fr; } .chapter-nav__btn--map { grid-column: 1 / -1; order: -1; } } /* ------------------------------------------------------------ SVG 概念图 ------------------------------------------------------------ */ figure.diagram { margin: 32px 0 36px; padding: 24px 24px 16px; background: var(--paper-elevated); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); position: relative; } figure.diagram svg { display: block; width: 100%; height: auto; max-width: 100%; margin: 0 auto; background: transparent; border: none; box-shadow: none; padding: 0; } figure.diagram figcaption { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 0.86rem; color: var(--muted); text-align: center; line-height: 1.55; } figure.diagram figcaption b { color: var(--accent-strong); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em; margin-right: 8px; display: inline-block; padding: 2px 8px; background: var(--accent-fade); border-radius: 4px; } /* SVG 文字使用主题色 */ figure.diagram svg text { font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif; fill: var(--ink); } figure.diagram svg .dia-label-strong { fill: var(--ink-strong); font-weight: 700; } figure.diagram svg .dia-label-soft { fill: var(--muted); } figure.diagram svg .dia-stroke { stroke: var(--line-strong); fill: none; } figure.diagram svg .dia-stroke-accent{ stroke: var(--accent); fill: none; } /* 打印里也要保留 */ @media print { figure.diagram { background: white; border: 1px solid #ccc; box-shadow: none; } } /* ============================================================ AI 划词解释 ============================================================ */ /* 选中文字时浮出的小气泡按钮 */ .ai-bubble { position: absolute; z-index: 96; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 12px; background: linear-gradient(135deg, var(--band-2), var(--band-6)); color: #fffdf7; border: none; border-radius: 999px; font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 0.86rem; font-weight: 600; cursor: pointer; box-shadow: 0 6px 24px rgba(20, 14, 0, 0.25), 0 2px 4px rgba(20, 14, 0, 0.18); opacity: 0; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; letter-spacing: 0.02em; -webkit-tap-highlight-color: transparent; transform: translateY(-2px); } .ai-bubble:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 8px 28px rgba(20, 14, 0, 0.3); } .ai-bubble:active { transform: translateY(0) scale(0.97); } .ai-bubble svg { width: 14px; height: 14px; flex: 0 0 auto; } .ai-bubble__kbd { font-family: "Inter", sans-serif; font-size: 0.7rem; background: rgba(255, 255, 255, 0.2); padding: 1px 6px; border-radius: 4px; margin-left: 2px; font-weight: 500; } /* 右侧滑入解释面板 */ .ai-panel { position: fixed; top: 0; right: 0; width: min(440px, 92vw); height: 100dvh; background: var(--paper-elevated); border-left: 1px solid var(--line); box-shadow: -16px 0 40px rgba(20, 14, 0, 0.15); z-index: 105; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1); font-family: "Noto Serif SC", "PingFang SC", "Microsoft YaHei", serif; } .ai-panel.is-open { transform: translateX(0); } .ai-panel__head { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 1px solid var(--divider); flex: 0 0 auto; } .ai-panel__title-wrap { flex: 1; min-width: 0; } .ai-panel__eyebrow { font-family: "Inter", sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 4px; } .ai-panel__title { font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 1.15rem; font-weight: 700; color: var(--ink-strong); margin: 0; line-height: 1.3; } .ai-panel__close { width: 36px; height: 36px; border-radius: 10px; } .ai-panel__quote { margin: 14px 20px 0; padding: 12px 14px; background: var(--surface); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; font-size: 0.86rem; color: var(--ink-soft); line-height: 1.6; font-style: italic; max-height: 96px; overflow-y: auto; flex: 0 0 auto; } .ai-panel__body { padding: 16px 22px 22px; overflow-y: auto; flex: 1 1 auto; font-size: 0.97rem; line-height: 1.78; color: var(--ink); scroll-behavior: smooth; } .ai-panel__body p { margin: 0.6em 0; } .ai-panel__body p:first-child { margin-top: 0; } .ai-panel__body strong { color: var(--accent-strong); } .ai-panel__body code { background: var(--code-inline-bg); color: var(--code-inline-ink); padding: 0.1em 0.35em; border-radius: 4px; font-size: 0.9em; } .ai-panel__body pre { margin: 0.8em 0; padding: 12px 14px; font-size: 0.82rem; } .ai-panel__body a { font-weight: 600; } .ai-panel__loading { color: var(--muted); font-size: 0.94rem; } .ai-panel__loading .dots::after { content: "..."; display: inline-block; animation: aiDots 1.2s steps(4, end) infinite; } @keyframes aiDots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } } .ai-panel__error { background: color-mix(in srgb, var(--band-6) 10%, transparent); border: 1px solid color-mix(in srgb, var(--band-6) 35%, var(--line)); color: var(--ink); padding: 14px 16px; border-radius: 10px; } .ai-panel__error p { margin: 0.4em 0; } .ai-panel__error a { color: var(--band-6); text-decoration: underline; } .ai-panel__foot { display: flex; align-items: center; gap: 8px; padding: 12px 18px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--divider); flex: 0 0 auto; background: color-mix(in srgb, var(--paper) 70%, var(--paper-elevated)); } .ai-panel__action { appearance: none; background: var(--paper); border: 1px solid var(--line); color: var(--ink-soft); font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 0.82rem; padding: 6px 12px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background 0.15s, color 0.15s, border-color 0.15s; } .ai-panel__action:hover { background: var(--surface-hover); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); } .ai-panel__byok-hint { margin-left: auto; font-family: "Inter", sans-serif; font-size: 0.74rem; color: var(--muted); letter-spacing: 0.02em; } .ai-panel__byok-hint[data-byok="true"] { color: var(--band-4); font-weight: 600; } /* BYOK 表单（注入设置弹层） */ .menu__byok { margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--line); } .menu__opt { font-size: 0.66rem; color: var(--muted); background: var(--surface); padding: 1px 6px; border-radius: 4px; margin-left: 4px; font-weight: 500; letter-spacing: 0; } .menu__hint { margin: 4px 8px 8px; font-size: 0.78rem; color: var(--muted); line-height: 1.55; } .menu__hint a { color: var(--accent); border: none; } .menu__hint a:hover { text-decoration: underline; background: transparent; } .menu__byok-row { display: flex; gap: 6px; align-items: center; padding: 0 4px; } .menu__byok-input { flex: 1; min-width: 0; appearance: none; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-family: "JetBrains Mono", monospace; font-size: 0.78rem; padding: 7px 10px; border-radius: 8px; outline: none; } .menu__byok-input:focus { border-color: var(--accent); background: var(--paper-elevated); } .menu__byok-btn { flex: 0 0 auto; padding: 7px 10px; font-size: 0.78rem; } .menu__byok-btn--clear { flex: 0 0 32px; padding: 0; font-size: 1rem; line-height: 1; } .menu__byok-status { margin: 8px 4px 0; font-family: "Inter", sans-serif; font-size: 0.74rem; color: var(--muted); } .menu__byok-status[data-ok="true"] { color: var(--band-4); } .menu__byok-status code { font-family: "JetBrains Mono", monospace; font-size: 0.78rem; background: var(--surface); padding: 1px 6px; border-radius: 4px; color: inherit; } /* 桌面：开 panel 时主页右侧留出空间，避免遮挡 */ @media (min-width: 1280px) { body:has(.ai-panel.is-open) .page { margin-right: 460px; transition: margin-right 0.3s ease; } body:has(.ai-stash.is-open) .page { margin-right: 440px; transition: margin-right 0.3s ease; } } /* ============================================================ AI 划词「知识柜」 — 右边缘小尖头 + 抽屉式卡片列表 ============================================================ */ /* 右边缘永远显示的小尖头 */ .ai-stash-handle { position: fixed; top: 50%; right: 0; transform: translateY(-50%); z-index: 110; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px 14px 9px; background: var(--paper-elevated); border: 1px solid var(--line); border-right: none; border-radius: 14px 0 0 14px; color: var(--ink-soft); cursor: pointer; box-shadow: -6px 6px 22px rgba(20, 14, 0, 0.1); font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif; -webkit-tap-highlight-color: transparent; transition: padding 0.2s ease, background 0.2s ease, color 0.2s ease, right 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.2s ease, box-shadow 0.2s ease; } .ai-stash-handle:hover { padding-right: 14px; color: var(--accent); background: var(--paper); box-shadow: -8px 8px 26px rgba(20, 14, 0, 0.15); } .ai-stash-handle:active { transform: translateY(-50%) scale(0.96); } .ai-stash-handle__icon { width: 14px; height: 14px; flex: 0 0 auto; transition: transform 0.25s ease; } .ai-stash-handle[data-open="true"] .ai-stash-handle__icon { transform: rotate(180deg); } .ai-stash-handle__count { display: inline-block; min-width: 20px; padding: 1px 6px; background: linear-gradient(135deg, var(--band-2), var(--band-6)); color: #fffdf7; font-family: "Inter", sans-serif; font-size: 0.66rem; border-radius: 999px; text-align: center; font-weight: 700; line-height: 1.5; box-shadow: 0 2px 6px rgba(20, 14, 0, 0.15); } .ai-stash-handle__label { writing-mode: vertical-rl; text-orientation: upright; font-size: 0.62rem; letter-spacing: 0.32em; font-weight: 600; color: inherit; } .ai-stash-handle[data-empty="true"] { opacity: 0.55; } .ai-stash-handle[data-empty="true"]:hover { opacity: 1; } /* 抽屉打开时, 让小尖头跟着抽屉的左边缘走 (桌面端) */ @media (min-width: 769px) { body:has(.ai-stash.is-open) .ai-stash-handle { right: min(420px, 92vw); } } /* 解释面板打开时, 临时把笔记尖头藏到屏幕外, 避免在面板上叠出花头 */ body:has(.ai-panel.is-open) .ai-stash-handle { opacity: 0; pointer-events: none; transform: translate(40px, -50%); } /* 抽屉本体 */ .ai-stash { position: fixed; top: 0; right: 0; width: min(420px, 92vw); height: 100dvh; background: var(--paper-elevated); border-left: 1px solid var(--line); box-shadow: -16px 0 40px rgba(20, 14, 0, 0.15); z-index: 104; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1); font-family: "Noto Serif SC", "PingFang SC", "Microsoft YaHei", serif; } .ai-stash.is-open { transform: translateX(0); } .ai-stash__head { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 20px 12px; border-bottom: 1px solid var(--divider); flex: 0 0 auto; } .ai-stash__title-wrap { flex: 1; min-width: 0; } .ai-stash__eyebrow { font-family: "Inter", sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 4px; } .ai-stash__title { font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 1.15rem; font-weight: 700; color: var(--ink-strong); margin: 0; line-height: 1.3; } .ai-stash__close { width: 36px; height: 36px; border-radius: 10px; } .ai-stash__toolbar { display: flex; gap: 8px; align-items: center; padding: 10px 18px 6px; flex: 0 0 auto; } .ai-stash__search { flex: 1; min-width: 0; appearance: none; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-family: inherit; font-size: 0.86rem; padding: 7px 12px; border-radius: 8px; outline: none; transition: border-color 0.15s, background 0.15s; } .ai-stash__search:focus { border-color: var(--accent); background: var(--paper); } .ai-stash__clear { appearance: none; background: transparent; border: 1px solid var(--line); color: var(--muted); font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 0.78rem; padding: 6px 10px; border-radius: 8px; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; } .ai-stash__clear:hover { color: var(--band-6); border-color: color-mix(in srgb, var(--band-6) 35%, var(--line)); background: color-mix(in srgb, var(--band-6) 6%, transparent); } .ai-stash__list { flex: 1 1 auto; overflow-y: auto; padding: 8px 14px 14px; display: flex; flex-direction: column; gap: 12px; outline: none; scroll-behavior: smooth; } .ai-stash__empty { margin: 30px 12px; color: var(--muted); font-size: 0.92rem; line-height: 1.7; } .ai-stash__empty p { margin: 0.6em 0; } .ai-stash__empty strong { color: var(--ink); } .ai-stash__empty em { color: var(--accent); font-style: normal; font-weight: 600; } .ai-stash__foot { flex: 0 0 auto; padding: 10px 18px max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--divider); font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 0.72rem; color: var(--muted); text-align: center; background: color-mix(in srgb, var(--paper) 70%, var(--paper-elevated)); } /* 单张卡片 */ .ai-stash-card { background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .ai-stash-card:hover { box-shadow: 0 6px 20px rgba(20, 14, 0, 0.07); } .ai-stash-card__head { display: flex; align-items: center; gap: 8px; font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 0.7rem; color: var(--muted); } .ai-stash-card__time { letter-spacing: 0.04em; flex: 0 0 auto; } .ai-stash-card__ctx { flex: 1 1 auto; min-width: 0; font-size: 0.7rem; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); padding: 1px 8px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ai-stash-card__ctx--empty { background: transparent; padding: 0; } .ai-stash-card__del { margin-left: auto; width: 26px; height: 26px; flex: 0 0 auto; border-radius: 6px; color: var(--muted); } .ai-stash-card__del:hover { color: var(--band-6); background: color-mix(in srgb, var(--band-6) 8%, transparent); } .ai-stash-card__quote { margin: 0; padding: 4px 0 4px 10px; border-left: 2px solid var(--divider); font-family: "Noto Serif SC", "PingFang SC", "Microsoft YaHei", serif; font-size: 0.92rem; line-height: 1.65; color: var(--ink); font-style: italic; /* 最多 4 行截断 */ display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .ai-stash-card__answer-wrap { font-size: 0.82rem; } .ai-stash-card__answer-wrap > summary { cursor: pointer; color: var(--accent); font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; list-style: none; user-select: none; display: inline-flex; align-items: center; gap: 4px; } .ai-stash-card__answer-wrap > summary::-webkit-details-marker { display: none; } .ai-stash-card__answer-wrap > summary::before { content: "▸"; display: inline-block; width: 0.9em; font-size: 0.85em; transition: transform 0.15s; } .ai-stash-card__answer-wrap[open] > summary::before { content: "▾"; } .ai-stash-card__answer { margin-top: 8px; padding: 10px 12px; background: var(--surface); border-radius: 6px; font-family: "Noto Serif SC", "PingFang SC", "Microsoft YaHei", serif; font-size: 0.88rem; line-height: 1.72; color: var(--ink); } .ai-stash-card__answer p { margin: 0.4em 0; } .ai-stash-card__answer p:first-child { margin-top: 0; } .ai-stash-card__answer p:last-child { margin-bottom: 0; } .ai-stash-card__answer strong { color: var(--accent-strong); } .ai-stash-card__answer code { background: var(--code-inline-bg); color: var(--code-inline-ink); padding: 0.1em 0.35em; border-radius: 4px; font-size: 0.92em; } .ai-stash-card__answer pre { margin: 0.6em 0; padding: 10px 12px; font-size: 0.78rem; overflow-x: auto; } .ai-stash-card__note-label { font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; color: var(--accent); text-transform: uppercase; margin-top: 2px; } .ai-stash-card__note { appearance: none; background: var(--surface); border: 1px dashed var(--line); color: var(--ink); font-family: "Noto Serif SC", "PingFang SC", "Microsoft YaHei", serif; font-size: 0.92rem; line-height: 1.6; padding: 8px 10px; border-radius: 6px; resize: vertical; min-height: 48px; max-height: 240px; outline: none; width: 100%; box-sizing: border-box; transition: border-color 0.15s, background 0.15s, border-style 0.15s; } .ai-stash-card__note:focus { border-color: var(--accent); border-style: solid; background: var(--paper-elevated); } .ai-stash-card__note::placeholder { color: var(--muted); font-style: italic; font-size: 0.86rem; } .ai-stash-card__foot { display: flex; gap: 6px; flex-wrap: wrap; } .ai-stash-card__btn { appearance: none; background: var(--paper); border: 1px solid var(--line); color: var(--ink-soft); font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 0.74rem; padding: 5px 10px; border-radius: 6px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .ai-stash-card__btn:hover { background: var(--surface-hover); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); } /* 打印：完全隐藏 AI 相关组件 */ @media print { .ai-bubble, .ai-panel, .ai-stash, .ai-stash-handle, .menu__byok { display: none !important; } } /* ============================================================ 出版级编号列表 (.numbered-list) 把"第一,...第二,...第三,..."这种挤在一段里的散文改成视觉化列表 ============================================================ */ ol.numbered-list { list-style: none; margin: 16px 0 22px; padding: 0; counter-reset: numlist; display: flex; flex-direction: column; gap: 8px; } ol.numbered-list > li { counter-increment: numlist; position: relative; padding: 12px 16px 12px 56px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; font-size: 1rem; line-height: 1.78; color: var(--ink); transition: background 0.15s ease, border-color 0.15s ease; } ol.numbered-list > li::before { content: counter(numlist); position: absolute; left: 14px; top: 12px; width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color: var(--paper-elevated); font-family: "Inter", sans-serif; font-weight: 800; font-size: 0.92rem; display: flex; align-items: center; justify-content: center; letter-spacing: -0.02em; box-shadow: 0 1px 2px rgba(20, 14, 0, 0.18); } ol.numbered-list > li:hover { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); } ol.numbered-list > li > strong:first-child { display: inline; color: var(--accent-strong); font-weight: 700; margin-right: 4px; } /* 列表前后的引导/总结句 */ .numbered-intro, .numbered-outro { font-size: 1.02rem; margin: 1em 0 0.6em; color: var(--ink); } .numbered-outro { margin-top: 0.4em; color: var(--ink-soft); font-style: italic; } /* mobile 自适应 */ @media (max-width: 768px) { ol.numbered-list > li { padding: 12px 14px 12px 50px; font-size: 0.94rem; } ol.numbered-list > li::before { width: 26px; height: 26px; font-size: 0.82rem; left: 12px; top: 12px; } } /* ============================================================ 高密度知识组件（13–16 章营养升级用） ============================================================ */ /* PENG 教训卡片：作者亲身踩坑回忆 */ .lesson-card { --card-band: var(--band-6); position: relative; margin: 18px 0; padding: 18px 22px 18px 22px; background: linear-gradient( 140deg, color-mix(in srgb, var(--card-band) 14%, var(--paper-elevated)), var(--paper-elevated) 70% ); border: 1px solid color-mix(in srgb, var(--card-band) 30%, var(--line)); border-left: 5px solid var(--card-band); border-radius: 14px; box-shadow: var(--shadow-sm); } .lesson-card__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; } .lesson-card__num { flex: 0 0 auto; font-family: "Inter", sans-serif; font-weight: 800; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--card-band); background: color-mix(in srgb, var(--card-band) 15%, transparent); padding: 4px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--card-band) 35%, transparent); } .lesson-card__title { font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif; font-weight: 700; font-size: 1.05rem; line-height: 1.4; color: var(--ink-strong); } .lesson-card__scene { margin: 6px 0 12px; color: var(--ink-soft); font-size: 0.98rem; line-height: 1.7; } .lesson-card__rule { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; background: color-mix(in srgb, var(--card-band) 10%, transparent); border-radius: 8px; border: 1px dashed color-mix(in srgb, var(--card-band) 35%, transparent); } .lesson-card__rule::before { content: "→"; font-weight: 800; color: var(--card-band); flex: 0 0 auto; } .lesson-card__rule b { color: var(--card-band); font-weight: 700; } /* 工具栈卡片：每个工具一张小卡 */ .stack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 20px 0 8px; } .stack-card { background: var(--paper-elevated); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 14px 18px; border-left: 4px solid var(--accent); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .stack-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .stack-card[data-band="2"] { border-left-color: var(--band-2); } .stack-card[data-band="3"] { border-left-color: var(--band-3); } .stack-card[data-band="4"] { border-left-color: var(--band-4); } .stack-card[data-band="5"] { border-left-color: var(--band-5); } .stack-card[data-band="6"] { border-left-color: var(--band-6); } .stack-card__role { font-family: "Inter", sans-serif; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 700; } .stack-card__name { font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif; font-weight: 700; font-size: 1.02rem; color: var(--ink-strong); margin: 4px 0 6px; } .stack-card__why { font-size: 0.84rem; color: var(--ink-soft); line-height: 1.55; margin: 0 0 6px; } .stack-card__alt { font-size: 0.76rem; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 6px; margin-top: 8px; } .stack-card__alt b { color: var(--ink-soft); font-weight: 600; } /* 日程卡片：从 D-1 到 D-7 */ .day-list { list-style: none; margin: 16px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 10px; } .day-list li { display: flex; gap: 14px; padding: 14px 16px; background: var(--paper-elevated); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px; } .day-list .day-num { flex: 0 0 56px; font-family: "Inter", sans-serif; font-weight: 800; font-size: 1.4rem; color: var(--accent); line-height: 1; letter-spacing: -0.02em; display: flex; align-items: flex-start; justify-content: center; border-right: 1px solid var(--line); padding-right: 14px; } .day-list .day-body { flex: 1; min-width: 0; } .day-list .day-title { font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif; font-weight: 700; color: var(--ink-strong); margin-bottom: 4px; } .day-list .day-detail { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.65; } .day-list .day-checklist { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .day-list .day-checklist li { display: inline-block; border: none; border-left: none; background: var(--surface); padding: 3px 9px; border-radius: 999px; font-size: 0.78rem; color: var(--ink-soft); margin: 0; } /* 大数字徽章 (用于成本表 / MRR 里程碑) */ .metric { display: inline-block; font-family: var(--font-display); font-weight: 600; color: var(--accent-strong); background: var(--accent-fade); padding: 1px 8px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); white-space: nowrap; /* pill 宁可溢出, 不允许 wrap (wrap 后 pill 形状会变形) */ font-feature-settings: "tnum"; } .metric--ok { color: var(--band-4); background: color-mix(in srgb, var(--band-4) 15%, transparent); border-color: color-mix(in srgb, var(--band-4) 30%, transparent); } .metric--warn { color: var(--band-1); background: color-mix(in srgb, var(--band-1) 18%, transparent); border-color: color-mix(in srgb, var(--band-1) 35%, transparent); } .metric--bad { color: var(--band-6); background: color-mix(in srgb, var(--band-6) 15%, transparent); border-color: color-mix(in srgb, var(--band-6) 35%, transparent); } /* 成本/判断徽章 — .metric 的"长文本兄弟" CONTRACT: - 用于 ≥12 字符的成本/判断/阈值文本 ($0–25/月, "月 churn > 8% → 复盘") - 矩形圆角而非 pill, 多行 wrap 后仍是漂亮的小卡 */ .cost-chip { display: inline-block; font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif; font-weight: 600; font-size: 0.86em; line-height: 1.5; padding: 4px 10px; border-radius: 8px; border: 1px solid transparent; word-break: keep-all; max-width: 100%; text-align: left; vertical-align: baseline; } .cost-chip--ok { color: #16a34a; background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.28); } .cost-chip--warn { color: #b45309; background: rgba(234, 179, 8, 0.14); border-color: rgba(234, 179, 8, 0.32); } .cost-chip--bad { color: #b91c1c; background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.30); } /* ------------------------------------------------------------ 关于作者 · 学习小组卡片组 ------------------------------------------------------------ */ .about-author { margin: 64px 0 24px; } .about-author > h2 { border-left: 6px solid var(--accent); } .about-card { position: relative; background: linear-gradient( 140deg, color-mix(in srgb, var(--band-2) 14%, var(--paper-elevated)), var(--paper-elevated) 55%, color-mix(in srgb, var(--band-6) 8%, var(--paper-elevated)) ); border: 1px solid var(--line); border-left: 5px solid var(--accent); border-radius: 18px; padding: 30px 34px 22px; margin: 22px 0 36px; box-shadow: var(--shadow-md); overflow: hidden; } .about-card::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; background: radial-gradient(closest-side, var(--accent-fade), transparent 80%); pointer-events: none; } .about-card > * { position: relative; z-index: 1; } .about-card__head { display: flex; align-items: center; gap: 20px; margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px dashed color-mix(in srgb, var(--accent) 25%, var(--line)); } .about-card__avatar { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 16px; background: linear-gradient(135deg, var(--band-2), var(--band-6)); color: var(--paper-elevated); display: grid; place-items: center; font-weight: 800; font-size: 1.9rem; font-family: "Inter", sans-serif; box-shadow: var(--shadow-md); letter-spacing: -0.02em; } .about-card__meta { flex: 1; min-width: 0; } .about-card__eyebrow { font-family: "Inter", sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; color: var(--accent); text-transform: uppercase; } .about-card__name { font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 1.65rem; font-weight: 800; color: var(--ink-strong); line-height: 1.1; margin: 4px 0 6px; letter-spacing: -0.01em; } .about-card__role { font-size: 0.94rem; color: var(--ink-soft); margin-bottom: 8px; } .about-card__chips { display: flex; flex-wrap: wrap; gap: 6px; } .about-card__chip { font-family: "Inter", sans-serif; font-size: 0.72rem; color: var(--accent-strong); background: var(--accent-fade); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); padding: 3px 10px; border-radius: 999px; white-space: nowrap; } .about-card__quote { margin: 18px 0; padding: 14px 18px; background: color-mix(in srgb, var(--accent) 9%, transparent); border-left: 4px solid var(--accent); border-radius: 10px; box-shadow: none; } .about-card__quote::before { display: none; } .about-card__quote p { margin: 0; color: var(--ink-strong); } @media (max-width: 540px) { .about-card { padding: 22px 20px 16px; } .about-card__head { flex-direction: column; align-items: flex-start; gap: 14px; } } /* 学习小组：4 张行动卡片 */ .join-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 22px 0 8px; } .join-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; background: var(--paper-elevated); border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; } .join-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-md); background: color-mix(in srgb, var(--accent) 5%, var(--paper-elevated)); } .join-card__icon { font-size: 1.45rem; line-height: 1; } .join-card__title { font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif; font-weight: 700; font-size: 1.02rem; color: var(--ink-strong); margin-top: 4px; } .join-card__desc { font-size: 0.84rem; color: var(--muted); line-height: 1.55; } .about-credo { text-align: center; margin: 28px auto 6px; max-width: 560px; color: var(--ink-soft); font-size: 0.96rem; line-height: 1.8; padding: 16px 18px; background: var(--surface); border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--accent) 30%, var(--line)); } .about-credo strong { color: var(--accent-strong); } .about-sign { text-align: right; margin-top: 12px; font-style: italic; color: var(--ink-soft); font-family: Georgia, "Times New Roman", serif; } /* Hero 副许可信息缩小 */ .hero__author--meta { font-size: 0.74rem; color: var(--muted); margin-top: 2px; opacity: 0.85; } /* ------------------------------------------------------------ 打印 ------------------------------------------------------------ */ @media print { .reading-progress, .topbar, .sidebar, .scrim, .back-to-top, .search-modal, .menu, .heading-anchor, .code-copy, .toast, .site-footer, .chapter-map, .chapter-nav, .hero__badges { display: none !important; } body { background: white; color: #111; } .page { display: block; padding: 0; max-width: none; } .main { box-shadow: none; border: none; background: white; padding: 18mm 16mm 20mm; border-radius: 0; } .main::before { display: none; } h1, h2, h3, table, img, blockquote, .table-wrap, pre { break-inside: avoid; } a { color: #4b3a1a; border: none; } a[href^="http"]::after { content: " (" attr(href) ") "; font-size: 0.75em; color: #777; } .hero { background: white !important; border: none; box-shadow: none; padding: 0 0 12mm; } .hero::after { display: none; } } /* ============================================================ 富文本组件在非 Studio 主题下的 fallback 样式 ============================================================ */ .highlight { background: linear-gradient(180deg, transparent 60%, rgba(255, 220, 80, 0.45) 60%); padding: 0 2px; } .key-point { display: inline-flex; align-items: center; gap: 6px; background: rgba(0, 0, 0, 0.06); color: inherit; padding: 2px 10px; border-radius: 999px; font-weight: 600; font-size: 0.92em; } .key-point::before { content: "★"; font-size: 0.8em; } .section-summary { background: var(--paper-elevated, #fff); border: 1px solid var(--line, #e5e5e5); border-radius: 16px; padding: 22px 26px 18px; margin: 22px 0 28px; position: relative; } .section-summary::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 3px; background: var(--accent, #000); border-radius: 0 999px 999px 0; } .section-summary__eyebrow { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent, #000); margin-bottom: 8px; display: block; } .section-summary__title { font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif; font-weight: 700; font-size: 1.05rem; margin: 0 0 14px; line-height: 1.45; } .section-summary__list { list-style: none; margin: 0; padding: 0; counter-reset: ss; display: flex; flex-direction: column; gap: 10px; } .section-summary__list li { display: flex; gap: 12px; align-items: flex-start; counter-increment: ss; font-size: 0.96rem; line-height: 1.65; } .section-summary__list li::before { content: counter(ss); flex: 0 0 24px; width: 24px; height: 24px; background: var(--accent-soft, #f0f0f0); color: var(--accent, #000); border-radius: 50%; font-weight: 700; font-size: 0.78rem; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; line-height: 1; } .section-summary__foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--divider, #efefef); font-size: 0.84rem; color: var(--muted, #666); } /* ============================================================ ADHD 学习模式组件 - learning-deck: 章节卡导航 + 勾选进度 - focus-text: 长段落自动折叠/展开 ============================================================ */ .learning-deck { display: none; margin: 24px 0 30px; padding: 22px 24px 18px; border: 1px solid var(--line, #e5e5e5); border-radius: 16px; background: var(--paper-elevated, #fff); } .learning-deck__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } .learning-deck__head h2 { margin: 0; font-size: 1.2rem; border: none; padding: 0; } .learning-deck__progress { margin: 0; font-size: 0.84rem; color: var(--muted); font-family: "Inter", "PingFang SC", sans-serif; } .learning-deck__lead { margin: 0 0 12px; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.65; } .learning-deck__controls { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .learning-deck__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } .learning-empty { padding: 20px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: 0.9rem; text-align: center; } .learning-card { border: 1px solid var(--line, #e5e5e5); border-radius: 14px; background: var(--paper-elevated, #fff); padding: 12px 12px 10px; display: flex; flex-direction: column; gap: 8px; min-height: 168px; transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease; } .learning-card:hover { transform: translateY(-2px); border-color: var(--accent, #000); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.06)); } .learning-card.is-done { opacity: 0.9; border-color: color-mix(in srgb, var(--accent, #000) 35%, var(--line, #ddd)); } .learning-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .learning-card__chapter { font-family: "Inter", "PingFang SC", sans-serif; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--muted); } .learning-card__done { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; color: var(--muted); user-select: none; } .learning-card__done input { margin: 0; accent-color: var(--accent); } .learning-card__title { margin: 0; font-size: 0.96rem; line-height: 1.45; color: var(--ink-strong); font-family: "Inter", "PingFang SC", sans-serif; } .learning-card__summary { margin: 0; font-size: 0.86rem; line-height: 1.6; color: var(--ink-soft); flex: 1; } .learning-card__meta { display: flex; gap: 6px; flex-wrap: wrap; min-height: 20px; } .learning-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 0.7rem; color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); font-family: "Inter", "PingFang SC", sans-serif; white-space: nowrap; } .learning-card__go { display: inline-flex; align-items: center; justify-content: center; gap: 6px; align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--surface, #f4f4f4); color: var(--ink-strong); text-decoration: none; border: 1px solid var(--line); font-size: 0.78rem; font-weight: 600; font-family: "Inter", "PingFang SC", sans-serif; } .learning-card__go:hover { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); text-decoration: none; } /* 长段落折叠 */ .focus-text__toggle { display: none; appearance: none; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); padding: 3px 10px; border-radius: 999px; font-size: 0.76rem; font-family: "Inter", "PingFang SC", sans-serif; cursor: pointer; margin: -2px 0 12px; } .focus-text__toggle:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); background: var(--accent-soft); } html[data-readmode="focus"] .learning-deck { display: block; } html[data-readmode="focus"] .sidebar { display: none !important; } html[data-readmode="focus"] .page { grid-template-columns: minmax(0, 1fr); } html[data-readmode="focus"] .term-intro { display: none; } html[data-readmode="focus"] #book-content p.focus-text { position: relative; max-height: 5.4em; overflow: hidden; transition: max-height 0.2s ease; } html[data-readmode="focus"] #book-content p.focus-text:not(.is-expanded)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.4em; background: linear-gradient(to bottom, transparent, var(--paper, #fff)); pointer-events: none; } html[data-readmode="focus"] #book-content p.focus-text.is-expanded { max-height: none; } html[data-readmode="focus"] #book-content p.focus-text + .focus-text__toggle { display: inline-flex; } @media (max-width: 768px) { .learning-deck { padding: 14px 14px 12px; border-radius: 14px; } .learning-deck__grid { grid-template-columns: 1fr; } .learning-card { min-height: 0; } }