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

package/blocks/INDEX.md

@@ -1,130 +0,0 @@
-# Vitris blocks index
-
-Original vanilla HTML/CSS block references. Copy a folder into a site `components/<name>/` and adapt. Use kernel primitives (`.section`, `.card`, `.grid`, …) and `variant="…"` on authoring tags.
-
-See [CONVENTIONS.md](CONVENTIONS.md) and [icons.md](icons.md).
-
-| Id | Look | Media | Registers | Variants |
-|----|------|-------|-----------|----------|
-| `about/about-awards` | Numbered awards / rankings list beside a photo. | optional photo | professional, b2b, beauty | (none) |
-| `about/about-credentials` | Credentials / licenses grid. | badge marks | trade, professional | (none) |
-| `about/about-founder` | Founder portrait beside a dark letter / quote panel. | one portrait | trade, food, beauty, professional | reverse |
-| `about/about-mission` | Centered mission statement. | optional background still | professional, beauty, food | dark |
-| `about/about-statement` | One big centered sentence with small inline photos — an editorial counterpoint. | 3–4 tiny inline photos | professional, beauty, b2b | left |
-| `about/about-story` | Heritage story split. | owner/place photo | all | reverse |
-| `about/about-timeline` | Horizontal milestones — year, photo, one line each. | one photo per milestone | trade, professional, food | (none) |
-| `about/about-values` | Values as three cards. | optional icons | professional, beauty, b2b | (none) |
-| `blog/blog-featured` | One featured + side list. | covers | professional, b2b | (none) |
-| `blog/blog-index` | Post card grid. | cover images | b2b, professional, food | (none) |
-| `blog/blog-post-header` | Article title block. | optional hero | all | (none) |
-| `contact/contact-cards` | Phone / email / address cards. | none | trade, professional | (none) |
-| `contact/contact-chips` | Lead form with pill choices (what / budget) beside a short intro. | none | b2b, beauty, professional, trade | (none) |
-| `contact/contact-hours` | Hours table + CTA. | none | trade, food, beauty | (none) |
-| `contact/contact-map` | Media/map still beside details. | map or storefront | trade, food, beauty | reverse |
-| `contact/contact-offices` | One card per location: map still, address, phone, email. | map or storefront still per office | professional, b2b, trade | (none) |
-| `contact/contact-phone-first` | A direct call path for businesses whose visitors need a conversation more than a form. Useful availability and alternate contact details remain visible. The example business and number are fictional. | none | trade, professional, food | (none) |
-| `contact/contact-split` | NAP + lead form. | optional map still | all | (none) |
-| `contact/contact-visit` | Location, hours, and access information without relying on a decorative map. The address gets prominence; practical notes answer what a visitor needs before traveling. This is a fictional teaching example. | none | food, beauty, professional, trade | (none) |
-| `contact/service-areas` | Towns we serve as chips, with a fallback line. | none | trade, beauty, food | (none) |
-| `content/glossary` | Term / definition grid — jargon a customer sees on an estimate. | none | trade, professional, b2b | (none) |
-| `content/list-split` | Label left, hairline rows right (values, process, challenge → result). | none | all | numbered |
-| `content/prose-split` | Short label left, prose right; optional facts row (client, date, scope). | none | all | (none) |
-| `content/specification-ledger` | A dense, readable fact ledger for product or service specifications. The heading introduces why the distinctions matter; rows keep units and limits visible. The example describes a fictional material offer. | none | b2b, trade, professional | (none) |
-| `cta/cta-band` | Full-width conversion band. | none | all | dark, accent |
-| `cta/cta-card` | Centered elevated CTA card. | optional media | beauty, food, b2b | muted |
-| `cta/cta-floating-bar` | Compact bottom/inline urgency bar (static). | none | trade, food | sticky, accent |
-| `cta/cta-inline` | Quiet one-line CTA: heading beside a button with the team's faces. | 2–3 tiny portraits | b2b, professional, beauty | center |
-| `cta/cta-newsletter` | Email capture strip. | none | food, beauty, b2b | dark |
-| `cta/cta-photo-fan` | Fanned polaroid photos over a centered closing CTA. | 5 square photos | trade, beauty, food | muted |
-| `cta/cta-split` | CTA copy + form or phone block. | optional | trade, professional | dark |
-| `faq/faq-accordion` | Default details/summary FAQ. | none | all | two-col |
-| `faq/faq-grouped` | Grouped FAQ with a sticky jump-nav and optional rating card. | none | trade, professional, b2b | (none) |
-| `faq/faq-split` | FAQ beside contact CTA. | none | trade, professional, b2b | (none) |
-| `faq/faq-tabs` | Categorized FAQ tabs. | none | b2b, professional | (none) |
-| `feature/feature-bento` | Mixed-span bento feature board. | mixed media tiles | b2b, beauty, food | (none) |
-| `feature/feature-compare-table` | "Why us" comparison table with a highlighted column. | none | trade, b2b, professional | dark |
-| `feature/feature-comparison` | Simple two-column compare cards. | optional | b2b, trade, professional | (none) |
-| `feature/feature-grid-3` | Three icon+title+blurb pillars. | icons or small media | all | center, cards |
-| `feature/feature-icon-list` | Dense checklist of capabilities. | icons | trade, b2b, professional | two-col |
-| `feature/feature-spotlight` | One large feature with side bullets. | hero media | beauty, food, b2b | reverse |
-| `feature/feature-stats-band` | Four stats with optional count-up. | none | trade, b2b, professional | dark |
-| `feature/feature-tabs` | Tabbed feature panels. | optional per-panel media | b2b, professional | pill |
-| `feature/feature-thumb-list` | Copy + large photo beside a stack of thumbnail cards. | one hero photo + 3–4 thumbnails | trade, b2b, beauty | dark, reverse |
-| `feature/feature-zigzag` | Alternating copy/media story rows. | media per row | trade, beauty, professional | (none) |
-| `footer/footer-columns` | Multi-column directory footer. | logo optional | all | dark |
-| `footer/footer-compact` | Brand + legal + cookie link. | logo optional | all | (none) |
-| `footer/footer-cta` | Mini CTA above compact footer. | none | trade, beauty, food | dark |
-| `footer/footer-social` | Social icons + NAP strip. | social icons | beauty, food, trade | (none) |
-| `footer/footer-wordmark` | Directory footer with a giant clipped wordmark. | logo optional | trade, b2b, beauty | dark |
-| `gallery/gallery-before-after` | Before/after project cases. | paired photos | trade | (none) |
-| `gallery/gallery-carousel` | Full-bleed project carousel. | photos | trade, beauty, food | (none) |
-| `gallery/gallery-grid` | Responsive photo grid. | photos | trade, beauty, food | four |
-| `gallery/gallery-masonry` | Mixed aspect gallery. | photos | beauty, food, trade | (none) |
-| `gallery/gallery-mosaic-split` | Copy beside a photo mosaic with one quote tile mixed in. | 5–6 photos | trade, beauty, food | reverse |
-| `hero/hero-asymmetric` | Diagonal balance: heavy type corner vs dense photo. | strong subject photo | beauty, professional, trade | reverse |
-| `hero/hero-before-after` | Trade showcase with draggable before/after beside copy. | paired before/after photos | trade | reverse |
-| `hero/hero-editorial` | Type-led hero with generous air — premium / professional. | optional small media | professional, b2b, beauty | center |
-| `hero/hero-evidence` | Type-led, no-photo opening with a quieter column for verified reasons to trust the business. The two columns carry different levels of emphasis; the proof is not a substitute for an invented testimonial or metric. This example is for the fictional Northline Counsel practice. | none | professional, b2b, trade | (none) |
-| `hero/hero-form` | Lead form in the fold beside value prop. | optional side media | trade, b2b, professional | dark |
-| `hero/hero-menu` | Restaurant/menu: headline + featured dishes strip. | food photography | food | center |
-| `hero/hero-overlay` | Full-bleed photo with scrim and dual CTAs — immersive home default. | darker LCP photo | trade, beauty, food | tall, center |
-| `hero/hero-page` | Interior page header: eyebrow + h1 left, intro right, optional photo band. | optional wide photo | all | center |
-| `hero/hero-product` | Product/mockup as architecture — b2b/agency. | device mockup or product still | b2b, professional | reverse |
-| `hero/hero-service` | Service page header: photo band with an overlapping title card and a dark quote card. | wide service photo | trade, beauty, professional | (none) |
-| `hero/hero-split` | 50/50 copy + media; default trade/home-service hero. | photo or illustration LCP | trade, beauty, food, professional | reverse, dark |
-| `hero/hero-statement` | One huge centered statement with a three-image filmstrip beneath — studio / agency opener. | 3 landscape stills | b2b, beauty, professional | dark |
-| `hero/hero-stats` | Headline with proof metrics under the fold of the hero. | optional LCP | trade, b2b, professional | dark |
-| `hero/hero-video-still` | Poster still with play affordance linking to content clip — never autoplay bg. | poster still | beauty, food, b2b | center |
-| `incentives/incentive-banner` | Promo / offer banner. | none | trade, beauty, food | accent |
-| `incentives/incentive-cards` | Offer cards (financing, warranty, gift). | optional icons | trade, beauty, professional | (none) |
-| `navbar/nav-announcement` | Announcement strip above sticky split nav. | logo optional | trade, beauty, food, b2b | accent |
-| `navbar/nav-centered` | Centered mark with flanking link clusters — beauty / premium. | logo preferred | beauty, food, professional | static |
-| `navbar/nav-minimal` | Logo + CTA only — landing / lead-capture pages. | logo optional | trade, b2b, beauty | static |
-| `navbar/nav-split` | Sticky blurred header: logo left, links center-right, filled CTA. | logo optional | trade, beauty, b2b, food, professional | static |
-| `navbar/nav-utility` | Dual-tier: slim utility row (phone/hours) + primary bar. B2B default. | logo optional | b2b, professional, trade | static |
-| `pricing/menu-featured` | Featured dishes with prices. | food photos | food | (none) |
-| `pricing/menu-sections` | Categorized menu lists. | optional | food, beauty | (none) |
-| `pricing/pricing-table` | Simple feature compare table. | none | b2b, professional | (none) |
-| `pricing/pricing-tiers` | Three pricing tiers. | none | b2b, professional, beauty | highlight-mid |
-| `pricing/pricing-toggle` | Monthly/annual toggle via tabs island. | none | b2b, professional | (none) |
-| `process/process-carousel` | Process cards in buttoned carousel. | optional | trade, beauty | (none) |
-| `process/process-split` | Copy + large how-it-works media. | illustration or photo | b2b, trade, beauty | reverse |
-| `process/process-stepper` | One large photo panel per step with a step strip below (tabs island). | one photo per step | professional, trade, beauty | (none) |
-| `process/process-steps` | Numbered horizontal/stacked steps. | optional icons | trade, b2b, professional | three |
-| `process/process-sticky` | Sticky intro column beside numbered steps with thumbnails. | one thumbnail per step | trade, beauty, b2b | dark |
-| `process/process-timeline` | Vertical timeline. | optional | professional, b2b, trade | (none) |
-| `services/services-cards` | Service cards with optional price. | card images optional | trade, beauty, professional, food | (none) |
-| `services/services-carousel` | Buttoned carousel for 4+ services. | card media | trade, beauty, food | (none) |
-| `services/services-list` | Editorial service list with CTA per row. | optional thumbs | professional, trade, b2b | (none) |
-| `services/services-menu` | Menu-style priced items. | food photos optional | food, beauty | two-col |
-| `services/services-packages` | Tiered packages / retainers. | none | b2b, professional, trade | highlight-mid |
-| `services/services-panels` | Horizontal photo panels — the hovered or focused one expands. | one photo per service | professional, beauty, trade | (none) |
-| `services/services-photo-grid` | Photo tiles with the service name over a scrim; optional dark CTA tile. | one photo per service | trade, professional, beauty | four |
-| `services/services-priority` | An unequal service index for a business with one primary offer and several supporting services. The featured service gets depth; the remaining rows stay easy to scan. Fictional Northline Counsel copy is used only for teaching. | none | professional, trade, b2b | (none) |
-| `stats/stats-cards` | Metric cards with labels. | none | b2b, trade | (none) |
-| `stats/stats-mosaic` | Dark stat tiles alternating with photos in one band. | 2 photos | professional, b2b, trade | (none) |
-| `stats/stats-row` | Inline four metrics. | none | trade, b2b, professional | dark |
-| `stats/stats-split` | Stat cluster beside copy. | optional media | professional, trade | (none) |
-| `team/team-featured` | Featured person + roster. | portraits | professional, beauty | reverse |
-| `team/team-grid` | Portrait grid of people. | portraits | professional, beauty, b2b, trade | three |
-| `team/team-list` | Compact name/role list. | optional avatars | professional, b2b | (none) |
-| `testimonial/testimonial-carousel` | Buttoned testimonial carousel. | portraits | trade, beauty, food | (none) |
-| `testimonial/testimonial-grid` | Three testimonial cards. | portraits optional | all | (none) |
-| `testimonial/testimonial-mosaic` | Bento of quote cards, stat tiles, and portraits. | 2–3 portraits | professional, b2b, beauty | (none) |
-| `testimonial/testimonial-platform` | Review-platform card: big rating, three recent reviews, "write a review" link. | small portraits | trade, beauty, food | dark |
-| `testimonial/testimonial-rating` | Star rating band with review count. | none | trade, beauty, food, professional | muted |
-| `testimonial/testimonial-spotlight` | Large quote with avatar attribution. | portrait optional | all | dark |
-| `testimonial/testimonial-switcher` | Pick a reviewer, read their quote (tabs island). | small portraits | trade, beauty, professional | avatars |
-| `testimonial/testimonial-wall` | Dense quote wall / press mentions. | press marks optional | b2b, professional | (none) |
-| `trust-strip/trust-badges` | Rating chip + cert badges row. | optional badge icons | trade, beauty, food, professional | muted |
-| `trust-strip/trust-certs` | Proof sentence over a row of certification tiles. | badge icons | trade, professional, beauty | muted |
-| `trust-strip/trust-logos` | Grayscale logo row under hero. | partner marks | trade, b2b, professional, food | muted |
-| `trust-strip/trust-quote` | Single spotlight quote as trust band. | optional portrait | all | dark |
-| `trust-strip/trust-reviews` | Avatar cluster + rating line + review-platform marks. | 3–5 tiny portraits, 2–4 platform marks | trade, beauty, food, professional | center |
-| `work/case-alternating` | Numbered case studies alternating photo and copy. | one photo per case | professional, b2b, trade | (none) |
-| `work/case-carousel` | One case per slide: copy left, image right, arrow nav. | one photo per case | b2b, professional, beauty | (none) |
-| `work/case-header` | Case study / project header: breadcrumb, title, meta, hero image, side CTA card. | one hero photo | professional, b2b, trade | (none) |
-| `work/project-evidence` | A project story led by one real image and a compact fact ledger. Captions explain what the image actually shows; facts remain independently verifiable. This example is for the fictional Tide &amp; Slate roofing company and uses a synthetic teaching image, never customer proof. | one project photo required | trade, professional, b2b | (none) |
-| `work/project-grid` | Portfolio grid: image, title, category. | one photo per project | b2b, beauty, trade, professional | two |
-
-Total: **120** blocks.

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

