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

package/blocks/faq/faq-split/README.md

@@ -0,0 +1,37 @@
+# faq-split
+
+FAQ beside contact CTA.
+
+- **Category:** faq
+- **Media:** none
+- **Registers:** trade, professional, b2b
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` |
+| `actions` | 1–2 buttons (call / contact) |
+| `items` | 4–6 `<details>` with `<summary>` + `<p>` |
+
+## Example
+
+```html
+<faq-split>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Good to know</p>
+  <h2 slot="heading">Before you book</h2>
+  <p slot="lede" class="lede">Short answers to the things people ask on the first call.</p>
+  <a slot="actions" class="btn" href="tel:+15550102000"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 3h4l2 5-3 2a12 12 0 0 0 6 6l2-3 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 4 5a2 2 0 0 1 2-2z"/></svg>(555) 010-2000</a>
+  <a slot="actions" class="btn-outline" href="/contact">Send a message</a>
+  <details slot="items"><summary>How soon can you start?</summary><p>Repairs usually within the week. Full replacements book two to three weeks out in spring and fall, faster in summer.</p></details>
+  <details slot="items"><summary>Do you offer financing?</summary><p>Yes — 12-month 0% and longer terms through our lending partner. Apply in five minutes; approval doesn't affect your credit score.</p></details>
+  <details slot="items"><summary>Are you licensed and insured?</summary><p>Maine license #RC-20419, $2M general liability, and workers' comp on every employee. Certificates come with the estimate.</p></details>
+  <details slot="items"><summary>What does the warranty cover?</summary><p>Ten years on our workmanship — any leak caused by installation, we fix free. Manufacturer warranties on materials run 30 years to lifetime.</p></details>
+  <details slot="items"><summary>Will you clean up?</summary><p>Magnet sweep of the lawn and driveway twice a day, gutters cleared, and shingles hauled to a recycler, not a landfill.</p></details>
+</faq-split>
+```
+
+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/faq/faq-split/styles.css

@@ -0,0 +1,5 @@
+.c-faq-split__copy .section__head{margin-bottom:var(--space-5)}
+@media(min-width:720px){.c-faq-split .split{grid-template-columns:2fr 3fr}.c-faq-split__copy{position:sticky;top:calc(var(--header-h) + var(--space-5))}}
+.c-faq-split__card{padding:0 var(--space-6)}
+.c-faq-split__list{border-top:0}
+.c-faq-split__list details:last-child{border-bottom:0}

package/blocks/faq/faq-split/template.html

@@ -0,0 +1 @@
+<section class="c-faq-split section section--muted"><div class="wrap split split--top"><div class="c-faq-split__copy"><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="card c-faq-split__card"><div class="accordion c-faq-split__list"><slot name="items"></slot></div></div></div></section>

package/blocks/faq/faq-tabs/README.md

@@ -0,0 +1,36 @@
+# faq-tabs
+
+Categorized FAQ tabs.
+
+- **Category:** faq
+- **Media:** none
+- **Registers:** b2b, professional
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` |
+| `tabs` | A `.tabs__list.tabs__list--pill[role=tablist]`, then one `.tabs__panel[role=tabpanel]` per category, each containing an `.accordion` of `<details>` |
+
+## Example
+
+```html
+<faq-tabs>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Help center</p>
+  <h2 slot="heading">Answers by topic</h2>
+  <div slot="tabs" class="tabs__list tabs__list--pill" role="tablist">
+    <button type="button" class="tabs__tab" role="tab" id="fq-1" aria-controls="fq-p1" aria-selected="true">Billing</button>
+    <button type="button" class="tabs__tab" role="tab" id="fq-2" aria-controls="fq-p2" aria-selected="false">Onboarding</button>
+    <button type="button" class="tabs__tab" role="tab" id="fq-3" aria-controls="fq-p3" aria-selected="false">Security</button>
+  </div>
+  <div slot="tabs" class="tabs__panel" role="tabpanel" id="fq-p1" aria-labelledby="fq-1"><div class="accordion"><details><summary>When am I billed?</summary><p>On the 1st of each month for that month. Annual plans are billed once, up front, with the 15% discount applied.</p></details><details><summary>Can I change plans mid-month?</summary><p>Yes. Upgrades apply immediately and are prorated; downgrades take effect at the next billing date.</p></details><details><summary>Is there a setup fee?</summary><p>No setup fee. Catch-up bookkeeping for prior months is quoted separately if you need it.</p></details></div></div>
+  <div slot="tabs" class="tabs__panel" role="tabpanel" id="fq-p2" aria-labelledby="fq-2" hidden><div class="accordion"><details><summary>What do you need from me to start?</summary><p>Read-only bank and credit card feeds, your last tax return, and payroll access. Most owners finish intake in under an hour.</p></details><details><summary>How long until my first close?</summary><p>Four weeks from intake for a clean set of books; longer if we're cleaning up prior years.</p></details></div></div>
+  <div slot="tabs" class="tabs__panel" role="tabpanel" id="fq-p3" aria-labelledby="fq-3" hidden><div class="accordion"><details><summary>Do you have access to move money?</summary><p>Never. All bank connections are read-only, and we don't hold check-signing authority.</p></details><details><summary>Where is my data stored?</summary><p>In your own accounting system. We work inside your books; nothing is copied to ours.</p></details></div></div>
+</faq-tabs>
+```
+
+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/faq/faq-tabs/styles.css

