@datrix-team-product/website-ds 0.2.0 → 0.2.2

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.
@@ -1,62 +1,823 @@
1
1
  /* bricks-preview.css — PREVIEW stylesheet for markup written with REAL Bricks Global Class names.
2
2
  * Generated by scripts/build/bricks-preview.ts. Sources: data/bricks/global-classes.json (real
3
- * exports) + the site’s REAL generated ACSS stylesheet (automatic.css, captured by the crawl).
4
- * ACSS variables carry their live values; variables with no known value are UNDEFINED (never
5
- * invented). DO NOT HAND-EDIT.
3
+ * exports) + the site’s REAL ACSS (packages/tokens/src/acss-live.json snapshot of automatic.css,
4
+ * automatic-bricks.css and the inline Bricks global variables captured from the live pages).
5
+ * Sections: :root variables (live values, site overrides applied) → ACSS base (html/body/
6
+ * typography, verbatim) → ACSS utilities (bg--*, btn--*, verbatim) → Global Class rules.
7
+ * Variables with no known value are UNDEFINED (never invented). DO NOT HAND-EDIT.
6
8
  */
7
9
 
8
10
  :root {
9
11
  --accent: #d636ff;
10
- --black: #000;
12
+ --accent-b: 255;
13
+ --accent-comp: #60ff38;
14
+ --accent-comp-h: 468;
15
+ --accent-dark: #c135e3;
16
+ --accent-dark-h: 288;
17
+ --accent-dark-l: 55%;
18
+ --accent-dark-s: 76%;
19
+ --accent-g: 54;
20
+ --accent-h: 288;
21
+ --accent-hex: #d636ff;
22
+ --accent-hover: #e066ff;
23
+ --accent-hover-h: 288;
24
+ --accent-hover-l: 70%;
25
+ --accent-hover-s: 100%;
26
+ --accent-hsl: 288 100% 61%;
27
+ --accent-l: 61%;
28
+ --accent-light: #f0b3ff;
29
+ --accent-light-h: 288;
30
+ --accent-light-l: 85%;
31
+ --accent-light-s: 100%;
32
+ --accent-medium: #c0f;
33
+ --accent-medium-h: 288;
34
+ --accent-medium-l: 50%;
35
+ --accent-medium-s: 100%;
36
+ --accent-r: 214;
37
+ --accent-rgb: 214 54 255;
38
+ --accent-s: 100%;
39
+ --accent-semi-dark: #8f00b3;
40
+ --accent-semi-dark-h: 288;
41
+ --accent-semi-dark-l: 35%;
42
+ --accent-semi-dark-s: 100%;
43
+ --accent-semi-light: #db4dff;
44
+ --accent-semi-light-h: 288;
45
+ --accent-semi-light-l: 65%;
46
+ --accent-semi-light-s: 100%;
47
+ --accent-ultra-dark: #290033;
48
+ --accent-ultra-dark-h: 288;
49
+ --accent-ultra-dark-l: 10%;
50
+ --accent-ultra-dark-s: 100%;
51
+ --accent-ultra-light: #fae6ff;
52
+ --accent-ultra-light-h: 288;
53
+ --accent-ultra-light-l: 95%;
54
+ --accent-ultra-light-s: 100%;
55
+ --admin-bar-height: var(--wp-admin--admin-bar--height, 0px);
56
+ --auto-grid-aggressiveness: 0.7;
57
+ --base-heading-lh: calc(1.2);
58
+ --base-text-lh: 1.2;
59
+ --bg-dark: var(--primary);
60
+ --bg-dark-button: unset;
61
+ --bg-dark-heading: var(--white);
62
+ --bg-dark-link: var(--white);
63
+ --bg-dark-link-hover: var(--white);
64
+ --bg-dark-text: var(--white);
65
+ --bg-light: var(--neutral-ultra-light);
66
+ --bg-light-button: primary;
67
+ --bg-light-heading: var(--text-dark);
68
+ --bg-light-link: var(--primary);
69
+ --bg-light-link-hover: var(--primary-hover);
70
+ --bg-light-text: var(--text-dark);
71
+ --bg-ultra-dark: var(--primary-dark);
72
+ --bg-ultra-dark-button: accent;
73
+ --bg-ultra-dark-heading: var(--text-light);
74
+ --bg-ultra-dark-link: var(--white);
75
+ --bg-ultra-dark-link-hover: var(--primary-hover);
76
+ --bg-ultra-dark-text: var(--white);
77
+ --bg-ultra-light: var(--shade-ultra-light);
78
+ --bg-ultra-light-button: primary;
79
+ --bg-ultra-light-heading: var(--text-dark);
80
+ --bg-ultra-light-link: var(--primary);
81
+ --bg-ultra-light-link-hover: var(--primary-hover);
82
+ --bg-ultra-light-text: var(--text-dark);
83
+ --black: #0f0f0f;
84
+ --black-trans-10: rgba(0, 0, 0, 0.1);
85
+ --black-trans-20: rgba(0, 0, 0, 0.2);
11
86
  --black-trans-30: rgba(0, 0, 0, 0.3);
87
+ --black-trans-40: rgba(0, 0, 0, 0.4);
88
+ --black-trans-50: rgba(0, 0, 0, 0.5);
89
+ --black-trans-60: rgba(0, 0, 0, 0.6);
90
+ --black-trans-70: rgba(0, 0, 0, 0.7);
91
+ --black-trans-80: rgba(0, 0, 0, 0.8);
92
+ --black-trans-90: rgba(0, 0, 0, 0.9);
93
+ --blockquote-spacing: var(--paragraph-spacing);
94
+ --body-bg-color: var(--pure-white);
95
+ --body-color: var(--neutral-dark);
96
+ --border: var(--border-size) var(--border-style) var(--border-color-dark);
97
+ --border-color-dark: var(--black-trans-20);
98
+ --border-color-light: var(--white-trans-20);
99
+ --border-dark: var(--border-size) var(--border-style) var(--border-color-dark);
100
+ --border-light: var(--border-size) var(--border-style) var(--border-color-light);
101
+ --border-size: 1px;
102
+ --border-style: solid;
103
+ --border-width: 1px;
104
+ --box-shadow-1: 0 10px 10px 0 rgba(0, 0, 0, 0.1);
105
+ --box-shadow-2: 0 2.7px 3.6px -5px rgba(0, 0, 0, 0.04), 0 7.5px 10px -5px rgba(0, 0, 0, 0.06), 0 18px 24.1px -5px rgba(0, 0, 0, 0.08), 0 60px 80px -5px rgba(0, 0, 0, 0.1);
106
+ --box-shadow-3: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02), 0 6.7px 5.3px -5px rgba(0, 0, 0, 0.04), 0 12.5px 10px -5px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px -5px rgba(0, 0, 0, 0.08), 0 41.8px 33.4px -5px rgba(0, 0, 0, 0.1), 0 80px 80px -5px rgba(0, 0, 0, 0.105);
107
+ --box-shadow-l: 0 2.7px 3.6px -5px rgba(0, 0, 0, 0.04), 0 7.5px 10px -5px rgba(0, 0, 0, 0.06), 0 18px 24.1px -5px rgba(0, 0, 0, 0.08), 0 60px 80px -5px rgba(0, 0, 0, 0.1);
108
+ --box-shadow-m: 0 10px 10px 0 rgba(0, 0, 0, 0.1);
109
+ --box-shadow-xl: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02), 0 6.7px 5.3px -5px rgba(0, 0, 0, 0.04), 0 12.5px 10px -5px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px -5px rgba(0, 0, 0, 0.08), 0 41.8px 33.4px -5px rgba(0, 0, 0, 0.1), 0 80px 80px -5px rgba(0, 0, 0, 0.105);
110
+ --btn-border-radius: 50vw;
111
+ --btn-border-size: 0.1rem;
112
+ --btn-border-style: solid;
113
+ --btn-border-width: 0.1rem;
114
+ --btn-font-style: normal;
115
+ --btn-font-weight: 300;
116
+ --btn-justify-content: center;
117
+ --btn-letter-spacing: 0;
118
+ --btn-line-height: 1;
119
+ --btn-min-width: 14rem;
120
+ --btn-outline-border-width: 0.1rem;
121
+ --btn-pad-x: 1.6rem;
122
+ --btn-pad-y: 0.8rem;
123
+ --btn-padding-block: 0.8rem;
124
+ --btn-padding-inline: 1.6rem;
125
+ --btn-radius: 50vw;
126
+ --btn-text-align: center;
127
+ --btn-text-decoration: none;
128
+ --btn-text-decoration-hover: none;
129
+ --btn-text-style: normal;
130
+ --btn-text-transform: capitalize;
131
+ --btn-weight: 300;
132
+ --btn-width: 14;
133
+ --col-rule-width-l: 0.5em;
134
+ --col-rule-width-m: 0.3em;
135
+ --col-rule-width-s: 0.1em;
136
+ --col-width-l: 38rem;
137
+ --col-width-m: 25rem;
138
+ --col-width-s: 13rem;
12
139
  --container-gap: var(--space-48);
13
140
  --content-gap: var(--space-m);
141
+ --content-width: 128rem;
142
+ --content-width-safe: min(var(--content-width), calc(100% - var(--gutter) * 2));
143
+ --danger: #F87171;
144
+ --danger-b: 113;
145
+ --danger-comp: #72f8f8;
146
+ --danger-comp-h: 180;
147
+ --danger-dark: #7a0606;
148
+ --danger-dark-h: 0;
149
+ --danger-dark-l: 25%;
150
+ --danger-dark-s: 91%;
151
+ --danger-g: 113;
152
+ --danger-h: 0;
153
+ --danger-hex: #F87171;
154
+ --danger-hover: #fba7a7;
155
+ --danger-hover-h: 0;
156
+ --danger-hover-l: 82%;
157
+ --danger-hover-s: 91%;
158
+ --danger-hsl: 0 91% 71%;
159
+ --danger-l: 71%;
160
+ --danger-light: #fcb6b6;
161
+ --danger-light-h: 0;
162
+ --danger-light-l: 85%;
163
+ --danger-light-s: 91%;
164
+ --danger-medium: #f40b0b;
165
+ --danger-medium-h: 0;
166
+ --danger-medium-l: 50%;
167
+ --danger-medium-s: 91%;
168
+ --danger-r: 248;
169
+ --danger-rgb: 248 113 113;
170
+ --danger-s: 91%;
171
+ --danger-semi-dark: #aa0808;
172
+ --danger-semi-dark-h: 0;
173
+ --danger-semi-dark-l: 35%;
174
+ --danger-semi-dark-s: 91%;
175
+ --danger-semi-light: #f75555;
176
+ --danger-semi-light-h: 0;
177
+ --danger-semi-light-l: 65%;
178
+ --danger-semi-light-s: 91%;
179
+ --danger-ultra-dark: #310202;
180
+ --danger-ultra-dark-h: 0;
181
+ --danger-ultra-dark-l: 10%;
182
+ --danger-ultra-dark-s: 91%;
183
+ --danger-ultra-light: #fee7e7;
184
+ --danger-ultra-light-h: 0;
185
+ --danger-ultra-light-l: 95%;
186
+ --danger-ultra-light-s: 91%;
187
+ --divider: var(--divider-size) var(--divider-style) var(--divider-color-dark);
188
+ --divider-color-dark: var(--black-trans-20);
189
+ --divider-color-light: var(--white-trans-20);
190
+ --divider-dark: var(--divider-size) var(--divider-style) var(--divider-color-dark);
191
+ --divider-gap: var(--content-gap);
192
+ --divider-inline-size: 100%;
193
+ --divider-light: var(--divider-size) var(--divider-style) var(--divider-color-light);
194
+ --divider-size: 1px;
195
+ --divider-style: solid;
196
+ --f-btn-border-radius: var(--btn-radius);
197
+ --f-btn-border-style: solid;
198
+ --f-btn-border-width: var(--btn-border-width);
199
+ --f-btn-font-weight: 400;
200
+ --f-btn-line-height: 1;
201
+ --f-btn-margin-top: 1em;
202
+ --f-btn-padding-x: 1.5em;
203
+ --f-btn-padding-y: 0.75em;
204
+ --f-btn-text-decoration: none;
205
+ --f-btn-text-size: clamp(1.4rem, calc(0.4347826087vw + 1.2434782609rem), 1.8rem);
206
+ --f-btn-text-transform: none;
207
+ --f-field-margin-bottom: 1.5em;
208
+ --f-fieldset-margin-bottom: 1.5em;
209
+ --f-grid-gutter: 2rem;
210
+ --f-help-line-height: 1.4;
211
+ --f-help-margin-block: 0.5em 0;
212
+ --f-help-size: clamp(1.2rem, calc(0.2173913043vw + 1.1217391304rem), 1.4rem);
213
+ --f-help-text-weight: 400;
214
+ --f-input-border-bottom-size: 0.1rem;
215
+ --f-input-border-left-size: 0.1rem;
216
+ --f-input-border-radius: var(--radius-xs);
217
+ --f-input-border-right-size: 0.1rem;
218
+ --f-input-border-style: solid;
219
+ --f-input-border-top-size: 0.1rem;
220
+ --f-input-font-weight: 300;
221
+ --f-input-height: 4.8rem;
222
+ --f-input-line-height: 1;
223
+ --f-input-padding-x: 1em;
224
+ --f-input-padding-y: 0.5em;
225
+ --f-input-size: clamp(1.4rem, calc(0.4347826087vw + 1.2434782609rem), 1.8rem);
226
+ --f-label-font-weight: 300;
227
+ --f-label-inside-position-left: 1.5em;
228
+ --f-label-inside-position-top: 0;
229
+ --f-label-inside-scale: 1;
230
+ --f-label-line-height: 1;
231
+ --f-label-margin-bottom: 0.5em;
232
+ --f-label-padding-x: 0;
233
+ --f-label-padding-y: 0;
234
+ --f-label-size: clamp(1.4rem, calc(0.2173913043vw + 1.3217391304rem), 1.6rem);
235
+ --f-label-text-transform: none;
236
+ --f-legend-border: none;
237
+ --f-legend-line-height: 1.2;
238
+ --f-legend-margin-bottom: 1em;
239
+ --f-legend-size: clamp(1.4rem, calc(0.2173913043vw + 1.3217391304rem), 1.6rem);
240
+ --f-legend-text-weight: 400;
241
+ --f-option-label-font-weight: 300;
242
+ --f-option-label-line-height: 1.4;
243
+ --f-option-label-size: clamp(1.4rem, calc(0.2173913043vw + 1.3217391304rem), 1.6rem);
244
+ --f-option-label-spacing: 0.5em;
245
+ --f-progress-bar-radius: var(--btn-radius);
246
+ --f-progress-height: 3rem;
247
+ --f-tab-active-border-bottom-size: 3px;
248
+ --f-tab-active-border-size: 0;
249
+ --f-tab-active-border-style: solid;
250
+ --f-tab-active-text-weight: 600;
251
+ --f-tab-border-radius: 0;
252
+ --f-tab-border-size: 0;
253
+ --f-tab-border-style: solid;
254
+ --f-tab-group-border-bottom-size: 2px;
255
+ --f-tab-group-border-bottom-style: solid;
256
+ --f-tab-group-margin-bottom: 3rem;
257
+ --f-tab-group-padding-x: 0;
258
+ --f-tab-group-padding-y: 0;
259
+ --f-tab-margin-x: 0;
260
+ --f-tab-padding-x: 1.5em;
261
+ --f-tab-padding-y: 0.75em;
262
+ --f-tab-text-align: center;
263
+ --f-tab-text-decoration: none;
264
+ --f-tab-text-line-height: 1;
265
+ --f-tab-text-size: clamp(1.6rem, calc(0.2173913043vw + 1.5217391304rem), 1.8rem);
266
+ --f-tab-text-transform: none;
267
+ --f-tab-text-weight: 400;
268
+ --f-tab-width: auto;
269
+ --figcaption-spacing: 0.5em;
270
+ --figure-spacing: var(--paragraph-spacing);
271
+ --flow-spacing: var(--paragraph-spacing);
272
+ --focus-color: var(--danger);
273
+ --focus-offset: 0.25em;
274
+ --focus-width: 0.2rem;
275
+ --fr-bg-dark: var(--bg-dark);
276
+ --fr-bg-light: var(--bg-light);
277
+ --fr-card-avatar-radius: var(--card-avatar-radius, 50%);
278
+ --fr-card-border-color: var(--card-border-color, var(--shade-light));
279
+ --fr-card-border-size: var(--card-border-width, 0.15rem);
280
+ --fr-card-border-style: var(--card-border-style, solid);
14
281
  --fr-card-gap: var(--card-gap, var(--space-s));
