# Strut

> Strut — Style Reference

## Prompt Content

```
# Strut — Style Reference
> editorial broadsheet trên nền ấm — display type oversized dạng serif-adjacent nằm trên một vùng giấy kem, chỉ được đánh dấu bằng một vệt highlighter màu hổ phách duy nhất và các đường kẻ hairline.

**Theme:** light

Strut xử lý giao diện của nó như một tờ giấy ấm thay vì màn hình phần mềm: một canvas kem liên tục mang type editorial cỡ lớn, các flat card viền hairline, và một điểm nhấn hổ phách duy nhất tạo hiệu ứng như nét highlighter. GT Pressura làm chủ giọng nói — các dạng hình học, hơi utilitarian ở kích thước 100–136px biến mọi headline thành masthead của một tờ broadsheet, trong khi Inter lặng lẽ xử lý body và UI ở 14–16px. Các component được thiết kế có chủ đích không trọng lượng: border 1px làm nhiệm vụ của shadow, góc 28px làm mềm mà không bo tròn thành pill, và vertical rhythm mở rộng lên 80–120px giữa các section để trang đọc như một spread in ấn. Màu sắc được phân bổ tiết kiệm — màu hổ phách xuất hiện dưới dạng các micro-touch trang trí (active icon strokes, brand mark, tag dots) trong khi text và cấu trúc giữ nguyên tông trung tính ấm từ mực #2e2d2b đến giấy #ead7b8.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Paper Cream | `#ead7b8` | `--color-paper-cream` | Canvas trang, nền ấm liên tục phía sau mọi section — tờ giấy mà toàn bộ sản phẩm nằm trên đó |
| Sand Border | `#e5dfd5` | `--color-sand-border` | Hairline borders, bề mặt card mềm nổi nhẹ trên canvas kem, divider mờ |
| Ink Black | `#2e2d2b` | `--color-ink-black` | Text chính, masthead headlines, và mực gần đen tạo cho type editorial vẻ uy quyền in ấn |
| Charcoal | `#333333` | `--color-charcoal` | Body copy, secondary text, và bất kỳ UI text nào cần mềm hơn một chút so với pure ink |
| Stone | `#73706b` | `--color-stone` | Muted helper text, inactive icons, và màu xám mềm lùi về sau nội dung chính |
| Slate Border | `#676460` | `--color-slate-border` | Dark borders và separator cho elevated surfaces và inverted UI. Không dùng làm primary CTA color |
| Deep Stone | `#5c5955` | `--color-deep-stone` | Trạng thái pressed/hover cho borders và link underlines — tối hơn Slate Border nửa bậc |
| Amber Honey | `#ffb546` | `--color-amber-honey` | Decorative brand accent — brand mark, active workspace icon stroke, highlight tag dots. Dùng tiết kiệm: không bao giờ làm nền button, không mang body text |

## Tokens — Typography

### GT Pressura Standard — Giọng display và headline — masthead, section titles, oversized declarations. Các dạng hình học, hơi industrial ở kích thước 104–136px là signature của thương hiệu, thay thế bold sans headline thông thường bằng thứ gì đó đọc giống editorial typography được sắp chữ bằng tay. · `--font-gt-pressura-standard`
- **Thay thế:** Space Grotesk hoặc Söhne Breit (cho cảm giác geometric editorial); hoặc IBM Plex Sans ở weight cao để thay thế.
- **Weights:** 400, 500
- **Kích thước:** 12, 14, 48, 68, 104, 136
- **Line height:** 0.92–1.67 (tight hơn ở display, 1.43–1.67 ở kích thước nhỏ)
- **Letter spacing:** 0.0710em ở display; 0.2500em ở micro/uppercase labels
- **Vai trò:** Giọng display và headline — masthead, section titles, oversized declarations. Các dạng hình học, hơi industrial ở kích thước 104–136px là signature của thương hiệu, thay thế bold sans headline thông thường bằng thứ gì đó đọc giống editorial typography được sắp chữ bằng tay.