@@ -0,0 +1,3 @@
+.c-faq-tabs__tabs{justify-items:center;max-width:46rem;margin-inline:auto}
+.c-faq-tabs__tabs .tabs__panel{width:100%}
+.c-faq-tabs__tabs .accordion{margin-top:var(--space-2)}

package/blocks/faq/faq-tabs/template.html

@@ -0,0 +1 @@
+<section class="c-faq-tabs section"><div class="wrap"><div class="section__head section__head--center"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="tabs c-faq-tabs__tabs" data-island="tabs"><slot name="tabs"></slot></div></div></section>

package/blocks/feature/feature-bento/README.md

@@ -0,0 +1,33 @@
+# feature-bento
+
+Mixed-span bento feature board.
+
+- **Category:** feature
+- **Media:** mixed media tiles
+- **Registers:** b2b, beauty, food
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` (one sentence) |
+| `tiles` | 4–6 `.card` tiles using `bento__wide` / `bento__narrow` / `bento__tall`; mix one media tile, one stat, and copy tiles |
+
+## Example
+
+```html
+<feature-bento>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">How we work</p>
+  <h2 slot="heading">One team from estimate to final walkthrough.</h2>
+  <p slot="lede" class="lede">No subcontractor roulette — the crew that quotes the job is the crew that shows up.</p>
+  <article slot="tiles" class="card bento__wide"><div class="card__media"><img src="/media/harvest/crew.jpg" alt="Our crew on a Cape Elizabeth job site" width="1600" height="900" loading="lazy"></div><div class="card__body"><h3>One crew, start to finish</h3><p>Eight employees, zero subcontractors. The foreman who quotes the job runs the job.</p></div></article>
+  <div slot="tiles" class="card card--flat bento__narrow"><div class="card__body"><div class="stat"><p class="stat__value">48h</p><p class="stat__label">Written estimate turnaround</p></div></div></div>
+  <div slot="tiles" class="card bento__narrow"><div class="card__body"><span class="icon-tile"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3 4 6v6c0 5 3.5 8.5 8 9 4.5-.5 8-4 8-9V6l-8-3z"/><path d="m9 12 2 2 4-4"/></svg></span><h3>Insured to $2M</h3><p>Certificates included with every estimate.</p></div></div>
+  <div slot="tiles" class="card bento__wide"><div class="card__body"><h3>Everything in writing</h3><p>Materials by brand and line, a start window, and a fixed price.</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-price contract</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Daily photo updates</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Final walkthrough checklist</li></ul></div></div>
+</feature-bento>
+```
+
+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/feature/feature-bento/styles.css

@@ -0,0 +1,7 @@
+.c-feature-bento__grid{gap:var(--space-4)}
+@media(max-width:719px){.c-feature-bento__grid{grid-template-columns:1fr}.c-feature-bento__grid > *{grid-column:auto}}
+.c-feature-bento__grid .card{height:100%}
+.c-feature-bento__grid .card__body{padding:var(--space-6);gap:var(--space-3)}
+.c-feature-bento__grid .card__media{aspect-ratio:16/9}
+.c-feature-bento__grid .stat__value{font-size:var(--step-5)}
+.c-feature-bento__grid .list-check{margin-top:var(--space-2)}

package/blocks/feature/feature-bento/template.html

@@ -0,0 +1 @@
+<section class="c-feature-bento section"><div class="wrap"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="bento c-feature-bento__grid"><slot name="tiles"></slot></div></div></section>

package/blocks/feature/feature-compare-table/README.md

@@ -0,0 +1,44 @@
+# feature-compare-table
+
+"Why us" comparison table with a highlighted column.
+
+- **Category:** feature
+- **Media:** none
+- **Registers:** trade, b2b, professional
+- **Variants:** dark
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` (one sentence) |
+| `columns` | `<th>` cells: an empty first `<th>` (criteria), then one `<th class="is-us">` and 2–3 competitor `<th>` |
+| `rows` | 4–7 `<tr><th scope="row">Criterion</th><td class="is-us">…</td><td>…</td></tr>` |
+| `note` | Optional `<p>` footnote under the table |
+
+## Example
+
+```html
+<feature-compare-table>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Why Harbor</p>
+  <h2 slot="heading">Compare before you sign.</h2>
+  <p slot="lede" class="lede">Every roofer says they're the best. Here is what actually changes for you.</p>
+  <th slot="columns"><span class="visually-hidden">Criteria</span></th>
+  <th slot="columns" class="is-us">Harbor</th>
+  <th slot="columns">DIY</th>
+  <th slot="columns">General contractor</th>
+  <th slot="columns">Big-box franchise</th>
+  <tr slot="rows"><th scope="row">Cost</th><td class="is-us"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>$$</td><td>$</td><td>$$$</td><td>$$$$</td></tr>
+  <tr slot="rows"><th scope="row">Turnaround</th><td class="is-us"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>1–2 days</td><td>Weeks</td><td>2–3 weeks</td><td>4–6 weeks</td></tr>
+  <tr slot="rows"><th scope="row">Warranty</th><td class="is-us"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>25-year, transferable</td><td><span aria-label="Not included">—</span></td><td>1 year</td><td>Limited</td></tr>
+  <tr slot="rows"><th scope="row">Who shows up</th><td class="is-us"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Our own crew</td><td>You</td><td>Subcontractors</td><td>Whoever's free</td></tr>
+  <tr slot="rows"><th scope="row">Scheduling</th><td class="is-us"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Around you</td><td>Weekends</td><td>Their backlog</td><td>Fixed slots</td></tr>
+  <p slot="note">Based on written quotes our customers shared with us in 2025. Your numbers will vary — ask for ours in writing.</p>
+</feature-compare-table>
+```
+
+Variants: `<feature-compare-table 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/feature/feature-compare-table/styles.css

@@ -0,0 +1,15 @@
+.c-feature-compare-table__card{max-width:60rem;margin-inline:auto}
+.c-feature-compare-table__table{min-width:44rem}
+.c-feature-compare-table__table th,.c-feature-compare-table__table td{text-align:center;vertical-align:middle;white-space:nowrap}
+.c-feature-compare-table__table th:first-child,.c-feature-compare-table__table tbody th{text-align:left;font-weight:500;color:var(--color-text);letter-spacing:0;text-transform:none;font-size:var(--step-0)}
+.c-feature-compare-table__table thead th{padding-block:var(--space-4);white-space:nowrap}
+.c-feature-compare-table__table td{color:var(--color-muted)}
+.c-feature-compare-table__table .is-us{background:color-mix(in srgb,var(--color-accent) 9%,transparent);color:var(--color-text);font-weight:600}
+.c-feature-compare-table__table thead .is-us{color:var(--color-accent);font-weight:700}
+.c-feature-compare-table__table tbody tr:last-child td,.c-feature-compare-table__table tbody tr:last-child th{border-bottom:0}
+.c-feature-compare-table__table .icon{width:1rem;height:1rem;vertical-align:-.15em;margin-right:.3rem}
+.c-feature-compare-table__table .is-us .icon{color:var(--color-accent)}
+.c-feature-compare-table__note{max-width:42rem;margin:var(--space-4) auto 0;text-align:center;font-size:var(--step-0);color:var(--color-muted)}
+.c-feature-compare-table__note:empty{display:none}
+.c-feature-compare-table__note p{margin:0}
+.c-feature-compare-table--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)}

package/blocks/feature/feature-compare-table/template.html

@@ -0,0 +1 @@
+<section class="c-feature-compare-table section"><div class="wrap"><div class="section__head section__head--center"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="card c-feature-compare-table__card"><div class="table-wrap"><table class="table c-feature-compare-table__table"><thead><tr><slot name="columns"></slot></tr></thead><tbody><slot name="rows"></slot></tbody></table></div></div><div class="c-feature-compare-table__note"><slot name="note"></slot></div></div></section>

package/blocks/feature/feature-comparison/README.md

@@ -0,0 +1,34 @@
+# feature-comparison
+
+Simple two-column compare cards.
+
+- **Category:** feature
+- **Media:** optional
+- **Registers:** b2b, trade, professional
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` (one sentence) |
+| `us` | `<h3>` + `<ul class="list-check">` for your approach |
+| `them` | `<h3>` + `<ul class="list-check">` for the typical alternative (use the x icon) |
+
+## Example
+
+```html
+<feature-comparison>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">The difference</p>
+  <h2 slot="heading">What you get with us vs. the low bid</h2>
+  <p slot="lede" class="lede">Both roofs look the same the day they're finished. Ask again in five winters.</p>
+  <h3 slot="us">Harbor Roofing</h3>
+  <ul slot="us" class="list-check"><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Full tear-off, deck inspected and repaired</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Ice-and-water shield 6 ft at eaves</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>New flashing, drip edge, and ridge vent</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>10-year workmanship warranty in writing</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Employees, not subcontractors</li></ul>
+  <h3 slot="them">Typical low bid</h3>
+  <ul slot="them" class="list-check"><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m4 4 16 16M20 4 4 20"/></svg>Shingles layered over the old roof</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m4 4 16 16M20 4 4 20"/></svg>Minimum-code underlayment</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m4 4 16 16M20 4 4 20"/></svg>Flashing reused where "it looks fine"</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m4 4 16 16M20 4 4 20"/></svg>1-year warranty, verbal</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m4 4 16 16M20 4 4 20"/></svg>Whichever sub is free that week</li></ul>
+</feature-comparison>
+```
+
+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/feature/feature-comparison/styles.css

