@runwell/shopify-toolkit 0.16.1 → 0.17.0
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.
- package/modules/editorial-block/assets/runwell-editorial-block.css +40 -0
- package/modules/editorial-block/module.json +4 -1
- package/modules/editorial-block/sections/runwell-editorial-block.liquid +1 -0
- package/modules/exit-intent/assets/runwell-exit-intent.css +114 -0
- package/modules/exit-intent/module.json +3 -2
- package/modules/exit-intent/sections/runwell-exit-intent.liquid +1 -0
- package/modules/faq/assets/runwell-faq.css +83 -0
- package/modules/faq/module.json +4 -1
- package/modules/faq/sections/runwell-faq.liquid +1 -0
- package/modules/how-it-works/assets/runwell-how-it-works.css +125 -0
- package/modules/how-it-works/module.json +4 -1
- package/modules/how-it-works/sections/runwell-how-it-works.liquid +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
/* Runwell editorial block. Eyebrow + serif heading + lede + optional
|
|
2
|
+
3-up card grid. Used across editorial sections (Approach, Press,
|
|
3
|
+
Partnerships, etc.). Tenants override colors/fonts in brand CSS. */
|
|
4
|
+
|
|
5
|
+
.runwell-editorial-section {
|
|
6
|
+
padding: clamp(4rem, 9vw, 7rem) 6vw;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.runwell-editorial-section > * {
|
|
10
|
+
max-width: 1400px;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.runwell-editorial-section__eyebrow {
|
|
14
|
+
font-family: var(--font-body-family, sans-serif);
|
|
15
|
+
font-size: var(--runwell-eyebrow-size);
|
|
16
|
+
font-weight: 700;
|
|
17
|
+
letter-spacing: 0.18em;
|
|
18
|
+
text-transform: uppercase;
|
|
19
|
+
opacity: 0.65;
|
|
20
|
+
margin-bottom: 0.8rem;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.runwell-editorial-section__heading {
|
|
24
|
+
font-family: var(--font-heading-family, serif);
|
|
25
|
+
font-style: normal;
|
|
26
|
+
font-weight: 400;
|
|
27
|
+
font-size: var(--runwell-h2-size);
|
|
28
|
+
line-height: 1.1;
|
|
29
|
+
margin: 0 0 1rem 0;
|
|
30
|
+
max-width: 22ch;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.runwell-editorial-section__lede {
|
|
34
|
+
font-family: var(--font-body-family, sans-serif);
|
|
35
|
+
font-size: calc(var(--font-body-scale) * clamp(1.7rem, 1.9vw, 2.1rem));
|
|
36
|
+
line-height: 1.55;
|
|
37
|
+
max-width: 60ch;
|
|
38
|
+
opacity: 0.85;
|
|
39
|
+
margin-bottom: 2.5rem;
|
|
40
|
+
}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
Runwell editorial section: eyebrow + serif italic heading + lede + body.
|
|
3
3
|
Used for the homepage section flow (Approach, Press, Partnering equivalents).
|
|
4
4
|
{%- endcomment -%}
|
|
5
|
+
{{ 'runwell-editorial-block.css' | asset_url | stylesheet_tag }}
|
|
5
6
|
|
|
6
7
|
<section
|
|
7
8
|
class="runwell-editorial-section"
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
/* Runwell exit-intent popup. Modal layout with eyebrow + h2 + lede +
|
|
2
|
+
email capture form. Tenants override colors via brand CSS. */
|
|
3
|
+
|
|
4
|
+
.runwell-exit {
|
|
5
|
+
position: fixed;
|
|
6
|
+
inset: 0;
|
|
7
|
+
z-index: 999;
|
|
8
|
+
display: none;
|
|
9
|
+
align-items: center;
|
|
10
|
+
justify-content: center;
|
|
11
|
+
padding: 1.5rem;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.runwell-exit.is-open {
|
|
15
|
+
display: flex;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.runwell-exit__backdrop {
|
|
19
|
+
position: absolute;
|
|
20
|
+
inset: 0;
|
|
21
|
+
background: rgba(0, 0, 0, 0.55);
|
|
22
|
+
backdrop-filter: blur(4px);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.runwell-exit__panel {
|
|
26
|
+
position: relative;
|
|
27
|
+
background: #FFFFFF;
|
|
28
|
+
color: var(--runwell-primary, #1A1A1A);
|
|
29
|
+
max-width: 480px;
|
|
30
|
+
width: 100%;
|
|
31
|
+
padding: 3rem 2.5rem 2.5rem;
|
|
32
|
+
border-radius: 8px;
|
|
33
|
+
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.runwell-exit__close {
|
|
37
|
+
position: absolute;
|
|
38
|
+
top: 0.6rem;
|
|
39
|
+
right: 0.9rem;
|
|
40
|
+
background: transparent;
|
|
41
|
+
border: 0;
|
|
42
|
+
font-size: calc(var(--font-body-scale) * 2rem);
|
|
43
|
+
font-weight: 300;
|
|
44
|
+
color: currentColor;
|
|
45
|
+
cursor: pointer;
|
|
46
|
+
line-height: 1;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.runwell-exit__eyebrow {
|
|
50
|
+
font-size: var(--runwell-eyebrow-size);
|
|
51
|
+
letter-spacing: 0.2em;
|
|
52
|
+
text-transform: uppercase;
|
|
53
|
+
font-weight: 700;
|
|
54
|
+
margin: 0 0 0.8rem 0;
|
|
55
|
+
opacity: 0.6;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.runwell-exit__heading {
|
|
59
|
+
font-family: var(--font-heading-family, serif);
|
|
60
|
+
font-style: normal;
|
|
61
|
+
font-weight: 400;
|
|
62
|
+
font-size: var(--runwell-h3-size);
|
|
63
|
+
line-height: 1.1;
|
|
64
|
+
margin: 0 0 0.8rem 0;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.runwell-exit__lede {
|
|
68
|
+
font-size: var(--runwell-body-size);
|
|
69
|
+
line-height: 1.55;
|
|
70
|
+
margin: 0 0 1.6rem 0;
|
|
71
|
+
opacity: 0.85;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.runwell-exit__form {
|
|
75
|
+
display: flex;
|
|
76
|
+
gap: 0.5rem;
|
|
77
|
+
flex-wrap: wrap;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.runwell-exit__form input[type="email"] {
|
|
81
|
+
flex: 1;
|
|
82
|
+
min-width: 200px;
|
|
83
|
+
padding: 0.85rem 1rem;
|
|
84
|
+
border: 1px solid rgba(0, 0, 0, 0.25);
|
|
85
|
+
border-radius: 4px;
|
|
86
|
+
font-size: var(--runwell-body-size);
|
|
87
|
+
background: #FFFFFF;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.runwell-exit__cta {
|
|
91
|
+
background: var(--runwell-primary, #1A1A1A);
|
|
92
|
+
color: #FFFFFF;
|
|
93
|
+
border: 0;
|
|
94
|
+
padding: 0.85rem 1.4rem;
|
|
95
|
+
font-weight: 700;
|
|
96
|
+
font-size: var(--runwell-body-size);
|
|
97
|
+
border-radius: 4px;
|
|
98
|
+
cursor: pointer;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.runwell-exit__success {
|
|
102
|
+
margin: 0.8rem 0 0;
|
|
103
|
+
font-weight: 600;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.runwell-exit__fineprint {
|
|
107
|
+
font-size: var(--runwell-eyebrow-size);
|
|
108
|
+
margin-top: 1rem;
|
|
109
|
+
opacity: 0.6;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
body.runwell-exit-open {
|
|
113
|
+
overflow: hidden;
|
|
114
|
+
}
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
(desktop) or after 30 seconds (mobile fallback). Suppresses with a
|
|
5
5
|
localStorage cookie for 30 days after dismiss or sign-up.
|
|
6
6
|
{%- endcomment -%}
|
|
7
|
+
{{ 'runwell-exit-intent.css' | asset_url | stylesheet_tag }}
|
|
7
8
|
|
|
8
9
|
<div class="runwell-exit" data-runwell-exit-intent aria-hidden="true" role="dialog" aria-labelledby="runwell-exit-title">
|
|
9
10
|
<div class="runwell-exit__backdrop" data-runwell-exit-close></div>
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
/* Runwell FAQ accordion. Editorial layout with eyebrow + h2 + accordion list.
|
|
2
|
+
Section colors come from Theme Editor inline style on <section>; tenants
|
|
3
|
+
may override colors / fonts via their brand stylesheet. */
|
|
4
|
+
|
|
5
|
+
.runwell-faq {
|
|
6
|
+
padding: clamp(4rem, 8vw, 6rem) 6vw;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.runwell-faq__inner {
|
|
10
|
+
max-width: 820px;
|
|
11
|
+
margin: 0 auto;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.runwell-faq__eyebrow {
|
|
15
|
+
font-family: var(--font-body-family, sans-serif);
|
|
16
|
+
font-size: var(--runwell-eyebrow-size);
|
|
17
|
+
letter-spacing: 0.2em;
|
|
18
|
+
text-transform: uppercase;
|
|
19
|
+
font-weight: 700;
|
|
20
|
+
margin: 0 0 0.8rem 0;
|
|
21
|
+
opacity: 0.6;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.runwell-faq__heading {
|
|
25
|
+
font-family: var(--font-heading-family, serif);
|
|
26
|
+
font-style: normal;
|
|
27
|
+
font-weight: 400;
|
|
28
|
+
font-size: var(--runwell-h2-size);
|
|
29
|
+
line-height: 1.1;
|
|
30
|
+
margin: 0 0 2rem 0;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.runwell-faq__list {
|
|
34
|
+
display: flex;
|
|
35
|
+
flex-direction: column;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.runwell-faq__item {
|
|
39
|
+
border-top: 1px solid currentColor;
|
|
40
|
+
border-color: rgba(0, 0, 0, 0.12);
|
|
41
|
+
padding: 1rem 0;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.runwell-faq__item[open] {
|
|
45
|
+
padding-bottom: 1.4rem;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.runwell-faq__item:last-child {
|
|
49
|
+
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.runwell-faq__q {
|
|
53
|
+
display: flex;
|
|
54
|
+
justify-content: space-between;
|
|
55
|
+
align-items: center;
|
|
56
|
+
cursor: pointer;
|
|
57
|
+
list-style: none;
|
|
58
|
+
font-family: var(--font-heading-family, serif);
|
|
59
|
+
font-size: var(--runwell-h4-size);
|
|
60
|
+
padding: 0.7rem 0;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.runwell-faq__q::-webkit-details-marker {
|
|
64
|
+
display: none;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.runwell-faq__icon {
|
|
68
|
+
font-size: calc(var(--font-body-scale) * 1.4rem);
|
|
69
|
+
font-weight: 300;
|
|
70
|
+
transition: transform 0.2s ease;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.runwell-faq__item[open] .runwell-faq__icon {
|
|
74
|
+
transform: rotate(45deg);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.runwell-faq__a {
|
|
78
|
+
margin-top: 0.6rem;
|
|
79
|
+
font-size: var(--runwell-body-size);
|
|
80
|
+
line-height: 1.6;
|
|
81
|
+
max-width: 60ch;
|
|
82
|
+
opacity: 0.85;
|
|
83
|
+
}
|
package/modules/faq/module.json
CHANGED
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
/* Runwell how-it-works. Editorial 2-column (image + steps) on desktop,
|
|
2
|
+
stacks on mobile. Tenants may override colors/fonts via brand CSS. */
|
|
3
|
+
|
|
4
|
+
.runwell-how {
|
|
5
|
+
padding: clamp(4rem, 9vw, 7rem) 0;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.runwell-how__inner {
|
|
9
|
+
max-width: 1400px;
|
|
10
|
+
margin: 0 auto;
|
|
11
|
+
padding: 0 6vw;
|
|
12
|
+
display: grid;
|
|
13
|
+
grid-template-columns: 1fr;
|
|
14
|
+
gap: clamp(2rem, 5vw, 4rem);
|
|
15
|
+
align-items: center;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
@media (min-width: 900px) {
|
|
19
|
+
.runwell-how__inner {
|
|
20
|
+
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
|
|
21
|
+
gap: clamp(3rem, 6vw, 6rem);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.runwell-how__media img {
|
|
26
|
+
width: 100%;
|
|
27
|
+
height: auto;
|
|
28
|
+
aspect-ratio: 4/5;
|
|
29
|
+
object-fit: cover;
|
|
30
|
+
border-radius: 8px;
|
|
31
|
+
display: block;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.runwell-how__eyebrow {
|
|
35
|
+
font-family: var(--font-body-family, sans-serif);
|
|
36
|
+
font-size: var(--runwell-eyebrow-size);
|
|
37
|
+
font-weight: 700;
|
|
38
|
+
letter-spacing: 0.2em;
|
|
39
|
+
text-transform: uppercase;
|
|
40
|
+
opacity: 0.65;
|
|
41
|
+
margin-bottom: 0.8rem;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.runwell-how__heading {
|
|
45
|
+
font-family: var(--font-heading-family, serif);
|
|
46
|
+
font-style: normal;
|
|
47
|
+
font-weight: 400;
|
|
48
|
+
font-size: var(--runwell-h2-size);
|
|
49
|
+
line-height: 1.05;
|
|
50
|
+
margin: 0 0 1rem 0;
|
|
51
|
+
max-width: 18ch;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.runwell-how__lede {
|
|
55
|
+
font-family: var(--font-body-family, sans-serif);
|
|
56
|
+
font-size: var(--runwell-lede-size);
|
|
57
|
+
line-height: 1.6;
|
|
58
|
+
max-width: 50ch;
|
|
59
|
+
margin: 0 0 2rem 0;
|
|
60
|
+
opacity: 0.85;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.runwell-how__steps {
|
|
64
|
+
display: flex;
|
|
65
|
+
flex-direction: column;
|
|
66
|
+
gap: 1.6rem;
|
|
67
|
+
margin: 2rem 0;
|
|
68
|
+
padding: 0;
|
|
69
|
+
list-style: none;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.runwell-how__step {
|
|
73
|
+
display: grid;
|
|
74
|
+
grid-template-columns: auto 1fr;
|
|
75
|
+
gap: 1rem;
|
|
76
|
+
align-items: start;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.runwell-how__step-number {
|
|
80
|
+
font-family: var(--font-heading-family, serif);
|
|
81
|
+
font-style: italic;
|
|
82
|
+
font-size: calc(var(--font-heading-scale) * 1.6rem);
|
|
83
|
+
line-height: 1;
|
|
84
|
+
opacity: 0.55;
|
|
85
|
+
min-width: 2.5ch;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.runwell-how__step-title {
|
|
89
|
+
font-family: var(--font-heading-family, serif);
|
|
90
|
+
font-weight: 400;
|
|
91
|
+
font-size: var(--runwell-h4-size);
|
|
92
|
+
line-height: 1.2;
|
|
93
|
+
margin: 0 0 0.4rem 0;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.runwell-how__step-body {
|
|
97
|
+
font-family: var(--font-body-family, sans-serif);
|
|
98
|
+
font-size: var(--runwell-body-size);
|
|
99
|
+
line-height: 1.55;
|
|
100
|
+
opacity: 0.8;
|
|
101
|
+
margin: 0;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.runwell-how__cta {
|
|
105
|
+
display: inline-block;
|
|
106
|
+
margin-top: 1.6rem;
|
|
107
|
+
font-family: var(--font-body-family, sans-serif);
|
|
108
|
+
font-weight: 700;
|
|
109
|
+
font-size: var(--runwell-cta-size);
|
|
110
|
+
letter-spacing: 0.04em;
|
|
111
|
+
text-decoration: underline;
|
|
112
|
+
text-underline-offset: 4px;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.runwell-how__card {
|
|
116
|
+
display: flex;
|
|
117
|
+
flex-direction: column;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.runwell-how__card-text {
|
|
121
|
+
font-family: var(--font-body-family, sans-serif);
|
|
122
|
+
font-size: var(--runwell-body-size);
|
|
123
|
+
line-height: 1.55;
|
|
124
|
+
opacity: 0.8;
|
|
125
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@runwell/shopify-toolkit",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.17.0",
|
|
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",
|