# Loopline Recovery — 风格参考
> 以发光信号色构建的精准回收规划系统

**Theme:** light

Loopline Recovery 是面向企业买家的回收解决方案系统，用于在询价前评估材料、运营限制与项目匹配度。安静的矿物色画布、深色技术面板与单一亮绿信号色，将能力定向、材料简报和本地 RFQ 草稿连接为聚焦路径。

## Tokens — Colors

| 名称 | 值 | Token | 用途 |
|---|---|---|---|
| 矿物画布 | `#f2f6f5` | `--canvas` | 页面背景 |
| 洁净纸白 | `#ffffff` | `--paper` | 卡片与表单字段 |
| 碳黑 | `#102a2a` | `--ink` | 主文字与深色区块 |
| 技术灰 | `#526766` | `--muted` | 次要文字 |
| 信号薄荷 | `#0ee6b0` | `--signal` | 指示与焦点几何 |
| 深信号绿 | `#08755f` | `--signal-deep` | 主操作与可读链接 |
| 网格线 | `#c7d5d1` | `--line` | 规则线与结构分隔 |

## Tokens — Typography

系统仅使用本地无衬线回退字体。宽字距技术标签与简洁、高字重标题形成对比。

### Type Scale

| 角色 | 字体 | 字重 | 字号 | 行高 | Token |
|---|---|---:|---:|---:|---|
| 说明 | Arial | 800 | 12px | 1.4 | `--text-caption` |
| 标签 | Arial | 800 | 13px | 1.35 | `--text-label` |
| 正文 | Arial | 400 | 16px | 1.65 | `--text-body` |
| 导语 | Arial | 400 | 20px | 1.5 | `--text-lead` |
| 卡片 | Arial | 700 | 25px | 1.1 | `--text-card` |
| 首屏 | Arial | 800 | 70px | 0.98 | `--text-hero` |

## Tokens — Spacing & Shapes

布局使用克制间距、方形面板与裁切信号标记。每个组都应像评估界面，而不是纯装饰卡片集合。

### Spacing Scale

| 名称 | 值 | Token |
|---|---:|---|
| 1 | 8px | `--space-1` |
| 2 | 12px | `--space-2` |
| 3 | 16px | `--space-3` |
| 4 | 24px | `--space-4` |
| 5 | 32px | `--space-5` |
| 6 | 48px | `--space-6` |
| 区块 | 96px | `--space-section` |

### Border Radius

| 元素 | 值 | Token |
|---|---:|---|
| 面板 | 4px | `--radius` |
| 控件 | 4px | `--radius` |

### Layout

- **内容宽度：** `--layout-max` / 1180px，`--gutter` / 28px。
- **首屏：** `--hero-min-height` / 650px，使用非对称双栏网格。
- **窄屏：** 760px 以下导航变为展开控件，所有内容网格改为单列。

## Components

### 信号顶栏
紧凑的粘性顶栏将字标与能力、RFQ 锚点结合。窄屏时它变为带标签的展开菜单，可通过按钮、选择链接和 Escape 关闭。

### 能力聚光首屏
首屏将编辑式标题与深色技术板结合。纯 CSS 十字准星和信号圆形成焦点，无需借用外部图像。

### 能力矩阵
三块带边线的面板描述进料评估、材料路由和项目规划等评估类别。在企业信息获批前，标签保持通用。

### 材料简报选择器
三个本地控件让买家为项目简报选择宽泛的材料流。当前选择通过 `aria-pressed` 和文字确认双重呈现。

### 本地 RFQ 表单
表单收集企业、工作邮箱和项目需求，在本地校验，聚焦第一个错误，并显示仅本地确认。它不发起网络请求，也不存储数据。

## Do's and Don'ts

### Do
- 保持“能力定向 → 材料流 → 项目简报 → 本地 RFQ 确认”的企业路径。
- 使用信号薄荷色承载指示，使用深信号绿承载可读主操作。
- 保持表单标签、错误、键盘焦点与减少动态效果行为可见。
- 仅使用经批准、可支持的业务事实替换通用规划语言。

