@tryvitris/website-harness 0.1.0-beta.6 → 0.1.0-beta.7

package/blocks/cta/cta-band/README.md

@@ -1,33 +0,0 @@
-# cta-band
-
-Full-width conversion band.
-
-- **Category:** cta
-- **Media:** none
-- **Registers:** all
-- **Variants:** dark, accent
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Optional eyebrow |
-| `heading` | `<h2>` — one line, the ask |
-| `lede` | Optional one-sentence `<p class="lede">` |
-| `actions` | 1–2 buttons; primary first |
-
-## Example
-
-```html
-<cta-band>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">Free estimates</p>
-  <h2 slot="heading">Ready when you are.</h2>
-  <p slot="lede" class="lede">Book an inspection this week and have a written estimate in your inbox by Friday.</p>
-  <a slot="actions" class="btn btn-lg" href="/contact">Get a free estimate</a>
-  <a slot="actions" class="btn-outline btn-lg" 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>
-</cta-band>
-```
-
-Variants: `<cta-band variant="dark">` (also: `accent`).
-
-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/cta/cta-band/styles.css

@@ -1,11 +0,0 @@
-.c-cta-band__inner{display:grid;gap:var(--space-6);padding:var(--space-7) var(--space-6);background:var(--color-surface-2);border-radius:var(--radius-lg)}
-@media(min-width:900px){.c-cta-band__inner{grid-template-columns:1fr auto;align-items:center;padding:var(--space-8) var(--space-8)}}
-.c-cta-band__copy{display:grid;gap:var(--space-3);max-width:40rem}
-.c-cta-band__copy h2{font-size:var(--step-4)}
-.c-cta-band__actions{flex-shrink:0}
-.c-cta-band--dark .c-cta-band__inner{--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-cta-band--accent .c-cta-band__inner{background:var(--color-accent);color:var(--color-accent-text);--color-muted:color-mix(in srgb,var(--color-accent-text) 80%,transparent);--color-border:color-mix(in srgb,var(--color-accent-text) 45%,transparent)}
-.c-cta-band--accent .c-cta-band__inner .btn{background:var(--color-accent-text);color:var(--color-accent)}
-.c-cta-band--accent .c-cta-band__inner .btn:hover{background:color-mix(in srgb,var(--color-accent-text) 90%,var(--color-accent))}
-.c-cta-band--accent .c-cta-band__inner .btn-outline{color:var(--color-accent-text)}
-.c-cta-band--accent .c-cta-band__inner .eyebrow{color:var(--color-muted)}

package/blocks/cta/cta-band/template.html

@@ -1 +0,0 @@
-<section class="c-cta-band section"><div class="wrap"><div class="c-cta-band__inner"><div class="c-cta-band__copy"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="btn-group c-cta-band__actions"><slot name="actions"></slot></div></div></div></section>

package/blocks/cta/cta-card/README.md

@@ -1,35 +0,0 @@
-# cta-card
-
-Centered elevated CTA card.
-
-- **Category:** cta
-- **Media:** optional media
-- **Registers:** beauty, food, b2b
-- **Variants:** muted
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Optional eyebrow |
-| `heading` | `<h2>` |
-| `lede` | `<p class="lede">` |
-| `actions` | 1–2 buttons |
-| `note` | Optional `<small>` under the buttons (hours, guarantee) |
-
-## Example
-
-```html
-<cta-card>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">New clients</p>
-  <h2 slot="heading">First visit, 20% off any color service.</h2>
-  <p slot="lede" class="lede">Book online in under a minute. Free 15-minute consult included, no commitment.</p>
-  <a slot="actions" class="btn btn-lg" href="/book">Book online</a>
-  <a slot="actions" class="btn-outline btn-lg" href="tel:+15550102000">Call the salon</a>
-  <small slot="note">Open Tue–Sat · walk-ins welcome after 3 pm</small>
-</cta-card>
-```
-
-Variants: `<cta-card variant="muted">`.
-
-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/cta/cta-card/styles.css

@@ -1,8 +0,0 @@
-.c-cta-card__card{max-width:50rem;margin-inline:auto;text-align:center}
-.c-cta-card__card .card__body{padding:var(--space-8) var(--space-6);gap:var(--space-4);justify-items:center}
-.c-cta-card__card h2{font-size:var(--step-4);max-width:20ch}
-.c-cta-card__card .lede{margin-inline:auto}
-.c-cta-card__actions{justify-content:center;margin-top:var(--space-2)}
-.c-cta-card__card small{color:var(--color-muted)}
-.c-cta-card--muted{background:var(--color-surface-2)}
-.c-cta-card--muted .c-cta-card__card{box-shadow:none;border-color:var(--color-border)}

package/blocks/cta/cta-card/template.html

@@ -1 +0,0 @@
-<section class="c-cta-card section"><div class="wrap"><div class="card card--elevated c-cta-card__card"><div class="card__body"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot><div class="btn-group c-cta-card__actions"><slot name="actions"></slot></div><slot name="note"></slot></div></div></div></section>

package/blocks/cta/cta-floating-bar/README.md

@@ -1,28 +0,0 @@
-# cta-floating-bar
-
-Compact bottom/inline urgency bar (static).
-
-- **Category:** cta
-- **Media:** none
-- **Registers:** trade, food
-- **Variants:** sticky, accent
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `(default)` | One line of text (`<strong>` the offer) |
-| `actions` | One `.btn.btn-sm` |
-
-## Example
-
-```html
-<cta-floating-bar>
-  <strong>Spring special:</strong> free gutter guards with any full roof replacement booked before May 31.
-  <a slot="actions" class="btn btn-sm" href="/contact">Claim the offer</a>
-</cta-floating-bar>
-```
-
-Variants: `<cta-floating-bar variant="sticky">` (also: `accent`).
-
-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/cta/cta-floating-bar/styles.css

@@ -1,8 +0,0 @@
-.c-cta-floating-bar{padding-block:var(--space-4)}
-.c-cta-floating-bar__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3) var(--space-5);padding:var(--space-3) var(--space-3) var(--space-3) var(--space-5);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-2)}
-.c-cta-floating-bar__text{margin:0;font-size:var(--step-0);color:var(--color-muted)}
-.c-cta-floating-bar__text strong{color:var(--color-text)}
-.c-cta-floating-bar--sticky{position:sticky;bottom:0;z-index:40}
-.c-cta-floating-bar--accent .c-cta-floating-bar__inner{background:var(--color-accent);color:var(--color-accent-text);border-color:transparent}
-.c-cta-floating-bar--accent .c-cta-floating-bar__text,.c-cta-floating-bar--accent .c-cta-floating-bar__text strong{color:var(--color-accent-text)}
-.c-cta-floating-bar--accent .btn{background:var(--color-accent-text);color:var(--color-accent)}