### Inter — Body, UI, navigation, badges, và supporting headlines. Workhorse yên tĩnh, độ dễ đọc cao, không cản trở GT Pressura; tracking 0.214em trên uppercase labels 10–14px là signature thứ hai — các editorial micro-labels nhỏ đọc như marginalia được sắp chữ. · `--font-inter`
- **Thay thế:** Inter (native) — không cần thay thế.
- **Weights:** 400, 600
- **Kích thước:** 10, 14, 16, 20, 32, 48
- **Line height:** 1.17–1.60
- **Letter spacing:** 0.1000em ở subheadings; 0.2140em ở uppercase body labels
- **Vai trò:** Body, UI, navigation, badges, và supporting headlines. Workhorse yên tĩnh, độ dễ đọc cao, không cản trở GT Pressura; tracking 0.214em trên uppercase labels 10–14px là signature thứ hai — các editorial micro-labels nhỏ đọc như marginalia được sắp chữ.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| micro-label | 10px | 1.6 | 2.5px | `--text-micro-label` |
| caption | 12px | 1.43 | — | `--text-caption` |
| body-sm | 14px | 1.43 | 3px | `--text-body-sm` |
| body | 16px | 1.5 | — | `--text-body` |
| subheading | 20px | 1.4 | 2px | `--text-subheading` |
| heading-sm | 32px | 1.25 | — | `--text-heading-sm` |
| heading | 48px | 1.17 | — | `--text-heading` |
| heading-lg | 68px | 1 | — | `--text-heading-lg` |
| display | 104px | 0.92 | 7.4px | `--text-display` |
| display-xl | 136px | 0.92 | 9.7px | `--text-display-xl` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 24 | 24px | `--spacing-24` |
| 40 | 40px | `--spacing-40` |
| 80 | 80px | `--spacing-80` |
| 96 | 96px | `--spacing-96` |
| 108 | 108px | `--spacing-108` |
| 120 | 120px | `--spacing-120` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 9999px |
| cards | 28px |
| inputs | 12px |
| buttons | 8px |
| appScreenshots | 24px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| subtle | `rgba(0, 0, 0, 0.5) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0...` | `--shadow-subtle` |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 80-120px
- **Card padding:** 24-40px
- **Element gap:** 16px

## Components

### Editorial Micro-Label
**Vai trò:** Section label và small caps marginalia

