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

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

@@ -0,0 +1,31 @@
+# feature-zigzag
+
+Alternating copy/media story rows.
+
+- **Category:** feature
+- **Media:** media per row
+- **Registers:** trade, beauty, professional
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` (one sentence) |
+| `rows` | 2–4 rows: each `<div class="split">` with a `.frame.ratio-4x3` media div and a copy div (`<h3>`, `<p>`, optional `.btn-arrow`). Rows alternate automatically. |
+
+## Example
+
+```html
+<feature-zigzag>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">The process</p>
+  <h2 slot="heading">Three visits. One clear price. No surprises.</h2>
+  <div slot="rows" class="split"><div class="frame ratio-4x3"><img src="/media/harvest/inspection.jpg" alt="Roof inspection with a drone" width="1200" height="900" loading="lazy"></div><div><p class="eyebrow eyebrow--accent">01 · Inspection</p><h3>We look at the whole roof, not the leak.</h3><p>Drone photos of every slope, a moisture reading in the attic, and a straight answer about repair vs. replace.</p><a class="btn-arrow" href="/process#inspection">What we check</a></div></div>
+  <div slot="rows" class="split"><div class="frame ratio-4x3"><img src="/media/harvest/estimate.jpg" alt="Reviewing an estimate at a kitchen table" width="1200" height="900" loading="lazy"></div><div><p class="eyebrow eyebrow--accent">02 · Estimate</p><h3>Line items you can compare.</h3><p>Materials by brand, labor by day, and the permit fee shown separately. Valid for 60 days.</p><a class="btn-arrow" href="/process#estimate">Sample estimate</a></div></div>
+  <div slot="rows" class="split"><div class="frame ratio-4x3"><img src="/media/harvest/install.jpg" alt="Crew installing shingles" width="1200" height="900" loading="lazy"></div><div><p class="eyebrow eyebrow--accent">03 · Install</p><h3>Most roofs done in two days.</h3><p>Tarps on the landscaping, a magnet sweep at the end of each day, and a walkthrough with the foreman before we invoice.</p><a class="btn-arrow" href="/process#install">Install day checklist</a></div></div>
+</feature-zigzag>
+```
+
+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-zigzag/styles.css

@@ -0,0 +1,6 @@
+.c-feature-zigzag__stack{display:grid;gap:var(--space-8)}
+.c-feature-zigzag__stack > .split > div:not([class*="ratio"]):not(.frame){display:grid;gap:var(--space-4);align-content:center}
+.c-feature-zigzag__stack h3{font-size:var(--step-3)}
+.c-feature-zigzag__stack p{color:var(--color-muted);max-width:36rem}
+.c-feature-zigzag__stack .eyebrow{margin-bottom:calc(var(--space-2) * -1)}
+@media(min-width:720px){.c-feature-zigzag__stack > .split:nth-child(even) > :first-child{order:2}}

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

@@ -0,0 +1 @@
+<section class="c-feature-zigzag section"><div class="wrap"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="c-feature-zigzag__stack"><slot name="rows"></slot></div></div></section>

package/blocks/footer/footer-columns/README.md

@@ -0,0 +1,39 @@
+# footer-columns
+
+Multi-column directory footer.
+
+- **Category:** footer
+- **Media:** logo optional
+- **Registers:** all
+- **Variants:** dark
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `brand` | Business name or logo |
+| `tagline` | `<p>` one line about the business + location |
+| `social` | Icon links (`<a aria-label>` with `.icon`) |
+| `columns` | 2–4 `<div>`: `<h3>` heading then `<a>` links |
+| `legal` | `<a>` links + a trailing `<span>` copyright |
+
+## Example
+
+```html
+<footer-columns>
+  <span slot="brand">Harbor Roofing</span>
+  <p slot="tagline">Residential roofing for Greater Portland since 2009. Licensed, insured, and local.</p>
+  <a slot="social" href="https://instagram.com/example" aria-label="Instagram" rel="noopener"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r=".8"/></svg></a>
+  <a slot="social" href="https://facebook.com/example" aria-label="Facebook" rel="noopener"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 8h3V4h-3a4 4 0 0 0-4 4v3H7v4h3v6h4v-6h3l1-4h-4V8z"/></svg></a>
+  <div slot="columns"><h3>Services</h3><a href="/services/replacement">Roof replacement</a><a href="/services/repair">Leak repair</a><a href="/services/gutters">Gutters</a><a href="/services/metal">Metal roofing</a></div>
+  <div slot="columns"><h3>Company</h3><a href="/about">About</a><a href="/team">Crew</a><a href="/work">Projects</a><a href="/blog">Guides</a></div>
+  <div slot="columns"><h3>Contact</h3><a href="tel:+15550102000">(555) 010-2000</a><a href="mailto:hello@harborroofing.example">hello@harborroofing.example</a><a href="https://maps.example/harbor" rel="noopener">12 Harbor St, Portland</a></div>
+  <a slot="legal" href="/privacy">Privacy</a>
+  <a slot="legal" href="/cookie-compliance">Cookie compliance</a>
+  <span slot="legal">© 2026 Harbor Roofing LLC · Maine license #RC-20419</span>
+</footer-columns>
+```
+
+Variants: `<footer-columns 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/footer/footer-columns/styles.css