package/blocks/cta/cta-floating-bar/template.html

@@ -1 +0,0 @@
-<aside class="c-cta-floating-bar"><div class="wrap"><div class="c-cta-floating-bar__inner"><p class="c-cta-floating-bar__text"><slot></slot></p><div class="btn-group"><slot name="actions"></slot></div></div></div></aside>

package/blocks/cta/cta-inline/README.md

@@ -1,30 +0,0 @@
-# cta-inline
-
-Quiet one-line CTA: heading beside a button with the team's faces.
-
-- **Category:** cta
-- **Media:** 2–3 tiny portraits
-- **Registers:** b2b, professional, beauty
-- **Variants:** center
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `heading` | `<h2>` |
-| `lede` | Optional `<p class="lede">` |
-| `action` | One `<a class="btn-outline">` containing `<span class="avatar-group">` + label |
-
-## Example
-
-```html
-<cta-inline>
-  <h2 slot="heading">Ready to bring your brand to life?</h2>
-  <p slot="lede" class="lede">Book a 30-minute call. We'll tell you honestly whether we're the right studio for it.</p>
-  <a slot="action" class="btn-outline" href="/contact"><span class="avatar-group"><img src="/media/harvest/avatar-1.jpg" alt="" width="96" height="96" class="avatar"><img src="/media/harvest/avatar-2.jpg" alt="" width="96" height="96" class="avatar"><img src="/media/harvest/avatar-3.jpg" alt="" width="96" height="96" class="avatar"></span>Talk with the team</a>
-</cta-inline>
-```
-
-Variants: `<cta-inline 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/cta/cta-inline/styles.css

@@ -1,9 +0,0 @@
-.c-cta-inline{border-top:1px solid var(--color-border)}
-.c-cta-inline__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-5) var(--space-7)}
-.c-cta-inline__copy{display:grid;gap:var(--space-2);max-width:36rem}
-.c-cta-inline__copy h2{font-size:var(--step-3)}
-.c-cta-inline__action .btn-outline,.c-cta-inline__action .btn{padding-left:.6rem}
-.c-cta-inline__action .avatar-group{margin-right:.25rem}
-.c-cta-inline__action .avatar{width:1.75rem;height:1.75rem;box-shadow:0 0 0 2px var(--color-bg)}
-.c-cta-inline--center .c-cta-inline__row{flex-direction:column;justify-content:center;text-align:center}
-.c-cta-inline--center .c-cta-inline__copy{justify-items:center}

package/blocks/cta/cta-inline/template.html

@@ -1 +0,0 @@
-<section class="c-cta-inline section"><div class="wrap c-cta-inline__row"><div class="c-cta-inline__copy"><slot name="heading"></slot><slot name="lede"></slot></div><div class="c-cta-inline__action"><slot name="action"></slot></div></div></section>

package/blocks/cta/cta-newsletter/README.md

@@ -1,34 +0,0 @@
-# cta-newsletter
-
-Email capture strip.
-
-- **Category:** cta
-- **Media:** none
-- **Registers:** food, beauty, b2b
-- **Variants:** dark
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `heading` | `<h2>` (short) |
-| `lede` | `<p class="lede">` — what they get and how often |
-| `form` | `<form data-lead-form>` with an `.input-row` (email `.input` + `.btn`) and optional `<small>` |
-
-## Example
-
-```html
-<cta-newsletter>
-  <h2 slot="heading">What's baking this week</h2>
-  <p slot="lede" class="lede">One email every Thursday: the weekend menu, specials, and when the croissants come out. No fluff.</p>
-  <form slot="form" data-lead-form>
-    <label class="visually-hidden" for="nl-email">Email</label>
-    <div class="input-row"><input class="input" id="nl-email" name="email" type="email" autocomplete="email" placeholder="you@example.com" required><button class="btn" type="submit">Subscribe</button></div>
-    <small>Unsubscribe any time. We never share your address.</small>
-  </form>
-</cta-newsletter>
-```
-
-Variants: `<cta-newsletter 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/cta/cta-newsletter/styles.css

