@tryvitris/website-harness 0.0.0-stage → 0.1.0-beta.6

package/blocks/gallery/gallery-mosaic-split/styles.css

@@ -0,0 +1,15 @@
+.c-gallery-mosaic-split__grid{display:grid;gap:var(--space-6)}
+.c-gallery-mosaic-split__copy .section__head{margin-bottom:var(--space-5)}
+.c-gallery-mosaic-split__copy .btn-group:empty{display:none}
+.c-gallery-mosaic-split__mosaic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(9rem,auto);grid-auto-flow:dense;gap:var(--space-3)}
+.c-gallery-mosaic-split__mosaic > .is-tall{grid-row:span 2}
+.c-gallery-mosaic-split__mosaic > .is-wide{grid-column:span 2}
+.c-gallery-mosaic-split__mosaic .frame{box-shadow:none;min-height:0}
+.c-gallery-mosaic-split__mosaic .frame img{width:100%;height:100%;object-fit:cover}
+.c-gallery-mosaic-split__mosaic figure{margin:0;grid-column:span 2}
+.c-gallery-mosaic-split__mosaic .card__body{padding:var(--space-4) var(--space-5);align-content:center}
+.c-gallery-mosaic-split__mosaic .quote--card{font-size:var(--step-0);line-height:1.5}
+.c-gallery-mosaic-split__mosaic .card__footer{padding:var(--space-2) var(--space-5) var(--space-3);border-top:0}
+.c-gallery-mosaic-split__mosaic .byline strong,.c-gallery-mosaic-split__mosaic .byline span{font-size:var(--step-0)}
+@media(min-width:720px){.c-gallery-mosaic-split__mosaic{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(10rem,auto)}}
+@media(min-width:900px){.c-gallery-mosaic-split__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--space-8);align-items:start}.c-gallery-mosaic-split--reverse .c-gallery-mosaic-split__copy{order:2}}

package/blocks/gallery/gallery-mosaic-split/template.html

@@ -0,0 +1 @@
+<section class="c-gallery-mosaic-split section"><div class="wrap c-gallery-mosaic-split__grid"><div class="c-gallery-mosaic-split__copy sticky-col"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="btn-group"><slot name="actions"></slot></div></div><div class="c-gallery-mosaic-split__mosaic"><slot name="tiles"></slot></div></div></section>

package/blocks/hero/hero-asymmetric/README.md

@@ -0,0 +1,34 @@
+# hero-asymmetric
+
+Diagonal balance: heavy type corner vs dense photo.
+
+- **Category:** hero
+- **Media:** strong subject photo
+- **Registers:** beauty, professional, trade
+- **Variants:** reverse
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Short line above headline |
+| `(default)` | `<h1>` (short, 3–6 words) + `<p class="lede lede--lg">` |
+| `actions` | 1–2 buttons |
+| `media` | Portrait 3:4 `<img>` with a clear subject |
+
+## Example
+
+```html
+<hero-asymmetric>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Hair · Color · Portland</p>
+  <h1>Color you'll stop touching up.</h1>
+  <p class="lede lede--lg">Balayage, lived-in blondes, and corrective color by stylists who've been at it for a decade. Consultations are free and honest.</p>
+  <a slot="actions" class="btn btn-lg" href="/book">Book online</a>
+  <a slot="actions" class="btn-outline btn-lg" href="/services">Services &amp; pricing</a>
+  <img src="/media/harvest/stylist-portrait.jpg" alt="Stylist finishing a blowout" width="1200" height="1600" slot="media" fetchpriority="high">
+</hero-asymmetric>
+```
+
+Variants: `<hero-asymmetric variant="reverse">`.
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/hero/hero-asymmetric/styles.css

