@royaloperahouse/harmonic 0.18.2 → 0.18.3-a

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.
@@ -350,6 +350,325 @@
350
350
  font-display: swap;
351
351
  }
352
352
 
353
+ /* ~~~~~ General Styling Classes ~~~~~ */
354
+ .typography_color-primary__LOfDi {
355
+ color: var(--color-primary);
356
+ }
357
+
358
+ .typography_color-black__6MHRL {
359
+ color: var(--color-base-black);
360
+ }
361
+
362
+ .typography_color-white__PfW5s {
363
+ color: var(--color-base-white);
364
+ }
365
+
366
+ .typography_color-red__iPlbG {
367
+ color: var(--color-primary-red);
368
+ }
369
+
370
+ .typography_color-grey__GA1c2 {
371
+ color: var(--color-base-dark-grey);
372
+ }
373
+
374
+ .typography_color-inherit__RDd0Y {
375
+ color: inherit;
376
+ }
377
+
378
+ .typography_em__E6tX- {
379
+ font-style: italic;
380
+ }
381
+ /* ~~~ */
382
+
383
+ /* Display Headers */
384
+ .typography_display__-F3p4 {
385
+ margin: 0;
386
+ font-family: var(--font-family-sans);
387
+ line-height: 100%;
388
+
389
+ &.typography_large__uq0zC {
390
+ font-size: 96px;
391
+ font-weight: 700;
392
+ letter-spacing: -5px;
393
+ }
394
+
395
+ &.typography_small__wfQ0K {
396
+ font-size: 68px;
397
+ font-weight: 500;
398
+ letter-spacing: -3px;
399
+ }
400
+
401
+ /* Serif and Italic styles */
402
+ &.typography_serif__VSO38,
403
+ &.typography_em__E6tX- {
404
+ font-family: var(--font-family-serif);
405
+ font-weight: 500;
406
+ }
407
+
408
+ /* Serif and Italic adjustments */
409
+ &.typography_large__uq0zC.typography_serif__VSO38,
410
+ &.typography_large__uq0zC.typography_em__E6tX- {
411
+ letter-spacing: -3px;
412
+ }
413
+
414
+ &.typography_small__wfQ0K.typography_serif__VSO38,
415
+ &.typography_small__wfQ0K.typography_em__E6tX- {
416
+ letter-spacing: -2px;
417
+ }
418
+
419
+ @media (max-width: 699px) {
420
+ &.typography_large__uq0zC {
421
+ font-size: 38px;
422
+ letter-spacing: -1.5px;
423
+ }
424
+
425
+ &.typography_small__wfQ0K {
426
+ font-size: 32px;
427
+ letter-spacing: -1.5px;
428
+ }
429
+
430
+ &.typography_large__uq0zC.typography_serif__VSO38,
431
+ &.typography_large__uq0zC.typography_em__E6tX-,
432
+ &.typography_small__wfQ0K.typography_serif__VSO38,
433
+ &.typography_small__wfQ0K.typography_em__E6tX- {
434
+ letter-spacing: -0.5px;
435
+ }
436
+ }
437
+ }
438
+
439
+ /* Headers */
440
+ .typography_header__BexiD {
441
+ margin: 0;
442
+ font-family: var(--font-family-sans);
443
+ font-weight: 500;
444
+
445
+ &.typography_large__uq0zC {
446
+ font-size: 44px;
447
+ line-height: 48px;
448
+ letter-spacing: -1.5px;
449
+ }
450
+
451
+ &.typography_medium__K0uZD {
452
+ font-size: 34px;
453
+ line-height: 40px;
454
+ letter-spacing: -1px;
455
+ }
456
+
457
+ &.typography_small__wfQ0K {
458
+ font-size: 26px;
459
+ line-height: 32px;
460
+ letter-spacing: -0.5px;
461
+ }
462
+
463
+ /* Serif and Italic styles */
464
+ &.typography_serif__VSO38,
465
+ &.typography_em__E6tX- {
466
+ font-family: var(--font-family-serif);
467
+ }
468
+
469
+ /* Serif and Italic letter-spacing overrides */
470
+ &.typography_large__uq0zC.typography_serif__VSO38,
471
+ &.typography_large__uq0zC.typography_em__E6tX- {
472
+ letter-spacing: -0.5px;
473
+ }
474
+
475
+ &.typography_medium__K0uZD.typography_serif__VSO38,
476
+ &.typography_medium__K0uZD.typography_em__E6tX- {
477
+ letter-spacing: -0.5px;
478
+ }
479
+
480
+ &.typography_small__wfQ0K.typography_serif__VSO38,
481
+ &.typography_small__wfQ0K.typography_em__E6tX- {
482
+ letter-spacing: -0.5px;
483
+ }
484
+
485
+ @media (max-width: 699px) {
486
+ &.typography_large__uq0zC {
487
+ font-size: 28px;
488
+ line-height: 34px;
489
+ letter-spacing: -1.5px;
490
+ }
491
+
492
+ &.typography_medium__K0uZD {
493
+ font-size: 24px;
494
+ line-height: 28px;
495
+ letter-spacing: -1px;
496
+ }
497
+
498
+ &.typography_small__wfQ0K {
499
+ font-size: 20px;
500
+ line-height: 26px;
501
+ letter-spacing: -0.75px;
502
+ }
503
+
504
+ /* Mobile overrides for serif/italic letter-spacing */
505
+ &.typography_large__uq0zC.typography_serif__VSO38,
506
+ &.typography_large__uq0zC.typography_em__E6tX-,
507
+ &.typography_medium__K0uZD.typography_serif__VSO38,
508
+ &.typography_medium__K0uZD.typography_em__E6tX-,
509
+ &.typography_small__wfQ0K.typography_serif__VSO38,
510
+ &.typography_small__wfQ0K.typography_em__E6tX- {
511
+ letter-spacing: -0.5px;
512
+ }
513
+ }
514
+ }
515
+
516
+ /* Subtitle */
517
+ .typography_subtitle__aoFTV {
518
+ margin: 0;
519
+ font-family: var(--font-family-sans);
520
+ font-weight: 500;
521
+
522
+ &.typography_large__uq0zC {
523
+ font-size: 19px;
524
+ line-height: 26px;
525
+ letter-spacing: -0.5px;
526
+ }
527
+
528
+ &.typography_small__wfQ0K {
529
+ font-size: 17px;
530
+ line-height: 24px;
531
+ letter-spacing: -0.5px;
532
+ }
533
+
534
+ @media (max-width: 699px) {
535
+ &.typography_large__uq0zC {
536
+ font-size: 17px;
537
+ line-height: 24px;
538
+ letter-spacing: -0.5px;
539
+ }
540
+
541
+ &.typography_small__wfQ0K {
542
+ font-size: 14px;
543
+ line-height: 20px;
544
+ letter-spacing: -0.2px;
545
+ }
546
+ }
547
+ }
548
+
549
+ /* Body Copy */
550
+ .typography_bodycopy__vYtQ8 {
551
+ margin: 0;
552
+ font-family: var(--font-family-sans);
553
+ font-weight: 400;
554
+
555
+ &.typography_large__uq0zC {
556
+ font-size: 19px;
557
+ line-height: 26px;
558
+ letter-spacing: -0.5px;
559
+ }
560
+
561
+ &.typography_medium__K0uZD {
562
+ font-size: 17px;
563
+ line-height: 24px;
564
+ letter-spacing: -0.5px;
565
+ }
566
+
567
+ &.typography_small__wfQ0K {
568
+ font-size: 14px;
569
+ line-height: 20px;
570
+ letter-spacing: -0.5px;
571
+ }
572
+
573
+ @media (max-width: 699px) {
574
+ &.typography_large__uq0zC {
575
+ font-size: 17px;
576
+ line-height: 24px;
577
+ letter-spacing: -0.5px;
578
+ }
579
+
580
+ &.typography_medium__K0uZD {
581
+ font-size: 14px;
582
+ line-height: 20px;
583
+ letter-spacing: -0.2px;
584
+ }
585
+
586
+ &.typography_small__wfQ0K {
587
+ font-size: 11px;
588
+ line-height: 16px;
589
+ letter-spacing: -0.2px;
590
+ }
591
+ }
592
+ }
593
+
594
+ /* Overline */
595
+ .typography_overline__EnUK3 {
596
+ margin: 0;
597
+ font-family: var(--font-family-sans);
598
+ font-weight: 500;
599
+ text-transform: uppercase;
600
+
601
+ &.typography_large__uq0zC {
602
+ font-size: 14px;
603
+ line-height: 18px;
604
+ letter-spacing: 0.3px;
605
+ }
606
+
607
+ &.typography_small__wfQ0K {
608
+ font-size: 12px;
609
+ line-height: 14px;
610
+ letter-spacing: 0.2px;
611
+ }
612
+
613
+ @media (max-width: 699px) {
614
+ &.typography_large__uq0zC {
615
+ line-height: 17px;
616
+ letter-spacing: 0.3px; /* Added to ensure it stays */
617
+ }
618
+
619
+ &.typography_small__wfQ0K {
620
+ line-height: 14px;
621
+ letter-spacing: 0.3px;
622
+ }
623
+ }
624
+ }
625
+
626
+ /* Button Text */
627
+ .typography_buttontext__vcxNi {
628
+ margin: 0;
629
+ font-family: var(--font-family-sans);
630
+ font-size: 17px;
631
+ line-height: 20px;
632
+ letter-spacing: -0.5px;
633
+ font-weight: 400;
634
+
635
+ @media (max-width: 699px) {
636
+ font-weight: 500;
637
+ line-height: 17px;
638
+ }
639
+ }
640
+
641
+ /* Caption Text */
642
+ .typography_captiontext__91UFb {
643
+ margin: 0;
644
+ font-family: var(--font-family-sans);
645
+ font-weight: 400;
646
+ font-size: 17px;
647
+ line-height: 24px;
648
+ letter-spacing: -0.5px;
649
+
650
+ @media (max-width: 699px) {
651
+ font-size: 14px;
652
+ line-height: 20px;
653
+ letter-spacing: -0.2px;
654
+ }
655
+ }
656
+
657
+ /* Navigation Text */
658
+ .typography_navigationtext__YfGf7 {
659
+ margin: 0;
660
+ font-family: var(--font-family-sans);
661
+ font-size: 19px;
662
+ line-height: 19px;
663
+ letter-spacing: 0.4px;
664
+ font-weight: 500;
665
+
666
+ @media (max-width: 699px) {
667
+ font-size: 17px;
668
+ line-height: 17px;
669
+ }
670
+ }
671
+
353
672
  .core-theme-module_coreTheme__pWxYB {
354
673
  /* RBO Red */
355
674
  /* Primary Palette */