@@ -1,8 +0,0 @@
-.c-cta-newsletter__inner{display:grid;gap:var(--space-6);align-items:center}
-@media(min-width:900px){.c-cta-newsletter__inner{grid-template-columns:1fr 1fr;gap:var(--space-8)}}
-.c-cta-newsletter__copy{display:grid;gap:var(--space-3)}
-.c-cta-newsletter__copy h2{font-size:var(--step-3)}
-.c-cta-newsletter__form form{display:grid;gap:var(--space-3)}
-.c-cta-newsletter__form .input-row .input{background:var(--color-surface)}
-.c-cta-newsletter__form small{color:var(--color-muted)}
-.c-cta-newsletter--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/cta/cta-newsletter/template.html

@@ -1 +0,0 @@
-<section class="c-cta-newsletter section section--muted"><div class="wrap c-cta-newsletter__inner"><div class="c-cta-newsletter__copy"><slot name="heading"></slot><slot name="lede"></slot></div><div class="c-cta-newsletter__form"><slot name="form"></slot></div></div></section>

package/blocks/cta/cta-photo-fan/README.md

@@ -1,36 +0,0 @@
-# cta-photo-fan
-
-Fanned polaroid photos over a centered closing CTA.
-
-- **Category:** cta
-- **Media:** 5 square photos
-- **Registers:** trade, beauty, food
-- **Variants:** muted
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `photos` | 5 square `<img>` (~480px), decorative |
-| `heading` | `<h2>` |
-| `lede` | Optional `<p class="lede">` |
-| `actions` | 1–2 buttons |
-
-## Example
-
-```html
-<cta-photo-fan>
-  <img src="/media/harvest/fan-1.jpg" alt="" width="480" height="480" slot="photos" loading="lazy">
-  <img src="/media/harvest/fan-2.jpg" alt="" width="480" height="480" slot="photos" loading="lazy">
-  <img src="/media/harvest/fan-3.jpg" alt="" width="480" height="480" slot="photos" loading="lazy">
-  <img src="/media/harvest/fan-4.jpg" alt="" width="480" height="480" slot="photos" loading="lazy">
-  <img src="/media/harvest/fan-5.jpg" alt="" width="480" height="480" slot="photos" loading="lazy">
-  <h2 slot="heading">Done in days. Built for decades.</h2>
-  <p slot="lede" class="lede">A licensed local crew, honest answers, and a 25-year warranty in writing — anywhere in Greater Portland.</p>
-  <a slot="actions" class="btn btn-lg" href="/contact">Get a free estimate</a>
-</cta-photo-fan>
-```
-
-Variants: `<cta-photo-fan variant="muted">`.
-
-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/cta/cta-photo-fan/styles.css