@@ -0,0 +1,13 @@
+.c-hero-asymmetric__grid{display:grid;gap:var(--space-6)}
+.c-hero-asymmetric__copy{display:grid;gap:var(--space-5);align-content:end}
+.c-hero-asymmetric__copy h1{font-size:clamp(2.8rem,1.8rem + 4vw,5.5rem);max-width:12ch}
+.c-hero-asymmetric__copy .btn-group{margin-top:var(--space-2)}
+.c-hero-asymmetric__media{max-width:30rem;width:100%}
+@media(min-width:720px){
+  .c-hero-asymmetric__grid{grid-template-columns:1.15fr .85fr;align-items:end;gap:var(--space-8)}
+  .c-hero-asymmetric__copy{padding-bottom:var(--space-8)}
+  .c-hero-asymmetric__media{justify-self:end}
+  .c-hero-asymmetric--reverse .c-hero-asymmetric__grid{grid-template-columns:.85fr 1.15fr}
+  .c-hero-asymmetric--reverse .c-hero-asymmetric__copy{order:2}
+  .c-hero-asymmetric--reverse .c-hero-asymmetric__media{justify-self:start}
+}

package/blocks/hero/hero-asymmetric/template.html

@@ -0,0 +1,10 @@
+<section class="c-hero-asymmetric section section--roomy">
+  <div class="wrap c-hero-asymmetric__grid">
+    <div class="c-hero-asymmetric__copy">
+      <slot name="eyebrow"></slot>
+      <slot></slot>
+      <div class="btn-group"><slot name="actions"></slot></div>
+    </div>
+    <div class="c-hero-asymmetric__media frame ratio-3x4"><slot name="media"></slot></div>
+  </div>
+</section>

package/blocks/hero/hero-before-after/README.md

@@ -0,0 +1,38 @@
+# hero-before-after
+
+Trade showcase with draggable before/after beside copy.
+
+- **Category:** hero
+- **Media:** paired before/after photos
+- **Registers:** trade
+- **Variants:** reverse
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Short line above headline |
+| `(default)` | `<h1>` + `<p class="lede lede--lg">` |
+| `actions` | 1–2 buttons |
+| `before` | `<img class="before-after__before">` (same crop as after) |
+| `after` | `<img class="before-after__after">` |
+| `caption` | Optional one-line caption under the slider |
+
+## Example
+
+```html
+<hero-before-after>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Exterior painting · Cape Elizabeth</p>
+  <h1>Drag to see what a weekend with us looks like.</h1>
+  <p class="lede lede--lg">Prep is 70% of the job. We scrape, prime, and caulk before a drop of color goes on — that's why our finishes last.</p>
+  <a slot="actions" class="btn btn-lg" href="/contact">Get a free estimate</a>
+  <a slot="actions" class="btn-outline btn-lg" href="/work">See our work</a>
+  <img src="/media/harvest/house-before.jpg" alt="Weathered gray siding before painting" width="1600" height="1000" slot="before" class="before-after__before" fetchpriority="high">
+  <img src="/media/harvest/house-after.jpg" alt="Same house freshly painted in warm white" width="1600" height="1000" slot="after" class="before-after__after">
+  <span slot="caption">Ocean House Rd · completed in 3 days</span>
+</hero-before-after>
+```
+
+Variants: `<hero-before-after variant="reverse">`.
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/hero/hero-before-after/styles.css

@@ -0,0 +1,8 @@
+.c-hero-before-after__copy{display:grid;gap:var(--space-5);align-content:center}
+.c-hero-before-after__copy h1{max-width:18ch}
+.c-hero-before-after__copy .btn-group{margin-top:var(--space-2)}
+.c-hero-before-after__figure{margin:0;display:grid;gap:var(--space-3)}
+.c-hero-before-after__figure .before-after{box-shadow:var(--shadow-2)}
+.c-hero-before-after__caption{font-size:var(--step-0);color:var(--color-muted);text-align:center}
+.c-hero-before-after__caption:empty{display:none}
+.c-hero-before-after--reverse .split > :first-child{order:2}

package/blocks/hero/hero-before-after/template.html