@@ -0,0 +1,16 @@
+.c-footer-columns{border-top:1px solid var(--color-border);font-size:var(--step-0);color:var(--color-muted)}
+.c-footer-columns a:not([class*="btn"]){color:var(--color-muted);text-decoration:none}
+.c-footer-columns a:not([class*="btn"]):hover{color:var(--color-text)}
+.c-footer-columns .brand{color:var(--color-text)}
+.c-footer-columns__legal{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);align-items:center;padding-block:var(--space-4);border-top:1px solid var(--color-border)}
+.c-footer-columns__legal > span{margin-inline-start:auto}
+.c-footer-columns__social{display:flex;gap:var(--space-2)}
+.c-footer-columns__social a{display:inline-grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:var(--radius-pill);border:1px solid var(--color-border)}
+.c-footer-columns__social a:hover{border-color:var(--color-text)}
+.c-footer-columns__grid{display:flex;flex-wrap:wrap;gap:var(--space-7) var(--space-6);padding-block:var(--space-8) var(--space-7)}
+.c-footer-columns__brand{display:grid;gap:var(--space-4);align-content:start;flex:1 1 100%;max-width:22rem}
+.c-footer-columns__brand p{margin:0}
+.c-footer-columns__grid > div:not(.c-footer-columns__brand){display:grid;gap:var(--space-2);align-content:start;flex:1 1 9rem}
+@media(min-width:900px){.c-footer-columns__brand{flex:0 1 22rem;margin-inline-end:auto}}
+.c-footer-columns__grid h3{font-family:var(--font-body);font-size:var(--step-0);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text);margin-bottom:var(--space-2)}
+.c-footer-columns--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/footer/footer-columns/template.html

@@ -0,0 +1 @@
+<footer class="c-footer-columns"><div class="wrap"><div class="c-footer-columns__grid"><div class="c-footer-columns__brand"><a class="brand" href="/"><slot name="brand"></slot></a><slot name="tagline"></slot><div class="c-footer-columns__social"><slot name="social"></slot></div></div><slot name="columns"></slot></div><div class="c-footer-columns__legal"><slot name="legal"></slot></div></div></footer>

package/blocks/footer/footer-compact/README.md

@@ -0,0 +1,33 @@
+# footer-compact
+
+Brand + legal + cookie link.
+
+- **Category:** footer
+- **Media:** logo optional
+- **Registers:** all
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `brand` | Business name or logo |
+| `links` | Optional 3–5 `<a>` nav links |
+| `legal` | `<a>` links + trailing `<span>` copyright |
+
+## Example
+
+```html
+<footer-compact>
+  <span slot="brand">Harbor Roofing</span>
+  <a slot="links" href="/services">Services</a>
+  <a slot="links" href="/work">Our work</a>
+  <a slot="links" href="/about">About</a>
+  <a slot="links" href="/contact">Contact</a>
+  <a slot="legal" href="/privacy">Privacy</a>
+  <a slot="legal" href="/cookie-compliance">Cookie compliance</a>
+  <span slot="legal">© 2026 Harbor Roofing LLC · Maine license #RC-20419</span>
+</footer-compact>
+```
+
+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/footer/footer-compact/styles.css

@@ -0,0 +1,12 @@
+.c-footer-compact{border-top:1px solid var(--color-border);font-size:var(--step-0);color:var(--color-muted)}
+.c-footer-compact a:not([class*="btn"]){color:var(--color-muted);text-decoration:none}
+.c-footer-compact a:not([class*="btn"]):hover{color:var(--color-text)}
+.c-footer-compact .brand{color:var(--color-text)}
+.c-footer-compact__legal{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);align-items:center;padding-block:var(--space-4);border-top:1px solid var(--color-border)}
+.c-footer-compact__legal > span{margin-inline-start:auto}
+.c-footer-compact__social{display:flex;gap:var(--space-2)}
+.c-footer-compact__social a{display:inline-grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:var(--radius-pill);border:1px solid var(--color-border)}
+.c-footer-compact__social a:hover{border-color:var(--color-text)}
+.c-footer-compact__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4);padding-block:var(--space-6)}
+.c-footer-compact__links{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5)}
+.c-footer-compact__links:empty{display:none}

package/blocks/footer/footer-compact/template.html

