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

package/blocks/process/process-stepper/README.md

@@ -1,40 +0,0 @@
-# process-stepper
-
-One large photo panel per step with a step strip below (tabs island).
-
-- **Category:** process
-- **Media:** one photo per step
-- **Registers:** professional, trade, beauty
-- **Variants:** (none)
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Optional `<p class="eyebrow">` |
-| `heading` | `<h2>` |
-| `lede` | Optional `<p class="lede">` (one sentence) |
-| `panels` | 3–6 `<div role="tabpanel" id="…" class="photo-card"><img><div class="photo-card__body"><p class="eyebrow">Step n of N</p><h3>…</h3><p>…</p></div></div>` |
-| `tabs` | Matching `<button role="tab" type="button" class="tabs__tab" aria-controls="…"><span>Step n</span><strong>Title</strong></button>` (first has `aria-selected="true"`) |
-
-## Example
-
-```html
-<process-stepper>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">Our process</p>
-  <h2 slot="heading">Five clear steps from first call to final result.</h2>
-  <p slot="lede" class="lede">Same steps, same care, every case. The same senior team is with you from the first call to the end.</p>
-  <div slot="panels" role="tabpanel" id="step-call" class="photo-card"><img src="/media/harvest/step-1.jpg" alt="" width="1600" height="900" loading="lazy"><div class="photo-card__body"><p class="eyebrow">Step 1 of 5</p><h3>First call</h3><p>A senior lawyer takes your call — never an assistant. We check for conflicts and decide together if we're the right fit.</p></div></div>
-  <div slot="panels" role="tabpanel" id="step-strategy" class="photo-card"><img src="/media/harvest/step-2.jpg" alt="" width="1600" height="900" loading="lazy"><div class="photo-card__body"><p class="eyebrow">Step 2 of 5</p><h3>Strategy</h3><p>A written plan with the likely paths, costs, and timelines — before you commit to anything.</p></div></div>
-  <div slot="panels" role="tabpanel" id="step-prep" class="photo-card"><img src="/media/harvest/step-3.jpg" alt="" width="1600" height="900" loading="lazy"><div class="photo-card__body"><p class="eyebrow">Step 3 of 5</p><h3>Preparation</h3><p>Evidence, witnesses, and filings assembled by the team that will actually argue the case.</p></div></div>
-  <div slot="panels" role="tabpanel" id="step-pretrial" class="photo-card"><img src="/media/harvest/step-4.jpg" alt="" width="1600" height="900" loading="lazy"><div class="photo-card__body"><p class="eyebrow">Step 4 of 5</p><h3>Pre-trial</h3><p>Motions and negotiations that often end the matter before a courtroom is needed.</p></div></div>
-  <div slot="panels" role="tabpanel" id="step-result" class="photo-card"><img src="/media/harvest/step-5.jpg" alt="" width="1600" height="900" loading="lazy"><div class="photo-card__body"><p class="eyebrow">Step 5 of 5</p><h3>Final result</h3><p>Trial, settlement, or dismissal — and a plain-language debrief on what it means for you.</p></div></div>
-  <button slot="tabs" role="tab" type="button" class="tabs__tab" aria-controls="step-call" aria-selected="true"><span>Step 1</span><strong>First call</strong></button>
-  <button slot="tabs" role="tab" type="button" class="tabs__tab" aria-controls="step-strategy"><span>Step 2</span><strong>Strategy</strong></button>
-  <button slot="tabs" role="tab" type="button" class="tabs__tab" aria-controls="step-prep"><span>Step 3</span><strong>Preparation</strong></button>
-  <button slot="tabs" role="tab" type="button" class="tabs__tab" aria-controls="step-pretrial"><span>Step 4</span><strong>Pre-trial</strong></button>
-  <button slot="tabs" role="tab" type="button" class="tabs__tab" aria-controls="step-result"><span>Step 5</span><strong>Final result</strong></button>
-</process-stepper>
-```
-
-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/process/process-stepper/styles.css