@@ -0,0 +1,6 @@
+.c-feature-comparison__grid{max-width:56rem;margin-inline:auto}
+.c-feature-comparison .card__body{padding:var(--space-6);gap:var(--space-4)}
+.c-feature-comparison .card__body > h3{padding-bottom:var(--space-3);border-bottom:1px solid var(--color-border)}
+.c-feature-comparison .list-check{gap:var(--space-3)}
+.c-feature-comparison__them{color:var(--color-muted)}
+.c-feature-comparison__them .list-check li > .icon{color:var(--color-muted)}

package/blocks/feature/feature-comparison/template.html

@@ -0,0 +1 @@
+<section class="c-feature-comparison section"><div class="wrap"><div class="section__head section__head--center"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="grid grid--2 c-feature-comparison__grid"><div class="card card--accent c-feature-comparison__us"><div class="card__body"><slot name="us"></slot></div></div><div class="card card--flat c-feature-comparison__them"><div class="card__body"><slot name="them"></slot></div></div></div></div></section>

package/blocks/feature/feature-grid-3/README.md

@@ -0,0 +1,34 @@
+# feature-grid-3
+
+Three icon+title+blurb pillars.
+
+- **Category:** feature
+- **Media:** icons or small media
+- **Registers:** all
+- **Variants:** center, cards
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` (one sentence) |
+| `items` | 3 or 6 items: each `<div>` with `.icon-tile`, `<h3>`, `<p>` |
+
+## Example
+
+```html
+<feature-grid-3>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Why homeowners call us first</p>
+  <h2 slot="heading">Built for Maine weather, priced for Maine budgets.</h2>
+  <p slot="lede" class="lede">Three things every crew member signs up for on day one.</p>
+  <div slot="items"><span class="icon-tile"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3 4 6v6c0 5 3.5 8.5 8 9 4.5-.5 8-4 8-9V6l-8-3z"/><path d="m9 12 2 2 4-4"/></svg></span><h3>Licensed &amp; insured</h3><p>State-licensed, fully insured, and OSHA-trained. Certificates are in the estimate packet, not on request.</p></div>
+  <div slot="items"><span class="icon-tile"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg></span><h3>Written estimate in 48 hours</h3><p>Line-item pricing with the materials named. If it changes, you sign off before we proceed.</p></div>
+  <div slot="items"><span class="icon-tile"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="9" r="6"/><path d="m8.5 14-1.5 7 5-3 5 3-1.5-7"/></svg></span><h3>Ten-year workmanship warranty</h3><p>On top of the manufacturer's. If a seam we made leaks, we come back — no argument.</p></div>
+</feature-grid-3>
+```
+
+Variants: `<feature-grid-3 variant="center">` (also: `cards`).
+
+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/feature/feature-grid-3/styles.css

@@ -0,0 +1,8 @@
+.c-feature-grid-3__grid{--gap:var(--space-6)}
+.c-feature-grid-3__grid > *{display:grid;gap:var(--space-3);align-content:start}
+.c-feature-grid-3__grid > * > p{margin:0;color:var(--color-muted)}
+.c-feature-grid-3__grid > * > .icon-tile{margin-bottom:var(--space-2)}
+.c-feature-grid-3--center .section__head{margin-inline:auto;text-align:center;justify-items:center}
+.c-feature-grid-3--center .c-feature-grid-3__grid > *{text-align:center;justify-items:center}
+.c-feature-grid-3--cards .c-feature-grid-3__grid{--gap:var(--space-5)}
+.c-feature-grid-3--cards .c-feature-grid-3__grid > *{padding:var(--space-5);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg)}

package/blocks/feature/feature-grid-3/template.html

@@ -0,0 +1 @@
+<section class="c-feature-grid-3 section"><div class="wrap"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="grid grid--3 c-feature-grid-3__grid"><slot name="items"></slot></div></div></section>

package/blocks/feature/feature-icon-list/README.md

@@ -0,0 +1,39 @@
+# feature-icon-list
+
+Dense checklist of capabilities.
+
+- **Category:** feature
+- **Media:** icons
+- **Registers:** trade, b2b, professional
+- **Variants:** two-col
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` (one sentence) |
+| `actions` | Optional 1–2 buttons under the copy |
+| `items` | 6–10 `<li>` with a check icon then text (`<strong>` for the lead phrase) |
+
+## Example
+
+```html
+<feature-icon-list>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Everything included</p>
+  <h2 slot="heading">What's in every roofing estimate</h2>
+  <p slot="lede" class="lede">No add-on fees for the things that make a roof last.</p>
+  <a slot="actions" class="btn" href="/contact">Get a free estimate</a>
+  <li slot="items"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg><span><strong>Full tear-off and disposal</strong><span>We never layer new shingles over old.</span></span></li>
+  <li slot="items"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg><span><strong>Ice-and-water shield to code</strong><span>Six feet at eaves and every valley.</span></span></li>
+  <li slot="items"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg><span><strong>Ridge and soffit ventilation check</strong><span>Corrected if it isn't balanced.</span></span></li>
+  <li slot="items"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg><span><strong>Drip edge and step flashing</strong><span>New aluminum, not reused.</span></span></li>
+  <li slot="items"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg><span><strong>Magnetic nail sweep</strong><span>Lawn, driveway, and beds — twice.</span></span></li>
+  <li slot="items"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg><span><strong>Photos of the finished deck and underlayment</strong><span>Sent before shingles go on.</span></span></li>
+</feature-icon-list>
+```
+
+Variants: `<feature-icon-list variant="two-col">`.
+
+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/feature/feature-icon-list/styles.css