@@ -0,0 +1 @@
+<footer class="c-footer-compact"><div class="wrap"><div class="c-footer-compact__row"><a class="brand" href="/"><slot name="brand"></slot></a><nav class="c-footer-compact__links" aria-label="Footer"><slot name="links"></slot></nav></div><div class="c-footer-compact__legal"><slot name="legal"></slot></div></div></footer>

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

@@ -0,0 +1,37 @@
+# footer-cta
+
+Mini CTA above compact footer.
+
+- **Category:** footer
+- **Media:** none
+- **Registers:** trade, beauty, food
+- **Variants:** dark
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `heading` | `<h2>` the ask |
+| `lede` | Optional `<p class="lede">` |
+| `actions` | 1–2 buttons |
+| `brand` | Business name or logo |
+| `legal` | `<a>` links + trailing `<span>` copyright |
+
+## Example
+
+```html
+<footer-cta>
+  <h2 slot="heading">Let's look at your roof.</h2>
+  <p slot="lede" class="lede">Free inspection, written estimate in 48 hours, no pressure.</p>
+  <a slot="actions" class="btn btn-lg" href="/contact">Book an inspection</a>
+  <a slot="actions" class="btn-outline btn-lg" href="tel:+15550102000">(555) 010-2000</a>
+  <span slot="brand">Harbor Roofing</span>
+  <a slot="legal" href="/privacy">Privacy</a>
+  <a slot="legal" href="/cookie-compliance">Cookie compliance</a>
+  <span slot="legal">© 2026 Harbor Roofing LLC · Maine license #RC-20419</span>
+</footer-cta>
+```
+
+Variants: `<footer-cta 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/footer/footer-cta/styles.css

@@ -0,0 +1,18 @@
+.c-footer-cta{border-top:1px solid var(--color-border);font-size:var(--step-0);color:var(--color-muted)}
+.c-footer-cta a:not([class*="btn"]){color:var(--color-muted);text-decoration:none}
+.c-footer-cta a:not([class*="btn"]):hover{color:var(--color-text)}
+.c-footer-cta .brand{color:var(--color-text)}
+.c-footer-cta__legal{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);align-items:center;padding-block:var(--space-4);border-top:1px solid var(--color-border)}
+.c-footer-cta__legal > span{margin-inline-start:auto}
+.c-footer-cta__social{display:flex;gap:var(--space-2)}
+.c-footer-cta__social a{display:inline-grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:var(--radius-pill);border:1px solid var(--color-border)}
+.c-footer-cta__social a:hover{border-color:var(--color-text)}
+.c-footer-cta{border-top:0}
+.c-footer-cta__band{display:grid;gap:var(--space-5);padding-block:var(--space-8);color:var(--color-text)}
+@media(min-width:900px){.c-footer-cta__band{grid-template-columns:1fr auto;align-items:center}}
+.c-footer-cta__copy{display:grid;gap:var(--space-3);max-width:36rem}
+.c-footer-cta__copy h2{font-size:var(--step-4)}
+.c-footer-cta__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4);padding-block:var(--space-5);border-top:1px solid var(--color-border)}
+.c-footer-cta__legal{border-top:0;padding:0}
+.c-footer-cta__legal > span{margin-inline-start:0}
+.c-footer-cta--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/footer/footer-cta/template.html

@@ -0,0 +1 @@
+<footer class="c-footer-cta"><div class="wrap"><div class="c-footer-cta__band"><div class="c-footer-cta__copy"><slot name="heading"></slot><slot name="lede"></slot></div><div class="btn-group"><slot name="actions"></slot></div></div><div class="c-footer-cta__row"><a class="brand" href="/"><slot name="brand"></slot></a><div class="c-footer-cta__legal"><slot name="legal"></slot></div></div></div></footer>

package/blocks/footer/footer-social/README.md

@@ -0,0 +1,37 @@
+# footer-social
+
+Social icons + NAP strip.
+
+- **Category:** footer
+- **Media:** social icons
+- **Registers:** beauty, food, trade
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `brand` | Business name or logo |
+| `tagline` | Optional `<p>` one-liner |
+| `social` | Icon links |
+| `details` | `<p>` address, `<p>` phone/email, `<p>` hours |
+| `legal` | `<a>` links + trailing `<span>` copyright |
+
+## Example
+
+```html
+<footer-social>
+  <span slot="brand">Maison Lune</span>
+  <p slot="tagline">Color, cuts, and the occasional glass of something on Exchange Street.</p>
+  <a slot="social" href="https://instagram.com/example" aria-label="Instagram" rel="noopener"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r=".8"/></svg></a>
+  <a slot="social" href="https://facebook.com/example" aria-label="Facebook" rel="noopener"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 8h3V4h-3a4 4 0 0 0-4 4v3H7v4h3v6h4v-6h3l1-4h-4V8z"/></svg></a>
+  <p slot="details"><strong>41 Exchange St, Portland, ME 04101</strong></p>
+  <p slot="details"><a href="tel:+15550102000">(555) 010-2000</a> · <a href="mailto:hello@maisonlune.example">hello@maisonlune.example</a></p>
+  <p slot="details">Tue–Sat 9–7 · Sun–Mon closed</p>
+  <a slot="legal" href="/privacy">Privacy</a>
+  <a slot="legal" href="/cookie-compliance">Cookie compliance</a>
+  <span slot="legal">© 2026 Maison Lune</span>
+</footer-social>
+```
+
+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/footer/footer-social/styles.css

@@ -0,0 +1,17 @@
+.c-footer-social{border-top:1px solid var(--color-border);font-size:var(--step-0);color:var(--color-muted)}
+.c-footer-social a:not([class*="btn"]){color:var(--color-muted);text-decoration:none}
+.c-footer-social a:not([class*="btn"]):hover{color:var(--color-text)}
+.c-footer-social .brand{color:var(--color-text)}
+.c-footer-social__legal{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);align-items:center;padding-block:var(--space-4);border-top:1px solid var(--color-border)}
+.c-footer-social__legal > span{margin-inline-start:auto}
+.c-footer-social__social{display:flex;gap:var(--space-2)}
+.c-footer-social__social a{display:inline-grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:var(--radius-pill);border:1px solid var(--color-border)}
+.c-footer-social__social a:hover{border-color:var(--color-text)}
+.c-footer-social__grid{display:grid;gap:var(--space-6);padding-block:var(--space-7)}
+@media(min-width:720px){.c-footer-social__grid{grid-template-columns:1fr 1fr;align-items:start}}
+.c-footer-social__brand{display:grid;gap:var(--space-4);align-content:start;max-width:22rem}
+.c-footer-social__brand p{margin:0}
+.c-footer-social__details{display:grid;gap:var(--space-2);align-content:start}
+@media(min-width:720px){.c-footer-social__details{text-align:right}}
+.c-footer-social__details p{margin:0}
+.c-footer-social__details strong{color:var(--color-text);font-weight:600}

package/blocks/footer/footer-social/template.html

@@ -0,0 +1 @@
+<footer class="c-footer-social"><div class="wrap"><div class="c-footer-social__grid"><div class="c-footer-social__brand"><a class="brand" href="/"><slot name="brand"></slot></a><slot name="tagline"></slot><div class="c-footer-social__social"><slot name="social"></slot></div></div><div class="c-footer-social__details"><slot name="details"></slot></div></div><div class="c-footer-social__legal"><slot name="legal"></slot></div></div></footer>

package/blocks/footer/footer-wordmark/README.md

@@ -0,0 +1,40 @@
+# footer-wordmark
+
+Directory footer with a giant clipped wordmark.
+
+- **Category:** footer
+- **Media:** logo optional
+- **Registers:** trade, b2b, beauty
+- **Variants:** dark
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `brand` | Business name or logo |
+| `tagline` | `<p>` one line about the business |
+| `social` | Optional icon links (`<a aria-label>` with `.icon`) |
+| `columns` | 2–3 `<div>`: `<h3>` heading then `<a>` links |
+| `wordmark` | `<span>` short brand word (1–2 words) rendered huge |
+| `legal` | `<a>` links + a trailing `<span>` copyright |
+
+## Example
+
+```html
+<footer-wordmark>
+  <span slot="brand">Apex Roofing</span>
+  <p slot="tagline">Done in days. Built for decades.</p>
+  <a slot="social" href="https://instagram.com/example" aria-label="Instagram" rel="noopener"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r=".8"/></svg></a>
+  <a slot="social" href="https://facebook.com/example" aria-label="Facebook" rel="noopener"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 8h3V4h-3a4 4 0 0 0-4 4v3H7v4h3v6h4v-6h3l1-4h-4V8z"/></svg></a>
+  <div slot="columns"><h3>Menu</h3><a href="/services">Services</a><a href="/about">About</a><a href="/blog">Blog</a><a href="/faq">FAQ</a><a href="/contact">Contact</a></div>
+  <div slot="columns"><h3>Services</h3><a href="/services/roofing">Roofing</a><a href="/services/gutters">Gutters</a><a href="/services/siding">Siding</a><a href="/services/windows">Windows</a><a href="/services/masonry">Masonry</a></div>
+  <span slot="wordmark">Apex</span>
+  <a slot="legal" href="/privacy">Privacy policy</a>
+  <a slot="legal" href="/cookie-compliance">Cookie compliance</a>
+  <span slot="legal">© 2026 Apex Roofing · Licensed &amp; insured · Serving Greater Portland</span>
+</footer-wordmark>
+```
+
+Variants: `<footer-wordmark 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/footer/footer-wordmark/styles.css

