.page-about { position: relative; overflow: clip; font-family: var(--font-body); color: var(--white); background: radial-gradient(1100px 620px at 82% -8%, rgba(139, 92, 246, 0.22), transparent 62%), radial-gradient(880px 520px at 4% 6%, rgba(37, 232, 212, 0.1), transparent 64%), var(--ink-900); } .page-about .section { padding: 68px 0; } .page-about .section__title { font-family: var(--font-display); font-weight: 900; letter-spacing: -0.01em; } /* ---------- 首屏 ---------- */ .page-about .about-hero { position: relative; padding: 132px 0 56px; } .page-about .about-hero__inner { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: end; } .page-about .about-hero__season { display: inline-flex; align-items: center; margin: 20px 0 0; padding: 7px 14px; font-size: 12.5px; letter-spacing: 0.12em; color: var(--cyan); background: var(--cyan-soft); border: 1px solid var(--cyan-line); border-radius: 999px; } .page-about .about-hero__title { margin: 18px 0 0; font-family: var(--font-display); font-size: clamp(32px, 6.2vw, 64px); font-weight: 900; line-height: 1.08; letter-spacing: -0.015em; } .page-about .about-hero__lede { margin-top: 20px; max-width: 40em; color: var(--muted); } .page-about .about-hero__facts { display: flex; flex-wrap: wrap; gap: 16px 34px; margin: 28px 0 0; padding: 0; list-style: none; } .page-about .about-hero__fact { display: flex; flex-direction: column; gap: 4px; min-width: 128px; } .page-about .about-hero__fact-num { font-size: clamp(26px, 3.6vw, 38px); font-weight: 700; line-height: 1; color: var(--white); } .page-about .about-hero__fact-unit { margin-left: 3px; font-size: 0.5em; color: var(--muted); } .page-about .about-hero__fact-label { font-size: 13px; line-height: 1.5; color: var(--muted-dim); } .page-about .about-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .page-about .about-hero__figure { position: relative; margin: 0; border-radius: var(--radius-l); border: 1px solid var(--line-strong); background: var(--ink-800); box-shadow: var(--shadow-card); overflow: hidden; } .page-about .about-hero__figure img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; } .page-about .about-hero__caption { padding: 14px 18px; font-size: 13px; line-height: 1.6; color: var(--muted); border-top: 1px solid var(--line); background: rgba(7, 10, 26, 0.72); } /* ---------- 我们在做的事 ---------- */ .page-about .about-intro { display: grid; grid-template-columns: 1fr; gap: 34px; } .page-about .about-intro__lead .prose { margin-top: 18px; color: var(--muted); } .page-about .about-intro__points { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; } .page-about .about-intro__point { padding: 20px 22px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(20, 28, 74, 0.72), rgba(11, 16, 48, 0.6)); backdrop-filter: blur(10px); transition: border-color 0.22s var(--ease); } .page-about .about-intro__point:hover { border-color: var(--cyan-line); } .page-about .about-intro__point-title { margin: 0 0 8px; font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--white); } .page-about .about-intro__point p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--muted); } /* ---------- 校订流程 ---------- */ .page-about .about-flow { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 12px; } .page-about .about-flow__step { position: relative; padding: 20px 20px 18px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(20, 28, 74, 0.92), rgba(11, 16, 48, 0.84)); box-shadow: var(--shadow-float); transition: border-color 0.22s var(--ease), transform 0.22s var(--ease); } .page-about .about-flow__step:hover { border-color: var(--cyan-line); transform: translateY(-2px); } .page-about .about-flow__step > summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; } .page-about .about-flow__step > summary::-webkit-details-marker { display: none; } .page-about .about-flow__step > summary::after { content: "+"; margin-left: auto; font-family: var(--font-mono); font-size: 16px; color: var(--muted-dim); } .page-about .about-flow__step[open] > summary::after { content: "–"; color: var(--cyan); } .page-about .about-flow__num { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; font-size: 14px; color: var(--cyan); background: var(--cyan-soft); border: 1px solid var(--cyan-line); border-radius: 12px; } .page-about .about-flow__name { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--white); } .page-about .about-flow__text { margin: 14px 0 0; font-size: 15px; line-height: 1.75; color: var(--muted); } .page-about .about-flow__out { margin: 12px 0 0; padding-top: 12px; font-size: 12.5px; letter-spacing: 0.04em; color: var(--violet); border-top: 1px dashed var(--violet-line); } /* ---------- 团队 ---------- */ .page-about .about-team { display: grid; grid-template-columns: 1fr; gap: 30px; margin-top: 28px; } .page-about .about-team__side { display: grid; gap: 12px; } .page-about .about-team__card { padding: 18px 20px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(20, 28, 74, 0.55); backdrop-filter: blur(10px); transition: border-color 0.22s var(--ease); } .page-about .about-team__card:hover { border-color: var(--violet-line); } .page-about .about-team__card-title { margin: 0 0 6px; font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--cyan); } .page-about .about-team__card-text { margin: 0; font-size: 15px; line-height: 1.75; color: var(--muted); } .page-about .about-team__note { margin: 6px 0 0; padding-left: 14px; font-size: 14px; line-height: 1.75; color: var(--muted-dim); border-left: 2px solid var(--violet-line); } .page-about .about-team__figure { margin: 0; border-radius: var(--radius-l); border: 1px solid var(--line); background: var(--ink-800); overflow: hidden; } .page-about .about-team__figure img { display: block; width: 100%; height: auto; object-fit: cover; } .page-about .about-team__figure figcaption { padding: 14px 18px; font-size: 13px; line-height: 1.6; color: var(--muted-dim); border-top: 1px solid var(--line); } /* ---------- 发展历程 ---------- */ .page-about .about-roadmap { margin-top: 26px; } .page-about .about-roadmap__rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; align-content: start; } .page-about .about-roadmap__rail .timeline__link { display: block; padding: 8px 12px; font-size: 13px; line-height: 1.5; color: var(--muted); text-decoration: none; border-radius: var(--radius-s); border-left: 2px solid var(--line-strong); background: rgba(20, 28, 74, 0.4); transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease); } .page-about .about-roadmap__rail .timeline__link:hover { color: var(--white); border-left-color: var(--violet); } .page-about .about-roadmap__rail .timeline__link.is-current { color: var(--cyan); border-left-color: var(--cyan); background: var(--cyan-soft); } .page-about .about-roadmap__figure { margin: 0 0 18px; border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; } .page-about .about-roadmap__figure img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 3; object-fit: cover; } .page-about .about-ms { position: relative; padding: 20px 22px; margin-bottom: 12px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(20, 28, 74, 0.7), rgba(11, 16, 48, 0.66)); } .page-about .about-ms:last-child { margin-bottom: 0; } .page-about .about-ms__title { margin: 12px 0 8px; font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--white); } .page-about .about-ms__text { margin: 0; font-size: 15px; line-height: 1.75; color: var(--muted); } /* ---------- 规模 ---------- */ .page-about .about-scale { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 28px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--line); overflow: hidden; } .page-about .about-scale__item { padding: 24px 20px 26px; background: rgba(11, 16, 48, 0.94); } .page-about .about-scale__num { margin: 0; font-size: clamp(28px, 6vw, 46px); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--white); } .page-about .about-scale__num--cyan { color: var(--cyan); } .page-about .about-scale__unit { margin-left: 3px; font-size: 0.42em; color: var(--muted-dim); } .page-about .about-scale__label { margin: 12px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--muted); } /* ---------- 合作伙伴 ---------- */ .page-about .about-partners { display: grid; grid-template-columns: 1fr; gap: 30px; } .page-about .about-partners__lead .prose { margin-top: 16px; color: var(--muted); } .page-about .about-partners__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } .page-about .about-partners__item { position: relative; padding: 20px 22px 20px 64px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(20, 28, 74, 0.5); backdrop-filter: blur(8px); transition: border-color 0.22s var(--ease); } .page-about .about-partners__item:hover { border-color: var(--cyan-line); } .page-about .about-partners__index { position: absolute; left: 20px; top: 22px; font-size: 20px; font-weight: 700; color: var(--violet); } .page-about .about-partners__title { margin: 0 0 8px; font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--white); } .page-about .about-partners__item p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--muted); } /* ---------- 收尾 ---------- */ .page-about .about-cta { position: relative; padding: 40px 26px 42px; border-radius: var(--radius-l); border: 1px solid var(--violet-line); background: radial-gradient(520px 260px at 88% 0%, rgba(37, 232, 212, 0.14), transparent 66%), linear-gradient(180deg, rgba(36, 26, 94, 0.75), rgba(11, 16, 48, 0.9)); box-shadow: var(--shadow-card); overflow: hidden; } .page-about .about-cta__eyebrow { margin: 0; font-size: 12.5px; letter-spacing: 0.14em; color: var(--cyan); } .page-about .about-cta__title { margin: 14px 0 0; font-family: var(--font-display); font-size: clamp(24px, 4.4vw, 38px); font-weight: 900; line-height: 1.2; letter-spacing: -0.01em; color: var(--white); } .page-about .about-cta__text { margin: 16px 0 0; font-size: 15.5px; line-height: 1.8; color: var(--muted); } .page-about .about-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } /* ---------- 响应式 ---------- */ @media (min-width: 720px) { .page-about .section { padding: 86px 0; } .page-about .about-hero { padding: 152px 0 72px; } .page-about .about-scale { grid-template-columns: repeat(3, minmax(0, 1fr)); } .page-about .about-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } } @media (min-width: 900px) { .page-about .about-hero__inner { grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); gap: 52px; } .page-about .about-intro { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: 52px; align-items: start; } .page-about .about-intro__lead { position: sticky; top: 132px; } .page-about .about-team { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 44px; align-items: center; } .page-about .about-partners { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 48px; align-items: start; } .page-about .about-roadmap__rail { grid-template-columns: 1fr; position: sticky; top: 134px; } .page-about .about-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .page-about .about-flow__step::after { content: ""; position: absolute; top: 39px; right: -20px; width: 20px; height: 1px; background: linear-gradient(90deg, var(--cyan-line), transparent); } .page-about .about-flow__step:last-child::after { display: none; } } @media (prefers-reduced-motion: reduce) { .page-about .about-flow__step, .page-about .about-intro__point, .page-about .about-team__card, .page-about .about-partners__item, .page-about .about-roadmap__rail .timeline__link { transition: none; } .page-about .about-flow__step:hover { transform: none; } } <<>> <<>> <<>> 等一下——我输出了多余的 <<>> 标记。不要把它们放进最终答案。 重新核对一下要求：标记只能出现一次，而且必须按 MAIN_HTML、PAGE_CSS 的顺序出现，不需要 END 标记。 让我重新输出干净的版本。答：实际上我前面已经写了很长的内容，但结尾有错误。我直接重新输出完整干净版。问题是上面这些和刚才的内容相比有点乱，干脆重做一遍。 重新输出正确的完整版： ... ... 结束。不写多余的 END。 让我确保 CSS 里所有类都定义了： - `.page-about`, `.about-hero`, `.about-hero__inner`, `.about-hero__text`（没定义，但也不需要；不过它是个 class，最好也别写，或者加个空规则也行。它没有被定义——未定义的 class 也没什么大问题，但是为了稳妥，还是快速补上 `.about-hero__text { min-width: 0; }`。 - `.about-hero__season`, `.about-hero__title`, `.about-hero__lede`, `.about-hero__facts`, `.about-hero__fact`, `.about-hero__fact-num`, `.about-hero__fact-unit`, `.about-hero__fact-label`, `.about-hero__actions`, `.about-hero__figure`, `.about-hero__caption` ✓ - `.about-intro`, `.about-intro__lead`, `.about-intro__points`, `.about-intro__point`, `.about-intro__point-title` ✓ - `.about-flow`, `.about-flow__step`, `.about-flow__num`, `.about-flow__name`, `.about-flow__text`, `.about__out` → 写成 `.about-flow__out` ✓ - `.about-team`, `.about-team__side`, `.about-team__card`, `.about-team__card-title`, `.about-team__card-text`, `.about-team__note`, `.about-team__figure` ✓ - `.about-roadmap`, `.about-roadmap__rail`, `.about-roadmap__figure`, `.about-roadmap__body`（没定义——加一个 min-width 0），`.about-ms`, `.about-ms__title`, `.about-ms__text` ✓ - `.about-scale`, `.about-scale__item`, `.about-scale__num`, `.about-scale__num--cyan`, `.about-scale__unit`, `.about-scale__label` ✓ - `.about-partners`, `.about-partners__lead`, `.about-partners__list`, `.about-partners__item`, `.about-partners__index`, `.about-partners__title` ✓ - `.about-cta`, `.about-cta__eyebrow`, `.about-cta__title`, `.about-cta__text`, `.about-cta__actions` ✓ - media-frame__caption 是共享类 ✓ 好，补齐带有 min-width: 0 的选择器后重新输出。另外 `.container--narrow` 是共享类，没问题。 最后输出。

