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

package/blocks/team/team-list/README.md

@@ -0,0 +1,32 @@
+# team-list
+
+Compact name/role list.
+
+- **Category:** team
+- **Media:** optional avatars
+- **Registers:** professional, b2b
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` |
+| `people` | 4–10 `<li>`: `<img class="avatar">`, a `<div>` with `<strong>` name + `<span>` role, optional trailing `<a>` (email/LinkedIn) |
+
+## Example
+
+```html
+<team-list>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">People</p>
+  <h2 slot="heading">Who you'll work with</h2>
+  <li slot="people"><img src="/media/harvest/avatar-1.jpg" alt="" width="96" height="96" class="avatar"><div><strong>Rachel Osei</strong><span>Partner · estates &amp; trusts</span></div><a href="mailto:rachel@example.com">rachel@example.com</a></li>
+  <li slot="people"><img src="/media/harvest/avatar-2.jpg" alt="" width="96" height="96" class="avatar"><div><strong>Daniel Whitcomb</strong><span>Partner · probate &amp; elder law</span></div><a href="mailto:daniel@example.com">daniel@example.com</a></li>
+  <li slot="people"><img src="/media/harvest/avatar-3.jpg" alt="" width="96" height="96" class="avatar"><div><strong>Maya Torres</strong><span>Paralegal</span></div><a href="mailto:maya@example.com">maya@example.com</a></li>
+  <li slot="people"><img src="/media/harvest/avatar-4.jpg" alt="" width="96" height="96" class="avatar"><div><strong>Ben Carver</strong><span>Client coordinator</span></div><a href="tel:+15550102000">(555) 010-2000</a></li>
+</team-list>
+```
+
+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/team/team-list/styles.css

@@ -0,0 +1,7 @@
+.c-team-list__rows{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--color-border);max-width:52rem}
+.c-team-list__rows > *{display:flex;gap:var(--space-4);align-items:center;padding:var(--space-4) 0;border-bottom:1px solid var(--color-border)}
+.c-team-list__rows > * > div{display:grid;flex:1}
+.c-team-list__rows strong{font-weight:600}
+.c-team-list__rows span{color:var(--color-muted);font-size:var(--step-0)}
+.c-team-list__rows > * > a{color:var(--color-muted);font-size:var(--step-0);text-decoration:none}
+.c-team-list__rows > * > a:hover{color:var(--color-text)}

package/blocks/team/team-list/template.html

@@ -0,0 +1 @@
+<section class="c-team-list section"><div class="wrap"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><ul class="c-team-list__rows"><slot name="people"></slot></ul></div></section>

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

@@ -0,0 +1,32 @@
+# testimonial-carousel
+
+Buttoned testimonial carousel.
+
+- **Category:** testimonial
+- **Media:** portraits
+- **Registers:** trade, beauty, food
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` |
+| `cards` | 4–8 testimonial `<figure class="card">` slides (same markup as testimonial-grid) |
+
+## Example
+
+```html
+<testimonial-carousel>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">What clients say</p>
+  <h2 slot="heading">Rated 4.9 across 212 reviews</h2>
+  <figure slot="cards" class="card"><blockquote class="card__body"><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><p class="quote quote--card">“Showed up when they said they would, finished a day early, and the yard was cleaner than when they started.”</p></blockquote><figcaption class="card__footer byline"><img src="/media/harvest/review-1.jpg" alt="" width="96" height="96" class="avatar"><div><strong>Jordan P.</strong><span>Deering Center</span></div></figcaption></figure>
+  <figure slot="cards" class="card"><blockquote class="card__body"><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><p class="quote quote--card">“The estimate had every line explained. The final invoice matched it to the dollar.”</p></blockquote><figcaption class="card__footer byline"><img src="/media/harvest/review-2.jpg" alt="" width="96" height="96" class="avatar"><div><strong>Dana K.</strong><span>South Portland</span></div></figcaption></figure>
+  <figure slot="cards" class="card"><blockquote class="card__body"><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><p class="quote quote--card">“Two other companies said replace. Harbor fixed the flashing for $600 and it hasn't leaked since.”</p></blockquote><figcaption class="card__footer byline"><img src="/media/harvest/review-3.jpg" alt="" width="96" height="96" class="avatar"><div><strong>Chris M.</strong><span>Cape Elizabeth</span></div></figcaption></figure>
+  <figure slot="cards" class="card"><blockquote class="card__body"><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><p class="quote quote--card">“Our property management company has used them on eleven buildings. Same crew, same quality, every time.”</p></blockquote><figcaption class="card__footer byline"><img src="/media/harvest/review-4.jpg" alt="" width="96" height="96" class="avatar"><div><strong>Priya S.</strong><span>Bayside Property Group</span></div></figcaption></figure>
+</testimonial-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/testimonial/testimonial-carousel/styles.css

@@ -0,0 +1,7 @@
+.c-testimonial-carousel .card blockquote{margin:0;gap:var(--space-4)}
+.c-testimonial-carousel .card .quote{color:var(--color-text)}
+.c-testimonial-carousel .card .card__footer{border-top:1px solid var(--color-border);background:color-mix(in srgb,var(--color-surface-2) 60%,transparent)}
+.c-testimonial-carousel .card .rating .icon{width:1rem;height:1rem}
+.c-testimonial-carousel__head{display:flex;align-items:end;justify-content:space-between;gap:var(--space-5)}
+.c-testimonial-carousel__head .section__head,.c-testimonial-carousel__head .carousel__nav{margin-bottom:var(--space-6)}
+.c-testimonial-carousel__carousel .carousel__track > *{flex-basis:min(88%,24rem);display:flex;flex-direction:column}

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

@@ -0,0 +1 @@
+<section class="c-testimonial-carousel section"><div class="wrap"><div class="c-testimonial-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-testimonial-carousel__carousel" data-island="carousel" tabindex="0"><div class="carousel__track"><slot name="cards"></slot></div></div></section>

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

@@ -0,0 +1,32 @@
+# testimonial-grid
+
+Three testimonial cards.
+
+- **Category:** testimonial
+- **Media:** portraits optional
+- **Registers:** all
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` |
+| `cards` | 3 or 6 `<figure class="card">`: `<blockquote class="card__body">` with `.rating` + `<p class="quote quote--card">`, then `<figcaption class="card__footer byline">` with avatar + name + context |
+
+## Example
+
+```html
+<testimonial-grid>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Reviews</p>
+  <h2 slot="heading">Neighbors, not testimonials.</h2>
+  <p slot="lede" class="lede">Every review below is from a Portland-area homeowner we've worked for since 2020.</p>
+  <figure slot="cards" class="card"><blockquote class="card__body"><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><p class="quote quote--card">“Showed up when they said they would, finished a day early, and the yard was cleaner than when they started.”</p></blockquote><figcaption class="card__footer byline"><img src="/media/harvest/review-1.jpg" alt="" width="96" height="96" class="avatar"><div><strong>Jordan P.</strong><span>Deering Center · full replacement</span></div></figcaption></figure>
+  <figure slot="cards" class="card"><blockquote class="card__body"><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><p class="quote quote--card">“The estimate had every line explained. The final invoice matched it to the dollar. That never happens.”</p></blockquote><figcaption class="card__footer byline"><img src="/media/harvest/review-2.jpg" alt="" width="96" height="96" class="avatar"><div><strong>Dana K.</strong><span>South Portland · repair + gutters</span></div></figcaption></figure>
+  <figure slot="cards" class="card"><blockquote class="card__body"><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><p class="quote quote--card">“Two other companies said replace. Harbor fixed the flashing for $600 and it hasn't leaked in three winters.”</p></blockquote><figcaption class="card__footer byline"><img src="/media/harvest/review-3.jpg" alt="" width="96" height="96" class="avatar"><div><strong>Chris M.</strong><span>Cape Elizabeth · leak repair</span></div></figcaption></figure>
+</testimonial-grid>
+```
+
+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/testimonial/testimonial-grid/styles.css

