@datrix-team-product/website-ds 0.2.1 → 0.2.3

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 (3) hide show
  1. package/dist/bricks-preview.css +842 -0
  2. package/package.json +1 -1
  3. package/src/acss-live.json +2 -2
package/dist/bricks-preview.css CHANGED
@@ -11,38 +11,621 @@
11
11
  --T1: clamp(5rem, 3.857rem + 3.571vw, 9rem);
12
12
  --T2: clamp(4.2rem, 3.571rem + 1.964vw, 6.4rem);
13
13
  --accent: #d636ff;
14
+ --accent-b: 255;
15
+ --accent-comp: #60ff38;
16
+ --accent-comp-h: 468;
17
+ --accent-dark: #c135e3;
18
+ --accent-dark-h: 288;
19
+ --accent-dark-l: 55%;
20
+ --accent-dark-s: 76%;
21
+ --accent-g: 54;
22
+ --accent-h: 288;
23
+ --accent-hex: #d636ff;
24
+ --accent-hover: #e066ff;
25
+ --accent-hover-h: 288;
26
+ --accent-hover-l: 70%;
27
+ --accent-hover-s: 100%;
28
+ --accent-hsl: 288 100% 61%;
29
+ --accent-l: 61%;
30
+ --accent-light: #f0b3ff;
31
+ --accent-light-h: 288;
32
+ --accent-light-l: 85%;
33
+ --accent-light-s: 100%;
34
+ --accent-medium: #c0f;
35
+ --accent-medium-h: 288;
36
+ --accent-medium-l: 50%;
37
+ --accent-medium-s: 100%;
38
+ --accent-r: 214;
39
+ --accent-rgb: 214 54 255;
40
+ --accent-s: 100%;
41
+ --accent-semi-dark: #8f00b3;
42
+ --accent-semi-dark-h: 288;
43
+ --accent-semi-dark-l: 35%;
44
+ --accent-semi-dark-s: 100%;
45
+ --accent-semi-light: #db4dff;
46
+ --accent-semi-light-h: 288;
47
+ --accent-semi-light-l: 65%;
48
+ --accent-semi-light-s: 100%;
49
+ --accent-ultra-dark: #290033;
50
+ --accent-ultra-dark-h: 288;
51
+ --accent-ultra-dark-l: 10%;
52
+ --accent-ultra-dark-s: 100%;
53
+ --accent-ultra-light: #fae6ff;
54
+ --accent-ultra-light-h: 288;
55
+ --accent-ultra-light-l: 95%;
56
+ --accent-ultra-light-s: 100%;
57
+ --accordion-icon-size: 2.4rem;
58
+ --admin-bar-height: var(--wp-admin--admin-bar--height, 0px);
59
+ --auto-grid-aggressiveness: 0.7;
60
+ --base-heading-lh: calc(1.2);
61
+ --base-text-lh: 1.2;
62
+ --bg-dark: var(--primary);
63
+ --bg-dark-button: unset;
64
+ --bg-dark-heading: var(--white);
65
+ --bg-dark-link: var(--white);
66
+ --bg-dark-link-hover: var(--white);
67
+ --bg-dark-text: var(--white);
68
+ --bg-light: var(--neutral-ultra-light);
69
+ --bg-light-button: primary;
70
+ --bg-light-heading: var(--text-dark);
71
+ --bg-light-link: var(--primary);
72
+ --bg-light-link-hover: var(--primary-hover);
73
+ --bg-light-text: var(--text-dark);
74
+ --bg-ultra-dark: var(--primary-dark);
75
+ --bg-ultra-dark-button: accent;
76
+ --bg-ultra-dark-heading: var(--text-light);
77
+ --bg-ultra-dark-link: var(--white);
78
+ --bg-ultra-dark-link-hover: var(--primary-hover);
79
+ --bg-ultra-dark-text: var(--white);
80
+ --bg-ultra-light: var(--shade-ultra-light);
81
+ --bg-ultra-light-button: primary;
82
+ --bg-ultra-light-heading: var(--text-dark);
83
+ --bg-ultra-light-link: var(--primary);
84
+ --bg-ultra-light-link-hover: var(--primary-hover);
85
+ --bg-ultra-light-text: var(--text-dark);
14
86
  --black: #0f0f0f;
87
+ --black-trans-10: rgba(0, 0, 0, 0.1);
88
+ --black-trans-20: rgba(0, 0, 0, 0.2);
15
89
  --black-trans-30: rgba(0, 0, 0, 0.3);
90
+ --black-trans-40: rgba(0, 0, 0, 0.4);
91
+ --black-trans-50: rgba(0, 0, 0, 0.5);
92
+ --black-trans-60: rgba(0, 0, 0, 0.6);
93
+ --black-trans-70: rgba(0, 0, 0, 0.7);
94
+ --black-trans-80: rgba(0, 0, 0, 0.8);
95
+ --black-trans-90: rgba(0, 0, 0, 0.9);
96
+ --blockquote-spacing: var(--paragraph-spacing);
97
+ --body-bg-color: var(--pure-white);
98
+ --body-color: var(--neutral-dark);
99
+ --border: var(--border-size) var(--border-style) var(--border-color-dark);
100
+ --border-color-dark: var(--black-trans-20);
101
+ --border-color-light: var(--white-trans-20);
102
+ --border-dark: var(--border-size) var(--border-style) var(--border-color-dark);
103
+ --border-light: var(--border-size) var(--border-style) var(--border-color-light);
104
+ --border-size: 1px;
105
+ --border-style: solid;
106
+ --border-width: 1px;
107
+ --box-shadow-1: 0 10px 10px 0 rgba(0, 0, 0, 0.1);
108
+ --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);
109
+ --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);
110
+ --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);
111
+ --box-shadow-m: 0 10px 10px 0 rgba(0, 0, 0, 0.1);
112
+ --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);
113
+ --brxe-toggle-scale: 1;
114
+ --btn-border-radius: 50vw;
115
+ --btn-border-size: 0.1rem;
116
+ --btn-border-style: solid;
117
+ --btn-border-width: 0.1rem;
118
+ --btn-font-style: normal;
119
+ --btn-font-weight: 300;
120
+ --btn-icon-size: 1.4rem;
121
+ --btn-justify-content: center;
122
+ --btn-letter-spacing: 0;
123
+ --btn-line-height: 1;
124
+ --btn-min-width: 14rem;
125
+ --btn-outline-border-width: 0.1rem;
126
+ --btn-pad-x: 1.6rem;
127
+ --btn-pad-y: 0.8rem;
128
+ --btn-padding-block: 0.8rem;
129
+ --btn-padding-inline: 1.6rem;
130
+ --btn-radius: 50vw;
131
+ --btn-text-align: center;
132
+ --btn-text-decoration: none;
133
+ --btn-text-decoration-hover: none;
134
+ --btn-text-style: normal;
135
+ --btn-text-transform: capitalize;
136
+ --btn-weight: 300;
137
+ --btn-width: 14;
138
+ --col-rule-width-l: 0.5em;
139
+ --col-rule-width-m: 0.3em;
140
+ --col-rule-width-s: 0.1em;
141
+ --col-width-l: 38rem;
142
+ --col-width-m: 25rem;
143
+ --col-width-s: 13rem;
16
144
  --container-gap: var(--space-48);
17
145
  --content-gap: var(--space-m);
146
+ --content-width: 128rem;
147
+ --content-width-safe: min(var(--content-width), calc(100% - var(--gutter) * 2));
148
+ --danger: #F87171;
149
+ --danger-b: 113;
150
+ --danger-comp: #72f8f8;
151
+ --danger-comp-h: 180;
152
+ --danger-dark: #7a0606;
153
+ --danger-dark-h: 0;
154
+ --danger-dark-l: 25%;
155
+ --danger-dark-s: 91%;
156
+ --danger-g: 113;
157
+ --danger-h: 0;
158
+ --danger-hex: #F87171;
159
+ --danger-hover: #fba7a7;
160
+ --danger-hover-h: 0;
161
+ --danger-hover-l: 82%;
162
+ --danger-hover-s: 91%;
163
+ --danger-hsl: 0 91% 71%;
164
+ --danger-l: 71%;
165
+ --danger-light: #fcb6b6;
166
+ --danger-light-h: 0;
167
+ --danger-light-l: 85%;
168
+ --danger-light-s: 91%;
169
+ --danger-medium: #f40b0b;
170
+ --danger-medium-h: 0;
171
+ --danger-medium-l: 50%;
172
+ --danger-medium-s: 91%;
173
+ --danger-r: 248;
174
+ --danger-rgb: 248 113 113;
175
+ --danger-s: 91%;
176
+ --danger-semi-dark: #aa0808;
177
+ --danger-semi-dark-h: 0;
178
+ --danger-semi-dark-l: 35%;
179
+ --danger-semi-dark-s: 91%;
180
+ --danger-semi-light: #f75555;
181
+ --danger-semi-light-h: 0;
182
+ --danger-semi-light-l: 65%;
183
+ --danger-semi-light-s: 91%;
184
+ --danger-ultra-dark: #310202;
185
+ --danger-ultra-dark-h: 0;
186
+ --danger-ultra-dark-l: 10%;
187
+ --danger-ultra-dark-s: 91%;
188
+ --danger-ultra-light: #fee7e7;
189
+ --danger-ultra-light-h: 0;
190
+ --danger-ultra-light-l: 95%;
191
+ --danger-ultra-light-s: 91%;
192
+ --divider: var(--divider-size) var(--divider-style) var(--divider-color-dark);
193
+ --divider-color-dark: var(--black-trans-20);
194
+ --divider-color-light: var(--white-trans-20);
195
+ --divider-dark: var(--divider-size) var(--divider-style) var(--divider-color-dark);
196
+ --divider-gap: var(--content-gap);
197
+ --divider-inline-size: 100%;
198
+ --divider-light: var(--divider-size) var(--divider-style) var(--divider-color-light);
199
+ --divider-size: 1px;
200
+ --divider-style: solid;
201
+ --f-btn-border-radius: var(--btn-radius);
202
+ --f-btn-border-style: solid;
203
+ --f-btn-border-width: var(--btn-border-width);
204
+ --f-btn-font-weight: 400;
205
+ --f-btn-line-height: 1;
206
+ --f-btn-margin-top: 1em;
207
+ --f-btn-padding-x: 1.5em;
208
+ --f-btn-padding-y: 0.75em;
209
+ --f-btn-text-decoration: none;
210
+ --f-btn-text-size: clamp(1.4rem, calc(0.4347826087vw + 1.2434782609rem), 1.8rem);
211
+ --f-btn-text-transform: none;
212
+ --f-field-margin-bottom: 1.5em;
213
+ --f-fieldset-margin-bottom: 1.5em;
214
+ --f-grid-gutter: 2rem;
215
+ --f-help-line-height: 1.4;
216
+ --f-help-margin-block: 0.5em 0;
217
+ --f-help-size: clamp(1.2rem, calc(0.2173913043vw + 1.1217391304rem), 1.4rem);
218
+ --f-help-text-weight: 400;
219
+ --f-input-border-bottom-size: 0.1rem;
220
+ --f-input-border-left-size: 0.1rem;
221
+ --f-input-border-radius: var(--radius-xs);
222
+ --f-input-border-right-size: 0.1rem;
223
+ --f-input-border-style: solid;
224
+ --f-input-border-top-size: 0.1rem;
225
+ --f-input-font-weight: 300;
226
+ --f-input-height: 4.8rem;
227
+ --f-input-line-height: 1;
228
+ --f-input-padding-x: 1em;
229
+ --f-input-padding-y: 0.5em;
230
+ --f-input-size: clamp(1.4rem, calc(0.4347826087vw + 1.2434782609rem), 1.8rem);
231
+ --f-label-font-weight: 300;
232
+ --f-label-inside-position-left: 1.5em;
233
+ --f-label-inside-position-top: 0;
234
+ --f-label-inside-scale: 1;
235
+ --f-label-line-height: 1;
236
+ --f-label-margin-bottom: 0.5em;
237
+ --f-label-padding-x: 0;
238
+ --f-label-padding-y: 0;
239
+ --f-label-size: clamp(1.4rem, calc(0.2173913043vw + 1.3217391304rem), 1.6rem);
240
+ --f-label-text-transform: none;
241
+ --f-legend-border: none;
242
+ --f-legend-line-height: 1.2;
243
+ --f-legend-margin-bottom: 1em;
244
+ --f-legend-size: clamp(1.4rem, calc(0.2173913043vw + 1.3217391304rem), 1.6rem);
245
+ --f-legend-text-weight: 400;
246
+ --f-option-label-font-weight: 300;
247
+ --f-option-label-line-height: 1.4;
248
+ --f-option-label-size: clamp(1.4rem, calc(0.2173913043vw + 1.3217391304rem), 1.6rem);
249
+ --f-option-label-spacing: 0.5em;
250
+ --f-progress-bar-radius: var(--btn-radius);
251
+ --f-progress-height: 3rem;
252
+ --f-tab-active-border-bottom-size: 3px;
253
+ --f-tab-active-border-size: 0;
254
+ --f-tab-active-border-style: solid;
255
+ --f-tab-active-text-weight: 600;
256
+ --f-tab-border-radius: 0;
257
+ --f-tab-border-size: 0;
258
+ --f-tab-border-style: solid;
259
+ --f-tab-group-border-bottom-size: 2px;
260
+ --f-tab-group-border-bottom-style: solid;
261
+ --f-tab-group-margin-bottom: 3rem;
262
+ --f-tab-group-padding-x: 0;
263
+ --f-tab-group-padding-y: 0;
264
+ --f-tab-margin-x: 0;
265
+ --f-tab-padding-x: 1.5em;
266
+ --f-tab-padding-y: 0.75em;
267
+ --f-tab-text-align: center;
268
+ --f-tab-text-decoration: none;
269
+ --f-tab-text-line-height: 1;
270
+ --f-tab-text-size: clamp(1.6rem, calc(0.2173913043vw + 1.5217391304rem), 1.8rem);
271
+ --f-tab-text-transform: none;
272
+ --f-tab-text-weight: 400;
273
+ --f-tab-width: auto;
274
+ --figcaption-spacing: 0.5em;
275
+ --figure-spacing: var(--paragraph-spacing);
276
+ --fill-white: var(--white);
277
+ --flow-spacing: var(--paragraph-spacing);
278
+ --focus-color: var(--danger);
279
+ --focus-offset: 0.25em;
280
+ --focus-width: 0.2rem;
281
+ --fr-bg-dark: var(--bg-dark);
282
+ --fr-bg-light: var(--bg-light);
283
+ --fr-card-avatar-radius: var(--card-avatar-radius, 50%);
284
+ --fr-card-border-color: var(--card-border-color, var(--shade-light));
285
+ --fr-card-border-size: var(--card-border-width, 0.15rem);
286
+ --fr-card-border-style: var(--card-border-style, solid);
18
287
  --fr-card-gap: var(--card-gap, var(--space-s));
