# Plastic Goods — Style Reference
> 薄荷绿工业风：方正的产品表面、石板色导航带，以及几何化的展示语言。
**Theme:** light
本文是依据 [Plastic Goods visual reference](https://livedemo00.template-help.com/wt_62319/) 编写的原创实施规范，不是供应商源代码。以下数值与行为是本次实施的设计决策依据。请使用已获批准的业务内容和自有图片；不得复用模板的品牌、摄影作品、客户声明或联系方式。
浅色、产品导向的 Hero 位于三级页头下方。插图占左半区，右侧使用大写 Kanit 文案。薄荷绿仅用于报价操作，低饱和鼠尾草绿用于服务探索。宽阔白色区块与平面石板色服务带、炭黑色页脚交替出现。界面应方正、留白充足、低层次感：不使用药丸按钮、圆角 SaaS 卡片或装饰性渐变。桌面端构图在手机端转为文案优先的单列内容，但不得丢失产品与流程层级。
## Tokens — Colors
| 名称 | 值 | Token | 角色 |
|---|---|---|---|
| 白色画布 | `#ffffff` | `--color-canvas` | 主背景和次级按钮填充 |
| 柔和灰 | `#f4f5f4` | `--color-soft` | 工具条、产品图片面板和新闻带 |
| 浅产品底色 | `#e8ece9` | `--color-hero` | 全宽 Hero 背景 |
| 标题墨色 | `#212121` | `--color-ink` | 标题和浅色表面标签 |
| 正文灰 | `#686868` | `--color-body` | 白底上的段落、元数据和工具文字 |
| 报价薄荷绿 | `#45cd8f` | `--color-mint` | 报价 CTA 填充、深色区图标和深色表面的键盘焦点 |
| 服务鼠尾草绿 | `#6da48b` | `--color-sage` | 服务探索按钮和横向强调线 |
| 操作墨色 | `#142c23` | `--color-action-ink` | 薄荷绿/鼠尾草绿按钮上的文字；悬停按钮背景 |
| 链接绿 | `#206844` | `--color-link` | 浅色表面的文本链接；正文大小链接不使用亮薄荷绿 |
| 导航石板色 | `#26313d` | `--color-slate` | 导航和服务区 |
| 导航激活色 | `#354454` | `--color-nav-active` | 导航链接的悬停/当前项背景 |
| 深色分隔线 | `#516371` | `--color-divider-on-dark` | 深色表面上的服务卡片与 Newsletter 分隔线 |
| 页脚炭黑 | `#2a2d31` | `--color-footer` | Newsletter 和页脚列 |
| 页脚底色 | `#22262a` | `--color-footer-bottom` | 版权带 |
| 深色表面白 | `#ffffff` | `--color-on-dark` | 深色表面的标题和交互文字 |
| 深色表面弱化色 | `#d6dce0` | `--color-muted-on-dark` | 深色表面的辅助文字 |
| 细边框 | `#d3d9d6` | `--color-border` | 仅用于产品卡片描边 |
| 控件边框 | `#7b827e` | `--color-control-border` | 输入框、选择框、多行文本框和次级按钮边界 |
| 焦点绿 | `#155c42` | `--color-focus` | 浅色表面清晰的键盘焦点 |
| 成功绿 | `#155c42` | `--color-success` | 演示成功状态指示色 |
| 错误红 | `#a82424` | `--color-error` | 无效字段文字和边框 |
| 错误浅色 | `#fff1f0` | `--color-error-bg` | 无效输入框背景 |
| 深色表面错误色 | `#ffb4ab` | `--color-error-on-dark` | 炭黑背景上的订阅表单错误文字 |
薄荷绿和鼠尾草绿控件使用深色文字。保持上述前景/背景组合；亮薄荷绿填充上的白字不属于本次实施。
## Tokens — Typography
### Kanit — Display family · `--font-heading`
- **替代字体：** Arial Narrow，其次平台无衬线字体；中文回退至 PingFang SC 或 Microsoft YaHei。
- **字重：** H1/H2 使用 400；偶发强调使用 500。
- **字号：** 桌面端 Hero 为 60px、区块标题为 40px；平板为 48/34px；手机为 36/30px。
- **行高：** H1 为 1.2；H2 为 1.25。
- **字距：** H1 为 normal；H2 为 `-0.03em`。
- **用途：** 大写、几何化展示标题，绝不使用沉重的 700–900 字重。
### Poppins — Body and interface family · `--font-body`
- **替代字体：** Helvetica Neue、Arial、平台无衬线字体；中文内容使用已声明的中文回退字体。
- **字重：** 正文和卡片标题为 400；控件/标签为 500；品牌字标为 600。
- **字号：** 12、14、16、18 和 24px。
- **行高：** 正文 1.625；导语 1.445；卡片标题 1.3334。
- **字距：** 正文 normal；大写按钮标签为 `0.12em`。
- **用途：** 易读的规格信息、导航、表单和产品元数据。
### Type Scale
| 角色 | 字体 | 字重 | 字号 | 行高 | 字距 | Token |
|---|---|---|---|---|---|---|
| caption | Poppins | 400 | 12px | 1.625 | normal | `--text-caption` |
| label / CTA | Poppins | 500 | 14px | 按钮内为 1.2 | 按钮内为 0.12em | `--text-label` |
| body | Poppins | 400 | 16px | 1.625 | normal | `--text-body` |
| lead | Poppins | 400 | 18px | 1.445 | normal | `--text-lead` |
| card heading | Poppins | 400 | 24px | 1.3334 | normal | `--text-card` |
| section | Kanit | 400 | 40px | 1.25 | -0.03em | `--text-section` |
| hero | Kanit | 400 | 60px | 1.2 | normal | `--text-hero` |
## Tokens — Spacing & Shapes
**密度：** 留白充足；导航紧凑，区块之间刻意保持宽松间隔。
### Spacing Scale
| 名称 | 值 | Token |
|---|---|---|
| 4 | 4px | `--space-1` |
| 8 | 8px | `--space-2` |
| 12 | 12px | `--space-3` |
| 16 | 16px | `--space-4` |
| 24 | 24px | `--space-5` |
| 30 | 30px | `--space-6` |
| 40 | 40px | `--space-7` |
| 60 | 60px | `--space-8` |
| 80 | 80px | `--space-9` |
| 120 | 120px | `--space-10` |
### Border Radius
| 元素 | 值 |
|---|---|
| 导航 / 按钮 / 输入框 | 0px |
| 产品卡片 / 服务面板 | 0px |
| 图片框 / 表单状态面板 | 0px |
### Layout
- **页面最大宽度：** 1200px；桌面/平板视口边距为 24px，手机为 20px。
- **区块内边距：** 桌面 120px、平板 80px、手机 60px，作用于上下两侧。
- **网格间距：** 产品/新闻为 30px；主要双栏分区和桌面服务区为 60px。
- **控件高度：** 按钮和输入框至少 62px；手机导航报价控件至少 48px。
- **Hero 最小高度：** 桌面 640px、平板 544px；手机由内容决定。
- **强调线：** 84 × 4px，鼠尾草绿，与相邻文案间隔 30px。
## Components
### Utility Strip
全宽柔和灰色带；使用 12px Poppins。左侧放置简短服务说明，右侧放置清晰标记的演示提示。手机端隐藏次要项。不得加入虚构的响应时效或地域声明。
### Contact Masthead
白色，最小高度 112px，置于页面网格内。左侧为原创文字 Logo，右侧最多三项小型联系信息。标签采用 12px 大写字距，内容值使用 14px 墨色。平板移除最后一项，手机移除全部信息；手机 Masthead 高 80px。类名：`.masthead`；联系列表：使用 `dl/dt/dd` 的 `.contact-facts`。
### Slate Navigation with Quote Action
64px 粘性石板色带，位于 header 之后而不嵌套于其中，使粘性效果可跨整个页面生效。导航链接为白色、大写 14px/500；悬停/当前项使用 `#354454` 背景，并显示 3px 薄荷绿下划线。右边缘放置薄荷绿报价 CTA，使用深色操作文字。桌面链接：Overview、Services、Products、News、Contact。低于 64rem 时，使用真实按钮 `.nav-toggle` 控制 `.nav-links`；`aria-expanded` 与 `.nav-inner[data-open]` 必须一致。Escape 关闭菜单并把焦点返回切换按钮；选择锚点后关闭菜单。无子菜单的链接不得使用伪下拉箭头。
### Product-led Split Hero
使用 `.hero > .container.hero-grid`，DOM 顺序中 `.hero-copy` 在前、`.hero-media` 在后。桌面端两列 1:1，间隔 60px；CSS Grid 将图片置左、文案置右。文案列包含标题、鼠尾草绿强调线、18px 导语和两个 CTA。图片为 5:4、按 contain 方式完整显示的原创产品插图，图稿内部不得含文字。手机端 DOM 与视觉顺序均保持文案在前、插图在后，两个操作均变为全宽。主报价操作链接到 `#rfq`；次级服务操作链接到 `#services`，并使用白色次级样式。不使用自动轮播。
### Filled Action and Secondary Buttons
薄荷绿报价操作使用 `.button.button-primary`，鼠尾草绿服务探索使用 `.button.button-service`，白色替代操作使用 `.button.button-secondary`。全部方正，14px/500 大写，字距 0.12em；桌面端垂直内边距 22px、水平内边距 36px，在 `≤63.99rem` 时水平内边距改为 24px、垂直仍为 22px。悬停时填充改为操作墨色、文字改为白色；键盘焦点始终可见；激活状态增加内嵌线。原生禁用控件不得触发操作。提交期间添加 `aria-busy="true"`，禁用提交按钮并展示动词式进度标签。
### Overview Split
`.overview-grid` 为 1:1 双栏区块：左侧是简洁定位与流程信息，右侧 `.overview-media` 放置原创制造插图。使用 40px 区块标题、18px 导语和 16px 正文。手机端文字在图片之前堆叠。文案只描述实际材料/流程；演示文案不得声称认证、客户或产能。
### Six-service Grid
完整服务区使用 `.dark`，六个 `.service-card` 放在 `.service-grid` 中。桌面 3 列 × 2 行；平板 2 列；手机 1 列。每张卡片包含 1px 顶部线、48px 薄荷绿描边图标、24px 白色标题和浅色辅助文案。内容区包括：molding、tooling、prototyping、finishing、extrusion、assembly。文案保持简洁；不使用装饰性悬浮卡片或图片背景。卡片内部获得焦点时，顶部边框突出显示为薄荷绿。
### Product Application Card
在 `.product-grid` 中放置四个 `.product-card`：桌面 4 列，平板/手机 2 列，低于 22.49rem 时为 1 列。方形产品图片置于柔和灰背景，使用细边框和 24px 正文内边距；手机为 16px。包括产品系列名称、材料/应用提示，以及通往 `#rfq` 的文本询盘链接。不得提供价格、星级、库存声明或购物车。悬停/焦点时描边改为链接绿；内容在无悬停时也必须可见。
### Three-column News List
`.news` 使用柔和灰色带，`.news-grid` 包含三篇 `.news-card` 文章。每篇先以 2px 鼠尾草绿线开始，随后是 24px 深绿链接标题、16px 摘要和 12px 日期。手机为单列。本地演示使用原创说明性文章文案，日期和样本标签必须明确标为演示内容；不得虚构客户里程碑。
### RFQ Form
使用 `.rfq-grid`：桌面为 0.85fr/1.15fr，左侧说明文字，右侧 `.form-grid`。字段：姓名、邮箱、公司、工艺（可选选择框）、数量（可选）、项目简介。姓名/邮箱/公司/简介必填。每个标签和错误信息均须与控件关联；无效字段使用 `aria-invalid="true"` 和错误说明 ID。空提交显示内联错误并把焦点移至第一个无效项。有效演示提交禁用按钮 650ms，之后显示 `.form-status[role="status"]`，说明未发送任何请求。保留已输入内容。演示不包含真实网络提交。
### Newsletter and Four-column Footer
炭黑背景。Newsletter 使用 `.newsletter-grid`：左侧说明，右侧为带标签邮箱和薄荷绿提交按钮。本地演示校验邮箱并显示“nothing sent”状态；不得订阅任何人。下方 `.footer-grid` 有四组：简短品牌说明、服务、资源、联系信息。平板/手机为两列；极窄屏为一列。底部版权带更深。不得展示供应商电话号码、地址或邮箱。
## Do's and Don'ts
### Do
- 保留浅色 Hero、石板色导航/服务区和炭黑页脚，作为决定性的大表面。
- 展示文字使用 Kanit 400 大写，正文/界面文案使用 Poppins。
- 保持方正几何、84px 鼠尾草绿线以及宽松的 120/80/60px 节奏。
- 薄荷绿/鼠尾草绿填充配深色操作文字；浅色表面文本链接使用深绿。
- 桌面端保持产品图左、文案右；手机端将视觉优先级改为文案优先。
- 提供单一清晰报价路径和无障碍、带标签的表单反馈。
- 所有语言版本使用相同 token 值和响应式规则。
### Don't
- 不要替换成通用的 12px 圆角卡片系统或渐变 SaaS Hero。
- 不要让每种强调都用薄荷绿：鼠尾草绿是服务/区块强调色；深绿是浅色表面的链接色。
- 不要加入购物车、虚构评价、价格或认证 Logo。
- 不要把产品内容隐藏在悬停、自动播放滑块或滚动触发的显示效果后。
- 不要复制供应商 HTML、CSS、图标字体、摄影、Logo 或推广文案。
- 不要保留伪 `href="#"` 操作，也不要在本地演示中报告真实提交成功。
## Surfaces
| 层级 | 名称 | 值 | 用途 |
|---|---|---|---|
| 0 | 白色画布 | `#ffffff` | 主阅读表面 |
| 1 | 柔和灰 | `#f4f5f4` | 产品图片单元、工具和新闻 |
| 2 | 浅产品底色 | `#e8ece9` | Hero 分组 |
| 3 | 石板色 | `#26313d` | 导航和服务 |
| 4 | 炭黑 | `#2a2d31` | Newsletter/页脚 |
| 5 | 页脚底色 | `#22262a` | 收尾带 |
## Elevation
- **卡片：** 无；通过 1px 边框或顶部线分隔。
- **按钮：** 无悬浮阴影；激活状态使用内嵌线。
- **粘性导航：** 唯一的结构性阴影，`0 8px 22px rgb(33 33 33 / 8%)`。
- **焦点：** 3px 外部轮廓、4px 偏移；深色表面使用薄荷绿，浅色表面使用焦点绿。
## Imagery
使用原创或已获批准的产品/制造图片，不使用参考站截图。提供的本地资源 `assets/polymer-components.svg` 是为演示创作的原创示意插图：浅色底上的鼠尾草绿/薄荷绿模制部件。它不是经认证的工程图，也不是真实产品照片。它可在演示 Hero、Overview 和产品单元中复用，但每处提供不同的无障碍标签；客户网站请使用实际获批的产品照片。
Hero/Overview 图片框为 5:4 且使用 `object-fit: contain`；产品图片框为 1:1。保持完整物体轮廓可见，不把文字合成进图片。功能图标为原创内联 SVG：导航为 24px，服务为 48px，描边约 2px。装饰 SVG 使用 `aria-hidden="true"`；有意义的图片使用具体 alt 文本。
## Layout
| 顺序 | 区域 / 锚点 | 桌面构图 | 手机构图 |
|---|---|---|---|
| 1 | 工具条 / masthead / nav | 三条水平带；仅导航粘性 | 紧凑工具条和品牌；可展开导航 |
| 2 | Hero `#home` | 插图左、文案右，1:1 | 文案后接插图；全宽操作 |
| 3 | Overview `#overview` | 文案左、插图右，1:1 | 堆叠，文案优先 |
| 4 | Services `#services` | 六项服务，3 × 2 | 六张单列卡片 |
| 5 | Products `#products` | 四张方形图片卡片 | 两列；极窄屏一列 |
| 6 | News `#news` | 三条编辑摘要 | 一列 |
| 7 | RFQ `#rfq` | 介绍 + 双列表单 | 介绍 + 单列表单 |
| 8 | Newsletter / footer | Newsletter 分栏，四列页脚 | Newsletter 堆叠，两列页脚 |
响应式规则：默认高于 63.99rem；平板为 `max-width: 63.99rem`；手机为 `max-width: 47.99rem`；额外窄屏堆叠为 `max-width: 22.49rem`。CSS 具有最终解释权。1440px 时内容容器为 1200px；390px 时最多为 350px，若浏览器使用占宽的传统滚动条，则扣除滚动条宽度。边距从可用内容视口计算。不得出现水平视口溢出。区块间距和标题尺寸必须随同根 token 改变，不得使用彼此独立的硬编码覆盖。在减少动态效果模式下，关闭平滑滚动和动画，但不得禁用控件。
## Agent Prompt Guide
**Quick Color Reference**
- 画布：`#ffffff`；Hero：`#e8ece9`；交替浅色：`#f4f5f4`。
- 标题：`#212121`；正文：`#686868`；浅色表面链接：`#206844`。
- 报价填充：`#45cd8f`；服务填充/规则：`#6da48b`；两者均使用 `#142c23` 文字。
- 导航/服务：`#26313d`；导航悬停/当前项：`#354454`，带薄荷绿下划线；深色分隔线：`#516371`；页脚：`#2a2d31`；深色表面文字：白色或 `#d6dce0`。
- 演示成功状态：`#155c42`。
**Example Component Prompts**
1. **Hero：** 根据本文构建 `.hero-grid` 结构，DOM 中 `.hero-copy` 位于 `.hero-media` 前。桌面端使用 CSS Grid 将提供的原创插图置左、60px/72px Kanit 400 大写标题置右。加入 84×4px 鼠尾草绿线、18px 导语、薄荷绿报价操作和白色次级服务操作。保持浅色 `#e8ece9` 表面。手机端保持文案后接图片，标题使用 36px。
2. **Services：** 在石板色背景上渲染六个朴素服务项，使用 48px 薄荷绿描边图标、24px 白色 Poppins 标题和浅色辅助文案；需要第二个服务操作时使用白色次级 CTA。应用提供 CSS 中的 3→2→1 列规则，而不是无关的卡片布局。
3. **RFQ：** 仅实施上方规定的字段和演示状态序列。为每个字段添加标签，通过 `aria-describedby` 连接内联错误，保留值并公告结果。样本中不得发送请求。
4. **Blind implementation：** 只读取本文和提供的 `assets/` 目录。创建新的语义 HTML/JavaScript；逐字使用 Quick Start 样式表。不得读取既有页面实现或作者源文件。检查 1440×1000 和 390×844、菜单打开/关闭/Escape、表单无效/忙碌/成功状态以及减少动态效果。添加醒目的虚构演示标签。
## Similar Brands
- **BASF：** 用于按行业和材料组组织工业产品的内容组织参考，不是颜色或排版参考。[官方产品目录](https://www.basf.com/global/en/products)。
- **Plastic Goods：** 薄荷绿/鼠尾草绿调色、方正工业界面和几何展示字体的视觉参考。[参考预览](https://livedemo00.template-help.com/wt_62319/)。本实现提供自己的代码、插图、文案和响应式行为。
## Quick Start
### CSS Custom Properties
以下为完整样式表，可直接使用。组件类名均属于本实现，不依赖原站 CSS。默认情况下，样式表开头的 `@import` 会从 Google Fonts 加载 Kanit（400、500）和 Poppins（400、500、600）。正式项目使用前，须按该项目的 CSP 和隐私要求审核字体服务；若未批准 Google Fonts，请将该导入替换为项目批准的自托管或其他服务商来源，并保留已规定的字体系列、字重与回退字体。Tailwind 为可选项，不是运行依赖。
```css
@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@400;500&family=Poppins:wght@400;500;600&display=swap");
:root {
color-scheme: light;
--color-canvas: #ffffff;
--color-soft: #f4f5f4;
--color-hero: #e8ece9;
--color-ink: #212121;
--color-body: #686868;
--color-mint: #45cd8f;
--color-sage: #6da48b;
--color-action-ink: #142c23;
--color-link: #206844;
--color-slate: #26313d;
--color-nav-active: #354454;
--color-divider-on-dark: #516371;
--color-footer: #2a2d31;
--color-footer-bottom: #22262a;
--color-on-dark: #ffffff;
--color-muted-on-dark: #d6dce0;
--color-border: #d3d9d6;
--color-control-border: #7b827e;
--color-focus: #155c42;
--color-error: #a82424;
--color-error-bg: #fff1f0;
--color-error-on-dark: #ffb4ab;
--color-success: #155c42;
--font-heading: "Kanit", "Arial Narrow", "PingFang SC", "Microsoft YaHei", sans-serif;
--font-body: "Poppins", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
--text-caption: 0.75rem;
--text-label: 0.875rem;
--text-body: 1rem;
--text-lead: 1.125rem;
--text-card: 1.5rem;
--text-section: 2.5rem;
--text-hero: 3.75rem;
--leading-body: 1.625;
--leading-lead: 1.445;
--leading-card: 1.3334;
--leading-section: 1.25;
--leading-hero: 1.2;
--tracking-label: 0.12em;
--tracking-section: -0.03em;
--weight-normal: 400;
--weight-ui: 500;
--weight-strong: 600;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 1.875rem;
--space-7: 2.5rem;
--space-8: 3.75rem;
--space-9: 5rem;
--space-10: 7.5rem;
--layout-max: 75rem;
--layout-gutter: 1.5rem;
--section-space: 7.5rem;
--hero-min-height: 40rem;
--control-height: 3.875rem;
--radius-control: 0px;
--radius-card: 0px;
--border-thin: 1px;
--focus-width: 3px;
--shadow-header: 0 8px 22px rgb(33 33 33 / 8%);
--motion-fast: 160ms;
--motion-normal: 240ms;
--ease-ui: cubic-bezier(0.2, 0.6, 0.3, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { margin: 0; font: var(--weight-normal) var(--text-body)/var(--leading-body) var(--font-body); color: var(--color-body); background: var(--color-canvas); }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
a { color: var(--color-link); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: 4px; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--font-heading); font-weight: var(--weight-normal); color: var(--color-ink); text-transform: uppercase; }
h1 { font-size: var(--text-hero); line-height: var(--leading-hero); }
h2 { font-size: var(--text-section); line-height: var(--leading-section); letter-spacing: var(--tracking-section); margin-bottom: var(--space-5); }
h3 { font-size: var(--text-card); line-height: var(--leading-card); font-weight: var(--weight-normal); color: var(--color-ink); }
p { margin-bottom: var(--space-5); }
.container { width: min(calc(100% - 2 * var(--layout-gutter)), var(--layout-max)); margin-inline: auto; }
.section { padding-block: var(--section-space); }
.section-heading { max-width: 48rem; margin: 0 auto var(--space-8); text-align: center; }
.section-heading p { margin-bottom: 0; }
.eyebrow { font-size: var(--text-caption); letter-spacing: var(--tracking-label); font-weight: var(--weight-ui); text-transform: uppercase; }
.lead { font-size: var(--text-lead); line-height: var(--leading-lead); color: var(--color-ink); }
.accent-rule { width: 5.25rem; height: 4px; margin-block: var(--space-6); background: var(--color-sage); }
.skip-link { position: fixed; left: 1rem; top: -10rem; z-index: 100; padding: 1rem; background: white; color: var(--color-ink); }
.skip-link:focus { top: 1rem; }
.demo-label { font-size: var(--text-caption); letter-spacing: 0.03em; }
.utility { background: var(--color-soft); font-size: var(--text-caption); padding-block: var(--space-2); }
.utility .container { display: flex; justify-content: space-between; gap: var(--space-5); }
.masthead { background: var(--color-canvas); }
.masthead .container { min-height: 7rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.brand { color: var(--color-ink); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-3); font-size: 1.25rem; font-weight: var(--weight-strong); line-height: 1.2; }
.brand-mark { width: 2.5rem; height: 2.5rem; color: var(--color-link); }
.contact-facts { display: flex; gap: var(--space-7); margin: 0; }
.contact-facts div { display: grid; gap: var(--space-1); }
.contact-facts dt { font-size: var(--text-caption); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.contact-facts dd { margin: 0; color: var(--color-ink); font-size: var(--text-label); }
.site-nav { position: sticky; top: 0; z-index: 20; background: var(--color-slate); box-shadow: var(--shadow-header); }
.nav-inner { min-height: 4rem; display: flex; align-items: stretch; justify-content: space-between; }
.nav-links { display: flex; align-items: stretch; padding: 0; margin: 0; list-style: none; }
.nav-links a { display: flex; align-items: center; min-height: 4rem; padding: var(--space-4) var(--space-5); color: var(--color-on-dark); text-decoration: none; text-transform: uppercase; font-size: var(--text-label); font-weight: var(--weight-ui); letter-spacing: 0.08em; transition: background var(--motion-fast) var(--ease-ui); }
.nav-links a:hover, .nav-links a[aria-current="page"] { background: var(--color-nav-active); text-decoration: underline; text-decoration-color: var(--color-mint); text-decoration-thickness: 3px; text-underline-offset: 0.4em; }
.site-nav :focus-visible, .dark :focus-visible, .site-footer :focus-visible { outline-color: var(--color-mint); }
.nav-quote { display: inline-flex; align-items: center; justify-content: center; min-height: 4rem; padding: var(--space-4) var(--space-5); background: var(--color-mint); color: var(--color-action-ink); font-size: var(--text-label); font-weight: var(--weight-ui); text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; }
.nav-toggle { display: none; }
.hero { background: var(--color-hero); }
.hero-grid { min-height: var(--hero-min-height); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-8); padding-block: var(--space-8); }
.hero-media { min-width: 0; grid-column: 1; grid-row: 1; }
.hero-media img { width: 100%; aspect-ratio: 5/4; object-fit: contain; }
.hero-copy { min-width: 0; grid-column: 2; grid-row: 1; }
.hero-copy h1 { margin-bottom: 0; max-width: 12ch; overflow-wrap: normal; }
.hero-copy .lead { max-width: 34rem; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-7); }
.button { display: inline-flex; justify-content: center; align-items: center; gap: var(--space-2); min-height: var(--control-height); border: var(--border-thin) solid transparent; padding: 1.375rem 2.25rem; border-radius: var(--radius-control); font-size: var(--text-label); line-height: 1.2; font-weight: var(--weight-ui); letter-spacing: var(--tracking-label); text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background var(--motion-normal) var(--ease-ui), color var(--motion-normal) var(--ease-ui), border-color var(--motion-normal) var(--ease-ui); }
.button-primary { background: var(--color-mint); color: var(--color-action-ink); }
.button-service { background: var(--color-sage); color: var(--color-action-ink); }
.button-secondary { background: var(--color-canvas); color: var(--color-ink); border-color: var(--color-control-border); }
.button:hover, .nav-quote:hover { background: var(--color-action-ink); color: var(--color-on-dark); border-color: var(--color-action-ink); }
.button:active { box-shadow: inset 0 0 0 2px currentColor; }
.button:disabled, .button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
.button[aria-busy="true"] { cursor: progress; }
.overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.overview-media { background: var(--color-soft); padding: var(--space-7); }
.overview-media img { width: 100%; aspect-ratio: 5/4; object-fit: contain; }
.dark { background: var(--color-slate); color: var(--color-muted-on-dark); }
.dark h2, .dark h3 { color: var(--color-on-dark); }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); column-gap: var(--space-8); row-gap: var(--space-8); }
.service-card { padding-top: var(--space-5); border-top: 1px solid var(--color-divider-on-dark); border-radius: var(--radius-card); }
.service-icon { color: var(--color-mint); width: 3rem; height: 3rem; margin-bottom: var(--space-5); }
.service-card h3 { margin-bottom: var(--space-4); }
.service-card p { margin-bottom: 0; }
.service-card a { color: var(--color-on-dark); text-decoration-color: var(--color-mint); }
.service-card:focus-within { border-top-color: var(--color-mint); }
.product-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--space-6); }
.product-card { border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-canvas); overflow: hidden; }
.product-card img { width: 100%; aspect-ratio: 1/1; object-fit: contain; background: var(--color-soft); padding: var(--space-5); }
.product-card-body { padding: var(--space-5); }
.product-card h3 { font-size: var(--text-lead); line-height: 1.45; margin-bottom: var(--space-2); }
.product-card p { font-size: var(--text-label); margin-bottom: var(--space-4); }
.product-card a { font-weight: var(--weight-ui); }
.product-card:hover, .product-card:focus-within { border-color: var(--color-link); }
.news { background: var(--color-soft); }
.news-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-6); }
.news-card { padding-top: var(--space-5); border-top: 2px solid var(--color-sage); }
.news-card h3 { margin-bottom: var(--space-4); }
.news-card h3 a { text-decoration: none; }
.news-card time { display: block; font-size: var(--text-caption); margin-top: var(--space-5); color: var(--color-body); }
.news-card p { margin: 0; }
.rfq-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-8); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.field { display: grid; gap: var(--space-2); align-content: start; }
.field-wide { grid-column: 1/-1; }
.field label { color: var(--color-ink); font-size: var(--text-label); font-weight: var(--weight-ui); }
.field input, .field select, .field textarea { width: 100%; min-width: 0; min-height: var(--control-height); padding: var(--space-4); background: var(--color-canvas); color: var(--color-ink); border: var(--border-thin) solid var(--color-control-border); border-radius: var(--radius-control); }
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--color-focus); }
.field [aria-invalid="true"] { border-color: var(--color-error); background: var(--color-error-bg); }
.field-error { color: var(--color-error); font-size: var(--text-label); margin: 0; }
.form-status { padding: var(--space-4); border-left: 4px solid var(--color-success); background: var(--color-soft); color: var(--color-success); margin-top: var(--space-5); }
.form-note { font-size: var(--text-label); margin-block: var(--space-5) 0; }
.site-footer { background: var(--color-footer); color: var(--color-muted-on-dark); }
.newsletter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: end; padding-block: var(--space-8); border-bottom: 1px solid var(--color-divider-on-dark); }
.site-footer h2, .site-footer h3, .site-footer .brand { color: var(--color-on-dark); }
.site-footer h2 { font-size: var(--text-section); }
.newsletter-form { display: flex; align-items: end; gap: var(--space-4); flex-wrap: wrap; }
.newsletter-form .field { flex: 1 1 12rem; }
.newsletter-form .field label { color: var(--color-on-dark); }
.newsletter-form .field-error { color: var(--color-error-on-dark); }
.newsletter-form .form-status { flex-basis: 100%; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: var(--space-6); padding-block: var(--space-8); }
.footer-grid h3 { font-size: var(--text-label); font-weight: var(--weight-ui); letter-spacing: 0.08em; text-transform: uppercase; }
.footer-grid ul { padding: 0; list-style: none; margin: 0; }
.footer-grid li + li { margin-top: var(--space-3); }
.footer-grid a { color: var(--color-muted-on-dark); }
.footer-bottom { background: var(--color-footer-bottom); padding-block: var(--space-5); font-size: var(--text-caption); }
.footer-bottom p { margin: 0; }
@media (max-width: 63.99rem) {
:root { --text-hero: 3rem; --text-section: 2.125rem; --section-space: 5rem; --hero-min-height: 34rem; }
.contact-facts { gap: var(--space-5); }
.contact-facts div:last-child { display: none; }
.nav-inner { flex-wrap: wrap; align-items: center; }
.nav-toggle { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 4rem; padding: var(--space-4); border: 0; background: transparent; color: var(--color-on-dark); cursor: pointer; font-size: var(--text-label); }
.nav-links { display: none; width: 100%; flex-direction: column; order: 3; padding-bottom: var(--space-4); }
.nav-inner[data-open="true"] .nav-links { display: flex; }
.nav-links a { min-height: 3rem; }
.nav-quote { margin-left: auto; }
.hero-grid { gap: var(--space-6); }
.button { padding-inline: var(--space-5); }
.service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-7); }
.product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.overview-grid, .rfq-grid, .newsletter-grid { gap: var(--space-7); }
.news-grid { gap: var(--space-5); }
.footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 47.99rem) {
:root { --text-hero: 2.25rem; --text-section: 1.875rem; --text-card: 1.25rem; --layout-gutter: 1.25rem; --section-space: 3.75rem; --hero-min-height: auto; }
html { scroll-padding-top: 4.5rem; }
.utility .container > :last-child { display: none; }
.masthead .container { min-height: 5rem; }
.contact-facts { display: none; }
.brand { font-size: 1.125rem; }
.brand-mark { width: 2.125rem; height: 2.125rem; }
.nav-inner { width: 100%; padding-inline: var(--layout-gutter); }
.nav-quote { min-height: 3rem; font-size: var(--text-caption); padding: var(--space-3); }
.hero-grid { grid-template-columns: 1fr; gap: var(--space-7); padding-block: var(--space-7); }
.hero-copy, .hero-media { grid-column: auto; grid-row: auto; }
.hero-copy h1 { max-width: 15ch; }
.hero-media { max-width: 30rem; margin-inline: auto; width: 100%; }
.actions { gap: var(--space-3); margin-top: var(--space-6); }
.actions .button { width: 100%; }
.overview-grid, .rfq-grid, .newsletter-grid, .news-grid { grid-template-columns: 1fr; }
.section-heading { margin-bottom: var(--space-7); }
.service-grid { grid-template-columns: 1fr; gap: var(--space-7); }
.product-grid { gap: var(--space-4); }
.product-card-body { padding: var(--space-4); }
.product-card h3 { font-size: var(--text-body); }
.product-card p { font-size: var(--text-caption); }
.form-grid { grid-template-columns: 1fr; }
.newsletter-form { flex-direction: column; align-items: stretch; }
.newsletter-form .field { flex-basis: auto; }
.newsletter-form .button { width: 100%; }
.footer-grid { gap: var(--space-7); }
}
@media (max-width: 22.49rem) {
.product-grid, .footer-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
}
```
### Tailwind v4
可选的编译集成：保留上方完整样式表，将下列别名加入 Tailwind v4 入口文件。别名引用同一套 token，不另设配色。此代码块需要 Tailwind 编译，不能将编译器导入语句直接放入普通浏览器样式表。`inline` 映射遵循[官方主题变量说明](https://tailwindcss.com/docs/theme#referencing-other-variables)。
```css
@import "tailwindcss";
/* Load the complete stylesheet above after Tailwind's reset. */
@theme inline {
--color-action: var(--color-mint);
--color-action-foreground: var(--color-action-ink);
--color-copy: var(--color-body);
--color-panel: var(--color-soft);
--color-navigation: var(--color-slate);
--font-display: var(--font-heading);
--font-copy: var(--font-body);
--radius-panel: var(--radius-card);
--spacing-section: var(--section-space);
}
```