@@ -0,0 +1,5 @@
+.c-testimonial-grid .card blockquote{margin:0;gap:var(--space-4)}
+.c-testimonial-grid .card .quote{color:var(--color-text)}
+.c-testimonial-grid .card .card__footer{border-top:1px solid var(--color-border);background:color-mix(in srgb,var(--color-surface-2) 60%,transparent)}
+.c-testimonial-grid .card .rating .icon{width:1rem;height:1rem}
+.c-testimonial-grid__grid{align-items:stretch}

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

@@ -0,0 +1 @@
+<section class="c-testimonial-grid section section--muted"><div class="wrap"><div class="section__head section__head--center"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="grid grid--3 c-testimonial-grid__grid"><slot name="cards"></slot></div></div></section>

package/blocks/testimonial/testimonial-mosaic/README.md

@@ -0,0 +1,38 @@
+# testimonial-mosaic
+
+Bento of quote cards, stat tiles, and portraits.
+
+- **Category:** testimonial
+- **Media:** 2–3 portraits
+- **Registers:** professional, b2b, beauty
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` (one sentence) |
+| `tiles` | 6–9 tiles: `<figure class="card">` quotes (add `data-scheme="dark"` to one), `<div class="card card--flat"><div class="card__body stat">…</div></div>` stats, `<div class="frame"><img></div>` portraits; add `is-wide` / `is-tall` to span |
+
+## Example
+
+```html
+<testimonial-mosaic>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Testimonials</p>
+  <h2 slot="heading">What our clients say.</h2>
+  <p slot="lede" class="lede">Most of our work stays private. With permission, these are some of the clients we've helped — in their own words.</p>
+  <figure slot="tiles" class="card is-wide"><blockquote class="card__body"><p class="quote quote--card">“Three other firms told us this would be a multi-year discovery slog. Verdict took it apart at the threshold. That is the difference.”</p></blockquote><figcaption class="card__footer byline"><img src="/media/harvest/avatar-5.jpg" alt="" width="96" height="96" class="avatar"><div><strong>Catherine Anderson</strong><span>General Counsel, Fortune 100 producer</span></div></figcaption></figure>
+  <div slot="tiles" class="frame"><img src="/media/harvest/portrait-1.jpg" alt="Client portrait" width="900" height="900" loading="lazy"></div>
+  <div slot="tiles" class="card card--flat"><div class="card__body stat"><p class="stat__value">$1.2B</p><p class="stat__label">Client money protected and recovered</p></div></div>
+  <div slot="tiles" class="card card--flat"><div class="card__body stat"><p class="stat__value">47</p><p class="stat__label">Trials won at verdict</p></div></div>
+  <figure slot="tiles" class="card is-wide" data-scheme="dark"><blockquote class="card__body"><p class="quote quote--card">“They were ready in two weeks. The other side needed two months, and it showed in court.”</p></blockquote><figcaption class="card__footer byline"><div><strong>Luis Escobar</strong><span>Founder, Meridian</span></div></figcaption></figure>
+  <div slot="tiles" class="frame"><img src="/media/harvest/portrait-2.jpg" alt="Client portrait" width="900" height="900" loading="lazy"></div>
+  <figure slot="tiles" class="card is-wide"><blockquote class="card__body"><p class="quote quote--card">“Honest from day one. They told us which fights were worth having and which weren't — and they were right every time.”</p></blockquote><figcaption class="card__footer byline"><img src="/media/harvest/avatar-6.jpg" alt="" width="96" height="96" class="avatar"><div><strong>Marco Delgado</strong><span>CEO, Delgado Foods</span></div></figcaption></figure>
+  <div slot="tiles" class="card card--flat"><div class="card__body stat"><p class="stat__value">100%</p><p class="stat__label">Partner-led from first call</p></div></div>
+  <figure slot="tiles" class="card"><blockquote class="card__body"><p class="quote quote--card">“The estimate was the invoice.”</p></blockquote><figcaption class="card__footer byline"><div><strong>Priya Raman</strong><span>Owner, Raman Dental</span></div></figcaption></figure>
+</testimonial-mosaic>
+```
+
+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/testimonial/testimonial-mosaic/styles.css

@@ -0,0 +1,14 @@
+.c-testimonial-mosaic__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(11rem,auto);grid-auto-flow:dense;gap:var(--space-3)}
+.c-testimonial-mosaic__grid > .is-wide{grid-column:span 2}
+.c-testimonial-mosaic__grid > .is-tall{grid-row:span 2}
+.c-testimonial-mosaic__grid figure{margin:0}
+.c-testimonial-mosaic__grid .card__body{align-content:space-between;padding:var(--space-5)}
+.c-testimonial-mosaic__grid blockquote{margin:0}
+.c-testimonial-mosaic__grid .quote--card{font-size:var(--step-0);line-height:1.55}
+.c-testimonial-mosaic__grid .is-wide .quote--card{font-size:var(--step-1)}
+.c-testimonial-mosaic__grid .card__footer{padding:var(--space-3) var(--space-5)}
+.c-testimonial-mosaic__grid .byline strong,.c-testimonial-mosaic__grid .byline span{font-size:var(--step-0)}
+.c-testimonial-mosaic__grid .stat .stat__value{font-size:var(--step-4)}
+.c-testimonial-mosaic__grid .frame{box-shadow:none}
+.c-testimonial-mosaic__grid .frame img{width:100%;height:100%;object-fit:cover}
+@media(min-width:900px){.c-testimonial-mosaic__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}}

package/blocks/testimonial/testimonial-mosaic/template.html

@@ -0,0 +1 @@
+<section class="c-testimonial-mosaic section"><div class="wrap"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="c-testimonial-mosaic__grid"><slot name="tiles"></slot></div></div></section>

package/blocks/testimonial/testimonial-platform/README.md

@@ -0,0 +1,34 @@
+# testimonial-platform
+
+Review-platform card: big rating, three recent reviews, "write a review" link.
+
+- **Category:** testimonial
+- **Media:** small portraits
+- **Registers:** trade, beauty, food
+- **Variants:** dark
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `rating` | `<p class="stat__value">4.9</p>` |
+| `summary` | `<p>` stars + review count + platform |
+| `actions` | Optional 1–2 buttons / `.btn-arrow` links |
+| `reviews` | 2–3 `<article class="card"><div class="card__body"><div class="byline">…</div>stars<p>…</p></div></article>` |
+
+## Example
+
+```html
+<testimonial-platform>
+  <p slot="rating" class="stat__value">4.9</p>
+  <p slot="summary"><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>
+  <a slot="actions" class="btn-outline" href="https://g.page/example/review" rel="noopener">Write a review</a>
+  <article slot="reviews" class="card"><div class="card__body"><div class="byline"><img src="/media/harvest/avatar-7.jpg" alt="" width="96" height="96" class="avatar"><div><strong>Karen Doyle</strong><span>2 weeks ago</span></div></div><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><p>Great service, highly recommend. The crew was on time both days and the yard was cleaner when they left.</p></div></article>
+  <article slot="reviews" class="card"><div class="card__body"><div class="byline"><img src="/media/harvest/avatar-8.jpg" alt="" width="96" height="96" class="avatar"><div><strong>Gary Hutchins</strong><span>1 month ago</span></div></div><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><p>Outstanding from the first visit to the final walkthrough. They photographed every layer as they went.</p></div></article>
+  <article slot="reviews" class="card"><div class="card__body"><div class="byline"><img src="/media/harvest/avatar-9.jpg" alt="" width="96" height="96" class="avatar"><div><strong>Janet Solomon</strong><span>1 month ago</span></div></div><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><p>Fair price, no upsell, and the estimate matched the invoice to the dollar.</p></div></article>
+</testimonial-platform>
+```
+
+Variants: `<testimonial-platform 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/testimonial/testimonial-platform/styles.css