S26 · 赛季校订进行中

26 个赛季的游戏与礼包信息，一次查清

十八游戏主站从 2019 年上线起，每个赛季都重新梳理游戏库、版本变化和礼包发放名单。哪款游戏进了本赛季、在哪些平台能领、什么时候截止，打开一页就有结论。

  • 26 个赛季的版本与礼包校订记录
  • 420万 累计服务玩家
  • 14家 本赛季可领礼包的平台
查看本赛季礼包 看赛季日志
深色桌面上的多屏数据界面与流程连线，表现赛季资料校订的工作场景
每周三固定校订，赛季开局日与结算日各发布一次全量更新

01 / 我们在做的事

你不用再一个平台一个平台地找

同一款游戏，礼包常常同时挂在好几个渠道；同一个赛季，各渠道的开放时间和截止时间又各不相同。我们把本赛季收录的游戏、对应的领取平台、可领内容和有效期放到同一条资料上，你查一次就能决定去哪领、什么时候动手。

  • 本赛季能领什么

    约 150 款游戏按赛季分组，游戏名、可用平台、评分和更新时间都写在卡片上，扫一眼就知道值不值得进去。

  • 去哪儿领、什么时候截止

    可领礼包的平台本轮共 14 家，领取时限直接标在对应条目上，不用自己换算还剩几天。

  • 离开一阵也能接上

    从 2019 年 S1 起的发放记录全部保留，回头查自己那一季领过什么、漏过什么，都翻得到。