@@ -0,0 +1,9 @@
+.c-feature-icon-list__copy .section__head{margin-bottom:var(--space-5)}
+.c-feature-icon-list__list{gap:var(--space-4);font-size:var(--step-1)}
+.c-feature-icon-list__list li{padding-bottom:var(--space-4);border-bottom:1px solid var(--color-border)}
+.c-feature-icon-list__list li:last-child{border-bottom:0;padding-bottom:0}
+.c-feature-icon-list__list li > .icon{width:1.35rem;height:1.35rem}
+.c-feature-icon-list__list strong{display:block;font-weight:600}
+.c-feature-icon-list__list span{color:var(--color-muted)}
+@media(min-width:720px){.c-feature-icon-list .split{grid-template-columns:2fr 3fr}}
+@media(min-width:900px){.c-feature-icon-list--two-col .c-feature-icon-list__list{grid-template-columns:1fr 1fr;column-gap:var(--space-6)}}

package/blocks/feature/feature-icon-list/template.html

@@ -0,0 +1 @@
+<section class="c-feature-icon-list section section--muted"><div class="wrap split split--top"><div class="c-feature-icon-list__copy"><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><ul class="list-check c-feature-icon-list__list"><slot name="items"></slot></ul></div></section>

package/blocks/feature/feature-spotlight/README.md