@@ -1,36 +0,0 @@
-# about-awards
-
-Numbered awards / rankings list beside a photo.
-
-- **Category:** about
-- **Media:** optional photo
-- **Registers:** professional, b2b, beauty
-- **Variants:** (none)
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Optional `<p class="eyebrow">` |
-| `heading` | `<h2>` |
-| `lede` | Optional `<p class="lede">` (one sentence) |
-| `media` | Optional `<img>` (4:3) under the head |
-| `awards` | 4–7 `<li><span>Award — Category</span><time>2026</time></li>` (first is highlighted) |
-
-## Example
-
-```html
-<about-awards>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">Our awards</p>
-  <h2 slot="heading">Awards that reflect our work.</h2>
-  <p slot="lede" class="lede">Top rankings from the guides that lawyers actually trust — earned year after year.</p>
-  <img src="/media/harvest/award.jpg" alt="A glass award being handed over" width="1200" height="900" slot="media" loading="lazy">
-  <li slot="awards"><span>Chambers USA — Top Rated for Lawsuits</span><time>2026</time></li>
-  <li slot="awards"><span>The Legal 500 — Top Tier in Finance Law</span><time>2026</time></li>
-  <li slot="awards"><span>Benchmark Litigation — Top Tier Firm</span><time>2025</time></li>
-  <li slot="awards"><span>The American Lawyer — Litigation Team of the Year</span><time>2025</time></li>
-  <li slot="awards"><span>Law360 — Practice Group of the Year</span><time>2024</time></li>
-</about-awards>
-```
-
-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-awards/styles.css