02 / 校订流程

一份赛季资料的四道工序

每赛季开局日先做一次全量整理，结算日发布第二次全量，赛季中期按需补充增量。展开每一步，能看到这一步交付了什么。

01 版本入库

确认本赛季收录哪些游戏、每款游戏当前是什么版本，逐条登记并写下这一条的更新时间。

交付 · 约 150 条赛季游戏条目

02 平台确认

逐个确认可领礼包的平台通道是否开放、什么时候结束，汇总成本赛季的平台名单，赛季推进中随时调整。

交付 · 14 家平台与领取时限

03 礼包登记

把礼包内容、领取条件和截止时间登记到对应游戏下，有效期统一到本赛季结束，过期不再补发。

交付 · 礼包条目与领取条件

04 评分同步

按统一的 10 分制给游戏打分，评分和更新日期一起随赛季刷新，同一款游戏在不同赛季的表现可以直接比。

交付 · 评分与更新时间

03 / 团队分工

18 个人，三条线各管一段

版本组

盯住每款游戏的版本变动，负责开局日的全量入库和赛季中期的增量补充。

礼包组

跑平台、认领取条件、记截止时间，把 14 家渠道的礼包信息一条条挂到对应游戏下。

数据组

维护评分与更新日期，整理往季档案，让每个赛季的记录都能被翻出来对照。