282
+ --fr-card-padding: var(--card-padding, var(--space-m));
283
+ --fr-card-radius: var(--card-radius, var(--radius-xs));
284
+ --fr-container-gap: var(--space-48);
15
285
  --fr-content-gap: var(--space-m);
286
+ --fr-grid-gap: var(--space-l);
16
287
  --fr-hero-padding: var(--section-space-xl);
288
+ --fr-lede-width: 60ch;
289
+ --fr-list-pad-x: 1.25em;
290
+ --fr-list-pad-y: 0.75em;
291
+ --fr-text-dark: var(--text-dark);
292
+ --fr-text-light: var(--text-light);
17
293
  --grid-1: repeat(1, minmax(0, 1fr));
294
+ --grid-1-2: minmax(0, 1fr) minmax(0, 2fr);
18
295
  --grid-1-3: minmax(0, 1fr) minmax(0, 3fr);
296
+ --grid-10: repeat(10, minmax(0, 1fr));
297
+ --grid-11: repeat(11, minmax(0, 1fr));
298
+ --grid-12: repeat(12, minmax(0, 1fr));
19
299
  --grid-2: repeat(2, minmax(0, 1fr));
300
+ --grid-2-1: minmax(0, 2fr) minmax(0, 1fr);
20
301
  --grid-2-3: minmax(0, 2fr) minmax(0, 3fr);
302
+ --grid-3: repeat(3, minmax(0, 1fr));
303
+ --grid-3-1: minmax(0, 3fr) minmax(0, 1fr);
304
+ --grid-3-2: minmax(0, 3fr) minmax(0, 2fr);
21
305
  --grid-4: repeat(4, minmax(0, 1fr));
306
+ --grid-5: repeat(5, minmax(0, 1fr));
307
+ --grid-6: repeat(6, minmax(0, 1fr));
308
+ --grid-7: repeat(7, minmax(0, 1fr));
309
+ --grid-8: repeat(8, minmax(0, 1fr));
310
+ --grid-9: repeat(9, minmax(0, 1fr));
311
+ --grid-auto-10: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((10 - 1) * var(--grid-gap))) / 10) * 0.7, (100% - (10 - 1) * var(--grid-gap)) / 10)), 1fr));
312
+ --grid-auto-11: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((11 - 1) * var(--grid-gap))) / 11) * 0.7, (100% - (11 - 1) * var(--grid-gap)) / 11)), 1fr));
313
+ --grid-auto-12: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((12 - 1) * var(--grid-gap))) / 12) * 0.7, (100% - (12 - 1) * var(--grid-gap)) / 12)), 1fr));
314
+ --grid-auto-2: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((2 - 1) * var(--grid-gap))) / 2) * 0.7, (100% - (2 - 1) * var(--grid-gap)) / 2)), 1fr));
315
+ --grid-auto-3: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((3 - 1) * var(--grid-gap))) / 3) * 0.7, (100% - (3 - 1) * var(--grid-gap)) / 3)), 1fr));
316
+ --grid-auto-4: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((4 - 1) * var(--grid-gap))) / 4) * 0.7, (100% - (4 - 1) * var(--grid-gap)) / 4)), 1fr));
317
+ --grid-auto-5: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((5 - 1) * var(--grid-gap))) / 5) * 0.7, (100% - (5 - 1) * var(--grid-gap)) / 5)), 1fr));
318
+ --grid-auto-6: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((6 - 1) * var(--grid-gap))) / 6) * 0.7, (100% - (6 - 1) * var(--grid-gap)) / 6)), 1fr));
319
+ --grid-auto-7: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((7 - 1) * var(--grid-gap))) / 7) * 0.7, (100% - (7 - 1) * var(--grid-gap)) / 7)), 1fr));
320
+ --grid-auto-8: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((8 - 1) * var(--grid-gap))) / 8) * 0.7, (100% - (8 - 1) * var(--grid-gap)) / 8)), 1fr));
321
+ --grid-auto-9: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((9 - 1) * var(--grid-gap))) / 9) * 0.7, (100% - (9 - 1) * var(--grid-gap)) / 9)), 1fr));
22
322
  --grid-gap: var(--space-l);
23
323
  --gutter: clamp(2rem, calc(4.347826087vw + 0.4347826087rem), 6rem);
24
324
  --h1: clamp(4rem, calc(0.8695652174vw + 3.6869565217rem), 4.8rem);
325
+ --h1-font-weight: 200;
326
+ --h1-line-height: 1.2;
327
+ --h1-max-width: 100%;
25
328
  --h2: clamp(2.8rem, calc(0.8695652174vw + 2.4869565217rem), 3.6rem);
329
+ --h2-font-weight: 300;
330
+ --h2-line-height: 1.2;
331
+ --h2-max-width: 100%;
26
332
  --h3: clamp(2.2rem, calc(0.652173913vw + 1.9652173913rem), 2.8rem);
333
+ --h3-font-weight: 300;
334
+ --h3-line-height: 1.2;
335
+ --h3-max-width: 100%;
27
336
  --h4: clamp(1.8rem, calc(0.652173913vw + 1.5652173913rem), 2.4rem);
337
+ --h4-font-weight: 300;
338
+ --h4-line-height: calc(1.2);
339
+ --h4-max-width: 100%;
340
+ --h5: clamp(1.6rem, calc(0.4347826087vw + 1.4434782609rem), 2rem);
341
+ --h5-font-weight: 300;
342
+ --h5-line-height: 1.2;
343
+ --h5-max-width: 100%;
344
+ --h6: clamp(1.6rem, calc(0.4347826087vw + 1.4434782609rem), 2rem);
345
+ --h6-max-width: 100%;
346
+ --header-height: 7.2rem;
347
+ --header-height-l: 7.2rem;
348
+ --header-height-m: 7.2rem;
349
+ --header-height-s: 7.2rem;
350
+ --header-height-xl: 7.2rem;
351
+ --heading-font-weight: 300;
352
+ --heading-line-height: calc(1.2);
353
+ --heading-max-width: 100%;
354
+ --heading-spacing: 1.5em;
355
+ --heading-text-wrap: pretty;
356
+ --link-color: var(--primary);
357
+ --link-color-hover: var(--accent);
358
+ --link-decoration: underline;
359
+ --link-decoration-hover: inherit;
360
+ --link-transition: var(--transition);
361
+ --link-underline-offset: 5;
362
+ --link-weight: inherit;
363
+ --list-indent-spacing: 2em;
364
+ --list-item-spacing: 0.5em;
365
+ --list-spacing: 1em;
366
+ --nested-list-indent-spacing: 1em;
367
+ --neutral: #000000;
368
+ --neutral-b: 0;
369
+ --neutral-comp: black;
370
+ --neutral-comp-h: 180;
28
371
  --neutral-dark: #3d3d3d;
372
+ --neutral-dark-h: 0;
373
+ --neutral-dark-l: 24%;
374
+ --neutral-dark-s: 0%;
375
+ --neutral-g: 0;
376
+ --neutral-h: 0;
377
+ --neutral-hex: #000000;
378
+ --neutral-hover: black;
379
+ --neutral-hover-h: 0;
380
+ --neutral-hover-l: 0%;
381
+ --neutral-hover-s: 0%;
382
+ --neutral-hsl: 0 0% 0%;
383
+ --neutral-l: 0%;
29
384
  --neutral-light: #d6d6d6;
385
+ --neutral-light-h: 0;
386
+ --neutral-light-l: 84%;
387
+ --neutral-light-s: 0%;
388
+ --neutral-light-trans-10: rgba(214, 214, 214, 0.1);
389
+ --neutral-light-trans-20: rgba(214, 214, 214, 0.2);
390
+ --neutral-light-trans-30: rgba(214, 214, 214, 0.3);
391
+ --neutral-light-trans-40: rgba(214, 214, 214, 0.4);
392
+ --neutral-light-trans-50: rgba(214, 214, 214, 0.5);
393
+ --neutral-light-trans-60: rgba(214, 214, 214, 0.6);
394
+ --neutral-light-trans-70: rgba(214, 214, 214, 0.7);
395
+ --neutral-light-trans-80: rgba(214, 214, 214, 0.8);
396
+ --neutral-light-trans-90: rgba(214, 214, 214, 0.9);
397
+ --neutral-medium: #b3b3b3;
398
+ --neutral-medium-h: 0;
399
+ --neutral-medium-l: 70%;
400
+ --neutral-medium-s: 0%;
401
+ --neutral-r: 0;
402
+ --neutral-rgb: 0 0 0;
403
+ --neutral-s: 0%;
30
404
  --neutral-semi-dark: #636363;
405
+ --neutral-semi-dark-h: 0;
406
+ --neutral-semi-dark-l: 39%;
407
+ --neutral-semi-dark-s: 0%;
31
408
  --neutral-semi-light: #c7c7c7;
409
+ --neutral-semi-light-h: 0;
410
+ --neutral-semi-light-l: 78%;
411
+ --neutral-semi-light-s: 0%;
412
+ --neutral-trans-10: rgba(0, 0, 0, 0.1);
413
+ --neutral-trans-20: rgba(0, 0, 0, 0.2);
414
+ --neutral-trans-30: rgba(0, 0, 0, 0.3);
415
+ --neutral-trans-40: rgba(0, 0, 0, 0.4);
416
+ --neutral-trans-50: rgba(0, 0, 0, 0.5);
417
+ --neutral-trans-60: rgba(0, 0, 0, 0.6);
418
+ --neutral-trans-70: rgba(0, 0, 0, 0.7);
419
+ --neutral-trans-80: rgba(0, 0, 0, 0.8);
420
+ --neutral-trans-90: rgba(0, 0, 0, 0.9);
421
+ --neutral-ultra-dark: #363636;
422
+ --neutral-ultra-dark-h: 0;
423
+ --neutral-ultra-dark-l: 21%;
424
+ --neutral-ultra-dark-s: 0%;
425
+ --neutral-ultra-light: #ededed;
426
+ --neutral-ultra-light-h: 0;
427
+ --neutral-ultra-light-l: 93%;
428
+ --neutral-ultra-light-s: 0%;
429
+ --off: ;;
430
+ --on: initial;
431
+ --option-neutral-btn-outline: on;
432
+ --option-primary-btn-outline: on;
433
+ --option-secondary-btn-outline: on;
434
+ --outline-btn-border-size: 0.1rem;
435
+ --paragraph-spacing: 1em;
32
436
  --primary: #053fbb;
437
+ --primary-b: 187;
438
+ --primary-comp: #bd8305;
439
+ --primary-comp-h: 401;
440
+ --primary-dark: #032a7c;
441
+ --primary-dark-h: 221;
442
+ --primary-dark-l: 25%;
443
+ --primary-dark-s: 95%;
444
+ --primary-dark-trans-10: rgba(3, 42, 124, 0.1);
445
+ --primary-dark-trans-20: rgba(3, 42, 124, 0.2);
446
+ --primary-dark-trans-30: rgba(3, 42, 124, 0.3);
447
+ --primary-dark-trans-40: rgba(3, 42, 124, 0.4);
448
+ --primary-dark-trans-50: rgba(3, 42, 124, 0.5);
449
+ --primary-dark-trans-60: rgba(3, 42, 124, 0.6);
450
+ --primary-dark-trans-70: rgba(3, 42, 124, 0.7);
451
+ --primary-dark-trans-80: rgba(3, 42, 124, 0.8);
452
+ --primary-dark-trans-90: rgba(3, 42, 124, 0.9);
453
+ --primary-g: 63;
454
+ --primary-h: 221;
455
+ --primary-hex: #053fbb;
456
+ --primary-hover: #0649db;
457
+ --primary-hover-h: 221;
458
+ --primary-hover-l: 44%;
459
+ --primary-hover-s: 95%;
460
+ --primary-hsl: 221 95% 38%;
461
+ --primary-l: 38%;
462
+ --primary-light: #5187fb;
463
+ --primary-light-h: 221;
464
+ --primary-light-l: 65%;
465
+ --primary-light-s: 95%;
466
+ --primary-light-trans-10: rgba(81, 135, 251, 0.1);
467
+ --primary-light-trans-20: rgba(81, 135, 251, 0.2);
468
+ --primary-light-trans-30: rgba(81, 135, 251, 0.3);
469
+ --primary-light-trans-40: rgba(81, 135, 251, 0.4);
470
+ --primary-light-trans-50: rgba(81, 135, 251, 0.5);
471
+ --primary-light-trans-60: rgba(81, 135, 251, 0.6);
472
+ --primary-light-trans-70: rgba(81, 135, 251, 0.7);
473
+ --primary-light-trans-80: rgba(81, 135, 251, 0.8);
474
+ --primary-light-trans-90: rgba(81, 135, 251, 0.9);
475
+ --primary-medium: #0653f9;
476
+ --primary-medium-h: 221;
477
+ --primary-medium-l: 50%;
478
+ --primary-medium-s: 95%;
479
+ --primary-r: 5;
480
+ --primary-rgb: 5 63 187;
481
+ --primary-s: 95%;
482
+ --primary-semi-dark: #043aae;
483
+ --primary-semi-dark-h: 221;
484
+ --primary-semi-dark-l: 35%;
485
+ --primary-semi-dark-s: 95%;
486
+ --primary-semi-light: #5187fb;
487
+ --primary-semi-light-h: 221;
488
+ --primary-semi-light-l: 65%;
489
+ --primary-semi-light-s: 95%;
490
+ --primary-trans-10: rgba(5, 63, 187, 0.1);
491
+ --primary-trans-20: rgba(5, 63, 187, 0.2);
492
+ --primary-trans-30: rgba(5, 63, 187, 0.3);
33
493
  --primary-trans-40: rgba(5, 63, 187, 0.4);
