Cyberpunk 2077 · Edgerunners CSS Theme

赛博朋克 2077 · 边缘行者 主题样式系统 — 一套零依赖、令牌驱动的纯 CSS 组件库。

霓虹发光、CRT 扫描线、故障(glitch)文字、折叠角按钮、终端窗口——把夜之城的视觉语言封装成可复用的 CSS 组件，拿来即用。

---

特性

• 零依赖 — 纯 HTML + CSS，无 JS、无构建步骤、无框架
• 令牌驱动 — 颜色 / 字体 / 间距 / 光晕 / 动画全部由 CSS 自定义属性管理，改一处全局生效
• 响应式 — display 大标题用 clamp() 自适应，窄屏不溢出
• 无障碍 — 支持 prefers-reduced-motion / prefers-contrast，焦点环可见，正文对比度达 WCAG AA (4.5:1)
• 赛博美学 — 霓虹辉光、CRT 扫描线、故障文字、终端 HUD 风格

---

快速开始

引入样式表即可：

<link rel="stylesheet" href="cyber.css" />

字体通过 cyber.css 顶部的 @import 自动从 Google Fonts 加载（Rajdhani / Orbitron / Russo One / Chakra Petch / Noto Sans SC）。

打开 index.html 查看所有组件的实时演示。

---

组件一览

模块	类名	说明
显示标题	.cyber-display + .cyber-display-{xl,lg,md,sm}	三色渐变大标题
标题	h1–h4 / .cyber-h1–.cyber-h4	语义化标题
故障文字	.cyber-glitch (需 data-text)	悬停加速的故障特效
按钮	.cyber-btn + .cyber-btn-{primary,danger,outline}	含尺寸 / 块级 / 禁用 / 故障悬停
卡片	.cyber-card / .cyber-card-neon / .cyber-card-static	含霓虹边框、悬停发光
终端	.cyber-terminal	带扫描线、状态点、闪烁光标
徽章	.cyber-badge + .cyber-badge-{cyan,magenta,yellow,red,green}	含 -sm 尺寸、-pulse 脉冲
CRT 覆盖层	.cyber-scanlines	给任意容器叠加扫描线
工具类	.cyber-flex / .cyber-gap-* / .cyber-mt-* 等	布局 / 间距 / 圆角 / 阴影

用例

<!-- 按钮 -->
<button class="cyber-btn cyber-btn-primary" data-glitch="true">⚡ 执行</button>

<!-- 故障文字（data-text 必须与内容一致） -->
<span class="cyber-glitch" data-text="CYBERPUNK 2077">CYBERPUNK 2077</span>

<!-- 霓虹卡片 -->
<div class="cyber-card cyber-card-neon">
  <h3 class="cyber-card-title">数据核心 <span class="accent">#0420</span></h3>
  <div class="cyber-card-body">神经连接已建立。</div>
</div>

<!-- 徽章 -->
<span class="cyber-badge cyber-badge-cyan cyber-badge-pulse">● 在线</span>

---

设计令牌

所有视觉变量集中在 cyber.css 的 :root，按需覆写即可定制主题：

:root {
  /* 配色 */
  --cyber-color-yellow:  #fcef0a;  /* 标志性黄 */
  --cyber-color-cyan:    #00f0ff;  /* 电光青 */
  --cyber-color-magenta: #ff2a6d;  /* 热品红 */

  /* 字体 */
  --cyber-font-display: "Orbitron", "Russo One", ...;
  --cyber-font-primary: "Rajdhani", "Chakra Petch", "Noto Sans SC", ...;
  --cyber-font-hud:     "Chakra Petch", ...;   /* HUD / 机读文本 */
  --cyber-font-mono:    "Fira Code", ...;

  /* 还有：背景色阶、霓虹光晕、字号、间距、圆角、过渡、z-index ... */
}

中文字体：英文/数字走 Rajdhani/Orbitron/Chakra Petch，中文自动回退到 Noto Sans SC。如需更强的中文标题字体，参见 cyber.css 顶部注释里的 @font-face 扩展示例（优设标题黑、庞门正道标题体等）。

---

无障碍

• 减少动效 — 系统开启「减少动态效果」时，glitch / 扫描线 / 脉冲 / 悬停上浮全部自动关闭
• 高对比度 — prefers-contrast: high 下提升文本与边框对比
• 键盘焦点 — 按钮 / 卡片 / 终端均有 :focus-visible 黄色描边
• 对比度 — 正文与 muted 文本均达 WCAG AA (≥4.5:1)

注：扫描线等动画效果在「减少动态效果」开启时不会播放，这是预期的无障碍行为。

---

浏览器兼容

依赖 CSS 自定义属性、clip-path、mask、background-clip: text——现代浏览器（Chrome / Edge / Firefox / Safari 近两年版本）均支持。滚动条样式仅 WebKit 内核生效。

---

文件结构

cyber-page/
├── cyber.css     # 主题样式系统（设计令牌 + 12 个组件模块）
├── index.html    # 组件演示展示页
└── README.md

---

许可

可自由用于个人与商业项目。字体版权归各自所有者，遵循 Google Fonts 许可。

---

NEVER FADE AWAY

Cyberpunk 2077 · Edgerunners CSS Theme · Pure CSS