288
+ --fr-card-padding: var(--card-padding, var(--space-m));
289
+ --fr-card-radius: var(--card-radius, var(--radius-xs));
290
+ --fr-container-gap: var(--space-48);
19
291
  --fr-content-gap: var(--space-m);
292
+ --fr-grid-gap: var(--space-l);
20
293
  --fr-hero-padding: var(--section-space-xl);
294
+ --fr-lede-width: 60ch;
295
+ --fr-list-pad-x: 1.25em;
296
+ --fr-list-pad-y: 0.75em;
297
+ --fr-text-dark: var(--text-dark);
298
+ --fr-text-light: var(--text-light);
21
299
  --grid-1: repeat(1, minmax(0, 1fr));
300
+ --grid-1-2: minmax(0, 1fr) minmax(0, 2fr);
22
301
  --grid-1-3: minmax(0, 1fr) minmax(0, 3fr);
302
+ --grid-10: repeat(10, minmax(0, 1fr));
303
+ --grid-11: repeat(11, minmax(0, 1fr));
304
+ --grid-12: repeat(12, minmax(0, 1fr));
23
305
  --grid-2: repeat(2, minmax(0, 1fr));
306
+ --grid-2-1: minmax(0, 2fr) minmax(0, 1fr);
24
307
  --grid-2-3: minmax(0, 2fr) minmax(0, 3fr);
308
+ --grid-3: repeat(3, minmax(0, 1fr));
309
+ --grid-3-1: minmax(0, 3fr) minmax(0, 1fr);
310
+ --grid-3-2: minmax(0, 3fr) minmax(0, 2fr);
25
311
  --grid-4: repeat(4, minmax(0, 1fr));
312
+ --grid-5: repeat(5, minmax(0, 1fr));
313
+ --grid-6: repeat(6, minmax(0, 1fr));
314
+ --grid-7: repeat(7, minmax(0, 1fr));
315
+ --grid-8: repeat(8, minmax(0, 1fr));
316
+ --grid-9: repeat(9, minmax(0, 1fr));
317
+ --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));
318
+ --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));
319
+ --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));
320
+ --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));
321
+ --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));
322
+ --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));
323
+ --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));
324
+ --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));
325
+ --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));
326
+ --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));
327
+ --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));
26
328
  --grid-gap: var(--space-l);
27
329
  --gutter: clamp(2rem, calc(4.347826087vw + 0.4347826087rem), 6rem);
28
330
  --h1: clamp(4rem, calc(0.8695652174vw + 3.6869565217rem), 4.8rem);
331
+ --h1-font-weight: 200;
332
+ --h1-line-height: 1.2;
333
+ --h1-max-width: 100%;
29
334
  --h2: clamp(2.8rem, calc(0.8695652174vw + 2.4869565217rem), 3.6rem);
335
+ --h2-font-weight: 300;
336
+ --h2-line-height: 1.2;
337
+ --h2-max-width: 100%;
30
338
  --h3: clamp(2.2rem, calc(0.652173913vw + 1.9652173913rem), 2.8rem);
339
+ --h3-font-weight: 300;
340
+ --h3-line-height: 1.2;
341
+ --h3-max-width: 100%;
31
342
  --h4: clamp(1.8rem, calc(0.652173913vw + 1.5652173913rem), 2.4rem);
343
+ --h4-font-weight: 300;
344
+ --h4-line-height: calc(1.2);
345
+ --h4-max-width: 100%;
346
+ --h5: clamp(1.6rem, calc(0.4347826087vw + 1.4434782609rem), 2rem);
347
+ --h5-font-weight: 300;
348
+ --h5-line-height: 1.2;
349
+ --h5-max-width: 100%;
350
+ --h6: clamp(1.6rem, calc(0.4347826087vw + 1.4434782609rem), 2rem);
351
+ --h6-max-width: 100%;
352
+ --header-height: 7.2rem;
353
+ --header-height-l: 7.2rem;
354
+ --header-height-m: 7.2rem;
355
+ --header-height-s: 7.2rem;
356
+ --header-height-xl: 7.2rem;
357
+ --heading-font-weight: 300;
358
+ --heading-line-height: calc(1.2);
359
+ --heading-max-width: 100%;
360
+ --heading-spacing: 1.5em;
361
+ --heading-text-wrap: pretty;
362
+ --link-color: var(--primary);
363
+ --link-color-hover: var(--accent);
364
+ --link-decoration: underline;
365
+ --link-decoration-hover: inherit;
366
+ --link-transition: var(--transition);
367
+ --link-underline-offset: 5;
368
+ --link-weight: inherit;
369
+ --list-icon-size: 2.4rem;
370
+ --list-indent-spacing: 2em;
371
+ --list-item-spacing: 0.5em;
372
+ --list-spacing: 1em;
373
+ --mm-pad-h: var(--gutter);
374
+ --mm-pad-v: var(--space-m);
375
+ --nested-list-indent-spacing: 1em;
376
+ --neutral: #000000;
377
+ --neutral-b: 0;
378
+ --neutral-comp: black;
379
+ --neutral-comp-h: 180;
32
380
  --neutral-dark: #3d3d3d;
381
+ --neutral-dark-h: 0;
382
+ --neutral-dark-l: 24%;
383
+ --neutral-dark-s: 0%;
384
+ --neutral-g: 0;
385
+ --neutral-h: 0;
386
+ --neutral-hex: #000000;
387
+ --neutral-hover: black;
388
+ --neutral-hover-h: 0;
389
+ --neutral-hover-l: 0%;
390
+ --neutral-hover-s: 0%;
391
+ --neutral-hsl: 0 0% 0%;
392
+ --neutral-l: 0%;
33
393
  --neutral-light: #d6d6d6;
394
+ --neutral-light-h: 0;
395
+ --neutral-light-l: 84%;
396
+ --neutral-light-s: 0%;
397
+ --neutral-light-trans-10: rgba(214, 214, 214, 0.1);
398
+ --neutral-light-trans-20: rgba(214, 214, 214, 0.2);
399
+ --neutral-light-trans-30: rgba(214, 214, 214, 0.3);
400
+ --neutral-light-trans-40: rgba(214, 214, 214, 0.4);
401
+ --neutral-light-trans-50: rgba(214, 214, 214, 0.5);
402
+ --neutral-light-trans-60: rgba(214, 214, 214, 0.6);
403
+ --neutral-light-trans-70: rgba(214, 214, 214, 0.7);
404
+ --neutral-light-trans-80: rgba(214, 214, 214, 0.8);
405
+ --neutral-light-trans-90: rgba(214, 214, 214, 0.9);
406
+ --neutral-medium: #b3b3b3;
407
+ --neutral-medium-h: 0;
408
+ --neutral-medium-l: 70%;
409
+ --neutral-medium-s: 0%;
410
+ --neutral-r: 0;
411
+ --neutral-rgb: 0 0 0;
412
+ --neutral-s: 0%;
34
413
  --neutral-semi-dark: #636363;
414
+ --neutral-semi-dark-h: 0;
415
+ --neutral-semi-dark-l: 39%;
416
+ --neutral-semi-dark-s: 0%;
35
417
  --neutral-semi-light: #c7c7c7;