494
+ --primary-trans-50: rgba(5, 63, 187, 0.5);
495
+ --primary-trans-60: rgba(5, 63, 187, 0.6);
496
+ --primary-trans-70: rgba(5, 63, 187, 0.7);
497
+ --primary-trans-80: rgba(5, 63, 187, 0.8);
498
+ --primary-trans-90: rgba(5, 63, 187, 0.9);
34
499
  --primary-ultra-dark: #000f5c;
500
+ --primary-ultra-dark-h: 230;
501
+ --primary-ultra-dark-l: 18%;
502
+ --primary-ultra-dark-s: 100%;
503
+ --primary-ultra-dark-trans-10: rgba(0, 15, 92, 0.1);
504
+ --primary-ultra-dark-trans-20: rgba(0, 15, 92, 0.2);
505
+ --primary-ultra-dark-trans-30: rgba(0, 15, 92, 0.3);
506
+ --primary-ultra-dark-trans-40: rgba(0, 15, 92, 0.4);
507
+ --primary-ultra-dark-trans-50: rgba(0, 15, 92, 0.5);
508
+ --primary-ultra-dark-trans-60: rgba(0, 15, 92, 0.6);
509
+ --primary-ultra-dark-trans-70: rgba(0, 15, 92, 0.7);
510
+ --primary-ultra-dark-trans-80: rgba(0, 15, 92, 0.8);
511
+ --primary-ultra-dark-trans-90: rgba(0, 15, 92, 0.9);
512
+ --primary-ultra-light: #006cd1;
513
+ --primary-ultra-light-h: 209;
514
+ --primary-ultra-light-l: 41%;
515
+ --primary-ultra-light-s: 100%;
35
516
  --radius: 2rem;
517
+ --radius-50: 50%;
36
518
  --radius-circle: 50vw;
519
+ --radius-l: 3rem;
520
+ --radius-m: 2rem;
521
+ --radius-none: 0;
522
+ --radius-s: 1.3333333333rem;
523
+ --radius-xl: 4.5rem;
37
524
  --radius-xs: 0.8888888889rem;
525
+ --radius-xxl: 6.75rem;
526
+ --root-font-size: 62.5%;
38
527
  --secondary: #00b3ff;
528
+ --secondary-b: 255;
529
+ --secondary-comp: #ff4d00;
530
+ --secondary-comp-h: 378;
531
+ --secondary-dark: #00a1e6;
532
+ --secondary-dark-h: 198;
533
+ --secondary-dark-l: 45%;
534
+ --secondary-dark-s: 100%;
535
+ --secondary-dark-trans-10: rgba(0, 161, 230, 0.1);
536
+ --secondary-dark-trans-20: rgba(0, 161, 230, 0.2);
537
+ --secondary-dark-trans-30: rgba(0, 161, 230, 0.3);
538
+ --secondary-dark-trans-40: rgba(0, 161, 230, 0.4);
539
+ --secondary-dark-trans-50: rgba(0, 161, 230, 0.5);
540
+ --secondary-dark-trans-60: rgba(0, 161, 230, 0.6);
541
+ --secondary-dark-trans-70: rgba(0, 161, 230, 0.7);
542
+ --secondary-dark-trans-80: rgba(0, 161, 230, 0.8);
543
+ --secondary-dark-trans-90: rgba(0, 161, 230, 0.9);
544
+ --secondary-g: 179;
545
+ --secondary-h: 198;
546
+ --secondary-hex: #00b3ff;
547
+ --secondary-hover: #24bdff;
548
+ --secondary-hover-h: 198;
549
+ --secondary-hover-l: 57%;
550
+ --secondary-hover-s: 100%;
551
+ --secondary-hsl: 198 100% 50%;
552
+ --secondary-l: 50%;
553
+ --secondary-light: #aeccdb;
554
+ --secondary-light-h: 200;
555
+ --secondary-light-l: 77%;
556
+ --secondary-light-s: 38%;
557
+ --secondary-light-trans-10: rgba(174, 204, 219, 0.1);
558
+ --secondary-light-trans-20: rgba(174, 204, 219, 0.2);
559
+ --secondary-light-trans-30: rgba(174, 204, 219, 0.3);
560
+ --secondary-light-trans-40: rgba(174, 204, 219, 0.4);
561
+ --secondary-light-trans-50: rgba(174, 204, 219, 0.5);
562
+ --secondary-light-trans-60: rgba(174, 204, 219, 0.6);
563
+ --secondary-light-trans-70: rgba(174, 204, 219, 0.7);
564
+ --secondary-light-trans-80: rgba(174, 204, 219, 0.8);
565
+ --secondary-light-trans-90: rgba(174, 204, 219, 0.9);
566
+ --secondary-medium: #00b3ff;
567
+ --secondary-medium-h: 198;
568
+ --secondary-medium-l: 50%;
569
+ --secondary-medium-s: 100%;
570
+ --secondary-r: 0;
571
+ --secondary-rgb: 0 179 255;
572
+ --secondary-s: 100%;
573
+ --secondary-semi-dark: #007db3;
574
+ --secondary-semi-dark-h: 198;
575
+ --secondary-semi-dark-l: 35%;
576
+ --secondary-semi-dark-s: 100%;
577
+ --secondary-semi-light: #84b1c8;
578
+ --secondary-semi-light-h: 200;
579
+ --secondary-semi-light-l: 65%;
580
+ --secondary-semi-light-s: 38%;
581
+ --secondary-trans-10: rgba(0, 179, 255, 0.1);
582
+ --secondary-trans-20: rgba(0, 179, 255, 0.2);
583
+ --secondary-trans-30: rgba(0, 179, 255, 0.3);
584
+ --secondary-trans-40: rgba(0, 179, 255, 0.4);
585
+ --secondary-trans-50: rgba(0, 179, 255, 0.5);
586
+ --secondary-trans-60: rgba(0, 179, 255, 0.6);
587
+ --secondary-trans-70: rgba(0, 179, 255, 0.7);
588
+ --secondary-trans-80: rgba(0, 179, 255, 0.8);
589
+ --secondary-trans-90: rgba(0, 179, 255, 0.9);
590
+ --secondary-ultra-dark: #002433;
591
+ --secondary-ultra-dark-h: 198;
592
+ --secondary-ultra-dark-l: 10%;
593
+ --secondary-ultra-dark-s: 100%;
594
+ --secondary-ultra-dark-trans-10: rgba(0, 36, 51, 0.1);
595
+ --secondary-ultra-dark-trans-20: rgba(0, 36, 51, 0.2);
596
+ --secondary-ultra-dark-trans-30: rgba(0, 36, 51, 0.3);
597
+ --secondary-ultra-dark-trans-40: rgba(0, 36, 51, 0.4);
598
+ --secondary-ultra-dark-trans-50: rgba(0, 36, 51, 0.5);
599
+ --secondary-ultra-dark-trans-60: rgba(0, 36, 51, 0.6);
600
+ --secondary-ultra-dark-trans-70: rgba(0, 36, 51, 0.7);
601
+ --secondary-ultra-dark-trans-80: rgba(0, 36, 51, 0.8);
602
+ --secondary-ultra-dark-trans-90: rgba(0, 36, 51, 0.9);
603
+ --secondary-ultra-light: #c3e2f3;
604
+ --secondary-ultra-light-h: 201;
605
+ --secondary-ultra-light-l: 86%;
606
+ --secondary-ultra-light-s: 67%;
607
+ --section-gutter: 2rem;
608
+ --section-padding-block: clamp(4rem, calc(5.22vw + 2rem), 8rem);
609
+ --section-padding-x: clamp(2rem, calc(4.347826087vw + 0.4347826087rem), 6rem);
610
+ --section-space-l: clamp(6.3984rem, calc(7.7191304348vw + 3.6195130435rem), 13.5rem);
39
611
  --section-space-m: clamp(4.8rem, calc(4.5652173913vw + 3.1565217391rem), 9rem);
612
+ --section-space-s: clamp(3.6009002251rem, calc(2.6077171467vw + 2.6621220523rem), 6rem);
40
613
  --section-space-xl: clamp(8.5290672rem, calc(12.7401443478vw + 3.9426152348rem), 20.25rem);
41
- --space-l: clamp(3.1992rem, calc(1.4139130435vw + 2.6901913043rem), 4.5rem);
42
- --space-m: clamp(2.4rem, calc(0.652173913vw + 2.1652173913rem), 3rem);
43
- --space-s: clamp(1.8004501125rem, calc(0.2169020516vw + 1.722365374rem), 2rem);
44
- --space-xl: clamp(4.2645336rem, calc(2.701593913vw + 3.2919597913rem), 6.75rem);
45
- --space-xs: clamp(1.3506752532rem, calc(-0.0188499129vw + 1.3574612219rem), 1.3333333333rem);
46
- --space-xxl: clamp(5.6846232888rem, calc(4.8264964252vw + 3.9470845757rem), 10.125rem);
614
+ --section-space-xs: clamp(2.7013505064rem, calc(1.4115755365vw + 2.1931833133rem), 4rem);
615
+ --section-space-xxl: clamp(11.3692465776rem, calc(20.658427633vw + 3.9322126297rem), 30.375rem);
616
+ --shade-black: #000;
617
+ --shade-white: #fff;
618
+ --space-l: clamp(1.6rem, calc(0.52vw + 1.45rem), 2.0rem);
619
+ --space-m: clamp(1.2rem, calc(0.52vw + 1.05rem), 1.6rem);
620
+ --space-s: clamp(0.8rem, 0.8rem, 0.8rem);
621
+ --space-xl: clamp(1.8rem, calc(0.78vw + 1.58rem), 2.4rem);
622
+ --space-xs: clamp(0.4rem, 0.4rem, 0.4rem);
623
+ --space-xxl: clamp(2.4rem, calc(1.04vw + 2.11rem), 3.2rem);
624
+ --sticky-l: 10%;
625
+ --sticky-m: 5%;
626
+ --sticky-s: 2.5%;
627
+ --success: #29A745;
628
+ --success-b: 69;
629
+ --success-comp: #a8298d;
630
+ --success-comp-h: 313;
631
+ --success-dark: #0f3e19;
632
+ --success-dark-h: 133;
633
+ --success-dark-l: 15%;
634
+ --success-dark-s: 61%;
635
+ --success-g: 167;
636
+ --success-h: 133;
637
+ --success-hex: #29A745;
638
+ --success-hover: #2fc24f;
639
+ --success-hover-h: 133;
640
+ --success-hover-l: 47.15%;
641
+ --success-hover-s: 61%;
642
+ --success-hsl: 133 61% 41%;
643
+ --success-l: 41%;
644
+ --success-light: #c1f0cc;
645
+ --success-light-h: 133;
646
+ --success-light-l: 85%;
647
+ --success-light-s: 61%;
648
+ --success-medium: #32cd53;
649
+ --success-medium-h: 133;
650
+ --success-medium-l: 50%;
651
+ --success-medium-s: 61%;
652
+ --success-r: 41;
653
+ --success-rgb: 41 167 69;
654
+ --success-s: 61%;
655
+ --success-semi-dark: #23903a;
656
+ --success-semi-dark-h: 133;
657
+ --success-semi-dark-l: 35%;
658
+ --success-semi-dark-s: 61%;
659
+ --success-semi-light: #6fdc87;
660
+ --success-semi-light-h: 133;
661
+ --success-semi-light-l: 65%;
662
+ --success-semi-light-s: 61%;
663
+ --success-ultra-dark: #2b0809;
664
+ --success-ultra-dark-h: 358;
665
+ --success-ultra-dark-l: 10%;
666
+ --success-ultra-dark-s: 70%;
667
+ --success-ultra-light: #eafaee;
668
+ --success-ultra-light-h: 133;
669
+ --success-ultra-light-l: 95%;
670
+ --success-ultra-light-s: 61%;
671
+ --text-color: var(--neutral-dark);
672
+ --text-dark: var(--black);
673
+ --text-dark-muted: var(--black-trans-80);
47
674
  --text-l: clamp(1.8rem, calc(0.2173913043vw + 1.7217391304rem), 2rem);
675
+ --text-l-line-height: 1.6;
676
+ --text-l-max-width: 100%;
48
677
  --text-light: var(--white);
678
+ --text-light-muted: #9FABB9;
679
+ --text-line-height: 1.2;
49
680
  --text-m: clamp(1.6rem, calc(0.2173913043vw + 1.5217391304rem), 1.8rem);
681
+ --text-m-font-weight: 300;
682
+ --text-m-line-height: 1.2;
683
+ --text-m-max-width: 100%;
50
684
  --text-s: clamp(1.4rem, calc(0.2173913043vw + 1.3217391304rem), 1.6rem);