@@ -1,11 +0,0 @@
-.c-process-stepper__panels > [hidden]{display:none}
-.c-process-stepper__panels .photo-card{min-height:clamp(18rem,44vw,30rem)}
-.c-process-stepper__panels .photo-card__body{padding:var(--space-6);max-width:36rem}
-.c-process-stepper__panels .photo-card__body h3{font-size:var(--step-4)}
-.c-process-stepper__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:0;margin-top:var(--space-4);border-bottom:0;border-top:1px solid var(--color-border)}
-.c-process-stepper__list .tabs__tab{display:grid;gap:.1rem;justify-items:start;margin:-1px 0 0;padding:var(--space-4) var(--space-3);border:0;border-top:2px solid transparent;text-align:left;min-height:0}
-.c-process-stepper__list .tabs__tab span{font-size:var(--step-0);letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted)}
-.c-process-stepper__list .tabs__tab strong{font-weight:600;color:var(--color-text)}
-.c-process-stepper__list .tabs__tab[aria-selected="true"]{border-top-color:var(--color-accent);background:transparent}
-.c-process-stepper__list .tabs__tab[aria-selected="true"] span{color:var(--color-accent)}
-@media(max-width:719px){.c-process-stepper__list{grid-template-columns:repeat(2,minmax(0,1fr))}}

package/blocks/process/process-stepper/template.html

@@ -1 +0,0 @@
-<section class="c-process-stepper section"><div class="wrap"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="c-process-stepper__tabs" data-island="tabs"><div class="c-process-stepper__panels"><slot name="panels"></slot></div><div class="tabs__list c-process-stepper__list" role="tablist" aria-label="Steps"><slot name="tabs"></slot></div></div></div></section>

package/blocks/process/process-steps/README.md

@@ -1,35 +0,0 @@
-# process-steps
-
-Numbered horizontal/stacked steps.
-
-- **Category:** process
-- **Media:** optional icons
-- **Registers:** trade, b2b, professional
-- **Variants:** three
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Optional `<p class="eyebrow">` |
-| `heading` | `<h2>` |
-| `lede` | Optional `<p class="lede">` (one sentence) |
-| `steps` | 3–4 `<li>` with `<h3>` + `<p>`; numbers render automatically |
-
-## Example
-
-```html
-<process-steps>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">How it works</p>
-  <h2 slot="heading">From first call to final walkthrough</h2>
-  <p slot="lede" class="lede">Most projects take two weeks from estimate to finished roof.</p>
-  <li slot="steps"><h3>Call or book online</h3><p>Tell us what you're seeing. We'll schedule an inspection within three business days.</p></li>
-  <li slot="steps"><h3>Inspection &amp; estimate</h3><p>Drone photos, an attic check, and a written line-item estimate inside 48 hours.</p></li>
-  <li slot="steps"><h3>Install</h3><p>One crew, one to three days, tarps on the beds and a magnet sweep every evening.</p></li>
-  <li slot="steps"><h3>Walkthrough &amp; warranty</h3><p>We walk the roof with you, hand over photos, and register your warranty.</p></li>
-</process-steps>
-```
-
-Variants: `<process-steps variant="three">`.
-
-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/process/process-steps/styles.css