418
+ --neutral-semi-light-h: 0;
419
+ --neutral-semi-light-l: 78%;
420
+ --neutral-semi-light-s: 0%;
421
+ --neutral-trans-10: rgba(0, 0, 0, 0.1);
422
+ --neutral-trans-20: rgba(0, 0, 0, 0.2);
423
+ --neutral-trans-30: rgba(0, 0, 0, 0.3);
424
+ --neutral-trans-40: rgba(0, 0, 0, 0.4);
425
+ --neutral-trans-50: rgba(0, 0, 0, 0.5);
426
+ --neutral-trans-60: rgba(0, 0, 0, 0.6);
427
+ --neutral-trans-70: rgba(0, 0, 0, 0.7);
428
+ --neutral-trans-80: rgba(0, 0, 0, 0.8);
429
+ --neutral-trans-90: rgba(0, 0, 0, 0.9);
430
+ --neutral-ultra-dark: #363636;
431
+ --neutral-ultra-dark-h: 0;
432
+ --neutral-ultra-dark-l: 21%;
433
+ --neutral-ultra-dark-s: 0%;
434
+ --neutral-ultra-light: #ededed;
435
+ --neutral-ultra-light-h: 0;
436
+ --neutral-ultra-light-l: 93%;
437
+ --neutral-ultra-light-s: 0%;
438
+ --off: ;;
439
+ --on: initial;
440
+ --option-neutral-btn-outline: on;
441
+ --option-primary-btn-outline: on;
442
+ --option-secondary-btn-outline: on;
443
+ --outline-btn-border-size: 0.1rem;
444
+ --paragraph-spacing: 1em;
36
445
  --primary: #053fbb;
446
+ --primary-b: 187;
447
+ --primary-comp: #bd8305;
448
+ --primary-comp-h: 401;
449
+ --primary-dark: #032a7c;
450
+ --primary-dark-h: 221;
451
+ --primary-dark-l: 25%;
452
+ --primary-dark-s: 95%;
453
+ --primary-dark-trans-10: rgba(3, 42, 124, 0.1);
454
+ --primary-dark-trans-20: rgba(3, 42, 124, 0.2);
455
+ --primary-dark-trans-30: rgba(3, 42, 124, 0.3);
456
+ --primary-dark-trans-40: rgba(3, 42, 124, 0.4);
457
+ --primary-dark-trans-50: rgba(3, 42, 124, 0.5);
458
+ --primary-dark-trans-60: rgba(3, 42, 124, 0.6);
459
+ --primary-dark-trans-70: rgba(3, 42, 124, 0.7);
460
+ --primary-dark-trans-80: rgba(3, 42, 124, 0.8);
461
+ --primary-dark-trans-90: rgba(3, 42, 124, 0.9);
462
+ --primary-g: 63;
463
+ --primary-h: 221;
464
+ --primary-hex: #053fbb;
465
+ --primary-hover: #0649db;
466
+ --primary-hover-h: 221;
467
+ --primary-hover-l: 44%;
468
+ --primary-hover-s: 95%;
469
+ --primary-hsl: 221 95% 38%;
470
+ --primary-l: 38%;
471
+ --primary-light: #5187fb;
472
+ --primary-light-h: 221;
473
+ --primary-light-l: 65%;
474
+ --primary-light-s: 95%;
475
+ --primary-light-trans-10: rgba(81, 135, 251, 0.1);
476
+ --primary-light-trans-20: rgba(81, 135, 251, 0.2);
477
+ --primary-light-trans-30: rgba(81, 135, 251, 0.3);
478
+ --primary-light-trans-40: rgba(81, 135, 251, 0.4);
479
+ --primary-light-trans-50: rgba(81, 135, 251, 0.5);
480
+ --primary-light-trans-60: rgba(81, 135, 251, 0.6);
481
+ --primary-light-trans-70: rgba(81, 135, 251, 0.7);
482
+ --primary-light-trans-80: rgba(81, 135, 251, 0.8);
483
+ --primary-light-trans-90: rgba(81, 135, 251, 0.9);
484
+ --primary-medium: #0653f9;
485
+ --primary-medium-h: 221;
486
+ --primary-medium-l: 50%;
487
+ --primary-medium-s: 95%;
488
+ --primary-r: 5;
489
+ --primary-rgb: 5 63 187;
490
+ --primary-s: 95%;
491
+ --primary-semi-dark: #043aae;
492
+ --primary-semi-dark-h: 221;
493
+ --primary-semi-dark-l: 35%;
494
+ --primary-semi-dark-s: 95%;
495
+ --primary-semi-light: #5187fb;
496
+ --primary-semi-light-h: 221;
497
+ --primary-semi-light-l: 65%;
498
+ --primary-semi-light-s: 95%;
499
+ --primary-trans-10: rgba(5, 63, 187, 0.1);
500
+ --primary-trans-20: rgba(5, 63, 187, 0.2);
501
+ --primary-trans-30: rgba(5, 63, 187, 0.3);
37
502
  --primary-trans-40: rgba(5, 63, 187, 0.4);
503
+ --primary-trans-50: rgba(5, 63, 187, 0.5);
504
+ --primary-trans-60: rgba(5, 63, 187, 0.6);
505
+ --primary-trans-70: rgba(5, 63, 187, 0.7);
506
+ --primary-trans-80: rgba(5, 63, 187, 0.8);
507
+ --primary-trans-90: rgba(5, 63, 187, 0.9);
38
508
  --primary-ultra-dark: #000f5c;
509
+ --primary-ultra-dark-h: 230;
510
+ --primary-ultra-dark-l: 18%;
511
+ --primary-ultra-dark-s: 100%;
512
+ --primary-ultra-dark-trans-10: rgba(0, 15, 92, 0.1);
513
+ --primary-ultra-dark-trans-20: rgba(0, 15, 92, 0.2);
514
+ --primary-ultra-dark-trans-30: rgba(0, 15, 92, 0.3);
515
+ --primary-ultra-dark-trans-40: rgba(0, 15, 92, 0.4);
516
+ --primary-ultra-dark-trans-50: rgba(0, 15, 92, 0.5);
517
+ --primary-ultra-dark-trans-60: rgba(0, 15, 92, 0.6);
518
+ --primary-ultra-dark-trans-70: rgba(0, 15, 92, 0.7);
519
+ --primary-ultra-dark-trans-80: rgba(0, 15, 92, 0.8);
520
+ --primary-ultra-dark-trans-90: rgba(0, 15, 92, 0.9);
521
+ --primary-ultra-light: #006cd1;
522
+ --primary-ultra-light-h: 209;
523
+ --primary-ultra-light-l: 41%;
524
+ --primary-ultra-light-s: 100%;
39
525
  --pure-white: #FFFFFF;
40
526
  --radius: 2rem;
527
+ --radius-50: 50%;
41
528
  --radius-circle: 50vw;
529
+ --radius-l: 3rem;
530
+ --radius-m: 2rem;
531
+ --radius-none: 0;
532
+ --radius-s: 1.3333333333rem;
533
+ --radius-xl: 4.5rem;
42
534
  --radius-xs: 0.8888888889rem;
535
+ --radius-xxl: 6.75rem;
536
+ --root-font-size: 62.5%;
43
537
  --secondary: #00b3ff;
538
+ --secondary-b: 255;
539
+ --secondary-comp: #ff4d00;
540
+ --secondary-comp-h: 378;
541
+ --secondary-dark: #00a1e6;
542
+ --secondary-dark-h: 198;
543
+ --secondary-dark-l: 45%;
544
+ --secondary-dark-s: 100%;
545
+ --secondary-dark-trans-10: rgba(0, 161, 230, 0.1);
546
+ --secondary-dark-trans-20: rgba(0, 161, 230, 0.2);
547
+ --secondary-dark-trans-30: rgba(0, 161, 230, 0.3);
548
+ --secondary-dark-trans-40: rgba(0, 161, 230, 0.4);
549
+ --secondary-dark-trans-50: rgba(0, 161, 230, 0.5);
550
+ --secondary-dark-trans-60: rgba(0, 161, 230, 0.6);
551
+ --secondary-dark-trans-70: rgba(0, 161, 230, 0.7);
552
+ --secondary-dark-trans-80: rgba(0, 161, 230, 0.8);
553
+ --secondary-dark-trans-90: rgba(0, 161, 230, 0.9);
554
+ --secondary-g: 179;
555
+ --secondary-h: 198;
556
+ --secondary-hex: #00b3ff;
557
+ --secondary-hover: #24bdff;
558
+ --secondary-hover-h: 198;
559
+ --secondary-hover-l: 57%;
560
+ --secondary-hover-s: 100%;
561
+ --secondary-hsl: 198 100% 50%;
562
+ --secondary-l: 50%;
563
+ --secondary-light: #aeccdb;
564
+ --secondary-light-h: 200;
565
+ --secondary-light-l: 77%;
566
+ --secondary-light-s: 38%;
567
+ --secondary-light-trans-10: rgba(174, 204, 219, 0.1);
568
+ --secondary-light-trans-20: rgba(174, 204, 219, 0.2);
569
+ --secondary-light-trans-30: rgba(174, 204, 219, 0.3);
570
+ --secondary-light-trans-40: rgba(174, 204, 219, 0.4);
571
+ --secondary-light-trans-50: rgba(174, 204, 219, 0.5);
572
+ --secondary-light-trans-60: rgba(174, 204, 219, 0.6);
573
+ --secondary-light-trans-70: rgba(174, 204, 219, 0.7);
574
+ --secondary-light-trans-80: rgba(174, 204, 219, 0.8);
575
+ --secondary-light-trans-90: rgba(174, 204, 219, 0.9);
576
+ --secondary-medium: #00b3ff;
577
+ --secondary-medium-h: 198;
578
+ --secondary-medium-l: 50%;
579
+ --secondary-medium-s: 100%;
580
+ --secondary-r: 0;
581
+ --secondary-rgb: 0 179 255;
582
+ --secondary-s: 100%;
583
+ --secondary-semi-dark: #007db3;
584
+ --secondary-semi-dark-h: 198;
585
+ --secondary-semi-dark-l: 35%;
586
+ --secondary-semi-dark-s: 100%;
587
+ --secondary-semi-light: #84b1c8;
588
+ --secondary-semi-light-h: 200;
589
+ --secondary-semi-light-l: 65%;
590
+ --secondary-semi-light-s: 38%;
591
+ --secondary-trans-10: rgba(0, 179, 255, 0.1);
592
+ --secondary-trans-20: rgba(0, 179, 255, 0.2);
593
+ --secondary-trans-30: rgba(0, 179, 255, 0.3);
594
+ --secondary-trans-40: rgba(0, 179, 255, 0.4);
595
+ --secondary-trans-50: rgba(0, 179, 255, 0.5);
596
+ --secondary-trans-60: rgba(0, 179, 255, 0.6);
597
+ --secondary-trans-70: rgba(0, 179, 255, 0.7);
598
+ --secondary-trans-80: rgba(0, 179, 255, 0.8);
599
+ --secondary-trans-90: rgba(0, 179, 255, 0.9);
600
+ --secondary-ultra-dark: #002433;
601
+ --secondary-ultra-dark-h: 198;
602
+ --secondary-ultra-dark-l: 10%;
603
+ --secondary-ultra-dark-s: 100%;
604
+ --secondary-ultra-dark-trans-10: rgba(0, 36, 51, 0.1);
605
+ --secondary-ultra-dark-trans-20: rgba(0, 36, 51, 0.2);
606
+ --secondary-ultra-dark-trans-30: rgba(0, 36, 51, 0.3);
607
+ --secondary-ultra-dark-trans-40: rgba(0, 36, 51, 0.4);
608
+ --secondary-ultra-dark-trans-50: rgba(0, 36, 51, 0.5);
609
+ --secondary-ultra-dark-trans-60: rgba(0, 36, 51, 0.6);
610
+ --secondary-ultra-dark-trans-70: rgba(0, 36, 51, 0.7);
611
+ --secondary-ultra-dark-trans-80: rgba(0, 36, 51, 0.8);
612
+ --secondary-ultra-dark-trans-90: rgba(0, 36, 51, 0.9);
613
+ --secondary-ultra-light: #c3e2f3;
614
+ --secondary-ultra-light-h: 201;
615
+ --secondary-ultra-light-l: 86%;
616
+ --secondary-ultra-light-s: 67%;
617
+ --section-gutter: 2rem;
618
+ --section-padding-block: clamp(4rem, calc(5.22vw + 2rem), 8rem);
619
+ --section-padding-x: clamp(2rem, calc(4.347826087vw + 0.4347826087rem), 6rem);
620
+ --section-space-l: clamp(6.3984rem, calc(7.7191304348vw + 3.6195130435rem), 13.5rem);
44
621
  --section-space-m: clamp(4.8rem, calc(4.5652173913vw + 3.1565217391rem), 9rem);