@@ -0,0 +1,39 @@
+# feature-spotlight
+
+One large feature with side bullets.
+
+- **Category:** feature
+- **Media:** hero media
+- **Registers:** beauty, food, b2b
+- **Variants:** reverse
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `media` | `<img>` 4:3 |
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` (one sentence) |
+| `bullets` | 3–4 `<li>` with check icon |
+| `actions` | 1–2 buttons |
+
+## Example
+
+```html
+<feature-spotlight>
+  <img src="/media/harvest/color-bar.jpg" alt="Stylist mixing color at the bar" width="1600" height="1200" slot="media" loading="lazy">
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Our color bar</p>
+  <h2 slot="heading">Formulas written down, so your color is repeatable.</h2>
+  <p slot="lede" class="lede">Every session ends with your exact mix in your file — any stylist here can match it next time.</p>
+  <li slot="bullets"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Ammonia-free lines for sensitive scalps</li>
+  <li slot="bullets"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Bond-builder included in every lightening service</li>
+  <li slot="bullets"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Free 15-minute consult before your first appointment</li>
+  <a slot="actions" class="btn" href="/book">Book a color consult</a>
+  <a slot="actions" class="btn-arrow" href="/services#color">Color pricing</a>
+</feature-spotlight>
+```
+
+Variants: `<feature-spotlight 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/feature/feature-spotlight/styles.css

