/* ========================================================================== TopEdge 推广站样式 -------------------------------------------------------------------------- 设计约定（改样式前先读）： 1. 品牌色直接取自产品语义——橙 = 已启用、红 = 进入吸附区。两者组成的渐变 就是整个站点的"主色"，不要在别处另起一套色板。 2. 颜色全部走 CSS 变量，深浅两套主题只换变量，不写两遍规则。 主题值由 /theme-init.js 在首次绘制前写到 ； 没有 JS 时退回深色（:root 的默认值）。 3. 不引第三方 CSS / 字体 / 图标库：图标是模板里的内联 SVG 精灵。 4. 动效一律包在 prefers-reduced-motion 里能关掉。 ========================================================================== */ :root { --bg: #0d1117; --bg-soft: #121820; --card: #161d26; --card-2: #1b232e; --border: #26303f; --border-soft: #1e2733; --text: #e8eef6; --text-dim: #98a4b4; --brand: #f5a02c; --brand-2: #ef4444; --brand-ink: #1a1206; --ring: rgba(245, 160, 44, 0.32); --glow: rgba(239, 68, 68, 0.45); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 12px 32px -12px rgba(0, 0, 0, 0.7); --shadow-3: 0 24px 60px -20px rgba(0, 0, 0, 0.8); --r-xs: 6px; --r-sm: 10px; --r: 14px; --r-lg: 20px; --r-pill: 999px; --maxw: 1200px; --sidebar-w: 300px; --header-h: 64px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", system-ui, Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", monospace; } :root[data-theme="light"] { --bg: #f5f6f8; --bg-soft: #ffffff; --card: #ffffff; --card-2: #f8fafc; --border: #e2e6ed; --border-soft: #edf0f4; --text: #12161d; --text-dim: #5c6675; --brand: #d97706; --brand-2: #dc2626; --ring: rgba(217, 119, 6, 0.28); --glow: rgba(220, 38, 38, 0.32); --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06); --shadow-2: 0 12px 28px -14px rgba(16, 24, 40, 0.22); --shadow-3: 0 24px 56px -22px rgba(16, 24, 40, 0.28); } /* ---------------------------------------------------------------- 基础 --- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* 顶部一层极淡的品牌色光晕，避免大面积纯色显得单薄 */ body::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 520px; pointer-events: none; z-index: 0; background: radial-gradient(60% 100% at 18% 0%, rgba(245, 160, 44, 0.13), transparent 70%), radial-gradient(50% 90% at 88% 6%, rgba(239, 68, 68, 0.11), transparent 72%); } h1, h2, h3 { line-height: 1.2; margin: 0 0 0.4em; letter-spacing: -0.015em; } h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.1rem); font-weight: 800; } h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); font-weight: 750; } h3 { font-size: 1.075rem; font-weight: 700; } p { margin: 0 0 1em; } img { max-width: 100%; height: auto; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } kbd { font-family: var(--mono); font-size: 0.86em; padding: 0.12em 0.44em; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: var(--r-xs); background: var(--card-2); color: var(--text); white-space: nowrap; } ul, ol { margin: 0 0 1em; padding-left: 1.2em; } li { margin: 0.3em 0; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-xs); } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; position: relative; z-index: 1; } .muted { color: var(--text-dim); } .small { font-size: 0.875rem; } .center { text-align: center; } .mono { font-family: var(--mono); font-size: 0.95rem; word-break: break-all; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--card); color: var(--text); padding: 10px 16px; border-radius: var(--r-sm); box-shadow: var(--shadow-2); transition: top 0.15s ease; } .skip-link:focus { top: 12px; } /* -------------------------------------------------------------- 按钮 --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border: 1px solid transparent; border-radius: var(--r-pill); font: inherit; font-weight: 600; line-height: 1.2; color: var(--text); background: var(--card-2); cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease; } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-primary { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%); color: #fff; box-shadow: 0 10px 24px -14px var(--glow), var(--shadow-1); } .btn-primary:hover { box-shadow: 0 16px 34px -14px var(--glow), var(--shadow-2); } .btn-ghost { background: transparent; border-color: var(--border); color: var(--text); } .btn-ghost:hover { background: var(--card-2); } .btn-soft { background: var(--card-2); border-color: var(--border); } .btn-soft:hover { border-color: var(--brand); } .btn-sm { padding: 7px 14px; font-size: 0.9rem; } .btn-lg { padding: 13px 26px; font-size: 1.05rem; } .btn-xl { padding: 16px 34px; font-size: 1.15rem; width: 100%; } .btn-block { display: flex; width: 100%; } .icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--card-2); color: var(--text-dim); cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .icon-btn:hover { color: var(--text); border-color: var(--brand); } /* -------------------------------------------------------------- 页头 --- */ .site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--border-soft); } .header-inner { display: flex; align-items: center; gap: 18px; height: var(--header-h); } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 750; } .brand:hover { text-decoration: none; } .brand-mark { border-radius: 7px; flex: none; } .brand-text { display: inline-flex; align-items: baseline; gap: 6px; letter-spacing: -0.01em; } .brand-sub { font-size: 0.8rem; font-weight: 600; color: var(--text-dim); letter-spacing: 0.06em; } .nav { display: flex; gap: 4px; margin-left: auto; } .nav a { padding: 8px 12px; border-radius: var(--r-sm); color: var(--text-dim); font-size: 0.92rem; font-weight: 550; } .nav a:hover { color: var(--text); background: var(--card-2); text-decoration: none; } .header-actions { display: flex; align-items: center; gap: 10px; } .lang-switch { padding: 7px 13px; border: 1px solid var(--border); border-radius: var(--r-pill); font-size: 0.88rem; font-weight: 600; color: var(--text); background: var(--card-2); } .lang-switch:hover { border-color: var(--brand); text-decoration: none; } .other-lang { margin-top: 14px; padding: 10px 16px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card-2); font-size: 0.9rem; color: var(--text-dim); } /* -------------------------------------------------------------- 布局 --- */ .layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar-w); gap: 48px; align-items: start; padding-top: 32px; padding-bottom: 64px; } main { min-width: 0; } .sidebar { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 18px; } .side-block { padding: 18px; border: 1px solid var(--border); border-radius: var(--r); background: var(--card); box-shadow: var(--shadow-1); } .side-label { display: block; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 10px; } .side-title { font-size: 0.98rem; margin-bottom: 12px; } .side-links { list-style: none; margin: 0; padding: 0; font-size: 0.92rem; } .side-links li { margin: 0 0 8px; } .stat-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 6px; } .stat-key { color: var(--text-dim); font-size: 0.9rem; } .stat-row strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; } .stats-source { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--border-soft); } .sponsor-block p { margin: 0 0 12px; font-size: 0.9rem; color: var(--text-dim); } /* 广告位：高度固定，避免广告脚本加载时页面跳动（CLS） */ .ad-slot { display: block; width: 100%; min-height: 250px; overflow: hidden; } .ad-slot ins { display: block; } .ad-placeholder { display: grid; place-content: center; gap: 8px; text-align: center; min-height: 250px; padding: 20px; border: 1px dashed var(--border); border-radius: var(--r-sm); background: var(--card-2); } .ad-placeholder strong { font-size: 1rem; } .ad-placeholder p { margin: 0; font-size: 0.85rem; color: var(--text-dim); } .ad-inline { display: none; margin-top: 28px; } .ad-inline .ad-slot { min-height: 120px; } /* -------------------------------------------------------------- Hero --- */ .hero { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: 52px; align-items: center; padding: 36px 0 72px; } .badge { display: inline-block; margin: 0 0 18px; padding: 6px 14px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent); background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); font-size: 0.82rem; font-weight: 650; } .hero h1 { margin-bottom: 16px; } .lede { font-size: 1.12rem; color: var(--text); max-width: 32em; } .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 22px; } .download-stat { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 22px; padding: 7px 15px 7px 13px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--card); font-size: 0.9rem; color: var(--text-dim); } .download-stat .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); } .download-stat.is-failed .dot { background: var(--text-dim); box-shadow: none; } .hero-facts { margin: 0; padding-top: 20px; border-top: 1px solid var(--border-soft); } .hero-facts div { display: block; } .hero-facts dt { font-size: 0.9rem; font-weight: 600; } .hero-facts dd { margin: 4px 0 0; font-size: 0.86rem; color: var(--text-dim); } /* --------------------------------------------------- Hero 动效示意 --- */ .stage-screen { position: relative; aspect-ratio: 16 / 10; border: 1px solid var(--border); border-radius: var(--r-lg); background: linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, transparent), var(--bg-soft)); box-shadow: var(--shadow-3); overflow: hidden; } .stage-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, var(--border-soft) 1px, transparent 1px), linear-gradient(to bottom, var(--border-soft) 1px, transparent 1px); background-size: 32px 32px; opacity: 0.55; } /* 窗口：橙色 4px 边框 = 已启用 */ .win { position: absolute; top: 14%; left: 6%; width: 58%; height: 68%; border: 4px solid var(--brand); border-radius: 10px; background: color-mix(in srgb, var(--card-2) 94%, transparent); box-shadow: var(--shadow-2); animation: win-travel 9s cubic-bezier(0.4, 0, 0.2, 1) infinite, win-border 9s linear infinite; } .win-bar { display: flex; align-items: center; gap: 6px; padding: 9px 11px; border-bottom: 1px solid var(--border-soft); } .win-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--border); } .win-body { padding: 14px; display: grid; gap: 10px; } .win-body span { display: block; height: 8px; border-radius: 4px; background: var(--border-soft); } .win-body span:nth-child(1) { width: 82%; } .win-body span:nth-child(2) { width: 64%; } .win-body span:nth-child(3) { width: 74%; } .win-body span:nth-child(4) { width: 46%; } /* 吸附区脉动提示线（贴右边缘） */ .pulse { position: absolute; top: 0; bottom: 0; right: 0; width: 5px; background: var(--brand-2); opacity: 0; animation: pulse-show 9s ease-in-out infinite; } /* 隐藏后留下的红色 8px 粗线 */ .strip { position: absolute; top: 12%; bottom: 12%; right: 0; width: 8px; border-radius: 4px 0 0 4px; background: var(--brand-2); box-shadow: 0 0 22px -4px var(--glow); opacity: 0; animation: strip-show 9s ease-in-out infinite; } @keyframes win-travel { 0%, 10% { left: 6%; } 28%, 46% { left: 36%; } 58%, 78% { left: 100%; } 90%, 100% { left: 6%; } } @keyframes win-border { 0%, 12% { border-color: var(--brand); box-shadow: var(--shadow-2); } 30%, 52% { border-color: var(--brand-2); box-shadow: 0 0 30px -8px var(--glow), var(--shadow-2); } 62%, 100% { border-color: var(--brand); box-shadow: var(--shadow-2); } } @keyframes pulse-show { 0%, 22% { opacity: 0; } 28% { opacity: 0.5; } 32% { opacity: 0.9; } 36% { opacity: 0.5; } 40% { opacity: 0.9; } 44% { opacity: 0.5; } 50%, 100% { opacity: 0; } } @keyframes strip-show { 0%, 50% { opacity: 0; } 58%, 80% { opacity: 1; } 88%, 100% { opacity: 0; } } .stage-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: legend; font-size: 0.84rem; color: var(--text-dim); } .stage-legend li { display: flex; align-items: center; gap: 7px; margin: 0; counter-increment: legend; } .stage-legend li::before { content: counter(legend); display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--card-2); border: 1px solid var(--border); font-size: 0.7rem; font-weight: 700; color: var(--text-dim); } .stage-caption { margin: 12px 0 0; font-size: 0.86rem; color: var(--text-dim); } /* ------------------------------------------------------------ 区块 --- */ .section { padding: 76px 0; border-top: 1px solid var(--border-soft); } .section-head { max-width: 44em; margin-bottom: 34px; } .section-head p { color: var(--text-dim); margin: 0; font-size: 1.02rem; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 18px; } .card { padding: 26px 24px; border: 1px solid var(--border); border-radius: var(--r); background: var(--card); box-shadow: var(--shadow-1); transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .card:hover { border-color: color-mix(in srgb, var(--brand) 55%, var(--border)); transform: translateY(-2px); box-shadow: var(--shadow-2); } .card h3 { margin-bottom: 8px; } .card p { margin: 0; color: var(--text-dim); font-size: 0.94rem; line-height: 1.72; } .card-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); } .card-icon .icon { width: 22px; height: 22px; } /* --------------------------------------------------------- 三步骤 --- */ .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 18px; counter-reset: step; } .step { position: relative; margin: 0; padding: 26px 24px; border: 1px solid var(--border); border-radius: var(--r); background: var(--card); box-shadow: var(--shadow-1); counter-increment: step; } .step-num { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 14px; border-radius: 50%; font-size: 0.9rem; font-weight: 750; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; } .step-num::before { content: counter(step); } .step h3 { margin-bottom: 6px; } .step p { margin: 0; color: var(--text-dim); font-size: 0.94rem; line-height: 1.72; } /* ----------------------------------------------------------- 下载 --- */ .download-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; padding: 34px; border: 1px solid var(--border); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--card), var(--bg-soft)); box-shadow: var(--shadow-2); } .download-main { grid-column: 1 / -1; text-align: center; padding-bottom: 8px; } .download-main .btn-xl { max-width: 460px; margin: 0 auto; } .download-main .muted { margin: 14px 0 0; font-size: 0.88rem; } .download-main .muted.small a { margin: 0 6px; } .download-points { grid-column: 1 / -1; list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; } .download-points li { margin: 0; padding: 16px; border: 1px solid var(--border-soft); border-radius: var(--r-sm); background: var(--card-2); } .download-points h3 { font-size: 0.98rem; margin-bottom: 4px; color: var(--text); } .download-points p { margin: 0; font-size: 0.86rem; color: var(--text-dim); } /* 系统要求：模板里它现在是下载框里唯一独占一行的补充块，必须显式跨满整行， 否则会掉进 grid 的第一列、只占左半边（删掉「下载之后」那块时踩过）。 */ .download-reqs { grid-column: 1 / -1; padding: 22px; border: 1px solid var(--border-soft); border-radius: var(--r-sm); background: var(--card-2); } .download-reqs h3 { font-size: 0.95rem; } .tick-list { list-style: none; margin: 0; padding: 0; } .tick-list li { position: relative; padding-left: 26px; margin: 0 0 8px; font-size: 0.9rem; color: var(--text-dim); } .tick-list li::before { content: ""; position: absolute; left: 4px; top: 0.55em; width: 10px; height: 5px; border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(-45deg); } /* --------------------------------------------------------- 常见问题 --- */ /* 用原生
：不需要一行 JS，键盘与读屏器天然可用 */ .faq { display: grid; gap: 12px; max-width: 58em; } .faq-item { border: 1px solid var(--border); border-radius: var(--r); background: var(--card); box-shadow: var(--shadow-1); overflow: hidden; } .faq-item summary { position: relative; cursor: pointer; padding: 18px 52px 18px 22px; font-weight: 650; list-style: none; transition: color 0.2s ease; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px; margin-top: -6px; border-right: 2px solid var(--text-dim); border-bottom: 2px solid var(--text-dim); transform: rotate(45deg); transition: transform 0.2s ease; } .faq-item[open] summary::after { transform: rotate(-135deg); } .faq-item summary:hover { color: var(--brand); } .faq-item p { margin: 0; padding: 0 22px 20px; color: var(--text-dim); font-size: 0.94rem; line-height: 1.78; } /* ----------------------------------------------------------- 打赏 --- */ .sponsor-box { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; padding: 28px; border: 1px solid var(--border); border-radius: var(--r-lg); background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 9%, var(--card)), var(--card)); box-shadow: var(--shadow-2); } .sponsor-copy p { color: var(--text-dim); } .sponsor-copy p:first-child { color: var(--text); font-size: 1.04rem; } .sponsor-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; } .sponsor-qr { display: grid; gap: 14px; align-content: start; } .qr-item { text-align: center; } .qr-item img { width: 100%; max-width: 190px; aspect-ratio: 1; object-fit: contain; padding: 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: #fff; } .qr-item p { margin: 8px 0 0; font-size: 0.84rem; color: var(--text-dim); } .qr-hint { margin: 0; font-size: 0.8rem; color: var(--text-dim); } /* ----------------------------------------------------------- 反馈 --- */ /* 反馈区现在只有一张卡片：不必铺满整行，收窄一点更像"一条联系渠道" */ .feedback-box { margin-bottom: 18px; max-width: 36em; } .feedback-item { padding: 22px; border: 1px solid var(--border); border-radius: var(--r); background: var(--card); box-shadow: var(--shadow-1); } .feedback-item h3 { font-size: 0.95rem; color: var(--text-dim); font-weight: 600; } .feedback-item p:last-child { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; } /* ----------------------------------------------------------- 页脚 --- */ .site-footer { border-top: 1px solid var(--border); background: var(--bg-soft); padding: 40px 0 28px; position: relative; z-index: 1; } .footer-inner { display: grid; grid-template-columns: 1.2fr 1fr 1.9fr; gap: 34px; } .footer-brand { display: flex; gap: 12px; align-items: flex-start; } .footer-brand img { border-radius: 6px; } .footer-name { margin: 0; font-weight: 700; } .footer-col h2 { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 12px; } .footer-col ul { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; } .footer-col li { margin: 0 0 8px; } .footer-legal p { margin: 0 0 8px; } .footer-bottom { grid-column: 1 / -1; margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--border-soft); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } /* --------------------------------------------------------- 响应式 --- */ @media (max-width: 1100px) { .layout { grid-template-columns: minmax(0, 1fr); gap: 32px; } .sidebar { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .ad-inline { display: block; } .footer-inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .nav { display: none; } .hero { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-bottom: 40px; } .hero-stage { order: 2; } .download-box { grid-template-columns: minmax(0, 1fr); } .sponsor-box { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { :root { --header-h: 58px; } .brand-sub { display: none; } .header-actions .btn-sm { display: none; } .section { padding: 36px 0; } .footer-inner { grid-template-columns: 1fr; } .cta-row .btn { width: 100%; } .btn-xl { padding: 15px 22px; font-size: 1.05rem; } } /* --------------------------------------------------- 无障碍 / 偏好 --- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } /* 动画停掉之后，仍要让三步示意能看懂：把"贴边隐藏"那一帧静态留下 */ .pulse { opacity: 0.85; } .strip { opacity: 1; } } @media print { .site-header, .sidebar, .hero-stage, .ad-inline, .skip-link, #back-to-top { display: none !important; } body { background: #fff; color: #000; } }