@@ -0,0 +1,19 @@
+.c-footer-wordmark{border-top:1px solid var(--color-border);font-size:var(--step-0);color:var(--color-muted)}
+.c-footer-wordmark a:not([class*="btn"]){color:var(--color-muted);text-decoration:none}
+.c-footer-wordmark a:not([class*="btn"]):hover{color:var(--color-text)}
+.c-footer-wordmark .brand{color:var(--color-text)}
+.c-footer-wordmark__legal{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);align-items:center;padding-block:var(--space-4);border-top:1px solid var(--color-border)}
+.c-footer-wordmark__legal > span{margin-inline-start:auto}
+.c-footer-wordmark__social{display:flex;gap:var(--space-2)}
+.c-footer-wordmark__social a{display:inline-grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:var(--radius-pill);border:1px solid var(--color-border)}
+.c-footer-wordmark__social a:hover{border-color:var(--color-text)}
+.c-footer-wordmark{overflow:hidden}
+.c-footer-wordmark__grid{display:flex;flex-wrap:wrap;gap:var(--space-7) var(--space-6);padding-block:var(--space-8) var(--space-7)}
+.c-footer-wordmark__brand{display:grid;gap:var(--space-4);align-content:start;flex:1 1 100%;max-width:24rem}
+.c-footer-wordmark__brand p{margin:0;font-family:var(--font-display);font-size:var(--step-2);line-height:1.2;color:var(--color-text)}
+.c-footer-wordmark__social:empty{display:none}
+.c-footer-wordmark__grid > div:not(.c-footer-wordmark__brand){display:grid;gap:var(--space-2);align-content:start;flex:1 1 9rem}
+.c-footer-wordmark__grid h3{font-family:var(--font-body);font-size:var(--step-0);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text);margin-bottom:var(--space-2)}
+.c-footer-wordmark__mark{font-family:var(--font-display);font-weight:700;font-size:clamp(4.5rem,19vw,17rem);line-height:.82;letter-spacing:-.05em;color:var(--color-accent);text-align:right;white-space:nowrap;user-select:none;padding-top:var(--space-4)}
+@media(min-width:900px){.c-footer-wordmark__brand{flex:0 1 24rem;margin-inline-end:auto}}
+.c-footer-wordmark--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/footer/footer-wordmark/template.html