@@ -1,13 +0,0 @@
-.c-about-awards__grid{display:grid;gap:var(--space-6)}
-.c-about-awards__side{display:grid;gap:var(--space-5);align-content:start}
-.c-about-awards__side .section__head{margin-bottom:0}
-.c-about-awards__media:empty{display:none}
-.c-about-awards__list{list-style:none;margin:0;padding:0;counter-reset:award;align-self:center}
-.c-about-awards__list > li{display:grid;grid-template-columns:2.5rem minmax(0,1fr) auto;gap:var(--space-3);align-items:center;padding:var(--space-4) var(--space-4);border-bottom:1px solid var(--color-border);counter-increment:award}
-.c-about-awards__list > li::before{content:counter(award,decimal-leading-zero) ".";font-weight:600;color:var(--color-accent);font-variant-numeric:tabular-nums}
-.c-about-awards__list > li > span{font-weight:500}
-.c-about-awards__list > li > time{font-size:var(--step-0);color:var(--color-muted);font-variant-numeric:tabular-nums}
-.c-about-awards__list > li:first-child{background:var(--color-text);color:var(--color-bg);border-radius:var(--radius-md);border-bottom:0}
-.c-about-awards__list > li:first-child::before,.c-about-awards__list > li:first-child > time{color:inherit;opacity:.8}
-.c-about-awards__list > li:first-child + li{border-top:1px solid var(--color-border)}
-@media(min-width:900px){.c-about-awards__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--space-9)}}

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

