@itcenteratunihelsinki/huds-lib 0.8.89 → 0.9.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 (74) hide show
  1. package/components/heading.js +2 -2
  2. package/components/hy-adjacent-image-text.js +1 -1
  3. package/components/hy-banner.js +1 -1
  4. package/components/hy-event-item.js +1 -1
  5. package/components/hy-general-list-item2.js +1 -1
  6. package/components/hy-hero-carousel.js +1 -1
  7. package/components/hy-hero.js +1 -1
  8. package/components/hy-ingress.js +1 -1
  9. package/components/hy-link-list.js +1 -1
  10. package/components/hy-list-item.js +1 -1
  11. package/components/hy-person-profile.js +1 -1
  12. package/components/hy-prominent-image.js +1 -1
  13. package/components/link-box.js +2 -2
  14. package/components/paragraph-text.js +1 -1
  15. package/components/site-search.js +1 -1
  16. package/dist/cjs/hy-adjacent-image-text.cjs.entry.js +1 -1
  17. package/dist/cjs/hy-banner.cjs.entry.js +1 -1
  18. package/dist/cjs/hy-breadcrumbs_15.cjs.entry.js +4 -4
  19. package/dist/cjs/hy-event-item.cjs.entry.js +1 -1
  20. package/dist/cjs/hy-general-list_2.cjs.entry.js +1 -1
  21. package/dist/cjs/hy-hero-carousel.cjs.entry.js +1 -1
  22. package/dist/cjs/hy-hero.cjs.entry.js +1 -1
  23. package/dist/cjs/hy-link-box_2.cjs.entry.js +2 -2
  24. package/dist/cjs/hy-link-list.cjs.entry.js +1 -1
  25. package/dist/cjs/hy-list-item.cjs.entry.js +1 -1
  26. package/dist/cjs/hy-paragraph-text.cjs.entry.js +1 -1
  27. package/dist/cjs/hy-person-profile.cjs.entry.js +1 -1
  28. package/dist/cjs/hy-prominent-image.cjs.entry.js +1 -1
  29. package/dist/collection/components/hy-adjacent-image-text/adjacent-image-text.css +25 -23
  30. package/dist/collection/components/hy-banner/hy-banner.css +1 -1
  31. package/dist/collection/components/hy-event-item/hy-event-item.css +4 -4
  32. package/dist/collection/components/hy-general-list-item/hy-general-list-item.css +43 -25
  33. package/dist/collection/components/hy-heading/heading-fw.css +146 -137
  34. package/dist/collection/components/hy-heading/heading.css +146 -137
  35. package/dist/collection/components/hy-hero/hy-hero.css +47 -55
  36. package/dist/collection/components/hy-hero-carousel/hy-hero-carousel.css +220 -54
  37. package/dist/collection/components/hy-ingress/ingress.css +44 -10
  38. package/dist/collection/components/hy-link-box/link-box.css +18 -17
  39. package/dist/collection/components/hy-link-box/link-box.js +1 -1
  40. package/dist/collection/components/hy-link-list/hy-link-list.css +34 -26
  41. package/dist/collection/components/hy-list-item/hy-list-item.css +3 -3
  42. package/dist/collection/components/hy-paragraph-text/paragraph-text.css +19 -12
  43. package/dist/collection/components/hy-person-profile/person-profile.css +2 -1
  44. package/dist/collection/components/hy-prominent-image/hy-prominent-image.css +1 -1
  45. package/dist/collection/components/hy-site-header/site-search/site-search.css +1 -1
  46. package/dist/esm/hy-adjacent-image-text.entry.js +1 -1
  47. package/dist/esm/hy-banner.entry.js +1 -1
  48. package/dist/esm/hy-breadcrumbs_15.entry.js +4 -4
  49. package/dist/esm/hy-event-item.entry.js +1 -1
  50. package/dist/esm/hy-general-list_2.entry.js +1 -1
  51. package/dist/esm/hy-hero-carousel.entry.js +1 -1
  52. package/dist/esm/hy-hero.entry.js +1 -1
  53. package/dist/esm/hy-link-box_2.entry.js +2 -2
  54. package/dist/esm/hy-link-list.entry.js +1 -1
  55. package/dist/esm/hy-list-item.entry.js +1 -1
  56. package/dist/esm/hy-paragraph-text.entry.js +1 -1
  57. package/dist/esm/hy-person-profile.entry.js +1 -1
  58. package/dist/esm/hy-prominent-image.entry.js +1 -1
  59. package/dist/fonts/fonts.css +4 -4
  60. package/dist/huds-lib/huds-lib.css +1 -1
  61. package/dist/huds-lib/hy-adjacent-image-text.entry.js +1 -1
  62. package/dist/huds-lib/hy-banner.entry.js +1 -1
  63. package/dist/huds-lib/hy-breadcrumbs_15.entry.js +1 -1
  64. package/dist/huds-lib/hy-event-item.entry.js +1 -1
  65. package/dist/huds-lib/hy-general-list_2.entry.js +1 -1
  66. package/dist/huds-lib/hy-hero-carousel.entry.js +1 -1
  67. package/dist/huds-lib/hy-hero.entry.js +1 -1
  68. package/dist/huds-lib/hy-link-box_2.entry.js +1 -1
  69. package/dist/huds-lib/hy-link-list.entry.js +1 -1
  70. package/dist/huds-lib/hy-list-item.entry.js +1 -1
  71. package/dist/huds-lib/hy-paragraph-text.entry.js +1 -1
  72. package/dist/huds-lib/hy-person-profile.entry.js +1 -1
  73. package/dist/huds-lib/hy-prominent-image.entry.js +1 -1
  74. package/package.json +3 -2
