Fieldwork B2B garden-supply interface preview — Fieldwork — Garden Supply Style Reference · Source preview ↗

Fieldwork — Garden Supply Style Reference

A calm B2B garden-supply system built around product families, project fit, and a complete local RFQ brief.

Fieldwork combines warm natural neutrals, deep greenhouse green, clay accents, and disciplined technical content. The system helps landscape contractors, retailers, and facility teams compare durable garden-supply families without presenting consumer purchase controls. A clear split hero, qualification strip, three product-family cards, project process, specification readiness, project-brief drawer, and local RFQ form create one continuous business journey.

https://bootstrapmade.com

Color Palette

Implementation tokens for this adaptation; use the foreground/background pairs specified in DESIGN.md.

Reference colors

Typography

Font sizes and roles follow the delivered implementation. Check the font-provider requirements in Quick Start before production use.

Type Scale

display72px · 500 · 0.98
heading44px · 500 · 1.03
heading-sm20px · 500 · 1.25
body16px · 400 · 1.6
body-sm14px · 600 · 1.5
caption12px · 850 · 1.3

Fonts

Font family

Weights: 850 · 600 · 400
Sizes: 12–16px · 3 values
Line heights: 1.3–1.6 · 3 values
Fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif

Caption / Small body / Body

Font family

Weights: 500
Sizes: 20–72px · 3 values
Line heights: 0.98–1.25 · 3 values
Fallback: Times New Roman, serif

Card heading / Section heading / Display

Spacing & Shape

Spacing

Purpose	Value	Preview
Density
Base unit
Page max-width
Desktop gutter
Tablet gutter
Mobile gutter
Hero minimum height
Primary breakpoints

Border Radius

Purpose	Value	Preview
Inputs and compact controls
Cards, panels, and overlays
Primary actions and counts

Full spacing scale

1 --space-1
2 --space-2
3 --space-3
4 --space-4
5 --space-5
6 --space-6
8 --space-8
10 --space-10
12 --space-12
16 --space-16

Guidelines

Do

Use deep green for structural surfaces and greenhouse green for primary project decisions.
Keep family name, application scope, decision criteria, and Add to project brief action together.
Disable RFQ preparation until the brief contains a named product family.
Preserve the complete local flow from shortlist through validation, confirmation, and reset.
Use Georgia for editorial statements and product-family names; keep specifications in the sans stack.
Restore focus after the mobile menu, brief drawer, and RFQ modal close.
Keep focus inside the active modal surface and make every obscured page region inert and aria-hidden until it closes.
Verify every visible normal-size text pair at a calculated contrast ratio of at least 4.5:1.

Don't

Don't add cart, checkout, payment, Buy Now, or consumer-price controls.
Don't state minimum order, inventory, certifications, warranty, or lead times without approved facts.
Don't send, store, or persist organization, email, or project values in the demonstration.
Don't use remote scripts, external fonts, external form actions, or third-party brand assets.
Don't hide focus outlines, field labels, inline errors, or local-completion feedback.
Don't introduce gradients, glass effects, or decorative motion that competes with specifications.

Design.mdMarkdown

DESIGN-reference-94e72feaac5b.md

# Fieldwork — Garden Supply Style Reference
> A calm B2B garden-supply system built around product families, project fit, and a complete local RFQ brief.

**Theme:** light