@@ -0,0 +1,19 @@
+<section class="c-hero-before-after section section--roomy">
+  <div class="wrap split">
+    <div class="c-hero-before-after__copy">
+      <slot name="eyebrow"></slot>
+      <slot></slot>
+      <div class="btn-group"><slot name="actions"></slot></div>
+    </div>
+    <figure class="c-hero-before-after__figure">
+      <div class="before-after" data-island="before-after">
+        <slot name="before"></slot>
+        <slot name="after"></slot>
+        <span class="before-after__label before-after__label--before" aria-hidden="true">Before</span>
+        <span class="before-after__label before-after__label--after" aria-hidden="true">After</span>
+        <div class="before-after__handle" aria-hidden="true"></div>
+      </div>
+      <figcaption class="c-hero-before-after__caption"><slot name="caption"></slot></figcaption>
+    </figure>
+  </div>
+</section>

package/blocks/hero/hero-editorial/README.md

@@ -0,0 +1,34 @@
+# hero-editorial
+
+Type-led hero with generous air — premium / professional.
+
+- **Category:** hero
+- **Media:** optional small media
+- **Registers:** professional, b2b, beauty
+- **Variants:** center
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Short line above headline |
+| `(default)` | `<h1>` (≤ 10 words) + `<p class="lede lede--lg">` |
+| `actions` | 1–2 buttons |
+| `media` | Optional wide `<img>` shown under the copy (21:9 crop) |
+
+## Example
+
+```html
+<hero-editorial>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Estate planning · Family law</p>
+  <h1>Counsel that speaks plainly and plans for decades.</h1>
+  <p class="lede lede--lg">A two-partner practice in the Old Port. Flat fees for wills and trusts, and one attorney who answers your calls from start to finish.</p>
+  <a slot="actions" class="btn btn-lg" href="/consult">Book a consultation</a>
+  <a slot="actions" class="btn-arrow" href="/practice">Practice areas</a>
+  <img src="/media/harvest/office-wide.jpg" alt="The practice's brick-walled meeting room" width="2100" height="900" slot="media" fetchpriority="high">
+</hero-editorial>
+```
+
+Variants: `<hero-editorial variant="center">`.
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/hero/hero-editorial/block.meta.json

@@ -0,0 +1,85 @@
+{
+  "schemaVersion": 1,
+  "id": "hero/hero-editorial",
+  "revision": 1,
+  "status": "draft",
+  "owner": "Vitris design library",
+  "sourceHash": "c7523f6b19a0b7643a08fbb15054906ef4d53d0acec527dc7582519e00a5f0b0",
+  "fit": {
+    "visitorJobs": [
+      "Understand a focused offer without relying on photography"
+    ],
+    "pageRoles": [
+      "home opening"
+    ],
+    "useWhen": [
+      "Understand a focused offer without relying on photography"
+    ],
+    "avoidWhen": [
+      "The content or media cannot support this composition"
+    ]
+  },
+  "content": {
+    "requiredSlots": [
+      "eyebrow",
+      "default",
+      "actions"
+    ],
+    "optionalSlots": [
+      "media"
+    ],
+    "testedItemCounts": [
+      1
+    ]
+  },
+  "media": {
+    "min": 0,
+    "max": 8,
+    "optionalBehavior": "Recompose without empty media frames when media is optional",
+    "aspect": [
+      "content-dependent"
+    ]
+  },
+  "composition": {
+    "hierarchy": "type-led opening",
+    "alignment": "left or centered",
+    "density": "open",
+    "mediaProminence": "low",
+    "geometry": [
+      "type-led",
+      "single-column"
+    ],
+    "boundary": "section boundary adapts to adjacent content"
+  },
+  "adaptation": {
+    "flexible": [
+      "spacing",
+      "surface treatment",
+      "type scale"
+    ],
+    "invariants": [
+      "semantic reading order",
+      "one clear section purpose"
+    ],
+    "customWhen": [
+      "The visitor job needs a different hierarchy"
+    ]
+  },
+  "responsive": {
+    "readingOrder": "DOM order follows the visitor narrative",
+    "reflow": "Stack or resize according to content",
+    "crop": "Keep important subjects visible"
+  },
+  "interaction": {
+    "behavior": "Native links and controls",
+    "islands": []
+  },
+  "evidence": {
+    "provenance": [
+      "Original Vitris block source"
+    ],
+    "testedContexts": [],
+    "accessibility": [],
+    "previewManifest": "../../../design-system/block-previews/v1/hero--hero-editorial.json"
+  }
+}