@@ -1,6 +0,0 @@
-.c-process-steps__grid{list-style:none;margin:0;padding:0;counter-reset:step;--gap:var(--space-6)}
-.c-process-steps__grid > *{counter-increment:step;display:grid;gap:var(--space-3);align-content:start;position:relative;padding-top:var(--space-5);border-top:1px solid var(--color-border)}
-.c-process-steps__grid > *::before{content:counter(step,decimal-leading-zero);display:inline-grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--color-accent) 12%,transparent);color:var(--color-accent);font-family:var(--font-display);font-weight:600;font-size:var(--step-1);margin-bottom:var(--space-2)}
-.c-process-steps__grid h3{font-size:var(--step-2)}
-.c-process-steps__grid p{margin:0;color:var(--color-muted)}
-@media(min-width:1080px){.c-process-steps--three .c-process-steps__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

package/blocks/process/process-steps/template.html

@@ -1 +0,0 @@
-<section class="c-process-steps section"><div class="wrap"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><ol class="grid grid--4 c-process-steps__grid"><slot name="steps"></slot></ol></div></section>

package/blocks/process/process-sticky/README.md

@@ -1,38 +0,0 @@
-# process-sticky
-
-Sticky intro column beside numbered steps with thumbnails.
-
-- **Category:** process
-- **Media:** one thumbnail per step
-- **Registers:** trade, beauty, b2b
-- **Variants:** dark
-
-## 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 |
-| `steps` | 4–6 `<li><img><div><h3>Title</h3><p>…</p></div></li>` (numbers are added automatically) |
-
-## Example
-
-```html
-<process-sticky>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">Our process</p>
-  <h2 slot="heading">Five steps. Start to finish.</h2>
-  <p slot="lede" class="lede">We handle everything from the first visit to the final cleanup. You always know what happens next and what it costs.</p>
-  <a slot="actions" class="btn" href="/contact">Get a free estimate</a>
-  <li slot="steps"><img src="/media/harvest/step-a.jpg" alt="" width="240" height="240" loading="lazy"><div><h3>Free inspection</h3><p>We get on your roof, take photos, and tell you what shape it's in — then leave the decision to you.</p></div></li>
-  <li slot="steps"><img src="/media/harvest/step-b.jpg" alt="" width="240" height="240" loading="lazy"><div><h3>Clear written estimate</h3><p>Every cost and material choice on one page. The price we quote is the price you pay.</p></div></li>
-  <li slot="steps"><img src="/media/harvest/step-c.jpg" alt="" width="240" height="240" loading="lazy"><div><h3>Pick your date</h3><p>We set a date that works for you and drop off materials the day before, so the crew starts on time.</p></div></li>
-  <li slot="steps"><img src="/media/harvest/step-d.jpg" alt="" width="240" height="240" loading="lazy"><div><h3>Installation</h3><p>Our licensed crew tears off the old roof and installs the new one. Most homes are done in one or two days.</p></div></li>
-  <li slot="steps"><img src="/media/harvest/step-e.jpg" alt="" width="240" height="240" loading="lazy"><div><h3>Final walkthrough</h3><p>We sweep your yard for nails with magnets and walk the finished roof with you before we call it done.</p></div></li>
-</process-sticky>
-```
-
-Variants: `<process-sticky 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/process/process-sticky/styles.css

@@ -1,12 +0,0 @@
-.c-process-sticky__grid{display:grid;gap:var(--space-7)}
-.c-process-sticky__intro .section__head{margin-bottom:var(--space-5)}
-.c-process-sticky__intro .btn-group:empty{display:none}
-.c-process-sticky__steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-6);counter-reset:step}
-.c-process-sticky__steps > li{display:grid;grid-template-columns:5rem minmax(0,1fr);gap:var(--space-4);align-items:start;counter-increment:step}
-.c-process-sticky__steps > li > img{width:5rem;height:5rem;object-fit:cover;border-radius:var(--radius-md)}
-.c-process-sticky__steps > li > div{display:grid;gap:var(--space-2)}
-.c-process-sticky__steps h3{font-size:var(--step-1);display:flex;gap:var(--space-3);align-items:baseline}
-.c-process-sticky__steps h3::before{content:counter(step,decimal-leading-zero);font-size:var(--step-0);font-weight:600;color:var(--color-accent);font-variant-numeric:tabular-nums}
-.c-process-sticky__steps p{margin:0;color:var(--color-muted);font-size:var(--step-0);max-width:34rem}
-@media(min-width:900px){.c-process-sticky__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--space-9)}.c-process-sticky__steps{gap:var(--space-7)}.c-process-sticky__steps > li{grid-template-columns:6rem minmax(0,1fr);gap:var(--space-5)}.c-process-sticky__steps > li > img{width:6rem;height:6rem}}
-.c-process-sticky--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/process/process-sticky/template.html

@@ -1 +0,0 @@
-<section class="c-process-sticky section"><div class="wrap c-process-sticky__grid"><div class="c-process-sticky__intro 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><ol class="c-process-sticky__steps"><slot name="steps"></slot></ol></div></section>

package/blocks/process/process-timeline/README.md

@@ -1,35 +0,0 @@
-# process-timeline
-
-Vertical timeline.
-
-- **Category:** process
-- **Media:** optional
-- **Registers:** professional, b2b, trade
-- **Variants:** (none)
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Optional `<p class="eyebrow">` |
-| `heading` | `<h2>` |
-| `lede` | Optional `<p class="lede">` (one sentence) |
-| `actions` | Optional button under the copy |
-| `steps` | 3–6 `<li>` with optional `<p class="eyebrow">` (when/duration), `<h3>`, `<p>` |
-
-## Example
-
-```html
-<process-timeline>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">What to expect</p>
-  <h2 slot="heading">Your first 90 days with us</h2>
-  <p slot="lede" class="lede">We front-load the work so the rest of the year is quiet.</p>
-  <a slot="actions" class="btn" href="/contact">Start a conversation</a>
-  <li slot="steps"><p class="eyebrow eyebrow--accent">Week 1</p><h3>Discovery call and document intake</h3><p>We collect last year's books, bank feeds, and payroll access. One hour of your time, total.</p></li>
-  <li slot="steps"><p class="eyebrow eyebrow--accent">Weeks 2–3</p><h3>Clean-up and chart of accounts</h3><p>We fix categorization, reconcile every account, and set up a chart that matches how you bid jobs.</p></li>
-  <li slot="steps"><p class="eyebrow eyebrow--accent">Week 4</p><h3>First monthly close</h3><p>P&amp;L, balance sheet, and a job-cost summary — reviewed together on a 20-minute call.</p></li>
-  <li slot="steps"><p class="eyebrow eyebrow--accent">Ongoing</p><h3>Books closed by the 5th</h3><p>Same report, same day every month. Questions answered inside one business day.</p></li>
-</process-timeline>
-```
-
-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/process/process-timeline/styles.css

@@ -1,10 +0,0 @@
-.c-process-timeline__copy .section__head{margin-bottom:var(--space-5)}
-@media(min-width:720px){.c-process-timeline__copy{position:sticky;top:calc(var(--header-h) + var(--space-5))}}
-.c-process-timeline__list{list-style:none;margin:0;padding:0;display:grid}
-.c-process-timeline__list > *{position:relative;padding:0 0 var(--space-6) var(--space-7);display:grid;gap:var(--space-2)}
-.c-process-timeline__list > *::before{content:"";position:absolute;left:.55rem;top:.5rem;bottom:0;width:2px;background:var(--color-border)}
-.c-process-timeline__list > *:last-child::before{display:none}
-.c-process-timeline__list > *::after{content:"";position:absolute;left:0;top:.35rem;width:1.25rem;height:1.25rem;border-radius:var(--radius-pill);background:var(--color-bg);border:3px solid var(--color-accent)}
-.c-process-timeline__list h3{font-size:var(--step-2)}
-.c-process-timeline__list p{margin:0;color:var(--color-muted)}
-.c-process-timeline__list .eyebrow{font-size:.75rem}

package/blocks/process/process-timeline/template.html

@@ -1 +0,0 @@
-<section class="c-process-timeline section"><div class="wrap split split--top"><div class="c-process-timeline__copy"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="btn-group"><slot name="actions"></slot></div></div><ol class="c-process-timeline__list"><slot name="steps"></slot></ol></div></section>

package/blocks/services/services-cards/README.md

@@ -1,34 +0,0 @@
-# services-cards
-
-Service cards with optional price.
-
-- **Category:** services
-- **Media:** card images optional
-- **Registers:** trade, beauty, professional, food
-- **Variants:** (none)
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Optional `<p class="eyebrow">` |
-| `heading` | `<h2>` |
-| `lede` | Optional `<p class="lede">` (one sentence) |
-| `actions` | Optional "View all" link/button on the head row |
-| `cards` | 3 or 6 `.card.card--interactive` with `.card__media.ratio-4x3`, `<h3>`, `<p>`, optional price line, and a `.btn-arrow` |
-
-## Example
-
-```html
-<services-cards>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">Services</p>
-  <h2 slot="heading">Everything above the gutters.</h2>
-  <p slot="lede" class="lede">Repairs, replacements, and the maintenance that keeps you from needing either.</p>
-  <a slot="actions" class="btn-outline" href="/services">All services</a>
-  <article slot="cards" class="card card--interactive"><div class="card__media ratio-4x3"><img src="/media/harvest/svc-replace.jpg" alt="New architectural shingle roof" width="1200" height="900" loading="lazy"></div><div class="card__body"><h3>Roof replacement</h3><p>Asphalt, metal, and cedar. Full tear-off with deck repair included.</p><p class="c-services-cards__price">From $9,800</p><a class="btn-arrow" href="/services">Learn more</a></div></article>
-  <article slot="cards" class="card card--interactive"><div class="card__media ratio-4x3"><img src="/media/harvest/svc-repair.jpg" alt="Repairing flashing around a chimney" width="1200" height="900" loading="lazy"></div><div class="card__body"><h3>Leak repair</h3><p>Same-week diagnosis, most repairs finished in a single visit.</p><p class="c-services-cards__price">From $450</p><a class="btn-arrow" href="/services">Learn more</a></div></article>
-  <article slot="cards" class="card card--interactive"><div class="card__media ratio-4x3"><img src="/media/harvest/svc-gutters.jpg" alt="Seamless aluminum gutters" width="1200" height="900" loading="lazy"></div><div class="card__body"><h3>Gutters &amp; guards</h3><p>Seamless aluminum sized to your roof, with guards that actually shed pine needles.</p><p class="c-services-cards__price">From $1,900</p><a class="btn-arrow" href="/services">Learn more</a></div></article>
-</services-cards>
-```
-
-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/services/services-cards/styles.css

@@ -1,3 +0,0 @@
-.c-services-cards__grid .card__body{gap:var(--space-2)}
-.c-services-cards__price{font-weight:600;color:var(--color-text)}
-.c-services-cards__price{margin:0}

package/blocks/services/services-cards/template.html

@@ -1 +0,0 @@
-<section class="c-services-cards section"><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-services-cards__grid"><slot name="cards"></slot></div></div></section>

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

@@ -1,34 +0,0 @@
-# services-carousel
-
-Buttoned carousel for 4+ services.
-
-- **Category:** services
-- **Media:** card media
-- **Registers:** trade, beauty, food
-- **Variants:** (none)
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Optional `<p class="eyebrow">` |
-| `heading` | `<h2>` |
-| `lede` | Optional `<p class="lede">` (one sentence) |
-| `cards` | 4–8 `.card` slides with `.card__media.ratio-4x3`, `<h3>`, `<p>` |
-
-## Example
-
-```html
-<services-carousel>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">Services</p>
-  <h2 slot="heading">Cut, color, and everything in between.</h2>
-  <p slot="lede" class="lede">Swipe or use the arrows.</p>
-  <article slot="cards" class="card card--interactive"><div class="card__media ratio-4x3"><img src="/media/harvest/cut.jpg" alt="Precision haircut" width="1200" height="900" loading="lazy"></div><div class="card__body"><h3>Cuts</h3><p>Consultation, wash, cut, and a blow-dry finish. From $65.</p></div></article>
-  <article slot="cards" class="card card--interactive"><div class="card__media ratio-4x3"><img src="/media/harvest/balayage.jpg" alt="Balayage highlights" width="1200" height="900" loading="lazy"></div><div class="card__body"><h3>Balayage</h3><p>Hand-painted, low-maintenance dimension. From $220.</p></div></article>
-  <article slot="cards" class="card card--interactive"><div class="card__media ratio-4x3"><img src="/media/harvest/gloss.jpg" alt="Gloss treatment" width="1200" height="900" loading="lazy"></div><div class="card__body"><h3>Gloss &amp; toner</h3><p>Refresh tone between color appointments. From $55.</p></div></article>
-  <article slot="cards" class="card card--interactive"><div class="card__media ratio-4x3"><img src="/media/harvest/treatment.jpg" alt="Deep conditioning treatment" width="1200" height="900" loading="lazy"></div><div class="card__body"><h3>Treatments</h3><p>Bond repair and scalp care, 30 minutes. From $45.</p></div></article>
-  <article slot="cards" class="card card--interactive"><div class="card__media ratio-4x3"><img src="/media/harvest/updo.jpg" alt="Bridal updo" width="1200" height="900" loading="lazy"></div><div class="card__body"><h3>Event styling</h3><p>Bridal and occasion hair, on-site available. From $120.</p></div></article>
-</services-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/services/services-carousel/styles.css

@@ -1,6 +0,0 @@
-.c-services-carousel__head{display:flex;align-items:end;justify-content:space-between;gap:var(--space-5)}
-.c-services-carousel__head .section__head{margin-bottom:var(--space-6)}
-.c-services-carousel__head .carousel__nav{margin-bottom:var(--space-6);flex-shrink:0}
-.c-services-carousel__carousel .carousel__track{gap:var(--space-5);padding-bottom:var(--space-3)}
-.c-services-carousel__carousel .carousel__track > *{flex-basis:min(85%,20rem)}
-.c-services-carousel__carousel .card__body{gap:var(--space-2)}

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

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

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

@@ -1,32 +0,0 @@
-# services-list
-
-Editorial service list with CTA per row.
-
-- **Category:** services
-- **Media:** optional thumbs
-- **Registers:** professional, trade, b2b
-- **Variants:** (none)
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Optional `<p class="eyebrow">` |
-| `heading` | `<h2>` |
-| `lede` | Optional `<p class="lede">` (one sentence) |
-| `rows` | 4–8 rows: `<div>` with `<span class="c-services-list__num">`, a copy `<div>` (`<h3>`, `<p>`), and a `.btn-outline.btn-sm` or `.btn-arrow` |
-
-## Example
-
-```html
-<services-list>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">Practice areas</p>
-  <h2 slot="heading">Focused on four things, and good at all of them.</h2>
-  <div slot="rows"><span class="c-services-list__num">01</span><div><h3>Wills &amp; trusts</h3><p>Flat-fee estate plans, from a simple will to a revocable trust with pour-over provisions.</p></div><a class="btn-outline btn-sm" href="/practice/estate">Learn more</a></div>
-  <div slot="rows"><span class="c-services-list__num">02</span><div><h3>Probate administration</h3><p>We handle the court filings, creditor notices, and distributions so the family doesn't have to.</p></div><a class="btn-outline btn-sm" href="/practice/probate">Learn more</a></div>
-  <div slot="rows"><span class="c-services-list__num">03</span><div><h3>Elder law &amp; MaineCare planning</h3><p>Protect the house and qualify for care without spending down everything first.</p></div><a class="btn-outline btn-sm" href="/practice/elder">Learn more</a></div>
-  <div slot="rows"><span class="c-services-list__num">04</span><div><h3>Small-business succession</h3><p>Buy-sell agreements and transition plans for owner-operated companies.</p></div><a class="btn-outline btn-sm" href="/practice/business">Learn more</a></div>
-</services-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/services/services-list/block.meta.json

@@ -1,85 +0,0 @@
-{
-  "schemaVersion": 1,
-  "id": "services/services-list",
-  "revision": 1,
-  "status": "draft",
-  "owner": "Vitris design library",
-  "sourceHash": "5b26a7c187d49a5ffe6d79fc5c099f6846529a748bc7b0a5127831fa3e132732",
-  "fit": {
-    "visitorJobs": [
-      "Compare service scope and open the right detail"
-    ],
-    "pageRoles": [
-      "service index"
-    ],
-    "useWhen": [
-      "Compare service scope and open the right detail"
-    ],
-    "avoidWhen": [
-      "The content or media cannot support this composition"
-    ]
-  },
-  "content": {
-    "requiredSlots": [
-      "heading",
-      "rows"
-    ],
-    "optionalSlots": [
-      "eyebrow",
-      "lede"
-    ],
-    "testedItemCounts": [
-      1
-    ]
-  },
-  "media": {
-    "min": 0,
-    "max": 8,
-    "optionalBehavior": "Recompose without empty media frames when media is optional",
-    "aspect": [
-      "content-dependent"
-    ]
-  },
-  "composition": {
-    "hierarchy": "numbered rows",
-    "alignment": "left",
-    "density": "dense",
-    "mediaProminence": "low",
-    "geometry": [
-      "list",
-      "rows"
-    ],
-    "boundary": "section boundary adapts to adjacent content"
-  },
-  "adaptation": {
-    "flexible": [
-      "spacing",
-      "surface treatment",
-      "type scale"
-    ],
-    "invariants": [
-      "semantic reading order",
-      "one clear section purpose"
-    ],
-    "customWhen": [
-      "The visitor job needs a different hierarchy"
-    ]
-  },
-  "responsive": {
-    "readingOrder": "DOM order follows the visitor narrative",
-    "reflow": "Stack or resize according to content",
-    "crop": "Keep important subjects visible"
-  },
-  "interaction": {
-    "behavior": "Native links and controls",
-    "islands": []
-  },
-  "evidence": {
-    "provenance": [
-      "Original Vitris block source"
-    ],
-    "testedContexts": [],
-    "accessibility": [],
-    "previewManifest": "../../../design-system/block-previews/v1/services--services-list.json"
-  }
-}

package/blocks/services/services-list/styles.css

@@ -1,10 +0,0 @@
-.c-services-list__rows{display:grid;border-top:1px solid var(--color-border)}
-.c-services-list__rows > *{display:grid;grid-template-columns:auto 1fr;gap:var(--space-3) var(--space-5);align-items:center;padding:var(--space-5) 0;border-bottom:1px solid var(--color-border)}
-.c-services-list__rows > * > div{display:grid;gap:var(--space-1)}
-.c-services-list__rows p{color:var(--color-muted);margin:0;max-width:52rem}
-.c-services-list__num{font-family:var(--font-display);font-size:var(--step-1);color:var(--color-muted);font-variant-numeric:tabular-nums;min-width:2ch}
-.c-services-list__rows > * > a{grid-column:2;justify-self:start}
-@media(min-width:720px){
-  .c-services-list__rows > *{grid-template-columns:3rem 1fr auto}
-  .c-services-list__rows > * > a{grid-column:auto;justify-self:end}
-}

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

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

package/blocks/services/services-menu/README.md

@@ -1,39 +0,0 @@
-# services-menu
-
-Menu-style priced items.
-
-- **Category:** services
-- **Media:** food photos optional
-- **Registers:** food, beauty
-- **Variants:** two-col
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Optional `<p class="eyebrow">` |
-| `heading` | `<h2>` |
-| `lede` | Optional `<p class="lede">` (one sentence) |
-| `items` | 6–12 `.c-services-menu__item` rows: copy `<div>` (`<h3>`, optional `<p>`) then a price `<span>` |
-
-## Example
-
-```html
-<services-menu>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">Price list</p>
-  <h2 slot="heading">Hair services</h2>
-  <p slot="lede" class="lede">Prices are starting points; long or dense hair may add time.</p>
-  <div slot="items" class="c-services-menu__item"><h3>Women's cut</h3><p>Consult, wash, cut, blow-dry</p><span>$65</span></div>
-  <div slot="items" class="c-services-menu__item"><h3>Men's cut</h3><p>Includes neck trim and style</p><span>$40</span></div>
-  <div slot="items" class="c-services-menu__item"><h3>Single-process color</h3><p>Roots or all-over</p><span>$95</span></div>
-  <div slot="items" class="c-services-menu__item"><h3>Partial balayage</h3><p>Face-frame and crown</p><span>$160</span></div>
-  <div slot="items" class="c-services-menu__item"><h3>Full balayage</h3><p>Includes toner and treatment</p><span>$220</span></div>
-  <div slot="items" class="c-services-menu__item"><h3>Gloss / toner</h3><span>$55</span></div>
-  <div slot="items" class="c-services-menu__item"><h3>Blowout</h3><span>$45</span></div>
-  <div slot="items" class="c-services-menu__item"><h3>Bond-repair treatment</h3><span>$45</span></div>
-</services-menu>
-```
-
-Variants: `<services-menu variant="two-col">`.
-
-Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/services/services-menu/styles.css

@@ -1,6 +0,0 @@
-.c-services-menu__grid{display:grid;gap:0 var(--space-8);max-width:44rem;margin-inline:auto}
-.c-services-menu__item{display:grid;grid-template-columns:1fr auto;gap:var(--space-1) var(--space-4);align-items:baseline;padding:var(--space-4) 0;border-bottom:1px solid var(--color-border)}
-.c-services-menu__item h3{font-size:var(--step-1);font-family:var(--font-body);font-weight:600;letter-spacing:0}
-.c-services-menu__item p{grid-column:1;margin:0;color:var(--color-muted);font-size:var(--step-0)}
-.c-services-menu__item > span{grid-column:2;grid-row:1;font-family:var(--font-display);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
-@media(min-width:900px){.c-services-menu--two-col .c-services-menu__grid{grid-template-columns:1fr 1fr;max-width:none}}

package/blocks/services/services-menu/template.html

@@ -1 +0,0 @@
-<section class="c-services-menu 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="c-services-menu__grid"><slot name="items"></slot></div></div></section>

package/blocks/services/services-packages/README.md

@@ -1,34 +0,0 @@
-# services-packages
-
-Tiered packages / retainers.
-
-- **Category:** services
-- **Media:** none
-- **Registers:** b2b, professional, trade
-- **Variants:** highlight-mid
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Optional `<p class="eyebrow">` |
-| `heading` | `<h2>` |
-| `lede` | Optional `<p class="lede">` (one sentence) |
-| `cards` | 3 `.card` tiers: `<h3>`, `.price`, `<p>`, `<ul class="list-check">`, button. Add `card--accent` to the recommended tier (or use the `highlight-mid` variant). |
-
-## Example
-
-```html
-<services-packages>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">Maintenance plans</p>
-  <h2 slot="heading">Pick a plan. We'll keep the building running.</h2>
-  <p slot="lede" class="lede">All plans include priority scheduling and no overtime rates.</p>
-  <div slot="cards" class="card"><div class="card__body"><h3>Essential</h3><p class="price"><span class="price__amount">$89</span><span class="price__period">/unit · yr</span></p><p>Two visits a year for buildings with newer equipment.</p><ul class="list-check"><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Spring &amp; fall tune-ups</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Filter changes included</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>10% off repairs</li></ul><a class="btn-outline" href="/contact">Choose Essential</a></div></div>
-  <div slot="cards" class="card card--accent"><div class="card__body"><h3>Standard</h3><p class="price"><span class="price__amount">$149</span><span class="price__period">/unit · yr</span></p><p>Quarterly visits and faster response for mixed-age systems.</p><ul class="list-check"><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Four visits a year</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>4-hour emergency response</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>15% off repairs</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Photo report after every visit</li></ul><a class="btn" href="/contact">Choose Standard</a></div></div>
-  <div slot="cards" class="card"><div class="card__body"><h3>Complete</h3><p class="price"><span class="price__amount">$229</span><span class="price__period">/unit · yr</span></p><p>Everything covered, including parts on scheduled visits.</p><ul class="list-check"><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Monthly visits</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>2-hour emergency response</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Parts on maintenance visits</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Annual lifecycle plan</li></ul><a class="btn-outline" href="/contact">Choose Complete</a></div></div>
-</services-packages>
-```
-
-Variants: `<services-packages variant="highlight-mid">`.
-
-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/services/services-packages/styles.css

@@ -1,6 +0,0 @@
-.c-services-packages__grid{align-items:stretch}
-.c-services-packages__grid .card__body{padding:var(--space-6);gap:var(--space-4)}
-.c-services-packages__grid .card__body > h3{font-size:var(--step-1);font-family:var(--font-body);letter-spacing:.02em;text-transform:uppercase;color:var(--color-muted)}
-.c-services-packages__grid .list-check{margin-top:var(--space-2);padding-top:var(--space-4);border-top:1px solid var(--color-border)}
-.c-services-packages__grid .card__body > .btn,.c-services-packages__grid .card__body > .btn-outline{margin-top:auto;justify-self:stretch}
-.c-services-packages--highlight-mid .c-services-packages__grid > :nth-child(2){border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent),var(--shadow-2)}

package/blocks/services/services-packages/template.html

@@ -1 +0,0 @@
-<section class="c-services-packages 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-services-packages__grid"><slot name="cards"></slot></div></div></section>

package/blocks/services/services-panels/README.md

@@ -1,36 +0,0 @@
-# services-panels
-
-Horizontal photo panels — the hovered or focused one expands.
-
-- **Category:** services
-- **Media:** one photo per service
-- **Registers:** professional, beauty, trade
-- **Variants:** (none)
-
-## 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 |
-| `panels` | 4–6 `<a class="photo-card" href><img><div class="photo-card__body"><h3>…</h3><p>…</p></div></a>` |
-
-## Example
-
-```html
-<services-panels>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">Our services</p>
-  <h2 slot="heading">Trusted legal help across five practice areas.</h2>
-  <p slot="lede" class="lede">Every business hits moments where good legal advice really matters. Each area is led by a senior partner.</p>
-  <a slot="actions" class="btn-arrow" href="/services">All services <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
-  <a slot="panels" class="photo-card" href="/services/business-law"><img src="/media/harvest/svc-1.jpg" alt="" width="1200" height="1500" loading="lazy"><div class="photo-card__body"><h3>Business law</h3><p>Contracts, deals, and partnerships that survive the tough conversations.</p></div></a>
-  <a slot="panels" class="photo-card" href="/services/disputes"><img src="/media/harvest/svc-2.jpg" alt="" width="1200" height="1500" loading="lazy"><div class="photo-card__body"><h3>Lawsuits &amp; disputes</h3><p>From first filing to final ruling.</p></div></a>
-  <a slot="panels" class="photo-card" href="/services/compliance"><img src="/media/harvest/svc-3.jpg" alt="" width="1200" height="1500" loading="lazy"><div class="photo-card__body"><h3>Compliance</h3><p>Steady guidance with regulators.</p></div></a>
-  <a slot="panels" class="photo-card" href="/services/ip"><img src="/media/harvest/svc-4.jpg" alt="" width="1200" height="1500" loading="lazy"><div class="photo-card__body"><h3>Intellectual property</h3><p>Patents, secrets, and brands.</p></div></a>
-  <a slot="panels" class="photo-card" href="/services/restructuring"><img src="/media/harvest/svc-5.jpg" alt="" width="1200" height="1500" loading="lazy"><div class="photo-card__body"><h3>Restructuring</h3><p>Workouts and creditor protection.</p></div></a>
-</services-panels>
-```
-
-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.