@total_onion/onion-library 3.0.15 → 3.0.18

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 (30) hide show
  1. package/esbuild.mjs +3 -3
  2. package/package.json +1 -1
  3. package/public/block-accent-image-v3/accent-image-v3.css +2 -0
  4. package/public/block-accordion-v3/accordion-v3.css +375 -385
  5. package/public/block-back-to-top-button-v3/back-to-top-button-v3.css +60 -58
  6. package/public/block-betterreviews-display-v3/betterreviews-display-v3.css +1 -4
  7. package/public/block-block-interactions-v3/block-interactions-v3.css +30 -28
  8. package/public/block-carousel-multi-layout-v3/carousel-multi-layout-v3.css +157 -164
  9. package/public/block-cocktail-recipe-v3/cocktail-recipe-v3.css +8 -16
  10. package/public/block-cover-link-v3/cover-link-v3.css +1 -4
  11. package/public/block-divider-v3/divider-v3.css +0 -2
  12. package/public/block-featured-image-gallery-v3/featured-image-gallery-v3.css +0 -6
  13. package/public/block-form-selection-v3/form-selection-v3.css +1 -4
  14. package/public/block-gradient-layer-v3/gradient-layer-v3.css +3 -12
  15. package/public/block-group-container-v3/group-container-v3.css +0 -22
  16. package/public/block-market-selector-v3/market-selector-v3.css +0 -3
  17. package/public/block-post-info-v3/post-info-v3.css +1063 -1153
  18. package/public/block-product-info-v3/product-info-v3.css +13 -90
  19. package/public/block-scrolling-banner-v3/scrolling-banner-v3.css +85 -87
  20. package/public/block-section-separator-v3/section-separator-v3.css +0 -2
  21. package/public/block-single-column-container-v3/single-column-container-v3.css +0 -2
  22. package/public/block-single-responsive-image-v3/single-responsive-image-v3.css +1 -4
  23. package/public/block-site-copyright-notice-v3/site-copyright-notice-v3.css +16 -14
  24. package/public/block-site-title-and-tagline-v3/site-title-and-tagline-v3.css +0 -2
  25. package/public/block-standard-content-v3/standard-content-v3.css +4 -28
  26. package/public/block-sub-group-container-v3/sub-group-container-v3.css +0 -22
  27. package/public/block-video-content-v3/video-content-v3.css +2 -7
  28. package/public/jsAssets.mjs +3 -39
  29. package/public/publicBundleBase.css +1168 -1191
  30. package/removeBlock.js +9 -0
