@total_onion/onion-library 3.0.40 → 3.0.42

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