/* ============================================================================ 六智宝库 · 互动解读共享设计系统（跨场景基础层） topic.css ---------------------------------------------------------------------------- 来源：从视觉基准解读页 home/antacid.html 的样式表中提取、整理。 该基准页**不可修改**，本文件是它在其他解读页中的等价复现，令牌数值逐项对齐。 分层约定：本文件只放**跨场景**的东西 —— 重置、设计令牌、背景、8 个布局家族、 通用组件、动效、hero 模式、内容约束。任何场景的解读页都 可以直接引用，不需要任何改动。 **场景语义**（配色卡、方程式排版、色带、标签等）已拆到 assets/css/。新增场景请另做一份自己的主题层， 不要把场景专有的类名塞回本文件。 使用方式（解读页 内，顺序不可颠倒）： nav.css → footer.css → lesson.css → [可选] topic-theme-<场景>.css → 本页专属 style 块 注意 1：解读页**不引用 common.css**（基准页也不引用）——站点公共页的 --card / --ease 等令牌与解读设计系统无关，混用会造成视觉漂移。 注意 2：本文件内任何注释都不得出现成对的「星号 + 斜杠」，否则会提前闭合 注释块、把紧随其后的规则整条吞掉（本文件首次提交即踩过此坑：说明文字里 写了一个带注释的 style 标签示例，导致下面的 :root 令牌全部失效）。 ========================================================================== */ /* ══════════════════════════ 0. 基础重置（Tailwind preflight）══════════════════════════ 基准解读页内嵌了 Tailwind 3.4 的 preflight，它是设计语言的地基： html 的 line-height:1.5、标题/段落 margin 归零、列表去符号、按钮继承字体…… 少了这一层，同样的组件会呈现完全不同的行高与间距。此处按原样复现。 */ *, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; } ::after, ::before { --tw-content: ''; } :host, html { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; font-family: Inter, 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Source Han Sans SC', system-ui, sans-serif; font-feature-settings: normal; font-variation-settings: normal; -webkit-tap-highlight-color: transparent; } body { margin: 0; line-height: inherit; } hr { height: 0; color: inherit; border-top-width: 1px; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, pre, samp { font-family: 'JetBrains Mono', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Source Han Sans SC', ui-monospace, monospace; font-feature-settings: normal; font-variation-settings: normal; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -.25em; } sup { top: -.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } button, input, optgroup, select, textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; margin: 0; padding: 0; } button, select { text-transform: none; } button, input:where([type=button]), input:where([type=reset]), input:where([type=submit]) { -webkit-appearance: button; background-color: transparent; background-image: none; } progress { vertical-align: baseline; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [type=search] { -webkit-appearance: textfield; outline-offset: -2px; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } summary { display: list-item; } blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } menu, ol, ul { list-style: none; margin: 0; padding: 0; } dialog { padding: 0; } textarea { resize: vertical; } input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af; } [role=button], button { cursor: pointer; } :disabled { cursor: default; } audio, canvas, embed, iframe, img, object, svg, video { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } /* ══════════════════════════ 1. 设计令牌 ══════════════════════════ */ :root { /* 纸张与文字 */ --bg: #F2E8D2; --surface: #FAF1DC; --surface-2: #E8D6B0; --surface_2: #E8D6B0; --fg: #2C1F12; --muted: #6F5A47; --border: rgba(44, 31, 18, .10); /* 场景与语义色 */ --primary: #C73E2A; /* 酸 / 强调（朱红） */ --accent: #1E6B6E; /* 碱 / 次强调（青绿） */ --success: #A78F4E; --danger: #B8331E; --warning: #C88B2A; /* 盐 / 提示（金） */ --water: #2E5C7A; /* 水 / 蓝色语义 */ /* 字体（三行必须与基准页 getComputedStyle 取到的值逐字一致： 基准页有两处 :root，后者覆盖前者，以「Fraunces / Songti SC,Source Han Serif SC,SimSun」那一版为准） */ --font-sans: 'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Source Han Sans SC',system-ui,sans-serif; --font-mono: 'JetBrains Mono','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Source Han Sans SC','ui-monospace',monospace; --font-display: 'Fraunces','Songti SC','Source Han Serif SC','SimSun',serif; /* 动效 */ --ease-out: cubic-bezier(.22, 1, .36, 1); } /* ══════════════════════════ 2. 基础与背景 ══════════════════════════ */ html, body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); } body { margin: 0; } html { scroll-behavior: smooth; } ::selection { background: #C73E2A; color: #FAF1DC; } /* 亚麻纸质感背景 + 微弱方格线（纸质笔记感）—— 与基准页逐层一致 */ body { background-color: #F2E8D2; background-image: radial-gradient(circle at 15% 20%, rgba(199, 62, 42, .07) 0%, transparent 38%), radial-gradient(circle at 85% 80%, rgba(30, 107, 110, .07) 0%, transparent 38%), linear-gradient(rgba(44, 31, 18, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(44, 31, 18, .04) 1px, transparent 1px); background-size: auto, auto, 28px 28px, 28px 28px; background-attachment: fixed; } /* 无条件保证 [hidden] 生效：解读脚本常用 el.hidden 做「显示/收起答案」， 若同元素另有 display 规则（哪怕 .card em{display:block}）会覆盖掉 [hidden]， 导致答案永久可见、按钮形同虚设。 */ [hidden] { display: none !important; } /* 术语首次出现的悬浮解释（用 包裹即可） */ abbr[title] { text-decoration: underline dotted; text-decoration-color: currentColor; text-underline-offset: 3px; cursor: help; -webkit-text-decoration-line: underline; -webkit-text-decoration-style: dotted; } /* KaTeX */ .katex, .katex-display { color: inherit; } .katex-display { margin: .5em 0; overflow-x: auto; overflow-y: hidden; } /* ══════════════════════════ 3. section 外壳与标题栏 ══════════════════════════ */ .section-shell { padding: 5rem 1.5rem; max-width: 1200px; margin: 0 auto; box-sizing: border-box; } @media (min-width: 768px) { .section-shell { padding: 6rem 2rem; } } .section-header { margin-bottom: 2rem; } .section-tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; color: var(--primary); text-transform: uppercase; margin-bottom: .75rem; display: inline-block; } .section-title { font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--fg); margin: 0; } .section-subtitle { color: var(--muted); margin-top: .75rem; line-height: 1.7; font-size: 1.05rem; } .section-divider { width: 60px; height: 2px; background: linear-gradient(to right, transparent, var(--border), transparent); margin: 0 auto; } /* ══════════════════════════ 4. 布局家族（含防失衡约束）══════════════════════════ 8 个语义化布局类，section 直接挂 class="section-shell layout-xxx"。 约束存在的意义：防止长内容把画布或侧栏挤变形。 */ section.section-shell { overflow-x: hidden; overflow-y: visible; box-sizing: border-box; } /* 4.1 单栏 */ .layout-single-column { display: block; } /* 4.2 首屏左右分栏（hero 专用，全站唯一保留左右的结构） */ section.layout-hero-split { display: grid !important; grid-template-columns: 1fr !important; gap: 3rem !important; align-items: center !important; } @media (min-width: 900px) { section.layout-hero-split { grid-template-columns: 55fr 45fr !important; grid-auto-flow: row dense !important; min-height: 480px; } section.layout-hero-split > .section-header, section.layout-hero-split > header { grid-column: 1 / -1 !important; } section.layout-hero-split > .hero-copy, section.layout-hero-split > .panel:first-of-type { grid-column: 1 / 2 !important; } section.layout-hero-split > .hero-visual, section.layout-hero-split > .canvas-wrap { grid-column: 2 / 3 !important; align-self: start; display: flex; align-items: center; justify-content: center; } section.layout-hero-split > .hero-copy { max-height: none; } } /* 4.3 画布优先：全宽画布 + 下方控件条（上下堆叠，杜绝右侧空白） */ section.layout-canvas-hero { display: flex !important; flex-direction: column !important; gap: 1.5rem; } section.layout-canvas-hero > * { width: 100%; min-width: 0; } /* 4.4 上文字、下全宽图 */ section.layout-text-then-diagram { display: flex !important; flex-direction: column !important; gap: 2rem; } section.layout-text-then-diagram > * { min-width: 0; } section.layout-text-then-diagram > .canvas-wrap, section.layout-text-then-diagram > .diagram-wrap { width: 100%; } /* 4.5 讲解页：标题 + 说明段 + 全宽卡片网格 */ section.layout-content-full { display: flex !important; flex-direction: column !important; gap: 1.75rem; } section.layout-content-full > * { min-width: 0; } section.layout-content-full > .content-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; gap: 1.25rem !important; align-items: start !important; width: 100%; } /* 4.6 数据看板：顶部数据条 + 全宽图表/画布 + 底部说明 */ section.layout-data-dashboard { display: flex !important; flex-direction: column !important; gap: 1.5rem; } section.layout-data-dashboard > * { min-width: 0; width: 100%; } section.layout-data-dashboard > .stats-bar { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; gap: 1rem !important; } /* 4.7 卡片网格 */ .layout-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; align-items: start; } /* 4.8 紧凑表格：外壳只负责排布，表格本体样式见 6.6 的 .cmp-table */ .layout-compact-table { display: block; } .layout-compact-table > .cmp-table-wrap { min-width: 0; } /* 兼容旧类名 */ .layout-canvas_hero { display: flex; flex-direction: column; gap: 1.5rem; } .layout-text_then_diagram { display: flex; flex-direction: column; gap: 2rem; } .layout-content_full { display: flex; flex-direction: column; gap: 1.75rem; } .layout-data_dashboard { display: flex; flex-direction: column; gap: 1.5rem; } .layout-hero_split { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; } /* ══════════════════════════ 5. 通用组件 ══════════════════════════ */ .panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; box-sizing: border-box; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; box-sizing: border-box; min-width: 0; transition: transform .2s, box-shadow .2s; } .card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(44, 31, 18, .18); } .kpi { font-family: var(--font-mono); font-size: 2rem; font-weight: 700; color: var(--primary); line-height: 1; } .kpi-label { font-size: 12px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; margin-top: .25rem; } /* 画布容器：固定合理高度，内部绝对定位填满 */ .canvas-wrap { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; width: 100%; height: 460px; min-height: 380px; max-height: 560px; align-self: start; box-sizing: border-box; } .canvas-wrap > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .canvas-wrap > svg, .canvas-wrap > .diagram { width: 100%; height: 100%; display: block; } /* 允许在画布上浮 HUD */ .canvas-wrap > .hud { position: absolute; z-index: 2; } canvas { max-width: 100%; } /* 直接挂在 section 下的裸 canvas 也强制统一外观 */ section.section-shell > canvas { width: 100% !important; height: 460px !important; display: block; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); } /* 控件条：画布下方的操作区 */ .controls-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .control-cell { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1rem; box-sizing: border-box; min-width: 0; } /* 注意：基准页的 .control-label 只有类名、**没有对应样式规则**（渲染为默认正文）。 为了不与之冲突、同时让控件区有正常的文字层次，这里另起类名 .ctl-label。 如果哪天要给 .control-label 加样式，必须同步修改基准页，否则就破坏了两页一致性。 */ .ctl-label { font-size: .78rem; font-weight: 700; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; margin-bottom: .6rem; } /* 选项按钮组：视觉与基准解读页的 .micro-process-pill 完全一致 —— 常态透明底 + 1.5px 边框 + 8px 圆角；激活态**实心填充** + 同色投影。 这是基准的招牌交互样式，不要改成胶囊形或浅色底。 */ .pill-row { display: flex; flex-wrap: wrap; gap: .5rem; } .pill { background: transparent; border: 1.5px solid var(--border); color: var(--muted); padding: .5rem .85rem; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: .88rem; font-weight: 600; transition: all .2s; } .pill:hover:not(:disabled) { border-color: var(--fg); color: var(--fg); transform: translateY(-1px); } .pill:disabled { opacity: .5; cursor: not-allowed; transform: none; } .pill.is-active, .pill.is-active-acid { background: #C73E2A; border-color: #C73E2A; color: #FAF1DC; box-shadow: 0 3px 10px rgba(199, 62, 42, .32); } .pill.is-active-base { background: #1E6B6E; border-color: #1E6B6E; color: #FAF1DC; box-shadow: 0 3px 10px rgba(30, 107, 110, .32); } .pill.is-active-conc, .pill.is-active-salt { background: #C88B2A; border-color: #C88B2A; color: #FAF1DC; box-shadow: 0 3px 10px rgba(200, 139, 42, .32); } /* 控件区里的按钮行：两枚按钮等宽（基准的 .micro-process-ctrl-row 同款） */ .ctrl-row { display: flex; gap: .5rem; margin-bottom: .5rem; } .ctrl-row .btn-warm, .ctrl-row .btn-tea { flex: 1; padding: .55rem .5rem; font-size: .92rem; } /* 提示文字 */ .hint-text { margin-top: .7rem; font-size: .8rem; line-height: 1.65; color: var(--muted); } /* 结论条：与基准解读页的 tips 区块同款 —— 虚线框 + ▸ 前缀的两列清单 （基准用 grid 而非项目符号列表，因为要点是并列的短句，不是有次序的步骤） */ .tips { background: rgba(255, 248, 232, .55); border: 1px dashed rgba(44, 31, 18, .22); border-radius: 12px; padding: 1rem 1.25rem; animation: tip-in .45s ease-out; } @keyframes tip-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .tips-title { font-weight: 700; color: var(--accent); margin-bottom: .55rem; font-family: var(--font-mono); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; } .tips-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .55rem 1rem; } .tips-list li { font-size: .92rem; line-height: 1.55; color: var(--fg); padding-left: 1.25rem; position: relative; } .tips-list li::before { content: '▸'; position: absolute; left: 0; top: 1px; color: var(--accent); font-family: var(--font-mono); font-weight: 700; } .tips-list li strong { color: var(--fg); font-weight: 700; } /* ══════════════════════════ 6. 通用表单与展示组件 ══════════════════════════ 场景专有的装饰（配色卡 / 方程式 / 色带 / 标签）不在本文件， 见 assets/css/。这里只放跨场景都能用的组件。 */ sub, sup { font-size: .7em; } /* 6.1 滑动输入（统一制式；具体渐变由各解读页按语义覆写） */ input[type="range"] { -webkit-appearance: none; appearance: none; height: 6px; width: 100%; background: linear-gradient(to right, #C73E2A 0%, #C89F3D 50%, #1E6B6E 100%); border-radius: 3px; outline: none; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #FAF1DC; border: 2px solid #C73E2A; box-shadow: 0 2px 6px rgba(199, 62, 42, .30); cursor: pointer; } input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #FAF1DC; border: 2px solid #C73E2A; cursor: pointer; } /* 6.2 徽章（通用基类；具体配色由各解读页覆写） */ .badge { padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; display: inline-block; background: rgba(44, 31, 18, .06); color: var(--muted); } /* 6.3 按钮 */ .btn-warm { background: #C73E2A; color: #FAF1DC; border: none; padding: .7rem 1.5rem; border-radius: 8px; font-weight: 600; cursor: pointer; transition: .2s; box-shadow: 0 3px 10px rgba(199, 62, 42, .25); font-family: inherit; } .btn-warm:hover { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(199, 62, 42, .35); } .btn-warm:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; } .btn-tea { background: transparent; color: #1E6B6E; border: 2px solid rgba(30, 107, 110, .45); padding: .55rem 1.3rem; border-radius: 8px; font-weight: 600; cursor: pointer; transition: .2s; font-family: inherit; } .btn-tea:hover { background: rgba(30, 107, 110, .08); border-color: #1E6B6E; } .btn-tea:disabled { opacity: .45; cursor: not-allowed; } /* 按钮也能当链接用（首屏 CTA 常写成 ） */ a.btn-warm, a.btn-tea { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; } /* 6.4 通用工具类（.ion-tag / .beaker-label 为解读页语义，不在本文件） */ .warm-shadow { box-shadow: 0 10px 30px -12px rgba(44, 31, 18, .18); } .dashed-rule { border-top: 1px dashed rgba(44, 31, 18, .18); margin: 1.5rem 0; } /* 6.5 数据条（看板顶部的数值格） —— 与基准解读页的 .kpi-cell / .kpi-num 同款：同一套"标签+数值"卡片， 只是基准把它放在首屏 .hero-kpis 里、新解读页放在数据看板里。逐字对齐以保证视觉一致。 */ .stat-cell { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: .9rem .9rem; display: flex; flex-direction: column; gap: .4rem; min-width: 0; transition: transform .2s ease, box-shadow .2s ease; } .stat-cell:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(44, 31, 18, .20); } .stat-label { font-size: 11px; line-height: 1.4; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; } .stat-value { font-family: var(--font-mono); font-size: 1.45rem; font-weight: 700; line-height: 1.15; color: var(--warning); letter-spacing: .02em; display: flex; align-items: center; gap: .35rem; } .stat-unit { font-size: .78rem; color: var(--muted); margin-left: .2rem; font-weight: 500; } /* 6.6 紧凑表格（性质对比 / 参数对照）—— 跨场景通用。 典型用途：酸碱性对比、成分对照、参数速查…… 窄屏由外层 .cmp-table-wrap 横向滚动，绝不允许撑破页面。 */ .cmp-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; } .cmp-table { width: 100%; min-width: 460px; border-collapse: separate; border-spacing: 0; box-sizing: border-box; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; font-size: .88rem; } .cmp-table caption { caption-side: top; text-align: left; padding: 0 0 .6rem; font-family: var(--font-mono); font-size: .78rem; font-weight: 700; letter-spacing: .06em; /* 不要用 text-transform: uppercase —— 表题里出现的拉丁字符几乎都是单位或符号 （0.1 mol/L、g/100g 水、KNO₃…），强制大写会把 mol/L 变成 MOL/L，属于事实性错误。 要全大写的视觉，请在源码里直接写大写（如「TABLE 01 · …」）。 */ color: var(--muted); } .cmp-table th, .cmp-table td { padding: .7rem .9rem; text-align: left; vertical-align: top; line-height: 1.65; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); } .cmp-table th:last-child, .cmp-table td:last-child { border-right: none; } .cmp-table thead th { background: var(--surface-2); font-weight: 700; font-size: .8rem; letter-spacing: .04em; color: var(--fg); white-space: nowrap; } .cmp-table tbody th { font-weight: 600; color: var(--fg); white-space: nowrap; } .cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: none; } .cmp-table tbody tr:hover th, .cmp-table tbody tr:hover td { background: rgba(199, 62, 42, .035); } .cmp-table .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--fg); } .cmp-table .is-em { color: var(--primary); font-weight: 700; } /* 6.7 生活案例卡（把知识点落到真实场景） 与 .card 的分工：.card 是中性的通用容器；.app-card 带左侧语义色条 + 顶部 mono 场景标签，专用来排「生活中的 XX」这类并列案例。 语义色条用 .app-tone-* 覆写；不写则默认青绿。 */ .app-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; align-items: start; } .app-cards > * { min-width: 0; } .app-card { display: flex; flex-direction: column; gap: .55rem; min-width: 0; box-sizing: border-box; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 12px; padding: 1.25rem 1.25rem 1.25rem 1.4rem; transition: transform .2s, box-shadow .2s; } .app-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(44, 31, 18, .18); } .app-card.app-tone-warm { border-left-color: var(--primary); } .app-card.app-tone-tea { border-left-color: var(--accent); } .app-card.app-tone-sand { border-left-color: var(--success); } .app-card.app-tone-water { border-left-color: var(--water); } .app-badge { align-self: flex-start; font-family: var(--font-mono); font-size: .7rem; font-weight: 700; letter-spacing: .08em; /* 同 .cmp-table caption 的注意点：这里有大写转换，标签内容请不要写拉丁单位/符号 （「pH 试纸」会被渲染成「PH 试纸」）。现用标签都是纯中文，安全。 */ text-transform: uppercase; color: var(--muted); background: rgba(44, 31, 18, .05); border-radius: 6px; padding: 3px 8px; } .app-card .app-title { margin: 0; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; line-height: 1.45; color: var(--fg); } .app-card .app-desc { margin: 0; font-size: .86rem; line-height: 1.7; color: var(--muted); } .app-card .app-note { margin-top: .15rem; padding-top: .6rem; border-top: 1px dashed rgba(44, 31, 18, .18); font-size: .8rem; line-height: 1.65; color: var(--muted); } .app-card .app-note b { color: var(--fg); } /* ══════════════════════════ 7. 动效 ══════════════════════════ */ @keyframes bubble-up { 0% { transform: translateY(0) scale(1); opacity: .6; } 100% { transform: translateY(-44px) scale(.3); opacity: 0; } } @keyframes pulse-acid { 0%, 100% { box-shadow: 0 0 0 0 rgba(199, 62, 42, .40); } 50% { box-shadow: 0 0 0 14px rgba(199, 62, 42, 0); } } @keyframes pulse-base { 0%, 100% { box-shadow: 0 0 0 0 rgba(30, 107, 110, .40); } 50% { box-shadow: 0 0 0 14px rgba(30, 107, 110, 0); } } @keyframes drift { 0% { transform: translate(0, 0); } 50% { transform: translate(2px, -3px); } 100% { transform: translate(0, 0); } } @keyframes float-up { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: .9; } 100% { transform: translateY(-70px); opacity: 0; } } .pulse-acid { animation: pulse-acid 1.6s ease-in-out infinite; } .pulse-base { animation: pulse-base 1.6s ease-in-out infinite; } .drift { animation: drift 4s ease-in-out infinite; } /* 滚动入场：给元素加 class="reveal" 即可，脚本观察进入视口后补 is-in。 位移与时长对齐基准解读页的 .hero-copy > *（10px / .55s / 同一缓动曲线）， 保证首屏逐项入场与正文滚动入场手感一致。同组元素可用 style="--reveal-delay:120ms" 交错。 */ .reveal { opacity: 0; transform: translateY(10px); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } .reveal.is-in { opacity: 1; transform: none; } /* 无 JS 时（