Fieldwork combines warm natural neutrals, deep greenhouse green, clay accents, and disciplined technical content. The system helps landscape contractors, retailers, and facility teams compare durable garden-supply families without presenting consumer purchase controls. A clear split hero, qualification strip, three product-family cards, project process, specification readiness, project-brief drawer, and local RFQ form create one continuous business journey.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Field Canvas | `#f3f2e9` | `--canvas` | Warm page background and quiet form areas |
| White Surface | `#ffffff` | `--surface` | Header, product-family cards, drawer, and form |
| Greenhouse | `#1f6b4f` | `--green` | Primary actions, focus relationships, and selected states |
| Forest | `#123f32` | `--green-deep` | Hero, process band, and high-contrast navigation actions |
| Clay | `#9f482a` | `--clay` | Codes and restrained warm emphasis on light surfaces |
| Soil Ink | `#17231d` | `--ink` | Main text and footer background |
| Field Gray | `#58615c` | `--muted` | Supporting copy and specification labels with normal-text contrast |
| Rule | `#d7ddd7` | `--line` | Card, field, and section dividers |
| Sage | `#dce9df` | `--sage` | Selected brief item and illustration ground |
| Sand | `#e8e1d3` | `--sand` | Count badges and secondary hover states |
| Error | `#aa2e25` | `--danger` | Invalid field feedback |
| Success | `#176449` | `--success` | Completed local RFQ status |

## Tokens — Typography

Georgia gives product families and project statements an established editorial voice. Inter and the native system sans stack keep specifications, navigation, labels, and form controls compact and legible without external font files.

### Type Scale

| Role | Family | Weight | Size | Line Height | Letter Spacing | Token |
|------|--------|--------|------|-------------|----------------|-------|
| Caption | Inter | 850 | 12px | 1.3 | 0.14em | `--text-caption` |
| Small body | Inter | 600 | 14px | 1.5 | normal | `--text-body-sm` |
| Body | Inter | 400 | 16px | 1.6 | normal | `--text-body` |
| Card heading | Georgia | 500 | 20px | 1.25 | -0.02em | `--text-heading-sm` |
| Section heading | Georgia | 500 | 44px | 1.03 | -0.05em | `--text-heading` |
| Display | Georgia | 500 | 72px | 0.98 | -0.06em | `--text-display` |

## Tokens — Spacing & Shapes

**Density:** balanced project specification

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 1 | 4px | `--space-1` |
| 2 | 8px | `--space-2` |
| 3 | 12px | `--space-3` |
| 4 | 16px | `--space-4` |
| 5 | 20px | `--space-5` |
| 6 | 24px | `--space-6` |
| 8 | 32px | `--space-8` |
| 10 | 40px | `--space-10` |
| 12 | 48px | `--space-12` |
| 16 | 64px | `--space-16` |

### Border Radius

| Element | Value | Token |
|---------|-------|-------|
| Inputs and compact controls | 8px | `--radius-sm` |
| Cards, panels, and overlays | 14px | `--radius` |
| Primary actions and counts | 999px | `--radius-pill` |

### Layout

- **Page max-width:** 1240px
- **Desktop gutter:** 32px
- **Tablet gutter:** 20px
- **Mobile gutter:** 14px
- **Hero minimum height:** 640px on wide screens
- **Primary breakpoints:** 860px and 600px

## Components

### Header and Mobile Navigation
An 80px white sticky header places the leaf-shaped Fieldwork mark at the left, direct section links in the center, and a live Project brief count at the right. Below 860px, a labeled menu disclosure replaces the center links; Escape closes it and returns focus.

### Split Project Hero
The hero joins a deep-green qualification statement with an original geometric garden-system illustration. Three compact proof points clarify applications, order planning, and documentation. One light-green action leads to the product-family comparison.

### Qualification Strip
Three equal messages identify buyer types, project inputs, and response expectations. Thin rules preserve a technical rhythm without making the page feel like a spreadsheet.

### Product-Family Cards
Three cards cover planters, growing supports, and landscape-care tools. Each contains a family code, product scope, decision criteria, and one Add to project brief action. No price, inventory, rating, or consumer checkout language appears.

### Project Process Band
A forest-green band presents three steps: define the site, shortlist the system, and prepare the RFQ. Numbered sage circles and strong top rules make the sequence clear on wide and narrow screens.

### Specification Readiness Panels
Two white panels organize project inputs and supplier-response expectations. Definition lists hold dimensional and environmental questions while a checklist keeps documents, order range, packaging, and lead-time needs visible.