622
+ --section-space-s: clamp(3.6009002251rem, calc(2.6077171467vw + 2.6621220523rem), 6rem);
45
623
  --section-space-xl: clamp(8.5290672rem, calc(12.7401443478vw + 3.9426152348rem), 20.25rem);
624
+ --section-space-xs: clamp(2.7013505064rem, calc(1.4115755365vw + 2.1931833133rem), 4rem);
625
+ --section-space-xxl: clamp(11.3692465776rem, calc(20.658427633vw + 3.9322126297rem), 30.375rem);
626
+ --semi-dark-medium: #595959;
627
+ --shade-black: #000;
628
+ --shade-white: #fff;
46
629
  --space-48: clamp(2.8rem, calc(2.09vw + 2.15rem), 4.8rem);
47
630
  --space-60: clamp(3.2rem, calc(3.65vw + 1.83rem), 6.0rem);
48
631
  --space-80: clamp(4.0rem, calc(5.22vw + 2.05rem), 8.0rem);
@@ -52,13 +635,205 @@
52
635
  --space-xl: clamp(1.8rem, calc(0.78vw + 1.58rem), 2.4rem);
53
636
  --space-xs: clamp(0.4rem, 0.4rem, 0.4rem);
54
637
  --space-xxl: clamp(2.4rem, calc(1.04vw + 2.11rem), 3.2rem);
638
+ --square-icon: clamp(3rem, 1.2rem + 6vw, 6rem);
639
+ --sticky-l: 10%;
640
+ --sticky-m: 5%;
641
+ --sticky-s: 2.5%;
642
+ --success: #29A745;
643
+ --success-b: 69;
644
+ --success-comp: #a8298d;
645
+ --success-comp-h: 313;
646
+ --success-dark: #0f3e19;
647
+ --success-dark-h: 133;
648
+ --success-dark-l: 15%;
649
+ --success-dark-s: 61%;
650
+ --success-g: 167;
651
+ --success-h: 133;
652
+ --success-hex: #29A745;
653
+ --success-hover: #2fc24f;
654
+ --success-hover-h: 133;
655
+ --success-hover-l: 47.15%;
656
+ --success-hover-s: 61%;
657
+ --success-hsl: 133 61% 41%;
658
+ --success-l: 41%;
659
+ --success-light: #c1f0cc;
660
+ --success-light-h: 133;
661
+ --success-light-l: 85%;
662
+ --success-light-s: 61%;
663
+ --success-medium: #32cd53;
664
+ --success-medium-h: 133;
665
+ --success-medium-l: 50%;
666
+ --success-medium-s: 61%;
667
+ --success-r: 41;
668
+ --success-rgb: 41 167 69;
669
+ --success-s: 61%;
670
+ --success-semi-dark: #23903a;
671
+ --success-semi-dark-h: 133;
672
+ --success-semi-dark-l: 35%;
673
+ --success-semi-dark-s: 61%;
674
+ --success-semi-light: #6fdc87;
675
+ --success-semi-light-h: 133;
676
+ --success-semi-light-l: 65%;
677
+ --success-semi-light-s: 61%;
678
+ --success-ultra-dark: #2b0809;
679
+ --success-ultra-dark-h: 358;
680
+ --success-ultra-dark-l: 10%;
681
+ --success-ultra-dark-s: 70%;
682
+ --success-ultra-light: #eafaee;
683
+ --success-ultra-light-h: 133;
684
+ --success-ultra-light-l: 95%;
685
+ --success-ultra-light-s: 61%;
686
+ --text-color: var(--neutral-dark);
687
+ --text-dark: var(--black);
688
+ --text-dark-muted: var(--black-trans-80);
55
689
  --text-l: clamp(1.8rem, calc(0.2173913043vw + 1.7217391304rem), 2rem);
690
+ --text-l-line-height: 1.6;
691
+ --text-l-max-width: 100%;
56
692
  --text-light: var(--white);
693
+ --text-light-muted: #9FABB9;
694
+ --text-line-height: 1.2;
57
695
  --text-m: clamp(1.6rem, calc(0.2173913043vw + 1.5217391304rem), 1.8rem);
696
+ --text-m-font-weight: 300;
697
+ --text-m-line-height: 1.2;
698
+ --text-m-max-width: 100%;
58
699
  --text-s: clamp(1.4rem, calc(0.2173913043vw + 1.3217391304rem), 1.6rem);
700
+ --text-s-font-weight: 300;
701
+ --text-s-line-height: 1.2;
702
+ --text-s-max-width: 100%;
703
+ --text-text-wrap: pretty;
59
704
  --text-xl: clamp(2rem, calc(0.4347826087vw + 1.8434782609rem), 2.4rem);
705
+ --text-xl-line-height: 1.5;
706
+ --text-xl-max-width: 100%;
60
707
  --text-xs: clamp(1.2rem, calc(0.2173913043vw + 1.1217391304rem), 1.4rem);
708
+ --text-xs-line-height: 1.67;
709
+ --text-xs-max-width: 100%;
710
+ --text-xxl: clamp(2.7648rem, calc(1.6289863767vw + 2.1783649044rem), 4.2634674666rem);
711
+ --text-xxl-line-height: 1.5;
712
+ --text-xxl-max-width: 100%;
713
+ --texture-1-animate-overlay: off;
714
+ --texture-1-animate-texture: off;
715
+ --texture-1-asset: url(/wp-content/uploads/53.webp);
716
+ --texture-1-asset-is-url: on;
717
+ --texture-1-attachment: fixed;
718
+ --texture-1-background-color: var(--body-bg-color);
719
+ --texture-1-blend-mode: normal;
720
+ --texture-1-overlay: ;;
721
+ --texture-1-overlay-opacity: 0.8;
722
+ --texture-1-overlay-option: on;
723
+ --texture-1-overlay-overlay: ;;
724
+ --texture-1-position: center center;
725
+ --texture-1-relationship: dark;
726
+ --texture-1-repeat: no-repeat;
727
+ --texture-1-size: cover;
728
+ --texture-2-animate-overlay: off;
729
+ --texture-2-animate-texture: off;
730
+ --texture-2-asset: url();
731
+ --texture-2-asset-is-url: on;
732
+ --texture-2-attachment: scroll;
733
+ --texture-2-background-color: var(--body-bg-color);
734
+ --texture-2-blend-mode: normal;
735
+ --texture-2-overlay: ;;
736
+ --texture-2-overlay-opacity: 0.8;
737
+ --texture-2-overlay-option: off;
738
+ --texture-2-position: center center;
739
+ --texture-2-relationship: none;
740
+ --texture-2-repeat: repeat;
741
+ --texture-2-size: 200px;
742
+ --texture-3-animate-overlay: off;
743
+ --texture-3-animate-texture: off;
744
+ --texture-3-asset: url();
745
+ --texture-3-asset-is-url: on;
746
+ --texture-3-attachment: scroll;
747
+ --texture-3-background-color: var(--body-bg-color);
748
+ --texture-3-blend-mode: normal;
749
+ --texture-3-overlay: ;;
750
+ --texture-3-overlay-opacity: 0.8;
751
+ --texture-3-overlay-option: off;
752
+ --texture-3-position: center center;
753
+ --texture-3-relationship: none;
754
+ --texture-3-repeat: repeat;
755
+ --texture-3-size: 200px;
756
+ --texture-4-animate-overlay: off;
757
+ --texture-4-animate-texture: off;
758
+ --texture-4-asset: url();
759
+ --texture-4-asset-is-url: on;
760
+ --texture-4-attachment: scroll;
761
+ --texture-4-background-color: var(--body-bg-color);
762
+ --texture-4-blend-mode: normal;
763
+ --texture-4-overlay: ;;
764
+ --texture-4-overlay-opacity: 0.8;
765
+ --texture-4-overlay-option: off;
766
+ --texture-4-position: center center;
767
+ --texture-4-relationship: none;
768
+ --texture-4-repeat: repeat;
769
+ --texture-4-size: 200px;
770
+ --texture-5-animate-overlay: off;
771
+ --texture-5-animate-texture: off;
772
+ --texture-5-asset: url();
773
+ --texture-5-asset-is-url: on;
774
+ --texture-5-attachment: scroll;
775
+ --texture-5-background-color: var(--body-bg-color);
776
+ --texture-5-blend-mode: normal;
777
+ --texture-5-overlay: ;;
778
+ --texture-5-overlay-opacity: 0.8;
779
+ --texture-5-overlay-option: off;
780
+ --texture-5-position: center center;
781
+ --texture-5-relationship: none;
782
+ --texture-5-repeat: repeat;
783
+ --texture-5-size: 200px;
784
+ --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);
785
+ --transition-delay: 0s;
786
+ --transition-duration: 0.3s;
787
+ --transition-timing: ease-in-out;
788
+ --website-max-width: 2000px;
61
789
  --white: #F8F8F8;