@@ -0,0 +1,5 @@
+.c-feature-spotlight__copy{display:grid;gap:var(--space-5)}
+.c-feature-spotlight__copy .section__head{margin-bottom:0}
+.c-feature-spotlight__list{color:var(--color-text)}
+.c-feature-spotlight__list:empty{display:none}
+.c-feature-spotlight--reverse .split > :first-child{order:2}

package/blocks/feature/feature-spotlight/template.html

@@ -0,0 +1 @@
+<section class="c-feature-spotlight section"><div class="wrap split"><div class="frame ratio-4x3 c-feature-spotlight__media"><slot name="media"></slot></div><div class="c-feature-spotlight__copy"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><ul class="list-check c-feature-spotlight__list"><slot name="bullets"></slot></ul><div class="btn-group"><slot name="actions"></slot></div></div></div></section>

package/blocks/feature/feature-stats-band/README.md

@@ -0,0 +1,33 @@
+# feature-stats-band
+
+Four stats with optional count-up.
+
+- **Category:** feature
+- **Media:** none
+- **Registers:** trade, b2b, professional
+- **Variants:** dark
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` (one sentence) |
+| `stats` | 3–4 `.stat` blocks; add `data-count-to` on `.stat__value` for count-up |
+
+## Example
+
+```html
+<feature-stats-band>
+  <h2 slot="heading">Fifteen years, one zip code at a time.</h2>
+  <div slot="stats" class="stat"><p class="stat__value" data-count-to="1200" data-count-suffix="+">1200+</p><p class="stat__label">Roofs replaced</p></div>
+  <div slot="stats" class="stat"><p class="stat__value" data-count-to="15">15</p><p class="stat__label">Years in Portland</p></div>
+  <div slot="stats" class="stat"><p class="stat__value" data-count-to="98" data-count-suffix="%">98%</p><p class="stat__label">Would hire again</p></div>
+  <div slot="stats" class="stat"><p class="stat__value" data-count-to="0">0</p><p class="stat__label">Subcontractors</p></div>
+</feature-stats-band>
+```
+
+Variants: `<feature-stats-band 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/feature/feature-stats-band/styles.css