### Don't
- 不要将参考表单连接到邮件、CRM、数据库或自动提交。
- 不要在未经批准时暗示可接受材料、处理产能、认证、回收率或交付承诺。
- 不要添加购物车、结账、支付或消费者购买控件。
- 不要复用第三方标识、照片、证言或项目声明。

## Surfaces

| 层级 | 名称 | 值 | 用途 |
|---:|---|---|---|
| 0 | 矿物画布 | `#f2f6f5` | 整体页面场 |
| 1 | 洁净纸白 | `#ffffff` | 卡片与表单输入 |
| 2 | 碳黑 | `#102a2a` | 技术矩阵与页脚 |
| 3 | 信号浅底 | `#d9fff5` | RFQ 与选中状态区域 |

## Elevation

面板保持扁平，以一像素规则线分隔。主按钮悬停时位移两像素；焦点使用三像素轮廓，不使用阴影。

## Imagery

使用 CSS 几何、已批准的材料摄影或已授权的运营图像。起始实现仅使用信号圆、网格线和十字准星，因此在图像库获批前仍可使用。

## Layout

桌面顺序为顶栏 → 能力聚光首屏 → 能力矩阵 → 材料简报选择器 → 本地 RFQ → 页脚。窄屏保留相同顺序并改为单列，让已选材料与表单状态靠近 RFQ。

## Agent Prompt Guide

**Quick Color Reference**

使用矿物画布 `#f2f6f5`、碳黑 `#102a2a`、信号薄荷 `#0ee6b0`、深信号绿 `#08755f` 和网格线 `#c7d5d1`。在已批准项目事实可用前，内容保持通用且以需求为导向。

**Example Component Prompts**

1. **能力聚光首屏：** 创建 650px 非对称首屏，含 CSS 信号圆、十字准星技术板和单一 RFQ 操作。
2. **材料选择器：** 创建三个带规则线的控件，包含可见按下状态和本地项目简报摘要。
3. **本地 RFQ：** 校验企业、工作邮箱和项目需求，聚焦第一个错误，并在不发送、不存储数据的情况下本地确认。

## Similar Brands

- **Tomra** — 技术清晰度可启发信息层级，不借用其身份。
- **Veolia** — 严谨的环境服务分组可指导导航，不复制视觉。
- **Sims Lifecycle Services** — 企业材料流表达可指导企业内容结构。

## Quick Start

### CSS Custom Properties

将此完整本地样式表作为空白项目起点。它提供 token、响应式布局、命名组件、键盘焦点、表单状态与减少动态效果支持。