790
+ --white-trans-10: rgba(255, 255, 255, 0.1);
791
+ --white-trans-20: rgba(255, 255, 255, 0.2);
792
+ --white-trans-30: rgba(255, 255, 255, 0.3);
793
+ --white-trans-40: rgba(255, 255, 255, 0.4);
794
+ --white-trans-50: rgba(255, 255, 255, 0.5);
795
+ --white-trans-60: rgba(255, 255, 255, 0.6);
796
+ --white-trans-70: rgba(255, 255, 255, 0.7);
797
+ --white-trans-80: rgba(255, 255, 255, 0.8);
798
+ --white-trans-90: rgba(255, 255, 255, 0.9);
799
+ --width-10: calc(var(--content-width) * 0.1);
800
+ --width-20: calc(var(--content-width) * 0.2);
801
+ --width-30: calc(var(--content-width) * 0.3);
802
+ --width-40: calc(var(--content-width) * 0.4);
803
+ --width-50: calc(var(--content-width) * 0.5);
804
+ --width-60: calc(var(--content-width) * 0.6);
805
+ --width-70: calc(var(--content-width) * 0.7);
806
+ --width-80: calc(var(--content-width) * 0.8);
807
+ --width-90: calc(var(--content-width) * 0.9);
808
+ --width-content: calc(var(--content-width) * 1);
809
+ --width-full: calc(var(--content-width) * 100%);
810
+ --width-l: calc(var(--content-width) * 0.6);
811
+ --width-m: calc(var(--content-width) * 0.4);
812
+ --width-s: calc(var(--content-width) * 0.2);
813
+ --width-vp-max: calc(var(--content-width) * 1);
814
+ --width-xl: calc(var(--content-width) * 0.8);
815
+ --width-xs: calc(var(--content-width) * 0.1);
816
+ --width-xxl: calc(var(--content-width) * 0.9);
817
+ }
818
+ @media (max-width: 1280px) {
819
+ :root {
820
+ --header-height: var(--header-height-xl);
821
+ }
822
+ }
823
+ @media (max-width: 992px) {
824
+ :root {
825
+ --header-height: var(--header-height-l);
826
+ }
827
+ }
828
+ @media (max-width: 768px) {
829
+ :root {
830
+ --header-height: var(--header-height-m);
831
+ }
832
+ }
833
+ @media (max-width: 480px) {
834
+ :root {
835
+ --header-height: var(--header-height-s);
836
+ }
62
837
  }
63
838
  @media (min-width: 1281px) {
64
839
  :root {
@@ -67,8 +842,15 @@
67
842
  --h2: 3.6rem;
68
843
  --h3: 2.8rem;
69
844
  --h4: 2.4rem;
845
+ --h5: 2rem;
846
+ --h6: 2rem;
847
+ --section-padding-x: 6rem;
848
+ --section-space-l: 13.5rem;
70
849
  --section-space-m: 9rem;
850
+ --section-space-s: 6rem;
71
851
  --section-space-xl: 20.25rem;
852
+ --section-space-xs: 4rem;
853
+ --section-space-xxl: 30.375rem;
72
854
  --space-l: 4.5rem;
73
855
  --space-m: 3rem;
74
856
  --space-s: 2rem;
@@ -80,6 +862,7 @@
80
862
  --text-s: 1.6rem;
81
863
  --text-xl: 2.4rem;
82
864
  --text-xs: 1.4rem;
865
+ --text-xxl: 4.2634674666rem;
83
866
  }
84
867
  }
85
868
  /* ===== ACSS base (html / body / typography) — verbatim from the live stylesheet ===== */
@@ -115,6 +898,65 @@ font: inherit;
115
898
  body:where(:not(.block-editor-writing-flow, .editor-styles-wrapper)) :where(p, h1, h2, h3, h4, h5, h6, ul, ol, li) {
116
899
  margin-block: 0;
117
900
  }
901
+
902
+ :where(section:not(section section)) {
903
+ padding-block: var(--section-padding-block);
904
+ padding-inline: var(--gutter);
905
+ }
906
+
907
+ body:where(.bricks-is-frontend), body:where(:not(.bricks-is-frontend)) {
908
+ color: var(--body-color, var(--neutral-dark));
909
+ }
910
+
911
+ [class*="btn--"]:where(:not(.btn--none, .wp-block-button)) {
912
+ background: var(--btn-background);
913
+ color: var(--btn-text-color);
914
+ padding-block: var(--btn-padding-block);
915
+ padding-inline: var(--btn-padding-inline);
916
+ min-inline-size: var(--btn-min-width);
917
+ line-height: var(--btn-line-height);
918
+ font-size: var(--btn-font-size, var(--text-m));
919
+ font-weight: var(--btn-font-weight);
920
+ font-style: var(--btn-font-style);
921
+ text-transform: var(--btn-text-transform);
922
+ letter-spacing: var(--btn-letter-spacing);
923
+ text-decoration: var(--btn-text-decoration);
924
+ border-width: var(--btn-border-width);
925
+ border-style: var(--btn-border-style);
926
+ border-radius: var(--btn-radius);
927
+ border-color: var(--btn-border-color);
928
+ transition: var(--btn-transition, var(--transition));
929
+ justify-content: var(--btn-justify-content, center);
930
+ text-align: var(--btn-text-align, center);
931
+ }
932
+
933
+ @media (hover: hover) and (pointer: fine) {
934
+ [class*="btn--"]:where(:not(.btn--none, .wp-block-button)):hover {
935
+ background: var(--btn-background-hover);
936
+ color: var(--btn-text-color-hover);
937
+ border-color: var(--btn-border-color-hover);
938
+ text-decoration: var(--btn-text-decoration-hover);
939
+ }
940
+ }
941
+
942
+ [class*="btn--"]:where(:not(.btn--none, .wp-block-button)):focus {
943
+ outline-style: solid;
944
+ outline-color: var(--focus-color);
945
+ outline-width: var(--focus-width);
946
+ outline-offset: var(--focus-offset);
947
+ }
948
+
949
+ h1, h2, h3, h4, h5, h6 {
950
+ font-family: "Outfit";
951
+ font-weight: 300;
952
+ }
953
+ h1 {
954
+ font-weight: 200;
955
+ font-family: "Outfit";
956
+ }
957
+ a {
958
+ color: inherit;
959
+ }
118
960
  /* ===== ACSS utilities (.bg--*, .btn--*) — verbatim ===== */
119
961
  .bg--primary {
120
962
  background-color: var(--primary);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@datrix-team-product/website-ds",
3
- "version": "0.2.1",
3
+ "version": "0.2.3",
4
4
  "description": "Design tokens for the Datrix website design system \u2014 evidence-based reconstruction (AGENTS.md). Scoped name confirmed (Gate G3 D10).",
5
5
  "license": "SEE LICENSE IN ../../LICENSE",
6
6
  "type": "module",
package/src/acss-live.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "generatedAt": "2026-10-23T10:43:22.938Z",
2
+ "generatedAt": "2026-10-23T11:07:45.432Z",
3
3
  "source": "data/raw/assets/datrixgroup.com/wp-content/uploads/automatic-css/{automatic,automatic-bricks}.css + captures/home inline vars",
4
4
  "inline": {
5
5
  "--mm-pad-v": "var(--space-m)",
@@ -863,7 +863,7 @@
863
863
  }
864
864
  },
