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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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