package/public/block-accordion-v3/accordion-v3.css CHANGED
@@ -1,230 +1,131 @@
1
- .accordion-v3__inner-container {
2
- grid-area: main;
3
- align-self: var(--content-box-vert-align-mobile);
4
- justify-self: var(--content-box-horiz-align-mobile);
5
- place-self: var(--content-box-vert-align-mobile) var(--content-box-horiz-align-mobile);
6
- z-index: 5;
7
- z-index: var(--content-z-index, 5);
8
- overflow: var(--content-box-overflow);
9
- min-width: -moz-min-content;
10
- min-width: min-content;
11
- aspect-ratio: var(--content-box-aspect-ratio);
12
- border-radius: var(--border-radius);
13
- border-width: var(--border-width);
14
- border-color: var(--border-colour);
15
- border-style: var(--border-style);
16
- display: flex;
17
- flex-direction: column;
18
- flex-direction: var(--content-box-items-direction-mobile, column);
19
- justify-content: var(--content-items-alignment-mobile);
20
- align-items: center;
21
- background-color: var(--cb-bg-colour);
22
- padding: calc(var(--global-inline-spacing) * var(--content-box-top-padding-mult-mobile)) calc(var(--global-inline-spacing) * var(--content-box-right-padding-mult-mobile)) calc(var(--global-inline-spacing) * var(--content-box-bottom-padding-mult-mobile)) calc(var(--global-inline-spacing) * var(--content-box-left-padding-mult-mobile));
23
- margin: calc(var(--global-inline-spacing) * var(--content-box-top-margin-mobile)) calc(var(--global-inline-spacing) * var(--content-box-right-margin-mobile)) calc(var(--global-inline-spacing) * var(--content-box-bottom-margin-mobile)) calc(var(--global-inline-spacing) * var(--content-box-left-margin-mobile));
24
- -moz-column-gap: var(--content-items-micro-gap-mobile, calc(var(--content-items-gap-mobile) * var(--global-inline-spacing)));
25
- column-gap: var(--content-items-micro-gap-mobile, calc(var(--content-items-gap-mobile) * var(--global-inline-spacing)));
26
- }
27
- @media screen and (min-width: 768px) {
1
+ @layer base-styles {
28
2
  .accordion-v3__inner-container {
29
- justify-content: var(--content-items-alignment-portrait);
30
- align-self: var(--content-box-vert-align-portrait);
31
- justify-self: var(--content-box-horiz-align-portrait);
32
- place-self: var(--content-box-vert-align-portrait) var(--content-box-horiz-align-portrait);
33
- padding: calc(var(--global-inline-spacing) * var(--content-box-top-padding-mult-portrait)) calc(var(--global-inline-spacing) * var(--content-box-right-padding-mult-portrait)) calc(var(--global-inline-spacing) * var(--content-box-bottom-padding-mult-portrait)) calc(var(--global-inline-spacing) * var(--content-box-left-padding-mult-portrait));
34
- margin: calc(var(--global-inline-spacing) * var(--content-box-top-margin-portrait)) calc(var(--global-inline-spacing) * var(--content-box-right-margin-portrait)) calc(var(--global-inline-spacing) * var(--content-box-bottom-margin-portrait)) calc(var(--global-inline-spacing) * var(--content-box-left-margin-portrait));
3
+ grid-area: main;
4
+ place-self: var(--content-box-vert-align-mobile) var(--content-box-horiz-align-mobile);
5
+ z-index: 5;
6
+ z-index: var(--content-z-index, 5);
7
+ overflow: var(--content-box-overflow);
8
+ min-width: -moz-min-content;
9
+ min-width: min-content;
10
+ aspect-ratio: var(--content-box-aspect-ratio);
11
+ border-radius: var(--border-radius);
12
+ border-width: var(--border-width);
13
+ border-color: var(--border-colour);
14
+ border-style: var(--border-style);
15
+ display: flex;
16
+ flex-direction: column;
17
+ flex-direction: var(--content-box-items-direction-mobile, column);
18
+ justify-content: var(--content-items-alignment-mobile);
19
+ align-items: center;
20
+ background-color: var(--cb-bg-colour);
21
+ padding: calc(var(--global-inline-spacing) * var(--content-box-top-padding-mult-mobile)) calc(var(--global-inline-spacing) * var(--content-box-right-padding-mult-mobile)) calc(var(--global-inline-spacing) * var(--content-box-bottom-padding-mult-mobile)) calc(var(--global-inline-spacing) * var(--content-box-left-padding-mult-mobile));
22
+ margin: calc(var(--global-inline-spacing) * var(--content-box-top-margin-mobile)) calc(var(--global-inline-spacing) * var(--content-box-right-margin-mobile)) calc(var(--global-inline-spacing) * var(--content-box-bottom-margin-mobile)) calc(var(--global-inline-spacing) * var(--content-box-left-margin-mobile));
23
+ -moz-column-gap: var(--content-items-micro-gap-mobile, calc(var(--content-items-gap-mobile) * var(--global-inline-spacing)));
24
+ column-gap: var(--content-items-micro-gap-mobile, calc(var(--content-items-gap-mobile) * var(--global-inline-spacing)));
25
+ }
26
+ @media screen and (min-width: 768px) {
27
+ .accordion-v3__inner-container {
28
+ justify-content: var(--content-items-alignment-portrait);
29
+ place-self: var(--content-box-vert-align-portrait) var(--content-box-horiz-align-portrait);
30
+ padding: calc(var(--global-inline-spacing) * var(--content-box-top-padding-mult-portrait)) calc(var(--global-inline-spacing) * var(--content-box-right-padding-mult-portrait)) calc(var(--global-inline-spacing) * var(--content-box-bottom-padding-mult-portrait)) calc(var(--global-inline-spacing) * var(--content-box-left-padding-mult-portrait));
31
+ margin: calc(var(--global-inline-spacing) * var(--content-box-top-margin-portrait)) calc(var(--global-inline-spacing) * var(--content-box-right-margin-portrait)) calc(var(--global-inline-spacing) * var(--content-box-bottom-margin-portrait)) calc(var(--global-inline-spacing) * var(--content-box-left-margin-portrait));
32
+ }
33
+ }
34
+ @media screen and (min-width: 1024px) {
35
+ .accordion-v3__inner-container {
36
+ -moz-column-gap: var(--content-items-micro-gap-desktop, calc(var(--content-items-gap-desktop) * var(--global-inline-spacing)));
37
+ column-gap: var(--content-items-micro-gap-desktop, calc(var(--content-items-gap-desktop) * var(--global-inline-spacing)));
38
+ justify-content: var(--content-items-alignment);
39
+ max-width: var(--cb-max-width);
40
+ place-self: var(--content-box-vert-align) var(--content-box-horiz-align);
41
+ padding: calc(var(--global-inline-spacing) * var(--content-box-top-padding-mult)) calc(var(--global-inline-spacing) * var(--content-box-right-padding-mult)) calc(var(--global-inline-spacing) * var(--content-box-bottom-padding-mult)) calc(var(--global-inline-spacing) * var(--content-box-left-padding-mult));
42
+ margin: calc(var(--global-inline-spacing) * var(--content-box-top-margin)) calc(var(--global-inline-spacing) * var(--content-box-right-margin)) calc(var(--global-inline-spacing) * var(--content-box-bottom-margin)) calc(var(--global-inline-spacing) * var(--content-box-left-margin));
43
+ }
35
44
  }
36
- }
37
- @media screen and (min-width: 1024px) {
38
45
  .accordion-v3__inner-container {
39
- -moz-column-gap: var(--content-items-micro-gap-desktop, calc(var(--content-items-gap-desktop) * var(--global-inline-spacing)));
40
- column-gap: var(--content-items-micro-gap-desktop, calc(var(--content-items-gap-desktop) * var(--global-inline-spacing)));
41
- justify-content: var(--content-items-alignment);
42
- max-width: var(--cb-max-width);
43
- align-self: var(--content-box-vert-align);
44
- justify-self: var(--content-box-horiz-align);
45
- place-self: var(--content-box-vert-align) var(--content-box-horiz-align);
46
- padding: calc(var(--global-inline-spacing) * var(--content-box-top-padding-mult)) calc(var(--global-inline-spacing) * var(--content-box-right-padding-mult)) calc(var(--global-inline-spacing) * var(--content-box-bottom-padding-mult)) calc(var(--global-inline-spacing) * var(--content-box-left-padding-mult));
47
- margin: calc(var(--global-inline-spacing) * var(--content-box-top-margin)) calc(var(--global-inline-spacing) * var(--content-box-right-margin)) calc(var(--global-inline-spacing) * var(--content-box-bottom-margin)) calc(var(--global-inline-spacing) * var(--content-box-left-margin));
46
+ box-shadow: calc(var(--box-shadow-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-colour);
48
47
  }
49
- }
50
- .accordion-v3__inner-container {
51
- box-shadow: calc(var(--box-shadow-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-colour);
52
- }
53
- .accordion-v3__content-box,
54
- .accordion-v3__content-container {
55
- max-width: var(--wysiwyg-max-width-mobile);
56
- margin-left: auto;
57
- margin-right: auto;
58
- display: grid;
59
- word-break: normal;
60
- width: 100%;
61
- width: var(--content-box-width, 100%);
62
- -webkit-text-stroke: calc(var(--text-stroke-width) / var(--desktop-design-reference) * var(--screen-width-static) * var(--font-size-multiplier)) var(--text-stroke-colour);
63
- }
64
- .accordion-v3__content-box:last-child,
65
- .accordion-v3__content-container:last-child {
66
- margin-bottom: 0;
67
- }
68
- .accordion-v3__content-box,
69
- .accordion-v3__content-container {
70
- color: var(--default-text-colour-mobile, var(--theme-primary-text-colour));
71
- }
72
- @media screen and (min-width: 768px) {
73
48
  .accordion-v3__content-box,
74
49
  .accordion-v3__content-container {
75
- color: var(--default-text-colour-portrait, var(--default-text-colour-desktop));
50
+ max-width: var(--wysiwyg-max-width-mobile);
51
+ margin-inline: auto;
52
+ display: grid;
53
+ word-break: normal;
54
+ width: 100%;
55
+ width: var(--content-box-width, 100%);
56
+ -webkit-text-stroke: calc(var(--text-stroke-width) / var(--desktop-design-reference) * var(--screen-width-static) * var(--font-size-multiplier)) var(--text-stroke-colour);
76
57
  }
77
- }
78
- @media screen and (min-width: 1024px) {
79
- .accordion-v3__content-box,
80
- .accordion-v3__content-container {
81
- color: var(--default-text-colour-desktop, var(--theme-primary-text-colour));
58
+ .accordion-v3__content-box:last-child,
59
+ .accordion-v3__content-container:last-child {
60
+ margin-bottom: 0;
82
61
  }
83
- }
84
- .accordion-v3__content-box,
85
- .accordion-v3__content-container {
86
- text-transform: var(--default-text-transform-mobile);
87
- }
88
- @media screen and (min-width: 768px) {
89
62
  .accordion-v3__content-box,
90
63
  .accordion-v3__content-container {
91
- text-transform: var(--default-text-transform-portrait, var(--default-text-transform-desktop));
64
+ color: var(--default-text-colour-mobile, var(--theme-primary-text-colour));
92
65
  }
93
- }
94
- @media screen and (min-width: 1024px) {
95
- .accordion-v3__content-box,
96
- .accordion-v3__content-container {
97
- text-transform: var(--default-text-transform-desktop);
66
+ @media screen and (min-width: 768px) {
67
+ .accordion-v3__content-box,
68
+ .accordion-v3__content-container {
69
+ color: var(--default-text-colour-portrait, var(--default-text-colour-desktop));
70
+ }
98
71
  }
99
- }
100
- .accordion-v3__content-box,
101
- .accordion-v3__content-container {
102
- text-align: var(--default-text-align-mobile);
103
- }
104
- @media screen and (min-width: 768px) {
105
- .accordion-v3__content-box,
106
- .accordion-v3__content-container {
107
- text-align: var(--default-text-align-portrait, var(--default-text-align-desktop));
72
+ @media screen and (min-width: 1024px) {
73
+ .accordion-v3__content-box,
74
+ .accordion-v3__content-container {
75
+ color: var(--default-text-colour-desktop, var(--theme-primary-text-colour));
76
+ }
108
77
  }
109
- }
110
- @media screen and (min-width: 1024px) {
111
78
  .accordion-v3__content-box,
112
79
  .accordion-v3__content-container {
113
- text-align: var(--default-text-align-desktop);
80
+ text-transform: var(--default-text-transform-mobile);
81
+ }
82
+ @media screen and (min-width: 768px) {
83
+ .accordion-v3__content-box,
84
+ .accordion-v3__content-container {
85
+ text-transform: var(--default-text-transform-portrait, var(--default-text-transform-desktop));
86
+ }
87
+ }
88
+ @media screen and (min-width: 1024px) {
89
+ .accordion-v3__content-box,
90
+ .accordion-v3__content-container {
91
+ text-transform: var(--default-text-transform-desktop);
92
+ }
114
93
  }
115
- }
116
- .accordion-v3__content-box,
117
- .accordion-v3__content-container {
118
- display: block;
119
- display: var(--display-mobile, block);
120
- }
121
- @media screen and (min-width: 768px) {
122
94
  .accordion-v3__content-box,
123
95
  .accordion-v3__content-container {
124
- display: block;
125
- display: var(--display-portrait, block);
96
+ text-align: var(--default-text-align-mobile);
97
+ }
98
+ @media screen and (min-width: 768px) {
99
+ .accordion-v3__content-box,
100
+ .accordion-v3__content-container {
101
+ text-align: var(--default-text-align-portrait, var(--default-text-align-desktop));
102
+ }
103
+ }
104
+ @media screen and (min-width: 1024px) {
105
+ .accordion-v3__content-box,
106
+ .accordion-v3__content-container {
107
+ text-align: var(--default-text-align-desktop);
108
+ }
126
109
  }
127
- }
128
- @media screen and (min-width: 1024px) {
129
110
  .accordion-v3__content-box,
130
111
  .accordion-v3__content-container {
131
112
  display: block;
132
- display: var(--display-desktop, block);
113
+ display: var(--display-mobile, block);
133
114
  }
134
- }
135
- .accordion-v3__content-box p,
136
- .accordion-v3__content-box h1,
137
- .accordion-v3__content-box h2,
138
- .accordion-v3__content-box h3,
139
- .accordion-v3__content-box h4,
140
- .accordion-v3__content-box h5,
141
- .accordion-v3__content-box h6,
142
- .accordion-v3__content-box a,
143
- .accordion-v3__content-box li,
144
- .accordion-v3__content-box div,
145
- .accordion-v3__content-container p,
146
- .accordion-v3__content-container h1,
147
- .accordion-v3__content-container h2,
148
- .accordion-v3__content-container h3,
149
- .accordion-v3__content-container h4,
150
- .accordion-v3__content-container h5,
151
- .accordion-v3__content-container h6,
152
- .accordion-v3__content-container a,
153
- .accordion-v3__content-container li,
154
- .accordion-v3__content-container div {
155
- font-weight: var(--default-font-weight-mobile, var(--default-font-weight));
156
- }
157
- @media screen and (min-width: 768px) {
158
- .accordion-v3__content-box p,
159
- .accordion-v3__content-box h1,
160
- .accordion-v3__content-box h2,
161
- .accordion-v3__content-box h3,
162
- .accordion-v3__content-box h4,
163
- .accordion-v3__content-box h5,
164
- .accordion-v3__content-box h6,
165
- .accordion-v3__content-box a,
166
- .accordion-v3__content-box li,
167
- .accordion-v3__content-box div,
168
- .accordion-v3__content-container p,
169
- .accordion-v3__content-container h1,
170
- .accordion-v3__content-container h2,
171
- .accordion-v3__content-container h3,
172
- .accordion-v3__content-container h4,
173
- .accordion-v3__content-container h5,
174
- .accordion-v3__content-container h6,
175
- .accordion-v3__content-container a,
176
- .accordion-v3__content-container li,
177
- .accordion-v3__content-container div {
178
- font-weight: var(--default-font-weight-portrait, var(--default-font-weight));
115
+ @media screen and (min-width: 768px) {
116
+ .accordion-v3__content-box,
117
+ .accordion-v3__content-container {
118
+ display: block;
119
+ display: var(--display-portrait, block);
120
+ }
179
121
  }
180
- }
181
- @media screen and (min-width: 1024px) {
182
- .accordion-v3__content-box p,
183
- .accordion-v3__content-box h1,
184
- .accordion-v3__content-box h2,
185
- .accordion-v3__content-box h3,
186
- .accordion-v3__content-box h4,
187
- .accordion-v3__content-box h5,
188
- .accordion-v3__content-box h6,
189
- .accordion-v3__content-box a,
190
- .accordion-v3__content-box li,
191
- .accordion-v3__content-box div,
192
- .accordion-v3__content-container p,
193
- .accordion-v3__content-container h1,
194
- .accordion-v3__content-container h2,
195
- .accordion-v3__content-container h3,
196
- .accordion-v3__content-container h4,
197
- .accordion-v3__content-container h5,
198
- .accordion-v3__content-container h6,
199
- .accordion-v3__content-container a,
200
- .accordion-v3__content-container li,
201
- .accordion-v3__content-container div {
202
- font-weight: var(--default-font-weight-desktop, var(--default-font-weight));
122
+ @media screen and (min-width: 1024px) {
123
+ .accordion-v3__content-box,
124
+ .accordion-v3__content-container {
125
+ display: block;
126
+ display: var(--display-desktop, block);
127
+ }
203
128
  }
204
- }
205
- .accordion-v3__content-box p,
206
- .accordion-v3__content-box h1,
207
- .accordion-v3__content-box h2,
208
- .accordion-v3__content-box h3,
209
- .accordion-v3__content-box h4,
210
- .accordion-v3__content-box h5,
211
- .accordion-v3__content-box h6,
212
- .accordion-v3__content-box a,
213
- .accordion-v3__content-box li,
214
- .accordion-v3__content-box div,
215
- .accordion-v3__content-container p,
216
- .accordion-v3__content-container h1,
217
- .accordion-v3__content-container h2,
218
- .accordion-v3__content-container h3,
219
- .accordion-v3__content-container h4,
220
- .accordion-v3__content-container h5,
221
- .accordion-v3__content-container h6,
222
- .accordion-v3__content-container a,
223
- .accordion-v3__content-container li,
224
- .accordion-v3__content-container div {
225
- font-style: var(--default-font-style-mobile);
226
- }
227
- @media screen and (min-width: 768px) {
228
129
  .accordion-v3__content-box p,
229
130
  .accordion-v3__content-box h1,
230
131
  .accordion-v3__content-box h2,
@@ -245,10 +146,56 @@
245
146
  .accordion-v3__content-container a,
246
147
  .accordion-v3__content-container li,
247
148
  .accordion-v3__content-container div {
248
- font-style: var(--default-font-style-portrait, var(--default-font-style-desktop));
149
+ font-weight: var(--default-font-weight-mobile, var(--default-font-weight));
150
+ }
151
+ @media screen and (min-width: 768px) {
152
+ .accordion-v3__content-box p,
153
+ .accordion-v3__content-box h1,
154
+ .accordion-v3__content-box h2,
155
+ .accordion-v3__content-box h3,
156
+ .accordion-v3__content-box h4,
157
+ .accordion-v3__content-box h5,
158
+ .accordion-v3__content-box h6,
159
+ .accordion-v3__content-box a,
160
+ .accordion-v3__content-box li,
161
+ .accordion-v3__content-box div,
162
+ .accordion-v3__content-container p,
163
+ .accordion-v3__content-container h1,
164
+ .accordion-v3__content-container h2,
165
+ .accordion-v3__content-container h3,
166
+ .accordion-v3__content-container h4,
167
+ .accordion-v3__content-container h5,
168
+ .accordion-v3__content-container h6,
169
+ .accordion-v3__content-container a,
170
+ .accordion-v3__content-container li,
171
+ .accordion-v3__content-container div {
172
+ font-weight: var(--default-font-weight-portrait, var(--default-font-weight));
173
+ }
174
+ }
175
+ @media screen and (min-width: 1024px) {
176
+ .accordion-v3__content-box p,
177
+ .accordion-v3__content-box h1,
178
+ .accordion-v3__content-box h2,
179
+ .accordion-v3__content-box h3,
180
+ .accordion-v3__content-box h4,
181
+ .accordion-v3__content-box h5,
182
+ .accordion-v3__content-box h6,
183
+ .accordion-v3__content-box a,
184
+ .accordion-v3__content-box li,
185
+ .accordion-v3__content-box div,
186
+ .accordion-v3__content-container p,
187
+ .accordion-v3__content-container h1,
188
+ .accordion-v3__content-container h2,
189
+ .accordion-v3__content-container h3,
190
+ .accordion-v3__content-container h4,
191
+ .accordion-v3__content-container h5,
192
+ .accordion-v3__content-container h6,
193
+ .accordion-v3__content-container a,
194
+ .accordion-v3__content-container li,
195
+ .accordion-v3__content-container div {
196
+ font-weight: var(--default-font-weight-desktop, var(--default-font-weight));
197
+ }
249
198
  }
250
- }
251
- @media screen and (min-width: 1024px) {
252
199
  .accordion-v3__content-box p,
253
200
  .accordion-v3__content-box h1,
254
201
  .accordion-v3__content-box h2,
@@ -269,206 +216,249 @@
269
216
  .accordion-v3__content-container a,
270
217
  .accordion-v3__content-container li,
271
218
  .accordion-v3__content-container div {
272
- font-style: var(--default-font-style-desktop);
219
+ font-style: var(--default-font-style-mobile);
273
220
  }
274
- }
275
- @media screen and (min-width: 768px) {
276
- .accordion-v3__content-box,
277
- .accordion-v3__content-container {
278
- max-width: var(--wysiwyg-max-width-portrait);
221
+ @media screen and (min-width: 768px) {
222
+ .accordion-v3__content-box p,
223
+ .accordion-v3__content-box h1,
224
+ .accordion-v3__content-box h2,
225
+ .accordion-v3__content-box h3,
226
+ .accordion-v3__content-box h4,
227
+ .accordion-v3__content-box h5,
228
+ .accordion-v3__content-box h6,
229
+ .accordion-v3__content-box a,
230
+ .accordion-v3__content-box li,
231
+ .accordion-v3__content-box div,
232
+ .accordion-v3__content-container p,
233
+ .accordion-v3__content-container h1,
234
+ .accordion-v3__content-container h2,
235
+ .accordion-v3__content-container h3,
236
+ .accordion-v3__content-container h4,
237
+ .accordion-v3__content-container h5,
238
+ .accordion-v3__content-container h6,
239
+ .accordion-v3__content-container a,
240
+ .accordion-v3__content-container li,
241
+ .accordion-v3__content-container div {
242
+ font-style: var(--default-font-style-portrait, var(--default-font-style-desktop));
243
+ }
279
244
  }
280
- }
281
- @media screen and (min-width: 1024px) {
282
- .accordion-v3__content-box,
283
- .accordion-v3__content-container {
284
- max-width: var(--wysiwyg-max-width);
245
+ @media screen and (min-width: 1024px) {
246
+ .accordion-v3__content-box p,
247
+ .accordion-v3__content-box h1,
248
+ .accordion-v3__content-box h2,
249
+ .accordion-v3__content-box h3,
250
+ .accordion-v3__content-box h4,
251
+ .accordion-v3__content-box h5,
252
+ .accordion-v3__content-box h6,
253
+ .accordion-v3__content-box a,
254
+ .accordion-v3__content-box li,
255
+ .accordion-v3__content-box div,
256
+ .accordion-v3__content-container p,
257
+ .accordion-v3__content-container h1,
258
+ .accordion-v3__content-container h2,
259
+ .accordion-v3__content-container h3,
260
+ .accordion-v3__content-container h4,
261
+ .accordion-v3__content-container h5,
262
+ .accordion-v3__content-container h6,
263
+ .accordion-v3__content-container a,
264
+ .accordion-v3__content-container li,
265
+ .accordion-v3__content-container div {
266
+ font-style: var(--default-font-style-desktop);
267
+ }
285
268
  }
286
- }
287
- .accordion-v3--text-shadow {
288
- text-shadow: calc(var(--text-shadow-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--text-shadow-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--text-shadow-blur) / var(--desktop-design-reference) * var(--screen-width-static)) var(--text-shadow-colour);
289
- }
290
- .accordion-v3__cta-selection-container {
291
- width: 100%;
292
- display: var(--cta-container-display);
293
- grid-template-columns: var(--grid-columns-mobile);
294
- flex-wrap: wrap;
295
- flex-direction: var(--cta-flex-direction);
296
- justify-content: var(--cta-alignment-mobile);
297
- gap: calc(var(--global-inline-spacing) * var(--cta-spacing-gap-mobile));
298
- }
299
- @media screen and (min-width: 768px) {
300
- .accordion-v3__cta-selection-container {
301
- gap: calc(var(--global-inline-spacing) * var(--cta-spacing-gap-desktop));
302
- justify-content: var(--cta-alignment-portrait);
303
- grid-template-columns: var(--grid-columns-portrait);
269
+ @media screen and (min-width: 768px) {
270
+ .accordion-v3__content-box,
271
+ .accordion-v3__content-container {
272
+ max-width: var(--wysiwyg-max-width-portrait);
273
+ }
274
+ }
275
+ @media screen and (min-width: 1024px) {
276
+ .accordion-v3__content-box,
277
+ .accordion-v3__content-container {
278
+ max-width: var(--wysiwyg-max-width);
279
+ }
280
+ }
281
+ .accordion-v3--text-shadow {
282
+ text-shadow: calc(var(--text-shadow-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--text-shadow-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--text-shadow-blur) / var(--desktop-design-reference) * var(--screen-width-static)) var(--text-shadow-colour);
304
283
  }
305
- }
306
- @media screen and (min-width: 1024px) {
307
284
  .accordion-v3__cta-selection-container {
308
- justify-content: var(--cta-alignment);
309
- grid-template-columns: var(--grid-columns-desktop);
285
+ width: 100%;
286
+ display: var(--cta-container-display);
287
+ grid-template-columns: var(--grid-columns-mobile);
288
+ flex-wrap: wrap;
289
+ flex-direction: var(--cta-flex-direction);
290
+ justify-content: var(--cta-alignment-mobile);
291
+ gap: calc(var(--global-inline-spacing) * var(--cta-spacing-gap-mobile));
310
292
  }
311
- }
312
- .accordion-v3 {
313
- width: 100%;
314
- pointer-events: all;
315
- display: flex;
316
- flex-direction: column;
317
- gap: calc(var(--title-gap) / var(--design-reference) * var(--screen-width));
318
- }
319
- @media screen and (min-width: 768px) {
320
- .accordion-v3 {
321
- gap: calc(var(--title-gap) / var(--design-reference) * var(--screen-width));
293
+ @media screen and (min-width: 768px) {
294
+ .accordion-v3__cta-selection-container {
295
+ gap: calc(var(--global-inline-spacing) * var(--cta-spacing-gap-desktop));
296
+ justify-content: var(--cta-alignment-portrait);
297
+ grid-template-columns: var(--grid-columns-portrait);
298
+ }
299
+ }
300
+ @media screen and (min-width: 1024px) {
301
+ .accordion-v3__cta-selection-container {
302
+ justify-content: var(--cta-alignment);
303
+ grid-template-columns: var(--grid-columns-desktop);
304
+ }
322
305
  }
323
- }
324
- @media screen and (min-width: 1024px) {
325
306
  .accordion-v3 {
307
+ width: 100%;
308
+ pointer-events: all;
309
+ display: flex;
310
+ flex-direction: column;
326
311
  gap: calc(var(--title-gap) / var(--design-reference) * var(--screen-width));
327
312
  }
328
- }
329
- .accordion-v3-wrapper {
330
- text-align: left;
331
- text-align: initial;
332
- background: var(--background-color);
333
- }
334
- .accordion-v3-question-wrapper {
335
- cursor: pointer;
336
- align-items: flex-start;
337
- justify-items: flex-start;
338
- place-items: flex-start;
339
- }
340
- .accordion-v3-question-wrapper button {
341
- width: 100%;
342
- align-items: center;
343
- cursor: pointer;
344
- background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
345
- background: initial;
346
- padding: 0;
347
- padding: initial;
348
- border: medium none currentcolor;
349
- border: initial;
350
- }
351
- .accordion-v3__content-container {
352
- padding: calc(10 / var(--desktop-design-reference) * var(--screen-width-static)) calc(50 / var(--desktop-design-reference) * var(--screen-width-static)) calc(10 / var(--desktop-design-reference) * var(--screen-width-static)) 0;
353
- }
354
- .accordion-v3-image-wrapper {
355
- grid-area: icon;
356
- position: absolute;
357
- right: calc(2 / var(--desktop-design-reference) * var(--screen-width-static));
358
- width: calc(var(--image-icon-size) / var(--design-reference) * var(--screen-width));
359
- }
360
- @media screen and (min-width: 768px) {
361
- .accordion-v3-image-wrapper {
362
- width: calc(var(--image-icon-size) / var(--design-reference) * var(--screen-width));
313
+ @media screen and (min-width: 768px) {
314
+ .accordion-v3 {
315
+ gap: calc(var(--title-gap) / var(--design-reference) * var(--screen-width));
316
+ }
317
+ }
318
+ @media screen and (min-width: 1024px) {
319
+ .accordion-v3 {
320
+ gap: calc(var(--title-gap) / var(--design-reference) * var(--screen-width));
321
+ }
322
+ }
323
+ .accordion-v3-wrapper {
324
+ text-align: left;
325
+ text-align: initial;
326
+ background: var(--background-color);
327
+ }
328
+ .accordion-v3-question-wrapper {
329
+ cursor: pointer;
330
+ place-items: flex-start;
331
+ }
332
+ .accordion-v3-question-wrapper button {
333
+ width: 100%;
334
+ align-items: center;
335
+ cursor: pointer;
336
+ background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
337
+ background: initial;
338
+ padding: 0;
339
+ padding: initial;
340
+ border: medium none currentcolor;
341
+ border: initial;
342
+ }
343
+ .accordion-v3__content-container {
344
+ padding: calc(10 / var(--desktop-design-reference) * var(--screen-width-static)) calc(50 / var(--desktop-design-reference) * var(--screen-width-static)) calc(10 / var(--desktop-design-reference) * var(--screen-width-static)) 0;
363
345
  }
364
- }
365
- @media screen and (min-width: 1024px) {
366
346
  .accordion-v3-image-wrapper {
347
+ grid-area: icon;
348
+ position: absolute;
349
+ right: calc(2 / var(--desktop-design-reference) * var(--screen-width-static));
367
350
  width: calc(var(--image-icon-size) / var(--design-reference) * var(--screen-width));
368
351
  }
369
- }
370
- .accordion-v3-image-wrapper img {
371
- width: 100%;
372
- }
373
- .accordion-v3-question {
374
- text-align: left;
375
- display: grid;
376
- grid-template: "question icon" "answer ..."/auto min-content;
377
- }
378
- .accordion-v3-question--icon-left {
379
- grid-template: "icon question" "... answer"/min-content auto;
380
- -moz-column-gap: calc(20 / var(--desktop-design-reference) * var(--screen-width-static));
381
- column-gap: calc(20 / var(--desktop-design-reference) * var(--screen-width-static));
382
- }
383
- .accordion-v3-answer-wrapper {
384
- overflow: hidden;
385
- height: 0;
386
- grid-area: answer;
387
- }
388
- .accordion-v3-answer-wrapper p {
389
- padding-left: calc(var(--text-padding-horizontal) / var(--design-reference) * var(--screen-width));
390
- padding-right: calc(var(--text-padding-horizontal) / var(--design-reference) * var(--screen-width));
391
- }
392
- @media screen and (min-width: 768px) {
393
- .accordion-v3-answer-wrapper p {
394
- padding-left: calc(var(--text-padding-horizontal) / var(--design-reference) * var(--screen-width));
395
- padding-right: calc(var(--text-padding-horizontal) / var(--design-reference) * var(--screen-width));
352
+ @media screen and (min-width: 768px) {
353
+ .accordion-v3-image-wrapper {
354
+ width: calc(var(--image-icon-size) / var(--design-reference) * var(--screen-width));
355
+ }
356
+ }
357
+ @media screen and (min-width: 1024px) {
358
+ .accordion-v3-image-wrapper {
359
+ width: calc(var(--image-icon-size) / var(--design-reference) * var(--screen-width));
360
+ }
361
+ }
362
+ .accordion-v3-image-wrapper img {
363
+ width: 100%;
364
+ }
365
+ .accordion-v3-question {
366
+ text-align: left;
367
+ display: grid;
368
+ grid-template: "question icon" "answer ..."/auto min-content;
369
+ }
370
+ .accordion-v3-question--icon-left {
371
+ grid-template: "icon question" "... answer"/min-content auto;
372
+ -moz-column-gap: calc(20 / var(--desktop-design-reference) * var(--screen-width-static));
373
+ column-gap: calc(20 / var(--desktop-design-reference) * var(--screen-width-static));
374
+ }
375
+ .accordion-v3-answer-wrapper {
376
+ overflow: hidden;
377
+ height: 0;
378
+ grid-area: answer;
396
379
  }
397
- }
398
- @media screen and (min-width: 1024px) {
399
380
  .accordion-v3-answer-wrapper p {
400
- padding-left: calc(var(--text-padding-horizontal) / var(--design-reference) * var(--screen-width));
401
- padding-right: calc(var(--text-padding-horizontal) / var(--design-reference) * var(--screen-width));
381
+ padding-inline: calc(var(--text-padding-horizontal) / var(--design-reference) * var(--screen-width));
402
382
  }
403
- }
404
- .accordion-v3-answer {
405
- font-size: calc(22 / var(--desktop-design-reference) * var(--screen-width-static) * var(--font-size-multiplier));
406
- grid-column: 1/-1;
407
- padding-bottom: calc(20 / var(--design-reference) * var(--screen-width));
408
- padding-top: calc(20 / var(--design-reference) * var(--screen-width));
409
- }
410
- @media screen and (min-width: 768px) {
411
- .accordion-v3-answer {
412
- padding-bottom: calc(20 / var(--design-reference) * var(--screen-width));
413
- padding-top: calc(20 / var(--design-reference) * var(--screen-width));
383
+ @media screen and (min-width: 768px) {
384
+ .accordion-v3-answer-wrapper p {
385
+ padding-inline: calc(var(--text-padding-horizontal) / var(--design-reference) * var(--screen-width));
386
+ }
387
+ }
388
+ @media screen and (min-width: 1024px) {
389
+ .accordion-v3-answer-wrapper p {
390
+ padding-inline: calc(var(--text-padding-horizontal) / var(--design-reference) * var(--screen-width));
391
+ }
414
392
  }
415
- }
416
- @media screen and (min-width: 1024px) {
417
393
  .accordion-v3-answer {
394
+ font-size: calc(22 / var(--desktop-design-reference) * var(--screen-width-static) * var(--font-size-multiplier));
395
+ grid-column: 1/-1;
418
396
  padding-bottom: calc(20 / var(--design-reference) * var(--screen-width));
419
397
  padding-top: calc(20 / var(--design-reference) * var(--screen-width));
420
398
  }
421
- }
422
- .accordion-v3-answer:last-child {
423
- padding-bottom: 0;
424
- }
425
- .accordion-v3-icon {
426
- grid-area: icon;
427
- background: var(--icon-background-color);
428
- display: flex;
429
- align-items: center;
430
- height: calc(50 / var(--desktop-design-reference) * var(--screen-width-static));
431
- width: calc(50 / var(--desktop-design-reference) * var(--screen-width-static));
432
- }
433
- .accordion-v3-icon.active .accordion-v3-animation:before {
434
- transform: rotate(90deg);
435
- }
436
- .accordion-v3-icon.active .accordion-v3-animation:after {
437
- transform: rotate(180deg);
438
- }
439
- .accordion-v3 .image-icon-active {
440
- transform: rotate(var(--image-icon-rotation-deg));
441
- transition: transform 0.3s ease;
442
- }
443
- .accordion-v3 :not(.image-icon-active):not(.lottie-animations *) {
444
- transform: rotate(0deg);
445
- transition: transform 0.3s ease;
446
- }
447
- .accordion-v3-animation {
448
- height: calc(20 / var(--desktop-design-reference) * var(--screen-width-static));
449
- margin: auto;
450
- position: relative;
451
- transition: transform 0.3s ease;
452
- width: calc(20 / var(--desktop-design-reference) * var(--screen-width-static));
453
- }
454
- .accordion-v3-animation:before,
455
- .accordion-v3-animation:after {
456
- background-color: red;
457
- content: "";
458
- position: absolute;
459
- transition: transform 0.25s ease-out;
460
- }
461
- .accordion-v3-animation:before {
462
- height: 100%;
463
- left: 50%;
464
- margin-left: -1px;
465
- top: 0;
466
- width: 2px;
467
- }
468
- .accordion-v3-animation:after {
469
- height: 2px;
470
- left: 0;
471
- margin-top: -1px;
472
- top: 50%;
473
- width: 100%;
399
+ @media screen and (min-width: 768px) {
400
+ .accordion-v3-answer {
401
+ padding-bottom: calc(20 / var(--design-reference) * var(--screen-width));
402
+ padding-top: calc(20 / var(--design-reference) * var(--screen-width));
403
+ }
404
+ }
405
+ @media screen and (min-width: 1024px) {
406
+ .accordion-v3-answer {
407
+ padding-bottom: calc(20 / var(--design-reference) * var(--screen-width));
408
+ padding-top: calc(20 / var(--design-reference) * var(--screen-width));
409
+ }
410
+ }
411
+ .accordion-v3-answer:last-child {
412
+ padding-bottom: 0;
413
+ }
414
+ .accordion-v3-icon {
415
+ grid-area: icon;
416
+ background: var(--icon-background-color);
417
+ display: flex;
418
+ align-items: center;
419
+ height: calc(50 / var(--desktop-design-reference) * var(--screen-width-static));
420
+ width: calc(50 / var(--desktop-design-reference) * var(--screen-width-static));
421
+ }
422
+ .accordion-v3-icon.active .accordion-v3-animation:before {
423
+ transform: rotate(90deg);
424
+ }
425
+ .accordion-v3-icon.active .accordion-v3-animation:after {
426
+ transform: rotate(180deg);
427
+ }
428
+ .accordion-v3 .image-icon-active {
429
+ transform: rotate(var(--image-icon-rotation-deg));
430
+ transition: transform 0.3s ease;
431
+ }
432
+ .accordion-v3 :not(.image-icon-active, .lottie-animations *) {
433
+ transform: rotate(0deg);
434
+ transition: transform 0.3s ease;
435
+ }
436
+ .accordion-v3-animation {
437
+ height: calc(20 / var(--desktop-design-reference) * var(--screen-width-static));
438
+ margin: auto;
439
+ position: relative;
440
+ transition: transform 0.3s ease;
441
+ width: calc(20 / var(--desktop-design-reference) * var(--screen-width-static));
442
+ }
443
+ .accordion-v3-animation:before,
444
+ .accordion-v3-animation:after {
445
+ background-color: red;
446
+ content: "";
447
+ position: absolute;
448
+ transition: transform 0.25s ease-out;
449
+ }
450
+ .accordion-v3-animation:before {
451
+ height: 100%;
452
+ left: 50%;
453
+ margin-left: -1px;
454
+ top: 0;
455
+ width: 2px;
456
+ }
457
+ .accordion-v3-animation:after {
458
+ height: 2px;
459
+ left: 0;
460
+ margin-top: -1px;
461
+ top: 50%;
462
+ width: 100%;
463
+ }
474
464
  }