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

package/blocks/about/about-mission/styles.css

@@ -0,0 +1,5 @@
+.c-about-mission__inner{max-width:48rem;margin-inline:auto;text-align:center;display:grid;gap:var(--space-5);justify-items:center}
+.c-about-mission__inner h2{font-size:var(--step-4);max-width:22ch}
+.c-about-mission__inner .lede{max-width:40rem}
+.c-about-mission__inner .btn-group{justify-content:center}
+.c-about-mission--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/about/about-mission/template.html

@@ -0,0 +1 @@
+<section class="c-about-mission section section--roomy"><div class="wrap c-about-mission__inner"><slot name="eyebrow"></slot><slot></slot><div class="btn-group"><slot name="actions"></slot></div></div></section>

package/blocks/about/about-statement/README.md

@@ -0,0 +1,28 @@
+# about-statement
+
+One big centered sentence with small inline photos — an editorial counterpoint.
+
+- **Category:** about
+- **Media:** 3–4 tiny inline photos
+- **Registers:** professional, beauty, b2b
+- **Variants:** left
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `statement` | `<p>` one long sentence; inline `<img>` (square, ~96px) and `<strong>` for emphasis |
+
+## Example
+
+```html
+<about-statement>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Our story</p>
+  <p slot="statement">From a small office downtown, <img src="/media/harvest/avatar-office.jpg" alt="" width="96" height="96"> to courts <img src="/media/harvest/avatar-court.jpg" alt="" width="96" height="96"> across the country — our work is built on trust, honest advice, and results we <img src="/media/harvest/avatar-team.jpg" alt="" width="96" height="96"> <strong>stand by</strong>.</p>
+</about-statement>
+```
+
+Variants: `<about-statement variant="left">`.
+
+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/about/about-statement/styles.css