@@ -0,0 +1,17 @@
+.c-testimonial-platform__card{display:grid;gap:var(--space-6);padding:var(--space-6);background:var(--color-surface-2);border-color:transparent}
+.c-testimonial-platform__summary{display:grid;gap:var(--space-2);align-content:center;justify-items:start}
+.c-testimonial-platform__summary .stat__value{font-size:var(--step-6, var(--step-5))}
+.c-testimonial-platform__summary p{margin:0;color:var(--color-muted)}
+.c-testimonial-platform__summary .rating{vertical-align:-.15em;margin-right:.25rem}
+.c-testimonial-platform__summary .btn-group{margin-top:var(--space-3)}
+.c-testimonial-platform__summary .btn-group:empty{display:none}
+.c-testimonial-platform__reviews{display:grid;gap:var(--space-3)}
+.c-testimonial-platform__reviews .card{background:var(--color-surface)}
+.c-testimonial-platform__reviews .card__body{gap:var(--space-3);padding:var(--space-4)}
+.c-testimonial-platform__reviews .byline .avatar{width:2.25rem;height:2.25rem}
+.c-testimonial-platform__reviews .byline strong,.c-testimonial-platform__reviews .byline span{font-size:var(--step-0)}
+.c-testimonial-platform__reviews p{font-size:var(--step-0);color:var(--color-text)}
+@media(min-width:720px){.c-testimonial-platform__reviews{grid-template-columns:repeat(2,minmax(0,1fr))}}
+@media(min-width:1080px){.c-testimonial-platform__card{grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:var(--space-8);padding:var(--space-7)}.c-testimonial-platform__reviews{grid-template-columns:repeat(3,minmax(0,1fr))}}
+.c-testimonial-platform--dark .c-testimonial-platform__card{--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-testimonial-platform--dark .c-testimonial-platform__reviews .card{background:var(--color-surface)}

package/blocks/testimonial/testimonial-platform/template.html

@@ -0,0 +1 @@
+<section class="c-testimonial-platform section--tight"><div class="wrap"><div class="card c-testimonial-platform__card"><div class="c-testimonial-platform__summary"><slot name="rating"></slot><slot name="summary"></slot><div class="btn-group"><slot name="actions"></slot></div></div><div class="c-testimonial-platform__reviews"><slot name="reviews"></slot></div></div></div></section>

package/blocks/testimonial/testimonial-rating/README.md

@@ -0,0 +1,28 @@
+# testimonial-rating
+
+Star rating band with review count.
+
+- **Category:** testimonial
+- **Media:** none
+- **Registers:** trade, beauty, food, professional
+- **Variants:** muted
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `(default)` | One line: `<strong>4.9 / 5</strong>` + text |
+| `actions` | Optional `.btn-arrow` link to the review source |
+
+## Example
+
+```html
+<testimonial-rating>
+  <strong>4.9 out of 5</strong> from 212 Google reviews
+  <a slot="actions" class="btn-arrow" href="https://g.page/example/review" rel="noopener">Read them on Google</a>
+</testimonial-rating>
+```
+
+Variants: `<testimonial-rating 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/testimonial/testimonial-rating/styles.css

@@ -0,0 +1,6 @@
+.c-testimonial-rating{border-block:1px solid var(--color-border)}
+.c-testimonial-rating__row{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-5);align-items:center;justify-content:center;text-align:center}
+.c-testimonial-rating__row .rating .icon{width:1.25rem;height:1.25rem}
+.c-testimonial-rating__text{margin:0;color:var(--color-muted)}
+.c-testimonial-rating__text strong{color:var(--color-text)}
+.c-testimonial-rating--muted{background:var(--color-surface-2);border-block-color:transparent}

package/blocks/testimonial/testimonial-rating/template.html

@@ -0,0 +1 @@
+<section class="c-testimonial-rating section--tight"><div class="wrap c-testimonial-rating__row"><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><p class="c-testimonial-rating__text"><slot></slot></p><slot name="actions"></slot></div></section>

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

@@ -0,0 +1,31 @@
+# testimonial-spotlight
+
+Large quote with avatar attribution.
+
+- **Category:** testimonial
+- **Media:** portrait optional
+- **Registers:** all
+- **Variants:** dark
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `(default)` | One `<p>` — the quote, 1–3 sentences (quote marks added automatically) |
+| `avatar` | Optional `<img class="avatar avatar--lg">` |
+| `attribution` | `<strong>` name + `<span>` context |
+
+## Example
+
+```html
+<testimonial-spotlight>
+  <p>We interviewed four roofers. Harbor was the only one who went into the attic, and the only one whose estimate was still accurate on the last day of the job.</p>
+  <img src="/media/harvest/review-2.jpg" alt="" width="128" height="128" slot="avatar" class="avatar avatar--lg">
+  <strong slot="attribution">Dana Kowalski</strong>
+  <span slot="attribution">Homeowner, South Portland</span>
+</testimonial-spotlight>
+```
+
+Variants: `<testimonial-spotlight 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/testimonial/testimonial-spotlight/styles.css

@@ -0,0 +1,9 @@
+.c-testimonial-spotlight__inner{max-width:50rem;margin-inline:auto;text-align:center;display:grid;gap:var(--space-6);justify-items:center}
+.c-testimonial-spotlight__mark{display:inline-grid;place-items:center;width:3rem;height:3rem;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--color-accent) 12%,transparent);color:var(--color-accent)}
+.c-testimonial-spotlight__mark .icon{width:1.5rem;height:1.5rem;fill:currentColor;stroke:none}
+.c-testimonial-spotlight .quote p{margin:0}
+.c-testimonial-spotlight .quote p::before{content:"“"}
+.c-testimonial-spotlight .quote p::after{content:"”"}
+.c-testimonial-spotlight__byline{justify-content:center;text-align:left}
+.c-testimonial-spotlight__byline > div{display:grid}
+.c-testimonial-spotlight--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/testimonial/testimonial-spotlight/template.html