### Project Brief Drawer
The right-side drawer begins with an empty state and disabled RFQ action. Adding a family reveals its scope, enables RFQ preparation, and provides a local remove action. While open, the page background is inert and hidden from assistive technology; Tab and Shift+Tab stay inside the drawer. Escape and the close control restore focus to the opener.

### RFQ Preparation Modal
The modal collects organization, work email, project type, and requirements. The background remains inert, Tab and Shift+Tab cycle within the modal, visible labels and inline errors support recovery, and the first invalid field receives focus. Success states explicitly say nothing was sent or stored; reset clears every field and status.

## Do's and Don'ts

### Do
- Use deep green for structural surfaces and greenhouse green for primary project decisions.
- Keep family name, application scope, decision criteria, and Add to project brief action together.
- Disable RFQ preparation until the brief contains a named product family.
- Preserve the complete local flow from shortlist through validation, confirmation, and reset.
- Use Georgia for editorial statements and product-family names; keep specifications in the sans stack.
- Restore focus after the mobile menu, brief drawer, and RFQ modal close.
- Keep focus inside the active modal surface and make every obscured page region inert and `aria-hidden` until it closes.
- Verify every visible normal-size text pair at a calculated contrast ratio of at least 4.5:1.

### Don't
- Don't add cart, checkout, payment, Buy Now, or consumer-price controls.
- Don't state minimum order, inventory, certifications, warranty, or lead times without approved facts.
- Don't send, store, or persist organization, email, or project values in the demonstration.
- Don't use remote scripts, external fonts, external form actions, or third-party brand assets.
- Don't hide focus outlines, field labels, inline errors, or local-completion feedback.
- Don't introduce gradients, glass effects, or decorative motion that competes with specifications.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Field Canvas | `#f3f2e9` | Page background and generous natural spacing |
| 1 | White Surface | `#ffffff` | Product families, specification panels, drawer, and form |
| 2 | Sage Ground | `#dce9df` | Illustration field and selected brief item |
| 3 | Forest Band | `#123f32` | Hero and project process |
| 4 | Soil Closure | `#17231d` | Footer and overlay relationship |

## Elevation

Product-family cards use a 1px rule at rest and may gain `0 18px 46px rgb(23 35 29 / 10%)` on hover. The project brief uses a directional shadow and the centered RFQ modal uses a deeper ambient shadow. Buttons stay flat and communicate state through color, border, and text.

## Imagery

Favor original diagrams or licensed photographs of modular planters, greenhouse frames, trellis systems, hand tools, and prepared soil surfaces. Remove brands, labels, and private-site identifiers. Use calm overcast or studio light, neutral ground, and one green structural accent. A geometric SVG system diagram is the preferred no-photography fallback because it scales cleanly and keeps specification content dominant.

## Layout

The page follows a business qualification sequence: sticky header, split project hero, three proof messages, product-family grid, three-step process band, specification-readiness panels, and compact footer. The project brief and RFQ form sit above the page as connected overlays. At 860px the hero, process, and card grid reflow; at 600px all cards, panels, fields, and actions become single-column with 44–48px minimum controls and no page-level horizontal scrolling.

## Agent Prompt Guide

**Quick Color Reference**
- Background: `#f3f2e9`; cards `#ffffff`
- Text: `#17231d`; supporting text `#58615c`
- Border: `#d7ddd7`
- Primary action: `#1f6b4f`; structural dark: `#123f32`
- Warm emphasis: `#9f482a`; selected surface: `#dce9df`

**Example Component Prompts**
1. Create a split B2B garden-supply hero with a deep-forest copy panel, a 72px Georgia project statement, one sage pill action, three proof points, and an original geometric garden-system SVG on a sage ground.
2. Create a three-card product-family grid. Each white 14px-radius card needs a clay family code, Georgia family name, application summary, decision criteria, and a full-width 48px Add to project brief button.
3. Create an accessible right-side project brief. Keep RFQ preparation disabled when empty; after selection show the family and scope, a remove action, and the enabled RFQ button. Make the background inert, cycle Tab and Shift+Tab inside, support Escape, and restore focus.
4. Create a local RFQ form with organization, work email, project type, and requirements. Keep focus within the modal, show inline errors, focus the first invalid field, display a no-send/no-storage success message, and provide reset without a form action.