10–12px Inter 400, uppercase, letter-spacing 0.25em, màu Stone (#73706b). Nằm phía trên section headings như một khoảng thở typographic — không bao giờ bold, không bao giờ tô màu. Luôn có một hairline rule đầy đủ phía trên nó.

### Masthead Display Heading
**Vai trò:** Hero và section-level declarations

GT Pressura 500 ở 68–136px, line-height 0.92, letter-spacing ~0.071em, màu Ink Black (#2e2d2b). Xuống dòng 2–3 dòng, không bao giờ ngắt sau từ đầu tiên. Không gradient, không trang trí.

### Workspace Card
**Vai trò:** Container cho các grouped document tiles, dùng trong app và trong product preview

Background Paper Cream (#ead7b8), 1px Slate Border (#676460), radius 28px, padding trong 24–40px. Không shadow. Title là GT Pressura 500 ở 14–16px, body là Inter 400 ở 12–14px màu Stone.

### Document Tile
**Vai trò:** Individual document card bên trong workspace

Background Paper Cream, 1px Sand Border (#e5dfd5), radius 24px, padding 24px. Active state thêm Amber Honey (#ffb546) left border rộng 4px và một chấm hổ phách nhỏ. Title bằng GT Pressura 500, 14px.

### App Window Frame
**Vai trò:** Container cho product screenshots trong marketing pages

Radius 24px, 1px Slate Border, không shadow, nằm trên canvas kem. Thanh chrome bên trong cao ~32px, sáng, với ba chấm nhỏ kiểu traffic-light căn trái. App UI bên trong dùng cùng bảng màu Paper Cream và Ink.

### Detail Accordion Row
**Vai trò:** Expandable feature description trong một vertical list

Row full-width, nội dung căn trái, toggle +/- căn phải. Title bằng Inter 600 ở 16–20px màu Ink Black. Hairline Sand Border phía trên mỗi row. Expanded state hiển thị body copy bằng Inter 400, 14–16px, Charcoal, với row-gap 16px giữa các đoạn. Không thay đổi background giữa collapsed và expanded.

### Sidebar Nav Item
**Vai trò:** Navigation workspace/folder trong app

Không có background fill mặc định. Active state dùng left border 1px Amber Honey (#ffb546) rộng 3px và indicator tròn 2px. Text bằng Inter 400, 14px. Hover state thêm background Paper Cream.

### Ghost Text Link
**Vai trò:** Inline link và supporting action link

Underline 1px Deep Stone (#5c5955) bên dưới text Charcoal. Không đổi màu khi hover — underline dày lên thành 2px. Không arrow, không background, không fill.

### App Icon Mark
**Vai trò:** Brand mark ở góc trên bên trái của site

Một geometric glyph nhỏ màu Amber Honey (#ffb546) — nơi duy nhất màu hổ phách xuất hiện ở kích thước này. Theo sau là wordmark 'strut' bằng GT Pressura 500 ở 18–20px, Ink Black, chữ thường, không tracking.

### Section Divider
**Vai trò:** Horizontal separator giữa các content block

1px solid Sand Border (#e5dfd5), full content width, không padding trên hoặc dưới — các section thở vào khoảng trống.

### Feature List Bullet
**Vai trò:** Small list item trong một prose block

Không có bullet glyphs. Các item được đặt trước bằng một uppercase micro-label nhỏ (10–12px Inter, 0.25em tracking, Stone) thay vì dấu chấm. Body copy bên dưới bằng Inter 400, 14–16px.

### Footer Link
**Vai trò:** Supporting links trong bottom strip

Inter 400, 12–14px, Stone (#73706b). Hover tối dần thành Charcoal. Không underline trừ khi link là inline trong một câu.

## Do's and Don'ts

### Do
- Dùng Paper Cream (#ead7b8) làm canvas trên mọi marketing page section; không bao giờ fallback về màu trắng.
- Đặt display headings bằng GT Pressura 500 ở 68–136px với line-height 0.92 và letter-spacing ~0.071em.
- Đánh dấu điểm bắt đầu section bằng uppercase micro-label 10–12px Inter với letter-spacing 0.25em màu Stone (#73706b).
- Dùng 1px Slate Border (#676460) hoặc Sand Border (#e5dfd5) cho mọi card và container edges — không bao giờ dùng drop shadows để tạo độ nổi.
- Áp dụng radius 28px cho mọi workspace và feature cards; 24px cho app screenshot frames; 8px cho small interactive surfaces.
- Mở khoảng thở dọc lên 80–120px giữa các section để duy trì nhịp điệu printed-spread.
- Dành Amber Honey (#ffb546) cho brand mark, active icon strokes, và sidebar active indicator — không bao giờ fill button hoặc bề mặt lớn với nó.

### Don't
- Không dùng filled colored CTA button — các action tồn tại dưới dạng ghost text links hoặc outlined controls với Deep Stone (#5c5955) borders.
- Không đặt body copy ở display weight hoặc size; Inter 400 ở 14–16px màu Charcoal (#333333) là body treatment duy nhất.
- Không đưa drop shadows, glows, hoặc blur effects để nâng cards — hệ thống cố tình flat.
- Không dùng pure white (#ffffff) làm page background; Paper Cream là canvas của hệ thống.
- Không dùng Amber Honey (#ffb546) cho text, button fills, hoặc large background areas — nó chỉ là accent 1–4px.
- Không thắt chặt letter-spacing trên uppercase micro-labels dưới 0.2em — tracking rộng là thứ khiến chúng đọc như editorial marginalia.
- Không căn giữa các body paragraph dài; body copy nằm flush-left trong một max-width column 640–720px.

## Surfaces

| Level | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 1 | Paper Canvas | `#ead7b8` | Page background cơ bản — mọi section kế thừa vùng kem ấm này. |
| 2 | Card Sand | `#e5dfd5` | Bên trong cards và dải sáng hơn đóng khung product screenshots, tách bề mặt khỏi canvas. |
| 3 | Ink Field | `#2e2d2b` | Bề mặt inverted tối dùng bên trong app screenshot cho sidebar — dùng tiết kiệm như một điểm đối lập. |

## Elevation

Strut cố tình tránh các drop shadows truyền thống. Token shadow duy nhất trong hệ thống — một inset line 1px rgba(0,0,0,0.5) — thực chất là một hairline border, không phải shadow. Các bề mặt tách biệt thông qua độ tương phản màu sắc và các rule 1px Slate Border, không phải độ sâu. Điều này giữ cho trang cảm thấy flat, in ấn, và giống giấy hơn là skeuomorphic hoặc iOS-glass. Khi product screenshot hoặc app preview xuất hiện, nó nằm trực tiếp trên canvas kem mà không có độ nâng.

## Imagery

Không có photography hoặc illustration. Hình ảnh duy nhất là product screenshots của chính app Strut, được hiển thị dưới dạng full app window mockups (traffic-light chrome, sidebar, document cards) được nhúng vào trang như các spread in ấn. Các screenshots sử dụng cùng bảng màu cream-and-ink bên trong, vì vậy chúng đọc như một phần của cùng hệ thống giấy thay vì UI ngoại lai được thả vào. Iconography bên trong screenshots là sự pha trộn giữa filled và outlined glyphs ở ~16–20px, chủ yếu bằng tông Stone và Slate. Không có lifestyle photography, không có abstract graphics, không có stock imagery — writing workspace CHÍNH LÀ nội dung hình ảnh.

## Layout

Các trang được giới hạn max-width ở ~1200px, căn giữa trên canvas kem ấm. Hero là split 2 cột: GT Pressura headline cỡ lớn (lấp đầy nửa trái ở 68–104px) bên cạnh full app window screenshot (nửa phải, với góc ~24px). Bên dưới hero, các long-form prose sections xuất hiện dưới dạng text blocks căn giữa rộng ~640–720px, được đóng khung trên và dưới bằng hairline Sand Border rules. Feature sections xen kẽ thành các asymmetric 2-column compositions: text bên trái (một uppercase micro-label nhỏ như 'FOCUSED WRITING' bằng 10px Inter với 0.25em tracking, tiếp theo là GT Pressura heading 48–68px, tiếp theo là body copy), và 1–2 product screenshots xếp chồng bên phải với khoảng cách gutter rộng. Detail lists sử dụng flush-left accordion pattern: uppercase label nhỏ, item title in đậm, 1px hairline rule, toggle +/- bên phải. Vertical rhythm mở rộng đáng kể giữa các section — 80–120px cream thuần túy — mang lại cho trang nhịp điệu printed-spread thay vì nhịp điệu dashboard. Navigation tối giản: một logomark nhỏ + wordmark ở góc trên bên trái, không có gì khác cạnh tranh.

## Agent Prompt Guide

**Quick Color Reference**
- text: #2e2d2b (headings) / #333333 (body) / #73706b (muted)
- background: #ead7b8 (canvas) / #e5dfd5 (card surface)
- border: #676460 (mid) / #e5dfd5 (hairline)
- accent: #ffb546 (amber — decorative only)
- primary action: không có distinct CTA color

**3–5 Example Component Prompts**
1. *Build a hero section:* Cream canvas (#ead7b8). Cột trái: 104px GT Pressura 500 headline, Ink Black (#2e2d2b), letter-spacing 7.4px, line-height 0.92. Cột phải: app window screenshot frame, radius 24px, border 1px #676460, thanh chrome trong 32px với ba chấm nhỏ. Vertical padding 120px trên và dưới.
2. *Build a feature split section:* Hai cột. Trái: uppercase micro-label 'FOCUSED WRITING' bằng 10px Inter 400, Stone (#73706b), letter-spacing 0.25em, margin dưới 16px. Sau đó heading 48px GT Pressura 500, Ink Black, line-height 1.17. Sau đó body 16px Inter 400, Charcoal (#333333), max-width 480px. Phải: product screenshots xếp chồng, mỗi cái radius 24px, gap 24px.
3. *Build a workspace card grid:* Grid 3 cột, gap 24px. Mỗi card: radius 28px, border 1px #676460, background Paper Cream, padding 32px. Title bằng GT Pressura 500 18px Ink Black, body bằng Inter 400 14px Stone.
4. *Build a detail accordion:* Một cột, full content width. Mỗi row: top border 1px #e5dfd5, vertical padding 24px, title Inter 600 18px Ink Black căn trái, icon '+' màu Stone căn phải. Expanded state: body copy bằng Inter 400 16px Charcoal, top margin 16px.
5. *Build a sidebar nav item:* 14px Inter 400, Charcoal, vertical padding 12px, horizontal padding 16px. Active state: left border 3px Amber Honey (#ffb546), text Ink Black. Không background fill.

## Editorial Typography Discipline

GT Pressura ở kích thước display là bắt buộc — nó mang giọng thương hiệu. Không thay thế bằng bold sans tiêu chuẩn (không Inter Bold ở 104px, không Helvetica Black). Sự căng thẳng hình học nhẹ trong các dạng chữ của Pressura là thứ làm cho trang đọc như editorial thay vì corporate. Inter xử lý mọi thứ không phải headline, với một ngoại lệ: các uppercase micro-labels với letter-spacing 0.214–0.25em là signature thứ hai và nên được sử dụng nhất quán làm section markers, list introductions, và supporting metadata — không bao giờ viết uppercase body copy với tracking chặt.

## The Cream-First Rule

Màu trắng không bao giờ xuất hiện làm primary background trên marketing surface. Paper Cream (#ead7b8) là canvas ở mọi nơi. Màu trắng duy nhất được phép là bên trong app screenshots và Sand Border (#e5dfd5) sáng hơn bên trong cards. Đây là điều làm cho trang cảm thấy như giấy in thay vì một sản phẩm phần mềm — vi phạm nó sẽ ngay lập tức phá vỡ hệ thống.

## Similar Brands

- **iA Writer** — Cùng identity writing-tool với oversized editorial display type và bề mặt xử lý cố tình giống giấy.
- **Read.cv** — Cùng canvas kem ấm, display type kiểu masthead cỡ lớn, và flat card viền hairline trên khoảng trắng rộng.
- **Substack** — Cùng nhịp điệu editorial broadsheet — display headlines lớn, prose blocks căn giữa, và bảng màu trung tính ấm cảm giác như đọc một magazine spread.
- **Notion** — Cùng positioning workspace/productivity với tổ chức nội dung dạng flat card, nhưng Strut áp dụng hệ thống type editorial trong khi Notion dùng neutral sans.
- **Linear** — Cùng triết lý component hairline-border, không shadow và một accent color duy nhất được kiềm chế, nhưng Strut bọc nó trong thẩm mỹ giấy ấm thay vì dark UI mát mẻ.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-paper-cream: #ead7b8;
  --color-sand-border: #e5dfd5;
  --color-ink-black: #2e2d2b;
  --color-charcoal: #333333;
  --color-stone: #73706b;
  --color-slate-border: #676460;
  --color-deep-stone: #5c5955;
  --color-amber-honey: #ffb546;

  /* Typography — Font Families */
  --font-gt-pressura-standard: 'GT Pressura Standard', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-micro-label: 10px;
  --leading-micro-label: 1.6;
  --tracking-micro-label: 2.5px;
  --text-caption: 12px;
  --leading-caption: 1.43;
  --text-body-sm: 14px;
  --leading-body-sm: 1.43;
  --tracking-body-sm: 3px;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-subheading: 20px;
  --leading-subheading: 1.4;
  --tracking-subheading: 2px;
  --text-heading-sm: 32px;
  --leading-heading-sm: 1.25;
  --text-heading: 48px;
  --leading-heading: 1.17;
  --text-heading-lg: 68px;
  --leading-heading-lg: 1;
  --text-display: 104px;
  --leading-display: 0.92;
  --tracking-display: 7.4px;
  --text-display-xl: 136px;
  --leading-display-xl: 0.92;
  --tracking-display-xl: 9.7px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-40: 40px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-108: 108px;
  --spacing-120: 120px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 80-120px;
  --card-padding: 24-40px;
  --element-gap: 16px;

  /* Border Radius */
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-3xl: 24px;
  --radius-3xl-2: 28px;

  /* Named Radii */
  --radius-tags: 9999px;
  --radius-cards: 28px;
  --radius-inputs: 12px;
  --radius-buttons: 8px;
  --radius-appscreenshots: 24px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.5) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.5) 0px 1px 0px 0px;

  /* Surfaces */
  --surface-paper-canvas: #ead7b8;
  --surface-card-sand: #e5dfd5;
  --surface-ink-field: #2e2d2b;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-paper-cream: #ead7b8;
  --color-sand-border: #e5dfd5;
  --color-ink-black: #2e2d2b;
  --color-charcoal: #333333;
  --color-stone: #73706b;
  --color-slate-border: #676460;
  --color-deep-stone: #5c5955;
  --color-amber-honey: #ffb546;

  /* Typography */
  --font-gt-pressura-standard: 'GT Pressura Standard', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-micro-label: 10px;
  --leading-micro-label: 1.6;
  --tracking-micro-label: 2.5px;
  --text-caption: 12px;
  --leading-caption: 1.43;
  --text-body-sm: 14px;
  --leading-body-sm: 1.43;
  --tracking-body-sm: 3px;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-subheading: 20px;
  --leading-subheading: 1.4;
  --tracking-subheading: 2px;
  --text-heading-sm: 32px;
  --leading-heading-sm: 1.25;
  --text-heading: 48px;
  --leading-heading: 1.17;
  --text-heading-lg: 68px;
  --leading-heading-lg: 1;
  --text-display: 104px;
  --leading-display: 0.92;
  --tracking-display: 7.4px;
  --text-display-xl: 136px;
  --leading-display-xl: 0.92;
  --tracking-display-xl: 9.7px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-40: 40px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-108: 108px;
  --spacing-120: 120px;

  /* Border Radius */
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-3xl: 24px;
  --radius-3xl-2: 28px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.5) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.5) 0px 1px 0px 0px;
}
```