@zanichelli/albe-web-components 6.7.0 → 6.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/web-components-library.cjs.js +1 -1
  4. package/dist/cjs/z-app-header_2.cjs.entry.js +1 -1
  5. package/dist/cjs/z-input_2.cjs.entry.js +18 -5
  6. package/dist/cjs/z-myz-card_4.cjs.entry.js +2 -2
  7. package/dist/collection/components/icons/z-icon/index.js +2 -2
  8. package/dist/collection/components/inputs/z-input/index.js +6 -4
  9. package/dist/collection/components/inputs/z-input-message/index.js +22 -1
  10. package/dist/collection/snowflakes/myz/card/z-myz-card-header/index.js +1 -1
  11. package/dist/collection/snowflakes/myz/card/z-myz-card-header/styles.css +1 -1
  12. package/dist/esm/loader.js +1 -1
  13. package/dist/esm/web-components-library.js +1 -1
  14. package/dist/esm/z-app-header_2.entry.js +1 -1
  15. package/dist/esm/z-input_2.entry.js +18 -5
  16. package/dist/esm/z-myz-card_4.entry.js +2 -2
  17. package/dist/types/components/inputs/z-input-message/index.d.ts +3 -0
  18. package/{www/build/p-b33f5e6a.entry.js → dist/web-components-library/p-6bf7c966.entry.js} +1 -1
  19. package/dist/web-components-library/{p-5624a127.entry.js → p-d9a6a204.entry.js} +1 -1
  20. package/dist/web-components-library/p-de0b8df8.entry.js +1 -0
  21. package/dist/web-components-library/web-components-library.esm.js +1 -1
  22. package/package.json +1 -1
  23. package/www/build/p-32511690.css +1636 -0
  24. package/{dist/web-components-library/p-b33f5e6a.entry.js → www/build/p-6bf7c966.entry.js} +1 -1
  25. package/www/build/p-a5066bae.js +129 -0
  26. package/www/build/{p-5624a127.entry.js → p-d9a6a204.entry.js} +1 -1
  27. package/www/build/p-de0b8df8.entry.js +1 -0
  28. package/www/build/web-components-library.esm.js +1 -1
  29. package/www/index.html +1 -1
  30. package/dist/web-components-library/p-91a74348.entry.js +0 -1
  31. package/www/build/p-275801c6.css +0 -1
  32. package/www/build/p-91a74348.entry.js +0 -1
  33. package/www/build/p-c07f6065.js +0 -1