685
+ --text-s-font-weight: 300;
686
+ --text-s-line-height: 1.2;
687
+ --text-s-max-width: 100%;
688
+ --text-text-wrap: pretty;
51
689
  --text-xl: clamp(2rem, calc(0.4347826087vw + 1.8434782609rem), 2.4rem);
690
+ --text-xl-line-height: 1.5;
691
+ --text-xl-max-width: 100%;
52
692
  --text-xs: clamp(1.2rem, calc(0.2173913043vw + 1.1217391304rem), 1.4rem);
53
- --white: #fff;
54
- --T1: clamp(5rem, 3.857rem + 3.571vw, 9rem);
55
- --T2: clamp(4.2rem, 3.571rem + 1.964vw, 6.4rem);
56
- --pure-white: var(--dx-color-pure-white);;
57
- --space-48: var(--dx-spacing-space-48);;
58
- --space-60: var(--dx-spacing-space-60);;
59
- --space-80: var(--dx-spacing-space-80);;
693
+ --text-xs-line-height: 1.67;
694
+ --text-xs-max-width: 100%;
695
+ --text-xxl: clamp(2.7648rem, calc(1.6289863767vw + 2.1783649044rem), 4.2634674666rem);
696
+ --text-xxl-line-height: 1.5;
697
+ --text-xxl-max-width: 100%;
698
+ --texture-1-animate-overlay: off;
699
+ --texture-1-animate-texture: off;
700
+ --texture-1-asset: url(/wp-content/uploads/53.webp);
701
+ --texture-1-asset-is-url: on;
702
+ --texture-1-attachment: fixed;
703
+ --texture-1-background-color: var(--body-bg-color);
704
+ --texture-1-blend-mode: normal;
705
+ --texture-1-overlay: ;;
706
+ --texture-1-overlay-opacity: 0.8;
707
+ --texture-1-overlay-option: on;
708
+ --texture-1-overlay-overlay: ;;
709
+ --texture-1-position: center center;
710
+ --texture-1-relationship: dark;
711
+ --texture-1-repeat: no-repeat;
712
+ --texture-1-size: cover;
713
+ --texture-2-animate-overlay: off;
714
+ --texture-2-animate-texture: off;
715
+ --texture-2-asset: url();
716
+ --texture-2-asset-is-url: on;
717
+ --texture-2-attachment: scroll;
718
+ --texture-2-background-color: var(--body-bg-color);
719
+ --texture-2-blend-mode: normal;
720
+ --texture-2-overlay: ;;
721
+ --texture-2-overlay-opacity: 0.8;
722
+ --texture-2-overlay-option: off;
723
+ --texture-2-position: center center;
724
+ --texture-2-relationship: none;
725
+ --texture-2-repeat: repeat;
726
+ --texture-2-size: 200px;
727
+ --texture-3-animate-overlay: off;
728
+ --texture-3-animate-texture: off;
729
+ --texture-3-asset: url();
730
+ --texture-3-asset-is-url: on;
731
+ --texture-3-attachment: scroll;
732
+ --texture-3-background-color: var(--body-bg-color);
733
+ --texture-3-blend-mode: normal;
734
+ --texture-3-overlay: ;;
735
+ --texture-3-overlay-opacity: 0.8;
736
+ --texture-3-overlay-option: off;
737
+ --texture-3-position: center center;
738
+ --texture-3-relationship: none;
739
+ --texture-3-repeat: repeat;
740
+ --texture-3-size: 200px;
741
+ --texture-4-animate-overlay: off;
742
+ --texture-4-animate-texture: off;
743
+ --texture-4-asset: url();
744
+ --texture-4-asset-is-url: on;
745
+ --texture-4-attachment: scroll;
746
+ --texture-4-background-color: var(--body-bg-color);
747
+ --texture-4-blend-mode: normal;
748
+ --texture-4-overlay: ;;
749
+ --texture-4-overlay-opacity: 0.8;
750
+ --texture-4-overlay-option: off;
751
+ --texture-4-position: center center;
752
+ --texture-4-relationship: none;
753
+ --texture-4-repeat: repeat;
754
+ --texture-4-size: 200px;
755
+ --texture-5-animate-overlay: off;
756
+ --texture-5-animate-texture: off;
757
+ --texture-5-asset: url();
758
+ --texture-5-asset-is-url: on;
759
+ --texture-5-attachment: scroll;
760
+ --texture-5-background-color: var(--body-bg-color);
761
+ --texture-5-blend-mode: normal;
762
+ --texture-5-overlay: ;;
763
+ --texture-5-overlay-opacity: 0.8;
764
+ --texture-5-overlay-option: off;
765
+ --texture-5-position: center center;
766
+ --texture-5-relationship: none;
767
+ --texture-5-repeat: repeat;
768
+ --texture-5-size: 200px;
769
+ --transition: background var(--transition-duration) var(--transition-timing) var(--transition-delay), color var(--transition-duration) var(--transition-timing) var(--transition-delay), border var(--transition-duration) var(--transition-timing) var(--transition-delay);
770
+ --transition-delay: 0s;
771
+ --transition-duration: 0.3s;
772
+ --transition-timing: ease-in-out;
773
+ --white: #F8F8F8;
774
+ --white-trans-10: rgba(255, 255, 255, 0.1);
775
+ --white-trans-20: rgba(255, 255, 255, 0.2);
776
+ --white-trans-30: rgba(255, 255, 255, 0.3);
777
+ --white-trans-40: rgba(255, 255, 255, 0.4);
778
+ --white-trans-50: rgba(255, 255, 255, 0.5);
779
+ --white-trans-60: rgba(255, 255, 255, 0.6);
780
+ --white-trans-70: rgba(255, 255, 255, 0.7);
781
+ --white-trans-80: rgba(255, 255, 255, 0.8);
782
+ --white-trans-90: rgba(255, 255, 255, 0.9);
783
+ --width-10: calc(var(--content-width) * 0.1);
784
+ --width-20: calc(var(--content-width) * 0.2);
785
+ --width-30: calc(var(--content-width) * 0.3);
786
+ --width-40: calc(var(--content-width) * 0.4);
787
+ --width-50: calc(var(--content-width) * 0.5);
788
+ --width-60: calc(var(--content-width) * 0.6);
789
+ --width-70: calc(var(--content-width) * 0.7);
790
+ --width-80: calc(var(--content-width) * 0.8);
791
+ --width-90: calc(var(--content-width) * 0.9);
792
+ --width-content: calc(var(--content-width) * 1);
793
+ --width-full: calc(var(--content-width) * 100%);
794
+ --width-l: calc(var(--content-width) * 0.6);
795
+ --width-m: calc(var(--content-width) * 0.4);
796
+ --width-s: calc(var(--content-width) * 0.2);
797
+ --width-vp-max: calc(var(--content-width) * 1);
798
+ --width-xl: calc(var(--content-width) * 0.8);
799
+ --width-xs: calc(var(--content-width) * 0.1);
800
+ --width-xxl: calc(var(--content-width) * 0.9);
801
+ }
802
+ @media (max-width: 1280px) {
803
+ :root {
804
+ --header-height: var(--header-height-xl);
805
+ }
806
+ }
807
+ @media (max-width: 992px) {
808
+ :root {
809
+ --header-height: var(--header-height-l);
810
+ }
811
+ }
812
+ @media (max-width: 768px) {
813
+ :root {
814
+ --header-height: var(--header-height-m);
815
+ }
816
+ }
817
+ @media (max-width: 480px) {
818
+ :root {
819
+ --header-height: var(--header-height-s);
820
+ }
60
821
  }
