@royaloperahouse/harmonic 0.4.1 → 0.5.0-a

package/dist/harmonic.cjs.development.css

@@ -152,7 +152,6 @@
   color: var(--color-primary);
 }
 
-
 .typography-module_display--black__8hmsx,
 .typography-module_header--black__M3I14,
 .typography-module_subtitle--black__IQRSo,
@@ -209,15 +208,24 @@
 }
 
 /* Typography variants */
-.typography-module_display--serif__C0-Ve,
+.typography-module_display--serif__C0-Ve {
+  font-family: var(--font-family-serif);
+}
+
 .typography-module_header--serif__uTGCc {
   font-family: var(--font-family-serif);
+  letter-spacing: -0.5px;
+}
+
+.typography-module_display--em__h2bPV {
+  font-family: var(--font-family-serif);
+  font-style: italic;
 }
 
-.typography-module_display--em__h2bPV,
 .typography-module_header--em__UFQIA {
   font-family: var(--font-family-serif);
   font-style: italic;
+  letter-spacing: -0.5px;
 }
 
 .typography-module_display--bold__PG-8g,
@@ -301,6 +309,7 @@
     letter-spacing: 0.3px;
   }
 }
+
 @font-face {
   font-family: 'GreyLLTT';
   src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Regular.woff2') format('woff2');
@@ -327,8 +336,7 @@
 
 @font-face {
   font-family: 'VictorSerif';
-  src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-Medium.woff2')
-    format('woff2');
+  src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-Medium.woff2') format('woff2');
   font-weight: 500;
   font-style: normal;
   font-display: swap;
@@ -336,13 +344,331 @@
 
 @font-face {
   font-family: 'VictorSerif';
-  src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-MediumItalic.woff2')
-    format('woff2');
+  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 {
+  color: var(--color-primary);
+}
+
+.typography_color-black__6MHRL {
+  color: var(--color-base-black);
+}
+
+.typography_color-white__PfW5s {
+  color: var(--color-base-white);
+}
+
+.typography_color-red__iPlbG {
+  color: var(--color-primary-red);
+}
+
+.typography_color-grey__GA1c2 {
+  color: var(--color-base-dark-grey);
+}
+
+.typography_color-inherit__RDd0Y {
+  color: inherit;
+}
+
+.typography_em__E6tX- {
+  font-style: italic;
+}
+/* ~~~ */
+
+/* Display Headers */
+.typography_display__-F3p4 {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  line-height: 100%;
+
+  &.typography_large__uq0zC {
+    font-size: 96px;
+    font-weight: 700;
+    letter-spacing: -5px;
+  }
+
+  &.typography_small__wfQ0K {
+    font-size: 68px;
+    font-weight: 500;
+    letter-spacing: -3px;
+  }
+
+  /* Serif and Italic styles */
+  &.typography_serif__VSO38,
+  &.typography_em__E6tX- {
+    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- {
+    letter-spacing: -3px;
+  }
+
+  &.typography_small__wfQ0K.typography_serif__VSO38,
+  &.typography_small__wfQ0K.typography_em__E6tX- {
+    letter-spacing: -2px;
+  }
+
+  @media (max-width: 699px) {
+    &.typography_large__uq0zC {
+      font-size: 38px;
+      letter-spacing: -1.5px;
+    }
+
+    &.typography_small__wfQ0K {
+      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- {
+      letter-spacing: -0.5px;
+    }
+  }
+}
+
+/* Headers */
+.typography_header__BexiD {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-weight: 500;
+
+  &.typography_large__uq0zC {
+    font-size: 44px;
+    line-height: 48px;
+    letter-spacing: -1.5px;
+  }
+
+  &.typography_medium__K0uZD {
+    font-size: 34px;
+    line-height: 40px;
+    letter-spacing: -1px;
+  }
+
+  &.typography_small__wfQ0K {
+    font-size: 26px;
+    line-height: 32px;
+    letter-spacing: -0.5px;
+  }
+
+  /* Serif and Italic styles */
+  &.typography_serif__VSO38,
+  &.typography_em__E6tX- {
+    font-family: var(--font-family-serif);
+  }
+
+  /* Serif and Italic letter-spacing overrides */
+  &.typography_large__uq0zC.typography_serif__VSO38,
+  &.typography_large__uq0zC.typography_em__E6tX- {
+    letter-spacing: -0.5px;
+  }
+
+  &.typography_medium__K0uZD.typography_serif__VSO38,
+  &.typography_medium__K0uZD.typography_em__E6tX- {
+    letter-spacing: -0.5px;
+  }
+
+  &.typography_small__wfQ0K.typography_serif__VSO38,
+  &.typography_small__wfQ0K.typography_em__E6tX- {
+    letter-spacing: -0.5px;
+  }
+
+  @media (max-width: 699px) {
+    &.typography_large__uq0zC {
+      font-size: 28px;
+      line-height: 34px;
+      letter-spacing: -1.5px;
+    }
+
+    &.typography_medium__K0uZD {
+      font-size: 24px;
+      line-height: 28px;
+      letter-spacing: -1px;
+    }
+
+    &.typography_small__wfQ0K {
+      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- {
+      letter-spacing: -0.5px;
+    }
+  }
+}
+
+/* Subtitle */
+.typography_subtitle__aoFTV {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-weight: 500;
+
+  &.typography_large__uq0zC {
+    font-size: 19px;
+    line-height: 26px;
+    letter-spacing: -0.5px;
+  }
+
+  &.typography_small__wfQ0K {
+    font-size: 17px;
+    line-height: 24px;
+    letter-spacing: -0.5px;
+  }
+
+  @media (max-width: 699px) {
+    &.typography_large__uq0zC {
+      font-size: 17px;
+      line-height: 24px;
+      letter-spacing: -0.5px;
+    }
+
+    &.typography_small__wfQ0K {
+      font-size: 14px;
+      line-height: 20px;
+      letter-spacing: -0.2px;
+    }
+  }
+}
+
+/* Body Copy */
+.typography_bodycopy__vYtQ8 {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-weight: 400;
+
+  &.typography_large__uq0zC {
+    font-size: 19px;
+    line-height: 26px;
+    letter-spacing: -0.5px;
+  }
+
+  &.typography_medium__K0uZD {
+    font-size: 17px;
+    line-height: 24px;
+    letter-spacing: -0.5px;
+  }
+
+  &.typography_small__wfQ0K {
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: -0.5px;
+  }
+
+  @media (max-width: 699px) {
+    &.typography_large__uq0zC {
+      font-size: 17px;
+      line-height: 24px;
+      letter-spacing: -0.5px;
+    }
+
+    &.typography_medium__K0uZD {
+      font-size: 14px;
+      line-height: 20px;
+      letter-spacing: -0.2px;
+    }
+
+    &.typography_small__wfQ0K {
+      font-size: 11px;
+      line-height: 16px;
+      letter-spacing: -0.2px;
+    }
+  }
+}
+
+/* Overline */
+.typography_overline__EnUK3 {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-weight: 500;
+  text-transform: uppercase;
+
+  &.typography_large__uq0zC {
+    font-size: 14px;
+    line-height: 18px;
+    letter-spacing: 0.3px;
+  }
+
+  &.typography_small__wfQ0K {
+    font-size: 12px;
+    line-height: 14px;
+    letter-spacing: 0.2px;
+  }
+
+  @media (max-width: 699px) {
+    &.typography_large__uq0zC {
+      line-height: 17px;
+      letter-spacing: 0.3px; /* Added to ensure it stays */
+    }
+
+    &.typography_small__wfQ0K {
+      line-height: 14px;
+      letter-spacing: 0.3px;
+    }
+  }
+}
+
+/* Button Text */
+.typography_buttontext__vcxNi {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-size: 17px;
+  line-height: 20px;
+  letter-spacing: -0.5px;
+  font-weight: 400;
+
+  @media (max-width: 699px) {
+    font-weight: 500;
+    line-height: 17px;
+  }
+}
+
+/* Caption Text */
+.typography_captiontext__91UFb {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-weight: 400;
+  font-size: 17px;
+  line-height: 24px;
+  letter-spacing: -0.5px;
+
+  @media (max-width: 699px) {
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: -0.2px;
+  }
+}
+
+/* Navigation Text */
+.typography_navigationtext__YfGf7 {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-size: 19px;
+  line-height: 19px;
+  letter-spacing: 0.4px;
+  font-weight: 500;
+
+  @media (max-width: 699px) {
+    font-size: 17px;
+    line-height: 17px;
+  }
+}
+
 .core-theme-module_coreTheme__pWxYB {
   /* RBO Red */
   /* Primary Palette */
@@ -388,6 +714,9 @@
   --color-secondary-orange: #ff6700;
   --color-secondary-blue: #5f9cff;
 
+  /* Shadows */
+  --shadow-floating: 0px 4px 38px 0px #0000000a;
+
   /* Core theme colors */
   --base-color-primary: #c8102e;
   --base-color-core: #c8102e;
@@ -429,8 +758,9 @@
   --button-tertiary-pressed-color: var(--color-rbo-black-pressed);
   --button-auxiliary-color: var(--color-primary-black);
   --button-auxiliary-bg-color: var(--color-base-transparent);
+  --button-anchor-tab-color: var(--color-primary-red);
 
-/* -----  Variables already used in Harmonic START  ----- */
+  /* -----  Variables already used in Harmonic START  ----- */
   --grid-column-gap: 36px;
   --grid-margin: 10%;
 
@@ -442,13 +772,35 @@
   --rotator-button-hover-bg-color: var(--color-primary-red);
 
   --carousel-image-caption-height: 17px;
-  
+
+  --line-height-listing: 36px;
+
+  --upsell-border-color: var(--color-primary-red);
+
+  --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;
+  --font-feature-settings-header: 'tnum' on, 'lnum' on;
+  --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;
+
+  --text-transform-body: none;
+  --text-transform-header: uppercase;
+  --text-transform-subtitle: uppercase;
+
   @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;
+
+    --line-height-listing: 34px;
+
+    --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;
+    --font-feature-settings-header: 'tnum' on, 'lnum' on;
+    --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;
+
+    --text-transform-body: none;
+    --text-transform-header: uppercase;
+    --text-transform-subtitle: uppercase;
   }
 
   @media (min-width: 700px) and (max-width: 1139px) {
@@ -459,7 +811,7 @@
     --carousel-image-caption-height: 14px;
   }
 
-/* -----  Variables already used in Harmonic END  ----- */
+  /* -----  Variables already used in Harmonic END  ----- */
 
   --font-size-header-1: 96px;
   --font-weight-header-1: 500;
@@ -565,7 +917,6 @@
   --font-size-title-description: 20px;
   --line-height-title-description: 28px;
 
-  --line-height-listing: 36px;
   --font-size-individual-listing-name: 19px;
   --line-height-individual-listing-name: 24px;
   --line-height-people-listing-gap: 24px;
@@ -580,18 +931,12 @@
   --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;
   --font-family-people-listing-name: 'adobe-garamond-pro';
 
-  --font-feature-settings-header: 'tnum' on, 'lnum' on;
   --font-feature-settings-altHeader: 'pnum' on, 'onum' on;
   --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;
-  --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;
-  --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;
   --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;
 
-  --text-transform-header: uppercase;
   --text-transform-altHeader: none;
-  --text-transform-body: none;
   --text-transform-overline: uppercase;
-  --text-transform-subtitle: uppercase;
 
   --word-break-header: break-word;
   --word-break-altHeader: break-word;
@@ -655,6 +1000,7 @@
   --information-panel-button-pressed-color: var(--color-white-pressed);
 
   --heading-promo-bg-color: var(--color-primary-red);
+  --page-header-bg-color: var(--color-primary-red);
 
   @media (max-width: 699px) {
     --font-size-header-1: 38px;
@@ -759,18 +1105,12 @@
     --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;
     --font-family-people-listing-name: 'adobe-garamond-pro';
 
-    --font-feature-settings-header: 'tnum' on, 'lnum' on;
     --font-feature-settings-altHeader: 'pnum' on, 'onum' on;
     --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;
-    --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;
-    --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;
     --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;
 
-    --text-transform-header: uppercase;
     --text-transform-altHeader: none;
-    --text-transform-body: none;
     --text-transform-overline: uppercase;
-    --text-transform-subtitle: uppercase;
 
     --word-break-header: break-word;
     --word-break-altHeader: break-word;
@@ -826,6 +1166,7 @@
   --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-anchor-tab-color: var(--color-primary-black);
 
   --rotator-button-color: var(--color-base-black);
   --rotator-button-bg-color: var(--color-base-light-grey);
@@ -841,6 +1182,9 @@
   --information-panel-bg-color: var(--color-primary-black);
 
   --heading-promo-bg-color: var(--color-base-black);
+  --page-header-bg-color: var(--color-primary-black);
+
+  --upsell-border-color: var(--color-primary-black);
 }
 
 .cinema-theme-module_cinemaTheme__f5QFs {
@@ -867,6 +1211,7 @@
   --button-tertiary-color: var(--color-base-white);
   --button-tertiary-hover-color: var(--color-white-hovered);
   --button-tertiary-pressed-color: var(--color-white-pressed);
+  --button-anchor-tab-color: var(--color-primary-black);
 
   --rotator-button-color: var(--color-primary-black);
   --rotator-button-bg-color: var(--color-base-light-grey);
@@ -886,8 +1231,10 @@
   --information-panel-button-pressed-color: var(--color-rbo-red-pressed);
 
   --heading-promo-bg-color: var(--color-base-white);
-}
+  --page-header-bg-color: var(--color-primary-black);
 
+  --upsell-border-color: var(--color-primary-black);
+};
 .schools-theme-module_schoolsTheme__CWHba {
   /* Schools theme overrides */
   --base-color-primary: #c8102e;