/**
* Xdumi 设计系统
* ---------------------------------------------------------------------------
* 品牌：Xdumi（站点）· Follow Fit（App）
* 调色板与 App 的 AppColors 完全一致：活力橙 ember(#FF5F1F) × 电光紫 violet(#7B3FE4)
* 风格：暗色优先的运动游戏感 —— 大字重、强对比、斜切色块、卡片网格
* 性能：纯手写 CSS，无构建步骤、无框架、无 @import；动画只用 transform/opacity
* ---------------------------------------------------------------------------
* 目录
* 1. 设计令牌 6. 卡片与角标
* 2. 基础重置 7. 导航
* 3. 排版 8. 页脚
* 4. 布局 9. Hero（视频）
* 5. 按钮 10. 动效与可访问性
*/
/* ========================================================================
1. 设计令牌
======================================================================== */
:root {
/* ---- 品牌色（与 App AppColors 同源）---- */
--ember: #FF5F1F;
--ember-deep: #E0430A;
--ember-soft: #FFE7DA;
--violet: #7B3FE4;
--violet-deep: #5820C0;
--violet-soft: #EDE3FF;
/* ---- 功能 / 强调色 ---- */
--hot-pink: #FF2D75;
--lime: #2ED573;
--sky: #2E9BFF;
--gold: #FFB020;
--danger: #FF3B30;
/* ---- 标志副标题三色（取样自 media/icon/参考.png）---- */
--brand-move: #FF6B2E;
--brand-play: #9D2BE1;
--brand-be: #A6DC63;
/* ---- 商品角标 ---- */
--ribbon-new: #E5342B;
--ribbon-hot: #FF1744;
--ribbon-classic: #2ED573;
/* ---- 渐变 ---- */
--grad-brand: linear-gradient(135deg, var(--ember) 0%, var(--violet) 100%);
--grad-ember: linear-gradient(180deg, #FF8A3D 0%, var(--ember) 100%);
--grad-scrim: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.8) 100%);
--grad-text: linear-gradient(100deg, var(--ember) 0%, var(--hot-pink) 45%, var(--violet) 100%);
/* ---- 字体 ---- */
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
--font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont,
'PingFang SC', 'Microsoft YaHei', sans-serif;
--font-logo: 'Poppins', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont,
'PingFang SC', 'Microsoft YaHei', sans-serif;
/* ---- 字号（clamp 自适应，移动端到桌面端平滑过渡）---- */
--fs-hero: clamp(2.6rem, 7.5vw, 5.75rem);
--fs-h1: clamp(2.1rem, 5vw, 3.6rem);
--fs-h2: clamp(1.7rem, 3.6vw, 2.75rem);
--fs-h3: clamp(1.3rem, 2.2vw, 1.75rem);
--fs-h4: clamp(1.1rem, 1.6vw, 1.3rem);
--fs-lead: clamp(1.05rem, 1.7vw, 1.3rem);
--fs-body: 1rem;
--fs-sm: 0.9375rem;
--fs-xs: 0.8125rem;
/* ---- 间距 ---- */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
--sp-9: 96px; --sp-10: 128px;
/* ---- 圆角 ---- */
--r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-full: 999px;
/* ---- 容器 ---- */
--container: 1240px;
--container-narrow: 780px;
/* ---- 过渡 ---- */
--t-fast: 140ms cubic-bezier(.4, 0, .2, 1);
--t-base: 240ms cubic-bezier(.4, 0, .2, 1);
--t-slow: 420ms cubic-bezier(.22, 1, .36, 1);
/* ---- 层级 ---- */
--z-nav: 100; --z-dropdown: 200; --z-banner: 300; --z-modal: 400;
}
/* ---- 暗色主题（仅用户手动切换到暗色时生效）---- */
:root[data-theme='dark'] {
color-scheme: dark;
--bg: #0C0C11;
--surface: #17171F;
--surface-alt: #21212C;
--surface-hi: #2A2A38;
--border: #2C2C39;
--text: #F6F6F8;
--text-sub: #9B9BA9;
--text-dim: #6E6E7E;
--shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
--shadow-md: 0 8px 24px rgba(0, 0, 0, .5);
--shadow-lg: 0 20px 56px rgba(0, 0, 0, .6);
--shadow-ember: 0 8px 28px rgba(255, 95, 31, .38);
--shadow-violet: 0 8px 28px rgba(123, 63, 228, .38);
}
/* ---- 亮色主题（默认）----
注意顺序：亮色写在暗色之后、且同时挂在裸 :root 上，
这样 JS 没跑起来 / 没有 data-theme 时页面也是亮色，不会闪暗屏。 */
:root,
:root[data-theme='light'] {
color-scheme: light;
--bg: #FFFFFF;
--surface: #F7F7FA;
--surface-alt: #EFEFF4;
--surface-hi: #E5E5EC;
--border: #E5E5EC;
--text: #0F0F18;
--text-sub: #6C6C7A;
--text-dim: #9797A5;
--shadow-sm: 0 2px 8px rgba(15, 15, 24, .06);
--shadow-md: 0 8px 24px rgba(15, 15, 24, .1);
--shadow-lg: 0 20px 56px rgba(15, 15, 24, .14);
--shadow-ember: 0 8px 28px rgba(255, 95, 31, .3);
--shadow-violet: 0 8px 28px rgba(123, 63, 228, .3);
/* 参考图是黑底，那三个原色搬到白底上对比度不足，这里各压深一档 */
--brand-move: #E14E07;
--brand-play: #7A17C4;
--brand-be: #4F9E1C;
}
/* ========================================================================
2. 基础重置
======================================================================== */
*, *::before, *::after { box-sizing: border-box; }
/* ⚠️ 这一行不能删。
浏览器自带样式表里有 `[hidden] { display: none }`，但**作者样式表永远赢过
浏览器自带样式表**（跟选择器权重无关）。所以只要我们给某个元素写了
`display: flex`，它的 hidden 属性就彻底失效了 ——
JS 里 `el.hidden = true` 会照常设上属性，元素却纹丝不动，而且不报任何错。
项目里已经有三处踩到：底部下载弹窗（.app-banner）、移动端无限滚动时要藏起来的
分页条（.pager）、Hero 的播放/暂停按钮（.hero-videobtn）——全都是 display:flex。
加这一条统一兜住，以后新写的组件也不会再犯。 */
[hidden] { display: none !important; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 88px; /* 固定导航的高度，锚点跳转不被遮住 */
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
transition: background var(--t-base), color var(--t-base);
}
img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
/* 键盘可达性：只在键盘导航时显示焦点圈 */
:focus-visible {
outline: 2px solid var(--ember);
outline-offset: 3px;
border-radius: var(--r-sm);
}
/* 屏幕阅读器专用 */
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* 跳到主内容（无障碍） */
.skip-link {
position: absolute; top: -60px; left: var(--sp-4);
z-index: var(--z-modal);
padding: var(--sp-3) var(--sp-5);
background: var(--ember); color: #fff;
border-radius: var(--r-full); font-weight: 700;
transition: top var(--t-fast);
}
.skip-link:focus { top: var(--sp-4); }
/* ========================================================================
3. 排版
======================================================================== */
h1, h2, h3, h4, h5 {
margin: 0;
font-family: var(--font-display);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.02em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); letter-spacing: -0.01em; }
p { margin: 0 0 var(--sp-4); }
.lead {
font-size: var(--fs-lead);
color: var(--text-sub);
line-height: 1.6;
}
/* 渐变文字：标题里的高亮词 */
.grad-text {
background: var(--grad-text);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
/* 渐变文字在部分浏览器下会被当成透明块，给个兜底色 */
-webkit-text-fill-color: transparent;
}
/* 分区小标签（KICKER）—— 运动站常见的全大写小标签 */
.kicker {
display: inline-flex; align-items: center; gap: var(--sp-2);
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--ember);
margin-bottom: var(--sp-3);
}
.kicker::before {
content: '';
width: 22px; height: 3px;
border-radius: var(--r-full);
background: var(--grad-brand);
}
/* ========================================================================
4. 布局
======================================================================== */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--sp-5);
}
.container-narrow { max-width: var(--container-narrow); }
.section { padding-block: clamp(var(--sp-8), 9vw, var(--sp-10)); }
.section-sm { padding-block: clamp(var(--sp-7), 6vw, var(--sp-9)); }
.section-alt { background: var(--surface); }
.section-head { max-width: 720px; margin-bottom: var(--sp-7); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: var(--sp-4); }
/* 自适应网格：卡片自动换行，不需要写断点 */
.grid { display: grid; gap: var(--sp-5); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-auto-sm { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
.grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
/* 两栏：文字 + 图 */
.split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(var(--sp-6), 5vw, var(--sp-8));
align-items: center;
}
.split.reverse > :first-child { order: 2; }
@media (max-width: 860px) {
.split { grid-template-columns: 1fr; }
.split.reverse > :first-child { order: 0; }
}
/* ========================================================================
5. 按钮
======================================================================== */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: var(--sp-2);
padding: 14px 30px;
font-family: var(--font-display);
font-size: 1rem; font-weight: 700;
line-height: 1;
border-radius: var(--r-full);
white-space: nowrap;
transition: transform var(--t-fast), box-shadow var(--t-fast),
background var(--t-fast), border-color var(--t-fast);
will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary {
background: var(--grad-brand);
color: #fff;
box-shadow: var(--shadow-ember);
}
.btn-primary:hover { box-shadow: 0 12px 34px rgba(255, 95, 31, .5); }
.btn-solid {
background: var(--ember);
color: #fff;
box-shadow: var(--shadow-ember);
}
.btn-solid:hover { background: var(--ember-deep); }
.btn-ghost {
background: transparent;
color: var(--text);
border: 2px solid var(--border);
}
.btn-ghost:hover { border-color: var(--ember); color: var(--ember); }
/* 玻璃拟态：压在 Hero 视频上的次级按钮 */
.btn-glass {
background: rgba(255, 255, 255, .12);
color: #fff;
border: 1px solid rgba(255, 255, 255, .3);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.btn-glass:hover { background: rgba(255, 255, 255, .2); }
.btn-lg { padding: 17px 38px; font-size: 1.0625rem; }
.btn-sm { padding: 10px 20px; font-size: var(--fs-sm); }
.btn-block { width: 100%; }
/* 应用商店按钮 */
/* ---- 应用商店按钮 ----
底色 var(--text) / 字色 var(--bg)：亮色模式是黑底白字、暗色模式自动反过来，
两边都保持商店徽章该有的高对比度，不需要写两套配色。 */
.store-row {
display: flex; flex-wrap: wrap;
gap: var(--sp-3);
align-items: center;
}
.btn-store {
position: relative;
display: inline-flex; align-items: center; gap: 11px;
/* 官方徽章的版式是横向长条，高度固定、内边距左右不对称（图标侧窄一点） */
padding: 9px 18px 9px 15px;
min-height: 54px;
color: var(--bg);
background: var(--text);
border: 1px solid var(--text);
border-radius: 12px;
transition: transform var(--t-fast), box-shadow var(--t-fast),
background var(--t-fast), color var(--t-fast);
}
.btn-store:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-store-icon { width: 27px; height: 27px; flex-shrink: 0; }
.btn-store-text {
display: flex; flex-direction: column;
line-height: 1.18;
text-align: start;
}
.btn-store-text small {
font-size: 10px;
font-weight: 500;
letter-spacing: .04em;
opacity: .8;
}
.btn-store-text strong {
font-family: var(--font-display);
font-size: 1.06rem;
font-weight: 700;
letter-spacing: -.01em;
}
/* 大号（Hero / 底部 CTA 区） */
.store-row-lg .btn-store { min-height: 60px; padding: 11px 22px 11px 18px; }
.store-row-lg .btn-store-icon { width: 30px; height: 30px; }
.store-row-lg .btn-store-text strong { font-size: 1.18rem; }
/* 还没配链接：版式照旧，但不是链接、不可点，右上角挂一个"即将上线"角标。
渲染成 href="" 的假链接更糟 —— 点下去会重新加载当前页。 */
.btn-store.is-pending {
color: var(--text-sub);
background: transparent;
border: 1px dashed var(--border);
cursor: default;
}
.btn-store.is-pending .btn-store-icon { opacity: .5; }
.btn-store.is-pending:hover { transform: none; box-shadow: none; }
.btn-store-soon {
position: absolute; top: -8px; inset-inline-end: -6px;
padding: 2px 8px;
font-family: var(--font-display);
font-size: 10px; font-weight: 800; font-style: normal;
letter-spacing: .07em; text-transform: uppercase;
color: #fff;
background: var(--grad-brand);
border-radius: var(--r-full);
}
/* 压在照片/渐变色带上时（Hero、底部 CTA）改成半透明白，
否则黑底按钮压在橙紫渐变上会像一个洞。 */
.hero .btn-store,
.cta-band .btn-store {
color: #fff;
background: rgba(255, 255, 255, .14);
border-color: rgba(255, 255, 255, .35);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.hero .btn-store:hover,
.cta-band .btn-store:hover { background: rgba(255, 255, 255, .24); }
.hero .btn-store.is-pending,
.cta-band .btn-store.is-pending {
color: rgba(255, 255, 255, .8);
background: rgba(255, 255, 255, .07);
border-style: dashed;
}
/* 窄屏：两个按钮各占一行、撑满宽度，比挤成两个小方块好点 */
@media (max-width: 460px) {
.store-row { flex-direction: column; align-items: stretch; }
.btn-store { justify-content: center; }
}
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
/* ========================================================================
6. 卡片与角标
======================================================================== */
.card {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
transition: transform var(--t-base), border-color var(--t-base),
box-shadow var(--t-base);
}
.card:hover {
transform: translateY(-6px);
border-color: var(--ember);
box-shadow: var(--shadow-lg);
}
.card-body { padding: var(--sp-5); }
.card-title { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.card-text { color: var(--text-sub); font-size: var(--fs-sm); margin: 0; }
/* 卡片封面：固定宽高比，防止图片加载时布局跳动(CLS) */
.card-media {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--surface-alt);
}
.card-media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform var(--t-slow);
}
.card:hover .card-media img { transform: scale(1.06); }
.card-media::after {
content: ''; position: absolute; inset: 0;
background: var(--grad-scrim);
opacity: .85;
}
.card-media.square { aspect-ratio: 1 / 1; }
.card-media.wide { aspect-ratio: 16 / 9; }
/* 压在封面上的标题 */
.card-overlay {
position: absolute; inset-inline: 0; bottom: 0;
z-index: 1;
padding: var(--sp-5);
}
/* ---- 运动分类卡片（底图 + 遮罩 + 文字）----
版式参考 media/icon/样式.png：整块是照片，压一层自上而下变暗的遮罩，
白字坐在遮罩最暗的那一段上。 */
.cat-card {
position: relative;
display: block;
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: var(--r-lg);
background: var(--surface-alt);
isolation: isolate; /* 让遮罩的层叠只在卡片内部生效 */
}
.cat-card-img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
transition: transform var(--t-slow);
}
.cat-card:hover .cat-card-img,
.cat-card:focus-visible .cat-card-img { transform: scale(1.07); }
/* 缺图时的占位：品牌渐变 + 一个大号首字母。
12 张卡全用同一个渐变会糊成一片墙纸，所以按位置轮换三种配色。 */
.cat-card-fallback {
display: grid; place-items: center;
background: var(--grad-brand);
}
.cat-grid > :nth-child(3n+2) .cat-card-fallback {
background: linear-gradient(150deg, var(--hot-pink) 0%, var(--violet-deep) 100%);
}
.cat-grid > :nth-child(3n+3) .cat-card-fallback {
background: linear-gradient(150deg, var(--gold) 0%, var(--ember-deep) 100%);
}
.cat-card-fallback::before {
content: attr(data-initial);
font-family: var(--font-display);
font-size: clamp(3rem, 9vw, 5rem);
font-weight: 800;
color: rgba(255, 255, 255, .34);
text-transform: uppercase;
}
.cat-card-scrim {
position: absolute; inset: 0;
/* 上半段完全透明，下半段压到接近全黑 —— 真人照片明暗不可控，
只靠 text-shadow 压不住白字，必须有实体遮罩。 */
background: linear-gradient(180deg,
rgba(8, 8, 12, 0) 26%,
rgba(8, 8, 12, .38) 52%,
rgba(8, 8, 12, .78) 78%,
rgba(8, 8, 12, .93) 100%);
transition: opacity var(--t-base);
}
.cat-card:hover .cat-card-scrim { opacity: .82; }
.cat-card-text {
position: absolute; inset-inline: 0; bottom: 0;
display: flex; flex-direction: column; gap: 4px;
padding: var(--sp-5);
/* 卡片在亮色主题下底也是深色照片，所以这里的白字**不跟随主题** */
color: #fff;
}
.cat-card-text strong {
font-family: var(--font-display);
font-size: var(--fs-h4);
font-weight: 800;
line-height: 1.15;
}
.cat-card-text em {
font-style: normal;
font-size: var(--fs-sm);
color: rgba(255, 255, 255, .78);
}
/* 分类网格：桌面 4 列 → 平板 3 列 → 手机 2 列。
手机保持 2 列而不是 1 列 —— 12 个分类排成一长条要滑很久。 */
.cat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-4);
}
@media (max-width: 1040px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .cat-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); } }
@media (max-width: 720px) { .cat-card-text { padding: var(--sp-4); } }
/* ---- 角标 / 丝带 ---- */
.badge {
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 12px;
font-family: var(--font-display);
font-size: 11px; font-weight: 800;
letter-spacing: .09em; text-transform: uppercase;
color: #fff;
border-radius: var(--r-full);
line-height: 1;
}
.badge-hot { background: var(--ribbon-hot); }
.badge-new { background: var(--ribbon-new); }
.badge-classic { background: var(--ribbon-classic); color: #06301A; }
.badge-level { background: var(--surface-hi); color: var(--text-sub); }
.badge-ember { background: var(--ember); }
.badge-violet { background: var(--violet); }
/* 绝对定位到卡片角上 */
.badge-corner {
position: absolute; top: var(--sp-3); inset-inline-start: var(--sp-3);
z-index: 2;
box-shadow: var(--shadow-sm);
}
/* 药丸标签（分类 / tag） */
.pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 16px;
font-size: var(--fs-sm); font-weight: 600;
color: var(--text-sub);
background: var(--surface-alt);
border: 1px solid var(--border);
border-radius: var(--r-full);
transition: all var(--t-fast);
white-space: nowrap;
}
.pill:hover { color: var(--text); border-color: var(--ember); }
.pill.active {
background: var(--grad-brand);
color: #fff;
border-color: transparent;
}
/* 横向滚动的筛选条（移动端） */
.pill-row {
display: flex; gap: var(--sp-2);
overflow-x: auto;
padding-bottom: var(--sp-2);
scrollbar-width: none;
-ms-overflow-style: none;
}
.pill-row::-webkit-scrollbar { display: none; }
/* ---- 品牌标志 ----
版式照 media/icon/参考.png 复刻。参考图量得（单位 px，图 936×334）：
图形 x 52-292 y 20-294 → 240 × 274
"dumi" x 307-862 y 61-224 → 555 × 164（字面高，ascender→基线）
副标题 x 296-848 y 254-298 → 552 × 45（含 y 的下伸部）
由此得到三条比例，全部换算成 em（em = .logo 的 font-size）：
① 图形高 / dumi 字面高 = 274/164 = 1.671
Poppins 600 的 "dumi" 字面高实测 0.794em
→ 图形高 = 1.671 × 0.794 = 1.326em
② 副标题宽 / dumi 宽 = 552/555 = 0.996（两者几乎等宽）
"dumi" 宽实测 2.665em；副标题串（含 4 个 0.5em 间隔）实测 10.87 字号
→ 副标题字号 = 2.665 / 10.87 = 0.245em
③ 图形与文字块间距 15px → 0.073em；dumi 与副标题间距 30px → 0.145em
⚠️ 别把"字面高"和"大写高"混着用：dumi 量的是 ascender→基线（0.794em），
副标题量的是含下伸部的整块（0.7em 大写高 + 下伸部）。早先按同一基准
折算过一版，副标题短了三成。这里索性改用②的等宽约束，最稳。 */
.logo {
display: inline-flex;
/* 参考图里图形底边比文字块底边高 4px（274 高里的 1.5%），按底对齐即可 */
align-items: flex-end;
gap: 0.073em;
font-family: var(--font-logo);
line-height: 1;
user-select: none;
}
.logo-mark {
height: 1.326em;
width: auto;
aspect-ratio: 1026 / 1208; /* 描边后的 viewBox 比例，防止 CLS */
flex-shrink: 0;
transition: transform var(--t-base);
}
.logo-text { display: flex; flex-direction: column; align-items: center; gap: 0.145em; }
.logo-word {
font-weight: 600;
/* 参考图没有紧排，保持 0；负字距会让副标题等宽约束对不上 */
letter-spacing: 0;
/* 参考图是黑底白字；亮色模式下白字看不见，所以跟随正文色 */
color: var(--text);
}
.logo-tagline {
display: inline-flex; align-items: center;
gap: 0.5em;
/* 严格比例是 0.245em，但页眉那档算出来只有 6.3px 根本读不了 —— 给 10px 下限。
页脚用 .logo-lg（2.4rem）时算出来 9.4px…… 也偏小，所以页脚放大到 3rem。 */
font-size: max(0.245em, 10px);
font-weight: 500;
white-space: nowrap;
}
.logo-tagline i { font-style: normal; color: var(--text-dim); }
.logo-tagline b { font-weight: 500; }
.lt-move { color: var(--brand-move); }
.lt-play { color: var(--brand-play); }
.lt-be { color: var(--brand-be); }
a:hover > .logo .logo-mark,
.logo:hover .logo-mark { transform: rotate(-8deg) scale(1.06); }
.logo-sm { font-size: 1.15rem; }
.logo-md { font-size: 1.6rem; }
.logo-lg { font-size: 3rem; }
/* ========================================================================
7. 导航
======================================================================== */
.nav {
position: sticky; top: 0;
z-index: var(--z-nav);
background: color-mix(in srgb, var(--bg) 82%, transparent);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border);
}
.nav-inner {
display: flex; align-items: center; gap: var(--sp-5);
height: 72px;
}
/* 标志不参与压缩：窄屏下导航按钮再多也不能把 dumi 挤变形 */
.nav-brand { display: inline-flex; flex-shrink: 0; }
.nav-links { display: flex; align-items: center; gap: var(--sp-2); margin-inline-start: auto; }
.nav-link {
padding: 9px 15px;
font-size: var(--fs-sm); font-weight: 600;
color: var(--text-sub);
border-radius: var(--r-full);
transition: color var(--t-fast), background var(--t-fast);
}
.nav-link:hover { color: var(--text); background: var(--surface-alt); }
.nav-link.active { color: var(--ember); }
.nav-actions { display: flex; align-items: center; gap: var(--sp-2); }
.icon-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
color: var(--text-sub);
border-radius: var(--r-full);
transition: color var(--t-fast), background var(--t-fast);
}
.icon-btn:hover { color: var(--text); background: var(--surface-alt); }
/* 汉堡按钮：三根线变叉 */
.nav-toggle { display: none; width: 40px; height: 40px; position: relative; }
.nav-toggle span {
position: absolute; left: 10px;
width: 20px; height: 2px;
background: var(--text);
border-radius: 2px;
transition: transform var(--t-base), opacity var(--t-fast);
}
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 19px; }
.nav-toggle span:nth-child(3) { top: 24px; }
.nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
/* 下拉（语言 / 练习分类） */
.dropdown { position: relative; }
.dropdown-menu {
position: absolute; top: calc(100% + 10px); inset-inline-end: 0;
z-index: var(--z-dropdown);
min-width: 190px;
/* 语言现在有 10 种，矮屏幕（横屏手机、13 寸笔记本开着控制台）装不下 —— 允许滚动 */
max-height: min(60vh, 420px);
overflow-y: auto;
padding: var(--sp-2);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
box-shadow: var(--shadow-lg);
opacity: 0; visibility: hidden;
transform: translateY(-8px);
transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
.dropdown.open .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-item {
display: block;
padding: 10px 14px;
font-size: var(--fs-sm);
color: var(--text-sub);
border-radius: var(--r-sm);
transition: color var(--t-fast), background var(--t-fast);
}
.dropdown-item:hover { color: var(--text); background: var(--surface-alt); }
.dropdown-item.active { color: var(--ember); font-weight: 600; }
/* ---- 移动端导航抽屉 ---- */
@media (max-width: 900px) {
.nav-toggle { display: block; }
/* 窄屏下 .nav-links 变成脱离文档流的抽屉，靠它把操作区顶到右边的
margin-inline-start:auto 就失效了 —— 必须补在 .nav-actions 上，
否则标志和一排按钮会挤在左侧。 */
.nav-actions { margin-inline-start: auto; }
.nav-links {
position: fixed; inset: 72px 0 auto 0;
flex-direction: column; align-items: stretch;
gap: var(--sp-1);
max-height: calc(100dvh - 72px);
overflow-y: auto;
padding: var(--sp-4) var(--sp-5) var(--sp-7);
background: var(--bg);
border-bottom: 1px solid var(--border);
transform: translateY(-12px);
opacity: 0; visibility: hidden;
transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
}
.nav-links.open { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-link { padding: 14px 16px; font-size: 1.05rem; }
}
/* 页眉里的标志：只出 [火柴人] + dumi，**不出副标题**。
版式照 data/1.png（浅色）和 data/2.png（深色）—— 那两张参考图里就没有副标题。
实测参考图的比例跟完整锁版一致（图形/dumi = 1.618，间距 0.088），
所以只需要把副标题藏掉，其余比例不用改。
"dumi" 走 var(--text)：浅色主题是近黑、深色主题是近白，正好对上两张参考图。 */
.logo-nav .logo-tagline { display: none; }
/* 窄屏再缩一档 */
@media (max-width: 600px) {
.logo-nav.logo-md { font-size: 1.4rem; }
}
/* ========================================================================
8. 页脚
======================================================================== */
.footer {
padding-top: var(--sp-9);
background: var(--surface);
border-top: 1px solid var(--border);
}
.footer-grid {
display: grid;
grid-template-columns: 1.6fr repeat(3, 1fr);
gap: var(--sp-6);
padding-bottom: var(--sp-7);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: var(--sp-5); } }
.footer h4 {
font-size: var(--fs-xs);
font-weight: 800;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: var(--sp-4);
}
.footer-links li { margin-bottom: var(--sp-3); }
.footer-links a {
font-size: var(--fs-sm);
color: var(--text-sub);
transition: color var(--t-fast);
}
.footer-links a:hover { color: var(--ember); }
/* ---- 社交媒体图标条（页脚 + 文章底部共用）----
图标是各平台字标的单色路径，fill: currentColor，所以明暗主题
只靠父元素的 color 就能切；hover 换成品牌渐变底 + 白色图标。 */
.social-links {
display: flex; flex-wrap: wrap;
gap: var(--sp-2);
}
.social-links a {
display: inline-flex; align-items: center; justify-content: center;
width: var(--social-size, 38px);
height: var(--social-size, 38px);
color: var(--text-sub);
background: var(--surface-alt);
border: 1px solid var(--border);
border-radius: var(--r-full);
transition: color var(--t-fast), background var(--t-fast),
border-color var(--t-fast), transform var(--t-fast);
}
.social-links svg {
width: var(--social-icon, 17px);
height: var(--social-icon, 17px);
fill: currentColor;
}
.social-links a:hover,
.social-links a:focus-visible {
color: #fff;
background: var(--grad-brand);
border-color: transparent;
transform: translateY(-2px);
}
.social-links-lg { --social-size: 48px; --social-icon: 21px; }
/* 文章底部的关注区：宽屏左右分栏，窄屏堆叠 */
.post-follow {
display: flex; flex-wrap: wrap; align-items: center;
justify-content: space-between; gap: var(--sp-5);
padding: var(--sp-6);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
}
/* 文字块要能被压缩，否则它的 max-content（46ch ≈ 460px）加上六个 48px 图标
超过容器内宽，整条图标就被挤到下一行去了 —— 宽屏上看着像没做布局。 */
.post-follow > div { flex: 1 1 260px; min-width: 0; }
.post-follow h3 { font-family: var(--font-display); font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.post-follow .card-text { margin: 0; max-width: 34ch; }
.post-follow .social-links { flex: 0 0 auto; }
@media (max-width: 560px) {
.post-follow { padding: var(--sp-5); }
.post-follow .social-links { width: 100%; }
}
/* 页脚那一处沿用旧的外边距 */
.footer .social-links { margin-top: var(--sp-4); }
.footer-langs {
display: flex; flex-wrap: wrap; gap: var(--sp-2);
padding-block: var(--sp-5);
border-top: 1px solid var(--border);
}
.footer-bottom {
display: flex; flex-wrap: wrap; align-items: center;
justify-content: space-between; gap: var(--sp-4);
padding-block: var(--sp-5);
border-top: 1px solid var(--border);
font-size: var(--fs-sm);
color: var(--text-dim);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
/* 法务页里"上线前必须替换"的占位框。
刻意做得很显眼 —— 藏在代码注释里的占位一定会被带上线。 */
.legal-todo {
padding: var(--sp-5);
margin-bottom: var(--sp-6);
font-size: var(--fs-sm);
line-height: 1.6;
color: var(--text);
background: color-mix(in srgb, var(--gold) 14%, var(--surface));
border: 2px dashed var(--gold);
border-radius: var(--r-md);
}
.legal-todo strong { display: block; margin-bottom: var(--sp-2); color: var(--ember-deep); }
/* 法务页的表格 */
.prose table {
width: 100%;
margin-block: var(--sp-5);
border-collapse: collapse;
font-size: var(--fs-sm);
}
.prose th, .prose td {
padding: 10px 14px;
text-align: start;
vertical-align: top;
border: 1px solid var(--border);
}
.prose th { background: var(--surface-alt); font-weight: 700; }
.prose tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface) 60%, transparent); }
/* 长表格在窄屏横向滚动，不撑破页面 */
@media (max-width: 620px) {
.prose table { display: block; overflow-x: auto; white-space: nowrap; }
.prose td, .prose th { white-space: normal; min-width: 150px; }
}
/* 联盟披露 */
.affiliate-note {
padding: var(--sp-4);
margin-block: var(--sp-5);
font-size: var(--fs-xs);
color: var(--text-dim);
background: var(--surface-alt);
border-inline-start: 3px solid var(--gold);
border-radius: var(--r-sm);
}
/* ========================================================================
9. Hero（视频背景）
======================================================================== */
.hero {
position: relative;
display: flex; align-items: center;
min-height: min(92dvh, 860px);
padding-block: var(--sp-9) var(--sp-8);
overflow: hidden;
background: #0C0C11; /* 视频加载前的底色，固定深色不跟随主题 */
color: #fff;
}
/* 视频与海报图完全重叠；视频没就绪时海报图可见 */
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img,
.hero-media video {
width: 100%; height: 100%;
object-fit: cover;
}
.hero-media video {
position: absolute; inset: 0;
opacity: 0;
transition: opacity 600ms ease;
}
.hero-media video.ready { opacity: 1; }
/* 压暗层：保证白字在任何一帧上都可读 */
.hero-media::after {
content: ''; position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(12,12,17,.55) 0%, rgba(12,12,17,.35) 45%, rgba(12,12,17,.92) 100%),
radial-gradient(120% 80% at 15% 40%, rgba(123,63,228,.32) 0%, transparent 62%),
radial-gradient(100% 70% at 90% 15%, rgba(255,95,31,.28) 0%, transparent 60%);
}
.hero-inner { position: relative; z-index: 1; max-width: 780px; }
.hero h1 {
font-size: var(--fs-hero);
line-height: 1.02;
letter-spacing: -0.035em;
text-wrap: balance;
}
.hero .lead {
color: rgba(255, 255, 255, .88);
max-width: 560px;
margin-block: var(--sp-5) var(--sp-6);
}
/* Hero 底部数据条 */
.hero-stats {
display: flex; flex-wrap: wrap; gap: clamp(var(--sp-5), 5vw, var(--sp-8));
margin-top: var(--sp-8);
padding-top: var(--sp-5);
border-top: 1px solid rgba(255, 255, 255, .18);
}
.hero-stat strong {
display: block;
font-family: var(--font-display);
font-size: clamp(1.6rem, 3.4vw, 2.4rem);
font-weight: 800;
line-height: 1;
}
.hero-stat span {
font-size: var(--fs-xs);
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(255, 255, 255, .68);
}
/* 播放/暂停控制（右下角） */
.hero-videobtn {
position: absolute; inset-inline-end: var(--sp-5); bottom: var(--sp-5);
z-index: 2;
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px;
color: #fff;
background: rgba(255, 255, 255, .14);
border: 1px solid rgba(255, 255, 255, .3);
border-radius: var(--r-full);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: background var(--t-fast);
}
.hero-videobtn:hover { background: rgba(255, 255, 255, .26); }
/* ---- 页头 / 面包屑 ---- */
.page-head { padding-top: calc(var(--sp-7) + var(--sp-4)); }
.page-head h1 { margin-bottom: var(--sp-4); }
.crumbs {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
margin-bottom: var(--sp-5);
font-size: var(--fs-sm);
color: var(--text-dim);
}
.crumbs a { color: var(--text-sub); transition: color var(--t-fast); }
.crumbs a:hover { color: var(--ember); }
/* ---- 长文排版（法务页 / 关于页 / 博客正文）---- */
.prose { font-size: 1.0625rem; line-height: 1.78; color: var(--text-sub); }
.prose h2 {
margin: var(--sp-7) 0 var(--sp-4);
font-size: var(--fs-h3);
color: var(--text);
}
.prose h3 { margin: var(--sp-6) 0 var(--sp-3); font-size: var(--fs-h4); color: var(--text); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose a { color: var(--ember); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { margin: 0 0 var(--sp-4); padding-inline-start: var(--sp-5); }
.prose ul li { list-style: disc; margin-bottom: var(--sp-2); }
.prose ol li { list-style: decimal; margin-bottom: var(--sp-2); }
.prose img { border-radius: var(--r-md); margin-block: var(--sp-5); }
.prose blockquote {
margin: var(--sp-5) 0;
padding: var(--sp-4) var(--sp-5);
background: var(--surface);
border-inline-start: 3px solid var(--ember);
border-radius: var(--r-sm);
}
.prose code {
padding: 2px 6px;
font-size: .9em;
background: var(--surface-alt);
border-radius: 5px;
}
.prose pre {
padding: var(--sp-4);
overflow-x: auto; /* 代码块自己滚，不撑破页面 */
background: var(--surface-alt);
border-radius: var(--r-md);
}
.prose pre code { padding: 0; background: none; }
/* 宽表格自己滚动，页面不出现横向滚动条 */
.prose table { width: 100%; border-collapse: collapse; margin-block: var(--sp-5); }
.prose th, .prose td { padding: var(--sp-3); border-bottom: 1px solid var(--border); text-align: start; }
/* ---- 文章目录 ---- */
.toc {
margin-bottom: var(--sp-7);
padding: var(--sp-4) var(--sp-5);
background: var(--surface);
border: 1px solid var(--border);
border-inline-start: 3px solid var(--ember);
border-radius: var(--r-md);
}
.toc summary {
font-family: var(--font-display);
font-size: var(--fs-xs);
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--text-dim);
cursor: pointer;
list-style: none;
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary:hover { color: var(--ember); }
/* markdown 的 toc 扩展会输出 */
.toc ul { margin: var(--sp-4) 0 0; padding: 0; }
.toc ul ul { margin: var(--sp-2) 0 0; padding-inline-start: var(--sp-4); }
.toc li { margin-bottom: var(--sp-2); }
.toc a {
font-size: var(--fs-sm);
color: var(--text-sub);
transition: color var(--t-fast);
}
.toc a:hover { color: var(--ember); }
/* toc 扩展自带一层 .toc 容器，避免嵌套后重复画边框 */
.toc .toc { margin: 0; padding: 0; background: none; border: 0; }
/* 锚点跳转时标题不被固定导航遮住 */
.prose h2[id], .prose h3[id] { scroll-margin-top: 96px; }
/* ---- 商品卡 ---- */
.product-card .card-media { background: #fff; } /* 商品图多是白底，避免暗色底串色 */
.product-card .card-media img { object-fit: contain; padding: var(--sp-3); }
.product-card .card-media::after { opacity: 0; } /* 商品图不压暗，要看清细节 */
.product-card .card-body { padding: var(--sp-4); }
.product-card .card-title { font-size: 1rem; }
.product-foot { justify-content: space-between; margin-top: var(--sp-3); }
.product-price {
font-family: var(--font-display);
font-size: 1.05rem; font-weight: 800;
color: var(--ember);
}
.product-platform {
padding: 3px 9px;
font-size: 11px; font-weight: 600;
color: var(--text-dim);
background: var(--surface-alt);
border-radius: var(--r-full);
}
.product-figure { position: relative; }
.product-figure img {
width: 100%;
background: #fff;
object-fit: contain;
}
.product-specs {
display: flex; flex-wrap: wrap; gap: var(--sp-6);
margin: var(--sp-5) 0;
padding: var(--sp-4) 0;
border-block: 1px solid var(--border);
}
.product-specs dt {
font-size: var(--fs-xs);
letter-spacing: .1em; text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 4px;
}
.product-specs dd { margin: 0; font-weight: 600; }
.spec-label {
font-size: var(--fs-xs);
letter-spacing: .1em; text-transform: uppercase;
color: var(--text-dim);
margin-bottom: var(--sp-3);
}
.product-disclosure {
margin-top: var(--sp-3);
font-size: var(--fs-xs);
color: var(--text-dim);
text-align: center;
}
/* 推荐人 */
.product-recommender-line {
margin: 0 0 var(--sp-2);
font-size: var(--fs-xs);
color: var(--text-dim);
}
.product-recommender {
display: inline-flex; align-items: center; gap: 8px;
color: var(--text);
font-weight: 600;
}
.product-recommender img { width: 36px; height: 36px; border-radius: var(--r-full); object-fit: cover; }
.product-recommender:hover { color: var(--ember); }
/* ---- 博客：卡片附属信息 ---- */
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-3); }
.tag-mini {
padding: 3px 9px;
font-size: 11px; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase;
color: var(--ember);
background: color-mix(in srgb, var(--ember) 14%, transparent);
border-radius: var(--r-full);
}
.card-title a { color: inherit; }
.card-title a:hover { color: var(--ember); }
.card-foot {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
margin-top: var(--sp-4);
font-size: var(--fs-xs);
color: var(--text-dim);
}
.card-author { color: var(--text-sub); font-weight: 600; }
.card-author:hover { color: var(--ember); }
.post-meta {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
margin: var(--sp-4) 0 var(--sp-6);
font-size: var(--fs-sm);
color: var(--text-dim);
}
/* 阅读量 */
.post-views { display: inline-flex; align-items: center; gap: 4px; }
.post-views svg { width: 14px; height: 14px; fill: currentColor; opacity: .75; }
/* ---- 作者卡片 ---- */
.author-card {
display: flex; align-items: flex-start; gap: var(--sp-4);
padding: var(--sp-5);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
}
.author-card-compact { padding: var(--sp-3) 0; background: none; border: 0; }
.author-avatar {
display: grid; place-items: center;
width: 56px; height: 56px;
flex-shrink: 0;
overflow: hidden;
background: var(--grad-brand);
border-radius: var(--r-full);
}
.author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-initial {
font-family: var(--font-display);
font-size: 1.35rem; font-weight: 800;
color: #fff;
text-transform: uppercase;
}
.author-avatar-lg { width: 108px; height: 108px; }
.author-avatar-lg .author-initial { font-size: 2.6rem; }
.author-meta { min-width: 0; }
.author-name {
display: block;
font-family: var(--font-display);
font-size: 1.05rem; font-weight: 700;
color: var(--text);
}
.author-name:hover { color: var(--ember); }
.author-role, .author-role-lg {
display: block;
font-size: var(--fs-sm);
color: var(--ember);
font-weight: 600;
}
.author-role-lg { font-size: var(--fs-body); margin-top: var(--sp-2); }
.author-bio {
margin: var(--sp-3) 0 0;
font-size: var(--fs-sm);
color: var(--text-sub);
max-width: 62ch;
}
.author-hero { display: flex; align-items: flex-start; gap: var(--sp-6); }
@media (max-width: 640px) {
.author-hero { flex-direction: column; gap: var(--sp-4); }
}
/* ---- 文中 CTA ---- */
.inline-cta {
padding: var(--sp-5);
background: var(--surface);
border: 1px solid var(--border);
border-inline-start: 3px solid var(--ember);
border-radius: var(--r-md);
}
.inline-cta h3 { font-size: var(--fs-h4); }
/* ---- 横向滑动条（文章推荐 / 装备推荐 / 你也会喜欢 共用）----
桌面端也保持横滑而不是换成网格：这几处都是"看一眼、有兴趣才点"的次级内容，
横滑一行比铺开三行更不抢主内容的注意力，两端的渐隐提示还能表明后面有东西。 */
.hscroll {
display: flex;
gap: var(--sp-4);
overflow-x: auto;
overscroll-behavior-x: contain; /* 横滑到头不要连带触发浏览器的后退手势 */
scroll-snap-type: x proximity;
padding-block: var(--sp-2) var(--sp-4);
/* 让卡片能滑到贴边，同时首尾留出与容器一致的内边距 */
scroll-padding-inline: var(--sp-1);
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.hscroll::-webkit-scrollbar { height: 6px; }
.hscroll::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: var(--r-full);
}
.hscroll::-webkit-scrollbar-track { background: transparent; }
.hscroll-item {
flex: 0 0 clamp(240px, 74vw, 300px);
scroll-snap-align: start;
}
@media (min-width: 761px) {
.hscroll-item { flex-basis: 300px; }
}
/* 整卡可点：标题链接用 ::after 铺满整张卡。
卡里其它链接（作者）要 position:relative + z-index 才点得到。 */
.card-clickable { position: relative; display: flex; flex-direction: column; }
.stretched-link::after {
content: '';
position: absolute; inset: 0;
z-index: 0;
}
.card-clickable .card-body { position: relative; }
.card-clickable .card-foot a { position: relative; z-index: 1; }
.card-clickable .card-body > *:not(.card-title) { position: relative; z-index: 1; pointer-events: none; }
.card-clickable .card-foot a { pointer-events: auto; }
/* 横滑条右侧的渐隐，暗示还能往后滑 */
.hscroll-wrap { position: relative; }
.hscroll-wrap::after {
content: '';
position: absolute; inset-block: 0; inset-inline-end: 0;
width: 42px;
pointer-events: none;
background: linear-gradient(to left, var(--bg), transparent);
}
.section-alt .hscroll-wrap::after { background: linear-gradient(to left, var(--surface), transparent); }
/* ---- 移动端下滑自动加载 ---- */
.infinite-sentinel {
display: grid; place-items: center;
min-height: 72px;
margin-top: var(--sp-5);
}
.infinite-spinner {
width: 26px; height: 26px;
border: 2px solid var(--border);
border-top-color: var(--ember);
border-radius: var(--r-full);
animation: infinite-spin 720ms linear infinite;
}
@keyframes infinite-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.infinite-spinner { animation-duration: 2.4s; }
}
/* ---- 分页 ---- */
.pager {
display: flex; align-items: center; justify-content: center;
flex-wrap: wrap; gap: var(--sp-4);
margin-top: var(--sp-8);
}
.pager-btn {
padding: 11px 22px;
font-size: var(--fs-sm); font-weight: 600;
color: var(--text);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-full);
transition: all var(--t-fast);
}
.pager-btn:hover { border-color: var(--ember); color: var(--ember); }
.pager-btn.disabled { opacity: .4; pointer-events: none; }
.pager-status { font-size: var(--fs-sm); color: var(--text-dim); }
/* ---- FAQ 折叠 ---- */
/* 用原生 ：无 JS 也能展开，键盘可达，且内容始终在 DOM 里可被抓取 */
.faq-item {
border-bottom: 1px solid var(--border);
}
.faq-item summary {
display: flex; align-items: center; justify-content: space-between;
gap: var(--sp-4);
padding: var(--sp-5) 0;
font-family: var(--font-display);
font-size: var(--fs-h4);
font-weight: 700;
cursor: pointer;
list-style: none; /* 去掉默认三角 */
transition: color var(--t-fast);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--ember); }
/* 自绘的 +/− 指示器 */
.faq-item summary::after {
content: '';
flex-shrink: 0;
width: 13px; height: 13px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 5h2v14h-2z'/%3E%3Cpath fill='%23000' d='M5 11h14v2H5z'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 5h2v14h-2z'/%3E%3Cpath fill='%23000' d='M5 11h14v2H5z'/%3E%3C/svg%3E") center/contain no-repeat;
transition: transform var(--t-base);
}
.faq-item[open] summary { color: var(--ember); }
.faq-item[open] summary::after { transform: rotate(135deg); }
.faq-answer {
padding-bottom: var(--sp-5);
color: var(--text-sub);
max-width: 68ch;
}
.faq-answer p { margin: 0; }
/* ---- 空态 ---- */
.empty-state {
padding: var(--sp-9) var(--sp-5);
text-align: center;
background: var(--surface);
border: 1px dashed var(--border);
border-radius: var(--r-lg);
}
.empty-state h1, .empty-state h2 { margin-bottom: var(--sp-3); font-size: var(--fs-h3); }
/* ---- 打勾清单 ---- */
/* .check-list 自己用 ::before 画对勾，不能再挂系统的圆点 ——
放进 .prose 里时会被 `.prose ul li { list-style: disc }` 加上第二个符号，
出现"• ✓ 文本"这种双标记。这条规则必须写在 .prose 那条之后。 */
.check-list { margin: var(--sp-5) 0 var(--sp-6); padding-inline-start: 0; }
.prose .check-list li,
.check-list li { list-style: none; }
.check-list li {
position: relative;
padding-inline-start: 32px;
margin-bottom: var(--sp-3);
color: var(--text-sub);
}
.check-list li::before {
content: '';
position: absolute; inset-inline-start: 0; top: .5em;
width: 18px; height: 18px;
background: var(--lime);
border-radius: var(--r-full);
/* 用 mask 画对勾，省一个 SVG 请求 */
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat;
}
/* ---- 底部 CTA 色带 ---- */
.cta-band {
position: relative;
background: var(--grad-brand);
color: #fff;
overflow: hidden;
}
.cta-band .lead { color: rgba(255, 255, 255, .9); }
.cta-band::after {
/* 斜切高光，给纯色块一点运动感 */
content: ''; position: absolute; inset: 0;
background: radial-gradient(90% 60% at 70% 10%, rgba(255,255,255,.22) 0%, transparent 60%);
pointer-events: none;
}
.cta-band .container { position: relative; z-index: 1; }
/* ---- 动作光谱火柴人 ---- */
.skel {
position: relative;
display: grid; place-items: center;
aspect-ratio: 4 / 3;
background:
radial-gradient(70% 60% at 50% 40%, rgba(123,63,228,.2) 0%, transparent 70%),
var(--surface-alt);
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
}
.skel svg { width: min(72%, 300px); height: auto; }
.jt {
transform-origin: center;
transform-box: fill-box; /* 让 scale 以自身中心为原点，否则会飞走 */
animation: pulse-node 2.4s ease-in-out infinite;
}
.skel-tag {
position: absolute; bottom: var(--sp-4);
display: inline-flex; align-items: center; gap: 7px;
padding: 7px 14px;
font-size: var(--fs-xs); font-weight: 600;
color: var(--text-sub);
background: color-mix(in srgb, var(--bg) 72%, transparent);
border: 1px solid var(--border);
border-radius: var(--r-full);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.skel-dot {
width: 7px; height: 7px;
background: var(--lime);
border-radius: var(--r-full);
animation: pulse-node 1.6s ease-in-out infinite;
}
/* ---- 占位图（真实素材到位后整块替换成 ![]()
）---- */
.ph {
display: grid; place-items: center;
width: 100%;
background: var(--surface-alt);
overflow: hidden;
position: relative;
}
.ph::before {
content: ''; position: absolute; inset: 0;
opacity: .24;
}
.ph-ember::before { background: linear-gradient(135deg, #FF5F1F, #7B3FE4); }
.ph-violet::before { background: linear-gradient(135deg, #7B3FE4, #2E9BFF); }
.ph-mixed::before { background: linear-gradient(135deg, #FF2D75, #7B3FE4); }
.ph-4x3 { aspect-ratio: 4 / 3; }
.ph-16x9 { aspect-ratio: 16 / 9; }
.ph-1x1 { aspect-ratio: 1 / 1; }
.ph-3x4 { aspect-ratio: 3 / 4; }
.ph-label {
position: relative;
padding: 0 var(--sp-4);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-weight: 700;
text-align: center;
color: var(--text-sub);
}
/* ---- 移动端底部下载弹窗 ---- */
.app-banner {
position: fixed;
inset-inline: var(--sp-3);
/* 贴着安全区上沿，避开 iPhone 的home 指示条 */
bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
z-index: var(--z-banner);
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--shadow-lg);
animation: banner-up var(--t-slow) both;
}
@keyframes banner-up {
from { opacity: 0; transform: translateY(120%); }
to { opacity: 1; transform: none; }
}
.app-banner-icon {
display: grid; place-items: center;
width: 46px; height: 46px;
flex-shrink: 0;
background: var(--surface-alt);
border-radius: var(--r-md);
}
/* 图标位只出火柴人（模板传 mark_only），在 46px 方格里给个明确高度 */
.app-banner-icon .logo-mark { height: 30px; }
.app-banner-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.app-banner-text strong { font-family: var(--font-display); font-size: var(--fs-sm); }
.app-banner-text span {
font-size: var(--fs-xs); color: var(--text-sub);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-banner .btn { margin-inline-start: auto; flex-shrink: 0; }
.app-banner-close {
position: absolute; top: -9px; inset-inline-end: -9px;
display: grid; place-items: center;
width: 26px; height: 26px;
color: var(--text-sub);
background: var(--surface-hi);
border: 1px solid var(--border);
border-radius: var(--r-full);
}
.app-banner-close:hover { color: var(--text); }
/* 桌面端不出现 */
@media (min-width: 761px) { .app-banner { display: none !important; } }
/* ========================================================================
10. 动效与可访问性
======================================================================== */
/* 进入视口时淡入上移。JS 加 .in 类，无 JS 时靠 .no-js 兜底常显 */
.reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity var(--t-slow), transform var(--t-slow);
}
.reveal.in { opacity: 1; transform: none; }
/* 依次延迟，做出错落感 */
.reveal-d1 { transition-delay: 70ms; }
.reveal-d2 { transition-delay: 140ms; }
.reveal-d3 { transition-delay: 210ms; }
.reveal-d4 { transition-delay: 280ms; }
/* 火柴人骨架呼吸动画（动作识别分区） */
@keyframes pulse-node {
0%, 100% { opacity: .45; transform: scale(1); }
50% { opacity: 1; transform: scale(1.35); }
}
@keyframes float-y {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.anim-float { animation: float-y 5s ease-in-out infinite; }
/* 尊重系统的"减少动态效果"设置 —— 关掉所有非必要动画 */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
.reveal { opacity: 1; transform: none; }
.card:hover, .btn:hover, .btn-store:hover { transform: none; }
}
/* 无 JS 时不要把内容藏起来 */
.no-js .reveal { opacity: 1; transform: none; }