@runwell/shopify-toolkit 0.17.3 → 0.18.0

package/modules/care-coaching-medvi/assets/runwell-care-coaching-medvi.css

@@ -0,0 +1,241 @@
+/* Runwell care-coaching-medvi.
+
+   Brand-promise section. Centered eyebrow + 2-color headline at top;
+   large portrait card on one side; block (heading + body) on the
+   other; circular rotating text mark in a corner; footer line below.
+
+   Tokens: --runwell-tertiary, --runwell-oat, --runwell-radius-xl.
+   Typography: --runwell-eyebrow-size, --runwell-h2-size, --runwell-h3-size,
+   --runwell-body-size, --runwell-meta-size.
+*/
+
+.runwell-care-coaching-medvi {
+  padding: clamp(3rem, 8vw, 7rem) clamp(1.5rem, 4vw, 4rem);
+  font-family: var(--font-body-family, inherit);
+  color: var(--runwell-tertiary, #0B3D38);
+  position: relative;
+}
+
+.runwell-care-coaching-medvi--bg-white {
+  background: #ffffff;
+}
+
+.runwell-care-coaching-medvi--bg-oat {
+  background: var(--runwell-oat, #F5F0EE);
+}
+
+.runwell-care-coaching-medvi--bg-celadon-tint {
+  background: color-mix(in srgb, var(--runwell-celadon, #ADDDBD) 18%, white);
+}
+
+.runwell-care-coaching-medvi__section-eyebrow {
+  font-size: var(--runwell-eyebrow-size, 0.78rem);
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  font-weight: 600;
+  margin: 0 0 1rem;
+  text-align: center;
+  opacity: 0.85;
+}
+
+.runwell-care-coaching-medvi__headline {
+  font-family: var(--font-heading-family, inherit);
+  font-size: var(--runwell-h2-size, clamp(3rem, 5vw, 4.8rem));
+  font-weight: 700;
+  line-height: 1.1;
+  margin: 0 0 clamp(2rem, 5vw, 4rem);
+  text-align: center;
+  letter-spacing: -0.01em;
+  max-width: 18ch;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.runwell-care-coaching-medvi__headline-pre,
+.runwell-care-coaching-medvi__headline-post {
+  display: block;
+}
+
+.runwell-care-coaching-medvi__inner {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: clamp(1.5rem, 3vw, 2.5rem);
+  max-width: 1200px;
+  margin: 0 auto;
+  align-items: stretch;
+}
+
+@media (min-width: 768px) {
+  .runwell-care-coaching-medvi__inner {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .runwell-care-coaching-medvi--portrait-right .runwell-care-coaching-medvi__inner {
+    direction: rtl;
+  }
+
+  .runwell-care-coaching-medvi--portrait-right .runwell-care-coaching-medvi__inner > * {
+    direction: ltr;
+  }
+}
+
+.runwell-care-coaching-medvi__portrait-card {
+  border-radius: var(--runwell-radius-xl, 32px);
+  overflow: hidden;
+  aspect-ratio: 4 / 5;
+}
+
+.runwell-care-coaching-medvi__portrait-card img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.runwell-care-coaching-medvi__block {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: clamp(0.75rem, 2vw, 1.25rem);
+  padding: clamp(1.5rem, 4vw, 3rem) clamp(0.5rem, 2vw, 2rem);
+}
+
+.runwell-care-coaching-medvi__block--bg-transparent {
+  background: transparent;
+  padding-left: clamp(1rem, 2vw, 2rem);
+  padding-right: clamp(1rem, 2vw, 2rem);
+}
+
+/* Theme-driven default: tenant's design system decides the surface color
+   via --runwell-surface-card. Falls back to oat if the token is missing. */
+.runwell-care-coaching-medvi__block--bg-card {
+  background: var(--runwell-surface-card, var(--runwell-oat, #F5F0EE));
+  border-radius: var(--runwell-radius-xl, 32px);
+}
+
+/* Explicit named overrides for tenants who want a specific brand color
+   regardless of the theme's surface-card token. */
+.runwell-care-coaching-medvi__block--bg-oat-card {
+  background: var(--runwell-oat, #F5F0EE);
+  border-radius: var(--runwell-radius-xl, 32px);
+}
+
+.runwell-care-coaching-medvi__block--bg-celadon-card {
+  background: color-mix(in srgb, var(--runwell-celadon, #ADDDBD) 18%, white);
+  border-radius: var(--runwell-radius-xl, 32px);
+}
+
+.runwell-care-coaching-medvi__block-eyebrow {
+  font-size: var(--runwell-eyebrow-size, 0.78rem);
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  font-weight: 600;
+  margin: 0;
+  opacity: 0.7;
+}
+
+.runwell-care-coaching-medvi__block-heading {
+  font-family: var(--font-heading-family, inherit);
+  font-size: var(--runwell-h3-size, clamp(2rem, 3vw, 2.8rem));
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0;
+}
+
+.runwell-care-coaching-medvi__block-body {
+  font-size: var(--runwell-body-size, 1.6rem);
+  line-height: 1.6;
+  opacity: 0.85;
+}
+
+.runwell-care-coaching-medvi__block-body p {
+  margin: 0 0 0.5em;
+}
+
+.runwell-care-coaching-medvi__block-body p:last-child {
+  margin-bottom: 0;
+}
+
+/* ----- Circular rotating text mark ----- */
+
+.runwell-care-coaching-medvi__circular {
+  position: absolute;
+  width: clamp(110px, 14vw, 200px);
+  height: clamp(110px, 14vw, 200px);
+  z-index: 3;
+  pointer-events: none;
+}
+
+.runwell-care-coaching-medvi__circular--top-right    { top: -8%; right: -4%; }
+.runwell-care-coaching-medvi__circular--top-left     { top: -8%; left: -4%; }
+.runwell-care-coaching-medvi__circular--bottom-right { bottom: -8%; right: -4%; }
+.runwell-care-coaching-medvi__circular--bottom-left  { bottom: -8%; left: -4%; }
+
+@media (max-width: 767px) {
+  .runwell-care-coaching-medvi__circular {
+    width: clamp(80px, 22vw, 130px);
+    height: clamp(80px, 22vw, 130px);
+  }
+  .runwell-care-coaching-medvi__circular--top-right,
+  .runwell-care-coaching-medvi__circular--bottom-right { right: 0; }
+  .runwell-care-coaching-medvi__circular--top-left,
+  .runwell-care-coaching-medvi__circular--bottom-left  { left: 0; }
+}
+
+.runwell-care-coaching-medvi__circular-svg {
+  width: 100%;
+  height: 100%;
+  animation: runwell-care-coaching-medvi__rotate 30s linear infinite;
+}
+
+.runwell-care-coaching-medvi__circular-text {
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: 0.16em;
+  font-family: var(--font-body-family, inherit);
+  text-transform: uppercase;
+}
+
+@keyframes runwell-care-coaching-medvi__rotate {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .runwell-care-coaching-medvi__circular-svg {
+    animation: none;
+  }
+}
+
+/* ----- Footer ----- */
+
+.runwell-care-coaching-medvi__footer {
+  margin-top: clamp(2rem, 4vw, 3rem);
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.runwell-care-coaching-medvi__footer-eyebrow {
+  font-size: var(--runwell-meta-size, 0.92rem);
+  font-weight: 600;
+  margin: 0;
+}
+
+.runwell-care-coaching-medvi__footer-link {
+  display: inline-block;
+  font-size: var(--runwell-meta-size, 0.92rem);
+  font-weight: 600;
+  color: var(--runwell-primary, #0B3D38);
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  text-decoration-color: var(--runwell-blue, #8AD3CC);
+  text-decoration-thickness: 2px;
+}
+
+.runwell-care-coaching-medvi__footer-link:hover,
+.runwell-care-coaching-medvi__footer-link:focus {
+  text-decoration-color: var(--runwell-primary, #0B3D38);
+}

package/modules/care-coaching-medvi/module.json

@@ -0,0 +1,80 @@
+{
+  "name": "care-coaching-medvi",
+  "version": "0.2.0",
+  "category": "branding",
+  "source": "medvi",
+  "base": "care-coaching",
+  "qualifier": null,
+  "description": "Brand-promise section: portrait card + circular rotating text mark + 2-color headline + body + footer CTA line. Distinctive flourish for editorial-led brands.",
+  "replaces": null,
+  "files": {
+    "sections": [
+      "sections/runwell-care-coaching-medvi.liquid"
+    ],
+    "snippets": [
+      "snippets/runwell-care-coaching-medvi-circular-text.liquid"
+    ],
+    "assets": [
+      "assets/runwell-care-coaching-medvi.css"
+    ]
+  },
+  "config": {
+    "schema": {
+      "section_eyebrow": {
+        "type": "string",
+        "default": "BETTER IS POSSIBLE, AND WE BUILT FOR IT.",
+        "label": "Section eyebrow"
+      },
+      "headline_pre": {
+        "type": "string",
+        "default": "Modern healthcare,",
+        "label": "Headline first part"
+      },
+      "headline_post": {
+        "type": "string",
+        "default": "built around you",
+        "label": "Headline accent part"
+      },
+      "headline_accent_color": {
+        "type": "string",
+        "default": "{{brand.primary}}",
+        "label": "Accent color for headline post"
+      },
+      "block_heading": {
+        "type": "string",
+        "default": "Care coaching and nutrition support",
+        "label": "Block heading"
+      },
+      "circular_text": {
+        "type": "string",
+        "default": "WITH YOU FROM START TO SUCCESS",
+        "label": "Circular text"
+      },
+      "circular_text_position": {
+        "type": "string",
+        "default": "top-right",
+        "label": "Circular text position: top-right, top-left, bottom-right, bottom-left"
+      },
+      "footer_link_label": {
+        "type": "string",
+        "default": "We're here for those details",
+        "label": "Footer link label"
+      },
+      "layout": {
+        "type": "string",
+        "default": "portrait-left",
+        "label": "Layout: portrait-left or portrait-right"
+      },
+      "bg_band": {
+        "type": "string",
+        "default": "white",
+        "label": "Background band: white, oat, celadon-tint"
+      }
+    }
+  },
+  "lineage": {
+    "extracted_from": "https://home.medvi.org/",
+    "scrape_path": "_clients/capital-v/lushi/research/medvi-reference/site-scrape/",
+    "framer_label": "Care Coaching"
+  }
+}

package/modules/care-coaching-medvi/sections/runwell-care-coaching-medvi.liquid

@@ -0,0 +1,274 @@
+{%- comment -%}
+  Runwell care-coaching-medvi.
+
+  Brand-promise section: section eyebrow + 2-color headline at top;
+  large portrait card on one side; block (heading + body) on the other;
+  circular rotating text mark anchored to a corner of the section;
+  footer eyebrow + link below.
+
+  Lineage: extracted from home.medvi.org (Framer label "Care Coaching"),
+  generalised to Runwell brand tokens.
+{%- endcomment -%}
+
+{{ 'runwell-care-coaching-medvi.css' | asset_url | stylesheet_tag }}
+
+{%- liquid
+  assign layout = section.settings.layout | default: 'portrait-left'
+  assign bg_band = section.settings.bg_band | default: 'white'
+  assign accent_color = section.settings.headline_accent_color | default: 'var(--runwell-primary)'
+  assign portrait_card_bg = section.settings.portrait_card_bg | default: 'var(--runwell-oat)'
+  assign block_bg = section.settings.block_bg | default: 'transparent'
+  assign circular_position = section.settings.circular_text_position | default: 'top-right'
+  assign circular_color = section.settings.circular_text_accent | default: 'var(--runwell-tertiary)'
+-%}
+
+<section
+  class="runwell-care-coaching-medvi runwell-care-coaching-medvi--{{ layout }} runwell-care-coaching-medvi--bg-{{ bg_band }}"
+>
+
+  {%- if section.settings.section_eyebrow != blank -%}
+    <p class="runwell-care-coaching-medvi__section-eyebrow">{{ section.settings.section_eyebrow }}</p>
+  {%- endif -%}
+
+  {%- if section.settings.headline_pre != blank or section.settings.headline_post != blank -%}
+    <h2 class="runwell-care-coaching-medvi__headline">
+      {%- if section.settings.headline_pre != blank -%}
+        <span class="runwell-care-coaching-medvi__headline-pre">{{ section.settings.headline_pre }}</span>
+      {%- endif -%}
+      {%- if section.settings.headline_post != blank -%}
+        <span class="runwell-care-coaching-medvi__headline-post" style="color: {{ accent_color }};">{{ section.settings.headline_post }}</span>
+      {%- endif -%}
+    </h2>
+  {%- endif -%}
+
+  <div class="runwell-care-coaching-medvi__inner">
+
+    <div class="runwell-care-coaching-medvi__portrait-card" style="background: {{ portrait_card_bg }};">
+      {%- if section.settings.portrait_image != blank -%}
+        <img
+          src="{{ section.settings.portrait_image | image_url: width: 1000 }}"
+          alt="{{ section.settings.portrait_image.alt | default: section.settings.block_heading | escape }}"
+          width="{{ section.settings.portrait_image.width }}"
+          height="{{ section.settings.portrait_image.height }}"
+          loading="lazy"
+        >
+      {%- elsif section.settings.portrait_image_asset != blank -%}
+        <img
+          src="{{ section.settings.portrait_image_asset | asset_url }}"
+          alt="{{ section.settings.block_heading | escape }}"
+          width="800"
+          height="1000"
+          loading="lazy"
+        >
+      {%- endif -%}
+    </div>
+
+    <div class="runwell-care-coaching-medvi__block runwell-care-coaching-medvi__block--bg-{{ block_bg }}">
+      {%- if section.settings.block_eyebrow != blank -%}
+        <p class="runwell-care-coaching-medvi__block-eyebrow">{{ section.settings.block_eyebrow }}</p>
+      {%- endif -%}
+      {%- if section.settings.block_heading != blank -%}
+        <h3 class="runwell-care-coaching-medvi__block-heading">{{ section.settings.block_heading }}</h3>
+      {%- endif -%}
+      {%- if section.settings.block_body != blank -%}
+        <div class="runwell-care-coaching-medvi__block-body">{{ section.settings.block_body }}</div>
+      {%- endif -%}
+    </div>
+
+    {%- if section.settings.circular_text != blank -%}
+      <div class="runwell-care-coaching-medvi__circular runwell-care-coaching-medvi__circular--{{ circular_position }}">
+        {%- render 'runwell-care-coaching-medvi-circular-text',
+              text: section.settings.circular_text,
+              color: circular_color,
+              id_suffix: section.id
+        -%}
+      </div>
+    {%- endif -%}
+
+  </div>
+
+  {%- if section.settings.footer_eyebrow != blank or section.settings.footer_link_label != blank -%}
+    <div class="runwell-care-coaching-medvi__footer">
+      {%- if section.settings.footer_eyebrow != blank -%}
+        <p class="runwell-care-coaching-medvi__footer-eyebrow">{{ section.settings.footer_eyebrow }}</p>
+      {%- endif -%}
+      {%- if section.settings.footer_link_label != blank -%}
+        <a href="{{ section.settings.footer_link_href | default: '#' }}" class="runwell-care-coaching-medvi__footer-link">
+          {{ section.settings.footer_link_label }}
+        </a>
+      {%- endif -%}
+    </div>
+  {%- endif -%}
+
+</section>
+
+{% schema %}
+{
+  "name": "Care coaching (medvi)",
+  "tag": "section",
+  "class": "section-runwell-care-coaching-medvi",
+  "settings": [
+    {
+      "type": "header",
+      "content": "Headline"
+    },
+    {
+      "type": "text",
+      "id": "section_eyebrow",
+      "label": "Section eyebrow (centered, tracked caps)",
+      "default": "BETTER IS POSSIBLE, AND WE BUILT FOR IT."
+    },
+    {
+      "type": "text",
+      "id": "headline_pre",
+      "label": "Headline (first part)",
+      "default": "Modern healthcare,"
+    },
+    {
+      "type": "text",
+      "id": "headline_post",
+      "label": "Headline (accent part)",
+      "default": "built around you"
+    },
+    {
+      "type": "color",
+      "id": "headline_accent_color",
+      "label": "Headline accent color",
+      "default": "#0B3D38"
+    },
+    {
+      "type": "header",
+      "content": "Portrait card"
+    },
+    {
+      "type": "image_picker",
+      "id": "portrait_image",
+      "label": "Portrait image (4:5 portrait crop)"
+    },
+    {
+      "type": "text",
+      "id": "portrait_image_asset",
+      "label": "Portrait (asset filename fallback)"
+    },
+    {
+      "type": "color",
+      "id": "portrait_card_bg",
+      "label": "Card background tint",
+      "default": "#F5F0EE"
+    },
+    {
+      "type": "header",
+      "content": "Block copy"
+    },
+    {
+      "type": "select",
+      "id": "block_bg",
+      "label": "Block background",
+      "info": "Card: theme-driven surface color (uses --runwell-surface-card token; defaults to oat). Oat / Celadon: explicit named brand colors. Transparent: no card background.",
+      "options": [
+        { "value": "card", "label": "Card (theme default)" },
+        { "value": "oat-card", "label": "Oat card" },
+        { "value": "celadon-card", "label": "Celadon card" },
+        { "value": "transparent", "label": "Transparent (no card)" }
+      ],
+      "default": "card"
+    },
+    {
+      "type": "text",
+      "id": "block_eyebrow",
+      "label": "Block eyebrow (optional)"
+    },
+    {
+      "type": "text",
+      "id": "block_heading",
+      "label": "Block heading",
+      "default": "Care coaching and nutrition support"
+    },
+    {
+      "type": "richtext",
+      "id": "block_body",
+      "label": "Block body",
+      "default": "<p>Our care coaching team, led by certified medical assistants and registered dietitians, helps answer questions about your medication, program, and day-to-day lifestyle changes, so you have the guidance you need to stay on track and see results.</p>"
+    },
+    {
+      "type": "header",
+      "content": "Circular text mark"
+    },
+    {
+      "type": "text",
+      "id": "circular_text",
+      "label": "Circular text",
+      "default": "WITH YOU FROM START TO SUCCESS"
+    },
+    {
+      "type": "color",
+      "id": "circular_text_accent",
+      "label": "Circular text color",
+      "default": "#0B3D38"
+    },
+    {
+      "type": "select",
+      "id": "circular_text_position",
+      "label": "Circular text position",
+      "options": [
+        { "value": "top-right", "label": "Top right" },
+        { "value": "top-left", "label": "Top left" },
+        { "value": "bottom-right", "label": "Bottom right" },
+        { "value": "bottom-left", "label": "Bottom left" }
+      ],
+      "default": "top-right"
+    },
+    {
+      "type": "header",
+      "content": "Footer line"
+    },
+    {
+      "type": "text",
+      "id": "footer_eyebrow",
+      "label": "Footer eyebrow (centered, small)",
+      "default": "We're creating a better experience, and the details matter"
+    },
+    {
+      "type": "text",
+      "id": "footer_link_label",
+      "label": "Footer link label",
+      "default": "We're here for those details"
+    },
+    {
+      "type": "url",
+      "id": "footer_link_href",
+      "label": "Footer link href"
+    },
+    {
+      "type": "header",
+      "content": "Layout"
+    },
+    {
+      "type": "select",
+      "id": "layout",
+      "label": "Layout",
+      "options": [
+        { "value": "portrait-left", "label": "Portrait on left" },
+        { "value": "portrait-right", "label": "Portrait on right" }
+      ],
+      "default": "portrait-left"
+    },
+    {
+      "type": "select",
+      "id": "bg_band",
+      "label": "Background band",
+      "options": [
+        { "value": "white", "label": "White" },
+        { "value": "oat", "label": "Oat" },
+        { "value": "celadon-tint", "label": "Celadon tint" }
+      ],
+      "default": "white"
+    }
+  ],
+  "presets": [
+    {
+      "name": "Care coaching (medvi)"
+    }
+  ]
+}
+{% endschema %}

package/modules/care-coaching-medvi/snippets/runwell-care-coaching-medvi-circular-text.liquid

@@ -0,0 +1,25 @@
+{%- comment -%}
+  Renders text-on-path along a closed circle as inline SVG. Used by the
+  care-coaching-medvi section as a slow-rotating decorative mark.
+
+  Inputs:
+  - text: the string to render around the circle
+  - color: CSS color value
+  - id_suffix: unique suffix (avoids id collisions when section appears
+    multiple times on a page)
+{%- endcomment -%}
+
+{%- assign uid = id_suffix | default: section.id -%}
+
+<svg viewBox="0 0 200 200" class="runwell-care-coaching-medvi__circular-svg" aria-hidden="true">
+  <defs>
+    <path
+      id="runwell-care-coaching-medvi-path-{{ uid }}"
+      d="M 100, 100 m -75, 0 a 75,75 0 1,1 150,0 a 75,75 0 1,1 -150,0"
+      fill="none"
+    />
+  </defs>
+  <text fill="{{ color | default: 'currentColor' }}" class="runwell-care-coaching-medvi__circular-text">
+    <textPath href="#runwell-care-coaching-medvi-path-{{ uid }}" startOffset="0%">{{ text | escape }}</textPath>
+  </text>
+</svg>

package/modules/collection-block-medvi/README.md

@@ -0,0 +1,50 @@
+# collection-block-medvi
+
+Duplex category section. Product hero card on one side; eyebrow + split-color headline + 2 lifestyle photos + benefits checklist + CTA on the other. Sides flip per instance via the `layout` setting. The most-reused pattern from medvi.org's homepage.
+
+Category: `storefront`
+
+## Files
+
+- `sections/runwell-collection-block-medvi.liquid`
+- `assets/runwell-collection-block-medvi.css`
+
+## Layout options
+
+- `image-left` (default): product side first.
+- `image-right`: copy side first. Use for visual rhythm; alternate per instance for an A-B-A flow.
+- `show_product_card: false`: hides the product card; the benefits list fills the product side.
+
+## Tokens consumed
+
+Brand: `--runwell-primary`, `--runwell-tertiary`, `--runwell-oat`, `--runwell-celadon`. Design system: `--runwell-radius-lg`, `--runwell-radius-xl`, `--runwell-shadow-card`. Typography: `--runwell-eyebrow-size`, `--runwell-h2-size`, `--runwell-h4-size`, `--runwell-body-size`, `--runwell-cta-size`.
+
+## Blocks
+
+The section schema accepts `benefit` blocks (1 to 5). Each benefit renders a brand-colored circle-check icon plus text. Defaults shipped via the section preset cover the medvi pattern (5 benefits).
+
+## Headline two-color split
+
+Headline is composed of `headline_pre` (default color) and `headline_post` (accent color via `headline_accent_color`). Both pieces render inline so they flow naturally on the same line; line wraps fall where the browser places them.
+
+## Lineage
+
+Extracted from `https://home.medvi.org/` on 2026-05-06.
+
+- Framer label: `Cards & Copy`.
+- Scrape path: `_clients/capital-v/lushi/research/medvi-reference/site-scrape/` (in claude-PM repo, gitignored, local only).
+- Generalisation: ships with Lushi-tinted defaults (Rain Forrest primary, Celadon product card background, "Supplements with the power to boost real results" headline). Tenants override per-instance via Theme Editor or globally via `runwell.config.json` brand block.
+
+## Tenant overrides
+
+Per-tenant overrides flow through two channels:
+
+1. `runwell.config.json` brand block: rewires the global tokens (`brand.primary`, `brand.celadon`, etc.) so every instance picks up the new color palette.
+2. Per-instance section settings in the Theme Editor: override eyebrow, headline copy, accent color, layout, background band on a single use of the section.
+
+## Notes
+
+- Mobile: stacks vertically below 768px, side-by-side above.
+- Photos use a 3:4 aspect ratio; product card is 4:3.
+- Benefits checkmark icon is rendered as inline SVG (no extra asset).
+- CTA button is a pill with brand-primary background; hover lifts the button by 1px (respects `prefers-reduced-motion`).