@@ -0,0 +1 @@
+<section class="c-testimonial-spotlight section section--roomy"><div class="wrap c-testimonial-spotlight__inner"><span class="c-testimonial-spotlight__mark" aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 7h4v6H5v-2a4 4 0 0 1 2-4zM15 7h4v6h-6v-2a4 4 0 0 1 2-4z"/></svg></span><blockquote class="quote quote--lg"><slot></slot></blockquote><div class="byline c-testimonial-spotlight__byline"><slot name="avatar"></slot><div><slot name="attribution"></slot></div></div></div></section>

package/blocks/testimonial/testimonial-switcher/README.md

@@ -0,0 +1,39 @@
+# testimonial-switcher
+
+Pick a reviewer, read their quote (tabs island).
+
+- **Category:** testimonial
+- **Media:** small portraits
+- **Registers:** trade, beauty, professional
+- **Variants:** avatars
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` (one sentence) |
+| `panels` | 3–6 `<blockquote role="tabpanel" id="…" class="quote">“…”<cite>Name · Context</cite></blockquote>` |
+| `tabs` | Matching `<button role="tab" type="button" class="tabs__tab" aria-controls="…"><img class="avatar"><span><strong>Name</strong><small>Job · Town</small></span></button>` (first has `aria-selected="true"`) |
+
+## Example
+
+```html
+<testimonial-switcher>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Five-star work</p>
+  <h2 slot="heading">In their words.</h2>
+  <blockquote slot="panels" role="tabpanel" id="rev-tommy" class="quote">“Every crew member could tell me exactly what was happening on my roof and why. You can feel it's the same team, job after job.”<cite>Tommy Nguyen · Re-deck, Falmouth</cite></blockquote>
+  <blockquote slot="panels" role="tabpanel" id="rev-karen" class="quote">“Storm damage on a Tuesday, tarped by Wednesday morning, new roof the next week. The insurance paperwork was handled for us.”<cite>Karen Doyle · Storm repair, Yarmouth</cite></blockquote>
+  <blockquote slot="panels" role="tabpanel" id="rev-luis" class="quote">“The estimate was the invoice. Nobody else we called would put that in writing.”<cite>Luis Herrera · Full replacement, Scarborough</cite></blockquote>
+  <blockquote slot="panels" role="tabpanel" id="rev-dana" class="quote">“They found a ventilation problem two other roofers missed and fixed it without changing the price.”<cite>Dana Whitmore · Warranty visit, Portland</cite></blockquote>
+  <button slot="tabs" role="tab" type="button" class="tabs__tab" aria-controls="rev-tommy" aria-selected="true"><img src="/media/harvest/avatar-1.jpg" alt="" width="96" height="96" class="avatar"><span><strong>Tommy Nguyen</strong><small>Re-deck · Falmouth</small></span></button>
+  <button slot="tabs" role="tab" type="button" class="tabs__tab" aria-controls="rev-karen"><img src="/media/harvest/avatar-2.jpg" alt="" width="96" height="96" class="avatar"><span><strong>Karen Doyle</strong><small>Storm repair · Yarmouth</small></span></button>
+  <button slot="tabs" role="tab" type="button" class="tabs__tab" aria-controls="rev-luis"><img src="/media/harvest/avatar-3.jpg" alt="" width="96" height="96" class="avatar"><span><strong>Luis Herrera</strong><small>Full replacement · Scarborough</small></span></button>
+  <button slot="tabs" role="tab" type="button" class="tabs__tab" aria-controls="rev-dana"><img src="/media/harvest/avatar-4.jpg" alt="" width="96" height="96" class="avatar"><span><strong>Dana Whitmore</strong><small>Warranty visit · Portland</small></span></button>
+</testimonial-switcher>
+```
+
+Variants: `<testimonial-switcher variant="avatars">`.
+
+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/testimonial/testimonial-switcher/styles.css

@@ -0,0 +1,23 @@
+.c-testimonial-switcher__grid{display:grid;gap:var(--space-6)}
+.c-testimonial-switcher__quote .section__head{margin-bottom:var(--space-5)}
+.c-testimonial-switcher__panels > [hidden]{display:none}
+.c-testimonial-switcher__panels .quote{font-size:var(--step-3);line-height:1.3;letter-spacing:-.015em;max-width:34rem}
+.c-testimonial-switcher__panels .quote cite{font-family:var(--font-body);font-size:var(--step-0);letter-spacing:0}
+.c-testimonial-switcher__list{display:grid;gap:var(--space-1);border:0;align-content:center}
+.c-testimonial-switcher__list .tabs__tab{display:flex;align-items:center;gap:var(--space-3);width:100%;margin:0;padding:var(--space-3);border:1px solid transparent;border-radius:var(--radius-md);text-align:left;min-height:0}
+.c-testimonial-switcher__list .tabs__tab span{display:grid;line-height:1.3}
+.c-testimonial-switcher__list .tabs__tab strong{font-weight:600;color:var(--color-text)}
+.c-testimonial-switcher__list .tabs__tab small{font-size:var(--step-0);color:var(--color-muted)}
+.c-testimonial-switcher__list .tabs__tab .avatar{width:2.5rem;height:2.5rem;flex:none}
+.c-testimonial-switcher__list .tabs__tab:hover{background:var(--color-surface-2)}
+.c-testimonial-switcher__list .tabs__tab[aria-selected="true"]{background:var(--color-surface);border-color:var(--color-border);box-shadow:var(--shadow-1)}
+@media(min-width:900px){.c-testimonial-switcher__grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--space-9);align-items:center}}
+.c-testimonial-switcher--avatars .c-testimonial-switcher__grid{grid-template-columns:1fr;gap:var(--space-5);justify-items:center;text-align:center}
+.c-testimonial-switcher--avatars .section__head{margin-inline:auto;text-align:center;justify-items:center}
+.c-testimonial-switcher--avatars .c-testimonial-switcher__panels .quote{margin-inline:auto;max-width:40rem}
+.c-testimonial-switcher--avatars .c-testimonial-switcher__list{display:flex;justify-content:center;order:-1;gap:var(--space-2)}
+.c-testimonial-switcher--avatars .c-testimonial-switcher__list .tabs__tab{width:auto;padding:.25rem;border-radius:var(--radius-pill);border:0;box-shadow:none;background:transparent}
+.c-testimonial-switcher--avatars .c-testimonial-switcher__list .tabs__tab span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
+.c-testimonial-switcher--avatars .c-testimonial-switcher__list .tabs__tab .avatar{width:2.75rem;height:2.75rem;opacity:.55;transition:opacity .2s ease,transform .2s ease}
+.c-testimonial-switcher--avatars .c-testimonial-switcher__list .tabs__tab:hover .avatar{opacity:1}
+.c-testimonial-switcher--avatars .c-testimonial-switcher__list .tabs__tab[aria-selected="true"] .avatar{opacity:1;transform:scale(1.15);box-shadow:0 0 0 3px var(--color-accent)}

package/blocks/testimonial/testimonial-switcher/template.html

@@ -0,0 +1 @@
+<section class="c-testimonial-switcher section"><div class="wrap c-testimonial-switcher__grid" data-island="tabs"><div class="c-testimonial-switcher__quote"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="c-testimonial-switcher__panels"><slot name="panels"></slot></div></div><div class="tabs__list c-testimonial-switcher__list" role="tablist" aria-label="Reviewers"><slot name="tabs"></slot></div></div></section>

package/blocks/testimonial/testimonial-wall/README.md

@@ -0,0 +1,34 @@
+# testimonial-wall
+
+Dense quote wall / press mentions.
+
+- **Category:** testimonial
+- **Media:** press marks optional
+- **Registers:** b2b, professional
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` |
+| `quotes` | 6–9 `<blockquote class="quote quote--card">` each with `<p>` + `<cite>` |
+
+## Example
+
+```html
+<testimonial-wall>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Word of mouth</p>
+  <h2 slot="heading">What owners tell each other about us</h2>
+  <blockquote slot="quotes" class="quote quote--card"><p>“Books closed by the 5th, like clockwork. I stopped checking.”</p><cite>Marco D.<span>Dunn Plumbing</span></cite></blockquote>
+  <blockquote slot="quotes" class="quote quote--card"><p>“They found $14k in uncategorized expenses my old bookkeeper missed.”</p><cite>Lena R.<span>Castine Electric</span></cite></blockquote>
+  <blockquote slot="quotes" class="quote quote--card"><p>“First bookkeeper who understood job costing without me explaining it.”</p><cite>Tom H.<span>Ridgeline Builders</span></cite></blockquote>
+  <blockquote slot="quotes" class="quote quote--card"><p>“Tax season used to take me a week. This year it took one email.”</p><cite>Sam O.<span>Bay Paving</span></cite></blockquote>
+  <blockquote slot="quotes" class="quote quote--card"><p>“Flat monthly price. No surprise hours. That alone was worth switching.”</p><cite>Aisha B.<span>Harbor Roofing</span></cite></blockquote>
+  <blockquote slot="quotes" class="quote quote--card"><p>“I finally know which jobs make money.”</p><cite>Kevin T.<span>Tidewater Landscaping</span></cite></blockquote>
+</testimonial-wall>
+```
+
+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/testimonial/testimonial-wall/styles.css