@@ -0,0 +1,8 @@
+.c-feature-stats-band__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6) var(--space-5)}
+.c-feature-stats-band__row .stat{text-align:center;justify-items:center;padding-inline:var(--space-4)}
+.c-feature-stats-band__row .stat__value{font-size:var(--step-5)}
+@media(min-width:720px){
+  .c-feature-stats-band__row{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
+  .c-feature-stats-band__row .stat + .stat{border-left:1px solid var(--color-border)}
+}
+.c-feature-stats-band--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)}

package/blocks/feature/feature-stats-band/template.html

@@ -0,0 +1 @@
+<section class="c-feature-stats-band section section--muted" data-island="counter"><div class="wrap"><div class="section__head section__head--center"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="c-feature-stats-band__row"><slot name="stats"></slot></div></div></section>

package/blocks/feature/feature-tabs/README.md

@@ -0,0 +1,38 @@
+# feature-tabs
+
+Tabbed feature panels.
+
+- **Category:** feature
+- **Media:** optional per-panel media
+- **Registers:** b2b, professional
+- **Variants:** pill
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` (one sentence) |
+| `tabs` | A `.tabs__list[role=tablist]` of `button.tabs__tab[role=tab]`, then one `.tabs__panel[role=tabpanel]` per tab (`hidden` on all but the first). Panels can use `.split`. |
+
+## Example
+
+```html
+<feature-tabs>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Services</p>
+  <h2 slot="heading">Pick the plan that fits how you run the building.</h2>
+  <div slot="tabs" class="tabs__list" role="tablist">
+    <button type="button" class="tabs__tab" role="tab" id="ft-1" aria-controls="ft-p1" aria-selected="true">Preventive</button>
+    <button type="button" class="tabs__tab" role="tab" id="ft-2" aria-controls="ft-p2" aria-selected="false">On-call</button>
+    <button type="button" class="tabs__tab" role="tab" id="ft-3" aria-controls="ft-p3" aria-selected="false">Retrofit</button>
+  </div>
+  <div slot="tabs" class="tabs__panel split" role="tabpanel" id="ft-p1" aria-labelledby="ft-1"><div><h3>Quarterly visits, zero surprises</h3><p>Filters, belts, coils, and refrigerant checked on a schedule. You get a report with photos after every visit.</p><a class="btn-arrow" href="/plans">Plan details</a></div><div class="frame ratio-4x3"><img src="/media/harvest/rooftop-unit.jpg" alt="Technician servicing a rooftop unit" width="1200" height="900" loading="lazy"></div></div>
+  <div slot="tabs" class="tabs__panel split" role="tabpanel" id="ft-p2" aria-labelledby="ft-2" hidden><div><h3>Four-hour response, 24/7</h3><p>A dispatcher who knows your buildings and a truck stocked for your equipment.</p><a class="btn-arrow" href="/plans#on-call">How dispatch works</a></div><div class="frame ratio-4x3"><img src="/media/harvest/van-night.jpg" alt="Service van at night" width="1200" height="900" loading="lazy"></div></div>
+  <div slot="tabs" class="tabs__panel split" role="tabpanel" id="ft-p3" aria-labelledby="ft-3" hidden><div><h3>Replace before it fails</h3><p>Lifecycle planning for units past 15 years, with rebate paperwork handled for you.</p><a class="btn-arrow" href="/plans#retrofit">Retrofit process</a></div><div class="frame ratio-4x3"><img src="/media/harvest/new-unit.jpg" alt="New condenser install" width="1200" height="900" loading="lazy"></div></div>
+</feature-tabs>
+```
+
+Variants: `<feature-tabs variant="pill">`.
+
+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/feature/feature-tabs/styles.css

@@ -0,0 +1,7 @@
+.c-feature-tabs__tabs .tabs__panel{padding-top:var(--space-4)}
+.c-feature-tabs__tabs .tabs__panel > div{display:grid;gap:var(--space-3);align-content:center}
+.c-feature-tabs__tabs .tabs__panel h3{font-size:var(--step-3)}
+.c-feature-tabs__tabs .tabs__panel p{color:var(--color-muted)}
+.c-feature-tabs--pill .tabs__list{border-bottom:0;gap:var(--space-1);padding:var(--space-1);background:var(--color-surface-2);border-radius:var(--radius-pill);width:fit-content}
+.c-feature-tabs--pill .tabs__tab{border:0;margin:0;min-height:2.5rem;padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill)}
+.c-feature-tabs--pill .tabs__tab[aria-selected="true"]{background:var(--color-surface);box-shadow:var(--shadow-1)}

package/blocks/feature/feature-tabs/template.html

@@ -0,0 +1 @@
+<section class="c-feature-tabs section"><div class="wrap"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="tabs c-feature-tabs__tabs" data-island="tabs"><slot name="tabs"></slot></div></div></section>

package/blocks/feature/feature-thumb-list/README.md

@@ -0,0 +1,38 @@
+# feature-thumb-list
+
+Copy + large photo beside a stack of thumbnail cards.
+
+- **Category:** feature
+- **Media:** one hero photo + 3–4 thumbnails
+- **Registers:** trade, b2b, beauty
+- **Variants:** dark, reverse
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` (one sentence) |
+| `actions` | Optional 1–2 buttons / `.btn-arrow` links |
+| `media` | Optional `<img>` (4:3) shown under the copy |
+| `items` | 3–4 `<article class="card"><img> <div class="card__body"><h3>…</h3><p>…</p></div></article>` |
+
+## Example
+
+```html
+<feature-thumb-list>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">What you're buying</p>
+  <h2 slot="heading">More than shingles. It's a system.</h2>
+  <p slot="lede" class="lede">Every roof we build is engineered as a whole — decking, underlayment, flashing, and ventilation — so it holds up for decades, not a few years.</p>
+  <a slot="actions" class="btn-arrow" href="/process">How we build it <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
+  <img src="/media/harvest/roof-layers.jpg" alt="Cross-section of roof layers on a job site" width="1200" height="900" slot="media" loading="lazy">
+  <article slot="items" class="card"><img src="/media/harvest/thumb-shingle.jpg" alt="" width="240" height="240" loading="lazy"><div class="card__body"><h3>Built to last</h3><p>Thick, impact-rated shingles built to take hail and high wind.</p></div></article>
+  <article slot="items" class="card"><img src="/media/harvest/thumb-flashing.jpg" alt="" width="240" height="240" loading="lazy"><div class="card__body"><h3>Locked down tight</h3><p>Metal flashing seals every roof-to-wall seam against wind and rain.</p></div></article>
+  <article slot="items" class="card"><img src="/media/harvest/thumb-ridge.jpg" alt="" width="240" height="240" loading="lazy"><div class="card__body"><h3>Holds its line</h3><p>A crisp, dead-straight ridge line — true from the road and true up close.</p></div></article>
+</feature-thumb-list>
+```
+
+Variants: `<feature-thumb-list variant="dark">` (also: `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/feature/feature-thumb-list/styles.css

@@ -0,0 +1,13 @@
+.c-feature-thumb-list__grid{display:grid;gap:var(--space-6)}
+.c-feature-thumb-list__copy{display:grid;gap:var(--space-5);align-content:start}
+.c-feature-thumb-list__copy .section__head{margin-bottom:0}
+.c-feature-thumb-list__copy .btn-group:empty{display:none}
+.c-feature-thumb-list__media:empty{display:none}
+.c-feature-thumb-list__items{display:grid;gap:var(--space-3);align-content:center}
+.c-feature-thumb-list__items .card{flex-direction:row;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4) var(--space-3) var(--space-3)}
+.c-feature-thumb-list__items .card > img{flex:none;width:5.5rem;height:5.5rem;object-fit:cover;border-radius:var(--radius-md)}
+.c-feature-thumb-list__items .card__body{padding:0;gap:var(--space-1)}
+.c-feature-thumb-list__items .card__body h3{font-size:var(--step-1)}
+.c-feature-thumb-list__items .card__body p{font-size:var(--step-0)}
+@media(min-width:900px){.c-feature-thumb-list__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-8);align-items:center}.c-feature-thumb-list--reverse .c-feature-thumb-list__copy{order:2}}
+.c-feature-thumb-list--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)}

package/blocks/feature/feature-thumb-list/template.html

@@ -0,0 +1 @@
+<section class="c-feature-thumb-list section"><div class="wrap c-feature-thumb-list__grid"><div class="c-feature-thumb-list__copy"><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 class="frame ratio-4x3 c-feature-thumb-list__media"><slot name="media"></slot></div></div><div class="c-feature-thumb-list__items"><slot name="items"></slot></div></div></section>