61
822
  @media (min-width: 1281px) {
62
823
  :root {
@@ -65,8 +826,15 @@
65
826
  --h2: 3.6rem;
66
827
  --h3: 2.8rem;
67
828
  --h4: 2.4rem;
829
+ --h5: 2rem;
830
+ --h6: 2rem;
831
+ --section-padding-x: 6rem;
832
+ --section-space-l: 13.5rem;
68
833
  --section-space-m: 9rem;
834
+ --section-space-s: 6rem;
69
835
  --section-space-xl: 20.25rem;
836
+ --section-space-xs: 4rem;
837
+ --section-space-xxl: 30.375rem;
70
838
  --space-l: 4.5rem;
71
839
  --space-m: 3rem;
72
840
  --space-s: 2rem;
@@ -78,8 +846,1286 @@
78
846
  --text-s: 1.6rem;
79
847
  --text-xl: 2.4rem;
80
848
  --text-xs: 1.4rem;
849
+ --text-xxl: 4.2634674666rem;
850
+ }
851
+ }
852
+ /* ===== ACSS base (html / body / typography) — verbatim from the live stylesheet ===== */
853
+ html {
854
+ font-size: var(--root-font-size) !important;
855
+ scroll-behavior: smooth;
856
+ }
857
+
858
+ *, *::before, *::after {
859
+ box-sizing: border-box;
860
+ }
861
+
862
+ @media (prefers-reduced-motion: reduce) {
863
+ *, *::before, *::after {
864
+ -webkit-animation-duration: 0.01ms !important;
865
+ animation-duration: 0.01ms !important;
866
+ -webkit-animation-iteration-count: 1 !important;
867
+ animation-iteration-count: 1 !important;
868
+ transition-duration: 0.01ms !important;
869
+ scroll-behavior: auto !important;
870
+ }
871
+ }
872
+
873
+ body {
874
+ font-family: "Outfit";
875
+ font-weight: 300;
876
+ }
877
+
878
+ input, button, textarea, select {
879
+ font: inherit;
880
+ }
881
+
882
+ body:where(:not(.block-editor-writing-flow, .editor-styles-wrapper)) :where(p, h1, h2, h3, h4, h5, h6, ul, ol, li) {
883
+ margin-block: 0;
884
+ }
885
+
886
+ :where(section:not(section section)) {
887
+ padding-block: var(--section-padding-block);
888
+ padding-inline: var(--gutter);
889
+ }
890
+
891
+ body:where(.bricks-is-frontend), body:where(:not(.bricks-is-frontend)) {
892
+ color: var(--body-color, var(--neutral-dark));
893
+ }
894
+
895
+ [class*="btn--"]:where(:not(.btn--none, .wp-block-button)) {
896
+ background: var(--btn-background);
897
+ color: var(--btn-text-color);
898
+ padding-block: var(--btn-padding-block);
899
+ padding-inline: var(--btn-padding-inline);
900
+ min-inline-size: var(--btn-min-width);
901
+ line-height: var(--btn-line-height);
902
+ font-size: var(--btn-font-size, var(--text-m));
903
+ font-weight: var(--btn-font-weight);
904
+ font-style: var(--btn-font-style);
905
+ text-transform: var(--btn-text-transform);
906
+ letter-spacing: var(--btn-letter-spacing);
907
+ text-decoration: var(--btn-text-decoration);
908
+ border-width: var(--btn-border-width);
909
+ border-style: var(--btn-border-style);
910
+ border-radius: var(--btn-radius);
911
+ border-color: var(--btn-border-color);
912
+ transition: var(--btn-transition, var(--transition));
913
+ justify-content: var(--btn-justify-content, center);
914
+ text-align: var(--btn-text-align, center);
915
+ }
916
+
917
+ @media (hover: hover) and (pointer: fine) {
918
+ [class*="btn--"]:where(:not(.btn--none, .wp-block-button)):hover {
919
+ background: var(--btn-background-hover);
920
+ color: var(--btn-text-color-hover);
921
+ border-color: var(--btn-border-color-hover);
922
+ text-decoration: var(--btn-text-decoration-hover);
923
+ }
924
+ }
925
+
926
+ [class*="btn--"]:where(:not(.btn--none, .wp-block-button)):focus {
927
+ outline-style: solid;
928
+ outline-color: var(--focus-color);
929
+ outline-width: var(--focus-width);
930
+ outline-offset: var(--focus-offset);
931
+ }
932
+
933
+ h1, h2, h3, h4, h5, h6 {
934
+ font-family: "Outfit";
935
+ font-weight: 300;
936
+ }
937
+ h1 {
938
+ font-weight: 200;
939
+ font-family: "Outfit";
940
+ }
941
+ a {
942
+ color: inherit;
943
+ }
944
+ /* ===== ACSS utilities (.bg--*, .btn--*) — verbatim ===== */
945
+ .bg--primary {
946
+ background-color: var(--primary);
947
+ }
948
+
949
+ .bg--primary-hover {
950
+ background-color: var(--primary-hover);
951
+ }
952
+
953
+ .bg--primary-ultra-light {
954
+ background-color: var(--primary-ultra-light);
955
+ }
956
+
957
+ .bg--primary-light {
958
+ background-color: var(--primary-light);
959
+ }
960
+
961
+ .bg--primary-semi-light {
962
+ background-color: var(--primary-semi-light);
963
+ }
964
+
965
+ .bg--primary-semi-dark {
966
+ background-color: var(--primary-semi-dark);
967
+ }
968
+
969
+ .bg--primary-dark {
970
+ background-color: var(--primary-dark);
971
+ }
972
+
973
+ .bg--primary-ultra-dark {
974
+ background-color: var(--primary-ultra-dark);
975
+ }
976
+
977
+ .bg--primary-comp {
978
+ background-color: var(--primary-comp);
979
+ }
980
+
981
+ .bg--primary-medium {
982
+ background-color: var(--primary-medium);
983
+ }
984
+
985
+ .bg--primary-trans-10 {
986
+ background-color: var(--primary-trans-10);
987
+ }
988
+
989
+ .bg--primary-trans-20 {
990
+ background-color: var(--primary-trans-20);
991
+ }
992
+
993
+ .bg--primary-trans-30 {
994
+ background-color: var(--primary-trans-30);
995
+ }
996
+
997
+ .bg--primary-trans-40 {
998
+ background-color: var(--primary-trans-40);
999
+ }
1000
+
1001
+ .bg--primary-trans-50 {
1002
+ background-color: var(--primary-trans-50);
1003
+ }
1004
+
1005
+ .bg--primary-trans-60 {
1006
+ background-color: var(--primary-trans-60);
1007
+ }
1008
+
1009
+ .bg--primary-trans-70 {
1010
+ background-color: var(--primary-trans-70);
1011
+ }
1012
+
1013
+ .bg--primary-trans-80 {
1014
+ background-color: var(--primary-trans-80);
1015
+ }
1016
+
1017
+ .bg--primary-trans-90 {
1018
+ background-color: var(--primary-trans-90);
1019
+ }
1020
+
1021
+ .bg--primary-light-trans-10 {
1022
+ background-color: var(--primary-light-trans-10);
1023
+ }
1024
+
1025
+ .bg--primary-light-trans-20 {
1026
+ background-color: var(--primary-light-trans-20);
1027
+ }
1028
+
1029
+ .bg--primary-light-trans-30 {
1030
+ background-color: var(--primary-light-trans-30);
1031
+ }
1032
+
1033
+ .bg--primary-light-trans-40 {
1034
+ background-color: var(--primary-light-trans-40);
1035
+ }
1036
+
1037
+ .bg--primary-light-trans-50 {
1038
+ background-color: var(--primary-light-trans-50);
1039
+ }
1040
+
1041
+ .bg--primary-light-trans-60 {
1042
+ background-color: var(--primary-light-trans-60);
1043
+ }
1044
+
1045
+ .bg--primary-light-trans-70 {
1046
+ background-color: var(--primary-light-trans-70);
1047
+ }
1048
+
1049
+ .bg--primary-light-trans-80 {
1050
+ background-color: var(--primary-light-trans-80);
1051
+ }
1052
+
1053
+ .bg--primary-light-trans-90 {
1054
+ background-color: var(--primary-light-trans-90);
1055
+ }
1056
+
1057
+ .bg--primary-dark-trans-10 {
1058
+ background-color: var(--primary-dark-trans-10);
1059
+ }
1060
+
1061
+ .bg--primary-dark-trans-20 {
1062
+ background-color: var(--primary-dark-trans-20);
1063
+ }
1064
+
1065
+ .bg--primary-dark-trans-30 {
1066
+ background-color: var(--primary-dark-trans-30);
1067
+ }
1068
+
1069
+ .bg--primary-dark-trans-40 {
1070
+ background-color: var(--primary-dark-trans-40);
1071
+ }
1072
+
1073
+ .bg--primary-dark-trans-50 {
1074
+ background-color: var(--primary-dark-trans-50);
1075
+ }
1076
+
1077
+ .bg--primary-dark-trans-60 {
1078
+ background-color: var(--primary-dark-trans-60);
1079
+ }
1080
+
1081
+ .bg--primary-dark-trans-70 {
1082
+ background-color: var(--primary-dark-trans-70);
1083
+ }
1084
+
1085
+ .bg--primary-dark-trans-80 {
1086
+ background-color: var(--primary-dark-trans-80);
1087
+ }
1088
+
1089
+ .bg--primary-dark-trans-90 {
1090
+ background-color: var(--primary-dark-trans-90);
1091
+ }
1092
+
1093
+ .bg--primary-ultra-dark-trans-10 {
1094
+ background-color: var(--primary-ultra-dark-trans-10);
1095
+ }
1096
+
1097
+ .bg--primary-ultra-dark-trans-20 {
1098
+ background-color: var(--primary-ultra-dark-trans-20);
1099
+ }
1100
+
1101
+ .bg--primary-ultra-dark-trans-30 {
1102
+ background-color: var(--primary-ultra-dark-trans-30);
1103
+ }
1104
+
1105
+ .bg--primary-ultra-dark-trans-40 {
1106
+ background-color: var(--primary-ultra-dark-trans-40);
1107
+ }
1108
+
1109
+ .bg--primary-ultra-dark-trans-50 {
1110
+ background-color: var(--primary-ultra-dark-trans-50);
1111
+ }
1112
+
1113
+ .bg--primary-ultra-dark-trans-60 {
1114
+ background-color: var(--primary-ultra-dark-trans-60);
1115
+ }
1116
+
1117
+ .bg--primary-ultra-dark-trans-70 {
1118
+ background-color: var(--primary-ultra-dark-trans-70);
1119
+ }
1120
+
1121
+ .bg--primary-ultra-dark-trans-80 {
1122
+ background-color: var(--primary-ultra-dark-trans-80);
1123
+ }
1124
+
1125
+ .bg--primary-ultra-dark-trans-90 {
1126
+ background-color: var(--primary-ultra-dark-trans-90);
1127
+ }
1128
+
1129
+ .bg--secondary {
1130
+ background-color: var(--secondary);
1131
+ }
1132
+
1133
+ .bg--secondary-hover {
1134
+ background-color: var(--secondary-hover);
1135
+ }
1136
+
1137
+ .bg--secondary-ultra-light {
1138
+ background-color: var(--secondary-ultra-light);
1139
+ }
1140
+
1141
+ .bg--secondary-light {
1142
+ background-color: var(--secondary-light);
1143
+ }
1144
+
1145
+ .bg--secondary-semi-light {
1146
+ background-color: var(--secondary-semi-light);
1147
+ }
1148
+
1149
+ .bg--secondary-semi-dark {
1150
+ background-color: var(--secondary-semi-dark);
1151
+ }
1152
+
1153
+ .bg--secondary-dark {
1154
+ background-color: var(--secondary-dark);
1155
+ }
1156
+
1157
+ .bg--secondary-ultra-dark {
1158
+ background-color: var(--secondary-ultra-dark);
1159
+ }
1160
+
1161
+ .bg--secondary-comp {
1162
+ background-color: var(--secondary-comp);
1163
+ }
1164
+
1165
+ .bg--secondary-medium {
1166
+ background-color: var(--secondary-medium);
1167
+ }
1168
+
1169
+ .bg--secondary-trans-10 {
1170
+ background-color: var(--secondary-trans-10);
1171
+ }
1172
+
1173
+ .bg--secondary-trans-20 {
1174
+ background-color: var(--secondary-trans-20);
1175
+ }
1176
+
1177
+ .bg--secondary-trans-30 {
1178
+ background-color: var(--secondary-trans-30);
1179
+ }
1180
+
1181
+ .bg--secondary-trans-40 {
1182
+ background-color: var(--secondary-trans-40);
1183
+ }
1184
+
1185
+ .bg--secondary-trans-50 {
1186
+ background-color: var(--secondary-trans-50);
1187
+ }
1188
+
1189
+ .bg--secondary-trans-60 {
1190
+ background-color: var(--secondary-trans-60);
1191
+ }
1192
+
1193
+ .bg--secondary-trans-70 {
1194
+ background-color: var(--secondary-trans-70);
1195
+ }
1196
+
1197
+ .bg--secondary-trans-80 {
1198
+ background-color: var(--secondary-trans-80);
1199
+ }
1200
+
1201
+ .bg--secondary-trans-90 {
1202
+ background-color: var(--secondary-trans-90);
1203
+ }
1204
+
1205
+ .bg--secondary-light-trans-10 {
1206
+ background-color: var(--secondary-light-trans-10);
1207
+ }
1208
+
1209
+ .bg--secondary-light-trans-20 {
1210
+ background-color: var(--secondary-light-trans-20);
1211
+ }
1212
+
1213
+ .bg--secondary-light-trans-30 {
1214
+ background-color: var(--secondary-light-trans-30);
1215
+ }
1216
+
1217
+ .bg--secondary-light-trans-40 {
1218
+ background-color: var(--secondary-light-trans-40);
1219
+ }
1220
+
1221
+ .bg--secondary-light-trans-50 {
1222
+ background-color: var(--secondary-light-trans-50);
1223
+ }
1224
+
1225
+ .bg--secondary-light-trans-60 {
1226
+ background-color: var(--secondary-light-trans-60);
1227
+ }
1228
+
1229
+ .bg--secondary-light-trans-70 {
1230
+ background-color: var(--secondary-light-trans-70);
1231
+ }
1232
+
1233
+ .bg--secondary-light-trans-80 {
1234
+ background-color: var(--secondary-light-trans-80);
1235
+ }
1236
+
1237
+ .bg--secondary-light-trans-90 {
1238
+ background-color: var(--secondary-light-trans-90);
1239
+ }
1240
+
1241
+ .bg--secondary-dark-trans-10 {
1242
+ background-color: var(--secondary-dark-trans-10);
1243
+ }
1244
+
1245
+ .bg--secondary-dark-trans-20 {
1246
+ background-color: var(--secondary-dark-trans-20);
1247
+ }
1248
+
1249
+ .bg--secondary-dark-trans-30 {
1250
+ background-color: var(--secondary-dark-trans-30);
1251
+ }
1252
+
1253
+ .bg--secondary-dark-trans-40 {
1254
+ background-color: var(--secondary-dark-trans-40);
1255
+ }
1256
+
1257
+ .bg--secondary-dark-trans-50 {
1258
+ background-color: var(--secondary-dark-trans-50);
1259
+ }
1260
+
1261
+ .bg--secondary-dark-trans-60 {
1262
+ background-color: var(--secondary-dark-trans-60);
1263
+ }
1264
+
1265
+ .bg--secondary-dark-trans-70 {
1266
+ background-color: var(--secondary-dark-trans-70);
1267
+ }
1268
+
1269
+ .bg--secondary-dark-trans-80 {
1270
+ background-color: var(--secondary-dark-trans-80);
1271
+ }
1272
+
1273
+ .bg--secondary-dark-trans-90 {
1274
+ background-color: var(--secondary-dark-trans-90);
1275
+ }
1276
+
1277
+ .bg--secondary-ultra-dark-trans-10 {
1278
+ background-color: var(--secondary-ultra-dark-trans-10);
1279
+ }
1280
+
1281
+ .bg--secondary-ultra-dark-trans-20 {
1282
+ background-color: var(--secondary-ultra-dark-trans-20);
1283
+ }
1284
+
1285
+ .bg--secondary-ultra-dark-trans-30 {
1286
+ background-color: var(--secondary-ultra-dark-trans-30);
1287
+ }
1288
+
1289
+ .bg--secondary-ultra-dark-trans-40 {
1290
+ background-color: var(--secondary-ultra-dark-trans-40);
1291
+ }
1292
+
1293
+ .bg--secondary-ultra-dark-trans-50 {
1294
+ background-color: var(--secondary-ultra-dark-trans-50);
1295
+ }
1296
+
1297
+ .bg--secondary-ultra-dark-trans-60 {
1298
+ background-color: var(--secondary-ultra-dark-trans-60);
1299
+ }
1300
+
1301
+ .bg--secondary-ultra-dark-trans-70 {
1302
+ background-color: var(--secondary-ultra-dark-trans-70);
1303
+ }
1304
+
1305
+ .bg--secondary-ultra-dark-trans-80 {
1306
+ background-color: var(--secondary-ultra-dark-trans-80);
1307
+ }
1308
+
1309
+ .bg--secondary-ultra-dark-trans-90 {
1310
+ background-color: var(--secondary-ultra-dark-trans-90);
1311
+ }
1312
+
1313
+ .bg--accent {
1314
+ background-color: var(--accent);
1315
+ }
1316
+
1317
+ .bg--accent-hover {
1318
+ background-color: var(--accent-hover);
1319
+ }
1320
+
1321
+ .bg--accent-ultra-light {
1322
+ background-color: var(--accent-ultra-light);
1323
+ }
1324
+
1325
+ .bg--accent-light {
1326
+ background-color: var(--accent-light);
1327
+ }
1328
+
1329
+ .bg--accent-semi-light {
1330
+ background-color: var(--accent-semi-light);
1331
+ }
1332
+
1333
+ .bg--accent-semi-dark {
1334
+ background-color: var(--accent-semi-dark);
1335
+ }
1336
+
1337
+ .bg--accent-dark {
1338
+ background-color: var(--accent-dark);
1339
+ }
1340
+
1341
+ .bg--accent-ultra-dark {
1342
+ background-color: var(--accent-ultra-dark);
1343
+ }
1344
+
1345
+ .bg--accent-comp {
1346
+ background-color: var(--accent-comp);
1347
+ }
1348
+
1349
+ .bg--accent-medium {
1350
+ background-color: var(--accent-medium);
1351
+ }
1352
+
1353
+ .bg--neutral {
1354
+ background-color: var(--neutral);
1355
+ }
1356
+
1357
+ .bg--neutral-hover {
1358
+ background-color: var(--neutral-hover);
1359
+ }
1360
+
1361
+ .bg--neutral-ultra-light {
1362
+ background-color: var(--neutral-ultra-light);
1363
+ }
1364
+
1365
+ .bg--neutral-light {
1366
+ background-color: var(--neutral-light);
1367
+ }
1368
+
1369
+ .bg--neutral-semi-light {
1370
+ background-color: var(--neutral-semi-light);
1371
+ }
1372
+
1373
+ .bg--neutral-semi-dark {
1374
+ background-color: var(--neutral-semi-dark);
1375
+ }
1376
+
1377
+ .bg--neutral-dark {
1378
+ background-color: var(--neutral-dark);
1379
+ }
1380
+
1381
+ .bg--neutral-ultra-dark {
1382
+ background-color: var(--neutral-ultra-dark);
1383
+ }
1384
+
1385
+ .bg--neutral-comp {
1386
+ background-color: var(--neutral-comp);
1387
+ }
1388
+
1389
+ .bg--neutral-medium {
1390
+ background-color: var(--neutral-medium);
1391
+ }
1392
+
1393
+ .bg--neutral-trans-10 {
1394
+ background-color: var(--neutral-trans-10);
1395
+ }
1396
+
1397
+ .bg--neutral-trans-20 {
1398
+ background-color: var(--neutral-trans-20);
1399
+ }
1400
+
1401
+ .bg--neutral-trans-30 {
1402
+ background-color: var(--neutral-trans-30);
1403
+ }
1404
+
1405
+ .bg--neutral-trans-40 {
1406
+ background-color: var(--neutral-trans-40);
1407
+ }
1408
+
1409
+ .bg--neutral-trans-50 {
1410
+ background-color: var(--neutral-trans-50);
1411
+ }
1412
+
1413
+ .bg--neutral-trans-60 {
1414
+ background-color: var(--neutral-trans-60);
1415
+ }
1416
+
1417
+ .bg--neutral-trans-70 {
1418
+ background-color: var(--neutral-trans-70);
1419
+ }
1420
+
1421
+ .bg--neutral-trans-80 {
1422
+ background-color: var(--neutral-trans-80);
1423
+ }
1424
+
1425
+ .bg--neutral-trans-90 {
1426
+ background-color: var(--neutral-trans-90);
1427
+ }
1428
+
1429
+ .bg--neutral-light-trans-10 {
1430
+ background-color: var(--neutral-light-trans-10);
1431
+ }
1432
+
1433
+ .bg--neutral-light-trans-20 {
1434
+ background-color: var(--neutral-light-trans-20);
1435
+ }
1436
+
1437
+ .bg--neutral-light-trans-30 {
1438
+ background-color: var(--neutral-light-trans-30);
1439
+ }
1440
+
1441
+ .bg--neutral-light-trans-40 {
1442
+ background-color: var(--neutral-light-trans-40);
1443
+ }
1444
+
1445
+ .bg--neutral-light-trans-50 {
1446
+ background-color: var(--neutral-light-trans-50);
1447
+ }
1448
+
1449
+ .bg--neutral-light-trans-60 {
1450
+ background-color: var(--neutral-light-trans-60);
1451
+ }
1452
+
1453
+ .bg--neutral-light-trans-70 {
1454
+ background-color: var(--neutral-light-trans-70);
1455
+ }
1456
+
1457
+ .bg--neutral-light-trans-80 {
1458
+ background-color: var(--neutral-light-trans-80);
1459
+ }
1460
+
1461
+ .bg--neutral-light-trans-90 {
1462
+ background-color: var(--neutral-light-trans-90);
1463
+ }
1464
+
1465
+ .bg--white {
1466
+ background-color: var(--white);
1467
+ }
1468
+
1469
+ .bg--black {
1470
+ background-color: var(--black);
1471
+ }
1472
+
1473
+ .bg--white-trans-10 {
1474
+ background-color: var(--white-trans-10);
1475
+ }
1476
+
1477
+ .bg--white-trans-20 {
1478
+ background-color: var(--white-trans-20);
1479
+ }
1480
+
1481
+ .bg--white-trans-30 {
1482
+ background-color: var(--white-trans-30);
1483
+ }
1484
+
1485
+ .bg--white-trans-40 {
1486
+ background-color: var(--white-trans-40);
1487
+ }
1488
+
1489
+ .bg--white-trans-50 {
1490
+ background-color: var(--white-trans-50);
1491
+ }
1492
+
1493
+ .bg--white-trans-60 {
1494
+ background-color: var(--white-trans-60);
1495
+ }
1496
+
1497
+ .bg--white-trans-70 {
1498
+ background-color: var(--white-trans-70);
1499
+ }
1500
+
1501
+ .bg--white-trans-80 {
1502
+ background-color: var(--white-trans-80);
1503
+ }
1504
+
1505
+ .bg--white-trans-90 {
1506
+ background-color: var(--white-trans-90);
1507
+ }
1508
+
1509
+ .bg--black-trans-10 {
1510
+ background-color: var(--black-trans-10);
1511
+ }
1512
+
1513
+ .bg--black-trans-20 {
1514
+ background-color: var(--black-trans-20);
1515
+ }
1516
+
1517
+ .bg--black-trans-30 {
1518
+ background-color: var(--black-trans-30);
1519
+ }
1520
+
1521
+ .bg--black-trans-40 {
1522
+ background-color: var(--black-trans-40);
1523
+ }
1524
+
1525
+ .bg--black-trans-50 {
1526
+ background-color: var(--black-trans-50);
1527
+ }
1528
+
1529
+ .bg--black-trans-60 {
1530
+ background-color: var(--black-trans-60);
1531
+ }
1532
+
1533
+ .bg--black-trans-70 {
1534
+ background-color: var(--black-trans-70);
1535
+ }
1536
+
1537
+ .bg--black-trans-80 {
1538
+ background-color: var(--black-trans-80);
1539
+ }
1540
+
1541
+ .bg--black-trans-90 {
1542
+ background-color: var(--black-trans-90);
1543
+ }
1544
+
1545
+ .bg--danger {
1546
+ background-color: var(--danger);
1547
+ }
1548
+
1549
+ .bg--danger-hover {
1550
+ background-color: var(--danger-hover);
1551
+ }
1552
+
1553
+ .bg--danger-ultra-light {
1554
+ background-color: var(--danger-ultra-light);
1555
+ }
1556
+
1557
+ .bg--danger-light {
1558
+ background-color: var(--danger-light);
1559
+ }
1560
+
1561
+ .bg--danger-semi-light {
1562
+ background-color: var(--danger-semi-light);
1563
+ }
1564
+
1565
+ .bg--danger-semi-dark {
1566
+ background-color: var(--danger-semi-dark);
1567
+ }
1568
+
1569
+ .bg--danger-dark {
1570
+ background-color: var(--danger-dark);
1571
+ }
1572
+
1573
+ .bg--danger-ultra-dark {
1574
+ background-color: var(--danger-ultra-dark);
1575
+ }
1576
+
1577
+ .bg--danger-comp {
1578
+ background-color: var(--danger-comp);
1579
+ }
1580
+
1581
+ .bg--danger-medium {
1582
+ background-color: var(--danger-medium);
1583
+ }
1584
+
1585
+ .bg--success {
1586
+ background-color: var(--success);
1587
+ }
1588
+
1589
+ .bg--success-hover {
1590
+ background-color: var(--success-hover);
1591
+ }
1592
+
1593
+ .bg--success-ultra-light {
1594
+ background-color: var(--success-ultra-light);
1595
+ }
1596
+
1597
+ .bg--success-light {
1598
+ background-color: var(--success-light);
1599
+ }
1600
+
1601
+ .bg--success-semi-light {
1602
+ background-color: var(--success-semi-light);
1603
+ }
1604
+
1605
+ .bg--success-semi-dark {
1606
+ background-color: var(--success-semi-dark);
1607
+ }
1608
+
1609
+ .bg--success-dark {
1610
+ background-color: var(--success-dark);
1611
+ }
1612
+
1613
+ .bg--success-ultra-dark {
1614
+ background-color: var(--success-ultra-dark);
1615
+ }
1616
+
1617
+ .bg--success-comp {
1618
+ background-color: var(--success-comp);
1619
+ }
1620
+
1621
+ .bg--success-medium {
1622
+ background-color: var(--success-medium);
1623
+ }
1624
+
1625
+ .bg--ultra-light {
1626
+ background-color: var(--bg-ultra-light);
1627
+ }
1628
+
1629
+ .bg--light {
1630
+ background-color: var(--bg-light);
1631
+ }
1632
+
1633
+ .bg--dark {
1634
+ background-color: var(--bg-dark);
1635
+ }
1636
+
1637
+ .bg--ultra-dark {
1638
+ background-color: var(--bg-ultra-dark);
1639
+ }
1640
+
1641
+ .bg--ultra-light :where(h1, h2, h3, h4, h5, h6) {
1642
+ --heading-color: var(--bg-ultra-light-heading);
1643
+ --h1-color: var(--bg-ultra-light-heading);
1644
+ --h2-color: var(--bg-ultra-light-heading);
1645
+ --h3-color: var(--bg-ultra-light-heading);
1646
+ --h4-color: var(--bg-ultra-light-heading);
1647
+ --h5-color: var(--bg-ultra-light-heading);
1648
+ --h6-color: var(--bg-ultra-light-heading);
1649
+ color: var(--bg-ultra-light-heading);
1650
+ }
1651
+
1652
+ .bg--light :where(h1, h2, h3, h4, h5, h6) {
1653
+ --heading-color: var(--bg-light-heading);
1654
+ --h1-color: var(--bg-light-heading);
1655
+ --h2-color: var(--bg-light-heading);
1656
+ --h3-color: var(--bg-light-heading);
1657
+ --h4-color: var(--bg-light-heading);
1658
+ --h5-color: var(--bg-light-heading);
1659
+ --h6-color: var(--bg-light-heading);
1660
+ color: var(--bg-light-heading);
1661
+ }
1662
+
1663
+ .bg--dark :where(h1, h2, h3, h4, h5, h6), .texture-1 :where(h1, h2, h3, h4, h5, h6), .overlay-1 :where(h1, h2, h3, h4, h5, h6) {
1664
+ --heading-color: var(--bg-dark-heading);
1665
+ --h1-color: var(--bg-dark-heading);
1666
+ --h2-color: var(--bg-dark-heading);
1667
+ --h3-color: var(--bg-dark-heading);
1668
+ --h4-color: var(--bg-dark-heading);
1669
+ --h5-color: var(--bg-dark-heading);
1670
+ --h6-color: var(--bg-dark-heading);
1671
+ color: var(--bg-dark-heading);
1672
+ }
1673
+
1674
+ .bg--ultra-dark :where(h1, h2, h3, h4, h5, h6) {
1675
+ --heading-color: var(--bg-ultra-dark-heading);
1676
+ --h1-color: var(--bg-ultra-dark-heading);
1677
+ --h2-color: var(--bg-ultra-dark-heading);
1678
+ --h3-color: var(--bg-ultra-dark-heading);
1679
+ --h4-color: var(--bg-ultra-dark-heading);
1680
+ --h5-color: var(--bg-ultra-dark-heading);
1681
+ --h6-color: var(--bg-ultra-dark-heading);
1682
+ color: var(--bg-ultra-dark-heading);
1683
+ }
1684
+
1685
+ .bg--ultra-light :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)) {
1686
+ color: var(--bg-ultra-light-link);
1687
+ }
1688
+
1689
+ .bg--ultra-light :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)):hover {
1690
+ color: var(--bg-ultra-light-link-hover);
1691
+ }
1692
+
1693
+ .bg--light :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)) {
1694
+ color: var(--bg-light-link);
1695
+ }
1696
+
1697
+ .bg--light :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)):hover {
1698
+ color: var(--bg-light-link-hover);
1699
+ }
1700
+
1701
+ .bg--dark :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)), .texture-1 :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)), .overlay-1 :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)) {
1702
+ color: var(--bg-dark-link);
1703
+ }
1704
+
1705
+ .bg--dark :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)):hover, .texture-1 :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)):hover, .overlay-1 :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)):hover {
1706
+ color: var(--bg-dark-link-hover);
81
1707
  }