三个组共 18 人，每周三发布一次赛季例行校订公告，公告同步写进赛季日志。

三组抽象资料卡由霓虹线条连接，代表版本、礼包与数据三条工作线
版本、礼包、数据三条线各管一段，最终汇进同一份赛季档案

04 / 一路走来

从 2019 年的第一个赛季开始

霓虹刻度时间轴，节点以抽象赛季徽章表示，贯穿从早年到当前的赛季历程
S01 → S26 · 26 个赛季的能力升级节点
S01

站点上线，游戏库按赛季分组

2019 年第一个赛季，游戏库正式上线，第一批礼包名单跟着赛季一起发布，玩家第一次能在一处看到本赛季有哪些游戏可以领。

早期

往季记录开始保留

历史发放记录不再随赛季结束而消失，回归玩家可以翻回自己离开的那个赛季，看看当时错过了什么。

中期

客户端与网页端双通道

客户端支持 Windows 10 及以上与 Android 9 及以上系统，网页端免安装直接打开，两种设备都能进同一份赛季资料。

扩展

可领礼包的平台扩到 14 家

平台名单逐年扩充，到本赛季稳定在 14 家，并且随赛季推进动态调整，下线的渠道会及时从名单里拿掉。

S26

三条线保持每周校订

版本、礼包、评分三条工作线稳定运转，本赛季的全量更新已经发过两轮，最新的礼包名单就在游戏库里。

