@runwell/shopify-toolkit 0.13.3 → 0.14.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/lib/init.js +21 -0
  2. package/lib/sync.js +44 -2
  3. package/modules/_shared/css-typography/assets/runwell-typography.css +27 -0
  4. package/modules/_shared/css-typography/module.json +13 -0
  5. package/modules/bundle-builder/assets/runwell-bundle-builder.css +13 -13
  6. package/modules/comparison-table/variants/feature-columns/sections/runwell-comparison-table.liquid +6 -6
  7. package/modules/comparison-table/variants/feature-rows/sections/runwell-comparison-table.liquid +8 -8
  8. package/modules/editorial-block/sections/runwell-editorial-block.liquid +3 -3
  9. package/modules/editorial-hero/variants/hero-with-card/assets/runwell-editorial-hero.css +2 -2
  10. package/modules/editorial-hero/variants/video-bg/sections/runwell-video-hero.liquid +1 -1
  11. package/modules/pdp-ingredients/sections/runwell-ingredients.liquid +9 -9
  12. package/modules/pdp-journal-link/sections/runwell-pdp-journal.liquid +7 -7
  13. package/modules/pdp-trust-checks/sections/runwell-pdp-trust.liquid +7 -7
  14. package/modules/post-purchase-upsell/assets/runwell-thank-you.css +6 -6
  15. package/modules/press-bar/sections/runwell-press-bar.liquid +2 -2
  16. package/modules/risk-reversal/sections/runwell-risk-reversal.liquid +4 -4
  17. package/modules/scrolling-ticker/assets/runwell-scrolling-ticker.css +2 -2
  18. package/modules/shipping-bar/sections/runwell-shipping-bar.liquid +1 -1
  19. package/modules/social-proof-banner/assets/runwell-social-proof-banner.css +3 -3
  20. package/modules/stats-bar/assets/runwell-stats-bar.css +3 -3
  21. package/modules/sticky-atc/assets/runwell-sticky-atc.css +5 -5
  22. package/modules/testimonials/variants/carousel-ugc/assets/runwell-testimonials.css +3 -3
  23. package/modules/trust-badges/sections/runwell-trust-badges.liquid +3 -3
  24. package/package.json +1 -1