1708
+
1709
+ .bg--ultra-dark :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)) {
1710
+ color: var(--bg-ultra-dark-link);
82
1711
  }
1712
+
1713
+ .bg--ultra-dark :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)):hover {
1714
+ color: var(--bg-ultra-dark-link-hover);
1715
+ }
1716
+
1717
+ .bg--ultra-light [class*="btn--"] {
1718
+ --btn-background: var(--primary);
1719
+ --btn-background-hover: var(--primary);
1720
+ --btn-text-color: var(--white);
1721
+ --btn-text-color-hover: var(--white);
1722
+ --btn-border-color: var(--primary);
1723
+ --btn-border-color-hover: var(--primary);
1724
+ --focus-color: var(--danger);
1725
+ }
1726
+
1727
+ .bg--ultra-light [class*="btn--"].btn--outline {
1728
+ --btn-background: transparent;
1729
+ --btn-background-hover: var(--primary-hover);
1730
+ --btn-text-color: var(--primary);
1731
+ --btn-text-color-hover: var(--primary-ultra-light);
1732
+ --btn-border-width: 0.1rem;
1733
+ --btn-border-color: var(--primary);
1734
+ --btn-border-color-hover: var(--primary-hover);
1735
+ --focus-color: var(--danger);
1736
+ }
1737
+
1738
+ .bg--light [class*="btn--"] {
1739
+ --btn-background: var(--primary);
1740
+ --btn-background-hover: var(--primary);
1741
+ --btn-text-color: var(--white);
1742
+ --btn-text-color-hover: var(--white);
1743
+ --btn-border-color: var(--primary);
1744
+ --btn-border-color-hover: var(--primary);
1745
+ --focus-color: var(--danger);
1746
+ }
1747
+
1748
+ .bg--light [class*="btn--"].btn--outline {
1749
+ --btn-background: transparent;
1750
+ --btn-background-hover: var(--primary-hover);
1751
+ --btn-text-color: var(--primary);
1752
+ --btn-text-color-hover: var(--primary-ultra-light);
1753
+ --btn-border-width: 0.1rem;
1754
+ --btn-border-color: var(--primary);
1755
+ --btn-border-color-hover: var(--primary-hover);
1756
+ --focus-color: var(--danger);
1757
+ }
1758
+
1759
+ .bg--ultra-dark [class*="btn--"] {
1760
+ --btn-background: var(--accent);
1761
+ --btn-background-hover: var(--accent-hover);
1762
+ --btn-text-color: var(--white);
1763
+ --btn-text-color-hover: var(--accent-ultra-light);
1764
+ --btn-border-color: var(--accent);
1765
+ --btn-border-color-hover: var(--accent-hover);
1766
+ --focus-color: var(--accent-dark);
1767
+ }
1768
+
1769
+ .btn--primary {
1770
+ --btn-background: var(--primary);
1771
+ --btn-background-hover: var(--primary);
1772
+ --btn-text-color: var(--white);
1773
+ --btn-text-color-hover: var(--white);
1774
+ --btn-border-color: var(--primary);
1775
+ --btn-border-color-hover: var(--primary);
1776
+ --focus-color: var(--danger);
1777
+ }
1778
+
1779
+ .btn--primary-dark {
1780
+ --btn-background: var(--primary-dark);
1781
+ --btn-background-hover: var(--primary-ultra-dark);
1782
+ --btn-text-color: var(--primary-ultra-light);
1783
+ --btn-text-color-hover: var(--primary-ultra-light);
1784
+ --btn-border-color: var(--primary-dark);
1785
+ --btn-border-color-hover: var(--primary-ultra-dark);
1786
+ --focus-color: var(--primary-semi-dark);
1787
+ }
1788
+
1789
+ .btn--primary-light {
1790
+ --btn-background: var(--primary-ultra-light);
1791
+ --btn-background-hover: var(--primary-light);
1792
+ --btn-text-color: var(--primary);
1793
+ --btn-text-color-hover: var(--primary-ultra-dark);
1794
+ --btn-border-color: var(--primary-ultra-light);
1795
+ --btn-border-color-hover: var(--primary-light);
1796
+ --focus-color: var(--primary-light);
1797
+ }
1798
+
1799
+ .btn--primary.btn--outline {
1800
+ --btn-background: transparent;
1801
+ --btn-background-hover: var(--primary-hover);
1802
+ --btn-text-color: var(--primary);
1803
+ --btn-text-color-hover: var(--primary-ultra-light);
1804
+ --btn-border-width: 0.1rem;
1805
+ --btn-border-color: var(--primary);
1806
+ --btn-border-color-hover: var(--primary-hover);
1807
+ --focus-color: var(--danger);
1808
+ }
1809
+
1810
+ .btn--primary-dark.btn--outline {
1811
+ --btn-background: transparent;
1812
+ --btn-background-hover: var(--primary-dark);
1813
+ --btn-text-color: var(--primary-dark);
1814
+ --btn-text-color-hover: var(--primary-ultra-light);
1815
+ --btn-border-width: 0.1rem;
1816
+ --btn-border-color: var(--primary-dark);
1817
+ --btn-border-color-hover: var(--primary-dark);
1818
+ --focus-color: var(--danger);
1819
+ }
1820
+
1821
+ .btn--primary-light.btn--outline {
1822
+ --btn-background: transparent;
1823
+ --btn-background-hover: var(--primary-light);
1824
+ --btn-text-color: var(--primary-light);
1825
+ --btn-text-color-hover: var(--primary-dark);
1826
+ --btn-border-width: 0.1rem;
1827
+ --btn-border-color: var(--primary-light);
1828
+ --btn-border-color-hover: var(--primary-light);
1829
+ --focus-color: var(--danger);
1830
+ }
1831
+
1832
+ .btn--secondary {
1833
+ --btn-background: var(--secondary);
1834
+ --btn-background-hover: var(--secondary-hover);
1835
+ --btn-text-color: var(--secondary-ultra-light);
1836
+ --btn-text-color-hover: var(--secondary-ultra-light);
1837
+ --btn-border-color: var(--secondary);
1838
+ --btn-border-color-hover: var(--secondary-hover);
1839
+ --focus-color: var(--secondary-dark);
1840
+ }
1841
+
1842
+ .btn--secondary-dark {
1843
+ --btn-background: var(--secondary-dark);
1844
+ --btn-background-hover: var(--secondary-ultra-dark);
1845
+ --btn-text-color: var(--secondary-ultra-light);
1846
+ --btn-text-color-hover: var(--secondary-ultra-light);
1847
+ --btn-border-color: var(--secondary-dark);
1848
+ --btn-border-color-hover: var(--secondary-ultra-dark);
1849
+ --focus-color: var(--secondary-semi-dark);
1850
+ }
1851
+
1852
+ .btn--secondary-light {
1853
+ --btn-background: var(--secondary-ultra-light);
1854
+ --btn-background-hover: var(--secondary-light);
1855
+ --btn-text-color: var(--secondary);
1856
+ --btn-text-color-hover: var(--secondary-ultra-dark);
1857
+ --btn-border-color: var(--secondary-ultra-light);
1858
+ --btn-border-color-hover: var(--secondary-light);
1859
+ --focus-color: var(--secondary-light);
1860
+ }
1861
+
1862
+ .btn--secondary.btn--outline {
1863
+ --btn-background: transparent;
1864
+ --btn-background-hover: var(--secondary-hover);
1865
+ --btn-text-color: var(--secondary);
1866
+ --btn-text-color-hover: var(--secondary-ultra-light);
1867
+ --btn-border-width: 0.1rem;
1868
+ --btn-border-color: var(--secondary);
1869
+ --btn-border-color-hover: var(--secondary-hover);
1870
+ --focus-color: var(--secondary-dark);
1871
+ }
1872
+
1873
+ .btn--secondary-dark.btn--outline {
1874
+ --btn-background: transparent;
1875
+ --btn-background-hover: var(--secondary-dark);
1876
+ --btn-text-color: var(--secondary-dark);
1877
+ --btn-text-color-hover: var(--secondary-ultra-light);
1878
+ --btn-border-width: 0.1rem;
1879
+ --btn-border-color: var(--secondary-dark);
1880
+ --btn-border-color-hover: var(--secondary-dark);
1881
+ --focus-color: var(--secondary-dark);
1882
+ }
1883
+
1884
+ .btn--secondary-light.btn--outline {
1885
+ --btn-background: transparent;
1886
+ --btn-background-hover: var(--secondary-light);
1887
+ --btn-text-color: var(--secondary-light);
1888
+ --btn-text-color-hover: var(--secondary-dark);
1889
+ --btn-border-width: 0.1rem;
1890
+ --btn-border-color: var(--secondary-light);
1891
+ --btn-border-color-hover: var(--secondary-light);
1892
+ --focus-color: var(--secondary-dark);
1893
+ }
1894
+
1895
+ .btn--tertiary {
1896
+ --btn-background: var(--tertiary);
1897
+ --btn-background-hover: var(--tertiary-hover);
1898
+ --btn-text-color: var(--tertiary-ultra-light);
1899
+ --btn-text-color-hover: var(--tertiary-ultra-light);
1900
+ --btn-border-color: var(--tertiary);
1901
+ --btn-border-color-hover: var(--tertiary-hover);
1902
+ --focus-color: var(--tertiary-light);
1903
+ }
1904
+
1905
+ .btn--accent {
1906
+ --btn-background: var(--accent);
1907
+ --btn-background-hover: var(--accent-hover);
1908
+ --btn-text-color: var(--white);
1909
+ --btn-text-color-hover: var(--accent-ultra-light);
1910
+ --btn-border-color: var(--accent);
1911
+ --btn-border-color-hover: var(--accent-hover);
1912
+ --focus-color: var(--accent-dark);
1913
+ }
1914
+
1915
+ .btn--accent-dark {
1916
+ --btn-background: var(--accent-dark);
1917
+ --btn-background-hover: var(--accent-ultra-dark);
1918
+ --btn-text-color: var(--accent-ultra-light);
1919
+ --btn-text-color-hover: var(--accent-ultra-light);
1920
+ --btn-border-color: var(--accent-dark);
1921
+ --btn-border-color-hover: var(--accent-ultra-dark);
1922
+ --focus-color: var(--accent-semi-dark);
1923
+ }
1924
+
1925
+ .btn--accent-light {
1926
+ --btn-background: var(--accent-ultra-light);
1927
+ --btn-background-hover: var(--accent-light);
1928
+ --btn-text-color: var(--accent);
1929
+ --btn-text-color-hover: var(--accent-ultra-dark);
1930
+ --btn-border-color: var(--accent-ultra-light);
1931
+ --btn-border-color-hover: var(--accent-light);
1932
+ --focus-color: var(--accent-light);
1933
+ }
1934
+
1935
+ .btn--base {
1936
+ --btn-background: var(--base);
1937
+ --btn-background-hover: var(--base-hover);
1938
+ --btn-text-color: var(--base-ultra-light);
1939
+ --btn-text-color-hover: var(--base-ultra-light);
1940
+ --btn-border-color: var(--base);
1941
+ --btn-border-color-hover: var(--base-hover);
1942
+ --focus-color: var(--base-dark);
1943
+ }
1944
+
1945
+ .btn--base-dark {
1946
+ --btn-background: var(--base-ultra-dark);
1947
+ --btn-background-hover: var(--base-ultra-dark);
1948
+ --btn-text-color: var(--white);
1949
+ --btn-text-color-hover: var(--base-ultra-light);
1950
+ --btn-border-color: var(--base-ultra-dark);
1951
+ --btn-border-color-hover: var(--base-ultra-dark);
1952
+ --focus-color: var(--base-semi-dark);
1953
+ }
1954
+
1955
+ .btn--base-light {
1956
+ --btn-background: var(--base-ultra-light);
1957
+ --btn-background-hover: var(--base-light);
1958
+ --btn-text-color: var(--base);
1959
+ --btn-text-color-hover: var(--base-ultra-dark);
1960
+ --btn-border-color: var(--base-ultra-light);
1961
+ --btn-border-color-hover: var(--base-light);
1962
+ --focus-color: var(--base-light);
1963
+ }
1964
+
1965
+ .btn--neutral {
1966
+ --btn-background: var(--neutral);
1967
+ --btn-background-hover: var(--neutral);
1968
+ --btn-text-color: var(--neutral-ultra-light);
1969
+ --btn-text-color-hover: var(--primary);
1970
+ --btn-border-color: var(--neutral);
1971
+ --btn-border-color-hover: var(--primary);
1972
+ --focus-color: var(--danger);
1973
+ }
1974
+
1975
+ .btn--neutral.btn--outline {
1976
+ --btn-background: transparent;
1977
+ --btn-background-hover: transparent;
1978
+ --btn-text-color: var(--neutral);
1979
+ --btn-text-color-hover: var(--primary);
1980
+ --btn-border-width: 0.1rem;
1981
+ --btn-border-color: var(--neutral);
1982
+ --btn-border-color-hover: var(--primary);
1983
+ --focus-color: var(--neutral-semi-light);
1984
+ }
1985
+
1986
+ .btn--neutral-light.btn--outline {
1987
+ --btn-background: transparent;
1988
+ --btn-background-hover: var(--neutral-light);
1989
+ --btn-text-color: var(--neutral-light);
1990
+ --btn-text-color-hover: var(--neutral-dark);
1991
+ --btn-border-width: 0.1rem;
1992
+ --btn-border-color: var(--neutral-light);
1993
+ --btn-border-color-hover: var(--neutral-light);
1994
+ --focus-color: var(--neutral-light);
1995
+ }
1996
+
1997
+ .btn--warning {
1998
+ --btn-background: var(--warning);
1999
+ --btn-background-hover: var(--warning-hover);
2000
+ --btn-text-color: var(--warning-ultra-light);
2001
+ --btn-text-color-hover: var(--warning-ultra-light);
2002
+ --btn-border-color: var(--warning);
2003
+ --btn-border-color-hover: var(--warning-hover);
2004
+ --focus-color: var(--warning-light);
2005
+ }
2006
+
2007
+ .btn--info {
2008
+ --btn-background: var(--info);
2009
+ --btn-background-hover: var(--info-hover);
2010
+ --btn-text-color: var(--info-ultra-light);
2011
+ --btn-text-color-hover: var(--info-ultra-light);
2012
+ --btn-border-color: var(--info);
2013
+ --btn-border-color-hover: var(--info-hover);
2014
+ --focus-color: var(--info-light);
2015
+ }
2016
+
2017
+ .btn--danger {
2018
+ --btn-background: var(--danger);
2019
+ --btn-background-hover: var(--danger-hover);
2020
+ --btn-text-color: var(--danger-ultra-light);
2021
+ --btn-text-color-hover: var(--danger-ultra-light);
2022
+ --btn-border-color: var(--danger);
2023
+ --btn-border-color-hover: var(--danger-hover);
2024
+ --focus-color: var(--danger-light);
2025
+ }
2026
+
2027
+ .btn--success {
2028
+ --btn-background: var(--success);
2029
+ --btn-background-hover: var(--success-hover);
2030
+ --btn-text-color: var(--success-ultra-light);
2031
+ --btn-text-color-hover: var(--success-ultra-light);
2032
+ --btn-border-color: var(--success);
2033
+ --btn-border-color-hover: var(--success-hover);
2034
+ --focus-color: var(--success-light);
2035
+ }
2036
+
2037
+ .btn--action {
2038
+ --btn-background: var(--action);
2039
+ --btn-background-hover: var(--action-hover);
2040
+ --btn-text-color: var(--action-ultra-light);
2041
+ --btn-text-color-hover: var(--action-ultra-light);
2042
+ --btn-border-color: var(--action);
2043
+ --btn-border-color-hover: var(--action-hover);
2044
+ --focus-color: var(--action-dark);
2045
+ }
2046
+
2047
+ .btn--action.btn--outline {
2048
+ --btn-background: transparent;
2049
+ --btn-background-hover: var(--action-hover);
2050
+ --btn-text-color: var(--action);
2051
+ --btn-text-color-hover: var(--action-ultra-light);
2052
+ --btn-border-width: 0.1rem;
2053
+ --btn-border-color: var(--action);
2054
+ --btn-border-color-hover: var(--action-hover);
2055
+ --focus-color: var(--action-dark);
2056
+ }
2057
+
2058
+ .btn--shade {
2059
+ --btn-background: var(--shade);
2060
+ --btn-background-hover: var(--shade-hover);
2061
+ --btn-text-color: var(--shade-ultra-light);
2062
+ --btn-text-color-hover: var(--shade-ultra-light);
2063
+ --btn-border-color: var(--shade);
2064
+ --btn-border-color-hover: var(--shade-hover);
2065
+ --focus-color: var(--shade-light);
2066
+ }
2067
+
2068
+ .btn--shade.btn--outline {
2069
+ --btn-background: transparent;
2070
+ --btn-background-hover: var(--shade-hover);
2071
+ --btn-text-color: var(--shade);
2072
+ --btn-text-color-hover: var(--shade-ultra-light);
2073
+ --btn-border-width: 0.1rem;
2074
+ --btn-border-color: var(--shade);
2075
+ --btn-border-color-hover: var(--shade-hover);
2076
+ --focus-color: var(--shade-light);
2077
+ }
2078
+
2079
+ .btn--white {
2080
+ --btn-background: var(--white);
2081
+ --btn-background-hover: var(--white);
2082
+ --btn-text-color: var(--black);
2083
+ --btn-text-color-hover: var(--black);
2084
+ --btn-border-color: var(--white);
2085
+ --btn-border-color-hover: var(--white);
2086
+ --focus-color: var(--action);
2087
+ }
2088
+
2089
+ .btn--white.btn--outline {
2090
+ --btn-background: transparent;
2091
+ --btn-background-hover: var(--white-hover);
2092
+ --btn-text-color: var(--shade-white);
2093
+ --btn-text-color-hover: var(--action-ultra-light);
2094
+ --btn-border-width: 0.1rem;
2095
+ --btn-border-color: var(--white);
2096
+ --btn-border-color-hover: var(--white-hover);
2097
+ --focus-color: var(--action);
2098
+ }
2099
+
2100
+ .btn--xs {
2101
+ font-size: var(--text-xs);
2102
+ }
2103
+
2104
+ .btn--s {
2105
+ font-size: var(--text-s);
2106
+ }
2107
+
2108
+ .btn--m {
2109
+ font-size: var(--text-m);
2110
+ }
2111
+
2112
+ .btn--l {
2113
+ font-size: var(--text-l);
2114
+ }
2115
+
2116
+ .btn--xl {
2117
+ font-size: var(--text-xl);
2118
+ }
2119
+
2120
+ .btn--xxl {
2121
+ font-size: var(--text-xxl);
2122
+ }
2123
+
2124
+ .btn--clear.btn--clear, .btn--none.btn--none {
2125
+ background: none;
2126
+ border: none;
2127
+ }
2128
+ /* ===== Global Class rules ===== */
83
2129
  .article-card {
84
2130
  display: flex;
85
2131
  flex-direction: column;
@@ -96,8 +2142,9 @@
96
2142
  }