@@ -0,0 +1 @@
+<footer class="c-footer-wordmark"><div class="wrap"><div class="c-footer-wordmark__grid"><div class="c-footer-wordmark__brand"><a class="brand" href="/"><slot name="brand"></slot></a><slot name="tagline"></slot><div class="c-footer-wordmark__social"><slot name="social"></slot></div></div><slot name="columns"></slot></div><div class="c-footer-wordmark__mark" aria-hidden="true"><slot name="wordmark"></slot></div><div class="c-footer-wordmark__legal"><slot name="legal"></slot></div></div></footer>

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

@@ -0,0 +1,31 @@
+# gallery-before-after
+
+Before/after project cases.
+
+- **Category:** gallery
+- **Media:** paired photos
+- **Registers:** trade
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` |
+| `cases` | 2 or 4 `<figure class="c-gallery-before-after__case">`: a `.before-after[data-island]` with two same-crop `<img>` + handle, then `<figcaption>` with `<h3>` + `<p>` |
+
+## Example
+
+```html
+<gallery-before-after>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Before &amp; after</p>
+  <h2 slot="heading">Drag the handle.</h2>
+  <p slot="lede" class="lede">Same angle, same lens, a weekend apart.</p>
+  <figure slot="cases" class="c-gallery-before-after__case"><div class="before-after" data-island="before-after"><img src="/media/harvest/ba1-before.jpg" alt="Before" width="1600" height="1000" class="before-after__before" loading="lazy"><img src="/media/harvest/ba1-after.jpg" alt="After" width="1600" height="1000" class="before-after__after" loading="lazy"><span class="before-after__label before-after__label--before" aria-hidden="true">Before</span><span class="before-after__label before-after__label--after" aria-hidden="true">After</span><div class="before-after__handle" aria-hidden="true"></div></div><figcaption><h3>Kitchen refresh · Deering</h3><p>Cabinets repainted, new hardware and lighting · 3 days</p></figcaption></figure>
+  <figure slot="cases" class="c-gallery-before-after__case"><div class="before-after" data-island="before-after"><img src="/media/harvest/ba2-before.jpg" alt="Before" width="1600" height="1000" class="before-after__before" loading="lazy"><img src="/media/harvest/ba2-after.jpg" alt="After" width="1600" height="1000" class="before-after__after" loading="lazy"><span class="before-after__label before-after__label--before" aria-hidden="true">Before</span><span class="before-after__label before-after__label--after" aria-hidden="true">After</span><div class="before-after__handle" aria-hidden="true"></div></div><figcaption><h3>Exterior · Falmouth</h3><p>Full prep, two coats, trim in contrasting white · 4 days</p></figcaption></figure>
+</gallery-before-after>
+```
+
+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/gallery/gallery-before-after/styles.css

@@ -0,0 +1,6 @@
+.c-gallery-before-after__grid{--gap:var(--space-6)}
+.c-gallery-before-after__case{margin:0;display:grid;gap:var(--space-4)}
+.c-gallery-before-after__case .before-after{box-shadow:var(--shadow-2)}
+.c-gallery-before-after__case figcaption{display:grid;gap:var(--space-1)}
+.c-gallery-before-after__case h3{font-size:var(--step-1)}
+.c-gallery-before-after__case p{margin:0;color:var(--color-muted);font-size:var(--step-0)}

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

@@ -0,0 +1 @@
+<section class="c-gallery-before-after section section--muted"><div class="wrap"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="grid grid--2 c-gallery-before-after__grid"><slot name="cases"></slot></div></div></section>

package/blocks/gallery/gallery-carousel/README.md

@@ -0,0 +1,32 @@
+# gallery-carousel
+
+Full-bleed project carousel.
+
+- **Category:** gallery
+- **Media:** photos
+- **Registers:** trade, beauty, food
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` |
+| `items` | 4–8 `<figure>` slides: `.frame.ratio-16x9` with `<img>`, then `<figcaption>` |
+
+## Example
+
+```html
+<gallery-carousel>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Projects</p>
+  <h2 slot="heading">A few from the last twelve months</h2>
+  <figure slot="items"><div class="frame ratio-16x9"><img src="/media/harvest/p1.jpg" alt="Standing-seam roof on a farmhouse" width="1600" height="900" loading="lazy"></div><figcaption><strong>Falmouth farmhouse</strong>Standing-seam metal, 3 days</figcaption></figure>
+  <figure slot="items"><div class="frame ratio-16x9"><img src="/media/harvest/p2.jpg" alt="Shingle roof on a colonial" width="1600" height="900" loading="lazy"></div><figcaption><strong>Deering colonial</strong>Architectural shingles, 2 days</figcaption></figure>
+  <figure slot="items"><div class="frame ratio-16x9"><img src="/media/harvest/p3.jpg" alt="Cedar shake roof near the ocean" width="1600" height="900" loading="lazy"></div><figcaption><strong>Cape Elizabeth</strong>Cedar shake, 5 days</figcaption></figure>
+  <figure slot="items"><div class="frame ratio-16x9"><img src="/media/harvest/p4.jpg" alt="Flat roof on a commercial building" width="1600" height="900" loading="lazy"></div><figcaption><strong>Bayside warehouse</strong>EPDM flat roof, 4 days</figcaption></figure>
+</gallery-carousel>
+```
+
+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/gallery/gallery-carousel/styles.css