@@ -0,0 +1,1636 @@
1
+ /* stylelint-disable-next-line import-notation */
2
+ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,700;1,700&display=swap");
3
+ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&display=swap");
4
+ :root {
5
+ --myz-blue: #0056c1;
6
+ --myz-blue-dark: #003476;
7
+ --myz-blue-light: #1973e1;
8
+ --myz-blue-lighter: #e1f0ff;
9
+ --myz-red: #e2001a;
10
+ --myz-red-dark: #80000f;
11
+ --myz-red-light: #ff808e;
12
+ --accent: #add2ff;
13
+ --accent-dark: #78b5ff;
14
+ --accent-light: #d0e9ff;
15
+ --accent-lighter: #ebf4ff;
16
+ --bg-grey-050: #f6f6f6;
17
+ --bg-grey-200: #e6e6e6;
18
+ --bg-grey-700: #676b6f;
19
+ --bg-grey-800: #424548;
20
+ --bg-grey-900: #333333;
21
+ --bg-white: #ffffff;
22
+ --bg-neutral-100: #e8ebee;
23
+ --bg-neutral-150: #d9dee3;
24
+ --bg-neutral-200: #cad1d8;
25
+ --bg-neutral-300: #aeb8c2;
26
+ --bg-neutral-400: #919eac;
27
+ --bg-neutral-500: #738596;
28
+ --bg-neutral-600: #5c6b7a;
29
+ --bg-neutral-700: #46525d;
30
+ --bg-neutral-800: #303840;
31
+ --status-error-red: #dc3122;
32
+ --status-error-red-dark: #7e0a00;
33
+ --status-error-red-light: #ff9c9c;
34
+ --status-error-red-lighter: #fdefee;
35
+ --status-warning-yellow: #f6bb3b;
36
+ --status-warning-yellow-dark: #85641a;
37
+ --status-warning-yellow-light: #fee17f;
38
+ --status-warning-yellow-lighter: #fbf4e6;
39
+ --status-success-green: #417505;
40
+ --status-success-green-dark: #233a00;
41
+ --status-success-green-light: #95d150;
42
+ --status-success-green-lighter: #effce0;
43
+ --text-grey-800: #424548;
44
+ --text-grey-700: #676b6f;
45
+ --text-grey-200: #e6e6e6;
46
+ --text-grey-050: #f6f6f6;
47
+ --text-white: #ffffff;
48
+ }
49
+
50
+ :root {
51
+ --border-base: 2px;
52
+ --border-size-small: 1px;
53
+ --radius-base: 4px;
54
+ --border-radius-base: 4px;
55
+ --border-radius-min: 0;
56
+ --border-radius-max: 100%;
57
+ }
58
+
59
+ :root {
60
+ --shadow-inset-2: inset 0 2px 4px 0 rgba(66, 69, 72, 0.35);
61
+ --shadow-inset-4: inset 0 4px 8px 0 rgba(66, 69, 72, 0.35);
62
+ --shadow-0: 0 0 0 0 rgba(66, 69, 72, 0.40);
63
+ --shadow-1: 0 1px 2px 0 rgba(66, 69, 72, 0.40);
64
+ --shadow-2: 0 2px 4px 0 rgba(66, 69, 72, 0.40);
65
+ --shadow-3: 0 3px 6px 0 rgba(66, 69, 72, 0.40);
66
+ --shadow-4: 0 4px 8px 0 rgba(66, 69, 72, 0.40);
67
+ --shadow-6: 0 6px 12px 0 rgba(66, 69, 72, 0.40);
68
+ --shadow-8: 0 8px 16px 0 rgba(66, 69, 72, 0.40);
69
+ --shadow-12: 0 12px 24px 0 rgba(66, 69, 72, 0.35);
70
+ --shadow-16: 0 16px 32px 0 rgba(66, 69, 72, 0.35);
71
+ --shadow-24: 0 24px 48px 0 rgba(66, 69, 72, 0.35);
72
+ }
73
+
74
+ :root {
75
+ --basex1: var(--space-unit);
76
+ --basex2: calc(var(--space-unit) * 2);
77
+ --basex3: calc(var(--space-unit) * 3);
78
+ --basex4: calc(var(--space-unit) * 4);
79
+ --basex5: calc(var(--space-unit) * 5);
80
+ --basex6: calc(var(--space-unit) * 6);
81
+ --basex7: calc(var(--space-unit) * 7);
82
+ --basex8: calc(var(--space-unit) * 8);
83
+ --half-x1: calc(var(--space-unit) * .5);
84
+ --half-x3: calc(var(--space-unit) * 1.5);
85
+ --half-x5: calc(var(--space-unit) * 2.5);
86
+ --half-x7: calc(var(--space-unit) * 3.5);
87
+ --half-x9: calc(var(--space-unit) * 4.5);
88
+ --half-x11: calc(var(--space-unit) * 5.5);
89
+ --half-x13: calc(var(--space-unit) * 6.5);
90
+ --half-x14: calc(var(--space-unit) * 7.5);
91
+ }
92
+
93
+ :root {
94
+ --gray950: #121212;
95
+ --gray900: #292929;
96
+ --gray800: #3D3D3D;
97
+ --gray700: #525252;
98
+ --gray600: #666666;
99
+ --gray500: #9B9B9B;
100
+ --gray400: #ADADAD;
101
+ --gray300: #C2C2C2;
102
+ --gray200: #D6D6D6;
103
+ --gray100: #EBEBEB;
104
+ --gray50: #F6F6F6;
105
+ }
106
+
107
+ :root {
108
+ --blue950: #001229;
109
+ --blue900: #001F46;
110
+ --blue800: #002C63;
111
+ --blue700: #003981;
112
+ --blue600: #0047A0;
113
+ --blue500: #0056C1;
114
+ --blue400: #2E76CE;
115
+ --blue300: #5893DB;
116
+ --blue200: #82B0E7;
117
+ --blue100: #ACCDF3;
118
+ --blue50: #D6EAFF;
119
+ }
120
+
121
+ :root {
122
+ --green950: #19200A;
123
+ --green900: #22330A;
124
+ --green800: #2B4808;
125
+ --green700: #355D06;
126
+ --green600: #407305;
127
+ --green500: #568818;
128
+ --green400: #6F9D2F;
129
+ --green300: #8AB14A;
130
+ --green200: #A6C66B;
131
+ --green100: #C3DA92;
132
+ --green50: #EFFCE0;
133
+ }
134
+
135
+ :root {
136
+ --yellow950: #33280F;
137
+ --yellow900: #5C4615;
138
+ --yellow800: #85641A;
139
+ --yellow700: #AB8125;
140
+ --yellow600: #D09E30;
141
+ --yellow500: #F6BB3B;
142
+ --yellow400: #F9C852;
143
+ --yellow300: #FBD468;
144
+ --yellow200: #FEE17F;
145
+ --yellow150: #ffde72;
146
+ --yellow100: #FFEA91;
147
+ --yellow50: #FBF4E6;
148
+ }
149
+
150
+ :root {
151
+ --red950: #2A0005;
152
+ --red900: #4C0009;
153
+ --red800: #6F000D;
154
+ --red700: #940111;
155
+ --red600: #BA0115;
156
+ --red500: #E2011A;
157
+ --red400: #EB4F60;
158
+ --red300: #EB4F60;
159
+ --red200: #F49DA7;
160
+ --red100: #F49DA7;
161
+ --red50: #FDEFEE;
162
+ }
163
+
164
+ :root {
165
+ --avatar-C01: #99005B;
166
+ --avatar-C02: #B01300;
167
+ --avatar-C03: #E62200;
168
+ --avatar-C04: #7C4000;
169
+ --avatar-C05: #C25600;
170
+ --avatar-C06: #6E6D6D;
171
+ --avatar-C07: #667D00;
172
+ --avatar-C08: #008741;
173
+ --avatar-C09: #00612F;
174
+ --avatar-C10: #007D8A;
175
+ --avatar-C11: #007DB3;
176
+ --avatar-C12: #00548C;
177
+ --avatar-C13: #0028B1;
178
+ --avatar-C14: #00019C;
179
+ --avatar-C15: #6400EE;
180
+ --avatar-C16: #5F3FFF;
181
+ --avatar-C17: #8B00A5;
182
+ --avatar-C18: #B200FF;
183
+ --avatar-C19: #C700D6;
184
+ }
185
+
186
+ :root {
187
+ --color-error-default: #DC3122;
188
+ --color-success-default: #417505;
189
+ --color-warning-default: #F6BB3B;
190
+ --color-black: #000000;
191
+ --color-white: #FFFFFF;
192
+ }
193
+
194
+ :root {
195
+ /* font-family */
196
+ --font-family-sans: "IBM Plex Sans", sans-serif;
197
+ /* font-weight */
198
+ --font-lt: 300;
199
+ --font-rg: 400;
200
+ --font-sb: 600;
201
+ /* font-size type scale */
202
+ --font-size-1: 0.75rem; /* 12px */
203
+ --font-size-2: 0.875rem; /* 14px */
204
+ --font-size-3: 1rem; /* assuming 16px */
205
+ --font-size-4: 1.125rem; /* 18px */
206
+ --font-size-5: 1.25rem; /* 20px */
207
+ --font-size-6: 1.5rem; /* 24px */
208
+ --font-size-7: 1.75rem; /* 28px */
209
+ --font-size-8: 2rem; /* 32px */
210
+ --font-size-9: 2.25rem; /* 36px */
211
+ --font-size-10: 2.625rem; /* 42px */
212
+ --font-size-11: 3rem; /* 48px */
213
+ --font-size-12: 3.375rem; /* 54px */
214
+ --font-size-13: 3.75rem; /* 60px */
215
+ --font-size-14: 4.25rem; /* 68px */
216
+ --font-size-15: 4.75rem; /* 76px */
217
+ --font-size-16: 5.25rem; /* 84px */
218
+ --font-size-17: 5.75rem; /* 92px */
219
+ /* backward compatibility */
220
+ --dashboard-font: var(--font-family-sans);
221
+ }
222
+
223
+ /* Typography classes */
224
+ .heading-1,
225
+ .heading-1-sb,
226
+ .heading-1-lt {
227
+ font-size: var(--font-size-8);
228
+ font-weight: var(--font-rg);
229
+ line-height: 1.25;
230
+ letter-spacing: 0;
231
+ }
232
+
233
+ .heading-2,
234
+ .heading-2-sb,
235
+ .heading-2-lt {
236
+ font-size: var(--font-size-7);
237
+ font-weight: var(--font-rg);
238
+ line-height: 1.28;
239
+ letter-spacing: 0;
240
+ }
241
+
242
+ @media (max-width: 1151px) {
243
+ .heading-1,
244
+ .heading-1-sb,
245
+ .heading-1-lt {
246
+ font-size: var(--font-size-7);
247
+ line-height: 1.28;
248
+ }
249
+ .heading-2,
250
+ .heading-2-sb,
251
+ .heading-2-lt {
252
+ font-size: var(--font-size-6);
253
+ line-height: 1.33;
254
+ }
255
+ }
256
+ .heading-3,
257
+ .heading-3-sb,
258
+ .heading-3-lt {
259
+ font-size: var(--font-size-6);
260
+ font-weight: var(--font-rg);
261
+ line-height: 1.33;
262
+ letter-spacing: 0;
263
+ }
264
+
265
+ .heading-4,
266
+ .heading-4-sb,
267
+ .heading-4-lt {
268
+ font-size: var(--font-size-5);
269
+ font-weight: var(--font-rg);
270
+ line-height: 1.4;
271
+ letter-spacing: 0;
272
+ }
273
+
274
+ .body-1,
275
+ .body-1-sb {
276
+ font-size: var(--font-size-5);
277
+ font-weight: var(--font-rg);
278
+ line-height: 1.4;
279
+ letter-spacing: 0;
280
+ }
281
+
282
+ .body-2,
283
+ .body-2-sb {
284
+ font-size: var(--font-size-4);
285
+ font-weight: var(--font-rg);
286
+ line-height: 1.5;
287
+ letter-spacing: 0;
288
+ }
289
+
290
+ .body-3,
291
+ .body-3-sb {
292
+ font-size: var(--font-size-3);
293
+ font-weight: var(--font-rg);
294
+ line-height: 1.5;
295
+ letter-spacing: 0;
296
+ }
297
+
298
+ .body-4,
299
+ .body-4-sb {
300
+ font-size: var(--font-size-2);
301
+ font-weight: var(--font-rg);
302
+ line-height: 1.4;
303
+ letter-spacing: 0.16px;
304
+ }
305
+
306
+ .body-5,
307
+ .body-5-sb {
308
+ font-size: var(--font-size-1);
309
+ font-weight: var(--font-rg);
310
+ line-height: 1.33;
311
+ letter-spacing: 0.32px;
312
+ }
313
+
314
+ .interactive-1,
315
+ .interactive-1-sb {
316
+ font-size: var(--font-size-3);
317
+ font-weight: var(--font-rg);
318
+ line-height: 1.5;
319
+ letter-spacing: 0;
320
+ }
321
+
322
+ .interactive-2,
323
+ .interactive-2-sb {
324
+ font-size: var(--font-size-2);
325
+ font-weight: var(--font-rg);
326
+ line-height: 1.4;
327
+ letter-spacing: 0.16px;
328
+ }
329
+
330
+ .interactive-3,
331
+ .interactive-3-sb {
332
+ font-size: var(--font-size-1);
333
+ font-weight: var(--font-rg);
334
+ line-height: 1.33;
335
+ letter-spacing: 0.32px;
336
+ }
337
+
338
+ .helper,
339
+ .helper-sb {
340
+ font-size: var(--font-size-1);
341
+ font-weight: var(--font-rg);
342
+ font-style: italic;
343
+ line-height: 1.33;
344
+ letter-spacing: 0.32px;
345
+ }
346
+
347
+ /* font-weight variants */
348
+ .heading-1-lt,
349
+ .heading-2-lt,
350
+ .heading-3-lt,
351
+ .heading-4-lt {
352
+ font-weight: var(--font-lt);
353
+ }
354
+
355
+ .heading-1-sb,
356
+ .heading-2-sb,
357
+ .heading-3-sb,
358
+ .heading-4-sb,
359
+ .body-1-sb,
360
+ .body-2-sb,
361
+ .body-3-sb,
362
+ .body-4-sb,
363
+ .body-5-sb,
364
+ .interactive-1-sb,
365
+ .interactive-2-sb,
366
+ .interactive-3-sb,
367
+ .helper-sb {
368
+ font-weight: var(--font-sb);
369
+ }
370
+
371
+ :root {
372
+ --space-unit: 8px;
373
+ }
374
+
375
+ :root {
376
+ --shadow-color-base: rgba(66, 69, 72, 0.35);
377
+ --shadow-inset-2: inset 0 2px 4px 0 var(--shadow-color-base);
378
+ --shadow-inset-4: inset 0 4px 8px 0 var(--shadow-color-base);
379
+ --shadow-0: 0 0 0 0 var(--shadow-color-base);
380
+ --shadow-1: 0 1px 2px 0 var(--shadow-color-base);
381
+ --shadow-2: 0 2px 4px 0 var(--shadow-color-base);
382
+ --shadow-3: 0 3px 6px 0 var(--shadow-color-base);
383
+ --shadow-4: 0 4px 8px 0 var(--shadow-color-base);
384
+ --shadow-6: 0 6px 12px 0 var(--shadow-color-base);
385
+ --shadow-8: 0 8px 16px 0 var(--shadow-color-base);
386
+ --shadow-12: 0 12px 24px 0 var(--shadow-color-base);
387
+ --shadow-16: 0 16px 32px 0 var(--shadow-color-base);
388
+ --shadow-24: 0 24px 48px 0 var(--shadow-color-base);
389
+ }
390
+
391
+ :root {
392
+ --border-no-radius: 0;
393
+ --border-size-small: 1px;
394
+ --border-size-medium: 2px;
395
+ --border-size-large: 4px;
396
+ --border-radius-small: 2px;
397
+ --border-radius: 4px;
398
+ }
399
+
400
+ /* Backward compatibility classes.
401
+ This is the old `global-text.css` file from `design-system` repo.
402
+ New tokens and classes are defined in `typography.css` file. */
403
+ .t-weight-lt {
404
+ font-weight: var(--font-lt);
405
+ }
406
+
407
+ .t-weight-rg {
408
+ font-weight: var(--font-rg);
409
+ }
410
+
411
+ .t-weight-sb {
412
+ font-weight: var(--font-sb);
413
+ }
414
+
415
+ .t-align-center {
416
+ text-align: center;
417
+ }
418
+
419
+ .t-color-light {
420
+ color: var(--text-grey-medium);
421
+ fill: var(--text-grey-medium);
422
+ }
423
+
424
+ .caption-01 {
425
+ color: var(--text-grey-800);
426
+ fill: var(--text-grey-800);
427
+ font-family: var(--font-family-sans);
428
+ font-weight: var(--font-rg);
429
+ font-size: var(--font-size-1);
430
+ line-height: 16px;
431
+ }
432
+
433
+ .helper-text-01 {
434
+ color: var(--text-grey-800);
435
+ fill: var(--text-grey-800);
436
+ font-family: var(--font-family-sans);
437
+ font-weight: var(--font-rg);
438
+ font-style: italic;
439
+ font-size: var(--font-size-1);
440
+ line-height: 16px;
441
+ }
442
+
443
+ .body-short-01 {
444
+ color: var(--text-grey-800);
445
+ fill: var(--text-grey-800);
446
+ font-family: var(--font-family-sans);
447
+ font-weight: var(--font-rg);
448
+ font-size: var(--font-size-2);
449
+ line-height: 20px;
450
+ }
451
+
452
+ .body-short-02 {
453
+ color: var(--text-grey-800);
454
+ fill: var(--text-grey-800);
455
+ font-family: var(--font-family-sans);
456
+ font-weight: var(--font-rg);
457
+ font-size: var(--font-size-3);
458
+ line-height: 24px;
459
+ }
460
+
461
+ .body-long-01 {
462
+ color: var(--text-grey-800);
463
+ fill: var(--text-grey-800);
464
+ font-family: var(--font-family-sans);
465
+ font-weight: var(--font-rg);
466
+ font-size: var(--font-size-2);
467
+ line-height: 20px;
468
+ }
469
+
470
+ .body-long-02 {
471
+ color: var(--text-grey-800);
472
+ fill: var(--text-grey-800);
473
+ font-family: var(--font-family-sans);
474
+ font-weight: var(--font-sb);
475
+ font-size: var(--font-size-3);
476
+ line-height: 24px;
477
+ }
478
+
479
+ .heading-01 {
480
+ color: var(--text-grey-800);
481
+ fill: var(--text-grey-800);
482
+ font-family: var(--font-family-sans);
483
+ font-weight: var(--font-sb);
484
+ font-size: var(--font-size-2);
485
+ line-height: 20px;
486
+ }
487
+
488
+ .heading-02 {
489
+ color: var(--text-grey-800);
490
+ fill: var(--text-grey-800);
491
+ font-family: var(--font-family-sans);
492
+ font-weight: var(--font-sb);
493
+ font-size: var(--font-size-3);
494
+ line-height: 24px;
495
+ }
496
+
497
+ .heading-03 {
498
+ color: var(--text-grey-800);
499
+ fill: var(--text-grey-800);
500
+ font-family: var(--font-family-sans);
501
+ font-weight: var(--font-sb);
502
+ font-size: var(--font-size-5);
503
+ line-height: 24px;
504
+ }
505
+
506
+ .heading-04 {
507
+ color: var(--text-grey-800);
508
+ fill: var(--text-grey-800);
509
+ font-family: var(--font-family-sans);
510
+ font-weight: var(--font-sb);
511
+ font-size: var(--font-size-7);
512
+ line-height: 36px;
513
+ }
514
+
515
+ .heading-05 {
516
+ color: var(--text-grey-800);
517
+ fill: var(--text-grey-800);
518
+ font-family: var(--font-family-sans);
519
+ font-weight: var(--font-sb);
520
+ font-size: var(--font-size-8);
521
+ line-height: 40px;
522
+ }
523
+
524
+ .expressive-heading-04 {
525
+ color: var(--text-grey-800);
526
+ fill: var(--text-grey-800);
527
+ font-family: var(--font-family-sans);
528
+ font-weight: var(--font-rg);
529
+ font-size: var(--font-size-8);
530
+ line-height: 40px;
531
+ }
532
+
533
+ @media only screen and (max-width: 767px) {
534
+ .expressive-heading-04 {
535
+ font-size: var(--font-size-7);
536
+ line-height: 36px;
537
+ }
538
+ }
539
+ .expressive-heading-05 {
540
+ color: var(--text-grey-800);
541
+ fill: var(--text-grey-800);
542
+ font-family: var(--font-family-sans);
543
+ font-weight: var(--font-rg);
544
+ font-size: var(--font-size-11);
545
+ line-height: 56px;
546
+ }
547
+
548
+ @media only screen and (max-width: 1024px) {
549
+ .expressive-heading-05 {
550
+ font-size: 36px;
551
+ line-height: 44px;
552
+ }
553
+ }
554
+ @media only screen and (max-width: 767px) {
555
+ .expressive-heading-05 {
556
+ font-size: var(--font-size-8);
557
+ line-height: 40px;
558
+ }
559
+ }
560
+ .expressive-paragraph-01 {
561
+ color: var(--text-grey-800);
562
+ fill: var(--text-grey-800);
563
+ font-family: var(--font-family-sans);
564
+ font-weight: var(--font-lt);
565
+ font-size: var(--font-size-8);
566
+ line-height: 40px;
567
+ }
568
+
569
+ @media only screen and (max-width: 767px) {
570
+ .expressive-paragraph-01 {
571
+ font-size: var(--font-size-6);
572
+ line-height: 32px;
573
+ }
574
+ }
575
+ .quotation-01 {
576
+ color: var(--text-grey-800);
577
+ fill: var(--text-grey-800);
578
+ font-family: var(--font-family-sans);
579
+ font-weight: var(--font-lt);
580
+ font-size: var(--font-size-8);
581
+ line-height: 40px;
582
+ }
583
+
584
+ @media only screen and (max-width: 767px) {
585
+ .quotation-01 {
586
+ font-size: var(--font-size-5);
587
+ line-height: 28px;
588
+ }
589
+ }
590
+ .quotation-02 {
591
+ color: var(--text-grey-800);
592
+ fill: var(--text-grey-800);
593
+ font-family: var(--font-family-sans);
594
+ font-weight: var(--font-lt);
595
+ font-size: var(--font-size-13);
596
+ line-height: 72px;
597
+ }
598
+
599
+ @media only screen and (max-width: 1024px) {
600
+ .quotation-02 {
601
+ font-size: 36px;
602
+ line-height: 44px;
603
+ }
604
+ }
605
+ @media only screen and (max-width: 767px) {
606
+ .quotation-02 {
607
+ font-size: var(--font-size-8);
608
+ line-height: 40px;
609
+ }
610
+ }
611
+ .display-01 {
612
+ color: var(--text-grey-800);
613
+ fill: var(--text-grey-800);
614
+ font-family: var(--font-family-sans);
615
+ font-weight: var(--font-lt);
616
+ font-size: var(--font-size-15);
617
+ line-height: 88px;
618
+ }
619
+
620
+ @media only screen and (max-width: 767px) {
621
+ .display-01 {
622
+ font-size: var(--font-size-10);
623
+ line-height: 52px;
624
+ }
625
+ }
626
+ .display-02 {
627
+ color: var(--text-grey-800);
628
+ fill: var(--text-grey-800);
629
+ font-family: var(--font-family-sans);
630
+ font-weight: var(--font-sb);
631
+ font-size: var(--font-size-15);
632
+ line-height: 88px;
633
+ }
634
+
635
+ @media only screen and (max-width: 767px) {
636
+ .display-02 {
637
+ font-size: var(--font-size-10);
638
+ line-height: 52px;
639
+ }
640
+ }
641
+ .display-03 {
642
+ color: var(--text-grey-800);
643
+ fill: var(--text-grey-800);
644
+ font-family: var(--font-family-sans);
645
+ font-weight: var(--font-lt);
646
+ font-size: 156px;
647
+ line-height: 164px;
648
+ }
649
+
650
+ @media only screen and (max-width: 1024px) {
651
+ .display-03 {
652
+ font-size: var(--font-size-14);
653
+ line-height: 80px;
654
+ }
655
+ }
656
+ @media only screen and (max-width: 767px) {
657
+ .display-03 {
658
+ font-size: var(--font-size-10);
659
+ line-height: 52px;
660
+ }
661
+ }
662
+ .display-04 {
663
+ color: var(--text-grey-800);
664
+ fill: var(--text-grey-800);
665
+ font-family: var(--font-family-sans);
666
+ font-weight: var(--font-sb);
667
+ font-size: 156px;
668
+ line-height: 164px;
669
+ }
670
+
671
+ @media only screen and (max-width: 1024px) {
672
+ .display-04 {
673
+ font-size: var(--font-size-14);
674
+ line-height: 80px;
675
+ }
676
+ }
677
+ @media only screen and (max-width: 767px) {
678
+ .display-04 {
679
+ font-size: var(--font-size-10);
680
+ line-height: 52px;
681
+ }
682
+ }
683
+ :root {
684
+ --grid-mobile-viewport: 768px;
685
+ --grid-mobile-column: 4;
686
+ --grid-mobile-margin: 16px;
687
+ --grid-mobile-gutter: 16px;
688
+ --grid-tablet-viewport: 768px;
689
+ --grid-tablet-column: 8;
690
+ --grid-tablet-margin: 24px;
691
+ --grid-tablet-gutter: 24px;
692
+ --grid-desktop-viewport: 1152px;
693
+ --grid-desktop-column: 12;
694
+ --grid-desktop-margin: 24px;
695
+ --grid-desktop-gutter: 24px;
696
+ --grid-wide-viewport: 1366px;
697
+ --grid-wide-column: 12;
698
+ --grid-wide-margin: 32px;
699
+ --grid-wide-gutter: 32px;
700
+ --page-max-width: 1366px;
701
+ /* These variables automatically adapt to the viewport size,
702
+ that apps don't have to worry about updating the value manually. */
703
+ --grid-margin: var(--grid-mobile-margin);
704
+ --grid-gutter: var(--grid-mobile-gutter);
705
+ --grid-columns: var(--grid-mobile-column);
706
+ }
707
+
708
+ @media (min-width: 768px) and (max-width: 1151px) {
709
+ :root {
710
+ --grid-margin: var(--grid-tablet-margin);
711
+ --grid-gutter: var(--grid-tablet-gutter);
712
+ --grid-columns: var(--grid-tablet-column);
713
+ }
714
+ }
715
+ @media (min-width: 1152px) and (max-width: 1365px) {
716
+ :root {
717
+ --grid-margin: var(--grid-desktop-margin);
718
+ --grid-gutter: var(--grid-desktop-gutter);
719
+ --grid-columns: var(--grid-desktop-column);
720
+ }
721
+ }
722
+ @media (min-width: 1366px) {
723
+ :root {
724
+ --grid-margin: var(--grid-wide-margin);
725
+ --grid-gutter: var(--grid-wide-gutter);
726
+ --grid-columns: var(--grid-wide-column);
727
+ }
728
+ }
729
+ .grid {
730
+ display: grid;
731
+ grid-template-columns: repeat(var(--grid-columns), 1fr);
732
+ width: 100%;
733
+ column-gap: var(--grid-gutter);
734
+ }
735
+
736
+ .col-full {
737
+ grid-column: 1/-1;
738
+ }
739
+
740
+ .col-1 {
741
+ grid-column: span 1;
742
+ }
743
+
744
+ .col-2 {
745
+ grid-column: span 2;
746
+ }
747
+
748
+ .col-3 {
749
+ grid-column: span 3;
750
+ }
751
+
752
+ .col-4,
753
+ .col-5,
754
+ .col-6,
755
+ .col-7,
756
+ .col-8,
757
+ .col-9,
758
+ .col-10,
759
+ .col-11,
760
+ .col-12 {
761
+ grid-column: span 4;
762
+ }
763
+
764
+ .col-start-1 {
765
+ grid-column-start: 1;
766
+ }
767
+
768
+ .col-start-2 {
769
+ grid-column-start: 2;
770
+ }
771
+
772
+ .col-start-3 {
773
+ grid-column-start: 3;
774
+ }
775
+
776
+ .col-start-4,
777
+ .col-start-5,
778
+ .col-start-6,
779
+ .col-start-7,
780
+ .col-start-8,
781
+ .col-start-9,
782
+ .col-start-10,
783
+ .col-start-11,
784
+ .col-start-12 {
785
+ grid-column-start: 4;
786
+ }
787
+
788
+ /*
789
+ .-col-start-1 is intentionally left out
790
+ */
791
+ .-col-start-2 {
792
+ grid-column-start: -2;
793
+ }
794
+
795
+ .-col-start-3 {
796
+ grid-column-start: -3;
797
+ }
798
+
799
+ .-col-start-4 {
800
+ grid-column-start: -4;
801
+ }
802
+
803
+ .-col-start-5,
804
+ .-col-start-6,
805
+ .-col-start-7,
806
+ .-col-start-8,
807
+ .-col-start-9,
808
+ .-col-start-10,
809
+ .-col-start-11,
810
+ .-col-start-12,
811
+ .-col-start-13 {
812
+ grid-column-start: -5;
813
+ }
814
+
815
+ .col-end-last {
816
+ grid-column-end: -1;
817
+ }
818
+
819
+ /*
820
+ .col-end-1 is intentionally left out
821
+ */
822
+ .col-end-2 {
823
+ grid-column-end: 2;
824
+ }
825
+
826
+ .col-end-3 {
827
+ grid-column-end: 3;
828
+ }
829
+
830
+ .col-end-4 {
831
+ grid-column-end: 4;
832
+ }
833
+
834
+ /*
835
+ This means "end this column where column 5 start",
836
+ which is the same as saying "end this column where column 4 end"
837
+ */
838
+ .col-end-5,
839
+ .col-end-6,
840
+ .col-end-7,
841
+ .col-end-8,
842
+ .col-end-9,
843
+ .col-end-10,
844
+ .col-end-11,
845
+ .col-end-12,
846
+ .col-end-13 {
847
+ grid-column-end: 5;
848
+ }
849
+
850
+ .-col-end-1 {
851
+ grid-column-end: -1;
852
+ }
853
+
854
+ .-col-end-2 {
855
+ grid-column-end: -2;
856
+ }
857
+
858
+ .-col-end-3 {
859
+ grid-column-end: -3;
860
+ }
861
+
862
+ .-col-end-4,
863
+ .-col-end-5,
864
+ .-col-end-6,
865
+ .-col-end-7,
866
+ .-col-end-8,
867
+ .-col-end-9,
868
+ .-col-end-10,
869
+ .-col-end-11,
870
+ .-col-end-12 {
871
+ grid-column-end: -4;
872
+ }
873
+
874
+ @media (max-width: 767px) {
875
+ .mobile-col-full {
876
+ grid-column: 1/-1;
877
+ }
878
+ .mobile-col-1 {
879
+ grid-column: span 1;
880
+ }
881
+ .mobile-col-2 {
882
+ grid-column: span 2;
883
+ }
884
+ .mobile-col-3 {
885
+ grid-column: span 3;
886
+ }
887
+ .mobile-col-4 {
888
+ grid-column: span 4;
889
+ }
890
+ }
891
+ @media (min-width: 768px) {
892
+ .col-5 {
893
+ grid-column: span 5;
894
+ }
895
+ .col-6 {
896
+ grid-column: span 6;
897
+ }
898
+ .col-7 {
899
+ grid-column: span 7;
900
+ }
901
+ .col-8,
902
+ .col-9,
903
+ .col-10,
904
+ .col-11,
905
+ .col-12 {
906
+ grid-column: span 8;
907
+ }
908
+ .col-start-5 {
909
+ grid-column-start: 5;
910
+ }
911
+ .col-start-6 {
912
+ grid-column-start: 6;
913
+ }
914
+ .col-start-7 {
915
+ grid-column-start: 7;
916
+ }
917
+ .col-start-8,
918
+ .col-start-9,
919
+ .col-start-10,
920
+ .col-start-11,
921
+ .col-start-12 {
922
+ grid-column-start: 8;
923
+ }
924
+ .-col-start-6 {
925
+ grid-column-start: -6;
926
+ }
927
+ .-col-start-7 {
928
+ grid-column-start: -7;
929
+ }
930
+ .-col-start-8 {
931
+ grid-column-start: -8;
932
+ }
933
+ .-col-start-9,
934
+ .-col-start-10,
935
+ .-col-start-11,
936
+ .-col-start-12,
937
+ .-col-start-13 {
938
+ grid-column-start: -9;
939
+ }
940
+ .col-end-6 {
941
+ grid-column-end: 6;
942
+ }
943
+ .col-end-7 {
944
+ grid-column-end: 7;
945
+ }
946
+ .col-end-8 {
947
+ grid-column-end: 8;
948
+ }
949
+ .col-end-9,
950
+ .col-end-10,
951
+ .col-end-11,
952
+ .col-end-12,
953
+ .col-end-13 {
954
+ grid-column-end: 9;
955
+ }
956
+ .-col-end-5 {
957
+ grid-column-end: -5;
958
+ }
959
+ .-col-end-6 {
960
+ grid-column-end: -6;
961
+ }
962
+ .-col-end-7 {
963
+ grid-column-end: -7;
964
+ }
965
+ .-col-end-8,
966
+ .-col-end-9,
967
+ .-col-end-10,
968
+ .-col-end-11,
969
+ .-col-end-12 {
970
+ grid-column-end: -8;
971
+ }
972
+ }
973
+ @media (min-width: 768px) and (max-width: 1151px) {
974
+ .tablet-col-full {
975
+ grid-column: 1/-1;
976
+ }
977
+ .tablet-col-1 {
978
+ grid-column: span 1;
979
+ }
980
+ .tablet-col-2 {
981
+ grid-column: span 2;
982
+ }
983
+ .tablet-col-3 {
984
+ grid-column: span 3;
985
+ }
986
+ .tablet-col-4 {
987
+ grid-column: span 4;
988
+ }
989
+ .tablet-col-5 {
990
+ grid-column: span 5;
991
+ }
992
+ .tablet-col-6 {
993
+ grid-column: span 6;
994
+ }
995
+ .tablet-col-7 {
996
+ grid-column: span 7;
997
+ }
998
+ .tablet-col-8 {
999
+ grid-column: span 8;
1000
+ }
1001
+ .tablet-col-start-1 {
1002
+ grid-column-start: 1;
1003
+ }
1004
+ .tablet-col-start-2 {
1005
+ grid-column-start: 2;
1006
+ }
1007
+ .tablet-col-start-3 {
1008
+ grid-column-start: 3;
1009
+ }
1010
+ .tablet-col-start-4 {
1011
+ grid-column-start: 4;
1012
+ }
1013
+ .tablet-col-start-5 {
1014
+ grid-column-start: 5;
1015
+ }
1016
+ .tablet-col-start-6 {
1017
+ grid-column-start: 6;
1018
+ }
1019
+ .tablet-col-start-7 {
1020
+ grid-column-start: 7;
1021
+ }
1022
+ .tablet-col-start-8 {
1023
+ grid-column-start: 8;
1024
+ }
1025
+ .-tablet-col-start-2 {
1026
+ grid-column-start: -2;
1027
+ }
1028
+ .-tablet-col-start-3 {
1029
+ grid-column-start: -3;
1030
+ }
1031
+ .-tablet-col-start-4 {
1032
+ grid-column-start: -4;
1033
+ }
1034
+ .-tablet-col-start-5 {
1035
+ grid-column-start: -5;
1036
+ }
1037
+ .-tablet-col-start-6 {
1038
+ grid-column-start: -6;
1039
+ }
1040
+ .-tablet-col-start-7 {
1041
+ grid-column-start: -7;
1042
+ }
1043
+ .-tablet-col-start-8 {
1044
+ grid-column-start: -8;
1045
+ }
1046
+ .tablet-col-end-2 {
1047
+ grid-column-end: 2;
1048
+ }
1049
+ .tablet-col-end-3 {
1050
+ grid-column-end: 3;
1051
+ }
1052
+ .tablet-col-end-4 {
1053
+ grid-column-end: 4;
1054
+ }
1055
+ .tablet-col-end-6 {
1056
+ grid-column-end: 6;
1057
+ }
1058
+ .tablet-col-end-7 {
1059
+ grid-column-end: 7;
1060
+ }
1061
+ .tablet-col-end-8 {
1062
+ grid-column-end: 8;
1063
+ }
1064
+ .tablet-col-end-last {
1065
+ grid-column-end: -1;
1066
+ }
1067
+ .-tablet-col-end-1 {
1068
+ grid-column-end: -1;
1069
+ }
1070
+ .-tablet-col-end-2 {
1071
+ grid-column-end: -2;
1072
+ }
1073
+ .-tablet-col-end-3 {
1074
+ grid-column-end: -3;
1075
+ }
1076
+ .-tablet-col-end-4 {
1077
+ grid-column-end: -4;
1078
+ }
1079
+ .-tablet-col-end-5 {
1080
+ grid-column-end: -5;
1081
+ }
1082
+ .-tablet-col-end-6 {
1083
+ grid-column-end: -6;
1084
+ }
1085
+ .-tablet-col-end-7 {
1086
+ grid-column-end: -7;
1087
+ }
1088
+ .-tablet-col-end-8 {
1089
+ grid-column-end: -8;
1090
+ }
1091
+ }
1092
+ @media (min-width: 1152px) {
1093
+ .col-9 {
1094
+ grid-column: span 9;
1095
+ }
1096
+ .col-10 {
1097
+ grid-column: span 10;
1098
+ }
1099
+ .col-11 {
1100
+ grid-column: span 11;
1101
+ }
1102
+ .col-12 {
1103
+ grid-column: span 12;
1104
+ }
1105
+ .col-start-9 {
1106
+ grid-column-start: 9;
1107
+ }
1108
+ .col-start-10 {
1109
+ grid-column-start: 10;
1110
+ }
1111
+ .col-start-11 {
1112
+ grid-column-start: 11;
1113
+ }
1114
+ .col-start-12 {
1115
+ grid-column-start: 12;
1116
+ }
1117
+ .-col-start-10 {
1118
+ grid-column-start: -10;
1119
+ }
1120
+ .-col-start-11 {
1121
+ grid-column-start: -11;
1122
+ }
1123
+ .-col-start-12 {
1124
+ grid-column-start: -12;
1125
+ }
1126
+ .-col-start-13 {
1127
+ grid-column-start: -13;
1128
+ }
1129
+ .col-end-10 {
1130
+ grid-column-end: 10;
1131
+ }
1132
+ .col-end-11 {
1133
+ grid-column-end: 11;
1134
+ }
1135
+ .col-end-12 {
1136
+ grid-column-end: 12;
1137
+ }
1138
+ .col-end-13 {
1139
+ grid-column-end: 13;
1140
+ }
1141
+ .-col-end-9 {
1142
+ grid-column-end: -9;
1143
+ }
1144
+ .-col-end-10 {
1145
+ grid-column-end: -10;
1146
+ }
1147
+ .-col-end-11 {
1148
+ grid-column-end: -11;
1149
+ }
1150
+ .-col-end-12 {
1151
+ grid-column-end: -12;
1152
+ }
1153
+ }
1154
+ @media (min-width: 1152px) and (max-width: 1365px) {
1155
+ .desktop-col-full {
1156
+ grid-column: 1/-1;
1157
+ }
1158
+ .desktop-col-1 {
1159
+ grid-column: span 1;
1160
+ }
1161
+ .desktop-col-2 {
1162
+ grid-column: span 2;
1163
+ }
1164
+ .desktop-col-3 {
1165
+ grid-column: span 3;
1166
+ }
1167
+ .desktop-col-4 {
1168
+ grid-column: span 4;
1169
+ }
1170
+ .desktop-col-5 {
1171
+ grid-column: span 5;
1172
+ }
1173
+ .desktop-col-6 {
1174
+ grid-column: span 6;
1175
+ }
1176
+ .desktop-col-7 {
1177
+ grid-column: span 7;
1178
+ }
1179
+ .desktop-col-8 {
1180
+ grid-column: span 8;
1181
+ }
1182
+ .desktop-col-9 {
1183
+ grid-column: span 9;
1184
+ }
1185
+ .desktop-col-10 {
1186
+ grid-column: span 10;
1187
+ }
1188
+ .desktop-col-11 {
1189
+ grid-column: span 11;
1190
+ }
1191
+ .desktop-col-12 {
1192
+ grid-column: span 12;
1193
+ }
1194
+ .desktop-col-start-1 {
1195
+ grid-column-start: 1;
1196
+ }
1197
+ .desktop-col-start-2 {
1198
+ grid-column-start: 2;
1199
+ }
1200
+ .desktop-col-start-3 {
1201
+ grid-column-start: 3;
1202
+ }
1203
+ .desktop-col-start-4 {
1204
+ grid-column-start: 4;
1205
+ }
1206
+ .desktop-col-start-5 {
1207
+ grid-column-start: 5;
1208
+ }
1209
+ .desktop-col-start-6 {
1210
+ grid-column-start: 6;
1211
+ }
1212
+ .desktop-col-start-7 {
1213
+ grid-column-start: 7;
1214
+ }
1215
+ .desktop-col-start-8 {
1216
+ grid-column-start: 8;
1217
+ }
1218
+ .desktop-col-start-9 {
1219
+ grid-column-start: 9;
1220
+ }
1221
+ .desktop-col-start-10 {
1222
+ grid-column-start: 10;
1223
+ }
1224
+ .desktop-col-start-11 {
1225
+ grid-column-start: 11;
1226
+ }
1227
+ .desktop-col-start-12 {
1228
+ grid-column-start: 12;
1229
+ }
1230
+ .-desktop-col-start-2 {
1231
+ grid-column-start: -2;
1232
+ }
1233
+ .-desktop-col-start-3 {
1234
+ grid-column-start: -3;
1235
+ }
1236
+ .-desktop-col-start-4 {
1237
+ grid-column-start: -4;
1238
+ }
1239
+ .-desktop-col-start-5 {
1240
+ grid-column-start: -5;
1241
+ }
1242
+ .-desktop-col-start-6 {
1243
+ grid-column-start: -6;
1244
+ }
1245
+ .-desktop-col-start-7 {
1246
+ grid-column-start: -7;
1247
+ }
1248
+ .-desktop-col-start-8 {
1249
+ grid-column-start: -8;
1250
+ }
1251
+ .-desktop-col-start-9 {
1252
+ grid-column-start: -9;
1253
+ }
1254
+ .-desktop-col-start-10 {
1255
+ grid-column-start: -10;
1256
+ }
1257
+ .-desktop-col-start-11 {
1258
+ grid-column-start: -11;
1259
+ }
1260
+ .-desktop-col-start-12 {
1261
+ grid-column-start: -12;
1262
+ }
1263
+ .desktop-col-end-2 {
1264
+ grid-column-end: 2;
1265
+ }
1266
+ .desktop-col-end-3 {
1267
+ grid-column-end: 3;
1268
+ }
1269
+ .desktop-col-end-4 {
1270
+ grid-column-end: 4;
1271
+ }
1272
+ .desktop-col-end-6 {
1273
+ grid-column-end: 6;
1274
+ }
1275
+ .desktop-col-end-7 {
1276
+ grid-column-end: 7;
1277
+ }
1278
+ .desktop-col-end-8 {
1279
+ grid-column-end: 8;
1280
+ }
1281
+ .desktop-col-end-9 {
1282
+ grid-column-end: 9;
1283
+ }
1284
+ .desktop-col-end-10 {
1285
+ grid-column-end: 10;
1286
+ }
1287
+ .desktop-col-end-11 {
1288
+ grid-column-end: 11;
1289
+ }
1290
+ .desktop-col-end-12 {
1291
+ grid-column-end: 12;
1292
+ }
1293
+ .desktop-col-end-last {
1294
+ grid-column-end: -1;
1295
+ }
1296
+ .-desktop-col-end-1 {
1297
+ grid-column-end: -1;
1298
+ }
1299
+ .-desktop-col-end-2 {
1300
+ grid-column-end: -2;
1301
+ }
1302
+ .-desktop-col-end-3 {
1303
+ grid-column-end: -3;
1304
+ }
1305
+ .-desktop-col-end-4 {
1306
+ grid-column-end: -4;
1307
+ }
1308
+ .-desktop-col-end-5 {
1309
+ grid-column-end: -5;
1310
+ }
1311
+ .-desktop-col-end-6 {
1312
+ grid-column-end: -6;
1313
+ }
1314
+ .-desktop-col-end-7 {
1315
+ grid-column-end: -7;
1316
+ }
1317
+ .-desktop-col-end-8 {
1318
+ grid-column-end: -8;
1319
+ }
1320
+ .-desktop-col-end-9 {
1321
+ grid-column-end: -9;
1322
+ }
1323
+ .-desktop-col-end-10 {
1324
+ grid-column-end: -10;
1325
+ }
1326
+ .-desktop-col-end-11 {
1327
+ grid-column-end: -11;
1328
+ }
1329
+ .-desktop-col-end-12 {
1330
+ grid-column-end: -12;
1331
+ }
1332
+ }
1333
+ @media (min-width: 1366px) {
1334
+ .wide-col-full {
1335
+ grid-column: 1/-1;
1336
+ }
1337
+ .wide-col-1 {
1338
+ grid-column: span 1;
1339
+ }
1340
+ .wide-col-2 {
1341
+ grid-column: span 2;
1342
+ }
1343
+ .wide-col-3 {
1344
+ grid-column: span 3;
1345
+ }
1346
+ .wide-col-4 {
1347
+ grid-column: span 4;
1348
+ }
1349
+ .wide-col-5 {
1350
+ grid-column: span 5;
1351
+ }
1352
+ .wide-col-6 {
1353
+ grid-column: span 6;
1354
+ }
1355
+ .wide-col-7 {
1356
+ grid-column: span 7;
1357
+ }
1358
+ .wide-col-8 {
1359
+ grid-column: span 8;
1360
+ }
1361
+ .wide-col-9 {
1362
+ grid-column: span 9;
1363
+ }
1364
+ .wide-col-10 {
1365
+ grid-column: span 10;
1366
+ }
1367
+ .wide-col-11 {
1368
+ grid-column: span 11;
1369
+ }
1370
+ .wide-col-12 {
1371
+ grid-column: span 12;
1372
+ }
1373
+ .wide-col-start-1 {
1374
+ grid-column-start: 1;
1375
+ }
1376
+ .wide-col-start-2 {
1377
+ grid-column-start: 2;
1378
+ }
1379
+ .wide-col-start-3 {
1380
+ grid-column-start: 3;
1381
+ }
1382
+ .wide-col-start-4 {
1383
+ grid-column-start: 4;
1384
+ }
1385
+ .wide-col-start-5 {
1386
+ grid-column-start: 5;
1387
+ }
1388
+ .wide-col-start-6 {
1389
+ grid-column-start: 6;
1390
+ }
1391
+ .wide-col-start-7 {
1392
+ grid-column-start: 7;
1393
+ }
1394
+ .wide-col-start-8 {
1395
+ grid-column-start: 8;
1396
+ }
1397
+ .wide-col-start-9 {
1398
+ grid-column-start: 9;
1399
+ }
1400
+ .wide-col-start-10 {
1401
+ grid-column-start: 10;
1402
+ }
1403
+ .wide-col-start-11 {
1404
+ grid-column-start: 11;
1405
+ }
1406
+ .wide-col-start-12 {
1407
+ grid-column-start: 12;
1408
+ }
1409
+ .-wide-col-start-2 {
1410
+ grid-column-start: -2;
1411
+ }
1412
+ .-wide-col-start-3 {
1413
+ grid-column-start: -3;
1414
+ }
1415
+ .-wide-col-start-4 {
1416
+ grid-column-start: -4;
1417
+ }
1418
+ .-wide-col-start-5 {
1419
+ grid-column-start: -5;
1420
+ }
1421
+ .-wide-col-start-6 {
1422
+ grid-column-start: -6;
1423
+ }
1424
+ .-wide-col-start-7 {
1425
+ grid-column-start: -7;
1426
+ }
1427
+ .-wide-col-start-8 {
1428
+ grid-column-start: -8;
1429
+ }
1430
+ .-wide-col-start-9 {
1431
+ grid-column-start: -9;
1432
+ }
1433
+ .-wide-col-start-10 {
1434
+ grid-column-start: -10;
1435
+ }
1436
+ .-wide-col-start-11 {
1437
+ grid-column-start: -11;
1438
+ }
1439
+ .-wide-col-start-12 {
1440
+ grid-column-start: -12;
1441
+ }
1442
+ .wide-col-end-2 {
1443
+ grid-column-end: 2;
1444
+ }
1445
+ .wide-col-end-3 {
1446
+ grid-column-end: 3;
1447
+ }
1448
+ .wide-col-end-4 {
1449
+ grid-column-end: 4;
1450
+ }
1451
+ .wide-col-end-6 {
1452
+ grid-column-end: 6;
1453
+ }
1454
+ .wide-col-end-7 {
1455
+ grid-column-end: 7;
1456
+ }
1457
+ .wide-col-end-8 {
1458
+ grid-column-end: 8;
1459
+ }
1460
+ .wide-col-end-9 {
1461
+ grid-column-end: 9;
1462
+ }
1463
+ .wide-col-end-10 {
1464
+ grid-column-end: 10;
1465
+ }
1466
+ .wide-col-end-11 {
1467
+ grid-column-end: 11;
1468
+ }
1469
+ .wide-col-end-12 {
1470
+ grid-column-end: 12;
1471
+ }
1472
+ .wide-col-end-last {
1473
+ grid-column-end: -1;
1474
+ }
1475
+ .-wide-col-end-1 {
1476
+ grid-column-end: -1;
1477
+ }
1478
+ .-wide-col-end-2 {
1479
+ grid-column-end: -2;
1480
+ }
1481
+ .-wide-col-end-3 {
1482
+ grid-column-end: -3;
1483
+ }
1484
+ .-wide-col-end-4 {
1485
+ grid-column-end: -4;
1486
+ }
1487
+ .-wide-col-end-5 {
1488
+ grid-column-end: -5;
1489
+ }
1490
+ .-wide-col-end-6 {
1491
+ grid-column-end: -6;
1492
+ }
1493
+ .-wide-col-end-7 {
1494
+ grid-column-end: -7;
1495
+ }
1496
+ .-wide-col-end-8 {
1497
+ grid-column-end: -8;
1498
+ }
1499
+ .-wide-col-end-9 {
1500
+ grid-column-end: -9;
1501
+ }
1502
+ .-wide-col-end-10 {
1503
+ grid-column-end: -10;
1504
+ }
1505
+ .-wide-col-end-11 {
1506
+ grid-column-end: -11;
1507
+ }
1508
+ .-wide-col-end-12 {
1509
+ grid-column-end: -12;
1510
+ }
1511
+ }
1512
+
1513
+ /*# sourceMappingURL=tokens.css.map */
1514
+
1515
+ :root {
1516
+ --color-background: var(--gray50);
1517
+ --color-primary01: var(--blue500);
1518
+ --color-primary02: var(--blue500);
1519
+ --color-primary03: var(--blue50);
1520
+ --color-secondary01: var(--blue500);
1521
+ --color-secondary02: var(--red500);
1522
+ --color-secondary03: var(--red500);
1523
+ --color-danger01: var(--color-error-default);
1524
+ --color-danger02: var(--color-error-default);
1525
+ --color-error01: var(--color-error-default);
1526
+ --color-error02: var(--red800);
1527
+ --color-error-inverse: var(--red50);
1528
+ --color-text-error: var(--color-error-default);
1529
+ --color-success01: var(--color-success-default);
1530
+ --color-success02: var(--green800);
1531
+ --color-text-success: var(--color-success-default);
1532
+ --color-success-inverse: var(--green50);
1533
+ --color-warning01: var(--color-warning-default);
1534
+ --color-warning02: var(--yellow800);
1535
+ --color-text-warning: var(--color-warning-default);
1536
+ --color-warning-inverse: var(--yellow50);
1537
+ --color-surface01: var(--color-white);
1538
+ --color-surface02: var(--gray50);
1539
+ --color-surface03: var(--gray200);
1540
+ --color-surface04: var(--gray700);
1541
+ --color-surface05: var(--gray800);
1542
+ --color-text01: var(--gray800);
1543
+ --color-text02: var(--gray800);
1544
+ --color-text03: var(--gray300);
1545
+ --color-text04: var(--color-white);
1546
+ --color-text05: var(--gray600);
1547
+ --color-text-inverse: var(--color-white);
1548
+ --color-icon01: var(--blue500);
1549
+ --color-icon02: var(--gray800);
1550
+ --color-icon03: var(--color-white);
1551
+ --color-input-field01: var(--color-white);
1552
+ --color-input-field02: var(--color-white);
1553
+ --color-hover-primary: var(--blue800);
1554
+ --color-hover-primary-text: var(--color-black);
1555
+ --color-hover-secondary: var(--blue800);
1556
+ --color-hover-tertiary: var(--blue800);
1557
+ --color-hover-surface: var(--gray50);
1558
+ --color-hover-light: var(--blue400);
1559
+ --color-hover-danger: var(--red800);
1560
+ --color-active-primary: var(--blue800);
1561
+ --color-active-secondary: var(--blue800);
1562
+ --color-active-tertiary: var(--blue800);
1563
+ --color-active-surface: var(--gray300);
1564
+ --color-active-light: var(--blue400);
1565
+ --color-pressed-primary: var(--blue400);
1566
+ --color-pressed-secondary: var(--red400);
1567
+ --color-selected-surface: var(--gray300);
1568
+ --color-selected-light: var(--gray300);
1569
+ --color-highlight: var(--blue100);
1570
+ --color-ghost01: var(--gray300);
1571
+ --color-ghost02: var(--gray500);
1572
+ --color-disabled01: var(--gray200);
1573
+ --color-disabled02: var(--gray700);
1574
+ --color-disabled03: var(--gray500);
1575
+ --shadow-focus-primary: 0 0 2px 2px var(--color-highlight);
1576
+ --color-link-primary: var(--blue500);
1577
+ --color-hover-link: var(--blue800);
1578
+ --color-active-link: var(--blue800);
1579
+ --color-pressed-link: var(--blue400);
1580
+ --color-visited-link: var(--blue800);
1581
+ --color-inverse-link: var(--color-white);
1582
+ --color-inverse-hover-link: var(--color-white);
1583
+ --color-inverse-active-link: var(--color-white);
1584
+ --color-inverse-pressed-link: var(--color-white);
1585
+ --color-inverse-visited-link: var(--gray300);
1586
+ }
1587
+
1588
+ /*# sourceMappingURL=default.css.map */
1589
+
1590
+ .theme-black-yellow {
1591
+ --color-primary01: var(--gray950);
1592
+ --color-primary02: var(--gray950);
1593
+ --color-primary03: var(--gray100);
1594
+ --color-secondary01: var(--yellow500);
1595
+ --color-secondary02: var(--yellow500);
1596
+ --color-secondary03: var(--yellow500);
1597
+ --color-text01: var(--gray950);
1598
+ --color-text-inverse: var(--color-white);
1599
+ --color-icon01: var(--gray950);
1600
+ --color-active-primary: var(--gray800);
1601
+ --color-pressed-primary: var(--gray800);
1602
+ --color-hover-primary: var(--gray800);
1603
+ --color-hover-secondary: var(--gray950);
1604
+ --color-hover-tertiary: var(--gray950);
1605
+ --color-hover-primary-text: var(--gray950);
1606
+ --color-hover-light: var(--yellow500);
1607
+ --color-background: var(--color-white);
1608
+ --color-hover-surface: var(--gray50);
1609
+ }
1610
+
1611
+ /*# sourceMappingURL=black-yellow.css.map */
1612
+
1613
+ .theme-dark {
1614
+ --color-surface01: var(--gray800);
1615
+ --color-primary01: var(--color-white);
1616
+ --color-primary02: var(--gray800);
1617
+ --color-hover-primary: var(--color-primary01);
1618
+ --color-pressed-primary: var(--color-primary01);
1619
+ --color-text02: var(--color-white);
1620
+ --color-text-inverse: var(--gray800);
1621
+ --color-link-primary: var(--color-white);
1622
+ --color-hover-link: var(--color-link-primary);
1623
+ --color-active-link: var(--color-link-primary);
1624
+ --color-pressed-link: var(--color-link-primary);
1625
+ --color-visited-link: var(--color-link-primary);
1626
+ --color-error02: #ffc1bd;
1627
+ --color-text-error: #ffc1bd;
1628
+ --color-success02: #a8e168;
1629
+ --color-text-success: #a8e168;
1630
+ --color-warning02: #f7ca6a;
1631
+ --color-text-warning: #f7ca6a;
1632
+ background: var(--color-surface01);
1633
+ }
1634
+
1635
+ /*# sourceMappingURL=dark-default.css.map */
1636
+