# 暗黑科技风 · Dark Tech / Hacker

> 来源技能：`taste-skill` 2.B 节 — Dark tech / hacker

## 风格定位

原始机械界面，融合瑞士排版印刷与军事终端美学。深色唯一模式，全站等宽字体，终端元素语言（方括号标签、状态灯、`$` 提示符、闪烁光标、ASCII 风格分隔），呈现"解密蓝图"般的硬核数据感。

## 配色

| 角色 | 色值 | 用途 |
|------|------|------|
| 深底 | `#0A0F16` | 页面背景 |
| 面板 | `#0E1622` | 卡片、区块 |
| 边框 | `#1C2A3A` | 1px 细分隔 |
| 主体文字 | `#E6EDF3` | 正文 |
| 次级文字 | `#8B9BB0` | 描述、元数据 |
| 终端绿 | `#00E5A0` | 强调、状态灯、主按钮 |
| 琥珀 | `#FFB224` | 警示标注（少量） |

## 字体

- **全站英文/数字**：JetBrains Mono 400/700（body 主字体，本地 woff2）
- **大标题**：Outfit 800（本地 woff2）
- **中文**：系统栈

## 终端元素语言

- `[BRACKET]` 标签装饰（伪元素）
- 状态指示灯（脉冲发光绿点 `ledpulse` 动画）
- `$` 命令行提示符前缀
- `> ` 标题前缀 + `_` 闪烁光标
- ASCII 风格 `border-dashed` 分隔线
- 等宽大数字数据读数盒

## 背景细节

- `body::before` 44px 网格线（4% 透明度，fixed）
- `body::after` 扫描线效果
- 顶部终端绿径向辉光
- 纯 CSS 生成，无图片

## 交互特性

- **打字机效果**：Hero 副标题逐字输出（9-25ms/字），保留 `<strong class="accent">` 结构
- 滚动 reveal（IntersectionObserver + 60ms 阶梯延迟）
- 卡片 hover 边框变绿 + 外发光 `0 0 24px rgba(0,229,160,.15)`
- JS 注入顶栏状态灯
- `prefers-reduced-motion`：停用打字机/reveal/轮播自动播放

## 文件结构

```
暗黑科技风/
├── index.html ~ admin.html
└── assets/
    ├── logo.svg              （filter: brightness(0) invert(1) 反色适配深底）
    ├── style.min.css
    ├── site.min.js           （打字机 + reveal + 状态灯注入）
    └── vendor/fonts/          （JetBrains Mono + Archivo Black + Outfit 本地字体）
```