@@ -0,0 +1,7 @@
+.c-testimonial-wall__grid{display:grid;gap:var(--space-4)}
+@media(min-width:720px){.c-testimonial-wall__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
+@media(min-width:1080px){.c-testimonial-wall__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
+.c-testimonial-wall__grid .quote{padding:var(--space-5);background:var(--color-surface-2);border-radius:var(--radius-lg);display:grid;gap:var(--space-3);align-content:start}
+.c-testimonial-wall__grid .quote p{margin:0}
+.c-testimonial-wall__grid .quote cite{margin-top:0;font-weight:600;color:var(--color-text)}
+.c-testimonial-wall__grid .quote cite span{display:block;font-weight:400;color:var(--color-muted)}

package/blocks/testimonial/testimonial-wall/template.html

@@ -0,0 +1 @@
+<section class="c-testimonial-wall section"><div class="wrap"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="c-testimonial-wall__grid"><slot name="quotes"></slot></div></div></section>

package/blocks/trust-strip/trust-badges/README.md

@@ -0,0 +1,30 @@
+# trust-badges
+
+Rating chip + cert badges row.
+
+- **Category:** trust-strip
+- **Media:** optional badge icons
+- **Registers:** trade, beauty, food, professional
+- **Variants:** muted
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `(default)` | 3–6 `.badge` chips: a rating first, then licenses / guarantees / associations |
+
+## Example
+
+```html
+<trust-badges>
+  <span class="badge"><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> 4.9 · 212 Google reviews</span>
+  <span class="badge badge--outline"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3 4 6v6c0 5 3.5 8.5 8 9 4.5-.5 8-4 8-9V6l-8-3z"/><path d="m9 12 2 2 4-4"/></svg> Licensed &amp; insured</span>
+  <span class="badge badge--outline"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="9" r="6"/><path d="m8.5 14-1.5 7 5-3 5 3-1.5-7"/></svg> GAF Master Elite</span>
+  <span class="badge badge--outline"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg> Since 2009</span>
+  <span class="badge badge--outline"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 11 12 3l9 8v10H3z"/><path d="M9 21v-6h6v6"/></svg> 10-year workmanship warranty</span>
+</trust-badges>
+```
+
+Variants: `<trust-badges 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/trust-strip/trust-badges/styles.css

@@ -0,0 +1,5 @@
+.c-trust-badges{border-block:1px solid var(--color-border)}
+.c-trust-badges__row{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center;align-items:center}
+.c-trust-badges .badge{min-height:2.25rem;padding-inline:var(--space-4)}
+.c-trust-badges .badge .rating{margin-right:.15rem}
+.c-trust-badges--muted{background:var(--color-surface-2);border-block-color:transparent}

package/blocks/trust-strip/trust-badges/template.html

@@ -0,0 +1 @@
+<section class="c-trust-badges section--tight"><div class="wrap c-trust-badges__row"><slot></slot></div></section>

package/blocks/trust-strip/trust-certs/README.md

@@ -0,0 +1,31 @@
+# trust-certs
+
+Proof sentence over a row of certification tiles.
+
+- **Category:** trust-strip
+- **Media:** badge icons
+- **Registers:** trade, professional, beauty
+- **Variants:** muted
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `proof` | Optional `<p>` one-line proof with `<strong>` numbers |
+| `certs` | 3–5 `<div><span class="icon-tile icon-tile--round">icon</span><strong>Name</strong><small>Sub-line</small></div>` |
+
+## Example
+
+```html
+<trust-certs>
+  <p slot="proof"><strong>17+ years</strong> · <strong>1,200+</strong> five-star reviews · <strong>3,500+</strong> roofs · every job backed <strong>in writing</strong></p>
+  <div slot="certs"><span class="icon-tile icon-tile--round"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="9" r="6"/><path d="m8.5 14-1.5 7 5-3 5 3-1.5-7"/></svg></span><strong>GAF Master Elite</strong><small>Top 2% certified roofers</small></div>
+  <div slot="certs"><span class="icon-tile icon-tile--round"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3 4 6v6c0 5 3.5 8.5 8 9 4.5-.5 8-4 8-9V6l-8-3z"/><path d="m9 12 2 2 4-4"/></svg></span><strong>Licensed &amp; insured</strong><small>Maine license #RC-20419</small></div>
+  <div slot="certs"><span class="icon-tile icon-tile--round"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></span><strong>BBB A+</strong><small>Accredited since 2011</small></div>
+  <div slot="certs"><span class="icon-tile icon-tile--round"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 11 12 3l9 8v10H3z"/><path d="M9 21v-6h6v6"/></svg></span><strong>Owens Corning Preferred</strong><small>Factory-trained installers</small></div>
+</trust-certs>
+```
+
+Variants: `<trust-certs 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/trust-strip/trust-certs/styles.css

@@ -0,0 +1,12 @@
+.c-trust-certs__proof{max-width:40rem;margin:0 auto var(--space-7);text-align:center;font-family:var(--font-display);font-size:var(--step-2);line-height:1.35;color:var(--color-muted);text-wrap:balance}
+.c-trust-certs__proof:empty{display:none}
+.c-trust-certs__proof p{margin:0}
+.c-trust-certs__proof strong{color:var(--color-text);font-weight:600}
+.c-trust-certs__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5) var(--space-4);max-width:60rem;margin-inline:auto}
+.c-trust-certs__grid > *{display:grid;gap:var(--space-2);justify-items:center;text-align:center}
+.c-trust-certs__grid .icon-tile{width:3.25rem;height:3.25rem;margin-bottom:var(--space-1)}
+.c-trust-certs__grid .icon-tile .icon{width:1.5rem;height:1.5rem}
+.c-trust-certs__grid strong{font-weight:600}
+.c-trust-certs__grid small{color:var(--color-muted)}
+@media(min-width:720px){.c-trust-certs__grid{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))}}
+.c-trust-certs--muted{background:var(--color-surface-2)}

package/blocks/trust-strip/trust-certs/template.html

@@ -0,0 +1 @@
+<section class="c-trust-certs section"><div class="wrap"><div class="c-trust-certs__proof"><slot name="proof"></slot></div><div class="c-trust-certs__grid"><slot name="certs"></slot></div></div></section>