package/dist/collection/components/hy-heading/heading.css CHANGED
@@ -138,49 +138,58 @@
138
138
  }
139
139
  h2.hy-heading__introduction,
140
140
  h2.hy-heading__landingsection {
141
- font-size: 1.75rem;
142
- line-height: 32px;
143
- font-weight: 700;
144
- letter-spacing: -0.7px;
145
- text-transform: uppercase;
146
- }
147
- h1.hy-heading__hero {
148
- font-size: 2rem;
149
- line-height: 38px;
150
- font-weight: 700;
151
- color: var(--grayscale-black);
152
- font-family: var(--main-font-family);
153
- letter-spacing: -0.8px;
154
- margin-bottom: 0;
141
+ color: var(--ds-palette-black-95);
142
+ font-family: var(--ds-fontFamily-heading);
143
+ font-size: var(--ds-fontSize-32);
144
+ font-weight: var(--ds-fontWeight-bold);
145
+ letter-spacing: var(--ds-letterSpacing-tight);
146
+ line-height: 36px;
147
+ font-stretch: var(--ds-fontWidth-normal);
148
+ text-transform: none;
155
149
  }
156
- @media (min-width: 1024px) {
157
- h1.hy-heading__hero {
158
- font-size: 2.875rem;
159
- line-height: 54px;
160
- letter-spacing: -1.15px;
150
+ @media (min-width: 60rem) {
151
+ h2.hy-heading__introduction,
152
+ h2.hy-heading__landingsection {
153
+ font-size: var(--ds-fontSize-48);
154
+ line-height: 52px;
155
+ font-stretch: var(--ds-fontWidth-condense);
161
156
  }
162
157
  }
163
- @media (min-width: 1601px) {
158
+ h1.hy-heading__hero {
159
+ color: var(--ds-palette-black-95);
160
+ font-family: var(--ds-fontFamily-heading);
161
+ font-size: var(--ds-fontSize-40);
162
+ font-weight: var(--ds-fontWeight-bold);
163
+ letter-spacing: -1.2px;
164
+ font-stretch: var(--ds-fontWidth-normal);
165
+ line-height: 48px;
166
+ text-transform: uppercase;
167
+ }
168
+ @media (min-width: 60rem) {
164
169
  h1.hy-heading__hero {
165
- font-size: 3.25rem;
166
- line-height: 60px;
167
- letter-spacing: -1.3px;
170
+ font-size: var(--ds-fontSize-56);
171
+ letter-spacing: var(--ds-letterSpacing-tight);
172
+ line-height: 64px;
173
+ font-stretch: var(--ds-fontWidth-condense);
168
174
  }
169
175
  }
170
- @media (min-width: 30rem) {
171
- .hy-heading__container__common h2.hy-heading__introduction,
172
- .hy-heading__container__common h2.hy-heading__landingsection {
173
- font-size: 2.125rem;
174
- line-height: 40px;
175
- letter-spacing: -0.85px;
176
- }
176
+ .hy-heading__container__common h2.hy-heading__introduction,
177
+ .hy-heading__container__common h2.hy-heading__landingsection {
178
+ color: var(--ds-palette-black-95);
179
+ font-family: var(--ds-fontFamily-heading);
180
+ font-size: var(--ds-fontSize-32);
181
+ font-weight: var(--ds-fontWeight-bold);
182
+ letter-spacing: var(--ds-letterSpacing-tight);
183
+ line-height: 36px;
184
+ font-stretch: var(--ds-fontWidth-normal);
185
+ text-transform: none;
177
186
  }
178
- @media (min-width: 1601px) {
187
+ @media (min-width: 60rem) {
179
188
  .hy-heading__container__common h2.hy-heading__introduction,
180
189
  .hy-heading__container__common h2.hy-heading__landingsection {
181
- font-size: 2.625rem;
182
- line-height: 48px;
183
- letter-spacing: -1.05px;
190
+ font-size: var(--ds-fontSize-48);
191
+ line-height: 52px;
192
+ font-stretch: var(--ds-fontWidth-condense);
184
193
  }
185
194
  }
186
195
  .hy-heading__container__common h2.hy-heading__introduction {
@@ -258,20 +267,23 @@ h1.hy-heading__hero {
258
267
  letter-spacing: -1.05px;
259
268
  }
260
269
  }
261
- @media (min-width: 30rem) {
262
- .hy-heading__container__large h2.hy-heading__introduction,
263
- .hy-heading__container__large h2.hy-heading__landingsection {
264
- font-size: 2.125rem;
265
- line-height: 40px;
266
- letter-spacing: -0.85px;
267
- }
270
+ .hy-heading__container__large h2.hy-heading__introduction,
271
+ .hy-heading__container__large h2.hy-heading__landingsection {
272
+ color: var(--ds-palette-black-95);
273
+ font-family: var(--ds-fontFamily-heading);
274
+ font-size: var(--ds-fontSize-32);
275
+ font-weight: var(--ds-fontWeight-bold);
276
+ letter-spacing: var(--ds-letterSpacing-tight);
277
+ line-height: 36px;
278
+ font-stretch: var(--ds-fontWidth-normal);
279
+ text-transform: none;
268
280
  }
269
- @media (min-width: 75.0625rem) {
281
+ @media (min-width: 60rem) {
270
282
  .hy-heading__container__large h2.hy-heading__introduction,
271
283
  .hy-heading__container__large h2.hy-heading__landingsection {
272
- font-size: 2.625rem;
273
- line-height: 48px;
274
- letter-spacing: -1.05px;
284
+ font-size: var(--ds-fontSize-48);
285
+ line-height: 52px;
286
+ font-stretch: var(--ds-fontWidth-condense);
275
287
  }
276
288
  }
277
289
  @media (min-width: 75.0625rem) {
@@ -313,12 +325,23 @@ h1.hy-heading__hero {
313
325
  letter-spacing: -1.3px;
314
326
  }
315
327
  }
316
- @media (min-width: 75.0625rem) {
328
+ .hy-heading__container__large h1.hy-heading__frontpage,
329
+ .hy-heading__container__large h1.hy-heading__landing_major {
330
+ color: var(--ds-palette-black-95);
331
+ font-family: var(--ds-fontFamily-heading);
332
+ font-size: var(--ds-fontSize-32);
333
+ font-weight: var(--ds-fontWeight-bold);
334
+ letter-spacing: var(--ds-letterSpacing-tight);
335
+ line-height: 36px;
336
+ font-stretch: var(--ds-fontWidth-normal);
337
+ text-transform: none;
338
+ }
339
+ @media (min-width: 60rem) {
317
340
  .hy-heading__container__large h1.hy-heading__frontpage,
318
341
  .hy-heading__container__large h1.hy-heading__landing_major {
319
- font-size: 3.5rem;
320
- line-height: 64px;
321
- letter-spacing: -1.4px;
342
+ font-size: var(--ds-fontSize-48);
343
+ line-height: 52px;
344
+ font-stretch: var(--ds-fontWidth-condense);
322
345
  }
323
346
  }
324
347
  .hy-heading__container__large h2.hy-heading__group_footer_info {
@@ -361,29 +384,20 @@ h1.hy-heading__hero {
361
384
  }
362
385
  }
363
386
  h3.hy-heading__landingsection {
364
- font-size: 1.625rem;
365
- line-height: 32px;
366
- letter-spacing: -0.8px;
367
- }
368
- @media (min-width: 30rem) {
369
- h3.hy-heading__landingsection {
370
- font-size: 2rem;
371
- line-height: 32px;
372
- letter-spacing: -1px;
373
- }
374
- }
375
- @media (min-width: 75.0625rem) {
376
- h3.hy-heading__landingsection {
377
- font-size: 2.5rem;
378
- line-height: 48px;
379
- letter-spacing: -1.2px;
380
- }
387
+ color: var(--ds-palette-black-95);
388
+ font-family: var(--ds-fontFamily-heading);
389
+ font-size: var(--ds-fontSize-24);
390
+ font-weight: var(--ds-fontWeight-bold);
391
+ letter-spacing: var(--ds-letterSpacing-normal);
392
+ line-height: 28px;
393
+ text-transform: none;
381
394
  }
382
- @media (min-width: 1601px) {
395
+ @media (min-width: 60rem) {
383
396
  h3.hy-heading__landingsection {
384
- font-size: 2.5rem;
385
- line-height: 48px;
386
- letter-spacing: -1.2px;
397
+ font-size: var(--ds-fontSize-32);
398
+ font-weight: var(--ds-fontWeight-semiboldPlus);
399
+ letter-spacing: var(--ds-letterSpacing-tight);
400
+ line-height: 36px;
387
401
  }
388
402
  }
389
403
  h1,
@@ -408,104 +422,99 @@ h6.negative {
408
422
  color: var(--grayscale-white);
409
423
  }
410
424
  h1 {
411
- font-size: 2rem;
412
- line-height: 38px;
413
- letter-spacing: -0.8px;
425
+ color: var(--ds-palette-black-95);
426
+ font-family: var(--ds-fontFamily-heading);
427
+ font-size: var(--ds-fontSize-40);
428
+ font-weight: var(--ds-fontWeight-bold);
429
+ letter-spacing: -1.2px;
430
+ font-stretch: var(--ds-fontWidth-normal);
431
+ line-height: 48px;
414
432
  text-transform: uppercase;
415
433
  }
416
- @media (min-width: 30rem) {
417
- h1 {
418
- font-size: 2.875rem;
419
- line-height: 54px;
420
- letter-spacing: -1.15px;
421
- }
422
- }
423
- @media (min-width: 1601px) {
434
+ @media (min-width: 60rem) {
424
435
  h1 {
425
- font-size: 3.25rem;
426
- line-height: 60px;
427
- letter-spacing: -1.3px;
428
- }
429
- }
430
- @media (min-width: 75.0625rem) {
431
- .hy-heading__container__large h1 {
432
- font-size: 3.25rem;
433
- line-height: 60px;
434
- letter-spacing: -1.3px;
436
+ font-size: var(--ds-fontSize-56);
437
+ letter-spacing: var(--ds-letterSpacing-tight);
438
+ line-height: 64px;
439
+ font-stretch: var(--ds-fontWidth-condense);
435
440
  }
436
441
  }
437
442
  h2 {
438
- font-size: 1.625rem;
439
- line-height: 32px;
440
- font-weight: 700;
441
- letter-spacing: -0.52px;
443
+ color: var(--ds-palette-black-95);
444
+ font-family: var(--ds-fontFamily-heading);
445
+ font-size: var(--ds-fontSize-32);
446
+ font-weight: var(--ds-fontWeight-bold);
447
+ letter-spacing: var(--ds-letterSpacing-tight);
448
+ line-height: 36px;
449
+ font-stretch: var(--ds-fontWidth-normal);
450
+ text-transform: none;
442
451
  }
443
- @media (min-width: 30rem) {
452
+ @media (min-width: 60rem) {
444
453
  h2 {
445
- font-size: 1.875rem;
446
- line-height: 36px;
447
- letter-spacing: -0.6px;
448
- }
449
- }
450
- @media (min-width: 1601px) {
451
- .hy-heading__container__common h2 {
452
- font-size: 2.125rem;
453
- line-height: 40px;
454
- letter-spacing: -0.68px;
455
- }
456
- }
457
- @media (min-width: 75.0625rem) {
458
- .hy-heading__container__large h2 {
459
- font-size: 2.125rem;
460
- line-height: 40px;
461
- letter-spacing: -0.68px;
454
+ font-size: var(--ds-fontSize-48);
455
+ line-height: 52px;
456
+ font-stretch: var(--ds-fontWidth-condense);
462
457
  }
463
458
  }
464
459
  h3 {
465
- font-size: 1.375rem;
460
+ color: var(--ds-palette-black-95);
461
+ font-family: var(--ds-fontFamily-heading);
462
+ font-size: var(--ds-fontSize-24);
463
+ font-weight: var(--ds-fontWeight-bold);
464
+ letter-spacing: var(--ds-letterSpacing-normal);
466
465
  line-height: 28px;
467
- letter-spacing: -0.7px;
466
+ text-transform: none;
468
467
  }
469
- @media (min-width: 30rem) {
468
+ @media (min-width: 60rem) {
470
469
  h3 {
471
- font-size: 1.625rem;
472
- line-height: 32px;
473
- letter-spacing: -0.8px;
470
+ font-size: var(--ds-fontSize-32);
471
+ font-weight: var(--ds-fontWeight-semiboldPlus);
472
+ letter-spacing: var(--ds-letterSpacing-tight);
473
+ line-height: 36px;
474
474
  }
475
475
  }
476
476
  h4 {
477
- font-size: 1.125rem;
478
- line-height: 24px;
479
- letter-spacing: -0.56px;
477
+ color: var(--ds-palette-black-95);
478
+ font-family: var(--ds-fontFamily-heading);
479
+ font-size: var(--ds-fontSize-20);
480
+ font-weight: var(--ds-fontWeight-semiboldPlus);
481
+ letter-spacing: var(--ds-letterSpacing-normal);
482
+ line-height: 28px;
483
+ text-transform: none;
480
484
  }
481
- @media (min-width: 30rem) {
485
+ @media (min-width: 60rem) {
482
486
  h4 {
483
- font-size: 1.375rem;
484
- line-height: 28px;
485
- letter-spacing: -0.69px;
487
+ font-size: var(--ds-fontSize-24);
488
+ line-height: 24px;
486
489
  }
487
490
  }
488
491
  h5 {
489
- font-size: 1rem;
492
+ color: var(--ds-palette-black-95);
493
+ font-family: var(--ds-fontFamily-heading);
494
+ font-size: var(--ds-fontSize-18);
495
+ font-weight: var(--ds-fontWeight-semibold);
496
+ letter-spacing: var(--ds-letterSpacing-normal);
490
497
  line-height: 20px;
491
- letter-spacing: -0.5px;
498
+ text-transform: none;
492
499
  }
493
- @media (min-width: 30rem) {
500
+ @media (min-width: 60rem) {
494
501
  h5 {
495
- font-size: 1.125rem;
502
+ font-size: var(--ds-fontSize-20);
496
503
  line-height: 24px;
497
- letter-spacing: -0.56px;
498
504
  }
499
505
  }
500
506
  h6 {
501
- font-size: 0.875rem;
502
- line-height: 16px;
503
- letter-spacing: -0.44px;
507
+ color: var(--ds-palette-black-95);
508
+ font-family: var(--ds-fontFamily-heading);
509
+ font-size: var(--ds-fontSize-16);
510
+ font-weight: var(--ds-fontWeight-bold);
511
+ letter-spacing: var(--ds-letterSpacing-normal);
512
+ line-height: 18px;
513
+ text-transform: uppercase;
504
514
  }
505
- @media (min-width: 30rem) {
515
+ @media (min-width: 60rem) {
506
516
  h6 {
507
- font-size: 1rem;
517
+ font-size: var(--ds-fontSize-18);
508
518
  line-height: 20px;
509
- letter-spacing: -0.5px;
510
519
  }
511
520
  }
package/dist/collection/components/hy-hero/hy-hero.css CHANGED
@@ -410,39 +410,43 @@ h2.hy-hero__title {
410
410
  color: var(--grayscale-black) !important;
411
411
  }
412
412
  h2.hy-hero__title.hy-heading__hero {
413
- font-size: 2.25rem;
414
- line-height: 33px;
415
- font-weight: 700;
416
- color: var(--grayscale-black);
417
- font-family: var(--main-font-family);
413
+ color: var(--ds-palette-black-95);
414
+ font-family: var(--ds-fontFamily-heading);
415
+ font-size: var(--ds-fontSize-32);
416
+ font-weight: var(--ds-fontWeight-bold);
417
+ letter-spacing: var(--ds-letterSpacing-tight);
418
+ line-height: 36px;
419
+ font-stretch: var(--ds-fontWidth-normal);
420
+ text-transform: none;
418
421
  letter-spacing: -0.8px;
419
422
  margin-bottom: 0;
420
423
  text-transform: none;
421
424
  text-wrap: balance;
422
425
  }
423
- @media (min-width: 1024px) {
424
- h2.hy-hero__title.hy-heading__hero {
425
- font-size: 2.25rem;
426
- line-height: 40px;
427
- letter-spacing: -1.15px;
428
- }
429
- }
430
- @media (min-width: 1601px) {
426
+ @media (min-width: 60rem) {
431
427
  h2.hy-hero__title.hy-heading__hero {
432
- font-size: 2.375rem;
433
- line-height: 48px;
434
- letter-spacing: -1.3px;
428
+ font-size: var(--ds-fontSize-48);
429
+ line-height: 52px;
430
+ font-stretch: var(--ds-fontWidth-condense);
435
431
  }
436
432
  }
437
433
  .hy-hero__description {
438
- font-size: 1rem;
439
- line-height: 24px;
440
- font-family: var(--main-font-family);
434
+ color: inherit;
435
+ font-family: var(--ds-fontFamily-body);
436
+ font-size: var(--ds-fontSize-18);
437
+ font-weight: var(--ds-fontWeight-regular);
438
+ letter-spacing: var(--ds-letterSpacing-wide);
439
+ line-height: var(--ds-lineHeight-large);
441
440
  margin: 16px 0 0 0;
442
441
  padding: 0;
443
442
  position: relative;
444
443
  text-wrap: pretty;
445
444
  }
445
+ @media (min-width: 60rem) {
446
+ .hy-hero__description {
447
+ font-size: var(--ds-fontSize-20);
448
+ }
449
+ }
446
450
  @media (min-width: 1601px) {
447
451
  .hy-hero__description {
448
452
  font-size: 1.0625rem;
@@ -500,29 +504,22 @@ h2.hy-hero__title.hy-heading__hero {
500
504
  **/
501
505
  .hy-hero.hy-hero--group_landing.hy-hero--generic_site_group h2.hy-hero__title.hy-heading__hero,
502
506
  .hy-hero.hy-hero--research_group h2.hy-hero__title.hy-heading__hero {
503
- font-size: 2rem;
504
- line-height: 38px;
505
- font-weight: 700;
506
- color: var(--grayscale-black);
507
- font-family: var(--main-font-family);
508
- letter-spacing: -0.8px;
507
+ color: var(--ds-palette-black-95);
508
+ font-family: var(--ds-fontFamily-heading);
509
+ font-size: var(--ds-fontSize-32);
510
+ font-weight: var(--ds-fontWeight-bold);
511
+ letter-spacing: var(--ds-letterSpacing-tight);
512
+ line-height: 36px;
513
+ font-stretch: var(--ds-fontWidth-normal);
514
+ text-transform: none;
509
515
  margin-bottom: 0;
510
- text-transform: uppercase;
511
516
  }
512
- @media (min-width: 1024px) {
513
- .hy-hero.hy-hero--group_landing.hy-hero--generic_site_group h2.hy-hero__title.hy-heading__hero,
514
- .hy-hero.hy-hero--research_group h2.hy-hero__title.hy-heading__hero {
515
- font-size: 2.875rem;
516
- line-height: 54px;
517
- letter-spacing: -1.15px;
518
- }
519
- }
520
- @media (min-width: 1601px) {
517
+ @media (min-width: 60rem) {
521
518
  .hy-hero.hy-hero--group_landing.hy-hero--generic_site_group h2.hy-hero__title.hy-heading__hero,
522
519
  .hy-hero.hy-hero--research_group h2.hy-hero__title.hy-heading__hero {
523
- font-size: 3.25rem;
524
- line-height: 60px;
525
- letter-spacing: -1.3px;
520
+ font-size: var(--ds-fontSize-48);
521
+ line-height: 52px;
522
+ font-stretch: var(--ds-fontWidth-condense);
526
523
  }
527
524
  }
528
525
  /**
@@ -535,27 +532,22 @@ h2.hy-hero__title.hy-heading__hero {
535
532
  }
536
533
  }
537
534
  .hy-hero.hy-hero--front_page h2.hy-hero__title.hy-heading__hero {
538
- font-size: 2rem;
539
- line-height: 38px;
540
- font-weight: 700;
541
- color: var(--grayscale-black);
542
- font-family: var(--main-font-family);
535
+ color: var(--ds-palette-black-95);
536
+ font-family: var(--ds-fontFamily-heading);
537
+ font-size: var(--ds-fontSize-32);
538
+ font-weight: var(--ds-fontWeight-bold);
539
+ letter-spacing: var(--ds-letterSpacing-tight);
540
+ line-height: 36px;
541
+ font-stretch: var(--ds-fontWidth-normal);
542
+ text-transform: none;
543
543
  letter-spacing: -0.8px;
544
544
  margin-bottom: 0;
545
- text-transform: uppercase;
546
- }
547
- @media (min-width: 1024px) {
548
- .hy-hero.hy-hero--front_page h2.hy-hero__title.hy-heading__hero {
549
- font-size: 2.875rem;
550
- line-height: 54px;
551
- letter-spacing: -1.15px;
552
- }
553
545
  }
554
- @media (min-width: 1601px) {
546
+ @media (min-width: 60rem) {
555
547
  .hy-hero.hy-hero--front_page h2.hy-hero__title.hy-heading__hero {
556
- font-size: 3.25rem;
557
- line-height: 60px;
558
- letter-spacing: -1.3px;
548
+ font-size: var(--ds-fontSize-48);
549
+ line-height: 52px;
550
+ font-stretch: var(--ds-fontWidth-condense);
559
551
  }
560
552
  }
561
553
  @media (min-width: 75.0625rem) {