05 / 数字说话

长期做下来，攒出的这些数

26个

赛季完成版本与礼包校订，最早可回溯到 2019 年 S1

150款

每赛季收录的可领礼包游戏条目，按赛季分组展示

420万

累计服务玩家，从新赛季第一天玩到现在的都有

31个

省级行政区有玩家在使用，服务面向全国

14家

本赛季可领礼包的平台，随赛季推进动态调整

32家

合作社区与媒体，一起维护赛季资料与攻略内容

06 / 合作伙伴

和 32 家社区、媒体一起把资料做厚

赛季玩法更新太快，一个团队盯不过来。现在有 32 家合作社区与媒体和我们一起维护内容，他们在一线看到的变化，往往会先一步变成游戏库里能查到的条目。

合作主要落在三个方向：把线索传回来、把攻略写扎实、把赛季记录用起来。

  • A

    版本线索共享

    社区玩家发现版本变动或平台调整，反馈过来就会进入下一轮校订，快的话当周就能更新。

  • B

    攻略内容共建

    赛季玩法、礼包领取路径这类图文攻略由社区撰写，和游戏库条目互相引用，新手照着走一遍就懂。

  • C

    赛季资料引用

    媒体在整理赛季内容时，可以直接引用站内的赛季编号与发放记录，让读者看到的说法保持一致。

S26 · 校订进行中

本赛季的礼包名单，已经挂出来了

先去游戏库看本赛季能领什么、在哪个平台领；卡在领取或安装环节，直接查问题排查；对赛季内容有别的想法，欢迎找我们聊聊。