@@ -0,0 +1,7 @@
+.c-gallery-carousel__head{display:flex;align-items:end;justify-content:space-between;gap:var(--space-5)}
+.c-gallery-carousel__head .section__head,.c-gallery-carousel__head .carousel__nav{margin-bottom:var(--space-6)}
+.c-gallery-carousel__carousel .carousel__track{gap:var(--space-5)}
+.c-gallery-carousel__carousel .carousel__track > *{flex-basis:min(88%,34rem);margin:0;display:grid;gap:var(--space-3)}
+.c-gallery-carousel__carousel .frame{box-shadow:none}
+.c-gallery-carousel__carousel figcaption{font-size:var(--step-0);color:var(--color-muted)}
+.c-gallery-carousel__carousel figcaption strong{color:var(--color-text);font-weight:600;margin-right:.35rem}

package/blocks/gallery/gallery-carousel/template.html

@@ -0,0 +1 @@
+<section class="c-gallery-carousel section"><div class="wrap"><div class="c-gallery-carousel__head"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="carousel__nav"><button type="button" data-carousel-prev aria-label="Previous"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m15 6-6 6 6 6"/></svg></button><button type="button" data-carousel-next aria-label="Next"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></button></div></div></div><div class="wrap carousel c-gallery-carousel__carousel" data-island="carousel" tabindex="0"><div class="carousel__track"><slot name="items"></slot></div></div></section>

package/blocks/gallery/gallery-grid/README.md

