@royaloperahouse/harmonic 0.2.2-a → 0.2.2

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 (13) hide show
  1. package/README.GIT +278 -0
  2. package/README.md +43 -252
  3. package/dist/components/Typography/Typography.d.ts +1 -0
  4. package/dist/components/organisms/Navigation/Navigation.style.d.ts +3 -1
  5. package/dist/harmonic.cjs.development.css +105 -105
  6. package/dist/harmonic.cjs.development.js +38 -23
  7. package/dist/harmonic.cjs.development.js.map +1 -1
  8. package/dist/harmonic.cjs.production.min.js +1 -1
  9. package/dist/harmonic.cjs.production.min.js.map +1 -1
  10. package/dist/harmonic.esm.js +69 -54
  11. package/dist/harmonic.esm.js.map +1 -1
  12. package/dist/styles/HarmonicThemeProvider/HarmonicThemeProvider.d.ts +0 -1
  13. package/package.json +1 -1
package/dist/harmonic.esm.js CHANGED
@@ -355,6 +355,36 @@ function _taggedTemplateLiteralLoose(e, t) {
355
355
  return t || (t = e.slice(0)), e.raw = t, e;
356
356
  }
357
357
 
358
+ function styleInject(css, ref) {
359
+ if ( ref === void 0 ) ref = {};
360
+ var insertAt = ref.insertAt;
361
+
362
+ if (!css || typeof document === 'undefined') { return; }
363
+
364
+ var head = document.head || document.getElementsByTagName('head')[0];
365
+ var style = document.createElement('style');
366
+ style.type = 'text/css';
367
+
368
+ if (insertAt === 'top') {
369
+ if (head.firstChild) {
370
+ head.insertBefore(style, head.firstChild);
371
+ } else {
372
+ head.appendChild(style);
373
+ }
374
+ } else {
375
+ head.appendChild(style);
376
+ }
377
+
378
+ if (style.styleSheet) {
379
+ style.styleSheet.cssText = css;
380
+ } else {
381
+ style.appendChild(document.createTextNode(css));
382
+ }
383
+ }
384
+
385
+ var css_248z = "/* ~~~~~ General Styling Classes ~~~~~ */\n.styles_color-primary__UYod1 {\n color: var(--color-primary);\n}\n\n.styles_color-black__a05Fo {\n color: var(--color-base-black);\n}\n\n.styles_color-white__HiYDT {\n color: var(--color-base-white);\n}\n\n.styles_color-red__zwTZW {\n color: var(--color-primary-red);\n}\n\n.styles_color-grey__Gc0wv {\n color: var(--color-base-dark-grey);\n}\n\n.styles_color-inherit__Y12df {\n color: inherit;\n}\n\n.styles_em__v4FoO {\n font-style: italic;\n}\n/* ~~~ */\n\n/* Display Headers */\n.styles_display__VgnTB {\n margin: 0;\n font-family: var(--font-family-sans);\n line-height: 100%;\n\n &.styles_large__vqVxY {\n font-size: 96px;\n font-weight: 700;\n letter-spacing: -5px;\n }\n\n &.styles_small__e7YDe {\n font-size: 68px;\n font-weight: 500;\n letter-spacing: -3px;\n }\n\n /* Serif and Italic styles */\n &.styles_serif__b-ZjM,\n &.styles_em__v4FoO {\n font-family: var(--font-family-serif);\n font-weight: 500;\n }\n\n /* Serif and Italic adjustments */\n &.styles_large__vqVxY.styles_serif__b-ZjM,\n &.styles_large__vqVxY.styles_em__v4FoO {\n letter-spacing: -3px;\n }\n\n &.styles_small__e7YDe.styles_serif__b-ZjM,\n &.styles_small__e7YDe.styles_em__v4FoO {\n letter-spacing: -2px;\n }\n\n @media (max-width: 699px) {\n &.styles_large__vqVxY {\n font-size: 38px;\n letter-spacing: -1.5px;\n }\n\n &.styles_small__e7YDe {\n font-size: 32px;\n letter-spacing: -1.5px;\n }\n\n &.styles_large__vqVxY.styles_serif__b-ZjM,\n &.styles_large__vqVxY.styles_em__v4FoO,\n &.styles_small__e7YDe.styles_serif__b-ZjM,\n &.styles_small__e7YDe.styles_em__v4FoO {\n letter-spacing: -0.5px;\n }\n }\n}\n\n/* Headers */\n.styles_header__UDH-H {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n\n &.styles_large__vqVxY {\n font-size: 44px;\n line-height: 48px;\n letter-spacing: -1.5px;\n }\n\n &.styles_medium__WQPZj {\n font-size: 34px;\n line-height: 40px;\n letter-spacing: -1px;\n }\n\n &.styles_small__e7YDe {\n font-size: 26px;\n line-height: 32px;\n letter-spacing: -0.5px;\n }\n\n /* Serif and Italic styles */\n &.styles_serif__b-ZjM,\n &.styles_em__v4FoO {\n font-family: var(--font-family-serif);\n }\n\n /* Serif and Italic letter-spacing overrides */\n &.styles_large__vqVxY.styles_serif__b-ZjM,\n &.styles_large__vqVxY.styles_em__v4FoO {\n letter-spacing: -0.5px;\n }\n\n &.styles_medium__WQPZj.styles_serif__b-ZjM,\n &.styles_medium__WQPZj.styles_em__v4FoO {\n letter-spacing: -0.5px;\n }\n\n &.styles_small__e7YDe.styles_serif__b-ZjM,\n &.styles_small__e7YDe.styles_em__v4FoO {\n letter-spacing: -0.5px;\n }\n\n @media (max-width: 699px) {\n &.styles_large__vqVxY {\n font-size: 28px;\n line-height: 34px;\n letter-spacing: -1.5px;\n }\n\n &.styles_medium__WQPZj {\n font-size: 24px;\n line-height: 28px;\n letter-spacing: -1px;\n }\n\n &.styles_small__e7YDe {\n font-size: 20px;\n line-height: 26px;\n letter-spacing: -0.75px;\n }\n\n /* Mobile overrides for serif/italic letter-spacing */\n &.styles_large__vqVxY.styles_serif__b-ZjM,\n &.styles_large__vqVxY.styles_em__v4FoO,\n &.styles_medium__WQPZj.styles_serif__b-ZjM,\n &.styles_medium__WQPZj.styles_em__v4FoO,\n &.styles_small__e7YDe.styles_serif__b-ZjM,\n &.styles_small__e7YDe.styles_em__v4FoO {\n letter-spacing: -0.5px;\n }\n }\n}\n\n/* Subtitle */\n.styles_subtitle__os3DH {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n\n &.styles_large__vqVxY {\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n }\n\n &.styles_small__e7YDe {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n @media (max-width: 699px) {\n &.styles_large__vqVxY {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n &.styles_small__e7YDe {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.2px;\n }\n }\n}\n\n/* Body Copy */\n.styles_bodycopy__uEx9r {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n\n &.styles_large__vqVxY {\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n }\n\n &.styles_medium__WQPZj {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n &.styles_small__e7YDe {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.5px;\n }\n\n @media (max-width: 699px) {\n &.styles_large__vqVxY {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n &.styles_medium__WQPZj {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.2px;\n }\n\n &.styles_small__e7YDe {\n font-size: 11px;\n line-height: 16px;\n letter-spacing: -0.2px;\n }\n }\n}\n\n/* Overline */\n.styles_overline__5xGDa {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n text-transform: uppercase;\n\n &.styles_large__vqVxY {\n font-size: 14px;\n line-height: 18px;\n letter-spacing: 0.3px;\n }\n\n &.styles_small__e7YDe {\n font-size: 12px;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n @media (max-width: 699px) {\n &.styles_large__vqVxY {\n line-height: 17px;\n letter-spacing: 0.3px; /* Added to ensure it stays */\n }\n\n &.styles_small__e7YDe {\n line-height: 14px;\n letter-spacing: 0.3px;\n }\n }\n}\n\n/* Button Text */\n.styles_buttontext__UPumF {\n margin: 0;\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 20px;\n letter-spacing: -0.5px;\n font-weight: 400;\n\n @media (max-width: 699px) {\n font-weight: 500;\n line-height: 17px;\n }\n}\n\n/* Caption Text */\n.styles_captiontext__-TA6x {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n\n @media (max-width: 699px) {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.2px;\n }\n}\n\n/* Navigation Text */\n.styles_navigationtext__qnnIo {\n margin: 0;\n font-family: var(--font-family-sans);\n font-size: 19px;\n line-height: 19px;\n letter-spacing: 0.4px;\n font-weight: 500;\n\n @media (max-width: 699px) {\n font-size: 17px;\n line-height: 17px;\n }\n}\n";
386
+ styleInject(css_248z);
387
+
358
388
  // Utility function for creating className strings