@@ -1 +0,0 @@
-<section class="c-about-awards section"><div class="wrap c-about-awards__grid"><div class="c-about-awards__side"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="frame ratio-4x3 c-about-awards__media"><slot name="media"></slot></div></div><ol class="c-about-awards__list"><slot name="awards"></slot></ol></div></section>

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

@@ -1,33 +0,0 @@
-# about-credentials
-
-Credentials / licenses grid.
-
-- **Category:** about
-- **Media:** badge marks
-- **Registers:** trade, professional
-- **Variants:** (none)
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Optional `<p class="eyebrow">` |
-| `heading` | `<h2>` |
-| `lede` | Optional `<p class="lede">` (one sentence) |
-| `items` | 4 or 8 `.card` items with `.icon-tile`, `<h3>` (short), `<p>` (number / issuer) |
-
-## Example
-
-```html
-<about-credentials>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">Credentials</p>
-  <h2 slot="heading">Licensed, certified, and insured — in writing</h2>
-  <p slot="lede" class="lede">Ask for the certificates. We bring them to every estimate.</p>
-  <div slot="items" 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 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><h3>Maine contractor license</h3><p>#RC-20419 · active since 2009</p></div></div>
-  <div slot="items" class="card"><div class="card__body"><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><h3>GAF Master Elite</h3><p>Top 2% of roofers nationally</p></div></div>
-  <div slot="items" 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="M20 6 9 17l-5-5"/></svg></span><h3>Fully insured</h3><p>$2M liability · workers' comp</p></div></div>
-  <div slot="items" class="card"><div class="card__body"><span class="icon-tile icon-tile--round"><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>BBB A+ rated</h3><p>Accredited since 2012</p></div></div>
-</about-credentials>
-```
-
-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-credentials/block.meta.json