package/blocks/hero/hero-editorial/styles.css

@@ -0,0 +1,6 @@
+.c-hero-editorial__copy{display:grid;gap:var(--space-5);max-width:46rem}
+.c-hero-editorial__copy h1{font-size:clamp(2.8rem,1.8rem + 4vw,5.5rem);max-width:16ch}
+.c-hero-editorial__copy .btn-group{margin-top:var(--space-2)}
+.c-hero-editorial__media{margin-top:var(--space-8)}
+.c-hero-editorial__media:not(:has(img,video)){display:none}
+.c-hero-editorial--center .c-hero-editorial__copy{margin-inline:auto;text-align:center;justify-items:center}

package/blocks/hero/hero-editorial/template.html

@@ -0,0 +1,10 @@
+<section class="c-hero-editorial section section--roomy">
+  <div class="wrap">
+    <div class="c-hero-editorial__copy">
+      <slot name="eyebrow"></slot>
+      <slot></slot>
+      <div class="btn-group"><slot name="actions"></slot></div>
+    </div>
+    <div class="c-hero-editorial__media frame ratio-21x9"><slot name="media"></slot></div>
+  </div>
+</section>

package/blocks/hero/hero-evidence/README.md

@@ -0,0 +1,32 @@
+# hero-evidence
+
+Type-led, no-photo opening with a quieter column for verified reasons to trust the business. The two columns carry different levels of emphasis; the proof is not a substitute for an invented testimonial or metric. This example is for the fictional Northline Counsel practice.
+
+- **Category:** hero
+- **Media:** none
+- **Registers:** professional, b2b, trade
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional context label |
+| `(default)` | One `<h1>` and a concise introductory paragraph |
+| `actions` | Optional primary and secondary links |
+| `proof` | List of specific, verified credentials or service facts; no fabricated claims |
+
+## Example
+
+```html
+<hero-evidence>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Northline Counsel · fictional example</p>
+  <h1>Clear counsel for decisions that cannot wait.</h1>
+  <p class="lede lede--lg">A small legal practice helping families and business owners understand their options before they choose a path.</p>
+  <a slot="actions" class="btn" href="/contact">Request a conversation</a>
+  <a slot="actions" class="btn-outline" href="/services">Explore services</a>
+  <ul slot="proof"><li>Direct conversation with the person handling your matter</li><li>Written scope before work begins</li><li>Practical next steps after the first meeting</li></ul>
+</hero-evidence>
+```
+
+Replace every example claim with a verified business fact. If no credible proof exists, use a simpler type-led opening. The proof column stacks after the main message on mobile.

package/blocks/hero/hero-evidence/block.meta.json