@@ -0,0 +1,39 @@
+# gallery-grid
+
+Responsive photo grid.
+
+- **Category:** gallery
+- **Media:** photos
+- **Registers:** trade, beauty, food
+- **Variants:** four
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` |
+| `actions` | Optional link (e.g. "All projects") |
+| `items` | 6 or 9 `<button class="c-gallery-grid__tile ratio-1x1" data-lightbox-src data-lightbox-alt>` each wrapping an `<img>` |
+
+## Example
+
+```html
+<gallery-grid>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Recent work</p>
+  <h2 slot="heading">Roofs we finished this season</h2>
+  <p slot="lede" class="lede">Tap any photo to enlarge.</p>
+  <a slot="actions" class="btn-outline" href="/work">All projects</a>
+  <button slot="items" type="button" class="c-gallery-grid__tile ratio-1x1" data-lightbox-src="/media/harvest/g1.jpg" data-lightbox-alt="Standing-seam metal roof, Falmouth"><img src="/media/harvest/g1.jpg" alt="Standing-seam metal roof, Falmouth" width="1200" height="1200" loading="lazy"></button>
+  <button slot="items" type="button" class="c-gallery-grid__tile ratio-1x1" data-lightbox-src="/media/harvest/g2.jpg" data-lightbox-alt="Architectural shingles, Deering"><img src="/media/harvest/g2.jpg" alt="Architectural shingles, Deering" width="1200" height="1200" loading="lazy"></button>
+  <button slot="items" type="button" class="c-gallery-grid__tile ratio-1x1" data-lightbox-src="/media/harvest/g3.jpg" data-lightbox-alt="Cedar shake, Cape Elizabeth"><img src="/media/harvest/g3.jpg" alt="Cedar shake, Cape Elizabeth" width="1200" height="1200" loading="lazy"></button>
+  <button slot="items" type="button" class="c-gallery-grid__tile ratio-1x1" data-lightbox-src="/media/harvest/g4.jpg" data-lightbox-alt="Copper bay window roof, West End"><img src="/media/harvest/g4.jpg" alt="Copper bay window roof, West End" width="1200" height="1200" loading="lazy"></button>
+  <button slot="items" type="button" class="c-gallery-grid__tile ratio-1x1" data-lightbox-src="/media/harvest/g5.jpg" data-lightbox-alt="Flat EPDM roof, Bayside"><img src="/media/harvest/g5.jpg" alt="Flat EPDM roof, Bayside" width="1200" height="1200" loading="lazy"></button>
+  <button slot="items" type="button" class="c-gallery-grid__tile ratio-1x1" data-lightbox-src="/media/harvest/g6.jpg" data-lightbox-alt="Slate repair, Munjoy Hill"><img src="/media/harvest/g6.jpg" alt="Slate repair, Munjoy Hill" width="1200" height="1200" loading="lazy"></button>
+</gallery-grid>
+```
+
+Variants: `<gallery-grid variant="four">`.
+
+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/gallery/gallery-grid/styles.css

@@ -0,0 +1,13 @@
+.c-gallery-grid__grid{--gap:var(--space-3);grid-template-columns:repeat(2,minmax(0,1fr))}
+@media(min-width:720px){.c-gallery-grid__grid{--gap:var(--space-4);grid-template-columns:repeat(3,minmax(0,1fr))}}
+.c-gallery-grid__tile{display:block;width:100%;padding:0;border:0;background:var(--color-surface-2);cursor:zoom-in;overflow:hidden;border-radius:var(--radius-lg)}
+.c-gallery-grid__tile img{transition:transform 500ms ease}
+.c-gallery-grid__tile:hover img{transform:scale(1.04)}
+.c-gallery-grid__tile:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
+.c-gallery-grid__dialog{padding:0;border:0;background:transparent;max-width:min(92vw,72rem);max-height:92vh;overflow:visible}
+.c-gallery-grid__dialog::backdrop{background:color-mix(in srgb,var(--color-text) 85%,transparent);backdrop-filter:blur(4px)}
+.c-gallery-grid__dialog img{max-width:100%;max-height:88vh;width:auto;height:auto;border-radius:var(--radius-lg);margin:auto}
+.c-gallery-grid__dialog form{position:absolute;top:var(--space-2);right:var(--space-2);margin:0}
+.c-gallery-grid__close{background:color-mix(in srgb,var(--color-text) 60%,transparent);color:var(--color-bg)}
+.c-gallery-grid__close:hover{background:color-mix(in srgb,var(--color-text) 80%,transparent)}
+@media(min-width:1080px){.c-gallery-grid--four .c-gallery-grid__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

package/blocks/gallery/gallery-grid/template.html

@@ -0,0 +1 @@
+<section class="c-gallery-grid section" data-island="lightbox"><div class="wrap"><div class="section__head section__head--row"><div class="stack stack--tight"><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="grid grid--3 c-gallery-grid__grid"><slot name="items"></slot></div><dialog class="c-gallery-grid__dialog"><img alt=""><form method="dialog"><button type="submit" class="btn-ghost btn-icon c-gallery-grid__close" data-lightbox-close aria-label="Close"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m4 4 16 16M20 4 4 20"/></svg></button></form></dialog></div></section>

package/blocks/gallery/gallery-masonry/README.md

@@ -0,0 +1,33 @@
+# gallery-masonry
+
+Mixed aspect gallery.
+
+- **Category:** gallery
+- **Media:** photos
+- **Registers:** beauty, food, trade
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` |
+| `items` | 5–8 `<figure class="frame">` tiles with `bento__wide` / `bento__tall` / `bento__narrow` spans and an `<img>` each; optional `<figcaption>` |
+
+## Example
+
+```html
+<gallery-masonry>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">The space</p>
+  <h2 slot="heading">Come see the salon</h2>
+  <figure slot="items" class="frame bento__wide bento__tall"><img src="/media/harvest/salon-1.jpg" alt="Main floor with six chairs" width="1600" height="1600" loading="lazy"><figcaption>Main floor</figcaption></figure>
+  <figure slot="items" class="frame bento__narrow"><img src="/media/harvest/salon-2.jpg" alt="Color bar" width="900" height="900" loading="lazy"><figcaption>Color bar</figcaption></figure>
+  <figure slot="items" class="frame bento__narrow"><img src="/media/harvest/salon-3.jpg" alt="Wash stations" width="900" height="900" loading="lazy"><figcaption>Wash</figcaption></figure>
+  <figure slot="items" class="frame"><img src="/media/harvest/salon-4.jpg" alt="Product wall" width="1200" height="900" loading="lazy"><figcaption>Retail</figcaption></figure>
+  <figure slot="items" class="frame"><img src="/media/harvest/salon-5.jpg" alt="Waiting area" width="1200" height="900" loading="lazy"><figcaption>Lounge</figcaption></figure>
+</gallery-masonry>
+```
+
+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/gallery/gallery-masonry/styles.css