@@ -1,85 +0,0 @@
-{
-  "schemaVersion": 1,
-  "id": "about/about-credentials",
-  "revision": 1,
-  "status": "draft",
-  "owner": "Vitris design library",
-  "sourceHash": "67c4b5ac710eba9e6928561d97aa942a17613cfe9d38f18a3793ded544610dca",
-  "fit": {
-    "visitorJobs": [
-      "Verify credentials and relevant qualifications"
-    ],
-    "pageRoles": [
-      "proof"
-    ],
-    "useWhen": [
-      "Verify credentials and relevant qualifications"
-    ],
-    "avoidWhen": [
-      "The content or media cannot support this composition"
-    ]
-  },
-  "content": {
-    "requiredSlots": [
-      "heading",
-      "items"
-    ],
-    "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": "credentials grid",
-    "alignment": "centered",
-    "density": "compact",
-    "mediaProminence": "low",
-    "geometry": [
-      "grid",
-      "proof"
-    ],
-    "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/about--about-credentials.json"
-  }
-}

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

@@ -1,4 +0,0 @@
-.c-about-credentials__grid .card__body{align-items:center;justify-items:center;text-align:center;padding:var(--space-5) var(--space-4);gap:var(--space-2)}
-.c-about-credentials__grid .card__body > h3{font-size:var(--step-1)}
-.c-about-credentials__grid .card__body > p{font-size:var(--step-0)}
-.c-about-credentials__grid .card__body > .icon-tile{margin-bottom:var(--space-2)}

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