865
865
  "rules": {
866
- "base": "html {\nfont-size: var(--root-font-size) !important;\n scroll-behavior: smooth;\n}\n\n*, *::before, *::after {\nbox-sizing: border-box;\n}\n\n@media (prefers-reduced-motion: reduce) {\n *, *::before, *::after {\n -webkit-animation-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n -webkit-animation-iteration-count: 1 !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n}\n\nbody {\n font-family: \"Outfit\";\n font-weight: 300;\n}\n\ninput, button, textarea, select {\nfont: inherit;\n}\n\nbody:where(:not(.block-editor-writing-flow, .editor-styles-wrapper)) :where(p, h1, h2, h3, h4, h5, h6, ul, ol, li) {\nmargin-block: 0;\n}",
866
+ "base": "html {\nfont-size: var(--root-font-size) !important;\n scroll-behavior: smooth;\n}\n\n*, *::before, *::after {\nbox-sizing: border-box;\n}\n\n@media (prefers-reduced-motion: reduce) {\n *, *::before, *::after {\n -webkit-animation-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n -webkit-animation-iteration-count: 1 !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n}\n\nbody {\n font-family: \"Outfit\";\n font-weight: 300;\n}\n\ninput, button, textarea, select {\nfont: inherit;\n}\n\nbody:where(:not(.block-editor-writing-flow, .editor-styles-wrapper)) :where(p, h1, h2, h3, h4, h5, h6, ul, ol, li) {\nmargin-block: 0;\n}\n\n:where(section:not(section section)) {\npadding-block: var(--section-padding-block);\n padding-inline: var(--gutter);\n}\n\nbody:where(.bricks-is-frontend), body:where(:not(.bricks-is-frontend)) {\ncolor: var(--body-color, var(--neutral-dark));\n}\n\n[class*=\"btn--\"]:where(:not(.btn--none, .wp-block-button)) {\nbackground: var(--btn-background);\n color: var(--btn-text-color);\n padding-block: var(--btn-padding-block);\n padding-inline: var(--btn-padding-inline);\n min-inline-size: var(--btn-min-width);\n line-height: var(--btn-line-height);\n font-size: var(--btn-font-size, var(--text-m));\n font-weight: var(--btn-font-weight);\n font-style: var(--btn-font-style);\n text-transform: var(--btn-text-transform);\n letter-spacing: var(--btn-letter-spacing);\n text-decoration: var(--btn-text-decoration);\n border-width: var(--btn-border-width);\n border-style: var(--btn-border-style);\n border-radius: var(--btn-radius);\n border-color: var(--btn-border-color);\n transition: var(--btn-transition, var(--transition));\n justify-content: var(--btn-justify-content, center);\n text-align: var(--btn-text-align, center);\n}\n\n@media (hover: hover) and (pointer: fine) {\n [class*=\"btn--\"]:where(:not(.btn--none, .wp-block-button)):hover {\n background: var(--btn-background-hover);\n color: var(--btn-text-color-hover);\n border-color: var(--btn-border-color-hover);\n text-decoration: var(--btn-text-decoration-hover);\n }\n}\n\n[class*=\"btn--\"]:where(:not(.btn--none, .wp-block-button)):focus {\noutline-style: solid;\n outline-color: var(--focus-color);\n outline-width: var(--focus-width);\n outline-offset: var(--focus-offset);\n}\n\nh1, h2, h3, h4, h5, h6 {\n font-family: \"Outfit\";\n font-weight: 300;\n}\nh1 {\n font-weight: 200;\n font-family: \"Outfit\";\n}\na {\n color: inherit;\n}",
867
867
  "utilities": ".bg--primary {\nbackground-color: var(--primary);\n}\n\n.bg--primary-hover {\nbackground-color: var(--primary-hover);\n}\n\n.bg--primary-ultra-light {\nbackground-color: var(--primary-ultra-light);\n}\n\n.bg--primary-light {\nbackground-color: var(--primary-light);\n}\n\n.bg--primary-semi-light {\nbackground-color: var(--primary-semi-light);\n}\n\n.bg--primary-semi-dark {\nbackground-color: var(--primary-semi-dark);\n}\n\n.bg--primary-dark {\nbackground-color: var(--primary-dark);\n}\n\n.bg--primary-ultra-dark {\nbackground-color: var(--primary-ultra-dark);\n}\n\n.bg--primary-comp {\nbackground-color: var(--primary-comp);\n}\n\n.bg--primary-medium {\nbackground-color: var(--primary-medium);\n}\n\n.bg--primary-trans-10 {\nbackground-color: var(--primary-trans-10);\n}\n\n.bg--primary-trans-20 {\nbackground-color: var(--primary-trans-20);\n}\n\n.bg--primary-trans-30 {\nbackground-color: var(--primary-trans-30);\n}\n\n.bg--primary-trans-40 {\nbackground-color: var(--primary-trans-40);\n}\n\n.bg--primary-trans-50 {\nbackground-color: var(--primary-trans-50);\n}\n\n.bg--primary-trans-60 {\nbackground-color: var(--primary-trans-60);\n}\n\n.bg--primary-trans-70 {\nbackground-color: var(--primary-trans-70);\n}\n\n.bg--primary-trans-80 {\nbackground-color: var(--primary-trans-80);\n}\n\n.bg--primary-trans-90 {\nbackground-color: var(--primary-trans-90);\n}\n\n.bg--primary-light-trans-10 {\nbackground-color: var(--primary-light-trans-10);\n}\n\n.bg--primary-light-trans-20 {\nbackground-color: var(--primary-light-trans-20);\n}\n\n.bg--primary-light-trans-30 {\nbackground-color: var(--primary-light-trans-30);\n}\n\n.bg--primary-light-trans-40 {\nbackground-color: var(--primary-light-trans-40);\n}\n\n.bg--primary-light-trans-50 {\nbackground-color: var(--primary-light-trans-50);\n}\n\n.bg--primary-light-trans-60 {\nbackground-color: var(--primary-light-trans-60);\n}\n\n.bg--primary-light-trans-70 {\nbackground-color: var(--primary-light-trans-70);\n}\n\n.bg--primary-light-trans-80 {\nbackground-color: var(--primary-light-trans-80);\n}\n\n.bg--primary-light-trans-90 {\nbackground-color: var(--primary-light-trans-90);\n}\n\n.bg--primary-dark-trans-10 {\nbackground-color: var(--primary-dark-trans-10);\n}\n\n.bg--primary-dark-trans-20 {\nbackground-color: var(--primary-dark-trans-20);\n}\n\n.bg--primary-dark-trans-30 {\nbackground-color: var(--primary-dark-trans-30);\n}\n\n.bg--primary-dark-trans-40 {\nbackground-color: var(--primary-dark-trans-40);\n}\n\n.bg--primary-dark-trans-50 {\nbackground-color: var(--primary-dark-trans-50);\n}\n\n.bg--primary-dark-trans-60 {\nbackground-color: var(--primary-dark-trans-60);\n}\n\n.bg--primary-dark-trans-70 {\nbackground-color: var(--primary-dark-trans-70);\n}\n\n.bg--primary-dark-trans-80 {\nbackground-color: var(--primary-dark-trans-80);\n}\n\n.bg--primary-dark-trans-90 {\nbackground-color: var(--primary-dark-trans-90);\n}\n\n.bg--primary-ultra-dark-trans-10 {\nbackground-color: var(--primary-ultra-dark-trans-10);\n}\n\n.bg--primary-ultra-dark-trans-20 {\nbackground-color: var(--primary-ultra-dark-trans-20);\n}\n\n.bg--primary-ultra-dark-trans-30 {\nbackground-color: var(--primary-ultra-dark-trans-30);\n}\n\n.bg--primary-ultra-dark-trans-40 {\nbackground-color: var(--primary-ultra-dark-trans-40);\n}\n\n.bg--primary-ultra-dark-trans-50 {\nbackground-color: var(--primary-ultra-dark-trans-50);\n}\n\n.bg--primary-ultra-dark-trans-60 {\nbackground-color: var(--primary-ultra-dark-trans-60);\n}\n\n.bg--primary-ultra-dark-trans-70 {\nbackground-color: var(--primary-ultra-dark-trans-70);\n}\n\n.bg--primary-ultra-dark-trans-80 {\nbackground-color: var(--primary-ultra-dark-trans-80);\n}\n\n.bg--primary-ultra-dark-trans-90 {\nbackground-color: var(--primary-ultra-dark-trans-90);\n}\n\n.bg--secondary {\nbackground-color: var(--secondary);\n}\n\n.bg--secondary-hover {\nbackground-color: var(--secondary-hover);\n}\n\n.bg--secondary-ultra-light {\nbackground-color: var(--secondary-ultra-light);\n}\n\n.bg--secondary-light {\nbackground-color: var(--secondary-light);\n}\n\n.bg--secondary-semi-light {\nbackground-color: var(--secondary-semi-light);\n}\n\n.bg--secondary-semi-dark {\nbackground-color: var(--secondary-semi-dark);\n}\n\n.bg--secondary-dark {\nbackground-color: var(--secondary-dark);\n}\n\n.bg--secondary-ultra-dark {\nbackground-color: var(--secondary-ultra-dark);\n}\n\n.bg--secondary-comp {\nbackground-color: var(--secondary-comp);\n}\n\n.bg--secondary-medium {\nbackground-color: var(--secondary-medium);\n}\n\n.bg--secondary-trans-10 {\nbackground-color: var(--secondary-trans-10);\n}\n\n.bg--secondary-trans-20 {\nbackground-color: var(--secondary-trans-20);\n}\n\n.bg--secondary-trans-30 {\nbackground-color: var(--secondary-trans-30);\n}\n\n.bg--secondary-trans-40 {\nbackground-color: var(--secondary-trans-40);\n}\n\n.bg--secondary-trans-50 {\nbackground-color: var(--secondary-trans-50);\n}\n\n.bg--secondary-trans-60 {\nbackground-color: var(--secondary-trans-60);\n}\n\n.bg--secondary-trans-70 {\nbackground-color: var(--secondary-trans-70);\n}\n\n.bg--secondary-trans-80 {\nbackground-color: var(--secondary-trans-80);\n}\n\n.bg--secondary-trans-90 {\nbackground-color: var(--secondary-trans-90);\n}\n\n.bg--secondary-light-trans-10 {\nbackground-color: var(--secondary-light-trans-10);\n}\n\n.bg--secondary-light-trans-20 {\nbackground-color: var(--secondary-light-trans-20);\n}\n\n.bg--secondary-light-trans-30 {\nbackground-color: var(--secondary-light-trans-30);\n}\n\n.bg--secondary-light-trans-40 {\nbackground-color: var(--secondary-light-trans-40);\n}\n\n.bg--secondary-light-trans-50 {\nbackground-color: var(--secondary-light-trans-50);\n}\n\n.bg--secondary-light-trans-60 {\nbackground-color: var(--secondary-light-trans-60);\n}\n\n.bg--secondary-light-trans-70 {\nbackground-color: var(--secondary-light-trans-70);\n}\n\n.bg--secondary-light-trans-80 {\nbackground-color: var(--secondary-light-trans-80);\n}\n\n.bg--secondary-light-trans-90 {\nbackground-color: var(--secondary-light-trans-90);\n}\n\n.bg--secondary-dark-trans-10 {\nbackground-color: var(--secondary-dark-trans-10);\n}\n\n.bg--secondary-dark-trans-20 {\nbackground-color: var(--secondary-dark-trans-20);\n}\n\n.bg--secondary-dark-trans-30 {\nbackground-color: var(--secondary-dark-trans-30);\n}\n\n.bg--secondary-dark-trans-40 {\nbackground-color: var(--secondary-dark-trans-40);\n}\n\n.bg--secondary-dark-trans-50 {\nbackground-color: var(--secondary-dark-trans-50);\n}\n\n.bg--secondary-dark-trans-60 {\nbackground-color: var(--secondary-dark-trans-60);\n}\n\n.bg--secondary-dark-trans-70 {\nbackground-color: var(--secondary-dark-trans-70);\n}\n\n.bg--secondary-dark-trans-80 {\nbackground-color: var(--secondary-dark-trans-80);\n}\n\n.bg--secondary-dark-trans-90 {\nbackground-color: var(--secondary-dark-trans-90);\n}\n\n.bg--secondary-ultra-dark-trans-10 {\nbackground-color: var(--secondary-ultra-dark-trans-10);\n}\n\n.bg--secondary-ultra-dark-trans-20 {\nbackground-color: var(--secondary-ultra-dark-trans-20);\n}\n\n.bg--secondary-ultra-dark-trans-30 {\nbackground-color: var(--secondary-ultra-dark-trans-30);\n}\n\n.bg--secondary-ultra-dark-trans-40 {\nbackground-color: var(--secondary-ultra-dark-trans-40);\n}\n\n.bg--secondary-ultra-dark-trans-50 {\nbackground-color: var(--secondary-ultra-dark-trans-50);\n}\n\n.bg--secondary-ultra-dark-trans-60 {\nbackground-color: var(--secondary-ultra-dark-trans-60);\n}\n\n.bg--secondary-ultra-dark-trans-70 {\nbackground-color: var(--secondary-ultra-dark-trans-70);\n}\n\n.bg--secondary-ultra-dark-trans-80 {\nbackground-color: var(--secondary-ultra-dark-trans-80);\n}\n\n.bg--secondary-ultra-dark-trans-90 {\nbackground-color: var(--secondary-ultra-dark-trans-90);\n}\n\n.bg--accent {\nbackground-color: var(--accent);\n}\n\n.bg--accent-hover {\nbackground-color: var(--accent-hover);\n}\n\n.bg--accent-ultra-light {\nbackground-color: var(--accent-ultra-light);\n}\n\n.bg--accent-light {\nbackground-color: var(--accent-light);\n}\n\n.bg--accent-semi-light {\nbackground-color: var(--accent-semi-light);\n}\n\n.bg--accent-semi-dark {\nbackground-color: var(--accent-semi-dark);\n}\n\n.bg--accent-dark {\nbackground-color: var(--accent-dark);\n}\n\n.bg--accent-ultra-dark {\nbackground-color: var(--accent-ultra-dark);\n}\n\n.bg--accent-comp {\nbackground-color: var(--accent-comp);\n}\n\n.bg--accent-medium {\nbackground-color: var(--accent-medium);\n}\n\n.bg--neutral {\nbackground-color: var(--neutral);\n}\n\n.bg--neutral-hover {\nbackground-color: var(--neutral-hover);\n}\n\n.bg--neutral-ultra-light {\nbackground-color: var(--neutral-ultra-light);\n}\n\n.bg--neutral-light {\nbackground-color: var(--neutral-light);\n}\n\n.bg--neutral-semi-light {\nbackground-color: var(--neutral-semi-light);\n}\n\n.bg--neutral-semi-dark {\nbackground-color: var(--neutral-semi-dark);\n}\n\n.bg--neutral-dark {\nbackground-color: var(--neutral-dark);\n}\n\n.bg--neutral-ultra-dark {\nbackground-color: var(--neutral-ultra-dark);\n}\n\n.bg--neutral-comp {\nbackground-color: var(--neutral-comp);\n}\n\n.bg--neutral-medium {\nbackground-color: var(--neutral-medium);\n}\n\n.bg--neutral-trans-10 {\nbackground-color: var(--neutral-trans-10);\n}\n\n.bg--neutral-trans-20 {\nbackground-color: var(--neutral-trans-20);\n}\n\n.bg--neutral-trans-30 {\nbackground-color: var(--neutral-trans-30);\n}\n\n.bg--neutral-trans-40 {\nbackground-color: var(--neutral-trans-40);\n}\n\n.bg--neutral-trans-50 {\nbackground-color: var(--neutral-trans-50);\n}\n\n.bg--neutral-trans-60 {\nbackground-color: var(--neutral-trans-60);\n}\n\n.bg--neutral-trans-70 {\nbackground-color: var(--neutral-trans-70);\n}\n\n.bg--neutral-trans-80 {\nbackground-color: var(--neutral-trans-80);\n}\n\n.bg--neutral-trans-90 {\nbackground-color: var(--neutral-trans-90);\n}\n\n.bg--neutral-light-trans-10 {\nbackground-color: var(--neutral-light-trans-10);\n}\n\n.bg--neutral-light-trans-20 {\nbackground-color: var(--neutral-light-trans-20);\n}\n\n.bg--neutral-light-trans-30 {\nbackground-color: var(--neutral-light-trans-30);\n}\n\n.bg--neutral-light-trans-40 {\nbackground-color: var(--neutral-light-trans-40);\n}\n\n.bg--neutral-light-trans-50 {\nbackground-color: var(--neutral-light-trans-50);\n}\n\n.bg--neutral-light-trans-60 {\nbackground-color: var(--neutral-light-trans-60);\n}\n\n.bg--neutral-light-trans-70 {\nbackground-color: var(--neutral-light-trans-70);\n}\n\n.bg--neutral-light-trans-80 {\nbackground-color: var(--neutral-light-trans-80);\n}\n\n.bg--neutral-light-trans-90 {\nbackground-color: var(--neutral-light-trans-90);\n}\n\n.bg--white {\nbackground-color: var(--white);\n}\n\n.bg--black {\nbackground-color: var(--black);\n}\n\n.bg--white-trans-10 {\nbackground-color: var(--white-trans-10);\n}\n\n.bg--white-trans-20 {\nbackground-color: var(--white-trans-20);\n}\n\n.bg--white-trans-30 {\nbackground-color: var(--white-trans-30);\n}\n\n.bg--white-trans-40 {\nbackground-color: var(--white-trans-40);\n}\n\n.bg--white-trans-50 {\nbackground-color: var(--white-trans-50);\n}\n\n.bg--white-trans-60 {\nbackground-color: var(--white-trans-60);\n}\n\n.bg--white-trans-70 {\nbackground-color: var(--white-trans-70);\n}\n\n.bg--white-trans-80 {\nbackground-color: var(--white-trans-80);\n}\n\n.bg--white-trans-90 {\nbackground-color: var(--white-trans-90);\n}\n\n.bg--black-trans-10 {\nbackground-color: var(--black-trans-10);\n}\n\n.bg--black-trans-20 {\nbackground-color: var(--black-trans-20);\n}\n\n.bg--black-trans-30 {\nbackground-color: var(--black-trans-30);\n}\n\n.bg--black-trans-40 {\nbackground-color: var(--black-trans-40);\n}\n\n.bg--black-trans-50 {\nbackground-color: var(--black-trans-50);\n}\n\n.bg--black-trans-60 {\nbackground-color: var(--black-trans-60);\n}\n\n.bg--black-trans-70 {\nbackground-color: var(--black-trans-70);\n}\n\n.bg--black-trans-80 {\nbackground-color: var(--black-trans-80);\n}\n\n.bg--black-trans-90 {\nbackground-color: var(--black-trans-90);\n}\n\n.bg--danger {\nbackground-color: var(--danger);\n}\n\n.bg--danger-hover {\nbackground-color: var(--danger-hover);\n}\n\n.bg--danger-ultra-light {\nbackground-color: var(--danger-ultra-light);\n}\n\n.bg--danger-light {\nbackground-color: var(--danger-light);\n}\n\n.bg--danger-semi-light {\nbackground-color: var(--danger-semi-light);\n}\n\n.bg--danger-semi-dark {\nbackground-color: var(--danger-semi-dark);\n}\n\n.bg--danger-dark {\nbackground-color: var(--danger-dark);\n}\n\n.bg--danger-ultra-dark {\nbackground-color: var(--danger-ultra-dark);\n}\n\n.bg--danger-comp {\nbackground-color: var(--danger-comp);\n}\n\n.bg--danger-medium {\nbackground-color: var(--danger-medium);\n}\n\n.bg--success {\nbackground-color: var(--success);\n}\n\n.bg--success-hover {\nbackground-color: var(--success-hover);\n}\n\n.bg--success-ultra-light {\nbackground-color: var(--success-ultra-light);\n}\n\n.bg--success-light {\nbackground-color: var(--success-light);\n}\n\n.bg--success-semi-light {\nbackground-color: var(--success-semi-light);\n}\n\n.bg--success-semi-dark {\nbackground-color: var(--success-semi-dark);\n}\n\n.bg--success-dark {\nbackground-color: var(--success-dark);\n}\n\n.bg--success-ultra-dark {\nbackground-color: var(--success-ultra-dark);\n}\n\n.bg--success-comp {\nbackground-color: var(--success-comp);\n}\n\n.bg--success-medium {\nbackground-color: var(--success-medium);\n}\n\n.bg--ultra-light {\nbackground-color: var(--bg-ultra-light);\n}\n\n.bg--light {\nbackground-color: var(--bg-light);\n}\n\n.bg--dark {\nbackground-color: var(--bg-dark);\n}\n\n.bg--ultra-dark {\nbackground-color: var(--bg-ultra-dark);\n}\n\n.bg--ultra-light :where(h1, h2, h3, h4, h5, h6) {\n--heading-color: var(--bg-ultra-light-heading);\n --h1-color: var(--bg-ultra-light-heading);\n --h2-color: var(--bg-ultra-light-heading);\n --h3-color: var(--bg-ultra-light-heading);\n --h4-color: var(--bg-ultra-light-heading);\n --h5-color: var(--bg-ultra-light-heading);\n --h6-color: var(--bg-ultra-light-heading);\n color: var(--bg-ultra-light-heading);\n}\n\n.bg--light :where(h1, h2, h3, h4, h5, h6) {\n--heading-color: var(--bg-light-heading);\n --h1-color: var(--bg-light-heading);\n --h2-color: var(--bg-light-heading);\n --h3-color: var(--bg-light-heading);\n --h4-color: var(--bg-light-heading);\n --h5-color: var(--bg-light-heading);\n --h6-color: var(--bg-light-heading);\n color: var(--bg-light-heading);\n}\n\n.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) {\n--heading-color: var(--bg-dark-heading);\n --h1-color: var(--bg-dark-heading);\n --h2-color: var(--bg-dark-heading);\n --h3-color: var(--bg-dark-heading);\n --h4-color: var(--bg-dark-heading);\n --h5-color: var(--bg-dark-heading);\n --h6-color: var(--bg-dark-heading);\n color: var(--bg-dark-heading);\n}\n\n.bg--ultra-dark :where(h1, h2, h3, h4, h5, h6) {\n--heading-color: var(--bg-ultra-dark-heading);\n --h1-color: var(--bg-ultra-dark-heading);\n --h2-color: var(--bg-ultra-dark-heading);\n --h3-color: var(--bg-ultra-dark-heading);\n --h4-color: var(--bg-ultra-dark-heading);\n --h5-color: var(--bg-ultra-dark-heading);\n --h6-color: var(--bg-ultra-dark-heading);\n color: var(--bg-ultra-dark-heading);\n}\n\n.bg--ultra-light :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)) {\ncolor: var(--bg-ultra-light-link);\n}\n\n.bg--ultra-light :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)):hover {\ncolor: var(--bg-ultra-light-link-hover);\n}\n\n.bg--light :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)) {\ncolor: var(--bg-light-link);\n}\n\n.bg--light :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)):hover {\ncolor: var(--bg-light-link-hover);\n}\n\n.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)) {\ncolor: var(--bg-dark-link);\n}\n\n.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 {\ncolor: var(--bg-dark-link-hover);\n}\n\n.bg--ultra-dark :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)) {\ncolor: var(--bg-ultra-dark-link);\n}\n\n.bg--ultra-dark :is(a):where(:not([class*= btn--], header a, footer a, :is(h1, h2, h3, h4, h5, h6) a)):hover {\ncolor: var(--bg-ultra-dark-link-hover);\n}\n\n.bg--ultra-light [class*=\"btn--\"] {\n--btn-background: var(--primary);\n --btn-background-hover: var(--primary);\n --btn-text-color: var(--white);\n --btn-text-color-hover: var(--white);\n --btn-border-color: var(--primary);\n --btn-border-color-hover: var(--primary);\n --focus-color: var(--danger);\n}\n\n.bg--ultra-light [class*=\"btn--\"].btn--outline {\n--btn-background: transparent;\n --btn-background-hover: var(--primary-hover);\n --btn-text-color: var(--primary);\n --btn-text-color-hover: var(--primary-ultra-light);\n --btn-border-width: 0.1rem;\n --btn-border-color: var(--primary);\n --btn-border-color-hover: var(--primary-hover);\n --focus-color: var(--danger);\n}\n\n.bg--light [class*=\"btn--\"] {\n--btn-background: var(--primary);\n --btn-background-hover: var(--primary);\n --btn-text-color: var(--white);\n --btn-text-color-hover: var(--white);\n --btn-border-color: var(--primary);\n --btn-border-color-hover: var(--primary);\n --focus-color: var(--danger);\n}\n\n.bg--light [class*=\"btn--\"].btn--outline {\n--btn-background: transparent;\n --btn-background-hover: var(--primary-hover);\n --btn-text-color: var(--primary);\n --btn-text-color-hover: var(--primary-ultra-light);\n --btn-border-width: 0.1rem;\n --btn-border-color: var(--primary);\n --btn-border-color-hover: var(--primary-hover);\n --focus-color: var(--danger);\n}\n\n.bg--ultra-dark [class*=\"btn--\"] {\n--btn-background: var(--accent);\n --btn-background-hover: var(--accent-hover);\n --btn-text-color: var(--white);\n --btn-text-color-hover: var(--accent-ultra-light);\n --btn-border-color: var(--accent);\n --btn-border-color-hover: var(--accent-hover);\n --focus-color: var(--accent-dark);\n}\n\n.btn--primary {\n--btn-background: var(--primary);\n --btn-background-hover: var(--primary);\n --btn-text-color: var(--white);\n --btn-text-color-hover: var(--white);\n --btn-border-color: var(--primary);\n --btn-border-color-hover: var(--primary);\n --focus-color: var(--danger);\n}\n\n.btn--primary-dark {\n--btn-background: var(--primary-dark);\n --btn-background-hover: var(--primary-ultra-dark);\n --btn-text-color: var(--primary-ultra-light);\n --btn-text-color-hover: var(--primary-ultra-light);\n --btn-border-color: var(--primary-dark);\n --btn-border-color-hover: var(--primary-ultra-dark);\n --focus-color: var(--primary-semi-dark);\n}\n\n.btn--primary-light {\n--btn-background: var(--primary-ultra-light);\n --btn-background-hover: var(--primary-light);\n --btn-text-color: var(--primary);\n --btn-text-color-hover: var(--primary-ultra-dark);\n --btn-border-color: var(--primary-ultra-light);\n --btn-border-color-hover: var(--primary-light);\n --focus-color: var(--primary-light);\n}\n\n.btn--primary.btn--outline {\n--btn-background: transparent;\n --btn-background-hover: var(--primary-hover);\n --btn-text-color: var(--primary);\n --btn-text-color-hover: var(--primary-ultra-light);\n --btn-border-width: 0.1rem;\n --btn-border-color: var(--primary);\n --btn-border-color-hover: var(--primary-hover);\n --focus-color: var(--danger);\n}\n\n.btn--primary-dark.btn--outline {\n--btn-background: transparent;\n --btn-background-hover: var(--primary-dark);\n --btn-text-color: var(--primary-dark);\n --btn-text-color-hover: var(--primary-ultra-light);\n --btn-border-width: 0.1rem;\n --btn-border-color: var(--primary-dark);\n --btn-border-color-hover: var(--primary-dark);\n --focus-color: var(--danger);\n}\n\n.btn--primary-light.btn--outline {\n--btn-background: transparent;\n --btn-background-hover: var(--primary-light);\n --btn-text-color: var(--primary-light);\n --btn-text-color-hover: var(--primary-dark);\n --btn-border-width: 0.1rem;\n --btn-border-color: var(--primary-light);\n --btn-border-color-hover: var(--primary-light);\n --focus-color: var(--danger);\n}\n\n.btn--secondary {\n--btn-background: var(--secondary);\n --btn-background-hover: var(--secondary-hover);\n --btn-text-color: var(--secondary-ultra-light);\n --btn-text-color-hover: var(--secondary-ultra-light);\n --btn-border-color: var(--secondary);\n --btn-border-color-hover: var(--secondary-hover);\n --focus-color: var(--secondary-dark);\n}\n\n.btn--secondary-dark {\n--btn-background: var(--secondary-dark);\n --btn-background-hover: var(--secondary-ultra-dark);\n --btn-text-color: var(--secondary-ultra-light);\n --btn-text-color-hover: var(--secondary-ultra-light);\n --btn-border-color: var(--secondary-dark);\n --btn-border-color-hover: var(--secondary-ultra-dark);\n --focus-color: var(--secondary-semi-dark);\n}\n\n.btn--secondary-light {\n--btn-background: var(--secondary-ultra-light);\n --btn-background-hover: var(--secondary-light);\n --btn-text-color: var(--secondary);\n --btn-text-color-hover: var(--secondary-ultra-dark);\n --btn-border-color: var(--secondary-ultra-light);\n --btn-border-color-hover: var(--secondary-light);\n --focus-color: var(--secondary-light);\n}\n\n.btn--secondary.btn--outline {\n--btn-background: transparent;\n --btn-background-hover: var(--secondary-hover);\n --btn-text-color: var(--secondary);\n --btn-text-color-hover: var(--secondary-ultra-light);\n --btn-border-width: 0.1rem;\n --btn-border-color: var(--secondary);\n --btn-border-color-hover: var(--secondary-hover);\n --focus-color: var(--secondary-dark);\n}\n\n.btn--secondary-dark.btn--outline {\n--btn-background: transparent;\n --btn-background-hover: var(--secondary-dark);\n --btn-text-color: var(--secondary-dark);\n --btn-text-color-hover: var(--secondary-ultra-light);\n --btn-border-width: 0.1rem;\n --btn-border-color: var(--secondary-dark);\n --btn-border-color-hover: var(--secondary-dark);\n --focus-color: var(--secondary-dark);\n}\n\n.btn--secondary-light.btn--outline {\n--btn-background: transparent;\n --btn-background-hover: var(--secondary-light);\n --btn-text-color: var(--secondary-light);\n --btn-text-color-hover: var(--secondary-dark);\n --btn-border-width: 0.1rem;\n --btn-border-color: var(--secondary-light);\n --btn-border-color-hover: var(--secondary-light);\n --focus-color: var(--secondary-dark);\n}\n\n.btn--tertiary {\n--btn-background: var(--tertiary);\n --btn-background-hover: var(--tertiary-hover);\n --btn-text-color: var(--tertiary-ultra-light);\n --btn-text-color-hover: var(--tertiary-ultra-light);\n --btn-border-color: var(--tertiary);\n --btn-border-color-hover: var(--tertiary-hover);\n --focus-color: var(--tertiary-light);\n}\n\n.btn--accent {\n--btn-background: var(--accent);\n --btn-background-hover: var(--accent-hover);\n --btn-text-color: var(--white);\n --btn-text-color-hover: var(--accent-ultra-light);\n --btn-border-color: var(--accent);\n --btn-border-color-hover: var(--accent-hover);\n --focus-color: var(--accent-dark);\n}\n\n.btn--accent-dark {\n--btn-background: var(--accent-dark);\n --btn-background-hover: var(--accent-ultra-dark);\n --btn-text-color: var(--accent-ultra-light);\n --btn-text-color-hover: var(--accent-ultra-light);\n --btn-border-color: var(--accent-dark);\n --btn-border-color-hover: var(--accent-ultra-dark);\n --focus-color: var(--accent-semi-dark);\n}\n\n.btn--accent-light {\n--btn-background: var(--accent-ultra-light);\n --btn-background-hover: var(--accent-light);\n --btn-text-color: var(--accent);\n --btn-text-color-hover: var(--accent-ultra-dark);\n --btn-border-color: var(--accent-ultra-light);\n --btn-border-color-hover: var(--accent-light);\n --focus-color: var(--accent-light);\n}\n\n.btn--base {\n--btn-background: var(--base);\n --btn-background-hover: var(--base-hover);\n --btn-text-color: var(--base-ultra-light);\n --btn-text-color-hover: var(--base-ultra-light);\n --btn-border-color: var(--base);\n --btn-border-color-hover: var(--base-hover);\n --focus-color: var(--base-dark);\n}\n\n.btn--base-dark {\n--btn-background: var(--base-ultra-dark);\n --btn-background-hover: var(--base-ultra-dark);\n --btn-text-color: var(--white);\n --btn-text-color-hover: var(--base-ultra-light);\n --btn-border-color: var(--base-ultra-dark);\n --btn-border-color-hover: var(--base-ultra-dark);\n --focus-color: var(--base-semi-dark);\n}\n\n.btn--base-light {\n--btn-background: var(--base-ultra-light);\n --btn-background-hover: var(--base-light);\n --btn-text-color: var(--base);\n --btn-text-color-hover: var(--base-ultra-dark);\n --btn-border-color: var(--base-ultra-light);\n --btn-border-color-hover: var(--base-light);\n --focus-color: var(--base-light);\n}\n\n.btn--neutral {\n--btn-background: var(--neutral);\n --btn-background-hover: var(--neutral);\n --btn-text-color: var(--neutral-ultra-light);\n --btn-text-color-hover: var(--primary);\n --btn-border-color: var(--neutral);\n --btn-border-color-hover: var(--primary);\n --focus-color: var(--danger);\n}\n\n.btn--neutral.btn--outline {\n--btn-background: transparent;\n --btn-background-hover: transparent;\n --btn-text-color: var(--neutral);\n --btn-text-color-hover: var(--primary);\n --btn-border-width: 0.1rem;\n --btn-border-color: var(--neutral);\n --btn-border-color-hover: var(--primary);\n --focus-color: var(--neutral-semi-light);\n}\n\n.btn--neutral-light.btn--outline {\n--btn-background: transparent;\n --btn-background-hover: var(--neutral-light);\n --btn-text-color: var(--neutral-light);\n --btn-text-color-hover: var(--neutral-dark);\n --btn-border-width: 0.1rem;\n --btn-border-color: var(--neutral-light);\n --btn-border-color-hover: var(--neutral-light);\n --focus-color: var(--neutral-light);\n}\n\n.btn--warning {\n--btn-background: var(--warning);\n --btn-background-hover: var(--warning-hover);\n --btn-text-color: var(--warning-ultra-light);\n --btn-text-color-hover: var(--warning-ultra-light);\n --btn-border-color: var(--warning);\n --btn-border-color-hover: var(--warning-hover);\n --focus-color: var(--warning-light);\n}\n\n.btn--info {\n--btn-background: var(--info);\n --btn-background-hover: var(--info-hover);\n --btn-text-color: var(--info-ultra-light);\n --btn-text-color-hover: var(--info-ultra-light);\n --btn-border-color: var(--info);\n --btn-border-color-hover: var(--info-hover);\n --focus-color: var(--info-light);\n}\n\n.btn--danger {\n--btn-background: var(--danger);\n --btn-background-hover: var(--danger-hover);\n --btn-text-color: var(--danger-ultra-light);\n --btn-text-color-hover: var(--danger-ultra-light);\n --btn-border-color: var(--danger);\n --btn-border-color-hover: var(--danger-hover);\n --focus-color: var(--danger-light);\n}\n\n.btn--success {\n--btn-background: var(--success);\n --btn-background-hover: var(--success-hover);\n --btn-text-color: var(--success-ultra-light);\n --btn-text-color-hover: var(--success-ultra-light);\n --btn-border-color: var(--success);\n --btn-border-color-hover: var(--success-hover);\n --focus-color: var(--success-light);\n}\n\n.btn--action {\n--btn-background: var(--action);\n --btn-background-hover: var(--action-hover);\n --btn-text-color: var(--action-ultra-light);\n --btn-text-color-hover: var(--action-ultra-light);\n --btn-border-color: var(--action);\n --btn-border-color-hover: var(--action-hover);\n --focus-color: var(--action-dark);\n}\n\n.btn--action.btn--outline {\n--btn-background: transparent;\n --btn-background-hover: var(--action-hover);\n --btn-text-color: var(--action);\n --btn-text-color-hover: var(--action-ultra-light);\n --btn-border-width: 0.1rem;\n --btn-border-color: var(--action);\n --btn-border-color-hover: var(--action-hover);\n --focus-color: var(--action-dark);\n}\n\n.btn--shade {\n--btn-background: var(--shade);\n --btn-background-hover: var(--shade-hover);\n --btn-text-color: var(--shade-ultra-light);\n --btn-text-color-hover: var(--shade-ultra-light);\n --btn-border-color: var(--shade);\n --btn-border-color-hover: var(--shade-hover);\n --focus-color: var(--shade-light);\n}\n\n.btn--shade.btn--outline {\n--btn-background: transparent;\n --btn-background-hover: var(--shade-hover);\n --btn-text-color: var(--shade);\n --btn-text-color-hover: var(--shade-ultra-light);\n --btn-border-width: 0.1rem;\n --btn-border-color: var(--shade);\n --btn-border-color-hover: var(--shade-hover);\n --focus-color: var(--shade-light);\n}\n\n.btn--white {\n--btn-background: var(--white);\n --btn-background-hover: var(--white);\n --btn-text-color: var(--black);\n --btn-text-color-hover: var(--black);\n --btn-border-color: var(--white);\n --btn-border-color-hover: var(--white);\n --focus-color: var(--action);\n}\n\n.btn--white.btn--outline {\n--btn-background: transparent;\n --btn-background-hover: var(--white-hover);\n --btn-text-color: var(--shade-white);\n --btn-text-color-hover: var(--action-ultra-light);\n --btn-border-width: 0.1rem;\n --btn-border-color: var(--white);\n --btn-border-color-hover: var(--white-hover);\n --focus-color: var(--action);\n}\n\n.btn--xs {\nfont-size: var(--text-xs);\n}\n\n.btn--s {\nfont-size: var(--text-s);\n}\n\n.btn--m {\nfont-size: var(--text-m);\n}\n\n.btn--l {\nfont-size: var(--text-l);\n}\n\n.btn--xl {\nfont-size: var(--text-xl);\n}\n\n.btn--xxl {\nfont-size: var(--text-xxl);\n}\n\n.btn--clear.btn--clear, .btn--none.btn--none {\nbackground: none;\n border: none;\n}"
868
868
  }
869
869
  }