@@ -0,0 +1,85 @@
+{
+  "schemaVersion": 1,
+  "id": "hero/hero-evidence",
+  "revision": 1,
+  "status": "draft",
+  "owner": "Vitris design library",
+  "sourceHash": "a6e4e590acd369d516d3d67301ff5b0bd1383850ec797a3826e713ae0e380099",
+  "fit": {
+    "visitorJobs": [
+      "Understand the offer and review verified reasons to trust"
+    ],
+    "pageRoles": [
+      "home opening"
+    ],
+    "useWhen": [
+      "Understand the offer and review verified reasons to trust"
+    ],
+    "avoidWhen": [
+      "The content or media cannot support this composition"
+    ]
+  },
+  "content": {
+    "requiredSlots": [
+      "default",
+      "proof"
+    ],
+    "optionalSlots": [
+      "eyebrow",
+      "actions"
+    ],
+    "testedItemCounts": [
+      1
+    ]
+  },
+  "media": {
+    "min": 0,
+    "max": 8,
+    "optionalBehavior": "Recompose without empty media frames when media is optional",
+    "aspect": [
+      "content-dependent"
+    ]
+  },
+  "composition": {
+    "hierarchy": "type with proof column",
+    "alignment": "asymmetric",
+    "density": "open",
+    "mediaProminence": "none",
+    "geometry": [
+      "type-led",
+      "proof-column"
+    ],
+    "boundary": "section boundary adapts to adjacent content"
+  },
+  "adaptation": {
+    "flexible": [
+      "spacing",
+      "surface treatment",
+      "type scale"
+    ],
+    "invariants": [
+      "semantic reading order",
+      "one clear section purpose"
+    ],
+    "customWhen": [
+      "The visitor job needs a different hierarchy"
+    ]
+  },
+  "responsive": {
+    "readingOrder": "DOM order follows the visitor narrative",
+    "reflow": "Stack or resize according to content",
+    "crop": "Keep important subjects visible"
+  },
+  "interaction": {
+    "behavior": "Native links and controls",
+    "islands": []
+  },
+  "evidence": {
+    "provenance": [
+      "Original Vitris block source"
+    ],
+    "testedContexts": [],
+    "accessibility": [],
+    "previewManifest": "../../../design-system/block-previews/v1/hero--hero-evidence.json"
+  }
+}

package/blocks/hero/hero-evidence/styles.css

@@ -0,0 +1,13 @@
+.c-hero-evidence{border-bottom:1px solid var(--color-border)}
+.c-hero-evidence{overflow-wrap:anywhere}
+.c-hero-evidence__layout{display:grid;gap:var(--space-7);align-items:end}
+.c-hero-evidence__main{display:grid;gap:var(--space-5);align-content:start;min-width:0}
+.c-hero-evidence__main h1{font-size:clamp(3rem,2rem + 4.2vw,6rem);line-height:1.02;max-width:15ch}
+.c-hero-evidence__main .lede{max-width:48ch}
+.c-hero-evidence__actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}
+.c-hero-evidence__actions .btn,.c-hero-evidence__actions .btn-outline{white-space:normal;text-align:center;max-width:100%}
+.c-hero-evidence__proof{border-top:2px solid var(--color-accent);padding-top:var(--space-4);display:grid;gap:var(--space-4)}
+.c-hero-evidence__proof > *{margin:0}
+.c-hero-evidence__proof ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
+.c-hero-evidence__proof li{padding-block:var(--space-2);border-bottom:1px solid var(--color-border)}
+@media(min-width:900px){.c-hero-evidence__layout{grid-template-columns:minmax(0,1.65fr) minmax(17rem,.7fr)}.c-hero-evidence__proof{margin-bottom:var(--space-2)}}

package/blocks/hero/hero-evidence/template.html

@@ -0,0 +1 @@
+<section class="c-hero-evidence section section--roomy"><div class="wrap c-hero-evidence__layout"><div class="c-hero-evidence__main"><slot name="eyebrow"></slot><slot></slot><div class="c-hero-evidence__actions"><slot name="actions"></slot></div></div><aside class="c-hero-evidence__proof" aria-label="Supporting evidence"><slot name="proof"></slot></aside></div></section>

package/blocks/hero/hero-form/README.md