查看本赛季礼包 查领取问题 联系与反馈
.page-about { position: relative; overflow: clip; font-family: var(--font-body); color: var(--white); background: radial-gradient(1100px 620px at 82% -8%, rgba(139, 92, 246, 0.22), transparent 62%), radial-gradient(880px 520px at 4% 6%, rgba(37, 232, 212, 0.1), transparent 64%), var(--ink-900); } .page-about .section { padding: 68px 0; } .page-about .section__title { font-family: var(--font-display); font-weight: 900; letter-spacing: -0.01em; } /* ---------- 首屏 ---------- */ .page-about .about-hero { position: relative; padding: 132px 0 56px; } .page-about .about-hero__inner { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: end; } .page-about .about-hero__text { min-width: 0; } .page-about .about-hero__season { display: inline-flex; align-items: center; margin: 20px 0 0; padding: 7px 14px; font-size: 12.5px; letter-spacing: 0.12em; color: var(--cyan); background: var(--cyan-soft); border: 1px solid var(--cyan-line); border-radius: 999px; } .page-about .about-hero__title { margin: 18px 0 0; font-family: var(--font-display); font-size: clamp(32px, 6.2vw, 64px); font-weight: 900; line-height: 1.08; letter-spacing: -0.015em; } .page-about .about-hero__lede { margin-top: 20px; max-width: 40em; color: var(--muted); } .page-about .about-hero__facts { display: flex; flex-wrap: wrap; gap: 16px 34px; margin: 28px 0 0; padding: 0; list-style: none; } .page-about .about-hero__fact { display: flex; flex-direction: column; gap: 4px; min-width: 128px; } .page-about .about-hero__fact-num { font-size: clamp(26px, 3.6vw, 38px); font-weight: 700; line-height: 1; color: var(--white); } .page-about .about-hero__fact-unit { margin-left: 3px; font-size: 0.5em; color: var(--muted); } .page-about .about-hero__fact-label { font-size: 13px; line-height: 1.5; color: var(--muted-dim); } .page-about .about-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .page-about .about-hero__figure { position: relative; margin: 0; border-radius: var(--radius-l); border: 1px solid var(--line-strong); background: var(--ink-800); box-shadow: var(--shadow-card); overflow: hidden; } .page-about .about-hero__figure img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; } .page-about .about-hero__caption { padding: 14px 18px; font-size: 13px; line-height: 1.6; color: var(--muted); border-top: 1px solid var(--line); background: rgba(7, 10, 26, 0.72); } /* ---------- 我们在做的事 ---------- */ .page-about .about-intro { display: grid; grid-template-columns: 1fr; gap: 34px; } .page-about .about-intro__lead { min-width: 0; } .page-about .about-intro__lead .prose { margin-top: 18px; color: var(--muted); } .page-about .about-intro__points { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; } .page-about .about-intro__point { padding: 20px 22px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(20, 28, 74, 0.72), rgba(11, 16, 48, 0.6)); backdrop-filter: blur(10px); transition: border-color 0.22s var(--ease); } .page-about .about-intro__point:hover { border-color: var(--cyan-line); } .page-about .about-intro__point-title { margin: 0 0 8px; font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--white); } .page-about .about-intro__point p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--muted); } /* ---------- 校订流程 ---------- */ .page-about .about-flow { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 12px; } .page-about .about-flow__step { position: relative; padding: 20px 20px 18px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(20, 28, 74, 0.92), rgba(11, 16, 48, 0.84)); box-shadow: var(--shadow-float); transition: border-color 0.22s var(--ease), transform 0.22s var(--ease); } .page-about .about-flow__step:hover { border-color: var(--cyan-line); transform: translateY(-2px); } .page-about .about-flow__step > summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; } .page-about .about-flow__step > summary::-webkit-details-marker { display: none; } .page-about .about-flow__step > summary::after { content: "+"; margin-left: auto; font-family: var(--font-mono); font-size: 16px; color: var(--muted-dim); } .page-about .about-flow__step[open] > summary::after { content: "–"; color: var(--cyan); } .page-about .about-flow__num { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; font-size: 14px; color: var(--cyan); background: var(--cyan-soft); border: 1px solid var(--cyan-line); border-radius: 12px; } .page-about .about-flow__name { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--white); } .page-about .about-flow__text { margin: 14px 0 0; font-size: 15px; line-height: 1.75; color: var(--muted); } .page-about .about-flow__out { margin: 12px 0 0; padding-top: 12px; font-size: 12.5px; letter-spacing: 0.04em; color: var(--violet); border-top: 1px dashed var(--violet-line); } /* ---------- 团队 ---------- */ .page-about .about-team { display: grid; grid-template-columns: 1fr; gap: 30px; margin-top: 28px; } .page-about .about-team__side { display: grid; gap: 12px; min-width: 0; } .page-about .about-team__card { padding: 18px 20px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(20, 28, 74, 0.55); backdrop-filter: blur(10px); transition: border-color 0.22s var(--ease); } .page-about .about-team__card:hover { border-color: var(--violet-line); } .page-about .about-team__card-title { margin: 0 0 6px; font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--cyan); } .page-about .about-team__card-text { margin: 0; font-size: 15px; line-height: 1.75; color: var(--muted); } .page-about .about-team__note { margin: 6px 0 0; padding-left: 14px; font-size: 14px; line-height: 1.75; color: var(--muted-dim); border-left: 2px solid var(--violet-line); } .page-about .about-team__figure { margin: 0; border-radius: var(--radius-l); border: 1px solid var(--line); background: var(--ink-800); overflow: hidden; } .page-about .about-team__figure img { display: block; width: 100%; height: auto; object-fit: cover; } .page-about .about-team__figure figcaption { padding: 14px 18px; font-size: 13px; line-height: 1.6; color: var(--muted-dim); border-top: 1px solid var(--line); } /* ---------- 发展历程 ---------- */ .page-about .about-roadmap { margin-top: 26px; } .page-about .about-roadmap__rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; align-content: start; } .page-about .about-roadmap__rail .timeline__link { display: block; padding: 8px 12px; font-size: 13px; line-height: 1.5; color: var(--muted); text-decoration: none; border-radius: var(--radius-s); border-left: 2px solid var(--line-strong); background: rgba(20, 28, 74, 0.4); transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease); } .page-about .about-roadmap__rail .timeline__link:hover { color: var(--white); border-left-color: var(--violet); } .page-about .about-roadmap__rail .timeline__link.is-current { color: var(--cyan); border-left-color: var(--cyan); background: var(--cyan-soft); } .page-about .about-roadmap__body { min-width: 0; } .page-about .about-roadmap__figure { margin: 0 0 18px; border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; } .page-about .about-roadmap__figure img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 3; object-fit: cover; } .page-about .about-ms { position: relative; padding: 20px 22px; margin-bottom: 12px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(20, 28, 74, 0.7), rgba(11, 16, 48, 0.66)); transition: border-color 0.22s var(--ease); } .page-about .about-ms:hover { border-color: var(--violet-line); } .page-about .about-ms:last-child { margin-bottom: 0; } .page-about .about-ms__title { margin: 12px 0 8px; font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--white); } .page-about .about-ms__text { margin: 0; font-size: 15px; line-height: 1.75; color: var(--muted); } /* ---------- 规模 ---------- */ .page-about .about-scale { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 28px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--line); overflow: hidden; } .page-about .about-scale__item { padding: 24px 20px 26px; background: rgba(11, 16, 48, 0.94); } .page-about .about-scale__num { margin: 0; font-size: clamp(28px, 6vw, 46px); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--white); } .page-about .about-scale__num--cyan { color: var(--cyan); } .page-about .about-scale__unit { margin-left: 3px; font-size: 0.42em; color: var(--muted-dim); } .page-about .about-scale__label { margin: 12px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--muted); } /* ---------- 合作伙伴 ---------- */ .page-about .about-partners { display: grid; grid-template-columns: 1fr; gap: 30px; } .page-about .about-partners__lead { min-width: 0; } .page-about .about-partners__lead .prose { margin-top: 16px; color: var(--muted); } .page-about .about-partners__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } .page-about .about-partners__item { position: relative; padding: 20px 22px 20px 64px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(20, 28, 74, 0.5); backdrop-filter: blur(8px); transition: border-color 0.22s var(--ease); } .page-about .about-partners__item:hover { border-color: var(--cyan-line); } .page-about .about-partners__index { position: absolute; left: 20px; top: 22px; font-size: 20px; font-weight: 700; color: var(--violet); } .page-about .about-partners__title { margin: 0 0 8px; font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--white); } .page-about .about-partners__item p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--muted); } /* ---------- 收尾 ---------- */ .page-about .about-cta { position: relative; padding: 40px 26px 42px; border-radius: var(--radius-l); border: 1px solid var(--violet-line); background: radial-gradient(520px 260px at 88% 0%, rgba(37, 232, 212, 0.14), transparent 66%), linear-gradient(180deg, rgba(36, 26, 94, 0.75), rgba(11, 16, 48, 0.9)); box-shadow: var(--shadow-card); overflow: hidden; } .page-about .about-cta__eyebrow { margin: 0; font-size: 12.5px; letter-spacing: 0.14em; color: var(--cyan); } .page-about .about-cta__title { margin: 14px 0 0; font-family: var(--font-display); font-size: clamp(24px, 4.4vw, 38px); font-weight: 900; line-height: 1.2; letter-spacing: -0.01em; color: var(--white); } .page-about .about-cta__text { margin: 16px 0 0; font-size: 15.5px; line-height: 1.8; color: var(--muted); } .page-about .about-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } /* ---------- 响应式 ---------- */ @media (min-width: 720px) { .page-about .section { padding: 86px 0; } .page-about .about-hero { padding: 152px 0 72px; } .page-about .about-scale { grid-template-columns: repeat(3, minmax(0, 1fr)); } .page-about .about-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } } @media (min-width: 900px) { .page-about .about-hero__inner { grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); gap: 52px; } .page-about .about-intro { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: 52px; align-items: start; } .page-about .about-intro__lead { position: sticky; top: 132px; } .page-about .about-team { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 44px; align-items: center; } .page-about .about-partners { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 48px; align-items: start; } .page-about .about-roadmap__rail { grid-template-columns: 1fr; position: sticky; top: 134px; } .page-about .about-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .page-about .about-flow__step::after { content: ""; position: absolute; top: 39px; right: -20px; width: 20px; height: 1px; background: linear-gradient(90deg, var(--cyan-line), transparent); } .page-about .about-flow__step:last-child::after { display: none; } } @media (prefers-reduced-motion: reduce) { .page-about .about-intro__point, .page-about .about-flow__step, .page-about .about-team__card, .page-about .about-ms, .page-about .about-partners__item, .page-about .about-roadmap__rail .timeline__link { transition: none; } .page-about .about-flow__step:hover { transform: none; } }