@royaloperahouse/harmonic 0.1.8-p → 0.1.9-a

package/dist/harmonic.cjs.development.css

@@ -1,234 +1,188 @@
-@font-face {
-  font-family: 'GreyLLTT';
-  src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Regular.woff2') format('woff2');
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'GreyLLTT';
-  src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Medium.woff2') format('woff2');
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'GreyLLTT';
-  src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Bold.woff2') format('woff2');
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'VictorSerif';
-  src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-Medium.woff2')
-    format('woff2');
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'VictorSerif';
-  src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-MediumItalic.woff2')
-    format('woff2');
-  font-weight: 500;
-  font-style: italic;
-  font-display: swap;
-}
-
 /* ~~~~~ General Styling Classes ~~~~~ */
-.typography_color-primary__LOfDi {
+.styles_color-primary__UYod1 {
   color: var(--color-primary);
 }
 
-.typography_color-black__6MHRL {
+.styles_color-black__a05Fo {
   color: var(--color-base-black);
 }
 
-.typography_color-white__PfW5s {
+.styles_color-white__HiYDT {
   color: var(--color-base-white);
 }
 
-.typography_color-red__iPlbG {
+.styles_color-red__zwTZW {
   color: var(--color-primary-red);
 }
 
-.typography_color-grey__GA1c2 {
+.styles_color-grey__Gc0wv {
   color: var(--color-base-dark-grey);
 }
 
-.typography_color-inherit__RDd0Y {
-  color: inherit;
-}
-
-.typography_em__E6tX- {
+.styles_em__v4FoO {
   font-style: italic;
 }
 /* ~~~ */
 
 /* Display Headers */
-.typography_display__-F3p4 {
+.styles_display__VgnTB {
   margin: 0;
   font-family: var(--font-family-sans);
   line-height: 100%;
 
-  &.typography_large__uq0zC {
+  &.styles_large__vqVxY {
     font-size: 96px;
     font-weight: 700;
     letter-spacing: -5px;
   }
 
-  &.typography_small__wfQ0K {
+  &.styles_small__e7YDe {
     font-size: 68px;
     font-weight: 500;
     letter-spacing: -3px;
   }
 
   /* Serif and Italic styles */
-  &.typography_serif__VSO38,
-  &.typography_em__E6tX- {
+  &.styles_serif__b-ZjM,
+  &.styles_em__v4FoO {
     font-family: var(--font-family-serif);
     font-weight: 500;
   }
 
   /* Serif and Italic adjustments */
-  &.typography_large__uq0zC.typography_serif__VSO38,
-  &.typography_large__uq0zC.typography_em__E6tX- {
+  &.styles_large__vqVxY.styles_serif__b-ZjM,
+  &.styles_large__vqVxY.styles_em__v4FoO {
     letter-spacing: -3px;
   }
 
-  &.typography_small__wfQ0K.typography_serif__VSO38,
-  &.typography_small__wfQ0K.typography_em__E6tX- {
+  &.styles_small__e7YDe.styles_serif__b-ZjM,
+  &.styles_small__e7YDe.styles_em__v4FoO {
     letter-spacing: -2px;
   }
 
   @media (max-width: 699px) {
-    &.typography_large__uq0zC {
+    &.styles_large__vqVxY {
       font-size: 38px;
       letter-spacing: -1.5px;
     }
 
-    &.typography_small__wfQ0K {
+    &.styles_small__e7YDe {
       font-size: 32px;
       letter-spacing: -1.5px;
     }
 
-    &.typography_large__uq0zC.typography_serif__VSO38,
-    &.typography_large__uq0zC.typography_em__E6tX-,
-    &.typography_small__wfQ0K.typography_serif__VSO38,
-    &.typography_small__wfQ0K.typography_em__E6tX- {
+    &.styles_large__vqVxY.styles_serif__b-ZjM,
+    &.styles_large__vqVxY.styles_em__v4FoO,
+    &.styles_small__e7YDe.styles_serif__b-ZjM,
+    &.styles_small__e7YDe.styles_em__v4FoO {
       letter-spacing: -0.5px;
     }
   }
 }
 
 /* Headers */
-.typography_header__BexiD {
+.styles_header__UDH-H {
   margin: 0;
   font-family: var(--font-family-sans);
   font-weight: 500;
 
-  &.typography_large__uq0zC {
+  &.styles_large__vqVxY {
     font-size: 44px;
     line-height: 48px;
     letter-spacing: -1.5px;
   }
 
-  &.typography_medium__K0uZD {
+  &.styles_medium__WQPZj {
     font-size: 34px;
     line-height: 40px;
     letter-spacing: -1px;
   }
 
-  &.typography_small__wfQ0K {
+  &.styles_small__e7YDe {
     font-size: 26px;
     line-height: 32px;
     letter-spacing: -0.5px;
   }
 
   /* Serif and Italic styles */
-  &.typography_serif__VSO38,
-  &.typography_em__E6tX- {
+  &.styles_serif__b-ZjM,
+  &.styles_em__v4FoO {
     font-family: var(--font-family-serif);
   }
 
   /* Serif and Italic letter-spacing overrides */
-  &.typography_large__uq0zC.typography_serif__VSO38,
-  &.typography_large__uq0zC.typography_em__E6tX- {
+  &.styles_large__vqVxY.styles_serif__b-ZjM,
+  &.styles_large__vqVxY.styles_em__v4FoO {
     letter-spacing: -0.5px;
   }
 
-  &.typography_medium__K0uZD.typography_serif__VSO38,
-  &.typography_medium__K0uZD.typography_em__E6tX- {
+  &.styles_medium__WQPZj.styles_serif__b-ZjM,
+  &.styles_medium__WQPZj.styles_em__v4FoO {
     letter-spacing: -0.5px;
   }
 
-  &.typography_small__wfQ0K.typography_serif__VSO38,
-  &.typography_small__wfQ0K.typography_em__E6tX- {
+  &.styles_small__e7YDe.styles_serif__b-ZjM,
+  &.styles_small__e7YDe.styles_em__v4FoO {
     letter-spacing: -0.5px;
   }
 
   @media (max-width: 699px) {
-    &.typography_large__uq0zC {
+    &.styles_large__vqVxY {
       font-size: 28px;
       line-height: 34px;
       letter-spacing: -1.5px;
     }
 
-    &.typography_medium__K0uZD {
+    &.styles_medium__WQPZj {
       font-size: 24px;
       line-height: 28px;
       letter-spacing: -1px;
     }
 
-    &.typography_small__wfQ0K {
+    &.styles_small__e7YDe {
       font-size: 20px;
       line-height: 26px;
       letter-spacing: -0.75px;
     }
 
     /* Mobile overrides for serif/italic letter-spacing */
-    &.typography_large__uq0zC.typography_serif__VSO38,
-    &.typography_large__uq0zC.typography_em__E6tX-,
-    &.typography_medium__K0uZD.typography_serif__VSO38,
-    &.typography_medium__K0uZD.typography_em__E6tX-,
-    &.typography_small__wfQ0K.typography_serif__VSO38,
-    &.typography_small__wfQ0K.typography_em__E6tX- {
+    &.styles_large__vqVxY.styles_serif__b-ZjM,
+    &.styles_large__vqVxY.styles_em__v4FoO,
+    &.styles_medium__WQPZj.styles_serif__b-ZjM,
+    &.styles_medium__WQPZj.styles_em__v4FoO,
+    &.styles_small__e7YDe.styles_serif__b-ZjM,
+    &.styles_small__e7YDe.styles_em__v4FoO {
       letter-spacing: -0.5px;
     }
   }
 }
 
 /* Subtitle */
-.typography_subtitle__aoFTV {
+.styles_subtitle__os3DH {
   margin: 0;
   font-family: var(--font-family-sans);
   font-weight: 500;
 
-  &.typography_large__uq0zC {
+  &.styles_large__vqVxY {
     font-size: 19px;
     line-height: 26px;
     letter-spacing: -0.5px;
   }
 
-  &.typography_small__wfQ0K {
+  &.styles_small__e7YDe {
     font-size: 17px;
     line-height: 24px;
     letter-spacing: -0.5px;
   }
 
   @media (max-width: 699px) {
-    &.typography_large__uq0zC {
+    &.styles_large__vqVxY {
       font-size: 17px;
       line-height: 24px;
       letter-spacing: -0.5px;
     }
 
-    &.typography_small__wfQ0K {
+    &.styles_small__e7YDe {
       font-size: 14px;
       line-height: 20px;
       letter-spacing: -0.2px;
@@ -237,43 +191,43 @@
 }
 
 /* Body Copy */
-.typography_bodycopy__vYtQ8 {
+.styles_bodycopy__uEx9r {
   margin: 0;
   font-family: var(--font-family-sans);
   font-weight: 400;
 
-  &.typography_large__uq0zC {
+  &.styles_large__vqVxY {
     font-size: 19px;
     line-height: 26px;
     letter-spacing: -0.5px;
   }
 
-  &.typography_medium__K0uZD {
+  &.styles_medium__WQPZj {
     font-size: 17px;
     line-height: 24px;
     letter-spacing: -0.5px;
   }
 
-  &.typography_small__wfQ0K {
+  &.styles_small__e7YDe {
     font-size: 14px;
     line-height: 20px;
     letter-spacing: -0.5px;
   }
 
   @media (max-width: 699px) {
-    &.typography_large__uq0zC {
+    &.styles_large__vqVxY {
       font-size: 17px;
       line-height: 24px;
       letter-spacing: -0.5px;
     }
 
-    &.typography_medium__K0uZD {
+    &.styles_medium__WQPZj {
       font-size: 14px;
       line-height: 20px;
       letter-spacing: -0.2px;
     }
 
-    &.typography_small__wfQ0K {
+    &.styles_small__e7YDe {
       font-size: 11px;
       line-height: 16px;
       letter-spacing: -0.2px;
@@ -282,31 +236,31 @@
 }
 
 /* Overline */
-.typography_overline__EnUK3 {
+.styles_overline__5xGDa {
   margin: 0;
   font-family: var(--font-family-sans);
   font-weight: 500;
   text-transform: uppercase;
 
-  &.typography_large__uq0zC {
+  &.styles_large__vqVxY {
     font-size: 14px;
     line-height: 18px;
     letter-spacing: 0.3px;
   }
 
-  &.typography_small__wfQ0K {
+  &.styles_small__e7YDe {
     font-size: 12px;
     line-height: 14px;
     letter-spacing: 0.2px;
   }
 
   @media (max-width: 699px) {
-    &.typography_large__uq0zC {
+    &.styles_large__vqVxY {
       line-height: 17px;
       letter-spacing: 0.3px; /* Added to ensure it stays */
     }
 
-    &.typography_small__wfQ0K {
+    &.styles_small__e7YDe {
       line-height: 14px;
       letter-spacing: 0.3px;
     }
@@ -314,7 +268,7 @@
 }
 
 /* Button Text */
-.typography_buttontext__vcxNi {
+.styles_buttontext__UPumF {
   margin: 0;
   font-family: var(--font-family-sans);
   font-size: 17px;
@@ -329,7 +283,7 @@
 }
 
 /* Caption Text */
-.typography_captiontext__91UFb {
+.styles_captiontext__-TA6x {
   margin: 0;
   font-family: var(--font-family-sans);
   font-weight: 400;
@@ -345,7 +299,7 @@
 }
 
 /* Navigation Text */
-.typography_navigationtext__YfGf7 {
+.styles_navigationtext__qnnIo {
   margin: 0;
   font-family: var(--font-family-sans);
   font-size: 19px;
@@ -359,11 +313,52 @@
   }
 }
 
+@font-face {
+  font-family: 'GreyLLTT';
+  src: url('https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/fonts/harmonic/GreyLLTT-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'GreyLLTT';
+  src: url('https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/fonts/harmonic/GreyLLTT-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'GreyLLTT';
+  src: url('https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/fonts/harmonic/GreyLLTT-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'VictorSerif';
+  src: url('https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/fonts/harmonic/VictorSerif-Medium.woff2')
+    format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'VictorSerif';
+  src: url('https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/fonts/harmonic/VictorSerif-MediumItalic.woff2')
+    format('woff2');
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+
 .core-theme-module_coreTheme__pWxYB {
   /* RBO Red */
   /* Primary Palette */
   --color-primary: #1a1a1a;
-  --color-primary-background: #eb0a0a;
   --color-primary-red: #eb0a0a;
   --color-primary-black: #1a1a1a;
 
@@ -446,37 +441,6 @@
   --button-auxiliary-color: var(--color-primary-black);
   --button-auxiliary-bg-color: var(--color-base-transparent);
 
-/* -----  Variables already used in Harmonic START  ----- */
-  --grid-column-gap: 36px;
-  --grid-margin: 10%;
-
-  --rotator-button-width: 60px;
-  --rotator-button-icon-width: 36px;
-  --rotator-button-color: var(--color-primary-black);
-  --rotator-button-bg-color: var(--color-base-light-grey);
-  --rotator-button-hover-color: var(--color-base-white);
-  --rotator-button-hover-bg-color: var(--color-primary-red);
-
-  --carousel-image-caption-height: 17px;
-  
-  @media (max-width: 699px) {
-    --grid-column-gap: 12px;
-    --grid-margin: 20px;
-    --rotator-button-width: 40px;
-    --rotator-button-icon-width: 24px;
-    --carousel-image-caption-height: 14px;
-  }
-
-  @media (min-width: 700px) and (max-width: 1139px) {
-    --grid-column-gap: 20px;
-    --grid-margin: 32px;
-    --rotator-button-width: 44px;
-    --rotator-button-icon-width: 24px;
-    --carousel-image-caption-height: 14px;
-  }
-
-/* -----  Variables already used in Harmonic END  ----- */
-
   --font-size-header-1: 96px;
   --font-weight-header-1: 500;
   --letter-spacing-header-1: 2px;
@@ -628,11 +592,20 @@
   --navigation-xlarge-gap: 36px;
   --navigation-large-margin: 60px;
 
+  --rotator-button-width: 60px;
+  --rotator-button-icon-width: 36px;
+  --rotator-button-color: var(--color-primary-black);
+  --rotator-button-bg-color: var(--color-base-light-grey);
+  --rotator-button-hover-color: var(--color-base-white);
+  --rotator-button-hover-bg-color: var(--color-primary-red);
+
   --font-size-search: 24px;
   --font-family-search: 'adobe-garamond-pro';
 
+  --grid-margin: 10%;
   --grid-outer-margin: 50px;
   --grid-template-columns: 14px calc(10% - 86px) repeat(12, minmax(0, 1fr)) calc(10% - 86px) 14px;
+  --grid-column-gap: 36px;
 
   --footer-height: 380px;
   --footer-padding-top: 44px;
@@ -663,15 +636,6 @@
   --announcement-banner-hover-color: var(--color-white-hovered);
   --announcement-banner-pressed-color: var(--color-white-pressed);
 
-  --information-panel-color: var(--color-base-white);
-  --information-panel-bg-color: var(--color-primary-red);
-  --information-panel-button-color: var(--color-primary-black);
-  --information-panel-button-bg-color: var(--color-base-white);
-  --information-panel-button-hover-color: var(--color-white-hovered);
-  --information-panel-button-pressed-color: var(--color-white-pressed);
-
-  --heading-promo-bg-color: var(--color-primary-red);
-
   @media (max-width: 699px) {
     --font-size-header-1: 38px;
     --font-weight-header-1: 500;
@@ -795,6 +759,8 @@
     --word-break-subtitle: break-word;
 
     --grid-template-columns: calc(20px - 12px) repeat(12, minmax(0, 1fr)) calc(20px - 12px);
+    --grid-column-gap: 12px;
+    --grid-margin: 20px;
 
     --footer-height: auto;
     --footer-padding-top: 20px;
@@ -806,10 +772,19 @@
     --footer-vertical-spacing-sm: 24px;
 
     --anchor-tabs-height: 60px;
+
+    --rotator-button-width: 40px;
+    --rotator-button-icon-width: 24px;
   }
 
   @media (min-width: 700px) and (max-width: 1139px) {
     --grid-template-columns: calc(32px - 20px) repeat(12, minmax(0, 1fr)) calc(32px - 20px);
+    --grid-column-gap: 20px;
+    --grid-margin: 32px;
+
+    --rotator-button-width: 44px;
+    --rotator-button-icon-width: 24px;
+
     --font-size-header-6: 17px;
     --font-size-altHeader-4: 24px;
     --font-size-body-1: 17px;
@@ -821,11 +796,10 @@
 }
 
 .stream-theme-module_streamTheme__lTfqQ {
-  /* Stream theme overrides */
-  --base-color-primary: #1a1a1a;
-  --color-primary: #1a1a1a;
-  --color-primary-background: #1a1a1a;
-  --color-primary-button: #1a1a1a;
+  /* RBO Black */
+  --base-color-primary: #1866dc;
+  --color-primary: #1866dc;
+  --color-primary-button: #1866dc;
   --color-secondary-button: #ffffff;
   --color-tertiary-button: transparent;
   --color-auxiliary-button: transparent;
@@ -839,28 +813,23 @@
   --button-secondary-color: var(--color-primary-black);
   --button-secondary-hover-color: var(--color-black-hovered);
   --button-secondary-pressed-color: var(--color-black-pressed);
-  --button-tertiary-color: var(--color-primary-black);
-  --button-tertiary-hover-color: var(--color-rbo-black-hovered);
-  --button-tertiary-pressed-color: var(--color-rbo-black-pressed);
+  --button-tertiary-color: var(--color-primary-red);
+  --button-tertiary-hover-color: var(--color-rbo-red-hovered);
+  --button-tertiary-pressed-color: var(--color-rbo-red-pressed);
 
-  --rotator-button-color: var(--color-base-black);
-  --rotator-button-bg-color: var(--color-base-light-grey);
+  --rotator-button-color: var(--color-base-white);
+  --rotator-button-bg-color: var(--color-base-black);
   --rotator-button-hover-color: var(--color-base-white);
-  --rotator-button-hover-bg-color: var(--color-primary-black);
+  --rotator-button-hover-bg-color: var(--color-primary-red);
 
   --announcement-banner-color: var(--color-base-white);
   --announcement-banner-bg-color: var(--color-primary-black);
   --announcement-banner-hover-color: var(--color-white-hovered);
   --announcement-banner-pressed-color: var(--color-white-pressed);
-
-  --information-panel-color: var(--color-base-white);
-  --information-panel-bg-color: var(--color-primary-black);
-
-  --heading-promo-bg-color: var(--color-base-black);
 }
 
 .cinema-theme-module_cinemaTheme__f5QFs {
-  /* White */
+  /* RBO White */
   --base-color-primary: #1a1a1a;
   --color-primary: #1a1a1a;
   --color-primary-button: #ffffff;
@@ -892,15 +861,6 @@
   --announcement-banner-bg-color: var(--color-base-white);
   --announcement-banner-hover-color: var(--color-rbo-red-hovered);
   --announcement-banner-pressed-color: var(--color-rbo-red-pressed);
-
-  --information-panel-color: var(--color-primary-black);
-  --information-panel-bg-color: var(--color-base-white);
-  --information-panel-button-color: var(--color-base-white);
-  --information-panel-button-bg-color: var(--color-primary-red);
-  --information-panel-button-hover-color: var(--color-rbo-red-hovered);
-  --information-panel-button-pressed-color: var(--color-rbo-red-pressed);
-
-  --heading-promo-bg-color: var(--color-base-white);
 }
 
 .schools-theme-module_schoolsTheme__CWHba {