@@ -1,14 +0,0 @@
-.c-cta-photo-fan{overflow:hidden}
-.c-cta-photo-fan__inner{display:grid;gap:var(--space-7);justify-items:center}
-.c-cta-photo-fan__fan{display:flex;justify-content:center;align-items:flex-end;height:clamp(8rem,20vw,12rem)}
-.c-cta-photo-fan__fan img{width:clamp(6.5rem,16vw,10rem);height:auto;aspect-ratio:1;object-fit:cover;margin-inline:-.9rem;padding:.3rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);box-shadow:var(--shadow-2);transform-origin:50% 120%}
-.c-cta-photo-fan__fan img:nth-child(1){transform:rotate(-16deg) translateY(1.4rem)}
-.c-cta-photo-fan__fan img:nth-child(2){transform:rotate(-8deg) translateY(.45rem);z-index:1}
-.c-cta-photo-fan__fan img:nth-child(3){z-index:2}
-.c-cta-photo-fan__fan img:nth-child(4){transform:rotate(8deg) translateY(.45rem);z-index:1}
-.c-cta-photo-fan__fan img:nth-child(5){transform:rotate(16deg) translateY(1.4rem)}
-.c-cta-photo-fan__copy{display:grid;gap:var(--space-4);justify-items:center;text-align:center;max-width:36rem}
-.c-cta-photo-fan__copy h2{font-size:var(--step-4)}
-.c-cta-photo-fan__copy .lede{text-align:center}
-.c-cta-photo-fan__copy .btn-group{justify-content:center;margin-top:var(--space-2)}
-.c-cta-photo-fan--muted{background:var(--color-surface-2)}

package/blocks/cta/cta-photo-fan/template.html

@@ -1 +0,0 @@
-<section class="c-cta-photo-fan section section--roomy"><div class="wrap c-cta-photo-fan__inner"><div class="c-cta-photo-fan__fan" aria-hidden="true"><slot name="photos"></slot></div><div class="c-cta-photo-fan__copy"><slot name="heading"></slot><slot name="lede"></slot><div class="btn-group"><slot name="actions"></slot></div></div></div></section>

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

