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

package/blocks/content/prose-split/styles.css

@@ -0,0 +1,12 @@
+.c-prose-split__grid{display:grid;gap:var(--space-5)}
+.c-prose-split__label h2{font-size:var(--step-2)}
+.c-prose-split__body{max-width:44rem}
+.c-prose-split__prose{display:grid;gap:var(--space-4)}
+.c-prose-split__prose p{margin:0;font-size:var(--step-1);line-height:1.65}
+.c-prose-split__meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4) var(--space-5);margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--color-border)}
+.c-prose-split__meta:empty{display:none}
+.c-prose-split__meta > *{display:grid;gap:var(--space-1)}
+.c-prose-split__meta span{font-size:var(--step-0);color:var(--color-muted)}
+.c-prose-split__meta strong{font-weight:600}
+@media(min-width:720px){.c-prose-split__grid{grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:var(--space-7)}.c-prose-split__meta{grid-template-columns:repeat(4,minmax(0,1fr))}}
+@media(min-width:1080px){.c-prose-split__grid{grid-template-columns:minmax(0,18rem) minmax(0,1fr);gap:var(--space-9)}}

package/blocks/content/prose-split/template.html

@@ -0,0 +1 @@
+<section class="c-prose-split section"><div class="wrap c-prose-split__grid"><div class="c-prose-split__label"><slot name="label"></slot></div><div class="c-prose-split__body"><div class="c-prose-split__prose"><slot></slot></div><div class="c-prose-split__meta"><slot name="meta"></slot></div></div></div></section>

package/blocks/content/specification-ledger/README.md

@@ -0,0 +1,32 @@
+# specification-ledger
+
+A dense, readable fact ledger for product or service specifications. The heading introduces why the distinctions matter; rows keep units and limits visible. The example describes a fictional material offer.
+
+- **Category:** content
+- **Media:** none
+- **Registers:** b2b, trade, professional
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional section label |
+| `heading` | `<h2>` explaining the facts |
+| `intro` | Optional concise interpretation |
+| `items` | Three or more `<div>` rows containing `<dt>` and `<dd>` |
+
+## Example
+
+```html
+<specification-ledger>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Material guide · fictional example</p>
+  <h2 slot="heading">What changes with the material.</h2>
+  <p slot="intro" class="lede">Use this space to explain which specification affects the visitor's decision, then give the exact details below.</p>
+  <div slot="items"><dt>Finish</dt><dd>Natural split face; color variation is expected.</dd></div>
+  <div slot="items"><dt>Available sizes</dt><dd>Confirm current sizes from the supplier inventory before publishing.</dd></div>
+  <div slot="items"><dt>Installation</dt><dd>Selection depends on roof pitch, substrate, and local conditions.</dd></div>
+</specification-ledger>
+```
+
+Verify every dimension, standard, and availability claim. The row layout stacks labels above values at narrow widths.

package/blocks/content/specification-ledger/block.meta.json

@@ -0,0 +1,85 @@
+{
+  "schemaVersion": 1,
+  "id": "content/specification-ledger",
+  "revision": 1,
+  "status": "draft",
+  "owner": "Vitris design library",
+  "sourceHash": "f9d910387d0f2c82791502a76d178f2deb8e48e50387190fc15d1ad9611149f2",
+  "fit": {
+    "visitorJobs": [
+      "Compare precise specifications"
+    ],
+    "pageRoles": [
+      "product details"
+    ],
+    "useWhen": [
+      "Compare precise specifications"
+    ],
+    "avoidWhen": [
+      "The content or media cannot support this composition"
+    ]
+  },
+  "content": {
+    "requiredSlots": [
+      "heading",
+      "items"
+    ],
+    "optionalSlots": [
+      "eyebrow",
+      "intro"
+    ],
+    "testedItemCounts": [
+      1
+    ]
+  },
+  "media": {
+    "min": 0,
+    "max": 8,
+    "optionalBehavior": "Recompose without empty media frames when media is optional",
+    "aspect": [
+      "content-dependent"
+    ]
+  },
+  "composition": {
+    "hierarchy": "dense fact ledger",
+    "alignment": "split",
+    "density": "dense",
+    "mediaProminence": "none",
+    "geometry": [
+      "ledger",
+      "rows"
+    ],
+    "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/content--specification-ledger.json"
+  }
+}

package/blocks/content/specification-ledger/styles.css

@@ -0,0 +1,10 @@
+.c-specification-ledger__layout{display:grid;gap:var(--space-6)}
+.c-specification-ledger__intro{display:grid;gap:var(--space-3);align-content:start}
+.c-specification-ledger__intro h2{max-width:18ch}
+.c-specification-ledger__intro p{max-width:50ch}
+.c-specification-ledger__list{border-top:2px solid var(--color-text);margin:0}
+.c-specification-ledger__list > div{display:grid;grid-template-columns:minmax(7rem,.45fr) minmax(0,1fr);gap:var(--space-3);padding:var(--space-4) 0;border-bottom:1px solid var(--color-border)}
+.c-specification-ledger__list dt{font-weight:600}
+.c-specification-ledger__list dd{margin:0;color:var(--color-muted);max-width:56ch}
+@media(max-width:420px){.c-specification-ledger__list > div{grid-template-columns:1fr;gap:var(--space-1)}}
+@media(min-width:900px){.c-specification-ledger__layout{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--space-8)}}

package/blocks/content/specification-ledger/template.html

@@ -0,0 +1 @@
+<section class="c-specification-ledger section"><div class="wrap c-specification-ledger__layout"><div class="c-specification-ledger__intro"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="intro"></slot></div><dl class="c-specification-ledger__list"><slot name="items"></slot></dl></div></section>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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