@runwell/shopify-toolkit 0.17.3 → 0.18.0

package/modules/collection-block-medvi/assets/runwell-collection-block-medvi.css

@@ -0,0 +1,242 @@
+/* Runwell collection-block-medvi.
+
+   Duplex category section. Product side on one side; copy + photos
+   on the other. Sides flip via .runwell-collection-block-medvi--image-right.
+
+   Brand tokens: --runwell-primary, --runwell-oat, --runwell-celadon, etc.
+   Design tokens: --runwell-radius-lg/xl, --runwell-shadow-card.
+   Typography: --runwell-eyebrow-size, --runwell-h2-size, etc.
+
+   Mobile-first: stack vertical below 768px, side-by-side above.
+*/
+
+.runwell-collection-block-medvi {
+  padding: clamp(3rem, 8vw, 7rem) clamp(1.5rem, 4vw, 4rem);
+  font-family: var(--font-body-family, inherit);
+  color: var(--runwell-tertiary, #0B3D38);
+}
+
+.runwell-collection-block-medvi--bg-white {
+  background: #ffffff;
+}
+
+.runwell-collection-block-medvi--bg-oat {
+  background: var(--runwell-oat, #F5F0EE);
+}
+
+.runwell-collection-block-medvi--bg-celadon-tint {
+  background: color-mix(in srgb, var(--runwell-celadon, #ADDDBD) 18%, white);
+}
+
+.runwell-collection-block-medvi__inner {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: clamp(2rem, 4vw, 4rem);
+  max-width: 1280px;
+  margin: 0 auto;
+  align-items: start;
+}
+
+@media (min-width: 768px) {
+  .runwell-collection-block-medvi__inner {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .runwell-collection-block-medvi--image-right .runwell-collection-block-medvi__inner {
+    direction: rtl;
+  }
+
+  .runwell-collection-block-medvi--image-right .runwell-collection-block-medvi__inner > * {
+    direction: ltr;
+  }
+}
+
+/* ----- Product side ----- */
+
+.runwell-collection-block-medvi__product-side {
+  display: flex;
+  flex-direction: column;
+  gap: clamp(1.5rem, 3vw, 2.5rem);
+}
+
+.runwell-collection-block-medvi__product-card {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--runwell-radius-xl, 32px);
+  padding: clamp(1.5rem, 4vw, 3rem);
+  box-shadow: var(--runwell-shadow-card, 0 2px 8px rgba(0,0,0,0.04));
+  aspect-ratio: 4 / 3;
+  overflow: hidden;
+}
+
+.runwell-collection-block-medvi__product-image {
+  max-width: 90%;
+  max-height: 100%;
+  height: auto;
+  object-fit: contain;
+}
+
+/* ----- Benefits list ----- */
+
+.runwell-collection-block-medvi__benefits {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 0 clamp(0.5rem, 2vw, 1.5rem);
+}
+
+.runwell-collection-block-medvi__benefits-heading {
+  font-family: var(--font-heading-family, inherit);
+  font-size: var(--runwell-h4-size, 1.7rem);
+  font-weight: 600;
+  margin: 0;
+  line-height: 1.3;
+}
+
+.runwell-collection-block-medvi__benefits-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.runwell-collection-block-medvi__benefit {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+  font-size: var(--runwell-body-size, 1.6rem);
+  line-height: 1.5;
+}
+
+.runwell-collection-block-medvi__check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 1.6em;
+  height: 1.6em;
+  border-radius: 50%;
+  background: var(--runwell-primary, #0B3D38);
+  color: #ffffff;
+}
+
+.runwell-collection-block-medvi__check svg {
+  display: block;
+}
+
+.runwell-collection-block-medvi__benefit-text {
+  flex: 1 1 auto;
+}
+
+/* ----- Copy side ----- */
+
+.runwell-collection-block-medvi__copy-side {
+  display: flex;
+  flex-direction: column;
+  gap: clamp(1rem, 2vw, 1.5rem);
+}
+
+.runwell-collection-block-medvi__eyebrow {
+  font-size: var(--runwell-eyebrow-size, 0.78rem);
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  font-weight: 600;
+  margin: 0;
+  color: var(--runwell-primary, #0B3D38);
+}
+
+.runwell-collection-block-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.05;
+  margin: 0;
+  letter-spacing: -0.01em;
+}
+
+.runwell-collection-block-medvi__headline-part {
+  display: inline;
+}
+
+.runwell-collection-block-medvi__headline-accent {
+  /* color set inline via section settings (per-instance accent) */
+}
+
+.runwell-collection-block-medvi__photos {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: clamp(0.75rem, 2vw, 1.25rem);
+  margin: clamp(0.5rem, 1.5vw, 1rem) 0;
+}
+
+.runwell-collection-block-medvi__photo {
+  margin: 0;
+  border-radius: var(--runwell-radius-lg, 20px);
+  overflow: hidden;
+  aspect-ratio: 3 / 4;
+  background: var(--runwell-oat, #F5F0EE);
+}
+
+.runwell-collection-block-medvi__photo img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.runwell-collection-block-medvi__subhead {
+  font-family: var(--font-heading-family, inherit);
+  font-size: var(--runwell-h4-size, 1.7rem);
+  font-weight: 600;
+  line-height: 1.3;
+  margin: 0;
+}
+
+.runwell-collection-block-medvi__body {
+  font-size: var(--runwell-body-size, 1.6rem);
+  line-height: 1.6;
+  opacity: 0.85;
+}
+
+.runwell-collection-block-medvi__body p {
+  margin: 0 0 0.5em;
+}
+
+.runwell-collection-block-medvi__body p:last-child {
+  margin-bottom: 0;
+}
+
+.runwell-collection-block-medvi__cta {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  align-self: flex-start;
+  margin-top: 0.5rem;
+  padding: 0.85em 1.6em;
+  border-radius: 999px;
+  background: var(--runwell-primary, #0B3D38);
+  color: #ffffff;
+  font-size: var(--runwell-cta-size, 1.15rem);
+  font-weight: 600;
+  text-decoration: none;
+  transition: opacity 200ms ease, transform 200ms ease;
+}
+
+.runwell-collection-block-medvi__cta:hover,
+.runwell-collection-block-medvi__cta:focus {
+  opacity: 0.9;
+  transform: translateY(-1px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .runwell-collection-block-medvi__cta {
+    transition: none;
+  }
+  .runwell-collection-block-medvi__cta:hover,
+  .runwell-collection-block-medvi__cta:focus {
+    transform: none;
+  }
+}

package/modules/collection-block-medvi/module.json

@@ -0,0 +1,83 @@
+{
+  "name": "collection-block-medvi",
+  "version": "0.1.4",
+  "category": "storefront",
+  "source": "medvi",
+  "base": "collection-block",
+  "qualifier": null,
+  "description": "Duplex category section: product hero card on one side; eyebrow + split-color headline + benefits checklist + 2 lifestyle photos + CTA on the other. Sides flip per instance.",
+  "replaces": null,
+  "files": {
+    "sections": [
+      "sections/runwell-collection-block-medvi.liquid"
+    ],
+    "snippets": [],
+    "assets": [
+      "assets/runwell-collection-block-medvi.css"
+    ]
+  },
+  "config": {
+    "schema": {
+      "eyebrow": {
+        "type": "string",
+        "default": "PURPOSE-DRIVEN SUPPLEMENTATION",
+        "label": "Eyebrow (small caps tracked)"
+      },
+      "headline_pre": {
+        "type": "string",
+        "default": "Supplements with the",
+        "label": "Headline (first half)"
+      },
+      "headline_post": {
+        "type": "string",
+        "default": "power to boost real results",
+        "label": "Headline (accent half)"
+      },
+      "headline_accent_color": {
+        "type": "string",
+        "default": "{{brand.primary}}",
+        "label": "Accent color for headline_post"
+      },
+      "show_product_card": {
+        "type": "boolean",
+        "default": true,
+        "label": "Show product hero card"
+      },
+      "product_card_bg": {
+        "type": "string",
+        "default": "{{brand.celadon}}",
+        "label": "Product card background tint"
+      },
+      "benefits_heading": {
+        "type": "string",
+        "default": "What better support looks like",
+        "label": "Benefits heading"
+      },
+      "subhead": {
+        "type": "string",
+        "default": "Support that helps you feel better over time",
+        "label": "Sub-headline"
+      },
+      "cta_label": {
+        "type": "string",
+        "default": "Shop the collection",
+        "label": "CTA button label"
+      },
+      "layout": {
+        "type": "string",
+        "default": "image-left",
+        "label": "Layout: image-left or image-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": "Cards & Copy"
+  }
+}

package/modules/collection-block-medvi/sections/runwell-collection-block-medvi.liquid

@@ -0,0 +1,355 @@
+{%- comment -%}
+  Runwell collection-block-medvi.
+
+  Duplex category section adapted from medvi.org. One side: product hero
+  card on a tinted background, with a benefits checklist below. Other side:
+  eyebrow + split-color headline + 2 lifestyle photos + sub + body + CTA.
+  Sides flip per instance via the `layout` setting.
+
+  Lineage: extracted from home.medvi.org (Framer label "Cards & Copy"),
+  generalised to Runwell brand tokens. See module README for details.
+{%- endcomment -%}
+
+{{ 'runwell-collection-block-medvi.css' | asset_url | stylesheet_tag }}
+
+{%- liquid
+  assign layout = section.settings.layout | default: 'image-left'
+  assign bg_band = section.settings.bg_band | default: 'white'
+  assign accent_color = section.settings.headline_accent_color | default: 'var(--runwell-primary)'
+  assign product_card_bg = section.settings.product_card_bg | default: 'var(--runwell-celadon)'
+-%}
+
+<section
+  class="runwell-collection-block-medvi runwell-collection-block-medvi--{{ layout }} runwell-collection-block-medvi--bg-{{ bg_band }}"
+>
+  <div class="runwell-collection-block-medvi__inner">
+
+    <div class="runwell-collection-block-medvi__product-side">
+      {%- if section.settings.show_product_card -%}
+        <div
+          class="runwell-collection-block-medvi__product-card"
+          style="background: {{ product_card_bg }};"
+        >
+          {%- if section.settings.product_image != blank -%}
+            <img
+              src="{{ section.settings.product_image | image_url: width: 800 }}"
+              alt="{{ section.settings.product_image.alt | default: section.settings.headline_pre | escape }}"
+              width="{{ section.settings.product_image.width }}"
+              height="{{ section.settings.product_image.height }}"
+              loading="lazy"
+              class="runwell-collection-block-medvi__product-image"
+            >
+          {%- elsif section.settings.product_image_asset != blank -%}
+            <img
+              src="{{ section.settings.product_image_asset | asset_url }}"
+              alt="{{ section.settings.headline_pre | escape }}"
+              width="800"
+              height="600"
+              loading="lazy"
+              class="runwell-collection-block-medvi__product-image"
+            >
+          {%- endif -%}
+        </div>
+      {%- endif -%}
+
+      {%- assign benefits_blocks = section.blocks | where: 'type', 'benefit' -%}
+      {%- if benefits_blocks.size > 0 -%}
+        <div class="runwell-collection-block-medvi__benefits">
+          {%- if section.settings.benefits_heading != blank -%}
+            <p class="runwell-collection-block-medvi__benefits-heading">
+              {{ section.settings.benefits_heading }}
+            </p>
+          {%- endif -%}
+          <ul class="runwell-collection-block-medvi__benefits-list">
+            {%- for block in benefits_blocks -%}
+              <li class="runwell-collection-block-medvi__benefit" {{ block.shopify_attributes }}>
+                <span class="runwell-collection-block-medvi__check" aria-hidden="true">
+                  <svg viewBox="0 0 24 24" width="14" height="14" fill="none">
+                    <path d="M5 12.5l4.5 4.5L19 7" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+                  </svg>
+                </span>
+                <span class="runwell-collection-block-medvi__benefit-text">{{ block.settings.text }}</span>
+              </li>
+            {%- endfor -%}
+          </ul>
+        </div>
+      {%- endif -%}
+    </div>
+
+    <div class="runwell-collection-block-medvi__copy-side">
+      {%- if section.settings.eyebrow != blank -%}
+        <p class="runwell-collection-block-medvi__eyebrow">{{ section.settings.eyebrow }}</p>
+      {%- endif -%}
+
+      {%- liquid
+        assign h_pre  = section.settings.headline_pre
+        assign h_mid  = section.settings.headline_mid
+        assign h_post = section.settings.headline_post
+        assign has_mid = false
+        if h_mid != blank
+          assign has_mid = true
+        endif
+      -%}
+      {%- if h_pre != blank or h_mid != blank or h_post != blank -%}
+        <h2 class="runwell-collection-block-medvi__headline">
+          {%- if h_pre != blank -%}
+            <span class="runwell-collection-block-medvi__headline-part runwell-collection-block-medvi__headline-pre">{{ h_pre }}</span>
+            {%- if h_mid != blank or h_post != blank -%}{{ ' ' }}{%- endif -%}
+          {%- endif -%}
+          {%- if has_mid -%}
+            <span class="runwell-collection-block-medvi__headline-part runwell-collection-block-medvi__headline-accent" style="color: {{ accent_color }};">{{ h_mid }}</span>
+            {%- if h_post != blank -%}{{ ' ' }}<span class="runwell-collection-block-medvi__headline-part runwell-collection-block-medvi__headline-post">{{ h_post }}</span>{%- endif -%}
+          {%- elsif h_post != blank -%}
+            <span class="runwell-collection-block-medvi__headline-part runwell-collection-block-medvi__headline-accent" style="color: {{ accent_color }};">{{ h_post }}</span>
+          {%- endif -%}
+        </h2>
+      {%- endif -%}
+
+      <div class="runwell-collection-block-medvi__photos">
+        {%- if section.settings.lifestyle_image_1 != blank -%}
+          <figure class="runwell-collection-block-medvi__photo">
+            <img
+              src="{{ section.settings.lifestyle_image_1 | image_url: width: 800 }}"
+              alt="{{ section.settings.lifestyle_image_1.alt | default: '' | escape }}"
+              width="{{ section.settings.lifestyle_image_1.width }}"
+              height="{{ section.settings.lifestyle_image_1.height }}"
+              loading="lazy"
+            >
+          </figure>
+        {%- elsif section.settings.lifestyle_image_1_asset != blank -%}
+          <figure class="runwell-collection-block-medvi__photo">
+            <img
+              src="{{ section.settings.lifestyle_image_1_asset | asset_url }}"
+              alt=""
+              width="800"
+              height="1000"
+              loading="lazy"
+            >
+          </figure>
+        {%- endif -%}
+        {%- if section.settings.lifestyle_image_2 != blank -%}
+          <figure class="runwell-collection-block-medvi__photo">
+            <img
+              src="{{ section.settings.lifestyle_image_2 | image_url: width: 800 }}"
+              alt="{{ section.settings.lifestyle_image_2.alt | default: '' | escape }}"
+              width="{{ section.settings.lifestyle_image_2.width }}"
+              height="{{ section.settings.lifestyle_image_2.height }}"
+              loading="lazy"
+            >
+          </figure>
+        {%- elsif section.settings.lifestyle_image_2_asset != blank -%}
+          <figure class="runwell-collection-block-medvi__photo">
+            <img
+              src="{{ section.settings.lifestyle_image_2_asset | asset_url }}"
+              alt=""
+              width="800"
+              height="1000"
+              loading="lazy"
+            >
+          </figure>
+        {%- endif -%}
+      </div>
+
+      {%- if section.settings.subhead != blank -%}
+        <p class="runwell-collection-block-medvi__subhead">{{ section.settings.subhead }}</p>
+      {%- endif -%}
+
+      {%- if section.settings.body != blank -%}
+        <div class="runwell-collection-block-medvi__body">{{ section.settings.body }}</div>
+      {%- endif -%}
+
+      {%- if section.settings.cta_label != blank -%}
+        <a
+          href="{{ section.settings.cta_link | default: '#' }}"
+          class="runwell-collection-block-medvi__cta"
+        >
+          {{ section.settings.cta_label }}
+        </a>
+      {%- endif -%}
+    </div>
+
+  </div>
+</section>
+
+{% schema %}
+{
+  "name": "Collection block (medvi)",
+  "tag": "section",
+  "class": "section-runwell-collection-block-medvi",
+  "settings": [
+    {
+      "type": "header",
+      "content": "Headline"
+    },
+    {
+      "type": "text",
+      "id": "eyebrow",
+      "label": "Eyebrow (tracked small caps)",
+      "default": "PURPOSE-DRIVEN SUPPLEMENTATION"
+    },
+    {
+      "type": "text",
+      "id": "headline_pre",
+      "label": "Headline (first part, plain)",
+      "default": "Supplements with the"
+    },
+    {
+      "type": "text",
+      "id": "headline_mid",
+      "label": "Headline (middle part, accent)",
+      "info": "Optional. When set, this is the accent-colored part and `headline_post` renders plain after it. Leave blank for a 2-part split (pre + post-accent)."
+    },
+    {
+      "type": "text",
+      "id": "headline_post",
+      "label": "Headline (third part)",
+      "info": "Plain when middle is set; accent when middle is blank.",
+      "default": "real results"
+    },
+    {
+      "type": "color",
+      "id": "headline_accent_color",
+      "label": "Headline accent color",
+      "default": "#0B3D38"
+    },
+    {
+      "type": "header",
+      "content": "Product hero card"
+    },
+    {
+      "type": "checkbox",
+      "id": "show_product_card",
+      "label": "Show product hero card",
+      "default": true
+    },
+    {
+      "type": "image_picker",
+      "id": "product_image",
+      "label": "Product image (uploaded)",
+      "info": "PNG with transparent background recommended. Falls through to bundled asset filename below."
+    },
+    {
+      "type": "text",
+      "id": "product_image_asset",
+      "label": "Product image (bundled asset filename)",
+      "info": "e.g. runwell-jar-hero.png"
+    },
+    {
+      "type": "color",
+      "id": "product_card_bg",
+      "label": "Product card background",
+      "default": "#ADDDBD"
+    },
+    {
+      "type": "text",
+      "id": "benefits_heading",
+      "label": "Benefits heading",
+      "default": "What better support looks like"
+    },
+    {
+      "type": "header",
+      "content": "Lifestyle photos"
+    },
+    {
+      "type": "image_picker",
+      "id": "lifestyle_image_1",
+      "label": "Lifestyle photo 1",
+      "info": "3:4 portrait crop recommended. Falls through to bundled asset filename below."
+    },
+    {
+      "type": "text",
+      "id": "lifestyle_image_1_asset",
+      "label": "Lifestyle photo 1 (asset filename fallback)"
+    },
+    {
+      "type": "image_picker",
+      "id": "lifestyle_image_2",
+      "label": "Lifestyle photo 2"
+    },
+    {
+      "type": "text",
+      "id": "lifestyle_image_2_asset",
+      "label": "Lifestyle photo 2 (asset filename fallback)"
+    },
+    {
+      "type": "header",
+      "content": "Body copy"
+    },
+    {
+      "type": "text",
+      "id": "subhead",
+      "label": "Sub-headline",
+      "default": "Support that helps you feel better over time"
+    },
+    {
+      "type": "richtext",
+      "id": "body",
+      "label": "Body",
+      "default": "<p>Doctor-designed formulas made with quality ingredients and evidence-based dosing to support your body day after day.</p>"
+    },
+    {
+      "type": "text",
+      "id": "cta_label",
+      "label": "CTA label",
+      "default": "Shop the collection"
+    },
+    {
+      "type": "url",
+      "id": "cta_link",
+      "label": "CTA link"
+    },
+    {
+      "type": "header",
+      "content": "Layout"
+    },
+    {
+      "type": "select",
+      "id": "layout",
+      "label": "Layout",
+      "options": [
+        { "value": "image-left", "label": "Product side on left" },
+        { "value": "image-right", "label": "Product side on right" }
+      ],
+      "default": "image-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"
+    }
+  ],
+  "blocks": [
+    {
+      "type": "benefit",
+      "name": "Benefit",
+      "limit": 5,
+      "settings": [
+        {
+          "type": "text",
+          "id": "text",
+          "label": "Benefit text",
+          "default": "Clean, transparent ingredients"
+        }
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Runwell collection-block-medvi",
+      "blocks": [
+        { "type": "benefit", "settings": { "text": "Clean, transparent ingredients" } },
+        { "type": "benefit", "settings": { "text": "Built to support daily health" } },
+        { "type": "benefit", "settings": { "text": "Evidence-based dosing" } },
+        { "type": "benefit", "settings": { "text": "Doctor-formulated blends" } },
+        { "type": "benefit", "settings": { "text": "High-quality sourcing" } }
+      ]
+    }
+  ]
+}
+{% endschema %}