@@ -0,0 +1,4 @@
+@media(min-width:720px){.c-gallery-masonry__grid{grid-auto-rows:12rem}}
+.c-gallery-masonry__grid > *{margin:0;position:relative;min-height:12rem;box-shadow:none}
+.c-gallery-masonry__grid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
+.c-gallery-masonry__grid figcaption{position:absolute;left:var(--space-3);bottom:var(--space-3);padding:.25rem .65rem;border-radius:var(--radius-pill);font-size:var(--step-0);font-weight:600;background:color-mix(in srgb,var(--color-bg) 85%,transparent);color:var(--color-text)}

package/blocks/gallery/gallery-masonry/template.html

@@ -0,0 +1 @@
+<section class="c-gallery-masonry 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="bento c-gallery-masonry__grid"><slot name="items"></slot></div></div></section>

package/blocks/gallery/gallery-mosaic-split/README.md

@@ -0,0 +1,40 @@
+# gallery-mosaic-split
+
+Copy beside a photo mosaic with one quote tile mixed in.
+
+- **Category:** gallery
+- **Media:** 5–6 photos
+- **Registers:** trade, beauty, food
+- **Variants:** 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 |
+| `tiles` | 5–7 `<div class="frame"><img></div>` tiles (add `is-tall` to one or two) and optionally one `<figure class="card">` quote tile |
+
+## Example
+
+```html
+<gallery-mosaic-split>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Recent work</p>
+  <h2 slot="heading">Across Greater Portland.</h2>
+  <p slot="lede" class="lede">Every roof gets the same care: a clean tear-off, solid decking, and photos of the finished job for your records.</p>
+  <a slot="actions" class="btn" href="/contact">Get a free estimate</a>
+  <a slot="actions" class="btn-arrow" href="/work">View our work <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
+  <div slot="tiles" class="frame is-tall"><img src="/media/harvest/rw-1.jpg" alt="Finished slate-grey roof from above" width="900" height="1200" loading="lazy"></div>
+  <div slot="tiles" class="frame"><img src="/media/harvest/rw-2.jpg" alt="Crew member fastening drip edge" width="1200" height="900" loading="lazy"></div>
+  <figure slot="tiles" class="card"><blockquote class="card__body"><p class="quote quote--card">“They tarped the roof the same night the hail hit, and new shingles were on ten days later.”</p></blockquote><figcaption class="card__footer byline"><div><strong>Dana W.</strong><span>Yarmouth</span></div></figcaption></figure>
+  <div slot="tiles" class="frame"><img src="/media/harvest/rw-3.jpg" alt="Farmhouse with new standing-seam roof" width="1200" height="900" loading="lazy"></div>
+  <div slot="tiles" class="frame"><img src="/media/harvest/rw-4.jpg" alt="Cedar shake detail" width="1200" height="900" loading="lazy"></div>
+  <div slot="tiles" class="frame"><img src="/media/harvest/rw-5.jpg" alt="Crew on a ridge line at sunset" width="1200" height="900" loading="lazy"></div>
+</gallery-mosaic-split>
+```
+
+Variants: `<gallery-mosaic-split 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.