@@ -1,38 +0,0 @@
-# cta-split
-
-CTA copy + form or phone block.
-
-- **Category:** cta
-- **Media:** optional
-- **Registers:** trade, professional
-- **Variants:** dark
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Optional eyebrow |
-| `heading` | `<h2>` |
-| `lede` | `<p class="lede">` |
-| `bullets` | Optional 2–3 `<li>` with check icon |
-| `panel` | Contents of the right-hand card: `<h3>`, phone button, hours — or a short `<form data-lead-form>` |
-
-## Example
-
-```html
-<cta-split>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">Emergency repairs</p>
-  <h2 slot="heading">Leaking right now? Call.</h2>
-  <p slot="lede" class="lede">We keep one crew on call for active leaks. Tarping the same day, a permanent fix scheduled inside the week.</p>
-  <li slot="bullets"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Same-day emergency tarping</li>
-  <li slot="bullets"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>No after-hours surcharge for existing customers</li>
-  <li slot="bullets"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Insurance photos and documentation included</li>
-  <h3 slot="panel">Talk to a roofer now</h3>
-  <a slot="panel" class="btn btn-lg" 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>
-  <small slot="panel">7 am – 9 pm, seven days. After hours, leave a message — we call back within the hour.</small>
-</cta-split>
-```
-
-Variants: `<cta-split 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/cta/cta-split/styles.css

@@ -1,10 +0,0 @@
-.c-cta-split__copy{display:grid;gap:var(--space-4)}
-.c-cta-split__copy h2{font-size:var(--step-4)}
-.c-cta-split__list:empty{display:none}
-.c-cta-split__panel{max-width:28rem;width:100%;justify-self:end}
-.c-cta-split__panel .card__body{padding:var(--space-6);gap:var(--space-4);text-align:center;justify-items:center}
-.c-cta-split__panel h3{font-size:var(--step-2)}
-.c-cta-split__panel .btn{width:100%}
-.c-cta-split__panel small{color:var(--color-muted)}
-.c-cta-split--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-cta-split--dark .card{box-shadow:none}

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

@@ -1 +0,0 @@
-<section class="c-cta-split section"><div class="wrap split"><div class="c-cta-split__copy"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot><ul class="list-check c-cta-split__list"><slot name="bullets"></slot></ul></div><div class="card card--elevated c-cta-split__panel"><div class="card__body"><slot name="panel"></slot></div></div></div></section>

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

@@ -1,36 +0,0 @@
-# faq-accordion
-
-Default details/summary FAQ.
-
-- **Category:** faq
-- **Media:** none
-- **Registers:** all
-- **Variants:** two-col
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Optional `<p class="eyebrow">` |
-| `heading` | `<h2>` |
-| `lede` | Optional `<p class="lede">` |
-| `items` | 5–8 `<details>` with `<summary>` question and `<p>` answer |
-
-## Example
-
-```html
-<faq-accordion>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">FAQ</p>
-  <h2 slot="heading">Questions we get on every estimate</h2>
-  <p slot="lede" class="lede">Anything else? Call us — a person answers.</p>
-  <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-accordion>
-```
-
-Variants: `<faq-accordion 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/faq/faq-accordion/styles.css

@@ -1,6 +0,0 @@
-.c-faq-accordion__list{max-width:46rem;margin-inline:auto}
-@media(min-width:900px){
-  .c-faq-accordion--two-col .c-faq-accordion__list{max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:0 var(--space-8);border-top:0}
-  .c-faq-accordion--two-col .c-faq-accordion__list details{border-top:1px solid var(--color-border);border-bottom:0}
-  .c-faq-accordion--two-col .c-faq-accordion__list details:nth-last-child(-n+2){border-bottom:1px solid var(--color-border)}
-}

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

@@ -1 +0,0 @@
-<section class="c-faq-accordion 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="accordion c-faq-accordion__list"><slot name="items"></slot></div></div></section>

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

@@ -1,40 +0,0 @@
-# faq-grouped
-
-Grouped FAQ with a sticky jump-nav and optional rating card.
-
-- **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">` (one sentence) |
-| `nav` | One `<a href="#group-id">` per group |
-| `aside` | Optional `<div class="card card--flat">` (rating, phone) under the nav |
-| `groups` | 3–6 `<div id="group-id"><h3>Group</h3><div class="accordion"><details><summary>…</summary><p>…</p></details>…</div></div>` |
-
-## Example
-
-```html
-<faq-grouped>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">FAQ</p>
-  <h2 slot="heading">Common questions from homeowners.</h2>
-  <p slot="lede" class="lede">Costs, timelines, insurance, warranties, and what to expect on install day — answered the way we'd explain it to a neighbour.</p>
-  <a slot="nav" href="#faq-pricing">Estimates &amp; pricing</a>
-  <a slot="nav" href="#faq-job">During the job</a>
-  <a slot="nav" href="#faq-roof">Your roof, explained</a>
-  <a slot="nav" href="#faq-warranty">Warranty &amp; after</a>
-  <div slot="aside" class="card card--flat"><div class="card__body"><p class="stat__value">4.9</p><p><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> from 1,200+ Google reviews</p></div></div>
-  <div slot="groups" id="faq-pricing"><h3>Estimates &amp; pricing</h3><div class="accordion"><details open><summary>How much does an estimate cost?</summary><p>Nothing. We get on your roof, take photos, and give you a written estimate — whether or not you hire us.</p></details><details><summary>Do you offer financing?</summary><p>Yes — 0% for 18 months through a local credit union, or fixed-rate plans up to ten years.</p></details><details><summary>Do I have to be there for the estimate?</summary><p>No. We'll send the photos and the written quote the same day and talk it through by phone.</p></details></div></div>
-  <div slot="groups" id="faq-job"><h3>During the job</h3><div class="accordion"><details><summary>Do I need to be home during the install?</summary><p>No. We need access to the driveway and an outdoor outlet — that's it.</p></details><details><summary>How long will my roof take?</summary><p>Most homes are one or two days. We'll give you a firm window in the estimate.</p></details><details><summary>What if it rains in the forecast?</summary><p>We don't open a roof we can't close the same day. If weather moves in, we reschedule and tell you first.</p></details></div></div>
-  <div slot="groups" id="faq-roof"><h3>Your roof, explained</h3><div class="accordion"><details><summary>Why does my roof look wavy?</summary><p>Usually damp or delaminated decking. We check every sheet during tear-off and replace what's soft.</p></details><details><summary>What is underlayment, and do I need it?</summary><p>The water barrier under the shingles. Code requires it, and we use a synthetic that won't wrinkle or tear.</p></details></div></div>
-  <div slot="groups" id="faq-warranty"><h3>Warranty &amp; after</h3><div class="accordion"><details><summary>What does the warranty actually cover?</summary><p>Twenty-five years on our workmanship, in writing, plus the manufacturer's material warranty. If a leak is our fault, we fix it for free.</p></details><details><summary>Does the warranty transfer if I sell?</summary><p>Yes, once, to the next owner — a selling point most buyers ask about.</p></details></div></div>
-</faq-grouped>
-```
-
-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-grouped/styles.css