package/lib/init.js CHANGED
@@ -82,6 +82,27 @@ export async function init(flags) {
82
82
 
83
83
  fs.writeFileSync(path.join(targetDir, 'runwell.config.json'), JSON.stringify(config, null, 2) + '\n');
84
84
 
85
+ // Scaffold settings_data.json with optional premium-editorial defaults.
86
+ // body_scale and heading_scale drive Dawn's --font-body-scale and
87
+ // --font-heading-scale, which the toolkit's _shared/css-typography
88
+ // module wraps so module type sizes scale uniformly.
89
+ const premiumEditorial = flags.premiumEditorial || flags['premium-editorial'];
90
+ const settingsData = {
91
+ current: 'Default',
92
+ presets: {
93
+ Default: premiumEditorial
94
+ ? { body_scale: 110, heading_scale: 120 }
95
+ : {}
96
+ }
97
+ };
98
+ fs.writeFileSync(
99
+ path.join(targetDir, 'config', 'settings_data.json'),
100
+ JSON.stringify(settingsData, null, 2) + '\n'
101
+ );
102
+ if (premiumEditorial) {
103
+ console.log('Applied premium-editorial typography defaults: body_scale=110, heading_scale=120');
104
+ }
105
+
85
106
  // Scaffold templates
86
107
  fs.writeFileSync(
87
108
  path.join(targetDir, 'templates', 'index.json'),
package/lib/sync.js CHANGED
@@ -27,9 +27,19 @@ export async function sync(flags) {
27
27
  await syncBaseline({ baselineRoot, targetDir, config, dryRun, written: writtenFiles });
28
28
  }
29
29
 
30
- const moduleNames = Object.keys(config.modules);
30
+ // Modules to sync = explicit tenant config PLUS any module whose manifest
31
+ // declares always_enabled: true. The latter ensures foundation modules
32
+ // (css-tokens, css-typography) sync without requiring every tenant config
33
+ // to list them. Tenant config still wins for resolution (variant, config
34
+ // overrides), but always_enabled modules are auto-included.
35
+ const explicitModules = Object.keys(config.modules);
36
+ const alwaysEnabledModules = discoverAlwaysEnabledModules(flags.toolkitRoot, explicitModules);
37
+ const moduleNames = [...explicitModules, ...alwaysEnabledModules];
38
+ if (alwaysEnabledModules.length && verbose) {
39
+ console.log(`Auto-including always_enabled modules: ${alwaysEnabledModules.join(', ')}`);
40
+ }
31
41
  for (const moduleName of moduleNames) {
32
- const cfgEntry = config.modules[moduleName];
42
+ const cfgEntry = config.modules[moduleName] || { enabled: true, config: {} };
33
43
  if (cfgEntry.enabled === false) {
34
44
  if (verbose) console.log(`[skip] ${moduleName} (disabled)`);
35
45
  continue;
@@ -131,3 +141,35 @@ function getToolkitVersion(toolkitRoot) {
131
141
  return pkg.version;
132
142
  } catch { return 'unknown'; }
133
143
  }
144
+
145
+ function discoverAlwaysEnabledModules(toolkitRoot, explicitModules) {
146
+ // Walks modules/ for top-level dirs AND modules/_shared/* for foundation modules.
147
+ // Returns names of any module whose module.json declares always_enabled: true,
148
+ // skipping those already in the explicit tenant config.
149
+ const modulesDir = path.join(toolkitRoot, 'modules');
150
+ if (!fs.existsSync(modulesDir)) return [];
151
+ const candidates = [];
152
+ for (const entry of fs.readdirSync(modulesDir)) {
153
+ if (entry.startsWith('.')) continue;
154
+ const fullPath = path.join(modulesDir, entry);
155
+ if (!fs.statSync(fullPath).isDirectory()) continue;
156
+ if (entry === '_shared') {
157
+ for (const sub of fs.readdirSync(fullPath)) {
158
+ if (sub.startsWith('.')) continue;
159
+ const subPath = path.join(fullPath, sub);
160
+ if (fs.statSync(subPath).isDirectory()) candidates.push(`_shared/${sub}`);
161
+ }
162
+ } else {
163
+ candidates.push(entry);
164
+ }
165
+ }
166
+ const out = [];
167
+ for (const name of candidates) {
168
+ if (explicitModules.includes(name)) continue;
169
+ try {
170
+ const manifest = loadModuleManifest(toolkitRoot, name);
171
+ if (manifest.always_enabled === true) out.push(name);
172
+ } catch { /* skip modules without a manifest */ }
173
+ }
174
+ return out;
175
+ }
package/modules/_shared/css-typography/assets/runwell-typography.css ADDED
@@ -0,0 +1,27 @@
1
+ /* Runwell Shopify Toolkit: typography tokens.
2
+ Wraps Dawn's --font-body-scale and --font-heading-scale CSS variables
3
+ (which Dawn computes from the Theme Editor body_scale and heading_scale
4
+ sliders in layout/theme.liquid) so every toolkit module renders type
5
+ that scales uniformly when a merchant adjusts the sliders.
6
+
7
+ Modules reference these via var(--runwell-X-size). Tenant CSS may also
8
+ reference them directly OR compose its own scale-aware sizes using
9
+ calc(var(--font-body-scale) * Xrem) and calc(var(--font-heading-scale) * Xrem).
10
+
11
+ Do not hand-edit in client themes; re-run runwell-shopify sync to update.
12
+ */
13
+ :root {
14
+ /* Body-scale derived. Eyebrows, captions, ledes, body, CTAs. */
15
+ --runwell-eyebrow-size: calc(var(--font-body-scale) * 0.78rem);
16
+ --runwell-caption-size: calc(var(--font-body-scale) * 0.85rem);
17
+ --runwell-meta-size: calc(var(--font-body-scale) * 0.92rem);
18
+ --runwell-cta-size: calc(var(--font-body-scale) * 1.15rem);
19
+ --runwell-body-size: calc(var(--font-body-scale) * 1.6rem);
20
+ --runwell-lede-size: calc(var(--font-body-scale) * 1.7rem);
21
+
22
+ /* Heading-scale derived. Section titles, big numbers, hero/aura titles. */
23
+ --runwell-h4-size: calc(var(--font-heading-scale) * 1.7rem);
24
+ --runwell-h3-size: calc(var(--font-heading-scale) * clamp(2rem, 3vw, 2.8rem));
25
+ --runwell-h2-size: calc(var(--font-heading-scale) * clamp(3rem, 5vw, 4.8rem));
26
+ --runwell-h1-size: calc(var(--font-heading-scale) * clamp(3.6rem, 6vw, 6rem));
27
+ }
package/modules/_shared/css-typography/module.json ADDED
@@ -0,0 +1,13 @@
1
+ {
2
+ "name": "_shared/css-typography",
3
+ "version": "0.1.0",
4
+ "category": "foundation",
5
+ "description": "Typography tokens published as :root vars. Every Runwell module references these instead of hardcoding rem values, so type scale responds to Dawn's body_scale and heading_scale Theme Editor sliders. Always synced.",
6
+ "always_enabled": true,
7
+ "files": {
8
+ "assets": ["assets/runwell-typography.css"]
9
+ },
10
+ "config": {
11
+ "schema": {}
12
+ }
13
+ }
package/modules/bundle-builder/assets/runwell-bundle-builder.css CHANGED
@@ -89,12 +89,12 @@
89
89
 
90
90
  .runwell-bundle-builder__stars {
91
91
  color: #E8B931;
92
- font-size: 1.6rem;
92
+ font-size: calc(var(--font-body-scale) * 1.6rem);
93
93
  letter-spacing: 1px;
94
94
  }
95
95
 
96
96
  .runwell-bundle-builder__rating-text {
97
- font-size: 1.4rem;
97
+ font-size: calc(var(--font-body-scale) * 1.4rem);
98
98
  font-weight: 600;
99
99
  font-style: italic;
100
100
  }
@@ -121,7 +121,7 @@
121
121
 
122
122
  .runwell-bundle-builder__sale-text {
123
123
  font-weight: 700;
124
- font-size: 1.5rem;
124
+ font-size: calc(var(--font-body-scale) * 1.5rem);
125
125
  white-space: nowrap;
126
126
  }
127
127
 
@@ -131,7 +131,7 @@
131
131
  align-items: center;
132
132
  justify-content: center;
133
133
  gap: 6px;
134
- font-size: 1.3rem;
134
+ font-size: calc(var(--font-body-scale) * 1.3rem);
135
135
  font-weight: 500;
136
136
  color: #b45309;
137
137
  margin-bottom: 1rem;
@@ -190,7 +190,7 @@
190
190
  right: 16px;
191
191
  background: #3F5B4C;
192
192
  color: #fff;
193
- font-size: 1.0rem;
193
+ font-size: var(--runwell-body-size);
194
194
  font-weight: 700;
195
195
  padding: 2px 10px;
196
196
  border-radius: 4px;
@@ -242,7 +242,7 @@
242
242
 
243
243
  .runwell-bundle-builder__option-title {
244
244
  font-weight: 700;
245
- font-size: 1.5rem;
245
+ font-size: calc(var(--font-heading-scale) * 1.5rem);
246
246
  }
247
247
 
248
248
  .runwell-bundle-builder__option-pricing {
@@ -254,11 +254,11 @@
254
254
 
255
255
  .runwell-bundle-builder__option-price {
256
256
  font-weight: 700;
257
- font-size: 1.8rem;
257
+ font-size: calc(var(--font-body-scale) * 1.8rem);
258
258
  }
259
259
 
260
260
  .runwell-bundle-builder__option-compare {
261
- font-size: 1.3rem;
261
+ font-size: calc(var(--font-body-scale) * 1.3rem);
262
262
  text-decoration: line-through;
263
263
  opacity: 0.5;
264
264
  }
@@ -271,7 +271,7 @@
271
271
  }
272
272
 
273
273
  .runwell-bundle-builder__badge {
274
- font-size: 1.1rem;
274
+ font-size: calc(var(--font-body-scale) * 1.1rem);
275
275
  font-weight: 700;
276
276
  padding: 2px 8px;
277
277
  border-radius: 4px;
@@ -297,19 +297,19 @@
297
297
  padding: 8px 12px;
298
298
  background: rgba(63, 91, 76, 0.06);
299
299
  border-radius: 6px;
300
- font-size: 1.3rem;
300
+ font-size: calc(var(--font-body-scale) * 1.3rem);
301
301
  font-weight: 600;
302
302
  }
303
303
 
304
304
  .runwell-bundle-builder__gift-icon {
305
- font-size: 1.6rem;
305
+ font-size: calc(var(--font-body-scale) * 1.6rem);
306
306
  }
307
307
 
308
308
  /* ATC Button */
309
309
  .runwell-bundle-builder__atc {
310
310
  width: 100%;
311
311
  padding: 1.6rem;
312
- font-size: 1.6rem;
312
+ font-size: calc(var(--font-body-scale) * 1.6rem);
313
313
  font-weight: 700;
314
314
  letter-spacing: 0.06em;
315
315
  text-transform: uppercase;
@@ -331,7 +331,7 @@
331
331
  display: flex;
332
332
  justify-content: center;
333
333
  gap: 2rem;
334
- font-size: 1.3rem;
334
+ font-size: calc(var(--font-body-scale) * 1.3rem);
335
335
  opacity: 0.7;
336
336
  flex-wrap: wrap;
337
337
  }
package/modules/comparison-table/variants/feature-columns/sections/runwell-comparison-table.liquid CHANGED
@@ -12,7 +12,7 @@
12
12
  >
13
13
  <div style="max-width: 1200px; margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) 6vw;">
14
14
  {%- if section.settings.eyebrow != blank -%}
15
- <div style="font-family: var(--font-body-family); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.65; margin-bottom: 0.6rem;">
15
+ <div style="font-family: var(--font-body-family); font-size: var(--runwell-eyebrow-size); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.65; margin-bottom: 0.6rem;">
16
16
  {{ section.settings.eyebrow }}
17
17
  </div>
18
18
  {%- endif -%}
@@ -24,25 +24,25 @@
24
24
  {%- endif -%}
25
25
 
26
26
  {%- if section.settings.lede != blank -%}
27
- <p style="font-family: var(--font-body-family); font-size: 1rem; line-height: 1.65; max-width: 60ch; opacity: 0.85; margin: 0 0 2rem 0;">
27
+ <p style="font-family: var(--font-body-family); font-size: var(--runwell-body-size); line-height: 1.65; max-width: 60ch; opacity: 0.85; margin: 0 0 2rem 0;">
28
28
  {{ section.settings.lede }}
29
29
  </p>
30
30
  {%- endif -%}
31
31
 
32
32
  <div style="overflow-x: auto;">
33
- <table style="width: 100%; border-collapse: collapse; min-width: 600px; font-family: var(--font-body-family); font-size: 0.95rem;">
33
+ <table style="width: 100%; border-collapse: collapse; min-width: 600px; font-family: var(--font-body-family); font-size: var(--runwell-meta-size);">
34
34
  <thead>
35
35
  <tr>
36
- <th style="text-align: left; padding: 0.8rem 1rem 0.8rem 0; font-family: var(--font-body-family); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.6; vertical-align: bottom; border-bottom: 2px solid currentColor;">
36
+ <th style="text-align: left; padding: 0.8rem 1rem 0.8rem 0; font-family: var(--font-body-family); font-size: var(--runwell-eyebrow-size); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.6; vertical-align: bottom; border-bottom: 2px solid currentColor;">
37
37
  {{ section.settings.row_label_header | default: 'What you get' }}
38
38
  </th>
39
39
  {%- for block in section.blocks -%}
40
40
  <th style="text-align: left; padding: 0.8rem 1rem; vertical-align: bottom; border-bottom: 2px solid currentColor;">
41
- <div style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: 1.15rem; line-height: 1.2; margin-bottom: 0.2rem;">
41
+ <div style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: var(--runwell-cta-size); line-height: 1.2; margin-bottom: 0.2rem;">
42
42
  {{ block.settings.column_title }}
43
43
  </div>
44
44
  {%- if block.settings.column_subtitle != blank -%}
45
- <div style="font-family: var(--font-body-family); font-size: 0.78rem; opacity: 0.7; font-weight: 400; letter-spacing: normal; text-transform: none;">
45
+ <div style="font-family: var(--font-body-family); font-size: var(--runwell-eyebrow-size); opacity: 0.7; font-weight: 400; letter-spacing: normal; text-transform: none;">
46
46
  {{ block.settings.column_subtitle }}
47
47
  </div>
48
48
  {%- endif -%}
package/modules/comparison-table/variants/feature-rows/sections/runwell-comparison-table.liquid CHANGED
@@ -11,7 +11,7 @@
11
11
  >
12
12
  <div style="max-width: 1200px; margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) 6vw;">
13
13
  {%- if section.settings.eyebrow != blank -%}
14
- <div style="font-family: var(--font-body-family); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.65; margin-bottom: 0.6rem; text-align: center;">
14
+ <div style="font-family: var(--font-body-family); font-size: var(--runwell-eyebrow-size); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.65; margin-bottom: 0.6rem; text-align: center;">
15
15
  {{ section.settings.eyebrow }}
16
16
  </div>
17
17
  {%- endif -%}
@@ -23,26 +23,26 @@
23
23
  {%- endif -%}
24
24
 
25
25
  {%- if section.settings.lede != blank -%}
26
- <p style="font-family: var(--font-body-family); font-size: 1rem; line-height: 1.65; max-width: 60ch; opacity: 0.85; margin: 0 auto 2rem; text-align: center;">
26
+ <p style="font-family: var(--font-body-family); font-size: var(--runwell-lede-size); line-height: 1.65; max-width: 60ch; opacity: 0.85; margin: 0 auto 2rem; text-align: center;">
27
27
  {{ section.settings.lede }}
28
28
  </p>
29
29
  {%- endif -%}
30
30
 
31
31
  {%- if section.blocks.size > 0 -%}
32
32
  <div style="overflow-x: auto; margin: 0 auto; max-width: 880px;">
33
- <table style="width: 100%; border-collapse: collapse; min-width: 600px; font-family: var(--font-body-family); font-size: 1.05rem;">
33
+ <table style="width: 100%; border-collapse: collapse; min-width: 600px; font-family: var(--font-body-family); font-size: var(--runwell-body-size);">
34
34
  <thead>
35
35
  <tr>
36
- <th style="text-align: left; width: 55%; padding: 1.1rem 1.2rem 1.1rem 0; font-family: var(--font-body-family); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.55; vertical-align: bottom; border-bottom: 2px solid currentColor;">
36
+ <th style="text-align: left; width: 55%; padding: 1.1rem 1.2rem 1.1rem 0; font-family: var(--font-body-family); font-size: var(--runwell-eyebrow-size); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.55; vertical-align: bottom; border-bottom: 2px solid currentColor;">
37
37
  {{ section.settings.feature_label }}
38
38
  </th>
39
39
  <th style="text-align: center; width: 22.5%; padding: 1.1rem 1rem; vertical-align: bottom; border-bottom: 2px solid currentColor;">
40
- <div style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: 1.4rem; line-height: 1.2;">
40
+ <div style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: calc(var(--font-heading-scale) * 1.4rem); line-height: 1.2;">
41
41
  {{ section.settings.brand_name }}
42
42
  </div>
43
43
  </th>
44
44
  <th style="text-align: center; width: 22.5%; padding: 1.1rem 1rem; vertical-align: bottom; border-bottom: 2px solid currentColor;">
45
- <div style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: 1.4rem; line-height: 1.2; opacity: 0.7;">
45
+ <div style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: calc(var(--font-heading-scale) * 1.4rem); line-height: 1.2; opacity: 0.7;">
46
46
  {{ section.settings.competitor_name }}
47
47
  </div>
48
48
  </th>
@@ -56,7 +56,7 @@
56
56
  </td>
57
57
  <td style="padding: 1.05rem 1rem; vertical-align: middle; border-bottom: 1px solid rgba(0,0,0,0.08); text-align: center;">
58
58
  {%- if block.settings.ours == 'yes' -%}
59
- <span style="display: inline-block; min-width: 1.6rem; font-size: 1.3rem; font-weight: 700; color: var(--runwell-rain-forrest, currentColor);">&check;</span>
59
+ <span style="display: inline-block; min-width: 1.6rem; font-size: calc(var(--font-body-scale) * 1.3rem); font-weight: 700; color: var(--runwell-rain-forrest, currentColor);">&check;</span>
60
60
  {%- elsif block.settings.ours == 'no' -%}
61
61
  <span style="display: inline-block; min-width: 1.6rem; opacity: 0.4;">&times;</span>
62
62
  {%- else -%}
@@ -65,7 +65,7 @@
65
65
  </td>
66
66
  <td style="padding: 1.05rem 1rem; vertical-align: middle; border-bottom: 1px solid rgba(0,0,0,0.08); text-align: center;">
67
67
  {%- if block.settings.theirs == 'yes' -%}
68
- <span style="display: inline-block; min-width: 1.6rem; font-size: 1.3rem; font-weight: 700; opacity: 0.55;">&check;</span>
68
+ <span style="display: inline-block; min-width: 1.6rem; font-size: calc(var(--font-body-scale) * 1.3rem); font-weight: 700; opacity: 0.55;">&check;</span>
69
69
  {%- elsif block.settings.theirs == 'no' -%}
70
70
  <span style="display: inline-block; min-width: 1.6rem; opacity: 0.4;">&times;</span>
71
71
  {%- else -%}
package/modules/editorial-block/sections/runwell-editorial-block.liquid CHANGED
@@ -43,18 +43,18 @@
43
43
  style="width: 100%; height: auto; border-radius: 8px; margin-bottom: 1rem; aspect-ratio: 4/5; object-fit: cover;">
44
44
  {%- endif -%}
45
45
  {%- if block.settings.title != blank -%}
46
- <h3 style="font-family: var(--font-heading-family); font-style: normal; font-weight: 400; font-size: 1.6rem; margin: 0 0 0.5rem 0; line-height: 1.2;">
46
+ <h3 style="font-family: var(--font-heading-family); font-style: normal; font-weight: 400; font-size: calc(var(--font-heading-scale) * 1.6rem); margin: 0 0 0.5rem 0; line-height: 1.2;">
47
47
  {{ block.settings.title }}
48
48
  </h3>
49
49
  {%- endif -%}
50
50
  {%- if block.settings.body != blank -%}
51
- <p style="font-size: 0.95rem; line-height: 1.6; opacity: 0.85; margin: 0;">
51
+ <p style="font-size: var(--runwell-meta-size); line-height: 1.6; opacity: 0.85; margin: 0;">
52
52
  {{ block.settings.body }}
53
53
  </p>
54
54
  {%- endif -%}
55
55
  {%- if block.settings.link_label != blank -%}
56
56
  <a href="{{ block.settings.link_url | default: '#' }}"
57
- style="display: inline-block; margin-top: 0.8rem; font-weight: 700; font-size: 0.9rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--runwell-blue);">
57
+ style="display: inline-block; margin-top: 0.8rem; font-weight: 700; font-size: var(--runwell-caption-size); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--runwell-blue);">
58
58
  {{ block.settings.link_label }} &rarr;
59
59
  </a>
60
60
  {%- endif -%}
package/modules/editorial-hero/variants/hero-with-card/assets/runwell-editorial-hero.css CHANGED
@@ -65,7 +65,7 @@
65
65
  }
66
66
 
67
67
  .runwell-editorial-hero__subheading {
68
- font-size: 1.5rem;
68
+ font-size: calc(var(--font-body-scale) * 1.5rem);
69
69
  color: #6B6259;
70
70
  line-height: 1.6;
71
71
  margin-bottom: 2rem;
@@ -73,7 +73,7 @@
73
73
 
74
74
  .runwell-editorial-hero__button {
75
75
  min-width: 200px;
76
- font-size: 1.5rem;
76
+ font-size: calc(var(--font-body-scale) * 1.5rem);
77
77
  padding: 1.4rem 3.2rem;
78
78
  background: #2A2622;
79
79
  color: #fff;
package/modules/editorial-hero/variants/video-bg/sections/runwell-video-hero.liquid CHANGED
@@ -44,7 +44,7 @@
44
44
 
45
45
  <div class="runwell-video-hero__content">
46
46
  {%- if section.settings.eyebrow != blank -%}
47
- <div style="font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.85; margin-bottom: 1rem;">
47
+ <div style="font-size: var(--runwell-eyebrow-size); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.85; margin-bottom: 1rem;">
48
48
  {{ section.settings.eyebrow }}
49
49
  </div>
50
50
  {%- endif -%}
package/modules/pdp-ingredients/sections/runwell-ingredients.liquid CHANGED
@@ -14,19 +14,19 @@
14
14
  >
15
15
  <div style="max-width: 1200px; margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) 6vw;">
16
16
  {%- if section.settings.eyebrow != blank -%}
17
- <div style="font-family: var(--font-body-family); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.65; margin-bottom: 0.6rem;">
17
+ <div style="font-family: var(--font-body-family); font-size: var(--runwell-eyebrow-size); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.65; margin-bottom: 0.6rem;">
18
18
  {{ section.settings.eyebrow }}
19
19
  </div>
20
20
  {%- endif -%}
21
21
 
22
22
  {%- if section.settings.heading != blank -%}
23
- <h2 style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.1; margin: 0 0 1rem 0; max-width: 22ch;">
23
+ <h2 style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: var(--runwell-h2-size); line-height: 1.1; margin: 0 0 1rem 0; max-width: 22ch;">
24
24
  {{ section.settings.heading }}
25
25
  </h2>
26
26
  {%- endif -%}
27
27
 
28
28
  {%- if section.settings.lede != blank -%}
29
- <p style="font-family: var(--font-body-family); font-size: 1rem; line-height: 1.65; max-width: 60ch; opacity: 0.85; margin: 0 0 2.5rem 0;">
29
+ <p style="font-family: var(--font-body-family); font-size: var(--runwell-body-size); line-height: 1.65; max-width: 60ch; opacity: 0.85; margin: 0 0 2.5rem 0;">
30
30
  {{ section.settings.lede }}
31
31
  </p>
32
32
  {%- endif -%}
@@ -36,15 +36,15 @@
36
36
  {%- for ing in ingredients_meta -%}
37
37
  <div style="border-top: 2px solid currentColor; padding-top: 1rem;">
38
38
  {%- if ing.dose != blank -%}
39
- <div style="font-family: var(--font-body-family); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.6; margin-bottom: 0.4rem;">
39
+ <div style="font-family: var(--font-body-family); font-size: var(--runwell-eyebrow-size); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.6; margin-bottom: 0.4rem;">
40
40
  {{ ing.dose }}
41
41
  </div>
42
42
  {%- endif -%}
43
- <h3 style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: 1.3rem; line-height: 1.2; margin: 0 0 0.5rem 0;">
43
+ <h3 style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: calc(var(--font-heading-scale) * 1.3rem); line-height: 1.2; margin: 0 0 0.5rem 0;">
44
44
  {{ ing.name }}
45
45
  </h3>
46
46
  {%- if ing.role != blank -%}
47
- <p style="font-family: var(--font-body-family); font-size: 0.92rem; line-height: 1.6; opacity: 0.85; margin: 0;">
47
+ <p style="font-family: var(--font-body-family); font-size: var(--runwell-meta-size); line-height: 1.6; opacity: 0.85; margin: 0;">
48
48
  {{ ing.role }}
49
49
  </p>
50
50
  {%- endif -%}
@@ -54,15 +54,15 @@
54
54
  {%- for block in section.blocks -%}
55
55
  <div {{ block.shopify_attributes }} style="border-top: 2px solid currentColor; padding-top: 1rem;">
56
56
  {%- if block.settings.dose != blank -%}
57
- <div style="font-family: var(--font-body-family); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.6; margin-bottom: 0.4rem;">
57
+ <div style="font-family: var(--font-body-family); font-size: var(--runwell-eyebrow-size); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.6; margin-bottom: 0.4rem;">
58
58
  {{ block.settings.dose }}
59
59
  </div>
60
60
  {%- endif -%}
61
- <h3 style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: 1.3rem; line-height: 1.2; margin: 0 0 0.5rem 0;">
61
+ <h3 style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: calc(var(--font-heading-scale) * 1.3rem); line-height: 1.2; margin: 0 0 0.5rem 0;">
62
62
  {{ block.settings.name }}
63
63
  </h3>
64
64
  {%- if block.settings.role != blank -%}
65
- <p style="font-family: var(--font-body-family); font-size: 0.92rem; line-height: 1.6; opacity: 0.85; margin: 0;">
65
+ <p style="font-family: var(--font-body-family); font-size: var(--runwell-meta-size); line-height: 1.6; opacity: 0.85; margin: 0;">
66
66
  {{ block.settings.role }}
67
67
  </p>
68
68
  {%- endif -%}
package/modules/pdp-journal-link/sections/runwell-pdp-journal.liquid CHANGED
@@ -21,34 +21,34 @@
21
21
  <div style="display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center;">
22
22
  <div>
23
23
  {%- if section.settings.eyebrow != blank -%}
24
- <div style="font-family: var(--font-body-family); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.65; margin-bottom: 0.6rem;">
24
+ <div style="font-family: var(--font-body-family); font-size: var(--runwell-eyebrow-size); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.65; margin-bottom: 0.6rem;">
25
25
  {{ section.settings.eyebrow }}
26
26
  </div>
27
27
  {%- endif -%}
28
28
 
29
29
  {%- if linked_article != blank -%}
30
- <h2 style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.1; margin: 0 0 0.8rem 0; max-width: 22ch;">
30
+ <h2 style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: var(--runwell-h2-size); line-height: 1.1; margin: 0 0 0.8rem 0; max-width: 22ch;">
31
31
  {{ linked_article.title }}
32
32
  </h2>
33
- <p style="font-family: var(--font-body-family); font-size: 1rem; line-height: 1.65; max-width: 60ch; opacity: 0.85; margin: 0 0 1.4rem 0;">
33
+ <p style="font-family: var(--font-body-family); font-size: var(--runwell-body-size); line-height: 1.65; max-width: 60ch; opacity: 0.85; margin: 0 0 1.4rem 0;">
34
34
  {{ linked_article.excerpt_or_content | strip_html | truncate: 180 }}
35
35
  </p>
36
36
  <a href="{{ linked_article.url }}"
37
- style="display: inline-block; padding: 0.85rem 1.4rem; border-radius: 4px; background: {{ section.settings.text_color }}; color: {{ section.settings.background_color }}; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;">
37
+ style="display: inline-block; padding: 0.85rem 1.4rem; border-radius: 4px; background: {{ section.settings.text_color }}; color: {{ section.settings.background_color }}; font-weight: 700; font-size: var(--runwell-caption-size); letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;">
38
38
  Read the journal &rarr;
39
39
  </a>
40
40
  {%- else -%}
41
- <h2 style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.1; margin: 0 0 0.8rem 0; max-width: 22ch;">
41
+ <h2 style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: var(--runwell-h2-size); line-height: 1.1; margin: 0 0 0.8rem 0; max-width: 22ch;">
42
42
  {{ section.settings.fallback_title }}
43
43
  </h2>
44
44
  {%- if section.settings.fallback_body != blank -%}
45
- <p style="font-family: var(--font-body-family); font-size: 1rem; line-height: 1.65; max-width: 60ch; opacity: 0.85; margin: 0 0 1.4rem 0;">
45
+ <p style="font-family: var(--font-body-family); font-size: var(--runwell-body-size); line-height: 1.65; max-width: 60ch; opacity: 0.85; margin: 0 0 1.4rem 0;">
46
46
  {{ section.settings.fallback_body }}
47
47
  </p>
48
48
  {%- endif -%}
49
49
  {%- if section.settings.fallback_link_url != blank -%}
50
50
  <a href="{{ section.settings.fallback_link_url }}"
51
- style="display: inline-block; padding: 0.85rem 1.4rem; border-radius: 4px; background: {{ section.settings.text_color }}; color: {{ section.settings.background_color }}; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;">
51
+ style="display: inline-block; padding: 0.85rem 1.4rem; border-radius: 4px; background: {{ section.settings.text_color }}; color: {{ section.settings.background_color }}; font-weight: 700; font-size: var(--runwell-caption-size); letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;">
52
52
  {{ section.settings.fallback_link_label | default: 'Read more' }} &rarr;
53
53
  </a>
54
54
  {%- endif -%}
package/modules/pdp-trust-checks/sections/runwell-pdp-trust.liquid CHANGED
@@ -10,19 +10,19 @@
10
10
  >
11
11
  <div class="runwell-pdp-trust__inner" style="max-width: 1200px; margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) 6vw;">
12
12
  {%- if section.settings.eyebrow != blank -%}
13
- <div style="font-family: var(--font-body-family); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.65; margin-bottom: 0.8rem;">
13
+ <div style="font-family: var(--font-body-family); font-size: var(--runwell-eyebrow-size); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.65; margin-bottom: 0.8rem;">
14
14
  {{ section.settings.eyebrow }}
15
15
  </div>
16
16
  {%- endif -%}
17
17
 
18
18
  {%- if section.settings.heading != blank -%}
19
- <h2 style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.1; margin: 0 0 1rem 0; max-width: 22ch;">
19
+ <h2 style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: var(--runwell-h2-size); line-height: 1.1; margin: 0 0 1rem 0; max-width: 22ch;">
20
20
  {{ section.settings.heading }}
21
21
  </h2>
22
22
  {%- endif -%}
23
23
 
24
24
  {%- if section.settings.lede != blank -%}
25
- <p style="font-family: var(--font-body-family); font-size: 1rem; line-height: 1.65; max-width: 60ch; opacity: 0.85; margin: 0 0 2.5rem 0;">
25
+ <p style="font-family: var(--font-body-family); font-size: var(--runwell-body-size); line-height: 1.65; max-width: 60ch; opacity: 0.85; margin: 0 0 2.5rem 0;">
26
26
  {{ section.settings.lede }}
27
27
  </p>
28
28
  {%- endif -%}
@@ -30,13 +30,13 @@
30
30
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.6rem; margin-top: 2rem;">
31
31
  {%- for block in section.blocks -%}
32
32
  <div {{ block.shopify_attributes }} style="border-top: 2px solid currentColor; padding-top: 1rem; opacity: 0.92;">
33
- <div style="font-family: var(--font-body-family); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.6; margin-bottom: 0.4rem;">
33
+ <div style="font-family: var(--font-body-family); font-size: var(--runwell-eyebrow-size); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.6; margin-bottom: 0.4rem;">
34
34
  {{ block.settings.eyebrow | default: forloop.index | prepend: 'Check ' }}
35
35
  </div>
36
- <h3 style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: 1.25rem; line-height: 1.2; margin: 0 0 0.5rem 0;">
36
+ <h3 style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: calc(var(--font-heading-scale) * 1.25rem); line-height: 1.2; margin: 0 0 0.5rem 0;">
37
37
  {{ block.settings.title }}
38
38
  </h3>
39
- <p style="font-family: var(--font-body-family); font-size: 0.92rem; line-height: 1.6; opacity: 0.85; margin: 0;">
39
+ <p style="font-family: var(--font-body-family); font-size: var(--runwell-meta-size); line-height: 1.6; opacity: 0.85; margin: 0;">
40
40
  {{ block.settings.body }}
41
41
  </p>
42
42
  </div>
@@ -46,7 +46,7 @@
46
46
  {%- if section.settings.link_label != blank -%}
47
47
  <div style="margin-top: 2.5rem;">
48
48
  <a href="{{ section.settings.link_url | default: '/pages/standards' }}"
49
- style="font-family: var(--font-body-family); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--runwell-blue);">
49
+ style="font-family: var(--font-body-family); font-weight: 700; font-size: var(--runwell-caption-size); letter-spacing: 0.04em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--runwell-blue);">
50
50
  {{ section.settings.link_label }} &rarr;
51
51
  </a>
52
52
  </div>
package/modules/post-purchase-upsell/assets/runwell-thank-you.css CHANGED
@@ -19,7 +19,7 @@
19
19
  margin-bottom: 2rem;
20
20
  }
21
21
  .runwell-ty-upsell__eyebrow {
22
- font-size: 0.78rem;
22
+ font-size: var(--runwell-eyebrow-size);
23
23
  letter-spacing: 0.2em;
24
24
  text-transform: uppercase;
25
25
  font-weight: 700;
@@ -30,12 +30,12 @@
30
30
  font-family: var(--font-heading-family, Georgia, serif);
31
31
  font-style: normal;
32
32
  font-weight: 400;
33
- font-size: clamp(1.7rem, 3vw, 2.4rem);
33
+ font-size: calc(var(--font-heading-scale) * clamp(1.7rem, 3vw, 2.4rem));
34
34
  line-height: 1.1;
35
35
  margin: 0 0 0.8rem 0;
36
36
  }
37
37
  .runwell-ty-upsell__lede {
38
- font-size: 0.95rem;
38
+ font-size: var(--runwell-meta-size);
39
39
  line-height: 1.5;
40
40
  margin: 0;
41
41
  opacity: 0.85;
@@ -94,15 +94,15 @@
94
94
  }
95
95
  .runwell-ty-card__title {
96
96
  font-family: var(--font-heading-family, Georgia, serif);
97
- font-size: 1.1rem;
97
+ font-size: calc(var(--font-heading-scale) * 1.1rem);
98
98
  line-height: 1.2;
99
99
  }
100
100
  .runwell-ty-card__price {
101
- font-size: 0.9rem;
101
+ font-size: var(--runwell-caption-size);
102
102
  opacity: 0.7;
103
103
  }
104
104
  .runwell-ty-card__cta {
105
- font-size: 0.85rem;
105
+ font-size: var(--runwell-caption-size);
106
106
  font-weight: 700;
107
107
  text-decoration: underline;
108
108
  text-underline-offset: 4px;
package/modules/press-bar/sections/runwell-press-bar.liquid CHANGED
@@ -17,7 +17,7 @@
17
17
  >
18
18
  <div style="max-width: 1400px; margin: 0 auto;">
19
19
  {%- if section.settings.eyebrow != blank -%}
20
- <div style="text-align: center; font-family: var(--font-body-family); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.6; margin-bottom: 1.6rem;">
20
+ <div style="text-align: center; font-family: var(--font-body-family); font-size: var(--runwell-eyebrow-size); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.6; margin-bottom: 1.6rem;">
21
21
  {{ section.settings.eyebrow }}
22
22
  </div>
23
23
  {%- endif -%}
@@ -40,7 +40,7 @@
40
40
  height="40"
41
41
  loading="lazy">
42
42
  {%- elsif block.settings.label != blank -%}
43
- <span style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: clamp(1.1rem, 2vw, 1.5rem);">
43
+ <span style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: calc(var(--font-heading-scale) * clamp(1.1rem, 2vw, 1.5rem));">
44
44
  {{ block.settings.label }}
45
45
  </span>
46
46
  {%- endif -%}
package/modules/risk-reversal/sections/runwell-risk-reversal.liquid CHANGED
@@ -11,24 +11,24 @@
11
11
  <div style="max-width: 1200px; margin: 0 auto; padding: clamp(1.4rem, 3vw, 2.2rem) 6vw;">
12
12
  <div style="display: flex; align-items: flex-start; gap: 1rem;">
13
13
  {%- if section.settings.icon != blank -%}
14
- <div style="flex: 0 0 auto; font-size: 1.6rem; line-height: 1; opacity: 0.7;">
14
+ <div style="flex: 0 0 auto; font-size: calc(var(--font-body-scale) * 1.6rem); line-height: 1; opacity: 0.7;">
15
15
  {{ section.settings.icon }}
16
16
  </div>
17
17
  {%- endif -%}
18
18
  <div style="flex: 1 1 auto;">
19
19
  {%- if section.settings.heading != blank -%}
20
- <h3 style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: 1.15rem; line-height: 1.2; margin: 0 0 0.3rem 0;">
20
+ <h3 style="font-family: var(--font-heading-family); font-style: italic; font-weight: 400; font-size: var(--runwell-cta-size); line-height: 1.2; margin: 0 0 0.3rem 0;">
21
21
  {{ section.settings.heading }}
22
22
  </h3>
23
23
  {%- endif -%}
24
24
  {%- if section.settings.body != blank -%}
25
- <p style="font-family: var(--font-body-family); font-size: 0.92rem; line-height: 1.55; margin: 0; opacity: 0.85;">
25
+ <p style="font-family: var(--font-body-family); font-size: var(--runwell-meta-size); line-height: 1.55; margin: 0; opacity: 0.85;">
26
26
  {{ section.settings.body }}
27
27
  </p>
28
28
  {%- endif -%}
29
29
  {%- if section.settings.link_label != blank -%}
30
30
  <a href="{{ section.settings.link_url | default: '/policies/refund-policy' }}"
31
- style="display: inline-block; margin-top: 0.5rem; font-family: var(--font-body-family); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.04em; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--runwell-blue);">
31
+ style="display: inline-block; margin-top: 0.5rem; font-family: var(--font-body-family); font-weight: 700; font-size: var(--runwell-caption-size); letter-spacing: 0.04em; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--runwell-blue);">
32
32
  {{ section.settings.link_label }} &rarr;
33
33
  </a>
34
34
  {%- endif -%}
package/modules/scrolling-ticker/assets/runwell-scrolling-ticker.css CHANGED
@@ -2,7 +2,7 @@
2
2
  overflow: hidden;
3
3
  white-space: nowrap;
4
4
  padding: 12px 0;
5
- font-size: 1.4rem;
5
+ font-size: calc(var(--font-body-scale) * 1.4rem);
6
6
  font-weight: 600;
7
7
  letter-spacing: 0.08em;
8
8
  text-transform: uppercase;
@@ -45,7 +45,7 @@
45
45
 
46
46
  @media screen and (max-width: 749px) {
47
47
  .runwell-scrolling-ticker {
48
- font-size: 1.2rem;
48
+ font-size: calc(var(--font-body-scale) * 1.2rem);
49
49
  padding: 10px 0;
50
50
  }
51
51
  }
package/modules/shipping-bar/sections/runwell-shipping-bar.liquid CHANGED
@@ -18,7 +18,7 @@
18
18
  <aside
19
19
  class="runwell-shipping-bar"
20
20
  data-section-id="{{ section.id }}"
21
- style="background: {{ section.settings.background_color }}; color: {{ section.settings.text_color }}; padding: 0.55rem 1.5rem; font-family: var(--font-body-family); font-size: 0.82rem; letter-spacing: 0.04em; text-align: center;"
21
+ style="background: {{ section.settings.background_color }}; color: {{ section.settings.text_color }}; padding: 0.55rem 1.5rem; font-family: var(--font-body-family); font-size: var(--runwell-caption-size); letter-spacing: 0.04em; text-align: center;"
22
22
  >
23
23
  <div style="max-width: 1400px; margin: 0 auto;">
24
24
  {%- if threshold > 0 and remaining > 0 -%}
package/modules/social-proof-banner/assets/runwell-social-proof-banner.css CHANGED
@@ -8,13 +8,13 @@
8
8
 
9
9
  .social-proof-banner__count {
10
10
  font-family: var(--font-heading-family);
11
- font-size: 3.6rem;
11
+ font-size: calc(var(--font-body-scale) * 3.6rem);
12
12
  font-weight: 600;
13
13
  line-height: 1;
14
14
  }
15
15
 
16
16
  .social-proof-banner__text {
17
- font-size: 1.6rem;
17
+ font-size: calc(var(--font-body-scale) * 1.6rem);
18
18
  opacity: 0.8;
19
19
  }
20
20
 
@@ -25,6 +25,6 @@
25
25
  }
26
26
 
27
27
  .social-proof-banner__count {
28
- font-size: 2.8rem;
28
+ font-size: calc(var(--font-body-scale) * 2.8rem);
29
29
  }
30
30
  }
package/modules/stats-bar/assets/runwell-stats-bar.css CHANGED
@@ -25,13 +25,13 @@
25
25
  }
26
26
 
27
27
  .stats-bar__number {
28
- font-size: 4.8rem;
28
+ font-size: calc(var(--font-heading-scale) * 4.8rem);
29
29
  line-height: 1;
30
30
  font-weight: 600;
31
31
  }
32
32
 
33
33
  .stats-bar__label {
34
- font-size: 1.4rem;
34
+ font-size: calc(var(--font-body-scale) * 1.4rem);
35
35
  opacity: 0.85;
36
36
  max-width: 24ch;
37
37
  line-height: 1.4;
@@ -44,6 +44,6 @@
44
44
  }
45
45
 
46
46
  .stats-bar__number {
47
- font-size: 3.6rem;
47
+ font-size: calc(var(--font-heading-scale) * 3.6rem);
48
48
  }
49
49
  }