359
389
  var createClassNames = function createClassNames(baseClass, options) {
360
390
  var size = options.size,
@@ -5200,31 +5230,34 @@ var NavigationWrapper = /*#__PURE__*/styled.div(_templateObject$x || (_templateO
5200
5230
  var isMenuOpen = _ref.isMenuOpen;
5201
5231
  return isMenuOpen && "\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: " + zIndexes.overlay + ";\n background-color: var(--color-base-white);\n overflow-y: auto;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n ";
5202
5232
  });
5203
- var FullScreenContainer = /*#__PURE__*/styled.div(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-white);\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n width: 100%;\n z-index: ", ";\n opacity: 0;\n animation: fadeIn 0.3s ease forwards;\n\n @media ", " {\n top: 230px;\n background-color: var(--color-base-black);\n }\n\n @keyframes fadeIn {\n to {\n opacity: 0.5;\n }\n }\n"])), zIndexes.searchOverlay, devices.mobileAndTablet);
5233
+ var FullScreenContainer = /*#__PURE__*/styled.div(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-white);\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n width: 100%;\n z-index: ", ";\n opacity: 0;\n animation: fadeIn 0.3s ease forwards;\n\n @media ", " {\n top: 230px;\n background-color: var(--color-base-black);\n }\n\n @keyframes fadeIn {\n to {\n opacity: 0.5;\n }\n }\n"])), function (_ref2) {
5234
+ var isMobile = _ref2.isMobile;
5235
+ return isMobile ? zIndexes.overlay : zIndexes.searchOverlay;
5236
+ }, devices.mobileAndTablet);
5204
5237
  var NavigationGrid = /*#__PURE__*/styled(Grid)(_templateObject3$e || (_templateObject3$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n background-color: var(--color-base-white);\n height: 140px;\n justify-content: space-evenly;\n width: 100%;\n z-index: ", ";\n\n @media ", " {\n height: 60px;\n }\n"])), zIndexes.navigation, devices.mobileAndTablet);
5205
- var SearchBackground = /*#__PURE__*/styled.div(_templateObject4$b || (_templateObject4$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n opacity: ", ";\n transform: ", ";\n transition:\n opacity 0.3s ease,\n transform 0.3s ease,\n visibility 0.3s ease;\n background-color: var(--color-base-white);\n height: 100px;\n border-top: 1px solid var(--color-base-light-grey);\n width: 100%;\n position: absolute;\n top: 140px;\n z-index: ", ";\n\n @media ", " {\n height: 86px;\n top: 144px;\n }\n"])), function (_ref2) {
5206
- var visible = _ref2.visible;
5207
- return visible ? 'visible' : 'hidden';
5208
- }, function (_ref3) {
5238
+ var SearchBackground = /*#__PURE__*/styled.div(_templateObject4$b || (_templateObject4$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n opacity: ", ";\n transform: ", ";\n transition:\n opacity 0.3s ease,\n transform 0.3s ease,\n visibility 0.3s ease;\n background-color: var(--color-base-white);\n height: 100px;\n border-top: 1px solid var(--color-base-light-grey);\n width: 100%;\n position: absolute;\n top: 140px;\n z-index: ", ";\n\n @media ", " {\n height: 86px;\n top: 144px;\n }\n"])), function (_ref3) {
5209
5239
  var visible = _ref3.visible;
5210
- return visible ? 1 : 0;
5240
+ return visible ? 'visible' : 'hidden';
5211
5241
  }, function (_ref4) {
5212
5242
  var visible = _ref4.visible;
5243
+ return visible ? 1 : 0;
5244
+ }, function (_ref5) {
5245
+ var visible = _ref5.visible;
5213
5246
  return visible ? 'translateY(0)' : 'translateY(-10px)';
5214
5247
  }, zIndexes.search, devices.mobile);
5215
- var GridItemSearch = /*#__PURE__*/styled(GridItem)(_templateObject5$8 || (_templateObject5$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n opacity: ", ";\n transform: ", ";\n transition:\n opacity 0.3s ease,\n transform 0.3s ease,\n visibility 0.3s ease;\n background-color: var(--color-base-white);\n border-top: 1px solid var(--color-base-light-grey);\n width: 100%;\n position: absolute;\n top: 140px;\n z-index: ", ";\n height: 100px;\n\n @media ", " {\n height: 86px;\n top: 144px;\n }\n"])), function (_ref5) {
5216
- var visible = _ref5.visible;
5217
- return visible ? 'visible' : 'hidden';
5218
- }, function (_ref6) {
5248
+ var GridItemSearch = /*#__PURE__*/styled(GridItem)(_templateObject5$8 || (_templateObject5$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n opacity: ", ";\n transform: ", ";\n transition:\n opacity 0.3s ease,\n transform 0.3s ease,\n visibility 0.3s ease;\n background-color: var(--color-base-white);\n border-top: 1px solid var(--color-base-light-grey);\n width: 100%;\n position: absolute;\n top: 140px;\n z-index: ", ";\n height: 100px;\n\n @media ", " {\n height: 86px;\n top: 144px;\n }\n"])), function (_ref6) {
5219
5249
  var visible = _ref6.visible;
5220
- return visible ? 1 : 0;
5250
+ return visible ? 'visible' : 'hidden';
5221
5251
  }, function (_ref7) {
5222
5252
  var visible = _ref7.visible;
5253
+ return visible ? 1 : 0;
5254
+ }, function (_ref8) {
5255
+ var visible = _ref8.visible;
5223
5256
  return visible ? 'translateY(0)' : 'translateY(-10px)';
5224
5257
  }, zIndexes.search, devices.mobile);
5225
5258
  var NavigationGridMobile = /*#__PURE__*/styled(Grid)(_templateObject6$5 || (_templateObject6$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: grid;\n padding-top: 32px;\n padding-bottom: var(--navigation-large-margin);\n }\n"])), devices.mobileAndTablet);
5226
- var MobileMenuContainer = /*#__PURE__*/styled(Grid)(_templateObject7$2 || (_templateObject7$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: space-evenly;\n transition: row-gap 0.3s ease;\n row-gap: ", ";\n }\n"])), devices.mobileAndTablet, function (_ref8) {
5227
- var showSearch = _ref8.showSearch;
5259
+ var MobileMenuContainer = /*#__PURE__*/styled(Grid)(_templateObject7$2 || (_templateObject7$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: space-evenly;\n transition: row-gap 0.3s ease;\n row-gap: ", ";\n }\n"])), devices.mobileAndTablet, function (_ref9) {
5260
+ var showSearch = _ref9.showSearch;
5228
5261
  return showSearch ? '110px' : '12px';
5229
5262
  });
5230
5263
  var LogoContainer = /*#__PURE__*/styled.a(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n\n &&& .logoImg {\n height: 96px;\n width: 80px;\n }\n\n span > svg path,\n span > svg g path {\n fill: var(--color-primary-black);\n }\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
@@ -5955,6 +5988,8 @@ var Navigation = function Navigation(_ref) {
5955
5988
  var onCloseSearchHandler = function onCloseSearchHandler() {
5956
5989
  setshowSearch(false);
5957
5990
  };
5991
+ var _useViewport = useViewport(),
5992
+ isMobile = _useViewport.isMobile;
5958
5993
  return /*#__PURE__*/React__default.createElement(NavigationWrapper, {
5959
5994
  isMenuOpen: showMenu,
5960
5995
  className: className,
@@ -5965,7 +6000,8 @@ var Navigation = function Navigation(_ref) {
5965
6000
  style: {
5966
6001
  height: "" + fullScreenHeight
5967
6002
  },
5968
- onClick: onCloseSearchHandler
6003
+ onClick: onCloseSearchHandler,
6004
+ isMobile: isMobile
5969
6005
  })), /*#__PURE__*/React__default.createElement(NavigationGrid, null, /*#__PURE__*/React__default.createElement(NavContainerGridItem, {
5970
6006
  columnStartDesktop: 1,
5971
6007
  columnSpanDesktop: 18,
@@ -7396,10 +7432,10 @@ var ImageCarouselWrapper = /*#__PURE__*/styled.div(_templateObject$N || (_templa
7396
7432
  var imagesHeightDevice = _ref2.imagesHeightDevice;
7397
7433
  return "&&& {\n .swipe-slide > figure {\n " + getImageSlideStyles(imagesHeightDevice) + "\n }\n }";
7398
7434
  });
7399
- var CardsCarouselWrapper = /*#__PURE__*/styled.div(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n @media ", " {\n && {\n .swipe-slide {\n ", "\n }\n }\n}}"])), function (_ref3) {
7435
+ var CardsCarouselWrapper = /*#__PURE__*/styled.div(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n @media ", " {\n && {\n .swipe-slide {\n ", "\n }\n }\n }\n}"])), function (_ref3) {
7400
7436
  var type = _ref3.type,
7401
7437
  isActive = _ref3.isActive;
7402
- return "\n & {\n .swipe-slide {\n " + getCardSlideDesktopStyles(type, isActive) + "\n }\n }\n ";
7438
+ return "\n & {\n .swipe-slide {\n " + getCardSlideDesktopStyles(type, isActive) + "\n }\n }\n\n @media " + devices.tablet + " {\n & {\n .swipe-slide {\n width: " + (type === CarouselType.SmallCard ? '30%' : '40%') + ";\n }\n }\n }\n ";
7403
7439
  }, devices.mobile, /*#__PURE__*/getCardSlideMobileStyles());
7404
7440
  var TitleButtonsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 28px;\n\n @media ", " {\n padding-bottom: 0;\n }\n\n @media ", " {\n margin-bottom: 20px;\n }\n"])), devices.mobile, devices.mobile);
7405
7441
  var CarouselInfoWrapper = /*#__PURE__*/styled.div(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n user-select: text;\n"])));
@@ -7409,10 +7445,13 @@ var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$e || (_templateObj
7409
7445
  });
7410
7446
  var ButtonsWrapper = /*#__PURE__*/styled.div(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: start;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
7411
7447
  var TitleGridItem = /*#__PURE__*/styled(GridItem)(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 10;\n }\n"])), devices.tablet);
7412
- var SwipeGridWrapper = /*#__PURE__*/styled(GridItem)(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n\n @media ", " {\n grid-column: 1 / span 14;\n }\n\n @media ", " {\n grid-column: 2 / span 13;\n }\n"])), function (_ref5) {
7448
+ var SwipeGridWrapper = /*#__PURE__*/styled(GridItem)(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n\n @media ", " {\n grid-column: ", ";\n }\n\n @media ", " {\n grid-column: 2 / span 13;\n }\n"])), function (_ref5) {
7413
7449
  var active = _ref5.active;
7414
7450
  return active ? 'grid-column: 1 / span 16' : '';
7415
- }, devices.tablet, devices.mobile);
7451
+ }, devices.tablet, function (_ref6) {
7452
+ var active = _ref6.active;
7453
+ return active ? '1 / span 14' : '2 / span 14';
7454
+ }, devices.mobile);
7416
7455
 
7417
7456
  var _templateObject$O, _templateObject2$B;
7418
7457
  var SWIPE_SLIDE_CLASS_NAME = 'swipe-slide';
@@ -7653,7 +7692,11 @@ var Swipe = /*#__PURE__*/forwardRef(function (_ref, ref) {
7653
7692
  };
7654
7693
  var handleTouchEnd = function handleTouchEnd() {
7655
7694
  isDragging.current = false;
7656
- navigateOnSwipeEnd();
7695
+ if (isClickPrevented.current) {
7696
+ navigateOnSwipeEnd();
7697
+ } else {
7698
+ setDragTranslateX(null);
7699
+ }
7657
7700
  };
7658
7701
  var handleMouseMove = function handleMouseMove(e) {
7659
7702
  if (!isDragging.current || !isMouseDown.current || transitioning) return;
@@ -7784,6 +7827,7 @@ var Carousel = function Carousel(_ref) {
7784
7827
  }
7785
7828
  };
7786
7829
  var carouselTitleId = "carousel-title-" + title;
7830
+ var titleSemanticLevelValue = titleSemanticLevel ? "h" + titleSemanticLevel : 'h2';
7787
7831
  var Wrapper = type === CarouselType.Image ? ImageCarouselWrapper : CardsCarouselWrapper;
7788
7832
  return /*#__PURE__*/React__default.createElement(Wrapper, {
7789
7833
  className: className,
@@ -7804,9 +7848,9 @@ var Carousel = function Carousel(_ref) {
7804
7848
  id: carouselTitleId,
7805
7849
  isDescriptionPresent: !!description
7806
7850
  }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
7807
- size: "small",
7851
+ size: "medium",
7808
7852
  serif: true,
7809
- hierarchy: "h" + titleSemanticLevel
7853
+ hierarchy: titleSemanticLevelValue
7810
7854
  }, title)), /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
7811
7855
  size: "large"
7812
7856
  }, description)))), /*#__PURE__*/React__default.createElement(GridItem, {
@@ -12267,6 +12311,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
12267
12311
  return !isVideoSlide(slide);
12268
12312
  });
12269
12313
  var carouselTitleId = "highlights-carousel-title-" + carouselTitle;
12314
+ var titleSemanticLevelValue = titleSemanticLevel ? "h" + titleSemanticLevel : 'h2';
12270
12315
  var carouselRef = useRef(null);
12271
12316
  var onNext = function onNext() {
12272
12317
  var _carouselRef$current;
@@ -12289,9 +12334,9 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
12289
12334
  }, /*#__PURE__*/React__default.createElement(HeaderWrapper, {
12290
12335
  id: carouselTitleId
12291
12336
  }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
12292
- size: "small",
12337
+ size: "medium",
12293
12338
  serif: true,
12294
- hierarchy: "h" + titleSemanticLevel
12339
+ hierarchy: titleSemanticLevelValue
12295
12340
  }, carouselTitle))), hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapperMobile, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
12296
12341
  onClickNext: onNext,
12297
12342
  onClickPrev: onPrev
@@ -12322,37 +12367,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
12322
12367
  })));