@@ -0,0 +1,7 @@
+.c-about-statement__inner{display:grid;gap:var(--space-6);justify-items:center;text-align:center}
+.c-about-statement__text{max-width:52rem;font-family:var(--font-display);font-size:var(--step-4);line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
+.c-about-statement__text p{margin:0}
+.c-about-statement__text img{display:inline-block;width:1.15em;height:1.15em;margin-inline:.12em;border-radius:var(--radius-pill);object-fit:cover;vertical-align:-.22em}
+.c-about-statement__text strong{font-weight:inherit;color:var(--color-accent)}
+.c-about-statement--left .c-about-statement__inner{justify-items:start;text-align:left}
+.c-about-statement--left .c-about-statement__text{max-width:44rem}

package/blocks/about/about-statement/template.html

@@ -0,0 +1 @@
+<section class="c-about-statement section section--roomy"><div class="wrap c-about-statement__inner"><slot name="eyebrow"></slot><div class="c-about-statement__text"><slot name="statement"></slot></div></div></section>

package/blocks/about/about-story/README.md

@@ -0,0 +1,35 @@
+# about-story
+
+Heritage story split.
+
+- **Category:** about
+- **Media:** owner/place photo
+- **Registers:** all
+- **Variants:** reverse
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `media` | `<img>` 4:3 — owner, crew, or storefront |
+| `eyebrow` | Optional eyebrow |
+| `heading` | `<h2>` |
+| `(default)` | 2–3 `<p>` of story copy |
+| `actions` | Optional 1–2 buttons |
+
+## Example
+
+```html
+<about-story>
+  <img src="/media/harvest/owner.jpg" alt="Founder Mike Harbor on a job site" width="1200" height="900" slot="media" loading="lazy">
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Our story</p>
+  <h2 slot="heading">Started with one truck and a promise to call people back.</h2>
+  <p>Mike Harbor started the company in 2009 after a decade running crews for a regional outfit that treated every customer like a line item.</p>
+  <p>Fifteen years later we're eight people, three trucks, and still the same rule: every call gets returned the same day, and every roof gets a foreman who has done a hundred like it.</p>
+  <a slot="actions" class="btn-outline" href="/team">Meet the crew</a>
+</about-story>
+```
+
+Variants: `<about-story 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/about/about-story/styles.css

@@ -0,0 +1,5 @@
+.c-about-story__copy{display:grid;gap:var(--space-5)}
+.c-about-story__copy .section__head{margin-bottom:0}
+.c-about-story__prose{color:var(--color-muted)}
+.c-about-story__prose > p:first-child{color:var(--color-text);font-size:var(--step-1)}
+.c-about-story--reverse .split > :first-child{order:2}

package/blocks/about/about-story/template.html

@@ -0,0 +1 @@
+<section class="c-about-story section"><div class="wrap split"><div class="frame ratio-4x3"><slot name="media"></slot></div><div class="c-about-story__copy"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot></div><div class="prose c-about-story__prose"><slot></slot></div><div class="btn-group"><slot name="actions"></slot></div></div></div></section>

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

@@ -0,0 +1,33 @@
+# about-timeline
+
+Horizontal milestones — year, photo, one line each.
+
+- **Category:** about
+- **Media:** one photo per milestone
+- **Registers:** trade, professional, food
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` (one sentence) |
+| `milestones` | 3–5 `<li><div class="frame ratio-4x3"><img></div><time>2009</time><h3>Title</h3><p>…</p></li>` |
+
+## Example
+
+```html
+<about-timeline>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Our story</p>
+  <h2 slot="heading">Local from day one.</h2>
+  <p slot="lede" class="lede">Harbor started with one truck, a borrowed trailer, and one rule we've never broken: if our name goes on your roof, we stand behind it.</p>
+  <li slot="milestones"><div class="frame ratio-4x3"><img src="/media/harvest/hist-2009.jpg" alt="" width="1200" height="900" loading="lazy"></div><time>2009</time><h3>One truck, one promise</h3><p>Sam Calloway starts Harbor after seeing too many bad storm repairs.</p></li>
+  <li slot="milestones"><div class="frame ratio-4x3"><img src="/media/harvest/hist-2014.jpg" alt="" width="1200" height="900" loading="lazy"></div><time>2014</time><h3>The crew doubles</h3><p>Estimators and project managers join — still no subcontractors.</p></li>
+  <li slot="milestones"><div class="frame ratio-4x3"><img src="/media/harvest/hist-2019.jpg" alt="" width="1200" height="900" loading="lazy"></div><time>2019</time><h3>2,000th roof</h3><p>Every one backed by the same written warranty.</p></li>
+  <li slot="milestones"><div class="frame ratio-4x3"><img src="/media/harvest/hist-today.jpg" alt="" width="1200" height="900" loading="lazy"></div><time>Today</time><h3>A team of 40 locals</h3><p>3,500+ roofs across Greater Portland, and counting.</p></li>
+</about-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/about/about-timeline/styles.css

@@ -0,0 +1,8 @@
+.c-about-timeline__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6) var(--space-4)}
+.c-about-timeline__list > li{display:grid;gap:var(--space-2);align-content:start}
+.c-about-timeline__list .frame{box-shadow:none;margin-bottom:var(--space-3)}
+.c-about-timeline__list time{position:relative;display:block;padding-top:var(--space-4);font-family:var(--font-display);font-size:var(--step-3);font-weight:600;letter-spacing:-.02em;border-top:1px solid var(--color-border)}
+.c-about-timeline__list time::before{content:"";position:absolute;top:-.3rem;left:0;width:.55rem;height:.55rem;border-radius:var(--radius-pill);background:var(--color-accent)}
+.c-about-timeline__list h3{font-size:var(--step-1)}
+.c-about-timeline__list p{margin:0;color:var(--color-muted);font-size:var(--step-0)}
+@media(min-width:900px){.c-about-timeline__list{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-5)}}

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

@@ -0,0 +1 @@
+<section class="c-about-timeline section"><div class="wrap"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><ol class="c-about-timeline__list"><slot name="milestones"></slot></ol></div></section>

package/blocks/about/about-values/README.md

@@ -0,0 +1,31 @@
+# about-values
+
+Values as three cards.
+
+- **Category:** about
+- **Media:** optional icons
+- **Registers:** professional, beauty, b2b
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` (one sentence) |
+| `cards` | 3 `.card.card--flat` with `.icon-tile`, `<h3>`, `<p>` |
+
+## Example
+
+```html
+<about-values>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Values</p>
+  <h2 slot="heading">Three things we won't negotiate on</h2>
+  <div slot="cards" class="card"><div class="card__body"><span class="icon-tile"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s-7-4.6-9-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c-2 4.4-9 9-9 9z"/></svg></span><h3>Honesty over upsell</h3><p>If a repair will hold for five years, we'll say so — even when a replacement would pay better.</p></div></div>
+  <div slot="cards" class="card"><div class="card__body"><span class="icon-tile"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="9" cy="8" r="3.5"/><path d="M2.5 20a6.5 6.5 0 0 1 13 0"/><path d="M16 4.5a3.5 3.5 0 0 1 0 7"/><path d="M17.5 14a6.5 6.5 0 0 1 4 6"/></svg></span><h3>Our people, on our payroll</h3><p>Health insurance, paid training, and no subcontractors. Crews that stay do better work.</p></div></div>
+  <div slot="cards" class="card"><div class="card__body"><span class="icon-tile"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 4c-8 0-14 4-14 11a5 5 0 0 0 5 5c7 0 9-8 9-16z"/><path d="M6 20c3-5 6-8 10-11"/></svg></span><h3>Leave it cleaner</h3><p>Shingles recycled, lawns swept, and a foreman who checks the neighbor's driveway too.</p></div></div>
+</about-values>
+```
+
+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/about/about-values/styles.css

@@ -0,0 +1,3 @@
+.c-about-values__grid .card{background:var(--color-surface)}
+.c-about-values__grid .card__body{padding:var(--space-6);gap:var(--space-3)}
+.c-about-values__grid .card__body > .icon-tile{margin-bottom:var(--space-2)}

package/blocks/about/about-values/template.html

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

package/blocks/blog/blog-featured/README.md

@@ -0,0 +1,39 @@
+# blog-featured
+
+One featured + side list.
+
+- **Category:** blog
+- **Media:** covers
+- **Registers:** professional, b2b
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` |
+| `media` | Featured cover `<img>` (16:9) |
+| `featured` | `<p class="eyebrow">` meta, `<h3><a>` title, `<p>` excerpt, `.btn-arrow` |
+| `posts` | 3–5 compact `<a class="c-blog-featured__row">`: `<span class="eyebrow">` meta + `<strong>` title |
+
+## Example
+
+```html
+<blog-featured>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">From the blog</p>
+  <h2 slot="heading">Latest</h2>
+  <img src="/media/harvest/post-1.jpg" alt="" width="1600" height="900" slot="media" loading="lazy">
+  <p slot="featured" class="eyebrow">Guides · 6 min read</p>
+  <h3 slot="featured"><a href="/blog/roof-lifespan">How long does an asphalt roof actually last in Maine?</a></h3>
+  <p slot="featured">The brochure says 30 years. Here's what we see on tear-offs after 15, 20, and 25 winters — and the three things that make the difference.</p>
+  <a slot="featured" class="btn-arrow" href="/blog/roof-lifespan">Read the guide</a>
+  <a slot="posts" class="c-blog-featured__row" href="/blog/repair-or-replace"><span class="eyebrow">Money · 4 min</span><strong>Repair or replace? A five-question checklist</strong></a>
+  <a slot="posts" class="c-blog-featured__row" href="/blog/recycling"><span class="eyebrow">Behind the scenes · 3 min</span><strong>What happens to your old shingles</strong></a>
+  <a slot="posts" class="c-blog-featured__row" href="/blog/ice-dams"><span class="eyebrow">Winter · 5 min</span><strong>Ice dams: what causes them and what doesn't</strong></a>
+  <a slot="posts" class="c-blog-featured__row" href="/blog/metal-vs-shingle"><span class="eyebrow">Materials · 7 min</span><strong>Metal vs. shingle in a coastal climate</strong></a>
+</blog-featured>
+```
+
+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/blog/blog-featured/styles.css

@@ -0,0 +1,12 @@
+.c-blog-featured__grid{display:grid;gap:var(--space-6)}
+@media(min-width:900px){.c-blog-featured__grid{grid-template-columns:3fr 2fr;gap:var(--space-7);align-items:start}}
+.c-blog-featured__lead .card__body{padding:var(--space-6);gap:var(--space-3)}
+.c-blog-featured__lead .card__body > .eyebrow{font-size:.75rem}
+.c-blog-featured__lead .card__body > h3{font-size:var(--step-3)}
+.c-blog-featured__lead h3 a{text-decoration:none;color:inherit}
+.c-blog-featured__lead h3 a:hover{color:var(--color-accent)}
+.c-blog-featured__list{display:grid;border-top:1px solid var(--color-border)}
+.c-blog-featured__row{display:grid;gap:var(--space-1);padding:var(--space-4) 0;border-bottom:1px solid var(--color-border);text-decoration:none;color:inherit}
+.c-blog-featured__row .eyebrow{font-size:.75rem}
+.c-blog-featured__row strong{font-family:var(--font-display);font-size:var(--step-1);font-weight:600;line-height:1.3;letter-spacing:-.01em}
+.c-blog-featured__row:hover strong{color:var(--color-accent)}

package/blocks/blog/blog-featured/template.html

@@ -0,0 +1 @@
+<section class="c-blog-featured 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="c-blog-featured__grid"><article class="card c-blog-featured__lead"><div class="card__media ratio-16x9"><slot name="media"></slot></div><div class="card__body"><slot name="featured"></slot></div></article><div class="c-blog-featured__list"><slot name="posts"></slot></div></div></div></section>

package/blocks/blog/blog-index/README.md

@@ -0,0 +1,34 @@
+# blog-index
+
+Post card grid.
+
+- **Category:** blog
+- **Media:** cover images
+- **Registers:** b2b, professional, food
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` |
+| `actions` | Optional link (e.g. "All posts") |
+| `posts` | 3 or 6 `<article class="card card--interactive">`: linked `.card__media.ratio-16x9`, `<p class="eyebrow">` meta, `<h3><a>`, `<p>` excerpt, `.btn-arrow` |
+
+## Example
+
+```html
+<blog-index>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Guides</p>
+  <h2 slot="heading">Straight answers about roofs</h2>
+  <p slot="lede" class="lede">Written by the people who install them, not a content agency.</p>
+  <a slot="actions" class="btn-outline" href="/blog">All posts</a>
+  <article slot="posts" class="card card--interactive"><a class="card__media ratio-16x9" href="/blog/post" tabindex="-1" aria-hidden="true"><img src="/media/harvest/post-1.jpg" alt="" width="1600" height="900" loading="lazy"></a><div class="card__body"><p class="eyebrow">Guides · 6 min read</p><h3><a href="/blog/post">How long does an asphalt roof actually last in Maine?</a></h3><p>The brochure says 30 years. Here's what we see on tear-offs, and what shortens or extends it.</p><a class="btn-arrow" href="/blog/post">Read</a></div></article>
+  <article slot="posts" class="card card--interactive"><a class="card__media ratio-16x9" href="/blog/post" tabindex="-1" aria-hidden="true"><img src="/media/harvest/post-2.jpg" alt="" width="1600" height="900" loading="lazy"></a><div class="card__body"><p class="eyebrow">Money · 4 min read</p><h3><a href="/blog/post">Repair or replace? A five-question checklist</a></h3><p>Most roofs we're asked to replace don't need it yet. Run through these before you get quotes.</p><a class="btn-arrow" href="/blog/post">Read</a></div></article>
+  <article slot="posts" class="card card--interactive"><a class="card__media ratio-16x9" href="/blog/post" tabindex="-1" aria-hidden="true"><img src="/media/harvest/post-3.jpg" alt="" width="1600" height="900" loading="lazy"></a><div class="card__body"><p class="eyebrow">Behind the scenes · 3 min read</p><h3><a href="/blog/post">What happens to your old shingles</a></h3><p>About 90% of what comes off your roof gets recycled into road base. Here's how.</p><a class="btn-arrow" href="/blog/post">Read</a></div></article>
+</blog-index>
+```
+
+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/blog/blog-index/styles.css

@@ -0,0 +1,6 @@
+.c-blog-index .card h3 a{text-decoration:none;color:inherit}
+.c-blog-index .card h3 a:hover{color:var(--color-accent)}
+.c-blog-index .card .card__body > .eyebrow{font-size:.75rem}
+.c-blog-index .card .card__body > h3{font-size:var(--step-2)}
+.c-blog-index .card .card__media{display:block}
+.c-blog-index__grid .card__body{gap:var(--space-2)}

package/blocks/blog/blog-index/template.html

@@ -0,0 +1 @@
+<section class="c-blog-index 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-blog-index__grid"><slot name="posts"></slot></div></div></section>

package/blocks/blog/blog-post-header/README.md

@@ -0,0 +1,31 @@
+# blog-post-header
+
+Article title block.
+
+- **Category:** blog
+- **Media:** optional hero
+- **Registers:** all
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `meta` | `<span>` category · read time · date |
+| `(default)` | `<h1>` + `<p class="lede lede--lg">` standfirst |
+| `byline` | Optional `.byline` with avatar + author |
+| `media` | Optional cover `<img>` (21:9) |
+
+## Example
+
+```html
+<blog-post-header>
+  <span slot="meta">Guides · 6 min read · March 12, 2026</span>
+  <h1>How long does an asphalt roof actually last in Maine?</h1>
+  <p class="lede lede--lg">The brochure says 30 years. Here's what we see on tear-offs after 15, 20, and 25 winters — and the three things that make the difference.</p>
+  <div slot="byline" class="byline"><img src="/media/harvest/team-mike.jpg" alt="" width="96" height="96" class="avatar"><div><strong>Mike Harbor</strong><span>Founder, 26 years on roofs</span></div></div>
+  <img src="/media/harvest/post-1.jpg" alt="Close-up of aged asphalt shingles" width="2100" height="900" slot="media" fetchpriority="high">
+</blog-post-header>
+```
+
+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/blog/blog-post-header/styles.css

@@ -0,0 +1,8 @@
+.c-blog-post-header__inner{max-width:46rem;margin-inline:auto;display:grid;gap:var(--space-4);text-align:center;justify-items:center}
+.c-blog-post-header__inner h1{font-size:var(--step-4);max-width:22ch}
+.c-blog-post-header__meta:empty{display:none}
+.c-blog-post-header__byline{margin-top:var(--space-2)}
+.c-blog-post-header__byline:empty{display:none}
+.c-blog-post-header__byline .byline{text-align:left}
+.c-blog-post-header__media{margin-top:var(--space-7);box-shadow:none}
+.c-blog-post-header__media:not(:has(img,video)){display:none}

package/blocks/blog/blog-post-header/template.html

@@ -0,0 +1 @@
+<header class="c-blog-post-header section"><div class="wrap"><div class="c-blog-post-header__inner"><p class="eyebrow eyebrow--accent c-blog-post-header__meta"><slot name="meta"></slot></p><slot></slot><div class="c-blog-post-header__byline"><slot name="byline"></slot></div></div><div class="frame ratio-21x9 c-blog-post-header__media"><slot name="media"></slot></div></div></header>

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

@@ -0,0 +1,32 @@
+# contact-cards
+
+Phone / email / address cards.
+
+- **Category:** contact
+- **Media:** none
+- **Registers:** trade, professional
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` |
+| `cards` | 3 `.card` items: `.icon-tile`, `<h3>` label, `<p>` value (with `<a>`), `<p>` note |
+
+## Example
+
+```html
+<contact-cards>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Get in touch</p>
+  <h2 slot="heading">Three ways to reach us</h2>
+  <p slot="lede" class="lede">Pick whichever is easiest — they all land with the same two people.</p>
+  <div slot="cards" class="card"><div class="card__body"><span class="icon-tile icon-tile--round"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 3h4l2 5-3 2a12 12 0 0 0 6 6l2-3 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 4 5a2 2 0 0 1 2-2z"/></svg></span><h3>Call</h3><p><a href="tel:+15550102000">(555) 010-2000</a></p><p>Mon–Fri 7:30–5:00</p></div></div>
+  <div slot="cards" class="card"><div class="card__body"><span class="icon-tile icon-tile--round"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></span><h3>Email</h3><p><a href="mailto:hello@harborroofing.example">hello@harborroofing.example</a></p><p>Replies within one business day</p></div></div>
+  <div slot="cards" class="card"><div class="card__body"><span class="icon-tile icon-tile--round"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 22s7-6.2 7-12a7 7 0 1 0-14 0c0 5.8 7 12 7 12z"/><circle cx="12" cy="10" r="2.5"/></svg></span><h3>Visit</h3><p><a href="https://maps.example/harbor" rel="noopener">12 Harbor St, Portland</a></p><p>Free parking out back</p></div></div>
+</contact-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/contact/contact-cards/styles.css

@@ -0,0 +1,7 @@
+.c-contact-cards__grid{max-width:64rem;margin-inline:auto}
+.c-contact-cards__grid .card__body{padding:var(--space-6);gap:var(--space-2);text-align:center;justify-items:center}
+.c-contact-cards__grid .card__body > .icon-tile{margin-bottom:var(--space-3)}
+.c-contact-cards__grid .card__body > h3{font-size:var(--step-1)}
+.c-contact-cards__grid .card__body > p a{font-weight:600;color:var(--color-text);text-decoration:none}
+.c-contact-cards__grid .card__body > p a:hover{color:var(--color-accent)}
+.c-contact-cards__grid .card__body > p + p{font-size:var(--step-0)}

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

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

package/blocks/contact/contact-chips/README.md

@@ -0,0 +1,41 @@
+# contact-chips
+
+Lead form with pill choices (what / budget) beside a short intro.
+
+- **Category:** contact
+- **Media:** none
+- **Registers:** b2b, beauty, professional, trade
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` (one sentence) |
+| `details` | Optional 1–3 `<a>` rows (`.icon-tile` + `<span><strong>value</strong><span>note</span></span>`) |
+| `fields` | `<fieldset class="chips">` groups (radio inputs) followed by `.field`s |
+| `submit` | `<button class="btn" type="submit">` + optional `<small>` |
+
+## Example
+
+```html
+<contact-chips>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Work with Hive</p>
+  <h2 slot="heading">Tell us about the project.</h2>
+  <p slot="lede" class="lede">Two quick choices, then a sentence or two. We reply within one business day.</p>
+  <a slot="details" href="mailto:hello@hive.example"><span class="icon-tile icon-tile--muted"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></span><span><strong>hello@hive.example</strong><span>Portfolio requests welcome</span></span></a>
+  <a slot="details" href="tel:+15550104040"><span class="icon-tile icon-tile--muted"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 3h4l2 5-3 2a12 12 0 0 0 6 6l2-3 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 4 5a2 2 0 0 1 2-2z"/></svg></span><span><strong>(555) 010-4040</strong><span>Tue–Fri, 10–5</span></span></a>
+  <fieldset slot="fields" class="chips"><legend>How can we help?</legend><label><input type="radio" name="service" value="logo" checked><span>Logo design</span></label><label><input type="radio" name="service" value="identity"><span>Brand identity</span></label><label><input type="radio" name="service" value="rebrand"><span>Rebranding</span></label><label><input type="radio" name="service" value="icons"><span>Icon design</span></label></fieldset>
+  <fieldset slot="fields" class="chips"><legend>What's your budget range?</legend><label><input type="radio" name="budget" value="10-20" checked><span>$10k – $20k</span></label><label><input type="radio" name="budget" value="20-50"><span>$20k – $50k</span></label><label><input type="radio" name="budget" value="50-100"><span>$50k – $100k</span></label><label><input type="radio" name="budget" value="100+"><span>$100k +</span></label></fieldset>
+  <div slot="fields" class="field"><label for="cc-name">Your name</label><input class="input" id="cc-name" name="name" autocomplete="name" required></div>
+  <div slot="fields" class="field"><label for="cc-email">Email</label><input class="input" id="cc-email" name="email" type="email" autocomplete="email" required></div>
+  <div slot="fields" class="field"><label for="cc-company">Company</label><input class="input" id="cc-company" name="company" autocomplete="organization"></div>
+  <div slot="fields" class="field"><label for="cc-msg">Tell us about the project</label><textarea class="textarea" id="cc-msg" name="message" placeholder="What you make, who it's for, and when you'd like to launch."></textarea></div>
+  <button slot="submit" class="btn" type="submit">Kick things off</button>
+  <small slot="submit">No retainers, no surprise invoices. We'll send a scope before any work starts.</small>
+</contact-chips>
+```
+
+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/contact/contact-chips/styles.css

@@ -0,0 +1,13 @@
+.c-contact-chips__grid{display:grid;gap:var(--space-6)}
+.c-contact-chips__copy .section__head{margin-bottom:var(--space-5)}
+.c-contact-chips__details{display:grid;gap:var(--space-4)}
+.c-contact-chips__details:empty{display:none}
+.c-contact-chips__details > a{display:flex;gap:var(--space-4);align-items:flex-start;text-decoration:none;color:inherit}
+.c-contact-chips__details > a > span:last-child{display:grid;gap:.15rem}
+.c-contact-chips__details strong{font-weight:600}
+.c-contact-chips__details > a > span:last-child > span{color:var(--color-muted);font-size:var(--step-0)}
+.c-contact-chips__form{gap:var(--space-5);max-width:36rem}
+.c-contact-chips__form .field + .field{margin-top:0}
+.c-contact-chips__submit{display:grid;gap:var(--space-2);justify-items:start}
+.c-contact-chips__submit small{color:var(--color-muted)}
+@media(min-width:900px){.c-contact-chips__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--space-9);align-items:start}.c-contact-chips__copy{position:sticky;top:calc(var(--header-h) + var(--space-5))}}

package/blocks/contact/contact-chips/template.html

@@ -0,0 +1 @@
+<section class="c-contact-chips section"><div class="wrap c-contact-chips__grid"><div class="c-contact-chips__copy"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="c-contact-chips__details"><slot name="details"></slot></div></div><form class="c-contact-chips__form form-grid" data-lead-form method="post" action="/api/lead"><slot name="fields"></slot><div class="c-contact-chips__submit"><slot name="submit"></slot></div></form></div></section>

package/blocks/contact/contact-hours/README.md

@@ -0,0 +1,41 @@
+# contact-hours
+
+Hours table + CTA.
+
+- **Category:** contact
+- **Media:** none
+- **Registers:** trade, food, beauty
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` |
+| `actions` | 1–2 buttons |
+| `hours` | 7 `<tr>` rows: `<th scope="row">Day</th><td>Hours</td>`; add `class="is-today"` to highlight |
+| `note` | Optional `<small>` under the table (holidays, last seating) |
+
+## Example
+
+```html
+<contact-hours>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Hours</p>
+  <h2 slot="heading">Open six days. Closed Sundays and most holidays.</h2>
+  <p slot="lede" class="lede">Kitchen closes 30 minutes before we do.</p>
+  <a slot="actions" class="btn" href="/reserve">Reserve a table</a>
+  <a slot="actions" class="btn-outline" href="tel:+15550102000">Call</a>
+  <tr slot="hours"><th scope="row">Monday</th><td>Closed</td></tr>
+  <tr slot="hours"><th scope="row">Tuesday</th><td>5:00 – 10:00 pm</td></tr>
+  <tr slot="hours"><th scope="row">Wednesday</th><td>5:00 – 10:00 pm</td></tr>
+  <tr slot="hours" class="is-today"><th scope="row">Thursday</th><td>5:00 – 10:00 pm</td></tr>
+  <tr slot="hours"><th scope="row">Friday</th><td>5:00 – 11:00 pm</td></tr>
+  <tr slot="hours"><th scope="row">Saturday</th><td>4:30 – 11:00 pm</td></tr>
+  <tr slot="hours"><th scope="row">Sunday</th><td>Closed</td></tr>
+  <small slot="note">Closed Thanksgiving, Dec 24–26, and Jan 1.</small>
+</contact-hours>
+```
+
+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/contact/contact-hours/block.meta.json

@@ -0,0 +1,87 @@
+{
+  "schemaVersion": 1,
+  "id": "contact/contact-hours",
+  "revision": 1,
+  "status": "draft",
+  "owner": "Vitris design library",
+  "sourceHash": "19aa27804b5a70f29808a862c4ec108b865e787677edf07aa16c9a552dc033c2",
+  "fit": {
+    "visitorJobs": [
+      "Find opening hours and contact the business"
+    ],
+    "pageRoles": [
+      "practical contact"
+    ],
+    "useWhen": [
+      "Find opening hours and contact the business"
+    ],
+    "avoidWhen": [
+      "The content or media cannot support this composition"
+    ]
+  },
+  "content": {
+    "requiredSlots": [
+      "heading",
+      "actions",
+      "hours"
+    ],
+    "optionalSlots": [
+      "eyebrow",
+      "lede",
+      "note"
+    ],
+    "testedItemCounts": [
+      1
+    ]
+  },
+  "media": {
+    "min": 0,
+    "max": 8,
+    "optionalBehavior": "Recompose without empty media frames when media is optional",
+    "aspect": [
+      "content-dependent"
+    ]
+  },
+  "composition": {
+    "hierarchy": "information split",
+    "alignment": "left",
+    "density": "compact",
+    "mediaProminence": "none",
+    "geometry": [
+      "split",
+      "table"
+    ],
+    "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/contact--contact-hours.json"
+  }
+}

package/blocks/contact/contact-hours/styles.css

@@ -0,0 +1,8 @@
+.c-contact-hours__copy .section__head{margin-bottom:var(--space-5)}
+.c-contact-hours__card{padding:var(--space-5) var(--space-6);display:grid;gap:var(--space-3)}
+.c-contact-hours__table th{font-weight:500;color:var(--color-text);text-transform:none;letter-spacing:0;font-size:var(--step-1)}
+.c-contact-hours__table td{color:var(--color-muted);font-variant-numeric:tabular-nums}
+.c-contact-hours__table tr:last-child th,.c-contact-hours__table tr:last-child td{border-bottom:0}
+.c-contact-hours__table .is-today th,.c-contact-hours__table .is-today td{color:var(--color-accent);font-weight:600}
+.c-contact-hours__card small{color:var(--color-muted)}
+@media(min-width:720px){.c-contact-hours .split{grid-template-columns:3fr 2fr;align-items:center}}

package/blocks/contact/contact-hours/template.html

@@ -0,0 +1 @@
+<section class="c-contact-hours section"><div class="wrap split split--top"><div class="c-contact-hours__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><div class="card c-contact-hours__card"><table class="table table--plain c-contact-hours__table"><tbody><slot name="hours"></slot></tbody></table><slot name="note"></slot></div></div></section>