@@ -0,0 +1,46 @@
+# hero-form
+
+Lead form in the fold beside value prop.
+
+- **Category:** hero
+- **Media:** optional side media
+- **Registers:** trade, b2b, professional
+- **Variants:** dark
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Short line above headline |
+| `(default)` | `<h1>` + `<p class="lede lede--lg">`; optionally a `<ul class="list-check">` |
+| `proof` | Optional `.byline` proof row |
+| `form-title` | `<h2>` or `<h3>` heading inside the card |
+| `form` | `<form data-lead-form>` using `.form-grid` / `.field` / `.input` |
+
+## Example
+
+```html
+<hero-form>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Commercial HVAC · Southern Maine</p>
+  <h1>Keep every tenant comfortable and every unit under warranty.</h1>
+  <p class="lede lede--lg">Preventive maintenance plans for property managers. One contract, quarterly visits, 4-hour emergency response.</p>
+  <ul class="list-check">
+    <li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Fixed annual price per unit</li>
+    <li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Licensed EPA 608 technicians</li>
+    <li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Reporting after every visit</li>
+  </ul>
+  <div slot="proof" class="byline"><div class="avatar-group"><img src="/media/harvest/review-1.jpg" alt="" width="96" height="96" class="avatar avatar--sm"><img src="/media/harvest/review-2.jpg" alt="" width="96" height="96" class="avatar avatar--sm"><img src="/media/harvest/review-3.jpg" alt="" width="96" height="96" class="avatar avatar--sm"></div><div><span class="rating" aria-label="5 out of 5 stars"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l2.6 5.3L20 9.2l-4 3.9.9 5.4L12 15.9 7.1 18.5 8 13.1 4 9.2l5.4-.9L12 3z"/></svg><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l2.6 5.3L20 9.2l-4 3.9.9 5.4L12 15.9 7.1 18.5 8 13.1 4 9.2l5.4-.9L12 3z"/></svg><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l2.6 5.3L20 9.2l-4 3.9.9 5.4L12 15.9 7.1 18.5 8 13.1 4 9.2l5.4-.9L12 3z"/></svg><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l2.6 5.3L20 9.2l-4 3.9.9 5.4L12 15.9 7.1 18.5 8 13.1 4 9.2l5.4-.9L12 3z"/></svg><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l2.6 5.3L20 9.2l-4 3.9.9 5.4L12 15.9 7.1 18.5 8 13.1 4 9.2l5.4-.9L12 3z"/></svg></span><span> 4.9 from 212 local reviews</span></div></div>
+  <h3 slot="form-title">Get a maintenance quote</h3>
+  <form slot="form" data-lead-form class="form-grid">
+    <div class="field"><label for="hf-name">Name</label><input class="input" id="hf-name" name="name" autocomplete="name" required></div>
+    <div class="field"><label for="hf-email">Work email</label><input class="input" id="hf-email" name="email" type="email" autocomplete="email" required></div>
+    <div class="field"><label for="hf-units">How many units?</label><select class="select" id="hf-units" name="units"><option>1–10</option><option>11–50</option><option>50+</option></select></div>
+    <button class="btn btn-lg" type="submit">Send my request</button>
+    <small>We reply within one business day. No spam.</small>
+  </form>
+</hero-form>
+```
+
+Variants: `<hero-form variant="dark">`.
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/hero/hero-form/styles.css