12323
12368
  };
12324
12369
 
12325
- function styleInject(css, ref) {
12326
- if ( ref === void 0 ) ref = {};
12327
- var insertAt = ref.insertAt;
12328
-
12329
- if (!css || typeof document === 'undefined') { return; }
12330
-
12331
- var head = document.head || document.getElementsByTagName('head')[0];
12332
- var style = document.createElement('style');
12333
- style.type = 'text/css';
12334
-
12335
- if (insertAt === 'top') {
12336
- if (head.firstChild) {
12337
- head.insertBefore(style, head.firstChild);
12338
- } else {
12339
- head.appendChild(style);
12340
- }
12341
- } else {
12342
- head.appendChild(style);
12343
- }
12344
-
12345
- if (style.styleSheet) {
12346
- style.styleSheet.cssText = css;
12347
- } else {
12348
- style.appendChild(document.createTextNode(css));
12349
- }
12350
- }
12351
-
12352
- var css_248z = "@font-face {\n font-family: 'GreyLLTT';\n src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Regular.woff2') format('woff2');\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'GreyLLTT';\n src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Medium.woff2') format('woff2');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'GreyLLTT';\n src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Bold.woff2') format('woff2');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'VictorSerif';\n src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-Medium.woff2')\n format('woff2');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'VictorSerif';\n src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-MediumItalic.woff2')\n format('woff2');\n font-weight: 500;\n font-style: italic;\n font-display: swap;\n}\n";
12353
- styleInject(css_248z);
12354
-
12355
- var css_248z$1 = "/* ~~~~~ General Styling Classes ~~~~~ */\n.typography_color-primary__LOfDi {\n color: var(--color-primary);\n}\n\n.typography_color-black__6MHRL {\n color: var(--color-base-black);\n}\n\n.typography_color-white__PfW5s {\n color: var(--color-base-white);\n}\n\n.typography_color-red__iPlbG {\n color: var(--color-primary-red);\n}\n\n.typography_color-grey__GA1c2 {\n color: var(--color-base-dark-grey);\n}\n\n.typography_color-inherit__RDd0Y {\n color: inherit;\n}\n\n.typography_em__E6tX- {\n font-style: italic;\n}\n/* ~~~ */\n\n/* Display Headers */\n.typography_display__-F3p4 {\n margin: 0;\n font-family: var(--font-family-sans);\n line-height: 100%;\n\n &.typography_large__uq0zC {\n font-size: 96px;\n font-weight: 700;\n letter-spacing: -5px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 68px;\n font-weight: 500;\n letter-spacing: -3px;\n }\n\n /* Serif and Italic styles */\n &.typography_serif__VSO38,\n &.typography_em__E6tX- {\n font-family: var(--font-family-serif);\n font-weight: 500;\n }\n\n /* Serif and Italic adjustments */\n &.typography_large__uq0zC.typography_serif__VSO38,\n &.typography_large__uq0zC.typography_em__E6tX- {\n letter-spacing: -3px;\n }\n\n &.typography_small__wfQ0K.typography_serif__VSO38,\n &.typography_small__wfQ0K.typography_em__E6tX- {\n letter-spacing: -2px;\n }\n\n @media (max-width: 699px) {\n &.typography_large__uq0zC {\n font-size: 38px;\n letter-spacing: -1.5px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 32px;\n letter-spacing: -1.5px;\n }\n\n &.typography_large__uq0zC.typography_serif__VSO38,\n &.typography_large__uq0zC.typography_em__E6tX-,\n &.typography_small__wfQ0K.typography_serif__VSO38,\n &.typography_small__wfQ0K.typography_em__E6tX- {\n letter-spacing: -0.5px;\n }\n }\n}\n\n/* Headers */\n.typography_header__BexiD {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n\n &.typography_large__uq0zC {\n font-size: 44px;\n line-height: 48px;\n letter-spacing: -1.5px;\n }\n\n &.typography_medium__K0uZD {\n font-size: 34px;\n line-height: 40px;\n letter-spacing: -1px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 26px;\n line-height: 32px;\n letter-spacing: -0.5px;\n }\n\n /* Serif and Italic styles */\n &.typography_serif__VSO38,\n &.typography_em__E6tX- {\n font-family: var(--font-family-serif);\n }\n\n /* Serif and Italic letter-spacing overrides */\n &.typography_large__uq0zC.typography_serif__VSO38,\n &.typography_large__uq0zC.typography_em__E6tX- {\n letter-spacing: -0.5px;\n }\n\n &.typography_medium__K0uZD.typography_serif__VSO38,\n &.typography_medium__K0uZD.typography_em__E6tX- {\n letter-spacing: -0.5px;\n }\n\n &.typography_small__wfQ0K.typography_serif__VSO38,\n &.typography_small__wfQ0K.typography_em__E6tX- {\n letter-spacing: -0.5px;\n }\n\n @media (max-width: 699px) {\n &.typography_large__uq0zC {\n font-size: 28px;\n line-height: 34px;\n letter-spacing: -1.5px;\n }\n\n &.typography_medium__K0uZD {\n font-size: 24px;\n line-height: 28px;\n letter-spacing: -1px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 20px;\n line-height: 26px;\n letter-spacing: -0.75px;\n }\n\n /* Mobile overrides for serif/italic letter-spacing */\n &.typography_large__uq0zC.typography_serif__VSO38,\n &.typography_large__uq0zC.typography_em__E6tX-,\n &.typography_medium__K0uZD.typography_serif__VSO38,\n &.typography_medium__K0uZD.typography_em__E6tX-,\n &.typography_small__wfQ0K.typography_serif__VSO38,\n &.typography_small__wfQ0K.typography_em__E6tX- {\n letter-spacing: -0.5px;\n }\n }\n}\n\n/* Subtitle */\n.typography_subtitle__aoFTV {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n\n &.typography_large__uq0zC {\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n @media (max-width: 699px) {\n &.typography_large__uq0zC {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.2px;\n }\n }\n}\n\n/* Body Copy */\n.typography_bodycopy__vYtQ8 {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n\n &.typography_large__uq0zC {\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n }\n\n &.typography_medium__K0uZD {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.5px;\n }\n\n @media (max-width: 699px) {\n &.typography_large__uq0zC {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n &.typography_medium__K0uZD {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.2px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 11px;\n line-height: 16px;\n letter-spacing: -0.2px;\n }\n }\n}\n\n/* Overline */\n.typography_overline__EnUK3 {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n text-transform: uppercase;\n\n &.typography_large__uq0zC {\n font-size: 14px;\n line-height: 18px;\n letter-spacing: 0.3px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 12px;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n @media (max-width: 699px) {\n &.typography_large__uq0zC {\n line-height: 17px;\n letter-spacing: 0.3px; /* Added to ensure it stays */\n }\n\n &.typography_small__wfQ0K {\n line-height: 14px;\n letter-spacing: 0.3px;\n }\n }\n}\n\n/* Button Text */\n.typography_buttontext__vcxNi {\n margin: 0;\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 20px;\n letter-spacing: -0.5px;\n font-weight: 400;\n\n @media (max-width: 699px) {\n font-weight: 500;\n line-height: 17px;\n }\n}\n\n/* Caption Text */\n.typography_captiontext__91UFb {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n\n @media (max-width: 699px) {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.2px;\n }\n}\n\n/* Navigation Text */\n.typography_navigationtext__YfGf7 {\n margin: 0;\n font-family: var(--font-family-sans);\n font-size: 19px;\n line-height: 19px;\n letter-spacing: 0.4px;\n font-weight: 500;\n\n @media (max-width: 699px) {\n font-size: 17px;\n line-height: 17px;\n }\n}\n";
12370
+ var css_248z$1 = "@font-face {\n font-family: 'GreyLLTT';\n src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Regular.woff2') format('woff2');\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'GreyLLTT';\n src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Medium.woff2') format('woff2');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'GreyLLTT';\n src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Bold.woff2') format('woff2');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'VictorSerif';\n src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-Medium.woff2')\n format('woff2');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'VictorSerif';\n src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-MediumItalic.woff2')\n format('woff2');\n font-weight: 500;\n font-style: italic;\n font-display: swap;\n}\n";
12356
12371
  styleInject(css_248z$1);