```css
:root {
  --canvas: #f2f6f5;
  --paper: #ffffff;
  --ink: #102a2a;
  --muted: #526766;
  --signal: #0ee6b0;
  --signal-deep: #08755f;
  --line: #c7d5d1;
  --wash: #d9fff5;
  --danger: #8b2500;
  --focus: #5b21b6;
  --on-dark: #ffffff;
  --font-display: Arial, sans-serif;
  --font-body: Arial, sans-serif;
  --layout-max: 1180px;
  --gutter: 28px;
  --hero-min-height: 650px;
  --radius: 4px;
  --text-caption: 12px;
  --text-label: 13px;
  --text-body: 16px;
  --text-lead: 20px;
  --text-card: 25px;
  --text-section: 46px;
  --text-hero: 70px;
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-section: 96px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--canvas); color: var(--ink); font: 400 var(--text-body)/1.65 var(--font-body); }
a { color: inherit; }
button, input, textarea { font: inherit; }
.shell { width: min(calc(100% - 2 * var(--gutter)), var(--layout-max)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 10px 14px; background: var(--signal); color: var(--ink); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.site-header { position: sticky; z-index: 30; top: 0; border-bottom: 1px solid var(--line); background: rgba(242, 246, 245, .96); backdrop-filter: blur(10px); }
.nav { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 800 20px/1 var(--font-display); letter-spacing: -.04em; text-decoration: none; }
.brand-mark { width: 23px; height: 23px; background: var(--signal-deep); clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 30% 100%, 0 70%); }
.nav-links { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; }
.nav-links a { font-size: var(--text-label); font-weight: 800; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.menu-toggle { display: none; min-height: 42px; border: 1px solid var(--ink); border-radius: var(--radius); padding: 8px 13px; background: var(--paper); color: var(--ink); font-weight: 800; }
.spotlight { overflow: hidden; border-bottom: 1px solid var(--line); background: var(--paper); }
.spotlight-grid { min-height: var(--hero-min-height); display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: var(--space-6); }
.hero-copy { padding-block: 82px; }
.kicker { margin: 0 0 var(--space-4); color: var(--signal-deep); font-size: var(--text-label); font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.kicker::before { content: ''; display: inline-block; width: 18px; height: 3px; margin: 0 10px 4px 0; background: var(--signal); }
h1, h2, h3 { margin: 0; font-family: var(--font-display); line-height: 1.05; }
h1 { max-width: 720px; font-size: var(--text-hero); letter-spacing: -.065em; text-transform: uppercase; }
h1 em { color: var(--signal-deep); font-style: normal; }
.lead { max-width: 620px; margin: var(--space-5) 0; color: var(--muted); font-size: var(--text-lead); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; border: 1px solid var(--signal-deep); border-radius: var(--radius); padding: 11px 18px; background: var(--signal-deep); color: var(--on-dark); font-size: var(--text-label); font-weight: 800; letter-spacing: .07em; text-decoration: none; text-transform: uppercase; transition: transform .15s ease, background .15s ease; }
.button:hover { background: var(--ink); transform: translate(-2px, -2px); }
.button--quiet { background: transparent; color: var(--signal-deep); }
.signal-board { position: relative; min-height: 430px; overflow: hidden; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--ink); color: var(--on-dark); }
.signal-board::before, .signal-board::after { content: ''; position: absolute; z-index: 1; background: rgba(255, 255, 255, .22); }
.signal-board::before { top: 0; bottom: 0; left: 50%; width: 1px; }
.signal-board::after { top: 50%; right: 0; left: 0; height: 1px; }
.signal-disc { position: absolute; top: 50%; left: 50%; width: 260px; aspect-ratio: 1; border: 48px solid var(--signal); border-radius: 50%; transform: translate(-50%, -50%); }
.signal-note { position: absolute; z-index: 2; right: var(--space-4); bottom: var(--space-4); width: min(260px, calc(100% - 48px)); padding: var(--space-4); border: 1px solid var(--signal); background: var(--ink); }
.signal-note b { display: block; margin-bottom: var(--space-2); color: var(--signal); font-size: var(--text-label); letter-spacing: .12em; }
.signal-note p { margin: 0; color: #d8e5e1; }
.section { padding-block: var(--space-section); }
.section-heading { max-width: 760px; margin-bottom: var(--space-6); }
.section-heading p:last-child { margin: var(--space-3) 0 0; color: var(--muted); }
h2 { font-size: var(--text-section); letter-spacing: -.055em; }
.capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.capability-card { min-height: 320px; padding: var(--space-5); border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--paper); }
.capability-card:nth-child(2) { background: var(--wash); }
.capability-card b { display: block; margin-bottom: 68px; color: var(--signal-deep); font-size: var(--text-label); letter-spacing: .12em; }
.capability-card h3 { font-size: var(--text-card); letter-spacing: -.035em; }
.capability-card p { color: var(--muted); }
.technical { border-block: 1px solid var(--ink); background: var(--ink); color: var(--on-dark); }
.technical .kicker { color: var(--signal); }
.technical h2 { color: var(--on-dark); }
.technical .section-heading p:last-child { color: #c9d9d5; }
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid #46615f; background: #46615f; }
.process-grid article { min-height: 220px; padding: var(--space-4); background: var(--ink); }
.process-grid b { display: block; margin-bottom: 58px; color: var(--signal); font-size: var(--text-label); letter-spacing: .1em; }
.process-grid h3 { font-size: var(--text-card); }
.process-grid p { color: #c9d9d5; }
.material-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.material-option { min-height: 170px; border: 1px solid var(--ink); border-radius: var(--radius); padding: var(--space-4); background: var(--paper); color: var(--ink); text-align: left; cursor: pointer; }
.material-option span { display: block; margin-bottom: var(--space-5); color: var(--signal-deep); font-size: var(--text-label); font-weight: 800; letter-spacing: .1em; }
.material-option strong { display: block; font: 700 var(--text-card)/1.1 var(--font-display); }
.material-option[aria-pressed='true'] { border-width: 3px; background: var(--wash); box-shadow: inset 8px 0 0 var(--signal); }
.brief-status { min-height: 1.6em; margin: var(--space-4) 0 0; font-weight: 700; }
.rfq { padding-block: var(--space-section); background: var(--signal); }
.rfq-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: var(--space-6); }
.rfq .kicker { color: var(--ink); }
.rfq-copy p { max-width: 480px; }
.form { display: grid; gap: var(--space-3); }
.field { display: grid; gap: 6px; }
.field label { font-size: var(--text-label); font-weight: 800; }
.field input, .field textarea { width: 100%; border: 1px solid var(--ink); border-radius: var(--radius); padding: 13px; background: var(--paper); color: var(--ink); }
.field textarea { min-height: 118px; resize: vertical; }
.field [aria-invalid='true'] { border: 3px solid var(--danger); }
.error { min-height: 1.35em; color: #5d1b00; font-size: var(--text-caption); font-weight: 800; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rfq .button { border-color: var(--ink); background: var(--ink); }
.rfq .button--reset { background: transparent; color: var(--ink); }
.status { min-height: 1.6em; margin: 0; font-weight: 800; }
.footer { padding-top: var(--space-6); background: var(--ink); color: #c9d9d5; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--space-5); padding-bottom: var(--space-5); }
.footer .brand, .footer h3 { color: var(--on-dark); }
.footer h3 { font-size: var(--text-label); letter-spacing: .08em; }
.footer p { margin: 8px 0; }
.footer-base { padding-block: var(--space-3); border-top: 1px solid #46615f; font-size: var(--text-caption); }
:where(a, button, input, textarea):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.technical a:focus-visible, .footer a:focus-visible { outline-color: var(--signal); }

@media (max-width: 760px) {
  :root { --gutter: 16px; --space-section: 72px; --text-section: 36px; --text-hero: 48px; }
  .menu-toggle { display: inline-flex; }
  .nav-links { position: absolute; top: 74px; right: var(--gutter); left: var(--gutter); display: none; flex-direction: column; gap: 0; border: 1px solid var(--ink); padding: 14px; background: var(--paper); }
  .nav-links[data-open='true'] { display: flex; }
  .nav-links a { display: block; padding: 12px 0; }
  .spotlight-grid, .rfq-grid { grid-template-columns: 1fr; }
  .hero-copy { padding: 72px 0 24px; }
  .signal-board { min-height: 360px; margin-bottom: 56px; }
  .signal-disc { width: 220px; border-width: 38px; }
  .capability-grid, .process-grid, .material-grid, .footer-grid { grid-template-columns: 1fr; }
  .capability-card { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

```

### Tailwind v4

```css
@import "tailwindcss";
@theme {
  --color-loopline-canvas: #f2f6f5;
  --color-loopline-ink: #102a2a;
  --color-loopline-signal: #0ee6b0;
  --color-loopline-action: #08755f;
  --radius-loopline-panel: 4px;
}
```