## Similar Brands

- **Fermob Contract** — Outdoor product families organized around project application and professional specification.
- **Tournesol Siteworks** — Landscape products presented with disciplined technical and material information.
- **Greenhouse Megastore Commercial** — Clear horticultural family grouping and project-oriented selection paths.
- **Landscape Forms** — Editorial presentation paired with durable public-space specification detail.

## Quick Start

The standalone block contains tokens, complete page components, project-brief and RFQ states, background isolation, bidirectional focus loops, AA normal-text contrast, and responsive rules for the blank-template build.

### CSS Custom Properties

```css
:root {
  --canvas: #f3f2e9;
  --surface: #ffffff;
  --green: #1f6b4f;
  --green-deep: #123f32;
  --clay: #9f482a;
  --ink: #17231d;
  --muted: #58615c;
  --line: #d7ddd7;
  --sage: #dce9df;
  --sand: #e8e1d3;
  --danger: #aa2e25;
  --success: #176449;
  --font-display: Georgia, "Times New Roman", serif;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text-caption: 0.75rem;
  --text-body-sm: 0.875rem;
  --text-body: 1rem;
  --text-heading-sm: 1.25rem;
  --text-heading: 2.75rem;
  --text-display: 4.5rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --layout-max: 1240px;
  --gutter: 32px;
  --radius: 14px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --hero-min-height: 640px;
  --shadow-card: 0 18px 46px rgb(23 35 29 / 10%);
  --shadow-drawer: -24px 0 72px rgb(18 63 50 / 20%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: var(--font-body); font-size: var(--text-body); line-height: 1.6; }
body.is-locked { overflow: hidden; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
a { color: inherit; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 14px; color: var(--surface); background: var(--green-deep); border-radius: var(--radius-sm); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--surface); outline-offset: 2px; box-shadow: 0 0 0 5px var(--ink); }
.shell { width: min(calc(100% - (var(--gutter) * 2)), var(--layout-max)); margin-inline: auto; }
.eyebrow { margin: 0 0 var(--space-3); color: var(--green); font-size: var(--text-caption); font-weight: 850; letter-spacing: 0.14em; text-transform: uppercase; }

.site-header { position: sticky; z-index: 30; top: 0; background: rgb(255 255 255 / 96%); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.header-inner { min-height: 80px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-6); }
.brand { justify-self: start; display: inline-flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 900; letter-spacing: 0.12em; text-decoration: none; text-transform: uppercase; }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; color: var(--surface); background: var(--green); border-radius: 50% 50% 50% 10%; font-size: 0.72rem; }
.desktop-nav { display: flex; gap: var(--space-8); }
.desktop-nav a { position: relative; font-size: var(--text-body-sm); font-weight: 750; text-decoration: none; }
.desktop-nav a::after { position: absolute; right: 0; bottom: -8px; left: 0; height: 2px; content: ""; background: var(--clay); transform: scaleX(0); transition: transform 180ms ease; }
.desktop-nav a:hover::after, .desktop-nav a:focus-visible::after { transform: scaleX(1); }
.header-actions { justify-self: end; display: flex; align-items: center; gap: var(--space-3); }
.menu-trigger, .brief-trigger, .close-button, .remove-button { min-height: 44px; border: 0; background: transparent; cursor: pointer; }
.menu-trigger { display: none; padding: 8px; font-weight: 800; }
.brief-trigger { padding: 9px 16px; color: var(--surface); background: var(--green-deep); border-radius: var(--radius-pill); font-weight: 800; }
.brief-trigger span { min-width: 24px; display: inline-grid; place-items: center; margin-left: 6px; color: var(--green-deep); background: var(--sand); border-radius: var(--radius-pill); }
.mobile-nav { padding: 0 var(--gutter) var(--space-6); border-top: 1px solid var(--line); background: var(--surface); }
.mobile-nav a { display: block; padding: 15px 0; border-bottom: 1px solid var(--line); font-weight: 750; text-decoration: none; }

.hero { min-height: var(--hero-min-height); display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: stretch; padding-block: var(--space-8); }
.hero-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(36px, 6vw, 84px); color: var(--surface); background: var(--green-deep); border-radius: calc(var(--radius) * 1.4) 0 0 calc(var(--radius) * 1.4); }
.hero h1 { max-width: 10ch; margin: 0; font-family: var(--font-display); font-size: clamp(3.5rem, 6.2vw, var(--text-display)); font-weight: 500; letter-spacing: -0.06em; line-height: 0.98; }
.hero h1 em { color: #cde4bb; font-weight: inherit; }
.hero-copy > p:not(.eyebrow) { max-width: 48ch; margin: var(--space-6) 0; color: #dce9df; }
.hero-copy .eyebrow { color: #cde4bb; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 10px 20px; border: 1px solid transparent; border-radius: var(--radius-pill); font-weight: 800; text-decoration: none; cursor: pointer; }
.button-primary { color: var(--surface); background: var(--green); }
.button-primary:hover { background: var(--green-deep); }
.hero .button-primary { color: var(--green-deep); background: #cde4bb; }
.hero .button-primary:hover { background: var(--surface); }
.button-secondary { border-color: var(--ink); color: var(--ink); background: transparent; }
.button-secondary:hover { background: var(--sand); }
.button:disabled { color: var(--ink); background: var(--line); cursor: not-allowed; opacity: 1; }
.hero-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-8); }
.hero-proof div { padding-top: var(--space-3); border-top: 1px solid rgb(255 255 255 / 28%); }
.hero-proof strong, .hero-proof span { display: block; }
.hero-proof strong { font-family: var(--font-display); font-size: 1.4rem; }
.hero-proof span { color: #c8d8cf; font-size: var(--text-caption); }
.hero-media { min-height: 576px; display: grid; place-items: center; overflow: hidden; background: var(--sage); border-radius: 0 calc(var(--radius) * 1.4) calc(var(--radius) * 1.4) 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }

.trust-strip { border-block: 1px solid var(--line); background: var(--surface); }
.trust-grid { min-height: 100px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; }
.trust-grid p { margin: 0; padding: 0 var(--space-8); border-right: 1px solid var(--line); color: var(--muted); font-size: var(--text-body-sm); text-align: center; }
.trust-grid p:last-child { border-right: 0; }
.trust-grid strong { display: block; color: var(--ink); font-size: var(--text-body); }

.section { padding-block: clamp(72px, 9vw, 120px); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-8); margin-bottom: var(--space-10); }
.section-heading h2, .process-intro h2 { max-width: 12ch; margin: 0; font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, var(--text-heading)); font-weight: 500; letter-spacing: -0.05em; line-height: 1.03; }
.section-heading > p { max-width: 46ch; margin: 0; color: var(--muted); }
.family-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.family-card { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: transform 180ms ease, box-shadow 180ms ease; }
.family-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.family-art { height: 260px; overflow: hidden; background: var(--sage); }
.family-art img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); }
.family-one img { object-position: 10% 50%; }
.family-two img { object-position: 50% 50%; }
.family-three img { object-position: 90% 50%; }
.family-content { padding: var(--space-5); }
.family-code { color: var(--clay); font-size: var(--text-caption); font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; }
.family-content h3 { margin: 8px 0; font-family: var(--font-display); font-size: 1.55rem; }
.family-content p { min-height: 76px; margin: 0 0 var(--space-5); color: var(--muted); font-size: var(--text-body-sm); }
.select-button { width: 100%; }
.select-button[data-selected="true"] { color: var(--green-deep); background: var(--sage); border-color: var(--green); }

.process-section { color: var(--surface); background: var(--green-deep); }
.process-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(48px, 8vw, 110px); }
.process-intro p { color: #c8d8cf; }
.process-list { display: grid; }
.process-step { display: grid; grid-template-columns: 58px 1fr; gap: var(--space-5); padding: var(--space-6) 0; border-top: 1px solid rgb(255 255 255 / 22%); }
.process-step span { width: 44px; height: 44px; display: grid; place-items: center; color: var(--green-deep); background: #cde4bb; border-radius: 50%; font-weight: 850; }
.process-step h3, .process-step p { margin: 0; }
.process-step h3 { font-family: var(--font-display); font-size: 1.35rem; }
.process-step p { color: #c8d8cf; }

.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.spec-card { padding: clamp(24px, 4vw, 42px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.spec-card h3 { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: 1.8rem; }
.spec-card dl { margin: 0; }
.spec-card dl div { display: flex; justify-content: space-between; gap: var(--space-4); padding: 14px 0; border-top: 1px solid var(--line); }
.spec-card dt { color: var(--muted); }
.spec-card dd { margin: 0; font-weight: 750; text-align: right; }
.readiness-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.readiness-list li { display: flex; gap: var(--space-3); padding: 12px 0; border-top: 1px solid var(--line); }
.readiness-list li::before { content: "✓"; color: var(--green); font-weight: 900; }

.site-footer { padding-block: var(--space-12); color: #c8d8cf; background: var(--ink); }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(2, 1fr); gap: var(--space-8); }
.footer-grid h2 { margin: 0 0 var(--space-4); color: var(--surface); font-size: var(--text-body); }
.footer-grid a { display: block; margin: 6px 0; }
.footer-grid .brand { color: var(--surface); }
.footer-note { max-width: 50ch; font-size: var(--text-body-sm); }

.backdrop { position: fixed; z-index: 50; inset: 0; background: rgb(23 35 29 / 58%); }
[inert] { pointer-events: none; user-select: none; }
.drawer { position: fixed; z-index: 60; top: 0; right: 0; width: min(100%, 480px); height: 100dvh; display: flex; flex-direction: column; padding: var(--space-6); background: var(--surface); box-shadow: var(--shadow-drawer); }
.drawer-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-5); border-bottom: 1px solid var(--line); }
.drawer-header h2 { margin: 0; font-family: var(--font-display); font-size: 2rem; }
.close-button { width: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 1.5rem; }
.drawer-body { flex: 1; overflow: auto; padding-block: var(--space-6); }
.empty-brief { padding: var(--space-8); color: var(--muted); background: var(--canvas); border-radius: var(--radius); text-align: center; }
.brief-item { padding: var(--space-5); background: var(--sage); border-radius: var(--radius); }
.brief-item h3, .brief-item p { margin: 0; }
.brief-item p { color: var(--muted); }
.remove-button { margin-top: var(--space-4); padding: 8px 0; color: var(--green-deep); font-weight: 800; text-decoration: underline; }
.drawer-footer { padding-top: var(--space-5); border-top: 1px solid var(--line); }
.drawer-footer p { margin: 0 0 var(--space-4); color: var(--muted); font-size: var(--text-body-sm); }
.drawer-footer .button { width: 100%; }

.modal { position: fixed; z-index: 70; top: 50%; left: 50%; width: min(calc(100% - 32px), 660px); max-height: calc(100dvh - 32px); overflow: auto; padding: clamp(24px, 4vw, 40px); background: var(--surface); border-radius: var(--radius); box-shadow: 0 28px 90px rgb(23 35 29 / 28%); transform: translate(-50%, -50%); }
.modal-header { display: flex; align-items: start; justify-content: space-between; gap: var(--space-5); }
.modal-header h2 { margin: 0; font-family: var(--font-display); font-size: 2.2rem; }
.modal-header p { margin: 6px 0 0; color: var(--muted); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.field { display: grid; gap: 6px; }
.field-full { grid-column: 1 / -1; }
.field label { font-size: var(--text-body-sm); font-weight: 750; }
.field input, .field textarea, .field select { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); background: var(--surface); }
.field textarea { min-height: 112px; resize: vertical; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--danger); }
.field-error { min-height: 20px; margin: 0; color: var(--danger); font-size: var(--text-caption); }
.modal-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.form-status { grid-column: 1 / -1; min-height: 24px; margin: 0; font-weight: 750; }
.form-status.is-success { color: var(--success); }
.form-status.is-error { color: var(--danger); }
.toast { position: fixed; z-index: 80; right: 20px; bottom: 20px; max-width: 360px; padding: 14px 18px; color: var(--surface); background: var(--ink); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); }

@media (max-width: 860px) {
  :root { --gutter: 20px; --hero-min-height: 0px; }
  .desktop-nav { display: none; }
  .menu-trigger { display: inline-flex; }
  .header-inner { min-height: 70px; grid-template-columns: auto 1fr auto; }
  .brand { justify-self: center; }
  .hero, .process-layout { grid-template-columns: 1fr; }
  .hero-copy { min-height: 520px; border-radius: calc(var(--radius) * 1.4) calc(var(--radius) * 1.4) 0 0; }
  .hero-media { min-height: 500px; border-radius: 0 0 calc(var(--radius) * 1.4) calc(var(--radius) * 1.4); }
  .family-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .family-card:last-child { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  :root { --gutter: 14px; --radius: 12px; }
  .header-inner { min-height: 64px; gap: 8px; }
  .brand { font-size: 0.78rem; letter-spacing: 0.08em; }
  .brand-mark { width: 26px; height: 26px; }
  .brief-trigger { padding-inline: 12px; font-size: 0.78rem; }
  .hero { padding-block: 14px 28px; }
  .hero-copy { min-height: 480px; padding: 32px 24px; }
  .hero h1 { font-size: clamp(3.1rem, 15vw, 4.1rem); }
  .hero-proof { grid-template-columns: 1fr; }
  .hero-media { min-height: 410px; }
  .trust-grid { grid-template-columns: 1fr; padding-block: 10px; }
  .trust-grid p { padding: 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .trust-grid p:last-child { border-bottom: 0; }
  .section { padding-block: 72px; }
  .section-heading { align-items: start; flex-direction: column; margin-bottom: 30px; }
  .family-grid, .spec-grid { grid-template-columns: 1fr; }
  .family-card:last-child { grid-column: auto; }
  .family-art { height: 300px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .drawer { padding: 18px 16px; }
  .form-grid { grid-template-columns: 1fr; }
  .field-full, .modal-actions, .form-status { grid-column: auto; }
  .modal-actions { flex-direction: column; }
  .modal-actions .button { width: 100%; }
  .toast { right: 12px; bottom: 12px; left: 12px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}
```

The Tailwind block exposes the same visual foundations while keeping local application state in JavaScript.

### Tailwind v4

```css
@theme {
  --color-canvas: #f3f2e9;
  --color-surface: #ffffff;
  --color-green: #1f6b4f;
  --color-green-deep: #123f32;
  --color-clay: #9f482a;
  --color-ink: #17231d;
  --color-muted: #58615c;
  --color-line: #d7ddd7;
  --color-sage: #dce9df;
  --color-sand: #e8e1d3;
  --color-danger: #aa2e25;
  --color-success: #176449;
  --font-display: Georgia, "Times New Roman", serif;
  --font-body: Inter, ui-sans-serif, system-ui, sans-serif;
  --text-caption: 0.75rem;
  --text-body-sm: 0.875rem;
  --text-body: 1rem;
  --text-heading-sm: 1.25rem;
  --text-heading: 2.75rem;
  --text-display: 4.5rem;
  --spacing-gutter: 32px;
  --radius-card: 14px;
  --radius-control: 8px;
  --radius-pill: 999px;
  --shadow-card: 0 18px 46px rgb(23 35 29 / 10%);
}
```