12357
12372
 
12358
12373
  var css_248z$2 = ".core-theme-module_coreTheme__pWxYB {\n /* RBO Red */\n /* Primary Palette */\n --color-primary: #1a1a1a;\n --color-primary-background: #eb0a0a;\n --color-primary-red: #eb0a0a;\n --color-primary-black: #1a1a1a;\n\n /* Base Colours */\n --color-base-white: #ffffff;\n --color-base-black: #000000;\n --color-base-dark-grey: #4c4f53;\n --color-base-mid-grey: #72767c;\n --color-base-light-grey: #e9e9e9;\n --color-base-transparent: transparent;\n\n /* States */\n --color-state-error: #cc071e;\n --color-state-medium: #ffce45;\n --color-state-good: #2a874a;\n --color-state-focused: #1e1da0;\n --color-state-disabled: #b3b3b3;\n\n /* RBO Red (Core) */\n --color-rbo-red-hovered: #c40808;\n --color-rbo-red-pressed: #9d0707;\n\n /* RBO Black */\n --color-rbo-black-hovered: #575757;\n --color-rbo-black-pressed: #353535;\n\n /* Black */\n --color-black-hovered: #575757;\n --color-black-pressed: #353535;\n\n /* White */\n --color-white-hovered: #fafafa;\n --color-white-pressed: #f2f2f2;\n\n /* Secondary Palette */\n --color-secondary-yellow: #ffce45;\n --color-secondary-pink: #ff36d0;\n --color-secondary-orange: #ff6700;\n --color-secondary-blue: #5f9cff;\n\n /* Core theme colors */\n --base-color-primary: #c8102e;\n --base-color-core: #c8102e;\n --base-color-stream: #1866dc;\n --base-color-cinema: #1a1a1a;\n --base-color-white: #ffffff;\n --base-color-black: #000000;\n --base-color-dark-grey: #4c4f53;\n --base-color-mid-grey: #72767c;\n --base-color-light-grey: #e9e9e9;\n --base-color-transparent: transparent;\n --base-color-errorstate: #eb0a0a;\n --base-color-mediumstate: #ffce45;\n --base-color-goodstate: #2a874a;\n --base-color-progress: #1866dc;\n --base-color-navigation: #c8102e;\n --base-color-lapislazuli: #0060a0;\n --base-color-lemonchiffon: #fffbbe;\n\n --button-height: 48px;\n --button-line-height: 20px;\n --button-padding-x: 20px;\n --button-padding-y: 14px;\n --button-padding-y-icon: 12px;\n --button-icon-margin: 12px;\n --button-icon-width: 20px;\n --button-icon-height: 20px;\n --button-font-size: 14px;\n --button-font-weight: 400;\n --button-color: var(--color-base-white);\n --button-bg-color: var(--color-primary-red);\n --button-hover-color: var(--color-rbo-red-hovered);\n --button-pressed-color: var(--color-rbo-red-pressed);\n --button-secondary-color: var(--color-primary-red);\n --button-secondary-hover-color: var(--color-rbo-red-hovered);\n --button-secondary-pressed-color: var(--color-rbo-red-pressed);\n --button-tertiary-color: var(--color-primary-black);\n --button-tertiary-hover-color: var(--color-rbo-black-hovered);\n --button-tertiary-pressed-color: var(--color-rbo-black-pressed);\n --button-auxiliary-color: var(--color-primary-black);\n --button-auxiliary-bg-color: var(--color-base-transparent);\n\n/* ----- Variables already used in Harmonic START ----- */\n --grid-column-gap: 36px;\n --grid-margin: 10%;\n\n --rotator-button-width: 60px;\n --rotator-button-icon-width: 36px;\n --rotator-button-color: var(--color-primary-black);\n --rotator-button-bg-color: var(--color-base-light-grey);\n --rotator-button-hover-color: var(--color-base-white);\n --rotator-button-hover-bg-color: var(--color-primary-red);\n\n --carousel-image-caption-height: 17px;\n \n @media (max-width: 699px) {\n --grid-column-gap: 12px;\n --grid-margin: 20px;\n --rotator-button-width: 40px;\n --rotator-button-icon-width: 24px;\n --carousel-image-caption-height: 14px;\n }\n\n @media (min-width: 700px) and (max-width: 1139px) {\n --grid-column-gap: 20px;\n --grid-margin: 32px;\n --rotator-button-width: 44px;\n --rotator-button-icon-width: 24px;\n --carousel-image-caption-height: 14px;\n }\n\n/* ----- Variables already used in Harmonic END ----- */\n\n --font-size-header-1: 96px;\n --font-weight-header-1: 500;\n --letter-spacing-header-1: 2px;\n --line-height-header-1: 110px;\n --margin-header-1: 0.67em 0;\n\n --font-size-header-2: 68px;\n --font-weight-header-2: 500;\n --letter-spacing-header-2: 1px;\n --line-height-header-2: 72px;\n --margin-header-2: 0.83em 0;\n\n --font-size-header-3: 44px;\n --font-weight-header-3: 500;\n --letter-spacing-header-3: 1px;\n --line-height-header-3: 48px;\n --margin-header-3: 1em 0;\n\n --font-size-header-4: 34px;\n --font-weight-header-4: 500;\n --letter-spacing-header-4: 1px;\n --line-height-header-4: 40px;\n --margin-header-4: 1.33em 0;\n\n --font-size-header-5: 24px;\n --font-weight-header-5: 500;\n --letter-spacing-header-5: 1px;\n --line-height-header-5: 30px;\n --margin-header-5: 1.67em 0;\n\n --font-size-header-6: 20px;\n --font-weight-header-6: 500;\n --letter-spacing-header-6: 1px;\n --line-height-header-6: 28px;\n --margin-header-6: 2.33em 0;\n\n --font-size-altHeader-3: 44px;\n --font-weight-altHeader-3: normal;\n --letter-spacing-altHeader-3: normal;\n --line-height-altHeader-3: 48px;\n\n --font-size-altHeader-4: 34px;\n --font-weight-altHeader-4: normal;\n --letter-spacing-altHeader-4: normal;\n --line-height-altHeader-4: 44px;\n\n --font-size-altHeader-5: 24px;\n --font-weight-altHeader-5: normal;\n --letter-spacing-altHeader-5: normal;\n --line-height-altHeader-5: 30px;\n\n --font-size-altHeader-6: 20px;\n --font-weight-altHeader-6: normal;\n --letter-spacing-altHeader-6: normal;\n --line-height-altHeader-6: 28px;\n\n --font-size-overline-1: 14px;\n --font-weight-overline-1: 500;\n --letter-spacing-overline-1: 1px;\n --line-height-overline-1: 16px;\n\n --font-size-overline-2: 12px;\n --font-weight-overline-2: 500;\n --letter-spacing-overline-2: 1px;\n --line-height-overline-2: 14px;\n\n --font-size-overline-3: 10px;\n --font-weight-overline-3: 500;\n --letter-spacing-overline-3: 1px;\n --line-height-overline-3: 12px;\n\n --font-size-overline-4: 8px;\n --font-weight-overline-4: 500;\n --letter-spacing-overline-4: 1px;\n --line-height-overline-4: 10px;\n\n --font-size-body-1: 19px;\n --font-weight-body-1: 400;\n --letter-spacing-body-1: normal;\n --line-height-body-1: 26px;\n\n --font-size-body-2: 16px;\n --font-weight-body-2: 400;\n --letter-spacing-body-2: normal;\n --line-height-body-2: 22px;\n\n --font-size-body-3: 14px;\n --font-weight-body-3: 400;\n --letter-spacing-body-3: normal;\n --line-height-body-3: 20px;\n\n --font-size-subtitle-1: 18px;\n --font-weight-subtitle-1: 500;\n --letter-spacing-subtitle-1: 1px;\n --line-height-subtitle-1: 22px;\n\n --font-size-subtitle-2: 14px;\n --font-weight-subtitle-2: 500;\n --letter-spacing-subtitle-2: 1px;\n --line-height-subtitle-2: 22px;\n\n --font-size-title-description: 20px;\n --line-height-title-description: 28px;\n\n --line-height-listing: 36px;\n --font-size-individual-listing-name: 19px;\n --line-height-individual-listing-name: 24px;\n --line-height-people-listing-gap: 24px;\n\n --font-family-header: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-altHeader: 'adobe-garamond-pro';\n --font-family-body: 'adobe-garamond-pro';\n --font-family-body-italics: 'adobe-garamond-pro';\n --font-family-buttons: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-overline: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-subtitle: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-name: 'adobe-garamond-pro';\n\n --font-feature-settings-header: 'tnum' on, 'lnum' on;\n --font-feature-settings-altHeader: 'pnum' on, 'onum' on;\n --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n --text-transform-header: uppercase;\n --text-transform-altHeader: none;\n --text-transform-body: none;\n --text-transform-overline: uppercase;\n --text-transform-subtitle: uppercase;\n\n --word-break-header: break-word;\n --word-break-altHeader: break-word;\n --word-break-body: break-word;\n --word-break-overline: break-word;\n --word-break-subtitle: break-word;\n\n --font-family-navigation: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-size-navigation: 13px;\n --font-weight-navigation: 500;\n --line-height-navigation: 16px;\n --text-transform-navigation: uppercase;\n --letter-spacing-navigation: 1px;\n\n --navigation-small-gap: 16px;\n --navigation-middle-gap: 20px;\n --navigation-large-gap: 24px;\n --navigation-xlarge-gap: 36px;\n --navigation-large-margin: 60px;\n\n --font-size-search: 24px;\n --font-family-search: 'adobe-garamond-pro';\n\n --grid-outer-margin: 50px;\n --grid-template-columns: 14px calc(10% - 86px) repeat(12, minmax(0, 1fr)) calc(10% - 86px) 14px;\n\n --footer-height: 380px;\n --footer-padding-top: 44px;\n --footer-padding-bottom: 44px;\n --footer-items-gap: 32px;\n --footer-media-gap: 32px;\n --footer-media-icon-width: 24px;\n --footer-media-icon-height: 24px;\n --footer-vertical-spacing-lg: 58px;\n --footer-vertical-spacing-sm: 16px;\n\n --text-link-underline-offset: 8px;\n --cards-spacing-stack: 40px;\n\n --editorial-subtitle-margin-bottom: 16px;\n --editorial-margin-between: 24px;\n --editorial-spacing-hover: 4px;\n --anchor-tabs-height: 70px;\n\n --font-family-sans: 'GreyLLTT', 'Roboto', sans-serif;\n --font-family-serif: 'VictorSerif', 'Inria Serif Regular', serif;\n\n --harmonic-text-link-underline-offset: 6px;\n --harmonic-font-size-navigation: 19px;\n\n --announcement-banner-color: var(--color-base-white);\n --announcement-banner-bg-color: var(--color-primary-red);\n --announcement-banner-hover-color: var(--color-white-hovered);\n --announcement-banner-pressed-color: var(--color-white-pressed);\n\n --information-panel-color: var(--color-base-white);\n --information-panel-bg-color: var(--color-primary-red);\n --information-panel-button-color: var(--color-primary-black);\n --information-panel-button-bg-color: var(--color-base-white);\n --information-panel-button-hover-color: var(--color-white-hovered);\n --information-panel-button-pressed-color: var(--color-white-pressed);\n\n --heading-promo-bg-color: var(--color-primary-red);\n\n @media (max-width: 699px) {\n --font-size-header-1: 38px;\n --font-weight-header-1: 500;\n --letter-spacing-header-1: 1px;\n --line-height-header-1: 42px;\n\n --font-size-header-2: 30px;\n --font-weight-header-2: 500;\n --letter-spacing-header-2: 1px;\n --line-height-header-2: 34px;\n\n --font-size-header-3: 26px;\n --font-weight-header-3: 500;\n --letter-spacing-header-3: 1px;\n --line-height-header-3: 30px;\n\n --font-size-header-4: 24px;\n --font-weight-header-4: 500;\n --letter-spacing-header-4: 1px;\n --line-height-header-4: 28px;\n\n --font-size-header-5: 20px;\n --font-weight-header-5: 500;\n --letter-spacing-header-5: 1px;\n --line-height-header-5: 28px;\n\n --font-size-header-6: 17px;\n --font-weight-header-6: 500;\n --letter-spacing-header-6: 1px;\n --line-height-header-6: 24px;\n\n --font-size-altHeader-3: 26px;\n --font-weight-altHeader-3: normal;\n --letter-spacing-altHeader-3: normal;\n --line-height-altHeader-3: 30px;\n\n --font-size-altHeader-4: 24px;\n --font-weight-altHeader-4: normal;\n --letter-spacing-altHeader-4: normal;\n --line-height-altHeader-4: 28px;\n\n --font-size-altHeader-5: 20px;\n --font-weight-altHeader-5: normal;\n --letter-spacing-altHeader-5: normal;\n --line-height-altHeader-5: 28px;\n\n --font-size-altHeader-6: 17px;\n --font-weight-altHeader-6: normal;\n --letter-spacing-altHeader-6: normal;\n --line-height-altHeader-6: 24px;\n\n --font-size-overline-1: 14px;\n --font-weight-overline-1: 500;\n --letter-spacing-overline-1: 1px;\n --line-height-overline-1: 16px;\n\n --font-size-overline-2: 12px;\n --font-weight-overline-2: 500;\n --letter-spacing-overline-2: 1px;\n --line-height-overline-2: 14px;\n\n --font-size-body-1: 17px;\n --font-weight-body-1: 400;\n --letter-spacing-body-1: normal;\n --line-height-body-1: 24px;\n\n --font-size-body-2: 12px;\n --font-weight-body-2: 400;\n --letter-spacing-body-2: normal;\n --line-height-body-2: 18px;\n\n --font-size-body-3: 11px;\n --font-weight-body-3: 400;\n --letter-spacing-body-3: normal;\n --line-height-body-3: 16px;\n\n --font-size-subtitle-1: 16px;\n --font-weight-subtitle-1: 500;\n --letter-spacing-subtitle-1: 1px;\n --line-height-subtitle-1: 24px;\n\n --font-size-subtitle-2: 14px;\n --font-weight-subtitle-2: 500;\n --letter-spacing-subtitle-2: 1px;\n --line-height-subtitle-2: 18px;\n\n --font-size-title-description: 17px;\n --line-height-title-description: 24px;\n --line-height-people-listing-gap: 16px;\n\n --font-size-search: 20px;\n --font-family-search: 'adobe-garamond-pro';\n\n --font-family-header: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-altHeader: 'adobe-garamond-pro';\n --font-family-body: 'adobe-garamond-pro';\n --font-family-body-italics: 'adobe-garamond-pro';\n --font-family-buttons: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-overline: 'Gotham SSm Medium', sans-serif;\n --font-family-subtitle: 'Gotham SSm Medium', 'Montserrat', sans-serif;\n --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-name: 'adobe-garamond-pro';\n\n --font-feature-settings-header: 'tnum' on, 'lnum' on;\n --font-feature-settings-altHeader: 'pnum' on, 'onum' on;\n --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n --text-transform-header: uppercase;\n --text-transform-altHeader: none;\n --text-transform-body: none;\n --text-transform-overline: uppercase;\n --text-transform-subtitle: uppercase;\n\n --word-break-header: break-word;\n --word-break-altHeader: break-word;\n --word-break-body: break-word;\n --word-break-overline: break-word;\n --word-break-subtitle: break-word;\n\n --grid-template-columns: calc(20px - 12px) repeat(12, minmax(0, 1fr)) calc(20px - 12px);\n\n --footer-height: auto;\n --footer-padding-top: 20px;\n --footer-padding-bottom: 20px;\n --footer-items-gap: 12px;\n --footer-media-icon-width: 28px;\n --footer-media-icon-height: 28px;\n --footer-vertical-spacing-lg: 24px;\n --footer-vertical-spacing-sm: 24px;\n\n --anchor-tabs-height: 60px;\n }\n\n @media (min-width: 700px) and (max-width: 1139px) {\n --grid-template-columns: calc(32px - 20px) repeat(12, minmax(0, 1fr)) calc(32px - 20px);\n --font-size-header-6: 17px;\n --font-size-altHeader-4: 24px;\n --font-size-body-1: 17px;\n\n --footer-media-gap: 24px;\n --footer-padding-top: 40px;\n --footer-padding-bottom: 40px;\n }\n}\n";