97
2143
  }
98
2144
 
99
- .article-card__accent {
100
2145
  .article-card__accent
2146
+
2147
+ .article-card__accent {
101
2148
  order: -1;
102
2149
  color: var(--neutral-semi-dark);
103
2150
  }
@@ -143,11 +2190,12 @@
143
2190
  color: var(--white);
144
2191
  }
145
2192
 
146
- .article-card__label-wrapper {
147
2193
  .article-card__label-wrapper{
148
2194
  border: 1px solid var(--pure-white, #F8F8F8);
149
2195
  background: rgba(174, 203, 219, 0.50);
150
2196
  }
2197
+
2198
+ .article-card__label-wrapper {
151
2199
  position: absolute;
152
2200
  top: 1rem;
153
2201
  left: 1rem;
@@ -167,7 +2215,6 @@ background: rgba(174, 203, 219, 0.50);
167
2215
  position: relative;
168
2216
  }
169
2217
 
170
- .background {
171
2218
  /*
172
2219
 
173
2220
  To use this frame correctly, ensure the parent container is set to position relative. It's also advisable to add the following code to the parent container's CSS tab:
@@ -175,6 +2222,8 @@ To use this frame correctly, ensure the parent container is set to position rela
175
2222
  .background {isolation: isolate;}
176
2223
 
177
2224
  */
2225
+
2226
+ .background {
178
2227
  position: absolute;
179
2228
  top: 0;
180
2229
  right: 0;
@@ -183,10 +2232,11 @@ To use this frame correctly, ensure the parent container is set to position rela
183
2232
  z-index: -2;
184
2233
  }
185
2234
 
186
- .background__image {
187
2235
  .background__image img {
188
2236
  height: 100%;
189
2237
  }
2238
+
2239
+ .background__image {
190
2240
  object-fit: cover;
191
2241
  position: absolute;
192
2242
  top: 0;
@@ -200,10 +2250,11 @@ To use this frame correctly, ensure the parent container is set to position rela
200
2250
  margin-bottom: 0;
201
2251
  }
202
2252
 
203
- .background__image-new {
204
2253
  .background__image-new img {
205
2254
  height: 100%;
206
2255
  }
2256
+
2257
+ .background__image-new {
207
2258
  object-fit: cover;
208
2259
  position: absolute;
209
2260
  top: 0;
@@ -237,7 +2288,6 @@ To use this frame correctly, ensure the parent container is set to position rela
237
2288
  background-color: var(--black-trans-30);
238
2289
  }
239
2290
 
240
- .background-new {
241
2291
  /*
242
2292
 
243
2293
  To use this frame correctly, ensure the parent container is set to position relative. It's also advisable to add the following code to the parent container's CSS tab:
@@ -245,6 +2295,8 @@ To use this frame correctly, ensure the parent container is set to position rela
245
2295
  .background-new {isolation: isolate;}
246
2296
 
247
2297
  */
2298
+
2299
+ .background-new {
248
2300
  position: absolute;
249
2301
  top: 0;
250
2302
  right: 0;
@@ -253,7 +2305,6 @@ To use this frame correctly, ensure the parent container is set to position rela
253
2305
  z-index: -2;
254
2306
  }
255
2307
 
256
- .bg-gradient--hero-new {
257
2308
  .bg-gradient--hero-new::after {
258
2309
  content: "";
259
2310
  position: absolute;
@@ -267,9 +2318,7 @@ To use this frame correctly, ensure the parent container is set to position rela
267
2318
  );
268
2319
  pointer-events: none;
269
2320
  }
270
- }
271
2321
 
272
- .btn--white {
273
2322
  .btn--white.btn--outline svg{
274
2323
  stroke: var(--white);
275
2324
  }
@@ -277,7 +2326,6 @@ To use this frame correctly, ensure the parent container is set to position rela
277
2326
  .btn--white svg{
278
2327
  stroke: var(--black);
279
2328
  }
280
- }
281
2329
 
282
2330
  .chevron-codeblock-new {
283
2331
  width: fit-content;
@@ -293,10 +2341,11 @@ To use this frame correctly, ensure the parent container is set to position rela
293
2341
  }
294
2342
  }
295
2343
 
296
- .da-footer {
297
2344
  .da-footer * {
298
2345
  color: var(--white);
299
2346
  }
2347
+
2348
+ .da-footer {
300
2349
  padding: var(--space-60) var(--gutter) var(--space-60) var(--gutter);
301
2350
  display: flex;
302
2351
  flex-direction: column;
@@ -322,16 +2371,16 @@ To use this frame correctly, ensure the parent container is set to position rela
322
2371
  }
323
2372
  }
324
2373
 
325
- .da-footer__footer-card {
326
2374
  .da-footer__footer-card{
327
2375
  border-radius: 8px;
328
2376
  border: 1px solid var(--White, #F8F8F8);
329
2377
  background: var(--Gradient-footer, linear-gradient(135deg, rgba(180, 101, 198, 0.80) 0.12%, rgba(212, 19, 255, 0.50) 26.45%, #053FBB 83.92%));
330
2378
  }
2379
+
2380
+ .da-footer__footer-card {
331
2381
  padding: var(--space-xl);
332
2382
  }
333
2383
 
334
- .da-footer__footer-card-cta {
335
2384
  .da-footer__footer-card-cta {
336
2385
  background: transparent;
337
2386
  border:none;
@@ -340,6 +2389,8 @@ background: var(--Gradient-footer, linear-gradient(135deg, rgba(180, 101, 198, 0
340
2389
  .da-footer__footer-card-cta:hover{
341
2390
  border-color: var(--accent)!important;
342
2391
  }
2392
+
2393
+ .da-footer__footer-card-cta {
343
2394
  padding-left: 0;
344
2395
  }
345
2396
 
@@ -372,13 +2423,14 @@ background: var(--Gradient-footer, linear-gradient(135deg, rgba(180, 101, 198, 0
372
2423
  font-size: var(--text-xs);
373
2424
  }
374
2425
 
375
- .da-footer__motto-text {
376
2426
  .da-footer__motto-text{
377
2427
  background: linear-gradient(127deg, rgba(241, 179, 255, 0.80) 6.92%, rgba(212, 19, 255, 0.50) 34.46%, #7895D3 86.62%);
378
2428
  background-clip: text;
379
2429
  -webkit-background-clip: text;
380
2430
  -webkit-text-fill-color: transparent;
381
2431
  }
2432
+
2433
+ .da-footer__motto-text {
382
2434
  font-size: var(--T1);
383
2435
  font-weight: 200;
384
2436
  text-transform: uppercase;
@@ -406,8 +2458,9 @@ background-clip: text;
406
2458
  row-gap: var(--content-gap);
407
2459
  }
408
2460
 
409
- .da-footer__ul {
410
2461
  .da-footer__ul {list-style: none;}
2462
+
2463
+ .da-footer__ul {
411
2464
  row-gap: calc(var(--fr-content-gap) * .5);
412
2465
  margin-top: 0;
413
2466
  margin-bottom: 0;
@@ -441,11 +2494,9 @@ background-clip: text;
441
2494
  min-width: 15rem;
442
2495
  }
443
2496
 
444
- .header__logo--dark {
445
2497
  .header__logo--dark{
446
2498
  display: none;
447
2499
  }
448
- }
449
2500
 
450
2501
  .hero-center {
451
2502
  position: relative;
@@ -532,7 +2583,6 @@ background-clip: text;
532
2583
  column-gap: var(--space-xxl);
533
2584
  }
534
2585
 
535
- .intro-comp {
536
2586
  .intro-comp[data-theme="light"] > *:not(a) {
537
2587
  color: var(--white);
538
2588
  }
@@ -560,11 +2610,12 @@ background-clip: text;
560
2610
  }
561
2611
 
562
2612
  }
2613
+
2614
+ .intro-comp {
563
2615
  row-gap: var(--content-gap);
564
2616
  column-gap: var(--content-gap);
565
2617
  }
566
2618
 
567
- .intro-comp__accent {
568
2619
  .intro-comp__accent{
569
2620
  order:-1;
570
2621
  }
@@ -572,11 +2623,12 @@ background-clip: text;
572
2623
  .intro-comp__accent[data-accent-color="primary"]{
573
2624
  color: var(--primary);
574
2625
  }
2626
+
2627
+ .intro-comp__accent {
575
2628
  font-weight: 500;
576
2629
  text-transform: uppercase;
577
2630
  }
578
2631
 
579
- .intro-comp__heading {
580
2632
  .intro-comp__heading[data-heading-size="t1"]{
581
2633
  font-size: var(--T1);
582
2634
  }
@@ -607,11 +2659,12 @@ background-clip: text;
607
2659
  .intro-comp__heading[data-heading-weight="700"]{
608
2660
  font-weight: 700;
609
2661
  }
2662
+
2663
+ .intro-comp__heading {
610
2664
  color: var(--black);
611
2665
  text-align: left;
612
2666
  }
613
2667
 
614
- .intro-comp__lede {
615
2668
  .intro-comp__lede{
616
2669
  text-wrap: balance;
617
2670
  }
@@ -629,6 +2682,8 @@ background-clip: text;
629
2682
  .intro-comp__lede[data-lede-size="text-xl"]{
630
2683
  font-size: var(--text-xl);
631
2684
  }
2685
+
2686
+ .intro-comp__lede {
632
2687
  max-width: 70ch;
633
2688
  }
634
2689
 
@@ -665,7 +2720,6 @@ background-clip: text;
665
2720
  }
666
2721
  }
667
2722
 
668
- .landing-banner__icon {
669
2723
  .landing-banner__icon {
670
2724
  translate: 0% -50%;
671
2725
  background: transparent;
@@ -678,6 +2732,8 @@ background-clip: text;
678
2732
  border: none!important;
679
2733
  color: transparent!important;
680
2734
  }
2735
+
2736
+ .landing-banner__icon {
681
2737
  position: absolute;
682
2738
  top: 50%;
683
2739
  right: var(--gutter);
@@ -702,7 +2758,6 @@ background-clip: text;
702
2758
  }
703
2759
  }
704
2760
 
705
- .list {
706
2761
  .list {
707
2762
  list-style-type: none;
708
2763
  }
@@ -712,6 +2767,8 @@ background-clip: text;
712
2767
  }
713
2768
 
714
2769
 
2770
+
2771
+ .list {
715
2772
  row-gap: .5em;
716
2773
  display: flex;
717
2774
  flex-direction: column;
@@ -804,8 +2861,7 @@ background-clip: text;
804
2861
 
805
2862
  .mm-inner__heading-wrapper {
806
2863
  padding-bottom: var(--content-gap);
807
- border-color: var(--neutral-semi-dark);
808
- border-style: solid;
2864
+ border-bottom: 1px solid var(--neutral-semi-dark);
809
2865
  width: fit;
810
2866
  }
811
2867
 
@@ -884,11 +2940,9 @@ background-clip: text;
884
2940
  color: var(--white);
885
2941
  }
886
2942
 
887
- .overlay-gradient {
888
2943
  .overlay-gradient {
889
2944
  background: linear-gradient(90deg, rgba(5, 63, 187, 0.80) 0%, rgba(0, 179, 255, 0.80) 100%);
890
2945
  }
891
- }
892
2946
 
893
2947
  .popup-lead__close-icon {
894
2948
  position: absolute;
@@ -927,7 +2981,6 @@ background-clip: text;
927
2981
  max-width: 360;
928
2982
  }
929
2983
 
930
- .pseudo-grid-bg-new {
931
2984
  .pseudo-grid-bg-new::before {
932
2985
  content: "";
933
2986
  position: absolute;
@@ -941,13 +2994,10 @@ background-clip: text;
941
2994
  background-repeat: no-repeat;
942
2995
  pointer-events: none;
943
2996
  }
944
- }
945
2997
 
946
- .rd-content {
947
2998
  .rd-content * {
948
2999
  color: var(--white);
949
3000
  }
950
- }
951
3001
 
952
3002
  .rd-content__col {
953
3003
  row-gap: var(--container-gap);
@@ -955,8 +3005,7 @@ background-clip: text;
955
3005
 
956
3006
  .rd-content-card__heading-wrapper {
957
3007
  padding-bottom: var(--content-gap);
958
- border-color: var(--white);
959
- border-style: solid;
3008
+ border-bottom: 1px solid var(--white);
960
3009
  }
961
3010
 
962
3011
  .rd-content-card__logo {
@@ -980,7 +3029,6 @@ background-clip: text;
980
3029
  text-transform: uppercase;
981
3030
  }
982
3031
 
983
- .rd-hero__content-wrapper {
984
3032
  @media (min-width: 992px) {
985
3033
  .rd-hero__content-wrapper[data-alignment="is-center"] .rd-hero__content-wrapper-inner {
986
3034
  display: flex;
@@ -1000,6 +3048,8 @@ background-clip: text;
1000
3048
  justify-content: center;
1001
3049
  }
1002
3050
  }
3051
+
3052
+ .rd-hero__content-wrapper {
1003
3053
  row-gap: var(--content-gap);
1004
3054
  align-items: flex-start;
1005
3055
  justify-content: flex-end;
@@ -1007,18 +3057,20 @@ background-clip: text;
1007
3057
  z-index: 1;
1008
3058
  }
1009
3059
 
1010
- .rd-hero__content-wrapper-inner {
1011
3060
  .rd-hero__content-wrapper-inner[data-max-width="65ch"]{
1012
3061
  max-width: 65ch;
1013
3062
  }
3063
+
3064
+ .rd-hero__content-wrapper-inner {
1014
3065
  max-width: 55ch;
1015
3066
  }
1016
3067
 
1017
- .rd-hero__heading {
1018
3068
  p.rd-hero__heading{
1019
3069
  font-weight: 200;
1020
3070
  max-width: 15ch;
1021
3071
  }
3072
+
3073
+ .rd-hero__heading {
1022
3074
  font-size: var(--h1);
1023
3075
  color: var(--white);
1024
3076
  }
@@ -1053,11 +3105,9 @@ p.rd-hero__heading{
1053
3105
  font-weight: 200;
1054
3106
  }
1055
3107
 
1056
- .section-boxed {
1057
3108
  .section-boxed ~ .section-boxed {
1058
3109
  padding-block: 0 var(--container-gap);
1059
3110
  }
1060
- }
1061
3111
 
1062
3112
  .single-event-card {
1063
3113
  padding: var(--space-xl);