@@ -1,20 +0,0 @@
-.c-faq-grouped__grid{display:grid;gap:var(--space-6)}
-.c-faq-grouped__side{display:grid;gap:var(--space-5);align-content:start}
-.c-faq-grouped__nav{display:flex;flex-wrap:wrap;gap:var(--space-2)}
-.c-faq-grouped__nav a{display:inline-flex;align-items:center;min-height:2.25rem;padding:.3rem .9rem;border:1px solid var(--color-border);border-radius:var(--radius-pill);font-size:var(--step-0);color:var(--color-muted);text-decoration:none}
-.c-faq-grouped__nav a:hover{color:var(--color-text);border-color:var(--color-text)}
-.c-faq-grouped__aside{display:none}
-.c-faq-grouped__aside .card__body{gap:var(--space-1);padding:var(--space-5)}
-.c-faq-grouped__aside .stat__value{font-size:var(--step-4)}
-.c-faq-grouped__aside p{margin:0;font-size:var(--step-0)}
-.c-faq-grouped__groups{display:grid;gap:var(--space-7)}
-.c-faq-grouped__groups > div{scroll-margin-top:calc(var(--header-h) + var(--space-4))}
-.c-faq-grouped__groups h3{font-size:var(--step-2);margin-bottom:var(--space-3)}
-@media(min-width:900px){
-  .c-faq-grouped__grid{grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:var(--space-9)}
-  .c-faq-grouped__nav{display:grid;gap:0}
-  .c-faq-grouped__nav a{min-height:0;padding:.45rem .85rem;border:0;border-left:2px solid var(--color-border);border-radius:0}
-  .c-faq-grouped__nav a:hover{border-left-color:var(--color-text)}
-  .c-faq-grouped__aside{display:block}
-  .c-faq-grouped__aside:empty{display:none}
-}

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

@@ -1 +0,0 @@
-<section class="c-faq-grouped section"><div class="wrap"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="c-faq-grouped__grid"><div class="c-faq-grouped__side sticky-col"><nav class="c-faq-grouped__nav" aria-label="Question groups"><slot name="nav"></slot></nav><div class="c-faq-grouped__aside"><slot name="aside"></slot></div></div><div class="c-faq-grouped__groups"><slot name="groups"></slot></div></div></div></section>

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

@@ -1,37 +0,0 @@
-# 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

@@ -1,5 +0,0 @@
-.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

@@ -1 +0,0 @@
-<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

@@ -1,36 +0,0 @@
-# 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

@@ -1,3 +0,0 @@
-.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

@@ -1 +0,0 @@
-<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

@@ -1,33 +0,0 @@
-# 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

@@ -1,7 +0,0 @@
-.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)}