@@ -1 +0,0 @@
-<section class="c-about-credentials section"><div class="wrap"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="grid grid--4 c-about-credentials__grid"><slot name="items"></slot></div></div></section>

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

@@ -1,35 +0,0 @@
-# about-founder
-
-Founder portrait beside a dark letter / quote panel.
-
-- **Category:** about
-- **Media:** one portrait
-- **Registers:** trade, food, beauty, professional
-- **Variants:** reverse
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `media` | `<img>` portrait (4:5) |
-| `eyebrow` | Optional `<p class="eyebrow">` |
-| `heading` | `<h2>` |
-| `quote` | 1–3 `<p>` paragraphs in the founder's voice |
-| `byline` | `<div><strong>Name</strong><span>Role</span></div>` |
-
-## Example
-
-```html
-<about-founder>
-  <img src="/media/harvest/founder.jpg" alt="Sam Calloway holding a hard hat on a job site" width="1200" height="1500" slot="media" loading="lazy">
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">From the founder</p>
-  <h2 slot="heading">A different way to build a roofing company.</h2>
-  <p slot="quote">“I started Harbor after one bad hail season too many — watching out-of-town crews patch roofs, cash the check, and leave before the first leak showed up.</p>
-  <p slot="quote">Every roof we build comes with the same promise: the person who shakes your hand on day one walks the finished roof with you at the end. And the warranty is in writing, so you can hold us to it.”</p>
-  <div slot="byline"><strong>Sam Calloway</strong><span>Founder &amp; master roofer</span></div>
-</about-founder>
-```
-
-Variants: `<about-founder 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-founder/styles.css

@@ -1,9 +0,0 @@
-.c-about-founder__grid{display:grid;gap:var(--space-4)}
-.c-about-founder__media{overflow:hidden;border-radius:var(--radius-lg);background:var(--color-surface-2);min-height:20rem}
-.c-about-founder__media img{width:100%;height:100%;object-fit:cover}
-.c-about-founder__panel{display:grid;gap:var(--space-4);align-content:center;padding:var(--space-7) var(--space-6);border-radius:var(--radius-lg)}
-.c-about-founder__panel h2{font-size:var(--step-3)}
-.c-about-founder__quote{margin:0;display:grid;gap:var(--space-3)}
-.c-about-founder__quote p{margin:0;font-size:var(--step-1);line-height:1.6}
-.c-about-founder__byline{margin-top:var(--space-2)}
-@media(min-width:900px){.c-about-founder__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:stretch}.c-about-founder__media{min-height:0}.c-about-founder__panel{padding:var(--space-8) var(--space-8)}.c-about-founder--reverse .c-about-founder__media{order:2}}

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

@@ -1 +0,0 @@
-<section class="c-about-founder section"><div class="wrap c-about-founder__grid"><div class="c-about-founder__media"><slot name="media"></slot></div><div class="c-about-founder__panel" data-scheme="dark"><slot name="eyebrow"></slot><slot name="heading"></slot><blockquote class="c-about-founder__quote"><slot name="quote"></slot></blockquote><div class="byline c-about-founder__byline"><slot name="byline"></slot></div></div></div></section>

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

@@ -1,31 +0,0 @@
-# about-mission
-
-Centered mission statement.
-
-- **Category:** about
-- **Media:** optional background still
-- **Registers:** professional, beauty, food
-- **Variants:** dark
-
-## Slots
-
-| Slot | Content |
-|------|---------|
-| `eyebrow` | Optional eyebrow |
-| `(default)` | `<h2>` (a single strong sentence) + one `<p class="lede">` |
-| `actions` | Optional 1 button |
-
-## Example
-
-```html
-<about-mission>
-  <p slot="eyebrow" class="eyebrow eyebrow--accent">What we believe</p>
-  <h2>Good work is the marketing.</h2>
-  <p class="lede">We don't run ads. Every job we book comes from a neighbor who saw the last one — so we treat every roof like the whole street is watching. Because it is.</p>
-  <a slot="actions" class="btn-outline" href="/reviews">Read the reviews</a>
-</about-mission>
-```
-
-Variants: `<about-mission 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/about/about-mission/styles.css

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

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

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

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

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

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

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

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

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

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

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

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

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

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