@@ -0,0 +1,11 @@
+.c-hero-form__copy{display:grid;gap:var(--space-5);align-content:center}
+.c-hero-form__copy h1{max-width:18ch}
+.c-hero-form__proof:empty{display:none}
+.c-hero-form__card{max-width:32rem;width:100%;justify-self:end}
+.c-hero-form__card .card__body{padding:var(--space-6);gap:var(--space-4)}
+.c-hero-form__card h3,.c-hero-form__card h2{font-size:var(--step-2)}
+.c-hero-form__card .btn{width:100%}
+.c-hero-form__card small{color:var(--color-muted)}
+@media(min-width:720px){.c-hero-form .split{align-items:center}}
+.c-hero-form--dark{--color-bg:#141210;--color-text:#F7F4EF;--color-muted:#B8B0A4;--color-surface:#1E1B18;--color-surface-2:#2A2622;--color-border:#3A342E;--color-focus:#F7F4EF;background:var(--color-bg);color:var(--color-text)}
+.c-hero-form--dark .card{box-shadow:none}

package/blocks/hero/hero-form/template.html

@@ -0,0 +1,15 @@
+<section class="c-hero-form section section--roomy">
+  <div class="wrap split split--top">
+    <div class="c-hero-form__copy">
+      <slot name="eyebrow"></slot>
+      <slot></slot>
+      <div class="c-hero-form__proof"><slot name="proof"></slot></div>
+    </div>
+    <div class="card card--elevated c-hero-form__card">
+      <div class="card__body">
+        <slot name="form-title"></slot>
+        <slot name="form"></slot>
+      </div>
+    </div>
+  </div>
+</section>

package/blocks/hero/hero-menu/README.md

@@ -0,0 +1,36 @@
+# hero-menu
+
+Restaurant/menu: headline + featured dishes strip.
+
+- **Category:** hero
+- **Media:** food photography
+- **Registers:** food
+- **Variants:** center
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Short line above headline |
+| `(default)` | `<h1>` + `<p class="lede lede--lg">` |
+| `actions` | 1–2 buttons |
+| `cards` | 3 dish cards: `.card` with `.card__media.ratio-4x3`, `<h3>`, `<p>`, and `.price` |
+
+## Example
+
+```html
+<hero-menu>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Neighborhood trattoria · Munjoy Hill</p>
+  <h1>Handmade pasta, twelve tables, one long night.</h1>
+  <p class="lede lede--lg">We roll the dough at four, open at five, and cook until the last table leaves.</p>
+  <a slot="actions" class="btn btn-lg" href="/reserve">Reserve</a>
+  <a slot="actions" class="btn-outline btn-lg" href="/menu">Full menu</a>
+  <article slot="cards" class="card card--interactive"><div class="card__media ratio-4x3"><img src="/media/harvest/cacio.jpg" alt="Cacio e pepe" width="1200" height="900" loading="lazy"></div><div class="card__body"><h3>Cacio e pepe</h3><p class="price"><span class="price__amount">$19</span></p><p>Tonnarelli, pecorino, black pepper.</p></div></article>
+  <article slot="cards" class="card card--interactive"><div class="card__media ratio-4x3"><img src="/media/harvest/ragu.jpg" alt="Pappardelle with short-rib ragù" width="1200" height="900" loading="lazy"></div><div class="card__body"><h3>Short-rib ragù</h3><p class="price"><span class="price__amount">$26</span></p><p>Pappardelle, six-hour braise, parmigiano.</p></div></article>
+  <article slot="cards" class="card card--interactive"><div class="card__media ratio-4x3"><img src="/media/harvest/branzino.jpg" alt="Whole roasted branzino" width="1200" height="900" loading="lazy"></div><div class="card__body"><h3>Whole branzino</h3><p class="price"><span class="price__amount">$34</span></p><p>Lemon, capers, charred fennel.</p></div></article>
+</hero-menu>
+```
+
+Variants: `<hero-menu variant="center">`.
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/hero/hero-menu/styles.css

@@ -0,0 +1,7 @@
+.c-hero-menu__copy{display:grid;gap:var(--space-5);max-width:42rem;margin-bottom:var(--space-8)}
+.c-hero-menu__copy h1{max-width:16ch}
+.c-hero-menu__copy .btn-group{margin-top:var(--space-2)}
+.c-hero-menu__cards .card__body{grid-template-columns:1fr auto;align-items:start}
+.c-hero-menu__cards .card__body > p:not(.price){grid-column:1 / -1}
+.c-hero-menu__cards .price__amount{font-size:var(--step-2)}
+.c-hero-menu--center .c-hero-menu__copy{margin-inline:auto;text-align:center;justify-items:center}

package/blocks/hero/hero-menu/template.html

@@ -0,0 +1,10 @@
+<section class="c-hero-menu section section--roomy">
+  <div class="wrap">
+    <div class="c-hero-menu__copy">
+      <slot name="eyebrow"></slot>
+      <slot></slot>
+      <div class="btn-group"><slot name="actions"></slot></div>
+    </div>
+    <div class="grid grid--3 c-hero-menu__cards"><slot name="cards"></slot></div>
+  </div>
+</section>

package/blocks/hero/hero-overlay/README.md

@@ -0,0 +1,35 @@
+# hero-overlay
+
+Full-bleed photo with scrim and dual CTAs — immersive home default.
+
+- **Category:** hero
+- **Media:** darker LCP photo
+- **Registers:** trade, beauty, food
+- **Variants:** tall, center
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `media` | Full-bleed LCP `<img>` (dark or mid-tone subject) |
+| `eyebrow` | Short line above the headline |
+| `(default)` | `<h1>` + `<p class="lede lede--lg">` |
+| `actions` | 1–2 buttons |
+| `proof` | Optional `.byline` proof row |
+
+## Example
+
+```html
+<hero-overlay>
+  <img src="/media/harvest/hero-storefront.jpg" alt="Evening view of the shop front" width="2000" height="1250" slot="media" fetchpriority="high">
+  <p slot="eyebrow" class="eyebrow">Portland's East End · Est. 2011</p>
+  <h1>Good bread, honest coffee, no fuss.</h1>
+  <p class="lede lede--lg">Sourdough out of the oven at 7, sandwiches at 11, closed when we sell out.</p>
+  <a slot="actions" class="btn btn-lg" href="/menu">See today's menu</a>
+  <a slot="actions" class="btn-outline btn-lg" href="/order">Order ahead</a>
+</hero-overlay>
+```
+
+Variants: `<hero-overlay variant="tall">` (also: `center`).
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/hero/hero-overlay/styles.css

@@ -0,0 +1,14 @@
+.c-hero-overlay{position:relative;min-height:min(80vh,44rem);display:grid;align-items:end;isolation:isolate;--color-text:#fff;--color-muted:color-mix(in srgb,#fff 78%,transparent);--color-border:color-mix(in srgb,#fff 40%,transparent);color:var(--color-text)}
+.c-hero-overlay--tall{min-height:min(94vh,54rem)}
+.c-hero-overlay__media{position:absolute;inset:0;z-index:0;background:#2a2622}
+.c-hero-overlay__media img{width:100%;height:100%;object-fit:cover}
+.c-hero-overlay__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,color-mix(in srgb,#000 18%,transparent) 0%,color-mix(in srgb,#000 30%,transparent) 45%,color-mix(in srgb,#000 74%,transparent) 100%)}
+.c-hero-overlay__copy{position:relative;z-index:2;display:grid;gap:var(--space-5);padding-block:var(--space-9) var(--space-8);max-width:42rem}
+.c-hero-overlay__copy h1{max-width:18ch;text-shadow:0 2px 24px color-mix(in srgb,#000 30%,transparent)}
+.c-hero-overlay__copy .btn-group{margin-top:var(--space-2)}
+.c-hero-overlay__copy .btn-outline{background:color-mix(in srgb,#fff 10%,transparent);backdrop-filter:blur(6px)}
+.c-hero-overlay__copy .btn-outline:hover{background:color-mix(in srgb,#fff 20%,transparent);border-color:#fff}
+.c-hero-overlay__proof:empty{display:none}
+.c-hero-overlay--center{align-items:center}
+.c-hero-overlay--center .c-hero-overlay__copy{margin-inline:auto;text-align:center;justify-items:center}
+.c-hero-overlay--center .c-hero-overlay__scrim{background:color-mix(in srgb,#000 52%,transparent)}

package/blocks/hero/hero-overlay/template.html

@@ -0,0 +1,10 @@
+<section class="c-hero-overlay">
+  <div class="c-hero-overlay__media"><slot name="media"></slot></div>
+  <div class="c-hero-overlay__scrim" aria-hidden="true"></div>
+  <div class="wrap c-hero-overlay__copy">
+    <slot name="eyebrow"></slot>
+    <slot></slot>
+    <div class="btn-group"><slot name="actions"></slot></div>
+    <div class="c-hero-overlay__proof"><slot name="proof"></slot></div>
+  </div>
+</section>