package/modules/sticky-atc/assets/runwell-sticky-atc.css CHANGED
@@ -57,7 +57,7 @@
57
57
  .runwell-sticky-atc__title {
58
58
  font-family: var(--font-heading-family, serif);
59
59
  font-style: italic;
60
- font-size: 0.95rem;
60
+ font-size: var(--runwell-meta-size);
61
61
  font-weight: 400;
62
62
  line-height: 1.2;
63
63
  color: var(--runwell-primary, #1A1A1A);
@@ -68,7 +68,7 @@
68
68
 
69
69
  .runwell-sticky-atc__price {
70
70
  font-family: var(--font-body-family, sans-serif);
71
- font-size: 0.85rem;
71
+ font-size: var(--runwell-caption-size);
72
72
  font-weight: 500;
73
73
  color: var(--runwell-primary, #1A1A1A);
74
74
  opacity: 0.8;
@@ -86,7 +86,7 @@
86
86
  border-radius: 0;
87
87
  padding: 0.75rem 1.5rem;
88
88
  font-family: var(--font-body-family, sans-serif);
89
- font-size: 0.9rem;
89
+ font-size: var(--runwell-caption-size);
90
90
  font-weight: 600;
91
91
  letter-spacing: 0.04em;
92
92
  text-transform: uppercase;
@@ -108,10 +108,10 @@
108
108
  padding: 0.6rem 0.9rem;
109
109
  }
110
110
  .runwell-sticky-atc__title {
111
- font-size: 0.85rem;
111
+ font-size: var(--runwell-caption-size);
112
112
  }
113
113
  .runwell-sticky-atc__cta {
114
114
  padding: 0.6rem 1.1rem;
115
- font-size: 0.8rem;
115
+ font-size: var(--runwell-eyebrow-size);
116
116
  }
117
117
  }
package/modules/testimonials/variants/carousel-ugc/assets/runwell-testimonials.css CHANGED
@@ -6,14 +6,14 @@
6
6
 
7
7
  .runwell-testimonials__heading {
8
8
  font-family: var(--font-heading-family);
9
- font-size: 2.4rem;
9
+ font-size: calc(var(--font-heading-scale) * 2.4rem);
10
10
  text-align: center;
11
11
  margin-bottom: 8px;
12
12
  color: rgba(var(--color-foreground), 1);
13
13
  }
14
14
 
15
15
  .runwell-testimonials__subheading {
16
- font-size: 1.4rem;
16
+ font-size: calc(var(--font-body-scale) * 1.4rem);
17
17
  text-align: center;
18
18
  color: rgba(var(--color-foreground), 0.65);
19
19
  margin-bottom: 32px;
@@ -164,6 +164,6 @@
164
164
  }
165
165
 
166
166
  .runwell-testimonials__heading {
167
- font-size: 2rem;
167
+ font-size: calc(var(--font-heading-scale) * 2rem);
168
168
  }
169
169
  }
package/modules/trust-badges/sections/runwell-trust-badges.liquid CHANGED
@@ -13,15 +13,15 @@
13
13
  <div style="display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; gap: 1.5rem;">
14
14
  {%- for block in section.blocks -%}
15
15
  <div {{ block.shopify_attributes }} style="display: flex; align-items: center; gap: 0.6rem; min-width: 0;">
16
- <div style="font-size: 1.6rem; line-height: 1; opacity: 0.7;">
16
+ <div style="font-size: calc(var(--font-body-scale) * 1.6rem); line-height: 1; opacity: 0.7;">
17
17
  {{ block.settings.icon }}
18
18
  </div>
19
19
  <div style="min-width: 0;">
20
- <div style="font-family: var(--font-body-family); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1.2;">
20
+ <div style="font-family: var(--font-body-family); font-size: var(--runwell-eyebrow-size); font-weight: 700; letter-spacing: 0.04em; line-height: 1.2;">
21
21
  {{ block.settings.title }}
22
22
  </div>
23
23
  {%- if block.settings.body != blank -%}
24
- <div style="font-family: var(--font-body-family); font-size: 0.72rem; opacity: 0.7; line-height: 1.3; margin-top: 0.15rem;">
24
+ <div style="font-family: var(--font-body-family); font-size: var(--runwell-eyebrow-size); opacity: 0.7; line-height: 1.3; margin-top: 0.15rem;">
25
25
  {{ block.settings.body }}
26
26
  </div>
27
27
  {%- endif -%}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@runwell/shopify-toolkit",
3
- "version": "0.13.3",
3
+ "version": "0.14.1",
4
4
  "description": "Reusable Shopify theme modules from Runwell. Replaces typically app-driven features (reviews, wishlist, urgency, FAQ, post-purchase upsell, exit popups, free-ship progress, sticky ATC, testimonials, badges, bundles) with native Liquid + JS + CSS that ship across multiple client themes via a config-driven sync CLI.",
5
5
  "type": "module",
6
6
  "main": "lib/index.js",